const TOTAL_SLIDES = 20;

function Slide01_Cover() {
  return <>
    <ChromeTop section="Correction technique" slideNum={1} total={TOTAL_SLIDES} />
    <div className="slide-body" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="grid-bg"></div>
      <div className="orbit-ring" style={{ position: 'absolute', right: 120, top: 160, width: 520, height: 520 }}></div>
      <div style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', height: '100%', justifyContent: 'center', gap: 34 }}>
        <div className="eyebrow"><span>01</span> Deck communauté Bouygues</div>
        <div className="title-xl" style={{ maxWidth: 1320 }}>
          Correction définitive du montage
        </div>
        <div className="subtitle" style={{ maxWidth: 900 }}>
          Proposition technique Waka Orbit pour le pilote Back to School 2026.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22, maxWidth: 1180 }}>
          <div className="card">
            <div className="label">Audience</div>
            <div className="body-m" style={{ marginTop: 12 }}>Responsable télévente Bouygues Telecom</div>
          </div>
          <div className="card">
            <div className="label">Décision attendue</div>
            <div className="body-m" style={{ marginTop: 12 }}>Accord de principe</div>
          </div>
          <div className="card">
            <div className="label">Site</div>
            <div className="body-m" style={{ marginTop: 12 }}>www.wakaorbit.com</div>
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Ouverture" />
  </>;
}

function Slide02_QuiEstWaka() {
  return <>
    <ChromeTop section="Waka Orbit" slideNum={2} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow"><span>02</span> Qui est Waka Orbit</div>
      <div className="title-l" style={{ maxWidth: 1260 }}>Une plateforme multi-agents IA, pas un chatbot</div>
      <div className="subtitle" style={{ maxWidth: 1040, marginTop: 18 }}>
        Waka déploie une équipe d’agents qui planifie, exécute et rend des comptes.
      </div>
      <div className="bento" style={{ marginTop: 54 }}>
        <div className="card">
          <div className="tag orange">Planifier</div>
          <div className="title-m" style={{ marginTop: 24 }}>Décomposer</div>
          <div className="body-m" style={{ marginTop: 16 }}>Les agents comprennent une demande et la découpent en actions opérables.</div>
        </div>
        <div className="card">
          <div className="tag cyan">Exécuter</div>
          <div className="title-m" style={{ marginTop: 24 }}>Agir</div>
          <div className="body-m" style={{ marginTop: 16 }}>Ils utilisent des APIs, outils et canaux autorisés pour réaliser les tâches.</div>
        </div>
        <div className="card">
          <div className="tag green">Rendre compte</div>
          <div className="title-m" style={{ marginTop: 24 }}>Tracer</div>
          <div className="body-m" style={{ marginTop: 16 }}>Chaque décision peut être suivie, contrôlée et améliorée en production.</div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Waka Orbit" />
  </>;
}

function Slide03_AgentIA() {
  return <>
    <ChromeTop section="Agent IA" slideNum={3} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow"><span>03</span> Comprendre l’agent IA</div>
      <div className="title-l" style={{ maxWidth: 1220 }}>Un agent IA combine raisonnement, outils et règles métier</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginTop: 58 }}>
        <div className="card">
          <div className="tag orange">Ce qu’il fait</div>
          <div className="body-l" style={{ marginTop: 26 }}>
            Il analyse un contexte, choisit une action, utilise un outil, réessaie si nécessaire et produit un compte rendu.
          </div>
        </div>
        <div className="card">
          <div className="tag cyan">Ce qu’il respecte</div>
          <div className="body-l" style={{ marginTop: 26 }}>
            Il agit dans un périmètre validé, avec des règles, des canaux et des outils autorisés.
          </div>
        </div>
      </div>
      <div className="strip" style={{ marginTop: 44 }}>
        Autonomie totale · Validation humaine · Copilotage · Traçabilité · Apprentissage en production
      </div>
    </div>
    <ChromeBottom chapter="Agent IA" />
  </>;
}

