<!--
  Author: Simon-Pierre Boucher <contact@spboucher.ai>
  File:   frontend/src/index.template.html
  Desc:   Gabarit du frontend Créa-Ka — marqueurs remplacés par
          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","spotify":"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z","discord":"M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"} (tracés SVG simple-icons, CC0),
          /* -----------------------------------------------------------------------------
  Auteur : Simon-Pierre Boucher — contact@spboucher.ai
  Fichier : ka-ui/tokens.css — SOURCE CANONIQUE (repo ka-ui sur spbgit)
  Desc.  : Design system commun GROUPE KA « éditorial sharp » — tokens + socle
           de composants partagés par les 12 plateformes. Chaque site importe ce
           fichier PUIS surcharge uniquement son accent (voir accents.css).

    · Typo   : display Space Grotesk / texte Inter / micro-étiquettes JetBrains Mono
    · Palette: papier #f5f3ee · encre #141814 · vert profond #1c5c41 + ACCENT du site
    · Signature : bordures encre 1,5–2 px + ombres décalées dures, grain de film,
      surlignés d'accent inclinés (néo-brutalisme raffiné)
    · Breakpoints communs : 360 / 768 / 1024 / 1440 px (mobile-first)
    · Zones tactiles ≥ 44×44 px, safe-areas iOS, typographie fluide (clamp)
----------------------------------------------------------------------------- */

:root {
  /* ---- Palette fixe Groupe KA (identique sur les 12 sites) ---- */
  --paper: #f5f3ee;
  --surface: #ffffff;
  --surface-2: #faf9f5;
  --ink: #141814;
  --ink-2: #4d5551;
  --ink-3: #8b928c;
  --line: rgba(20, 24, 20, 0.14);
  --line-strong: rgba(20, 24, 20, 0.85);
  --green: #1c5c41;
  --green-deep: #123f2e;
  --amber: #e8a33d;
  --amber-soft: #fdf3e2;
  --danger: #b3423a;
  --danger-soft: #fbe9e7;

  /* ---- ACCENT du site — SEULES variables surchargées par marque ---- */
  --accent: #d9f26b;        /* défaut : lime Groupe KA */
  --accent-soft: #f0f9d2;
  --accent-deep: #123f2e;
  --on-accent: var(--ink);  /* couleur du texte posé SUR l'accent */

  /* alias rétro-compatibles (les satellites historiques utilisent --lime) */
  --lime: var(--accent);
  --lime-soft: var(--accent-soft);

  /* ---- Géométrie sharp ---- */
  --r-card: 10px;
  --r-ctl: 6px;
  --r-pill: 999px;

  /* ---- Ombres décalées — la signature du groupe ---- */
  --shadow-flat: 0 1px 2px rgba(20, 24, 20, 0.05);
  --shadow-off: 6px 6px 0 var(--ink);
  --shadow-off-soft: 8px 8px 0 rgba(20, 24, 20, 0.08);
  --shadow-off-mid: 4px 4px 0 rgba(20, 24, 20, 0.18);

  /* ---- Typographie ---- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Échelle fluide (mobile-first, clamp) */
  --fs-h1: clamp(30px, 3.2vw + 18px, 54px);
  --fs-h2: clamp(23px, 1.8vw + 14px, 34px);
  --fs-h3: clamp(17px, 0.9vw + 12px, 22px);
  --fs-body: 15px;
  --fs-small: 13px;

  /* Espacements */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Cible tactile minimale */
  --touch: 44px;

  /* ---- Échelle z-index COMMUNE (obligatoire — aucune valeur arbitraire) ----
     grain de film body::before = 9999 (pointer-events:none, toujours au-dessus,
     purement visuel). Tout composant interactif se place sous 9999 : */
  --z-content: 1;      /* contenu positionné ordinaire            */
  --z-sticky: 300;     /* éléments sticky de contenu (sous-nav…)  */
  --z-header: 500;     /* header du site                          */
  --z-bottombar: 600;  /* tab bar / barre d'action basse          */
  --z-dropdown: 700;   /* menus déroulants (au-dessus des barres) */
  --z-overlay: 800;    /* voile sous modale/panneau               */
  --z-modal: 900;      /* modales, panneaux de filtres, galeries  */
  --z-toast: 950;      /* notifications                           */

  /* ---- Hauteur de viewport DYNAMIQUE (barre du navigateur mobile qui se
     replie au scroll) : toujours var(--vh100), JAMAIS 100vh en dur. ---- */
  --vh100: 100vh;
}
@supports (height: 100dvh) { :root { --vh100: 100dvh; } }

/* ---- Socle ---- */
* { box-sizing: border-box; }
/* overflow-x: clip sur html ET body — sur WebKit iOS, clip posé sur body seul
   ne bloque PAS le défilement latéral du viewport (quirk de propagation) ;
   clip (≠ hidden) ne casse pas position:sticky. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: clip; /* jamais de débordement horizontal */
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.03em; margin: 0 0 0.5em; }
h1 { font-size: var(--fs-h1); line-height: 1.06; }
h2 { font-size: var(--fs-h2); line-height: 1.15; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Grain de film pleine page — ⚠️ jamais de z-index sur body > * (position:
   relative seulement), sinon les utilitaires z-* sont écrasés. */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; opacity: 0.35; z-index: 9999;
  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");
}
body > * { position: relative; }

/* ---- Conteneur commun ---- */
.container { max-width: 1152px; margin: 0 auto; padding: 0 var(--sp-4); }
@media (min-width: 768px) { .container { padding: 0 var(--sp-5); } }

/* ---- Micro-typographie signature ---- */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--green);
}
.kicker::before { content: ""; width: 22px; height: 2px; background: var(--green); }
.klabel {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);
}
.hl {
  display: inline-block; background: var(--accent); color: var(--on-accent);
  border-radius: 8px; padding: 0 10px 2px; transform: rotate(-1deg);
}
.outline-txt { color: transparent; -webkit-text-stroke: 2px var(--ink); }

/* ---- Boutons (cible ≥ 44 px) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--touch); padding: 10px 18px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  border: 1.5px solid var(--ink); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink);
  cursor: pointer; text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-off-mid); }
.btn:active { transform: translate(0, 0); box-shadow: none; }
.btn:disabled { opacity: 0.45; pointer-events: none; }
.btn-primary { background: var(--ink); color: var(--accent); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }

/* ---- Cartes ---- */
.card {
  background: var(--surface); border: 1.5px solid var(--ink);
  border-radius: var(--r-card); box-shadow: var(--shadow-off-soft);
  overflow: hidden;
}
.card-hover { transition: transform 0.15s, box-shadow 0.15s; }
.card-hover:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-off); }

/* ---- Chips / badges ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  border: 1.5px solid var(--ink); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
}
.chip-accent { background: var(--accent); color: var(--on-accent); }
.chip-soft { background: var(--accent-soft); border-color: var(--line); }

/* ---- Champs ---- */
.input, .select, .textarea {
  width: 100%; min-height: var(--touch); padding: 10px 14px;
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--ink); border-radius: var(--r-ctl);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; box-shadow: 3px 3px 0 var(--accent); border-color: var(--ink);
}
.input::placeholder { color: var(--ink-3); }

/* ---- Badge « Un service Groupe KA » (header, cliquable → hub) ---- */
.gk-badge {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 30px; padding: 3px 10px 4px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  border: 1.5px solid var(--ink); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2); white-space: nowrap;
}
.gk-badge b {
  font-family: var(--font-display); font-size: 12px; letter-spacing: -0.02em;
  text-transform: none; color: var(--ink);
}
.gk-badge b .ka {
  display: inline-block; background: var(--ink); color: var(--accent);
  border-radius: 5px; padding: 0 5px 1px; margin-left: 3px; transform: rotate(-2deg);
}
.gk-badge:hover .ka { transform: rotate(0); }
.gk-badge--dark { background: transparent; border-color: rgba(245,243,238,0.4); color: rgba(245,243,238,0.75); }
.gk-badge--dark b { color: var(--paper); }

/* ---- Footer commun (fond encre — voir react/KaFooter.tsx) ---- */
.ka-footer { margin-top: var(--sp-8); background: var(--ink); padding: 44px 0; font-size: 13px; color: rgba(245,243,238,0.75); }
.ka-footer a { text-decoration: none; }
.ka-footer .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.04em; color: var(--paper); text-decoration: none; }
.ka-footer .wordmark .ka { color: var(--accent); }
.ka-footer .desc { max-width: 640px; margin-top: var(--sp-4); }
.ka-footer .notice { max-width: 640px; margin-top: var(--sp-4); border-left: 2px solid var(--accent); padding-left: var(--sp-4); }
.ka-footer .notice b { color: var(--paper); }
.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; }
.ka-footer .sites a { color: rgba(245,243,238,0.65); }
.ka-footer .sites a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.ka-footer .contacts { display: grid; gap: 14px 32px; border-top: 1px solid rgba(245,243,238,0.15); margin-top: 30px; padding-top: 26px; }
@media (min-width: 768px) { .ka-footer .contacts { grid-template-columns: repeat(3, 1fr); } }
.ka-footer .contacts a { font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: rgba(245,243,238,0.85); }
.ka-footer .contacts a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.ka-footer .contacts span { display: block; margin-top: 3px; font-size: 11px; color: rgba(245,243,238,0.5); }
.ka-footer .legal { margin-top: 30px; font-family: var(--font-mono); font-size: 11px; color: rgba(245,243,238,0.45); }
.ka-footer .legal a { color: inherit; }
.ka-footer .legal a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

/* ---- Tableaux → cartes empilées sous 768 px ---- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767px) {
  .tbl-stack thead { display: none; }
  .tbl-stack tr { display: block; border: 1.5px solid var(--ink); border-radius: var(--r-card); margin-bottom: var(--sp-3); background: var(--surface); }
  .tbl-stack td { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 8px 12px; border: 0; }
  .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); }
}

/* ---- Utilitaires responsive ---- */
.only-mobile { display: initial; } .only-desktop { display: none; }
@media (min-width: 768px) { .only-mobile { display: none; } .only-desktop { display: initial; } }

/* =============================================================================
   SOCLE MOBILE OBLIGATOIRE (2026-08-19) — règles communes aux 13 sites.
   RÈGLES pour tout composant futur :
   · TAP, jamais :hover, pour ouvrir un menu (le survol n'existe pas au doigt) ;
     le :hover ne sert qu'aux effets décoratifs, sous @media (hover: hover).
   · var(--vh100) (dvh) et JAMAIS 100vh pour tout élément calé sur le viewport.
   · position:fixed exige qu'AUCUN ancêtre n'ait transform/filter/perspective/
     will-change/backdrop-filter — sinon monter l'élément à la racine (body).
   · Barre basse fixe = .ka-bottombar + classe has-bottombar sur <body>.
   · Menu/panneau ouvert = .ka-scroll-lock sur <html> (scroll arrière-plan gelé).
   · z-index : uniquement l'échelle --z-* ci-dessus.
   · Zones tactiles ≥ var(--touch) (44 px), champs ≥ 16 px (zoom iOS).
   ========================================================================== */

/* Anti-zoom iOS : au doigt, aucun champ sous 16 px (le focus d'un champ <16 px
   déclenche un zoom automatique de page sur Safari iOS). !important assumé :
   c'est un filet d'accessibilité, un champ plus petit casse le zoom quoi
   qu'il arrive — ne s'applique qu'aux écrans tactiles. */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: max(16px, 1em) !important; }
}

/* Zone tactile du badge Groupe KA étendue à ≥44 px au doigt, sans changer
   son rendu (débord de la zone cliquable via pseudo-élément). */
@media (pointer: coarse) {
  .gk-badge { position: relative; }
  .gk-badge::after { content: ""; position: absolute; inset: -8px; }
}

/* Hauteurs viewport dynamiques */
.h-viewport { height: 100vh; height: 100dvh; }
.min-h-viewport { min-height: 100vh; min-height: 100dvh; }

/* Barre fixe basse fiable : safe-area iPhone incluse, immunisée contre les
   transforms accidentels, et compensation d'espace via body.has-bottombar. */
.ka-bottombar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-bottombar);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface);
  border-top: 1.5px solid var(--ink);
  transform: none !important; filter: none !important;
}
body.has-bottombar { padding-bottom: calc(var(--bottombar-h, 64px) + env(safe-area-inset-bottom, 0px)); }

/* Verrou de scroll d'arrière-plan (menu mobile, modale, panneau de filtres
   ouverts) : ajouter/retirer .ka-scroll-lock sur <html>. */
html.ka-scroll-lock, html.ka-scroll-lock body { overflow: hidden !important; overscroll-behavior: none; }

/* Menu déroulant de référence : au-dessus de tout contenu (cartes Mapbox
   incluses), défilement interne avec élan, jamais plus haut que l'écran. */
.ka-menu {
  position: absolute; z-index: var(--z-dropdown);
  min-width: 180px;
  max-height: min(60vh, 420px); max-height: min(60dvh, 420px);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--surface); border: 1.5px solid var(--ink);
  border-radius: var(--r-card); box-shadow: var(--shadow-off-mid);
}
.ka-menu a, .ka-menu button, .ka-menu label, .ka-menu [role="menuitem"], .ka-menu [role="option"] {
  display: flex; align-items: center; min-height: var(--touch);
  padding: 10px 14px; width: 100%; text-decoration: none;
}
/* Voile plein écran sous une modale / un panneau */
.ka-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(20, 24, 20, 0.45);
}
 (ka/tokens.css — design system commun Groupe KA,
          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"},{"id":"job-ka","wordmark":"Job·Ka","domain":"www.job-ka.com","accent":"#0c8599","accentSoft":"#def0f4","accentDeep":"#095c6b","onAccent":"#ffffff","tagline":"Tous les emplois des employeurs québécois"}],"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,
          sites, mentions légales du groupe : footer commun + page /contact).
          Système « éditorial sharp » du Groupe KA (papier grainé #f5f3ee,
          encre #141814, bordures encre + ombres décalées dures, Space Grotesk
          / Inter / JetBrains Mono) — accent attribué à Créa-Ka : VIOLET
          (--accent:#7048e8). Patrons mobiles calqués sur Lou-Ka (tab bar
          4 onglets, filtres défilants, anti-zoom iOS).
          Routes : / · /createur/{id} · /stats · /retrait · /compte · /contact
-->
<!DOCTYPE html>
<html lang="fr-CA">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#141814">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://unavatar.io">
<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">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!--KA:SEO-->
<title>KevFps4K (@kevfps4k) — profils et liens | Créa-Ka</title>
<meta name="description" content="Live le Soir 8heure Pm sur TikTok Kevfps4k 🎮! Streamer Quebecois Passionner des jeux video en tout genre depuis Longtemps Jadore le streaming sur twitch et P…">
<link rel="canonical" href="https://www.crea-ka.com/createur/kevfps4k">
<meta property="og:site_name" content="Créa-Ka">
<meta property="og:locale" content="fr_CA">
<meta property="og:type" content="profile">
<meta property="og:title" content="KevFps4K (@kevfps4k) — profils et liens | Créa-Ka">
<meta property="og:description" content="Live le Soir 8heure Pm sur TikTok Kevfps4k 🎮! Streamer Quebecois Passionner des jeux video en tout genre depuis Longtemps Jadore le streaming sur twitch et P…">
<meta property="og:url" content="https://www.crea-ka.com/createur/kevfps4k">
<meta property="og:image" content="https://unavatar.io/tiktok/kevfps4k">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="KevFps4K (@kevfps4k) — profils et liens | Créa-Ka">
<meta name="twitter:description" content="Live le Soir 8heure Pm sur TikTok Kevfps4k 🎮! Streamer Quebecois Passionner des jeux video en tout genre depuis Longtemps Jadore le streaming sur twitch et P…">
<meta name="twitter:image" content="https://unavatar.io/tiktok/kevfps4k">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"ProfilePage","@id":"https://www.crea-ka.com/createur/kevfps4k","url":"https://www.crea-ka.com/createur/kevfps4k","name":"KevFps4K (@kevfps4k) — profils et liens | Créa-Ka","inLanguage":"fr-CA","isPartOf":{"@id":"https://www.crea-ka.com/#website"},"mainEntity":{"@type":"Person","name":"KevFps4K","url":"https://www.crea-ka.com/createur/kevfps4k","alternateName":"@kevfps4k","description":"Live le Soir 8heure Pm sur TikTok Kevfps4k 🎮! Streamer Quebecois Passionner des jeux video en tout genre depuis Longtemps Jadore le streaming sur twitch et Parler avec vous sur mes lives le but principal est davoir un max de fps et du gros fun alors go enjoy et follow la gang 💪🏼","image":"https://unavatar.io/tiktok/kevfps4k","sameAs":["https://www.tiktok.com/@kevfps4k","https://www.twitch.tv/kevfps4k","https://www.youtube.com/@kevfps4k"]},"dateModified":"2026-08-21T21:42:23Z","dateCreated":"2026-08-20T18:53:58Z"}</script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https://www.crea-ka.com/"},{"@type":"ListItem","position":2,"name":"KevFps4K","item":"https://www.crea-ka.com/createur/kevfps4k"}]}</script>
<!--/KA:SEO-->
<style>
/* ka/tokens.css — design system commun Groupe KA, importé EN PREMIER
   (injecté au build par scripts/build_frontend.py) */
/* -----------------------------------------------------------------------------
  Auteur : Simon-Pierre Boucher — contact@spboucher.ai
  Fichier : ka-ui/tokens.css — SOURCE CANONIQUE (repo ka-ui sur spbgit)
  Desc.  : Design system commun GROUPE KA « éditorial sharp » — tokens + socle
           de composants partagés par les 12 plateformes. Chaque site importe ce
           fichier PUIS surcharge uniquement son accent (voir accents.css).

    · Typo   : display Space Grotesk / texte Inter / micro-étiquettes JetBrains Mono
    · Palette: papier #f5f3ee · encre #141814 · vert profond #1c5c41 + ACCENT du site
    · Signature : bordures encre 1,5–2 px + ombres décalées dures, grain de film,
      surlignés d'accent inclinés (néo-brutalisme raffiné)
    · Breakpoints communs : 360 / 768 / 1024 / 1440 px (mobile-first)
    · Zones tactiles ≥ 44×44 px, safe-areas iOS, typographie fluide (clamp)
----------------------------------------------------------------------------- */

