SPB Git

spb/crea-ka

Public

Créa·Ka — annuaire public cross-plateforme des créateurs de contenu québécois (crea-ka.com)

design: harmonisation « éditorial sharp » Groupe KA (ka-ui) — accent violet, footer commun, page /contact

- Vendorisation du package ka-ui dans frontend/src/ka/ (tokens.css, ecosystem.json,
  KaFooter.tsx, GroupeKaBadge.tsx) ; tokens.css injecté EN PREMIER dans le <head>
  via le nouveau marqueur __KA_TOKENS__, écosystème via __KA_ECO__
  (scripts/build_frontend.py gère désormais les 3 marqueurs)
- Accent attribué à Créa-Ka : VIOLET (--accent:#7048e8, --accent-soft:#ece5fc,
  --accent-deep:#5433b8, --on-accent:#ffffff) + alias --lime/--lime-soft ;
  socle dédupliqué (body, grain, sélection, boutons) ; couleurs codées en dur
  (#c9a3ff, #5b34a8, rgba violettes) pointées vers les variables du groupe ;
  textes posés sur accent passés à --on-accent, textes sur encre à --accent-soft
- Header : badge « Un service Groupe KA » cliquable vers le hub (desktop +
  mobile, préfixe replié sous 560 px) ; bouton « Se connecter avec KA » ;
  « Créer un compte KA ID » vers groupe-ka.com/connexion sur /compte
- Footer : remplacement par le footer commun KaFooter (fond encre, avertissement
  agrégateur, 3 courriels, 15 liens de l'écosystème, mentions légales du hub +
  /retrait local) ; nav locale conservée au-dessus
- Nouvelle route SPA /contact : courriels & rôles du groupe, avertissement,
  lien hub et liste des 12 plateformes (ecosystem.json)
- SEO : <title> « Créa-Ka — Un service Groupe KA »
- Responsive : cibles tactiles >=44 px (header, nav footer, cartes contact),
  aucun débordement horizontal (overflow-x:clip du socle), breakpoints
  360/768/1024/1440 du design system

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Simon-Pierre Boucher committed (Aug 18, 2026) parent 0b6ebec Browse files

7 changed files +1,219 −244

modified frontend/dist/index.html +637 −120
@@ -1,88 +1,519 @@
1 <!-- 1 <!--
2 Author: Simon-Pierre Boucher <contact@spboucher.ai> 2 Author: Simon-Pierre Boucher <contact@spboucher.ai>
3 File: frontend/src/index.template.html 3 File: frontend/src/index.template.html
4− Desc: Gabarit du frontend Créa-Ka — {"_author":"Simon-Pierre Boucher <contact@spboucher.ai>","_file":"frontend/src/icons.json","_desc":"Trac\u00e9s SVG des marques de plateformes (simple-icons v13, CC0) + glyphes maison (linkedin/site-web/autre)","instagram":"M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077","tiktok":"M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z","youtube":"M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z","twitch":"M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z","kick":"M1.333 0h8v5.333H12V2.667h2.667V0h8v8H20v2.667h-2.667v2.666H20V16h2.667v8h-8v-2.667H12v-2.666H9.333V24h-8Z","x":"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z","facebook":"M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z","snapchat":"M12.206.793c.99 0 4.347.276 5.93 3.821.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51.075.045.203.09.401.09.3-.016.659-.12 1.033-.301.165-.088.344-.104.464-.104.182 0 .359.029.509.09.45.149.734.479.734.838.015.449-.39.839-1.213 1.168-.089.029-.209.075-.344.119-.45.135-1.139.36-1.333.81-.09.224-.061.524.12.868l.015.015c.06.136 1.526 3.475 4.791 4.014.255.044.435.27.42.509 0 .075-.015.149-.045.225-.24.569-1.273.988-3.146 1.271-.059.091-.12.375-.164.57-.029.179-.074.36-.134.553-.076.271-.27.405-.555.405h-.03c-.135 0-.313-.031-.538-.074-.36-.075-.765-.135-1.273-.135-.3 0-.599.015-.913.074-.6.104-1.123.464-1.723.884-.853.599-1.826 1.288-3.294 1.288-.06 0-.119-.015-.18-.015h-.149c-1.468 0-2.427-.675-3.279-1.288-.599-.42-1.107-.779-1.707-.884-.314-.045-.629-.074-.928-.074-.54 0-.958.089-1.272.149-.211.043-.391.074-.54.074-.374 0-.523-.224-.583-.42-.061-.192-.09-.389-.135-.567-.046-.181-.105-.494-.166-.57-1.918-.222-2.95-.642-3.189-1.226-.031-.063-.052-.15-.055-.225-.015-.243.165-.465.42-.509 3.264-.54 4.73-3.879 4.791-4.02l.016-.029c.18-.345.224-.645.119-.869-.195-.434-.884-.658-1.332-.809-.121-.029-.24-.074-.346-.119-1.107-.435-1.257-.93-1.197-1.273.09-.479.674-.793 1.168-.793.146 0 .27.029.383.074.42.194.789.3 1.104.3.234 0 .384-.06.465-.105l-.046-.569c-.098-1.626-.225-3.651.307-4.837C7.392 1.077 10.739.807 11.727.807l.419-.015h.06z","substack":"M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z","patreon":"M22.957 7.21c-.004-3.064-2.391-5.576-5.191-6.482-3.478-1.125-8.064-.962-11.384.604C2.357 3.231 1.093 7.391 1.046 11.54c-.039 3.411.302 12.396 5.369 12.46 3.765.047 4.326-4.804 6.068-7.141 1.24-1.662 2.836-2.132 4.801-2.618 3.376-.836 5.678-3.501 5.673-7.031Z","onlyfans":"M24 4.003h-4.015c-3.45 0-5.3.197-6.748 1.957a7.996 7.996 0 1 0 2.103 9.211c3.182-.231 5.39-2.134 6.085-5.173 0 0-2.399.585-4.43 0 4.018-.777 6.333-3.037 7.005-5.995zM5.61 11.999A2.391 2.391 0 0 1 9.28 9.97a2.966 2.966 0 0 1 2.998-2.528h.008c-.92 1.778-1.407 3.352-1.998 5.263A2.392 2.392 0 0 1 5.61 12Zm2.386-7.996a7.996 7.996 0 1 0 7.996 7.996 7.996 7.996 0 0 0-7.996-7.996Zm0 10.394A2.399 2.399 0 1 1 10.395 12a2.396 2.396 0 0 1-2.399 2.398Z","threads":"M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z","podcast":"M5.34 0A5.328 5.328 0 000 5.34v13.32A5.328 5.328 0 005.34 24h13.32A5.328 5.328 0 0024 18.66V5.34A5.328 5.328 0 0018.66 0zm6.525 2.568c2.336 0 4.448.902 6.056 2.587 1.224 1.272 1.912 2.619 2.264 4.392.12.59.12 2.2.007 2.864a8.506 8.506 0 01-3.24 5.296c-.608.46-2.096 1.261-2.336 1.261-.088 0-.096-.091-.056-.46.072-.592.144-.715.48-.856.536-.224 1.448-.874 2.008-1.435a7.644 7.644 0 002.008-3.536c.208-.824.184-2.656-.048-3.504-.728-2.696-2.928-4.792-5.624-5.352-.784-.16-2.208-.16-3 0-2.728.56-4.984 2.76-5.672 5.528-.184.752-.184 2.584 0 3.336.456 1.832 1.64 3.512 3.192 4.512.304.2.672.408.824.472.336.144.408.264.472.856.04.36.03.464-.056.464-.056 0-.464-.176-.896-.384l-.04-.03c-2.472-1.216-4.056-3.274-4.632-6.012-.144-.706-.168-2.392-.03-3.04.36-1.74 1.048-3.1 2.192-4.304 1.648-1.737 3.768-2.656 6.128-2.656zm.134 2.81c.409.004.803.04 1.106.106 2.784.62 4.76 3.408 4.376 6.174-.152 1.114-.536 2.03-1.216 2.88-.336.43-1.152 1.15-1.296 1.15-.023 0-.048-.272-.048-.603v-.605l.416-.496c1.568-1.878 1.456-4.502-.256-6.224-.664-.67-1.432-1.064-2.424-1.246-.64-.118-.776-.118-1.448-.008-1.02.167-1.81.562-2.512 1.256-1.72 1.704-1.832 4.342-.264 6.222l.413.496v.608c0 .336-.027.608-.06.608-.03 0-.264-.16-.512-.36l-.034-.011c-.832-.664-1.568-1.842-1.872-2.997-.184-.698-.184-2.024.008-2.72.504-1.878 1.888-3.335 3.808-4.019.41-.145 1.133-.22 1.814-.211zm-.13 2.99c.31 0 .62.06.844.178.488.253.888.745 1.04 1.259.464 1.578-1.208 2.96-2.72 2.254h-.015c-.712-.331-1.096-.956-1.104-1.77 0-.733.408-1.371 1.112-1.745.224-.117.534-.176.844-.176zm-.011 4.728c.988-.004 1.706.349 1.97.97.198.464.124 1.932-.218 4.302-.232 1.656-.36 2.074-.68 2.356-.44.39-1.064.498-1.656.288h-.003c-.716-.257-.87-.605-1.164-2.644-.341-2.37-.416-3.838-.218-4.302.262-.616.974-.966 1.97-.97z","linktree":"m13.73635 5.85251 4.00467-4.11665 2.3248 2.3808-4.20064 4.00466h5.9085v3.30473h-5.9365l4.22865 4.10766-2.3248 2.3338L12.0005 12.099l-5.74052 5.76852-2.3248-2.3248 4.22864-4.10766h-5.9375V8.12132h5.9085L3.93417 4.11666l2.3248-2.3808 4.00468 4.11665V0h3.4727zm-3.4727 10.30614h3.4727V24h-3.4727z","linkedin":"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z","site-web":"M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm7.938 9h-3.243a15.6 15.6 0 00-1.4-4.653A8.03 8.03 0 0119.938 9zM12 2.05c.9 1.2 1.9 3.2 2.5 6.95h-5C10.1 5.25 11.1 3.25 12 2.05zM4.062 15A8.06 8.06 0 013.75 12c0-1.05.15-2.05.312-3h3.55A25 25 0 007.5 12c0 1.05.05 2.05.113 3zm.643 2h3.243c.35 1.8.85 3.35 1.4 4.653A8.03 8.03 0 014.705 17zm3.243-10H4.705a8.03 8.03 0 014.643-4.653A15.6 15.6 0 007.948 7zM12 21.95c-.9-1.2-1.9-3.2-2.5-6.95h5c-.6 3.75-1.6 5.75-2.5 6.95zM14.787 13H9.213A23 23 0 019.1 12c0-1.05.037-2.05.113-3h5.574c.076.95.113 1.95.113 3s-.037 2.05-.113 3zm.508 8.653c.55-1.303 1.05-2.853 1.4-4.653h3.243a8.03 8.03 0 01-4.643 4.653zM16.388 15c.062-.95.112-1.95.112-3s-.05-2.05-.112-3h3.55c.162.95.312 1.95.312 3s-.15 2.05-.312 3z","autre":"M10.59 13.41a1 1 0 010-1.41l2.83-2.83a3 3 0 114.24 4.24l-1.41 1.42a1 1 0 11-1.42-1.42l1.42-1.41a1 1 0 10-1.42-1.42L12 13.41a1 1 0 01-1.41 0zm2.82-2.82a1 1 0 010 1.41l-2.82 2.83a3 3 0 11-4.25-4.24l1.42-1.42a1 1 0 111.41 1.42L7.76 12a1 1 0 101.41 1.41L12 10.59a1 1 0 011.41 0z"} est remplacé par les tracés 4+ Desc: Gabarit du frontend Créa-Ka — marqueurs remplacés par
5− SVG des marques (simple-icons, CC0) via scripts/build_frontend.py. 5+ scripts/build_frontend.py : {"_author":"Simon-Pierre Boucher <contact@spboucher.ai>","_file":"frontend/src/icons.json","_desc":"Trac\u00e9s SVG des marques de plateformes (simple-icons v13, CC0) + glyphes maison (linkedin/site-web/autre)","instagram":"M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077","tiktok":"M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z","youtube":"M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z","twitch":"M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z","kick":"M1.333 0h8v5.333H12V2.667h2.667V0h8v8H20v2.667h-2.667v2.666H20V16h2.667v8h-8v-2.667H12v-2.666H9.333V24h-8Z","x":"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z","facebook":"M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z","snapchat":"M12.206.793c.99 0 4.347.276 5.93 3.821.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51.075.045.203.09.401.09.3-.016.659-.12 1.033-.301.165-.088.344-.104.464-.104.182 0 .359.029.509.09.45.149.734.479.734.838.015.449-.39.839-1.213 1.168-.089.029-.209.075-.344.119-.45.135-1.139.36-1.333.81-.09.224-.061.524.12.868l.015.015c.06.136 1.526 3.475 4.791 4.014.255.044.435.27.42.509 0 .075-.015.149-.045.225-.24.569-1.273.988-3.146 1.271-.059.091-.12.375-.164.57-.029.179-.074.36-.134.553-.076.271-.27.405-.555.405h-.03c-.135 0-.313-.031-.538-.074-.36-.075-.765-.135-1.273-.135-.3 0-.599.015-.913.074-.6.104-1.123.464-1.723.884-.853.599-1.826 1.288-3.294 1.288-.06 0-.119-.015-.18-.015h-.149c-1.468 0-2.427-.675-3.279-1.288-.599-.42-1.107-.779-1.707-.884-.314-.045-.629-.074-.928-.074-.54 0-.958.089-1.272.149-.211.043-.391.074-.54.074-.374 0-.523-.224-.583-.42-.061-.192-.09-.389-.135-.567-.046-.181-.105-.494-.166-.57-1.918-.222-2.95-.642-3.189-1.226-.031-.063-.052-.15-.055-.225-.015-.243.165-.465.42-.509 3.264-.54 4.73-3.879 4.791-4.02l.016-.029c.18-.345.224-.645.119-.869-.195-.434-.884-.658-1.332-.809-.121-.029-.24-.074-.346-.119-1.107-.435-1.257-.93-1.197-1.273.09-.479.674-.793 1.168-.793.146 0 .27.029.383.074.42.194.789.3 1.104.3.234 0 .384-.06.465-.105l-.046-.569c-.098-1.626-.225-3.651.307-4.837C7.392 1.077 10.739.807 11.727.807l.419-.015h.06z","substack":"M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z","patreon":"M22.957 7.21c-.004-3.064-2.391-5.576-5.191-6.482-3.478-1.125-8.064-.962-11.384.604C2.357 3.231 1.093 7.391 1.046 11.54c-.039 3.411.302 12.396 5.369 12.46 3.765.047 4.326-4.804 6.068-7.141 1.24-1.662 2.836-2.132 4.801-2.618 3.376-.836 5.678-3.501 5.673-7.031Z","onlyfans":"M24 4.003h-4.015c-3.45 0-5.3.197-6.748 1.957a7.996 7.996 0 1 0 2.103 9.211c3.182-.231 5.39-2.134 6.085-5.173 0 0-2.399.585-4.43 0 4.018-.777 6.333-3.037 7.005-5.995zM5.61 11.999A2.391 2.391 0 0 1 9.28 9.97a2.966 2.966 0 0 1 2.998-2.528h.008c-.92 1.778-1.407 3.352-1.998 5.263A2.392 2.392 0 0 1 5.61 12Zm2.386-7.996a7.996 7.996 0 1 0 7.996 7.996 7.996 7.996 0 0 0-7.996-7.996Zm0 10.394A2.399 2.399 0 1 1 10.395 12a2.396 2.396 0 0 1-2.399 2.398Z","threads":"M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z","podcast":"M5.34 0A5.328 5.328 0 000 5.34v13.32A5.328 5.328 0 005.34 24h13.32A5.328 5.328 0 0024 18.66V5.34A5.328 5.328 0 0018.66 0zm6.525 2.568c2.336 0 4.448.902 6.056 2.587 1.224 1.272 1.912 2.619 2.264 4.392.12.59.12 2.2.007 2.864a8.506 8.506 0 01-3.24 5.296c-.608.46-2.096 1.261-2.336 1.261-.088 0-.096-.091-.056-.46.072-.592.144-.715.48-.856.536-.224 1.448-.874 2.008-1.435a7.644 7.644 0 002.008-3.536c.208-.824.184-2.656-.048-3.504-.728-2.696-2.928-4.792-5.624-5.352-.784-.16-2.208-.16-3 0-2.728.56-4.984 2.76-5.672 5.528-.184.752-.184 2.584 0 3.336.456 1.832 1.64 3.512 3.192 4.512.304.2.672.408.824.472.336.144.408.264.472.856.04.36.03.464-.056.464-.056 0-.464-.176-.896-.384l-.04-.03c-2.472-1.216-4.056-3.274-4.632-6.012-.144-.706-.168-2.392-.03-3.04.36-1.74 1.048-3.1 2.192-4.304 1.648-1.737 3.768-2.656 6.128-2.656zm.134 2.81c.409.004.803.04 1.106.106 2.784.62 4.76 3.408 4.376 6.174-.152 1.114-.536 2.03-1.216 2.88-.336.43-1.152 1.15-1.296 1.15-.023 0-.048-.272-.048-.603v-.605l.416-.496c1.568-1.878 1.456-4.502-.256-6.224-.664-.67-1.432-1.064-2.424-1.246-.64-.118-.776-.118-1.448-.008-1.02.167-1.81.562-2.512 1.256-1.72 1.704-1.832 4.342-.264 6.222l.413.496v.608c0 .336-.027.608-.06.608-.03 0-.264-.16-.512-.36l-.034-.011c-.832-.664-1.568-1.842-1.872-2.997-.184-.698-.184-2.024.008-2.72.504-1.878 1.888-3.335 3.808-4.019.41-.145 1.133-.22 1.814-.211zm-.13 2.99c.31 0 .62.06.844.178.488.253.888.745 1.04 1.259.464 1.578-1.208 2.96-2.72 2.254h-.015c-.712-.331-1.096-.956-1.104-1.77 0-.733.408-1.371 1.112-1.745.224-.117.534-.176.844-.176zm-.011 4.728c.988-.004 1.706.349 1.97.97.198.464.124 1.932-.218 4.302-.232 1.656-.36 2.074-.68 2.356-.44.39-1.064.498-1.656.288h-.003c-.716-.257-.87-.605-1.164-2.644-.341-2.37-.416-3.838-.218-4.302.262-.616.974-.966 1.97-.97z","linktree":"m13.73635 5.85251 4.00467-4.11665 2.3248 2.3808-4.20064 4.00466h5.9085v3.30473h-5.9365l4.22865 4.10766-2.3248 2.3338L12.0005 12.099l-5.74052 5.76852-2.3248-2.3248 4.22864-4.10766h-5.9375V8.12132h5.9085L3.93417 4.11666l2.3248-2.3808 4.00468 4.11665V0h3.4727zm-3.4727 10.30614h3.4727V24h-3.4727z","linkedin":"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z","site-web":"M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm7.938 9h-3.243a15.6 15.6 0 00-1.4-4.653A8.03 8.03 0 0119.938 9zM12 2.05c.9 1.2 1.9 3.2 2.5 6.95h-5C10.1 5.25 11.1 3.25 12 2.05zM4.062 15A8.06 8.06 0 013.75 12c0-1.05.15-2.05.312-3h3.55A25 25 0 007.5 12c0 1.05.05 2.05.113 3zm.643 2h3.243c.35 1.8.85 3.35 1.4 4.653A8.03 8.03 0 014.705 17zm3.243-10H4.705a8.03 8.03 0 014.643-4.653A15.6 15.6 0 007.948 7zM12 21.95c-.9-1.2-1.9-3.2-2.5-6.95h5c-.6 3.75-1.6 5.75-2.5 6.95zM14.787 13H9.213A23 23 0 019.1 12c0-1.05.037-2.05.113-3h5.574c.076.95.113 1.95.113 3s-.037 2.05-.113 3zm.508 8.653c.55-1.303 1.05-2.853 1.4-4.653h3.243a8.03 8.03 0 01-4.643 4.653zM16.388 15c.062-.95.112-1.95.112-3s-.05-2.05-.112-3h3.55c.162.95.312 1.95.312 3s-.15 2.05-.312 3z","autre":"M10.59 13.41a1 1 0 010-1.41l2.83-2.83a3 3 0 114.24 4.24l-1.41 1.42a1 1 0 11-1.42-1.42l1.42-1.41a1 1 0 10-1.42-1.42L12 13.41a1 1 0 01-1.41 0zm2.82-2.82a1 1 0 010 1.41l-2.82 2.83a3 3 0 11-4.25-4.24l1.42-1.42a1 1 0 111.41 1.42L7.76 12a1 1 0 101.41 1.41L12 10.59a1 1 0 011.41 0z"} (tracés SVG simple-icons, CC0),
6− Système de design « éditorial sharp » du Groupe KA (identité partagée 6+ /* -----------------------------------------------------------------------------
7− avec groupe-ka.com, Vrai-Prix, ValoPlex : papier grainé #f5f3ee, encre 7+ Auteur : Simon-Pierre Boucher — contact@spboucher.ai
8− #141814, bordures encre + ombres décalées dures, Space Grotesk / Inter 8+ Fichier : ka-ui/tokens.css — SOURCE CANONIQUE (repo ka-ui sur spbgit)
9− / JetBrains Mono) — accent propre Créa-Ka : VIOLET ÉLECTRIQUE. 9+ Desc. : Design system commun GROUPE KA « éditorial sharp » — tokens + socle
10− Patrons mobiles calqués sur Lou-Ka (tab bar 4 onglets, filtres 10+ de composants partagés par les 12 plateformes. Chaque site importe ce
11− défilants, anti-zoom iOS). Routes : / · /createur/{id} · /stats · /retrait 11+ fichier PUIS surcharge uniquement son accent (voir accents.css).
12+
13+ · Typo : display Space Grotesk / texte Inter / micro-étiquettes JetBrains Mono
14+ · Palette: papier #f5f3ee · encre #141814 · vert profond #1c5c41 + ACCENT du site
15+ · Signature : bordures encre 1,5–2 px + ombres décalées dures, grain de film,
16+ surlignés d'accent inclinés (néo-brutalisme raffiné)
17+ · Breakpoints communs : 360 / 768 / 1024 / 1440 px (mobile-first)
18+ · Zones tactiles ≥ 44×44 px, safe-areas iOS, typographie fluide (clamp)
19+----------------------------------------------------------------------------- */
20+
21+:root {
22+ /* ---- Palette fixe Groupe KA (identique sur les 12 sites) ---- */
23+ --paper: #f5f3ee;
24+ --surface: #ffffff;
25+ --surface-2: #faf9f5;
26+ --ink: #141814;
27+ --ink-2: #4d5551;
28+ --ink-3: #8b928c;
29+ --line: rgba(20, 24, 20, 0.14);
30+ --line-strong: rgba(20, 24, 20, 0.85);
31+ --green: #1c5c41;
32+ --green-deep: #123f2e;
33+ --amber: #e8a33d;
34+ --amber-soft: #fdf3e2;
35+ --danger: #b3423a;
36+ --danger-soft: #fbe9e7;
37+
38+ /* ---- ACCENT du site — SEULES variables surchargées par marque ---- */
39+ --accent: #d9f26b; /* défaut : lime Groupe KA */
40+ --accent-soft: #f0f9d2;
41+ --accent-deep: #123f2e;
42+ --on-accent: var(--ink); /* couleur du texte posé SUR l'accent */
43+
44+ /* alias rétro-compatibles (les satellites historiques utilisent --lime) */
45+ --lime: var(--accent);
46+ --lime-soft: var(--accent-soft);
47+
48+ /* ---- Géométrie sharp ---- */
49+ --r-card: 10px;
50+ --r-ctl: 6px;
51+ --r-pill: 999px;
52+
53+ /* ---- Ombres décalées — la signature du groupe ---- */
54+ --shadow-flat: 0 1px 2px rgba(20, 24, 20, 0.05);
55+ --shadow-off: 6px 6px 0 var(--ink);
56+ --shadow-off-soft: 8px 8px 0 rgba(20, 24, 20, 0.08);
57+ --shadow-off-mid: 4px 4px 0 rgba(20, 24, 20, 0.18);
58+
59+ /* ---- Typographie ---- */
60+ --font-display: "Space Grotesk", system-ui, sans-serif;
61+ --font-body: "Inter", system-ui, sans-serif;
62+ --font-mono: "JetBrains Mono", ui-monospace, monospace;
63+
64+ /* Échelle fluide (mobile-first, clamp) */
65+ --fs-h1: clamp(30px, 3.2vw + 18px, 54px);
66+ --fs-h2: clamp(23px, 1.8vw + 14px, 34px);
67+ --fs-h3: clamp(17px, 0.9vw + 12px, 22px);
68+ --fs-body: 15px;
69+ --fs-small: 13px;
70+
71+ /* Espacements */
72+ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
73+ --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
74+
75+ /* Cible tactile minimale */
76+ --touch: 44px;
77+}
78+
79+/* ---- Socle ---- */
80+* { box-sizing: border-box; }
81+html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
82+body {
83+ margin: 0;
84+ background: var(--paper);
85+ color: var(--ink);
86+ font-family: var(--font-body);
87+ font-size: var(--fs-body);
88+ line-height: 1.55;
89+ -webkit-font-smoothing: antialiased;
90+ padding-bottom: env(safe-area-inset-bottom);
91+ overflow-x: clip; /* jamais de débordement horizontal */
92+}
93+img, svg, video { max-width: 100%; height: auto; display: block; }
94+h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.03em; margin: 0 0 0.5em; }
95+h1 { font-size: var(--fs-h1); line-height: 1.06; }
96+h2 { font-size: var(--fs-h2); line-height: 1.15; }
97+h3 { font-size: var(--fs-h3); line-height: 1.25; }
98+a { color: inherit; }
99+::selection { background: var(--accent); color: var(--on-accent); }
100+:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
101+
102+/* Grain de film pleine page — ⚠️ jamais de z-index sur body > * (position:
103+ relative seulement), sinon les utilitaires z-* sont écrasés. */
104+body::before {
105+ content: "";
106+ position: fixed; inset: 0; pointer-events: none; opacity: 0.35; z-index: 9999;
107+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
108+}
109+body > * { position: relative; }
110+
111+/* ---- Conteneur commun ---- */
112+.container { max-width: 1152px; margin: 0 auto; padding: 0 var(--sp-4); }
113+@media (min-width: 768px) { .container { padding: 0 var(--sp-5); } }
114+
115+/* ---- Micro-typographie signature ---- */
116+.kicker {
117+ display: inline-flex; align-items: center; gap: 10px;
118+ font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
119+ text-transform: uppercase; letter-spacing: 0.12em; color: var(--green);
120+}
121+.kicker::before { content: ""; width: 22px; height: 2px; background: var(--green); }
122+.klabel {
123+ font-family: var(--font-mono); font-size: 10px; font-weight: 700;
124+ text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);
125+}
126+.hl {
127+ display: inline-block; background: var(--accent); color: var(--on-accent);
128+ border-radius: 8px; padding: 0 10px 2px; transform: rotate(-1deg);
129+}
130+.outline-txt { color: transparent; -webkit-text-stroke: 2px var(--ink); }
131+
132+/* ---- Boutons (cible ≥ 44 px) ---- */
133+.btn {
134+ display: inline-flex; align-items: center; justify-content: center; gap: 8px;
135+ min-height: var(--touch); padding: 10px 18px;
136+ font-family: var(--font-display); font-weight: 700; font-size: 14px;
137+ border: 1.5px solid var(--ink); border-radius: var(--r-ctl);
138+ background: var(--surface); color: var(--ink);
139+ cursor: pointer; text-decoration: none;
140+ transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
141+}
142+.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-off-mid); }
143+.btn:active { transform: translate(0, 0); box-shadow: none; }
144+.btn:disabled { opacity: 0.45; pointer-events: none; }
145+.btn-primary { background: var(--ink); color: var(--accent); }
146+.btn-primary:hover { background: var(--accent-deep); }
147+.btn-accent { background: var(--accent); color: var(--on-accent); }
148+.btn-ghost { background: transparent; border-color: var(--line); }
149+.btn-ghost:hover { border-color: var(--ink); }
150+
151+/* ---- Cartes ---- */
152+.card {
153+ background: var(--surface); border: 1.5px solid var(--ink);
154+ border-radius: var(--r-card); box-shadow: var(--shadow-off-soft);
155+ overflow: hidden;
156+}
157+.card-hover { transition: transform 0.15s, box-shadow 0.15s; }
158+.card-hover:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-off); }
159+
160+/* ---- Chips / badges ---- */
161+.chip {
162+ display: inline-flex; align-items: center; gap: 6px;
163+ padding: 4px 11px; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
164+ text-transform: uppercase; letter-spacing: 0.06em;
165+ border: 1.5px solid var(--ink); border-radius: var(--r-pill);
166+ background: var(--surface); color: var(--ink);
167+}
168+.chip-accent { background: var(--accent); color: var(--on-accent); }
169+.chip-soft { background: var(--accent-soft); border-color: var(--line); }
170+
171+/* ---- Champs ---- */
172+.input, .select, .textarea {
173+ width: 100%; min-height: var(--touch); padding: 10px 14px;
174+ font: inherit; color: var(--ink); background: var(--surface);
175+ border: 1.5px solid var(--ink); border-radius: var(--r-ctl);
176+}
177+.input:focus, .select:focus, .textarea:focus {
178+ outline: none; box-shadow: 3px 3px 0 var(--accent); border-color: var(--ink);
179+}
180+.input::placeholder { color: var(--ink-3); }
181+
182+/* ---- Badge « Un service Groupe KA » (header, cliquable → hub) ---- */
183+.gk-badge {
184+ display: inline-flex; align-items: center; gap: 7px;
185+ min-height: 30px; padding: 3px 10px 4px;
186+ font-family: var(--font-mono); font-size: 10px; font-weight: 700;
187+ letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
188+ border: 1.5px solid var(--ink); border-radius: var(--r-pill);
189+ background: var(--surface); color: var(--ink-2); white-space: nowrap;
190+}
191+.gk-badge b {
192+ font-family: var(--font-display); font-size: 12px; letter-spacing: -0.02em;
193+ text-transform: none; color: var(--ink);
194+}
195+.gk-badge b .ka {
196+ display: inline-block; background: var(--ink); color: var(--accent);
197+ border-radius: 5px; padding: 0 5px 1px; margin-left: 3px; transform: rotate(-2deg);
198+}
199+.gk-badge:hover .ka { transform: rotate(0); }
200+.gk-badge--dark { background: transparent; border-color: rgba(245,243,238,0.4); color: rgba(245,243,238,0.75); }
201+.gk-badge--dark b { color: var(--paper); }
202+
203+/* ---- Footer commun (fond encre — voir react/KaFooter.tsx) ---- */
204+.ka-footer { margin-top: var(--sp-8); background: var(--ink); padding: 44px 0; font-size: 13px; color: rgba(245,243,238,0.75); }
205+.ka-footer a { text-decoration: none; }
206+.ka-footer .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.04em; color: var(--paper); text-decoration: none; }
207+.ka-footer .wordmark .ka { color: var(--accent); }
208+.ka-footer .desc { max-width: 640px; margin-top: var(--sp-4); }
209+.ka-footer .notice { max-width: 640px; margin-top: var(--sp-4); border-left: 2px solid var(--accent); padding-left: var(--sp-4); }
210+.ka-footer .notice b { color: var(--paper); }
211+.ka-footer .sites { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 26px 0 0; padding: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
212+.ka-footer .sites a { color: rgba(245,243,238,0.65); }
213+.ka-footer .sites a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
214+.ka-footer .contacts { display: grid; gap: 14px 32px; border-top: 1px solid rgba(245,243,238,0.15); margin-top: 30px; padding-top: 26px; }
215+@media (min-width: 768px) { .ka-footer .contacts { grid-template-columns: repeat(3, 1fr); } }
216+.ka-footer .contacts a { font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: rgba(245,243,238,0.85); }
217+.ka-footer .contacts a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
218+.ka-footer .contacts span { display: block; margin-top: 3px; font-size: 11px; color: rgba(245,243,238,0.5); }
219+.ka-footer .legal { margin-top: 30px; font-family: var(--font-mono); font-size: 11px; color: rgba(245,243,238,0.45); }
220+.ka-footer .legal a { color: inherit; }
221+.ka-footer .legal a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
222+
223+/* ---- Tableaux → cartes empilées sous 768 px ---- */
224+.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
225+@media (max-width: 767px) {
226+ .tbl-stack thead { display: none; }
227+ .tbl-stack tr { display: block; border: 1.5px solid var(--ink); border-radius: var(--r-card); margin-bottom: var(--sp-3); background: var(--surface); }
228+ .tbl-stack td { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 8px 12px; border: 0; }
229+ .tbl-stack td::before { content: attr(data-label); font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
230+}
231+
232+/* ---- Utilitaires responsive ---- */
233+.only-mobile { display: initial; } .only-desktop { display: none; }
234+@media (min-width: 768px) { .only-mobile { display: none; } .only-desktop { display: initial; } }
235+ (ka/tokens.css — design system commun Groupe KA,
236+ importé EN PREMIER) et {"org":{"name":"Groupe KA","legalName":"Groupe KA — Simon-Pierre Boucher","tagline":"Holding québécois d'agrégateurs de produits et services entièrement automatisés.","disclaimer":"Groupe KA est un agrégateur de contenu : nous ne vendons rien, ne louons rien et ne sommes partie à aucune transaction.","copyrightHolder":"Groupe KA — Simon-Pierre Boucher"},"hub":{"url":"https://www.groupe-ka.com","loginPath":"/connexion","signupNote":"La création de compte KA ID se fait sur le hub groupe-ka.com ; chaque site délègue sa connexion via /api/auth/ka/login."},"contacts":[{"email":"contact@groupe-ka.com","role":"Projets, partenariats & données"},{"email":"info@groupe-ka.com","role":"Médias & questions générales"},{"email":"admin@groupe-ka.com","role":"Légal, vie privée & Loi 25"}],"legal":[{"label":"Conditions d'utilisation","href":"https://www.groupe-ka.com/conditions"},{"label":"Politique de confidentialité","href":"https://www.groupe-ka.com/confidentialite"},{"label":"Protection des renseignements personnels (Loi 25)","href":"https://www.groupe-ka.com/loi-25"},{"label":"Transparence des robots d'indexation","href":"https://www.groupe-ka.com/bots"}],"sites":[{"id":"groupe-ka","wordmark":"Groupe KA","domain":"www.groupe-ka.com","accent":"#d9f26b","accentSoft":"#f0f9d2","accentDeep":"#123f2e","onAccent":"#141814","tagline":"Le portail de l'écosystème ·Ka"},{"id":"trouve-ka","wordmark":"Trouve·Ka","domain":"www.trouve-ka.com","accent":"#1c7ed6","accentSoft":"#e7f2fd","accentDeep":"#14508f","onAccent":"#ffffff","tagline":"Le moteur de recherche du web québécois"},{"id":"lou-ka","wordmark":"Lou·Ka","domain":"www.lou-ka.com","accent":"#ff6a00","accentSoft":"#fff1e6","accentDeep":"#cc5500","onAccent":"#ffffff","tagline":"Tous les logements à louer"},{"id":"immo-ka","wordmark":"Immo·Ka","domain":"www.immo-ka.com","accent":"#e23744","accentSoft":"#fbe0e2","accentDeep":"#a8232e","onAccent":"#ffffff","tagline":"Toutes les propriétés à vendre"},{"id":"vrai-prix","wordmark":"Vrai-Prix","domain":"www.vrai-prix.com","accent":"#ff5148","accentSoft":"#ffe3e0","accentDeep":"#9e2a25","onAccent":"#ffffff","tagline":"La valeur réelle de chaque propriété"},{"id":"auto-ka","wordmark":"Auto·Ka","domain":"www.auto-ka.com","accent":"#ff5a2a","accentSoft":"#ffe8de","accentDeep":"#cc3f16","onAccent":"#ffffff","tagline":"Les voitures usagées du Québec"},{"id":"fabri-ka","wordmark":"Fabri·Ka","domain":"www.fabri-ka.com","accent":"#c4532e","accentSoft":"#f7e3da","accentDeep":"#a94525","onAccent":"#ffffff","tagline":"Les produits fabriqués au Québec"},{"id":"food-ka","wordmark":"Food·Ka","domain":"www.food-ka.com","accent":"#1f9d55","accentSoft":"#e2f5ea","accentDeep":"#157a40","onAccent":"#ffffff","tagline":"Les prix d'épicerie, suivis à la source"},{"id":"resto-ka","wordmark":"Resto·Ka","domain":"www.resto-ka.com","accent":"#f08c00","accentSoft":"#fdeed7","accentDeep":"#b96a00","onAccent":"#141814","tagline":"Chaque resto, chaque plat, chaque prix"},{"id":"sorti-ka","wordmark":"Sorti·Ka","domain":"www.sorti-ka.com","accent":"#d6336c","accentSoft":"#fbe0eb","accentDeep":"#a12551","onAccent":"#ffffff","tagline":"Toutes les sorties, dans les 17 régions"},{"id":"crea-ka","wordmark":"Créa·Ka","domain":"www.crea-ka.com","accent":"#7048e8","accentSoft":"#ece5fc","accentDeep":"#5433b8","onAccent":"#ffffff","tagline":"Les créateurs d'ici, tous leurs liens"},{"id":"api-ka","wordmark":"API·Ka","domain":"www.api-ka.com","accent":"#3b5bdb","accentSoft":"#e4eafb","accentDeep":"#2b44a8","onAccent":"#ffffff","tagline":"La donnée de l'écosystème, par API"}],"extraFooterLinks":[{"label":"ValoPlex","href":"https://www.valoplex.com"},{"label":"Ka2","href":"https://www.ka2.bot"},{"label":"Ka4","href":"https://www.ka4.bot"},{"label":"Ka6","href":"https://www.ka6.bot"}]} (ka/ecosystem.json — contacts,
237+ sites, mentions légales du groupe : footer commun + page /contact).
238+ Système « éditorial sharp » du Groupe KA (papier grainé #f5f3ee,
239+ encre #141814, bordures encre + ombres décalées dures, Space Grotesk
240+ / Inter / JetBrains Mono) — accent attribué à Créa-Ka : VIOLET
241+ (--accent:#7048e8). Patrons mobiles calqués sur Lou-Ka (tab bar
242+ 4 onglets, filtres défilants, anti-zoom iOS).
243+ Routes : / · /createur/{id} · /stats · /retrait · /compte · /contact
12 --> 244 -->
13 <!DOCTYPE html> 245 <!DOCTYPE html>
14 <html lang="fr"> 246 <html lang="fr">
15 <head> 247 <head>
16 <meta charset="utf-8"> 248 <meta charset="utf-8">
17 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> 249 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
18−<title>Créa-Ka — Tous les créateurs québécois. Tous leurs liens.</title> 250+<title>Créa-Ka — Un service Groupe KA</title>
19 <meta name="description" content="Annuaire public des créateurs de contenu et influenceurs québécois : tous leurs comptes (Instagram, TikTok, YouTube, Twitch…) regroupés, cherchables par niche, région, langue et taille d'audience."> 251 <meta name="description" content="Annuaire public des créateurs de contenu et influenceurs québécois : tous leurs comptes (Instagram, TikTok, YouTube, Twitch…) regroupés, cherchables par niche, région, langue et taille d'audience.">
20 <meta name="theme-color" content="#141814"> 252 <meta name="theme-color" content="#141814">
21 <link rel="preconnect" href="https://fonts.googleapis.com"> 253 <link rel="preconnect" href="https://fonts.googleapis.com">
22 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 254 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
23 <link rel="preconnect" href="https://unavatar.io"> 255 <link rel="preconnect" href="https://unavatar.io">
24 <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@500;700&display=swap" rel="stylesheet"> 256 <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@500;700&display=swap" rel="stylesheet">
25−<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='10' fill='%23141814'/%3E%3Ccircle cx='32' cy='23' r='9' fill='%23c9a3ff'/%3E%3Cpath d='M14 52c3-10 9-15 18-15s15 5 18 15' stroke='%23c9a3ff' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"> 257+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='10' fill='%23141814'/%3E%3Ccircle cx='32' cy='23' r='9' fill='%237048e8'/%3E%3Cpath d='M14 52c3-10 9-15 18-15s15 5 18 15' stroke='%237048e8' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E">
26 <style> 258 <style>
27−/* système « éditorial sharp » Groupe KA — accent Créa-Ka : violet électrique. 259+/* ka/tokens.css — design system commun Groupe KA, importé EN PREMIER
28− Convention du groupe : les NOMS de variables (--green/--lime) sont partagés 260+ (injecté au build par scripts/build_frontend.py) */
29− entre les apps, seules les VALEURS changent. */ 261+/* -----------------------------------------------------------------------------
262+ Auteur : Simon-Pierre Boucher — contact@spboucher.ai
263+ Fichier : ka-ui/tokens.css — SOURCE CANONIQUE (repo ka-ui sur spbgit)
264+ Desc. : Design system commun GROUPE KA « éditorial sharp » — tokens + socle
265+ de composants partagés par les 12 plateformes. Chaque site importe ce
266+ fichier PUIS surcharge uniquement son accent (voir accents.css).
267+
268+ · Typo : display Space Grotesk / texte Inter / micro-étiquettes JetBrains Mono
269+ · Palette: papier #f5f3ee · encre #141814 · vert profond #1c5c41 + ACCENT du site
270+ · Signature : bordures encre 1,5–2 px + ombres décalées dures, grain de film,
271+ surlignés d'accent inclinés (néo-brutalisme raffiné)
272+ · Breakpoints communs : 360 / 768 / 1024 / 1440 px (mobile-first)
273+ · Zones tactiles ≥ 44×44 px, safe-areas iOS, typographie fluide (clamp)
274+----------------------------------------------------------------------------- */
275+
276+:root {
277+ /* ---- Palette fixe Groupe KA (identique sur les 12 sites) ---- */
278+ --paper: #f5f3ee;
279+ --surface: #ffffff;
280+ --surface-2: #faf9f5;
281+ --ink: #141814;
282+ --ink-2: #4d5551;
283+ --ink-3: #8b928c;
284+ --line: rgba(20, 24, 20, 0.14);
285+ --line-strong: rgba(20, 24, 20, 0.85);
286+ --green: #1c5c41;
287+ --green-deep: #123f2e;
288+ --amber: #e8a33d;
289+ --amber-soft: #fdf3e2;
290+ --danger: #b3423a;
291+ --danger-soft: #fbe9e7;
292+
293+ /* ---- ACCENT du site — SEULES variables surchargées par marque ---- */
294+ --accent: #d9f26b; /* défaut : lime Groupe KA */
295+ --accent-soft: #f0f9d2;
296+ --accent-deep: #123f2e;
297+ --on-accent: var(--ink); /* couleur du texte posé SUR l'accent */
298+
299+ /* alias rétro-compatibles (les satellites historiques utilisent --lime) */
300+ --lime: var(--accent);
301+ --lime-soft: var(--accent-soft);
302+
303+ /* ---- Géométrie sharp ---- */
304+ --r-card: 10px;
305+ --r-ctl: 6px;
306+ --r-pill: 999px;
307+
308+ /* ---- Ombres décalées — la signature du groupe ---- */
309+ --shadow-flat: 0 1px 2px rgba(20, 24, 20, 0.05);
310+ --shadow-off: 6px 6px 0 var(--ink);
311+ --shadow-off-soft: 8px 8px 0 rgba(20, 24, 20, 0.08);
312+ --shadow-off-mid: 4px 4px 0 rgba(20, 24, 20, 0.18);
313+
314+ /* ---- Typographie ---- */
315+ --font-display: "Space Grotesk", system-ui, sans-serif;
316+ --font-body: "Inter", system-ui, sans-serif;
317+ --font-mono: "JetBrains Mono", ui-monospace, monospace;
318+
319+ /* Échelle fluide (mobile-first, clamp) */
320+ --fs-h1: clamp(30px, 3.2vw + 18px, 54px);
321+ --fs-h2: clamp(23px, 1.8vw + 14px, 34px);
322+ --fs-h3: clamp(17px, 0.9vw + 12px, 22px);
323+ --fs-body: 15px;
324+ --fs-small: 13px;
325+
326+ /* Espacements */
327+ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
328+ --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
329+
330+ /* Cible tactile minimale */
331+ --touch: 44px;
332+}
333+
334+/* ---- Socle ---- */
335+* { box-sizing: border-box; }
336+html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
337+body {
338+ margin: 0;
339+ background: var(--paper);
340+ color: var(--ink);
341+ font-family: var(--font-body);
342+ font-size: var(--fs-body);
343+ line-height: 1.55;
344+ -webkit-font-smoothing: antialiased;
345+ padding-bottom: env(safe-area-inset-bottom);
346+ overflow-x: clip; /* jamais de débordement horizontal */
347+}
348+img, svg, video { max-width: 100%; height: auto; display: block; }
349+h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.03em; margin: 0 0 0.5em; }
350+h1 { font-size: var(--fs-h1); line-height: 1.06; }
351+h2 { font-size: var(--fs-h2); line-height: 1.15; }
352+h3 { font-size: var(--fs-h3); line-height: 1.25; }
353+a { color: inherit; }
354+::selection { background: var(--accent); color: var(--on-accent); }
355+:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
356+
357+/* Grain de film pleine page — ⚠️ jamais de z-index sur body > * (position:
358+ relative seulement), sinon les utilitaires z-* sont écrasés. */
359+body::before {
360+ content: "";
361+ position: fixed; inset: 0; pointer-events: none; opacity: 0.35; z-index: 9999;
362+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
363+}
364+body > * { position: relative; }
365+
366+/* ---- Conteneur commun ---- */
367+.container { max-width: 1152px; margin: 0 auto; padding: 0 var(--sp-4); }
368+@media (min-width: 768px) { .container { padding: 0 var(--sp-5); } }
369+
370+/* ---- Micro-typographie signature ---- */
371+.kicker {
372+ display: inline-flex; align-items: center; gap: 10px;
373+ font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
374+ text-transform: uppercase; letter-spacing: 0.12em; color: var(--green);
375+}
376+.kicker::before { content: ""; width: 22px; height: 2px; background: var(--green); }
377+.klabel {
378+ font-family: var(--font-mono); font-size: 10px; font-weight: 700;
379+ text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);
380+}
381+.hl {
382+ display: inline-block; background: var(--accent); color: var(--on-accent);
383+ border-radius: 8px; padding: 0 10px 2px; transform: rotate(-1deg);
384+}
385+.outline-txt { color: transparent; -webkit-text-stroke: 2px var(--ink); }
386+
387+/* ---- Boutons (cible ≥ 44 px) ---- */
388+.btn {
389+ display: inline-flex; align-items: center; justify-content: center; gap: 8px;
390+ min-height: var(--touch); padding: 10px 18px;
391+ font-family: var(--font-display); font-weight: 700; font-size: 14px;
392+ border: 1.5px solid var(--ink); border-radius: var(--r-ctl);
393+ background: var(--surface); color: var(--ink);
394+ cursor: pointer; text-decoration: none;
395+ transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
396+}
397+.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-off-mid); }
398+.btn:active { transform: translate(0, 0); box-shadow: none; }
399+.btn:disabled { opacity: 0.45; pointer-events: none; }
400+.btn-primary { background: var(--ink); color: var(--accent); }
401+.btn-primary:hover { background: var(--accent-deep); }
402+.btn-accent { background: var(--accent); color: var(--on-accent); }
403+.btn-ghost { background: transparent; border-color: var(--line); }
404+.btn-ghost:hover { border-color: var(--ink); }
405+
406+/* ---- Cartes ---- */
407+.card {
408+ background: var(--surface); border: 1.5px solid var(--ink);
409+ border-radius: var(--r-card); box-shadow: var(--shadow-off-soft);
410+ overflow: hidden;
411+}
412+.card-hover { transition: transform 0.15s, box-shadow 0.15s; }
413+.card-hover:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-off); }
414+
415+/* ---- Chips / badges ---- */
416+.chip {
417+ display: inline-flex; align-items: center; gap: 6px;
418+ padding: 4px 11px; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
419+ text-transform: uppercase; letter-spacing: 0.06em;
420+ border: 1.5px solid var(--ink); border-radius: var(--r-pill);
421+ background: var(--surface); color: var(--ink);
422+}
423+.chip-accent { background: var(--accent); color: var(--on-accent); }
424+.chip-soft { background: var(--accent-soft); border-color: var(--line); }
425+
426+/* ---- Champs ---- */
427+.input, .select, .textarea {
428+ width: 100%; min-height: var(--touch); padding: 10px 14px;
429+ font: inherit; color: var(--ink); background: var(--surface);
430+ border: 1.5px solid var(--ink); border-radius: var(--r-ctl);
431+}
432+.input:focus, .select:focus, .textarea:focus {
433+ outline: none; box-shadow: 3px 3px 0 var(--accent); border-color: var(--ink);
434+}
435+.input::placeholder { color: var(--ink-3); }
436+
437+/* ---- Badge « Un service Groupe KA » (header, cliquable → hub) ---- */
438+.gk-badge {
439+ display: inline-flex; align-items: center; gap: 7px;
440+ min-height: 30px; padding: 3px 10px 4px;
441+ font-family: var(--font-mono); font-size: 10px; font-weight: 700;
442+ letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
443+ border: 1.5px solid var(--ink); border-radius: var(--r-pill);
444+ background: var(--surface); color: var(--ink-2); white-space: nowrap;
445+}
446+.gk-badge b {
447+ font-family: var(--font-display); font-size: 12px; letter-spacing: -0.02em;
448+ text-transform: none; color: var(--ink);
449+}
450+.gk-badge b .ka {
451+ display: inline-block; background: var(--ink); color: var(--accent);
452+ border-radius: 5px; padding: 0 5px 1px; margin-left: 3px; transform: rotate(-2deg);
453+}
454+.gk-badge:hover .ka { transform: rotate(0); }
455+.gk-badge--dark { background: transparent; border-color: rgba(245,243,238,0.4); color: rgba(245,243,238,0.75); }
456+.gk-badge--dark b { color: var(--paper); }
457+
458+/* ---- Footer commun (fond encre — voir react/KaFooter.tsx) ---- */
459+.ka-footer { margin-top: var(--sp-8); background: var(--ink); padding: 44px 0; font-size: 13px; color: rgba(245,243,238,0.75); }
460+.ka-footer a { text-decoration: none; }
461+.ka-footer .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.04em; color: var(--paper); text-decoration: none; }
462+.ka-footer .wordmark .ka { color: var(--accent); }
463+.ka-footer .desc { max-width: 640px; margin-top: var(--sp-4); }
464+.ka-footer .notice { max-width: 640px; margin-top: var(--sp-4); border-left: 2px solid var(--accent); padding-left: var(--sp-4); }
465+.ka-footer .notice b { color: var(--paper); }
466+.ka-footer .sites { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 26px 0 0; padding: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
467+.ka-footer .sites a { color: rgba(245,243,238,0.65); }
468+.ka-footer .sites a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
469+.ka-footer .contacts { display: grid; gap: 14px 32px; border-top: 1px solid rgba(245,243,238,0.15); margin-top: 30px; padding-top: 26px; }
470+@media (min-width: 768px) { .ka-footer .contacts { grid-template-columns: repeat(3, 1fr); } }
471+.ka-footer .contacts a { font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: rgba(245,243,238,0.85); }
472+.ka-footer .contacts a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
473+.ka-footer .contacts span { display: block; margin-top: 3px; font-size: 11px; color: rgba(245,243,238,0.5); }
474+.ka-footer .legal { margin-top: 30px; font-family: var(--font-mono); font-size: 11px; color: rgba(245,243,238,0.45); }
475+.ka-footer .legal a { color: inherit; }
476+.ka-footer .legal a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
477+
478+/* ---- Tableaux → cartes empilées sous 768 px ---- */
479+.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
480+@media (max-width: 767px) {
481+ .tbl-stack thead { display: none; }
482+ .tbl-stack tr { display: block; border: 1.5px solid var(--ink); border-radius: var(--r-card); margin-bottom: var(--sp-3); background: var(--surface); }
483+ .tbl-stack td { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 8px 12px; border: 0; }
484+ .tbl-stack td::before { content: attr(data-label); font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
485+}
486+
487+/* ---- Utilitaires responsive ---- */
488+.only-mobile { display: initial; } .only-desktop { display: none; }
489+@media (min-width: 768px) { .only-mobile { display: none; } .only-desktop { display: initial; } }
490+
491+</style>
492+<style>
493+/* Surcharges Créa-Ka par-dessus ka/tokens.css. Convention du groupe : les
494+ NOMS de variables sont partagés (--accent/--lime), seules les VALEURS
495+ changent — accent attribué à Créa-Ka : VIOLET. */
30 :root{ 496 :root{
31− --paper:#f5f3ee; --surface:#fff; --surface-2:#faf9f5; 497+ --accent:#7048e8; --accent-soft:#ece5fc; --accent-deep:#5433b8; --on-accent:#ffffff;
32− --ink:#141814; --ink-2:#4d5551; --ink-3:#8b928c; 498+ /* alias rétro-compatibles (le CSS historique du site utilise --lime) */
33− --line:rgba(20,24,20,.14); --line-strong:rgba(20,24,20,.85); 499+ --lime:var(--accent); --lime-soft:var(--accent-soft);
34− --green:#5b34a8; /* violet profond (primaire) */ 500+ --green:var(--accent-deep); /* primaire du site = violet profond */
35 --green-deep:#3d2178; 501 --green-deep:#3d2178;
36− --lime:#c9a3ff; /* violet électrique (accent) */ 502+}
37− --lime-soft:#efe6ff; 503+/* le layout du site est calibré sur des titres sans marge basse */
38− --amber:#e8a33d; --amber-soft:#fdf3e2; 504+h1,h2,h3,h4{margin:0}
39− --danger:#b3423a; 505+a{text-decoration:none} button{font-family:inherit;cursor:pointer}
40− --r-card:10px; --r-ctl:6px; --r-pill:999px;
41− --shadow-flat:0 1px 2px rgba(20,24,20,.05);
42− --shadow-off:6px 6px 0 var(--ink);
43− --shadow-off-soft:8px 8px 0 rgba(20,24,20,.08);
44− --font-display:"Space Grotesk",system-ui,sans-serif;
45− --font-body:"Inter",system-ui,sans-serif;
46− --font-mono:"JetBrains Mono",ui-monospace,monospace;
47−}
48−*{box-sizing:border-box}
49−html{scroll-behavior:smooth}
50−body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);
51− font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
52− padding-bottom:env(safe-area-inset-bottom)}
53−/* grain de film pleine page (signature du groupe) — aucun z-index sur body>* */
54−body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;z-index:9999;
55− background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
56−body>*{position:relative}
57−h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.03em;margin:0}
58−a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} img{display:block}
59−::selection{background:var(--lime);color:var(--ink)}
60−:focus-visible{outline:2px solid var(--green);outline-offset:2px}
61 .icn{width:1em;height:1em;display:block;fill:currentColor} 506 .icn{width:1em;height:1em;display:block;fill:currentColor}
62 .container{max-width:1240px;margin:0 auto;padding:0 24px} 507 .container{max-width:1240px;margin:0 auto;padding:0 24px}
63 @media(max-width:640px){.container{padding:0 16px}} 508 @media(max-width:640px){.container{padding:0 16px}}
64−.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);
65− font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--green)}
66−.kicker::before{content:"";width:22px;height:2px;background:var(--green)}
67−.klabel{font-family:var(--font-mono);font-size:10px;font-weight:700;
68− text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
69−.hl{display:inline-block;background:var(--lime);border-radius:8px;padding:0 10px 2px;transform:rotate(-1deg)}
70−.outline-txt{color:transparent;-webkit-text-stroke:2px var(--ink)}
71 509
72 /* ---------- cartes & boutons (langage du groupe) ---------- */ 510 /* ---------- cartes & boutons (langage du groupe) ---------- */
73 .gk-card{background:var(--surface);border:1.5px solid var(--ink); 511 .gk-card{background:var(--surface);border:1.5px solid var(--ink);
74 border-radius:var(--r-card);box-shadow:var(--shadow-off-soft)} 512 border-radius:var(--r-card);box-shadow:var(--shadow-off-soft)}
75 .gk-hover{transition:transform .18s ease,box-shadow .18s ease} 513 .gk-hover{transition:transform .18s ease,box-shadow .18s ease}
76 .gk-hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-off)} 514 .gk-hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-off)}
77−.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
78− padding:10px 20px;border:1.5px solid var(--ink);border-radius:var(--r-ctl);
79− font-family:var(--font-display);font-size:14px;font-weight:700;cursor:pointer;
80− transition:background .15s ease,transform .1s ease,box-shadow .1s ease}
81 .btn:active{transform:translate(2px,2px);box-shadow:none!important} 515 .btn:active{transform:translate(2px,2px);box-shadow:none!important}
82−.btn-primary{background:var(--ink);color:var(--lime);box-shadow:4px 4px 0 rgba(20,24,20,.25)} 516+.btn-primary{box-shadow:4px 4px 0 rgba(20,24,20,.25)}
83−.btn-primary:hover{background:var(--green-deep)}
84−.btn-ghost{background:transparent;color:var(--ink)}
85−.btn-ghost:hover{background:var(--lime)}
86 517
87 /* ===== header ===== */ 518 /* ===== header ===== */
88 .header{position:sticky;top:0;z-index:50;background:rgba(245,243,238,.9); 519 .header{position:sticky;top:0;z-index:50;background:rgba(245,243,238,.9);
@@ -91,26 +522,35 @@ a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer}
91 .brand{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.03em; 522 .brand{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.03em;
92 display:flex;align-items:center;line-height:1;color:var(--ink)} 523 display:flex;align-items:center;line-height:1;color:var(--ink)}
93 .brand svg{margin-right:11px;flex:none} 524 .brand svg{margin-right:11px;flex:none}
94−.brand .ka{background:var(--lime);border-radius:6px;padding:0 6px 1px;margin-left:2px;transform:rotate(-1deg)} 525+.brand .ka{background:var(--accent);color:var(--on-accent);border-radius:6px;padding:0 6px 1px;margin-left:2px;transform:rotate(-1deg)}
95 .brand-tag{font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--ink-3); 526 .brand-tag{font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--ink-3);
96 line-height:1.5;text-transform:uppercase;letter-spacing:.08em} 527 line-height:1.5;text-transform:uppercase;letter-spacing:.08em}
97 @media(max-width:900px){.brand-tag{display:none}} 528 @media(max-width:900px){.brand-tag{display:none}}
98 .header-spacer{flex:1} 529 .header-spacer{flex:1}
99 .hbtn{border:1.5px solid var(--ink);background:var(--surface);color:var(--ink); 530 .hbtn{border:1.5px solid var(--ink);background:var(--surface);color:var(--ink);
100− border-radius:var(--r-ctl);padding:8px 16px;font-family:var(--font-display); 531+ border-radius:var(--r-ctl);padding:8px 16px;min-height:44px;font-family:var(--font-display);
101 font-size:13px;font-weight:700;transition:.15s;display:inline-flex;align-items:center; 532 font-size:13px;font-weight:700;transition:.15s;display:inline-flex;align-items:center;
102 gap:8px;white-space:nowrap;box-shadow:3px 3px 0 rgba(20,24,20,.12)} 533 gap:8px;white-space:nowrap;box-shadow:3px 3px 0 rgba(20,24,20,.12)}
103−.hbtn:hover{background:var(--lime)} 534+.hbtn:hover{background:var(--accent);color:var(--on-accent)}
104 .hbtn:active{transform:translate(2px,2px);box-shadow:none} 535 .hbtn:active{transform:translate(2px,2px);box-shadow:none}
105−.hbtn.primary{background:var(--ink);color:var(--lime)} 536+.hbtn.primary{background:var(--ink);color:var(--accent)}
106−.hbtn.primary:hover{background:var(--green-deep)} 537+.hbtn.primary:hover{background:var(--accent-deep);color:var(--on-accent)}
107 @media(max-width:760px){.header .hbtn:not(.acct){display:none}} 538 @media(max-width:760px){.header .hbtn:not(.acct){display:none}}
108 /* bouton / jeton de compte KA ID — toujours visible, même sur mobile */ 539 /* bouton / jeton de compte KA ID — toujours visible, même sur mobile */
109 .hbtn.acct{padding:7px 14px} 540 .hbtn.acct{padding:7px 14px}
110 .hbtn.acct img{width:22px;height:22px;border-radius:50%;object-fit:cover; 541 .hbtn.acct img{width:22px;height:22px;border-radius:50%;object-fit:cover;
111 border:1.5px solid var(--ink);margin-left:-4px} 542 border:1.5px solid var(--ink);margin-left:-4px}
112−.hbtn.acct .ka-badge{background:var(--lime);border-radius:4px;padding:0 5px; 543+.hbtn.acct .ka-badge{background:var(--accent);color:var(--on-accent);border-radius:4px;padding:0 5px;
113 font-family:var(--font-mono);font-size:10px;font-weight:700} 544 font-family:var(--font-mono);font-size:10px;font-weight:700}
545+.hbtn:hover .ka-badge{background:var(--on-accent);color:var(--accent)}
546+/* badge « Un service Groupe KA » (ka/GroupeKaBadge — styles dans tokens.css) */
547+.header .gk-badge{flex:none}
548+.hbtn .acct-short{display:none}
549+@media(max-width:560px){
550+ .header-inner{gap:10px}
551+ .header .gk-badge .pfx{display:none}
552+ .hbtn .acct-long{display:none}.hbtn .acct-short{display:inline}}
553+@media(max-width:400px){.brand svg{width:26px;height:26px;margin-right:8px}.brand{font-size:20px}}
114 554
115 /* ===== page compte (carte de membre Groupe KA) ===== */ 555 /* ===== page compte (carte de membre Groupe KA) ===== */
116 .compte-page{max-width:640px;margin:0 auto;padding:44px 0 70px} 556 .compte-page{max-width:640px;margin:0 auto;padding:44px 0 70px}
@@ -118,18 +558,18 @@ a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer}
118 padding:28px;color:var(--paper);box-shadow:var(--shadow-off);margin-top:24px; 558 padding:28px;color:var(--paper);box-shadow:var(--shadow-off);margin-top:24px;
119 position:relative;overflow:hidden} 559 position:relative;overflow:hidden}
120 .membercard::after{content:"";position:absolute;right:-40px;top:-40px;width:160px; 560 .membercard::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;
121− height:160px;border-radius:50%;background:rgba(201,163,255,.14)} 561+ height:160px;border-radius:50%;background:rgba(112,72,232,.18)}
122 .mc-brand{font-family:var(--font-mono);font-size:10px;font-weight:700; 562 .mc-brand{font-family:var(--font-mono);font-size:10px;font-weight:700;
123− text-transform:uppercase;letter-spacing:.14em;color:var(--lime)} 563+ text-transform:uppercase;letter-spacing:.14em;color:var(--accent-soft)}
124 .mc-row{display:flex;gap:18px;align-items:center;margin-top:18px} 564 .mc-row{display:flex;gap:18px;align-items:center;margin-top:18px}
125−.mc-avatar{width:72px;height:72px;border-radius:14px;border:2px solid var(--lime); 565+.mc-avatar{width:72px;height:72px;border-radius:14px;border:2px solid var(--accent);
126 background:var(--green-deep);overflow:hidden;flex:none;display:flex; 566 background:var(--green-deep);overflow:hidden;flex:none;display:flex;
127 align-items:center;justify-content:center;font-family:var(--font-display); 567 align-items:center;justify-content:center;font-family:var(--font-display);
128− font-weight:700;font-size:26px;color:var(--lime)} 568+ font-weight:700;font-size:26px;color:var(--accent-soft)}
129 .mc-avatar img{width:100%;height:100%;object-fit:cover} 569 .mc-avatar img{width:100%;height:100%;object-fit:cover}
130 .mc-name{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--paper)} 570 .mc-name{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--paper)}
131−.mc-kaid{font-family:var(--font-mono);font-size:12px;color:var(--lime);margin-top:2px;letter-spacing:.04em} 571+.mc-kaid{font-family:var(--font-mono);font-size:12px;color:var(--accent-soft);margin-top:2px;letter-spacing:.04em}
132−.mc-role{display:inline-flex;background:var(--lime);color:var(--ink);border-radius:5px; 572+.mc-role{display:inline-flex;background:var(--accent);color:var(--on-accent);border-radius:5px;
133 padding:2px 10px;font-family:var(--font-mono);font-size:10px;font-weight:700; 573 padding:2px 10px;font-family:var(--font-mono);font-size:10px;font-weight:700;
134 text-transform:uppercase;letter-spacing:.06em;margin-top:8px} 574 text-transform:uppercase;letter-spacing:.06em;margin-top:8px}
135 .mc-meta{margin-top:20px;display:grid;gap:6px;font-size:12.5px;color:rgba(245,243,238,.75)} 575 .mc-meta{margin-top:20px;display:grid;gap:6px;font-size:12.5px;color:rgba(245,243,238,.75)}
@@ -153,8 +593,9 @@ a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer}
153 .adv{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card); 593 .adv{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card);
154 padding:16px;box-shadow:var(--shadow-off-soft)} 594 padding:16px;box-shadow:var(--shadow-off-soft)}
155 .adv .ico{width:36px;height:36px;border-radius:8px;border:1.5px solid var(--ink); 595 .adv .ico{width:36px;height:36px;border-radius:8px;border:1.5px solid var(--ink);
156− background:var(--lime);color:var(--ink);display:flex;align-items:center; 596+ background:var(--accent);color:var(--on-accent);display:flex;align-items:center;
157 justify-content:center;margin-bottom:10px;font-size:15px} 597 justify-content:center;margin-bottom:10px;font-size:15px}
598+.adv:nth-child(2n) .ico{color:var(--ink)}
158 .adv:nth-child(2n) .ico{background:var(--amber-soft)} 599 .adv:nth-child(2n) .ico{background:var(--amber-soft)}
159 .adv h3{font-size:14px;margin-bottom:3px} 600 .adv h3{font-size:14px;margin-bottom:3px}
160 .adv p{margin:0;font-size:12px;color:var(--ink-3);line-height:1.45} 601 .adv p{margin:0;font-size:12px;color:var(--ink-3);line-height:1.45}
@@ -167,7 +608,7 @@ a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer}
167 .search-input{flex:1 1 auto;display:flex;align-items:center;gap:10px;background:var(--surface); 608 .search-input{flex:1 1 auto;display:flex;align-items:center;gap:10px;background:var(--surface);
168 border:1.5px solid var(--ink);border-radius:var(--r-ctl);padding:10px 15px; 609 border:1.5px solid var(--ink);border-radius:var(--r-ctl);padding:10px 15px;
169 transition:.15s;min-width:0;box-shadow:3px 3px 0 rgba(20,24,20,.08)} 610 transition:.15s;min-width:0;box-shadow:3px 3px 0 rgba(20,24,20,.08)}
170−.search-input:focus-within{box-shadow:3px 3px 0 rgba(91,52,168,.3)} 611+.search-input:focus-within{box-shadow:3px 3px 0 rgba(112,72,232,.35)}
171 .search-input input{border:0;background:none;outline:none;font:inherit;flex:1;color:var(--ink);min-width:0} 612 .search-input input{border:0;background:none;outline:none;font:inherit;flex:1;color:var(--ink);min-width:0}
172 .search-input svg{flex:none;color:var(--ink-3)} 613 .search-input svg{flex:none;color:var(--ink-3)}
173 .filters{display:flex;gap:8px;flex-wrap:wrap} 614 .filters{display:flex;gap:8px;flex-wrap:wrap}
@@ -177,7 +618,7 @@ select.f{appearance:none;-webkit-appearance:none;border:1.5px solid var(--ink);
177 font-size:13px;font-weight:700;color:var(--ink-2);max-width:170px; 618 font-size:13px;font-weight:700;color:var(--ink-2);max-width:170px;
178 box-shadow:3px 3px 0 rgba(20,24,20,.08)} 619 box-shadow:3px 3px 0 rgba(20,24,20,.08)}
179 select.f:focus{outline:2px solid var(--green);outline-offset:1px} 620 select.f:focus{outline:2px solid var(--green);outline-offset:1px}
180−select.f.active{background-color:var(--lime);color:var(--ink)} 621+select.f.active{background-color:var(--accent-soft);color:var(--ink);border-color:var(--accent-deep)}
181 @media(max-width:760px){ 622 @media(max-width:760px){
182 .search-wrap{flex-wrap:wrap} 623 .search-wrap{flex-wrap:wrap}
183 .search-input{flex-basis:100%} 624 .search-input{flex-basis:100%}
@@ -200,18 +641,18 @@ select.f.active{background-color:var(--lime);color:var(--ink)}
200 repeating-linear-gradient(-45deg,var(--green-deep) 0 14px,#33195f 14px 28px); 641 repeating-linear-gradient(-45deg,var(--green-deep) 0 14px,#33195f 14px 28px);
201 display:flex;align-items:center;justify-content:center;overflow:hidden; 642 display:flex;align-items:center;justify-content:center;overflow:hidden;
202 border-bottom:1.5px solid var(--ink)} 643 border-bottom:1.5px solid var(--ink)}
203−.card-photo .init{color:var(--lime);font-family:var(--font-display);font-weight:700; 644+.card-photo .init{color:var(--accent-soft);font-family:var(--font-display);font-weight:700;
204 font-size:46px;letter-spacing:.02em} 645 font-size:46px;letter-spacing:.02em}
205 .card-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} 646 .card-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
206 .card-photo .tier{position:absolute;top:10px;left:10px;z-index:2} 647 .card-photo .tier{position:absolute;top:10px;left:10px;z-index:2}
207 .card-photo .nplat{position:absolute;top:10px;right:10px;z-index:2;background:var(--ink); 648 .card-photo .nplat{position:absolute;top:10px;right:10px;z-index:2;background:var(--ink);
208− color:var(--lime);border:1.5px solid var(--ink);border-radius:var(--r-ctl); 649+ color:var(--accent-soft);border:1.5px solid var(--ink);border-radius:var(--r-ctl);
209 padding:2px 8px;font-family:var(--font-mono);font-size:9.5px;font-weight:700; 650 padding:2px 8px;font-family:var(--font-mono);font-size:9.5px;font-weight:700;
210 text-transform:uppercase;letter-spacing:.05em} 651 text-transform:uppercase;letter-spacing:.05em}
211 .tier{display:inline-flex;padding:2px 9px;border:1.5px solid var(--ink); 652 .tier{display:inline-flex;padding:2px 9px;border:1.5px solid var(--ink);
212 border-radius:var(--r-ctl);font-family:var(--font-mono);font-size:9.5px; 653 border-radius:var(--r-ctl);font-family:var(--font-mono);font-size:9.5px;
213 font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--surface);color:var(--ink)} 654 font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--surface);color:var(--ink)}
214−.tier.mega{background:var(--lime)} 655+.tier.mega{background:var(--accent);color:var(--on-accent)}
215 .tier.macro{background:var(--amber-soft)} 656 .tier.macro{background:var(--amber-soft)}
216 .card-body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:9px;flex:1} 657 .card-body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:9px;flex:1}
217 .card-name{font-family:var(--font-display);font-size:16px;font-weight:700; 658 .card-name{font-family:var(--font-display);font-size:16px;font-weight:700;
@@ -221,7 +662,8 @@ select.f.active{background-color:var(--lime);color:var(--ink)}
221 text-transform:uppercase;letter-spacing:.05em;display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:-4px} 662 text-transform:uppercase;letter-spacing:.05em;display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:-4px}
222 .chips{display:flex;gap:6px;flex-wrap:wrap} 663 .chips{display:flex;gap:6px;flex-wrap:wrap}
223 .chip{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-ctl); 664 .chip{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-ctl);
224− padding:2px 10px;font-size:11px;font-weight:600;color:var(--ink-2);white-space:nowrap} 665+ padding:2px 10px;font-family:var(--font-body);font-size:11px;font-weight:600;color:var(--ink-2);
666+ white-space:nowrap;text-transform:none;letter-spacing:0}
225 .reach{font-size:12px;color:var(--ink-2)} 667 .reach{font-size:12px;color:var(--ink-2)}
226 .reach b{font-family:var(--font-display);color:var(--ink);font-size:15.5px;font-weight:700} 668 .reach b{font-family:var(--font-display);color:var(--ink);font-size:15.5px;font-weight:700}
227 .platrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:2px} 669 .platrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:2px}
@@ -248,22 +690,22 @@ select.f.active{background-color:var(--lime);color:var(--ink)}
248 @media(max-width:640px){.cpage-head{padding:22px 18px;gap:16px}} 690 @media(max-width:640px){.cpage-head{padding:22px 18px;gap:16px}}
249 .cavatar{width:104px;height:104px;border-radius:var(--r-card); 691 .cavatar{width:104px;height:104px;border-radius:var(--r-card);
250 background:repeating-linear-gradient(-45deg,var(--green-deep) 0 14px,#33195f 14px 28px); 692 background:repeating-linear-gradient(-45deg,var(--green-deep) 0 14px,#33195f 14px 28px);
251− color:var(--lime);flex:none;display:flex;align-items:center;justify-content:center; 693+ color:var(--accent-soft);flex:none;display:flex;align-items:center;justify-content:center;
252 font-family:var(--font-display);font-weight:700;font-size:36px;overflow:hidden; 694 font-family:var(--font-display);font-weight:700;font-size:36px;overflow:hidden;
253− position:relative;border:2px solid var(--lime)} 695+ position:relative;border:2px solid var(--accent)}
254 @media(max-width:640px){.cavatar{width:76px;height:76px;font-size:26px}} 696 @media(max-width:640px){.cavatar{width:76px;height:76px;font-size:26px}}
255 .cavatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} 697 .cavatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
256 .cpage-head h1{font-size:clamp(24px,4vw,40px);font-weight:700;color:var(--paper); 698 .cpage-head h1{font-size:clamp(24px,4vw,40px);font-weight:700;color:var(--paper);
257 line-height:1.1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;text-transform:uppercase} 699 line-height:1.1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;text-transform:uppercase}
258−.cpage-head h1 .vbadge{width:22px;height:22px;color:var(--lime)} 700+.cpage-head h1 .vbadge{width:22px;height:22px;color:var(--accent-soft)}
259 .cpage-head .meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px} 701 .cpage-head .meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
260 .mchip{background:rgba(245,243,238,.12);border:1px solid rgba(245,243,238,.3); 702 .mchip{background:rgba(245,243,238,.12);border:1px solid rgba(245,243,238,.3);
261 border-radius:var(--r-ctl);padding:3px 11px;font-family:var(--font-mono); 703 border-radius:var(--r-ctl);padding:3px 11px;font-family:var(--font-mono);
262 font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--paper)} 704 font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--paper)}
263−.mchip.o{background:var(--lime);border-color:var(--lime);color:var(--ink)} 705+.mchip.o{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
264 .cpage-reach{margin-left:auto;text-align:right} 706 .cpage-reach{margin-left:auto;text-align:right}
265 .cpage-reach b{display:block;font-family:var(--font-display); 707 .cpage-reach b{display:block;font-family:var(--font-display);
266− font-size:clamp(28px,3.6vw,40px);font-weight:700;color:var(--lime);letter-spacing:-.02em} 708+ font-size:clamp(28px,3.6vw,40px);font-weight:700;color:var(--accent-soft);letter-spacing:-.02em}
267 .cpage-reach span{font-family:var(--font-mono);font-size:10px;color:rgba(245,243,238,.6); 709 .cpage-reach span{font-family:var(--font-mono);font-size:10px;color:rgba(245,243,238,.6);
268 text-transform:uppercase;letter-spacing:.08em;font-weight:700} 710 text-transform:uppercase;letter-spacing:.08em;font-weight:700}
269 @media(max-width:760px){.cpage-reach{margin-left:0;text-align:left;flex-basis:100%}} 711 @media(max-width:760px){.cpage-reach{margin-left:0;text-align:left;flex-basis:100%}}
@@ -293,10 +735,10 @@ select.f.active{background-color:var(--lime);color:var(--ink)}
293 .conf.hi{background:var(--lime-soft);color:var(--green-deep)} 735 .conf.hi{background:var(--lime-soft);color:var(--green-deep)}
294 .conf.mid{background:var(--amber-soft);color:#8a5a12} 736 .conf.mid{background:var(--amber-soft);color:#8a5a12}
295 .linkinbio{display:inline-flex;align-items:center;gap:10px;margin-top:22px; 737 .linkinbio{display:inline-flex;align-items:center;gap:10px;margin-top:22px;
296− background:var(--lime);color:var(--ink);border:1.5px solid var(--ink); 738+ background:var(--accent);color:var(--on-accent);border:1.5px solid var(--ink);
297 border-radius:var(--r-ctl);padding:11px 20px;font-family:var(--font-display); 739 border-radius:var(--r-ctl);padding:11px 20px;font-family:var(--font-display);
298 font-weight:700;font-size:13.5px;transition:.15s;box-shadow:4px 4px 0 rgba(20,24,20,.25)} 740 font-weight:700;font-size:13.5px;transition:.15s;box-shadow:4px 4px 0 rgba(20,24,20,.25)}
299−.linkinbio:hover{background:var(--lime-soft)} 741+.linkinbio:hover{background:var(--accent-soft);color:var(--ink)}
300 .linkinbio:active{transform:translate(2px,2px);box-shadow:none} 742 .linkinbio:active{transform:translate(2px,2px);box-shadow:none}
301 .linkinbio svg{width:16px;height:16px;fill:currentColor} 743 .linkinbio svg{width:16px;height:16px;fill:currentColor}
302 .cpage-foot{margin-top:38px;font-size:12px;color:var(--ink-3); 744 .cpage-foot{margin-top:38px;font-size:12px;color:var(--ink-3);
@@ -313,7 +755,7 @@ select.f.active{background-color:var(--lime);color:var(--ink)}
313 .tile-k{font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-transform:uppercase; 755 .tile-k{font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-transform:uppercase;
314 letter-spacing:.1em;color:var(--ink-3);margin-top:7px} 756 letter-spacing:.1em;color:var(--ink-3);margin-top:7px}
315 .tile.hero-tile{background:var(--ink)} 757 .tile.hero-tile{background:var(--ink)}
316−.tile.hero-tile .tile-v{color:var(--lime)} 758+.tile.hero-tile .tile-v{color:var(--accent-soft)}
317 .tile.hero-tile .tile-k{color:rgba(245,243,238,.55)} 759 .tile.hero-tile .tile-k{color:rgba(245,243,238,.55)}
318 .viz-card{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card); 760 .viz-card{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card);
319 box-shadow:var(--shadow-off-soft);padding:24px 26px 18px;margin-bottom:22px} 761 box-shadow:var(--shadow-off-soft);padding:24px 26px 18px;margin-bottom:22px}
@@ -343,27 +785,47 @@ select.f.active{background-color:var(--lime);color:var(--ink)}
343 padding:11px 14px;font:inherit;background:var(--surface);color:var(--ink); 785 padding:11px 14px;font:inherit;background:var(--surface);color:var(--ink);
344 box-shadow:3px 3px 0 rgba(20,24,20,.08);transition:box-shadow .15s ease} 786 box-shadow:3px 3px 0 rgba(20,24,20,.08);transition:box-shadow .15s ease}
345 .field input:focus,.field textarea:focus{outline:2px solid var(--green);outline-offset:1px; 787 .field input:focus,.field textarea:focus{outline:2px solid var(--green);outline-offset:1px;
346− box-shadow:3px 3px 0 rgba(91,52,168,.25)} 788+ box-shadow:3px 3px 0 rgba(112,72,232,.25)}
347 @media(max-width:900px){.field input,.field textarea{font-size:16px}} 789 @media(max-width:900px){.field input,.field textarea{font-size:16px}}
348 .optout-ok{background:var(--lime-soft);color:var(--green-deep);border:1.5px solid var(--ink); 790 .optout-ok{background:var(--lime-soft);color:var(--green-deep);border:1.5px solid var(--ink);
349 border-radius:var(--r-card);padding:16px 20px;font-weight:600;margin-top:20px; 791 border-radius:var(--r-card);padding:16px 20px;font-weight:600;margin-top:20px;
350 box-shadow:var(--shadow-off-soft)} 792 box-shadow:var(--shadow-off-soft)}
351 .optout-ok.warn{background:var(--amber-soft);color:#8a5a12} 793 .optout-ok.warn{background:var(--amber-soft);color:#8a5a12}
352 794
353−/* ===== footer + tab bar mobile (patron Lou-Ka) ===== */ 795+/* ===== footer : nav locale + footer commun Groupe KA (ka/KaFooter) ===== */
354−.footer{border-top:1.5px solid var(--ink);margin-top:40px;padding:32px 0 44px;background:var(--ink);color:var(--paper)} 796+.footer-local{margin-top:56px;border-top:1.5px solid var(--ink);background:var(--surface);padding:16px 0}
355−.footer-inner{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between} 797+.footer-local nav{display:flex;gap:10px 26px;flex-wrap:wrap;align-items:center;
356−.footer .brand{font-size:19px;color:var(--paper)} 798+ font-family:var(--font-mono);font-size:11px;font-weight:700;
357−.footer .brand .ka{color:var(--ink)} 799+ text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
358−.footer p{font-size:12px;color:rgba(245,243,238,.55);max-width:460px;margin:10px 0 0} 800+.footer-local .klabel{color:var(--ink-3)}
359−.footer-links{display:flex;flex-direction:column;gap:9px;font-family:var(--font-mono); 801+.footer-local a{display:inline-flex;align-items:center;min-height:44px}
360− font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em; 802+.footer-local a:hover{color:var(--accent-deep);text-decoration:underline;text-underline-offset:4px}
361− color:rgba(245,243,238,.8)} 803+.footer-local+.ka-footer{margin-top:0}
362−.footer-links a:hover{color:var(--lime)} 804+.ka-footer .brand{font-size:19px;color:var(--paper)}
363−.fam-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} 805+
364−.fam{border:1px solid rgba(245,243,238,.3);border-radius:var(--r-ctl);padding:3px 10px; 806+/* ===== contact ===== */
365− font-family:var(--font-mono);font-size:10px;font-weight:700;color:rgba(245,243,238,.7)} 807+.contact-page{max-width:880px;margin:0 auto;padding:44px 0 70px}
366−.fam:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)} 808+.contact-page h1{font-size:clamp(26px,4vw,38px);margin:12px 0;text-transform:uppercase}
809+.contact-page .lead{color:var(--ink-2);max-width:640px}
810+.contact-notice{background:var(--accent-soft);border:1.5px solid var(--ink);border-radius:var(--r-card);
811+ padding:16px 20px;margin:22px 0;box-shadow:var(--shadow-off-soft);font-weight:600;color:var(--ink)}
812+.contact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:8px 0 4px}
813+.contact-card{display:block;background:var(--surface);border:1.5px solid var(--ink);
814+ border-radius:var(--r-card);padding:16px 18px;box-shadow:var(--shadow-off-soft);
815+ transition:transform .16s ease,box-shadow .16s ease;min-height:44px}
816+.contact-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-off)}
817+.contact-card b{display:block;font-family:var(--font-mono);font-size:13px;font-weight:700;
818+ color:var(--accent-deep);word-break:break-all}
819+.contact-card span{display:block;margin-top:5px;font-size:12px;color:var(--ink-2)}
820+.site-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:14px 0 0}
821+.site-item{display:flex;align-items:center;gap:10px;background:var(--surface);
822+ border:1.5px solid var(--ink);border-radius:var(--r-ctl);padding:10px 13px;min-height:44px;
823+ transition:transform .15s ease,box-shadow .15s ease}
824+.site-item:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)}
825+.site-item i{width:10px;height:10px;border-radius:3px;border:1px solid var(--ink);flex:none}
826+.site-item b{font-family:var(--font-display);font-size:13.5px;font-weight:700}
827+.site-item span{font-size:11px;color:var(--ink-3);margin-left:auto;font-family:var(--font-mono)}
828+@media(max-width:480px){.site-item span{display:none}}
367 .tabbar{display:none} 829 .tabbar{display:none}
368 @media(max-width:760px){ 830 @media(max-width:760px){
369 .tabbar{display:grid;grid-template-columns:repeat(4,1fr); 831 .tabbar{display:grid;grid-template-columns:repeat(4,1fr);
@@ -381,7 +843,7 @@ select.f.active{background-color:var(--lime);color:var(--ink)}
381 .tabbar a svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor; 843 .tabbar a svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;
382 stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} 844 stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
383 body{padding-bottom:calc(64px + env(safe-area-inset-bottom))} 845 body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
384− .footer{padding-bottom:calc(76px + env(safe-area-inset-bottom))} 846+ .ka-footer{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
385 } 847 }
386 .spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--green); 848 .spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--green);
387 border-radius:50%;margin:50px auto;animation:sp .8s linear infinite} 849 border-radius:50%;margin:50px auto;animation:sp .8s linear infinite}
@@ -392,8 +854,11 @@ select.f.active{background-color:var(--lime);color:var(--ink)}
392 <div id="app"></div> 854 <div id="app"></div>
393 <script> 855 <script>
394 "use strict"; 856 "use strict";
395−/* Créa-Ka SPA — routes : / · /createur/{id} · /stats · /retrait */ 857+/* Créa-Ka SPA — routes : / · /createur/{id} · /stats · /retrait · /compte · /contact */
396 const ICONS={"_author":"Simon-Pierre Boucher <contact@spboucher.ai>","_file":"frontend/src/icons.json","_desc":"Trac\u00e9s SVG des marques de plateformes (simple-icons v13, CC0) + glyphes maison (linkedin/site-web/autre)","instagram":"M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077","tiktok":"M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z","youtube":"M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z","twitch":"M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z","kick":"M1.333 0h8v5.333H12V2.667h2.667V0h8v8H20v2.667h-2.667v2.666H20V16h2.667v8h-8v-2.667H12v-2.666H9.333V24h-8Z","x":"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z","facebook":"M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z","snapchat":"M12.206.793c.99 0 4.347.276 5.93 3.821.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51.075.045.203.09.401.09.3-.016.659-.12 1.033-.301.165-.088.344-.104.464-.104.182 0 .359.029.509.09.45.149.734.479.734.838.015.449-.39.839-1.213 1.168-.089.029-.209.075-.344.119-.45.135-1.139.36-1.333.81-.09.224-.061.524.12.868l.015.015c.06.136 1.526 3.475 4.791 4.014.255.044.435.27.42.509 0 .075-.015.149-.045.225-.24.569-1.273.988-3.146 1.271-.059.091-.12.375-.164.57-.029.179-.074.36-.134.553-.076.271-.27.405-.555.405h-.03c-.135 0-.313-.031-.538-.074-.36-.075-.765-.135-1.273-.135-.3 0-.599.015-.913.074-.6.104-1.123.464-1.723.884-.853.599-1.826 1.288-3.294 1.288-.06 0-.119-.015-.18-.015h-.149c-1.468 0-2.427-.675-3.279-1.288-.599-.42-1.107-.779-1.707-.884-.314-.045-.629-.074-.928-.074-.54 0-.958.089-1.272.149-.211.043-.391.074-.54.074-.374 0-.523-.224-.583-.42-.061-.192-.09-.389-.135-.567-.046-.181-.105-.494-.166-.57-1.918-.222-2.95-.642-3.189-1.226-.031-.063-.052-.15-.055-.225-.015-.243.165-.465.42-.509 3.264-.54 4.73-3.879 4.791-4.02l.016-.029c.18-.345.224-.645.119-.869-.195-.434-.884-.658-1.332-.809-.121-.029-.24-.074-.346-.119-1.107-.435-1.257-.93-1.197-1.273.09-.479.674-.793 1.168-.793.146 0 .27.029.383.074.42.194.789.3 1.104.3.234 0 .384-.06.465-.105l-.046-.569c-.098-1.626-.225-3.651.307-4.837C7.392 1.077 10.739.807 11.727.807l.419-.015h.06z","substack":"M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z","patreon":"M22.957 7.21c-.004-3.064-2.391-5.576-5.191-6.482-3.478-1.125-8.064-.962-11.384.604C2.357 3.231 1.093 7.391 1.046 11.54c-.039 3.411.302 12.396 5.369 12.46 3.765.047 4.326-4.804 6.068-7.141 1.24-1.662 2.836-2.132 4.801-2.618 3.376-.836 5.678-3.501 5.673-7.031Z","onlyfans":"M24 4.003h-4.015c-3.45 0-5.3.197-6.748 1.957a7.996 7.996 0 1 0 2.103 9.211c3.182-.231 5.39-2.134 6.085-5.173 0 0-2.399.585-4.43 0 4.018-.777 6.333-3.037 7.005-5.995zM5.61 11.999A2.391 2.391 0 0 1 9.28 9.97a2.966 2.966 0 0 1 2.998-2.528h.008c-.92 1.778-1.407 3.352-1.998 5.263A2.392 2.392 0 0 1 5.61 12Zm2.386-7.996a7.996 7.996 0 1 0 7.996 7.996 7.996 7.996 0 0 0-7.996-7.996Zm0 10.394A2.399 2.399 0 1 1 10.395 12a2.396 2.396 0 0 1-2.399 2.398Z","threads":"M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z","podcast":"M5.34 0A5.328 5.328 0 000 5.34v13.32A5.328 5.328 0 005.34 24h13.32A5.328 5.328 0 0024 18.66V5.34A5.328 5.328 0 0018.66 0zm6.525 2.568c2.336 0 4.448.902 6.056 2.587 1.224 1.272 1.912 2.619 2.264 4.392.12.59.12 2.2.007 2.864a8.506 8.506 0 01-3.24 5.296c-.608.46-2.096 1.261-2.336 1.261-.088 0-.096-.091-.056-.46.072-.592.144-.715.48-.856.536-.224 1.448-.874 2.008-1.435a7.644 7.644 0 002.008-3.536c.208-.824.184-2.656-.048-3.504-.728-2.696-2.928-4.792-5.624-5.352-.784-.16-2.208-.16-3 0-2.728.56-4.984 2.76-5.672 5.528-.184.752-.184 2.584 0 3.336.456 1.832 1.64 3.512 3.192 4.512.304.2.672.408.824.472.336.144.408.264.472.856.04.36.03.464-.056.464-.056 0-.464-.176-.896-.384l-.04-.03c-2.472-1.216-4.056-3.274-4.632-6.012-.144-.706-.168-2.392-.03-3.04.36-1.74 1.048-3.1 2.192-4.304 1.648-1.737 3.768-2.656 6.128-2.656zm.134 2.81c.409.004.803.04 1.106.106 2.784.62 4.76 3.408 4.376 6.174-.152 1.114-.536 2.03-1.216 2.88-.336.43-1.152 1.15-1.296 1.15-.023 0-.048-.272-.048-.603v-.605l.416-.496c1.568-1.878 1.456-4.502-.256-6.224-.664-.67-1.432-1.064-2.424-1.246-.64-.118-.776-.118-1.448-.008-1.02.167-1.81.562-2.512 1.256-1.72 1.704-1.832 4.342-.264 6.222l.413.496v.608c0 .336-.027.608-.06.608-.03 0-.264-.16-.512-.36l-.034-.011c-.832-.664-1.568-1.842-1.872-2.997-.184-.698-.184-2.024.008-2.72.504-1.878 1.888-3.335 3.808-4.019.41-.145 1.133-.22 1.814-.211zm-.13 2.99c.31 0 .62.06.844.178.488.253.888.745 1.04 1.259.464 1.578-1.208 2.96-2.72 2.254h-.015c-.712-.331-1.096-.956-1.104-1.77 0-.733.408-1.371 1.112-1.745.224-.117.534-.176.844-.176zm-.011 4.728c.988-.004 1.706.349 1.97.97.198.464.124 1.932-.218 4.302-.232 1.656-.36 2.074-.68 2.356-.44.39-1.064.498-1.656.288h-.003c-.716-.257-.87-.605-1.164-2.644-.341-2.37-.416-3.838-.218-4.302.262-.616.974-.966 1.97-.97z","linktree":"m13.73635 5.85251 4.00467-4.11665 2.3248 2.3808-4.20064 4.00466h5.9085v3.30473h-5.9365l4.22865 4.10766-2.3248 2.3338L12.0005 12.099l-5.74052 5.76852-2.3248-2.3248 4.22864-4.10766h-5.9375V8.12132h5.9085L3.93417 4.11666l2.3248-2.3808 4.00468 4.11665V0h3.4727zm-3.4727 10.30614h3.4727V24h-3.4727z","linkedin":"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z","site-web":"M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm7.938 9h-3.243a15.6 15.6 0 00-1.4-4.653A8.03 8.03 0 0119.938 9zM12 2.05c.9 1.2 1.9 3.2 2.5 6.95h-5C10.1 5.25 11.1 3.25 12 2.05zM4.062 15A8.06 8.06 0 013.75 12c0-1.05.15-2.05.312-3h3.55A25 25 0 007.5 12c0 1.05.05 2.05.113 3zm.643 2h3.243c.35 1.8.85 3.35 1.4 4.653A8.03 8.03 0 014.705 17zm3.243-10H4.705a8.03 8.03 0 014.643-4.653A15.6 15.6 0 007.948 7zM12 21.95c-.9-1.2-1.9-3.2-2.5-6.95h5c-.6 3.75-1.6 5.75-2.5 6.95zM14.787 13H9.213A23 23 0 019.1 12c0-1.05.037-2.05.113-3h5.574c.076.95.113 1.95.113 3s-.037 2.05-.113 3zm.508 8.653c.55-1.303 1.05-2.853 1.4-4.653h3.243a8.03 8.03 0 01-4.643 4.653zM16.388 15c.062-.95.112-1.95.112-3s-.05-2.05-.112-3h3.55c.162.95.312 1.95.312 3s-.15 2.05-.312 3z","autre":"M10.59 13.41a1 1 0 010-1.41l2.83-2.83a3 3 0 114.24 4.24l-1.41 1.42a1 1 0 11-1.42-1.42l1.42-1.41a1 1 0 10-1.42-1.42L12 13.41a1 1 0 01-1.41 0zm2.82-2.82a1 1 0 010 1.41l-2.82 2.83a3 3 0 11-4.25-4.24l1.42-1.42a1 1 0 111.41 1.42L7.76 12a1 1 0 101.41 1.41L12 10.59a1 1 0 011.41 0z"}; 858 const ICONS={"_author":"Simon-Pierre Boucher <contact@spboucher.ai>","_file":"frontend/src/icons.json","_desc":"Trac\u00e9s SVG des marques de plateformes (simple-icons v13, CC0) + glyphes maison (linkedin/site-web/autre)","instagram":"M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077","tiktok":"M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z","youtube":"M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z","twitch":"M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z","kick":"M1.333 0h8v5.333H12V2.667h2.667V0h8v8H20v2.667h-2.667v2.666H20V16h2.667v8h-8v-2.667H12v-2.666H9.333V24h-8Z","x":"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z","facebook":"M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z","snapchat":"M12.206.793c.99 0 4.347.276 5.93 3.821.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51.075.045.203.09.401.09.3-.016.659-.12 1.033-.301.165-.088.344-.104.464-.104.182 0 .359.029.509.09.45.149.734.479.734.838.015.449-.39.839-1.213 1.168-.089.029-.209.075-.344.119-.45.135-1.139.36-1.333.81-.09.224-.061.524.12.868l.015.015c.06.136 1.526 3.475 4.791 4.014.255.044.435.27.42.509 0 .075-.015.149-.045.225-.24.569-1.273.988-3.146 1.271-.059.091-.12.375-.164.57-.029.179-.074.36-.134.553-.076.271-.27.405-.555.405h-.03c-.135 0-.313-.031-.538-.074-.36-.075-.765-.135-1.273-.135-.3 0-.599.015-.913.074-.6.104-1.123.464-1.723.884-.853.599-1.826 1.288-3.294 1.288-.06 0-.119-.015-.18-.015h-.149c-1.468 0-2.427-.675-3.279-1.288-.599-.42-1.107-.779-1.707-.884-.314-.045-.629-.074-.928-.074-.54 0-.958.089-1.272.149-.211.043-.391.074-.54.074-.374 0-.523-.224-.583-.42-.061-.192-.09-.389-.135-.567-.046-.181-.105-.494-.166-.57-1.918-.222-2.95-.642-3.189-1.226-.031-.063-.052-.15-.055-.225-.015-.243.165-.465.42-.509 3.264-.54 4.73-3.879 4.791-4.02l.016-.029c.18-.345.224-.645.119-.869-.195-.434-.884-.658-1.332-.809-.121-.029-.24-.074-.346-.119-1.107-.435-1.257-.93-1.197-1.273.09-.479.674-.793 1.168-.793.146 0 .27.029.383.074.42.194.789.3 1.104.3.234 0 .384-.06.465-.105l-.046-.569c-.098-1.626-.225-3.651.307-4.837C7.392 1.077 10.739.807 11.727.807l.419-.015h.06z","substack":"M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z","patreon":"M22.957 7.21c-.004-3.064-2.391-5.576-5.191-6.482-3.478-1.125-8.064-.962-11.384.604C2.357 3.231 1.093 7.391 1.046 11.54c-.039 3.411.302 12.396 5.369 12.46 3.765.047 4.326-4.804 6.068-7.141 1.24-1.662 2.836-2.132 4.801-2.618 3.376-.836 5.678-3.501 5.673-7.031Z","onlyfans":"M24 4.003h-4.015c-3.45 0-5.3.197-6.748 1.957a7.996 7.996 0 1 0 2.103 9.211c3.182-.231 5.39-2.134 6.085-5.173 0 0-2.399.585-4.43 0 4.018-.777 6.333-3.037 7.005-5.995zM5.61 11.999A2.391 2.391 0 0 1 9.28 9.97a2.966 2.966 0 0 1 2.998-2.528h.008c-.92 1.778-1.407 3.352-1.998 5.263A2.392 2.392 0 0 1 5.61 12Zm2.386-7.996a7.996 7.996 0 1 0 7.996 7.996 7.996 7.996 0 0 0-7.996-7.996Zm0 10.394A2.399 2.399 0 1 1 10.395 12a2.396 2.396 0 0 1-2.399 2.398Z","threads":"M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z","podcast":"M5.34 0A5.328 5.328 0 000 5.34v13.32A5.328 5.328 0 005.34 24h13.32A5.328 5.328 0 0024 18.66V5.34A5.328 5.328 0 0018.66 0zm6.525 2.568c2.336 0 4.448.902 6.056 2.587 1.224 1.272 1.912 2.619 2.264 4.392.12.59.12 2.2.007 2.864a8.506 8.506 0 01-3.24 5.296c-.608.46-2.096 1.261-2.336 1.261-.088 0-.096-.091-.056-.46.072-.592.144-.715.48-.856.536-.224 1.448-.874 2.008-1.435a7.644 7.644 0 002.008-3.536c.208-.824.184-2.656-.048-3.504-.728-2.696-2.928-4.792-5.624-5.352-.784-.16-2.208-.16-3 0-2.728.56-4.984 2.76-5.672 5.528-.184.752-.184 2.584 0 3.336.456 1.832 1.64 3.512 3.192 4.512.304.2.672.408.824.472.336.144.408.264.472.856.04.36.03.464-.056.464-.056 0-.464-.176-.896-.384l-.04-.03c-2.472-1.216-4.056-3.274-4.632-6.012-.144-.706-.168-2.392-.03-3.04.36-1.74 1.048-3.1 2.192-4.304 1.648-1.737 3.768-2.656 6.128-2.656zm.134 2.81c.409.004.803.04 1.106.106 2.784.62 4.76 3.408 4.376 6.174-.152 1.114-.536 2.03-1.216 2.88-.336.43-1.152 1.15-1.296 1.15-.023 0-.048-.272-.048-.603v-.605l.416-.496c1.568-1.878 1.456-4.502-.256-6.224-.664-.67-1.432-1.064-2.424-1.246-.64-.118-.776-.118-1.448-.008-1.02.167-1.81.562-2.512 1.256-1.72 1.704-1.832 4.342-.264 6.222l.413.496v.608c0 .336-.027.608-.06.608-.03 0-.264-.16-.512-.36l-.034-.011c-.832-.664-1.568-1.842-1.872-2.997-.184-.698-.184-2.024.008-2.72.504-1.878 1.888-3.335 3.808-4.019.41-.145 1.133-.22 1.814-.211zm-.13 2.99c.31 0 .62.06.844.178.488.253.888.745 1.04 1.259.464 1.578-1.208 2.96-2.72 2.254h-.015c-.712-.331-1.096-.956-1.104-1.77 0-.733.408-1.371 1.112-1.745.224-.117.534-.176.844-.176zm-.011 4.728c.988-.004 1.706.349 1.97.97.198.464.124 1.932-.218 4.302-.232 1.656-.36 2.074-.68 2.356-.44.39-1.064.498-1.656.288h-.003c-.716-.257-.87-.605-1.164-2.644-.341-2.37-.416-3.838-.218-4.302.262-.616.974-.966 1.97-.97z","linktree":"m13.73635 5.85251 4.00467-4.11665 2.3248 2.3808-4.20064 4.00466h5.9085v3.30473h-5.9365l4.22865 4.10766-2.3248 2.3338L12.0005 12.099l-5.74052 5.76852-2.3248-2.3248 4.22864-4.10766h-5.9375V8.12132h5.9085L3.93417 4.11666l2.3248-2.3808 4.00468 4.11665V0h3.4727zm-3.4727 10.30614h3.4727V24h-3.4727z","linkedin":"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z","site-web":"M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm7.938 9h-3.243a15.6 15.6 0 00-1.4-4.653A8.03 8.03 0 0119.938 9zM12 2.05c.9 1.2 1.9 3.2 2.5 6.95h-5C10.1 5.25 11.1 3.25 12 2.05zM4.062 15A8.06 8.06 0 013.75 12c0-1.05.15-2.05.312-3h3.55A25 25 0 007.5 12c0 1.05.05 2.05.113 3zm.643 2h3.243c.35 1.8.85 3.35 1.4 4.653A8.03 8.03 0 014.705 17zm3.243-10H4.705a8.03 8.03 0 014.643-4.653A15.6 15.6 0 007.948 7zM12 21.95c-.9-1.2-1.9-3.2-2.5-6.95h5c-.6 3.75-1.6 5.75-2.5 6.95zM14.787 13H9.213A23 23 0 019.1 12c0-1.05.037-2.05.113-3h5.574c.076.95.113 1.95.113 3s-.037 2.05-.113 3zm.508 8.653c.55-1.303 1.05-2.853 1.4-4.653h3.243a8.03 8.03 0 01-4.643 4.653zM16.388 15c.062-.95.112-1.95.112-3s-.05-2.05-.112-3h3.55c.162.95.312 1.95.312 3s-.15 2.05-.312 3z","autre":"M10.59 13.41a1 1 0 010-1.41l2.83-2.83a3 3 0 114.24 4.24l-1.41 1.42a1 1 0 11-1.42-1.42l1.42-1.41a1 1 0 10-1.42-1.42L12 13.41a1 1 0 01-1.41 0zm2.82-2.82a1 1 0 010 1.41l-2.82 2.83a3 3 0 11-4.25-4.24l1.42-1.42a1 1 0 111.41 1.42L7.76 12a1 1 0 101.41 1.41L12 10.59a1 1 0 011.41 0z"};
859+/* écosystème Groupe KA (ka/ecosystem.json, injecté au build) — footer commun + /contact */
860+const KA_ECO={"org":{"name":"Groupe KA","legalName":"Groupe KA — Simon-Pierre Boucher","tagline":"Holding québécois d'agrégateurs de produits et services entièrement automatisés.","disclaimer":"Groupe KA est un agrégateur de contenu : nous ne vendons rien, ne louons rien et ne sommes partie à aucune transaction.","copyrightHolder":"Groupe KA — Simon-Pierre Boucher"},"hub":{"url":"https://www.groupe-ka.com","loginPath":"/connexion","signupNote":"La création de compte KA ID se fait sur le hub groupe-ka.com ; chaque site délègue sa connexion via /api/auth/ka/login."},"contacts":[{"email":"contact@groupe-ka.com","role":"Projets, partenariats & données"},{"email":"info@groupe-ka.com","role":"Médias & questions générales"},{"email":"admin@groupe-ka.com","role":"Légal, vie privée & Loi 25"}],"legal":[{"label":"Conditions d'utilisation","href":"https://www.groupe-ka.com/conditions"},{"label":"Politique de confidentialité","href":"https://www.groupe-ka.com/confidentialite"},{"label":"Protection des renseignements personnels (Loi 25)","href":"https://www.groupe-ka.com/loi-25"},{"label":"Transparence des robots d'indexation","href":"https://www.groupe-ka.com/bots"}],"sites":[{"id":"groupe-ka","wordmark":"Groupe KA","domain":"www.groupe-ka.com","accent":"#d9f26b","accentSoft":"#f0f9d2","accentDeep":"#123f2e","onAccent":"#141814","tagline":"Le portail de l'écosystème ·Ka"},{"id":"trouve-ka","wordmark":"Trouve·Ka","domain":"www.trouve-ka.com","accent":"#1c7ed6","accentSoft":"#e7f2fd","accentDeep":"#14508f","onAccent":"#ffffff","tagline":"Le moteur de recherche du web québécois"},{"id":"lou-ka","wordmark":"Lou·Ka","domain":"www.lou-ka.com","accent":"#ff6a00","accentSoft":"#fff1e6","accentDeep":"#cc5500","onAccent":"#ffffff","tagline":"Tous les logements à louer"},{"id":"immo-ka","wordmark":"Immo·Ka","domain":"www.immo-ka.com","accent":"#e23744","accentSoft":"#fbe0e2","accentDeep":"#a8232e","onAccent":"#ffffff","tagline":"Toutes les propriétés à vendre"},{"id":"vrai-prix","wordmark":"Vrai-Prix","domain":"www.vrai-prix.com","accent":"#ff5148","accentSoft":"#ffe3e0","accentDeep":"#9e2a25","onAccent":"#ffffff","tagline":"La valeur réelle de chaque propriété"},{"id":"auto-ka","wordmark":"Auto·Ka","domain":"www.auto-ka.com","accent":"#ff5a2a","accentSoft":"#ffe8de","accentDeep":"#cc3f16","onAccent":"#ffffff","tagline":"Les voitures usagées du Québec"},{"id":"fabri-ka","wordmark":"Fabri·Ka","domain":"www.fabri-ka.com","accent":"#c4532e","accentSoft":"#f7e3da","accentDeep":"#a94525","onAccent":"#ffffff","tagline":"Les produits fabriqués au Québec"},{"id":"food-ka","wordmark":"Food·Ka","domain":"www.food-ka.com","accent":"#1f9d55","accentSoft":"#e2f5ea","accentDeep":"#157a40","onAccent":"#ffffff","tagline":"Les prix d'épicerie, suivis à la source"},{"id":"resto-ka","wordmark":"Resto·Ka","domain":"www.resto-ka.com","accent":"#f08c00","accentSoft":"#fdeed7","accentDeep":"#b96a00","onAccent":"#141814","tagline":"Chaque resto, chaque plat, chaque prix"},{"id":"sorti-ka","wordmark":"Sorti·Ka","domain":"www.sorti-ka.com","accent":"#d6336c","accentSoft":"#fbe0eb","accentDeep":"#a12551","onAccent":"#ffffff","tagline":"Toutes les sorties, dans les 17 régions"},{"id":"crea-ka","wordmark":"Créa·Ka","domain":"www.crea-ka.com","accent":"#7048e8","accentSoft":"#ece5fc","accentDeep":"#5433b8","onAccent":"#ffffff","tagline":"Les créateurs d'ici, tous leurs liens"},{"id":"api-ka","wordmark":"API·Ka","domain":"www.api-ka.com","accent":"#3b5bdb","accentSoft":"#e4eafb","accentDeep":"#2b44a8","onAccent":"#ffffff","tagline":"La donnée de l'écosystème, par API"}],"extraFooterLinks":[{"label":"ValoPlex","href":"https://www.valoplex.com"},{"label":"Ka2","href":"https://www.ka2.bot"},{"label":"Ka4","href":"https://www.ka4.bot"},{"label":"Ka6","href":"https://www.ka6.bot"}]};
861+const KA_SITE=KA_ECO.sites.find(s=>s.id==="crea-ka");
397 const $=s=>document.querySelector(s); 862 const $=s=>document.querySelector(s);
398 const app=$("#app"); 863 const app=$("#app");
399 const fmt=new Intl.NumberFormat("fr-CA",{notation:"compact",maximumFractionDigits:1}); 864 const fmt=new Intl.NumberFormat("fr-CA",{notation:"compact",maximumFractionDigits:1});
@@ -413,7 +878,7 @@ const PLAT={
413 linkedin:{label:"LinkedIn",color:"#0a66c2"}, 878 linkedin:{label:"LinkedIn",color:"#0a66c2"},
414 threads:{label:"Threads",color:"#141814"}, 879 threads:{label:"Threads",color:"#141814"},
415 podcast:{label:"Balado",color:"#8940fa"}, 880 podcast:{label:"Balado",color:"#8940fa"},
416− "site-web":{label:"Site web",color:"#5b34a8"}, 881+ "site-web":{label:"Site web",color:"#7048e8"},
417 autre:{label:"Autre",color:"#8b928c"}}; 882 autre:{label:"Autre",color:"#8b928c"}};
418 const NICHE_LBL={"humour":"Humour","mode":"Mode","beaute":"Beauté","lifestyle":"Lifestyle", 883 const NICHE_LBL={"humour":"Humour","mode":"Mode","beaute":"Beauté","lifestyle":"Lifestyle",
419 "famille-parentalite":"Famille","cuisine":"Cuisine","gaming":"Gaming","tech":"Tech", 884 "famille-parentalite":"Famille","cuisine":"Cuisine","gaming":"Gaming","tech":"Tech",
@@ -453,15 +918,18 @@ function photoImg(c){
453 return `<img loading="lazy" alt="${esc(c.display_name)}" src="${srcs[0]}" 918 return `<img loading="lazy" alt="${esc(c.display_name)}" src="${srcs[0]}"
454 data-srcs='${esc(JSON.stringify(srcs))}' data-i="0" onerror="nextSrc(this)">`; 919 data-srcs='${esc(JSON.stringify(srcs))}' data-i="0" onerror="nextSrc(this)">`;
455 } 920 }
456−const brandSvg=`<svg width="30" height="30" viewBox="0 0 64 64"><rect width="64" height="64" rx="10" fill="#141814"/><circle cx="32" cy="23" r="9" fill="#c9a3ff"/><path d="M14 52c3-10 9-15 18-15s15 5 18 15" stroke="#c9a3ff" stroke-width="6" fill="none" stroke-linecap="round"/></svg>`; 921+const brandSvg=`<svg width="30" height="30" viewBox="0 0 64 64"><rect width="64" height="64" rx="10" fill="#141814"/><circle cx="32" cy="23" r="9" fill="#7048e8"/><path d="M14 52c3-10 9-15 18-15s15 5 18 15" stroke="#7048e8" stroke-width="6" fill="none" stroke-linecap="round"/></svg>`;
457 922
458 function header(){ 923 function header(){
459 return `<header class="header"><div class="container header-inner"> 924 return `<header class="header"><div class="container header-inner">
460 <a href="/" data-nav class="brand">${brandSvg}Créa<span class="ka">Ka</span></a> 925 <a href="/" data-nav class="brand">${brandSvg}Créa<span class="ka">Ka</span></a>
926+ <a class="gk-badge" href="https://www.groupe-ka.com" target="_blank" rel="noopener noreferrer"
927+ aria-label="Un service Groupe KA — visiter le portail de l'écosystème"><span class="pfx">Un service</span>
928+ <b>Groupe<span class="ka">KA</span></b></a>
461 <span class="brand-tag">Tous les créateurs québécois.<br>Tous leurs liens.</span> 929 <span class="brand-tag">Tous les créateurs québécois.<br>Tous leurs liens.</span>
462 <span class="header-spacer"></span> 930 <span class="header-spacer"></span>
463 <a class="hbtn" href="/stats" data-nav>Statistiques</a> 931 <a class="hbtn" href="/stats" data-nav>Statistiques</a>
464− <a class="hbtn" href="/retrait" data-nav>Retrait</a> 932+ <a class="hbtn" href="/contact" data-nav>Contact</a>
465 <a class="hbtn primary" href="/#annuaire" data-nav>Explorer l'annuaire</a> 933 <a class="hbtn primary" href="/#annuaire" data-nav>Explorer l'annuaire</a>
466 <span id="acct-slot"></span> 934 <span id="acct-slot"></span>
467 </div></header>`; 935 </div></header>`;
@@ -479,7 +947,7 @@ async function loadAccount(){
479 <span class="ka-badge">KA</span></a>`; 947 <span class="ka-badge">KA</span></a>`;
480 }else{ 948 }else{
481 slot.innerHTML=`<a class="hbtn acct" href="/api/auth/ka/login" 949 slot.innerHTML=`<a class="hbtn acct" href="/api/auth/ka/login"
482− title="Se connecter avec KA ID">Se connecter <span class="ka-badge">KA</span></a>`; 950+ title="Se connecter avec KA ID"><span class="acct-long">Se connecter avec</span><span class="acct-short">Connexion</span> <span class="ka-badge">KA</span></a>`;
483 } 951 }
484 bindNav(slot); 952 bindNav(slot);
485 } 953 }
@@ -492,26 +960,41 @@ function tabbar(active){
492 ${t("/retrait","Retrait",`<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M8 12h8"/></svg>`,"optout")} 960 ${t("/retrait","Retrait",`<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M8 12h8"/></svg>`,"optout")}
493 </nav>`; 961 </nav>`;
494 } 962 }
963+/* footer commun Groupe KA (équivalent vanilla de ka/KaFooter.tsx, siteId
964+ "crea-ka", localLegal = /retrait) — nav locale conservée au-dessus */
495 function footer(){ 965 function footer(){
496− return `<footer class="footer"><div class="container footer-inner"> 966+ const year=new Date().getFullYear();
497− <div><span class="brand">${brandSvg}Créa<span class="ka" style="background:var(--lime)">Ka</span></span> 967+ const others=KA_ECO.sites.filter(s=>s.id!=="crea-ka");
498− <p>Annuaire public des créateurs de contenu québécois. Uniquement des profils publics 968+ const localLegal=[{label:"Retrait (opt-out)",href:"/retrait",nav:true}];
499− et professionnels ; aucune donnée privée. Retrait simple et respecté (Loi 25). 969+ return `<div class="footer-local"><div class="container"><nav>
500− — Simon-Pierre Boucher</p> 970+ <span class="klabel">Créa·Ka</span>
501− <div class="fam-row"><span class="klabel" style="color:rgba(245,243,238,.5);align-self:center">Groupe KA :</span>
502− <a class="fam" href="https://www.groupe-ka.com" target="_blank" rel="noopener">KA ID</a>
503− <a class="fam" href="https://www.lou-ka.com" target="_blank" rel="noopener">Lou-Ka</a>
504− <a class="fam" href="https://www.immo-ka.com" target="_blank" rel="noopener">Immo-Ka</a>
505− <a class="fam" href="https://www.auto-ka.com" target="_blank" rel="noopener">Auto-Ka</a>
506− <a class="fam" href="https://www.food-ka.com" target="_blank" rel="noopener">Food-Ka</a>
507− <a class="fam" href="https://www.fabri-ka.com" target="_blank" rel="noopener">Fabri-Ka</a></div></div>
508− <div class="footer-links">
509 <a href="/compte" data-nav>Mon compte KA ID</a> 971 <a href="/compte" data-nav>Mon compte KA ID</a>
510 <a href="/stats" data-nav>Statistiques</a> 972 <a href="/stats" data-nav>Statistiques</a>
511 <a href="/retrait" data-nav>Demander un retrait</a> 973 <a href="/retrait" data-nav>Demander un retrait</a>
974+ <a href="/contact" data-nav>Contact</a>
512 <a href="/api/stats" target="_blank" rel="noopener">API publique</a> 975 <a href="/api/stats" target="_blank" rel="noopener">API publique</a>
976+ </nav></div></div>
977+ <footer class="ka-footer" id="contact-footer">
978+ <div class="container">
979+ <a class="wordmark" href="${esc(KA_ECO.hub.url)}" target="_blank" rel="noopener noreferrer"
980+ aria-label="Groupe KA — le portail de l'écosystème">Groupe <span class="ka">KA</span></a>
981+ <p class="desc">${esc(KA_ECO.org.tagline)} Des centaines de connecteurs lisent les sites à la
982+ source, normalisent la donnée et se resynchronisent seuls.
983+ <b style="color:var(--paper)">${esc(KA_SITE.wordmark)}</b> — ${esc(KA_SITE.tagline)} — est un service Groupe KA.</p>
984+ <p class="notice"><b>${esc(KA_ECO.org.disclaimer)}</b></p>
985+ <ul class="sites">
986+ ${others.map(s=>`<li><a href="https://${esc(s.domain)}" target="_blank" rel="noopener noreferrer">${esc(s.wordmark)}</a></li>`).join("")}
987+ ${(KA_ECO.extraFooterLinks||[]).map(l=>`<li><a href="${esc(l.href)}" target="_blank" rel="noopener noreferrer">${esc(l.label)}</a></li>`).join("")}
988+ </ul>
989+ <div class="contacts">
990+ ${KA_ECO.contacts.map(c=>`<p style="margin:0"><a href="mailto:${esc(c.email)}">${esc(c.email)}</a><span>${esc(c.role)}</span></p>`).join("")}
991+ </div>
992+ <p class="legal">© ${year} ${esc(KA_ECO.org.copyrightHolder)}
993+ ${localLegal.map(l=>` · <a href="${esc(l.href)}"${l.nav?" data-nav":""}>${esc(l.label)}</a>`).join("")}
994+ ${KA_ECO.legal.map(l=>` · <a href="${esc(l.href)}" target="_blank" rel="noopener noreferrer">${esc(l.label)}</a>`).join("")}
995+ </p>
513 </div> 996 </div>
514− </div></footer>`; 997+ </footer>`;
515 } 998 }
516 999
517 /* ---------- annuaire ---------- */ 1000 /* ---------- annuaire ---------- */
@@ -542,7 +1025,7 @@ function selectHtml(id,label,opts,val,lbls){
542 return `<select class="f${val?" active":""}" id="${id}"><option value="">${label}</option>${o}</select>`; 1025 return `<select class="f${val?" active":""}" id="${id}"><option value="">${label}</option>${o}</select>`;
543 } 1026 }
544 async function renderHome(){ 1027 async function renderHome(){
545− document.title="Créa-Ka — Tous les créateurs québécois. Tous leurs liens."; 1028+ document.title="Créa-Ka — Un service Groupe KA";
546 if(!state.tax)state.tax=await api("/api/taxonomies"); 1029 if(!state.tax)state.tax=await api("/api/taxonomies");
547 if(!state.stats)state.stats=await api("/api/stats").catch(()=>null); 1030 if(!state.stats)state.stats=await api("/api/stats").catch(()=>null);
548 const s=state.stats||{creators:0,accounts:0,by_platform:{}}; 1031 const s=state.stats||{creators:0,accounts:0,by_platform:{}};
@@ -703,6 +1186,7 @@ async function renderCompte(){
703 les autres plateformes du Groupe KA. Créez-le en une minute si vous n'en avez pas.</p> 1186 les autres plateformes du Groupe KA. Créez-le en une minute si vous n'en avez pas.</p>
704 <div class="compte-actions"> 1187 <div class="compte-actions">
705 <a class="btn btn-primary" href="/api/auth/ka/login">Se connecter avec KA ID</a> 1188 <a class="btn btn-primary" href="/api/auth/ka/login">Se connecter avec KA ID</a>
1189+ <a class="btn btn-accent" href="https://www.groupe-ka.com/connexion" target="_blank" rel="noopener">Créer un compte KA ID ↗</a>
706 <a class="btn btn-ghost" href="https://www.groupe-ka.com" target="_blank" rel="noopener">Qu'est-ce que KA ID ?</a> 1190 <a class="btn btn-ghost" href="https://www.groupe-ka.com" target="_blank" rel="noopener">Qu'est-ce que KA ID ?</a>
707 </div> 1191 </div>
708 </div>`+footer()+tabbar(""); 1192 </div>`+footer()+tabbar("");
@@ -742,6 +1226,38 @@ async function renderCompte(){
742 state.me=null;history.pushState(null,"","/");route();}); 1226 state.me=null;history.pushState(null,"","/");route();});
743 } 1227 }
744 1228
1229+/* ---------- page contact (écosystème Groupe KA — ka/ecosystem.json) ---------- */
1230+function renderContact(){
1231+ document.title="Contact — Créa-Ka, un service Groupe KA";
1232+ const sites=KA_ECO.sites.map(s=>{
1233+ const cur=s.id==="crea-ka";
1234+ return `<a class="site-item" href="https://${esc(s.domain)}"${cur?"":' target="_blank" rel="noopener noreferrer"'}
1235+ title="${esc(s.tagline)}"><i style="background:${esc(s.accent)}"></i><b>${esc(s.wordmark)}${cur?" (ici)":""}</b><span>${esc(s.domain)}</span></a>`;
1236+ }).join("");
1237+ app.innerHTML=header()+`
1238+ <div class="container contact-page">
1239+ <span class="kicker">Contact — Groupe KA</span>
1240+ <h1>Nous <span class="hl">joindre.</span></h1>
1241+ <p class="lead">${esc(KA_SITE.wordmark)} — ${esc(KA_SITE.tagline)} — est un service du
1242+ <b>Groupe KA</b>. ${esc(KA_ECO.org.tagline)} Les contacts ci-dessous valent pour
1243+ l'ensemble des plateformes du groupe.</p>
1244+ <div class="contact-notice">${esc(KA_ECO.org.disclaimer)}</div>
1245+ <h2 class="sect-title" style="margin-top:26px">Courriels</h2>
1246+ <div class="contact-grid">
1247+ ${KA_ECO.contacts.map(c=>`<a class="contact-card" href="mailto:${esc(c.email)}">
1248+ <b>${esc(c.email)}</b><span>${esc(c.role)}</span></a>`).join("")}
1249+ </div>
1250+ <div class="compte-actions" style="margin-top:22px">
1251+ <a class="btn btn-primary" href="${esc(KA_ECO.hub.url)}" target="_blank" rel="noopener noreferrer">Visiter le hub groupe-ka.com ↗</a>
1252+ <a class="btn btn-ghost" href="/retrait" data-nav>Demander un retrait (Loi 25)</a>
1253+ </div>
1254+ <h2 class="sect-title">Les plateformes du groupe</h2>
1255+ <div class="site-list">${sites}</div>
1256+ <p style="font-size:12px;color:var(--ink-3);margin-top:20px">${esc(KA_ECO.hub.signupNote)}</p>
1257+ </div>`+footer()+tabbar("");
1258+ bindNav();window.scrollTo(0,0);
1259+}
1260+
745 /* ---------- retrait / opt-out ---------- */ 1261 /* ---------- retrait / opt-out ---------- */
746 function renderOptout(){ 1262 function renderOptout(){
747 document.title="Retrait (opt-out) — Créa-Ka"; 1263 document.title="Retrait (opt-out) — Créa-Ka";
@@ -793,6 +1309,7 @@ function route(){
793 else if(p==="/retrait")r=renderOptout(); 1309 else if(p==="/retrait")r=renderOptout();
794 else if(p==="/stats")r=renderStats(); 1310 else if(p==="/stats")r=renderStats();
795 else if(p==="/compte")r=renderCompte(); 1311 else if(p==="/compte")r=renderCompte();
1312+ else if(p==="/contact")r=renderContact();
796 else r=renderHome(); 1313 else r=renderHome();
797 Promise.resolve(r).then(()=>loadAccount()).catch(()=>{}); 1314 Promise.resolve(r).then(()=>loadAccount()).catch(()=>{});
798 } 1315 }
modified frontend/src/index.template.html +178 −119
@@ -1,88 +1,61 @@
1 <!-- 1 <!--
2 Author: Simon-Pierre Boucher <contact@spboucher.ai> 2 Author: Simon-Pierre Boucher <contact@spboucher.ai>
3 File: frontend/src/index.template.html 3 File: frontend/src/index.template.html
4− Desc: Gabarit du frontend Créa-Ka — __ICONS__ est remplacé par les tracés 4+ Desc: Gabarit du frontend Créa-Ka — marqueurs remplacés par
5− SVG des marques (simple-icons, CC0) via scripts/build_frontend.py. 5+ scripts/build_frontend.py : __ICONS__ (tracés SVG simple-icons, CC0),
6− Système de design « éditorial sharp » du Groupe KA (identité partagée 6+ __KA_TOKENS__ (ka/tokens.css — design system commun Groupe KA,
7− avec groupe-ka.com, Vrai-Prix, ValoPlex : papier grainé #f5f3ee, encre 7+ importé EN PREMIER) et __KA_ECO__ (ka/ecosystem.json — contacts,
8− #141814, bordures encre + ombres décalées dures, Space Grotesk / Inter 8+ sites, mentions légales du groupe : footer commun + page /contact).
9− / JetBrains Mono) — accent propre Créa-Ka : VIOLET ÉLECTRIQUE. 9+ Système « éditorial sharp » du Groupe KA (papier grainé #f5f3ee,
10− Patrons mobiles calqués sur Lou-Ka (tab bar 4 onglets, filtres 10+ encre #141814, bordures encre + ombres décalées dures, Space Grotesk
11− défilants, anti-zoom iOS). Routes : / · /createur/{id} · /stats · /retrait 11+ / Inter / JetBrains Mono) — accent attribué à Créa-Ka : VIOLET
12+ (--accent:#7048e8). Patrons mobiles calqués sur Lou-Ka (tab bar
13+ 4 onglets, filtres défilants, anti-zoom iOS).
14+ Routes : / · /createur/{id} · /stats · /retrait · /compte · /contact
12 --> 15 -->
13 <!DOCTYPE html> 16 <!DOCTYPE html>
14 <html lang="fr"> 17 <html lang="fr">
15 <head> 18 <head>
16 <meta charset="utf-8"> 19 <meta charset="utf-8">
17 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> 20 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
18−<title>Créa-Ka — Tous les créateurs québécois. Tous leurs liens.</title> 21+<title>Créa-Ka — Un service Groupe KA</title>
19 <meta name="description" content="Annuaire public des créateurs de contenu et influenceurs québécois : tous leurs comptes (Instagram, TikTok, YouTube, Twitch…) regroupés, cherchables par niche, région, langue et taille d'audience."> 22 <meta name="description" content="Annuaire public des créateurs de contenu et influenceurs québécois : tous leurs comptes (Instagram, TikTok, YouTube, Twitch…) regroupés, cherchables par niche, région, langue et taille d'audience.">
20 <meta name="theme-color" content="#141814"> 23 <meta name="theme-color" content="#141814">
21 <link rel="preconnect" href="https://fonts.googleapis.com"> 24 <link rel="preconnect" href="https://fonts.googleapis.com">
22 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 25 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
23 <link rel="preconnect" href="https://unavatar.io"> 26 <link rel="preconnect" href="https://unavatar.io">
24 <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@500;700&display=swap" rel="stylesheet"> 27 <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@500;700&display=swap" rel="stylesheet">
25−<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='10' fill='%23141814'/%3E%3Ccircle cx='32' cy='23' r='9' fill='%23c9a3ff'/%3E%3Cpath d='M14 52c3-10 9-15 18-15s15 5 18 15' stroke='%23c9a3ff' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"> 28+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='10' fill='%23141814'/%3E%3Ccircle cx='32' cy='23' r='9' fill='%237048e8'/%3E%3Cpath d='M14 52c3-10 9-15 18-15s15 5 18 15' stroke='%237048e8' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E">
26 <style> 29 <style>
27−/* système « éditorial sharp » Groupe KA — accent Créa-Ka : violet électrique. 30+/* ka/tokens.css — design system commun Groupe KA, importé EN PREMIER
28− Convention du groupe : les NOMS de variables (--green/--lime) sont partagés 31+ (injecté au build par scripts/build_frontend.py) */
29− entre les apps, seules les VALEURS changent. */ 32+__KA_TOKENS__
33+</style>
34+<style>
35+/* Surcharges Créa-Ka par-dessus ka/tokens.css. Convention du groupe : les
36+ NOMS de variables sont partagés (--accent/--lime), seules les VALEURS
37+ changent — accent attribué à Créa-Ka : VIOLET. */
30 :root{ 38 :root{
31− --paper:#f5f3ee; --surface:#fff; --surface-2:#faf9f5; 39+ --accent:#7048e8; --accent-soft:#ece5fc; --accent-deep:#5433b8; --on-accent:#ffffff;
32− --ink:#141814; --ink-2:#4d5551; --ink-3:#8b928c; 40+ /* alias rétro-compatibles (le CSS historique du site utilise --lime) */
33− --line:rgba(20,24,20,.14); --line-strong:rgba(20,24,20,.85); 41+ --lime:var(--accent); --lime-soft:var(--accent-soft);
34− --green:#5b34a8; /* violet profond (primaire) */ 42+ --green:var(--accent-deep); /* primaire du site = violet profond */
35 --green-deep:#3d2178; 43 --green-deep:#3d2178;
36− --lime:#c9a3ff; /* violet électrique (accent) */
37− --lime-soft:#efe6ff;
38− --amber:#e8a33d; --amber-soft:#fdf3e2;
39− --danger:#b3423a;
40− --r-card:10px; --r-ctl:6px; --r-pill:999px;
41− --shadow-flat:0 1px 2px rgba(20,24,20,.05);
42− --shadow-off:6px 6px 0 var(--ink);
43− --shadow-off-soft:8px 8px 0 rgba(20,24,20,.08);
44− --font-display:"Space Grotesk",system-ui,sans-serif;
45− --font-body:"Inter",system-ui,sans-serif;
46− --font-mono:"JetBrains Mono",ui-monospace,monospace;
47 } 44 }
48−*{box-sizing:border-box} 45+/* le layout du site est calibré sur des titres sans marge basse */
49−html{scroll-behavior:smooth} 46+h1,h2,h3,h4{margin:0}
50−body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body); 47+a{text-decoration:none} button{font-family:inherit;cursor:pointer}
51− font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
52− padding-bottom:env(safe-area-inset-bottom)}
53−/* grain de film pleine page (signature du groupe) — aucun z-index sur body>* */
54−body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;z-index:9999;
55− background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
56−body>*{position:relative}
57−h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.03em;margin:0}
58−a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} img{display:block}
59−::selection{background:var(--lime);color:var(--ink)}
60−:focus-visible{outline:2px solid var(--green);outline-offset:2px}
61 .icn{width:1em;height:1em;display:block;fill:currentColor} 48 .icn{width:1em;height:1em;display:block;fill:currentColor}
62 .container{max-width:1240px;margin:0 auto;padding:0 24px} 49 .container{max-width:1240px;margin:0 auto;padding:0 24px}
63 @media(max-width:640px){.container{padding:0 16px}} 50 @media(max-width:640px){.container{padding:0 16px}}
64−.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);
65− font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--green)}
66−.kicker::before{content:"";width:22px;height:2px;background:var(--green)}
67−.klabel{font-family:var(--font-mono);font-size:10px;font-weight:700;
68− text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
69−.hl{display:inline-block;background:var(--lime);border-radius:8px;padding:0 10px 2px;transform:rotate(-1deg)}
70−.outline-txt{color:transparent;-webkit-text-stroke:2px var(--ink)}
71 51
72 /* ---------- cartes & boutons (langage du groupe) ---------- */ 52 /* ---------- cartes & boutons (langage du groupe) ---------- */
73 .gk-card{background:var(--surface);border:1.5px solid var(--ink); 53 .gk-card{background:var(--surface);border:1.5px solid var(--ink);
74 border-radius:var(--r-card);box-shadow:var(--shadow-off-soft)} 54 border-radius:var(--r-card);box-shadow:var(--shadow-off-soft)}
75 .gk-hover{transition:transform .18s ease,box-shadow .18s ease} 55 .gk-hover{transition:transform .18s ease,box-shadow .18s ease}
76 .gk-hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-off)} 56 .gk-hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-off)}
77−.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
78− padding:10px 20px;border:1.5px solid var(--ink);border-radius:var(--r-ctl);
79− font-family:var(--font-display);font-size:14px;font-weight:700;cursor:pointer;
80− transition:background .15s ease,transform .1s ease,box-shadow .1s ease}
81 .btn:active{transform:translate(2px,2px);box-shadow:none!important} 57 .btn:active{transform:translate(2px,2px);box-shadow:none!important}
82−.btn-primary{background:var(--ink);color:var(--lime);box-shadow:4px 4px 0 rgba(20,24,20,.25)} 58+.btn-primary{box-shadow:4px 4px 0 rgba(20,24,20,.25)}
83−.btn-primary:hover{background:var(--green-deep)}
84−.btn-ghost{background:transparent;color:var(--ink)}
85−.btn-ghost:hover{background:var(--lime)}
86 59
87 /* ===== header ===== */ 60 /* ===== header ===== */
88 .header{position:sticky;top:0;z-index:50;background:rgba(245,243,238,.9); 61 .header{position:sticky;top:0;z-index:50;background:rgba(245,243,238,.9);
@@ -91,26 +64,35 @@ a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer}
91 .brand{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.03em; 64 .brand{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.03em;
92 display:flex;align-items:center;line-height:1;color:var(--ink)} 65 display:flex;align-items:center;line-height:1;color:var(--ink)}
93 .brand svg{margin-right:11px;flex:none} 66 .brand svg{margin-right:11px;flex:none}
94−.brand .ka{background:var(--lime);border-radius:6px;padding:0 6px 1px;margin-left:2px;transform:rotate(-1deg)} 67+.brand .ka{background:var(--accent);color:var(--on-accent);border-radius:6px;padding:0 6px 1px;margin-left:2px;transform:rotate(-1deg)}
95 .brand-tag{font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--ink-3); 68 .brand-tag{font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--ink-3);
96 line-height:1.5;text-transform:uppercase;letter-spacing:.08em} 69 line-height:1.5;text-transform:uppercase;letter-spacing:.08em}
97 @media(max-width:900px){.brand-tag{display:none}} 70 @media(max-width:900px){.brand-tag{display:none}}
98 .header-spacer{flex:1} 71 .header-spacer{flex:1}
99 .hbtn{border:1.5px solid var(--ink);background:var(--surface);color:var(--ink); 72 .hbtn{border:1.5px solid var(--ink);background:var(--surface);color:var(--ink);
100− border-radius:var(--r-ctl);padding:8px 16px;font-family:var(--font-display); 73+ border-radius:var(--r-ctl);padding:8px 16px;min-height:44px;font-family:var(--font-display);
101 font-size:13px;font-weight:700;transition:.15s;display:inline-flex;align-items:center; 74 font-size:13px;font-weight:700;transition:.15s;display:inline-flex;align-items:center;
102 gap:8px;white-space:nowrap;box-shadow:3px 3px 0 rgba(20,24,20,.12)} 75 gap:8px;white-space:nowrap;box-shadow:3px 3px 0 rgba(20,24,20,.12)}
103−.hbtn:hover{background:var(--lime)} 76+.hbtn:hover{background:var(--accent);color:var(--on-accent)}
104 .hbtn:active{transform:translate(2px,2px);box-shadow:none} 77 .hbtn:active{transform:translate(2px,2px);box-shadow:none}
105−.hbtn.primary{background:var(--ink);color:var(--lime)} 78+.hbtn.primary{background:var(--ink);color:var(--accent)}
106−.hbtn.primary:hover{background:var(--green-deep)} 79+.hbtn.primary:hover{background:var(--accent-deep);color:var(--on-accent)}
107 @media(max-width:760px){.header .hbtn:not(.acct){display:none}} 80 @media(max-width:760px){.header .hbtn:not(.acct){display:none}}
108 /* bouton / jeton de compte KA ID — toujours visible, même sur mobile */ 81 /* bouton / jeton de compte KA ID — toujours visible, même sur mobile */
109 .hbtn.acct{padding:7px 14px} 82 .hbtn.acct{padding:7px 14px}
110 .hbtn.acct img{width:22px;height:22px;border-radius:50%;object-fit:cover; 83 .hbtn.acct img{width:22px;height:22px;border-radius:50%;object-fit:cover;
111 border:1.5px solid var(--ink);margin-left:-4px} 84 border:1.5px solid var(--ink);margin-left:-4px}
112−.hbtn.acct .ka-badge{background:var(--lime);border-radius:4px;padding:0 5px; 85+.hbtn.acct .ka-badge{background:var(--accent);color:var(--on-accent);border-radius:4px;padding:0 5px;
113 font-family:var(--font-mono);font-size:10px;font-weight:700} 86 font-family:var(--font-mono);font-size:10px;font-weight:700}
87+.hbtn:hover .ka-badge{background:var(--on-accent);color:var(--accent)}
88+/* badge « Un service Groupe KA » (ka/GroupeKaBadge — styles dans tokens.css) */
89+.header .gk-badge{flex:none}
90+.hbtn .acct-short{display:none}
91+@media(max-width:560px){
92+ .header-inner{gap:10px}
93+ .header .gk-badge .pfx{display:none}
94+ .hbtn .acct-long{display:none}.hbtn .acct-short{display:inline}}
95+@media(max-width:400px){.brand svg{width:26px;height:26px;margin-right:8px}.brand{font-size:20px}}
114 96
115 /* ===== page compte (carte de membre Groupe KA) ===== */ 97 /* ===== page compte (carte de membre Groupe KA) ===== */
116 .compte-page{max-width:640px;margin:0 auto;padding:44px 0 70px} 98 .compte-page{max-width:640px;margin:0 auto;padding:44px 0 70px}
@@ -118,18 +100,18 @@ a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer}
118 padding:28px;color:var(--paper);box-shadow:var(--shadow-off);margin-top:24px; 100 padding:28px;color:var(--paper);box-shadow:var(--shadow-off);margin-top:24px;
119 position:relative;overflow:hidden} 101 position:relative;overflow:hidden}
120 .membercard::after{content:"";position:absolute;right:-40px;top:-40px;width:160px; 102 .membercard::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;
121− height:160px;border-radius:50%;background:rgba(201,163,255,.14)} 103+ height:160px;border-radius:50%;background:rgba(112,72,232,.18)}
122 .mc-brand{font-family:var(--font-mono);font-size:10px;font-weight:700; 104 .mc-brand{font-family:var(--font-mono);font-size:10px;font-weight:700;
123− text-transform:uppercase;letter-spacing:.14em;color:var(--lime)} 105+ text-transform:uppercase;letter-spacing:.14em;color:var(--accent-soft)}
124 .mc-row{display:flex;gap:18px;align-items:center;margin-top:18px} 106 .mc-row{display:flex;gap:18px;align-items:center;margin-top:18px}
125−.mc-avatar{width:72px;height:72px;border-radius:14px;border:2px solid var(--lime); 107+.mc-avatar{width:72px;height:72px;border-radius:14px;border:2px solid var(--accent);
126 background:var(--green-deep);overflow:hidden;flex:none;display:flex; 108 background:var(--green-deep);overflow:hidden;flex:none;display:flex;
127 align-items:center;justify-content:center;font-family:var(--font-display); 109 align-items:center;justify-content:center;font-family:var(--font-display);
128− font-weight:700;font-size:26px;color:var(--lime)} 110+ font-weight:700;font-size:26px;color:var(--accent-soft)}
129 .mc-avatar img{width:100%;height:100%;object-fit:cover} 111 .mc-avatar img{width:100%;height:100%;object-fit:cover}
130 .mc-name{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--paper)} 112 .mc-name{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--paper)}
131−.mc-kaid{font-family:var(--font-mono);font-size:12px;color:var(--lime);margin-top:2px;letter-spacing:.04em} 113+.mc-kaid{font-family:var(--font-mono);font-size:12px;color:var(--accent-soft);margin-top:2px;letter-spacing:.04em}
132−.mc-role{display:inline-flex;background:var(--lime);color:var(--ink);border-radius:5px; 114+.mc-role{display:inline-flex;background:var(--accent);color:var(--on-accent);border-radius:5px;
133 padding:2px 10px;font-family:var(--font-mono);font-size:10px;font-weight:700; 115 padding:2px 10px;font-family:var(--font-mono);font-size:10px;font-weight:700;
134 text-transform:uppercase;letter-spacing:.06em;margin-top:8px} 116 text-transform:uppercase;letter-spacing:.06em;margin-top:8px}
135 .mc-meta{margin-top:20px;display:grid;gap:6px;font-size:12.5px;color:rgba(245,243,238,.75)} 117 .mc-meta{margin-top:20px;display:grid;gap:6px;font-size:12.5px;color:rgba(245,243,238,.75)}
@@ -153,8 +135,9 @@ a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer}
153 .adv{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card); 135 .adv{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card);
154 padding:16px;box-shadow:var(--shadow-off-soft)} 136 padding:16px;box-shadow:var(--shadow-off-soft)}
155 .adv .ico{width:36px;height:36px;border-radius:8px;border:1.5px solid var(--ink); 137 .adv .ico{width:36px;height:36px;border-radius:8px;border:1.5px solid var(--ink);
156− background:var(--lime);color:var(--ink);display:flex;align-items:center; 138+ background:var(--accent);color:var(--on-accent);display:flex;align-items:center;
157 justify-content:center;margin-bottom:10px;font-size:15px} 139 justify-content:center;margin-bottom:10px;font-size:15px}
140+.adv:nth-child(2n) .ico{color:var(--ink)}
158 .adv:nth-child(2n) .ico{background:var(--amber-soft)} 141 .adv:nth-child(2n) .ico{background:var(--amber-soft)}
159 .adv h3{font-size:14px;margin-bottom:3px} 142 .adv h3{font-size:14px;margin-bottom:3px}
160 .adv p{margin:0;font-size:12px;color:var(--ink-3);line-height:1.45} 143 .adv p{margin:0;font-size:12px;color:var(--ink-3);line-height:1.45}
@@ -167,7 +150,7 @@ a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer}
167 .search-input{flex:1 1 auto;display:flex;align-items:center;gap:10px;background:var(--surface); 150 .search-input{flex:1 1 auto;display:flex;align-items:center;gap:10px;background:var(--surface);
168 border:1.5px solid var(--ink);border-radius:var(--r-ctl);padding:10px 15px; 151 border:1.5px solid var(--ink);border-radius:var(--r-ctl);padding:10px 15px;
169 transition:.15s;min-width:0;box-shadow:3px 3px 0 rgba(20,24,20,.08)} 152 transition:.15s;min-width:0;box-shadow:3px 3px 0 rgba(20,24,20,.08)}
170−.search-input:focus-within{box-shadow:3px 3px 0 rgba(91,52,168,.3)} 153+.search-input:focus-within{box-shadow:3px 3px 0 rgba(112,72,232,.35)}
171 .search-input input{border:0;background:none;outline:none;font:inherit;flex:1;color:var(--ink);min-width:0} 154 .search-input input{border:0;background:none;outline:none;font:inherit;flex:1;color:var(--ink);min-width:0}
172 .search-input svg{flex:none;color:var(--ink-3)} 155 .search-input svg{flex:none;color:var(--ink-3)}
173 .filters{display:flex;gap:8px;flex-wrap:wrap} 156 .filters{display:flex;gap:8px;flex-wrap:wrap}
@@ -177,7 +160,7 @@ select.f{appearance:none;-webkit-appearance:none;border:1.5px solid var(--ink);
177 font-size:13px;font-weight:700;color:var(--ink-2);max-width:170px; 160 font-size:13px;font-weight:700;color:var(--ink-2);max-width:170px;
178 box-shadow:3px 3px 0 rgba(20,24,20,.08)} 161 box-shadow:3px 3px 0 rgba(20,24,20,.08)}
179 select.f:focus{outline:2px solid var(--green);outline-offset:1px} 162 select.f:focus{outline:2px solid var(--green);outline-offset:1px}
180−select.f.active{background-color:var(--lime);color:var(--ink)} 163+select.f.active{background-color:var(--accent-soft);color:var(--ink);border-color:var(--accent-deep)}
181 @media(max-width:760px){ 164 @media(max-width:760px){
182 .search-wrap{flex-wrap:wrap} 165 .search-wrap{flex-wrap:wrap}
183 .search-input{flex-basis:100%} 166 .search-input{flex-basis:100%}
@@ -200,18 +183,18 @@ select.f.active{background-color:var(--lime);color:var(--ink)}
200 repeating-linear-gradient(-45deg,var(--green-deep) 0 14px,#33195f 14px 28px); 183 repeating-linear-gradient(-45deg,var(--green-deep) 0 14px,#33195f 14px 28px);
201 display:flex;align-items:center;justify-content:center;overflow:hidden; 184 display:flex;align-items:center;justify-content:center;overflow:hidden;
202 border-bottom:1.5px solid var(--ink)} 185 border-bottom:1.5px solid var(--ink)}
203−.card-photo .init{color:var(--lime);font-family:var(--font-display);font-weight:700; 186+.card-photo .init{color:var(--accent-soft);font-family:var(--font-display);font-weight:700;
204 font-size:46px;letter-spacing:.02em} 187 font-size:46px;letter-spacing:.02em}
205 .card-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} 188 .card-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
206 .card-photo .tier{position:absolute;top:10px;left:10px;z-index:2} 189 .card-photo .tier{position:absolute;top:10px;left:10px;z-index:2}
207 .card-photo .nplat{position:absolute;top:10px;right:10px;z-index:2;background:var(--ink); 190 .card-photo .nplat{position:absolute;top:10px;right:10px;z-index:2;background:var(--ink);
208− color:var(--lime);border:1.5px solid var(--ink);border-radius:var(--r-ctl); 191+ color:var(--accent-soft);border:1.5px solid var(--ink);border-radius:var(--r-ctl);
209 padding:2px 8px;font-family:var(--font-mono);font-size:9.5px;font-weight:700; 192 padding:2px 8px;font-family:var(--font-mono);font-size:9.5px;font-weight:700;
210 text-transform:uppercase;letter-spacing:.05em} 193 text-transform:uppercase;letter-spacing:.05em}
211 .tier{display:inline-flex;padding:2px 9px;border:1.5px solid var(--ink); 194 .tier{display:inline-flex;padding:2px 9px;border:1.5px solid var(--ink);
212 border-radius:var(--r-ctl);font-family:var(--font-mono);font-size:9.5px; 195 border-radius:var(--r-ctl);font-family:var(--font-mono);font-size:9.5px;
213 font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--surface);color:var(--ink)} 196 font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--surface);color:var(--ink)}
214−.tier.mega{background:var(--lime)} 197+.tier.mega{background:var(--accent);color:var(--on-accent)}
215 .tier.macro{background:var(--amber-soft)} 198 .tier.macro{background:var(--amber-soft)}
216 .card-body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:9px;flex:1} 199 .card-body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:9px;flex:1}
217 .card-name{font-family:var(--font-display);font-size:16px;font-weight:700; 200 .card-name{font-family:var(--font-display);font-size:16px;font-weight:700;
@@ -221,7 +204,8 @@ select.f.active{background-color:var(--lime);color:var(--ink)}
221 text-transform:uppercase;letter-spacing:.05em;display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:-4px} 204 text-transform:uppercase;letter-spacing:.05em;display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:-4px}
222 .chips{display:flex;gap:6px;flex-wrap:wrap} 205 .chips{display:flex;gap:6px;flex-wrap:wrap}
223 .chip{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-ctl); 206 .chip{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-ctl);
224− padding:2px 10px;font-size:11px;font-weight:600;color:var(--ink-2);white-space:nowrap} 207+ padding:2px 10px;font-family:var(--font-body);font-size:11px;font-weight:600;color:var(--ink-2);
208+ white-space:nowrap;text-transform:none;letter-spacing:0}
225 .reach{font-size:12px;color:var(--ink-2)} 209 .reach{font-size:12px;color:var(--ink-2)}
226 .reach b{font-family:var(--font-display);color:var(--ink);font-size:15.5px;font-weight:700} 210 .reach b{font-family:var(--font-display);color:var(--ink);font-size:15.5px;font-weight:700}
227 .platrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:2px} 211 .platrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:2px}
@@ -248,22 +232,22 @@ select.f.active{background-color:var(--lime);color:var(--ink)}
248 @media(max-width:640px){.cpage-head{padding:22px 18px;gap:16px}} 232 @media(max-width:640px){.cpage-head{padding:22px 18px;gap:16px}}
249 .cavatar{width:104px;height:104px;border-radius:var(--r-card); 233 .cavatar{width:104px;height:104px;border-radius:var(--r-card);
250 background:repeating-linear-gradient(-45deg,var(--green-deep) 0 14px,#33195f 14px 28px); 234 background:repeating-linear-gradient(-45deg,var(--green-deep) 0 14px,#33195f 14px 28px);
251− color:var(--lime);flex:none;display:flex;align-items:center;justify-content:center; 235+ color:var(--accent-soft);flex:none;display:flex;align-items:center;justify-content:center;
252 font-family:var(--font-display);font-weight:700;font-size:36px;overflow:hidden; 236 font-family:var(--font-display);font-weight:700;font-size:36px;overflow:hidden;
253− position:relative;border:2px solid var(--lime)} 237+ position:relative;border:2px solid var(--accent)}
254 @media(max-width:640px){.cavatar{width:76px;height:76px;font-size:26px}} 238 @media(max-width:640px){.cavatar{width:76px;height:76px;font-size:26px}}
255 .cavatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} 239 .cavatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
256 .cpage-head h1{font-size:clamp(24px,4vw,40px);font-weight:700;color:var(--paper); 240 .cpage-head h1{font-size:clamp(24px,4vw,40px);font-weight:700;color:var(--paper);
257 line-height:1.1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;text-transform:uppercase} 241 line-height:1.1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;text-transform:uppercase}
258−.cpage-head h1 .vbadge{width:22px;height:22px;color:var(--lime)} 242+.cpage-head h1 .vbadge{width:22px;height:22px;color:var(--accent-soft)}
259 .cpage-head .meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px} 243 .cpage-head .meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
260 .mchip{background:rgba(245,243,238,.12);border:1px solid rgba(245,243,238,.3); 244 .mchip{background:rgba(245,243,238,.12);border:1px solid rgba(245,243,238,.3);
261 border-radius:var(--r-ctl);padding:3px 11px;font-family:var(--font-mono); 245 border-radius:var(--r-ctl);padding:3px 11px;font-family:var(--font-mono);
262 font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--paper)} 246 font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--paper)}
263−.mchip.o{background:var(--lime);border-color:var(--lime);color:var(--ink)} 247+.mchip.o{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
264 .cpage-reach{margin-left:auto;text-align:right} 248 .cpage-reach{margin-left:auto;text-align:right}
265 .cpage-reach b{display:block;font-family:var(--font-display); 249 .cpage-reach b{display:block;font-family:var(--font-display);
266− font-size:clamp(28px,3.6vw,40px);font-weight:700;color:var(--lime);letter-spacing:-.02em} 250+ font-size:clamp(28px,3.6vw,40px);font-weight:700;color:var(--accent-soft);letter-spacing:-.02em}
267 .cpage-reach span{font-family:var(--font-mono);font-size:10px;color:rgba(245,243,238,.6); 251 .cpage-reach span{font-family:var(--font-mono);font-size:10px;color:rgba(245,243,238,.6);
268 text-transform:uppercase;letter-spacing:.08em;font-weight:700} 252 text-transform:uppercase;letter-spacing:.08em;font-weight:700}
269 @media(max-width:760px){.cpage-reach{margin-left:0;text-align:left;flex-basis:100%}} 253 @media(max-width:760px){.cpage-reach{margin-left:0;text-align:left;flex-basis:100%}}
@@ -293,10 +277,10 @@ select.f.active{background-color:var(--lime);color:var(--ink)}
293 .conf.hi{background:var(--lime-soft);color:var(--green-deep)} 277 .conf.hi{background:var(--lime-soft);color:var(--green-deep)}
294 .conf.mid{background:var(--amber-soft);color:#8a5a12} 278 .conf.mid{background:var(--amber-soft);color:#8a5a12}
295 .linkinbio{display:inline-flex;align-items:center;gap:10px;margin-top:22px; 279 .linkinbio{display:inline-flex;align-items:center;gap:10px;margin-top:22px;
296− background:var(--lime);color:var(--ink);border:1.5px solid var(--ink); 280+ background:var(--accent);color:var(--on-accent);border:1.5px solid var(--ink);
297 border-radius:var(--r-ctl);padding:11px 20px;font-family:var(--font-display); 281 border-radius:var(--r-ctl);padding:11px 20px;font-family:var(--font-display);
298 font-weight:700;font-size:13.5px;transition:.15s;box-shadow:4px 4px 0 rgba(20,24,20,.25)} 282 font-weight:700;font-size:13.5px;transition:.15s;box-shadow:4px 4px 0 rgba(20,24,20,.25)}
299−.linkinbio:hover{background:var(--lime-soft)} 283+.linkinbio:hover{background:var(--accent-soft);color:var(--ink)}
300 .linkinbio:active{transform:translate(2px,2px);box-shadow:none} 284 .linkinbio:active{transform:translate(2px,2px);box-shadow:none}
301 .linkinbio svg{width:16px;height:16px;fill:currentColor} 285 .linkinbio svg{width:16px;height:16px;fill:currentColor}
302 .cpage-foot{margin-top:38px;font-size:12px;color:var(--ink-3); 286 .cpage-foot{margin-top:38px;font-size:12px;color:var(--ink-3);
@@ -313,7 +297,7 @@ select.f.active{background-color:var(--lime);color:var(--ink)}
313 .tile-k{font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-transform:uppercase; 297 .tile-k{font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-transform:uppercase;
314 letter-spacing:.1em;color:var(--ink-3);margin-top:7px} 298 letter-spacing:.1em;color:var(--ink-3);margin-top:7px}
315 .tile.hero-tile{background:var(--ink)} 299 .tile.hero-tile{background:var(--ink)}
316−.tile.hero-tile .tile-v{color:var(--lime)} 300+.tile.hero-tile .tile-v{color:var(--accent-soft)}
317 .tile.hero-tile .tile-k{color:rgba(245,243,238,.55)} 301 .tile.hero-tile .tile-k{color:rgba(245,243,238,.55)}
318 .viz-card{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card); 302 .viz-card{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card);
319 box-shadow:var(--shadow-off-soft);padding:24px 26px 18px;margin-bottom:22px} 303 box-shadow:var(--shadow-off-soft);padding:24px 26px 18px;margin-bottom:22px}
@@ -343,27 +327,47 @@ select.f.active{background-color:var(--lime);color:var(--ink)}
343 padding:11px 14px;font:inherit;background:var(--surface);color:var(--ink); 327 padding:11px 14px;font:inherit;background:var(--surface);color:var(--ink);
344 box-shadow:3px 3px 0 rgba(20,24,20,.08);transition:box-shadow .15s ease} 328 box-shadow:3px 3px 0 rgba(20,24,20,.08);transition:box-shadow .15s ease}
345 .field input:focus,.field textarea:focus{outline:2px solid var(--green);outline-offset:1px; 329 .field input:focus,.field textarea:focus{outline:2px solid var(--green);outline-offset:1px;
346− box-shadow:3px 3px 0 rgba(91,52,168,.25)} 330+ box-shadow:3px 3px 0 rgba(112,72,232,.25)}
347 @media(max-width:900px){.field input,.field textarea{font-size:16px}} 331 @media(max-width:900px){.field input,.field textarea{font-size:16px}}
348 .optout-ok{background:var(--lime-soft);color:var(--green-deep);border:1.5px solid var(--ink); 332 .optout-ok{background:var(--lime-soft);color:var(--green-deep);border:1.5px solid var(--ink);
349 border-radius:var(--r-card);padding:16px 20px;font-weight:600;margin-top:20px; 333 border-radius:var(--r-card);padding:16px 20px;font-weight:600;margin-top:20px;
350 box-shadow:var(--shadow-off-soft)} 334 box-shadow:var(--shadow-off-soft)}
351 .optout-ok.warn{background:var(--amber-soft);color:#8a5a12} 335 .optout-ok.warn{background:var(--amber-soft);color:#8a5a12}
352 336
353−/* ===== footer + tab bar mobile (patron Lou-Ka) ===== */ 337+/* ===== footer : nav locale + footer commun Groupe KA (ka/KaFooter) ===== */
354−.footer{border-top:1.5px solid var(--ink);margin-top:40px;padding:32px 0 44px;background:var(--ink);color:var(--paper)} 338+.footer-local{margin-top:56px;border-top:1.5px solid var(--ink);background:var(--surface);padding:16px 0}
355−.footer-inner{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between} 339+.footer-local nav{display:flex;gap:10px 26px;flex-wrap:wrap;align-items:center;
356−.footer .brand{font-size:19px;color:var(--paper)} 340+ font-family:var(--font-mono);font-size:11px;font-weight:700;
357−.footer .brand .ka{color:var(--ink)} 341+ text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
358−.footer p{font-size:12px;color:rgba(245,243,238,.55);max-width:460px;margin:10px 0 0} 342+.footer-local .klabel{color:var(--ink-3)}
359−.footer-links{display:flex;flex-direction:column;gap:9px;font-family:var(--font-mono); 343+.footer-local a{display:inline-flex;align-items:center;min-height:44px}
360− font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em; 344+.footer-local a:hover{color:var(--accent-deep);text-decoration:underline;text-underline-offset:4px}
361− color:rgba(245,243,238,.8)} 345+.footer-local+.ka-footer{margin-top:0}
362−.footer-links a:hover{color:var(--lime)} 346+.ka-footer .brand{font-size:19px;color:var(--paper)}
363−.fam-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} 347+
364−.fam{border:1px solid rgba(245,243,238,.3);border-radius:var(--r-ctl);padding:3px 10px; 348+/* ===== contact ===== */
365− font-family:var(--font-mono);font-size:10px;font-weight:700;color:rgba(245,243,238,.7)} 349+.contact-page{max-width:880px;margin:0 auto;padding:44px 0 70px}
366−.fam:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)} 350+.contact-page h1{font-size:clamp(26px,4vw,38px);margin:12px 0;text-transform:uppercase}
351+.contact-page .lead{color:var(--ink-2);max-width:640px}
352+.contact-notice{background:var(--accent-soft);border:1.5px solid var(--ink);border-radius:var(--r-card);
353+ padding:16px 20px;margin:22px 0;box-shadow:var(--shadow-off-soft);font-weight:600;color:var(--ink)}
354+.contact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:8px 0 4px}
355+.contact-card{display:block;background:var(--surface);border:1.5px solid var(--ink);
356+ border-radius:var(--r-card);padding:16px 18px;box-shadow:var(--shadow-off-soft);
357+ transition:transform .16s ease,box-shadow .16s ease;min-height:44px}
358+.contact-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-off)}
359+.contact-card b{display:block;font-family:var(--font-mono);font-size:13px;font-weight:700;
360+ color:var(--accent-deep);word-break:break-all}
361+.contact-card span{display:block;margin-top:5px;font-size:12px;color:var(--ink-2)}
362+.site-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:14px 0 0}
363+.site-item{display:flex;align-items:center;gap:10px;background:var(--surface);
364+ border:1.5px solid var(--ink);border-radius:var(--r-ctl);padding:10px 13px;min-height:44px;
365+ transition:transform .15s ease,box-shadow .15s ease}
366+.site-item:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)}
367+.site-item i{width:10px;height:10px;border-radius:3px;border:1px solid var(--ink);flex:none}
368+.site-item b{font-family:var(--font-display);font-size:13.5px;font-weight:700}
369+.site-item span{font-size:11px;color:var(--ink-3);margin-left:auto;font-family:var(--font-mono)}
370+@media(max-width:480px){.site-item span{display:none}}
367 .tabbar{display:none} 371 .tabbar{display:none}
368 @media(max-width:760px){ 372 @media(max-width:760px){
369 .tabbar{display:grid;grid-template-columns:repeat(4,1fr); 373 .tabbar{display:grid;grid-template-columns:repeat(4,1fr);
@@ -381,7 +385,7 @@ select.f.active{background-color:var(--lime);color:var(--ink)}
381 .tabbar a svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor; 385 .tabbar a svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;
382 stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} 386 stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
383 body{padding-bottom:calc(64px + env(safe-area-inset-bottom))} 387 body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
384− .footer{padding-bottom:calc(76px + env(safe-area-inset-bottom))} 388+ .ka-footer{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
385 } 389 }
386 .spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--green); 390 .spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--green);
387 border-radius:50%;margin:50px auto;animation:sp .8s linear infinite} 391 border-radius:50%;margin:50px auto;animation:sp .8s linear infinite}
@@ -392,8 +396,11 @@ select.f.active{background-color:var(--lime);color:var(--ink)}
392 <div id="app"></div> 396 <div id="app"></div>
393 <script> 397 <script>
394 "use strict"; 398 "use strict";
395−/* Créa-Ka SPA — routes : / · /createur/{id} · /stats · /retrait */ 399+/* Créa-Ka SPA — routes : / · /createur/{id} · /stats · /retrait · /compte · /contact */
396 const ICONS=__ICONS__; 400 const ICONS=__ICONS__;
401+/* écosystème Groupe KA (ka/ecosystem.json, injecté au build) — footer commun + /contact */
402+const KA_ECO=__KA_ECO__;
403+const KA_SITE=KA_ECO.sites.find(s=>s.id==="crea-ka");
397 const $=s=>document.querySelector(s); 404 const $=s=>document.querySelector(s);
398 const app=$("#app"); 405 const app=$("#app");
399 const fmt=new Intl.NumberFormat("fr-CA",{notation:"compact",maximumFractionDigits:1}); 406 const fmt=new Intl.NumberFormat("fr-CA",{notation:"compact",maximumFractionDigits:1});
@@ -413,7 +420,7 @@ const PLAT={
413 linkedin:{label:"LinkedIn",color:"#0a66c2"}, 420 linkedin:{label:"LinkedIn",color:"#0a66c2"},
414 threads:{label:"Threads",color:"#141814"}, 421 threads:{label:"Threads",color:"#141814"},
415 podcast:{label:"Balado",color:"#8940fa"}, 422 podcast:{label:"Balado",color:"#8940fa"},
416− "site-web":{label:"Site web",color:"#5b34a8"}, 423+ "site-web":{label:"Site web",color:"#7048e8"},
417 autre:{label:"Autre",color:"#8b928c"}}; 424 autre:{label:"Autre",color:"#8b928c"}};
418 const NICHE_LBL={"humour":"Humour","mode":"Mode","beaute":"Beauté","lifestyle":"Lifestyle", 425 const NICHE_LBL={"humour":"Humour","mode":"Mode","beaute":"Beauté","lifestyle":"Lifestyle",
419 "famille-parentalite":"Famille","cuisine":"Cuisine","gaming":"Gaming","tech":"Tech", 426 "famille-parentalite":"Famille","cuisine":"Cuisine","gaming":"Gaming","tech":"Tech",
@@ -453,15 +460,18 @@ function photoImg(c){
453 return `<img loading="lazy" alt="${esc(c.display_name)}" src="${srcs[0]}" 460 return `<img loading="lazy" alt="${esc(c.display_name)}" src="${srcs[0]}"
454 data-srcs='${esc(JSON.stringify(srcs))}' data-i="0" onerror="nextSrc(this)">`; 461 data-srcs='${esc(JSON.stringify(srcs))}' data-i="0" onerror="nextSrc(this)">`;
455 } 462 }
456−const brandSvg=`<svg width="30" height="30" viewBox="0 0 64 64"><rect width="64" height="64" rx="10" fill="#141814"/><circle cx="32" cy="23" r="9" fill="#c9a3ff"/><path d="M14 52c3-10 9-15 18-15s15 5 18 15" stroke="#c9a3ff" stroke-width="6" fill="none" stroke-linecap="round"/></svg>`; 463+const brandSvg=`<svg width="30" height="30" viewBox="0 0 64 64"><rect width="64" height="64" rx="10" fill="#141814"/><circle cx="32" cy="23" r="9" fill="#7048e8"/><path d="M14 52c3-10 9-15 18-15s15 5 18 15" stroke="#7048e8" stroke-width="6" fill="none" stroke-linecap="round"/></svg>`;
457 464
458 function header(){ 465 function header(){
459 return `<header class="header"><div class="container header-inner"> 466 return `<header class="header"><div class="container header-inner">
460 <a href="/" data-nav class="brand">${brandSvg}Créa<span class="ka">Ka</span></a> 467 <a href="/" data-nav class="brand">${brandSvg}Créa<span class="ka">Ka</span></a>
468+ <a class="gk-badge" href="https://www.groupe-ka.com" target="_blank" rel="noopener noreferrer"
469+ aria-label="Un service Groupe KA — visiter le portail de l'écosystème"><span class="pfx">Un service</span>
470+ <b>Groupe<span class="ka">KA</span></b></a>
461 <span class="brand-tag">Tous les créateurs québécois.<br>Tous leurs liens.</span> 471 <span class="brand-tag">Tous les créateurs québécois.<br>Tous leurs liens.</span>
462 <span class="header-spacer"></span> 472 <span class="header-spacer"></span>
463 <a class="hbtn" href="/stats" data-nav>Statistiques</a> 473 <a class="hbtn" href="/stats" data-nav>Statistiques</a>
464− <a class="hbtn" href="/retrait" data-nav>Retrait</a> 474+ <a class="hbtn" href="/contact" data-nav>Contact</a>
465 <a class="hbtn primary" href="/#annuaire" data-nav>Explorer l'annuaire</a> 475 <a class="hbtn primary" href="/#annuaire" data-nav>Explorer l'annuaire</a>
466 <span id="acct-slot"></span> 476 <span id="acct-slot"></span>
467 </div></header>`; 477 </div></header>`;
@@ -479,7 +489,7 @@ async function loadAccount(){
479 <span class="ka-badge">KA</span></a>`; 489 <span class="ka-badge">KA</span></a>`;
480 }else{ 490 }else{
481 slot.innerHTML=`<a class="hbtn acct" href="/api/auth/ka/login" 491 slot.innerHTML=`<a class="hbtn acct" href="/api/auth/ka/login"
482− title="Se connecter avec KA ID">Se connecter <span class="ka-badge">KA</span></a>`; 492+ title="Se connecter avec KA ID"><span class="acct-long">Se connecter avec</span><span class="acct-short">Connexion</span> <span class="ka-badge">KA</span></a>`;
483 } 493 }
484 bindNav(slot); 494 bindNav(slot);
485 } 495 }
@@ -492,26 +502,41 @@ function tabbar(active){
492 ${t("/retrait","Retrait",`<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M8 12h8"/></svg>`,"optout")} 502 ${t("/retrait","Retrait",`<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M8 12h8"/></svg>`,"optout")}
493 </nav>`; 503 </nav>`;
494 } 504 }
505+/* footer commun Groupe KA (équivalent vanilla de ka/KaFooter.tsx, siteId
506+ "crea-ka", localLegal = /retrait) — nav locale conservée au-dessus */
495 function footer(){ 507 function footer(){
496− return `<footer class="footer"><div class="container footer-inner"> 508+ const year=new Date().getFullYear();
497− <div><span class="brand">${brandSvg}Créa<span class="ka" style="background:var(--lime)">Ka</span></span> 509+ const others=KA_ECO.sites.filter(s=>s.id!=="crea-ka");
498− <p>Annuaire public des créateurs de contenu québécois. Uniquement des profils publics 510+ const localLegal=[{label:"Retrait (opt-out)",href:"/retrait",nav:true}];
499− et professionnels ; aucune donnée privée. Retrait simple et respecté (Loi 25). 511+ return `<div class="footer-local"><div class="container"><nav>
500− — Simon-Pierre Boucher</p> 512+ <span class="klabel">Créa·Ka</span>
501− <div class="fam-row"><span class="klabel" style="color:rgba(245,243,238,.5);align-self:center">Groupe KA :</span>
502− <a class="fam" href="https://www.groupe-ka.com" target="_blank" rel="noopener">KA ID</a>
503− <a class="fam" href="https://www.lou-ka.com" target="_blank" rel="noopener">Lou-Ka</a>
504− <a class="fam" href="https://www.immo-ka.com" target="_blank" rel="noopener">Immo-Ka</a>
505− <a class="fam" href="https://www.auto-ka.com" target="_blank" rel="noopener">Auto-Ka</a>
506− <a class="fam" href="https://www.food-ka.com" target="_blank" rel="noopener">Food-Ka</a>
507− <a class="fam" href="https://www.fabri-ka.com" target="_blank" rel="noopener">Fabri-Ka</a></div></div>
508− <div class="footer-links">
509 <a href="/compte" data-nav>Mon compte KA ID</a> 513 <a href="/compte" data-nav>Mon compte KA ID</a>
510 <a href="/stats" data-nav>Statistiques</a> 514 <a href="/stats" data-nav>Statistiques</a>
511 <a href="/retrait" data-nav>Demander un retrait</a> 515 <a href="/retrait" data-nav>Demander un retrait</a>
516+ <a href="/contact" data-nav>Contact</a>
512 <a href="/api/stats" target="_blank" rel="noopener">API publique</a> 517 <a href="/api/stats" target="_blank" rel="noopener">API publique</a>
518+ </nav></div></div>
519+ <footer class="ka-footer" id="contact-footer">
520+ <div class="container">
521+ <a class="wordmark" href="${esc(KA_ECO.hub.url)}" target="_blank" rel="noopener noreferrer"
522+ aria-label="Groupe KA — le portail de l'écosystème">Groupe <span class="ka">KA</span></a>
523+ <p class="desc">${esc(KA_ECO.org.tagline)} Des centaines de connecteurs lisent les sites à la
524+ source, normalisent la donnée et se resynchronisent seuls.
525+ <b style="color:var(--paper)">${esc(KA_SITE.wordmark)}</b> — ${esc(KA_SITE.tagline)} — est un service Groupe KA.</p>
526+ <p class="notice"><b>${esc(KA_ECO.org.disclaimer)}</b></p>
527+ <ul class="sites">
528+ ${others.map(s=>`<li><a href="https://${esc(s.domain)}" target="_blank" rel="noopener noreferrer">${esc(s.wordmark)}</a></li>`).join("")}
529+ ${(KA_ECO.extraFooterLinks||[]).map(l=>`<li><a href="${esc(l.href)}" target="_blank" rel="noopener noreferrer">${esc(l.label)}</a></li>`).join("")}
530+ </ul>
531+ <div class="contacts">
532+ ${KA_ECO.contacts.map(c=>`<p style="margin:0"><a href="mailto:${esc(c.email)}">${esc(c.email)}</a><span>${esc(c.role)}</span></p>`).join("")}
533+ </div>
534+ <p class="legal">© ${year} ${esc(KA_ECO.org.copyrightHolder)}
535+ ${localLegal.map(l=>` · <a href="${esc(l.href)}"${l.nav?" data-nav":""}>${esc(l.label)}</a>`).join("")}
536+ ${KA_ECO.legal.map(l=>` · <a href="${esc(l.href)}" target="_blank" rel="noopener noreferrer">${esc(l.label)}</a>`).join("")}
537+ </p>
513 </div> 538 </div>
514− </div></footer>`; 539+ </footer>`;
515 } 540 }
516 541
517 /* ---------- annuaire ---------- */ 542 /* ---------- annuaire ---------- */
@@ -542,7 +567,7 @@ function selectHtml(id,label,opts,val,lbls){
542 return `<select class="f${val?" active":""}" id="${id}"><option value="">${label}</option>${o}</select>`; 567 return `<select class="f${val?" active":""}" id="${id}"><option value="">${label}</option>${o}</select>`;
543 } 568 }
544 async function renderHome(){ 569 async function renderHome(){
545− document.title="Créa-Ka — Tous les créateurs québécois. Tous leurs liens."; 570+ document.title="Créa-Ka — Un service Groupe KA";
546 if(!state.tax)state.tax=await api("/api/taxonomies"); 571 if(!state.tax)state.tax=await api("/api/taxonomies");
547 if(!state.stats)state.stats=await api("/api/stats").catch(()=>null); 572 if(!state.stats)state.stats=await api("/api/stats").catch(()=>null);
548 const s=state.stats||{creators:0,accounts:0,by_platform:{}}; 573 const s=state.stats||{creators:0,accounts:0,by_platform:{}};
@@ -703,6 +728,7 @@ async function renderCompte(){
703 les autres plateformes du Groupe KA. Créez-le en une minute si vous n'en avez pas.</p> 728 les autres plateformes du Groupe KA. Créez-le en une minute si vous n'en avez pas.</p>
704 <div class="compte-actions"> 729 <div class="compte-actions">
705 <a class="btn btn-primary" href="/api/auth/ka/login">Se connecter avec KA ID</a> 730 <a class="btn btn-primary" href="/api/auth/ka/login">Se connecter avec KA ID</a>
731+ <a class="btn btn-accent" href="https://www.groupe-ka.com/connexion" target="_blank" rel="noopener">Créer un compte KA ID ↗</a>
706 <a class="btn btn-ghost" href="https://www.groupe-ka.com" target="_blank" rel="noopener">Qu'est-ce que KA ID ?</a> 732 <a class="btn btn-ghost" href="https://www.groupe-ka.com" target="_blank" rel="noopener">Qu'est-ce que KA ID ?</a>
707 </div> 733 </div>
708 </div>`+footer()+tabbar(""); 734 </div>`+footer()+tabbar("");
@@ -742,6 +768,38 @@ async function renderCompte(){
742 state.me=null;history.pushState(null,"","/");route();}); 768 state.me=null;history.pushState(null,"","/");route();});
743 } 769 }
744 770
771+/* ---------- page contact (écosystème Groupe KA — ka/ecosystem.json) ---------- */
772+function renderContact(){
773+ document.title="Contact — Créa-Ka, un service Groupe KA";
774+ const sites=KA_ECO.sites.map(s=>{
775+ const cur=s.id==="crea-ka";
776+ return `<a class="site-item" href="https://${esc(s.domain)}"${cur?"":' target="_blank" rel="noopener noreferrer"'}
777+ title="${esc(s.tagline)}"><i style="background:${esc(s.accent)}"></i><b>${esc(s.wordmark)}${cur?" (ici)":""}</b><span>${esc(s.domain)}</span></a>`;
778+ }).join("");
779+ app.innerHTML=header()+`
780+ <div class="container contact-page">
781+ <span class="kicker">Contact — Groupe KA</span>
782+ <h1>Nous <span class="hl">joindre.</span></h1>
783+ <p class="lead">${esc(KA_SITE.wordmark)} — ${esc(KA_SITE.tagline)} — est un service du
784+ <b>Groupe KA</b>. ${esc(KA_ECO.org.tagline)} Les contacts ci-dessous valent pour
785+ l'ensemble des plateformes du groupe.</p>
786+ <div class="contact-notice">${esc(KA_ECO.org.disclaimer)}</div>
787+ <h2 class="sect-title" style="margin-top:26px">Courriels</h2>
788+ <div class="contact-grid">
789+ ${KA_ECO.contacts.map(c=>`<a class="contact-card" href="mailto:${esc(c.email)}">
790+ <b>${esc(c.email)}</b><span>${esc(c.role)}</span></a>`).join("")}
791+ </div>
792+ <div class="compte-actions" style="margin-top:22px">
793+ <a class="btn btn-primary" href="${esc(KA_ECO.hub.url)}" target="_blank" rel="noopener noreferrer">Visiter le hub groupe-ka.com ↗</a>
794+ <a class="btn btn-ghost" href="/retrait" data-nav>Demander un retrait (Loi 25)</a>
795+ </div>
796+ <h2 class="sect-title">Les plateformes du groupe</h2>
797+ <div class="site-list">${sites}</div>
798+ <p style="font-size:12px;color:var(--ink-3);margin-top:20px">${esc(KA_ECO.hub.signupNote)}</p>
799+ </div>`+footer()+tabbar("");
800+ bindNav();window.scrollTo(0,0);
801+}
802+
745 /* ---------- retrait / opt-out ---------- */ 803 /* ---------- retrait / opt-out ---------- */
746 function renderOptout(){ 804 function renderOptout(){
747 document.title="Retrait (opt-out) — Créa-Ka"; 805 document.title="Retrait (opt-out) — Créa-Ka";
@@ -793,6 +851,7 @@ function route(){
793 else if(p==="/retrait")r=renderOptout(); 851 else if(p==="/retrait")r=renderOptout();
794 else if(p==="/stats")r=renderStats(); 852 else if(p==="/stats")r=renderStats();
795 else if(p==="/compte")r=renderCompte(); 853 else if(p==="/compte")r=renderCompte();
854+ else if(p==="/contact")r=renderContact();
796 else r=renderHome(); 855 else r=renderHome();
797 Promise.resolve(r).then(()=>loadAccount()).catch(()=>{}); 856 Promise.resolve(r).then(()=>loadAccount()).catch(()=>{});
798 } 857 }
added frontend/src/ka/GroupeKaBadge.tsx +21 −0
@@ -0,0 +1,21 @@
1+// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
2+// ka-ui/react/GroupeKaBadge.tsx — badge « Un service Groupe KA », cliquable
3+// vers le hub. À placer dans le header de chaque site (à côté du logo de la
4+// marque). Variante dark pour les surfaces encre. Zone de protection : le
5+// padding interne du badge suffit ; ne rien coller à moins de 8 px du badge.
6+export default function GroupeKaBadge({ dark = false }: { dark?: boolean }) {
7+ return (
8+ <a
9+ className={`gk-badge${dark ? " gk-badge--dark" : ""}`}
10+ href="https://www.groupe-ka.com"
11+ target="_blank"
12+ rel="noopener noreferrer"
13+ aria-label="Un service Groupe KA — visiter le portail de l'écosystème"
14+ >
15+ Un service
16+ <b>
17+ Groupe<span className="ka">KA</span>
18+ </b>
19+ </a>
20+ );
21+}
added frontend/src/ka/KaFooter.tsx +91 −0
Large diff (91 lines) is not loaded by default to keep the page fast.Load diff
added frontend/src/ka/ecosystem.json +45 −0
Large diff (45 lines) is not loaded by default to keep the page fast.Load diff
added frontend/src/ka/tokens.css +229 −0
Large diff (229 lines) is not loaded by default to keep the page fast.Load diff
modified scripts/build_frontend.py +18 −5
Large diff (49 lines) is not loaded by default to keep the page fast.Load diff
Menu

Theme