function Slide04_Architecture() {
  return <>
    <ChromeTop section="Architecture" slideNum={4} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow"><span>04</span> Socle technique</div>
      <div className="title-l" style={{ maxWidth: 1280 }}>Le LLM raisonne, les outils exécutent, les règles encadrent</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, marginTop: 54 }}>
        <div className="card">
          <div className="step-num">1</div>
          <div className="title-m" style={{ marginTop: 22 }}>Raisonnement</div>
          <div className="body-m" style={{ marginTop: 14 }}>Compréhension, décision, priorisation et adaptation à la conversation.</div>
        </div>
        <div className="card">
          <div className="step-num">2</div>
          <div className="title-m" style={{ marginTop: 22 }}>Orchestration</div>
          <div className="body-m" style={{ marginTop: 14 }}>Serveur MCP, skills métier et intégrations avec les outils autorisés.</div>
        </div>
        <div className="card">
          <div className="step-num">3</div>
          <div className="title-m" style={{ marginTop: 22 }}>Contrôle</div>
          <div className="body-m" style={{ marginTop: 14 }}>Règles de campagne, souscription, mise à jour et compte rendu.</div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Architecture" />
  </>;
}

function Slide05_DeuxOperations() {
  return <>
    <ChromeTop section="Deux opérations" slideNum={5} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow"><span>05</span> Clarification du montage</div>
      <div className="title-l" style={{ maxWidth: 1240 }}>Deux opérations distinctes, un même objectif de télévente IA</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginTop: 56 }}>
        <div className="card">
          <div className="tag orange">Opération A</div>
          <div className="title-m" style={{ marginTop: 24 }}>Communauté sociale</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Créer une communauté Waka × Bouygues sur Facebook, Instagram et autres canaux.
          </div>
          <div className="body-s" style={{ marginTop: 18, color: 'var(--orbit-text-2)' }}>
            Objectif : écouter, répondre, détecter les signaux et activer les conversations utiles.
          </div>
        </div>
        <div className="card">
          <div className="tag cyan">Opération B</div>
          <div className="title-m" style={{ marginTop: 24 }}>Télévente sortante</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Appeler les fichiers Bouygues, fichiers internes ou leads Waka via dialer et agents IA.
          </div>
          <div className="body-s" style={{ marginTop: 18, color: 'var(--orbit-text-2)' }}>
            Objectif : qualifier, recommander, souscrire et suivre l’activation.
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Deux opérations" />
  </>;
}

function Slide06_Communaute() {
  return <>
    <ChromeTop section="Opération A" slideNum={6} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow"><span>06</span> Communauté Waka × Bouygues</div>
      <div className="title-l" style={{ maxWidth: 1280 }}>Un espace social pour réunir clients et prospects autour des problèmes box et mobile</div>
      <div className="subtitle" style={{ maxWidth: 1080, marginTop: 18 }}>
        La page désigne un espace social public ou autorisé où les utilisateurs publient posts et commentaires.
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 50 }}>
        <div className="card">
          <div className="tag orange">Facebook</div>
          <div className="body-m" style={{ marginTop: 20 }}>Réponses, échanges, signaux et conversations communautaires.</div>
        </div>
        <div className="card">
          <div className="tag cyan">Instagram</div>
          <div className="body-m" style={{ marginTop: 20 }}>Présence sociale, messages et contributions adaptées au contexte.</div>
        </div>
        <div className="card">
          <div className="tag green">Autres canaux</div>
          <div className="body-m" style={{ marginTop: 20 }}>Extension selon périmètre, règles et validations Bouygues.</div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Communauté sociale" />
  </>;
}

function Slide07_DeuxPresences() {
  return <>
    <ChromeTop section="Opération A" slideNum={7} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow"><span>07</span> Deux présences IA complémentaires</div>
      <div className="title-l" style={{ maxWidth: 1230 }}>Répondre dans la communauté et contribuer dans les groupes d’échanges</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginTop: 58 }}>
        <div className="card">
          <div className="step-num">A</div>
          <div className="title-m" style={{ marginTop: 24 }}>Agent de réponse</div>
          <div className="body-m" style={{ marginTop: 16 }}>
            Il répond dans la communauté, aide les utilisateurs et détecte les signaux utiles.
          </div>
        </div>
        <div className="card">
          <div className="step-num">B</div>
          <div className="title-m" style={{ marginTop: 24 }}>Agent membre</div>
          <div className="body-m" style={{ marginTop: 16 }}>
            Il intervient dans les groupes thématiques pour contribuer aux conversations autorisées.
          </div>
        </div>
      </div>
      <div className="quote-block" style={{ marginTop: 42 }}>
        L’agent ne lit pas tout indistinctement : il travaille sur un périmètre, des mots-clés, des signaux et des règles validés avec Bouygues.
      </div>
    </div>
    <ChromeBottom chapter="Présence sociale" />
  </>;
}