:root {
  /* ---- Palette fixe Groupe KA (identique sur les 12 sites) ---- */
  --paper: #f5f3ee;
  --surface: #ffffff;
  --surface-2: #faf9f5;
  --ink: #141814;
  --ink-2: #4d5551;
  --ink-3: #8b928c;
  --line: rgba(20, 24, 20, 0.14);
  --line-strong: rgba(20, 24, 20, 0.85);
  --green: #1c5c41;
  --green-deep: #123f2e;
  --amber: #e8a33d;
  --amber-soft: #fdf3e2;
  --danger: #b3423a;
  --danger-soft: #fbe9e7;

  /* ---- ACCENT du site — SEULES variables surchargées par marque ---- */
  --accent: #d9f26b;        /* défaut : lime Groupe KA */
  --accent-soft: #f0f9d2;
  --accent-deep: #123f2e;
  --on-accent: var(--ink);  /* couleur du texte posé SUR l'accent */

  /* alias rétro-compatibles (les satellites historiques utilisent --lime) */
  --lime: var(--accent);
  --lime-soft: var(--accent-soft);

  /* ---- Géométrie sharp ---- */
  --r-card: 10px;
  --r-ctl: 6px;
  --r-pill: 999px;

  /* ---- Ombres décalées — la signature du groupe ---- */
  --shadow-flat: 0 1px 2px rgba(20, 24, 20, 0.05);
  --shadow-off: 6px 6px 0 var(--ink);
  --shadow-off-soft: 8px 8px 0 rgba(20, 24, 20, 0.08);
  --shadow-off-mid: 4px 4px 0 rgba(20, 24, 20, 0.18);

  /* ---- Typographie ---- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Échelle fluide (mobile-first, clamp) */
  --fs-h1: clamp(30px, 3.2vw + 18px, 54px);
  --fs-h2: clamp(23px, 1.8vw + 14px, 34px);
  --fs-h3: clamp(17px, 0.9vw + 12px, 22px);
  --fs-body: 15px;
  --fs-small: 13px;

  /* Espacements */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Cible tactile minimale */
  --touch: 44px;

  /* ---- Échelle z-index COMMUNE (obligatoire — aucune valeur arbitraire) ----
     grain de film body::before = 9999 (pointer-events:none, toujours au-dessus,
     purement visuel). Tout composant interactif se place sous 9999 : */
  --z-content: 1;      /* contenu positionné ordinaire            */
  --z-sticky: 300;     /* éléments sticky de contenu (sous-nav…)  */
  --z-header: 500;     /* header du site                          */
  --z-bottombar: 600;  /* tab bar / barre d'action basse          */
  --z-dropdown: 700;   /* menus déroulants (au-dessus des barres) */
  --z-overlay: 800;    /* voile sous modale/panneau               */
  --z-modal: 900;      /* modales, panneaux de filtres, galeries  */
  --z-toast: 950;      /* notifications                           */

  /* ---- Hauteur de viewport DYNAMIQUE (barre du navigateur mobile qui se
     replie au scroll) : toujours var(--vh100), JAMAIS 100vh en dur. ---- */
  --vh100: 100vh;
}
@supports (height: 100dvh) { :root { --vh100: 100dvh; } }

/* ---- Socle ---- */
* { box-sizing: border-box; }
/* overflow-x: clip sur html ET body — sur WebKit iOS, clip posé sur body seul
   ne bloque PAS le défilement latéral du viewport (quirk de propagation) ;
   clip (≠ hidden) ne casse pas position:sticky. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: clip; /* jamais de débordement horizontal */
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.03em; margin: 0 0 0.5em; }
h1 { font-size: var(--fs-h1); line-height: 1.06; }
h2 { font-size: var(--fs-h2); line-height: 1.15; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Grain de film pleine page — ⚠️ jamais de z-index sur body > * (position:
   relative seulement), sinon les utilitaires z-* sont écrasés. */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; opacity: 0.35; z-index: 9999;
  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");
}
body > * { position: relative; }

/* ---- Conteneur commun ---- */
.container { max-width: 1152px; margin: 0 auto; padding: 0 var(--sp-4); }
@media (min-width: 768px) { .container { padding: 0 var(--sp-5); } }

/* ---- Micro-typographie signature ---- */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--green);
}
.kicker::before { content: ""; width: 22px; height: 2px; background: var(--green); }
.klabel {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);
}
.hl {
  display: inline-block; background: var(--accent); color: var(--on-accent);
  border-radius: 8px; padding: 0 10px 2px; transform: rotate(-1deg);
}
.outline-txt { color: transparent; -webkit-text-stroke: 2px var(--ink); }

/* ---- Boutons (cible ≥ 44 px) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--touch); padding: 10px 18px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  border: 1.5px solid var(--ink); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink);
  cursor: pointer; text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-off-mid); }
.btn:active { transform: translate(0, 0); box-shadow: none; }
.btn:disabled { opacity: 0.45; pointer-events: none; }
.btn-primary { background: var(--ink); color: var(--accent); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }

/* ---- Cartes ---- */
.card {
  background: var(--surface); border: 1.5px solid var(--ink);
  border-radius: var(--r-card); box-shadow: var(--shadow-off-soft);
  overflow: hidden;
}
.card-hover { transition: transform 0.15s, box-shadow 0.15s; }
.card-hover:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-off); }

/* ---- Chips / badges ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  border: 1.5px solid var(--ink); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
}
.chip-accent { background: var(--accent); color: var(--on-accent); }
.chip-soft { background: var(--accent-soft); border-color: var(--line); }

/* ---- Champs ---- */
.input, .select, .textarea {
  width: 100%; min-height: var(--touch); padding: 10px 14px;
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--ink); border-radius: var(--r-ctl);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; box-shadow: 3px 3px 0 var(--accent); border-color: var(--ink);
}
.input::placeholder { color: var(--ink-3); }

/* ---- Badge « Un service Groupe KA » (header, cliquable → hub) ---- */
.gk-badge {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 30px; padding: 3px 10px 4px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  border: 1.5px solid var(--ink); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2); white-space: nowrap;
}
.gk-badge b {
  font-family: var(--font-display); font-size: 12px; letter-spacing: -0.02em;
  text-transform: none; color: var(--ink);
}
.gk-badge b .ka {
  display: inline-block; background: var(--ink); color: var(--accent);
  border-radius: 5px; padding: 0 5px 1px; margin-left: 3px; transform: rotate(-2deg);
}
.gk-badge:hover .ka { transform: rotate(0); }
.gk-badge--dark { background: transparent; border-color: rgba(245,243,238,0.4); color: rgba(245,243,238,0.75); }
.gk-badge--dark b { color: var(--paper); }

/* ---- Footer commun (fond encre — voir react/KaFooter.tsx) ---- */
.ka-footer { margin-top: var(--sp-8); background: var(--ink); padding: 44px 0; font-size: 13px; color: rgba(245,243,238,0.75); }
.ka-footer a { text-decoration: none; }
.ka-footer .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.04em; color: var(--paper); text-decoration: none; }
.ka-footer .wordmark .ka { color: var(--accent); }
.ka-footer .desc { max-width: 640px; margin-top: var(--sp-4); }
.ka-footer .notice { max-width: 640px; margin-top: var(--sp-4); border-left: 2px solid var(--accent); padding-left: var(--sp-4); }
.ka-footer .notice b { color: var(--paper); }
.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; }
.ka-footer .sites a { color: rgba(245,243,238,0.65); }
.ka-footer .sites a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.ka-footer .contacts { display: grid; gap: 14px 32px; border-top: 1px solid rgba(245,243,238,0.15); margin-top: 30px; padding-top: 26px; }
@media (min-width: 768px) { .ka-footer .contacts { grid-template-columns: repeat(3, 1fr); } }
.ka-footer .contacts a { font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: rgba(245,243,238,0.85); }
.ka-footer .contacts a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.ka-footer .contacts span { display: block; margin-top: 3px; font-size: 11px; color: rgba(245,243,238,0.5); }
.ka-footer .legal { margin-top: 30px; font-family: var(--font-mono); font-size: 11px; color: rgba(245,243,238,0.45); }
.ka-footer .legal a { color: inherit; }
.ka-footer .legal a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

/* ---- Tableaux → cartes empilées sous 768 px ---- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767px) {
  .tbl-stack thead { display: none; }
  .tbl-stack tr { display: block; border: 1.5px solid var(--ink); border-radius: var(--r-card); margin-bottom: var(--sp-3); background: var(--surface); }
  .tbl-stack td { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 8px 12px; border: 0; }
  .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); }
}

/* ---- Utilitaires responsive ---- */
.only-mobile { display: initial; } .only-desktop { display: none; }
@media (min-width: 768px) { .only-mobile { display: none; } .only-desktop { display: initial; } }

/* =============================================================================
   SOCLE MOBILE OBLIGATOIRE (2026-08-19) — règles communes aux 13 sites.
   RÈGLES pour tout composant futur :
   · TAP, jamais :hover, pour ouvrir un menu (le survol n'existe pas au doigt) ;
     le :hover ne sert qu'aux effets décoratifs, sous @media (hover: hover).
   · var(--vh100) (dvh) et JAMAIS 100vh pour tout élément calé sur le viewport.
   · position:fixed exige qu'AUCUN ancêtre n'ait transform/filter/perspective/
     will-change/backdrop-filter — sinon monter l'élément à la racine (body).
   · Barre basse fixe = .ka-bottombar + classe has-bottombar sur <body>.
   · Menu/panneau ouvert = .ka-scroll-lock sur <html> (scroll arrière-plan gelé).
   · z-index : uniquement l'échelle --z-* ci-dessus.
   · Zones tactiles ≥ var(--touch) (44 px), champs ≥ 16 px (zoom iOS).
   ========================================================================== */

/* Anti-zoom iOS : au doigt, aucun champ sous 16 px (le focus d'un champ <16 px
   déclenche un zoom automatique de page sur Safari iOS). !important assumé :
   c'est un filet d'accessibilité, un champ plus petit casse le zoom quoi
   qu'il arrive — ne s'applique qu'aux écrans tactiles. */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: max(16px, 1em) !important; }
}

/* Zone tactile du badge Groupe KA étendue à ≥44 px au doigt, sans changer
   son rendu (débord de la zone cliquable via pseudo-élément). */
@media (pointer: coarse) {
  .gk-badge { position: relative; }
  .gk-badge::after { content: ""; position: absolute; inset: -8px; }
}

/* Hauteurs viewport dynamiques */
.h-viewport { height: 100vh; height: 100dvh; }
.min-h-viewport { min-height: 100vh; min-height: 100dvh; }

/* Barre fixe basse fiable : safe-area iPhone incluse, immunisée contre les
   transforms accidentels, et compensation d'espace via body.has-bottombar. */
.ka-bottombar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-bottombar);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface);
  border-top: 1.5px solid var(--ink);
  transform: none !important; filter: none !important;
}
body.has-bottombar { padding-bottom: calc(var(--bottombar-h, 64px) + env(safe-area-inset-bottom, 0px)); }

/* Verrou de scroll d'arrière-plan (menu mobile, modale, panneau de filtres
   ouverts) : ajouter/retirer .ka-scroll-lock sur <html>. */
html.ka-scroll-lock, html.ka-scroll-lock body { overflow: hidden !important; overscroll-behavior: none; }

/* Menu déroulant de référence : au-dessus de tout contenu (cartes Mapbox
   incluses), défilement interne avec élan, jamais plus haut que l'écran. */
.ka-menu {
  position: absolute; z-index: var(--z-dropdown);
  min-width: 180px;
  max-height: min(60vh, 420px); max-height: min(60dvh, 420px);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--surface); border: 1.5px solid var(--ink);
  border-radius: var(--r-card); box-shadow: var(--shadow-off-mid);
}
.ka-menu a, .ka-menu button, .ka-menu label, .ka-menu [role="menuitem"], .ka-menu [role="option"] {
  display: flex; align-items: center; min-height: var(--touch);
  padding: 10px 14px; width: 100%; text-decoration: none;
}
/* Voile plein écran sous une modale / un panneau */
.ka-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(20, 24, 20, 0.45);
}

</style>
<style>
/* Surcharges Créa-Ka par-dessus ka/tokens.css. Convention du groupe : les
   NOMS de variables sont partagés (--accent/--lime), seules les VALEURS
   changent — accent attribué à Créa-Ka : VIOLET. */
:root{
  --accent:#7048e8; --accent-soft:#ece5fc; --accent-deep:#5433b8; --on-accent:#ffffff;
  /* alias rétro-compatibles (le CSS historique du site utilise --lime) */
  --lime:var(--accent); --lime-soft:var(--accent-soft);
  --green:var(--accent-deep);   /* primaire du site = violet profond */
  --green-deep:#3d2178;
}
/* le layout du site est calibré sur des titres sans marge basse */
h1,h2,h3,h4{margin:0}
a{text-decoration:none} button{font-family:inherit;cursor:pointer}
.icn{width:1em;height:1em;display:block;fill:currentColor}
.container{max-width:1240px;margin:0 auto;padding:0 24px}
@media(max-width:640px){.container{padding:0 16px}}

/* ---------- cartes & boutons (langage du groupe) ---------- */
.gk-card{background:var(--surface);border:1.5px solid var(--ink);
  border-radius:var(--r-card);box-shadow:var(--shadow-off-soft)}
.gk-hover{transition:transform .18s ease,box-shadow .18s ease}
.gk-hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-off)}
.btn:active{transform:translate(2px,2px);box-shadow:none!important}
.btn-primary{box-shadow:4px 4px 0 rgba(20,24,20,.25)}

/* ===== header ===== */
.header{position:sticky;top:0;z-index:var(--z-header,500);background:var(--paper);
  border-bottom:1.5px solid var(--ink)}
.header-inner{display:flex;align-items:center;gap:16px;height:64px}
.brand{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.03em;
  display:flex;align-items:center;line-height:1;color:var(--ink)}
.brand svg{margin-right:11px;flex:none}
@media(pointer:coarse){.brand{position:relative}.brand::after{content:"";position:absolute;inset:-8px}}
.brand .ka{background:var(--accent);color:var(--on-accent);border-radius:6px;padding:0 6px 1px;margin-left:2px;transform:rotate(-1deg)}
.brand-tag{font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--ink-3);
  line-height:1.5;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:1040px){.brand-tag{display:none}}
.header-spacer{flex:1}
.hbtn{border:1.5px solid var(--ink);background:var(--surface);color:var(--ink);
  border-radius:var(--r-ctl);padding:8px 16px;min-height:44px;font-family:var(--font-display);
  font-size:13px;font-weight:700;transition:.15s;display:inline-flex;align-items:center;
  gap:8px;white-space:nowrap;box-shadow:3px 3px 0 rgba(20,24,20,.12)}
.hbtn:hover{background:var(--accent);color:var(--on-accent)}
.hbtn:active{transform:translate(2px,2px);box-shadow:none}
.hbtn.primary{background:var(--ink);color:var(--accent)}
.hbtn.primary:hover{background:var(--accent-deep);color:var(--on-accent)}
@media(max-width:940px){.header .hbtn:not(.acct){display:none}}
/* bouton / jeton de compte KA ID — toujours visible, même sur mobile */
.hbtn.acct{padding:7px 14px}
.hbtn.acct img{width:22px;height:22px;border-radius:50%;object-fit:cover;
  border:1.5px solid var(--ink);margin-left:-4px}
.hbtn.acct .ka-badge{background:var(--accent);color:var(--on-accent);border-radius:4px;padding:0 5px;
  font-family:var(--font-mono);font-size:10px;font-weight:700}
.hbtn:hover .ka-badge{background:var(--on-accent);color:var(--accent)}
/* badge « Un service Groupe KA » (ka/GroupeKaBadge — styles dans tokens.css) */
.header .gk-badge{flex:none}
.hbtn .acct-short{display:none}
@media(max-width:560px){
  .header-inner{gap:10px}
  .header .gk-badge .pfx{display:none}
  .hbtn .acct-long{display:none}.hbtn .acct-short{display:inline}}
@media(max-width:400px){.brand svg{width:26px;height:26px;margin-right:8px}.brand{font-size:20px}.header .gk-badge{display:none}}

/* ===== page compte (carte de membre Groupe KA) ===== */
.compte-page{max-width:640px;margin:0 auto;padding:44px 0 70px}
.membercard{background:var(--ink);border:1.5px solid var(--ink);border-radius:14px;
  padding:28px;color:var(--paper);box-shadow:var(--shadow-off);margin-top:24px;
  position:relative;overflow:hidden}
.membercard::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;
  height:160px;border-radius:50%;background:rgba(112,72,232,.18)}
.mc-brand{font-family:var(--font-mono);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--accent-soft)}
.mc-row{display:flex;gap:18px;align-items:center;margin-top:18px}
.mc-avatar{width:72px;height:72px;border-radius:14px;border:2px solid var(--accent);
  background:var(--green-deep);overflow:hidden;flex:none;display:flex;
  align-items:center;justify-content:center;font-family:var(--font-display);
  font-weight:700;font-size:26px;color:var(--accent-soft)}
.mc-avatar img{width:100%;height:100%;object-fit:cover}
.mc-name{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--paper)}
.mc-kaid{font-family:var(--font-mono);font-size:12px;color:var(--accent-soft);margin-top:2px;letter-spacing:.04em}
.mc-role{display:inline-flex;background:var(--accent);color:var(--on-accent);border-radius:5px;
  padding:2px 10px;font-family:var(--font-mono);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;margin-top:8px}
.mc-meta{margin-top:20px;display:grid;gap:6px;font-size:12.5px;color:rgba(245,243,238,.75)}
.mc-meta b{color:var(--paper);font-weight:600}
.compte-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

/* ===== héros ===== */
.hero{padding:54px 0 26px}
@media(max-width:640px){.hero{padding:30px 0 12px}}
.hero h1{font-size:clamp(30px,5.4vw,54px);font-weight:700;max-width:820px;line-height:1.06;
  text-transform:uppercase}
.hero p.lead{color:var(--ink-2);font-size:clamp(14.5px,2vw,16.5px);max-width:640px;margin:18px 0 0}
.stats-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.stat-pill{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-ctl);
  padding:8px 16px;font-family:var(--font-mono);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);
  display:inline-flex;gap:8px;align-items:center;box-shadow:3px 3px 0 rgba(20,24,20,.1)}
.stat-pill b{font-family:var(--font-display);color:var(--ink);font-size:16px;letter-spacing:0}
.advantages{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:32px 0 8px}
@media(max-width:900px){.advantages{grid-template-columns:repeat(2,1fr);gap:10px}}
.adv{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card);
  padding:16px;box-shadow:var(--shadow-off-soft)}
.adv .ico{width:36px;height:36px;border-radius:8px;border:1.5px solid var(--ink);
  background:var(--accent);color:var(--on-accent);display:flex;align-items:center;
  justify-content:center;margin-bottom:10px;font-size:15px}
.adv:nth-child(2n) .ico{color:var(--ink)}
.adv:nth-child(2n) .ico{background:var(--amber-soft)}
.adv h3{font-size:14px;margin-bottom:3px}
.adv p{margin:0;font-size:12px;color:var(--ink-3);line-height:1.45}

