Guillaume-Sanchez
1175 lines
85 KiB
HTML
1175 lines
85 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Soutenance Cyberusgate</title>
|
|
|
|
<!-- Load Tailwind CSS for styling -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- Load FontAwesome for icons -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
|
|
<!-- Load Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: #0b1120; /* Ultra dark slate background */
|
|
color: #f8fafc; /* Slate 50 */
|
|
overflow: hidden; /* Prevent scrolling during presentation */
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Slide Transitions */
|
|
.slide {
|
|
display: none;
|
|
opacity: 0;
|
|
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
|
|
transform: translateY(20px);
|
|
height: calc(100vh - 9rem); /* Account for header and footer */
|
|
width: 100%;
|
|
padding: 1.5rem 3rem; /* Compact padding */
|
|
box-sizing: border-box;
|
|
overflow-y: auto; /* Enable scroll ONLY if content exceeds screen */
|
|
}
|
|
|
|
.slide.active {
|
|
display: flex;
|
|
flex-direction: column;
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* OPTIMISATIONS ANTI-SCROLL : Force le contenu à tenir sur 1 seul écran */
|
|
.slide h2 {
|
|
margin-bottom: 1.25rem !important;
|
|
padding-bottom: 0.5rem !important;
|
|
}
|
|
.slide > p.text-xl, .slide > p.text-lg {
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
.pb-8 { padding-bottom: 0 !important; }
|
|
.gap-12 { gap: 1.5rem !important; }
|
|
.gap-10 { gap: 1.5rem !important; }
|
|
.mb-10 { margin-bottom: 1.5rem !important; }
|
|
|
|
/* Background Glow Effect */
|
|
.bg-glow {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 1000px;
|
|
height: 1000px;
|
|
background: radial-gradient(circle, rgba(14,165,233,0.08) 0%, rgba(11,17,32,0) 70%);
|
|
transform: translate(-50%, -50%);
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar { width: 6px; }
|
|
::-webkit-scrollbar-track { background: #0f172a; }
|
|
::-webkit-scrollbar-thumb { background: #38bdf8; border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #0ea5e9; }
|
|
|
|
/* Timeline Styles */
|
|
.timeline-step {
|
|
height: 4px;
|
|
flex-grow: 1;
|
|
background-color: #1e293b;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
.timeline-step.completed { background-color: #38bdf8; }
|
|
.timeline-step.active {
|
|
background-color: #0ea5e9;
|
|
box-shadow: 0 0 12px rgba(14,165,233,0.6);
|
|
height: 6px;
|
|
transform: translateY(-1px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="relative min-h-screen flex flex-col">
|
|
|
|
<div class="bg-glow"></div>
|
|
|
|
<header class="w-full h-20 bg-slate-900/80 backdrop-blur-xl border-b border-slate-800 z-50 flex flex-col justify-center px-8 shrink-0 shadow-lg">
|
|
<div class="flex justify-between items-center mb-3">
|
|
<div class="flex items-center gap-3">
|
|
<img src="https://guillaume-sanchez.fr/images/cyberusgate/cyberusgate_logo.png" alt="Logo Cyberusgate" class="h-10 object-contain rounded-md" onerror="this.src='https://placehold.co/100x100/0f172a/38bdf8?text=Logo'">
|
|
<span class="text-2xl font-bold tracking-widest uppercase">Cyberusgate</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-6">
|
|
<span id="slide-counter" class="text-slate-400 font-medium font-mono text-lg tracking-wider">1 / 20</span>
|
|
<div class="flex gap-2">
|
|
<button id="prev-btn" class="bg-slate-800 hover:bg-slate-700 text-white p-2.5 rounded-lg border border-slate-700 transition-all active:scale-95">
|
|
<i class="fas fa-chevron-left w-5 h-5 flex items-center justify-center"></i>
|
|
</button>
|
|
<button id="next-btn" class="bg-sky-600 hover:bg-sky-500 text-white p-2.5 rounded-lg border border-sky-500 transition-all active:scale-95 shadow-[0_0_15px_rgba(14,165,233,0.3)]">
|
|
<i class="fas fa-chevron-right w-5 h-5 flex items-center justify-center"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Timeline Bar -->
|
|
<div class="flex w-full gap-1.5" id="timeline-container">
|
|
<!-- Injected via JS -->
|
|
</div>
|
|
</header>
|
|
|
|
<main id="presentation-container" class="relative z-10 w-full max-w-7xl mx-auto flex-grow flex items-center">
|
|
|
|
<!-- ==========================================
|
|
PARTIE 1 : NICOLAS (CEO)
|
|
========================================== -->
|
|
|
|
<!-- SLIDE 0: INTRO -->
|
|
<div class="slide" data-speaker="Nicolas Morais" data-role="Directeur Général & Stratégie" data-section="Vision">
|
|
<div class="flex-grow flex flex-col justify-center items-center text-center">
|
|
<div class="w-40 h-40 bg-slate-900 rounded-[2rem] border border-sky-500/30 flex items-center justify-center mb-8 shadow-[0_0_50px_rgba(14,165,233,0.15)] relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-gradient-to-b from-sky-500/10 to-transparent"></div>
|
|
<img src="https://guillaume-sanchez.fr/images/cyberusgate/cyberusgate_logo.png" alt="Logo Cyberusgate" class="w-32 h-32 object-contain relative z-10 rounded-xl" onerror="this.src='https://placehold.co/150x150/0f172a/38bdf8?text=Logo'">
|
|
</div>
|
|
<h1 class="text-7xl font-extrabold mb-6 tracking-tight">CYBERUSGATE</h1>
|
|
<p class="text-3xl text-slate-300 font-light mb-12">Sécurité Cybernétique et Contrôle d'Accès</p>
|
|
<div class="bg-sky-900/30 border border-sky-500/50 py-3 px-8 rounded-full shadow-lg shadow-sky-900/20">
|
|
<p class="text-sky-300 font-semibold tracking-widest uppercase text-sm">Vers un nouveau standard d'entreprise</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SLIDE 1: EQUIPE / GOUVERNANCE (Organigramme Fixé) -->
|
|
<div class="slide" data-speaker="Nicolas Morais" data-role="Directeur Général & Stratégie" data-section="Vision">
|
|
<h2 class="text-4xl font-bold mb-6 border-b border-slate-800 pb-4"><span class="text-sky-400">1.</span> Gouvernance du Projet</h2>
|
|
|
|
<div class="flex flex-col items-center justify-center h-full gap-2 w-full max-w-5xl mx-auto">
|
|
<!-- CEO Level -->
|
|
<div class="bg-slate-800 p-4 rounded-2xl border-t-4 border-sky-400 text-center w-64 shadow-xl z-10">
|
|
<div class="w-20 h-20 bg-slate-900 rounded-full mx-auto mb-2 border border-slate-700 flex items-center justify-center text-xl text-sky-400"><img src="https://guillaume-sanchez.fr/images/cyberusgate/nicolas.jpeg" alt="Chess King Icon" class="rounded-full"></div>
|
|
<h3 class="font-bold text-lg leading-tight">Nicolas</h3>
|
|
<p class="text-sky-400 text-xs font-medium mb-1">Dir. Général & Stratégie</p>
|
|
<p class="text-[10px] text-slate-400">Gouvernance, Vision, Scalabilité</p>
|
|
</div>
|
|
|
|
<!-- Connector Lines Structure -->
|
|
<div class="flex flex-col items-center w-full my-2">
|
|
<div class="w-px h-6 bg-slate-600"></div>
|
|
<div class="w-3/4 h-px bg-slate-600"></div>
|
|
<div class="flex justify-between w-3/4">
|
|
<div class="w-px h-6 bg-slate-600"></div>
|
|
<div class="w-px h-6 bg-slate-600"></div>
|
|
<div class="w-px h-6 bg-slate-600"></div>
|
|
<div class="w-px h-6 bg-slate-600"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Directors Level (Grid 4 columns) -->
|
|
<div class="grid grid-cols-4 gap-4 w-full z-10">
|
|
<!-- Anthony -->
|
|
<div class="bg-slate-800/80 p-4 rounded-2xl border border-slate-700 text-center hover:bg-slate-800 transition-colors">
|
|
<div class="w-20 h-20 bg-slate-900 rounded-full mx-auto mb-2 flex items-center justify-center text-sky-400"><img src="https://guillaume-sanchez.fr/images/cyberusgate/anthony.jpg" alt="Microchip Icon" class="rounded-full"></div>
|
|
<h3 class="font-bold text-sm">Anthony</h3>
|
|
<p class="text-sky-400 text-[11px] mb-1">Dir. Technique</p>
|
|
<p class="text-[10px] text-slate-400 leading-tight">Innovation Tech & UX<br>Technologie invisible</p>
|
|
</div>
|
|
<!-- Guillaume -->
|
|
<div class="bg-slate-800/80 p-4 rounded-2xl border border-slate-700 text-center hover:bg-slate-800 transition-colors">
|
|
<div class="w-20 h-20 bg-slate-900 rounded-full mx-auto mb-2 flex items-center justify-center text-sky-400"><img src="https://guillaume-sanchez.fr/images/cyberusgate/guillaume.jpg" alt="Scale Icon" class="rounded-full"></div>
|
|
<h3 class="font-bold text-sm">Guillaume</h3>
|
|
<p class="text-sky-400 text-[11px] mb-1">Dir. Conformité</p>
|
|
<p class="text-[10px] text-slate-400 leading-tight">Éthique, RGPD<br>Protection des données</p>
|
|
</div>
|
|
<!-- Erkin -->
|
|
<div class="bg-slate-800/80 p-4 rounded-2xl border border-slate-700 text-center hover:bg-slate-800 transition-colors">
|
|
<div class="w-20 h-20 bg-slate-900 rounded-full mx-auto mb-2 flex items-center justify-center text-sky-400"><img src="https://guillaume-sanchez.fr/images/cyberusgate/erkin.jpeg" alt="Chart Line Icon" class="rounded-full"></div>
|
|
<h3 class="font-bold text-sm">Erkin</h3>
|
|
<p class="text-sky-400 text-[11px] mb-1">Dir. Commercial</p>
|
|
<p class="text-[10px] text-slate-400 leading-tight">Acquisition, Marketing<br>Modernisation B2B</p>
|
|
</div>
|
|
<!-- Antoine -->
|
|
<div class="bg-slate-800/80 p-4 rounded-2xl border border-slate-700 text-center hover:bg-slate-800 transition-colors">
|
|
<div class="w-20 h-20 bg-slate-900 rounded-full mx-auto mb-2 flex items-center justify-center text-sky-400"><img src="https://guillaume-sanchez.fr/images/cyberusgate/antoine.jpeg" alt="Coins Icon" class="rounded-full"></div>
|
|
<h3 class="font-bold text-sm">Antoine</h3>
|
|
<p class="text-sky-400 text-[11px] mb-1">Dir. Financier</p>
|
|
<p class="text-[10px] text-slate-400 leading-tight">Infrastructure & Finance<br>Pérennité du modèle</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SLIDE 2: LE PROBLEME -->
|
|
<div class="slide" data-speaker="Nicolas Morais" data-role="Directeur Général & Stratégie" data-section="Le Problème">
|
|
<h2 class="text-4xl font-bold mb-10 border-b border-slate-800 pb-4"><span class="text-sky-400">2.</span> Le Constat de Départ</h2>
|
|
<p class="text-xl text-slate-300 mb-8">Le badge physique PVC est dépassé, coûteux et risqué.</p>
|
|
<div class="grid grid-cols-3 gap-8 flex-grow">
|
|
<div class="bg-slate-800/50 p-8 rounded-2xl border border-slate-700 flex flex-col">
|
|
<div class="text-sky-400 mb-6"><i class="fas fa-id-badge text-4xl"></i></div>
|
|
<h3 class="text-xl font-bold mb-4">Une contrainte opérationnelle</h3>
|
|
<p class="text-slate-400 leading-relaxed">Badge oublié, perdu, prêté, abîmé ou conservé après une mission. Chaque friction perturbe l'accueil et génère de l'attente.</p>
|
|
</div>
|
|
<div class="bg-slate-800/50 p-8 rounded-2xl border border-slate-700 flex flex-col">
|
|
<div class="text-sky-400 mb-6"><i class="fas fa-file-invoice-dollar text-4xl"></i></div>
|
|
<h3 class="text-xl font-bold mb-4">Une charge administrative</h3>
|
|
<p class="text-slate-400 leading-relaxed">Création, encodage, impression, remise, modification et révocation mobilisent inutilement les RH, les moyens généraux et la sécurité (env. 30min/badge).</p>
|
|
</div>
|
|
<div class="bg-slate-800/50 p-8 rounded-2xl border border-slate-700 flex flex-col">
|
|
<div class="text-sky-400 mb-6"><i class="fas fa-door-open text-4xl"></i></div>
|
|
<h3 class="text-xl font-bold mb-4">Une faille potentielle</h3>
|
|
<p class="text-slate-400 leading-relaxed">Un badge non désactivé rapidement (délai de 48h à 72h courant) devient une porte d'entrée physique vers des espaces sensibles.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SLIDE 3: COUT 18,50 -->
|
|
<div class="slide" data-speaker="Nicolas Morais" data-role="Directeur Général & Stratégie" data-section="Le Problème">
|
|
<h2 class="text-4xl font-bold mb-8 border-b border-slate-800 pb-4"><span class="text-sky-400">3.</span> Quantification du Problème</h2>
|
|
<div class="flex h-full gap-8 items-center pb-6">
|
|
<div class="w-1/2 flex justify-center">
|
|
<div class="relative">
|
|
<div class="absolute inset-0 bg-sky-500/20 blur-3xl rounded-full"></div>
|
|
<div class="bg-slate-800 p-10 rounded-3xl border border-slate-700 text-center relative z-10 shadow-2xl">
|
|
<p class="text-slate-400 font-bold tracking-widest uppercase mb-4">Coût complet annuel estimé</p>
|
|
<p class="text-8xl font-black text-white mb-2">18,50 <span class="text-5xl text-sky-400">€</span></p>
|
|
<p class="text-sm text-slate-400 mt-4">par badge et par collaborateur</p>
|
|
<p class="text-xs text-red-400 mt-2 font-bold">+ 12% de perte/vol par an</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-1/2 flex flex-col gap-4">
|
|
<div class="bg-slate-800/50 p-5 rounded-xl border border-slate-700 flex items-center gap-4">
|
|
<div class="text-2xl font-bold text-sky-400 w-16 text-center">3,50 €</div>
|
|
<div>
|
|
<h4 class="font-bold text-sm">Matériel & Composants</h4>
|
|
<p class="text-xs text-slate-400">Support PVC, Puce RFID/NFC, Antenne.</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-slate-800/50 p-5 rounded-xl border border-slate-700 flex items-center gap-4">
|
|
<div class="text-2xl font-bold text-sky-400 w-16 text-center">2,00 €</div>
|
|
<div>
|
|
<h4 class="font-bold text-sm">Personnalisation & Production</h4>
|
|
<p class="text-xs text-slate-400">Impression, rubans YMCKO, laminage.</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-slate-800/50 p-5 rounded-xl border border-sky-900/50 flex items-center gap-4">
|
|
<div class="text-2xl font-bold text-sky-400 w-16 text-center">13,00 €</div>
|
|
<div>
|
|
<h4 class="font-bold text-sky-400 text-sm">Administratif & Temps Humain</h4>
|
|
<p class="text-xs text-slate-300">Saisie SIRH, encodage, gestion à l'accueil, support.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==========================================
|
|
PARTIE 2 : ANTHONY (CTO)
|
|
========================================== -->
|
|
|
|
<!-- SLIDE 4: LA SOLUTION -->
|
|
<div class="slide" data-speaker="Anthony Mvakanga" data-role="Directeur Technique (CTO)" data-section="La Solution">
|
|
<h2 class="text-4xl font-bold mb-8 border-b border-slate-800 pb-4"><span class="text-sky-400">4.</span> La Solution Cyberusgate</h2>
|
|
<p class="text-xl text-slate-300 mb-6">Orchestrer une identité professionnelle dynamique, pas juste ouvrir une porte.</p>
|
|
<div class="grid grid-cols-3 gap-6 h-full pb-6">
|
|
<div class="bg-slate-800 p-6 rounded-2xl border-t-4 border-sky-500 flex flex-col">
|
|
<div class="text-sky-400 mb-4"><i class="fas fa-mobile-screen text-4xl"></i></div>
|
|
<h3 class="text-lg font-bold mb-3">Application Mobile</h3>
|
|
<p class="text-slate-400 leading-relaxed text-sm">Badge virtuel sur smartphone (iOS/Android). Usage simple, verrouillage natif par biométrie (FaceID/TouchID), zéro plastique.</p>
|
|
</div>
|
|
<div class="bg-slate-800 p-6 rounded-2xl border-t-4 border-sky-500 flex flex-col">
|
|
<div class="text-sky-400 mb-4"><i class="fas fa-laptop-code text-4xl"></i></div>
|
|
<h3 class="text-lg font-bold mb-3">Console d'Administration</h3>
|
|
<p class="text-slate-400 leading-relaxed text-sm">Gestion centralisée Cloud. Création de pass éphémères pour les prestataires en 3 clics, gestion des zones et horaires.</p>
|
|
</div>
|
|
<div class="bg-slate-800 p-6 rounded-2xl border-t-4 border-sky-500 flex flex-col">
|
|
<div class="text-sky-400 mb-4"><i class="fas fa-network-wired text-4xl"></i></div>
|
|
<h3 class="text-lg font-bold mb-3">Écosystème & APIs</h3>
|
|
<p class="text-slate-400 leading-relaxed text-sm">Connexion directe avec les SIRH (Lucca, Workday), gestion des temps, et systèmes du Smart Building.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SLIDE 5: INTEROPERABILITE -->
|
|
<div class="slide" data-speaker="Anthony Mvakanga" data-role="Directeur Technique (CTO)" data-section="Technologie">
|
|
<h2 class="text-4xl font-bold mb-6 border-b border-slate-800 pb-4"><span class="text-sky-400">5.</span> Le défi de l'interopérabilité</h2>
|
|
<p class="text-lg text-slate-300 mb-6">La réalité : les fabricants (HID, STid, Genetec) utilisent des SDK fermés. Notre app doit s'adapter à l'existant sans tout remplacer.</p>
|
|
|
|
<div class="grid grid-cols-2 gap-6 h-full pb-6">
|
|
<div class="bg-slate-800/80 p-6 rounded-2xl border border-slate-700 shadow-lg relative overflow-hidden">
|
|
<div class="absolute right-0 top-0 w-32 h-32 bg-blue-500/10 rounded-bl-full"></div>
|
|
<h3 class="text-xl font-bold mb-4 flex items-center gap-3 text-white">
|
|
<i class="fas fa-box-open text-sky-400"></i> Stratégie "SDK Wrapper"
|
|
</h3>
|
|
<p class="text-slate-400 leading-relaxed text-sm mb-4">
|
|
Notre application intègre les SDK officiels de chaque fabricant partenaire. Cyberusgate devient un <strong>"launcher" intelligent</strong> qui détecte le site et appelle le SDK spécifique.
|
|
</p>
|
|
<ul class="space-y-2 text-sm text-slate-300">
|
|
<li class="flex items-center gap-2"><i class="fas fa-check text-green-400"></i> Rétrocompatibilité immédiate</li>
|
|
<li class="flex items-center gap-2"><i class="fas fa-check text-green-400"></i> Aucun matériel à changer pour le client</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bg-slate-800/80 p-6 rounded-2xl border border-slate-700 shadow-lg relative overflow-hidden">
|
|
<div class="absolute right-0 top-0 w-32 h-32 bg-purple-500/10 rounded-bl-full"></div>
|
|
<h3 class="text-xl font-bold mb-4 flex items-center gap-3 text-white">
|
|
<i class="fas fa-code-branch text-purple-400"></i> Standards Ouverts
|
|
</h3>
|
|
<p class="text-slate-400 leading-relaxed text-sm mb-4">
|
|
Pour les nouvelles installations, nous poussons vers des standards de lecture sécurisée modernes, indépendants du matériel propriétaire.
|
|
</p>
|
|
<ul class="space-y-2 text-sm text-slate-300">
|
|
<li class="flex items-start gap-2"><i class="fas fa-shield-halved text-purple-400 mt-1"></i> <span><strong>OSDP :</strong> Plus moderne et sécurisé que Wiegand.</span></li>
|
|
<li class="flex items-start gap-2"><i class="fas fa-key text-purple-400 mt-1"></i> <span><strong>FIDO2 :</strong> Authentification par clés cryptographiques.</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SLIDE 6: ARCHITECTURE LOGICIELLE -->
|
|
<div class="slide" data-speaker="Anthony Mvakanga" data-role="Directeur Technique (CTO)" data-section="Technologie">
|
|
<h2 class="text-4xl font-bold mb-8 border-b border-slate-800 pb-4"><span class="text-sky-400">6.</span> Architecture Logicielle Découplée</h2>
|
|
|
|
<div class="flex flex-col gap-4 h-full pb-6">
|
|
<!-- HAL -->
|
|
<div class="flex items-start gap-4 bg-slate-800/50 p-5 rounded-xl border border-slate-700">
|
|
<div class="w-14 h-14 rounded-full bg-slate-900 border border-slate-600 flex items-center justify-center shrink-0 shadow-inner">
|
|
<i class="fas fa-layer-group text-xl text-sky-400"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-bold mb-1">Couche d'Abstraction (HAL)</h3>
|
|
<p class="text-slate-400 text-sm">Une API interne qui normalise les requêtes. Peu importe le lecteur, l'application traite une commande universelle : <code class="bg-slate-900 text-sky-300 px-2 py-0.5 rounded font-mono text-xs border border-slate-700">RequestAccess(SiteID, UserToken)</code>.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Token Vault -->
|
|
<div class="flex items-start gap-4 bg-slate-800/50 p-5 rounded-xl border border-slate-700">
|
|
<div class="w-14 h-14 rounded-full bg-slate-900 border border-slate-600 flex items-center justify-center shrink-0 shadow-inner">
|
|
<i class="fas fa-vault text-xl text-orange-400"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-bold mb-1">Gestionnaire de Jetons (Token Vault)</h3>
|
|
<p class="text-slate-400 text-sm">Le cœur sécurisé. Utilisation des TEE (Trusted Execution Environment) : <strong>Android StrongBox</strong> ou <strong>Apple Secure Enclave</strong> pour isoler les clés cryptographiques.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Comms -->
|
|
<div class="flex items-start gap-4 bg-slate-800/50 p-5 rounded-xl border border-slate-700">
|
|
<div class="w-14 h-14 rounded-full bg-slate-900 border border-slate-600 flex items-center justify-center shrink-0 shadow-inner">
|
|
<i class="fas fa-satellite-dish text-xl text-green-400"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-bold mb-1">Communication Bidirectionnelle</h3>
|
|
<p class="text-slate-400 text-sm">Gestion des certificats de révocation en temps réel via une connexion backend ultra-sécurisée (HTTPS/TLS 1.3 obligatoire).</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SLIDE 7: CONTRAINTES TECH -->
|
|
<div class="slide" data-speaker="Anthony Mvakanga" data-role="Directeur Technique (CTO)" data-section="Technologie">
|
|
<h2 class="text-4xl font-bold mb-8 border-b border-slate-800 pb-4"><span class="text-sky-400">7.</span> Contraintes Technologiques Majeures</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 h-full pb-6">
|
|
<!-- BLE vs NFC -->
|
|
<div class="bg-slate-800/80 p-5 rounded-xl border-t-4 border-t-blue-500 flex flex-col">
|
|
<div class="mb-3 text-blue-400"><i class="fab fa-bluetooth-b text-3xl"></i></div>
|
|
<h3 class="text-md font-bold mb-2">BLE vs NFC</h3>
|
|
<p class="text-sm text-slate-400 mb-3 flex-grow">
|
|
Le Bluetooth (BLE) permet le "Hands-free" (ouverture sans sortir le téléphone) et une meilleure portée.
|
|
</p>
|
|
<div class="bg-slate-900 p-2 rounded text-xs text-slate-300 border border-slate-700">
|
|
<strong>Défi :</strong> Gérer les états Bluetooth (Scan, GATT) pour une latence < 200ms.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OS / Batterie -->
|
|
<div class="bg-slate-800/80 p-5 rounded-xl border-t-4 border-t-yellow-500 flex flex-col">
|
|
<div class="mb-3 text-yellow-400"><i class="fas fa-battery-half text-3xl"></i></div>
|
|
<h3 class="text-md font-bold mb-2">Permissions OS</h3>
|
|
<p class="text-sm text-slate-400 mb-3 flex-grow">
|
|
iOS et Android restreignent l'accès NFC/BLE en arrière-plan pour éviter de vider la batterie.
|
|
</p>
|
|
<div class="bg-slate-900 p-2 rounded text-xs text-slate-300 border border-slate-700">
|
|
<strong>Défi :</strong> Optimiser le cycle de vie pour un éveil en millisecondes.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CSPN -->
|
|
<div class="bg-slate-800/80 p-5 rounded-xl border-t-4 border-t-red-500 flex flex-col">
|
|
<div class="mb-3 text-red-400"><i class="fas fa-user-shield text-3xl"></i></div>
|
|
<h3 class="text-md font-bold mb-2">Certification Cyber</h3>
|
|
<p class="text-sm text-slate-400 mb-3 flex-grow">
|
|
Centraliser l'accès fait de nous une cible. La sécurité logicielle doit être irréprochable.
|
|
</p>
|
|
<div class="bg-slate-900 p-2 rounded text-xs text-slate-300 border border-slate-700">
|
|
<strong>Défi :</strong> Pentests continus et visée d'une certification type <strong>CSPN</strong> (ANSSI).
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SLIDE 8: ROADMAP -->
|
|
<div class="slide" data-speaker="Anthony Mvakanga" data-role="Directeur Technique (CTO)" data-section="Technologie">
|
|
<h2 class="text-4xl font-bold mb-10 border-b border-slate-800 pb-4"><span class="text-sky-400">8.</span> Roadmap Produit & Déploiement</h2>
|
|
|
|
<div class="relative w-full max-w-5xl mx-auto h-56 mt-12">
|
|
<!-- Ligne principale -->
|
|
<div class="absolute top-1/2 left-0 w-full h-2 bg-slate-700 transform -translate-y-1/2 rounded-full"></div>
|
|
|
|
<!-- Etapes -->
|
|
<div class="absolute top-1/2 left-[10%] transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
|
|
<div class="w-12 h-12 bg-sky-500 rounded-full flex items-center justify-center font-bold text-lg mb-3 shadow-[0_0_15px_rgba(14,165,233,0.5)] z-10">26</div>
|
|
<div class="bg-slate-800 p-3 rounded-lg border border-slate-600 text-center w-36 absolute top-14">
|
|
<h4 class="font-bold text-sm text-sky-400">R&D + Bêta</h4>
|
|
<p class="text-[11px] text-slate-400 mt-1">Prototype, RGPD, pentests</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute top-1/2 left-[36%] transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
|
|
<div class="w-12 h-12 bg-sky-500 rounded-full flex items-center justify-center font-bold text-lg mb-3 shadow-[0_0_15px_rgba(14,165,233,0.5)] z-10">27</div>
|
|
<div class="bg-slate-800 p-3 rounded-lg border border-slate-600 text-center w-36 absolute bottom-14">
|
|
<h4 class="font-bold text-sm text-sky-400">Lancement IDF</h4>
|
|
<p class="text-[11px] text-slate-400 mt-1">15 clients pilotes (coworking, tech)</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute top-1/2 left-[62%] transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
|
|
<div class="w-12 h-12 bg-sky-500 rounded-full flex items-center justify-center font-bold text-lg mb-3 shadow-[0_0_15px_rgba(14,165,233,0.5)] z-10">28</div>
|
|
<div class="bg-slate-800 p-3 rounded-lg border border-slate-600 text-center w-40 absolute top-14">
|
|
<h4 class="font-bold text-sm text-sky-400">Expansion France</h4>
|
|
<p class="text-[11px] text-slate-400 mt-1">45 clients, PME multi-sites</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute top-1/2 left-[90%] transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
|
|
<div class="w-12 h-12 bg-sky-500 rounded-full flex items-center justify-center font-bold text-lg mb-3 shadow-[0_0_15px_rgba(14,165,233,0.5)] z-10">29</div>
|
|
<div class="bg-slate-800 p-3 rounded-lg border border-slate-600 text-center w-40 absolute bottom-14">
|
|
<h4 class="font-bold text-sm text-sky-400">Maturité</h4>
|
|
<p class="text-[11px] text-slate-400 mt-1">110 clients, Offre Enterprise SIRH</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-center mt-12 text-sm text-slate-400 italic">Méthode : bêta-test pilotes → retours utilisateurs → amélioration continue.</p>
|
|
</div>
|
|
|
|
<!-- ==========================================
|
|
PARTIE 3 : GUILLAUME (CISO / ETHIQUE)
|
|
========================================== -->
|
|
|
|
<!-- SLIDE 9: NATURE ET FORME JURIDIQUE -->
|
|
<div class="slide" data-speaker="Guillaume Sanchez" data-role="Directeur Conformité & Éthique" data-section="Sécurité & Légal">
|
|
<h2 class="text-4xl font-bold mb-8 border-b border-slate-800 pb-4"><span class="text-sky-400">9.</span> Structure Juridique & Nature de l'Activité</h2>
|
|
<p class="text-lg text-slate-300 mb-6">Un cadre légal agile et un positionnement d'éditeur logiciel pur.</p>
|
|
|
|
<div class="grid grid-cols-3 gap-6 h-full pb-6">
|
|
<!-- Forme Juridique -->
|
|
<div class="bg-slate-800/80 p-6 rounded-2xl border-t-4 border-sky-500 shadow-lg flex flex-col relative overflow-hidden">
|
|
<div class="absolute -right-4 -top-4 text-sky-500/10 text-8xl"><i class="fas fa-file-contract"></i></div>
|
|
<h3 class="text-xl font-bold mb-2 text-white relative z-10">Forme : S.A.S</h3>
|
|
<p class="text-xs text-sky-400 font-medium mb-4 relative z-10">Société par Actions Simplifiée</p>
|
|
<ul class="text-sm text-slate-300 space-y-2 relative z-10 flex-grow">
|
|
<li class="flex items-start gap-2"><i class="fas fa-check text-green-400 mt-1"></i> <span><strong>Pacte d'associés :</strong> Flexibilité pour la gouvernance à 5.</span></li>
|
|
<li class="flex items-start gap-2"><i class="fas fa-check text-green-400 mt-1"></i> <span><strong>Statut social :</strong> Dirigeants assimilés-salariés.</span></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Nature de l'activité -->
|
|
<div class="bg-slate-800/80 p-6 rounded-2xl border-t-4 border-purple-500 shadow-lg flex flex-col relative overflow-hidden">
|
|
<div class="absolute -right-4 -top-4 text-purple-500/10 text-8xl"><i class="fas fa-cloud"></i></div>
|
|
<h3 class="text-xl font-bold mb-2 text-white relative z-10">Nature : Éditeur SaaS</h3>
|
|
<p class="text-xs text-purple-400 font-medium mb-4 relative z-10">Software as a Service (B2B)</p>
|
|
<ul class="text-sm text-slate-300 space-y-2 relative z-10 flex-grow">
|
|
<li class="flex items-start gap-2"><i class="fas fa-check text-green-400 mt-1"></i> <span><strong>Zéro Stock :</strong> Pas de fabrication de matériel physique.</span></li>
|
|
<li class="flex items-start gap-2"><i class="fas fa-check text-green-400 mt-1"></i> <span><strong>Scalabilité :</strong> Déploiement logiciel massif avec coût marginal faible.</span></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Secteur -->
|
|
<div class="bg-slate-800/80 p-6 rounded-2xl border-t-4 border-emerald-500 shadow-lg flex flex-col relative overflow-hidden">
|
|
<div class="absolute -right-4 -top-4 text-emerald-500/10 text-8xl"><i class="fas fa-building-shield"></i></div>
|
|
<h3 class="text-xl font-bold mb-2 text-white relative z-10">Secteur & ADN</h3>
|
|
<p class="text-xs text-emerald-400 font-medium mb-4 relative z-10">Cybersécurité & PropTech</p>
|
|
<ul class="text-sm text-slate-300 space-y-2 relative z-10 flex-grow">
|
|
<li class="flex items-start gap-2"><i class="fas fa-check text-green-400 mt-1"></i> <span><strong>PropTech :</strong> Smart Building et Flex-Office.</span></li>
|
|
<li class="flex items-start gap-2"><i class="fas fa-check text-green-400 mt-1"></i> <span><strong>RSE :</strong> Dématérialisation responsable (Zéro plastique PVC).</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SLIDE 10: PESTEL -->
|
|
<div class="slide" data-speaker="Guillaume Sanchez" data-role="Directeur Conformité & Éthique" data-section="Sécurité & Légal">
|
|
<h2 class="text-4xl font-bold mb-8 border-b border-slate-800 pb-4"><span class="text-sky-400">10.</span> Environnement PESTEL</h2>
|
|
<div class="grid grid-cols-3 gap-4 h-full pb-6">
|
|
<div class="bg-slate-800/50 p-5 rounded-xl border border-slate-700">
|
|
<h3 class="font-bold text-sky-400 mb-2 flex items-center gap-2"><i class="fas fa-landmark w-5"></i> Politique</h3>
|
|
<p class="text-sm text-slate-300">Pression RSE, recherche de souveraineté numérique (Cloud européen), indépendance technologique.</p>
|
|
</div>
|
|
<div class="bg-slate-800/50 p-5 rounded-xl border border-slate-700">
|
|
<h3 class="font-bold text-green-400 mb-2 flex items-center gap-2"><i class="fas fa-chart-pie w-5"></i> Économique</h3>
|
|
<p class="text-sm text-slate-300">Optimisation des coûts (Opex vs Capex), gestion du Flex-Office, élimination des coûts logistiques.</p>
|
|
</div>
|
|
<div class="bg-slate-800/50 p-5 rounded-xl border border-slate-700">
|
|
<h3 class="font-bold text-purple-400 mb-2 flex items-center gap-2"><i class="fas fa-users w-5"></i> Sociologique</h3>
|
|
<p class="text-sm text-slate-300">Génération Mobile-Only. Attente d'outils fluides, mais vigilance sur l'acceptabilité et le droit à la déconnexion.</p>
|
|
</div>
|
|
<div class="bg-slate-800/50 p-5 rounded-xl border border-slate-700">
|
|
<h3 class="font-bold text-blue-400 mb-2 flex items-center gap-2"><i class="fas fa-microchip w-5"></i> Technologique</h3>
|
|
<p class="text-sm text-slate-300">Maturité NFC/BLE, biométrie native, architectures Cloud sécurisées, interfaçage API (SIRH).</p>
|
|
</div>
|
|
<div class="bg-slate-800/50 p-5 rounded-xl border border-slate-700">
|
|
<h3 class="font-bold text-emerald-400 mb-2 flex items-center gap-2"><i class="fas fa-leaf w-5"></i> Environnement</h3>
|
|
<p class="text-sm text-slate-300">Dématérialisation responsable : fin du plastique PVC (dérivé du pétrole), réduction de l'empreinte.</p>
|
|
</div>
|
|
<div class="bg-slate-800/50 p-5 rounded-xl border border-slate-700">
|
|
<h3 class="font-bold text-red-400 mb-2 flex items-center gap-2"><i class="fas fa-scale-balanced w-5"></i> Légal</h3>
|
|
<p class="text-sm text-slate-300">Cadre RGPD strict, Privacy by Design, directives CNIL sur la traçabilité des salariés.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SLIDE 11: RGPD -->
|
|
<div class="slide" data-speaker="Guillaume Sanchez" data-role="Directeur Conformité & Éthique" data-section="Sécurité & Légal">
|
|
<h2 class="text-4xl font-bold mb-8 border-b border-slate-800 pb-4"><span class="text-sky-400">11.</span> Privacy by Design & RGPD</h2>
|
|
<p class="text-lg text-slate-300 mb-6">La solution doit protéger l'entreprise sans empiéter sur les droits et libertés des salariés.</p>
|
|
<div class="flex flex-col gap-4 h-full pb-6">
|
|
<div class="bg-slate-800/80 p-5 rounded-xl border-l-4 border-sky-500 flex items-start gap-4">
|
|
<i class="fas fa-bullseye text-2xl text-sky-400 mt-1 w-8 text-center"></i>
|
|
<div>
|
|
<h4 class="font-bold text-lg mb-1">Finalité strictement limitée</h4>
|
|
<p class="text-slate-400 text-sm">Gérer les accès. <strong>Aucune géolocalisation en arrière-plan</strong>, aucun flicage des déplacements internes hors bornes de contrôle.</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-slate-800/80 p-5 rounded-xl border-l-4 border-sky-500 flex items-start gap-4">
|
|
<i class="fas fa-compress text-2xl text-sky-400 mt-1 w-8 text-center"></i>
|
|
<div>
|
|
<h4 class="font-bold text-lg mb-1">Minimisation des données</h4>
|
|
<p class="text-slate-400 text-sm">Collecte uniquement des données nécessaires à l'authentification. La biométrie (empreinte/visage) reste locale au téléphone.</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-slate-800/80 p-5 rounded-xl border-l-4 border-sky-500 flex items-start gap-4">
|
|
<i class="fas fa-hourglass-end text-2xl text-sky-400 mt-1 w-8 text-center"></i>
|
|
<div>
|
|
<h4 class="font-bold text-lg mb-1">Durée de conservation</h4>
|
|
<p class="text-slate-400 text-sm">Purge automatique des logs d'accès selon les standards de la CNIL (ex: 3 mois) et information transparente des CSE.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SLIDE 12: RISQUES -->
|
|
<div class="slide" data-speaker="Guillaume Sanchez" data-role="Directeur Conformité & Éthique" data-section="Sécurité & Légal">
|
|
<h2 class="text-4xl font-bold mb-8 border-b border-slate-800 pb-4"><span class="text-sky-400">12.</span> Anticipation des Scénarios Dégradés</h2>
|
|
<table class="w-full text-left bg-slate-800 rounded-2xl overflow-hidden shadow-lg mt-4">
|
|
<thead class="bg-slate-900 border-b border-slate-700">
|
|
<tr>
|
|
<th class="p-5 w-1/2 text-lg text-sky-400">Risque Identifié</th>
|
|
<th class="p-5 w-1/2 text-lg text-sky-400">Réponse Cyberusgate</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-700">
|
|
<tr class="hover:bg-slate-700/50 transition-colors">
|
|
<td class="p-5 font-medium"><i class="fas fa-battery-empty text-red-400 w-6"></i> Téléphone déchargé ou oublié</td>
|
|
<td class="p-5 text-slate-300 text-sm">Délivrance d'un badge temporaire de secours à l'accueil via la console admin (procédure d'urgence).</td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-700/50 transition-colors">
|
|
<td class="p-5 font-medium"><i class="fas fa-wifi text-red-400 w-6"></i> Panne réseau ou Cloud indisponible</td>
|
|
<td class="p-5 text-slate-300 text-sm">Fonctionnement en mode hors-ligne (Offline) via le cache sécurisé des terminaux (SLA 99.99%).</td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-700/50 transition-colors">
|
|
<td class="p-5 font-medium"><i class="fas fa-users-slash text-red-400 w-6"></i> Rejet social / Crainte de flicage</td>
|
|
<td class="p-5 text-slate-300 text-sm">Accompagnement pédagogique des RH et validation du cadre Privacy by Design avec les syndicats.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- ==========================================
|
|
PARTIE 4 : ERKIN (CCO)
|
|
========================================== -->
|
|
|
|
<!-- SLIDE 13: SEGMENTATION -->
|
|
<div class="slide" data-speaker="Erkin Michel Ozturk" data-role="Directeur Commercial (CCO)" data-section="Business & Marché">
|
|
<h2 class="text-4xl font-bold mb-8 border-b border-slate-800 pb-4"><span class="text-sky-400">13.</span> Segmentation & Cibles B2B</h2>
|
|
<div class="flex flex-col gap-5 h-full pb-6">
|
|
<!-- Segment 1 -->
|
|
<div class="flex items-center justify-between bg-slate-800/80 p-5 rounded-2xl border border-slate-700 hover:border-slate-500 transition-colors">
|
|
<div class="flex items-center gap-6">
|
|
<div class="w-12 h-12 bg-slate-900 rounded-xl flex items-center justify-center"><i class="fas fa-coffee text-sky-400 text-xl"></i></div>
|
|
<div>
|
|
<h4 class="font-bold text-lg">Coworking & Tiers-lieux</h4>
|
|
<p class="text-sm text-slate-400 mt-1">Cycle de vente court (1-4 sem.). Bons clients pilotes pour générer de la traction.</p>
|
|
</div>
|
|
</div>
|
|
<span class="bg-slate-700 text-xs px-4 py-1.5 rounded-full font-medium">Priorité 1</span>
|
|
</div>
|
|
<!-- Segment 2 -->
|
|
<div class="flex items-center justify-between bg-sky-900/30 p-5 rounded-2xl border border-sky-500 shadow-[0_0_20px_rgba(14,165,233,0.1)]">
|
|
<div class="flex items-center gap-6">
|
|
<div class="w-12 h-12 bg-sky-500/20 rounded-xl flex items-center justify-center"><i class="fas fa-building text-sky-400 text-xl"></i></div>
|
|
<div>
|
|
<h4 class="font-bold text-lg text-sky-400">PME & ETI Multi-sites</h4>
|
|
<p class="text-sm text-slate-300 mt-1">Besoin fort de flexibilité, volume d'utilisateurs (MRR), cycles maîtrisés (2-4 mois).</p>
|
|
</div>
|
|
</div>
|
|
<span class="bg-sky-500 text-xs px-4 py-1.5 rounded-full font-bold text-white">Cœur de cible</span>
|
|
</div>
|
|
<!-- Segment 3 -->
|
|
<div class="flex items-center justify-between bg-slate-800/80 p-5 rounded-2xl border border-slate-700 hover:border-slate-500 transition-colors">
|
|
<div class="flex items-center gap-6">
|
|
<div class="w-12 h-12 bg-slate-900 rounded-xl flex items-center justify-center"><i class="fas fa-industry text-sky-400 text-xl"></i></div>
|
|
<div>
|
|
<h4 class="font-bold text-lg">Grands Comptes & Industrie</h4>
|
|
<p class="text-sm text-slate-400 mt-1">Exigences cyber extrêmes (SIRH), cycles longs (6-12 mois). Objectif de scale.</p>
|
|
</div>
|
|
</div>
|
|
<span class="bg-slate-700 text-xs px-4 py-1.5 rounded-full font-medium">Maturité</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SLIDE 14: CONCURRENCE (GAP ANALYSIS) -->
|
|
<div class="slide" data-speaker="Erkin Michel Ozturk" data-role="Directeur Commercial (CCO)" data-section="Business & Marché">
|
|
<h2 class="text-4xl font-bold mb-10 border-b border-slate-800 pb-4"><span class="text-sky-400">14.</span> Analyse Concurrentielle (Gap Analysis)</h2>
|
|
<div class="flex h-full gap-8 pb-8">
|
|
<!-- Concurrents -->
|
|
<div class="w-1/3 flex flex-col gap-5">
|
|
<div class="bg-slate-800/80 p-5 rounded-2xl border-l-4 border-slate-500 shadow-lg">
|
|
<h3 class="font-bold text-lg mb-1 text-white">Géants Historiques</h3>
|
|
<p class="text-[11px] text-slate-400 font-bold tracking-wider uppercase mb-3">HID, Salto, Castel</p>
|
|
<ul class="text-sm text-slate-300 space-y-2">
|
|
<li class="flex items-center gap-2"><i class="fas fa-times-circle text-red-400"></i> Systèmes fermés/propriétaires</li>
|
|
<li class="flex items-center gap-2"><i class="fas fa-times-circle text-red-400"></i> Lourd investissement matériel</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-slate-800/80 p-5 rounded-2xl border-l-4 border-orange-500 shadow-lg">
|
|
<h3 class="font-bold text-lg mb-1 text-white">Startups "Cloud-Native"</h3>
|
|
<p class="text-[11px] text-slate-400 font-bold tracking-wider uppercase mb-3">Kisi, Welcomr</p>
|
|
<ul class="text-sm text-slate-300 space-y-2">
|
|
<li class="flex items-center gap-2"><i class="fas fa-exclamation-triangle text-orange-400"></i> Dépendance totale au Cloud</li>
|
|
<li class="flex items-center gap-2"><i class="fas fa-exclamation-triangle text-orange-400"></i> Coût élevé par utilisateur</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Positionnement Cyberusgate -->
|
|
<div class="w-2/3 bg-sky-900/20 p-8 rounded-3xl border border-sky-500 shadow-[0_0_30px_rgba(14,165,233,0.15)] flex flex-col justify-center items-center text-center relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-sky-500/10 to-transparent"></div>
|
|
<img src="https://guillaume-sanchez.fr/images/cyberusgate/cyberusgate_logo.png" class="w-24 mb-4 relative z-10 rounded-xl shadow-lg object-contain" alt="Logo" onerror="this.src='https://placehold.co/100/0f172a/38bdf8?text=Logo'">
|
|
<h3 class="text-3xl font-black text-white mb-3 relative z-10">Le Positionnement Cyberusgate</h3>
|
|
<p class="text-sm text-slate-300 mb-8 relative z-10">L'équilibre parfait entre la rigueur d'entreprise et l'agilité logicielle SaaS.</p>
|
|
|
|
<div class="grid grid-cols-2 gap-4 w-full relative z-10">
|
|
<div class="bg-slate-900/80 p-4 rounded-xl border border-sky-500/30 flex items-center gap-4 hover:border-sky-400 transition-colors">
|
|
<div class="w-10 h-10 rounded-full bg-sky-500/20 flex items-center justify-center text-sky-400 shrink-0"><i class="fas fa-plug"></i></div>
|
|
<div class="text-left"><h4 class="font-bold text-sm text-white leading-tight">Interopérabilité</h4><p class="text-[11px] text-slate-400 mt-1">Conserve le parc matériel existant</p></div>
|
|
</div>
|
|
<div class="bg-slate-900/80 p-4 rounded-xl border border-sky-500/30 flex items-center gap-4 hover:border-sky-400 transition-colors">
|
|
<div class="w-10 h-10 rounded-full bg-sky-500/20 flex items-center justify-center text-sky-400 shrink-0"><i class="fas fa-shield-halved"></i></div>
|
|
<div class="text-left"><h4 class="font-bold text-sm text-white leading-tight">Conforme RGPD</h4><p class="text-[11px] text-slate-400 mt-1">Hébergement souverain & Privacy</p></div>
|
|
</div>
|
|
<div class="bg-slate-900/80 p-4 rounded-xl border border-sky-500/30 flex items-center gap-4 hover:border-sky-400 transition-colors">
|
|
<div class="w-10 h-10 rounded-full bg-sky-500/20 flex items-center justify-center text-sky-400 shrink-0"><i class="fas fa-leaf"></i></div>
|
|
<div class="text-left"><h4 class="font-bold text-sm text-white leading-tight">Atout RSE</h4><p class="text-[11px] text-slate-400 mt-1">Zéro plastique, bilan carbone allégé</p></div>
|
|
</div>
|
|
<div class="bg-slate-900/80 p-4 rounded-xl border border-sky-500/30 flex items-center gap-4 hover:border-sky-400 transition-colors">
|
|
<div class="w-10 h-10 rounded-full bg-sky-500/20 flex items-center justify-center text-sky-400 shrink-0"><i class="fas fa-euro-sign"></i></div>
|
|
<div class="text-left"><h4 class="font-bold text-sm text-white leading-tight">Modèle SaaS</h4><p class="text-[11px] text-slate-400 mt-1">Tarification lisible (Opex vs Capex)</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SLIDE 15: MARKETING 4P -->
|
|
<div class="slide" data-speaker="Erkin Michel Ozturk" data-role="Directeur Commercial (CCO)" data-section="Business & Marché">
|
|
<h2 class="text-4xl font-bold mb-10 border-b border-slate-800 pb-4"><span class="text-sky-400">15.</span> Stratégie Marketing & Acquisition</h2>
|
|
<div class="grid grid-cols-2 gap-8 h-full pb-8">
|
|
<div class="bg-slate-800 p-6 rounded-2xl border border-slate-700">
|
|
<h3 class="text-sky-400 font-bold mb-4 flex items-center gap-2"><i class="fas fa-bullhorn"></i> Mix Marketing B2B</h3>
|
|
<ul class="space-y-4 text-sm text-slate-300">
|
|
<li><strong>Produit :</strong> Plateforme SaaS, interopérabilité, conformité RGPD.</li>
|
|
<li><strong>Prix :</strong> Modèle Opex, tarification lisible et scalable (2 à 8€/util).</li>
|
|
<li><strong>Place :</strong> Vente directe IDF + Réseau de partenaires intégrateurs.</li>
|
|
<li><strong>Promotion :</strong> Account-Based Marketing (ABM), Simulateur de ROI, Présence salons (FIC).</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-slate-800 p-6 rounded-2xl border border-slate-700">
|
|
<h3 class="text-sky-400 font-bold mb-4 flex items-center gap-2"><i class="fas fa-message"></i> Messages Clés (Inbound)</h3>
|
|
<div class="flex flex-wrap gap-3 mt-6">
|
|
<span class="bg-slate-900 px-3 py-2 rounded-lg border border-slate-700 text-sm">Fini les badges perdus</span>
|
|
<span class="bg-slate-900 px-3 py-2 rounded-lg border border-slate-700 text-sm">Droits en temps réel</span>
|
|
<span class="bg-slate-900 px-3 py-2 rounded-lg border border-slate-700 text-sm">Compatible existant</span>
|
|
<span class="bg-slate-900 px-3 py-2 rounded-lg border border-slate-700 text-sm text-green-400 font-medium">Zéro plastique (RSE)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SLIDE 16: LAND AND EXPAND -->
|
|
<div class="slide" data-speaker="Erkin Michel Ozturk" data-role="Directeur Commercial (CCO)" data-section="Business & Marché">
|
|
<h2 class="text-4xl font-bold mb-6 border-b border-slate-800 pb-4"><span class="text-sky-400">16.</span> Stratégie "Land and Expand"</h2>
|
|
|
|
<div class="flex-grow flex items-end justify-center gap-6 h-full pb-2 mt-4">
|
|
<!-- Année 1 -->
|
|
<div class="w-1/3 bg-slate-800/60 border border-slate-700 rounded-t-3xl flex flex-col p-6 h-[65%] relative shadow-lg">
|
|
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-slate-700 text-white font-bold px-4 py-1 rounded-full text-xs border border-slate-600">Année 1</div>
|
|
<div class="text-center mt-2 mb-3"><i class="fas fa-seedling text-3xl text-slate-400"></i></div>
|
|
<h3 class="text-lg font-bold text-white mb-1 text-center">Amorçage</h3>
|
|
<p class="text-sky-400 font-bold text-center text-xs mb-3">Pilotes IDF</p>
|
|
<ul class="text-xs text-slate-300 space-y-2 bg-slate-900/50 p-3 rounded-xl flex-grow border border-slate-700/50">
|
|
<li class="flex items-center gap-2"><i class="fas fa-building text-sky-500/50 w-3"></i> <span>15 clients pilotes</span></li>
|
|
<li class="flex items-center gap-2"><i class="fas fa-users text-sky-500/50 w-3"></i> <span>750 utilisateurs</span></li>
|
|
<li class="flex items-center gap-2 font-bold text-white"><i class="fas fa-euro-sign text-sky-500/50 w-3"></i> <span>~ 45 000 € CA</span></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Année 2 -->
|
|
<div class="w-1/3 bg-sky-900/40 border border-sky-700 rounded-t-3xl flex flex-col p-6 h-[80%] relative shadow-xl">
|
|
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-sky-600 text-white font-bold px-4 py-1 rounded-full text-xs border border-sky-500">Année 2</div>
|
|
<div class="text-center mt-2 mb-3"><i class="fas fa-rocket text-4xl text-sky-400"></i></div>
|
|
<h3 class="text-lg font-bold text-white mb-1 text-center">Accélération</h3>
|
|
<p class="text-sky-300 font-bold text-center text-xs mb-3">Expansion PME</p>
|
|
<ul class="text-xs text-slate-200 space-y-2 bg-sky-950/50 p-3 rounded-xl flex-grow border border-sky-800/50">
|
|
<li class="flex items-center gap-2"><i class="fas fa-building text-sky-400 w-3"></i> <span>45 clients</span></li>
|
|
<li class="flex items-center gap-2"><i class="fas fa-users text-sky-400 w-3"></i> <span>3 500 utilisateurs</span></li>
|
|
<li class="flex items-center gap-2 font-bold text-white"><i class="fas fa-euro-sign text-sky-400 w-3"></i> <span>~ 180 000 € CA</span></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Année 3 -->
|
|
<div class="w-1/3 bg-sky-800/50 border border-sky-400 rounded-t-3xl flex flex-col p-6 h-[100%] relative shadow-[0_-15px_40px_rgba(14,165,233,0.2)]">
|
|
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-sky-400 text-slate-900 font-black px-5 py-1 rounded-full text-xs">Année 3</div>
|
|
<div class="text-center mt-2 mb-3"><i class="fas fa-chess-queen text-5xl text-white"></i></div>
|
|
<h3 class="text-xl font-bold text-white mb-1 text-center">Maturité (Scale)</h3>
|
|
<p class="text-sky-200 font-bold text-center text-xs mb-3">Grands Comptes</p>
|
|
<ul class="text-xs text-slate-100 space-y-2 bg-sky-900/50 p-3 rounded-xl flex-grow border border-sky-500/30">
|
|
<li class="flex items-center gap-2"><i class="fas fa-building text-white w-3"></i> <span>110 clients signés</span></li>
|
|
<li class="flex items-center gap-2"><i class="fas fa-users text-white w-3"></i> <span>12 000 utilisateurs</span></li>
|
|
<li class="flex items-center gap-2 font-bold text-white text-sm"><i class="fas fa-euro-sign text-white w-3"></i> <span>~ 650 000 € CA</span></li>
|
|
<li class="flex items-center gap-2"><i class="fas fa-link text-white w-3"></i> <span>Intégration SIRH</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==========================================
|
|
PARTIE 5 : ANTOINE (CFO)
|
|
========================================== -->
|
|
|
|
<!-- SLIDE 17: BUSINESS MODEL -->
|
|
<div class="slide" data-speaker="Antoine Decabooter Holleman" data-role="Directeur Financier (CFO)" data-section="Modèle Économique">
|
|
<h2 class="text-4xl font-bold mb-10 border-b border-slate-800 pb-4"><span class="text-sky-400">17.</span> Modèle Économique (SaaS)</h2>
|
|
<p class="text-xl text-slate-300 mb-8">Un modèle prévisible (Opex), offrant un ROI immédiat face aux 18,50€ de coût caché du badge PVC.</p>
|
|
|
|
<div class="grid grid-cols-3 gap-6 text-center h-full pb-8">
|
|
<div class="bg-slate-800/80 p-8 rounded-2xl border border-slate-700 flex flex-col">
|
|
<h3 class="font-bold text-xl mb-2 text-white">Pack Agilité</h3>
|
|
<p class="text-4xl font-black text-sky-400 my-6">2 €<span class="text-sm font-normal text-slate-400">/util/mois</span></p>
|
|
<p class="text-sm text-slate-400 flex-grow">Coworking & TPE<br>Ouverture simple BLE/NFC<br>Support email</p>
|
|
</div>
|
|
<div class="bg-sky-900/40 p-8 rounded-2xl border border-sky-500 relative flex flex-col transform scale-105 shadow-2xl shadow-sky-900/30">
|
|
<div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-sky-500 text-xs px-3 py-1 rounded-full font-bold tracking-wider text-white">CŒUR DE GAMME</div>
|
|
<h3 class="font-bold text-xl mb-2 text-white mt-2">Pack Sécurité+</h3>
|
|
<p class="text-4xl font-black text-sky-400 my-6">5 €<span class="text-sm font-normal text-slate-400">/util/mois</span></p>
|
|
<p class="text-sm text-slate-300 flex-grow">PME Multi-sites<br>Niveaux d'accès avancés<br>Pass prestataires éphémères</p>
|
|
</div>
|
|
<div class="bg-slate-800/80 p-8 rounded-2xl border border-slate-700 flex flex-col">
|
|
<h3 class="font-bold text-xl mb-2 text-white">Pack Enterprise</h3>
|
|
<p class="text-4xl font-black text-sky-400 my-6">~8 €<span class="text-sm font-normal text-slate-400">/util/mois</span></p>
|
|
<p class="text-sm text-slate-400 flex-grow">Grands Comptes<br>Intégration SIRH complète<br>Alertes intrusion & SLA</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-center mt-2 text-sm text-slate-400 italic">Frais d'installation initiaux de 150€ à 500€ / porte (Audit & Configuration).</p>
|
|
</div>
|
|
|
|
<!-- SLIDE 18: STRUCTURE FINANCIERE (APPORTS & CHARGES) -->
|
|
<div class="slide" data-speaker="Antoine Decabooter Holleman" data-role="Directeur Financier (CFO)" data-section="Modèle Économique">
|
|
<h2 class="text-4xl font-bold mb-8 border-b border-slate-800 pb-4"><span class="text-sky-400">18.</span> Structure Financière Initiale</h2>
|
|
<p class="text-lg text-slate-300 mb-6">Financement maîtrisé de l'amorçage et transparence des investissements critiques.</p>
|
|
|
|
<div class="grid grid-cols-2 gap-8 h-full pb-6 overflow-hidden">
|
|
<!-- Apports / Capital -->
|
|
<div class="bg-slate-800/80 p-6 rounded-2xl border border-slate-700 shadow-lg flex flex-col">
|
|
<h3 class="text-xl font-bold mb-6 text-sky-400 flex items-center gap-3"><i class="fas fa-handshake"></i> Gouvernance & Capital</h3>
|
|
<div class="bg-sky-900/30 border border-sky-500/50 p-4 rounded-xl mb-5 flex justify-between items-center">
|
|
<span class="font-bold text-slate-300 uppercase tracking-wide text-sm">Capital Social Total</span>
|
|
<span class="text-3xl font-black text-white">20 000 <span class="text-sky-400">€</span></span>
|
|
</div>
|
|
|
|
<div class="space-y-3 flex-grow">
|
|
<div class="bg-slate-900/50 p-3 rounded-lg border border-slate-700 flex justify-between items-center">
|
|
<span class="text-white font-bold text-sm">Nicolas Morais</span>
|
|
<div class="text-right"><span class="text-sky-400 font-bold block">4 000 €</span><span class="text-xs text-slate-400">20% des parts</span></div>
|
|
</div>
|
|
<div class="bg-slate-900/50 p-3 rounded-lg border border-slate-700 flex justify-between items-center">
|
|
<span class="text-white font-bold text-sm">Anthony Mvakanga</span>
|
|
<div class="text-right"><span class="text-sky-400 font-bold block">4 000 €</span><span class="text-xs text-slate-400">20% des parts</span></div>
|
|
</div>
|
|
<div class="bg-slate-900/50 p-3 rounded-lg border border-slate-700 flex justify-between items-center">
|
|
<span class="text-white font-bold text-sm">Guillaume Sanchez</span>
|
|
<div class="text-right"><span class="text-sky-400 font-bold block">4 000 €</span><span class="text-xs text-slate-400">20% des parts</span></div>
|
|
</div>
|
|
<div class="bg-slate-900/50 p-3 rounded-lg border border-slate-700 flex justify-between items-center">
|
|
<span class="text-white font-bold text-sm">Antoine Decabooter Holleman</span>
|
|
<div class="text-right"><span class="text-sky-400 font-bold block">4 000 €</span><span class="text-xs text-slate-400">20% des parts</span></div>
|
|
</div>
|
|
<div class="bg-slate-900/50 p-3 rounded-lg border border-slate-700 flex justify-between items-center">
|
|
<span class="text-white font-bold text-sm">Erkin Michel Ozturk</span>
|
|
<div class="text-right"><span class="text-sky-400 font-bold block">4 000 €</span><span class="text-xs text-slate-400">20% des parts</span></div>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-slate-400 mt-4 italic text-center">Un pacte d'associés équilibré en <strong>SAS</strong> prouvant la cohésion de l'équipe fondatrice.</p>
|
|
</div>
|
|
|
|
<!-- Investissement / Charges -->
|
|
<div class="bg-slate-800/80 p-6 rounded-2xl border border-slate-700 shadow-lg flex flex-col relative overflow-hidden">
|
|
<div class="absolute -right-6 -bottom-6 text-slate-700/30 text-8xl"><i class="fas fa-coins"></i></div>
|
|
<h3 class="text-xl font-bold mb-6 text-orange-400 flex items-center gap-3 relative z-10"><i class="fas fa-chart-pie"></i> Investissement (CAPEX) & Charges</h3>
|
|
|
|
<div class="bg-slate-900/80 p-5 rounded-xl border border-slate-600 mb-6 shadow-inner relative z-10">
|
|
<p class="text-slate-400 text-sm font-medium">Investissement Initial Ciblé (Cash Burn)</p>
|
|
<p class="text-4xl font-black text-white mt-1">~ 89 300 <span class="text-orange-400 text-3xl">€</span></p>
|
|
</div>
|
|
|
|
<div class="space-y-4 relative z-10 flex-grow">
|
|
<div class="flex items-start gap-3">
|
|
<i class="fas fa-code text-sky-400 mt-1"></i>
|
|
<div>
|
|
<strong class="text-white text-sm">R&D & Infrastructure "Zéro Stock"</strong>
|
|
<p class="text-xs text-slate-400 mt-1">Développement de l'App, Token Vault et APIs. Zéro matériel physique stocké, d'où un coût maîtrisé.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<i class="fas fa-shield-alt text-sky-400 mt-1"></i>
|
|
<div>
|
|
<strong class="text-white text-sm">Audits Cyber & Conformité</strong>
|
|
<p class="text-xs text-slate-400 mt-1">Budget alloué aux pentests externes (ANSSI) pour rassurer les DSI dès le lancement.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<i class="fas fa-users text-sky-400 mt-1"></i>
|
|
<div>
|
|
<strong class="text-white text-sm">Charges RH (OPEX)</strong>
|
|
<p class="text-xs text-slate-400 mt-1">Recrutement progressif : alternant IT (A1), Ingénieur Cyber + Business Dev (A2).</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SLIDE 19: STRATEGIE RH ET REMUNERATION -->
|
|
<div class="slide" data-speaker="Antoine Decabooter Holleman" data-role="Directeur Financier (CFO)" data-section="Modèle Économique">
|
|
<h2 class="text-4xl font-bold mb-8 border-b border-slate-800 pb-4"><span class="text-sky-400">19.</span> Stratégie RH & Rémunération</h2>
|
|
<p class="text-lg text-slate-300 mb-8">Un engagement total des fondateurs pour sécuriser la phase d'amorçage et préserver la trésorerie.</p>
|
|
|
|
<div class="grid grid-cols-2 gap-8 h-full pb-8">
|
|
<!-- Rémunération Fondateurs -->
|
|
<div class="bg-slate-800/80 p-8 rounded-2xl border-t-4 border-orange-500 shadow-lg flex flex-col justify-center items-center text-center relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-gradient-to-b from-orange-500/10 to-transparent"></div>
|
|
<div class="w-20 h-20 bg-slate-900 rounded-full flex items-center justify-center text-orange-400 text-4xl mb-6 relative z-10 shadow-inner border border-slate-700">
|
|
<i class="fas fa-comment-dollar"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-white mb-2 relative z-10">Année 1 : Zéro Rémunération</h3>
|
|
<p class="text-5xl font-black text-orange-400 my-4 relative z-10">0 € <span class="text-lg text-slate-400 font-medium block mt-2">pour les 5 associés fondateurs</span></p>
|
|
<p class="text-slate-300 mt-4 relative z-10 leading-relaxed text-sm">
|
|
Afin de préserver le capital et de maximiser l'investissement dans le développement de la plateforme (R&D), <strong>aucun salaire ni dividende</strong> ne sera versé lors du premier exercice.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Recrutement Alternant -->
|
|
<div class="flex flex-col gap-6">
|
|
<!-- Année 1 -->
|
|
<div class="bg-slate-800/80 p-6 rounded-2xl border border-sky-500/50 shadow-[0_0_15px_rgba(14,165,233,0.1)] flex items-start gap-5 relative overflow-hidden">
|
|
<div class="absolute right-0 top-0 w-24 h-24 bg-sky-500/10 rounded-bl-full"></div>
|
|
<div class="w-14 h-14 bg-sky-900/50 rounded-xl flex items-center justify-center text-sky-400 text-2xl shrink-0 border border-sky-500/30"><i class="fas fa-user-graduate"></i></div>
|
|
<div class="relative z-10">
|
|
<h4 class="font-bold text-lg text-white mb-1">Premier recrutement (Année 1)</h4>
|
|
<p class="text-sky-400 font-bold text-sm mb-2 uppercase tracking-wider">1 Alternant IT / SysOps</p>
|
|
<p class="text-xs text-slate-300 leading-relaxed">
|
|
Renfort technique sur l'infrastructure Cloud. L'alternance permet de maîtriser nos coûts fixes (OPEX) grâce aux aides de l'État, tout en formant notre futur talent.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Année 2 & 3 -->
|
|
<div class="bg-slate-800/50 p-6 rounded-2xl border border-slate-700 flex flex-col justify-center flex-grow">
|
|
<h4 class="font-bold text-slate-300 mb-4 border-b border-slate-700 pb-2">Trajectoire Années 2 & 3</h4>
|
|
<ul class="space-y-4 text-sm text-slate-400">
|
|
<li class="flex items-center gap-3"><i class="fas fa-arrow-trend-up text-green-400 w-5"></i> <span><strong>Déblocage salaires :</strong> Indexé sur le seuil de rentabilité (> 37k€).</span></li>
|
|
<li class="flex items-center gap-3"><i class="fas fa-shield-halved text-sky-400 w-5"></i> <span><strong>Embauche A2 :</strong> 1 Ingénieur Cybersécurité (Audits).</span></li>
|
|
<li class="flex items-center gap-3"><i class="fas fa-briefcase text-sky-400 w-5"></i> <span><strong>Embauche A2/A3 :</strong> 1 Business Developer B2B.</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SLIDE 20: BILAN PREVISIONNEL ET BFR -->
|
|
<div class="slide" data-speaker="Antoine Decabooter Holleman" data-role="Directeur Financier (CFO)" data-section="Modèle Économique">
|
|
<h2 class="text-4xl font-bold mb-8 border-b border-slate-800 pb-4"><span class="text-sky-400">20.</span> Bilan Prévisionnel & Trajectoire 3 Ans</h2>
|
|
|
|
<div class="flex gap-6 h-full pb-8">
|
|
<!-- Tableau BFR -->
|
|
<div class="w-7/12 bg-slate-800/50 rounded-2xl border border-slate-700 overflow-hidden shadow-lg flex flex-col">
|
|
<table class="w-full text-left text-sm">
|
|
<thead class="bg-slate-900 border-b border-slate-700">
|
|
<tr>
|
|
<th class="p-4 text-sky-400 font-semibold text-base">Indicateurs clés (en €)</th>
|
|
<th class="p-4 text-sky-400 font-semibold text-center">Année 1</th>
|
|
<th class="p-4 text-sky-400 font-semibold text-center">Année 2</th>
|
|
<th class="p-4 text-sky-400 font-semibold text-center">Année 3</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-700/50">
|
|
<tr class="hover:bg-slate-700/30 transition-colors">
|
|
<td class="p-4 font-medium text-white">Chiffre d'Affaires (CA)</td>
|
|
<td class="p-4 text-center font-bold text-white">~ 45 000</td>
|
|
<td class="p-4 text-center font-bold text-white">~ 180 000</td>
|
|
<td class="p-4 text-center font-bold text-white">~ 650 000</td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-700/30 transition-colors">
|
|
<td class="p-4 text-slate-400">Créances clients (30j)</td>
|
|
<td class="p-4 text-center text-slate-400">2 200</td>
|
|
<td class="p-4 text-center text-slate-400">18 000</td>
|
|
<td class="p-4 text-center text-slate-400">64 998</td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-700/30 transition-colors">
|
|
<td class="p-4 text-slate-400">Dettes fournisseurs (Serveurs)</td>
|
|
<td class="p-4 text-center text-slate-400">1 680</td>
|
|
<td class="p-4 text-center text-slate-400">2 090</td>
|
|
<td class="p-4 text-center text-slate-400">2 090</td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-700/30 transition-colors">
|
|
<td class="p-4 text-slate-400">Dettes fiscales et sociales</td>
|
|
<td class="p-4 text-center text-slate-400">0</td>
|
|
<td class="p-4 text-center text-slate-400">18 000</td>
|
|
<td class="p-4 text-center text-slate-400">64 998</td>
|
|
</tr>
|
|
<tr class="bg-slate-900/50">
|
|
<td class="p-4 font-bold text-sky-400 text-base">Besoin en Fonds de Roul. (BFR)</td>
|
|
<td class="p-4 text-center font-bold text-orange-400 text-base">520</td>
|
|
<td class="p-4 text-center font-bold text-green-400 text-base">- 2 090</td>
|
|
<td class="p-4 text-center font-bold text-green-400 text-base">- 2 090</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="p-4 bg-sky-900/20 text-xs text-sky-300 mt-auto border-t border-sky-500/30 flex items-center gap-3">
|
|
<i class="fas fa-lightbulb text-xl"></i>
|
|
<p><strong>BFR Négatif :</strong> Les dettes fournisseurs stagnent malgré la hausse du CA grâce à la scalabilité du Cloud. L'entreprise génère sa propre trésorerie dès l'Année 2.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPIs et Trajectoire -->
|
|
<div class="w-5/12 flex flex-col gap-4">
|
|
<div class="bg-slate-800/80 p-5 rounded-xl border border-slate-700 flex items-center justify-between shadow-lg">
|
|
<div>
|
|
<h4 class="text-slate-400 text-xs font-bold uppercase tracking-wider">Seuil de Rentabilité</h4>
|
|
<p class="text-2xl font-black text-white mt-1">37 018 <span class="text-sky-400">€</span></p>
|
|
</div>
|
|
<i class="fas fa-flag-checkered text-3xl text-slate-600"></i>
|
|
</div>
|
|
|
|
<div class="bg-slate-800/50 p-5 rounded-xl border border-slate-700 flex-grow flex flex-col justify-center space-y-4">
|
|
<h4 class="text-slate-300 font-bold mb-2 border-b border-slate-600 pb-2">Trajectoire OPEX</h4>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 font-black text-slate-500">A1</div>
|
|
<div>
|
|
<h5 class="font-bold text-white text-sm">Amorçage & Preuve</h5>
|
|
<p class="text-[11px] text-slate-400">15 pilotes IDF. Coûts concentrés sur la R&D. BFR maîtrisé.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 font-black text-sky-500">A2</div>
|
|
<div>
|
|
<h5 class="font-bold text-sky-400 text-sm">Accélération</h5>
|
|
<p class="text-[11px] text-slate-300">Embauches clés. Le modèle d'abonnement génère du cash.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 font-black text-green-500">A3</div>
|
|
<div>
|
|
<h5 class="font-bold text-green-400 text-sm">Maturité (Scale)</h5>
|
|
<p class="text-[11px] text-slate-300">CA ~650k€. Les coûts fixes (OPEX) sont lissés par le volume (12 000 util).</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SLIDE 21: CONCLUSION -->
|
|
<div class="slide" data-speaker="Tous les fondateurs" data-role="Équipe Cyberusgate" data-section="Bilan">
|
|
<div class="flex-grow flex flex-col justify-center items-center text-center relative">
|
|
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-sky-900/20 via-transparent to-transparent z-0"></div>
|
|
|
|
<div class="relative z-10 w-full max-w-4xl">
|
|
<img src="https://guillaume-sanchez.fr/images/cyberusgate/cyberusgate_title.png" alt="Logo Cyberusgate" class="w-72 h-auto object-contain mx-auto mb-6 bg-white/95 p-4 rounded-3xl shadow-[0_0_40px_rgba(14,165,233,0.4)]">
|
|
|
|
<h2 class="text-4xl font-black text-white mb-6 leading-tight">
|
|
Cyberusgate ne remplace pas seulement une serrure.
|
|
</h2>
|
|
|
|
<p class="text-xl text-slate-300 font-light mb-10 leading-relaxed">
|
|
Notre solution crée un véritable <span class="text-sky-400 font-bold">hub d'identité professionnelle</span> : responsable, sécurisé, interopérable et prêt pour les entreprises de demain.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-3 gap-6 text-left border-t border-slate-700 pt-8">
|
|
<div>
|
|
<h4 class="text-white font-bold mb-2 flex items-center gap-2"><i class="fas fa-check-circle text-green-400"></i> Le Besoin</h4>
|
|
<p class="text-xs text-slate-400">Validé économiquement par la fin des 18,50€ de coûts cachés liés au plastique.</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-white font-bold mb-2 flex items-center gap-2"><i class="fas fa-check-circle text-green-400"></i> La Tech & Légal</h4>
|
|
<p class="text-xs text-slate-400">Une architecture Zero Trust, compatible avec l'existant, et "Privacy by Design".</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-white font-bold mb-2 flex items-center gap-2"><i class="fas fa-check-circle text-green-400"></i> Le Business</h4>
|
|
<p class="text-xs text-slate-400">Un modèle SaaS hyper-scalable, un BFR négatif dès l'Année 2 et un capital solidaire.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="https://guillaume-sanchez.fr/images/cyberusgate/easteregg.jpg" class="mt-12 inline-block bg-sky-600 text-white font-bold py-3 px-8 rounded-full text-lg shadow-[0_0_20px_rgba(14,165,233,0.4)] cursor-default border border-sky-400">
|
|
Merci de votre attention.
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- FOOTER : Affichage de l'intervenant -->
|
|
<footer class="w-full h-16 bg-slate-900/80 backdrop-blur-xl border-t border-slate-800 z-50 flex justify-between items-center px-8 shrink-0">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-sky-400 shadow-inner">
|
|
<i class="fas fa-microphone"></i>
|
|
</div>
|
|
<div>
|
|
<div id="speaker-name" class="font-bold text-white text-sm tracking-wide">Cyberusgate</div>
|
|
<div id="speaker-role" class="text-xs text-sky-400/80 font-medium"></div>
|
|
</div>
|
|
</div>
|
|
<div class="text-xs text-slate-500 uppercase tracking-widest font-bold">
|
|
Soutenance M21
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const slides = document.querySelectorAll('.slide');
|
|
const counter = document.getElementById('slide-counter');
|
|
const speakerName = document.getElementById('speaker-name');
|
|
const speakerRole = document.getElementById('speaker-role');
|
|
const timelineContainer = document.getElementById('timeline-container');
|
|
const btnPrev = document.getElementById('prev-btn');
|
|
const btnNext = document.getElementById('next-btn');
|
|
|
|
let currentSlide = 0;
|
|
const totalSlides = slides.length;
|
|
|
|
// Define high-level sections for the timeline
|
|
const sections = ["Vision", "Le Problème", "La Solution", "Technologie", "Sécurité & Légal", "Business & Marché", "Modèle Économique", "Bilan"];
|
|
|
|
// Initialize Timeline UI
|
|
sections.forEach(section => {
|
|
const step = document.createElement('div');
|
|
step.className = 'timeline-step rounded-full';
|
|
step.dataset.section = section;
|
|
step.title = section;
|
|
|
|
// Add a small tooltip
|
|
const tooltip = document.createElement('span');
|
|
tooltip.className = 'absolute -bottom-6 left-1/2 transform -translate-x-1/2 text-[10px] font-bold text-slate-400 whitespace-nowrap opacity-0 transition-opacity duration-200 pointer-events-none uppercase tracking-wider';
|
|
tooltip.textContent = section;
|
|
step.appendChild(tooltip);
|
|
|
|
step.addEventListener('mouseenter', () => tooltip.classList.remove('opacity-0'));
|
|
step.addEventListener('mouseleave', () => tooltip.classList.add('opacity-0'));
|
|
|
|
timelineContainer.appendChild(step);
|
|
});
|
|
|
|
function updateUI() {
|
|
// Update slides visibility
|
|
slides.forEach((slide, index) => {
|
|
if (index === currentSlide) {
|
|
slide.classList.add('active');
|
|
// Update Speaker Info securely
|
|
if (speakerName) speakerName.textContent = slide.dataset.speaker || "Cyberusgate";
|
|
if (speakerRole) speakerRole.textContent = slide.dataset.role || "";
|
|
|
|
// Update Timeline
|
|
const currentSection = slide.dataset.section;
|
|
const timelineSteps = document.querySelectorAll('.timeline-step');
|
|
|
|
let sectionFound = false;
|
|
timelineSteps.forEach(step => {
|
|
step.classList.remove('active', 'completed');
|
|
if (step.dataset.section === currentSection) {
|
|
step.classList.add('active');
|
|
sectionFound = true;
|
|
} else if (!sectionFound) {
|
|
step.classList.add('completed');
|
|
}
|
|
});
|
|
|
|
} else {
|
|
slide.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
// Update Counter
|
|
if (counter) counter.textContent = `${currentSlide + 1} / ${totalSlides}`;
|
|
|
|
// Update buttons state
|
|
if (btnPrev) {
|
|
btnPrev.style.opacity = currentSlide === 0 ? '0.3' : '1';
|
|
btnPrev.style.cursor = currentSlide === 0 ? 'not-allowed' : 'pointer';
|
|
}
|
|
if (btnNext) {
|
|
btnNext.style.opacity = currentSlide === totalSlides - 1 ? '0.3' : '1';
|
|
btnNext.style.cursor = currentSlide === totalSlides - 1 ? 'not-allowed' : 'pointer';
|
|
}
|
|
}
|
|
|
|
function nextSlide() {
|
|
if (currentSlide < totalSlides - 1) {
|
|
currentSlide++;
|
|
updateUI();
|
|
}
|
|
}
|
|
|
|
function prevSlide() {
|
|
if (currentSlide > 0) {
|
|
currentSlide--;
|
|
updateUI();
|
|
}
|
|
}
|
|
|
|
// Event Listeners for Buttons
|
|
if (btnNext) btnNext.addEventListener('click', nextSlide);
|
|
if (btnPrev) btnPrev.addEventListener('click', prevSlide);
|
|
|
|
// Event Listener for Keyboard Arrows and Spacebar
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'ArrowRight' || e.key === ' ') {
|
|
e.preventDefault();
|
|
nextSlide();
|
|
} else if (e.key === 'ArrowLeft') {
|
|
prevSlide();
|
|
}
|
|
});
|
|
|
|
// Initialize the first view
|
|
updateUI();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |