confidentialite.html

<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Politique de Confidentialité | Cyrex</title>
  <link href="cyrex.png" rel="icon" />

  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            'c-cream': '#EEEBDA',
            'c-indigo': '#282B4A',
            'c-indigo-light': '#383b63',
          },
          fontFamily: {
            sans: ['Inter', 'sans-serif'],
            display: ['Plus Jakarta Sans', 'sans-serif'],
          }
        }
      }
    }
  </script>

  <style>
    /* Reset & Base */
    :root {
      --cream: #EEEBDA;
      --indigo: #282B4A;
    }
    
    body {
      background-color: var(--cream);
      color: var(--indigo);
      overflow-x: hidden;
    }

    ::selection {
      background-color: var(--indigo);
      color: var(--cream);
    }

    /* Scrollbar minimaliste */
    ::-webkit-scrollbar {
      width: 10px;
    }
    ::-webkit-scrollbar-track {
      background: var(--cream);
    }
    ::-webkit-scrollbar-thumb {
      background: #d6d3d1;
      border-radius: 5px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: var(--indigo);
    }

    /* Animations d'apparition */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal.active {
      opacity: 1;
      transform: translateY(0);
    }

    /* Navbar blur effect */
    .navbar-scrolled {
      background: rgba(238, 235, 218, 0.85);
      backdrop-filter: blur(16px);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
      padding-top: 1rem;
      padding-bottom: 1rem;
    }
  </style>
</head>