/* ===== recherche + filtres ===== */
.searchbar{position:sticky;top:64px;z-index:var(--z-sticky,300);background:rgba(245,243,238,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:12px 0;border-bottom:1.5px solid var(--ink)}
.search-wrap{display:flex;gap:10px;align-items:center}
.search-input{flex:1 1 auto;display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1.5px solid var(--ink);border-radius:var(--r-ctl);padding:10px 15px;
  transition:.15s;min-width:0;box-shadow:3px 3px 0 rgba(20,24,20,.08)}
.search-input:focus-within{box-shadow:3px 3px 0 rgba(112,72,232,.35)}
.search-input input{border:0;background:none;outline:none;font:inherit;flex:1;color:var(--ink);min-width:0}
.search-input svg{flex:none;color:var(--ink-3)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
select.f{appearance:none;-webkit-appearance:none;border:1.5px solid var(--ink);
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23141814' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border-radius:var(--r-ctl);padding:9px 30px 9px 14px;font-family:var(--font-display);
  font-size:13px;font-weight:700;color:var(--ink-2);max-width:170px;
  box-shadow:3px 3px 0 rgba(20,24,20,.08)}
select.f:focus{outline:2px solid var(--green);outline-offset:1px}
select.f.active{background-color:var(--accent-soft);color:var(--ink);border-color:var(--accent-deep)}
@media(max-width:760px){
  .search-wrap{flex-wrap:wrap}
  .search-input{flex-basis:100%}
  .search-input input{font-size:16px}
  .filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin:0 -16px;padding:4px 16px 6px;scrollbar-width:none;width:calc(100% + 32px)}
  .filters::-webkit-scrollbar{display:none}
  select.f{flex:none;font-size:16px;padding:8px 30px 8px 13px}
}

/* ===== grille créateurs ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;padding:24px 0 10px}
@media(max-width:640px){.grid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:420px){.grid{grid-template-columns:1fr;gap:14px}}
.card{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--shadow-off-soft);transition:transform .18s ease,box-shadow .18s ease;
  display:flex;flex-direction:column}
.card:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-off)}
.card-photo{position:relative;aspect-ratio:1/1;background:
  repeating-linear-gradient(-45deg,var(--green-deep) 0 14px,#33195f 14px 28px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-bottom:1.5px solid var(--ink)}
.card-photo .init{color:var(--accent-soft);font-family:var(--font-display);font-weight:700;
  font-size:46px;letter-spacing:.02em}
.card-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-photo .tier{position:absolute;top:10px;left:10px;z-index:2}
.card-photo .nplat{position:absolute;top:10px;right:10px;z-index:2;background:var(--ink);
  color:var(--accent-soft);border:1.5px solid var(--ink);border-radius:var(--r-ctl);
  padding:2px 8px;font-family:var(--font-mono);font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em}
.tier{display:inline-flex;padding:2px 9px;border:1.5px solid var(--ink);
  border-radius:var(--r-ctl);font-family:var(--font-mono);font-size:9.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--surface);color:var(--ink)}
.tier.mega{background:var(--accent);color:var(--on-accent)}
.tier.macro{background:var(--amber-soft)}
.card-body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:9px;flex:1}
.card-name{font-family:var(--font-display);font-size:16px;font-weight:700;
  letter-spacing:-.01em;line-height:1.25;display:flex;align-items:center;gap:6px}
.vbadge{color:var(--green);flex:none;width:15px;height:15px}
.card-sub{font-family:var(--font-mono);font-size:10px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.05em;display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:-4px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-ctl);
  padding:2px 10px;font-family:var(--font-body);font-size:11px;font-weight:600;color:var(--ink-2);
  white-space:nowrap;text-transform:none;letter-spacing:0}
.reach{font-size:12px;color:var(--ink-2)}
.reach b{font-family:var(--font-display);color:var(--ink);font-size:15.5px;font-weight:700}
.platrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:2px}
.plat{width:32px;height:32px;border-radius:8px;border:1.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;color:#fff;transition:.15s;
  box-shadow:2px 2px 0 rgba(20,24,20,.25)}
.plat svg{width:15px;height:15px;fill:currentColor}
.plat:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.more-wrap{display:flex;justify-content:center;padding:16px 0 44px}
.empty{padding:60px 0;text-align:center;color:var(--ink-3);grid-column:1/-1}
.count-line{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-3);padding-top:18px}
.count-line b{color:var(--ink)}

/* ===== page créateur ===== */
.cpage{padding:30px 0 60px}
@media(max-width:640px){.cpage{padding:20px 0 40px}}
.backlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--green);margin-bottom:20px}
.cpage-head{display:flex;gap:26px;align-items:center;background:var(--ink);
  border:1.5px solid var(--ink);border-radius:var(--r-card);padding:32px;
  color:var(--paper);box-shadow:var(--shadow-off);flex-wrap:wrap}
@media(max-width:640px){.cpage-head{padding:22px 18px;gap:16px}}
.cavatar{width:104px;height:104px;border-radius:var(--r-card);
  background:repeating-linear-gradient(-45deg,var(--green-deep) 0 14px,#33195f 14px 28px);
  color:var(--accent-soft);flex:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:36px;overflow:hidden;
  position:relative;border:2px solid var(--accent)}
@media(max-width:640px){.cavatar{width:76px;height:76px;font-size:26px}}
.cavatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cpage-head h1{font-size:clamp(24px,4vw,40px);font-weight:700;color:var(--paper);
  line-height:1.1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;text-transform:uppercase}
.cpage-head h1 .vbadge{width:22px;height:22px;color:var(--accent-soft)}
.cpage-head .meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.mchip{background:rgba(245,243,238,.12);border:1px solid rgba(245,243,238,.3);
  border-radius:var(--r-ctl);padding:3px 11px;font-family:var(--font-mono);
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--paper)}
.mchip.o{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.cpage-reach{margin-left:auto;text-align:right}
.cpage-reach b{display:block;font-family:var(--font-display);
  font-size:clamp(28px,3.6vw,40px);font-weight:700;color:var(--accent-soft);letter-spacing:-.02em}
.cpage-reach span{font-family:var(--font-mono);font-size:10px;color:rgba(245,243,238,.6);
  text-transform:uppercase;letter-spacing:.08em;font-weight:700}
@media(max-width:760px){.cpage-reach{margin-left:0;text-align:left;flex-basis:100%}}
.cpage-bio{margin:24px 0 0;max-width:820px;color:var(--ink-2);font-size:15px}
.cpage-notes{margin:14px 0 0;max-width:820px;color:var(--ink-2);font-size:12.5px;
  background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card);
  padding:13px 17px;box-shadow:var(--shadow-off-soft)}
.sect-title{font-size:19px;margin:36px 0 15px;display:flex;align-items:center;gap:10px;text-transform:uppercase}
/* ===== page créateur : métriques calculées + onglets par plateforme ===== */
.hkpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:22px 0 6px}
.hkpi{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card);
  box-shadow:var(--shadow-off-soft);padding:13px 15px}
.hkpi b{display:block;font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--ink);line-height:1}
.hkpi span{display:block;margin-top:5px;font-family:var(--font-mono);font-size:9.5px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.05em;font-weight:700}
/* barre d'onglets */
.ptabs{display:flex;gap:8px;overflow-x:auto;margin:26px 0 0;padding-bottom:2px}
.ptabs::-webkit-scrollbar{height:5px}.ptabs::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.ptab{flex:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--ink);border-bottom:none;
  border-radius:12px 12px 0 0;padding:10px 15px;font-family:var(--font-display);
  font-weight:700;font-size:13px;color:var(--ink-2);transition:.14s;margin-bottom:-1.5px}
.ptab:hover{background:var(--surface-2)}
.ptab.on{background:var(--accent);color:var(--on-accent);border-color:var(--ink)}
.ptab.on .ptab-ico{color:var(--on-accent)!important}
.ptab-ico{width:16px;height:16px;display:inline-flex}.ptab-ico svg{width:16px;height:16px}
.ptab-n{font-family:var(--font-mono);font-size:10px;opacity:.75;font-weight:700}
.ppanels{border:1.5px solid var(--ink);border-radius:0 12px 12px 12px;
  background:var(--surface);box-shadow:var(--shadow-off-soft);padding:20px 18px 22px}
.ppanel{display:none}.ppanel.on{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ppanel-head{display:flex;align-items:center;gap:13px}
.ppanel-head .plat{width:46px;height:46px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center}
.ppanel-head .plat svg{width:22px;height:22px}
.ppanel-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ppanel-name{font-family:var(--font-display);font-weight:800;font-size:17px;display:flex;align-items:center;gap:6px}
.ppanel-handle{font-size:13px;color:var(--green);font-weight:600}
.conf{display:inline-flex;padding:2px 9px;border-radius:var(--r-ctl);
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.03em;flex:none}
.conf.hi{background:var(--lime-soft);color:var(--green-deep)}
.conf.mid{background:var(--amber-soft);color:#8a5a12}
.abadge-row{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.abadge{display:inline-flex;background:var(--lime-soft);color:var(--green-deep);
  border:1px solid var(--line);border-radius:var(--r-ctl);padding:3px 9px;
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.02em}
.abadge.ok{background:var(--surface-2);color:var(--ink-2)}
.abadge.live{background:#ffe3e0;color:#b0201a;border-color:#b0201a}
/* grille KPI par plateforme */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:16px 0 4px}
.kpi{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-ctl);padding:11px 13px}
.kpi b{display:block;font-family:var(--font-display);font-size:19px;font-weight:800;color:var(--ink);line-height:1}
.kpi span{display:block;margin-top:4px;font-family:var(--font-mono);font-size:9px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.ppanel-top{display:inline-flex;margin:12px 0 2px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-ctl);padding:8px 13px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.ppanel-top:hover{color:var(--green)}
.ppanel-foot{margin-top:14px;font-family:var(--font-mono);font-size:10px;color:var(--ink-3)}
/* grille de contenu récent (images/vidéos) */
.cg-title{font-family:var(--font-display);font-size:14px;font-weight:800;margin:20px 0 12px;color:var(--ink)}
.cg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px}
.cg-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1.5px solid var(--ink);border-radius:var(--r-card);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow-off-soft);transition:transform .15s,box-shadow .15s}
.cg-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-off)}
.cg-thumb{position:relative;display:block;width:100%;aspect-ratio:1/1;background:var(--surface-2);overflow:hidden}
.cg-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cg-thumb.noimg{display:flex;align-items:center;justify-content:center}
.cg-thumb.noimg svg{width:44px;height:44px;opacity:.3}
.cg-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;
  font-size:26px;text-shadow:0 2px 6px rgba(0,0,0,.7);pointer-events:none}
.cg-dur{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.8);color:#fff;
  font-family:var(--font-mono);font-size:10px;padding:2px 6px;border-radius:5px}
.cg-pin{position:absolute;left:6px;top:6px;font-size:13px}
.cg-body{padding:9px 11px 11px;display:flex;flex-direction:column;gap:5px}
.cg-cap{font-size:12px;line-height:1.3;color:var(--ink-2);display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:31px}
.cg-cap.dim{color:var(--ink-3)}
.cg-meta{font-family:var(--font-mono);font-size:10px;color:var(--ink-3);display:flex;
  justify-content:space-between;gap:6px;flex-wrap:wrap}
.cg-when{color:var(--ink-3);opacity:.8}
.cg-empty{padding:26px;text-align:center;color:var(--ink-3);font-size:13px}
.cg-empty svg{width:20px;height:20px;vertical-align:-4px;opacity:.4;margin-right:6px}
/* vue d'ensemble : barres de portée */
.obars{display:flex;flex-direction:column;gap:11px}
.obar{display:flex;align-items:center;gap:11px}
.obar-ico{width:32px;height:32px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center}
.obar-ico svg{width:16px;height:16px}
.obar-lab{width:96px;flex:none;font-family:var(--font-display);font-weight:700;font-size:13px}
.obar-track{flex:1;height:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.obar-fill{display:block;height:100%;border-radius:6px 0 0 6px;min-width:3px}
.obar-val{width:78px;flex:none;text-align:right;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--ink)}
@media(max-width:640px){.obar-lab{width:64px;font-size:11px}.obar-val{width:60px;font-size:11px}
  .cg-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}
.linkinbio{display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  background:var(--accent);color:var(--on-accent);border:1.5px solid var(--ink);
  border-radius:var(--r-ctl);padding:11px 20px;font-family:var(--font-display);
  font-weight:700;font-size:13.5px;transition:.15s;box-shadow:4px 4px 0 rgba(20,24,20,.25)}
.linkinbio:hover{background:var(--accent-soft);color:var(--ink)}
.linkinbio:active{transform:translate(2px,2px);box-shadow:none}
.linkinbio svg{width:16px;height:16px;fill:currentColor}
.cpage-foot{margin-top:38px;font-size:12px;color:var(--ink-3);
  border-top:1.5px solid var(--ink);padding-top:16px}
/* bannière héro (banner_url capté par les acteurs Apify) */
.cbanner{position:relative;border:1.5px solid var(--ink);border-bottom:none;
  border-radius:var(--r-card) var(--r-card) 0 0;overflow:hidden;height:clamp(120px,22vw,240px);
  background:var(--ink)}
.cbanner img{width:100%;height:100%;object-fit:cover;display:block}
.cbanner+.cpage-head{border-radius:0 0 var(--r-card) var(--r-card)}
/* Ka Score */
.kascore{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin:6px 0 2px}
.kascore-num{flex:none;width:112px;height:112px;border-radius:50%;display:flex;
  flex-direction:column;align-items:center;justify-content:center;
  border:2px solid var(--ink);background:var(--accent);color:var(--on-accent);
  box-shadow:var(--shadow-off-soft)}
.kascore-num b{font-family:var(--font-display);font-size:34px;font-weight:800;line-height:1}
.kascore-num span{font-family:var(--font-mono);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
.kascore-parts{flex:1;min-width:230px;display:flex;flex-direction:column;gap:7px}
.kspart{display:flex;align-items:center;gap:10px}
.kspart-lab{width:110px;flex:none;font-family:var(--font-mono);font-size:10px;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.kspart-track{flex:1;height:9px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:5px;overflow:hidden}
.kspart-fill{display:block;height:100%;background:var(--green);border-radius:5px 0 0 5px;min-width:2px}
.kspart-val{width:52px;flex:none;text-align:right;font-family:var(--font-mono);
  font-size:11px;font-weight:700;color:var(--ink)}
@media(max-width:640px){.kspart-lab{width:88px;font-size:9px}}
/* sparkline évolution d'audience */
.spark-wrap{margin-top:8px}
.spark-svg{width:100%;height:88px;display:block}
.spark-line{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.spark-fill{fill:var(--lime-soft);opacity:.7;stroke:none}
.spark-meta{display:flex;justify-content:space-between;font-family:var(--font-mono);
  font-size:10px;color:var(--ink-3);margin-top:4px}
.growth-up{color:var(--green-deep);font-weight:700}
.growth-down{color:#b0201a;font-weight:700}
/* bloc EN DIRECT (miniature live Twitch/Kick) */
.live-card{display:flex;gap:14px;align-items:stretch;margin:14px 0 4px;
  border:1.5px solid #b0201a;border-radius:var(--r-card);overflow:hidden;
  background:var(--surface);text-decoration:none;color:inherit}
.live-card img{width:200px;min-height:100%;object-fit:cover;flex:none;display:block}
.live-card-body{padding:12px 14px;display:flex;flex-direction:column;gap:5px;justify-content:center}
.live-card-tag{font-family:var(--font-mono);font-size:10px;font-weight:700;color:#b0201a}
.live-card-title{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3}
.live-card-meta{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3)}
@media(max-width:560px){.live-card{flex-direction:column}.live-card img{width:100%;height:150px}}
.cpage-foot a{color:var(--green);font-weight:600}

/* ===== page stats ===== */
.stats-page{padding-top:40px;padding-bottom:70px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:26px 0}
.tile{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card);
  padding:18px 20px;box-shadow:var(--shadow-off-soft)}
.tile-v{font-family:var(--font-display);font-weight:700;font-size:clamp(23px,3vw,32px);
  letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.tile-k{font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-3);margin-top:7px}
.tile.hero-tile{background:var(--ink)}
.tile.hero-tile .tile-v{color:var(--accent-soft)}
.tile.hero-tile .tile-k{color:rgba(245,243,238,.55)}
.viz-card{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card);
  box-shadow:var(--shadow-off-soft);padding:24px 26px 18px;margin-bottom:22px}
.viz-card h2{font-size:18px;text-transform:uppercase}
.viz-sub{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin:4px 0 18px}
.hrow{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.hrow .plat{width:28px;height:28px;border-radius:7px;flex:none}
.hrow .plat svg{width:13px;height:13px}
.hrow-label{flex:0 0 130px;font-size:12.5px;font-weight:600;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.hrow-label{flex-basis:96px;font-size:11.5px}}
.hbar{flex:1;height:12px;border:1.5px solid var(--ink);border-radius:4px;
  background:var(--surface-2);overflow:hidden}
.hbar i{display:block;height:100%;background:var(--lime);border-right:1.5px solid var(--ink)}
.hrow .n{flex:none;font-family:var(--font-display);font-size:12.5px;font-weight:700;
  color:var(--ink);min-width:44px;text-align:right}

/* ===== page stats : tableau de bord ka-stats (SPEC) ===== */
.stats-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;justify-content:space-between}
.pdf-actions{display:flex;gap:8px;flex-wrap:wrap}
.fresh-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px;
  font-family:var(--font-mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.pchips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:22px 0 2px}
.pchip{border:1.5px solid var(--ink);background:var(--surface);border-radius:var(--r-ctl);
  padding:8px 14px;min-height:44px;font-family:var(--font-display);font-size:12.5px;
  font-weight:700;color:var(--ink-2);box-shadow:3px 3px 0 rgba(20,24,20,.08);transition:.15s}
.pchip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.pchip:active{transform:translate(2px,2px);box-shadow:none}
.pdates{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.pdates input{border:1.5px solid var(--ink);border-radius:var(--r-ctl);padding:8px 10px;
  font:inherit;font-size:13px;background:var(--surface);min-height:44px;max-width:160px}
@media(max-width:760px){.pchips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:4px 0 8px;scrollbar-width:none}
 .pchips::-webkit-scrollbar{display:none}
 .pchip{flex:none}.pdates{flex:none}.pdates input{font-size:16px}}
@media(max-width:640px){.pchips{margin-left:-16px;margin-right:-16px;
  padding-left:16px;padding-right:16px}}
.tile-d{font-family:var(--font-mono);font-size:10.5px;font-weight:700;margin-top:8px}
.tile-d.up{color:var(--green)}.tile-d.down{color:var(--danger)}
.tile.hero-tile .tile-d.up{color:var(--accent-soft)}
.viz-grid{display:grid;gap:22px;grid-template-columns:1fr;margin-bottom:22px}
@media(min-width:960px){.viz-grid.two{grid-template-columns:1fr 1fr}}
.viz-grid .viz-card{margin-bottom:0}
.viz-grid>*,.dt,.lc{min-width:0}
.dt .viz-card,.lc .viz-card{margin-bottom:0}
.lc svg{width:100%;height:auto;display:block;touch-action:pan-y}
.lc-legend{display:flex;gap:14px;flex-wrap:wrap;margin:2px 0 0}
.leg-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;
  font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-2);min-height:44px}
.leg-btn[aria-pressed="false"]{opacity:.35}
.leg-swatch{width:18px;height:0;border-top:3px solid var(--accent)}
.leg-swatch.cmp{border-top-style:dashed;border-top-color:var(--ink-3)}
.lc-tip{display:inline-flex;margin-top:6px;visibility:hidden}
.donut-wrap{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-top:14px}
.donut-legend{list-style:none;margin:0;padding:0;display:grid;gap:7px;flex:1;min-width:200px}
.donut-legend li{display:flex;align-items:center;gap:8px;font-size:12.5px;min-width:0}
.donut-legend .dsw{width:11px;height:11px;border-radius:3px;border:1px solid var(--ink);
  background:var(--accent);flex:none}
