Spaces:

Maheri
/

plc-sousse

Running

App Files Files Community

Maheri commited on Jul 15

Commit

738b87d

verified ·

1 Parent(s): c3116f0

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +1105 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Plc Sousse
-emoji: 🐢
-colorFrom: pink
 colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: plc-sousse
+emoji: 🐳
+colorFrom: blue
 colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1105 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fr" class="scroll-smooth">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Analyse Interactive : Polyclinique La Corniche</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            'primary': '#0f766e',
+            'primary-light': '#0d9488',
+            'secondary': '#d97706',
+            'accent': '#7c3aed',
+            'dark': '#1e293b',
+            'light': '#f8fafc'
+          }
+        }
+      }
+    }
+  </script>
+  <style>
+    body {
+      font-family: "Inter", sans-serif;
+      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    }
+    .chart-container {
+      position: relative;
+      width: 100%;
+      max-width: 900px;
+      margin-left: auto;
+      margin-right: auto;
+      height: 400px;
+      max-height: 50vh;
+    }
+    @media (min-width: 768px) {
+      .chart-container {
+        height: 500px;
+      }
+    }
+    .nav-link {
+      transition: all 0.3s ease;
+      position: relative;
+    }
+    .nav-link::after {
+      content: '';
+      position: absolute;
+      bottom: -2px;
+      left: 0;
+      width: 0;
+      height: 2px;
+      background-color: #d97706;
+      transition: width 0.3s ease;
+    }
+    .nav-link:hover::after {
+      width: 100%;
+    }
+    .active-link {
+      color: #d97706;
+    }
+    .active-link::after {
+      width: 100%;
+    }
+    .btn-filter {
+      transition: all 0.3s ease;
+    }
+    .btn-filter.active {
+      background-color: #0f766e;
+      color: white;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    .swot-card {
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+    }
+    .swot-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+    }
+    .timeline-dot {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 10;
+    }
+    .timeline-line {
+      position: absolute;
+      top: 12px;
+      bottom: 12px;
+      left: 50%;
+      width: 2px;
+      transform: translateX(-50%);
+      z-index: 1;
+    }
+    .stat-card {
+      transition: all 0.3s ease;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+    }
+    .stat-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+    }
+    .counter {
+      font-size: 2.5rem;
+      font-weight: 700;
+      background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .section-title {
+      position: relative;
+      display: inline-block;
+    }
+    .section-title::after {
+      content: '';
+      position: absolute;
+      bottom: -8px;
+      left: 0;
+      width: 60px;
+      height: 3px;
+      background-color: #d97706;
+      border-radius: 3px;
+    }
+    .floating-nav {
+      position: fixed;
+      bottom: 2rem;
+      right: 2rem;
+      z-index: 100;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+    .floating-btn {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #0f766e;
+      color: white;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+      transition: all 0.3s ease;
+    }
+    .floating-btn:hover {
+      transform: translateY(-3px) scale(1.05);
+      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
+    }
+  </style>
+</head>
+<body class="text-slate-700">
+  <!-- Floating Navigation -->
+  <div class="floating-nav">
+    <a href="#synthese" class="floating-btn">
+      <i class="fas fa-home"></i>
+    </a>
+    <a href="#diagnostic" class="floating-btn">
+      <i class="fas fa-stethoscope"></i>
+    </a>
+    <a href="#concurrence" class="floating-btn">
+      <i class="fas fa-chart-bar"></i>
+    </a>
+    <a href="#plan" class="floating-btn">
+      <i class="fas fa-road"></i>
+    </a>
+  </div>
+  <header class="bg-white shadow-md sticky top-0 z-50">
+    <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="flex justify-between items-center py-4">
+        <div class="flex items-center space-x-3">
+          <div class="bg-primary-light p-2 rounded-lg">
+            <i class="fas fa-hospital text-white text-xl"></i>
+          </div>
+          <h1 class="text-xl font-bold text-slate-800">
+            Analyse Stratégique
+            <span class="hidden sm:inline-block">| Polyclinique La Corniche</span>
+          </h1>
+        </div>
+        <div class="hidden md:flex items-center space-x-8 text-sm font-medium">
+          <a href="#synthese" class="nav-link">Synthèse</a>
+          <a href="#diagnostic" class="nav-link">Diagnostic</a>
+          <a href="#concurrence" class="nav-link">Concurrence</a>
+          <a href="#plan" class="nav-link">Plan d'Action</a>
+        </div>
+        <div class="md:hidden">
+          <button id="mobile-menu-button" class="text-slate-800">
+            <i class="fas fa-bars text-xl"></i>
+          </button>
+        </div>
+      </div>
+      <!-- Mobile Menu -->
+      <div id="mobile-menu" class="hidden md:hidden py-4 border-t border-slate-200">
+        <div class="flex flex-col space-y-3">
+          <a href="#synthese" class="nav-link py-2">Synthèse</a>
+          <a href="#diagnostic" class="nav-link py-2">Diagnostic</a>
+          <a href="#concurrence" class="nav-link py-2">Concurrence</a>
+          <a href="#plan" class="nav-link py-2">Plan d'Action</a>
+        </div>
+      </div>
+    </nav>
+  </header>
+  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12">
+    <!-- Hero Section -->
+    <section class="mb-16 bg-gradient-to-r from-primary to-primary-light rounded-2xl p-8 text-white">
+      <div class="max-w-3xl mx-auto text-center">
+        <h1 class="text-3xl md:text-4xl font-bold mb-4">Transformation Stratégique de la Polyclinique La Corniche</h1>
+        <p class="text-lg opacity-90">Un plan d'action pour transformer les défis en opportunités et positionner la clinique comme leader régional</p>
+        <div class="mt-8 flex justify-center">
+          <a href="#plan" class="bg-white text-primary font-bold px-6 py-3 rounded-full shadow-lg hover:bg-amber-50 transition-all duration-300 transform hover:-translate-y-1">
+            Voir le plan d'action <i class="fas fa-arrow-right ml-2"></i>
+          </a>
+        </div>
+      </div>
+    </section>
+    <section id="synthese" class="scroll-mt-24 mb-16">
+      <div class="text-center mb-12">
+        <h2 class="text-3xl md:text-4xl font-bold text-slate-800 mb-2">
+          <span class="section-title">Le Constat : Un Potentiel à Revitaliser</span>
+        </h2>
+        <p class="mt-8 text-lg max-w-3xl mx-auto text-slate-600">
+          La Polyclinique La Corniche, un nom historique à Sousse, fait face à
+          un décalage critique entre sa réputation et sa réalité
+          technologique. Cette analyse révèle des faiblesses structurelles
+          mais surtout une opportunité unique de transformation et de
+          croissance par l'innovation.
+        </p>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
+        <div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-slate-100">
+          <div class="flex items-center mb-4">
+            <div class="bg-amber-100 p-3 rounded-lg mr-4">
+              <i class="fas fa-landmark text-amber-600 text-xl"></i>
+            </div>
+            <h3 class="font-bold text-slate-800">Notoriété Historique</h3>
+          </div>
+          <p class="text-sm text-slate-500">
+            Fondée en 2003, bénéficiant d'un emplacement stratégique.
+          </p>
+        </div>
+        <div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-slate-100">
+          <div class="flex items-center mb-4">
+            <div class="bg-red-100 p-3 rounded-lg mr-4">
+              <i class="fas fa-chart-line text-red-600 text-xl"></i>
+            </div>
+            <h3 class="font-bold text-slate-800">Retard Technologique</h3>
+          </div>
+          <p class="text-sm text-slate-500">
+            Absence d'IRM et de radiothérapie, équipements clés du marché.
+          </p>
+        </div>
+        <div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-slate-100">
+          <div class="flex items-center mb-4">
+            <div class="bg-blue-100 p-3 rounded-lg mr-4">
+              <i class="fas fa-globe text-blue-600 text-xl"></i>
+            </div>
+            <h3 class="font-bold text-slate-800">Invisibilité Numérique</h3>
+          </div>
+          <p class="text-sm text-slate-500">
+            Site web obsolète et inaccessible, absence totale des réseaux sociaux.
+          </p>
+        </div>
+        <div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-slate-100">
+          <div class="flex items-center mb-4">
+            <div class="bg-green-100 p-3 rounded-lg mr-4">
+              <i class="fas fa-rocket text-green-600 text-xl"></i>
+            </div>
+            <h3 class="font-bold text-slate-800">Opportunité Majeure</h3>
+          </div>
+          <p class="text-sm text-slate-500">
+            Un besoin urgent de modernisation qui ouvre la voie à un partenariat stratégique.
+          </p>
+        </div>
+      </div>
+      <div class="mt-16">
+        <h3 class="text-2xl font-bold text-center text-slate-800 mb-8">
+          Analyse Stratégique (SWOT)
+        </h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
+          <div class="swot-card bg-green-50 p-6 rounded-xl border-2 border-green-200">
+            <div class="flex items-center mb-4">
+              <div class="bg-green-200 p-2 rounded-lg mr-3">
+                <i class="fas fa-thumbs-up text-green-700"></i>
+              </div>
+              <h4 class="font-bold text-lg text-green-800">Forces</h4>
+            </div>
+            <ul class="mt-2 list-disc list-inside text-green-700 space-y-2 text-sm">
+              <li>Notoriété historique et confiance locale</li>
+              <li>Emplacement stratégique au coeur de Sousse</li>
+              <li>Positionnement affiché sur le tourisme médical</li>
+            </ul>
+          </div>
+          <div class="swot-card bg-red-50 p-6 rounded-xl border-2 border-red-200">
+            <div class="flex items-center mb-4">
+              <div class="bg-red-200 p-2 rounded-lg mr-3">
+                <i class="fas fa-thumbs-down text-red-700"></i>
+              </div>
+              <h4 class="font-bold text-lg text-red-800">Faiblesses</h4>
+            </div>
+            <ul class="mt-2 list-disc list-inside text-red-700 space-y-2 text-sm">
+              <li>Déficit technologique (pas d'IRM/radiothérapie)</li>
+              <li>Présence digitale nulle (site inaccessible)</li>
+              <li>Absence de certifications qualité internationales</li>
+              <li>Capacité d'accueil limitée (45 lits)</li>
+            </ul>
+          </div>
+          <div class="swot-card bg-blue-50 p-6 rounded-xl border-2 border-blue-200">
+            <div class="flex items-center mb-4">
+              <div class="bg-blue-200 p-2 rounded-lg mr-3">
+                <i class="fas fa-bullseye text-blue-700"></i>
+              </div>
+              <h4 class="font-bold text-lg text-blue-800">Opportunités</h4>
+            </div>
+            <ul class="mt-2 list-disc list-inside text-blue-700 space-y-2 text-sm">
+              <li>Partenariat de transformation digitale et technologique</li>
+              <li>Recapture des revenus de l'imagerie externalisée</li>
+              <li>Développement de l'e-santé (DPE, télémédecine)</li>
+              <li>Marché du tourisme médical en croissance</li>
+            </ul>
+          </div>
+          <div class="swot-card bg-amber-50 p-6 rounded-xl border-2 border-amber-200">
+            <div class="flex items-center mb-4">
+              <div class="bg-amber-200 p-2 rounded-lg mr-3">
+                <i class="fas fa-exclamation-triangle text-amber-700"></i>
+              </div>
+              <h4 class="font-bold text-lg text-amber-800">Menaces</h4>
+            </div>
+            <ul class="mt-2 list-disc list-inside text-amber-700 space-y-2 text-sm">
+              <li>Concurrence régionale intense et moderne</li>
+              <li>Perte des talents médicaux vers des plateformes mieux équipées</li>
+              <li>Érosion des parts de marché (surtout internationales)</li>
+              <li>Risque d'obsolescence et de marginalisation</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+    <hr class="my-16 border-slate-200" />
+    <section id="diagnostic" class="scroll-mt-24 mb-16">
+      <div class="text-center mb-12">
+        <h2 class="text-3xl md:text-4xl font-bold text-slate-800 mb-2">
+          <span class="section-title">Diagnostic : La Rupture Numérique et Technologique</span>
+        </h2>
+        <p class="mt-8 text-lg max-w-3xl mx-auto text-slate-600">
+          Le diagnostic révèle une clinique opérant avec les outils d'hier
+          dans le monde de demain. Cette section quantifie le retard et met en
+          lumière les points de friction les plus critiques pour la patientèle
+          et la compétitivité.
+        </p>
+      </div>
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
+        <div class="bg-white p-8 rounded-xl shadow-lg">
+          <h3 class="font-bold text-xl text-slate-800 mb-6 flex items-center">
+            <i class="fas fa-laptop-medical text-primary mr-3"></i>
+            Bilan de Maturité Digitale
+          </h3>
+          <div class="flex flex-col items-center justify-center bg-slate-50 p-8 rounded-xl mb-6">
+            <div class="counter">0/5</div>
+            <p class="mt-2 font-medium text-slate-700">Score de Maturité Digitale</p>
+            <div class="w-full bg-slate-200 rounded-full h-2.5 mt-4">
+              <div class="bg-red-500 h-2.5 rounded-full" style="width: 0%"></div>
+            </div>
+            <p class="text-center text-sm mt-4 text-slate-500">
+              Un score nul qui reflète une absence totale de stratégie et
+              d'outils numériques pour l'acquisition et la gestion des
+              patients.
+            </p>
+          </div>
+          <div class="space-y-4">
+            <div class="flex items-start p-3 rounded-lg hover:bg-slate-50">
+              <span class="text-red-500 text-xl mr-3 mt-1"><i class="fas fa-times-circle"></i></span>
+              <div>
+                <h4 class="font-semibold text-slate-800">Site Web Inaccessible</h4>
+                <p class="text-sm text-slate-500">
+                  Basé sur la technologie Flash, obsolète depuis 2020. Invisible pour 99% des utilisateurs.
+                </p>
+              </div>
+            </div>
+            <div class="flex items-start p-3 rounded-lg hover:bg-slate-50">
+              <span class="text-red-500 text-xl mr-3 mt-1"><i class="fas fa-times-circle"></i></span>
+              <div>
+                <h4 class="font-semibold text-slate-800">Réseaux Sociaux</h4>
+                <p class="text-sm text-slate-500">
+                  Aucune présence officielle active sur Facebook, LinkedIn ou d'autres plateformes.
+                </p>
+              </div>
+            </div>
+            <div class="flex items-start p-3 rounded-lg hover:bg-slate-50">
+              <span class="text-red-500 text-xl mr-3 mt-1"><i class="fas fa-times-circle"></i></span>
+              <div>
+                <h4 class="font-semibold text-slate-800">E-réputation</h4>
+                <p class="text-sm text-slate-500">
+                  Avis patients quasi-inexistants, ne permettant pas de bâtir un capital confiance en ligne.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-white p-8 rounded-xl shadow-lg">
+          <h3 class="font-bold text-xl text-slate-800 mb-6 flex items-center">
+            <i class="fas fa-x-ray text-primary mr-3"></i>
+            Plateau Technique : Le Handicap Stratégique
+          </h3>
+          <p class="text-slate-600 text-sm mb-6">
+            Le positionnement sur des chirurgies complexes (cardiaque, orthopédique) est en totale contradiction avec un plateau d'imagerie interne insuffisant. Cette dépendance à l'externe fragmente le parcours patient et représente une perte de revenus majeure.
+          </p>
+          <div class="space-y-4">
+            <div class="flex items-center justify-between p-4 bg-green-50 border-2 border-green-200 rounded-xl">
+              <div class="flex items-center">
+                <i class="fas fa-check-circle text-green-500 mr-3"></i>
+                <span class="font-semibold text-green-800">Scanner</span>
+              </div>
+              <span class="text-xl text-green-500">✅</span>
+            </div>
+            <p class="text-xs text-slate-400 text-center italic">
+              Performance et modèle non spécifiés, probablement anciens.
+            </p>
+            <div class="flex items-center justify-between p-4 bg-red-50 border-2 border-red-200 rounded-xl">
+              <div class="flex items-center">
+                <i class="fas fa-times-circle text-red-500 mr-3"></i>
+                <span class="font-semibold text-red-800">Imagerie par Résonance Magnétique (IRM)</span>
+              </div>
+              <span class="text-xl text-red-500">❌</span>
+            </div>
+            <div class="flex items-center justify-between p-4 bg-red-50 border-2 border-red-200 rounded-xl">
+              <div class="flex items-center">
+                <i class="fas fa-times-circle text-red-500 mr-3"></i>
+                <span class="font-semibold text-red-800">Radiothérapie</span>
+              </div>
+              <span class="text-xl text-red-500">❌</span>
+            </div>
+            <div class="flex items-center justify-between p-4 bg-red-50 border-2 border-red-200 rounded-xl">
+              <div class="flex items-center">
+                <i class="fas fa-times-circle text-red-500 mr-3"></i>
+                <span class="font-semibold text-red-800">Certifications Qualité (ISO, JCI...)</span>
+              </div>
+              <span class="text-xl text-red-500">❌</span>
+            </div>
+          </div>
+          <div class="mt-8 bg-slate-50 p-4 rounded-xl">
+            <h4 class="font-semibold text-slate-800 mb-2">Impact Financier Estimé</h4>
+            <div class="flex justify-between items-center">
+              <div>
+                <div class="text-sm text-slate-500">Perte annuelle due à l'externalisation</div>
+                <div class="text-xl font-bold text-primary">750K TND</div>
+              </div>
+              <div class="bg-primary-light p-2 rounded-lg">
+                <i class="fas fa-money-bill-wave text-white"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <hr class="my-16 border-slate-200" />
+    <section id="concurrence" class="scroll-mt-24 mb-16">
+      <div class="text-center mb-12">
+        <h2 class="text-3xl md:text-4xl font-bold text-slate-800 mb-2">
+          <span class="section-title">Analyse Concurrentielle Interactive</span>
+        </h2>
+        <p class="mt-8 text-lg max-w-3xl mx-auto text-slate-600">
+          La PLC n'opère pas en vase clos. La région du Sahel est un hub
+          médical compétitif où les acteurs investissent massivement. Ce
+          graphique interactif compare la maturité digitale des cliniques.
+          Utilisez les filtres pour affiner l'analyse.
+        </p>
+      </div>
+      <div class="bg-white p-6 md:p-8 rounded-xl shadow-lg">
+        <div class="flex flex-wrap justify-center gap-2 md:gap-4 mb-6">
+          <button
+            id="filter-all"
+            class="btn-filter active px-4 py-2 text-sm font-medium border border-slate-200 rounded-full transition"
+          >
+            Tous
+          </button>
+          <button
+            id="filter-mri"
+            class="btn-filter px-4 py-2 text-sm font-medium border border-slate-200 rounded-full transition"
+          >
+            Avec IRM
+          </button>
+          <button
+            id="filter-radio"
+            class="btn-filter px-4 py-2 text-sm font-medium border border-slate-200 rounded-full transition"
+          >
+            Avec Radiothérapie
+          </button>
+          <button
+            id="filter-quality"
+            class="btn-filter px-4 py-2 text-sm font-medium border border-slate-200 rounded-full transition"
+          >
+            Certifiées Qualité
+          </button>
+        </div>
+        <div class="chart-container">
+          <canvas id="competitorChart"></canvas>
+        </div>
+        <div class="mt-8 overflow-x-auto">
+          <table class="min-w-full divide-y divide-slate-200">
+            <thead class="bg-slate-50">
+              <tr>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Clinique</th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Ville</th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">IRM</th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Radiothérapie</th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Certification</th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Score Digital</th>
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-slate-200" id="competitor-table-body">
+              <!-- Table rows will be populated by JavaScript -->
+            </tbody>
+          </table>
+        </div>
+        <p class="text-xs text-center mt-4 text-slate-400">
+          Le score de maturité digitale est une évaluation basée sur la
+          présence en ligne, les fonctionnalités du site web (RDV, devis) et
+          la communication sur les outils internes (DPE, IA).
+        </p>
+      </div>
+    </section>
+    <hr class="my-16 border-slate-200" />
+    <section id="plan" class="scroll-mt-24">
+      <div class="text-center mb-12">
+        <h2 class="text-3xl md:text-4xl font-bold text-slate-800 mb-2">
+          <span class="section-title">Feuille de Route pour la Transformation</span>
+        </h2>
+        <p class="mt-8 text-lg max-w-3xl mx-auto text-slate-600">
+          Transformer les faiblesses en forces nécessite une approche
+          structurée. Voici une proposition de feuille de route stratégique en
+          3 phases, conçue pour générer de la valeur à chaque étape et
+          positionner la clinique comme un leader moderne.
+        </p>
+      </div>
+      <div class="relative">
+        <!-- Vertical line for timeline -->
+        <div class="timeline-line bg-slate-200 hidden md:block"></div>
+        <!-- Timeline items -->
+        <div class="space-y-20">
+          <!-- Phase 1 -->
+          <div class="relative md:grid md:grid-cols-2 md:gap-x-12 items-center">
+            <div class="md:text-right pb-10 md:pb-0">
+              <div class="timeline-dot bg-amber-500"></div>
+              <div
+                class="inline-block bg-amber-100 text-amber-700 font-bold px-4 py-1 rounded-full text-sm mb-4"
+              >
+                Phase 1 (0-6 mois)
+              </div>
+              <h3 class="text-2xl font-bold text-slate-800 mt-2">
+                Visibilité & "Quick Wins"
+              </h3>
+              <div class="mt-4 bg-amber-50 p-4 rounded-lg inline-block">
+                <div class="flex items-center">
+                  <i class="fas fa-bullseye text-amber-600 mr-2"></i>
+                  <span class="font-semibold">Objectif:</span>
+                </div>
+                <p class="text-sm mt-1">
+                  Stopper l'hémorragie de parts de marché en rendant la clinique visible, moderne et accessible en ligne.
+                </p>
+              </div>
+            </div>
+            <div class="mt-4 md:mt-0 md:pl-12">
+              <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-amber-500">
+                <ul class="space-y-3">
+                  <li class="flex items-start">
+                    <span class="bg-amber-100 text-amber-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">1</span>
+                    <span>Lancement d'un site web moderne et multilingue</span>
+                  </li>
+                  <li class="flex items-start">
+                    <span class="bg-amber-100 text-amber-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">2</span>
+                    <span>Intégration de la prise de RDV et devis en ligne</span>
+                  </li>
+                  <li class="flex items-start">
+                    <span class="bg-amber-100 text-amber-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">3</span>
+                    <span>Création et animation des réseaux sociaux (LinkedIn, Facebook)</span>
+                  </li>
+                  <li class="flex items-start">
+                    <span class="bg-amber-100 text-amber-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">4</span>
+                    <span>Lancement de l'étude de faisabilité pour l'imagerie</span>
+                  </li>
+                </ul>
+                <div class="mt-6 bg-slate-50 p-4 rounded-lg">
+                  <div class="flex items-center">
+                    <i class="fas fa-chart-line text-amber-600 mr-2"></i>
+                    <span class="font-semibold">Impact attendu:</span>
+                  </div>
+                  <p class="text-sm mt-1">
+                    +30% de visibilité en ligne, +20% de nouveaux patients via le numérique
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- Phase 2 -->
+          <div class="relative md:grid md:grid-cols-2 md:gap-x-12 items-center">
+            <div class="md:text-right md:order-2 pb-10 md:pb-0">
+              <div class="timeline-dot bg-blue-500"></div>
+              <div
+                class="inline-block bg-blue-100 text-blue-700 font-bold px-4 py-1 rounded-full text-sm mb-4"
+              >
+                Phase 2 (6-18 mois)
+              </div>
+              <h3 class="text-2xl font-bold text-slate-800 mt-2">
+                Investissement Cœur de Métier
+              </h3>
+              <div class="mt-4 bg-blue-50 p-4 rounded-lg inline-block">
+                <div class="flex items-center">
+                  <i class="fas fa-bullseye text-blue-600 mr-2"></i>
+                  <span class="font-semibold">Objectif:</span>
+                </div>
+                <p class="text-sm mt-1">
+                  Renforcer le plateau technique pour soutenir les spécialités clés et moderniser la gestion interne.
+                </p>
+              </div>
+            </div>
+            <div class="mt-4 md:mt-0 md:order-1 md:pr-12">
+              <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500">
+                <ul class="space-y-3">
+                  <li class="flex items-start">
+                    <span class="bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">1</span>
+                    <span>Finalisation du business plan pour le pôle imagerie (Scanner/IRM)</span>
+                  </li>
+                  <li class="flex items-start">
+                    <span class="bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">2</span>
+                    <span>Sélection des fournisseurs et sécurisation du financement</span>
+                  </li>
+                  <li class="flex items-start">
+                    <span class="bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">3</span>
+                    <span>Lancement des travaux d'aménagement du pôle</span>
+                  </li>
+                  <li class="flex items-start">
+                    <span class="bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">4</span>
+                    <span>Déploiement d'un Dossier Patient Électronique (DPE) "léger"</span>
+                  </li>
+                </ul>
+                <div class="mt-6 bg-slate-50 p-4 rounded-lg">
+                  <div class="flex items-center">
+                    <i class="fas fa-chart-line text-blue-600 mr-2"></i>
+                    <span class="font-semibold">Impact attendu:</span>
+                  </div>
+                  <p class="text-sm mt-1">
+                    Réduction de 40% des examens externalisés, amélioration de 30% de l'efficacité administrative
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- Phase 3 -->
+          <div class="relative md:grid md:grid-cols-2 md:gap-x-12 items-center">
+            <div class="md:text-right pb-10 md:pb-0">
+              <div class="timeline-dot bg-green-500"></div>
+              <div
+                class="inline-block bg-green-100 text-green-700 font-bold px-4 py-1 rounded-full text-sm mb-4"
+              >
+                Phase 3 (18+ mois)
+              </div>
+              <h3 class="text-2xl font-bold text-slate-800 mt-2">
+                Expansion & Innovation
+              </h3>
+              <div class="mt-4 bg-green-50 p-4 rounded-lg inline-block">
+                <div class="flex items-center">
+                  <i class="fas fa-bullseye text-green-600 mr-2"></i>
+                  <span class="font-semibold">Objectif:</span>
+                </div>
+                <p class="text-sm mt-1">
+                  Positionner la PLC comme un acteur compétitif et innovant, leader sur ses niches.
+                </p>
+              </div>
+            </div>
+            <div class="mt-4 md:mt-0 md:pl-12">
+              <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-green-500">
+                <ul class="space-y-3">
+                  <li class="flex items-start">
+                    <span class="bg-green-100 text-green-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">1</span>
+                    <span>Mise en service opérationnelle du scanner et de l'IRM</span>
+                  </li>
+                  <li class="flex items-start">
+                    <span class="bg-green-100 text-green-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">2</span>
+                    <span>Déploiement complet du DPE dans tous les services</span>
+                  </li>
+                  <li class="flex items-start">
+                    <span class="bg-green-100 text-green-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">3</span>
+                    <span>Lancement de services pilotes de télémédecine</span>
+                  </li>
+                  <li class="flex items-start">
+                    <span class="bg-green-100 text-green-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">4</span>
+                    <span>Engagement dans une démarche de certification qualité (ISO 9001)</span>
+                  </li>
+                </ul>
+                <div class="mt-6 bg-slate-50 p-4 rounded-lg">
+                  <div class="flex items-center">
+                    <i class="fas fa-chart-line text-green-600 mr-2"></i>
+                    <span class="font-semibold">Impact attendu:</span>
+                  </div>
+                  <p class="text-sm mt-1">
+                    +50% de revenus d'imagerie, +15% de patients internationaux, certification qualité obtenue
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- ROI Section -->
+      <div class="mt-20 bg-gradient-to-r from-primary to-primary-light rounded-2xl p-8 text-white">
+        <div class="max-w-4xl mx-auto">
+          <h3 class="text-2xl font-bold mb-6 text-center">Retour sur Investissement Projeté</h3>
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div class="bg-white/10 p-4 rounded-xl text-center">
+              <div class="text-3xl font-bold mb-2">750K TND</div>
+              <p>Économies annuelles par réduction d'externalisation</p>
+            </div>
+            <div class="bg-white/10 p-4 rounded-xl text-center">
+              <div class="text-3xl font-bold mb-2">+40%</div>
+              <p>Augmentation des revenus d'imagerie</p>
+            </div>
+            <div class="bg-white/10 p-4 rounded-xl text-center">
+              <div class="text-3xl font-bold mb-2">3-5 ans</div>
+              <p>Retour sur investissement total</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  <footer class="bg-slate-800 text-slate-300 mt-16">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+        <div>
+          <div class="flex items-center mb-4">
+            <div class="bg-primary-light p-2 rounded-lg mr-3">
+              <i class="fas fa-hospital text-white"></i>
+            </div>
+            <h4 class="font-bold text-lg">Polyclinique La Corniche</h4>
+          </div>
+          <p class="text-sm text-slate-400">
+            Transformation stratégique pour une clinique moderne et compétitive.
+          </p>
+        </div>
+        <div>
+          <h4 class="font-bold text-slate-200 mb-4">Sections</h4>
+          <ul class="space-y-2">
+            <li><a href="#synthese" class="text-slate-400 hover:text-white transition">Synthèse</a></li>
+            <li><a href="#diagnostic" class="text-slate-400 hover:text-white transition">Diagnostic</a></li>
+            <li><a href="#concurrence" class="text-slate-400 hover:text-white transition">Concurrence</a></li>
+            <li><a href="#plan" class="text-slate-400 hover:text-white transition">Plan d'Action</a></li>
+          </ul>
+        </div>
+        <div>
+          <h4 class="font-bold text-slate-200 mb-4">Contact</h4>
+          <ul class="space-y-2 text-slate-400">
+            <li class="flex items-center">
+              <i class="fas fa-envelope mr-2"></i>
+              [email protected]
+            </li>
+            <li class="flex items-center">
+              <i class="fas fa-phone mr-2"></i>
+              +216 73 000 000
+            </li>
+            <li class="flex items-center">
+              <i class="fas fa-map-marker-alt mr-2"></i>
+              Sousse, Tunisie
+            </li>
+          </ul>
+        </div>
+        <div>
+          <h4 class="font-bold text-slate-200 mb-4">À propos</h4>
+          <p class="text-sm text-slate-400">
+            Ce tableau de bord interactif présente une analyse stratégique complète pour la transformation de la Polyclinique La Corniche.
+          </p>
+        </div>
+      </div>
+      <div class="border-t border-slate-700 mt-8 pt-6 text-center text-sm text-slate-400">
+        <p>&copy; 2025 - Application d'Analyse Stratégique Interactive.</p>
+        <p class="mt-1">
+          Générée pour une mission de conseil en e-santé. Données basées sur le rapport d'analyse fourni.
+        </p>
+      </div>
+    </div>
+  </footer>
+  <script>
+    document.addEventListener("DOMContentLoaded", () => {
+      // Mobile menu toggle
+      const mobileMenuButton = document.getElementById('mobile-menu-button');
+      const mobileMenu = document.getElementById('mobile-menu');
+      mobileMenuButton.addEventListener('click', () => {
+        mobileMenu.classList.toggle('hidden');
+      });
+      // Competitor data
+      const appData = {
+        competitors: [
+          {
+            name: "Polyclinique La Corniche",
+            city: "Sousse",
+            mri: false,
+            radiotherapy: false,
+            quality: false,
+            digital_maturity: 0,
+            color: "#f59e0b",
+          },
+          {
+            name: "Clinique El Yosr Int.",
+            city: "Sousse",
+            mri: false,
+            radiotherapy: false,
+            quality: false,
+            digital_maturity: 4,
+            color: "#64748b",
+          },
+          {
+            name: "Clinique Essalem",
+            city: "Sousse",
+            mri: false,
+            radiotherapy: false,
+            quality: true,
+            digital_maturity: 3,
+            color: "#64748b",
+          },
+          {
+            name: "CMIK",
+            city: "Sousse",
+            mri: true,
+            radiotherapy: true,
+            quality: true,
+            digital_maturity: 4,
+            color: "#64748b",
+          },
+          {
+            name: "Clinique Les Oliviers",
+            city: "Sousse",
+            mri: false,
+            radiotherapy: false,
+            quality: false,
+            digital_maturity: 3,
+            color: "#64748b",
+          },
+          {
+            name: "Carthage Medical",
+            city: "Monastir",
+            mri: true,
+            radiotherapy: false,
+            quality: false,
+            digital_maturity: 3,
+            color: "#64748b",
+          },
+          {
+            name: "Clinique du Centre",
+            city: "Ksar Hellal",
+            mri: true,
+            radiotherapy: false,
+            quality: true,
+            digital_maturity: 4,
+            color: "#64748b",
+          },
+          {
+            name: "Clinique Errahma",
+            city: "Mahdia",
+            mri: true,
+            radiotherapy: false,
+            quality: false,
+            digital_maturity: 4,
+            color: "#64748b",
+          },
+        ],
+      };
+      // Initialize chart
+      const ctx = document.getElementById("competitorChart").getContext("2d");
+      let competitorChart;
+      // Function to render chart
+      function renderChart(data) {
+        if (competitorChart) {
+          competitorChart.destroy();
+        }
+        const chartData = {
+          labels: data.map((c) => `${c.name} (${c.city})`),
+          datasets: [
+            {
+              label: "Score de Maturité Digitale (sur 5)",
+              data: data.map((c) => c.digital_maturity),
+              backgroundColor: data.map((c) => c.color),
+              borderColor: data.map((c) =>
+                c.color === "#f59e0b" ? "#b45309" : "#475569"
+              ),
+              borderWidth: 1,
+              borderRadius: 4,
+            },
+          ],
+        };
+        const chartOptions = {
+          responsive: true,
+          maintainAspectRatio: false,
+          indexAxis: "y",
+          scales: {
+            x: {
+              beginAtZero: true,
+              max: 5,
+              grid: {
+                color: "#e2e8f0",
+              },
+              ticks: {
+                color: "#475569",
+                stepSize: 1
+              },
+            },
+            y: {
+              grid: {
+                display: false,
+              },
+              ticks: {
+                color: "#1e293b",
+                font: {
+                  weight: "500",
+                },
+              },
+            },
+          },
+          plugins: {
+            legend: {
+              display: false,
+            },
+            tooltip: {
+              backgroundColor: "#1e293b",
+              titleFont: { size: 14, weight: "bold" },
+              bodyFont: { size: 12 },
+              padding: 12,
+              cornerRadius: 6,
+              displayColors: false,
+              callbacks: {
+                label: function (context) {
+                  let label = context.dataset.label || "";
+                  if (label) {
+                    label += ": ";
+                  }
+                  if (context.parsed.x !== null) {
+                    label += context.parsed.x + " / 5";
+                  }
+                  return label;
+                },
+              },
+            },
+          },
+        };
+        competitorChart = new Chart(ctx, {
+          type: "bar",
+          data: chartData,
+          options: chartOptions,
+        });
+        // Update table
+        const tableBody = document.getElementById('competitor-table-body');
+        tableBody.innerHTML = '';
+        data.forEach(competitor => {
+          const row = document.createElement('tr');
+          row.innerHTML = `
+            <td class="px-6 py-4 whitespace-nowrap ${competitor.name.includes('Corniche') ? 'font-bold text-primary' : 'text-slate-700'}">
+              ${competitor.name}
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-slate-500">${competitor.city}</td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              ${competitor.mri ? '<span class="text-green-500"><i class="fas fa-check"></i></span>' : '<span class="text-red-500"><i class="fas fa-times"></i></span>'}
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              ${competitor.radiotherapy ? '<span class="text-green-500"><i class="fas fa-check"></i></span>' : '<span class="text-red-500"><i class="fas fa-times"></i></span>'}
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              ${competitor.quality ? '<span class="text-green-500"><i class="fas fa-check"></i></span>' : '<span class="text-red-500"><i class="fas fa-times"></i></span>'}
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              <div class="flex items-center">
+                <div class="w-16 bg-slate-200 rounded-full h-2 mr-2">
+                  <div class="bg-primary h-2 rounded-full" style="width: ${competitor.digital_maturity * 20}%"></div>
+                </div>
+                <span>${competitor.digital_maturity}/5</span>
+              </div>
+            </td>
+          `;
+          tableBody.appendChild(row);
+        });
+      }
+      // Filter buttons functionality
+      const filterButtons = document.querySelectorAll(".btn-filter");
+      filterButtons.forEach((button) => {
+        button.addEventListener("click", () => {
+          filterButtons.forEach((btn) => btn.classList.remove("active"));
+          button.classList.add("active");
+          let filteredData = appData.competitors;
+          const filterType = button.id;
+          if (filterType === "filter-mri") {
+            filteredData = appData.competitors.filter(
+              (c) => c.mri || c.name === "Polyclinique La Corniche"
+            );
+          } else if (filterType === "filter-radio") {
+            filteredData = appData.competitors.filter(
+              (c) => c.radiotherapy || c.name === "Polyclinique La Corniche"
+            );
+          } else if (filterType === "filter-quality") {
+            filteredData = appData.competitors.filter(
+              (c) => c.quality || c.name === "Polyclinique La Corniche"
+            );
+          }
+          filteredData.forEach((d) => {
+            d.color =
+              d.name === "Polyclinique La Corniche" ? "#f59e0b" : "#64748b";
+          });
+          renderChart(filteredData);
+        });
+      });
+      // Initialize with all competitors
+      document.getElementById("filter-all").click();
+      // Navigation highlighting
+      const navLinks = document.querySelectorAll(".nav-link");
+      const sections = document.querySelectorAll("section");
+      window.addEventListener("scroll", () => {
+        let current = "";
+        sections.forEach((section) => {
+          const sectionTop = section.offsetTop;
+          if (pageYOffset >= sectionTop - 150) {
+            current = section.getAttribute("id");
+          }
+        });
+        navLinks.forEach((link) => {
+          link.classList.remove("active-link");
+          if (link.getAttribute("href").includes(current)) {
+            link.classList.add("active-link");
+          }
+        });
+      });
+      // Animate counter
+      const counterElement = document.querySelector('.counter');
+      let count = 0;
+      const counterInterval = setInterval(() => {
+        if (count < 5) {
+          count += 0.1;
+          counterElement.textContent = count.toFixed(1) + '/5';
+        } else {
+          clearInterval(counterInterval);
+        }
+      }, 100);
+    });
+  </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=Maheri/plc-sousse" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>