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>
7 changed files +1,219 −244
modified
frontend/dist/index.html
+637 −120
@@ -1,88 +1,519 @@ | ||
| 1 | 1 | <!-- |
| 2 | 2 | Author: Simon-Pierre Boucher <contact@spboucher.ai> |
| 3 | 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 | |
| 5 | − SVG des marques (simple-icons, CC0) via scripts/build_frontend.py. | |
| 6 | − Système de design « éditorial sharp » du Groupe KA (identité partagée | |
| 7 | − avec groupe-ka.com, Vrai-Prix, ValoPlex : papier grainé #f5f3ee, encre | |
| 8 | − #141814, bordures encre + ombres décalées dures, Space Grotesk / Inter | |
| 9 | − / JetBrains Mono) — accent propre Créa-Ka : VIOLET ÉLECTRIQUE. | |
| 10 | − Patrons mobiles calqués sur Lou-Ka (tab bar 4 onglets, filtres | |
| 11 | − défilants, anti-zoom iOS). Routes : / · /createur/{id} · /stats · /retrait | |
| 4 | + Desc: Gabarit du frontend Créa-Ka — marqueurs remplacés par | |
| 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 | + /* ----------------------------------------------------------------------------- | |
| 7 | + Auteur : Simon-Pierre Boucher — contact@spboucher.ai | |
| 8 | + Fichier : ka-ui/tokens.css — SOURCE CANONIQUE (repo ka-ui sur spbgit) | |
| 9 | + Desc. : Design system commun GROUPE KA « éditorial sharp » — tokens + socle | |
| 10 | + de composants partagés par les 12 plateformes. Chaque site importe ce | |
| 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 | 245 | <!DOCTYPE html> |
| 14 | 246 | <html lang="fr"> |
| 15 | 247 | <head> |
| 16 | 248 | <meta charset="utf-8"> |
| 17 | 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 | 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 | 252 | <meta name="theme-color" content="#141814"> |
| 21 | 253 | <link rel="preconnect" href="https://fonts.googleapis.com"> |
| 22 | 254 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| 23 | 255 | <link rel="preconnect" href="https://unavatar.io"> |
| 24 | 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 | 258 | <style> |
| 27 | −/* système « éditorial sharp » Groupe KA — accent Créa-Ka : violet électrique. | |
| 28 | − Convention du groupe : les NOMS de variables (--green/--lime) sont partagés | |
| 29 | − entre les apps, seules les VALEURS changent. */ | |
| 259 | +/* ka/tokens.css — design system commun Groupe KA, importé EN PREMIER | |
| 260 | + (injecté au build par scripts/build_frontend.py) */ | |
| 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 | 496 | :root{ |
| 31 | − --paper:#f5f3ee; --surface:#fff; --surface-2:#faf9f5; | |
| 32 | − --ink:#141814; --ink-2:#4d5551; --ink-3:#8b928c; | |
| 33 | − --line:rgba(20,24,20,.14); --line-strong:rgba(20,24,20,.85); | |
| 34 | − --green:#5b34a8; /* violet profond (primaire) */ | |
| 497 | + --accent:#7048e8; --accent-soft:#ece5fc; --accent-deep:#5433b8; --on-accent:#ffffff; | |
| 498 | + /* alias rétro-compatibles (le CSS historique du site utilise --lime) */ | |
| 499 | + --lime:var(--accent); --lime-soft:var(--accent-soft); | |
| 500 | + --green:var(--accent-deep); /* primaire du site = violet profond */ | |
| 35 | 501 | --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 | −} | |
| 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} | |
| 502 | +} | |
| 503 | +/* le layout du site est calibré sur des titres sans marge basse */ | |
| 504 | +h1,h2,h3,h4{margin:0} | |
| 505 | +a{text-decoration:none} button{font-family:inherit;cursor:pointer} | |
| 61 | 506 | .icn{width:1em;height:1em;display:block;fill:currentColor} |
| 62 | 507 | .container{max-width:1240px;margin:0 auto;padding:0 24px} |
| 63 | 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 | 510 | /* ---------- cartes & boutons (langage du groupe) ---------- */ |
| 73 | 511 | .gk-card{background:var(--surface);border:1.5px solid var(--ink); |
| 74 | 512 | border-radius:var(--r-card);box-shadow:var(--shadow-off-soft)} |
| 75 | 513 | .gk-hover{transition:transform .18s ease,box-shadow .18s ease} |
| 76 | 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 | 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)} | |
| 83 | −.btn-primary:hover{background:var(--green-deep)} | |
| 84 | −.btn-ghost{background:transparent;color:var(--ink)} | |
| 85 | −.btn-ghost:hover{background:var(--lime)} | |
| 516 | +.btn-primary{box-shadow:4px 4px 0 rgba(20,24,20,.25)} | |
| 86 | 517 | |
| 87 | 518 | /* ===== header ===== */ |
| 88 | 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 | 522 | .brand{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.03em; |
| 92 | 523 | display:flex;align-items:center;line-height:1;color:var(--ink)} |
| 93 | 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 | 526 | .brand-tag{font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--ink-3); |
| 96 | 527 | line-height:1.5;text-transform:uppercase;letter-spacing:.08em} |
| 97 | 528 | @media(max-width:900px){.brand-tag{display:none}} |
| 98 | 529 | .header-spacer{flex:1} |
| 99 | 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 | 532 | font-size:13px;font-weight:700;transition:.15s;display:inline-flex;align-items:center; |
| 102 | 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 | 535 | .hbtn:active{transform:translate(2px,2px);box-shadow:none} |
| 105 | −.hbtn.primary{background:var(--ink);color:var(--lime)} | |
| 106 | −.hbtn.primary:hover{background:var(--green-deep)} | |
| 536 | +.hbtn.primary{background:var(--ink);color:var(--accent)} | |
| 537 | +.hbtn.primary:hover{background:var(--accent-deep);color:var(--on-accent)} | |
| 107 | 538 | @media(max-width:760px){.header .hbtn:not(.acct){display:none}} |
| 108 | 539 | /* bouton / jeton de compte KA ID — toujours visible, même sur mobile */ |
| 109 | 540 | .hbtn.acct{padding:7px 14px} |
| 110 | 541 | .hbtn.acct img{width:22px;height:22px;border-radius:50%;object-fit:cover; |
| 111 | 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 | 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 | 555 | /* ===== page compte (carte de membre Groupe KA) ===== */ |
| 116 | 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 | 558 | padding:28px;color:var(--paper);box-shadow:var(--shadow-off);margin-top:24px; |
| 119 | 559 | position:relative;overflow:hidden} |
| 120 | 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 | 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 | 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 | 566 | background:var(--green-deep);overflow:hidden;flex:none;display:flex; |
| 127 | 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 | 569 | .mc-avatar img{width:100%;height:100%;object-fit:cover} |
| 130 | 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} | |
| 132 | −.mc-role{display:inline-flex;background:var(--lime);color:var(--ink);border-radius:5px; | |
| 571 | +.mc-kaid{font-family:var(--font-mono);font-size:12px;color:var(--accent-soft);margin-top:2px;letter-spacing:.04em} | |
| 572 | +.mc-role{display:inline-flex;background:var(--accent);color:var(--on-accent);border-radius:5px; | |
| 133 | 573 | padding:2px 10px;font-family:var(--font-mono);font-size:10px;font-weight:700; |
| 134 | 574 | text-transform:uppercase;letter-spacing:.06em;margin-top:8px} |
| 135 | 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 | 593 | .adv{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card); |
| 154 | 594 | padding:16px;box-shadow:var(--shadow-off-soft)} |
| 155 | 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 | 597 | justify-content:center;margin-bottom:10px;font-size:15px} |
| 598 | +.adv:nth-child(2n) .ico{color:var(--ink)} | |
| 158 | 599 | .adv:nth-child(2n) .ico{background:var(--amber-soft)} |
| 159 | 600 | .adv h3{font-size:14px;margin-bottom:3px} |
| 160 | 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 | 608 | .search-input{flex:1 1 auto;display:flex;align-items:center;gap:10px;background:var(--surface); |
| 168 | 609 | border:1.5px solid var(--ink);border-radius:var(--r-ctl);padding:10px 15px; |
| 169 | 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 | 612 | .search-input input{border:0;background:none;outline:none;font:inherit;flex:1;color:var(--ink);min-width:0} |
| 172 | 613 | .search-input svg{flex:none;color:var(--ink-3)} |
| 173 | 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 | 618 | font-size:13px;font-weight:700;color:var(--ink-2);max-width:170px; |
| 178 | 619 | box-shadow:3px 3px 0 rgba(20,24,20,.08)} |
| 179 | 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 | 622 | @media(max-width:760px){ |
| 182 | 623 | .search-wrap{flex-wrap:wrap} |
| 183 | 624 | .search-input{flex-basis:100%} |
@@ -200,18 +641,18 @@ select.f.active{background-color:var(--lime);color:var(--ink)} | ||
| 200 | 641 | repeating-linear-gradient(-45deg,var(--green-deep) 0 14px,#33195f 14px 28px); |
| 201 | 642 | display:flex;align-items:center;justify-content:center;overflow:hidden; |
| 202 | 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 | 645 | font-size:46px;letter-spacing:.02em} |
| 205 | 646 | .card-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} |
| 206 | 647 | .card-photo .tier{position:absolute;top:10px;left:10px;z-index:2} |
| 207 | 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 | 650 | padding:2px 8px;font-family:var(--font-mono);font-size:9.5px;font-weight:700; |
| 210 | 651 | text-transform:uppercase;letter-spacing:.05em} |
| 211 | 652 | .tier{display:inline-flex;padding:2px 9px;border:1.5px solid var(--ink); |
| 212 | 653 | border-radius:var(--r-ctl);font-family:var(--font-mono);font-size:9.5px; |
| 213 | 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 | 656 | .tier.macro{background:var(--amber-soft)} |
| 216 | 657 | .card-body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:9px;flex:1} |
| 217 | 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 | 662 | text-transform:uppercase;letter-spacing:.05em;display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:-4px} |
| 222 | 663 | .chips{display:flex;gap:6px;flex-wrap:wrap} |
| 223 | 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 | 667 | .reach{font-size:12px;color:var(--ink-2)} |
| 226 | 668 | .reach b{font-family:var(--font-display);color:var(--ink);font-size:15.5px;font-weight:700} |
| 227 | 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 | 690 | @media(max-width:640px){.cpage-head{padding:22px 18px;gap:16px}} |
| 249 | 691 | .cavatar{width:104px;height:104px;border-radius:var(--r-card); |
| 250 | 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 | 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 | 696 | @media(max-width:640px){.cavatar{width:76px;height:76px;font-size:26px}} |
| 255 | 697 | .cavatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} |
| 256 | 698 | .cpage-head h1{font-size:clamp(24px,4vw,40px);font-weight:700;color:var(--paper); |
| 257 | 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 | 701 | .cpage-head .meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px} |
| 260 | 702 | .mchip{background:rgba(245,243,238,.12);border:1px solid rgba(245,243,238,.3); |
| 261 | 703 | border-radius:var(--r-ctl);padding:3px 11px;font-family:var(--font-mono); |
| 262 | 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 | 706 | .cpage-reach{margin-left:auto;text-align:right} |
| 265 | 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 | 709 | .cpage-reach span{font-family:var(--font-mono);font-size:10px;color:rgba(245,243,238,.6); |
| 268 | 710 | text-transform:uppercase;letter-spacing:.08em;font-weight:700} |
| 269 | 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 | 735 | .conf.hi{background:var(--lime-soft);color:var(--green-deep)} |
| 294 | 736 | .conf.mid{background:var(--amber-soft);color:#8a5a12} |
| 295 | 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 | 739 | border-radius:var(--r-ctl);padding:11px 20px;font-family:var(--font-display); |
| 298 | 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 | 742 | .linkinbio:active{transform:translate(2px,2px);box-shadow:none} |
| 301 | 743 | .linkinbio svg{width:16px;height:16px;fill:currentColor} |
| 302 | 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 | 755 | .tile-k{font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-transform:uppercase; |
| 314 | 756 | letter-spacing:.1em;color:var(--ink-3);margin-top:7px} |
| 315 | 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 | 759 | .tile.hero-tile .tile-k{color:rgba(245,243,238,.55)} |
| 318 | 760 | .viz-card{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card); |
| 319 | 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 | 785 | padding:11px 14px;font:inherit;background:var(--surface);color:var(--ink); |
| 344 | 786 | box-shadow:3px 3px 0 rgba(20,24,20,.08);transition:box-shadow .15s ease} |
| 345 | 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 | 789 | @media(max-width:900px){.field input,.field textarea{font-size:16px}} |
| 348 | 790 | .optout-ok{background:var(--lime-soft);color:var(--green-deep);border:1.5px solid var(--ink); |
| 349 | 791 | border-radius:var(--r-card);padding:16px 20px;font-weight:600;margin-top:20px; |
| 350 | 792 | box-shadow:var(--shadow-off-soft)} |
| 351 | 793 | .optout-ok.warn{background:var(--amber-soft);color:#8a5a12} |
| 352 | 794 | |
| 353 | −/* ===== footer + tab bar mobile (patron Lou-Ka) ===== */ | |
| 354 | −.footer{border-top:1.5px solid var(--ink);margin-top:40px;padding:32px 0 44px;background:var(--ink);color:var(--paper)} | |
| 355 | −.footer-inner{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between} | |
| 356 | −.footer .brand{font-size:19px;color:var(--paper)} | |
| 357 | −.footer .brand .ka{color:var(--ink)} | |
| 358 | −.footer p{font-size:12px;color:rgba(245,243,238,.55);max-width:460px;margin:10px 0 0} | |
| 359 | −.footer-links{display:flex;flex-direction:column;gap:9px;font-family:var(--font-mono); | |
| 360 | − font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em; | |
| 361 | − color:rgba(245,243,238,.8)} | |
| 362 | −.footer-links a:hover{color:var(--lime)} | |
| 363 | −.fam-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} | |
| 364 | −.fam{border:1px solid rgba(245,243,238,.3);border-radius:var(--r-ctl);padding:3px 10px; | |
| 365 | − font-family:var(--font-mono);font-size:10px;font-weight:700;color:rgba(245,243,238,.7)} | |
| 366 | −.fam:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)} | |
| 795 | +/* ===== footer : nav locale + footer commun Groupe KA (ka/KaFooter) ===== */ | |
| 796 | +.footer-local{margin-top:56px;border-top:1.5px solid var(--ink);background:var(--surface);padding:16px 0} | |
| 797 | +.footer-local nav{display:flex;gap:10px 26px;flex-wrap:wrap;align-items:center; | |
| 798 | + font-family:var(--font-mono);font-size:11px;font-weight:700; | |
| 799 | + text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)} | |
| 800 | +.footer-local .klabel{color:var(--ink-3)} | |
| 801 | +.footer-local a{display:inline-flex;align-items:center;min-height:44px} | |
| 802 | +.footer-local a:hover{color:var(--accent-deep);text-decoration:underline;text-underline-offset:4px} | |
| 803 | +.footer-local+.ka-footer{margin-top:0} | |
| 804 | +.ka-footer .brand{font-size:19px;color:var(--paper)} | |
| 805 | + | |
| 806 | +/* ===== contact ===== */ | |
| 807 | +.contact-page{max-width:880px;margin:0 auto;padding:44px 0 70px} | |
| 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 | 829 | .tabbar{display:none} |
| 368 | 830 | @media(max-width:760px){ |
| 369 | 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 | 843 | .tabbar a svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor; |
| 382 | 844 | stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} |
| 383 | 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 | 848 | .spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--green); |
| 387 | 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 | 854 | <div id="app"></div> |
| 393 | 855 | <script> |
| 394 | 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 | 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 | 862 | const $=s=>document.querySelector(s); |
| 398 | 863 | const app=$("#app"); |
| 399 | 864 | const fmt=new Intl.NumberFormat("fr-CA",{notation:"compact",maximumFractionDigits:1}); |
@@ -413,7 +878,7 @@ const PLAT={ | ||
| 413 | 878 | linkedin:{label:"LinkedIn",color:"#0a66c2"}, |
| 414 | 879 | threads:{label:"Threads",color:"#141814"}, |
| 415 | 880 | podcast:{label:"Balado",color:"#8940fa"}, |
| 416 | − "site-web":{label:"Site web",color:"#5b34a8"}, | |
| 881 | + "site-web":{label:"Site web",color:"#7048e8"}, | |
| 417 | 882 | autre:{label:"Autre",color:"#8b928c"}}; |
| 418 | 883 | const NICHE_LBL={"humour":"Humour","mode":"Mode","beaute":"Beauté","lifestyle":"Lifestyle", |
| 419 | 884 | "famille-parentalite":"Famille","cuisine":"Cuisine","gaming":"Gaming","tech":"Tech", |
@@ -453,15 +918,18 @@ function photoImg(c){ | ||
| 453 | 918 | return `<img loading="lazy" alt="${esc(c.display_name)}" src="${srcs[0]}" |
| 454 | 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 | 923 | function header(){ |
| 459 | 924 | return `<header class="header"><div class="container header-inner"> |
| 460 | 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 | 929 | <span class="brand-tag">Tous les créateurs québécois.<br>Tous leurs liens.</span> |
| 462 | 930 | <span class="header-spacer"></span> |
| 463 | 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 | 933 | <a class="hbtn primary" href="/#annuaire" data-nav>Explorer l'annuaire</a> |
| 466 | 934 | <span id="acct-slot"></span> |
| 467 | 935 | </div></header>`; |
@@ -479,7 +947,7 @@ async function loadAccount(){ | ||
| 479 | 947 | <span class="ka-badge">KA</span></a>`; |
| 480 | 948 | }else{ |
| 481 | 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 | 952 | bindNav(slot); |
| 485 | 953 | } |
@@ -492,26 +960,41 @@ function tabbar(active){ | ||
| 492 | 960 | ${t("/retrait","Retrait",`<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M8 12h8"/></svg>`,"optout")} |
| 493 | 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 | 965 | function footer(){ |
| 496 | − return `<footer class="footer"><div class="container footer-inner"> | |
| 497 | − <div><span class="brand">${brandSvg}Créa<span class="ka" style="background:var(--lime)">Ka</span></span> | |
| 498 | − <p>Annuaire public des créateurs de contenu québécois. Uniquement des profils publics | |
| 499 | − et professionnels ; aucune donnée privée. Retrait simple et respecté (Loi 25). | |
| 500 | − — Simon-Pierre Boucher</p> | |
| 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"> | |
| 966 | + const year=new Date().getFullYear(); | |
| 967 | + const others=KA_ECO.sites.filter(s=>s.id!=="crea-ka"); | |
| 968 | + const localLegal=[{label:"Retrait (opt-out)",href:"/retrait",nav:true}]; | |
| 969 | + return `<div class="footer-local"><div class="container"><nav> | |
| 970 | + <span class="klabel">Créa·Ka</span> | |
| 509 | 971 | <a href="/compte" data-nav>Mon compte KA ID</a> |
| 510 | 972 | <a href="/stats" data-nav>Statistiques</a> |
| 511 | 973 | <a href="/retrait" data-nav>Demander un retrait</a> |
| 974 | + <a href="/contact" data-nav>Contact</a> | |
| 512 | 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 | 996 | </div> |
| 514 | − </div></footer>`; | |
| 997 | + </footer>`; | |
| 515 | 998 | } |
| 516 | 999 | |
| 517 | 1000 | /* ---------- annuaire ---------- */ |
@@ -542,7 +1025,7 @@ function selectHtml(id,label,opts,val,lbls){ | ||
| 542 | 1025 | return `<select class="f${val?" active":""}" id="${id}"><option value="">${label}</option>${o}</select>`; |
| 543 | 1026 | } |
| 544 | 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 | 1029 | if(!state.tax)state.tax=await api("/api/taxonomies"); |
| 547 | 1030 | if(!state.stats)state.stats=await api("/api/stats").catch(()=>null); |
| 548 | 1031 | const s=state.stats||{creators:0,accounts:0,by_platform:{}}; |
@@ -703,6 +1186,7 @@ async function renderCompte(){ | ||
| 703 | 1186 | les autres plateformes du Groupe KA. Créez-le en une minute si vous n'en avez pas.</p> |
| 704 | 1187 | <div class="compte-actions"> |
| 705 | 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 | 1190 | <a class="btn btn-ghost" href="https://www.groupe-ka.com" target="_blank" rel="noopener">Qu'est-ce que KA ID ?</a> |
| 707 | 1191 | </div> |
| 708 | 1192 | </div>`+footer()+tabbar(""); |
@@ -742,6 +1226,38 @@ async function renderCompte(){ | ||
| 742 | 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 | 1261 | /* ---------- retrait / opt-out ---------- */ |
| 746 | 1262 | function renderOptout(){ |
| 747 | 1263 | document.title="Retrait (opt-out) — Créa-Ka"; |
@@ -793,6 +1309,7 @@ function route(){ | ||
| 793 | 1309 | else if(p==="/retrait")r=renderOptout(); |
| 794 | 1310 | else if(p==="/stats")r=renderStats(); |
| 795 | 1311 | else if(p==="/compte")r=renderCompte(); |
| 1312 | + else if(p==="/contact")r=renderContact(); | |
| 796 | 1313 | else r=renderHome(); |
| 797 | 1314 | Promise.resolve(r).then(()=>loadAccount()).catch(()=>{}); |
| 798 | 1315 | } |
modified
frontend/src/index.template.html
+178 −119
@@ -1,88 +1,61 @@ | ||
| 1 | 1 | <!-- |
| 2 | 2 | Author: Simon-Pierre Boucher <contact@spboucher.ai> |
| 3 | 3 | File: frontend/src/index.template.html |
| 4 | − Desc: Gabarit du frontend Créa-Ka — __ICONS__ est remplacé par les tracés | |
| 5 | − SVG des marques (simple-icons, CC0) via scripts/build_frontend.py. | |
| 6 | − Système de design « éditorial sharp » du Groupe KA (identité partagée | |
| 7 | − avec groupe-ka.com, Vrai-Prix, ValoPlex : papier grainé #f5f3ee, encre | |
| 8 | − #141814, bordures encre + ombres décalées dures, Space Grotesk / Inter | |
| 9 | − / JetBrains Mono) — accent propre Créa-Ka : VIOLET ÉLECTRIQUE. | |
| 10 | − Patrons mobiles calqués sur Lou-Ka (tab bar 4 onglets, filtres | |
| 11 | − défilants, anti-zoom iOS). Routes : / · /createur/{id} · /stats · /retrait | |
| 4 | + Desc: Gabarit du frontend Créa-Ka — marqueurs remplacés par | |
| 5 | + scripts/build_frontend.py : __ICONS__ (tracés SVG simple-icons, CC0), | |
| 6 | + __KA_TOKENS__ (ka/tokens.css — design system commun Groupe KA, | |
| 7 | + importé EN PREMIER) et __KA_ECO__ (ka/ecosystem.json — contacts, | |
| 8 | + sites, mentions légales du groupe : footer commun + page /contact). | |
| 9 | + Système « éditorial sharp » du Groupe KA (papier grainé #f5f3ee, | |
| 10 | + encre #141814, bordures encre + ombres décalées dures, Space Grotesk | |
| 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 | 16 | <!DOCTYPE html> |
| 14 | 17 | <html lang="fr"> |
| 15 | 18 | <head> |
| 16 | 19 | <meta charset="utf-8"> |
| 17 | 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 | 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 | 23 | <meta name="theme-color" content="#141814"> |
| 21 | 24 | <link rel="preconnect" href="https://fonts.googleapis.com"> |
| 22 | 25 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| 23 | 26 | <link rel="preconnect" href="https://unavatar.io"> |
| 24 | 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 | 29 | <style> |
| 27 | −/* système « éditorial sharp » Groupe KA — accent Créa-Ka : violet électrique. | |
| 28 | − Convention du groupe : les NOMS de variables (--green/--lime) sont partagés | |
| 29 | − entre les apps, seules les VALEURS changent. */ | |
| 30 | +/* ka/tokens.css — design system commun Groupe KA, importé EN PREMIER | |
| 31 | + (injecté au build par scripts/build_frontend.py) */ | |
| 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 | 38 | :root{ |
| 31 | − --paper:#f5f3ee; --surface:#fff; --surface-2:#faf9f5; | |
| 32 | − --ink:#141814; --ink-2:#4d5551; --ink-3:#8b928c; | |
| 33 | − --line:rgba(20,24,20,.14); --line-strong:rgba(20,24,20,.85); | |
| 34 | − --green:#5b34a8; /* violet profond (primaire) */ | |
| 39 | + --accent:#7048e8; --accent-soft:#ece5fc; --accent-deep:#5433b8; --on-accent:#ffffff; | |
| 40 | + /* alias rétro-compatibles (le CSS historique du site utilise --lime) */ | |
| 41 | + --lime:var(--accent); --lime-soft:var(--accent-soft); | |
| 42 | + --green:var(--accent-deep); /* primaire du site = violet profond */ | |
| 35 | 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} | |
| 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} | |
| 45 | +/* le layout du site est calibré sur des titres sans marge basse */ | |
| 46 | +h1,h2,h3,h4{margin:0} | |
| 47 | +a{text-decoration:none} button{font-family:inherit;cursor:pointer} | |
| 61 | 48 | .icn{width:1em;height:1em;display:block;fill:currentColor} |
| 62 | 49 | .container{max-width:1240px;margin:0 auto;padding:0 24px} |
| 63 | 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 | 52 | /* ---------- cartes & boutons (langage du groupe) ---------- */ |
| 73 | 53 | .gk-card{background:var(--surface);border:1.5px solid var(--ink); |
| 74 | 54 | border-radius:var(--r-card);box-shadow:var(--shadow-off-soft)} |
| 75 | 55 | .gk-hover{transition:transform .18s ease,box-shadow .18s ease} |
| 76 | 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 | 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)} | |
| 83 | −.btn-primary:hover{background:var(--green-deep)} | |
| 84 | −.btn-ghost{background:transparent;color:var(--ink)} | |
| 85 | −.btn-ghost:hover{background:var(--lime)} | |
| 58 | +.btn-primary{box-shadow:4px 4px 0 rgba(20,24,20,.25)} | |
| 86 | 59 | |
| 87 | 60 | /* ===== header ===== */ |
| 88 | 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 | 64 | .brand{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.03em; |
| 92 | 65 | display:flex;align-items:center;line-height:1;color:var(--ink)} |
| 93 | 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 | 68 | .brand-tag{font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--ink-3); |
| 96 | 69 | line-height:1.5;text-transform:uppercase;letter-spacing:.08em} |
| 97 | 70 | @media(max-width:900px){.brand-tag{display:none}} |
| 98 | 71 | .header-spacer{flex:1} |
| 99 | 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 | 74 | font-size:13px;font-weight:700;transition:.15s;display:inline-flex;align-items:center; |
| 102 | 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 | 77 | .hbtn:active{transform:translate(2px,2px);box-shadow:none} |
| 105 | −.hbtn.primary{background:var(--ink);color:var(--lime)} | |
| 106 | −.hbtn.primary:hover{background:var(--green-deep)} | |
| 78 | +.hbtn.primary{background:var(--ink);color:var(--accent)} | |
| 79 | +.hbtn.primary:hover{background:var(--accent-deep);color:var(--on-accent)} | |
| 107 | 80 | @media(max-width:760px){.header .hbtn:not(.acct){display:none}} |
| 108 | 81 | /* bouton / jeton de compte KA ID — toujours visible, même sur mobile */ |
| 109 | 82 | .hbtn.acct{padding:7px 14px} |
| 110 | 83 | .hbtn.acct img{width:22px;height:22px;border-radius:50%;object-fit:cover; |
| 111 | 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 | 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 | 97 | /* ===== page compte (carte de membre Groupe KA) ===== */ |
| 116 | 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 | 100 | padding:28px;color:var(--paper);box-shadow:var(--shadow-off);margin-top:24px; |
| 119 | 101 | position:relative;overflow:hidden} |
| 120 | 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 | 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 | 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 | 108 | background:var(--green-deep);overflow:hidden;flex:none;display:flex; |
| 127 | 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 | 111 | .mc-avatar img{width:100%;height:100%;object-fit:cover} |
| 130 | 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} | |
| 132 | −.mc-role{display:inline-flex;background:var(--lime);color:var(--ink);border-radius:5px; | |
| 113 | +.mc-kaid{font-family:var(--font-mono);font-size:12px;color:var(--accent-soft);margin-top:2px;letter-spacing:.04em} | |
| 114 | +.mc-role{display:inline-flex;background:var(--accent);color:var(--on-accent);border-radius:5px; | |
| 133 | 115 | padding:2px 10px;font-family:var(--font-mono);font-size:10px;font-weight:700; |
| 134 | 116 | text-transform:uppercase;letter-spacing:.06em;margin-top:8px} |
| 135 | 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 | 135 | .adv{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card); |
| 154 | 136 | padding:16px;box-shadow:var(--shadow-off-soft)} |
| 155 | 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 | 139 | justify-content:center;margin-bottom:10px;font-size:15px} |
| 140 | +.adv:nth-child(2n) .ico{color:var(--ink)} | |
| 158 | 141 | .adv:nth-child(2n) .ico{background:var(--amber-soft)} |
| 159 | 142 | .adv h3{font-size:14px;margin-bottom:3px} |
| 160 | 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 | 150 | .search-input{flex:1 1 auto;display:flex;align-items:center;gap:10px;background:var(--surface); |
| 168 | 151 | border:1.5px solid var(--ink);border-radius:var(--r-ctl);padding:10px 15px; |
| 169 | 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 | 154 | .search-input input{border:0;background:none;outline:none;font:inherit;flex:1;color:var(--ink);min-width:0} |
| 172 | 155 | .search-input svg{flex:none;color:var(--ink-3)} |
| 173 | 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 | 160 | font-size:13px;font-weight:700;color:var(--ink-2);max-width:170px; |
| 178 | 161 | box-shadow:3px 3px 0 rgba(20,24,20,.08)} |
| 179 | 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 | 164 | @media(max-width:760px){ |
| 182 | 165 | .search-wrap{flex-wrap:wrap} |
| 183 | 166 | .search-input{flex-basis:100%} |
@@ -200,18 +183,18 @@ select.f.active{background-color:var(--lime);color:var(--ink)} | ||
| 200 | 183 | repeating-linear-gradient(-45deg,var(--green-deep) 0 14px,#33195f 14px 28px); |
| 201 | 184 | display:flex;align-items:center;justify-content:center;overflow:hidden; |
| 202 | 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 | 187 | font-size:46px;letter-spacing:.02em} |
| 205 | 188 | .card-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} |
| 206 | 189 | .card-photo .tier{position:absolute;top:10px;left:10px;z-index:2} |
| 207 | 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 | 192 | padding:2px 8px;font-family:var(--font-mono);font-size:9.5px;font-weight:700; |
| 210 | 193 | text-transform:uppercase;letter-spacing:.05em} |
| 211 | 194 | .tier{display:inline-flex;padding:2px 9px;border:1.5px solid var(--ink); |
| 212 | 195 | border-radius:var(--r-ctl);font-family:var(--font-mono);font-size:9.5px; |
| 213 | 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 | 198 | .tier.macro{background:var(--amber-soft)} |
| 216 | 199 | .card-body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:9px;flex:1} |
| 217 | 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 | 204 | text-transform:uppercase;letter-spacing:.05em;display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:-4px} |
| 222 | 205 | .chips{display:flex;gap:6px;flex-wrap:wrap} |
| 223 | 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 | 209 | .reach{font-size:12px;color:var(--ink-2)} |
| 226 | 210 | .reach b{font-family:var(--font-display);color:var(--ink);font-size:15.5px;font-weight:700} |
| 227 | 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 | 232 | @media(max-width:640px){.cpage-head{padding:22px 18px;gap:16px}} |
| 249 | 233 | .cavatar{width:104px;height:104px;border-radius:var(--r-card); |
| 250 | 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 | 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 | 238 | @media(max-width:640px){.cavatar{width:76px;height:76px;font-size:26px}} |
| 255 | 239 | .cavatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} |
| 256 | 240 | .cpage-head h1{font-size:clamp(24px,4vw,40px);font-weight:700;color:var(--paper); |
| 257 | 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 | 243 | .cpage-head .meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px} |
| 260 | 244 | .mchip{background:rgba(245,243,238,.12);border:1px solid rgba(245,243,238,.3); |
| 261 | 245 | border-radius:var(--r-ctl);padding:3px 11px;font-family:var(--font-mono); |
| 262 | 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 | 248 | .cpage-reach{margin-left:auto;text-align:right} |
| 265 | 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 | 251 | .cpage-reach span{font-family:var(--font-mono);font-size:10px;color:rgba(245,243,238,.6); |
| 268 | 252 | text-transform:uppercase;letter-spacing:.08em;font-weight:700} |
| 269 | 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 | 277 | .conf.hi{background:var(--lime-soft);color:var(--green-deep)} |
| 294 | 278 | .conf.mid{background:var(--amber-soft);color:#8a5a12} |
| 295 | 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 | 281 | border-radius:var(--r-ctl);padding:11px 20px;font-family:var(--font-display); |
| 298 | 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 | 284 | .linkinbio:active{transform:translate(2px,2px);box-shadow:none} |
| 301 | 285 | .linkinbio svg{width:16px;height:16px;fill:currentColor} |
| 302 | 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 | 297 | .tile-k{font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-transform:uppercase; |
| 314 | 298 | letter-spacing:.1em;color:var(--ink-3);margin-top:7px} |
| 315 | 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 | 301 | .tile.hero-tile .tile-k{color:rgba(245,243,238,.55)} |
| 318 | 302 | .viz-card{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card); |
| 319 | 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 | 327 | padding:11px 14px;font:inherit;background:var(--surface);color:var(--ink); |
| 344 | 328 | box-shadow:3px 3px 0 rgba(20,24,20,.08);transition:box-shadow .15s ease} |
| 345 | 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 | 331 | @media(max-width:900px){.field input,.field textarea{font-size:16px}} |
| 348 | 332 | .optout-ok{background:var(--lime-soft);color:var(--green-deep);border:1.5px solid var(--ink); |
| 349 | 333 | border-radius:var(--r-card);padding:16px 20px;font-weight:600;margin-top:20px; |
| 350 | 334 | box-shadow:var(--shadow-off-soft)} |
| 351 | 335 | .optout-ok.warn{background:var(--amber-soft);color:#8a5a12} |
| 352 | 336 | |
| 353 | −/* ===== footer + tab bar mobile (patron Lou-Ka) ===== */ | |
| 354 | −.footer{border-top:1.5px solid var(--ink);margin-top:40px;padding:32px 0 44px;background:var(--ink);color:var(--paper)} | |
| 355 | −.footer-inner{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between} | |
| 356 | −.footer .brand{font-size:19px;color:var(--paper)} | |
| 357 | −.footer .brand .ka{color:var(--ink)} | |
| 358 | −.footer p{font-size:12px;color:rgba(245,243,238,.55);max-width:460px;margin:10px 0 0} | |
| 359 | −.footer-links{display:flex;flex-direction:column;gap:9px;font-family:var(--font-mono); | |
| 360 | − font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em; | |
| 361 | − color:rgba(245,243,238,.8)} | |
| 362 | −.footer-links a:hover{color:var(--lime)} | |
| 363 | −.fam-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} | |
| 364 | −.fam{border:1px solid rgba(245,243,238,.3);border-radius:var(--r-ctl);padding:3px 10px; | |
| 365 | − font-family:var(--font-mono);font-size:10px;font-weight:700;color:rgba(245,243,238,.7)} | |
| 366 | −.fam:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)} | |
| 337 | +/* ===== footer : nav locale + footer commun Groupe KA (ka/KaFooter) ===== */ | |
| 338 | +.footer-local{margin-top:56px;border-top:1.5px solid var(--ink);background:var(--surface);padding:16px 0} | |
| 339 | +.footer-local nav{display:flex;gap:10px 26px;flex-wrap:wrap;align-items:center; | |
| 340 | + font-family:var(--font-mono);font-size:11px;font-weight:700; | |
| 341 | + text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)} | |
| 342 | +.footer-local .klabel{color:var(--ink-3)} | |
| 343 | +.footer-local a{display:inline-flex;align-items:center;min-height:44px} | |
| 344 | +.footer-local a:hover{color:var(--accent-deep);text-decoration:underline;text-underline-offset:4px} | |
| 345 | +.footer-local+.ka-footer{margin-top:0} | |
| 346 | +.ka-footer .brand{font-size:19px;color:var(--paper)} | |
| 347 | + | |
| 348 | +/* ===== contact ===== */ | |
| 349 | +.contact-page{max-width:880px;margin:0 auto;padding:44px 0 70px} | |
| 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 | 371 | .tabbar{display:none} |
| 368 | 372 | @media(max-width:760px){ |
| 369 | 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 | 385 | .tabbar a svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor; |
| 382 | 386 | stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} |
| 383 | 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 | 390 | .spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--green); |
| 387 | 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 | 396 | <div id="app"></div> |
| 393 | 397 | <script> |
| 394 | 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 | 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 | 404 | const $=s=>document.querySelector(s); |
| 398 | 405 | const app=$("#app"); |
| 399 | 406 | const fmt=new Intl.NumberFormat("fr-CA",{notation:"compact",maximumFractionDigits:1}); |
@@ -413,7 +420,7 @@ const PLAT={ | ||
| 413 | 420 | linkedin:{label:"LinkedIn",color:"#0a66c2"}, |
| 414 | 421 | threads:{label:"Threads",color:"#141814"}, |
| 415 | 422 | podcast:{label:"Balado",color:"#8940fa"}, |
| 416 | − "site-web":{label:"Site web",color:"#5b34a8"}, | |
| 423 | + "site-web":{label:"Site web",color:"#7048e8"}, | |
| 417 | 424 | autre:{label:"Autre",color:"#8b928c"}}; |
| 418 | 425 | const NICHE_LBL={"humour":"Humour","mode":"Mode","beaute":"Beauté","lifestyle":"Lifestyle", |
| 419 | 426 | "famille-parentalite":"Famille","cuisine":"Cuisine","gaming":"Gaming","tech":"Tech", |
@@ -453,15 +460,18 @@ function photoImg(c){ | ||
| 453 | 460 | return `<img loading="lazy" alt="${esc(c.display_name)}" src="${srcs[0]}" |
| 454 | 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 | 465 | function header(){ |
| 459 | 466 | return `<header class="header"><div class="container header-inner"> |
| 460 | 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 | 471 | <span class="brand-tag">Tous les créateurs québécois.<br>Tous leurs liens.</span> |
| 462 | 472 | <span class="header-spacer"></span> |
| 463 | 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 | 475 | <a class="hbtn primary" href="/#annuaire" data-nav>Explorer l'annuaire</a> |
| 466 | 476 | <span id="acct-slot"></span> |
| 467 | 477 | </div></header>`; |
@@ -479,7 +489,7 @@ async function loadAccount(){ | ||
| 479 | 489 | <span class="ka-badge">KA</span></a>`; |
| 480 | 490 | }else{ |
| 481 | 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 | 494 | bindNav(slot); |
| 485 | 495 | } |
@@ -492,26 +502,41 @@ function tabbar(active){ | ||
| 492 | 502 | ${t("/retrait","Retrait",`<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M8 12h8"/></svg>`,"optout")} |
| 493 | 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 | 507 | function footer(){ |
| 496 | − return `<footer class="footer"><div class="container footer-inner"> | |
| 497 | − <div><span class="brand">${brandSvg}Créa<span class="ka" style="background:var(--lime)">Ka</span></span> | |
| 498 | − <p>Annuaire public des créateurs de contenu québécois. Uniquement des profils publics | |
| 499 | − et professionnels ; aucune donnée privée. Retrait simple et respecté (Loi 25). | |
| 500 | − — Simon-Pierre Boucher</p> | |
| 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"> | |
| 508 | + const year=new Date().getFullYear(); | |
| 509 | + const others=KA_ECO.sites.filter(s=>s.id!=="crea-ka"); | |
| 510 | + const localLegal=[{label:"Retrait (opt-out)",href:"/retrait",nav:true}]; | |
| 511 | + return `<div class="footer-local"><div class="container"><nav> | |
| 512 | + <span class="klabel">Créa·Ka</span> | |
| 509 | 513 | <a href="/compte" data-nav>Mon compte KA ID</a> |
| 510 | 514 | <a href="/stats" data-nav>Statistiques</a> |
| 511 | 515 | <a href="/retrait" data-nav>Demander un retrait</a> |
| 516 | + <a href="/contact" data-nav>Contact</a> | |
| 512 | 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 | 538 | </div> |
| 514 | − </div></footer>`; | |
| 539 | + </footer>`; | |
| 515 | 540 | } |
| 516 | 541 | |
| 517 | 542 | /* ---------- annuaire ---------- */ |
@@ -542,7 +567,7 @@ function selectHtml(id,label,opts,val,lbls){ | ||
| 542 | 567 | return `<select class="f${val?" active":""}" id="${id}"><option value="">${label}</option>${o}</select>`; |
| 543 | 568 | } |
| 544 | 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 | 571 | if(!state.tax)state.tax=await api("/api/taxonomies"); |
| 547 | 572 | if(!state.stats)state.stats=await api("/api/stats").catch(()=>null); |
| 548 | 573 | const s=state.stats||{creators:0,accounts:0,by_platform:{}}; |
@@ -703,6 +728,7 @@ async function renderCompte(){ | ||
| 703 | 728 | les autres plateformes du Groupe KA. Créez-le en une minute si vous n'en avez pas.</p> |
| 704 | 729 | <div class="compte-actions"> |
| 705 | 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 | 732 | <a class="btn btn-ghost" href="https://www.groupe-ka.com" target="_blank" rel="noopener">Qu'est-ce que KA ID ?</a> |
| 707 | 733 | </div> |
| 708 | 734 | </div>`+footer()+tabbar(""); |
@@ -742,6 +768,38 @@ async function renderCompte(){ | ||
| 742 | 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 | 803 | /* ---------- retrait / opt-out ---------- */ |
| 746 | 804 | function renderOptout(){ |
| 747 | 805 | document.title="Retrait (opt-out) — Créa-Ka"; |
@@ -793,6 +851,7 @@ function route(){ | ||
| 793 | 851 | else if(p==="/retrait")r=renderOptout(); |
| 794 | 852 | else if(p==="/stats")r=renderStats(); |
| 795 | 853 | else if(p==="/compte")r=renderCompte(); |
| 854 | + else if(p==="/contact")r=renderContact(); | |
| 796 | 855 | else r=renderHome(); |
| 797 | 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