.donut-legend .dlbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.donut-legend b{font-family:var(--font-mono);font-size:11px}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.dtable table{width:100%;border-collapse:collapse;font-size:13px}
.dtable th{cursor:pointer;text-align:left;padding:8px 10px;background:var(--ink);
  color:var(--paper);font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.06em;white-space:nowrap;user-select:none}
.dtable td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.dtable tbody tr:nth-child(even) td{background:var(--surface-2)}
.dtable .dt-q{border:1.5px solid var(--ink);border-radius:var(--r-ctl);padding:9px 13px;
  font:inherit;font-size:13px;background:var(--surface);max-width:230px;min-height:44px}
@media(max-width:760px){.dtable .dt-q{font-size:16px;max-width:100%;flex:1}}
.dtable-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;
  flex-wrap:wrap;gap:8px}
.records-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:14px}
.record{background:var(--surface-2);border:1.5px solid var(--ink);border-radius:var(--r-card);
  padding:13px 16px;display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  box-shadow:var(--shadow-off-soft)}
.record .r-lbl{font-size:12.5px;color:var(--ink-2)}
.record .r-val{text-align:right;font-family:var(--font-display);font-size:14.5px;font-weight:700}
.hm svg{min-width:520px;width:100%;height:auto}
.empty-block{border:1.5px dashed var(--ink);border-radius:var(--r-card);
  background:var(--surface-2);padding:20px}
.stats-sect{font-size:17px;text-transform:uppercase;margin:34px 0 14px}

/* ===== page stats v2 : sparklines, jauges, histogrammes, heatmap horaire, menu PDF ===== */
.tile svg.spark{display:block;margin-top:9px;width:100%;height:28px}
.gauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-bottom:8px}
.gauge{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card);
  padding:16px 14px 13px;box-shadow:var(--shadow-off-soft);text-align:center}
.gauge svg{width:124px;max-width:100%;height:auto;margin:0 auto;display:block}
.gauge .g-v{font-family:var(--font-display);font-weight:700;font-size:21px;color:var(--ink);margin-top:-30px}
.gauge .g-l{font-family:var(--font-mono);font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-3);margin-top:10px;line-height:1.55}
.statsum{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.statsum .chip b{font-family:var(--font-mono);margin-left:4px}
.leg-swatch.ml1{border-top:3px solid var(--ink)}
.leg-swatch.ml2{border-top:3px dashed var(--accent)}
.leg-swatch.ml3{border-top:3px dotted var(--ink-3)}
.hrow .d{flex:none;font-family:var(--font-mono);font-size:10px;font-weight:700;min-width:54px;text-align:right}
.hrow .d.up{color:var(--green)}.hrow .d.down{color:var(--danger)}
.hh svg{min-width:560px;width:100%;height:auto}
.pdf-menu-wrap{position:relative;display:inline-flex;gap:8px;flex-wrap:wrap}
.pdf-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:70;background:var(--surface);
  border:1.5px solid var(--ink);border-radius:var(--r-card);box-shadow:var(--shadow-off);
  display:none;min-width:270px;padding:6px}
.pdf-menu.open{display:block}
.pdf-menu button{display:block;width:100%;text-align:left;border:0;background:none;
  padding:11px 13px;border-radius:9px;font-family:var(--font-display);font-weight:700;
  font-size:13px;color:var(--ink);min-height:44px}
.pdf-menu button:hover{background:var(--accent-soft)}
.pdf-menu small{display:block;font-family:var(--font-body);font-weight:400;font-size:11px;
  color:var(--ink-3);margin-top:2px}
@media(max-width:760px){.pdf-menu{right:auto;left:0}}

/* ===== retrait ===== */
.optout-page{max-width:620px;margin:0 auto;padding:44px 0 70px}
.optout-page h1{font-size:clamp(26px,4vw,32px);margin:12px 0;text-transform:uppercase}
.optout-page p{color:var(--ink-2)}
.field{margin-top:16px}
.field label{display:block;font-family:var(--font-mono);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px;color:var(--ink-2)}
.field input,.field textarea{width:100%;border:1.5px solid var(--ink);border-radius:var(--r-ctl);
  padding:11px 14px;font:inherit;background:var(--surface);color:var(--ink);
  box-shadow:3px 3px 0 rgba(20,24,20,.08);transition:box-shadow .15s ease}
.field input:focus,.field textarea:focus{outline:2px solid var(--green);outline-offset:1px;
  box-shadow:3px 3px 0 rgba(112,72,232,.25)}
@media(max-width:900px){.field input,.field textarea{font-size:16px}}
.optout-ok{background:var(--lime-soft);color:var(--green-deep);border:1.5px solid var(--ink);
  border-radius:var(--r-card);padding:16px 20px;font-weight:600;margin-top:20px;
  box-shadow:var(--shadow-off-soft)}
.optout-ok.warn{background:var(--amber-soft);color:#8a5a12}

/* ===== footer : nav locale + footer commun Groupe KA (ka/KaFooter) ===== */
.footer-local{margin-top:56px;border-top:1.5px solid var(--ink);background:var(--surface);padding:16px 0}
.footer-local nav{display:flex;gap:10px 26px;flex-wrap:wrap;align-items:center;
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.footer-local .klabel{color:var(--ink-3)}
.footer-local a{display:inline-flex;align-items:center;min-height:44px}
.footer-local a:hover{color:var(--accent-deep);text-decoration:underline;text-underline-offset:4px}
.footer-local+.ka-footer{margin-top:0}
.ka-footer .brand{font-size:19px;color:var(--paper)}

/* ===== contact ===== */
.contact-page{max-width:880px;margin:0 auto;padding:44px 0 70px}
.contact-page h1{font-size:clamp(26px,4vw,38px);margin:12px 0;text-transform:uppercase}
.contact-page .lead{color:var(--ink-2);max-width:640px}
.contact-notice{background:var(--accent-soft);border:1.5px solid var(--ink);border-radius:var(--r-card);
  padding:16px 20px;margin:22px 0;box-shadow:var(--shadow-off-soft);font-weight:600;color:var(--ink)}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:8px 0 4px}
.contact-card{display:block;background:var(--surface);border:1.5px solid var(--ink);
  border-radius:var(--r-card);padding:16px 18px;box-shadow:var(--shadow-off-soft);
  transition:transform .16s ease,box-shadow .16s ease;min-height:44px}
.contact-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-off)}
.contact-card b{display:block;font-family:var(--font-mono);font-size:13px;font-weight:700;
  color:var(--accent-deep);word-break:break-all}
.contact-card span{display:block;margin-top:5px;font-size:12px;color:var(--ink-2)}
.site-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:14px 0 0}
.site-item{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1.5px solid var(--ink);border-radius:var(--r-ctl);padding:10px 13px;min-height:44px;
  transition:transform .15s ease,box-shadow .15s ease}
.site-item:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)}
.site-item i{width:10px;height:10px;border-radius:3px;border:1px solid var(--ink);flex:none}
.site-item b{font-family:var(--font-display);font-size:13.5px;font-weight:700}
.site-item span{font-size:11px;color:var(--ink-3);margin-left:auto;font-family:var(--font-mono)}
@media(max-width:480px){.site-item span{display:none}}
.tabbar{display:none}
@media(max-width:940px){
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bottombar,600);
    background:rgba(245,243,238,.94);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-top:1.5px solid var(--ink);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:5px 2px;min-height:48px;justify-content:center;
    font-family:var(--font-mono);font-size:9.5px;font-weight:700;
    text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);
    border-radius:var(--r-ctl);transition:color .12s ease}
  .tabbar a.active{color:var(--green)}
  .tabbar a svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .ka-footer{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}
.spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--green);
  border-radius:50%;margin:50px auto;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
</style>
</head>
<body>
<div id="app"><div style="max-width:960px;margin:0 auto;padding:24px;font-family:system-ui,sans-serif;color:#141814"><h1>KevFps4K (@kevfps4k)</h1><p>Live le Soir 8heure Pm sur TikTok Kevfps4k 🎮! Streamer Quebecois Passionner des jeux video en tout genre depuis Longtemps Jadore le streaming sur twitch et Parler avec vous sur mes lives le but principal est davoir un max de fps et du gros fun alors go enjoy et follow la gang 💪🏼</p><ul><li><a href="https://www.tiktok.com/@kevfps4k" rel="noopener">TikTok — @kevfps4k</a> — 723 abonnés</li><li><a href="https://www.twitch.tv/kevfps4k" rel="noopener">Twitch — @kevfps4k</a> — 324 abonnés</li><li><a href="https://www.youtube.com/@kevfps4k" rel="noopener">YouTube — @kevfps4k</a> — 9 abonnés</li></ul><p><a href="/">Annuaire des créateurs de contenu québécois</a></p><p>Créa-Ka — Un service <a href="https://www.groupe-ka.com">Groupe KA</a></p></div></div>
<script>
"use strict";
/* Créa-Ka SPA — routes : / · /createur/{id} · /stats · /retrait · /compte · /contact */
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","spotify":"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z","discord":"M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"};
/* écosystème Groupe KA (ka/ecosystem.json, injecté au build) — footer commun + /contact */
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"},{"id":"job-ka","wordmark":"Job·Ka","domain":"www.job-ka.com","accent":"#0c8599","accentSoft":"#def0f4","accentDeep":"#095c6b","onAccent":"#ffffff","tagline":"Tous les emplois des employeurs québécois"}],"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"}]};
const KA_SITE=KA_ECO.sites.find(s=>s.id==="crea-ka");
const $=s=>document.querySelector(s);
const app=$("#app");
const fmt=new Intl.NumberFormat("fr-CA",{notation:"compact",maximumFractionDigits:1});
const fmtFull=new Intl.NumberFormat("fr-CA");
const PLAT={
 instagram:{label:"Instagram",color:"#c13584",av:"instagram"},
 tiktok:{label:"TikTok",color:"#141814",av:"tiktok"},
 youtube:{label:"YouTube",color:"#e02424",av:"youtube"},
 twitch:{label:"Twitch",color:"#9146ff",av:"twitch"},
 kick:{label:"Kick",color:"#141814"},
 x:{label:"X (Twitter)",color:"#141814",av:"twitter"},
 facebook:{label:"Facebook",color:"#1877f2"},
 snapchat:{label:"Snapchat",color:"#d4a900"},
 substack:{label:"Substack",color:"#ff6719"},
 patreon:{label:"Patreon",color:"#f1465a"},
 onlyfans:{label:"OnlyFans",color:"#00aff0"},
 mym:{label:"MYM",color:"#141814"},
 fansly:{label:"Fansly",color:"#2699f7"},
 linkedin:{label:"LinkedIn",color:"#0a66c2"},
 threads:{label:"Threads",color:"#141814"},
 spotify:{label:"Spotify",color:"#1db954"},
 discord:{label:"Discord",color:"#5865f2"},
 podcast:{label:"Balado",color:"#8940fa"},
 "site-web":{label:"Site web",color:"#7048e8"},
 autre:{label:"Autre",color:"#8b928c"}};
const NICHE_LBL={"humour":"Humour","mode":"Mode","beaute":"Beauté","lifestyle":"Lifestyle",
 "famille-parentalite":"Famille","cuisine":"Cuisine","gaming":"Gaming","tech":"Tech",
 "sport-fitness":"Sport & fitness","plein-air":"Plein air","voyage":"Voyage","musique":"Musique",
 "arts":"Arts","danse":"Danse","education":"Éducation","finance-affaires":"Finance & affaires",
 "sante-mieux-etre":"Santé & mieux-être","bouffe-resto":"Bouffe & resto",
 "actualite-opinion":"Actualité & opinion","autre":"Autre"};
const TIER_LBL={nano:"Nano",micro:"Micro",macro:"Macro",mega:"Méga"};
const state={q:"",niche:"",region:"",langue:"",plateforme:"",tier:"",sort:"reach",
 offset:0,items:[],total:0,stats:null,tax:null};