function Slide08_DetectionAnalyse() {
  return <>
    <ChromeTop section="Opération A" slideNum={8} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow"><span>08</span> Détection et analyse</div>
      <div className="title-l" style={{ maxWidth: 1250 }}>Chaque contact est compris avant d’être activé</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22, marginTop: 58 }}>
        <div className="card">
          <div className="step-num">1</div>
          <div className="title-m" style={{ marginTop: 22 }}>Observer</div>
          <div className="body-s" style={{ marginTop: 14 }}>Pages et espaces autorisés.</div>
        </div>
        <div className="card">
          <div className="step-num">2</div>
          <div className="title-m" style={{ marginTop: 22 }}>Repérer</div>
          <div className="body-s" style={{ marginTop: 14 }}>Mots-clés, signaux et contextes.</div>
        </div>
        <div className="card">
          <div className="step-num">3</div>
          <div className="title-m" style={{ marginTop: 22 }}>Interpréter</div>
          <div className="body-s" style={{ marginTop: 14 }}>Question, insatisfaction, besoin ou intention.</div>
        </div>
        <div className="card">
          <div className="step-num">4</div>
          <div className="title-m" style={{ marginTop: 22 }}>Orienter</div>
          <div className="body-s" style={{ marginTop: 14 }}>Vers scoring et action adaptée.</div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Détection sociale" />
  </>;
}

function Slide09_Scoring() {
  return <>
    <ChromeTop section="Opération A" slideNum={9} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow"><span>09</span> Scoring d’intention</div>
      <div className="title-l" style={{ maxWidth: 1180 }}>Trois niveaux pour déclencher le bon comportement</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 58 }}>
        <div className="card">
          <div className="kpi">
            <div className="label">Type 1</div>
            <div className="val orange">Immédiate</div>
            <div className="body-m" style={{ marginTop: 16 }}>Invitation, proposition et souscription si les règles le permettent.</div>
          </div>
        </div>
        <div className="card">
          <div className="kpi">
            <div className="label">Type 2</div>
            <div className="val cyan">Possible</div>
            <div className="body-m" style={{ marginTop: 16 }}>Surveillance, échange utile, recommandation et scoring continu.</div>
          </div>
        </div>
        <div className="card">
          <div className="kpi">
            <div className="label">Type 3</div>
            <div className="val green">Non validée</div>
            <div className="body-m" style={{ marginTop: 16 }}>Pas d’activation commerciale sans signal suffisant.</div>
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Scoring" />
  </>;
}

function Slide10_EquipeMultiAgents() {
  return <>
    <ChromeTop section="Opération A" slideNum={10} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow"><span>10</span> Équipe multi-agents</div>
      <div className="title-l" style={{ maxWidth: 1260 }}>Chaque agent a une responsabilité précise dans la chaîne</div>
      <div className="bento" style={{ marginTop: 50 }}>
        <div className="card"><div className="tag orange">Détection</div><div className="body-m" style={{ marginTop: 16 }}>Repère les signaux dans le périmètre validé.</div></div>
        <div className="card"><div className="tag cyan">Interprétation</div><div className="body-m" style={{ marginTop: 16 }}>Comprend post, commentaire, question ou besoin.</div></div>
        <div className="card"><div className="tag green">Scoring</div><div className="body-m" style={{ marginTop: 16 }}>Classe l’intention en trois niveaux.</div></div>
        <div className="card"><div className="tag orange">Conversation</div><div className="body-m" style={{ marginTop: 16 }}>Engage selon les règles définies.</div></div>
        <div className="card"><div className="tag cyan">Recommandation</div><div className="body-m" style={{ marginTop: 16 }}>Identifie l’offre Bouygues adaptée.</div></div>
        <div className="card"><div className="tag green">Souscription</div><div className="body-m" style={{ marginTop: 16 }}>Réalise la souscription dans les outils autorisés.</div></div>
        <div className="card"><div className="tag orange">Suivi</div><div className="body-m" style={{ marginTop: 16 }}>Actualise le dossier et suit l’activation.</div></div>
      </div>
    </div>
    <ChromeBottom chapter="Multi-agents" />
  </>;
}

