https://escape-game-studio.netlify.app/politique-cookies

1<!doctype html>
2<html lang="fr">
3  <head>
4    <meta charset="utf-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1" />
6    <title>Politique cookies et traceurs - Escape Game Studio</title>
7    <meta name="description" content="Politique cookies, traceurs et stockage local d'Escape Game Studio." />
8    <style>
9      :root {
10        color-scheme: dark;
11        --bg: #0f172a;
12        --panel: #111827;
13        --text: #e5e7eb;
14        --muted: #94a3b8;
15        --line: rgba(148, 163, 184, 0.28);
16        --accent: #93c5fd;
17        --accent-strong: #60a5fa;
18      }
19
20      * {
21        box-sizing: border-box;
22      }
23
24      body {
25        margin: 0;
26        min-height: 100vh;
27        background: var(--bg);
28        color: var(--text);
29        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
30        line-height: 1.65;
31      }
32
33      main {
34        width: min(960px, calc(100% - 32px));
35        margin: 0 auto;
36        padding: 48px 0 56px;
37      }
38
39      header {
40        margin-bottom: 36px;
41      }
42
43      h1,
44      h2,
45      h3 {
46        line-height: 1.2;
47        color: #f8fafc;
48      }
49
50      h1 {
51        margin: 0 0 12px;
52        font-size: clamp(2rem, 4vw, 3rem);
53      }
54
55      h2 {
56        margin-top: 34px;
57        font-size: 1.35rem;
58      }
59
60      h3 {
61        margin: 0 0 8px;
62        font-size: 1rem;
63      }
64
65      p,
66      li {
67        color: var(--muted);
68      }
69
70      a {
71        color: var(--accent);
72      }
73
74      a:hover {
75        color: var(--accent-strong);
76      }
77
78      .note {
79        color: var(--muted);
80      }
81
82      nav {
83        display: flex;
84        flex-wrap: wrap;
85        gap: 12px;
86        margin-top: 18px;
87      }
88
89      nav a {
90        display: inline-flex;
91        padding: 8px 12px;
92        border: 1px solid var(--line);
93        border-radius: 8px;
94        text-decoration: none;
95        background: rgba(147, 197, 253, 0.08);
96      }
97
98      .preference-center {
99        border: 1px solid var(--line);
100        border-radius: 8px;
101        background: rgba(17, 24, 39, 0.82);
102        padding: 20px;
103      }
104
105      .preference-row {
106        display: grid;
107        grid-template-columns: minmax(0, 1fr) auto;
108        gap: 16px;
109        align-items: center;
110        padding: 16px 0;
111        border-top: 1px solid var(--line);
112      }
113
114      .preference-row:first-of-type {
115        border-top: 0;
116      }
117
118      .preference-row p {
119        margin: 0;
120      }
121
122      .switch {
123        display: inline-flex;
124        align-items: center;
125        gap: 8px;
126        color: var(--text);
127        white-space: nowrap;
128      }
129
130      .switch input {
131        width: 18px;
132        height: 18px;
133        accent-color: var(--accent-strong);
134      }
135
136      .actions {
137        display: flex;
138        flex-wrap: wrap;
139        gap: 10px;
140        margin-top: 18px;
141      }
142
143      button {
144        border: 1px solid var(--line);
145        border-radius: 8px;
146        background: rgba(147, 197, 253, 0.1);
147        color: var(--text);
148        cursor: pointer;
149        font: inherit;
150        padding: 9px 12px;
151      }
152
153      button:hover {
154        border-color: var(--accent);
155      }
156
157      #preference-status {
158        margin-top: 12px;
159        min-height: 1.5em;
160      }
161
162      footer {
163        margin-top: 44px;
164        border-top: 1px solid var(--line);
165        padding-top: 20px;
166        color: var(--muted);
167      }
168
169      @media (max-width: 640px) {
170        main {
171          width: min(100% - 24px, 960px);
172          padding-top: 28px;
173        }
174
175        .preference-row {
176          grid-template-columns: 1fr;
177          gap: 10px;
178        }
179      }
180    </style>
181  </head>
182  <body>
183    <main>
184      <header>
185        <h1>Politique cookies et traceurs</h1>
186        <p class="note">Dernière mise à jour : 23 juin 2026</p>
187      <p>Cette page explique les cookies, traceurs et stockages locaux utilisés par Escape Game Studio, leurs finalités et les préférences disponibles pour les traitements non essentiels. Les statistiques non essentielles sont désactivées tant que vous ne les autorisez pas.</p>
188        <nav aria-label="Navigation légale">
189          <a href="/">Accueil</a>
190          <a href='/mentions-legales'>Mentions légales</a>
191          <a href='/politique-confidentialite'>Politique de confidentialité</a>
192          <a href='/conditions-utilisation'>Conditions générales d'utilisation</a>
193        </nav>
194      </header>
195
196      <h2>1. Cookies, stockage local et traceurs</h2>
197      <p>Un cookie est un petit fichier enregistré par le navigateur. Un traceur peut aussi prendre la forme d'un identifiant, d'un stockage local, d'un stockage de session, d'un événement envoyé au serveur ou d'un mécanisme similaire. Escape Game Studio utilise principalement le stockage local du navigateur pour faire fonctionner l'application et conserver certains choix.</p>
198      <p>Les stockages indispensables au service ne sont pas bloqués par le centre de préférences, car ils permettent notamment la session, la sauvegarde, la restauration de projets, les préférences d'interface et la sécurité.</p>
199
200      <h2>2. Catégories utilisées</h2>
201      <h3>Stockage essentiel</h3>
202      <p>Ce stockage permet la connexion, la persistance locale des projets, les brouillons, l'autosauvegarde, la langue, les états d'interface, les exports jouables, les préférences nécessaires et les fichiers ou médias liés à vos créations. Le désactiver empêcherait des fonctions attendues du service.</p>
203
204      <h3>Sécurité</h3>
205      <p>