const esc=s=>String(s??"").replace(/[&<>"']/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c]));
const initials=n=>n.split(/\s+/).slice(0,2).map(w=>w[0]||"").join("").toUpperCase();
async function api(p){const r=await fetch(p);if(!r.ok)throw new Error(r.status);return r.json()}
function icon(p,extra){return `<svg class="icn" viewBox="0 0 24 24" aria-hidden="true"${extra||""}><path d="${ICONS[p]||ICONS.autre}"/></svg>`}
const checkSvg=`<svg class="vbadge" viewBox="0 0 24 24" aria-label="vérifié"><path fill="currentColor" d="M12 0l2.8 2.5 3.7-.7.9 3.7 3.4 1.7-1.5 3.5 1.5 3.5-3.4 1.7-.9 3.7-3.7-.7L12 24l-2.8-2.5-3.7.7-.9-3.7-3.4-1.7 1.5-3.5-1.5-3.5 3.4-1.7.9-3.7 3.7.7z"/><path fill="#f5f3ee" d="M10.6 16.2l-3.3-3.3 1.4-1.4 1.9 1.9 4.7-4.7 1.4 1.4z"/></svg>`;

/* cascade de photos : avatar capté à la source, puis unavatar par plateforme,
   repli final = initiales sur motif encre/violet (déjà en dessous) */
function avatarSources(c){
 const order=["instagram","tiktok","youtube","twitch","x"];
 const srcs=[];
 if(c.avatar_url)srcs.push(c.avatar_url);
 for(const p of order){
  const acc=(c.platforms||[]).find(a=>a.platform===p&&PLAT[p]&&PLAT[p].av);
  if(acc)srcs.push(`https://unavatar.io/${PLAT[p].av}/${encodeURIComponent(acc.handle)}?fallback=false`);
 }
 return srcs;
}
window.nextSrc=el=>{
 const srcs=JSON.parse(el.dataset.srcs||"[]");const i=+(el.dataset.i||0)+1;
 if(i<srcs.length){el.dataset.i=i;el.src=srcs[i]}else el.remove();
};
function photoImg(c){
 const srcs=avatarSources(c);
 if(!srcs.length)return"";
 return `<img loading="lazy" alt="${esc(c.display_name)}" src="${srcs[0]}"
   data-srcs='${esc(JSON.stringify(srcs))}' data-i="0" onerror="nextSrc(this)">`;
}
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>`;

function header(){
 return `<header class="header"><div class="container header-inner">
  <a href="/" data-nav class="brand">${brandSvg}Créa<span class="ka">Ka</span></a>
  <a class="gk-badge" href="https://www.groupe-ka.com" target="_blank" rel="noopener noreferrer"
   aria-label="Un service Groupe KA — visiter le portail de l'écosystème"><span class="pfx">Un service</span>
   <b>Groupe<span class="ka">KA</span></b></a>
  <span class="brand-tag">Tous les créateurs québécois.<br>Tous leurs liens.</span>
  <span class="header-spacer"></span>
  <a class="hbtn" href="/stats" data-nav>Statistiques</a>
  <a class="hbtn" href="/contact" data-nav>Contact</a>
  <a class="hbtn primary" href="/#annuaire" data-nav>Explorer l'annuaire</a>
  <span id="acct-slot"></span>
 </div></header>`;
}
/* jeton de compte KA ID dans l'en-tête (connecté → chip, sinon → bouton hub) */
async function loadAccount(){
 const slot=$("#acct-slot");if(!slot)return;
 if(state.me===undefined){
  try{const r=await fetch("/api/me");state.me=r.ok?await r.json():null}
  catch(e){state.me=null}}
 const me=state.me;
 if(me){
  slot.innerHTML=`<a class="hbtn acct" href="/compte" data-nav>
   ${me.picture?`<img src="${esc(me.picture)}" alt="">`:""}${esc((me.name||"").split(" ")[0])}
   <span class="ka-badge">KA</span></a>`;
 }else{
  slot.innerHTML=`<a class="hbtn acct" href="/api/auth/ka/login"
   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>`;
 }
 bindNav(slot);
}
function tabbar(active){
 const t=(href,label,svg,key)=>`<a href="${href}" data-nav class="${active===key?"active":""}">${svg}<span>${label}</span></a>`;
 return `<nav class="tabbar">
  ${t("/","Annuaire",`<svg viewBox="0 0 24 24"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/></svg>`,"home")}
  ${t("/#annuaire","Recherche",`<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>`,"search")}
  ${t("/stats","Stats",`<svg viewBox="0 0 24 24"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></svg>`,"stats")}
  ${t("/retrait","Retrait",`<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M8 12h8"/></svg>`,"optout")}
 </nav>`;
}
/* footer commun Groupe KA (équivalent vanilla de ka/KaFooter.tsx, siteId
   "crea-ka", localLegal = /retrait) — nav locale conservée au-dessus */
function footer(){
 const year=new Date().getFullYear();
 const others=KA_ECO.sites.filter(s=>s.id!=="crea-ka");
 const localLegal=[{label:"Retrait (opt-out)",href:"/retrait",nav:true}];
 return `<div class="footer-local"><div class="container"><nav>
   <span class="klabel">Créa·Ka</span>
   <a href="/compte" data-nav>Mon compte KA ID</a>
   <a href="/stats" data-nav>Statistiques</a>
   <a href="/retrait" data-nav>Demander un retrait</a>
   <a href="/contact" data-nav>Contact</a>
   <a href="/api/stats" target="_blank" rel="noopener">API publique</a>
  </nav></div></div>
 <footer class="ka-footer" id="contact-footer">
  <div class="container">
   <a class="wordmark" href="${esc(KA_ECO.hub.url)}" target="_blank" rel="noopener noreferrer"
    aria-label="Groupe KA — le portail de l'écosystème">Groupe <span class="ka">KA</span></a>
   <p class="desc">${esc(KA_ECO.org.tagline)} Des centaines de connecteurs lisent les sites à la
    source, normalisent la donnée et se resynchronisent seuls.
    <b style="color:var(--paper)">${esc(KA_SITE.wordmark)}</b> — ${esc(KA_SITE.tagline)} — est un service Groupe KA.</p>
   <p class="notice"><b>${esc(KA_ECO.org.disclaimer)}</b></p>
   <ul class="sites">
    ${others.map(s=>`<li><a href="https://${esc(s.domain)}" target="_blank" rel="noopener noreferrer">${esc(s.wordmark)}</a></li>`).join("")}
    ${(KA_ECO.extraFooterLinks||[]).map(l=>`<li><a href="${esc(l.href)}" target="_blank" rel="noopener noreferrer">${esc(l.label)}</a></li>`).join("")}
   </ul>
   <div class="contacts">
    ${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("")}
   </div>
   <p class="legal">© ${year} ${esc(KA_ECO.org.copyrightHolder)}
    ${localLegal.map(l=>` · <a href="${esc(l.href)}"${l.nav?" data-nav":""}>${esc(l.label)}</a>`).join("")}
    ${KA_ECO.legal.map(l=>` · <a href="${esc(l.href)}" target="_blank" rel="noopener noreferrer">${esc(l.label)}</a>`).join("")}
   </p>
  </div>
 </footer>`;
}

/* ---------- annuaire ---------- */
function platIcon(a){
 const p=PLAT[a.platform]||PLAT.autre;
 return `<a class="plat" href="${esc(a.url)}" target="_blank" rel="noopener"
   title="${p.label} — @${esc(a.handle)}" style="background:${p.color}"
   onclick="event.stopPropagation()">${icon(a.platform)}</a>`;
}
function cardHtml(c){
 const plats=(c.platforms||[]).slice(0,7).map(platIcon).join("");
 const niches=(c.niches||[]).slice(0,2).map(n=>`<span class="chip">${NICHE_LBL[n]||n}</span>`).join("");
 const verified=(c.platforms||[]).some(a=>a.verified);
 const np=(c.platforms||[]).length;
 return `<div class="card" data-href="/createur/${esc(c.id)}" role="link" tabindex="0" style="cursor:pointer">
  <div class="card-photo"><span class="init">${esc(initials(c.display_name))}</span>${photoImg(c)}
   <span class="tier ${esc(c.audience_tier)}">${TIER_LBL[c.audience_tier]||c.audience_tier}</span>
   <span class="nplat">${np} plat.</span></div>
  <div class="card-body">
   <div class="card-name">${esc(c.display_name)}${verified?checkSvg:""}</div>
   <div class="card-sub">${c.region?`${esc(c.region)} · `:""}${(c.languages||[]).map(l=>({fr:"FR",en:"EN",bilingue:"FR/EN"}[l]||l)).join(", ")}</div>
   <div class="chips">${niches}</div>
   ${c.total_reach?`<div class="reach"><b>${fmt.format(c.total_reach)}</b> abonnés cumulés</div>`:""}
   <div class="platrow">${plats}</div></div></div>`;
}
function selectHtml(id,label,opts,val,lbls){
 const o=opts.map(v=>`<option value="${esc(v)}"${v===val?" selected":""}>${esc(lbls?(lbls[v]||v):v)}</option>`).join("");
 return `<select class="f${val?" active":""}" id="${id}"><option value="">${label}</option>${o}</select>`;
}
async function renderHome(){
 document.title="Créa-Ka — Annuaire des créateurs de contenu québécois";
 if(!state.tax)state.tax=await api("/api/taxonomies");
 if(!state.stats)state.stats=await api("/api/stats").catch(()=>null);
 const s=state.stats||{creators:0,accounts:0,by_platform:{}};
 app.innerHTML=header()+`
 <section class="hero"><div class="container">
  <span class="kicker">Annuaire des créateurs du Québec</span>
  <h1 style="margin-top:16px">Chaque créateur<br>québécois. <span class="outline-txt">Tous</span> ses <span class="hl">liens.</span></h1>
  <p class="lead">Un « Linktree collectif » du Québec : influenceurs, youtubeurs, streamers,
   podcasteurs — leurs comptes regroupés et découvrables par niche, région, langue et taille d'audience.</p>
  <div class="stats-row">
   <span class="stat-pill"><b>${fmtFull.format(s.creators)}</b> créateurs</span>
   <span class="stat-pill"><b>${fmtFull.format(s.accounts)}</b> comptes reliés</span>
   <span class="stat-pill"><b>${Object.keys(s.by_platform||{}).length}</b> plateformes</span>
  </div>
  <div class="advantages">
   <div class="adv"><div class="ico">${icon("autre")}</div><h3>Cross-plateforme</h3><p>Instagram, TikTok, YouTube, Twitch, X… tous les comptes d'une même personne, au même endroit.</p></div>
   <div class="adv"><div class="ico"><svg class="icn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5" stroke-linecap="round"/></svg></div><h3>Découvrable</h3><p>Filtres par niche, région, langue, plateforme et taille d'audience.</p></div>
   <div class="adv"><div class="ico">✓</div><h3>Liens vérifiés</h3><p>Chaque rattachement porte un score de confiance ; mieux vaut un lien de moins qu'un lien erroné.</p></div>
   <div class="adv"><div class="ico">🛡</div><h3>Respectueux</h3><p>Profils publics seulement, retrait (opt-out) simple et respecté. Loi 25.</p></div>
  </div>
 </div></section>
 <div class="searchbar" id="annuaire"><div class="container search-wrap">
  <label class="search-input"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/><path d="M20 20l-3.5-3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
   <input id="q" placeholder="Chercher un créateur…" value="${esc(state.q)}"></label>
  <div class="filters">
  ${selectHtml("f-niche","Niche",state.tax.niches,state.niche,NICHE_LBL)}
  ${selectHtml("f-region","Région",state.tax.regions,state.region)}
  ${selectHtml("f-plat","Plateforme",state.tax.plateformes,state.plateforme,Object.fromEntries(Object.entries(PLAT).map(([k,v])=>[k,v.label])))}
  ${selectHtml("f-tier","Taille",state.tax.tiers,state.tier,TIER_LBL)}
  ${selectHtml("f-langue","Langue",state.tax.langues,state.langue,{fr:"Français",en:"Anglais",bilingue:"Bilingue"})}
  ${selectHtml("f-sort","Tri",["reach","nom","recent"],state.sort==="reach"?"":state.sort,{reach:"Audience",nom:"Nom A-Z",recent:"Récents"})}
  </div>
 </div></div>
 <main class="container"><div class="count-line" id="countline"></div>
  <div class="grid" id="grid"><div class="spin"></div></div>
  <div class="more-wrap" id="more"></div></main>`+footer()+tabbar(location.hash==="#annuaire"?"search":"home");
 bindNav();
 $("#q").addEventListener("input",deb(()=>{state.q=$("#q").value;reload()},300));
 [["f-niche","niche"],["f-region","region"],["f-plat","plateforme"],
  ["f-tier","tier"],["f-langue","langue"],["f-sort","sort"]].forEach(([id,key])=>{
  $("#"+id).addEventListener("change",e=>{state[key]=e.target.value||(key==="sort"?"reach":"");
   e.target.classList.toggle("active",!!e.target.value);reload()})});
 if(location.hash==="#annuaire"){const el=$("#annuaire");if(el)el.scrollIntoView()}
 await reload();
}
function deb(fn,ms){let t;return()=>{clearTimeout(t);t=setTimeout(fn,ms)}}
async function reload(more){
 if(!more){state.offset=0;state.items=[]}
 const p=new URLSearchParams({q:state.q,niche:state.niche,region:state.region,
  langue:state.langue,plateforme:state.plateforme,tier:state.tier,sort:state.sort,
  limit:"60",offset:String(state.offset)});
 const data=await api("/api/creators?"+p).catch(()=>({items:[],total:0}));
 state.items=state.items.concat(data.items);state.total=data.total;
 const grid=$("#grid");if(!grid)return;
 $("#countline").innerHTML=`<b>${fmtFull.format(state.total)}</b> créateur${state.total>1?"s":""} trouvé${state.total>1?"s":""}`;
 grid.innerHTML=state.items.length?state.items.map(cardHtml).join(""):
  `<div class="empty">Aucun créateur ne correspond à ces filtres.</div>`;
 const moreDiv=$("#more");
 moreDiv.innerHTML=state.items.length<state.total?
  `<button class="btn btn-primary" id="loadmore">Afficher plus (${fmtFull.format(state.total-state.items.length)} restants)</button>`:"";
 const lm=$("#loadmore");if(lm)lm.onclick=()=>{state.offset+=60;reload(true)};
 bindNav(grid);
}

/* ---------- page créateur ---------- */
/* --- bande de contenu récent par compte (enrichissement Apify) --- */
const _relTime=ts=>{if(!ts)return"";if(typeof ts==="string"&&!/^\d+$/.test(ts))return esc(ts.slice(0,10));
 const d=Math.floor((Date.now()/1000-Number(ts))/86400);
 return d<=0?"aujourd'hui":d===1?"hier":d<30?d+" j":d<365?Math.floor(d/30)+" mois":Math.floor(d/365)+" ans";};
const _relTimeC=ts=>_relTime(ts);
/* image de contenu : IG/CDN expirent souvent → onerror bascule sur repli icône */
window.thumbFail=el=>{const w=el.parentElement;if(w){w.classList.add("noimg");
 w.innerHTML=w.dataset.icon||"";}};
function _mediaItems(a){const m=a.metrics||{};
 const base=m.recent_posts||m.recent_videos||m.recent_tweets||[];
 if(base.length)return base;
 // Snapchat : les previews de story/spotlight sont des listes d'URLs d'images
 const prev=[...(m.story_previews||[]),...(m.spotlight_previews||[])];
 return prev.map(u=>({display_url:u,type:"story"}));}

/* grille de contenu récent, images/vidéos bien affichées */
function contentGrid(a){
 const items=_mediaItems(a);
 if(!items.length)return `<div class="cg-empty">${icon(a.platform)} Aucun contenu récent capté pour ce compte.</div>`;
 const ico=icon(a.platform);
 const cards=items.slice(0,12).map(it=>{
  const img=it.display_url||it.thumbnail_url||it.thumbnail||it.cover||(it.media_urls||[])[0]||"";
  const isVid=it.type==="video"||it.type==="reel"||!!it.duration||it.video_views!=null;
  const cap=esc((it.caption||it.title||it.text||"").slice(0,140));
  const when=_relTimeC(it.timestamp||it.published_at||it.published||it.created_at);
  const stats=[
   it.views!=null?fmt.format(it.views)+" vues":(it.video_views!=null?fmt.format(it.video_views)+" vues":null),
   it.likes!=null?fmt.format(it.likes)+" ❤":null,
   it.comments!=null?fmt.format(it.comments)+" 💬":null,
   it.retweets!=null?fmt.format(it.retweets)+" ↻":null,
   it.shares!=null?fmt.format(it.shares)+" ↗":null,
  ].filter(Boolean).join(" · ");
  const thumb=img
   ? `<span class="cg-thumb" data-icon='${esc(ico)}'><img loading="lazy" src="${esc(img)}" alt="" referrerpolicy="no-referrer" onerror="thumbFail(this)">
       ${isVid?'<span class="cg-play">▶</span>':""}${it.duration?`<span class="cg-dur">${esc(it.duration)}</span>`:""}
       ${it.is_pinned?'<span class="cg-pin">📌</span>':""}</span>`
   : `<span class="cg-thumb noimg" data-icon='${esc(ico)}'>${ico}${isVid?'<span class="cg-play">▶</span>':""}</span>`;
  return `<a class="cg-card" href="${esc(it.url||a.url)}" target="_blank" rel="noopener">
   ${thumb}
   <span class="cg-body">${cap?`<span class="cg-cap">${cap}</span>`:`<span class="cg-cap dim">Publication ${a.platform}</span>`}
    <span class="cg-meta">${stats||"—"}${when?`<span class="cg-when">${when}</span>`:""}</span></span></a>`;
 }).join("");
 return `<div class="cg-grid">${cards}</div>`;
}

/* définitions de métriques calculées, par plateforme */
function platformKPIs(a){
 const m=a.metrics||{}, out=[];
 const push=(v,l,suf)=>{if(v!=null&&v!=="")out.push([typeof v==="number"?fmt.format(v)+(suf||""):esc(v)+(suf||""),l]);};
 push(a.followers,a.platform==="discord"?"membres":a.platform==="patreon"?"patrons":"abonnés");
 push(m.engagement_rate_pct!=null?m.engagement_rate_pct:null,"engagement","%");
 push(m.avg_likes,"j'aime / pub (moy.)");
 push(m.avg_views!=null?m.avg_views:m.avg_video_views,"vues / pub (moy.)");
 push(m.avg_comments,"comm. / pub (moy.)");
 push(m.avg_retweets,"RT / pub (moy.)");
 push(m.posts_per_week!=null?m.posts_per_week:(m.tweets_per_week!=null?m.tweets_per_week:m.videos_per_week),"pubs / semaine");
 push(m.total_views,"vues totales");
 push(m.posts,"publications");
 push(m.videos,"vidéos");
 push(m.likes,a.platform==="tiktok"?"j'aime cumulés":"j'aime");
 push(m.following,"abonnements");
 push(m.online,"en ligne");
 push(m.boosts,"boosts");
 push(m.patrons,"patrons");
 push(m.live_viewers,"spectateurs (live)");
 return out;
}
function platformBadges(a){
 const m=a.metrics||{};
 return [
  a.verified?'<span class="abadge ok">✓ Vérifié</span>':"",
  m.is_partner?'<span class="abadge">Partenaire</span>':"",
  m.is_affiliate&&!m.is_partner?'<span class="abadge">Affilié</span>':"",
  m.partnered?'<span class="abadge">Serveur partenaire</span>':"",
  m.is_live_now?'<span class="abadge live">● En direct</span>':"",
  m.is_seller?'<span class="abadge">Boutique</span>':"",
  m.is_free===true?'<span class="abadge">Gratuit</span>':"",
  m.is_monthly?'<span class="abadge">Mensuel</span>':"",
  m.has_story?'<span class="abadge">Story active</span>':"",
  m.has_spotlight?'<span class="abadge">Spotlight</span>':"",
  m.is_nsfw?'<span class="abadge live">18+</span>':"",
  m.creation_name?`<span class="abadge">${esc(String(m.creation_name).slice(0,60))}</span>`:"",
  m.joined_date?`<span class="abadge">${esc(m.joined_date)}</span>`:"",
  m.is_blue_verified?'<span class="abadge ok">✓ Bleu</span>':"",
  m.country?`<span class="abadge">${esc(m.country)}</span>`:"",
  (m.recent_games||[]).slice(0,2).map(g=>`<span class="abadge">🎮 ${esc(g)}</span>`).join(""),
  (m.top_hashtags||[]).slice(0,3).map(h=>`<span class="abadge">#${esc(h)}</span>`).join(""),
 ].filter(Boolean).join("");
}

/* panneau d'un compte (onglet plateforme) */
function platformPanel(a,idx,active){
 const p=PLAT[a.platform]||PLAT.autre;
 const conf=Math.round((a.confidence||0)*100);
 const confCls=(a.confidence||0)>=0.75?"hi":"mid";
 const kpis=platformKPIs(a).map(([v,l])=>`<div class="kpi"><b>${v}</b><span>${l}</span></div>`).join("");
 const badges=platformBadges(a);
 const stamp=(a.metrics||{})[a.platform+"_apify_at"]||a.last_checked;
 const top=(a.metrics||{}).top_post||(a.metrics||{}).top_video||(a.metrics||{}).top_tweet;
 return `<section class="ppanel${active?" on":""}" data-panel="${idx}">
  <div class="ppanel-head">
   <span class="plat" style="background:${p.color}">${icon(a.platform)}</span>
   <div class="ppanel-id"><span class="ppanel-name">${p.label}${a.verified?checkSvg:""}</span>
    <a class="ppanel-handle" href="${esc(a.url)}" target="_blank" rel="noopener">@${esc(a.handle)} ↗</a></div>
   <span class="conf ${confCls}" title="Score de rattachement">${conf}%</span>
  </div>
  ${badges?`<div class="abadge-row">${badges}</div>`:""}
  ${(a.metrics||{}).is_live_now&&(a.metrics||{}).live_thumbnail?`
  <a class="live-card" href="${esc(a.url)}" target="_blank" rel="noopener">
   <img loading="lazy" src="${esc((a.metrics||{}).live_thumbnail)}" alt="" referrerpolicy="no-referrer" onerror="this.remove()">
   <span class="live-card-body"><span class="live-card-tag">● EN DIRECT</span>
    ${(a.metrics||{}).live_title?`<span class="live-card-title">${esc((a.metrics||{}).live_title)}</span>`:""}
    <span class="live-card-meta">${(a.metrics||{}).live_viewers!=null?fmt.format((a.metrics||{}).live_viewers)+" spectateurs":""}${(a.metrics||{}).live_game?" · "+esc((a.metrics||{}).live_game):((a.metrics||{}).live_category?" · "+esc((a.metrics||{}).live_category):"")}</span>
   </span></a>`:""}
  <div class="kpi-grid">${kpis||'<div class="kpi"><b>—</b><span>pas encore de métriques</span></div>'}</div>
  ${top&&top.url?`<a class="ppanel-top" href="${esc(top.url)}" target="_blank" rel="noopener">★ Top contenu — ${top.views!=null?fmt.format(top.views)+" vues":""}${top.likes!=null?" · "+fmt.format(top.likes)+" ❤":""} ↗</a>`:""}
  <h3 class="cg-title">Contenu récent</h3>
  ${contentGrid(a)}
  <div class="ppanel-foot">${stamp?"Dernière vérification "+esc(String(stamp).slice(0,10)):""}</div>
 </section>`;
}

window.showPtab=(i,el)=>{
 document.querySelectorAll(".ppanel").forEach(s=>s.classList.toggle("on",s.dataset.panel==String(i)));
 document.querySelectorAll(".ptab").forEach(t=>t.classList.remove("on"));
 if(el)el.classList.add("on");
 const ov=document.getElementById("ov-panel");if(ov)ov.classList.toggle("on",i==="ov");
};

function computeAgg(c){
 const P=(c.platforms||[]);
 const reach=c.total_reach||P.reduce((s,a)=>s+(a.followers||0),0);
 const eng=P.map(a=>(a.metrics||{}).engagement_rate_pct).filter(v=>v!=null);
 const avgEng=eng.length?(eng.reduce((s,v)=>s+v,0)/eng.length):null;
 const content=P.reduce((s,a)=>s+_mediaItems(a).length,0);
 const cad=P.map(a=>{const m=a.metrics||{};return m.posts_per_week!=null?m.posts_per_week:m.tweets_per_week;}).filter(v=>v!=null);
 const main=P.slice().sort((x,y)=>(y.followers||0)-(x.followers||0))[0];
 return {reach,avgEng,content,maxCad:cad.length?Math.max(...cad):null,
  nPlat:P.length,nVerif:P.filter(a=>a.verified).length,main};
}

/* sparkline SVG (série quotidienne des snapshots — insights.history.total) */
function sparkSvg(pts){
 if(!pts||pts.length<2)return"";
 const w=600,h=88,pad=4;
 const vals=pts.map(p=>p.followers);
 const min=Math.min(...vals),max=Math.max(...vals),span=Math.max(1,max-min);
 const x=i=>pad+i*(w-2*pad)/(pts.length-1);
 const y=v=>h-pad-((v-min)/span)*(h-2*pad);
 const line=pts.map((p,i)=>`${x(i).toFixed(1)},${y(p.followers).toFixed(1)}`).join(" ");
 const area=`${pad},${h-pad} ${line} ${(w-pad).toFixed(1)},${h-pad}`;
 return `<div class="spark-wrap"><svg class="spark-svg" viewBox="0 0 ${w} ${h}" preserveAspectRatio="none" aria-hidden="true">
  <polygon class="spark-fill" points="${area}"/><polyline class="spark-line" points="${line}"/></svg>
  <div class="spark-meta"><span>${esc(pts[0].day)}</span><span>${fmt.format(min)} → ${fmt.format(max)}</span><span>${esc(pts[pts.length-1].day)}</span></div></div>`;
}

