templates/entreprise/privacy.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3.     
  4. {% block title  %}
  5. {{ parent() }} |  {{ 'entreprise.pricing' | trans }}
  6. {% endblock title  %}
  8. {% block stylesheets %}
  9.     {{ parent() }}
  10.     <style>
  11.       
  13.         /* Couleur principale : #0A0A9C */
  14.         :root {
  15.             --primary: #0A0A9C;
  16.             --primary-dark: #07076e;
  17.             --primary-light: #2e2eb3;
  18.             --primary-soft: #eef2ff;
  19.             --gray-50: #f9fafb;
  20.             --gray-100: #f1f5f9;
  21.             --gray-200: #e2e8f0;
  22.             --gray-600: #475569;
  23.             --gray-800: #1e293b;
  24.             --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  25.             --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  26.         }
  28.         /* Layout */
  29.         .container {
  30.             max-width: 1280px;
  31.             margin: 0 auto;
  32.             padding: 0 1.5rem;
  33.         }
  35.         /* Header avec accent principal */
  36.         .site-header {
  37.             background: white;
  38.             border-bottom: 1px solid var(--gray-200);
  39.             box-shadow: var(--shadow-sm);
  40.             position: sticky;
  41.             top: 0;
  42.             z-index: 10;
  43.             backdrop-filter: blur(0px);
  44.         }
  46.         .header-inner {
  47.             display: flex;
  48.             align-items: center;
  49.             justify-content: space-between;
  50.             flex-wrap: wrap;
  51.             padding: 1rem 0;
  52.             gap: 1rem;
  53.         }
  55.         .logo-area {
  56.             display: flex;
  57.             align-items: center;
  58.             gap: 0.75rem;
  59.         }
  61.         .logo-icon {
  62.             background: var(--primary);
  63.             width: 40px;
  64.             height: 40px;
  65.             border-radius: 12px;
  66.             display: flex;
  67.             align-items: center;
  68.             justify-content: center;
  69.             color: white;
  70.             font-weight: 700;
  71.             font-size: 1.25rem;
  72.             box-shadow: 0 2px 6px rgba(10,10,156,0.2);
  73.         }
  75.         .logo-text h1 {
  76.             font-size: 1.35rem;
  77.             font-weight: 700;
  78.             letter-spacing: -0.3px;
  79.             color: var(--primary-dark);
  80.         }
  82.         .logo-text p {
  83.             font-size: 0.75rem;
  84.             color: var(--gray-600);
  85.         }
  87.         .back-home {
  88.             background: white;
  89.             border: 1px solid var(--gray-200);
  90.             padding: 0.5rem 1.2rem;
  91.             border-radius: 40px;
  92.             font-size: 0.9rem;
  93.             font-weight: 500;
  94.             color: var(--primary);
  95.             text-decoration: none;
  96.             transition: all 0.2s ease;
  97.             display: inline-flex;
  98.             align-items: center;
  99.             gap: 0.5rem;
  100.         }
  102.         .back-home:hover {
  103.             background: var(--primary-soft);
  104.             border-color: var(--primary-light);
  105.             color: var(--primary-dark);
  106.         }
  108.         /* Hero cookie */
  109.         .cookie-hero {
  110.             background: linear-gradient(135deg, #ffffff 0%, var(--primary-soft) 100%);
  111.             border-radius: 2rem;
  112.             margin: 2rem 0 2rem 0;
  113.             padding: 2rem 2rem;
  114.             box-shadow: var(--shadow-sm);
  115.             border: 1px solid rgba(10,10,156,0.1);
  116.         }
  118.         .hero-badge {
  119.             display: inline-block;
  120.             background: var(--primary);
  121.             color: white;
  122.             padding: 0.2rem 0.9rem;
  123.             border-radius: 40px;
  124.             font-size: 0.8rem;
  125.             font-weight: 600;
  126.             letter-spacing: 0.3px;
  127.             margin-bottom: 1rem;
  128.         }
  130.         .cookie-hero h1 {
  131.             font-size: 2.2rem;
  132.             font-weight: 800;
  133.             color: #0a0a2a;
  134.             margin-bottom: 1rem;
  135.             line-height: 1.2;
  136.         }
  138.         .cookie-hero p.lead {
  139.             font-size: 1.1rem;
  140.             color: var(--gray-800);
  141.             max-width: 85%;
  142.             opacity: 0.85;
  143.         }
  145.         /* Main content */
  146.         .policy-card {
  147.             background: white;
  148.             border-radius: 1.5rem;
  149.             box-shadow: var(--shadow-md);
  150.             margin-bottom: 3rem;
  151.             overflow: hidden;
  152.             border: 1px solid var(--gray-200);
  153.         }
  155.         .policy-section {
  156.             padding: 2rem 2rem;
  157.             border-bottom: 1px solid var(--gray-100);
  158.         }
  160.         .policy-section:last-child {
  161.             border-bottom: none;
  162.         }
  164.         .section-title {
  165.             display: flex;
  166.             align-items: center;
  167.             gap: 0.75rem;
  168.             margin-bottom: 1.25rem;
  169.         }
  171.         .section-title .title-icon {
  172.             background: var(--primary-soft);
  173.             width: 40px;
  174.             height: 40px;
  175.             border-radius: 40px;
  176.             display: inline-flex;
  177.             align-items: center;
  178.             justify-content: center;
  179.             color: var(--primary);
  180.             font-size: 1.25rem;
  181.             font-weight: 600;
  182.         }
  184.         .section-title h2 {
  185.             font-size: 1.6rem;
  186.             font-weight: 700;
  187.             color: var(--primary-dark);
  188.             letter-spacing: -0.2px;
  189.         }
  191.         .policy-text {
  192.             color: var(--gray-800);
  193.             margin-bottom: 1.25rem;
  194.         }
  196.         .policy-text p {
  197.             margin-bottom: 1rem;
  198.         }
  200.         .cookie-table {
  201.             width: 100%;
  202.             border-collapse: collapse;
  203.             margin: 1.5rem 0;
  204.             background: var(--gray-50);
  205.             border-radius: 1rem;
  206.             overflow: hidden;
  207.             box-shadow: var(--shadow-sm);
  208.         }
  210.         .cookie-table th, .cookie-table td {
  211.             padding: 1rem;
  212.             text-align: left;
  213.             border-bottom: 1px solid var(--gray-200);
  214.             vertical-align: top;
  215.         }
  217.         .cookie-table th {
  218.             background-color: var(--primary);
  219.             color: white;
  220.             font-weight: 600;
  221.             font-size: 0.9rem;
  222.         }
  224.         .cookie-table tr:last-child td {
  225.             border-bottom: none;
  226.         }
  228.         .cookie-table td {
  229.             background-color: white;
  230.             font-size: 0.9rem;
  231.         }
  233.         .badge-cookie {
  234.             background: var(--primary-soft);
  235.             color: var(--primary);
  236.             border-radius: 30px;
  237.             padding: 0.2rem 0.8rem;
  238.             font-size: 0.7rem;
  239.             font-weight: 600;
  240.             display: inline-block;
  241.         }
  243.         .consent-actions {
  244.             background: var(--gray-100);
  245.             padding: 1.5rem;
  246.             border-radius: 1rem;
  247.             margin: 1.5rem 0 0.5rem;
  248.             display: flex;
  249.             flex-wrap: wrap;
  250.             gap: 1rem;
  251.             align-items: center;
  252.             justify-content: space-between;
  253.         }
  255.         .btn-primary {
  256.             background: var(--primary);
  257.             color: white;
  258.             border: none;
  259.             padding: 0.75rem 1.8rem;
  260.             border-radius: 60px;
  261.             font-weight: 600;
  262.             font-size: 0.9rem;
  263.             cursor: pointer;
  264.             transition: all 0.2s;
  265.             box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  266.             text-decoration: none;
  267.             display: inline-block;
  268.         }
  270.         .btn-primary:hover {
  271.             background: var(--primary-dark);
  272.             transform: translateY(-1px);
  273.         }
  275.         .btn-outline {
  276.             background: transparent;
  277.             border: 1px solid var(--gray-400);
  278.             padding: 0.7rem 1.5rem;
  279.             border-radius: 60px;
  280.             font-weight: 500;
  281.             color: var(--gray-800);
  282.             cursor: pointer;
  283.             transition: 0.2s;
  284.         }
  286.         .btn-outline:hover {
  287.             background: white;
  288.             border-color: var(--primary);
  289.             color: var(--primary);
  290.         }
  292.         .last-updated {
  293.             font-size: 0.8rem;
  294.             color: var(--gray-600);
  295.             border-top: 1px solid var(--gray-200);
  296.             padding-top: 1.5rem;
  297.             margin-top: 1rem;
  298.             text-align: right;
  299.         }
  301.         footer {
  302.             background: white;
  303.             border-top: 1px solid var(--gray-200);
  304.             padding: 2rem 0;
  305.             margin-top: 2rem;
  306.             color: var(--gray-600);
  307.             font-size: 0.85rem;
  308.         }
  310.         .footer-links {
  311.             display: flex;
  312.             flex-wrap: wrap;
  313.             gap: 1.5rem;
  314.             justify-content: center;
  315.             margin-bottom: 1rem;
  316.         }
  318.         .footer-links a {
  319.             color: var(--primary);
  320.             text-decoration: none;
  321.             font-weight: 500;
  322.         }
  324.         .footer-links a:hover {
  325.             text-decoration: underline;
  326.         }
  328.         @media (max-width: 768px) {
  329.             .cookie-hero h1 {
  330.                 font-size: 1.8rem;
  331.             }
  332.             .cookie-hero p.lead {
  333.                 max-width: 100%;
  334.             }
  335.             .policy-section {
  336.                 padding: 1.5rem;
  337.             }
  338.             .section-title h2 {
  339.                 font-size: 1.3rem;
  340.             }
  341.             .cookie-table th, .cookie-table td {
  342.                 padding: 0.75rem;
  343.             }
  344.             .consent-actions {
  345.                 flex-direction: column;
  346.                 align-items: stretch;
  347.             }
  348.         }
  349.     </style>
  350. {% endblock stylesheets %}
  351. {% block body  %}
  352.           <main class="container">
  353.         <!-- HERO section avec la couleur primaire dominante -->
  354.         <div class="cookie-hero">
  355.             <span class="hero-badge">🍪 Transparence totale</span>
  356.             <h1>Politique de cookies</h1>
  357.             <p class="lead">Chez {{ app_name }}, nous utilisons des cookies pour amĂ©liorer votre expĂ©rience, sĂ©curiser notre plateforme de mise en relation et vous proposer des prestataires (plombiers, Ă©lectriciens, etc.) pertinents près de chez vous.</p>
  358.         </div>
  360.         <div class="policy-card">
  361.             <div class="policy-section">
  362.                 <div class="section-title">
  363.                     <span class="title-icon">🍪</span>
  364.                     <h2>Qu'est-ce qu'un cookie ?</h2>
  365.                 </div>
  366.                 <div class="policy-text">
  367.                     <p>Un cookie est un petit fichier texte dĂ©posĂ© sur votre terminal (ordinateur, tablette, smartphone) lors de la visite d’un site web. Il permet de stocker des informations relatives Ă  votre navigation et de vous reconnaĂ®tre lors de vos visites ultĂ©rieures. Sur {{ app_name }}, nous utilisons des cookies essentiels, fonctionnels et d’analyse pour faciliter la mise en relation rapide avec un plombier, un Ă©lectricien ou tout autre artisan Ă  domicile.</p>
  368.                     <p>Les cookies ne contiennent aucune donnĂ©e personnelle sensible sans votre consentement explicite. Vous gardez le contrĂ´le total de vos prĂ©fĂ©rences Ă  tout moment.</p>
  369.                 </div>
  370.             </div>
  372.             <div class="policy-section">
  373.                 <div class="section-title">
  374.                     <span class="title-icon">⚙️</span>
  375.                     <h2>Cookies utilisĂ©s sur {{ app_name }}</h2>
  376.                 </div>
  377.                 <div class="policy-text">
  378.                     <p>Notre plateforme utilise diffĂ©rentes catĂ©gories de cookies pour garantir un fonctionnement optimal et une expĂ©rience fluide, que vous soyez un particulier recherchant un artisan ou un prestataire inscrit.</p>
  379.                 </div>
  381.                 <table class="cookie-table">
  382.                     <thead>
  383.                         <tr><th>Type de cookie</th><th>FinalitĂ©</th><th>DurĂ©e de conservation</th></tr>
  384.                     </thead>
  385.                     <tbody>
  386.                         <tr><td><span class="badge-cookie">Essentiels</span></td><td>Authentification, sĂ©curitĂ©, Ă©quilibrage de charge, mĂ©morisation du consentement. Indispensables Ă  la navigation et Ă  la mise en relation.</td><td>Session / jusqu’à 12 mois</td></tr>
  387.                         <tr><td><span class="badge-cookie">Fonctionnels</span></td><td>MĂ©moriser vos prĂ©fĂ©rences (code postal, type de prestation : plomberie, Ă©lectricitĂ©), affichage personnalisĂ© des artisans disponibles.</td><td>Jusqu’à 13 mois</td></tr>
  388.                         <tr><td><span class="badge-cookie">Analytiques / Statistiques</span></td><td>Mesurer l’audience, comprendre comment les utilisateurs interagissent avec le site (pages visitĂ©es, taux de conversion) afin d’optimiser nos services.</td><td>Jusqu’à 25 mois</td></tr>
  389.                         <tr><td><span class="badge-cookie">PrĂ©fĂ©rences publicitaires</span></td><td>Proposer des annonces pertinentes liĂ©es aux services Ă  domicile (uniquement avec votre accord explicite).</td><td>Jusqu’à 13 mois</td></tr>
  390.                     </tbody>
  391.                 </table>
  392.                 <p class="policy-text" style="font-size:0.85rem; margin-top:0.5rem;">Nous utilisons Ă©galement des cookies tiers (Google Analytics, Ă©ventuellement des services de cartographie) dans le cadre de l’amĂ©lioration de notre service. Vous pouvez Ă  tout moment modifier vos prĂ©fĂ©rences via notre gestionnaire de cookies.</p>
  393.             </div>
  395.             <div class="policy-section">
  396.                 <div class="section-title">
  397.                     <span class="title-icon">🛡️</span>
  398.                     <h2>Gestion et contrĂ´le de vos cookies</h2>
  399.                 </div>
  400.                 <div class="policy-text">
  401.                     <p>ConformĂ©ment Ă  la rĂ©glementation (RGPD et directive ePrivacy), nous recueillons votre consentement prĂ©alable pour le dĂ©pĂ´t de cookies non essentiels. Vous pouvez Ă  tout moment modifier vos choix ou retirer votre consentement via le lien â€śGĂ©rer mes cookies” en bas de page, ou directement dans les paramètres de votre navigateur.</p>
  402.                     <p>La plupart des navigateurs vous permettent de contrĂ´ler les cookies via leurs rĂ©glages : vous pouvez bloquer tous les cookies, supprimer ceux dĂ©jĂ  installĂ©s, ou ĂŞtre averti avant qu’un cookie ne soit dĂ©posĂ©. Attention, la dĂ©sactivation des cookies essentiels pourrait affecter certaines fonctionnalitĂ©s clĂ©s de mise en relation (connexion, recherche d’artisan).</p>
  403.                 </div>
  404.                 <div class="consent-actions">
  405.                     <span style="font-weight:500;">âś‹ Modifiez vos prĂ©fĂ©rences Ă  tout moment :</span>
  406.                     <div style="display: flex; gap: 12px;">
  407.                         <button id="acceptCookiesBtn" class="btn-primary">Accepter tous les cookies</button>
  408.                         <button id="refuseNonEssentialBtn" class="btn-outline">Refuser les cookies non essentiels</button>
  409.                     </div>
  410.                 </div>
  411.                 <div class="policy-text" style="margin-top: 1rem;">
  412.                     <p>đź’ˇ <strong>Pour les prestataires inscrits :</strong> les cookies nous aident Ă  sĂ©curiser votre espace professionnel et Ă  faciliter la gestion de vos disponibilitĂ©s (plomberie, Ă©lectricitĂ©, etc.). Vous retrouvez ici les mĂŞmes garanties de transparence.</p>
  413.                 </div>
  414.             </div>
  416.             <div class="policy-section">
  417.                 <div class="section-title">
  418.                     <span class="title-icon">đź“‹</span>
  419.                     <h2>Cookies tiers et partenaires</h2>
  420.                 </div>
  421.                 <div class="policy-text">
  422.                     <p>Notre site de mise en relation peut intĂ©grer des services tiers qui dĂ©posent leurs propres cookies :</p>
  423.                     <ul style="margin-left: 1.5rem; margin-top: 0.5rem; margin-bottom: 1rem;">
  424.                         <li>• <strong>Google Analytics</strong> : mesure d’audience anonymisĂ©e, nous aide Ă  amĂ©liorer l’expĂ©rience des artisans et des particuliers.</li>
  425.                         <li>• <strong>Google Maps / API cartographie</strong> : pour afficher les zones d’intervention des plombiers et Ă©lectriciens.</li>
  426.                         <li>• <strong>Outils de paiement sĂ©curisĂ©</strong> (le cas Ă©chĂ©ant) : cookies liĂ©s Ă  la transaction.</li>
  427.                     </ul>
  428.                     <p>Nous ne revendons aucune donnĂ©e Ă  des fins publicitaires tierces sans consentement explicite. Les donnĂ©es collectĂ©es sont strictement utilisĂ©es pour optimiser notre plateforme de mise en relation.</p>
  429.                 </div>
  430.             </div>
  432.             <div class="policy-section">
  433.                 <div class="section-title">
  434.                     <span class="title-icon">⚖️</span>
  435.                     <h2>Base lĂ©gale et durĂ©e de conservation</h2>
  436.                 </div>
  437.                 <div class="policy-text">
  438.                     <p>Le traitement des donnĂ©es via les cookies repose sur :</p>
  439.                     <ul style="margin-left: 1.5rem; margin-bottom: 1rem;">
  440.                         <li>• L’exĂ©cution du contrat (cookies essentiels Ă  la mise en relation entre particulier et prestataire).</li>
  441.                         <li>• Votre consentement pour les cookies de mesure d’audience, fonctionnels avancĂ©s et publicitaires.</li>
  442.                     </ul>
  443.                     <p>Les donnĂ©es issues des cookies sont conservĂ©es pour une durĂ©e n’excĂ©dant pas 13 mois (sauf exceptions lĂ©gales). Les donnĂ©es anonymisĂ©es d’analyse peuvent ĂŞtre conservĂ©es plus longtemps Ă  des fins statistiques.</p>
  444.                 </div>
  445.             </div>
  447.             <div class="policy-section">
  448.                 <div class="section-title">
  449.                     <span class="title-icon">đź“ž</span>
  450.                     <h2>Vos droits et contact</h2>
  451.                 </div>
  452.                 <div class="policy-text">
  453.                     <p>ConformĂ©ment au RGPD, vous disposez d’un droit d’accès, de rectification, d’effacement et de limitation des traitements de vos donnĂ©es personnelles. Pour toute demande relative aux cookies ou Ă  notre politique de confidentialitĂ©, vous pouvez nous Ă©crire Ă  : <strong>info@myhelpplace.com</strong> ou par courrier Ă  l’adresse indiquĂ©e dans nos mentions lĂ©gales.</p>
  454.                     <p>Nous nous engageons Ă  rĂ©pondre dans les meilleurs dĂ©lais et Ă  garantir une expĂ©rience de confiance pour tous nos utilisateurs : particuliers et artisans (plombiers, Ă©lectriciens, serruriers, etc.).</p>
  455.                 </div>
  456.             </div>
  457.             <div class="last-updated container" style="padding: 1rem 2rem 1.5rem 2rem;">
  458.                 đź“… Dernière mise Ă  jour : 20 mars 2026 â€” {{ app_name }} s'engage Ă  mettre Ă  jour cette politique en cas d’évolution lĂ©gale ou technique.
  459.             </div>
  460.         </div>
  462.         <!-- Message de confirmation dynamique (toast-like) -->
  463.         <div id="toastMessage" style="position: fixed; bottom: 2rem; right: 2rem; background: #0A0A9C; color: white; padding: 0.8rem 1.5rem; border-radius: 60px; font-weight: 500; box-shadow: 0 10px 20px rgba(0,0,0,0.1); z-index: 1000; opacity: 0; transition: opacity 0.2s; pointer-events: none;"></div>
  464.     </main>
  465. {% endblock body  %}
  467. {% block javascripts %}
  468. {{ parent() }}
  470.     <script>
  471.         (function() {
  472.             // Ă‰mulation de gestion de consentement â€“ purement front Ă  titre Ă©ducatif/dĂ©monstration interactive.
  473.             // L'implĂ©mentation rĂ©elle devrait stocker les prĂ©fĂ©rences dans localStorage et/ou via un consent manager.
  474.             // Ici on simule un stockage des prĂ©fĂ©rences pour l'expĂ©rience utilisateur cohĂ©rente.
  475.             
  476.             const STORAGE_KEY = 'servicepro_cookie_consent';
  477.             
  478.             function getConsent() {
  479.                 const stored = localStorage.getItem(STORAGE_KEY);
  480.                 if (stored === null) return null;
  481.                 try {
  482.                     return JSON.parse(stored);
  483.                 } catch(e) { return null; }
  484.             }
  485.             
  486.             function saveConsent(consentValue) {
  487.                 // consentValue: 'all' (tout acceptĂ©) , 'necessary_only' (uniquement essentiels)
  488.                 localStorage.setItem(STORAGE_KEY, JSON.stringify({ consent: consentValue, updatedAt: new Date().toISOString() }));
  489.                 showToast(`🍪 Vos prĂ©fĂ©rences ont Ă©tĂ© enregistrĂ©es : ${consentValue === 'all' ? 'tous les cookies acceptĂ©s' : 'seuls les cookies essentiels sont activĂ©s'}.`);
  490.                 // En condition rĂ©elle, on appliquerait les tags consent ou on dĂ©sactiverait les scripts tiers.
  491.                 // Ici on se contente d'un feedback utilisateur.
  492.                 console.log(`[Cookie consent] ${consentValue}`);
  493.             }
  494.             
  495.             function showToast(message) {
  496.                 const toast = document.getElementById('toastMessage');
  497.                 if (!toast) return;
  498.                 toast.textContent = message;
  499.                 toast.style.opacity = '1';
  500.                 setTimeout(() => {
  501.                     toast.style.opacity = '0';
  502.                 }, 3200);
  503.             }
  504.             
  505.             // Boutons d'interaction
  506.             const acceptBtn = document.getElementById('acceptCookiesBtn');
  507.             const refuseBtn = document.getElementById('refuseNonEssentialBtn');
  508.             const manageFooter = document.getElementById('manageCookiesFooter');
  509.             
  510.             if (acceptBtn) {
  511.                 acceptBtn.addEventListener('click', () => {
  512.                     saveConsent('all');
  513.                 });
  514.             }
  515.             if (refuseBtn) {
  516.                 refuseBtn.addEventListener('click', () => {
  517.                     saveConsent('necessary_only');
  518.                 });
  519.             }
  520.             if (manageFooter) {
  521.                 manageFooter.addEventListener('click', (e) => {
  522.                     e.preventDefault();
  523.                     // Simuler un panneau de gestion rapide - on peut ouvrir une alerte ou un modal simple pour dĂ©mo
  524.                     const currentConsent = getConsent();
  525.                     let msg = 'Gestion des cookies HelpPlace\n\n';
  526.                     msg += 'Choisissez votre prĂ©fĂ©rence :\n';
  527.                     msg += currentConsent ? `État actuel : ${currentConsent.consent === 'all' ? 'Tous les cookies acceptĂ©s' : 'Cookies essentiels uniquement'}\n\n` : 'Aucun choix enregistrĂ©.\n\n';
  528.                     const choice = confirm(msg + '✔️ OK = Accepter tous les cookies\n❌ Annuler = Refuser les cookies non essentiels');
  529.                     if (choice) {
  530.                         saveConsent('all');
  531.                     } else if (choice === false) {
  532.                         saveConsent('necessary_only');
  533.                     }
  534.                 });
  535.             }
  536.             
  537.             // Au chargement, afficher un petit message de bienvenue si l'utilisateur n'a jamais fait de choix (optionnel)
  538.             if (!getConsent()) {
  539.                 // Ne pas spammer, mais suggestion subtile via toast après 1 seconde
  540.                 setTimeout(() => {
  541.                     showToast('🍪 Nous respectons votre vie privĂ©e. Utilisez les boutons pour gĂ©rer vos cookies.');
  542.                 }, 1000);
  543.             } else {
  544.                 const consent = getConsent();
  545.                 if (consent.consent === 'all') {
  546.                     console.log('Cookies complets activĂ©s (simulation)');
  547.                 } else {
  548.                     console.log('Seuls les cookies essentiels actifs (simulation)');
  549.                 }
  550.             }
  551.             
  552.             // Simulation de lien retour vers l'accueil (placeholder)
  553.             const homeLink = document.querySelector('.back-home');
  554.             if (homeLink) {
  555.                 homeLink.addEventListener('click', (e) => {
  556.                     e.preventDefault();
  557.                     showToast('🚧 Retour vers la page d’accueil (simulation) â€” dans un vrai site, redirection vers l’index.');
  558.                     // window.location.href = '/';
  559.                 });
  560.             }
  561.             
  562.             // Gestion responsive et Ă©lĂ©gance: smooth scroll pour ancres internes (pas d'ancre particulière mais safe)
  563.             document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  564.                 anchor.addEventListener('click', function(e) {
  565.                     const targetId = this.getAttribute('href');
  566.                     if (targetId === "#" || targetId === "") return;
  567.                     const targetEl = document.querySelector(targetId);
  568.                     if (targetEl) {
  569.                         e.preventDefault();
  570.                         targetEl.scrollIntoView({ behavior: 'smooth' });
  571.                     }
  572.                 });
  573.             });
  574.         })();
  575.     </script>
  576. {% endblock javascripts %}