From eeae058233a111d00ef8c2d0865a92ecedd664cb Mon Sep 17 00:00:00 2001
From: SarTron-NorthBlue <north.blueserveur@gmail.com>
Date: Fri, 14 Nov 2025 17:33:19 +0400
Subject: [PATCH] ajout des page RGPD

---
 app/mentions-legales/page.tsx          | 155 ++++++++++++++
 app/politique-confidentialite/page.tsx | 192 +++++++++++++++++
 app/rgpd/page.tsx                      | 278 +++++++++++++++++++++++++
 components/Footer.tsx                  |  48 +++--
 components/Header.tsx                  |  18 +-
 5 files changed, 675 insertions(+), 16 deletions(-)
 create mode 100644 app/mentions-legales/page.tsx
 create mode 100644 app/politique-confidentialite/page.tsx
 create mode 100644 app/rgpd/page.tsx

diff --git a/app/mentions-legales/page.tsx b/app/mentions-legales/page.tsx
new file mode 100644
index 0000000..a36a5ea
--- /dev/null
+++ b/app/mentions-legales/page.tsx
@@ -0,0 +1,155 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Shield, FileText } from 'lucide-react'
+import BackgroundAnimations from '@/components/BackgroundAnimations'
+
+export default function MentionsLegales() {
+  return (
+    <section className="section-padding bg-security-dark relative overflow-hidden min-h-screen pt-32">
+      <BackgroundAnimations variant="default" />
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="max-w-4xl mx-auto"
+        >
+          {/* Header */}
+          <div className="text-center mb-12">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ delay: 0.2 }}
+              className="inline-flex items-center justify-center w-20 h-20 bg-security-accent/10 border border-security-accent/30 rounded-2xl mb-6"
+            >
+              <FileText className="w-10 h-10 text-security-accent" />
+            </motion.div>
+            <h1 className="text-5xl md:text-6xl font-black mb-6 text-white">
+              Mentions <span className="gradient-text">Légales</span>
+            </h1>
+            <p className="text-xl text-gray-400">
+              Informations légales concernant le site runlock.re
+            </p>
+          </div>
+
+          {/* Content */}
+          <div className="card-dark p-8 md:p-10 rounded-3xl space-y-8">
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <Shield className="w-6 h-6 text-security-accent" />
+                <span>1. Éditeur du site</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed space-y-2">
+                <p><strong className="text-white">Raison sociale :</strong> NorthBlue</p>
+                <p><strong className="text-white">Site web :</strong> runlock.re</p>
+                <p><strong className="text-white">Email :</strong> contact@runlock.re</p>
+                <p><strong className="text-white">Téléphone :</strong> 0693 51 15 58</p>
+                <p><strong className="text-white">Localisation :</strong> La Réunion (974)</p>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <Shield className="w-6 h-6 text-security-accent" />
+                <span>2. Directeur de la publication</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed">
+                <p>Le directeur de la publication est le représentant légal de NorthBlue.</p>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <Shield className="w-6 h-6 text-security-accent" />
+                <span>3. Hébergement</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed">
+                <p>Le site runlock.re est hébergé par :</p>
+                <ul className="list-disc list-inside mt-2 space-y-1 ml-4">
+                  <li>OVH</li>
+                  <li>2 rue Kellermann - 59100 Roubaix - France</li>
+                  <li>Site web : <a href="https://www.ovh.com" target="_blank" rel="noopener noreferrer" className="text-security-accent hover:underline">www.ovh.com</a></li>
+                </ul>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <Shield className="w-6 h-6 text-security-accent" />
+                <span>4. Propriété intellectuelle</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed space-y-2">
+                <p>
+                  L'ensemble des contenus présents sur le site runlock.re (textes, images, logos, graphismes, icônes, etc.) 
+                  est la propriété exclusive de NorthBlue ou de ses partenaires, sauf mention contraire.
+                </p>
+                <p>
+                  Toute reproduction, représentation, modification, publication, adaptation de tout ou partie des éléments du site, 
+                  quel que soit le moyen ou le procédé utilisé, est interdite sans autorisation écrite préalable de NorthBlue.
+                </p>
+                <p>
+                  Toute exploitation non autorisée du site ou de son contenu engage la responsabilité civile et/ou pénale 
+                  de l'utilisateur et peut entraîner des poursuites judiciaires.
+                </p>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <Shield className="w-6 h-6 text-security-accent" />
+                <span>5. Limitations de responsabilité</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed space-y-2">
+                <p>
+                  NorthBlue s'efforce de fournir des informations aussi précises que possible sur le site runlock.re. 
+                  Toutefois, elle ne pourra être tenue responsable des omissions, des inexactitudes et des carences 
+                  dans la mise à jour, qu'elles soient de son fait ou du fait des tiers partenaires qui lui fournissent ces informations.
+                </p>
+                <p>
+                  Toutes les informations indiquées sur le site runlock.re sont données à titre indicatif et sont susceptibles d'évoluer. 
+                  Par ailleurs, les renseignements figurant sur le site runlock.re ne sont pas exhaustifs.
+                </p>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <Shield className="w-6 h-6 text-security-accent" />
+                <span>6. Droit applicable</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed">
+                <p>
+                  Les présentes mentions légales sont régies par le droit français. 
+                  En cas de litige et à défaut d'accord amiable, le litige sera porté devant les tribunaux français 
+                  conformément aux règles de compétence en vigueur.
+                </p>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <Shield className="w-6 h-6 text-security-accent" />
+                <span>7. Contact</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed">
+                <p>
+                  Pour toute question concernant les présentes mentions légales, vous pouvez nous contacter :
+                </p>
+                <ul className="list-disc list-inside mt-2 space-y-1 ml-4">
+                  <li>Par email : <a href="mailto:contact@runlock.re" className="text-security-accent hover:underline">contact@runlock.re</a></li>
+                  <li>Par téléphone : <a href="tel:0693511558" className="text-security-accent hover:underline">0693 51 15 58</a></li>
+                </ul>
+              </div>
+            </section>
+
+            <div className="pt-6 border-t border-security-border text-sm text-gray-400">
+              <p>Dernière mise à jour : {new Date().toLocaleDateString('fr-FR', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  )
+}
+
diff --git a/app/politique-confidentialite/page.tsx b/app/politique-confidentialite/page.tsx
new file mode 100644
index 0000000..a89cc00
--- /dev/null
+++ b/app/politique-confidentialite/page.tsx
@@ -0,0 +1,192 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Shield, Lock, Eye, Database } from 'lucide-react'
+import BackgroundAnimations from '@/components/BackgroundAnimations'
+
+export default function PolitiqueConfidentialite() {
+  return (
+    <section className="section-padding bg-security-dark relative overflow-hidden min-h-screen pt-32">
+      <BackgroundAnimations variant="particles" />
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="max-w-4xl mx-auto"
+        >
+          {/* Header */}
+          <div className="text-center mb-12">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ delay: 0.2 }}
+              className="inline-flex items-center justify-center w-20 h-20 bg-security-accent/10 border border-security-accent/30 rounded-2xl mb-6"
+            >
+              <Lock className="w-10 h-10 text-security-accent" />
+            </motion.div>
+            <h1 className="text-5xl md:text-6xl font-black mb-6 text-white">
+              Politique de <span className="gradient-text">Confidentialité</span>
+            </h1>
+            <p className="text-xl text-gray-400">
+              Protection et utilisation de vos données personnelles
+            </p>
+          </div>
+
+          {/* Content */}
+          <div className="card-dark p-8 md:p-10 rounded-3xl space-y-8">
+            <section>
+              <p className="text-gray-300 leading-relaxed mb-6">
+                La présente politique de confidentialité décrit la manière dont NorthBlue, exploitant le site runlock.re, 
+                collecte, utilise et protège les informations personnelles que vous nous fournissez lors de l'utilisation de notre site web.
+              </p>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <Eye className="w-6 h-6 text-security-accent" />
+                <span>1. Collecte des données personnelles</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed space-y-2">
+                <p>
+                  Nous collectons les informations suivantes lorsque vous utilisez notre formulaire de contact :
+                </p>
+                <ul className="list-disc list-inside ml-4 space-y-1">
+                  <li>Nom et prénom</li>
+                  <li>Adresse email</li>
+                  <li>Nom de l'entreprise (optionnel)</li>
+                  <li>Service souhaité</li>
+                  <li>Message</li>
+                  <li>Numéro de téléphone (si fourni)</li>
+                </ul>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <Database className="w-6 h-6 text-security-accent" />
+                <span>2. Utilisation des données</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed space-y-2">
+                <p>Les données collectées sont utilisées pour :</p>
+                <ul className="list-disc list-inside ml-4 space-y-1">
+                  <li>Répondre à vos demandes et questions</li>
+                  <li>Vous contacter concernant nos services</li>
+                  <li>Améliorer nos services et votre expérience utilisateur</li>
+                  <li>Respecter nos obligations légales et réglementaires</li>
+                </ul>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <Shield className="w-6 h-6 text-security-accent" />
+                <span>3. Protection des données</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed space-y-2">
+                <p>
+                  NorthBlue s'engage à protéger vos données personnelles. Nous mettons en œuvre des mesures techniques 
+                  et organisationnelles appropriées pour garantir la sécurité de vos informations.
+                </p>
+                <p>
+                  Vos données sont stockées de manière sécurisée et ne sont accessibles qu'aux personnes autorisées 
+                  ayant besoin d'y accéder pour répondre à vos demandes.
+                </p>
+                <p>
+                  Nous ne vendons, ne louons ni ne partageons vos données personnelles avec des tiers à des fins commerciales.
+                </p>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <Lock className="w-6 h-6 text-security-accent" />
+                <span>4. Conservation des données</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed">
+                <p>
+                  Vos données personnelles sont conservées pendant la durée nécessaire aux finalités pour lesquelles 
+                  elles ont été collectées, conformément à la réglementation en vigueur.
+                </p>
+                <p className="mt-2">
+                  Vous pouvez à tout moment demander la suppression de vos données en nous contactant à l'adresse 
+                  <a href="mailto:contact@runlock.re" className="text-security-accent hover:underline ml-1">contact@runlock.re</a>.
+                </p>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <Shield className="w-6 h-6 text-security-accent" />
+                <span>5. Vos droits</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed space-y-2">
+                <p>Conformément au Règlement Général sur la Protection des Données (RGPD), vous disposez des droits suivants :</p>
+                <ul className="list-disc list-inside ml-4 space-y-1">
+                  <li><strong className="text-white">Droit d'accès :</strong> Vous pouvez demander l'accès à vos données personnelles</li>
+                  <li><strong className="text-white">Droit de rectification :</strong> Vous pouvez demander la correction de vos données</li>
+                  <li><strong className="text-white">Droit à l'effacement :</strong> Vous pouvez demander la suppression de vos données</li>
+                  <li><strong className="text-white">Droit d'opposition :</strong> Vous pouvez vous opposer au traitement de vos données</li>
+                  <li><strong className="text-white">Droit à la portabilité :</strong> Vous pouvez demander la récupération de vos données</li>
+                  <li><strong className="text-white">Droit de limitation :</strong> Vous pouvez demander la limitation du traitement</li>
+                </ul>
+                <p className="mt-2">
+                  Pour exercer ces droits, contactez-nous à : 
+                  <a href="mailto:contact@runlock.re" className="text-security-accent hover:underline ml-1">contact@runlock.re</a>
+                </p>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <Lock className="w-6 h-6 text-security-accent" />
+                <span>6. Cookies</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed">
+                <p>
+                  Le site runlock.re utilise des cookies techniques nécessaires au bon fonctionnement du site. 
+                  Ces cookies ne nécessitent pas de consentement préalable.
+                </p>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <Shield className="w-6 h-6 text-security-accent" />
+                <span>7. Modifications</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed">
+                <p>
+                  NorthBlue se réserve le droit de modifier la présente politique de confidentialité à tout moment. 
+                  Les modifications entrent en vigueur dès leur publication sur le site.
+                </p>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <Shield className="w-6 h-6 text-security-accent" />
+                <span>8. Contact</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed">
+                <p>
+                  Pour toute question concernant cette politique de confidentialité ou pour exercer vos droits, 
+                  vous pouvez nous contacter :
+                </p>
+                <ul className="list-disc list-inside mt-2 space-y-1 ml-4">
+                  <li>Par email : <a href="mailto:contact@runlock.re" className="text-security-accent hover:underline">contact@runlock.re</a></li>
+                  <li>Par téléphone : <a href="tel:0693511558" className="text-security-accent hover:underline">0693 51 15 58</a></li>
+                </ul>
+              </div>
+            </section>
+
+            <div className="pt-6 border-t border-security-border text-sm text-gray-400">
+              <p>Dernière mise à jour : {new Date().toLocaleDateString('fr-FR', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  )
+}
+
diff --git a/app/rgpd/page.tsx b/app/rgpd/page.tsx
new file mode 100644
index 0000000..d6c118b
--- /dev/null
+++ b/app/rgpd/page.tsx
@@ -0,0 +1,278 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Shield, CheckCircle, FileCheck, AlertCircle } from 'lucide-react'
+import BackgroundAnimations from '@/components/BackgroundAnimations'
+
+export default function RGPD() {
+  return (
+    <section className="section-padding bg-security-dark relative overflow-hidden min-h-screen pt-32">
+      <BackgroundAnimations variant="gradient" />
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="max-w-4xl mx-auto"
+        >
+          {/* Header */}
+          <div className="text-center mb-12">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ delay: 0.2 }}
+              className="inline-flex items-center justify-center w-20 h-20 bg-security-accent/10 border border-security-accent/30 rounded-2xl mb-6"
+            >
+              <FileCheck className="w-10 h-10 text-security-accent" />
+            </motion.div>
+            <h1 className="text-5xl md:text-6xl font-black mb-6 text-white">
+              Conformité <span className="gradient-text">RGPD</span>
+            </h1>
+            <p className="text-xl text-gray-400">
+              Notre engagement en matière de protection des données personnelles
+            </p>
+          </div>
+
+          {/* Content */}
+          <div className="card-dark p-8 md:p-10 rounded-3xl space-y-8">
+            <section>
+              <p className="text-gray-300 leading-relaxed mb-6">
+                NorthBlue, exploitant le site runlock.re, s'engage à respecter le Règlement Général sur la Protection des Données (RGPD) 
+                entré en vigueur le 25 mai 2018. Cette page détaille nos pratiques et notre conformité à cette réglementation.
+              </p>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <CheckCircle className="w-6 h-6 text-security-accent" />
+                <span>1. Responsable du traitement</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed space-y-2">
+                <p><strong className="text-white">Responsable :</strong> NorthBlue</p>
+                <p><strong className="text-white">Email :</strong> <a href="mailto:contact@runlock.re" className="text-security-accent hover:underline">contact@runlock.re</a></p>
+                <p><strong className="text-white">Téléphone :</strong> <a href="tel:0693511558" className="text-security-accent hover:underline">0693 51 15 58</a></p>
+                <p><strong className="text-white">Localisation :</strong> La Réunion (974)</p>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <Shield className="w-6 h-6 text-security-accent" />
+                <span>2. Données collectées et finalités</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed space-y-3">
+                <p>Nous collectons et traitons les données suivantes :</p>
+                
+                <div className="bg-security-card p-4 rounded-xl border border-security-border">
+                  <h3 className="text-white font-semibold mb-2">Données de contact</h3>
+                  <ul className="list-disc list-inside ml-4 space-y-1 text-sm">
+                    <li>Nom et prénom</li>
+                    <li>Adresse email</li>
+                    <li>Numéro de téléphone (optionnel)</li>
+                    <li>Nom de l'entreprise (optionnel)</li>
+                  </ul>
+                  <p className="text-sm mt-2 text-gray-400">
+                    <strong>Finalité :</strong> Répondre à vos demandes et vous contacter concernant nos services
+                  </p>
+                  <p className="text-sm text-gray-400">
+                    <strong>Base légale :</strong> Consentement et intérêt légitime
+                  </p>
+                </div>
+
+                <div className="bg-security-card p-4 rounded-xl border border-security-border">
+                  <h3 className="text-white font-semibold mb-2">Données de navigation</h3>
+                  <ul className="list-disc list-inside ml-4 space-y-1 text-sm">
+                    <li>Adresse IP (anonymisée)</li>
+                    <li>Cookies techniques</li>
+                    <li>Données de connexion</li>
+                  </ul>
+                  <p className="text-sm mt-2 text-gray-400">
+                    <strong>Finalité :</strong> Assurer le bon fonctionnement du site et améliorer l'expérience utilisateur
+                  </p>
+                  <p className="text-sm text-gray-400">
+                    <strong>Base légale :</strong> Intérêt légitime
+                  </p>
+                </div>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <Shield className="w-6 h-6 text-security-accent" />
+                <span>3. Durée de conservation</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed space-y-2">
+                <p>Les données personnelles sont conservées pour les durées suivantes :</p>
+                <ul className="list-disc list-inside ml-4 space-y-1">
+                  <li><strong className="text-white">Données de contact :</strong> 3 ans à compter du dernier contact</li>
+                  <li><strong className="text-white">Données de navigation :</strong> 13 mois maximum</li>
+                  <li><strong className="text-white">Données liées aux cookies :</strong> 13 mois maximum</li>
+                </ul>
+                <p className="mt-2">
+                  Au-delà de ces durées, les données sont supprimées ou anonymisées.
+                </p>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <CheckCircle className="w-6 h-6 text-security-accent" />
+                <span>4. Vos droits RGPD</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed space-y-3">
+                <p>Conformément au RGPD, vous disposez des droits suivants :</p>
+                
+                <div className="grid md:grid-cols-2 gap-4">
+                  <div className="bg-security-card p-4 rounded-xl border border-security-border">
+                    <h3 className="text-white font-semibold mb-2 flex items-center space-x-2">
+                      <CheckCircle className="w-5 h-5 text-security-accent" />
+                      <span>Droit d'accès</span>
+                    </h3>
+                    <p className="text-sm text-gray-400">
+                      Vous pouvez obtenir une copie de vos données personnelles que nous détenons.
+                    </p>
+                  </div>
+
+                  <div className="bg-security-card p-4 rounded-xl border border-security-border">
+                    <h3 className="text-white font-semibold mb-2 flex items-center space-x-2">
+                      <CheckCircle className="w-5 h-5 text-security-accent" />
+                      <span>Droit de rectification</span>
+                    </h3>
+                    <p className="text-sm text-gray-400">
+                      Vous pouvez corriger vos données inexactes ou incomplètes.
+                    </p>
+                  </div>
+
+                  <div className="bg-security-card p-4 rounded-xl border border-security-border">
+                    <h3 className="text-white font-semibold mb-2 flex items-center space-x-2">
+                      <CheckCircle className="w-5 h-5 text-security-accent" />
+                      <span>Droit à l'effacement</span>
+                    </h3>
+                    <p className="text-sm text-gray-400">
+                      Vous pouvez demander la suppression de vos données personnelles.
+                    </p>
+                  </div>
+
+                  <div className="bg-security-card p-4 rounded-xl border border-security-border">
+                    <h3 className="text-white font-semibold mb-2 flex items-center space-x-2">
+                      <CheckCircle className="w-5 h-5 text-security-accent" />
+                      <span>Droit d'opposition</span>
+                    </h3>
+                    <p className="text-sm text-gray-400">
+                      Vous pouvez vous opposer au traitement de vos données.
+                    </p>
+                  </div>
+
+                  <div className="bg-security-card p-4 rounded-xl border border-security-border">
+                    <h3 className="text-white font-semibold mb-2 flex items-center space-x-2">
+                      <CheckCircle className="w-5 h-5 text-security-accent" />
+                      <span>Droit à la portabilité</span>
+                    </h3>
+                    <p className="text-sm text-gray-400">
+                      Vous pouvez récupérer vos données dans un format structuré.
+                    </p>
+                  </div>
+
+                  <div className="bg-security-card p-4 rounded-xl border border-security-border">
+                    <h3 className="text-white font-semibold mb-2 flex items-center space-x-2">
+                      <CheckCircle className="w-5 h-5 text-security-accent" />
+                      <span>Droit de limitation</span>
+                    </h3>
+                    <p className="text-sm text-gray-400">
+                      Vous pouvez demander la limitation du traitement de vos données.
+                    </p>
+                  </div>
+                </div>
+
+                <div className="bg-security-accent/10 border border-security-accent/30 p-4 rounded-xl mt-4">
+                  <p className="text-sm text-gray-300">
+                    <strong className="text-white">Pour exercer vos droits :</strong> Envoyez une demande à 
+                    <a href="mailto:contact@runlock.re" className="text-security-accent hover:underline ml-1">contact@runlock.re</a>. 
+                    Nous vous répondrons dans un délai d'un mois maximum.
+                  </p>
+                </div>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <Shield className="w-6 h-6 text-security-accent" />
+                <span>5. Transfert de données</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed">
+                <p>
+                  Vos données personnelles sont stockées et traitées au sein de l'Union Européenne. 
+                  Nous ne transférons pas vos données vers des pays tiers en dehors de l'UE sans garanties appropriées.
+                </p>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <AlertCircle className="w-6 h-6 text-security-accent" />
+                <span>6. Réclamation</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed">
+                <p>
+                  Si vous estimez que le traitement de vos données personnelles constitue une violation du RGPD, 
+                  vous avez le droit d'introduire une réclamation auprès de la Commission Nationale de l'Informatique 
+                  et des Libertés (CNIL) :
+                </p>
+                <ul className="list-disc list-inside mt-2 space-y-1 ml-4">
+                  <li>CNIL - 3 Place de Fontenoy - TSA 80715 - 75334 Paris Cedex 07</li>
+                  <li>Téléphone : 01 53 73 22 22</li>
+                  <li>Site web : <a href="https://www.cnil.fr" target="_blank" rel="noopener noreferrer" className="text-security-accent hover:underline">www.cnil.fr</a></li>
+                </ul>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <Shield className="w-6 h-6 text-security-accent" />
+                <span>7. Sécurité des données</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed space-y-2">
+                <p>
+                  NorthBlue met en œuvre des mesures techniques et organisationnelles appropriées pour protéger 
+                  vos données personnelles contre la perte, l'utilisation abusive, l'accès non autorisé, 
+                  la divulgation, l'altération ou la destruction.
+                </p>
+                <p>
+                  Ces mesures incluent notamment :
+                </p>
+                <ul className="list-disc list-inside ml-4 space-y-1">
+                  <li>Chiffrement des données sensibles</li>
+                  <li>Accès restreint aux données personnelles</li>
+                  <li>Sauvegardes régulières</li>
+                  <li>Formation du personnel aux bonnes pratiques de sécurité</li>
+                </ul>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
+                <Shield className="w-6 h-6 text-security-accent" />
+                <span>8. Contact</span>
+              </h2>
+              <div className="text-gray-300 leading-relaxed">
+                <p>
+                  Pour toute question concernant le traitement de vos données personnelles ou pour exercer vos droits RGPD, 
+                  contactez-nous :
+                </p>
+                <ul className="list-disc list-inside mt-2 space-y-1 ml-4">
+                  <li>Par email : <a href="mailto:contact@runlock.re" className="text-security-accent hover:underline">contact@runlock.re</a></li>
+                  <li>Par téléphone : <a href="tel:0693511558" className="text-security-accent hover:underline">0693 51 15 58</a></li>
+                </ul>
+              </div>
+            </section>
+
+            <div className="pt-6 border-t border-security-border text-sm text-gray-400">
+              <p>Dernière mise à jour : {new Date().toLocaleDateString('fr-FR', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  )
+}
+
diff --git a/components/Footer.tsx b/components/Footer.tsx
index a19aeaf..ed706fd 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -3,9 +3,19 @@
 import { motion } from 'framer-motion'
 import { Shield, Mail, Phone, MapPin } from 'lucide-react'
 import Link from 'next/link'