async function renderCreator(id){
 app.innerHTML=header()+`<div class="container"><div class="spin"></div></div>`+footer()+tabbar("");bindNav();
 let c;try{c=await api("/api/creators/"+encodeURIComponent(id))}
 catch(e){app.innerHTML=header()+`<div class="container"><div class="empty"><h2>Créateur introuvable</h2>
  <p style="margin-top:10px"><a href="/" data-nav style="color:var(--green);font-weight:600">← Retour à l'annuaire</a></p></div></div>`+footer()+tabbar("");bindNav();return}
 document.title=`${c.display_name} — Créa-Ka`;
 const verified=(c.platforms||[]).some(a=>a.verified);
 const niches=(c.niches||[]).map(n=>`<span class="mchip">${NICHE_LBL[n]||n}</span>`).join("");
 const P=(c.platforms||[]).slice().sort((x,y)=>(y.followers||0)-(x.followers||0));
 const g=computeAgg(c);
 const ins=c.insights||{};
 const banner=c.banner_url||P.map(a=>(a.metrics||{}).banner).find(Boolean);
 // bandeau de métriques CALCULÉES (multi-plateforme)
 const kpi=(v,l)=>v==null?"":`<div class="hkpi"><b>${typeof v==="number"?fmt.format(v):esc(v)}</b><span>${l}</span></div>`;
 const gkpi=(d,l)=>!d||!d.delta?"":`<div class="hkpi"><b class="${d.delta>=0?"growth-up":"growth-down"}">${d.delta>=0?"+":""}${fmt.format(d.delta)}</b><span>${l}</span></div>`;
 const heroKpis=[
  kpi(g.reach,"abonnés cumulés"),
  gkpi(ins.growth_7d,"abonnés / 7 j"),
  gkpi(ins.growth_30d,"abonnés / 30 j"),
  kpi(g.nPlat,"plateformes"),
  kpi(ins.avg_engagement_pct!=null?ins.avg_engagement_pct+" %":(g.avgEng!=null?Math.round(g.avgEng*100)/100+" %":null),"engagement moyen"),
  kpi(ins.publications_per_week!=null?ins.publications_per_week:g.maxCad,"pubs / semaine"),
  kpi(g.content||null,"contenus analysés"),
  kpi(g.main?(PLAT[g.main.platform]||PLAT.autre).label:null,"plateforme nº 1"),
 ].filter(Boolean).join("");
 // Ka Score /100 (insights serveur) + sparkline d'audience (snapshots)
 const KS_MAX={audience:40,engagement:25,presence:20,rythme:10,verification:5};
 const KS_LBL={audience:"Audience",engagement:"Engagement",presence:"Multi-plateforme",
  rythme:"Rythme de pub.",verification:"Vérification"};
 const ksParts=ins.ka_score_parts||{};
 const ksHtml=ins.ka_score!=null?`<h3 class="cg-title">Ka Score</h3><div class="kascore">
   <div class="kascore-num"><b>${ins.ka_score}</b><span>/ 100</span></div>
   <div class="kascore-parts">${Object.keys(KS_MAX).map(k=>`<div class="kspart">
    <span class="kspart-lab">${KS_LBL[k]}</span>
    <span class="kspart-track"><span class="kspart-fill" style="width:${Math.min(100,Math.round((ksParts[k]||0)/KS_MAX[k]*100))}%"></span></span>
    <span class="kspart-val">${ksParts[k]!=null?ksParts[k]:0}/${KS_MAX[k]}</span></div>`).join("")}</div>
  </div>`:"";
 const hist=((ins.history||{}).total)||[];
 const sparkHtml=hist.length>1?`<h3 class="cg-title">Évolution de l'audience</h3>${sparkSvg(hist)}`:"";
 // barres comparatives de portée par plateforme (vue d'ensemble)
 const maxF=Math.max(1,...P.map(a=>a.followers||0));
 const bars=P.map(a=>{const p=PLAT[a.platform]||PLAT.autre;const w=Math.round((a.followers||0)/maxF*100);
  return `<div class="obar"><span class="obar-ico" style="background:${p.color}">${icon(a.platform)}</span>
   <span class="obar-lab">${p.label}</span>
   <span class="obar-track"><span class="obar-fill" style="width:${w}%;background:${p.color}"></span></span>
   <span class="obar-val">${a.followers!=null?fmt.format(a.followers):"—"}</span></div>`;}).join("");
 // onglets + panneaux
 const tabs=`<button class="ptab on" onclick="showPtab('ov',this)">Vue d'ensemble</button>`+
  P.map((a,i)=>{const p=PLAT[a.platform]||PLAT.autre;
   return `<button class="ptab" onclick="showPtab(${i},this)">
    <span class="ptab-ico" style="color:${p.color}">${icon(a.platform)}</span>${p.label}
    ${a.followers!=null?`<span class="ptab-n">${fmt.format(a.followers)}</span>`:""}</button>`;}).join("");
 const ovPanel=`<section class="ppanel on" id="ov-panel" data-panel="ov">
   ${ksHtml}
   <h3 class="cg-title">Portée par plateforme</h3>
   <div class="obars">${bars||"<p class=klabel>Aucune plateforme.</p>"}</div>
   ${sparkHtml}
   ${c.link_in_bio_url?`<a class="linkinbio" href="${esc(c.link_in_bio_url)}" target="_blank" rel="noopener">${icon("linktree")} Sa page de liens officielle ↗</a>`:""}
  </section>`;
 const panels=ovPanel+P.map((a,i)=>platformPanel(a,i,false)).join("");
 const checked=(c.platforms||[]).map(a=>{const m=a.metrics||{};return m[a.platform+"_apify_at"]||a.last_checked;}).filter(Boolean).sort().pop();
 app.innerHTML=header()+`
 <div class="container cpage">
  <a class="backlink" href="/" data-nav>← Tous les créateurs</a>
  ${banner?`<div class="cbanner"><img src="${esc(banner)}" alt="" referrerpolicy="no-referrer" onerror="this.parentElement.remove()"></div>`:""}
  <div class="cpage-head">
   <div class="cavatar">${esc(initials(c.display_name))}${photoImg(c)}</div>
   <div style="flex:1;min-width:200px"><h1>${esc(c.display_name)}${verified?checkSvg:""}</h1>
    <div class="meta"><span class="mchip o">${TIER_LBL[c.audience_tier]||c.audience_tier}</span>
     ${niches}${c.region?`<span class="mchip">${esc(c.region)}</span>`:""}
     ${(c.languages||[]).map(l=>`<span class="mchip">${{fr:"Français",en:"Anglais",bilingue:"Bilingue"}[l]||l}</span>`).join("")}</div>
    ${c.bio?`<p class="cpage-bio">${esc(c.bio)}</p>`:""}</div>
  </div>
  <div class="hkpi-row">${heroKpis}</div>
  ${c.notes?`<div class="cpage-notes"><span class="klabel">Contexte public</span><br>${esc(c.notes)}</div>`:""}
  <div class="ptabs">${tabs}</div>
  <div class="ppanels">${panels}</div>
  <div class="cpage-foot">Sources : listes médias publiques, Wikidata, annuaires publics et profils publics des plateformes (enrichissement Apify).
   Audiences et métriques approximatives${checked?`, dernière vérification ${esc(String(checked).slice(0,10))}`:""}.
   Une erreur dans cette fiche ? <a href="/retrait" data-nav>Signaler / demander un retrait</a>.</div>
 </div>`+footer()+tabbar("");
 bindNav();window.scrollTo(0,0);
}

/* ---------- page stats : tableau de bord analytique (contrat ka-stats) ---------- */
const ST={period:"30j",from:"",to:"",data:null,hide:{},tbl:{}};
const PERIODS_UI=[["auj","Aujourd'hui"],["7j","7 jours"],["30j","30 jours"],["3m","3 mois"],
 ["6m","6 mois"],["12m","12 mois"],["annee","Année en cours"],["tout","Tout"]];
const fmtPct=v=>(v>=0?"+":"")+v.toLocaleString("fr-CA",{maximumFractionDigits:1})+" %";
const emptyBlock=t=>`<div class="empty-block"><b style="font-family:var(--font-display);font-size:14px">${esc(t)}</b>
 <p class="klabel" style="margin:6px 0 0">Pas encore mesuré — aucune donnée disponible pour cette période.</p></div>`;

/* mini-tendance dans une carte KPI (série spark du contrat v2) */
function sparkSvg(spark,hero){
 if(!spark||spark.length<2)return"";
 const W=120,H=28,vs=spark.map(p=>p.v);
 const mn=Math.min(...vs),mx=Math.max(...vs),rng=(mx-mn)||1;
 const pts=spark.map((p,i)=>`${(i/(spark.length-1)*W).toFixed(1)},${(H-2-(H-4)*((p.v-mn)/rng)).toFixed(1)}`).join(" ");
 return `<svg class="spark" viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" aria-hidden="true">
  <polyline points="${pts}" fill="none" stroke="${hero?"var(--accent-soft)":"var(--accent)"}" stroke-width="2"/></svg>`;
}
function kpiHtml(k,i){
 const v=k.value,hero=i===0;
 const num=typeof v==="number"?(v>=1e6?fmt.format(v):fmtFull.format(v)):esc(v);
 let delta="";
 if(k.delta_pct!==undefined&&k.delta_pct!==null){
  const up=(k.direction||(k.delta_pct>=0?"up":"down"))==="up";
  delta=`<div class="tile-d ${up?"up":"down"}">${up?"▲":"▼"} ${fmtPct(k.delta_pct)} <span style="opacity:.6">vs période préc.</span></div>`;}
 return `<div class="tile${hero?" hero-tile":""}"${typeof v==="number"?` title="${fmtFull.format(v)}"`:""}>
  <div class="tile-v">${num}${k.unit?`<span style="font-size:.42em;opacity:.6"> ${esc(k.unit)}</span>`:""}</div>
  <div class="tile-k">${esc(k.label)}</div>${delta}${sparkSvg(k.spark,hero)}</div>`;
}

/* --- jauge demi-arc (taux, couvertures, complétude) --- */
function gaugeHtml(g){
 if(typeof g.value!=="number"||!g.max)return"";
 const frac=Math.max(0,Math.min(1,g.value/g.max));
 const R=52,C=Math.PI*R;
 return `<div class="gauge" title="${esc(g.label)} — ${g.value.toLocaleString("fr-CA")}${g.unit?" "+esc(g.unit):""} (${Math.round(frac*100)} % de ${fmtFull.format(g.max)})">
  <svg viewBox="0 0 120 68" role="img" aria-label="${esc(g.label)}">
   <path d="M8 60 A${R} ${R} 0 0 1 112 60" fill="none" stroke="var(--line)" stroke-width="11" stroke-linecap="round"/>
   ${frac>0?`<path d="M8 60 A${R} ${R} 0 0 1 112 60" fill="none" stroke="var(--accent)" stroke-width="11" stroke-linecap="round"
    stroke-dasharray="${(frac*C).toFixed(1)} ${(C+20).toFixed(1)}"/>`:""}
  </svg>
  <div class="g-v">${g.value.toLocaleString("fr-CA",{maximumFractionDigits:1})}${g.unit?`<span style="font-size:.58em;opacity:.65"> ${esc(g.unit)}</span>`:""}</div>
  <div class="g-l">${esc(g.label)}</div></div>`;
}

/* --- statistiques d'une série : min / max / moyenne / médiane / écart-type --- */
function statSummary(s){
 const vs=(s.points||[]).map(p=>p.v).filter(v=>typeof v==="number");
 if(vs.length<2)return"";
 const sv=[...vs].sort((a,b)=>a-b),mean=vs.reduce((a,b)=>a+b,0)/vs.length;
 const med=sv[Math.floor(sv.length/2)];
 const sd=Math.sqrt(vs.reduce((a,v)=>a+(v-mean)*(v-mean),0)/vs.length);
 const f=v=>fmtFull.format(Math.round(v*100)/100);
 return `<div class="statsum"><span class="chip">min<b>${f(sv[0])}</b></span>
  <span class="chip">max<b>${f(sv[sv.length-1])}</b></span>
  <span class="chip">moyenne<b>${f(mean)}</b></span>
  <span class="chip">médiane<b>${f(med)}</b></span>
  <span class="chip">écart-type σ<b>${f(sd)}</b></span></div>`;
}

/* --- barres verticales : série kind=bar (volumes/jour) & histogrammes (bins) --- */
function vbarsHtml(spec){
 const pts=(spec.points||(spec.bins||[]).map(b=>({t:b.label,v:b.value})))
  .filter(p=>typeof p.v==="number");
 if(!pts.length||!pts.some(p=>p.v>0))return emptyBlock(spec.title);
 const W=720,H=250,PL=54,PR=12,PT=14,PB=40,cw=W-PL-PR,ch=H-PT-PB;
 const vmax=Math.max(...pts.map(p=>p.v),1);
 let grid="";
 for(let k=0;k<5;k++){const y=PT+ch*k/4,v=vmax*(4-k)/4;
  grid+=`<line x1="${PL}" x2="${W-PR}" y1="${y.toFixed(1)}" y2="${y.toFixed(1)}" stroke="var(--line)"/>
   <text x="${PL-6}" y="${(y+3).toFixed(1)}" text-anchor="end" font-size="10" fill="var(--ink-3)" font-family="var(--font-mono)">${fmtFull.format(Math.round(v))}</text>`;}
 const n=pts.length,bw=Math.max(2,cw/n-3);
 const bars=pts.map((p,i)=>{const bh=ch*p.v/vmax,x=PL+cw*i/n+1.5;
  return `<rect x="${x.toFixed(1)}" y="${(PT+ch-bh).toFixed(1)}" width="${bw.toFixed(1)}" height="${Math.max(bh,p.v>0?1:0).toFixed(1)}"
   fill="var(--accent)" stroke="var(--ink)" stroke-width="${n>40?0.4:1}"><title>${esc(p.t)} — ${fmtFull.format(p.v)}${spec.unit?" "+esc(spec.unit):""}</title></rect>`;}).join("");
 const lblIdx=n<=10?pts.map((_,i)=>i):[0,Math.floor(n/2),n-1];
 const xl=lblIdx.map(i=>`<text x="${(PL+cw*i/n+bw/2).toFixed(1)}" y="${H-8}" text-anchor="middle"
   font-size="${n<=10?10:10}" fill="var(--ink-3)" font-family="var(--font-mono)">${esc(String(pts[i].t))}</text>`).join("");
 return `<div class="viz-card"><h2>${esc(spec.title)}</h2>
  ${spec.unit?`<div class="viz-sub">${esc(spec.unit)}</div>`:'<div style="height:10px"></div>'}
  <svg viewBox="0 0 ${W} ${H}" role="img" aria-label="${esc(spec.title)}">${grid}${bars}${xl}</svg></div>`;
}

/* --- multi-courbes (≤ 4) : identité par MOTIF de trait en plus de la couleur --- */
const ML_STYLES=[
 {stroke:"var(--accent)",w:2.6,dash:"",cls:"",name:"trait plein accent"},
 {stroke:"var(--ink)",w:2,dash:"",cls:"ml1",name:"trait plein encre"},
 {stroke:"var(--accent)",w:2.2,dash:"7 4",cls:"ml2",name:"tirets accent"},
 {stroke:"var(--ink-3)",w:2,dash:"2 3",cls:"ml3",name:"pointillé gris"}];
function multiFigure(ms,hide){
 const series=(ms.series||[]).filter(s=>(s.points||[]).length>1).slice(0,4);
 if(!series.length)return emptyBlock(ms.title);
 const W=720,H=250,PL=54,PR=12,PT=14,PB=26,cw=W-PL-PR,ch=H-PT-PB;
 const shown=series.filter((_,i)=>!hide[i]);
 const all=(shown.length?shown:series).flatMap(s=>s.points.map(p=>p.v));
 const vmax=Math.max(...all,1),vmin=Math.min(0,...all),rng=(vmax-vmin)||1;
 let grid="";
 for(let k=0;k<5;k++){const y=PT+ch*k/4,v=vmax-(vmax-vmin)*k/4;
  grid+=`<line x1="${PL}" x2="${W-PR}" y1="${y.toFixed(1)}" y2="${y.toFixed(1)}" stroke="var(--line)"/>
   <text x="${PL-6}" y="${(y+3).toFixed(1)}" text-anchor="end" font-size="10" fill="var(--ink-3)" font-family="var(--font-mono)">${fmtFull.format(Math.round(v))}</text>`;}
 const X=(i,n)=>PL+cw*i/((n-1)||1),Y=v=>PT+ch*(1-(v-vmin)/rng);
 const paths=series.map((s,si)=>{if(hide[si])return"";
  const st=ML_STYLES[si];
  const d=s.points.map((p,i)=>`${i?"L":"M"}${X(i,s.points.length).toFixed(1)},${Y(p.v).toFixed(1)}`).join("");
  return `<path d="${d}" fill="none" stroke="${st.stroke}" stroke-width="${st.w}"${st.dash?` stroke-dasharray="${st.dash}"`:""}/>`;}).join("");
 const ref=series[0].points;
 const xl=[0,Math.floor(ref.length/2),ref.length-1].map(i=>
  `<text x="${X(i,ref.length).toFixed(1)}" y="${H-8}" text-anchor="middle" font-size="10" fill="var(--ink-3)" font-family="var(--font-mono)">${esc(ref[i].t)}</text>`).join("");
 const leg=series.map((s,si)=>`<button type="button" class="leg-btn" data-mls="${si}" aria-pressed="${!hide[si]}"
   title="${ML_STYLES[si].name}"><span class="leg-swatch ${ML_STYLES[si].cls}"></span>${esc(s.label)}</button>`).join("");
 return `<div class="viz-card">
  <div style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;align-items:center">
   <h2>${esc(ms.title)}</h2><span class="lc-legend">${leg}</span></div>
  <svg viewBox="0 0 ${W} ${H}" role="img" aria-label="${esc(ms.title)}" style="margin-top:10px">
   ${grid}${xl}${paths}
   <g class="lc-cursor" style="display:none"><line y1="${PT}" y2="${H-PB}" stroke="var(--ink)" stroke-dasharray="2 3"/></g>
  </svg><span class="chip lc-tip">&nbsp;</span></div>`;
}
function mountMulti(el,ms){
 const hide=ST.hide["ml:"+ms.id]||(ST.hide["ml:"+ms.id]={});
 const series=(ms.series||[]).filter(s=>(s.points||[]).length>1).slice(0,4);
 const render=()=>{
  el.innerHTML=multiFigure(ms,hide);
  el.querySelectorAll("[data-mls]").forEach(b=>b.addEventListener("click",()=>{
   hide[b.dataset.mls]=!hide[b.dataset.mls];render();}));
  const svg=el.querySelector("svg");if(!svg||!series.length)return;
  const W=720,PL=54,PR=12,n=series[0].points.length;
  const cursor=el.querySelector(".lc-cursor"),tip=el.querySelector(".lc-tip");
  const cl=cursor?cursor.querySelector("line"):null;
  svg.addEventListener("pointermove",e=>{
   const r=svg.getBoundingClientRect();
   const fx=(e.clientX-r.left)/r.width*W;
   let i=Math.round((fx-PL)/(W-PL-PR)*(n-1));i=Math.max(0,Math.min(n-1,i));
   const x=(PL+(W-PL-PR)*i/((n-1)||1)).toFixed(1);
   if(cl){cl.setAttribute("x1",x);cl.setAttribute("x2",x);cursor.style.display="";}
   const vals=series.map((s,si)=>hide[si]?null:`${esc(s.label)} : <b>&nbsp;${fmtFull.format((s.points[i]||{}).v??0)}</b>`).filter(Boolean).join(" · ");
   tip.innerHTML=`${esc(series[0].points[i].t)} — ${vals}${ms.unit?` <span style="color:var(--ink-3)">${esc(ms.unit)}</span>`:""}`;
   tip.style.visibility="visible";});
  svg.addEventListener("pointerleave",()=>{if(cursor)cursor.style.display="none";tip.style.visibility="hidden"});
 };
 render();
}

