legals.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>Mentions Légales | 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">
      
      <div class="mb-12 reveal">
        <p class="text-xs font-semibold uppercase tracking-widest text-c-indigo/60 mb-4">Informations obligatoires</p>
        <h1 class="font-display text-5xl md:text-6xl font-bold tracking-tight mb-6">Mentions <span class="italic font-light">Légales</span></h1>
      </div>

      <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. Édition du site -->
        <section>
          <h2 class="font-display text-2xl font-bold mb-4">01. Édition du site</h2>
          <p class="text-c-indigo/70 text-base leading-relaxed">
            Le présent site, accessible à l'URL <strong>www.cyrex.fr</strong> (ainsi que ses sous-domaines), est édité par :<br><br>
            <strong>Mathéo Pichot-Moïse</strong> (exerçant sous le nom commercial Cyrex Studio)<br>
            <!-- <strong>Statut juridique :</strong> XXX<br>
            <strong>Adresse :</strong> XXX<br>
            <strong>SIRET :</strong> XXX<br>
            <strong>TVA Intracommunautaire :</strong> XXX<br><br> -->
            <strong>Directeur de la publication :</strong> Mathéo Pichot-Moïse<br>
            <strong>Contact email :</strong> <a href="mailto:contact@cyrex.fr" class="text-c-indigo font-bold underline hover:text-c-indigo-light transition-colors">contact@cyrex.fr</a><br>
            <strong>Contact téléphonique :</strong> 07.69.72.43.27
          </p>
        </section>

        <!-- 02. Hébergement -->
        <section class="pt-8 border-t border-c-indigo/10">
          <h2 class="font-display text-2xl font-bold mb-4">02. Hébergement</h2>
          <p class="text-c-indigo/70 text-base leading-relaxed">
            Le site est hébergé par la société <strong>GitHub Inc.</strong><br><br>
            <strong>Adresse :</strong> 88 Colin P. Kelly Jr St, San Francisco, CA 94107, États-Unis.<br>
            <strong>Site web :</strong> <a href="https://pages.github.com" target="_blank" class="text-c-indigo font-bold underline hover:text-c-indigo-light transition-colors">pages.github.com</a>
          </p>
        </section>

        <!-- 03. Propriété Intellectuelle -->
        <section class="pt-8 border-t border-c-indigo/10">
          <h2 class="font-display text-2xl font-bold mb-4">03. Propriété Intellectuelle</h2>
          <p class="text-c-indigo/70 text-base leading-relaxed mb-4">
            L'ensemble de ce site relève de la législation française et internationale sur le droit d'auteur et la propriété intellectuelle.
            Tous les éléments graphiques, la structure, l'interface, les logos et les contenus textuels présents sur ce site sont la propriété exclusive de <strong>Mathéo Pichot-Moïse (Cyrex Studio)</strong>, sauf mention contraire.
          </p>
          <p class="text-c-indigo/70 text-base leading-relaxed">
            Le code source développé pour les projets présentés dans le portfolio reste la propriété de leurs auteurs respectifs ou de leurs commanditaires. Les liens vers des dépôts GitHub publics obéissent aux licences spécifiques indiquées dans lesdits dépôts.
            Toute reproduction, représentation, modification ou adaptation de tout ou partie des éléments du site, quel que soit le procédé utilisé, est interdite sans autorisation écrite préalable.
          </p>
        </section>

        <!-- 04. Données personnelles et Cookies -->
        <section class="pt-8 border-t border-c-indigo/10">
          <h2 class="font-display text-2xl font-bold mb-4">04. Données personnelles & Cookies</h2>
          <p class="text-c-indigo/70 text-base leading-relaxed mb-4">
            <strong>Données personnelles :</strong> Ce site vitrine ne collecte aucune donnée personnelle à l'insu de l'utilisateur.
            Les seules données recueillies sont celles que vous communiquez volontairement lors d'une prise de contact par email. Conformément au RGPD, vous disposez d'un droit d'accès, de rectification et de suppression des données vous concernant en écrivant à <a href="mailto:contact@cyrex.fr" class="text-c-indigo font-bold underline hover:text-c-indigo-light transition-colors">contact@cyrex.fr</a>.
          </p>
          <p class="text-c-indigo/70 text-base leading-relaxed">
            <strong>Cookies :</strong> Le site <strong>Cyrex Studio</strong> est conçu pour être respectueux de la vie privée. Il n'utilise aucun cookie de traçage publicitaire ou d'analyse comportementale nécessitant le recueil de votre consentement préalable.
          </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>