205Certains identifiants techniques, journaux, marqueurs de session, informations de licence ou diagnostics peuvent être nécessaires pour protéger les comptes, éviter les abus, résoudre les erreurs et maintenir le service. Ils ne servent pas à de la prospection commerciale.</p>
206
207      <h3>Statistiques non essentielles</h3>
208      <p>Le service peut mesurer des visites quotidiennes du builder ou de la galerie, ainsi que des clics anonymisés sur des liens externes ou projets depuis les pages Pro. Ces événements utilisent un identifiant visiteur pseudonymisé et des agrégats destinés à comprendre l'usage général du service. Ils restent désactivés avant consentement et peuvent ensuite être modifiés ci-dessous ou dans les préférences du compte.</p>
209
210      <h3>Marketing</h3>
211      <p>Aucun traceur marketing n'est activé par défaut dans cette configuration. Si des outils publicitaires, d'affiliation ou de reciblage sont ajoutés plus tard, ils devront être présentés séparément et ne seront activés qu'avec un choix adapté lorsque la loi l'exige.</p>
212
213      <h2>3. Centre de préférences</h2>
214      <p>Ces préférences sont enregistrées dans le stockage local de ce navigateur. Pour un compte connecté, le choix de désactiver les statistiques non essentielles peut aussi être enregistré dans les paramètres du compte ou de l'organisation.</p>
215
216      <section class="preference-center" aria-labelledby="preference-title">
217        <h2 id="preference-title">Préférences de ce navigateur</h2>
218
219        <div class="preference-row">
220          <div>
221            <h3>Stockage essentiel</h3>
222            <p>Session, sauvegarde, brouillons, projets locaux, interface et fonctionnement hors ligne.</p>
223          </div>
224          <label class="switch">
225            <input type="checkbox" checked disabled />
226            Toujours actif
227          </label>
228        </div>
229
230        <div class="preference-row">
231          <div>
232            <h3>Sécurité</h3>
233            <p>Protection du compte, prévention des abus, diagnostics techniques et intégrité du service.</p>
234          </div>
235          <label class="switch">
236            <input type="checkbox" checked disabled />
237            Toujours actif
238          </label>
239        </div>
240
241        <div class="preference-row">
242          <div>
243            <h3>Statistiques non essentielles</h3>
244            <p>Mesure pseudonymisée des visites et clics pour améliorer l'expérience générale.</p>
245          </div>
246          <label class="switch" for="statistics-preference">
247            <input id="statistics-preference" type="checkbox" />
248            Autoriser
249          </label>
250        </div>
251
252        <div class="preference-row">
253          <div>
254            <h3>Marketing</h3>
255            <p>Traceurs publicitaires ou de prospection. Non utilisés actuellement.</p>
256          </div>
257          <label class="switch" for="marketing-preference">
258            <input id="marketing-preference" type="checkbox" disabled />
259            Non utilisé actuellement
260          </label>
261        </div>
262
263        <div class="actions" aria-label="Actions sur les préférences">
264          <button type="button" id="save-preferences">Enregistrer mes choix</button>
265          <button type="button" id="accept-all">Tout accepter</button>
266          <button type="button" id="reject-optional">Refuser les optionnels</button>
267        </div>
268        <p id="preference-status" class="note" role="status" aria-live="polite"></p>
269      </section>
270
271      <h2>4. Modifier ou supprimer vos choix</h2>
272      <p>Vous pouvez revenir sur cette page à tout moment. Vous pouvez aussi effacer les données de site depuis les réglages de votre navigateur ; cela supprimera les préférences locales, mais peut aussi retirer des sauvegardes, brouillons ou états indispensables enregistrés localement.</p>
273
274      <h2>5. Vos droits</h2>
275      <p>Les traitements de données personnelles, leurs bases, durées et droits associés sont détaillés dans la <a href='/politique-confidentialite'>politique de confidentialité</a>. Pour les demandes liées à vos données, utilisez les moyens de contact disponibles dans le service.</p>
276
277      <footer>
278        <p>Escape Game Studio - Politique cookies et traceurs.</p>
279      </footer>
280    </main>
281
282    

