<!--
  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>MAGASIN D&#x27;INSTRUMENTS DE MUSIQUE METRONOMIE (@sitemetronomie) — profils et liens | Créa-Ka</title>
<meta name="description" content="LE MEILLEUR MAGASIN DE MUSIQUE ET D&#x27;INSTRUMENTS DE MUSIQUE À RIVIÈRE-DU-LOUP, RIMOUSKI, BAS ...">
<link rel="canonical" href="https://www.crea-ka.com/createur/magasin-d-instruments-de-musique-metronomie">
<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="MAGASIN D&#x27;INSTRUMENTS DE MUSIQUE METRONOMIE (@sitemetronomie) — profils et liens | Créa-Ka">
<meta property="og:description" content="LE MEILLEUR MAGASIN DE MUSIQUE ET D&#x27;INSTRUMENTS DE MUSIQUE À RIVIÈRE-DU-LOUP, RIMOUSKI, BAS ...">
<meta property="og:url" content="https://www.crea-ka.com/createur/magasin-d-instruments-de-musique-metronomie">
<meta property="og:image" content="https://unavatar.io/youtube/sitemetronomie">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="MAGASIN D&#x27;INSTRUMENTS DE MUSIQUE METRONOMIE (@sitemetronomie) — profils et liens | Créa-Ka">
<meta name="twitter:description" content="LE MEILLEUR MAGASIN DE MUSIQUE ET D&#x27;INSTRUMENTS DE MUSIQUE À RIVIÈRE-DU-LOUP, RIMOUSKI, BAS ...">
<meta name="twitter:image" content="https://unavatar.io/youtube/sitemetronomie">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"ProfilePage","@id":"https://www.crea-ka.com/createur/magasin-d-instruments-de-musique-metronomie","url":"https://www.crea-ka.com/createur/magasin-d-instruments-de-musique-metronomie","name":"MAGASIN D'INSTRUMENTS DE MUSIQUE METRONOMIE (@sitemetronomie) — profils et liens | Créa-Ka","inLanguage":"fr-CA","isPartOf":{"@id":"https://www.crea-ka.com/#website"},"mainEntity":{"@type":"Person","name":"MAGASIN D'INSTRUMENTS DE MUSIQUE METRONOMIE","url":"https://www.crea-ka.com/createur/magasin-d-instruments-de-musique-metronomie","alternateName":"@sitemetronomie","description":"LE MEILLEUR MAGASIN DE MUSIQUE ET D'INSTRUMENTS DE MUSIQUE À RIVIÈRE-DU-LOUP, RIMOUSKI, BAS ...","image":"https://unavatar.io/youtube/sitemetronomie","sameAs":["https://www.youtube.com/@sitemetronomie"]},"dateModified":"2026-08-22T20:53:11Z","dateCreated":"2026-08-18T17:05:23Z"}</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":"MAGASIN D'INSTRUMENTS DE MUSIQUE METRONOMIE","item":"https://www.crea-ka.com/createur/magasin-d-instruments-de-musique-metronomie"}]}</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>MAGASIN D&#x27;INSTRUMENTS DE MUSIQUE METRONOMIE (@sitemetronomie)</h1><p>LE MEILLEUR MAGASIN DE MUSIQUE ET D&#x27;INSTRUMENTS DE MUSIQUE À RIVIÈRE-DU-LOUP, RIMOUSKI, BAS ...</p><ul><li><a href="https://www.youtube.com/@sitemetronomie" rel="noopener">YouTube — @sitemetronomie</a> — 72 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>