Add 2 files

index.html

@@ -14,421 +14,697 @@
             scroll-behavior: smooth;
         }
         
-        .path-container {
-            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+        .journey-path {
+            position: relative;
         }
         
-        .path-container.active {
-            flex: 3;
-            background-color: rgba(248, 108, 92, 0.03);
-        }
-        
-        .path-container.inactive {
-            flex: 1;
-            opacity: 0.8;
-        }
-        
-        .path-header {
-            transition: all 0.3s ease;
-        }
-        
-        .path-container.active .path-header {
+        .journey-path::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 50%;
+            width: 4px;
             background-color: #f86c5c;
-            color: white;
-        }
-        
-        .path-container.inactive .path-header {
-            background-color: #f0f0f0;
+            transform: translateX(-50%);
+            z-index: 1;
         }
         
-        .branch-card {
-            border-left: 4px solid #f86c5c;
-            transition: all 0.3s ease;
+        .journey-step {
+            position: relative;
+            z-index: 2;
         }
         
-        .branch-card:hover {
-            transform: translateX(5px);
+        .journey-step::after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            width: 30px;
+            height: 30px;
+            background-color: white;
+            border: 4px solid #f86c5c;
+            border-radius: 50%;
+            transform: translateX(-50%);
+            z-index: 3;
         }
         
-        .step-item::before {
-            content: "";
+        .journey-arrow {
             position: absolute;
-            left: -30px;
-            top: 0;
-            height: 100%;
-            border-left: 2px dashed #f86c5c;
+            left: 50%;
+            color: #f86c5c;
+            transform: translateX(-50%);
+            z-index: 3;
         }
         
-        .step-item:last-child::before {
-            height: 50%;
+        .branch-path {
+            position: relative;
         }
         
-        .step-badge {
+        .branch-path::before {
+            content: "";
             position: absolute;
-            left: -42px;
             top: 0;
-            width: 24px;
-            height: 24px;
-            border-radius: 50%;
+            bottom: 0;
+            left: 25%;
+            width: 4px;
             background-color: #f86c5c;
-            color: white;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 12px;
-            font-weight: bold;
+            z-index: 1;
         }
         
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
+        .branch-step {
+            position: relative;
+            z-index: 2;
         }
         
-        .fade-in {
-            animation: fadeIn 0.6s ease forwards;
+        .branch-step::after {
+            content: "";
+            position: absolute;
+            left: 25%;
+            width: 20px;
+            height: 20px;
+            background-color: white;
+            border: 3px solid #f86c5c;
+            border-radius: 50%;
+            transform: translateX(-50%);
+            z-index: 3;
         }
         
-        .hover-grow {
-            transition: all 0.3s ease;
+        .branch-arrow {
+            position: absolute;
+            left: 25%;
+            color: #f86c5c;
+            transform: translateX(-50%);
+            z-index: 3;
         }
         
-        .hover-grow:hover {
-            transform: scale(1.02);
+        @media (max-width: 768px) {
+            .journey-path::before {
+                left: 1.5rem;
+            }
+            
+            .journey-step::after {
+                left: 1.5rem;
+            }
+            
+            .journey-arrow {
+                left: 1.5rem;
+            }
+            
+            .branch-path::before {
+                left: 1.5rem;
+            }
+            
+            .branch-step::after {
+                left: 1.5rem;
+            }
+            
+            .branch-arrow {
+                left: 1.5rem;
+            }
         }
     </style>
 </head>
-<body class="bg-white text-gray-800">
+<body class="bg-white">
+    <!-- Header -->
+    <header class="bg-white shadow-sm py-6">
+        <div class="container mx-auto px-4">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center">
+                    <div class="w-12 h-12 bg-[#f86c5c] rounded-full flex items-center justify-center text-white font-bold text-xl mr-3">
+                        A
+                    </div>
+                    <h1 class="text-2xl font-bold text-gray-800">Atecna</h1>
+                </div>
+                <nav class="hidden md:flex space-x-8">
+                    <a href="#" class="text-gray-600 hover:text-[#f86c5c]">Accueil</a>
+                    <a href="#" class="text-gray-600 hover:text-[#f86c5c]">Services</a>
+                    <a href="#" class="text-gray-600 hover:text-[#f86c5c]">Expertises</a>
+                    <a href="#" class="text-gray-600 hover:text-[#f86c5c]">Contact</a>
+                </nav>
+                <button class="md:hidden text-gray-600">
+                    <i class="fas fa-bars text-2xl"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+
     <!-- Hero Section -->
-    <section class="py-20 bg-white">
+    <section class="py-16 bg-gradient-to-r from-gray-50 to-white">
         <div class="container mx-auto px-4">
-            <div class="text-center max-w-4xl mx-auto">
-                <span class="inline-block bg-[#f86c5c] bg-opacity-10 text-[#f86c5c] px-4 py-1 rounded-full text-sm font-medium mb-4">
-                    Transformation IA sur-mesure
-                </span>
-                <h1 class="text-4xl md:text-5xl font-bold mb-6">Choisissez votre parcours d'accompagnement IA</h1>
+            <div class="max-w-4xl mx-auto text-center">
+                <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">
+                    Parcours d'accompagnement <span class="text-[#f86c5c]">Intelligence Artificielle</span>
+                </h1>
                 <p class="text-xl text-gray-600 mb-8">
-                    Deux approches complémentaires pour intégrer l'IA dans votre organisation, adaptées à vos ambitions et à votre rythme.
+                    Transformez votre entreprise grâce à nos parcours sur-mesure, conçus pour répondre à vos ambitions et défis spécifiques.
                 </p>
-                <div class="animate-bounce mt-8">
-                    <i class="fas fa-chevron-down text-[#f86c5c] text-2xl"></i>
+                <div class="flex justify-center space-x-4">
+                    <a href="#disruptive" class="bg-[#f86c5c] hover:bg-[#e05d4d] text-white px-6 py-3 rounded-lg font-medium transition duration-300">
+                        IA Disruptive
+                    </a>
+                    <a href="#operationnelle" class="bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">
+                        IA Opérationnelle
+                    </a>
                 </div>
             </div>
         </div>
     </section>
 
-    <!-- Interactive Path Selection -->
-    <section class="py-12 bg-gray-50">
+    <!-- Disruptive IA Journey -->
+    <section id="disruptive" class="py-16 bg-white">
         <div class="container mx-auto px-4">
-            <div class="flex flex-col md:flex-row gap-6 h-full">
-                <!-- Disruptive Path -->
-                <div class="path-container active rounded-xl shadow-md hover-grow" id="disruptive-path">
-                    <div class="path-header rounded-t-xl p-6 cursor-pointer" onclick="selectPath('disruptive')">
-                        <div class="flex items-center">
-                            <div class="bg-white text-[#f86c5c] w-14 h-14 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
-                                <i class="fas fa-bolt text-2xl"></i>
+            <div class="max-w-4xl mx-auto mb-16 text-center">
+                <div class="inline-block px-4 py-1 bg-[#f86c5c]/10 rounded-full mb-4">
+                    <span class="text-[#f86c5c] font-semibold">PARCOURS 1</span>
+                </div>
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
+                    IA <span class="text-[#f86c5c]">Disruptive</span>
+                </h2>
+                <p class="text-xl text-gray-600 mb-4">
+                    Créez un avantage concurrentiel avec des projets IA à fort impact.
+                </p>
+                <div class="bg-gray-100 p-4 rounded-lg inline-block">
+                    <p class="text-gray-800 font-medium">
+                        <span class="text-[#f86c5c]">🎯 Pour qui ?</span> Entreprises souhaitant transformer leur modèle ou se différencier fortement grâce à l'IA.
+                    </p>
+                </div>
+            </div>
+
+            <!-- Main Journey Path -->
+            <div class="journey-path max-w-4xl mx-auto">
+                <!-- Step 1 -->
+                <div class="journey-step pt-8 pb-16">
+                    <div class="journey-arrow -top-2">
+                        <i class="fas fa-chevron-down text-2xl"></i>
+                    </div>
+                    <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 md:p-8 ml-0 md:ml-16">
+                        <div class="flex items-start">
+                            <div class="bg-[#f86c5c]/10 p-3 rounded-lg mr-4">
+                                <i class="fas fa-chess-queen text-[#f86c5c] text-xl"></i>
                             </div>
                             <div>
-                                <h2 class="text-2xl font-bold">IA Disruptive</h2>
-                                <p class="text-sm opacity-90">Créez un avantage concurrentiel avec des projets IA à fort impact.</p>
+                                <h3 class="text-xl font-bold text-gray-800 mb-2">Offre Vision & Stratégie IA</h3>
+                                <p class="text-gray-600 mb-4">Jetez les bases d'une transformation IA réussie avec une vision claire et une stratégie adaptée.</p>
+                                
+                                <!-- Branch Path -->
+                                <div class="branch-path mt-6 ml-0 md:ml-8">
+                                    <!-- Sub-step 1 -->
+                                    <div class="branch-step pt-6 pb-8">
+                                        <div class="branch-arrow -top-2">
+                                            <i class="fas fa-chevron-down text-xl"></i>
+                                        </div>
+                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-5 ml-8 md:ml-12">
+                                            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
+                                                <span class="w-6 h-6 bg-[#f86c5c] text-white rounded-full flex items-center justify-center mr-2 text-sm">1</span>
+                                                Diagnostic stratégique
+                                            </h4>
+                                            <p class="text-gray-600">Analyse approfondie des opportunités business et évaluation de la maturité technique.</p>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Sub-step 2 -->
+                                    <div class="branch-step pt-6 pb-8">
+                                        <div class="branch-arrow -top-2">
+                                            <i class="fas fa-chevron-down text-xl"></i>
+                                        </div>
+                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-5 ml-8 md:ml-12">
+                                            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
+                                                <span class="w-6 h-6 bg-[#f86c5c] text-white rounded-full flex items-center justify-center mr-2 text-sm">2</span>
+                                                Définition de la vision IA
+                                            </h4>
+                                            <p class="text-gray-600">Formalisation d'une vision claire alignée avec les priorités métiers et l'ambition de l'entreprise.</p>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Sub-step 3 -->
+                                    <div class="branch-step pt-6 pb-8">
+                                        <div class="branch-arrow -top-2">
+                                            <i class="fas fa-chevron-down text-xl"></i>
+                                        </div>
+                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-5 ml-8 md:ml-12">
+                                            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
+                                                <span class="w-6 h-6 bg-[#f86c5c] text-white rounded-full flex items-center justify-center mr-2 text-sm">3</span>
+                                                Roadmap et gouvernance
+                                            </h4>
+                                            <p class="text-gray-600">Élaboration d'un plan d'action IA par phases, avec indicateurs de suivi, modèle de gouvernance et sponsoring interne.</p>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Sub-step 4 -->
+                                    <div class="branch-step pt-6 pb-0">
+                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-5 ml-8 md:ml-12">
+                                            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
+                                                <span class="w-6 h-6 bg-[#f86c5c] text-white rounded-full flex items-center justify-center mr-2 text-sm">4</span>
+                                                Identification des profils
+                                            </h4>
+                                            <p class="text-gray-600">Évaluation des équipes existantes et besoins futurs (recrutement, formation, leadership IA).</p>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
-                    <div class="p-6">
-                        <div class="mb-6">
-                            <h3 class="font-semibold text-[#f86c5c] mb-2">Pour qui ?</h3>
-                            <p class="text-sm text-gray-600">
-                                Entreprises souhaitant transformer leur modèle ou se différencier fortement grâce à l'IA.
-                            </p>
-                        </div>
-                        
-                        <!-- Branch 1 -->
-                        <div class="branch-card bg-white p-5 rounded-lg shadow-xs mb-6 fade-in">
-                            <h3 class="font-bold text-lg mb-3 flex items-center">
-                                <i class="fas fa-chess-queen text-[#f86c5c] mr-2"></i>
-                                Vision & stratégie IA
-                            </h3>
-                            <div class="ml-8 pl-4 relative">
-                                <!-- Step 1 -->
-                                <div class="step-item relative pb-6 pl-6">
-                                    <div class="step-badge">1</div>
-                                    <h4 class="font-semibold mb-1">Diagnostic stratégique</h4>
-                                    <p class="text-sm text-gray-600">Analyse des opportunités business et des capacités techniques.</p>
-                                </div>
-                                <!-- Step 2 -->
-                                <div class="step-item relative pb-6 pl-6">
-                                    <div class="step-badge">2</div>
-                                    <h4 class="font-semibold mb-1">Définition de la vision IA</h4>
-                                    <p class="text-sm text-gray-600">Alignement avec vos objectifs métiers et votre positionnement.</p>
-                                </div>
-                                <!-- Step 3 -->
-                                <div class="step-item relative pb-6 pl-6">
-                                    <div class="step-badge">3</div>
-                                    <h4 class="font-semibold mb-1">Roadmap et gouvernance</h4>
-                                    <p class="text-sm text-gray-600">Plan d'exécution réaliste et modèle de gouvernance adapté.</p>
-                                </div>
-                                <!-- Step 4 -->
-                                <div class="step-item relative pl-6">
-                                    <div class="step-badge">4</div>
-                                    <h4 class="font-semibold mb-1">Identification des profils</h4>
-                                    <p class="text-sm text-gray-600">Mobilisation des talents internes et identification des besoins en recrutement.</p>
-                                </div>
+                </div>
+                
+                <!-- Step 2 -->
+                <div class="journey-step pt-8 pb-16">
+                    <div class="journey-arrow -top-2">
+                        <i class="fas fa-chevron-down text-2xl"></i>
+                    </div>
+                    <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 md:p-8 ml-0 md:ml-16">
+                        <div class="flex items-start">
+                            <div class="bg-[#f86c5c]/10 p-3 rounded-lg mr-4">
+                                <i class="fas fa-rocket text-[#f86c5c] text-xl"></i>
                             </div>
-                        </div>
-                        
-                        <!-- Branch 2 -->
-                        <div class="branch-card bg-white p-5 rounded-lg shadow-xs fade-in">
-                            <h3 class="font-bold text-lg mb-3 flex items-center">
-                                <i class="fas fa-rocket text-[#f86c5c] mr-2"></i>
-                                Projets IA disruptifs
-                            </h3>
-                            <div class="ml-8 pl-4 relative">
-                                <!-- Step 1 -->
-                                <div class="step-item relative pb-6 pl-6">
-                                    <div class="step-badge">1</div>
-                                    <h4 class="font-semibold mb-1">Sélection de cas d'usage</h4>
-                                    <p class="text-sm text-gray-600">Identification des projets à fort potentiel différenciateur.</p>
-                                </div>
-                                <!-- Step 2 -->
-                                <div class="step-item relative pb-6 pl-6">
-                                    <div class="step-badge">2</div>
-                                    <h4 class="font-semibold mb-1">Déploiement par task-force</h4>
-                                    <p class="text-sm text-gray-600">Mise en place d'une équipe dédiée (chef de projet, experts...).</p>
-                                </div>
-                                <!-- Step 3 -->
-                                <div class="step-item relative pb-6 pl-6">
-                                    <div class="step-badge">3</div>
-                                    <h4 class="font-semibold mb-1">Renforcement d'équipe</h4>
-                                    <p class="text-sm text-gray-600">Complément de compétences si nécessaire.</p>
-                                </div>
-                                <!-- Step 4 -->
-                                <div class="step-item relative pl-6">
-                                    <div class="step-badge">4</div>
-                                    <h4 class="font-semibold mb-1">Mesure d'impact</h4>
-                                    <p class="text-sm text-gray-600">Évaluation des résultats et plan de scalabilité.</p>
+                            <div>
+                                <h3 class="text-xl font-bold text-gray-800 mb-2">Offre Projets IA Disruptifs</h3>
+                                <p class="text-gray-600 mb-4">Passez à l'action avec des projets concrets qui transformeront votre entreprise.</p>
+                                
+                                <!-- Branch Path -->
+                                <div class="branch-path mt-6 ml-0 md:ml-8">
+                                    <!-- Sub-step 1 -->
+                                    <div class="branch-step pt-6 pb-8">
+                                        <div class="branch-arrow -top-2">
+                                            <i class="fas fa-chevron-down text-xl"></i>
+                                        </div>
+                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-5 ml-8 md:ml-12">
+                                            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
+                                                <span class="w-6 h-6 bg-[#f86c5c] text-white rounded-full flex items-center justify-center mr-2 text-sm">1</span>
+                                                Sélection de cas d'usage
+                                            </h4>
+                                            <p class="text-gray-600">Ciblage de projets transformants à haute valeur ajoutée (différenciateurs métier).</p>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Sub-step 2 -->
+                                    <div class="branch-step pt-6 pb-8">
+                                        <div class="branch-arrow -top-2">
+                                            <i class="fas fa-chevron-down text-xl"></i>
+                                        </div>
+                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-5 ml-8 md:ml-12">
+                                            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
+                                                <span class="w-6 h-6 bg-[#f86c5c] text-white rounded-full flex items-center justify-center mr-2 text-sm">2</span>
+                                                Déploiement par task-force
+                                            </h4>
+                                            <p class="text-gray-600">Constitution d'une task-force (chef de projet, tech lead, UX, devs).</p>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Sub-step 3 -->
+                                    <div class="branch-step pt-6 pb-8">
+                                        <div class="branch-arrow -top-2">
+                                            <i class="fas fa-chevron-down text-xl"></i>
+                                        </div>
+                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-5 ml-8 md:ml-12">
+                                            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
+                                                <span class="w-6 h-6 bg-[#f86c5c] text-white rounded-full flex items-center justify-center mr-2 text-sm">3</span>
+                                                Renforcement d'équipe
+                                            </h4>
+                                            <p class="text-gray-600">Apport ponctuel de compétences manquantes pour garantir la réussite.</p>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Sub-step 4 -->
+                                    <div class="branch-step pt-6 pb-0">
+                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-5 ml-8 md:ml-12">
+                                            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
+                                                <span class="w-6 h-6 bg-[#f86c5c] text-white rounded-full flex items-center justify-center mr-2 text-sm">4</span>
+                                                Mesure d'impact et scalabilité
+                                            </h4>
+                                            <p class="text-gray-600">Analyse des résultats, itération, et planification de l'extension à grande échelle.</p>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
                 
-                <!-- Operational Path -->
-                <div class="path-container inactive rounded-xl shadow-md hover-grow" id="operational-path">
-                    <div class="path-header rounded-t-xl p-6 cursor-pointer" onclick="selectPath('operational')">
-                        <div class="flex items-center">
-                            <div class="bg-white text-gray-600 w-14 h-14 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
-                                <i class="fas fa-cogs text-2xl"></i>
+                <!-- Results -->
+                <div class="journey-step pt-8 pb-0">
+                    <div class="bg-[#f86c5c]/10 border border-[#f86c5c]/20 rounded-xl p-6 md:p-8 ml-0 md:ml-16">
+                        <div class="flex items-start">
+                            <div class="bg-[#f86c5c] p-3 rounded-lg mr-4">
+                                <i class="fas fa-trophy text-white text-xl"></i>
                             </div>
                             <div>
-                                <h2 class="text-2xl font-bold">IA Opérationnelle</h2>
-                                <p class="text-sm opacity-90">Adoptez l'IA au quotidien pour des gains rapides et mesurables.</p>
+                                <h3 class="text-xl font-bold text-gray-800 mb-2">Résultats attendus</h3>
+                                <p class="text-gray-600">
+                                    Transformation profonde de votre modèle d'affaires, différenciation concurrentielle durable, 
+                                    création de nouveaux revenus et avantages stratégiques à long terme grâce à l'IA.
+                                </p>
                             </div>
                         </div>
                     </div>
-                    <div class="p-6 hidden">
-                        <div class="mb-6">
-                            <h3 class="font-semibold text-gray-600 mb-2">Pour qui ?</h3>
-                            <p class="text-sm text-gray-600">
-                                Entreprises cherchant des ROI rapides, sans refonte métier majeure.
-                            </p>
-                        </div>
-                        
-                        <!-- Branch 1 -->
-                        <div class="branch-card bg-white p-5 rounded-lg shadow-xs mb-6">
-                            <h3 class="font-bold text-lg mb-3 flex items-center">
-                                <i class="fas fa-seedling text-gray-500 mr-2"></i>
-                                Acculturation & ROI rapide
-                            </h3>
-                            <div class="ml-8 pl-4 relative">
-                                <!-- Step 1 -->
-                                <div class="step-item relative pb-6 pl-6">
-                                    <div class="step-badge">1</div>
-                                    <h4 class="font-semibold mb-1">Diagnostic transverse</h4>
-                                    <p class="text-sm text-gray-600">Analyse globale des usages et processus internes.</p>
-                                </div>
-                                <!-- Step 2 -->
-                                <div class="step-item relative pb-6 pl-6">
-                                    <div class="step-badge">2</div>
-                                    <h4 class="font-semibold mb-1">Cartographie des use cases</h4>
-                                    <p class="text-sm text-gray-600">Identification des opportunités actionnables rapidement.</p>
-                                </div>
-                                <!-- Step 3 -->
-                                <div class="step-item relative pb-6 pl-6">
-                                    <div class="step-badge">3</div>
-                                    <h4 class="font-semibold mb-1">Formations et ateliers</h4>
-                                    <p class="text-sm text-gray-600">Sensibilisation et montée en compétences des équipes.</p>
-                                </div>
-                                <!-- Step 4 -->
-                                <div class="step-item relative pl-6">
-                                    <div class="step-badge">4</div>
-                                    <h4 class="font-semibold mb-1">Mise en œuvre</h4>
-                                    <p class="text-sm text-gray-600">Déploiement avec indicateurs de performance simples.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Operational IA Journey -->
+    <section id="operationnelle" class="py-16 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <div class="max-w-4xl mx-auto mb-16 text-center">
+                <div class="inline-block px-4 py-1 bg-blue-100 rounded-full mb-4">
+                    <span class="text-blue-600 font-semibold">PARCOURS 2</span>
+                </div>
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
+                    IA <span class="text-blue-600">Opérationnelle</span>
+                </h2>
+                <p class="text-xl text-gray-600 mb-4">
+                    Adoptez l'IA au quotidien pour des gains rapides et mesurables.
+                </p>
+                <div class="bg-gray-100 p-4 rounded-lg inline-block">
+                    <p class="text-gray-800 font-medium">
+                        <span class="text-blue-600">🎯 Pour qui ?</span> Entreprises cherchant des ROI rapides, sans refonte métier majeure.
+                    </p>
+                </div>
+            </div>
+
+            <!-- Main Journey Path -->
+            <div class="journey-path max-w-4xl mx-auto">
+                <!-- Step 1 -->
+                <div class="journey-step pt-8 pb-16">
+                    <div class="journey-arrow -top-2">
+                        <i class="fas fa-chevron-down text-2xl"></i>
+                    </div>
+                    <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 md:p-8 ml-0 md:ml-16">
+                        <div class="flex items-start">
+                            <div class="bg-blue-100 p-3 rounded-lg mr-4">
+                                <i class="fas fa-bolt text-blue-600 text-xl"></i>
+                            </div>
+                            <div>
+                                <h3 class="text-xl font-bold text-gray-800 mb-2">Offre Acculturation & ROI rapide</h3>
+                                <p class="text-gray-600 mb-4">Obtenez des résultats concrets rapidement tout en formant vos équipes.</p>
+                                
+                                <!-- Branch Path -->
+                                <div class="branch-path mt-6 ml-0 md:ml-8">
+                                    <!-- Sub-step 1 -->
+                                    <div class="branch-step pt-6 pb-8">
+                                        <div class="branch-arrow -top-2">
+                                            <i class="fas fa-chevron-down text-xl"></i>
+                                        </div>
+                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-5 ml-8 md:ml-12">
+                                            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
+                                                <span class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center mr-2 text-sm">1</span>
+                                                Diagnostic transverse
+                                            </h4>
+                                            <p class="text-gray-600">Cartographie des usages actuels et détection des leviers rapides d'optimisation.</p>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Sub-step 2 -->
+                                    <div class="branch-step pt-6 pb-8">
+                                        <div class="branch-arrow -top-2">
+                                            <i class="fas fa-chevron-down text-xl"></i>
+                                        </div>
+                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-5 ml-8 md:ml-12">
+                                            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
+                                                <span class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center mr-2 text-sm">2</span>
+                                                Identification des use cases
+                                            </h4>
+                                            <p class="text-gray-600">Sélection de cas simples, activables sans transformation lourde.</p>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Sub-step 3 -->
+                                    <div class="branch-step pt-6 pb-8">
+                                        <div class="branch-arrow -top-2">
+                                            <i class="fas fa-chevron-down text-xl"></i>
+                                        </div>
+                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-5 ml-8 md:ml-12">
+                                            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
+                                                <span class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center mr-2 text-sm">3</span>
+                                                Formations et ateliers
+                                            </h4>
+                                            <p class="text-gray-600">Sensibilisation des équipes métiers + formations ciblées.</p>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Sub-step 4 -->
+                                    <div class="branch-step pt-6 pb-0">
+                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-5 ml-8 md:ml-12">
+                                            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
+                                                <span class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center mr-2 text-sm">4</span>
+                                                Mise en œuvre opérationnelle
+                                            </h4>
+                                            <p class="text-gray-600">Suivi de mise en place avec indicateurs et rituels de pilotage.</p>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                        
-                        <!-- Branch 2 -->
-                        <div class="branch-card bg-white p-5 rounded-lg shadow-xs mb-6">
-                            <h3 class="font-bold text-lg mb-3 flex items-center">
-                                <i class="fas fa-users text-gray-500 mr-2"></i>
-                                AI Citizen Dev
-                            </h3>
-                            <div class="ml-8 pl-4 relative">
-                                <!-- Step 1 -->
-                                <div class="step-item relative pb-6 pl-6">
-                                    <div class="step-badge">1</div>
-                                    <h4 class="font-semibold mb-1">Audit des outils existants</h4>
-                                    <p class="text-sm text-gray-600">Évaluation des solutions disponibles (Copilot, Vertex AI...).</p>
-                                </div>
-                                <!-- Step 2 -->
-                                <div class="step-item relative pb-6 pl-6">
-                                    <div class="step-badge">2</div>
-                                    <h4 class="font-semibold mb-1">Diagnostic par équipe</h4>
-                                    <p class="text-sm text-gray-600">Analyse des besoins spécifiques à chaque département.</p>
-                                </div>
-                                <!-- Step 3 -->
-                                <div class="step-item relative pb-6 pl-6">
-                                    <div class="step-badge">3</div>
-                                    <h4 class="font-semibold mb-1">Formations ciblées</h4>
-                                    <p class="text-sm text-gray-600">Montée en compétences sur les outils sélectionnés.</p>
-                                </div>
-                                <!-- Step 4 -->
-                                <div class="step-item relative pl-6">
-                                    <div class="step-badge">4</div>
-                                    <h4 class="font-semibold mb-1">Référents IA internes</h4>
-                                    <p class="text-sm text-gray-600">Création d'un réseau d'ambassadeurs et support méthodologique.</p>
+                    </div>
+                </div>
+                
+                <!-- Step 2 -->
+                <div class="journey-step pt-8 pb-16">
+                    <div class="journey-arrow -top-2">
+                        <i class="fas fa-chevron-down text-2xl"></i>
+                    </div>
+                    <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 md:p-8 ml-0 md:ml-16">
+                        <div class="flex items-start">
+                            <div class="bg-blue-100 p-3 rounded-lg mr-4">
+                                <i class="fas fa-users text-blue-600 text-xl"></i>
+                            </div>
+                            <div>
+                                <h3 class="text-xl font-bold text-gray-800 mb-2">Offre AI Citizen Dev</h3>
+                                <p class="text-gray-600 mb-4">Autonomisez vos équipes avec des outils accessibles et adaptés.</p>
+                                
+                                <!-- Branch Path -->
+                                <div class="branch-path mt-6 ml-0 md:ml-8">
+                                    <!-- Sub-step 1 -->
+                                    <div class="branch-step pt-6 pb-8">
+                                        <div class="branch-arrow -top-2">
+                                            <i class="fas fa-chevron-down text-xl"></i>
+                                        </div>
+                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-5 ml-8 md:ml-12">
+                                            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
+                                                <span class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center mr-2 text-sm">1</span>
+                                                Audit des outils existants
+                                            </h4>
+                                            <p class="text-gray-600">Revue des environnements disponibles (Microsoft 365, Google Workspace…).</p>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Sub-step 2 -->
+                                    <div class="branch-step pt-6 pb-8">
+                                        <div class="branch-arrow -top-2">
+                                            <i class="fas fa-chevron-down text-xl"></i>
+                                        </div>
+                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-5 ml-8 md:ml-12">
+                                            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
+                                                <span class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center mr-2 text-sm">2</span>
+                                                Diagnostic par équipe
+                                            </h4>
+                                            <p class="text-gray-600">Approche contextualisée selon les outils, les niveaux et les besoins métiers.</p>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Sub-step 3 -->
+                                    <div class="branch-step pt-6 pb-8">
+                                        <div class="branch-arrow -top-2">
+                                            <i class="fas fa-chevron-down text-xl"></i>
+                                        </div>
+                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-5 ml-8 md:ml-12">
+                                            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
+                                                <span class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center mr-2 text-sm">3</span>
+                                                Formations ciblées
+                                            </h4>
+                                            <p class="text-gray-600">Parcours conçus pour chaque rôle (métiers, managers, référents).</p>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Sub-step 4 -->
+                                    <div class="branch-step pt-6 pb-0">
+                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-5 ml-8 md:ml-12">
+                                            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
+                                                <span class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center mr-2 text-sm">4</span>
+                                                Mise en place de référents IA
+                                            </h4>
+                                            <p class="text-gray-600">Structuration d'un réseau interne pour faciliter l'adoption continue.</p>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                        
-                        <!-- Branch 3 -->
-                        <div class="branch-card bg-white p-5 rounded-lg shadow-xs">
-                            <h3 class="font-bold text-lg mb-3 flex items-center">
-                                <i class="fas fa-handshake text-gray-500 mr-2"></i>
-                                Co-pilotage avec prestataires
-                            </h3>
-                            <div class="ml-8 pl-4 relative">
-                                <!-- Step 1 -->
-                                <div class="step-item relative pb-6 pl-6">
-                                    <div class="step-badge">1</div>
-                                    <h4 class="font-semibold mb-1">Diagnostic des fournisseurs</h4>
-                                    <p class="text-sm text-gray-600">Analyse des solutions proposées par vos éditeurs (SAP, Adobe...).</p>
-                                </div>
-                                <!-- Step 2 -->
-                                <div class="step-item relative pb-6 pl-6">
-                                    <div class="step-badge">2</div>
-                                    <h4 class="font-semibold mb-1">Évaluation coût/adéquation</h4>
-                                    <p class="text-sm text-gray-600">Analyse du rapport coût/utilité et de la faisabilité.</p>
-                                </div>
-                                <!-- Step 3 -->
-                                <div class="step-item relative pl-6">
-                                    <div class="step-badge">3</div>
-                                    <h4 class="font-semibold mb-1">Accompagnement ponctuel</h4>
-                                    <p class="text-sm text-gray-600">Support dans le choix et le déploiement des solutions.</p>
+                    </div>
+                </div>
+                
+                <!-- Step 3 -->
+                <div class="journey-step pt-8 pb-16">
+                    <div class="journey-arrow -top-2">
+                        <i class="fas fa-chevron-down text-2xl"></i>
+                    </div>
+                    <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 md:p-8 ml-0 md:ml-16">
+                        <div class="flex items-start">
+                            <div class="bg-blue-100 p-3 rounded-lg mr-4">
+                                <i class="fas fa-handshake text-blue-600 text-xl"></i>
+                            </div>
+                            <div>
+                                <h3 class="text-xl font-bold text-gray-800 mb-2">Offre Co-pilotage avec prestataires</h3>
+                                <p class="text-gray-600 mb-4">Optimisez vos relations avec vos fournisseurs de solutions IA.</p>
+                                
+                                <!-- Branch Path -->
+                                <div class="branch-path mt-6 ml-0 md:ml-8">
+                                    <!-- Sub-step 1 -->
+                                    <div class="branch-step pt-6 pb-8">
+                                        <div class="branch-arrow -top-2">
+                                            <i class="fas fa-chevron-down text-xl"></i>
+                                        </div>
+                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-5 ml-8 md:ml-12">
+                                            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
+                                                <span class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center mr-2 text-sm">1</span>
+                                                Diagnostic des solutions IA externes
+                                            </h4>
+                                            <p class="text-gray-600">Benchmark des outils proposés par vos éditeurs (SAP, Adobe, Salesforce…).</p>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Sub-step 2 -->
+                                    <div class="branch-step pt-6 pb-8">
+                                        <div class="branch-arrow -top-2">
+                                            <i class="fas fa-chevron-down text-xl"></i>
+                                        </div>
+                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-5 ml-8 md:ml-12">
+                                            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
+                                                <span class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center mr-2 text-sm">2</span>
+                                                Évaluation coût/adéquation/scalabilité
+                                            </h4>
+                                            <p class="text-gray-600">Analyse complète de la promesse vs réalité opérationnelle.</p>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Sub-step 3 -->
+                                    <div class="branch-step pt-6 pb-0">
+                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-5 ml-8 md:ml-12">
+                                            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
+                                                <span class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center mr-2 text-sm">3</span>
+                                                Accompagnement ponctuel
+                                            </h4>
+                                            <p class="text-gray-600">Revue des contrats, POC, pilotage des partenaires, mise en garde contre le "bullshit IA".</p>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
+                
+                <!-- Results -->
+                <div class="journey-step pt-8 pb-0">
+                    <div class="bg-blue-100 border border-blue-200 rounded-xl p-6 md:p-8 ml-0 md:ml-16">
+                        <div class="flex items-start">
+                            <div class="bg-blue-600 p-3 rounded-lg mr-4">
+                                <i class="fas fa-chart-line text-white text-xl"></i>
+                            </div>
+                            <div>
+                                <h3 class="text-xl font-bold text-gray-800 mb-2">Résultats attendus</h3>
+                                <p class="text-gray-600">
+                                    Gains opérationnels rapides, amélioration de la productivité, meilleure maîtrise des coûts IA, 
+                                    autonomisation des équipes et adoption généralisée des outils IA dans les processus métiers.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </section>
 
-    <!-- Vision Section -->
-    <section class="py-16 bg-white">
+    <!-- CTA Section -->
+    <section class="py-16 bg-gray-800 text-white">
         <div class="container mx-auto px-4">
-            <div class="max-w-4xl mx-auto text-center mb-12">
-                <h2 class="text-3xl font-bold mb-6">Notre approche de l'accompagnement IA</h2>
-                <p class="text-xl text-gray-600">
-                    Nous croyons en une IA pragmatique, alignée avec vos enjeux business et vos capacités d'absorption.
+            <div class="max-w-4xl mx-auto text-center">
+                <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à transformer votre entreprise avec l'IA ?</h2>
+                <p class="text-xl text-gray-300 mb-8">
+                    Nos experts sont à votre disposition pour discuter de vos besoins et vous proposer le parcours le plus adapté.
                 </p>
+                <a href="#" class="inline-block bg-[#f86c5c] hover:bg-[#e05d4d] text-white px-8 py-4 rounded-lg font-bold text-lg transition duration-300">
+                    Contactez-nous <i class="fas fa-arrow-right ml-2"></i>
+                </a>
             </div>
-            
-            <div class="grid md:grid-cols-3 gap-8">
-                <div class="bg-gray-50 p-8 rounded-xl hover-grow">
-                    <div class="bg-[#f86c5c] bg-opacity-10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
-                        <i class="fas fa-chess-board text-[#f86c5c] text-2xl"></i>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 bg-[#f86c5c] rounded-full flex items-center justify-center text-white font-bold text-lg mr-3">
+                            A
+                        </div>
+                        <h3 class="text-xl font-bold">Atecna</h3>
                     </div>
-                    <h3 class="font-bold text-xl mb-3 text-center">Stratégie avant technologie</h3>
-                    <p class="text-gray-600 text-center">
-                        Nous commençons toujours par comprendre vos objectifs business avant de proposer des solutions techniques.
+                    <p class="text-gray-400">
+                        Accompagnement stratégique en Intelligence Artificielle pour les entreprises ambitieuses.
                     </p>
                 </div>
-                
-                <div class="bg-gray-50 p-8 rounded-xl hover-grow">
-                    <div class="bg-[#f86c5c] bg-opacity-10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
-                        <i class="fas fa-sliders-h text-[#f86c5c] text-2xl"></i>
-                    </div>
-                    <h3 class="font-bold text-xl mb-3 text-center">Approche modulaire</h3>
-                    <p class="text-gray-600 text-center">
-                        Des modules indépendants que vous pouvez combiner selon vos besoins et votre maturité.
-                    </p>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Navigation</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Services</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Expertises</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
+                    </ul>
                 </div>
-                
-                <div class="bg-gray-50 p-8 rounded-xl hover-grow">
-                    <div class="bg-[#f86c5c] bg-opacity-10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
-                        <i class="fas fa-chart-line text-[#f86c5c] text-2xl"></i>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Services</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#disruptive" class="text-gray-400 hover:text-white transition">IA Disruptive</a></li>
+                        <li><a href="#operationnelle" class="text-gray-400 hover:text-white transition">IA Opérationnelle</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Formations</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Audit IA</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Contact</h4>
+                    <ul class="space-y-2">
+                        <li class="flex items-center">
+                            <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>
+                            <span class="text-gray-400">Paris, France</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-phone text-gray-400 mr-2"></i>
+                            <span class="text-gray-400">+33 1 23 45 67 89</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-envelope text-gray-400 mr-2"></i>
+                            <span class="text-gray-400">contact@atecna.com</span>
+                        </li>
+                    </ul>
+                    <div class="flex space-x-4 mt-4">
+                        <a href="#" class="text-gray-400 hover:text-white transition">
+                            <i class="fab fa-linkedin-in text-lg"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white transition">
+                            <i class="fab fa-twitter text-lg"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white transition">
+                            <i class="fab fa-facebook-f text-lg"></i>
+                        </a>
                     </div>
-                    <h3 class="font-bold text-xl mb-3 text-center">Focus ROI</h3>
-                    <p class="text-gray-600 text-center">
-                        Nous priorisons les projets avec un impact business mesurable et une scalabilité démontrée.
-                    </p>
                 </div>
             </div>
-        </div>
-    </section>
-
-    <!-- Choice Help Section -->
-    <section class="py-16 bg-[#f86c5c] bg-opacity-10">
-        <div class="container mx-auto px-4">
-            <div class="max-w-4xl mx-auto text-center">
-                <div class="bg-white p-8 rounded-xl shadow-sm">
-                    <h2 class="text-3xl font-bold mb-6">Vous hésitez entre les deux approches ?</h2>
-                    <p class="text-xl text-gray-600 mb-8">
-                        Nos experts peuvent vous aider à définir le parcours le plus adapté à votre contexte, 
-                        vos ambitions et vos contraintes.
-                    </p>
-                    <a href="#" class="inline-block bg-[#f86c5c] hover:bg-[#e05a4a] text-white font-medium px-8 py-4 rounded-lg transition">
-                        <i class="fas fa-comments mr-2"></i> Échanger avec un expert IA Atecna
-                    </a>
-                </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
+                <p>© 2023 Atecna. Tous droits réservés.</p>
             </div>
         </div>
-    </section>
+    </footer>
 
     <script>
-        function selectPath(path) {
-            // Reset all paths
-            document.getElementById('disruptive-path').classList.remove('active');
-            document.getElementById('disruptive-path').classList.add('inactive');
-            document.querySelector('#disruptive-path .path-header').classList.remove('bg-[#f86c5c]', 'text-white');
-            document.querySelector('#disruptive-path .path-header').classList.add('bg-gray-100');
-            document.querySelector('#disruptive-path > div:last-child').classList.add('hidden');
-            
-            document.getElementById('operational-path').classList.remove('active');
-            document.getElementById('operational-path').classList.add('inactive');
-            document.querySelector('#operational-path .path-header').classList.remove('bg-[#f86c5c]', 'text-white');
-            document.querySelector('#operational-path .path-header').classList.add('bg-gray-100');
-            document.querySelector('#operational-path > div:last-child').classList.add('hidden');
-            
-            // Activate selected path
-            const selectedPath = document.getElementById(`${path}-path`);
-            selectedPath.classList.remove('inactive');
-            selectedPath.classList.add('active');
-            document.querySelector(`#${path}-path .path-header`).classList.add('bg-[#f86c5c]', 'text-white');
-            document.querySelector(`#${path}-path .path-header`).classList.remove('bg-gray-100');
-            document.querySelector(`#${path}-path > div:last-child`).classList.remove('hidden');
-            
-            // Add animations to steps
-            const steps = document.querySelectorAll(`#${path}-path .branch-card`);
-            steps.forEach((step, index) => {
-                step.classList.add('fade-in');
-                step.style.animationDelay = `${index * 0.1}s`;
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
             });
-        }
-        
-        // Initialize with disruptive path active
-        document.addEventListener('DOMContentLoaded', function() {
-            selectPath('disruptive');
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Chadu/atecna-website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt

@@ -2,4 +2,6 @@ Objectif : Créer une landing page dédiée à l’offre IA d’Atecna, mettant
 Contenu à intégrer dans la nouvelle section “Notre accompagnement IA” 📍 Introduction de la section Commence par expliquer que notre approche repose sur deux recommandations clés :  Ne pas faire de l’IA pour faire de l’IA : Chaque initiative doit répondre à une problématique réelle.  Démarrer par la compréhension du contexte stratégique avant toute implémentation.  🧭 Étape 1 : Diagnostic initial stratégique (ou échange exploratoire) Propose un premier échange exploratoire ou un mini-diagnostic, où l'on cherche à comprendre :  Quelle est votre vision par rapport à l’IA ?  Votre volonté d’en faire un levier ou non ?  Vos objectifs : acculturation, gains de productivité, différenciation stratégique ?  🎯 Objectif : Déterminer si l’entreprise doit adopter l’IA de manière proactive, ou au contraire, si elle peut attendre ou se concentrer sur d'autres leviers.  🔍 Étape 2 : Deux voies possibles selon le diagnostic initial Si peu de pertinence IA à court terme :  Un diagnostic général sera proposé, centré sur les leviers de ROI rapide (optimisation des délais, réduction des coûts, etc.)  Si IA jugée pertinente stratégiquement :  Un diagnostic centré IA est mené, intégrant :  Les ambitions stratégiques  Les capacités de production et d’intégration  L’infrastructure existante  Une cartographie des use cases réalisables, classés selon :  Leur facilité de mise en œuvre  Leur impact business  Leur compatibilité avec les outils déjà en place  🧶 Étape 3 : 3 parcours d’accompagnement complémentaires Suite au diagnostic IA, proposer trois types d’accompagnement (cumulables) :  Accompagnement projet IA à fort impact  Mise en place de projets disruptifs à ROI élevé  Accompagnement long terme (stratégie, déploiement, suivi)  Adoption des outils IA (AI Citizen Dev)  Encadrement des équipes dans l’usage progressif des outils IA internes (Microsoft Copilot, Vertex, etc.)  Déploiement d’un cadre méthodologique de montée en compétence  Acculturation & formations  Ateliers d’idéation, conférences, formations (générales, outils, cas d’usages)  Sensibilisation des décideurs et métiers  🔬 Autres éléments à intégrer Notre vision agnostique : Nous ne privilégions pas une technologie mais la meilleure option pour le client. Nous maîtrisons aussi bien :  IA générative  IA prédictive (machine learning, algorithmes)  IA de traitement comme l’OCR ou le NLP  Notre conviction sur la scalabilité :  Beaucoup d’acteurs vendent des solutions peu solides ou surdimensionnées  La scalabilité technique doit être un critère central dans le choix de toute solution IA  Nous évitons l’effet “carrosse pour faire le tour du monde” : il faut un véhicule adapté à votre terrain  Propose une mention sur l’accompagnement temporaire : Nous pouvons aussi intervenir ponctuellement pour aider à décoder les offres d’autres prestataires et éviter les pièges.  ⚠️ Directive IMPORTANTE 👉 Ne supprime aucune section de la landing page existante. 👉 Ajoute uniquement cette section complète “Notre accompagnement IA” après la section “Nos offres IA”. 👉 Le design doit rester cohérent avec le reste du site : fond blanc, couleur #f86c5c pour les titres ou éléments marquants, structure en blocs aérés.
 💡 Contexte : Nous souhaitons intégrer dans notre site une restitution type REX (retour d’expérience) à destination de nos prospects et partenaires. Le contenu doit présenter de manière pédagogique et structurée un exemple d'intégration IA générative pour un de nos clients dans le secteur de la menuiserie, appelé 3W. L’objectif est de mettre en valeur un workflow automatisé et intelligent de création de contenu, en montrant à la fois le process complet et les bénéfices concrets.  🖼️ Directive graphique et fonctionnelle :  Le design doit rester parfaitement cohérent avec la charte graphique du site existant : couleurs, typos, icônes, marges, tailles, effets de survol.  Ne pas introduire de nouvelle identité visuelle ou de gimmick graphique.  Ne pas produire une slide ou un PowerPoint, mais bien un bloc web dynamique et natif, prévu pour être intégré dans un onglet dédié type “Cas client” ou “Méthodologie”.  Le contenu doit être responsive, fluide, visuellement hiérarchisé (titres, branches, connexions).  Prévoir un rendu qui évoque un workflow ramifié / carte de processus, avec des branches parallèles qui se regroupent, des points d’entrée multiples et des conditions optionnelles visibles (ex : “si multilingue activé…”).  Chaque étape/nœud doit être synthétique, lisible, avec des icônes ou visuels associés si la charte le permet.  🧠 Contenu à intégrer (textes bruts à mettre en forme sous forme de workflow) :  🔵 Départ du processus : déclenchement Point de départ utilisateur  Soit : clic sur “Créer un contenu” dans le back-office  Soit : réception d’une suggestion proactive générée par l’IA (hebdomadaire / mensuelle)  🟢 Branche 1 — Génération d’idées de sujets par IA L’IA croise automatiquement plusieurs sources :  🔍 Actualités récentes sur la menuiserie (Google News, flux RSS pros)  📈 Tendances SEO locales  📚 Articles déjà publiés dans Contentful ➜ pour éviter les doublons  🗓️ Saisonnalité métier (ex : isolation hiver, salons, événements)  Résultat : liste de sujets pertinents + score d’intérêt  🟡 Branche 2 — Formulaire IA guidé (si le menuisier veut rédiger) L’utilisateur peut renseigner :  Sujet libre ou sujet suggéré  Ton (pro, chaleureux, didactique…)  Type de contenu : blog / service / news  Cible géographique  Inspirations (liens, fichiers…)  Options :  Traduction multilingue (FR, EN…)  Déclinaisons pour email / LinkedIn / réseaux sociaux  🔁 Point de convergence : Brief enrichi Fusion des données IA + utilisateur :  Construction d’un prompt expert “menuiserie”  Analyse du corpus Contentful (historique, CTA, éléments métiers)  Génération automatique avec GPT :  Titre  Meta description SEO  Corps d’article (structuré Hn)  Appels à l’action  Visuels recommandés (ou générés)  🟣 Branches optionnelles parallèles 🌍 Traduction automatique (si activée)  DeepL ou GPT  Détection des termes techniques  📣 Déclinaison multiformat (si cochée)  Email au format AIDA  Post LinkedIn synthétique  Publication Facebook avec mise en page orientée local  🧾 Validation humaine (point de contrôle) Article généré automatiquement intégré dans Contentful  Pré-rempli en brouillon  Interface de relecture simple  Bouton “Valider & publier”  🚀 Publication et distribution Mise en ligne directe  Ajout au sitemap  Partage réseaux sociaux (si activé)  Données de publication sauvegardées pour analyse  📊 Analyse post-publication et apprentissage Suivi SEO, vues, interactions  Mesure de performance  Ajustement des futures suggestions IA  ✅ À la fin du composant : section “Bénéfices concrets” (sous forme de points visuels) ⏱️ +80% de gain de temps sur la production de contenu  📈 Meilleur référencement SEO  🧠 Contenus adaptés, localisés, personnalisés  ⚙️ Processus automatisé, piloté par l’IA métier  🌐 Déploiement multilingue en 1 clic  💬 Publication multi-canal sans surcoût rédactionnel  🎯 Plateforme 3W différenciante pour ses clients menuisiers  🎨 Remarque finale : Merci de concevoir cette restitution comme un module fluide, immersif et professionnel, qui met en valeur l’intelligence du système et la valeur ajoutée de notre agence. Le ton visuel doit refléter l’expertise et la fiabilité, pas le côté “IA gadget”.
 🎯 Objectif : Crée une nouvelle landing page dédiée exclusivement au parcours d’accompagnement IA proposé par Atecna. Cette page est distincte de la précédente, mais doit conserver la même direction artistique, à savoir :  Couleur dominante : #f86c5c (saumon/orangé)  Design aéré, épuré, basé sur beaucoup de blanc, des zones de texte bien lisibles, et une typographie sans-serif moderne  Utiliser un layout clair et dynamique, structuré en sections verticales, avec blocs à élargissement progressif (voir détails ci-dessous)  Fond blanc en base, éléments visuels illustratifs et clairs  📌 Structure de la page 🧭 Introduction (bandeau de tête – Héros) Titre principal : “Deux voies pour un accompagnement IA pertinent”  Sous-titre : Explique qu’il existe deux grands chemins complémentaires pour adopter l’IA :  L’IA pour l’efficience & l’opérationnel  L’IA disruptive pour transformer votre business  Mentionner que les deux voies sont valides mais correspondent à des ambitions, des moyens, et des temporalités très différentes.  🪧 Double section interactive (split gauche / droite) À ce stade, la page présente deux zones côte à côte (type grille responsive sur desktop, ou empilées en mobile) :  Colonne gauche : IA disruptive  Colonne droite : IA pour l’efficience opérationnelle  L’utilisateur peut cliquer sur l’un des deux parcours, ce qui déplie son contenu sous la section, tout en laissant apparaître l’autre parcours replié ou résumé dans une colonne réduite (idée de chemin alternatif toujours visible).  🧱 CONTENU DES PARCOURS 🔶 Branche droite : IA pour l’efficience & l’opérationnel Sous-titre : “Adoptez l’IA au quotidien, sans révolution, pour des gains rapides et mesurables.”  Déploie 3 sous-branches dans cette voie :  1. Acculturation & Diagnostic transverse Diagnostic global des usages internes  Identification des use cases avec ROI rapide  Mise en place de formations, ateliers, idéations  Accompagnement au changement culturel  2. AI Citizen Dev & outils existants Diagnostic des outils déjà présents (Microsoft Copilot, Vertex AI, etc.)  Ciblage des cas d’usage réalisables “nativement”  Formation ciblée aux outils  Création d’un cadre Citizen Dev avec des référents IA dans chaque équipe  3. Accompagnement à l’intégration IA via prestataires Aide à l’évaluation de solutions IA proposées par des éditeurs tiers (SAP, Adobe, Salesforce…)  Analyse du rapport coût/utilité/adéquation  Recommandation neutre pour éviter les “faux produits IA”  Accompagnement temporaire pour co-piloter les choix techniques  🔷 Branche gauche : IA disruptive Sous-titre : “Créez un avantage concurrentiel avec des projets IA à fort impact.”  Déploie 2 à 3 sous-branches :  1. Diagnostic stratégique & roadmap IA Définition d’une vision IA alignée avec les enjeux métier  Construction d’une roadmap IA réaliste  Aide à la définition des équipes, des rôles, et du plan d’exécution  Cette étape est optionnelle mais recommandée  2. Mise en place de projets IA disruptifs Sélection de cas d’usage à fort potentiel différenciateur  Déploiement par une équipe dédiée (Chef de projet + experts + devs)  Possibilité de renforcer l’équipe interne si besoin  Forte orientation ROI et scalabilité  🧠 Vision Atecna à intégrer Agnosticité technologique : IA générative, IA prédictive, IA classique (OCR, NLP, etc.)  Vision réaliste : éviter les surpromesses, viser l’efficience scalable  Conviction : beaucoup d’IA vendues aujourd’hui sont mal adaptées ou peu scalables  Notre mission : aider à choisir la bonne IA, au bon moment, pour la bonne raison  ⚠️ Consignes importantes Ne pas supprimer les autres pages existantes  Cette page est une nouvelle landing page indépendante, dédiée uniquement au parcours d’accompagnement  Garde la même DA que la première landing page IA (couleurs, typographie, mise en page verticale, ambiance visuelle)  Utiliser des effets simples pour déplier le parcours sélectionné (design type accordéon ou scrolling contrôlé), mais éviter la navigation vers une autre page
-Refais complètement la landing page “Parcours d’accompagnement IA” pour Atecna. Elle doit proposer une expérience immersive, interactive et adaptative, dans laquelle l’utilisateur choisit son parcours IA.  ✅ CE QUE TU DOIS FAIRE 1. Design & Interaction : effet d’élargissement dynamique Présente deux blocs principaux côte à côte :  IA Disruptive  IA pour l’efficience opérationnelle  Quand l’utilisateur survole ou clique sur l’un des deux blocs, ce bloc s’élargit (responsive) et déploie tout son parcours en dessous (branche principale + sous-branches) en gardant visible, mais réduit, l’autre bloc. ⚠️ Il ne s’agit pas de deux pages distinctes, mais d’un effet d’élargissement dans la même page.  2. Conception des parcours (avec storytelling & logique) Chacun des deux parcours doit comporter :  Un titre de parcours + un slogan explicatif  Une explication de pour qui ce parcours est adapté  Des branches nommées (chaque branche est une sous-section verticale avec étapes)  Une logique visuelle de progression (étapes numérotées, timeline, icônes…)  🟧 PARCOURS 1 : IA pour l’efficience opérationnelle Slogan : “Adoptez l’IA au quotidien, sans révolution, pour des gains rapides et mesurables.” Ciblé pour : entreprises cherchant des ROI rapides, sans refonte métier  Branches à créer : 🔹 Parcours “Acculturation & ROI rapide”  Étape 1 : Diagnostic transverse global des usages  Étape 2 : Cartographie des use cases actionnables  Étape 3 : Formations, ateliers, sensibilisation  Étape 4 : Mise en œuvre avec indicateurs simples  🔹 Parcours “AI Citizen Dev”  Étape 1 : Audit des outils existants (Copilot, Vertex AI…)  Étape 2 : Diagnostic par équipe  Étape 3 : Formation ciblée aux outils  Étape 4 : Création de référents IA internes et support méthodologique  🔹 Parcours “Co-pilotage avec des prestataires IA”  Étape 1 : Diagnostic de vos fournisseurs et solutions  Étape 2 : Évaluation du rapport coût/adéquation/faisabilité  Étape 3 : Accompagnement ponctuel dans le choix et le déploiement  🟦 PARCOURS 2 : IA Disruptive Slogan : “Créez un avantage concurrentiel avec des projets IA à fort impact.” Ciblé pour : entreprises souhaitant transformer leur modèle ou se différencier fortement  Branches à créer : 🔹 Parcours “Vision & stratégie IA”  Étape 1 : Diagnostic stratégique  Étape 2 : Définition de la vision IA  Étape 3 : Constitution d’une roadmap et plan de gouvernance  Étape 4 : Identification des profils internes à mobiliser ou à recruter  🔹 Parcours “Projets IA disruptifs”  Étape 1 : Sélection de cas d’usage à fort potentiel  Étape 2 : Déploiement par une task-force (chef de projet, experts…)  Étape 3 : Renforcement d’équipe si besoin  Étape 4 : Mesure d’impact et scalabilité  3. Direction artistique Tu dois conserver les éléments graphiques du site www.atecna.fr :  Couleur dominante : #f86c5c  Fond blanc, design clair, espacé  Typographie sans-serif  Icônes modernes et simples  Zones bien aérées  Possibilité d’utiliser des éléments illustrés (schémas, timelines, flèches de branchement…)  4. Résumé final En bas de la page, propose une section de résumé ou aide au choix : “Vous hésitez entre les deux approches ? Parlons-en.”  Ajoute un bouton de contact clair : ➡️ “Échanger avec un expert IA Atecna”  📌 Résumé des attentes : ✅ Design immersif & responsive ✅ Élargissement d’un bloc en fonction du choix de l’utilisateur ✅ Parcours logiques, clairs, nommés, avec storytelling ✅ Maintien de la direction artistique d’Atecna ✅ Pas de navigation vers d’autres pages : tout doit être dans le même flux vertical
+Refais complètement la landing page “Parcours d’accompagnement IA” pour Atecna. Elle doit proposer une expérience immersive, interactive et adaptative, dans laquelle l’utilisateur choisit son parcours IA.  ✅ CE QUE TU DOIS FAIRE 1. Design & Interaction : effet d’élargissement dynamique Présente deux blocs principaux côte à côte :  IA Disruptive  IA pour l’efficience opérationnelle  Quand l’utilisateur survole ou clique sur l’un des deux blocs, ce bloc s’élargit (responsive) et déploie tout son parcours en dessous (branche principale + sous-branches) en gardant visible, mais réduit, l’autre bloc. ⚠️ Il ne s’agit pas de deux pages distinctes, mais d’un effet d’élargissement dans la même page.  2. Conception des parcours (avec storytelling & logique) Chacun des deux parcours doit comporter :  Un titre de parcours + un slogan explicatif  Une explication de pour qui ce parcours est adapté  Des branches nommées (chaque branche est une sous-section verticale avec étapes)  Une logique visuelle de progression (étapes numérotées, timeline, icônes…)  🟧 PARCOURS 1 : IA pour l’efficience opérationnelle Slogan : “Adoptez l’IA au quotidien, sans révolution, pour des gains rapides et mesurables.” Ciblé pour : entreprises cherchant des ROI rapides, sans refonte métier  Branches à créer : 🔹 Parcours “Acculturation & ROI rapide”  Étape 1 : Diagnostic transverse global des usages  Étape 2 : Cartographie des use cases actionnables  Étape 3 : Formations, ateliers, sensibilisation  Étape 4 : Mise en œuvre avec indicateurs simples  🔹 Parcours “AI Citizen Dev”  Étape 1 : Audit des outils existants (Copilot, Vertex AI…)  Étape 2 : Diagnostic par équipe  Étape 3 : Formation ciblée aux outils  Étape 4 : Création de référents IA internes et support méthodologique  🔹 Parcours “Co-pilotage avec des prestataires IA”  Étape 1 : Diagnostic de vos fournisseurs et solutions  Étape 2 : Évaluation du rapport coût/adéquation/faisabilité  Étape 3 : Accompagnement ponctuel dans le choix et le déploiement  🟦 PARCOURS 2 : IA Disruptive Slogan : “Créez un avantage concurrentiel avec des projets IA à fort impact.” Ciblé pour : entreprises souhaitant transformer leur modèle ou se différencier fortement  Branches à créer : 🔹 Parcours “Vision & stratégie IA”  Étape 1 : Diagnostic stratégique  Étape 2 : Définition de la vision IA  Étape 3 : Constitution d’une roadmap et plan de gouvernance  Étape 4 : Identification des profils internes à mobiliser ou à recruter  🔹 Parcours “Projets IA disruptifs”  Étape 1 : Sélection de cas d’usage à fort potentiel  Étape 2 : Déploiement par une task-force (chef de projet, experts…)  Étape 3 : Renforcement d’équipe si besoin  Étape 4 : Mesure d’impact et scalabilité  3. Direction artistique Tu dois conserver les éléments graphiques du site www.atecna.fr :  Couleur dominante : #f86c5c  Fond blanc, design clair, espacé  Typographie sans-serif  Icônes modernes et simples  Zones bien aérées  Possibilité d’utiliser des éléments illustrés (schémas, timelines, flèches de branchement…)  4. Résumé final En bas de la page, propose une section de résumé ou aide au choix : “Vous hésitez entre les deux approches ? Parlons-en.”  Ajoute un bouton de contact clair : ➡️ “Échanger avec un expert IA Atecna”  📌 Résumé des attentes : ✅ Design immersif & responsive ✅ Élargissement d’un bloc en fonction du choix de l’utilisateur ✅ Parcours logiques, clairs, nommés, avec storytelling ✅ Maintien de la direction artistique d’Atecna ✅ Pas de navigation vers d’autres pages : tout doit être dans le même flux vertical
+🎯 Objectif Réédite la landing page du parcours d’accompagnement IA pour Atecna. Cette fois-ci, abandonne le design avec des simples blocs carrés isolés. À la place, construis un système de branches visuelles explicites, avec flèches ou lignes de connexion qui illustrent la logique d’enchaînement et le cheminement utilisateur.  ✅ Éléments attendus 1. Structure en parcours visuels horizontaux ou verticaux en branchement logique Chaque parcours (IA Disruptive et IA Opérationnelle) doit apparaître comme une branche principale.  Chaque étape d’un parcours est un bloc connecté au suivant par des flèches ou des liens visuels, comme un schéma de parcours / arbre décisionnel / chemin narratif.  Si tu veux conserver un format “carte”, chaque carte doit être connectée visuellement pour exprimer une progression.  Préfère une disposition en longueur (scroll vertical ou horizontal) qui donne un sentiment de profondeur et d’engagement.  2. Chaque branche représente une offre clairement identifiée Il faut que chaque branche soit présentée comme une offre :  Titre clair  Sous-titre explicatif  Description développée  Étapes visibles, détaillées, enrichies  Commence par “Pour qui ?” pour chaque parcours  Termine chaque branche par une note sur les bénéfices clients ou résultats attendus  🟧 PARCOURS 1 : IA Disruptive Créez un avantage concurrentiel avec des projets IA à fort impact. 🎯 Pour qui ? Entreprises souhaitant transformer leur modèle ou se différencier fortement grâce à l’IA.  Branche 1 – Offre Vision & Stratégie IA Diagnostic stratégique Analyse approfondie des opportunités business et évaluation de la maturité technique.  Définition de la vision IA Formalisation d’une vision claire alignée avec les priorités métiers et l’ambition de l’entreprise.  Roadmap et gouvernance Élaboration d’un plan d’action IA par phases, avec indicateurs de suivi, modèle de gouvernance et sponsoring interne.  Identification des profils Évaluation des équipes existantes et besoins futurs (recrutement, formation, leadership IA).  Branche 2 – Offre Projets IA Disruptifs Sélection de cas d’usage Ciblage de projets transformants à haute valeur ajoutée (différenciateurs métier).  Déploiement par task-force Constitution d’une task-force (chef de projet, tech lead, UX, devs).  Renforcement d’équipe Apport ponctuel de compétences manquantes pour garantir la réussite.  Mesure d’impact et scalabilité Analyse des résultats, itération, et planification de l’extension à grande échelle.  🟦 PARCOURS 2 : IA Opérationnelle Adoptez l’IA au quotidien pour des gains rapides et mesurables. 🎯 Pour qui ? Entreprises cherchant des ROI rapides, sans refonte métier majeure.  Branche 1 – Offre Acculturation & ROI rapide Diagnostic transverse Cartographie des usages actuels et détection des leviers rapides d’optimisation.  Identification des use cases Sélection de cas simples, activables sans transformation lourde.  Formations et ateliers Sensibilisation des équipes métiers + formations ciblées.  Mise en œuvre opérationnelle Suivi de mise en place avec indicateurs et rituels de pilotage.  Branche 2 – Offre AI Citizen Dev Audit des outils existants Revue des environnements disponibles (Microsoft 365, Google Workspace…).  Diagnostic par équipe Approche contextualisée selon les outils, les niveaux et les besoins métiers.  Formations ciblées Parcours conçus pour chaque rôle (métiers, managers, référents).  Mise en place de référents IA Structuration d’un réseau interne pour faciliter l’adoption continue.  Branche 3 – Offre Co-pilotage avec prestataires Diagnostic des solutions IA externes Benchmark des outils proposés par vos éditeurs (SAP, Adobe, Salesforce…).  Évaluation coût/adéquation/scalabilité Analyse complète de la promesse vs réalité opérationnelle.  Accompagnement ponctuel Revue des contrats, POC, pilotage des partenaires, mise en garde contre le “bullshit IA”.  🖌️ Direction artistique à respecter Palette Atecna : fond blanc, couleur #f86c5c pour les titres et flèches, gris clair pour séparer les étapes  Utiliser des flèches de branchement, chemins visuels, icônes explicatives.  Chaque “offre” doit ressembler à une étape d’un voyage, pas à une case figée  Design narratif et immersif, type parcours utilisateur ou carte d’évolution
+🎯 Objectif Réédite la landing page du parcours d’accompagnement IA pour Atecna. Cette fois-ci, abandonne le design avec des simples blocs carrés isolés. À la place, construis un système de branches visuelles explicites, avec flèches ou lignes de connexion qui illustrent la logique d’enchaînement et le cheminement utilisateur.  ✅ Éléments attendus 1. Structure en parcours visuels horizontaux ou verticaux en branchement logique Chaque parcours (IA Disruptive et IA Opérationnelle) doit apparaître comme une branche principale.  Chaque étape d’un parcours est un bloc connecté au suivant par des flèches ou des liens visuels, comme un schéma de parcours / arbre décisionnel / chemin narratif.  Si tu veux conserver un format “carte”, chaque carte doit être connectée visuellement pour exprimer une progression.  Préfère une disposition en longueur (scroll vertical ou horizontal) qui donne un sentiment de profondeur et d’engagement.  2. Chaque branche représente une offre clairement identifiée Il faut que chaque branche soit présentée comme une offre :  Titre clair  Sous-titre explicatif  Description développée  Étapes visibles, détaillées, enrichies  Commence par “Pour qui ?” pour chaque parcours  Termine chaque branche par une note sur les bénéfices clients ou résultats attendus  🟧 PARCOURS 1 : IA Disruptive Créez un avantage concurrentiel avec des projets IA à fort impact. �� Pour qui ? Entreprises souhaitant transformer leur modèle ou se différencier fortement grâce à l’IA.  Branche 1 – Offre Vision & Stratégie IA Diagnostic stratégique Analyse approfondie des opportunités business et évaluation de la maturité technique.  Définition de la vision IA Formalisation d’une vision claire alignée avec les priorités métiers et l’ambition de l’entreprise.  Roadmap et gouvernance Élaboration d’un plan d’action IA par phases, avec indicateurs de suivi, modèle de gouvernance et sponsoring interne.  Identification des profils Évaluation des équipes existantes et besoins futurs (recrutement, formation, leadership IA).  Branche 2 – Offre Projets IA Disruptifs Sélection de cas d’usage Ciblage de projets transformants à haute valeur ajoutée (différenciateurs métier).  Déploiement par task-force Constitution d’une task-force (chef de projet, tech lead, UX, devs).  Renforcement d’équipe Apport ponctuel de compétences manquantes pour garantir la réussite.  Mesure d’impact et scalabilité Analyse des résultats, itération, et planification de l’extension à grande échelle.  🟦 PARCOURS 2 : IA Opérationnelle Adoptez l’IA au quotidien pour des gains rapides et mesurables. 🎯 Pour qui ? Entreprises cherchant des ROI rapides, sans refonte métier majeure.  Branche 1 – Offre Acculturation & ROI rapide Diagnostic transverse Cartographie des usages actuels et détection des leviers rapides d’optimisation.  Identification des use cases Sélection de cas simples, activables sans transformation lourde.  Formations et ateliers Sensibilisation des équipes métiers + formations ciblées.  Mise en œuvre opérationnelle Suivi de mise en place avec indicateurs et rituels de pilotage.  Branche 2 – Offre AI Citizen Dev Audit des outils existants Revue des environnements disponibles (Microsoft 365, Google Workspace…).  Diagnostic par équipe Approche contextualisée selon les outils, les niveaux et les besoins métiers.  Formations ciblées Parcours conçus pour chaque rôle (métiers, managers, référents).  Mise en place de référents IA Structuration d’un réseau interne pour faciliter l’adoption continue.  Branche 3 – Offre Co-pilotage avec prestataires Diagnostic des solutions IA externes Benchmark des outils proposés par vos éditeurs (SAP, Adobe, Salesforce…).  Évaluation coût/adéquation/scalabilité Analyse complète de la promesse vs réalité opérationnelle.  Accompagnement ponctuel Revue des contrats, POC, pilotage des partenaires, mise en garde contre le “bullshit IA”.  🖌️ Direction artistique à respecter Palette Atecna : fond blanc, couleur #f86c5c pour les titres et flèches, gris clair pour séparer les étapes  Utiliser des flèches de branchement, chemins visuels, icônes explicatives.  Chaque “offre” doit ressembler à une étape d’un voyage, pas à une case figée  Design narratif et immersif, type parcours utilisateur ou carte d’évolution