{% extends 'base.html.twig' %}
{% block title %}
{{ parent() }} | {{ 'entreprise.pricing' | trans }}
{% endblock title %}
{% block stylesheets %}
{{ parent() }}
<style>
/* Couleur principale : #0A0A9C */
:root {
--primary: #0A0A9C;
--primary-dark: #07076e;
--primary-light: #2e2eb3;
--primary-soft: #eef2ff;
--gray-50: #f9fafb;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-600: #475569;
--gray-800: #1e293b;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
/* Layout */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* Header avec accent principal */
.site-header {
background: white;
border-bottom: 1px solid var(--gray-200);
box-shadow: var(--shadow-sm);
position: sticky;
top: 0;
z-index: 10;
backdrop-filter: blur(0px);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 1rem 0;
gap: 1rem;
}
.logo-area {
display: flex;
align-items: center;
gap: 0.75rem;
}
.logo-icon {
background: var(--primary);
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 1.25rem;
box-shadow: 0 2px 6px rgba(10,10,156,0.2);
}
.logo-text h1 {
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -0.3px;
color: var(--primary-dark);
}
.logo-text p {
font-size: 0.75rem;
color: var(--gray-600);
}
.back-home {
background: white;
border: 1px solid var(--gray-200);
padding: 0.5rem 1.2rem;
border-radius: 40px;
font-size: 0.9rem;
font-weight: 500;
color: var(--primary);
text-decoration: none;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.back-home:hover {
background: var(--primary-soft);
border-color: var(--primary-light);
color: var(--primary-dark);
}
/* Hero cookie */
.cookie-hero {
background: linear-gradient(135deg, #ffffff 0%, var(--primary-soft) 100%);
border-radius: 2rem;
margin: 2rem 0 2rem 0;
padding: 2rem 2rem;
box-shadow: var(--shadow-sm);
border: 1px solid rgba(10,10,156,0.1);
}
.hero-badge {
display: inline-block;
background: var(--primary);
color: white;
padding: 0.2rem 0.9rem;
border-radius: 40px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.3px;
margin-bottom: 1rem;
}
.cookie-hero h1 {
font-size: 2.2rem;
font-weight: 800;
color: #0a0a2a;
margin-bottom: 1rem;
line-height: 1.2;
}
.cookie-hero p.lead {
font-size: 1.1rem;
color: var(--gray-800);
max-width: 85%;
opacity: 0.85;
}
/* Main content */
.policy-card {
background: white;
border-radius: 1.5rem;
box-shadow: var(--shadow-md);
margin-bottom: 3rem;
overflow: hidden;
border: 1px solid var(--gray-200);
}
.policy-section {
padding: 2rem 2rem;
border-bottom: 1px solid var(--gray-100);
}
.policy-section:last-child {
border-bottom: none;
}
.section-title {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.section-title .title-icon {
background: var(--primary-soft);
width: 40px;
height: 40px;
border-radius: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-size: 1.25rem;
font-weight: 600;
}
.section-title h2 {
font-size: 1.6rem;
font-weight: 700;
color: var(--primary-dark);
letter-spacing: -0.2px;
}
.policy-text {
color: var(--gray-800);
margin-bottom: 1.25rem;
}
.policy-text p {
margin-bottom: 1rem;
}
.cookie-table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
background: var(--gray-50);
border-radius: 1rem;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.cookie-table th, .cookie-table td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid var(--gray-200);
vertical-align: top;
}
.cookie-table th {
background-color: var(--primary);
color: white;
font-weight: 600;
font-size: 0.9rem;
}
.cookie-table tr:last-child td {
border-bottom: none;
}
.cookie-table td {
background-color: white;
font-size: 0.9rem;
}
.badge-cookie {
background: var(--primary-soft);
color: var(--primary);
border-radius: 30px;
padding: 0.2rem 0.8rem;
font-size: 0.7rem;
font-weight: 600;
display: inline-block;
}
.consent-actions {
background: var(--gray-100);
padding: 1.5rem;
border-radius: 1rem;
margin: 1.5rem 0 0.5rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
justify-content: space-between;
}
.btn-primary {
background: var(--primary);
color: white;
border: none;
padding: 0.75rem 1.8rem;
border-radius: 60px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
text-decoration: none;
display: inline-block;
}
.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-1px);
}
.btn-outline {
background: transparent;
border: 1px solid var(--gray-400);
padding: 0.7rem 1.5rem;
border-radius: 60px;
font-weight: 500;
color: var(--gray-800);
cursor: pointer;
transition: 0.2s;
}
.btn-outline:hover {
background: white;
border-color: var(--primary);
color: var(--primary);
}
.last-updated {
font-size: 0.8rem;
color: var(--gray-600);
border-top: 1px solid var(--gray-200);
padding-top: 1.5rem;
margin-top: 1rem;
text-align: right;
}
footer {
background: white;
border-top: 1px solid var(--gray-200);
padding: 2rem 0;
margin-top: 2rem;
color: var(--gray-600);
font-size: 0.85rem;
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: center;
margin-bottom: 1rem;
}
.footer-links a {
color: var(--primary);
text-decoration: none;
font-weight: 500;
}
.footer-links a:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.cookie-hero h1 {
font-size: 1.8rem;
}
.cookie-hero p.lead {
max-width: 100%;
}
.policy-section {
padding: 1.5rem;
}
.section-title h2 {
font-size: 1.3rem;
}
.cookie-table th, .cookie-table td {
padding: 0.75rem;
}
.consent-actions {
flex-direction: column;
align-items: stretch;
}
}
</style>
{% endblock stylesheets %}
{% block body %}
<main class="container">
<!-- HERO section avec la couleur primaire dominante -->
<div class="cookie-hero">
<span class="hero-badge">🍪 Transparence totale</span>
<h1>Politique de cookies</h1>
<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>
</div>
<div class="policy-card">
<div class="policy-section">
<div class="section-title">
<span class="title-icon">🍪</span>
<h2>Qu'est-ce qu'un cookie ?</h2>
</div>
<div class="policy-text">
<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>
<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>
</div>
</div>
<div class="policy-section">
<div class="section-title">
<span class="title-icon">⚙️</span>
<h2>Cookies utilisés sur {{ app_name }}</h2>
</div>
<div class="policy-text">
<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>
</div>
<table class="cookie-table">
<thead>
<tr><th>Type de cookie</th><th>Finalité</th><th>Durée de conservation</th></tr>
</thead>
<tbody>
<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>
<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>
<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>
<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>
</tbody>
</table>
<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>
</div>
<div class="policy-section">
<div class="section-title">
<span class="title-icon">🛡️</span>
<h2>Gestion et contrĂ´le de vos cookies</h2>
</div>
<div class="policy-text">
<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>
<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>
</div>
<div class="consent-actions">
<span style="font-weight:500;">✋ Modifiez vos préférences à tout moment :</span>
<div style="display: flex; gap: 12px;">
<button id="acceptCookiesBtn" class="btn-primary">Accepter tous les cookies</button>
<button id="refuseNonEssentialBtn" class="btn-outline">Refuser les cookies non essentiels</button>
</div>
</div>
<div class="policy-text" style="margin-top: 1rem;">
<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>
</div>
</div>
<div class="policy-section">
<div class="section-title">
<span class="title-icon">đź“‹</span>
<h2>Cookies tiers et partenaires</h2>
</div>
<div class="policy-text">
<p>Notre site de mise en relation peut intégrer des services tiers qui déposent leurs propres cookies :</p>
<ul style="margin-left: 1.5rem; margin-top: 0.5rem; margin-bottom: 1rem;">
<li>• <strong>Google Analytics</strong> : mesure d’audience anonymisée, nous aide à améliorer l’expérience des artisans et des particuliers.</li>
<li>• <strong>Google Maps / API cartographie</strong> : pour afficher les zones d’intervention des plombiers et électriciens.</li>
<li>• <strong>Outils de paiement sécurisé</strong> (le cas échéant) : cookies liés à la transaction.</li>
</ul>
<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>
</div>
</div>
<div class="policy-section">
<div class="section-title">
<span class="title-icon">⚖️</span>
<h2>Base légale et durée de conservation</h2>
</div>
<div class="policy-text">
<p>Le traitement des données via les cookies repose sur :</p>
<ul style="margin-left: 1.5rem; margin-bottom: 1rem;">
<li>• L’exécution du contrat (cookies essentiels à la mise en relation entre particulier et prestataire).</li>
<li>• Votre consentement pour les cookies de mesure d’audience, fonctionnels avancés et publicitaires.</li>
</ul>
<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>
</div>
</div>
<div class="policy-section">
<div class="section-title">
<span class="title-icon">đź“ž</span>
<h2>Vos droits et contact</h2>
</div>
<div class="policy-text">
<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>
<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>
</div>
</div>
<div class="last-updated container" style="padding: 1rem 2rem 1.5rem 2rem;">
📅 Dernière mise à jour : 20 mars 2026 — {{ app_name }} s'engage à mettre à jour cette politique en cas d’évolution légale ou technique.
</div>
</div>
<!-- Message de confirmation dynamique (toast-like) -->
<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>
</main>
{% endblock body %}
{% block javascripts %}
{{ parent() }}
<script>
(function() {
// Émulation de gestion de consentement – purement front à titre éducatif/démonstration interactive.
// L'implémentation réelle devrait stocker les préférences dans localStorage et/ou via un consent manager.
// Ici on simule un stockage des préférences pour l'expérience utilisateur cohérente.
const STORAGE_KEY = 'servicepro_cookie_consent';
function getConsent() {
const stored = localStorage.getItem(STORAGE_KEY);
if (stored === null) return null;
try {
return JSON.parse(stored);
} catch(e) { return null; }
}
function saveConsent(consentValue) {
// consentValue: 'all' (tout accepté) , 'necessary_only' (uniquement essentiels)
localStorage.setItem(STORAGE_KEY, JSON.stringify({ consent: consentValue, updatedAt: new Date().toISOString() }));
showToast(`🍪 Vos préférences ont été enregistrées : ${consentValue === 'all' ? 'tous les cookies acceptés' : 'seuls les cookies essentiels sont activés'}.`);
// En condition réelle, on appliquerait les tags consent ou on désactiverait les scripts tiers.
// Ici on se contente d'un feedback utilisateur.
console.log(`[Cookie consent] ${consentValue}`);
}
function showToast(message) {
const toast = document.getElementById('toastMessage');
if (!toast) return;
toast.textContent = message;
toast.style.opacity = '1';
setTimeout(() => {
toast.style.opacity = '0';
}, 3200);
}
// Boutons d'interaction
const acceptBtn = document.getElementById('acceptCookiesBtn');
const refuseBtn = document.getElementById('refuseNonEssentialBtn');
const manageFooter = document.getElementById('manageCookiesFooter');
if (acceptBtn) {
acceptBtn.addEventListener('click', () => {
saveConsent('all');
});
}
if (refuseBtn) {
refuseBtn.addEventListener('click', () => {
saveConsent('necessary_only');
});
}
if (manageFooter) {
manageFooter.addEventListener('click', (e) => {
e.preventDefault();
// Simuler un panneau de gestion rapide - on peut ouvrir une alerte ou un modal simple pour démo
const currentConsent = getConsent();
let msg = 'Gestion des cookies HelpPlace\n\n';
msg += 'Choisissez votre préférence :\n';
msg += currentConsent ? `État actuel : ${currentConsent.consent === 'all' ? 'Tous les cookies acceptés' : 'Cookies essentiels uniquement'}\n\n` : 'Aucun choix enregistré.\n\n';
const choice = confirm(msg + '✔️ OK = Accepter tous les cookies\n❌ Annuler = Refuser les cookies non essentiels');
if (choice) {
saveConsent('all');
} else if (choice === false) {
saveConsent('necessary_only');
}
});
}
// Au chargement, afficher un petit message de bienvenue si l'utilisateur n'a jamais fait de choix (optionnel)
if (!getConsent()) {
// Ne pas spammer, mais suggestion subtile via toast après 1 seconde
setTimeout(() => {
showToast('🍪 Nous respectons votre vie privée. Utilisez les boutons pour gérer vos cookies.');
}, 1000);
} else {
const consent = getConsent();
if (consent.consent === 'all') {
console.log('Cookies complets activés (simulation)');
} else {
console.log('Seuls les cookies essentiels actifs (simulation)');
}
}
// Simulation de lien retour vers l'accueil (placeholder)
const homeLink = document.querySelector('.back-home');
if (homeLink) {
homeLink.addEventListener('click', (e) => {
e.preventDefault();
showToast('🚧 Retour vers la page d’accueil (simulation) — dans un vrai site, redirection vers l’index.');
// window.location.href = '/';
});
}
// Gestion responsive et élégance: smooth scroll pour ancres internes (pas d'ancre particulière mais safe)
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const targetId = this.getAttribute('href');
if (targetId === "#" || targetId === "") return;
const targetEl = document.querySelector(targetId);
if (targetEl) {
e.preventDefault();
targetEl.scrollIntoView({ behavior: 'smooth' });
}
});
});
})();
</script>
{% endblock javascripts %}