+import { usePathname } from 'next/navigation'
 
 export default function Footer() {
   const currentYear = new Date().getFullYear()
+  const pathname = usePathname()
+  const isHomePage = pathname === '/'
+
+  const getNavHref = (href: string) => {
+    if (isHomePage) {
+      return href
+    }
+    return `/${href}`
+  }
 
   return (
     <footer className="bg-security-dark border-t border-security-border">
@@ -39,13 +49,19 @@ export default function Footer() {
           >
             <h3 className="text-white font-semibold mb-4">Navigation</h3>
             <ul className="space-y-2">
-              {['Accueil', 'Services', 'Tarifs', 'FAQ', 'Contact'].map((item) => (
-                <li key={item}>
+              {[
+                { label: 'Accueil', href: '#accueil' },
+                { label: 'Services', href: '#services' },
+                { label: 'Tarifs', href: '#tarifs' },
+                { label: 'FAQ', href: '#faq' },
+                { label: 'Contact', href: '#contact' },
+              ].map((item) => (
+                <li key={item.href}>
                   <a
-                    href={`#${item.toLowerCase()}`}
+                    href={getNavHref(item.href)}
                     className="text-gray-400 hover:text-security-accent transition-colors text-sm"
                   >
-                    {item}
+                    {item.label}
                   </a>
                 </li>
               ))}
@@ -64,7 +80,7 @@ export default function Footer() {
               {['Hébergement Cloud', 'Installation NAS', 'Installation Mini PC', 'Support technique'].map((service) => (
                 <li key={service}>
                   <a
-                    href="#services"
+                    href={getNavHref('#services')}
                     className="text-gray-400 hover:text-security-accent transition-colors text-sm"
                   >
                     {service}
@@ -109,19 +125,27 @@ export default function Footer() {
               © {currentYear} Runlock.re - Tous droits réservés
             </p>
             <div className="flex items-center space-x-6 text-sm">
-              <a href="#" className="text-gray-400 hover:text-security-accent transition-colors">
+              <Link href="/mentions-legales" className="text-gray-400 hover:text-security-accent transition-colors">
                 Mentions légales
-              </a>
-              <a href="#" className="text-gray-400 hover:text-security-accent transition-colors">
+              </Link>
+              <Link href="/politique-confidentialite" className="text-gray-400 hover:text-security-accent transition-colors">
                 Politique de confidentialité
-              </a>
-              <a href="#" className="text-gray-400 hover:text-security-accent transition-colors">
+              </Link>
+              <Link href="/rgpd" className="text-gray-400 hover:text-security-accent transition-colors">
                 RGPD
-              </a>
+              </Link>
             </div>
           </div>
           <p className="text-gray-500 text-xs mt-4 text-center">
-            Service édité par: httpdesign.fr
+            Réalisé par{' '}
+            <a 
+              href="https://httpdesign.fr" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="text-security-accent hover:underline transition-colors"
+            >
+              Httpdesign.fr
+            </a>
           </p>
         </div>
       </div>
diff --git a/components/Header.tsx b/components/Header.tsx
index c0078fe..23cae54 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -4,10 +4,13 @@ import { useState, useEffect } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { Menu, X, Lock, Shield } from 'lucide-react'
 import Link from 'next/link'
+import { usePathname } from 'next/navigation'
 
 export default function Header() {
   const [isScrolled, setIsScrolled] = useState(false)
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const pathname = usePathname()
+  const isHomePage = pathname === '/'
 
   useEffect(() => {
     const handleScroll = () => {
@@ -25,6 +28,13 @@ export default function Header() {
     { href: '#contact', label: 'Contact' },
   ]
 
+  const getNavHref = (href: string) => {
+    if (isHomePage) {
+      return href
+    }
+    return `/${href}`
+  }
+
   return (
     <motion.header
       initial={{ y: -100 }}
@@ -54,7 +64,7 @@ export default function Header() {
             {navItems.map((item, index) => (
               <motion.a
                 key={item.href}
-                href={item.href}
+                href={getNavHref(item.href)}
                 initial={{ opacity: 0, y: -20 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: index * 0.1 }}
@@ -65,7 +75,7 @@ export default function Header() {
               </motion.a>
             ))}
             <motion.a
-              href="#contact"
+              href={getNavHref('#contact')}
               initial={{ opacity: 0, scale: 0.8 }}
               animate={{ opacity: 1, scale: 1 }}
               transition={{ delay: 0.5 }}
@@ -100,7 +110,7 @@ export default function Header() {
               {navItems.map((item) => (
                 <a
                   key={item.href}
-                  href={item.href}
+                  href={getNavHref(item.href)}
                   onClick={() => setIsMobileMenuOpen(false)}
                   className="block text-gray-300 hover:text-security-accent font-medium transition-colors py-2"
                 >
@@ -108,7 +118,7 @@ export default function Header() {
                 </a>
               ))}
               <a
-                href="#contact"
+                href={getNavHref('#contact')}
                 onClick={() => setIsMobileMenuOpen(false)}
                 className="block w-full text-center px-6 py-3 bg-gradient-to-r from-security-accent to-green-500 text-black rounded-xl font-semibold mt-4"
               >