function Slide11_ParcoursCommunautaire() {
  return <>
    <ChromeTop section="Opération A" slideNum={11} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow"><span>11</span> Parcours communautaire</div>
      <div className="title-l" style={{ maxWidth: 1250 }}>Communauté → présence → analyse → scoring → action</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 18, marginTop: 62, alignItems: 'stretch' }}>
        <div className="card"><div className="step-num">1</div><div className="body-m" style={{ marginTop: 20 }}>Communauté Waka × Bouygues</div></div>
        <div className="card"><div className="step-num">2</div><div className="body-m" style={{ marginTop: 20 }}>Réponse et présence sociale</div></div>
        <div className="card"><div className="step-num">3</div><div className="body-m" style={{ marginTop: 20 }}>Analyse de chaque contact</div></div>
        <div className="card"><div className="step-num">4</div><div className="body-m" style={{ marginTop: 20 }}>Scoring de l’intention</div></div>
        <div className="card"><div className="step-num">5</div><div className="body-m" style={{ marginTop: 20 }}>Action ou suivi adapté</div></div>
      </div>
      <div className="strip" style={{ marginTop: 44 }}>
        Points de contrôle : périmètre · mots-clés · signaux · règles · outils autorisés
      </div>
    </div>
    <ChromeBottom chapter="Parcours communautaire" />
  </>;
}

function Slide12_StrategiqueBouygues() {
  return <>
    <ChromeTop section="Opportunité" slideNum={12} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow"><span>12</span> Enjeu stratégique Bouygues</div>
      <div className="title-l" style={{ maxWidth: 1320 }}>Construire une capacité pionnière d’écoute structurée à grande échelle</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginTop: 58 }}>
        <div className="card">
          <div className="tag orange">Opportunité</div>
          <div className="body-l" style={{ marginTop: 24 }}>
            Détecter les signaux d’achat, d’insatisfaction ou de besoin dans des espaces sociaux validés.
          </div>
        </div>
        <div className="card">
          <div className="tag green">À valider</div>
          <div className="body-l" style={{ marginTop: 24 }}>
            Le pilote permet de tester la méthode, le scoring, l’activation et la souscription autonome.
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Opportunité Bouygues" />
  </>;
}

function Slide13_OperationSortante() {
  return <>
    <ChromeTop section="Opération B" slideNum={13} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow"><span>13</span> Télévente sortante</div>
      <div className="title-l" style={{ maxWidth: 1280 }}>Une opération distincte sur fichiers Bouygues, fichiers internes ou leads Waka</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 56 }}>
        <div className="card">
          <div className="tag orange">Fichiers Bouygues</div>
          <div className="body-m" style={{ marginTop: 20 }}>Appels sortants avec règles de campagne et de rappel.</div>
        </div>
        <div className="card">
          <div className="tag cyan">Fichiers internes</div>
          <div className="body-m" style={{ marginTop: 20 }}>Qualification et activation selon le périmètre autorisé.</div>
        </div>
        <div className="card">
          <div className="tag green">Leads Waka</div>
          <div className="body-m" style={{ marginTop: 20 }}>Contacts issus de la détection et du scoring.</div>
        </div>
      </div>
      <div className="strip" style={{ marginTop: 44 }}>Toutes les offres Bouygues sont concernées</div>
    </div>
    <ChromeBottom chapter="Télévente sortante" />
  </>;
}

function Slide14_ParcoursSortant() {
  return <>
    <ChromeTop section="Opération B" slideNum={14} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow"><span>14</span> Parcours sortant</div>
      <div className="title-l" style={{ maxWidth: 1260 }}>Du contact appelé à la souscription suivie</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 18, marginTop: 62 }}>
        <div className="card"><div className="step-num">1</div><div className="body-m" style={{ marginTop: 18 }}>Dialer et règles d’appel</div></div>
        <div className="card"><div className="step-num">2</div><div className="body-m" style={{ marginTop: 18 }}>Qualification du contact</div></div>
        <div className="card"><div className="step-num">3</div><div className="body-m" style={{ marginTop: 18 }}>Recommandation d’offre</div></div>
        <div className="card"><div className="step-num">4</div><div className="body-m" style={{ marginTop: 18 }}>Souscription autonome</div></div>
        <div className="card"><div className="step-num">5</div><div className="body-m" style={{ marginTop: 18 }}>Activation et compte rendu</div></div>
      </div>
      <div className="quote-block" style={{ marginTop: 42 }}>
        L’escalade intervient uniquement si une règle métier ou une exception l’impose.
      </div>
    </div>
    <ChromeBottom chapter="Parcours sortant" />
  </>;
}