/* --- barres empilées (composition dans le temps, nuances d'accent) --- */
function stackedHtml(st){
 const keys=(st.keys||[]).slice(0,6),pts=st.points||[];
 if(!keys.length||!pts.length)return emptyBlock(st.title);
 const totals=pts.map(p=>(p.values||[]).slice(0,keys.length).reduce((a,b)=>a+(b||0),0));
 if(!totals.some(t=>t>0))return emptyBlock(st.title);
 const W=720,H=250,PL=54,PR=12,PT=14,PB=26,cw=W-PL-PR,ch=H-PT-PB;
 const vmax=Math.max(...totals,1),shades=[1,.78,.58,.42,.3,.22];
 let grid="";
 for(let k=0;k<5;k++){const y=PT+ch*k/4,v=vmax*(4-k)/4;
  grid+=`<line x1="${PL}" x2="${W-PR}" y1="${y.toFixed(1)}" y2="${y.toFixed(1)}" stroke="var(--line)"/>
   <text x="${PL-6}" y="${(y+3).toFixed(1)}" text-anchor="end" font-size="10" fill="var(--ink-3)" font-family="var(--font-mono)">${fmtFull.format(Math.round(v))}</text>`;}
 const n=pts.length,bw=Math.max(2,cw/n-3);
 const bars=pts.map((p,i)=>{let y=PT+ch;const x=PL+cw*i/n+1.5;
  return keys.map((k,j)=>{const v=(p.values||[])[j]||0;if(!v)return"";
   const bh=ch*v/vmax;y-=bh;
   return `<rect x="${x.toFixed(1)}" y="${y.toFixed(1)}" width="${bw.toFixed(1)}" height="${Math.max(bh-.4,.5).toFixed(1)}"
    fill="var(--accent)" fill-opacity="${shades[j%6]}" stroke="var(--paper)" stroke-width="0.4">
    <title>${esc(p.t)} · ${esc(k)} — ${fmtFull.format(v)}${st.unit?" "+esc(st.unit):""} (total ${fmtFull.format(totals[i])})</title></rect>`;}).join("");}).join("");
 const lblIdx=[0,Math.floor(n/2),n-1];
 const xl=lblIdx.map(i=>`<text x="${(PL+cw*i/n+bw/2).toFixed(1)}" y="${H-8}" text-anchor="middle" font-size="10" fill="var(--ink-3)" font-family="var(--font-mono)">${esc(String(pts[i].t))}</text>`).join("");
 const leg=keys.map((k,j)=>`<span class="leg-btn" style="min-height:auto"><span class="dsw" style="width:11px;height:11px;border-radius:3px;border:1px solid var(--ink);background:var(--accent);opacity:${shades[j%6]};display:inline-block"></span>&nbsp;${esc(k)}</span>`).join("");
 return `<div class="viz-card">
  <div style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;align-items:center">
   <h2>${esc(st.title)}</h2><span class="lc-legend">${leg}</span></div>
  <svg viewBox="0 0 ${W} ${H}" role="img" aria-label="${esc(st.title)}" style="margin-top:10px">${grid}${bars}${xl}</svg></div>`;
}

/* --- heatmap horaire 7 × 24 (dow 0=lun … 6=dim) --- */
function hourHeatHtml(h){
 const cells=h&&h.cells||[];
 if(!cells.length)return emptyBlock(h?h.title:"Activité horaire");
 const grid=new Map(cells.map(c=>[c.dow+":"+c.hour,c.value||0]));
 const max=Math.max(...cells.map(c=>c.value||0),1);
 const CS=22,LX=42,LY=18,DOWS=["Lun","Mar","Mer","Jeu","Ven","Sam","Dim"];
 let out="";
 [0,6,12,18,23].forEach(hh=>{out+=`<text x="${LX+hh*CS+CS/2}" y="12" text-anchor="middle" font-size="10" fill="var(--ink-3)" font-family="var(--font-mono)">${hh} h</text>`;});
 for(let d=0;d<7;d++){
  out+=`<text x="${LX-6}" y="${LY+d*CS+CS/2+3.5}" text-anchor="end" font-size="10" fill="var(--ink-3)" font-family="var(--font-mono)">${DOWS[d]}</text>`;
  for(let hh=0;hh<24;hh++){const v=grid.get(d+":"+hh)||0;
   out+=`<rect x="${LX+hh*CS}" y="${LY+d*CS}" width="${CS-2.5}" height="${CS-2.5}" rx="3.5"
    fill="${v?"var(--accent)":"rgba(20,24,20,0.06)"}" fill-opacity="${v?(0.2+0.8*v/max).toFixed(2):1}"
    stroke="rgba(20,24,20,0.14)" stroke-width="0.5"><title>${DOWS[d]} ${hh} h — ${fmtFull.format(v)}</title></rect>`;}}
 return `<div class="viz-card hh"><h2>${esc(h.title)}</h2><div class="viz-sub">7 jours × 24 heures (heure de l'Est)</div>
  <div class="tbl-wrap"><svg viewBox="0 0 ${LX+24*CS} ${LY+7*CS}" role="img" aria-label="${esc(h.title)}">${out}</svg></div></div>`;
}

/* --- courbe SVG : infobulle (pointeur), légende cliquable, comparaison N-1 --- */
function lineGeom(s,hide){
 const W=720,H=240,PL=54,PR=12,PT=14,PB=26,pts=s.points||[];
 const all=[...(hide.cur?[]:pts),...(!hide.cmp&&s.compare?s.compare:[])];
 const vmax=Math.max(...all.map(p=>p.v),1),vmin=Math.min(0,...all.map(p=>p.v));
 const X=(i,n)=>PL+(W-PL-PR)*i/((n||pts.length)-1);
 const Y=v=>PT+(H-PT-PB)*(1-(v-vmin)/((vmax-vmin)||1));
 return{W,H,PL,PR,PT,PB,vmax,vmin,X,Y};
}
function lineFigure(s,hide){
 const pts=s.points||[];
 if(pts.length<2)return emptyBlock(s.title);
 const g=lineGeom(s,hide),{W,H,PL,PR,PT,PB,vmax,vmin,X,Y}=g;
 const path=arr=>arr.map((p,i)=>`${i?"L":"M"}${X(i,arr.length).toFixed(1)},${Y(p.v).toFixed(1)}`).join("");
 let grid="";
 for(let k=0;k<5;k++){const y=PT+(H-PT-PB)*k/4,v=vmax-(vmax-vmin)*k/4;
  grid+=`<line x1="${PL}" x2="${W-PR}" y1="${y.toFixed(1)}" y2="${y.toFixed(1)}" stroke="var(--line)"/>
   <text x="${PL-6}" y="${(y+3).toFixed(1)}" text-anchor="end" font-size="10" fill="var(--ink-3)" font-family="var(--font-mono)">${fmtFull.format(Math.round(v))}</text>`;}
 const xl=[0,Math.floor(pts.length/2),pts.length-1].map(i=>
  `<text x="${X(i).toFixed(1)}" y="${H-8}" text-anchor="middle" font-size="10" fill="var(--ink-3)" font-family="var(--font-mono)">${esc(pts[i].t)}</text>`).join("");
 return `<div class="viz-card">
  <div style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;align-items:center">
   <h2>${esc(s.title)}</h2>
   <span class="lc-legend">
    <button type="button" class="leg-btn" data-leg="cur" aria-pressed="${!hide.cur}"><span class="leg-swatch"></span>Période courante</button>
    ${s.compare?`<button type="button" class="leg-btn" data-leg="cmp" aria-pressed="${!hide.cmp}"><span class="leg-swatch cmp"></span>Période comparée</button>`:""}
   </span></div>
  <svg viewBox="0 0 ${g.W} ${g.H}" role="img" aria-label="${esc(s.title)}" style="margin-top:10px">
   ${grid}${xl}
   ${!hide.cmp&&s.compare&&s.compare.length>1?`<path d="${path(s.compare)}" fill="none" stroke="var(--ink-3)" stroke-width="1.4" stroke-dasharray="4 4"/>`:""}
   ${!hide.cur&&s.kind==="area"?`<path d="${path(pts)} L${X(pts.length-1).toFixed(1)},${(H-PB).toFixed(1)} L${X(0).toFixed(1)},${(H-PB).toFixed(1)} Z" fill="var(--accent)" fill-opacity=".12" stroke="none"/>`:""}
   ${!hide.cur?`<path d="${path(pts)}" fill="none" stroke="var(--accent)" stroke-width="2.4"/>`:""}
   <g class="lc-cursor" style="display:none">
    <line y1="${PT}" y2="${H-PB}" stroke="var(--ink)" stroke-dasharray="2 3"/>
    <circle r="4" fill="var(--accent)" stroke="var(--ink)" stroke-width="1.5"/></g>
  </svg><span class="chip lc-tip">&nbsp;</span>`+statSummary(s)+
 `</div>`;
}
function mountLine(el,s){
 if(s.kind==="bar"){el.innerHTML=vbarsHtml(s);return;}
 const hide=ST.hide[s.id]||(ST.hide[s.id]={cur:false,cmp:false});
 const render=()=>{
  el.innerHTML=lineFigure(s,hide);
  el.querySelectorAll("[data-leg]").forEach(b=>b.addEventListener("click",()=>{
   hide[b.dataset.leg]=!hide[b.dataset.leg];render();}));
  const svg=el.querySelector("svg");if(!svg)return;
  const pts=s.points,g=lineGeom(s,hide);
  const cursor=el.querySelector(".lc-cursor"),tip=el.querySelector(".lc-tip");
  const cl=cursor.querySelector("line"),cc=cursor.querySelector("circle");
  svg.addEventListener("pointermove",e=>{
   const r=svg.getBoundingClientRect();
   const fx=(e.clientX-r.left)/r.width*g.W;
   let i=Math.round((fx-g.PL)/(g.W-g.PL-g.PR)*(pts.length-1));
   i=Math.max(0,Math.min(pts.length-1,i));
   const x=g.X(i).toFixed(1);
   cl.setAttribute("x1",x);cl.setAttribute("x2",x);
   cc.setAttribute("cx",x);cc.setAttribute("cy",g.Y(pts[i].v).toFixed(1));
   cursor.style.display="";
   const cmp=s.compare&&!hide.cmp&&s.compare[i]?` · N-1 : ${fmtFull.format(s.compare[i].v)}`:"";
   tip.innerHTML=`${esc(pts[i].t)} — <b>&nbsp;${fmtFull.format(pts[i].v)}${s.unit?" "+esc(s.unit):""}</b><span style="color:var(--ink-3)">${cmp}</span>`;
   tip.style.visibility="visible";});
  svg.addEventListener("pointerleave",()=>{cursor.style.display="none";tip.style.visibility="hidden"});
 };
 render();
}

/* --- anneau (top 7 + « Autres ») --- */
function donutHtml(b){
 let rows=(b.items||[]).filter(i=>i.value>0);
 if(!rows.length)return emptyBlock(b.title);
 if(rows.length>8){const rest=rows.slice(7).reduce((s,r)=>s+r.value,0);
  rows=rows.slice(0,7);rows.push({label:"Autres",value:rest});}
 const total=rows.reduce((s,r)=>s+r.value,0);
 const R=74,C=2*Math.PI*R,shades=[1,.78,.58,.42,.3,.22,.15,.1];let acc=0;
 const segs=rows.map((r,i)=>{const frac=r.value/total,off=acc;acc+=frac;
  return `<circle cx="100" cy="100" r="${R}" fill="none" stroke="var(--accent)" stroke-opacity="${shades[i%8]}"
   stroke-width="30" stroke-dasharray="${(frac*C).toFixed(2)} ${C.toFixed(2)}" stroke-dashoffset="${(-off*C).toFixed(2)}"
   transform="rotate(-90 100 100)"><title>${esc(r.label)} — ${fmtFull.format(r.value)}</title></circle>`;}).join("");
 const leg=rows.map((r,i)=>`<li><span class="dsw" style="opacity:${shades[i%8]}"></span>
  <span class="dlbl" title="${esc(r.label)} — ${fmtFull.format(r.value)}">${esc(r.label)}</span>
  <b>${(100*r.value/total).toFixed(1).replace(".",",")} %</b></li>`).join("");
 return `<div class="viz-card"><h2>${esc(b.title)}</h2><div class="donut-wrap">
  <svg viewBox="0 0 200 200" role="img" aria-label="${esc(b.title)}" style="width:180px;max-width:100%">${segs}
   <circle cx="100" cy="100" r="${R}" fill="none" stroke="var(--ink)" opacity=".5"/></svg>
  <ul class="donut-legend">${leg}</ul></div></div>`;
}

/* --- barres horizontales (répartitions, géo) --- */
function barsHtml(title,items,sub){
 const rows=(items||[]).slice(0,14);
 if(!rows.length)return emptyBlock(title);
 const max=Math.max(...rows.map(r=>r.value),1);
 return `<div class="viz-card"><h2>${esc(title)}</h2>${sub?`<div class="viz-sub">${esc(sub)}</div>`:`<div style="height:14px"></div>`}
  ${rows.map(r=>`<div class="hrow" title="${esc(r.label)} — ${fmtFull.format(r.value)}${r.delta_pct!=null?` (${fmtPct(r.delta_pct)} sur la période)`:""}">
   <span class="hrow-label">${esc(r.label)}</span>
   <span class="hbar"><i style="width:${Math.max(2,Math.round(r.value/max*100))}%"></i></span>
   <span class="n">${fmtFull.format(r.value)}</span>${r.delta_pct!=null?`<span class="d ${r.delta_pct>=0?"up":"down"}">${r.delta_pct>=0?"▲":"▼"} ${fmtPct(r.delta_pct)}</span>`:""}</div>`).join("")}</div>`;
}

/* --- calendrier de chaleur (26 dernières semaines) --- */
function heatmapHtml(h){
 const cells=h&&h.cells||[];
 if(!cells.length)return emptyBlock(h?h.title:"Activité");
 const byDate=new Map(cells.map(c=>[c.date,c.value]));
 const dates=cells.map(c=>c.date).sort();
 const end=new Date(dates[dates.length-1]+"T12:00:00");
 const max=Math.max(...cells.map(c=>c.value),1);
 const weeks=26,cols=[];const cur=new Date(end);
 cur.setDate(cur.getDate()-(weeks*7-1));
 for(let w=0;w<weeks;w++){const col=[];
  for(let d=0;d<7;d++){const iso=cur.toISOString().slice(0,10);
   col.push({date:iso,v:byDate.get(iso)||0});cur.setDate(cur.getDate()+1);}
  cols.push(col);}
 const rects=cols.map((col,w)=>col.map((c,d)=>
  `<rect x="${w*14}" y="${d*14}" width="12" height="12" rx="2.5"
    fill="${c.v?"var(--accent)":"rgba(20,24,20,0.07)"}" fill-opacity="${c.v?(0.25+0.75*c.v/max).toFixed(2):1}"
    stroke="rgba(20,24,20,0.15)" stroke-width="0.5"><title>${c.date} — ${fmtFull.format(c.v)}</title></rect>`).join("")).join("");
 return `<div class="viz-card hm"><h2>${esc(h.title)}</h2><div class="viz-sub">26 dernières semaines</div>
  <div class="tbl-wrap"><svg viewBox="0 0 ${weeks*14} ${7*14}" role="img" aria-label="${esc(h.title)}">${rects}</svg></div></div>`;
}

/* --- tableau : tri par colonne, recherche, pagination 25/pg --- */
function mountTable(el,spec){
 const st=ST.tbl[spec.id]||(ST.tbl[spec.id]={q:"",sort:null,page:0});
 el.innerHTML=`<div class="viz-card dtable">
  <div style="display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center">
   <h2>${esc(spec.title)}</h2>
   <input class="dt-q" placeholder="Rechercher…" value="${esc(st.q)}" aria-label="Rechercher dans ${esc(spec.title)}">
  </div><div class="dt-body"></div></div>`;
 const body=el.querySelector(".dt-body"),qi=el.querySelector(".dt-q");
 const num=x=>typeof x==="number"?x:parseFloat(String(x).replace(/[^\d.,-]/g,"").replace(",","."));
 const render=()=>{
  let rows=spec.rows||[];
  if(st.q){const q=st.q.toLowerCase();
   rows=rows.filter(r=>r.some(c=>String(c).toLowerCase().includes(q)));}
  if(st.sort){const{col,dir}=st.sort;
   rows=[...rows].sort((a,b)=>{const nx=num(a[col]),ny=num(b[col]);
    if(!Number.isNaN(nx)&&!Number.isNaN(ny))return(nx-ny)*dir;
    return String(a[col]).localeCompare(String(b[col]),"fr")*dir;});}
  const pages=Math.max(1,Math.ceil(rows.length/25));
  st.page=Math.min(st.page,pages-1);const cur=st.page;
  body.innerHTML=`<div class="tbl-wrap" style="margin-top:12px"><table><thead><tr>
    ${spec.columns.map((c,i)=>`<th data-col="${i}" aria-sort="${st.sort&&st.sort.col===i?(st.sort.dir===1?"ascending":"descending"):"none"}">${esc(c)} ${st.sort&&st.sort.col===i?(st.sort.dir===1?"▲":"▼"):"↕"}</th>`).join("")}
   </tr></thead><tbody>
    ${rows.slice(cur*25,(cur+1)*25).map(r=>`<tr>${r.map(c=>`<td>${typeof c==="number"?fmtFull.format(c):esc(c)}</td>`).join("")}</tr>`).join("")||`<tr><td colspan="${spec.columns.length}" style="color:var(--ink-3)">Aucun résultat.</td></tr>`}
   </tbody></table></div>
   <div class="dtable-foot"><span class="klabel">${fmtFull.format(rows.length)} ligne${rows.length>1?"s":""}</span>
    <span style="display:flex;gap:6px;align-items:center">
     <button type="button" class="btn btn-ghost dt-prev"${cur===0?" disabled":""}>←</button>
     <span class="chip">${cur+1} / ${pages}</span>
     <button type="button" class="btn btn-ghost dt-next"${cur>=pages-1?" disabled":""}>→</button></span></div>`;
  body.querySelectorAll("th").forEach(th=>th.addEventListener("click",()=>{
   const col=+th.dataset.col;
   st.sort={col,dir:st.sort&&st.sort.col===col&&st.sort.dir===1?-1:1};render();}));
  const prev=body.querySelector(".dt-prev"),next=body.querySelector(".dt-next");
  prev.addEventListener("click",()=>{st.page=Math.max(0,cur-1);render()});
  next.addEventListener("click",()=>{st.page=Math.min(pages-1,cur+1);render()});
 };
 qi.addEventListener("input",deb(()=>{st.q=qi.value;st.page=0;render()},250));
 render();
}

