| 3 | File: index.html |
3 | File: index.html |
| 4 | Desc: Frontend Sorti-Ka — recherche + fiches événement (SPA sans build, |
4 | Desc: Frontend Sorti-Ka — recherche + fiches événement (SPA sans build, |
| 5 | routeur History API, consomme /api). Design system Groupe KA |
5 | routeur History API, consomme /api). Design system Groupe KA |
| 6 | − « éditorial sharp » : papier #f5f3ee · encre #141814 · vert #1c5c41 · |
6 | + « éditorial sharp » via ka-ui (src/ka/tokens.css, chargé en premier) : |
| 7 | − lime #d9f26b · Space Grotesk / Inter / JetBrains Mono · bordures |
7 | + papier #f5f3ee · encre #141814 · vert #1c5c41 · ACCENT FRAMBOISE |
| 8 | − encre + ombres décalées + grain de film. SSR : sortika/seo.py |
8 | + #d6336c · Space Grotesk / Inter / JetBrains Mono · bordures encre + |
| |
9 | + ombres décalées + grain de film. Footer commun KaFooter et page |
| |
10 | + /contact : contenu issu de src/ka/ecosystem.json (source de vérité — |
| |
11 | + resynchroniser le HTML si le JSON change). SSR : sortika/seo.py |
| 9 | injecte <head> et contenu dans les placeholders SSR_HEAD/SSR_BODY. |
12 | injecte <head> et contenu dans les placeholders SSR_HEAD/SSR_BODY. |
| 10 | --> |
13 | --> |
| 11 | <!DOCTYPE html> |
14 | <!DOCTYPE html> |
| 13 | <head> |
16 | <head> |
| 14 | <meta charset="utf-8"> |
17 | <meta charset="utf-8"> |
| 15 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
18 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 16 | −<title>Sorti·Ka — Toutes les sorties et tous les événements du Québec</title> |
19 | +<title>Sorti-Ka — Un service Groupe KA</title> |
| 17 | <meta name="description" content="Agrégateur indépendant de sorties et d'événements — concerts, festivals, spectacles, expositions, famille — dans les 17 régions du Québec, avec dates, lieux et gratuité."> |
20 | <meta name="description" content="Agrégateur indépendant de sorties et d'événements — concerts, festivals, spectacles, expositions, famille — dans les 17 régions du Québec, avec dates, lieux et gratuité."> |
| 18 | <!--SSR_HEAD--> |
21 | <!--SSR_HEAD--> |
| 19 | <link rel="preconnect" href="https://fonts.googleapis.com"> |
22 | <link rel="preconnect" href="https://fonts.googleapis.com"> |
| 20 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
23 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| 21 | <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"> |
24 | <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet"> |
| |
25 | +<link rel="stylesheet" href="/src/ka/tokens.css"> |
| 22 | <style> |
26 | <style> |
| |
27 | +/* ka-ui/tokens.css (chargé ci-dessus) fournit palette, socle et composants |
| |
28 | + communs ; ici : SEULEMENT l'accent framboise de Sorti·Ka + le CSS métier. */ |
| 23 | :root{ |
29 | :root{ |
| 24 | − /* système de design Groupe KA « éditorial sharp » */ |
30 | + --accent:#d6336c; --accent-soft:#fbe0eb; --accent-deep:#a12551; --on-accent:#ffffff; |
| 25 | − --paper:#f5f3ee; --surface:#fff; --surface-2:#faf9f5; |
31 | + /* alias rétro-compatibles — tout le CSS local en --lime suit l'accent */ |
| 26 | − --ink:#141814; --ink-2:#4d5551; --ink-3:#8b928c; |
32 | + --lime:var(--accent); --lime-soft:var(--accent-soft); |
| 27 | − --line:rgba(20,24,20,.14); --line-strong:rgba(20,24,20,.85); |
| |
| 28 | − --green:#1c5c41; --green-deep:#123f2e; |
| |
| 29 | − --lime:#d9f26b; --lime-soft:#f0f9d2; |
| |
| 30 | − --amber:#e8a33d; --amber-soft:#fdf3e2; |
| |
| 31 | − --danger:#b3423a; --danger-soft:#fbe9e7; |
| |
| 32 | − --r-card:10px; --r-ctl:6px; |
| |
| 33 | − --shadow-flat:0 1px 2px rgba(20,24,20,.05); |
| |
| 34 | − --shadow-off:6px 6px 0 var(--ink); |
| |
| 35 | − --shadow-off-soft:8px 8px 0 rgba(20,24,20,.08); |
| |
| 36 | − --font-display:"Space Grotesk",system-ui,sans-serif; |
| |
| 37 | − --font-body:"Inter",system-ui,sans-serif; |
| |
| 38 | − --font-mono:"JetBrains Mono",ui-monospace,monospace; |
| |
| 39 | } |
33 | } |
| 40 | −*{box-sizing:border-box} |
34 | +h1,h2,h3,h4{margin:0} |
| 41 | −html{scroll-behavior:smooth} |
35 | +a{text-decoration:none} |
| 42 | −body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body); |
| |
| 43 | − font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased} |
| |
| 44 | −body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;z-index:9999; |
| |
| 45 | − 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")} |
| |
| 46 | −body>*{position:relative} |
| |
| 47 | −h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.03em;margin:0} |
| |
| 48 | −a{color:inherit;text-decoration:none} |
| |
| 49 | button{font-family:inherit} |
36 | button{font-family:inherit} |
| 50 | −img{display:block} |
| |
| 51 | −::selection{background:var(--lime);color:var(--ink)} |
| |
| 52 | −:focus-visible{outline:2px solid var(--green);outline-offset:2px} |
| |
| 53 | .container{max-width:1240px;margin:0 auto;padding:0 24px} |
37 | .container{max-width:1240px;margin:0 auto;padding:0 24px} |
| 54 | @media(max-width:640px){.container{padding:0 16px}} |
38 | @media(max-width:640px){.container{padding:0 16px}} |
| 55 | − |
| |
| 56 | −/* ---------- micro-typo signature ---------- */ |
| |
| 57 | −.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono); |
| |
| 58 | − font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--green)} |
| |
| 59 | −.kicker::before{content:"";width:22px;height:2px;background:var(--green)} |
| |
| 60 | −.klabel{font-family:var(--font-mono);font-size:10px;font-weight:700; |
| |
| 61 | − text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)} |
| |
| 62 | −.hl{display:inline-block;background:var(--lime);border-radius:8px;padding:0 10px 2px;transform:rotate(-1deg)} |
| |
| 63 | − |
| |
| 64 | /* ---------- cartes & boutons signature ---------- */ |
39 | /* ---------- cartes & boutons signature ---------- */ |
| 65 | .gk-card{background:var(--surface);border:1.5px solid var(--ink); |
40 | .gk-card{background:var(--surface);border:1.5px solid var(--ink); |
| 66 | border-radius:var(--r-card);box-shadow:var(--shadow-off-soft)} |
41 | border-radius:var(--r-card);box-shadow:var(--shadow-off-soft)} |
| 71 | font-family:var(--font-display);font-size:14px;font-weight:700;cursor:pointer; |
46 | font-family:var(--font-display);font-size:14px;font-weight:700;cursor:pointer; |
| 72 | transition:background .15s ease,transform .1s ease,box-shadow .1s ease} |
47 | transition:background .15s ease,transform .1s ease,box-shadow .1s ease} |
| 73 | .btn:active{transform:translate(2px,2px);box-shadow:none!important} |
48 | .btn:active{transform:translate(2px,2px);box-shadow:none!important} |
| 74 | −.btn-primary{background:var(--ink);color:var(--lime);box-shadow:4px 4px 0 rgba(20,24,20,.25)} |
49 | +.btn-primary{background:var(--ink);color:var(--accent);box-shadow:4px 4px 0 rgba(20,24,20,.25)} |
| 75 | −.btn-primary:hover{background:var(--green-deep)} |
50 | +.btn-primary:hover{background:var(--accent-deep)} |
| 76 | .btn-ghost{background:var(--surface);color:var(--ink);box-shadow:4px 4px 0 rgba(20,24,20,.12)} |
51 | .btn-ghost{background:var(--surface);color:var(--ink);box-shadow:4px 4px 0 rgba(20,24,20,.12)} |
| 77 | −.btn-ghost:hover{background:var(--lime-soft)} |
52 | +.btn-ghost:hover{background:var(--accent-soft)} |
| 78 | |
53 | |
| 79 | /* ---------- header / ticker ---------- */ |
54 | /* ---------- header / ticker ---------- */ |
| 80 | .ticker{background:var(--ink);color:rgba(245,243,238,.85);overflow:hidden; |
55 | .ticker{background:var(--ink);color:rgba(245,243,238,.85);overflow:hidden; |
| 88 | .header{position:sticky;top:0;z-index:50;background:rgba(245,243,238,.9); |
63 | .header{position:sticky;top:0;z-index:50;background:rgba(245,243,238,.9); |
| 89 | backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1.5px solid var(--ink)} |
64 | backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1.5px solid var(--ink)} |
| 90 | .header-inner{display:flex;align-items:center;gap:18px;height:64px} |
65 | .header-inner{display:flex;align-items:center;gap:18px;height:64px} |
| |
66 | +.header-inner .gk-badge{flex:none} |
| |
67 | +@media(max-width:760px){ |
| |
68 | + /* le header s'empile (badge Groupe KA + nav visibles) — pas de débordement */ |
| |
69 | + .header-inner{flex-wrap:wrap;height:auto;min-height:56px;padding:8px 0;gap:6px 12px} |
| |
70 | + .nav{margin-left:0;flex-wrap:wrap} |
| |
71 | +} |
| 91 | .brand{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.03em; |
72 | .brand{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.03em; |
| 92 | display:flex;align-items:baseline;line-height:1;cursor:pointer} |
73 | display:flex;align-items:baseline;line-height:1;cursor:pointer} |
| 93 | −.brand .ka{background:var(--lime);border-radius:6px;padding:0 6px 2px;margin-left:2px;transform:rotate(-1deg)} |
74 | +.brand .ka{background:var(--accent);color:var(--on-accent);border-radius:6px;padding:0 6px 2px;margin-left:2px;transform:rotate(-1deg)} |
| 94 | .brand-tag{font-family:var(--font-mono);font-size:10px;text-transform:uppercase; |
75 | .brand-tag{font-family:var(--font-mono);font-size:10px;text-transform:uppercase; |
| 95 | letter-spacing:.08em;color:var(--ink-3);margin-left:8px} |
76 | letter-spacing:.08em;color:var(--ink-3);margin-left:8px} |
| 96 | @media(max-width:900px){.brand-tag{display:none}} |
77 | @media(max-width:900px){.brand-tag{display:none}} |
| 97 | .nav{margin-left:auto;display:flex;gap:6px} |
78 | .nav{margin-left:auto;display:flex;gap:6px} |
| 98 | −.nav a{padding:8px 14px;border:1.5px solid transparent;border-radius:var(--r-ctl); |
79 | +.nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px; |
| |
80 | + border:1.5px solid transparent;border-radius:var(--r-ctl); |
| 99 | font-family:var(--font-display);font-weight:700;font-size:13.5px;transition:all .15s ease} |
81 | font-family:var(--font-display);font-weight:700;font-size:13.5px;transition:all .15s ease} |
| 100 | −.nav a:hover{border-color:var(--ink);background:var(--lime-soft)} |
82 | +.nav a:hover{border-color:var(--ink);background:var(--accent-soft)} |
| 101 | .btn-ka{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;min-height:38px; |
83 | .btn-ka{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;min-height:38px; |
| 102 | border:1.5px solid var(--ink);border-radius:var(--r-ctl);background:var(--ink); |
84 | border:1.5px solid var(--ink);border-radius:var(--r-ctl);background:var(--ink); |
| 103 | color:var(--lime);font-family:var(--font-display);font-weight:700;font-size:13px; |
85 | color:var(--lime);font-family:var(--font-display);font-weight:700;font-size:13px; |
| 104 | cursor:pointer;box-shadow:3px 3px 0 rgba(20,24,20,.25);transition:background .15s ease} |
86 | cursor:pointer;box-shadow:3px 3px 0 rgba(20,24,20,.25);transition:background .15s ease} |
| 105 | −.btn-ka:hover{background:var(--green-deep)} |
87 | +.btn-ka:hover{background:var(--accent-deep)} |
| 106 | −.btn-ka .kdot{background:var(--lime);color:var(--ink);border-radius:4px; |
88 | +#auth{display:inline-flex;align-items:center;gap:10px;flex:none} |
| |
89 | +.ka-signup{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase; |
| |
90 | + letter-spacing:.06em;color:var(--ink-2);min-height:44px;display:inline-flex;align-items:center} |
| |
91 | +.ka-signup:hover{color:var(--accent-deep);text-decoration:underline} |
| |
92 | +.btn-ka .kdot{background:var(--accent);color:var(--on-accent);border-radius:4px; |
| 107 | padding:0 5px;font-weight:800;transform:rotate(-1deg)} |
93 | padding:0 5px;font-weight:800;transform:rotate(-1deg)} |
| 108 | .user-chip{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--ink); |
94 | .user-chip{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--ink); |
| 109 | border-radius:var(--r-pill,999px);background:var(--surface);padding:4px 12px 4px 5px; |
95 | border-radius:var(--r-pill,999px);background:var(--surface);padding:4px 12px 4px 5px; |
| 149 | .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} |
135 | .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} |
| 150 | .chip{border:1.5px solid var(--ink);background:var(--surface);border-radius:var(--r-ctl); |
136 | .chip{border:1.5px solid var(--ink);background:var(--surface);border-radius:var(--r-ctl); |
| 151 | padding:6px 12px;font-family:var(--font-display);font-size:12.5px;font-weight:700; |
137 | padding:6px 12px;font-family:var(--font-display);font-size:12.5px;font-weight:700; |
| |
138 | + text-transform:none;letter-spacing:0;min-height:34px; |
| 152 | cursor:pointer;color:var(--ink);line-height:1;transition:all .12s ease} |
139 | cursor:pointer;color:var(--ink);line-height:1;transition:all .12s ease} |
| 153 | −.chip:hover{background:var(--lime-soft)} |
140 | +.chip:hover{background:var(--accent-soft)} |
| 154 | −.chip.on{background:var(--ink);color:var(--lime);box-shadow:3px 3px 0 rgba(20,24,20,.25)} |
141 | +.chip.on{background:var(--ink);color:var(--accent);box-shadow:3px 3px 0 rgba(20,24,20,.25)} |
| 155 | .chip.free.on{background:var(--green);border-color:var(--green);color:#fff} |
142 | .chip.free.on{background:var(--green);border-color:var(--green);color:#fff} |
| 156 | |
143 | |
| 157 | /* ---------- résultats ---------- */ |
144 | /* ---------- résultats ---------- */ |
| 166 | .card-img img{width:100%;height:100%;object-fit:cover} |
153 | .card-img img{width:100%;height:100%;object-fit:cover} |
| 167 | .badge-date{position:absolute;left:10px;bottom:10px;font-family:var(--font-mono); |
154 | .badge-date{position:absolute;left:10px;bottom:10px;font-family:var(--font-mono); |
| 168 | font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em; |
155 | font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em; |
| 169 | − color:var(--ink);background:var(--lime);border:1.5px solid var(--ink); |
156 | + color:var(--on-accent);background:var(--accent);border:1.5px solid var(--ink); |
| 170 | border-radius:var(--r-ctl);padding:4px 9px;white-space:nowrap;box-shadow:2px 2px 0 var(--ink)} |
157 | border-radius:var(--r-ctl);padding:4px 9px;white-space:nowrap;box-shadow:2px 2px 0 var(--ink)} |
| 171 | .card-body{padding:15px 16px 14px;display:flex;flex-direction:column;gap:8px;flex:1} |
158 | .card-body{padding:15px 16px 14px;display:flex;flex-direction:column;gap:8px;flex:1} |
| 172 | .card-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start} |
159 | .card-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start} |
| 194 | |
181 | |
| 195 | /* ---------- fiche événement ---------- */ |
182 | /* ---------- fiche événement ---------- */ |
| 196 | .detail{padding:34px 0 50px} |
183 | .detail{padding:34px 0 50px} |
| 197 | −.back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono); |
184 | +.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--font-mono); |
| 198 | font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em; |
185 | font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em; |
| 199 | − color:var(--green);cursor:pointer;margin-bottom:20px} |
186 | + color:var(--green);cursor:pointer;margin-bottom:8px} |
| |
187 | +@media(pointer:coarse){.chip{min-height:44px}.user-chip .out{min-height:32px;padding:2px 8px}} |
| 200 | .back:hover{text-decoration:underline} |
188 | .back:hover{text-decoration:underline} |
| 201 | .detail-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:start} |
189 | .detail-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:start} |
| 202 | @media(max-width:860px){.detail-grid{grid-template-columns:1fr}} |
190 | @media(max-width:860px){.detail-grid{grid-template-columns:1fr}} |
| 231 | color:var(--green);text-transform:uppercase;letter-spacing:.06em} |
219 | color:var(--green);text-transform:uppercase;letter-spacing:.06em} |
| 232 | .src-card .n{font-size:12.5px;color:var(--ink-3);margin-top:6px} |
220 | .src-card .n{font-size:12.5px;color:var(--ink-3);margin-top:6px} |
| 233 | .src-card .n b{color:var(--green-deep)} |
221 | .src-card .n b{color:var(--green-deep)} |
| 234 | −footer{background:var(--ink);color:rgba(245,243,238,.72);padding:36px 0 46px;font-size:13px} |
222 | +.ka-footer{margin-top:0} |
| 235 | −footer .fam{display:flex;flex-wrap:wrap;gap:4px 14px;margin-bottom:14px} |
223 | + |
| 236 | −footer .fam a{font-family:var(--font-display);font-weight:700;color:#f5f3ee;padding:4px 0} |
224 | +/* ---------- page /contact ---------- */ |
| 237 | −footer .fam a:hover{color:var(--lime)} |
225 | +.contact-page{padding:44px 0 64px} |
| 238 | −footer .fam .lbl{font-family:var(--font-mono);font-size:10px;text-transform:uppercase; |
226 | +.contact-page h1{font-size:clamp(30px,4.2vw,48px);line-height:1.06;margin-top:16px;max-width:820px} |
| 239 | − letter-spacing:.08em;color:rgba(245,243,238,.45);align-self:center} |
227 | +.contact-page .lede{color:var(--ink-2);font-size:16px;max-width:660px;margin:16px 0 0} |
| 240 | −footer a.mail{color:var(--lime)} |
228 | +.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); |
| |
229 | + gap:18px;margin-top:28px} |
| |
230 | +.contact-card{padding:20px 22px;display:flex;flex-direction:column;gap:6px} |
| |
231 | +.contact-card a.mail{display:inline-flex;align-items:center;min-height:44px; |
| |
232 | + font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--accent-deep); |
| |
233 | + word-break:break-all} |
| |
234 | +.contact-card a.mail:hover{text-decoration:underline;text-underline-offset:4px} |
| |
235 | +.contact-note{margin-top:26px;padding:18px 20px;border-left:3px solid var(--accent); |
| |
236 | + background:var(--surface);border-radius:0 var(--r-card) var(--r-card) 0; |
| |
237 | + box-shadow:var(--shadow-flat);max-width:760px} |
| |
238 | +.contact-note b{color:var(--ink)} |
| |
239 | +.contact-sites{margin-top:36px} |
| |
240 | +.contact-sites ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0;padding:0} |
| |
241 | +.contact-sites a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px; |
| |
242 | + border:1.5px solid var(--ink);border-radius:var(--r-ctl);background:var(--surface); |
| |
243 | + font-family:var(--font-display);font-weight:700;font-size:13px; |
| |
244 | + box-shadow:3px 3px 0 rgba(20,24,20,.12);transition:background .15s ease} |
| |
245 | +.contact-sites a:hover{background:var(--accent-soft)} |
| |
246 | +.contact-sites a small{font-family:var(--font-mono);font-weight:500;font-size:10px; |
| |
247 | + color:var(--ink-3);margin-left:8px} |
| 241 | #ssr{display:none} |
248 | #ssr{display:none} |
| 242 | .hidden{display:none!important} |
249 | .hidden{display:none!important} |
| 243 | </style> |
250 | </style> |
| 258 | <header class="header"> |
265 | <header class="header"> |
| 259 | <div class="container header-inner"> |
266 | <div class="container header-inner"> |
| 260 | <a class="brand" data-nav href="/">Sorti<span class="ka">·Ka</span></a> |
267 | <a class="brand" data-nav href="/">Sorti<span class="ka">·Ka</span></a> |
| |
268 | + <a class="gk-badge" href="https://www.groupe-ka.com" target="_blank" rel="noopener noreferrer" |
| |
269 | + aria-label="Un service Groupe KA — visiter le portail de l'écosystème"> |
| |
270 | + Un service <b>Groupe<span class="ka">KA</span></b></a> |
| 261 | <span class="brand-tag">Sorties & événements — Québec</span> |
271 | <span class="brand-tag">Sorties & événements — Québec</span> |
| 262 | <nav class="nav"> |
272 | <nav class="nav"> |
| 263 | <a href="/#sources">Sources</a> |
273 | <a href="/#sources">Sources</a> |
| |
274 | + <a data-nav href="/contact">Contact</a> |
| 264 | <a href="/docs" target="_blank" rel="noopener">API</a> |
275 | <a href="/docs" target="_blank" rel="noopener">API</a> |
| 265 | </nav> |
276 | </nav> |
| 266 | <span id="auth"></span> |
277 | <span id="auth"></span> |
| 343 | </div> |
354 | </div> |
| 344 | </main> |
355 | </main> |
| 345 | |
356 | |
| 346 | −<footer> |
357 | +<!-- ======== VUE CONTACT (/contact) — contenu : src/ka/ecosystem.json ======== --> |
| |
358 | +<main id="view-contact" class="hidden"> |
| |
359 | + <div class="container contact-page"> |
| |
360 | + <span class="kicker">Contact · Groupe KA</span> |
| |
361 | + <h1>Écrire au <span class="hl">Groupe KA</span></h1> |
| |
362 | + <p class="lede">Sorti·Ka est un service du Groupe KA, holding québécois d'agrégateurs de |
| |
363 | + produits et services entièrement automatisés. Trois adresses, selon votre besoin :</p> |
| |
364 | + |
| |
365 | + <div class="contact-grid"> |
| |
366 | + <div class="contact-card gk-card"> |
| |
367 | + <span class="klabel">Projets, partenariats & données</span> |
| |
368 | + <a class="mail" href="mailto:contact@groupe-ka.com">contact@groupe-ka.com</a> |
| |
369 | + </div> |
| |
370 | + <div class="contact-card gk-card"> |
| |
371 | + <span class="klabel">Médias & questions générales</span> |
| |
372 | + <a class="mail" href="mailto:info@groupe-ka.com">info@groupe-ka.com</a> |
| |
373 | + </div> |
| |
374 | + <div class="contact-card gk-card"> |
| |
375 | + <span class="klabel">Légal, vie privée & Loi 25</span> |
| |
376 | + <a class="mail" href="mailto:admin@groupe-ka.com">admin@groupe-ka.com</a> |
| |
377 | + </div> |
| |
378 | + </div> |
| |
379 | + |
| |
380 | + <p class="contact-note"><b>Groupe KA est un agrégateur de contenu :</b> nous ne vendons rien, |
| |
381 | + ne louons rien et ne sommes partie à aucune transaction. Pour les billets, contactez la |
| |
382 | + billetterie ou l'organisateur indiqué sur chaque fiche.</p> |
| |
383 | + <p class="contact-note">La création de compte <b>KA ID</b> se fait sur le hub |
| |
384 | + <a href="https://www.groupe-ka.com/connexion" target="_blank" rel="noopener noreferrer" |
| |
385 | + style="color:var(--accent-deep);font-weight:700">groupe-ka.com/connexion</a> ; |
| |
386 | + chaque site de l'écosystème délègue sa connexion au hub.</p> |
| |
387 | + |
| |
388 | + <div class="contact-sites"> |
| |
389 | + <span class="kicker">L'écosystème ·Ka</span> |
| |
390 | + <ul> |
| |
391 | + <li><a href="https://www.groupe-ka.com" target="_blank" rel="noopener noreferrer">Groupe KA<small>le portail</small></a></li> |
| |
392 | + <li><a href="https://www.trouve-ka.com" target="_blank" rel="noopener noreferrer">Trouve·Ka<small>recherche</small></a></li> |
| |
393 | + <li><a href="https://www.lou-ka.com" target="_blank" rel="noopener noreferrer">Lou·Ka<small>logements</small></a></li> |
| |
394 | + <li><a href="https://www.immo-ka.com" target="_blank" rel="noopener noreferrer">Immo·Ka<small>propriétés</small></a></li> |
| |
395 | + <li><a href="https://www.vrai-prix.com" target="_blank" rel="noopener noreferrer">Vrai-Prix<small>valeur immo</small></a></li> |
| |
396 | + <li><a href="https://www.auto-ka.com" target="_blank" rel="noopener noreferrer">Auto·Ka<small>autos usagées</small></a></li> |
| |
397 | + <li><a href="https://www.fabri-ka.com" target="_blank" rel="noopener noreferrer">Fabri·Ka<small>fait au Québec</small></a></li> |
| |
398 | + <li><a href="https://www.food-ka.com" target="_blank" rel="noopener noreferrer">Food·Ka<small>épicerie</small></a></li> |
| |
399 | + <li><a href="https://www.resto-ka.com" target="_blank" rel="noopener noreferrer">Resto·Ka<small>restos</small></a></li> |
| |
400 | + <li><a href="https://www.crea-ka.com" target="_blank" rel="noopener noreferrer">Créa·Ka<small>créateurs</small></a></li> |
| |
401 | + <li><a href="https://www.api-ka.com" target="_blank" rel="noopener noreferrer">API·Ka<small>données API</small></a></li> |
| |
402 | + </ul> |
| |
403 | + </div> |
| |
404 | + </div> |
| |
405 | +</main> |
| |
406 | + |
| |
407 | +<!-- ======== FOOTER COMMUN GROUPE KA (ka-ui/KaFooter, siteId="sorti-ka") ======== --> |
| |
408 | +<footer class="ka-footer" id="contact"> |
| 347 | <div class="container"> |
409 | <div class="container"> |
| 348 | − <div class="fam"> |
410 | + <a class="wordmark" href="https://www.groupe-ka.com" target="_blank" rel="noopener noreferrer" |
| 349 | − <span class="lbl">Famille ·Ka</span> |
411 | + aria-label="Groupe KA — le portail de l'écosystème">Groupe <span class="ka">KA</span></a> |
| 350 | − <a href="https://www.lou-ka.com" target="_blank" rel="noopener">Lou·Ka</a> |
412 | + <p class="desc">Holding québécois d'agrégateurs de produits et services entièrement automatisés. |
| 351 | − <a href="https://www.immo-ka.com" target="_blank" rel="noopener">Immo·Ka</a> |
413 | + Des centaines de connecteurs lisent les sites à la source, normalisent la donnée et se |
| 352 | − <a href="https://www.auto-ka.com" target="_blank" rel="noopener">Auto·Ka</a> |
414 | + resynchronisent seuls. <b style="color:var(--paper)">Sorti·Ka</b> — Toutes les sorties, |
| 353 | − <a href="https://www.food-ka.com" target="_blank" rel="noopener">Food·Ka</a> |
415 | + dans les 17 régions — est un service Groupe KA.</p> |
| 354 | − <a href="https://www.fabri-ka.com" target="_blank" rel="noopener">Fabri·Ka</a> |
416 | + <p class="notice"><b>Groupe KA est un agrégateur de contenu : nous ne vendons rien, |
| 355 | − <a href="https://www.toit-ka.com" target="_blank" rel="noopener">Toit·Ka</a> |
417 | + ne louons rien et ne sommes partie à aucune transaction.</b></p> |
| 356 | − <a href="https://www.forma-ka.com" target="_blank" rel="noopener">Forma·Ka</a> |
418 | + <ul class="sites"> |
| 357 | − <a href="https://www.groupe-ka.com" target="_blank" rel="noopener">Groupe KA</a> |
419 | + <li><a href="https://www.groupe-ka.com" target="_blank" rel="noopener noreferrer">Groupe KA</a></li> |
| |
420 | + <li><a href="https://www.trouve-ka.com" target="_blank" rel="noopener noreferrer">Trouve·Ka</a></li> |
| |
421 | + <li><a href="https://www.lou-ka.com" target="_blank" rel="noopener noreferrer">Lou·Ka</a></li> |
| |
422 | + <li><a href="https://www.immo-ka.com" target="_blank" rel="noopener noreferrer">Immo·Ka</a></li> |
| |
423 | + <li><a href="https://www.vrai-prix.com" target="_blank" rel="noopener noreferrer">Vrai-Prix</a></li> |
| |
424 | + <li><a href="https://www.auto-ka.com" target="_blank" rel="noopener noreferrer">Auto·Ka</a></li> |
| |
425 | + <li><a href="https://www.fabri-ka.com" target="_blank" rel="noopener noreferrer">Fabri·Ka</a></li> |
| |
426 | + <li><a href="https://www.food-ka.com" target="_blank" rel="noopener noreferrer">Food·Ka</a></li> |
| |
427 | + <li><a href="https://www.resto-ka.com" target="_blank" rel="noopener noreferrer">Resto·Ka</a></li> |
| |
428 | + <li><a href="https://www.crea-ka.com" target="_blank" rel="noopener noreferrer">Créa·Ka</a></li> |
| |
429 | + <li><a href="https://www.api-ka.com" target="_blank" rel="noopener noreferrer">API·Ka</a></li> |
| |
430 | + <li><a href="https://www.valoplex.com" target="_blank" rel="noopener noreferrer">ValoPlex</a></li> |
| |
431 | + <li><a href="https://www.ka2.bot" target="_blank" rel="noopener noreferrer">Ka2</a></li> |
| |
432 | + <li><a href="https://www.ka4.bot" target="_blank" rel="noopener noreferrer">Ka4</a></li> |
| |
433 | + <li><a href="https://www.ka6.bot" target="_blank" rel="noopener noreferrer">Ka6</a></li> |
| |
434 | + </ul> |
| |
435 | + <div class="contacts"> |
| |
436 | + <p style="margin:0"><a href="mailto:contact@groupe-ka.com">contact@groupe-ka.com</a> |
| |
437 | + <span>Projets, partenariats & données</span></p> |
| |
438 | + <p style="margin:0"><a href="mailto:info@groupe-ka.com">info@groupe-ka.com</a> |
| |
439 | + <span>Médias & questions générales</span></p> |
| |
440 | + <p style="margin:0"><a href="mailto:admin@groupe-ka.com">admin@groupe-ka.com</a> |
| |
441 | + <span>Légal, vie privée & Loi 25</span></p> |
| 358 | </div> |
442 | </div> |
| 359 | − <div>Données : SIT Québec (MTO, CC 4.0) · Ville de Montréal (CC BY 4.0) · Ville de Laval (CC 4.0) · |
443 | + <p class="legal">Données : SIT Québec (MTO, CC 4.0) · Ville de Montréal (CC BY 4.0) · |
| 360 | − Le point de vente · evenko · Atuvu.ca · La Vitrine · Répertoire des municipalités (MAMH).</div> |
444 | + Ville de Laval (CC 4.0) · Le point de vente · evenko · Atuvu.ca · La Vitrine · |
| 361 | − <div style="margin-top:8px">© 2026 Sorti·Ka — Simon-Pierre Boucher · |
445 | + Répertoire des municipalités (MAMH).</p> |
| 362 | − <a class="mail" href="mailto:contact@spboucher.ai">contact@spboucher.ai</a></div> |
446 | + <p class="legal">© 2026 Groupe KA — Simon-Pierre Boucher |
| |
447 | + · <a data-nav href="/contact">Contact</a> |
| |
448 | + · <a href="https://www.groupe-ka.com/conditions" target="_blank" rel="noopener noreferrer">Conditions d'utilisation</a> |
| |
449 | + · <a href="https://www.groupe-ka.com/confidentialite" target="_blank" rel="noopener noreferrer">Politique de confidentialité</a> |
| |
450 | + · <a href="https://www.groupe-ka.com/loi-25" target="_blank" rel="noopener noreferrer">Protection des renseignements personnels (Loi 25)</a> |
| |
451 | + · <a href="https://www.groupe-ka.com/bots" target="_blank" rel="noopener noreferrer">Transparence des robots d'indexation</a></p> |
| 363 | </div> |
452 | </div> |
| 364 | </footer> |
453 | </footer> |
| 365 | |
454 | |
| 519 | bindNav($("d-similar")); |
608 | bindNav($("d-similar")); |
| 520 | }catch(e){ $("d-similar").innerHTML = ""; } |
609 | }catch(e){ $("d-similar").innerHTML = ""; } |
| 521 | |
610 | |
| 522 | − $("view-list").classList.add("hidden"); |
611 | + show("view-detail"); |
| 523 | − $("view-detail").classList.remove("hidden"); |
| |
| 524 | window.scrollTo({top:0}); |
612 | window.scrollTo({top:0}); |
| 525 | } |
613 | } |
| 526 | |
614 | |
| |
615 | +/* ---------- vues ---------- */ |
| |
616 | +const VIEWS = ["view-list","view-detail","view-contact"]; |
| |
617 | +function show(id){ |
| |
618 | + VIEWS.forEach(v => $(v).classList.toggle("hidden", v !== id)); |
| |
619 | +} |
| |
620 | + |
| 527 | function showList(){ |
621 | function showList(){ |
| 528 | − document.title = "Sorti·Ka — Toutes les sorties et tous les événements du Québec"; |
622 | + document.title = "Sorti-Ka — Un service Groupe KA"; |
| 529 | − $("view-detail").classList.add("hidden"); |
623 | + show("view-list"); |
| 530 | − $("view-list").classList.remove("hidden"); |
624 | +} |
| |
625 | + |
| |
626 | +function showContact(){ |
| |
627 | + document.title = "Contact — Sorti-Ka | Un service Groupe KA"; |
| |
628 | + show("view-contact"); |
| |
629 | + window.scrollTo({top:0}); |
| 531 | } |
630 | } |
| 532 | |
631 | |
| 533 | /* ---------- routeur ---------- */ |
632 | /* ---------- routeur ---------- */ |
| 534 | function route(){ |
633 | function route(){ |
| 535 | const m = location.pathname.match(/^\/evenement\/(.+)$/); |
634 | const m = location.pathname.match(/^\/evenement\/(.+)$/); |
| 536 | if(m) showDetail(decodeURIComponent(m[1])); |
635 | if(m) showDetail(decodeURIComponent(m[1])); |
| |
636 | + else if(location.pathname === "/contact") showContact(); |
| 537 | else showList(); |
637 | else showList(); |
| 538 | } |
638 | } |
| 539 | function go(path){ |
639 | function go(path){ |
| 606 | }; |
706 | }; |
| 607 | } else { |
707 | } else { |
| 608 | $("auth").innerHTML = `<a class="btn-ka" href="/api/auth/ka/login"> |
708 | $("auth").innerHTML = `<a class="btn-ka" href="/api/auth/ka/login"> |
| 609 | − <span class="kdot">·Ka</span> Se connecter avec KA</a>`; |
709 | + <span class="kdot">·Ka</span> Se connecter avec KA</a> |
| |
710 | + <a class="ka-signup" href="https://www.groupe-ka.com/connexion" |
| |
711 | + target="_blank" rel="noopener">Créer un compte</a>`; |
| 610 | } |
712 | } |
| 611 | } |
713 | } |
| 612 | }catch(e){} |
714 | }catch(e){} |