function Slide15_DiagrammeSortant() {
  return <>
    <ChromeTop section="Opération B" slideNum={15} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow"><span>15</span> Diagramme appels sortants</div>
      <div className="title-l" style={{ maxWidth: 1240 }}>Distinguer raisonnement, règles métier, orchestration et exécution</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 22, marginTop: 46 }}>
        <div className="card">
          <div className="tag orange">LLM</div>
          <div className="title-m" style={{ marginTop: 18 }}>Raisonnement</div>
          <div className="body-s" style={{ marginTop: 14 }}>Comprend la conversation et décide la prochaine action.</div>
        </div>
        <div className="card">
          <div className="tag cyan">Skills</div>
          <div className="title-m" style={{ marginTop: 18 }}>Règles métier</div>
          <div className="body-s" style={{ marginTop: 14 }}>Qualification, règles de campagne, souscription, actualisation.</div>
        </div>
        <div className="card">
          <div className="tag green">MCP</div>
          <div className="title-m" style={{ marginTop: 18 }}>Orchestration</div>
          <div className="body-s" style={{ marginTop: 14 }}>Utilise les outils Bouygues autorisés pour agir.</div>
        </div>
        <div className="card">
          <div className="tag orange">Dialer</div>
          <div className="title-m" style={{ marginTop: 18 }}>Téléphone</div>
          <div className="body-s" style={{ marginTop: 14 }}>Gère appels, règles d’appel et rappels.</div>
        </div>
      </div>
      <div className="strip" style={{ marginTop: 42 }}>
        Outils Bouygues : souscription · mise à jour dossier client/prospect · suivi d’activation
      </div>
    </div>
    <ChromeBottom chapter="Diagramme sortant" />
  </>;
}

function Slide16_ExempleAppel() {
  return <>
    <ChromeTop section="Opération B" slideNum={16} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow"><span>16</span> Exemple d’appel</div>
      <div className="title-l" style={{ maxWidth: 1260 }}>L’agent ne transmet pas : il réalise la souscription de bout en bout</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 56 }}>
        <div className="card">
          <div className="step-num">1</div>
          <div className="title-m" style={{ marginTop: 22 }}>Qualifier</div>
          <div className="body-m" style={{ marginTop: 14 }}>Recueillir et valider les éléments nécessaires.</div>
        </div>
        <div className="card">
          <div className="step-num">2</div>
          <div className="title-m" style={{ marginTop: 22 }}>Souscrire</div>
          <div className="body-m" style={{ marginTop: 14 }}>Recommander l’offre et réaliser l’acte dans les outils autorisés.</div>
        </div>
        <div className="card">
          <div className="step-num">3</div>
          <div className="title-m" style={{ marginTop: 22 }}>Suivre</div>
          <div className="body-m" style={{ marginTop: 14 }}>Activer ou suivre l’activation, puis produire le compte rendu.</div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Souscription autonome" />
  </>;
}

function Slide17_CentreAppel() {
  return <>
    <ChromeTop section="Performance" slideNum={17} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow"><span>17</span> Télévente IA vs centre d’appels</div>
      <div className="title-l" style={{ maxWidth: 1220 }}>Un modèle conçu pour l’endurance opérationnelle</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 18, marginTop: 58 }}>
        <div className="card"><div className="kpi"><div className="val orange">0</div><div className="label">Absentéisme</div></div></div>
        <div className="card"><div className="kpi"><div className="val cyan">0</div><div className="label">Attrition</div></div></div>
        <div className="card"><div className="kpi"><div className="val green">0</div><div className="label">Formation lourde</div></div></div>
        <div className="card"><div className="kpi"><div className="val orange">∞</div><div className="label">Adaptation</div></div></div>
        <div className="card"><div className="kpi"><div className="val cyan">100%</div><div className="label">Conversations évaluées</div></div></div>
      </div>
      <div className="subtitle" style={{ maxWidth: 980, marginTop: 44 }}>
        L’objectif : compléter et dépasser les limites opérationnelles des dispositifs humains.
      </div>
    </div>
    <ChromeBottom chapter="Performance opérationnelle" />
  </>;
}