282<script>
283      (() => {
284        const PREFERENCES_KEY = 'escapeGameBuilder.cookiePreferences.v1';
285        const LEGACY_STATS_OPT_OUT_KEY = 'escapeGameBuilder.nonEssentialStatsOptOut.v1';
286        const VERSION = 1;
287        const MARKETING_CATEGORY_AVAILABLE = false;
288        const defaults = {
289          version: VERSION,
290          updatedAt: '',
291          categories: {
292            essential: true,
293            security: true,
294            statistics: false,
295            marketing: false,
296          },
297        };
298
299        const statisticsInput = document.getElementById('statistics-preference');
300        const marketingInput = document.getElementById('marketing-preference');
301        const status = document.getElementById('preference-status');
302
303        const normalizeBoolean = (value, fallback) => {
304          if (value === true || value === false) return value;
305          const normalized = String(value || '').trim();
306          if (/^(1|true|yes|on|accept|accepted|enabled)$/i.test(normalized)) return true;
307          if (/^(0|false|no|off|reject|rejected|disabled)$/i.test(normalized)) return false;
308          return fallback;
309        };
310
311        const readPreferences = () => {
312          try {
313            const raw = window.localStorage.getItem(PREFERENCES_KEY);
314            const legacyOptOutRaw = window.localStorage.getItem(LEGACY_STATS_OPT_OUT_KEY);
315            const legacyStatistics = legacyOptOutRaw === null
316              ? false
317              : !normalizeBoolean(legacyOptOutRaw, false);
318            const stored = raw ? JSON.parse(raw) : {};
319            const categories = stored && typeof stored === 'object' && stored.categories ? stored.categories : {};
320            return {
321              ...defaults,
322              updatedAt: typeof stored.updatedAt === 'string' ? stored.updatedAt : '',
323              categories: {
324                essential: true,
325                security: true,
326                statistics: normalizeBoolean(categories.statistics, legacyStatistics),
327                marketing: MARKETING_CATEGORY_AVAILABLE ? normalizeBoolean(categories.marketing, false) : false,
328              },
329            };
330          } catch {
331            return defaults;
332          }
333        };
334
335        const renderPreferences = (preferences) => {
336          statisticsInput.checked = Boolean(preferences.categories.statistics);
337          marketingInput.checked = MARKETING_CATEGORY_AVAILABLE && Boolean(preferences.categories.marketing);
338          marketingInput.disabled = !MARKETING_CATEGORY_AVAILABLE;
339        };
340
341        const savePreferences = (categories) => {
342          const preferences = {
343            version: VERSION,
344            updatedAt: new Date().toISOString(),
345            categories: {
346              essential: true,
347              security: true,
348              statistics: Boolean(categories.statistics),
349              marketing: MARKETING_CATEGORY_AVAILABLE && Boolean(categories.marketing),
350            },
351          };
352          window.localStorage.setItem(PREFERENCES_KEY, JSON.stringify(preferences));
353          window.localStorage.setItem(LEGACY_STATS_OPT_OUT_KEY, preferences.categories.statistics ? 'false' : 'true');
354          renderPreferences(preferences);
355          status.textContent = 'Préférences enregistrées pour ce navigateur.';
356        };
357
358        document.getElementById('save-preferences').addEventListener('click', () => {
359          savePreferences({
360            statistics: statisticsInput.checked,
361            marketing: MARKETING_CATEGORY_AVAILABLE && marketingInput.checked,
362          });
363        });
364
365        document.getElementById('accept-all').addEventListener('click', () => {
366          savePreferences({ statistics: true, marketing: false });
367        });
368
369        document.getElementById('reject-optional').addEventListener('click', () => {
370          savePreferences({ statistics: false, marketing: false });
371        });
372
373        renderPreferences(readPreferences());
374      })();
375    </script>

375
376  </body>
377</html>