<body class="antialiased">

  <header id="header" class="fixed top-0 w-full z-50 py-6 transition-all duration-300">
    <div class="container mx-auto px-6 md:px-12 flex justify-between items-center">
      <!-- Logo -->
      <a href="/" class="flex items-center space-x-3 group">
        <div class="w-10 h-10 rounded-xl flex items-center justify-center text-c-cream group-hover:rotate-12 transition-transform duration-300">
          <img src="cyrex.png" alt="Logo Cyrex" class="">
        </div>
        <span class="font-display text-2xl font-bold tracking-tight">CYREX</span>
      </a>

      <!-- Lien Retour -->
      <a href="/" class="font-medium text-sm text-c-indigo hover:text-c-indigo/60 transition-colors flex items-center gap-2">
        <i class="fa-solid fa-arrow-left"></i> Retour au site
      </a>
    </div>
  </header>

  <main class="pt-32 pb-24 min-h-screen">
    <div class="container mx-auto px-6 md:px-12 max-w-4xl">
      
      <!-- En-tête de la page -->
      <div class="mb-12 reveal">
        <p class="text-xs font-semibold uppercase tracking-widest text-c-indigo/60 mb-4">Protection des données</p>
        <h1 class="font-display text-5xl md:text-6xl font-bold tracking-tight mb-4">Politique de <span class="italic font-light">Confidentialité</span></h1>
        <p class="text-sm font-medium text-c-indigo/50">Dernière mise à jour : 22 Septembre 2026</p>
      </div>

      <!-- Carte de contenu -->
      <div class="bg-c-indigo/5 border border-c-indigo/10 rounded-[3rem] p-8 md:p-16 space-y-12 reveal" style="transition-delay: 0.1s;">

        <!-- 01. Collecte des informations -->
        <section>
          <h2 class="font-display text-2xl font-bold mb-4">01. Collecte des informations</h2>
          <p class="text-c-indigo/70 text-base leading-relaxed">
            Chez <strong>Cyrex Studio</strong>, nous privilégions la sobriété numérique. Nous ne collectons que les informations que vous nous transmettez explicitement via l'envoi d'emails à <a href="mailto:contact@cyrex.fr" class="text-c-indigo font-bold underline hover:text-c-indigo-light transition-colors">contact@cyrex.fr</a> (votre nom, votre adresse email et le contenu de votre message).
            Ces données sont utilisées uniquement dans le but de répondre à vos demandes de devis, de contact ou d'accompagnement sur vos projets.
          </p>
        </section>

        <!-- 02. Utilisation des cookies -->
        <section class="pt-8 border-t border-c-indigo/10">
          <h2 class="font-display text-2xl font-bold mb-4">02. Utilisation des cookies</h2>
          <p class="text-c-indigo/70 text-base leading-relaxed">
            Notre site vitrine est conçu pour être le plus léger et respectueux possible. Nous n'utilisons <strong>aucun cookie de traçage publicitaire ou d'analyse comportementale</strong> nécessitant votre consentement. 
            Seuls des cookies purement techniques liés à l'infrastructure d'hébergement (GitHub Pages) peuvent être générés temporairement pour assurer la sécurité et la stabilité du service.
          </p>
        </section>

        <!-- 03. Vos droits (RGPD) -->
        <section class="pt-8 border-t border-c-indigo/10">
          <h2 class="font-display text-2xl font-bold mb-4">03. Vos droits (RGPD)</h2>
          <p class="text-c-indigo/70 text-base leading-relaxed">
            Conformément à la réglementation européenne (RGPD) et à la loi Informatique et Libertés, vous disposez d'un droit d'accès, de rectification, de portabilité et de suppression de vos données personnelles. 
            Pour toute demande d'exercice de ces droits, il vous suffit de nous contacter par email à <a href="mailto:contact@cyrex.fr" class="text-c-indigo font-bold underline hover:text-c-indigo-light transition-colors">contact@cyrex.fr</a>. Nous nous engageons à traiter ces demandes dans un délai maximum de 48 heures.
          </p>
        </section>

        <!-- 04. Sécurité du réseau -->
        <section class="pt-8 border-t border-c-indigo/10">
          <h2 class="font-display text-2xl font-bold mb-4">04. Sécurité du réseau</h2>
          <p class="text-c-indigo/70 text-base leading-relaxed">
            Bien que ce site soit statique et ne possède pas de base de données liée à des comptes utilisateurs, nous appliquons des protocoles de sécurité rigoureux pour garantir l'intégrité de votre navigation. 
            L'ensemble de la connexion au site www.cyrex.fr est sécurisée et chiffrée via le protocole SSL/TLS (HTTPS).
          </p>
        </section>

      </div>
    </div>
  </main>

  <footer class="bg-c-cream pt-10 pb-8 border-t border-c-indigo/10">
    <div class="container mx-auto px-6 md:px-12">
      <div class="flex flex-col md:flex-row justify-between items-center md:items-start gap-8 mb-12">
        <div class="text-center md:text-left">
          <div class="flex items-center justify-center md:justify-start space-x-2 mb-4">
            <div class="w-8 h-8 rounded-lg flex items-center justify-center text-c-cream">
              <img src="cyrex.png" alt="Logo Cyrex" class="w-5 h-5">
            </div>
            <span class="font-display text-xl font-black tracking-tight">CYREX</span>
          </div>
          <p class="text-sm text-c-indigo/60 max-w-xs">
            Studio de développement fullstack spécialisé dans la conception d'outils numériques performants et sur-mesure.
          </p>
        </div>

        <div class="flex gap-16">
          <div class="text-center md:text-left">
            <h4 class="font-bold text-xs uppercase tracking-widest text-c-indigo mb-4">Navigation</h4>
            <ul class="space-y-2 text-sm text-c-indigo/70">
              <li><a href="/" class="hover:text-c-indigo transition-colors">Accueil</a></li>
              <li><a href="/#expertise" class="hover:text-c-indigo transition-colors">Expertise</a></li>
              <li><a href="/#portfolio" class="hover:text-c-indigo transition-colors">Projets</a></li>
            </ul>
          </div>
          <div class="text-center md:text-left">
            <h4 class="font-bold text-xs uppercase tracking-widest text-c-indigo mb-4">Réseaux</h4>
            <ul class="space-y-2 text-sm text-c-indigo/70">
              <li><a href="https://github.com/CyrexStudio/" target="_blank" class="hover:text-c-indigo transition-colors">GitHub</a></li>
              <li><a href="https://www.linkedin.com/in/math%C3%A9o-pichot-mo%C3%AFse-b538222a0/" target="_blank" class="hover:text-c-indigo transition-colors">LinkedIn</a></li>
              <li><a href="https://www.instagram.com/matheo_.pm/" target="_blank" class="hover:text-c-indigo transition-colors">Instagram</a></li>
            </ul>
          </div>
        </div>
      </div>

      <div class="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-c-indigo/10 text-xs font-semibold text-c-indigo/50">
        <p>© 2026 Cyrex Studio. Tous droits réservés.</p>
        <div class="flex gap-6 mt-4 md:mt-0">
          <a href="/legals" class="hover:text-c-indigo transition-colors">Mentions légales</a>
          <a href="/confidentialite" class="hover:text-c-indigo transition-colors">Confidentialité</a>
        </div>
      </div>
    </div>
  </footer>

  <script>
    // Logique d'animation au Scroll (Reveal)
    function reveal() {
      const reveals = document.querySelectorAll(".reveal");
      reveals.forEach(el => {
        const windowHeight = window.innerHeight;
        const elementTop = el.getBoundingClientRect().top;
        const elementVisible = 50;
        
        if (elementTop < windowHeight - elementVisible) {
          el.classList.add("active");
        }
      });
    }

    // Gestion du Header (Blur on scroll)
    window.addEventListener("scroll", () => {
      const header = document.getElementById("header");
      if (window.scrollY > 20) {
        header.classList.add("navbar-scrolled");
      } else {
        header.classList.remove("navbar-scrolled");
      }
      reveal();
    });

    // Lancer au chargement initial
    window.onload = reveal;
  </script>
</body>
</html>