function Slide18_ChiffresModeleReferences() {
  return <>
    <ChromeTop section="Modèle" slideNum={18} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow"><span>18</span> Chiffres, modèle et références</div>
      <div className="title-l" style={{ maxWidth: 1220 }}>Un modèle à la performance, sans risque de démarrage</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18, marginTop: 42 }}>
        <div className="card"><div className="kpi"><div className="val orange">+32%</div><div className="label">Performance</div></div></div>
        <div className="card"><div className="kpi"><div className="val cyan">+12%</div><div className="label">Joignabilité</div></div></div>
        <div className="card"><div className="kpi"><div className="val green">+17%</div><div className="label">Satisfaction</div></div></div>
        <div className="card"><div className="kpi"><div className="val orange">-17%</div><div className="label">Coûts</div></div></div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 30 }}>
        <div className="card">
          <div className="tag green">Modèle</div>
          <div className="body-m" style={{ marginTop: 16 }}>100% commission sur succès : 0 setup, 0 formation, 0 coût horaire, 0 risque.</div>
        </div>
        <div className="card">
          <div className="tag cyan">Références</div>
          <div className="body-s" style={{ marginTop: 16 }}>
            Tomorrow University · Publica France · Bébé Maman
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Modèle économique" />
  </>;
}

function Slide19_PiloteBTS2026() {
  return <>
    <ChromeTop section="Pilote" slideNum={19} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow"><span>19</span> Pilote Back to School 2026</div>
      <div className="title-l" style={{ maxWidth: 1280 }}>Démontrer une opération autonome sur trois périmètres</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 58 }}>
        <div className="card">
          <div className="step-num">1</div>
          <div className="title-m" style={{ marginTop: 22 }}>Réseaux sociaux</div>
          <div className="body-m" style={{ marginTop: 14 }}>Détection, réponse, scoring et activation depuis la communauté.</div>
        </div>
        <div className="card">
          <div className="step-num">2</div>
          <div className="title-m" style={{ marginTop: 22 }}>Fichiers Bouygues</div>
          <div className="body-m" style={{ marginTop: 14 }}>Appels sortants avec dialer, rappels et outils autorisés.</div>
        </div>
        <div className="card">
          <div className="step-num">3</div>
          <div className="title-m" style={{ marginTop: 22 }}>Leads Waka</div>
          <div className="body-m" style={{ marginTop: 14 }}>Conversion des contacts scorés vers souscription et suivi.</div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Pilote Back to School 2026" />
  </>;
}

function Slide20_Closing() {
  return <>
    <ChromeTop section="Accord" slideNum={20} total={TOTAL_SLIDES} />
    <div className="slide-body" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="grid-bg"></div>
      <div className="orbit-ring" style={{ position: 'absolute', right: 120, top: 170, width: 480, height: 480 }}></div>
      <div style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', height: '100%', gap: 34 }}>
        <div className="eyebrow"><span>20</span> Décision attendue</div>
        <div className="title-xl" style={{ maxWidth: 1200 }}>
          Accord de principe
        </div>
        <div className="subtitle" style={{ maxWidth: 980 }}>
          Lancer le cadrage du pilote Back to School 2026 avec Bouygues Telecom.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, maxWidth: 1120 }}>
          <div className="card">
            <div className="tag orange">À cadrer</div>
            <div className="body-m" style={{ marginTop: 18 }}>Périmètre, règles, offres, canaux et outils autorisés.</div>
          </div>
          <div className="card">
            <div className="tag green">À démontrer</div>
            <div className="body-m" style={{ marginTop: 18 }}>Détection, appels sortants, souscription autonome et suivi d’activation.</div>
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Closing" />
  </>;
}

Object.assign(window, {
  Slide01_Cover,
  Slide02_QuiEstWaka,
  Slide03_AgentIA,
  Slide04_Architecture,
  Slide05_DeuxOperations,
  Slide06_Communaute,
  Slide07_DeuxPresences,
  Slide08_DetectionAnalyse,
  Slide09_Scoring,
  Slide10_EquipeMultiAgents,
  Slide11_ParcoursCommunautaire,
  Slide12_StrategiqueBouygues,
  Slide13_OperationSortante,
  Slide14_ParcoursSortant,
  Slide15_DiagrammeSortant,
  Slide16_ExempleAppel,
  Slide17_CentreAppel,
  Slide18_ChiffresModeleReferences,
  Slide19_PiloteBTS2026,
  Slide20_Closing
});