/* Section 5 — Process Waka, diagramme SVG, références, garanties */

const Slide15_ProcessOverview = () => (
  <>
    <ChromeTop section="Process Waka" slideNum={15} total={23} />
    <div className="slide-body">
      <div className="eyebrow"><span className="num">14</span>Notre process opérationnel<span className="bar"></span></div>
      <div className="title-l" style={{ fontSize: 72 }}>De la signature au cash, <span style={{ color: 'var(--waka-orange)' }}>en 6 étapes.</span></div>
      <div className="body-m" style={{ maxWidth: 1200, marginBottom: 30 }}>Waka prend l'opération de bout en bout. RED reste sur son cœur de métier — produit, offres, conformité commerciale.</div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6,1fr)', gap: 0, flex: 1, alignItems: 'stretch' }}>
        {[
          { n: "01", t: "CADRAGE", d: "Accès Ezy octroyés, partage du catalogue d'offres, scripts validés par RED, tests de validation des agents en environnement contrôlé.", w: "S0–S1" },
          { n: "02", t: "COMMUNAUTÉ", d: "Création de la communauté, branding éditorial, plan de communication et calendrier de contenu — voix de marque clonée et RAG offres en place.", w: "1 semaine" },
          { n: "03", t: "LANCEMENT", d: "Phase 100 % Instagram. 2 publications par jour pour calibrer le scoring et observer le behavior des agents en conditions réelles.", w: "1 semaine" },
          { n: "04", t: "SCALE", d: "Ouverture multi-plateformes : Facebook, Twitch, X, TikTok, LinkedIn — 1 nouveau terrain ajouté par semaine, ramp-up contrôlé.", w: "S3+" },
          { n: "05", t: "PILOTAGE", d: "Dashboards live RED, hebdo perf, mensuel pilotage, trimestriel stratégie. Pilote de compte dédié, 2 équipes IA en support.", w: "En continu" },
          { n: "06", t: "OPTIMISATION", d: "Boucle d'apprentissage continue : objections, scripts, nouveaux terrains, fine-tuning sur les conversions concrètes.", w: "En continu" },
        ].map((s, i, arr) => (
          <div key={i} style={{ padding: 22, background: i % 2 === 0 ? 'var(--orbit-bg-raised)' : 'var(--orbit-bg-surface)', borderRight: i < arr.length - 1 ? '1px solid var(--orbit-border)' : 'none', display: 'flex', flexDirection: 'column', position: 'relative' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <div className="step-num" style={{ width: 42, height: 42, fontSize: 17 }}>{s.n}</div>
              <span className="tag orange" style={{ fontSize: 10 }}>{s.w}</span>
            </div>
            <div style={{ fontSize: 17, fontWeight: 800, color: 'var(--orbit-text-1)', letterSpacing: 1, marginBottom: 12 }}>{s.t}</div>
            <div style={{ fontSize: 13, color: 'var(--orbit-text-2)', lineHeight: 1.5 }}>{s.d}</div>
            {i < arr.length - 1 && <div style={{ position: 'absolute', right: -9, top: '50%', transform: 'translateY(-50%)', width: 18, height: 18, background: 'var(--orbit-bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 2 }}><i className="bi bi-chevron-right" style={{ color: 'var(--waka-orange)', fontSize: 14 }}></i></div>}
          </div>
        ))}
      </div>

      <div style={{ marginTop: 22, padding: '16px 24px', background: 'var(--orbit-bg-surface)', border: '1px solid var(--orbit-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontSize: 14, color: 'var(--orbit-text-3)', textTransform: 'uppercase', letterSpacing: 2 }}>Time-to-market opérationnel</div>
        <div style={{ display: 'flex', gap: 36 }}>
          <div><span style={{ fontSize: 30, fontWeight: 800, color: 'var(--waka-orange)' }}>J+15</span><span style={{ fontSize: 14, color: 'var(--orbit-text-3)', marginLeft: 10 }}>communauté live</span></div>
          <div><span style={{ fontSize: 30, fontWeight: 800, color: 'var(--red-green)' }}>J+30</span><span style={{ fontSize: 14, color: 'var(--orbit-text-3)', marginLeft: 10 }}>premiers signaux convertis</span></div>
          <div><span style={{ fontSize: 30, fontWeight: 800, color: 'var(--waka-cyan)' }}>J+60</span><span style={{ fontSize: 14, color: 'var(--orbit-text-3)', marginLeft: 10 }}>vitesse de croisière multi-canal</span></div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="14 · Process Waka" />
  </>
);

/* Slide 16 — Diagramme SVG complet du processus de l'opération */
const Slide16_FullDiagram = () => (
  <>
    <ChromeTop section="Schéma de bout en bout" slideNum={16} total={23} />
    <div className="slide-body">
      <div className="eyebrow"><span className="num">15</span>Schéma de bout en bout<span className="bar"></span></div>
      <div className="title-m">L'opération en un seul plan.</div>
      <div className="body-m" style={{ maxWidth: 1200, marginBottom: 14 }}>Des sources publiques jusqu'à la souscription RED, en passant par l'intégration agentic du serveur MCP Ezy.</div>

      <div style={{ flex: 1, display: 'flex', alignItems: 'stretch', minHeight: 0 }}>
        <svg viewBox="0 0 1760 760" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: '100%' }}>
          <defs>
            <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
              <path d="M 0 0 L 10 5 L 0 10 z" fill="#E8832A" />
            </marker>
            <marker id="arrowG" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
              <path d="M 0 0 L 10 5 L 0 10 z" fill="#2DBE60" />
            </marker>
            <marker id="arrowC" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
              <path d="M 0 0 L 10 5 L 0 10 z" fill="#00BCD4" />
            </marker>
            <linearGradient id="gradBrain" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="#E8832A" stopOpacity="0.25" />
              <stop offset="100%" stopColor="#E8832A" stopOpacity="0.05" />
            </linearGradient>
            <linearGradient id="gradMcp" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="#2DBE60" stopOpacity="0.25" />
              <stop offset="100%" stopColor="#2DBE60" stopOpacity="0.05" />
            </linearGradient>
          </defs>

          {/* === Layer 1 — Sources publiques === */}
          <g>
            <text x="40" y="38" fill="#6E727E" fontSize="11" letterSpacing="2" fontWeight="700">① SOURCES PUBLIQUES · ÉCOUTE 24/7</text>
            {[
              { x: 40, label: "Pages FAI concurrents", sub: "Orange · Free · Bouygues" },
              { x: 340, label: "Pages réclamations", sub: "UFC · 60 Millions · Signal Conso" },
              { x: 640, label: "Groupes d'entraide", sub: "Box qui rame · Fibre France" },
              { x: 940, label: "Communauté Qui a la Fibre ?", sub: "Animée par l'agent Waka" },
            ].map((s, i) => (
              <g key={i} transform={`translate(${s.x}, 56)`}>
                <rect width="280" height="58" fill="#1E1E26" stroke="#3A3A48" strokeWidth="1" />
                <text x="14" y="24" fill="#E8F0F8" fontSize="13" fontWeight="700">{s.label}</text>
                <text x="14" y="44" fill="#6E727E" fontSize="11">{s.sub}</text>
              </g>
            ))}
            {/* arrows from sources to capture layer */}
            {[180, 480, 780, 1080].map((x, i) => (
              <line key={i} x1={x} y1="120" x2={x} y2="172" stroke="#E8832A" strokeWidth="1.5" markerEnd="url(#arrow)" />
            ))}
          </g>

          {/* === Layer 2 — Capture & animation === */}
          <g>
            <rect x="40" y="180" width="1180" height="78" fill="#16161C" stroke="#E8832A" strokeWidth="1.5" />
            <text x="60" y="205" fill="#E8832A" fontSize="11" letterSpacing="2" fontWeight="700">② CAPTURE & ANIMATION · ORBIT-CREW + STREAM</text>
            {[
              { x: 60, t: "Listener IA", s: "Crawl temps réel" },
              { x: 340, t: "Animateur IA", s: "Posts, comparatifs, sondages" },
              { x: 620, t: "Modérateur IA", s: "24/7" },
              { x: 900, t: "Détection signal", s: "Classification temps réel" },
            ].map((c, i) => (
              <g key={i}>
                <text x={c.x} y="234" fill="#E8F0F8" fontSize="13" fontWeight="700">{c.t}</text>
                <text x={c.x} y="250" fill="#6E727E" fontSize="11">{c.s}</text>
              </g>
            ))}
            <line x1="630" y1="258" x2="630" y2="298" stroke="#E8832A" strokeWidth="1.5" markerEnd="url(#arrow)" />
          </g>

          {/* === Layer 3 — Brain === */}
          <g>
            <rect x="40" y="306" width="1180" height="100" fill="url(#gradBrain)" stroke="#E8832A" strokeWidth="2" />
            <text x="60" y="332" fill="#E8832A" fontSize="11" letterSpacing="2" fontWeight="700">③ ORBIT-BRAIN · MOTEUR D'ANALYSE MULTI-LLM</text>
            <text x="60" y="362" fill="#E8F0F8" fontSize="20" fontWeight="800">Classification d'intention · Scoring N1 → N4 · Profilage · RAG offres RED · Décision d'action</text>
            <g transform="translate(60, 376)">
              {[
                { x: 0, label: "Grok 4" },
                { x: 90, label: "Claude Opus 4.7" },
                { x: 225, label: "GPT-5.5" },
                { x: 310, label: "Phi-4 MM" },
                { x: 395, label: "GPT Realtime" },
              ].map((m, i) => (
                <g key={i} transform={`translate(${m.x}, 0)`}>
                  <rect width={m.label.length * 7 + 18} height="20" fill="#1E1E26" stroke="#3A3A48" />
                  <text x="9" y="14" fill="#A8B0BC" fontSize="11" fontWeight="700">{m.label}</text>
                </g>
              ))}
            </g>
            <text x="1180" y="395" fill="#6E727E" fontSize="10" textAnchor="end" letterSpacing="1.5">Routing dynamique · Fallback automatique</text>
            <line x1="630" y1="406" x2="630" y2="446" stroke="#2DBE60" strokeWidth="1.5" markerEnd="url(#arrowG)" />
          </g>

          {/* === Layer 4 — Engagement gradué === */}
          <g>
            <text x="40" y="438" fill="#6E727E" fontSize="11" letterSpacing="2" fontWeight="700">④ ENGAGEMENT GRADUÉ · SELON LE SCORING</text>
            {[
              { x: 40, n: "N1 · Observe", s: "Mémorisation", c: "#6E727E" },
              { x: 340, n: "N2 · Réponse pub", s: "Crédibilité", c: "#00BCD4" },
              { x: 640, n: "N3 · DM", s: "Qualification", c: "#E8832A" },
              { x: 940, n: "N4 · WakaVoice", s: "Closing", c: "#2DBE60" },
            ].map((s, i) => (
              <g key={i} transform={`translate(${s.x}, 456)`}>
                <rect width="280" height="58" fill="#1E1E26" stroke="#3A3A48" />
                <rect width="3" height="58" fill={s.c} />
                <text x="14" y="24" fill="#E8F0F8" fontSize="13" fontWeight="700">{s.n}</text>
                <text x="14" y="44" fill="#6E727E" fontSize="11">{s.s}</text>
              </g>
            ))}
            <line x1="1080" y1="514" x2="1080" y2="554" stroke="#2DBE60" strokeWidth="1.5" markerEnd="url(#arrowG)" />
          </g>

          {/* === Right column — MCP Ezy integration (sidebar) === */}
          <g>
            <rect x="1260" y="56" width="460" height="608" fill="url(#gradMcp)" stroke="#2DBE60" strokeWidth="2" strokeDasharray="6,3" />
            <text x="1280" y="86" fill="#2DBE60" fontSize="12" letterSpacing="2.5" fontWeight="700">★ INTÉGRATION AGENTIC RED</text>
            <text x="1280" y="118" fill="#E8F0F8" fontSize="22" fontWeight="800">Ezy → MCP sécurisé</text>
            <text x="1280" y="142" fill="#A8B0BC" fontSize="13">Accès octroyés par RED · Adoption des API</text>
            <text x="1280" y="160" fill="#A8B0BC" fontSize="13">d'Ezy en serveur MCP propriétaire Waka</text>

            {/* Boxes — security */}
            <g transform="translate(1280, 184)">
              {[
                { label: "Azure Key Vault", sub: "Secrets · Rotation auto" },
                { label: "Managed Identity", sub: "Auth zero-trust" },
                { label: "Endpoints dédiés RED", sub: "Création par Waka" },
                { label: "Audit HMAC-SHA256", sub: "Logs immuables" },
              ].map((b, i) => (
                <g key={i} transform={`translate(0, ${i * 52})`}>
                  <rect width="420" height="44" fill="#1E1E26" stroke="#2A2A35" />
                  <circle cx="22" cy="22" r="8" fill="#2DBE60" />
                  <text x="44" y="20" fill="#E8F0F8" fontSize="13" fontWeight="700">{b.label}</text>
                  <text x="44" y="36" fill="#6E727E" fontSize="11">{b.sub}</text>
                </g>
              ))}
            </g>

            {/* Tools the agent can call */}
            <text x="1280" y="416" fill="#2DBE60" fontSize="11" letterSpacing="2" fontWeight="700">OUTILS EXPOSÉS À L'AGENT (TOOL-CALLING)</text>
            <g transform="translate(1280, 432)">
              {[
                "Vérification éligibilité Fibre / ADSL",
                "Constitution & envoi de panier",
                "Pré-souscription & signature",
                "Suivi de dossier client",
                "Lecture du catalogue d'offres RED",
              ].map((t, i) => (
                <g key={i} transform={`translate(0, ${i * 30})`}>
                  <rect width="420" height="22" fill="#16161C" stroke="#2A2A35" />
                  <text x="12" y="15" fill="#E8832A" fontSize="11" fontWeight="700">▸</text>
                  <text x="28" y="15" fill="#E8F0F8" fontSize="12">{t}</text>
                </g>
              ))}
            </g>

            <text x="1490" y="638" fill="#6E727E" fontSize="10" fontStyle="italic" textAnchor="middle">Conforme RGPD by design · Aucun secret en clair</text>

            {/* connection arrow from brain to MCP */}
            <path d="M 1220 356 Q 1240 356 1260 356" stroke="#E8832A" strokeWidth="1.5" fill="none" markerEnd="url(#arrow)" />
            <text x="1240" y="350" fill="#E8832A" fontSize="10" textAnchor="middle" fontWeight="700">tool-call</text>

            {/* connection arrow from N4 (WakaVoice) to MCP */}
            <path d="M 1220 485 Q 1240 485 1260 485" stroke="#00BCD4" strokeWidth="1.5" fill="none" markerEnd="url(#arrowC)" />
            <text x="1240" y="479" fill="#00BCD4" fontSize="10" textAnchor="middle" fontWeight="700">action</text>
          </g>

          {/* === Layer 5 — RED handoff === */}
          <g>
            <rect x="40" y="562" width="1180" height="78" fill="rgba(45,190,96,0.12)" stroke="#2DBE60" strokeWidth="2" />
            <text x="60" y="588" fill="#2DBE60" fontSize="11" letterSpacing="2" fontWeight="700">⑤ SOUSCRIPTION RED BY SFR · CASH</text>
            <text x="60" y="618" fill="#E8F0F8" fontSize="18" fontWeight="700">Souscription signée · Activation ligne · Reporting joint · Commission au résultat</text>
            <g transform="translate(900, 580)">
              <rect width="120" height="40" fill="#1E1E26" stroke="#2DBE60" />
              <text x="60" y="25" fill="#2DBE60" fontSize="11" textAnchor="middle" fontWeight="700">CRM RED</text>
            </g>
            <g transform="translate(1040, 580)">
              <rect width="160" height="40" fill="#1E1E26" stroke="#2DBE60" />
              <text x="80" y="25" fill="#2DBE60" fontSize="11" textAnchor="middle" fontWeight="700">Dashboard live RED</text>
            </g>
          </g>

          {/* === Bottom legend === */}
          <g transform="translate(40, 670)">
            <text x="0" y="14" fill="#6E727E" fontSize="11" letterSpacing="2" fontWeight="700">PÉRIMÈTRE :</text>
            <g transform="translate(120, 0)">
              <rect width="14" height="14" fill="#E8832A" />
              <text x="22" y="12" fill="#A8B0BC" fontSize="12">Waka — opération end-to-end</text>
            </g>
            <g transform="translate(380, 0)">
              <rect width="14" height="14" fill="#2DBE60" />
              <text x="22" y="12" fill="#A8B0BC" fontSize="12">RED — produit, offres, conformité, Ezy</text>
            </g>
            <text x="1720" y="12" fill="#6E727E" fontSize="11" textAnchor="end">Hébergé Azure francecentral · Multi-tenant · Multi-LLM</text>
          </g>
        </svg>
      </div>
    </div>
    <ChromeBottom chapter="15 · Schéma de bout en bout" />
  </>
);

const Slide17_References = () => {
  const refs = [
    { l: "Tomorrow University", s: "EdTech · Allemagne", c: 'var(--waka-cyan)', t: "Gestion des leads chauds", d: "Capture des leads chauds entrants sur le site, qualification IA et concrétisation commerciale jusqu'à l'inscription. Animation conversationnelle 24/7.", k: ["Lead conversion", "Multi-langue", "RAG cursus"] },
    { l: "Publica.fr", s: "Santé · France", c: 'var(--waka-orange)', t: "Réactivation d'abonnements", d: "Campagne de réactivation des cabinets dentistes. Outbound voix + relance multi-canal. Reprise de paiement et résiliation maîtrisée.", k: ["Outbound voix", "Réactivation", "Conformité santé"] },
    { l: "MTN", s: "Telecom · Afrique multi-pays", c: 'var(--red-green)', t: "Acquisition Fibre + bascule Mobile Money", d: "Campagne d'acquisition Fibre optique et conversion des clients en utilisateurs Mobile Money. Plus de 100 millions de contacts traités à l'échelle continentale.", k: ["100M+ contacts", "Multi-pays", "Up-skill mobile"] },
    { l: "Moov", s: "Telecom · Afrique de l'Ouest", c: 'var(--waka-yellow)', t: "Recouvrement & gestion crédit", d: "Opérations de recouvrement et de gestion de crédit client. Voix + WhatsApp + SMS, scoring de risque et plans de paiement automatisés.", k: ["Recouvrement", "Multi-canal", "Scoring risque"] },
  ];
  return (
    <>
      <ChromeTop section="Références" slideNum={17} total={23} />
      <div className="slide-body">
        <div className="eyebrow"><span className="num">16</span>Références opérationnelles<span className="bar"></span></div>
        <div className="title-m">Quatre opérations en production aujourd'hui.</div>
        <div className="body-m" style={{ maxWidth: 1100, marginBottom: 24 }}>Des secteurs différents, une même promesse : Waka opère, paie au résultat, livre la performance.</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, flex: 1 }}>
          {refs.map((r, i) => (
            <div key={i} className="card" style={{ padding: 28, display: 'flex', flexDirection: 'column', borderTop: `3px solid ${r.c}` }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
                <div>
                  <div style={{ fontSize: 32, fontWeight: 800, color: 'var(--orbit-text-1)', letterSpacing: -.5 }}>{r.l}</div>
                  <div style={{ fontSize: 13, color: r.c, marginTop: 4, fontWeight: 600, letterSpacing: 1, textTransform: 'uppercase' }}>{r.s}</div>
                </div>
                <i className="bi bi-arrow-up-right" style={{ color: r.c, fontSize: 24 }}></i>
              </div>
              <div style={{ padding: '10px 14px', background: 'var(--orbit-bg-surface)', border: '1px solid var(--orbit-border)', fontSize: 15, fontWeight: 700, color: 'var(--orbit-text-1)', marginBottom: 14 }}>{r.t}</div>
              <div style={{ fontSize: 15, color: 'var(--orbit-text-2)', lineHeight: 1.55, marginBottom: 14, flex: 1 }}>{r.d}</div>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', paddingTop: 14, borderTop: '1px solid var(--orbit-border)' }}>
                {r.k.map((k, j) => <span key={j} className="tag" style={{ fontSize: 10 }}>{k}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
      <ChromeBottom chapter="16 · Références" />
    </>
  );
};

const Slide18_Trust = () => {
  const items = [
    { ic: 'microsoft', t: "Microsoft Partner", d: "Partenariat officiel Microsoft. Accès anticipé aux modèles Azure OpenAI, support technique direct, co-engineering.", k: "Partner Network", c: 'var(--waka-cyan)' },
    { ic: 'shield-check', t: "ISO/IEC 27001", d: "Système de management de la sécurité de l'information. Certification en cours d'obtention, audit blanc passé.", k: "Sécurité info", c: 'var(--waka-orange)' },
    { ic: 'award-fill', t: "ISO 9001", d: "Système de management de la qualité. Certification en cours, processus documentés, KPIs qualité instaurés.", k: "Qualité", c: 'var(--red-green)' },
    { ic: 'lock-fill', t: "Conformité RGPD", d: "DPO désigné · Registre traitements · DPIA prêts · Hébergement Azure francecentral · Sous-traitance documentée.", k: "Données EU", c: 'var(--waka-yellow)' },
  ];
  return (
    <>
      <ChromeTop section="Garanties" slideNum={18} total={23} />
      <div className="slide-body">
        <div className="eyebrow"><span className="num">17</span>Garanties &amp; conformité<span className="bar"></span></div>
        <div className="title-l" style={{ fontSize: 72, maxWidth: 1500 }}>Une opération sécurisée, <span style={{ color: 'var(--red-green)' }}>par construction.</span></div>
        <div className="body-m" style={{ maxWidth: 1100, marginBottom: 32 }}>Waka est partenaire Microsoft, certifié ISO en cours, et conforme RGPD by design. Toutes les données restent en France.</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 14, flex: 1 }}>
          {items.map((x, i) => (
            <div key={i} className="card" style={{ padding: 28, display: 'flex', flexDirection: 'column' }}>
              <div style={{ width: 54, height: 54, background: 'var(--orbit-bg-surface)', border: '1px solid var(--orbit-border-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
                <i className={`bi bi-${x.ic}`} style={{ color: x.c, fontSize: 24 }}></i>
              </div>
              <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--orbit-text-1)', marginBottom: 8, letterSpacing: -.3 }}>{x.t}</div>
              <div style={{ fontSize: 11, color: x.c, fontWeight: 700, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 14 }}>{x.k}</div>
              <div style={{ fontSize: 14, color: 'var(--orbit-text-2)', lineHeight: 1.55, flex: 1 }}>{x.d}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 24, padding: '18px 28px', background: 'var(--orbit-bg-surface)', border: '1px solid var(--orbit-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 14, color: 'var(--orbit-text-2)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}><i className="bi bi-geo-alt-fill" style={{ color: 'var(--red-green)' }}></i><span><b style={{ color: 'var(--orbit-text-1)' }}>Souveraineté.</b> Données hébergées en France (Azure francecentral). Aucun transfert hors UE.</span></div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}><i className="bi bi-key-fill" style={{ color: 'var(--waka-orange)' }}></i><span><b style={{ color: 'var(--orbit-text-1)' }}>Secrets.</b> Azure Key Vault + Managed Identity. Pas de credential dans le code.</span></div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}><i className="bi bi-file-earmark-lock2-fill" style={{ color: 'var(--waka-cyan)' }}></i><span><b style={{ color: 'var(--orbit-text-1)' }}>Audit.</b> Logs immutables, rapports signés HMAC-SHA256.</span></div>
        </div>
      </div>
      <ChromeBottom chapter="17 · Garanties" />
    </>
  );
};

Object.assign(window, { Slide15_ProcessOverview, Slide16_FullDiagram, Slide17_References, Slide18_Trust });