/* --- barre de période + boutons PDF --- */
function periodBar(){
 const customOn=!!(ST.from&&ST.to);
 return `<div class="pchips" role="group" aria-label="Période d'analyse">
  ${PERIODS_UI.map(([id,l])=>`<button type="button" class="pchip" data-period="${id}" aria-pressed="${!customOn&&ST.period===id}">${l}</button>`).join("")}
  <span class="pdates"><input type="date" id="pfrom" value="${esc(ST.from)}" aria-label="Du">
   <span class="klabel">au</span><input type="date" id="pto" value="${esc(ST.to)}" aria-label="Au"></span></div>`;
}
function bindPeriod(){
 document.querySelectorAll(".pchip").forEach(b=>b.addEventListener("click",()=>{
  ST.period=b.dataset.period;ST.from="";ST.to="";loadStatsData();}));
 const pf=$("#pfrom"),pt=$("#pto");
 const go=()=>{if(pf.value&&pt.value){ST.from=pf.value;ST.to=pt.value;loadStatsData();}};
 pf.addEventListener("change",go);pt.addEventListener("change",go);
}
/* --- menu PDF : 5 rapports (équivalent vanilla du PdfButton v2) --- */
const PDF_MODES=[
 ["synthese","Synthèse exécutive","Couverture, KPI, jauges & records (2-3 p.)"],
 ["tendances","Tendances & évolution","Toutes les séries + min/max/moy/méd/σ"],
 ["repartitions","Répartitions & géographie","Anneaux, distributions, géo, activité horaire"],
 ["donnees","Données détaillées","Tous les tableaux en version longue (400 lignes)"]];
function pdfActionsHtml(){
 return `<span class="pdf-actions pdf-menu-wrap">
  <button type="button" class="btn btn-primary" data-pdf="complet">⬇ Rapport PDF complet</button>
  <button type="button" class="btn btn-ghost" id="pdf-more" aria-haspopup="true" aria-expanded="false">Autres rapports ▾</button>
  <div class="pdf-menu" id="pdf-menu" role="menu">
   ${PDF_MODES.map(([m,l,d])=>`<button type="button" role="menuitem" data-pdf="${m}">${l}<small>${d}</small></button>`).join("")}
  </div></span>`;
}
function bindPdf(){
 const url=m=>{const p=new URLSearchParams({period:ST.period,mode:m});
  if(ST.from&&ST.to){p.set("from",ST.from);p.set("to",ST.to);}
  return "/api/stats/report?"+p;};
 const menu=document.getElementById("pdf-menu"),more=document.getElementById("pdf-more");
 if(more&&menu){
  more.addEventListener("click",e=>{e.stopPropagation();
   const open=menu.classList.toggle("open");more.setAttribute("aria-expanded",open);
   if(open)document.addEventListener("click",()=>{menu.classList.remove("open");
    more.setAttribute("aria-expanded","false");},{once:true});});}
 document.querySelectorAll("[data-pdf]").forEach(b=>{
  b.addEventListener("click",async()=>{
   if(menu)menu.classList.remove("open");
   const t=b.innerHTML;b.disabled=true;
   b.innerHTML=b.closest(".pdf-menu")?"Génération…":"⏳ Génération…";
   try{const r=await fetch(url(b.dataset.pdf));if(!r.ok)throw new Error(r.status);
    const blob=await r.blob();
    const fn=((r.headers.get("Content-Disposition")||"").match(/filename="?([^";]+)/)||[])[1]||"rapport-crea-ka.pdf";
    const a=document.createElement("a");a.href=URL.createObjectURL(blob);a.download=fn;
    document.body.appendChild(a);a.click();a.remove();
    setTimeout(()=>URL.revokeObjectURL(a.href),4000);}
   catch(e){alert("Échec de la génération du PDF — réessayez.");}
   b.disabled=false;b.innerHTML=t;});});
}

async function renderStats(){
 document.title="Statistiques — Créa-Ka";
 app.innerHTML=header()+`<div class="container"><div class="spin"></div></div>`+footer()+tabbar("stats");bindNav();
 await loadStatsData(true);
 window.scrollTo(0,0);
}
async function loadStatsData(first){
 const main=$("#stats-main");if(main)main.style.opacity=".45";
 let d;
 try{const p=new URLSearchParams({period:ST.period});
  if(ST.from&&ST.to){p.set("from",ST.from);p.set("to",ST.to);}
  d=await api("/api/stats/dashboard?"+p);}
 catch(e){app.innerHTML=header()+`<div class="container empty">Statistiques indisponibles pour le moment.</div>`+footer()+tabbar("stats");bindNav();return}
 ST.data=d;renderStatsPage();
}
function renderStatsPage(){
 const d=ST.data;
 const upd=new Date(d.updated).toLocaleString("fr-CA",{dateStyle:"medium",timeStyle:"short"});
 const donuts=(d.breakdowns||[]).filter(b=>b.kind==="donut");
 const barsB=(d.breakdowns||[]).filter(b=>b.kind!=="donut");
 const gauges=(d.gauges||[]).filter(g=>typeof g.value==="number"&&g.max);
 const hasEvo=(d.series||[]).length||(d.multiseries||[]).length||(d.stacked||[]).length;
 app.innerHTML=header()+`
 <div class="container stats-page" id="stats-main">
  <div class="stats-head">
   <div><span class="kicker">Tableau de bord — ${esc(d.period.label)}</span>
    <h1 style="font-size:clamp(28px,4.6vw,46px);margin:12px 0 0;text-transform:uppercase">Les créateurs québécois <span class="hl">en chiffres.</span></h1>
    <div class="fresh-row"><span>Mis à jour le ${esc(upd)}</span>
     <button type="button" class="btn btn-ghost" id="st-refresh">↻ Rafraîchir</button></div></div>
   ${pdfActionsHtml()}
  </div>
  <div class="tiles">${(d.kpis||[]).map(kpiHtml).join("")||emptyBlock("Indicateurs")}</div>
  ${periodBar()}
  <p class="klabel" style="margin:6px 0 0">Période analysée : ${esc(d.period.from)} → ${esc(d.period.to)}</p>
  ${gauges.length?`<h2 class="stats-sect">Taux & couvertures</h2>
   <div class="gauges">${gauges.map(gaugeHtml).join("")}</div>`:""}
  <h2 class="stats-sect">Évolution</h2>
  ${hasEvo?`<div class="viz-grid">
   ${(d.series||[]).map(s=>`<div class="lc" data-serie="${esc(s.id)}"></div>`).join("")}
   ${(d.multiseries||[]).map(m=>`<div class="lc" data-multi="${esc(m.id)}"></div>`).join("")}
   ${(d.stacked||[]).map(st=>stackedHtml(st)).join("")}
  </div>`:emptyBlock("Évolution")}
  <h2 class="stats-sect">Répartitions & distributions</h2>
  <div class="viz-grid two">
   ${donuts.map(donutHtml).join("")}
   ${barsB.map(b=>barsHtml(b.title,b.items)).join("")}
   ${(d.distributions||[]).map(vbarsHtml).join("")}
  </div>
  ${d.geo?`<h2 class="stats-sect">Répartition géographique</h2>
   <div class="viz-grid two">${barsHtml(d.geo.title,d.geo.items)}</div>`:""}
  ${d.heatmap||d.hourly?`<h2 class="stats-sect">Activité</h2>
   ${d.heatmap?heatmapHtml(d.heatmap):""}${d.hourly?hourHeatHtml(d.hourly):""}`:""}
  ${(d.tables||[]).length?`<h2 class="stats-sect">Détails</h2><div style="display:grid;gap:22px">${(d.tables||[]).map(t=>`<div class="dt" data-table="${esc(t.id)}"></div>`).join("")}</div>`:""}
  ${(d.records||[]).length?`<h2 class="stats-sect">Records & faits marquants</h2>
   <div class="records-grid">${d.records.map(r=>`<div class="record"><span class="r-lbl">${esc(r.label)}</span>
    <span style="text-align:right"><span class="r-val">${esc(r.value)}</span>${r.date?`<span class="klabel" style="display:block">${esc(r.date)}</span>`:""}</span></div>`).join("")}</div>`:""}
  <p style="font-size:12px;color:var(--ink-3);margin-top:30px">Données réelles de l'annuaire (fiches actives, comptes vérifiés) — aucune statistique estimée ou inventée.
   Rapports PDF estampillés Groupe-KA (5 formats) disponibles en haut de page.</p>
 </div>`+footer()+tabbar("stats");
 bindNav();bindPeriod();bindPdf();
 $("#st-refresh").addEventListener("click",()=>loadStatsData());
 (ST.data.series||[]).forEach(s=>{const el=document.querySelector(`.lc[data-serie="${s.id}"]`);if(el)mountLine(el,s);});
 (ST.data.multiseries||[]).forEach(m=>{const el=document.querySelector(`.lc[data-multi="${m.id}"]`);if(el)mountMulti(el,m);});
 (ST.data.tables||[]).forEach(t=>{const el=document.querySelector(`.dt[data-table="${t.id}"]`);if(el)mountTable(el,t);});
}

/* ---------- page compte (KA ID) ---------- */
async function renderCompte(){
 document.title="Mon compte KA — Créa-Ka";
 app.innerHTML=header()+`<div class="container"><div class="spin"></div></div>`+footer()+tabbar("");bindNav();
 if(state.me===undefined){
  try{const r=await fetch("/api/me");state.me=r.ok?await r.json():null}
  catch(e){state.me=null}}
 const me=state.me;
 if(!me){
  app.innerHTML=header()+`
  <div class="container compte-page">
   <span class="kicker">KA ID — un seul compte pour tout le groupe</span>
   <h1 style="font-size:clamp(26px,4vw,34px);margin:12px 0;text-transform:uppercase">Connectez-vous avec votre <span class="hl">KA ID.</span></h1>
   <p style="color:var(--ink-2)">Le même compte que sur groupe-ka.com, Lou-Ka, Vrai-Prix et
    les autres plateformes du Groupe KA. Créez-le en une minute si vous n'en avez pas.</p>
   <div class="compte-actions">
    <a class="btn btn-primary" href="/api/auth/ka/login">Se connecter avec KA ID</a>
    <a class="btn btn-accent" href="https://www.groupe-ka.com/connexion" target="_blank" rel="noopener">Créer un compte KA ID ↗</a>
    <a class="btn btn-ghost" href="https://www.groupe-ka.com" target="_blank" rel="noopener">Qu'est-ce que KA ID ?</a>
   </div>
  </div>`+footer()+tabbar("");
  bindNav();loadAccount();return;
 }
 const init=(me.name||"?").split(/\s+/).slice(0,2).map(w=>w[0]||"").join("").toUpperCase();
 app.innerHTML=header()+`
 <div class="container compte-page">
  <span class="kicker">Mon compte</span>
  <h1 style="font-size:clamp(26px,4vw,34px);margin:12px 0;text-transform:uppercase">Carte de <span class="hl">membre.</span></h1>
  <div class="membercard">
   <div class="mc-brand">Groupe KA · carte de membre</div>
   <div class="mc-row">
    <div class="mc-avatar">${me.picture?`<img src="${esc(me.picture)}" alt="">`:esc(init)}</div>
    <div><div class="mc-name">${esc(me.name||"Membre")}</div>
     <div class="mc-kaid">${esc(me.ka_id||"")}</div>
     ${me.role_label||me.role?`<span class="mc-role">${esc(me.role_label||me.role)}</span>`:""}</div>
   </div>
   <div class="mc-meta">
    ${me.email?`<span><b>Courriel :</b> ${esc(me.email)}</span>`:""}
    ${me.city?`<span><b>Ville :</b> ${esc(me.city)}</span>`:""}
    ${me.job_title||me.company?`<span><b>Occupation :</b> ${esc([me.job_title,me.company].filter(Boolean).join(" · "))}</span>`:""}
    ${me.bio?`<span>${esc(me.bio)}</span>`:""}
   </div>
  </div>
  <div class="compte-actions">
   <a class="btn btn-ghost" href="https://www.groupe-ka.com/compte" target="_blank" rel="noopener">Modifier sur groupe-ka.com ↗</a>
   ${me.public_url?`<a class="btn btn-ghost" href="${esc(me.public_url)}" target="_blank" rel="noopener">Profil public ↗</a>`:""}
   <button class="btn btn-primary" id="logout">Se déconnecter</button>
  </div>
  <p style="font-size:12px;color:var(--ink-3);margin-top:18px">Le profil est dicté par le hub
   groupe-ka.com (source de vérité) ; Créa-Ka n'entrepose aucune donnée de compte.</p>
 </div>`+footer()+tabbar("");
 bindNav();loadAccount();
 $("#logout").addEventListener("click",async()=>{
  await fetch("/api/auth/logout",{method:"POST"}).catch(()=>{});
  state.me=null;history.pushState(null,"","/");route();});
}

/* ---------- page contact (écosystème Groupe KA — ka/ecosystem.json) ---------- */
function renderContact(){
 document.title="Contact — Créa-Ka, un service Groupe KA";
 const sites=KA_ECO.sites.map(s=>{
  const cur=s.id==="crea-ka";
  return `<a class="site-item" href="https://${esc(s.domain)}"${cur?"":' target="_blank" rel="noopener noreferrer"'}
   title="${esc(s.tagline)}"><i style="background:${esc(s.accent)}"></i><b>${esc(s.wordmark)}${cur?" (ici)":""}</b><span>${esc(s.domain)}</span></a>`;
 }).join("");
 app.innerHTML=header()+`
 <div class="container contact-page">
  <span class="kicker">Contact — Groupe KA</span>
  <h1>Nous <span class="hl">joindre.</span></h1>
  <p class="lead">${esc(KA_SITE.wordmark)} — ${esc(KA_SITE.tagline)} — est un service du
   <b>Groupe KA</b>. ${esc(KA_ECO.org.tagline)} Les contacts ci-dessous valent pour
   l'ensemble des plateformes du groupe.</p>
  <div class="contact-notice">${esc(KA_ECO.org.disclaimer)}</div>
  <h2 class="sect-title" style="margin-top:26px">Courriels</h2>
  <div class="contact-grid">
   ${KA_ECO.contacts.map(c=>`<a class="contact-card" href="mailto:${esc(c.email)}">
    <b>${esc(c.email)}</b><span>${esc(c.role)}</span></a>`).join("")}
  </div>
  <div class="compte-actions" style="margin-top:22px">
   <a class="btn btn-primary" href="${esc(KA_ECO.hub.url)}" target="_blank" rel="noopener noreferrer">Visiter le hub groupe-ka.com ↗</a>
   <a class="btn btn-ghost" href="/retrait" data-nav>Demander un retrait (Loi 25)</a>
  </div>
  <h2 class="sect-title">Les plateformes du groupe</h2>
  <div class="site-list">${sites}</div>
  <p style="font-size:12px;color:var(--ink-3);margin-top:20px">${esc(KA_ECO.hub.signupNote)}</p>
 </div>`+footer()+tabbar("");
 bindNav();window.scrollTo(0,0);
}

/* ---------- retrait / opt-out ---------- */
function renderOptout(){
 document.title="Retrait (opt-out) — Créa-Ka";
 app.innerHTML=header()+`
 <div class="container optout-page">
  <span class="kicker">Vie privée d'abord</span>
  <h1>Demander un <span class="hl">retrait</span></h1>
  <p>Vous êtes créateur ou créatrice et souhaitez ne plus figurer dans l'annuaire ?
   La fiche est <b>masquée immédiatement</b> et exclue de toute ré-agrégation future.
   Une correction d'erreur (mauvais compte rattaché) passe par le même formulaire.</p>
  <form id="of">
   <div class="field"><label>Nom public / nom de scène</label><input id="o-name" maxlength="200" placeholder="ex. Prénom Nom"></div>
   <div class="field"><label>Un de vos comptes (plateforme:handle)</label><input id="o-acc" maxlength="200" placeholder="ex. instagram:monhandle"></div>
   <div class="field"><label>Raison (facultatif)</label><textarea id="o-reason" rows="3" maxlength="500"></textarea></div>
   <div class="field"><label>Courriel de contact (facultatif, pour confirmation)</label><input id="o-contact" maxlength="200" type="email"></div>
   <div class="field"><button class="btn btn-primary" type="submit">Masquer ma fiche</button></div>
  </form><div id="o-result"></div>
 </div>`+footer()+tabbar("optout");
 bindNav();
 $("#of").addEventListener("submit",async e=>{e.preventDefault();
  const body={name:$("#o-name").value.trim(),account:$("#o-acc").value.trim(),
   reason:$("#o-reason").value.trim(),contact:$("#o-contact").value.trim()};
  if(!body.name&&!body.account){$("#o-result").innerHTML=`<div class="optout-ok warn">Indiquez au moins un nom ou un compte.</div>`;return}
  try{const r=await fetch("/api/optout",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(body)});
   const j=await r.json();
   $("#o-result").innerHTML=`<div class="optout-ok">✓ ${esc(j.message||"Demande enregistrée.")} ${j.masked?`(${j.masked} fiche(s) masquée(s))`:""}</div>`;
   e.target.reset();}
  catch(err){$("#o-result").innerHTML=`<div class="optout-ok warn">Erreur — réessayez ou écrivez à contact@spboucher.ai.</div>`}});
}

/* ---------- routeur ---------- */
function bindNav(root){
 (root||document).querySelectorAll("[data-nav]").forEach(a=>{
  if(a._nav)return;a._nav=1;
  a.addEventListener("click",e=>{const href=a.getAttribute("href");
   e.preventDefault();history.pushState(null,"",href);route();
   if(href.endsWith("#annuaire")){const el=$("#annuaire");if(el){el.scrollIntoView();const q=$("#q");if(q)q.focus()}}})});
 (root||document).querySelectorAll("[data-href]").forEach(card=>{
  if(card._nav)return;card._nav=1;
  const go=()=>{history.pushState(null,"",card.dataset.href);route()};
  card.addEventListener("click",e=>{if(e.target.closest("a"))return;go()});
  card.addEventListener("keydown",e=>{if(e.key==="Enter")go()});
 });}
function route(){
 const p=location.pathname;
 const m=p.match(/^\/createur\/([^/]+)$/);
 const qq=new URLSearchParams(location.search).get("q");if(qq&&!state.q)state.q=qq;
 let r;
 if(m)r=renderCreator(decodeURIComponent(m[1]));
 else if(p==="/retrait")r=renderOptout();
 else if(p==="/stats")r=renderStats();
 else if(p==="/compte")r=renderCompte();
 else if(p==="/contact")r=renderContact();
 else r=renderHome();
 Promise.resolve(r).then(()=>loadAccount()).catch(()=>{});
}
window.addEventListener("popstate",route);
route();
</script>
<script>window.KA_AGENT={site:"crea-ka"}</script>
<script src="/ka-agent.js" defer></script>
</body>
</html>