spb/api-ka

1<!DOCTYPE html>2<!--3============================================4Projet   : API-KA5Fichier  : src/api/web/contact.html6Node     : m3u96b7Author   : Simon-Pierre Boucher8Contact  : contact@spboucher.ai9Date     : 2026-08-1710============================================11Page /contact — courriels officiels Groupe KA (ecosystem.json) + compte KA ID.12-->13<html lang="fr">14<head>15<meta charset="utf-8">16<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">17<title>Contact — API-Ka — Un service Groupe KA</title>18<meta name="description" content="Joindre le Groupe KA : contact@groupe-ka.com (projets, partenariats et données), info@groupe-ka.com (médias) et admin@groupe-ka.com (légal, vie privée et Loi 25).">19<meta name="theme-color" content="#f5f3ee">20<link rel="icon" type="image/svg+xml" href="/favicon.svg">21<link rel="apple-touch-icon" href="/apple-touch-icon.png">22<meta property="og:title" content="Contact — API-Ka — Un service Groupe KA">23<meta property="og:description" content="Joindre le Groupe KA : contact@groupe-ka.com (projets, partenariats et données), info@groupe-ka.com (médias) et admin@groupe-ka.com (légal, vie privée et Loi 25).">24<meta property="og:url" content="https://www.api-ka.com/contact">25<meta property="og:type" content="website">26<meta property="og:image" content="https://www.api-ka.com/og.png">27<meta property="og:image:width" content="1200">28<meta property="og:image:height" content="630">29<meta name="twitter:card" content="summary_large_image">30<meta name="twitter:image" content="https://www.api-ka.com/og.png">31<link rel="preconnect" href="https://fonts.googleapis.com">32<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>33<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">34<link rel="stylesheet" href="/ka/tokens.css">35<style>36/* ---- Accent API-Ka : INDIGO ---- */37:root{38  --accent:#3b5bdb; --accent-soft:#e4eafb; --accent-deep:#2b44a8; --on-accent:#ffffff;39}4041/* ---- topbar (identique à l'accueil) ---- */42.topbar{position:sticky;top:0;z-index:60;background:rgba(245,243,238,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1.5px solid var(--ink)}43.topbar-in{display:flex;align-items:center;gap:14px;min-height:68px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}44.brand{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.03em;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--touch);white-space:nowrap}45.brand .ka{display:inline-block;background:var(--ink);color:var(--accent);border-radius:6px;padding:0 7px 2px;margin-left:5px;transform:rotate(-2deg);transition:transform .15s}46.brand:hover .ka{transform:rotate(0)}47.topnav{display:flex;gap:2px;list-style:none;margin:0 0 0 auto;padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}48.topnav a{display:inline-flex;align-items:center;min-height:var(--touch);text-decoration:none;font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:0 12px;border-radius:var(--r-ctl);white-space:nowrap;transition:background .13s,color .13s}49.topnav a:hover{background:var(--accent-soft);color:var(--accent-deep)}50#ka-auth{display:flex;align-items:center;gap:8px}51#ka-auth .btn{font-size:12.5px;padding:8px 14px}52.ka-user{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}53.ka-user b{font-family:var(--font-display);font-size:13px;text-transform:none;letter-spacing:-.01em;color:var(--ink)}54.ka-avatar{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--ink);object-fit:cover}55@media(max-width:1023px){.topnav{order:5;flex-basis:100%;margin-left:0}}5657/* ---- page contact ---- */58.hero-c{padding:64px 0 56px;border-bottom:1.5px solid var(--ink);background:linear-gradient(rgba(59,91,219,.05),transparent 60%),var(--paper)}59.hero-c h1{max-width:640px;margin-top:16px}60.lede{margin-top:14px;max-width:60ch;color:var(--ink-2);font-size:16px}61section{padding:64px 0}62.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}63.contact-card{padding:24px 22px;display:flex;flex-direction:column;gap:12px}64.contact-mail{display:inline-flex;align-items:center;min-height:var(--touch);font-family:var(--font-mono);font-size:14.5px;font-weight:700;color:var(--accent-deep);text-decoration:none;word-break:break-all}65.contact-mail:hover{text-decoration:underline;text-underline-offset:4px}66.account{margin-top:56px;background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card);box-shadow:var(--shadow-off-soft);padding:28px;display:flex;flex-wrap:wrap;align-items:center;gap:20px;justify-content:space-between}67.account p{margin:0;max-width:56ch;color:var(--ink-2);font-size:14.5px}68.account b{color:var(--ink)}69</style>70</head>71<body>7273<div class="topbar"><div class="container topbar-in">74  <a class="brand" href="/" aria-label="API-Ka — accueil">API<span class="ka">·Ka</span></a>75  <a class="gk-badge" href="https://www.groupe-ka.com" target="_blank" rel="noopener noreferrer"76     aria-label="Un service Groupe KA — visiter le portail de l'écosystème">Un service <b>Groupe<span class="ka">KA</span></b></a>77  <ul class="topnav">78    <li><a href="/#services">Services</a></li>79    <li><a href="/#endpoints">Endpoints</a></li>80    <li><a href="/#playground">Playground</a></li>81    <li><a href="/stats">Stats</a></li>82    <li><a href="/docs">Swagger</a></li>83    <li><a href="/contact">Contact</a></li>84  </ul>85  <div id="ka-auth"></div>86</div></div>8788<header class="hero-c"><div class="container">89  <span class="kicker">Contact · Groupe KA</span>90  <h1>Nous <span class="hl">joindre</span></h1>91  <p class="lede">API-Ka est un service du Groupe KA. Toutes les demandes — projets, données,92  médias, légal — passent par les courriels officiels du groupe.</p>93</div></header>9495<section><div class="container">96  <span class="kicker">Courriels officiels</span>97  <h2>Trois <span class="hl">adresses</span></h2>98  <div class="contact-grid" id="ka-contacts"></div>99100  <div class="account">101    <p><b>Compte KA ID.</b> La connexion « Se connecter avec KA » est déléguée au hub102    groupe-ka.com : un seul compte pour toutes les plateformes de l'écosystème.103    La création de compte se fait sur le hub.</p>104    <a class="btn btn-accent" id="ka-hub-link" href="https://www.groupe-ka.com/connexion"105       target="_blank" rel="noopener noreferrer">Créer un compte KA ID</a>106  </div>107</div></section>108109<footer class="ka-footer"><div class="container" id="ka-footer-root"></div></footer>110111<script src="/ka/ka-shell.js" defer></script>112</body>113</html>114