CyrexStudio.github.io/confidentialite.html at main · CyrexStudio/CyrexStudio.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Politique de Confidentialité | Cyrex</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

        :root {
            --bg-page: #f2f2f0;
            --bg-card: #fcfcfb;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --stone-300: #d6d3d1;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-page);
            color: var(--text-main);
            line-height: 1.7;
        }

        .content-card {
            background-color: var(--bg-card);
            border: 1px solid var(--stone-300);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }

        .section-number {
            font-family: monospace;
            color: #94a3b8;
        }

        .back-link:hover i {
            transform: translateX(-4px);
        }

        ::selection {
            background: #0f172a;
            color: white;
        }
    </style>
</head>

<body class="antialiased selection:bg-slate-900 selection:text-white">

    <!-- Navigation Minimaliste -->
    <nav class="py-8 border-b border-stone-300/50">
        <div class="container mx-auto px-6 flex justify-between items-center">
            <a href="index.html" class="flex items-center space-x-2 group">
                <div class="w-8 h-8 bg-slate-900 rounded flex items-center justify-center text-white font-bold text-sm">
                    C</div>
                <span class="text-xl font-extrabold tracking-tighter uppercase">CYREX</span>
            </a>
            <a href="index.html"
                class="back-link text-sm font-bold text-slate-500 hover:text-slate-900 transition-all flex items-center">
                <i class="fas fa-arrow-left mr-2 transition-transform"></i>
                Retour
            </a>
        </div>
    </nav>

    <main class="py-16 md:py-24">
        <div class="container mx-auto px-6 max-w-4xl">
            <!-- Header de la page -->
            <div class="mb-16">
                <p class="text-xs font-bold uppercase tracking-[0.3em] text-slate-400 mb-4">Protection des données</p>
                <h1 class="text-4xl md:text-6xl font-black tracking-tighter mb-6">Politique de <br><span
                        class="text-slate-500">Confidentialité</span></h1>
                <p class="text-slate-500 text-sm italic">Dernière mise à jour : 3 Mars 2026</p>
            </div>

            <!-- Contenu structuré -->
            <div class="content-card rounded-3xl p-8 md:p-16 space-y-16">

                <section>
                    <div class="flex items-start space-x-6">
                        <span class="section-number text-sm font-bold mt-1">01/</span>
                        <div>
                            <h2 class="text-xl font-bold mb-4 uppercase tracking-widest text-xs opacity-50">Collecte des
                                informations</h2>
                            <p class="text-slate-600">
                                Chez Cyrex, nous privilégions la sobriété numérique. Nous ne collectons que les
                                informations que vous nous transmettez explicitement via l'envoi d'emails à
                                <strong>contact@cyrex.fr</strong> (nom, adresse email et contenu du message).
                            </p>
                        </div>
                    </div>
                </section>

                <section>
                    <div class="flex items-start space-x-6">
                        <span class="section-number text-sm font-bold mt-1">02/</span>
                        <div>
                            <h2 class="text-xl font-bold mb-4 uppercase tracking-widest text-xs opacity-50">Utilisation
                                des cookies</h2>
                            <p class="text-slate-600">
                                Notre site est conçu pour être le plus léger possible. Nous n'utilisons aucun cookie de
                                traçage publicitaire ou tiers. Seuls des cookies techniques liés à l'infrastructure
                                d'hébergement (GitHub Pages) peuvent être générés pour assurer la sécurité et la
                                stabilité du service.
                            </p>
                        </div>
                    </div>
                </section>

                <section>
                    <div class="flex items-start space-x-6">
                        <span class="section-number text-sm font-bold mt-1">03/</span>
                        <div>
                            <h2 class="text-xl font-bold mb-4 uppercase tracking-widest text-xs opacity-50">Vos droits
                                (RGPD)</h2>
                            <p class="text-slate-600">
                                Conformément à la réglementation européenne, vous disposez d'un droit d'accès, de
                                rectification et de suppression de vos données personnelles. Pour toute demande, il vous
                                suffit de nous contacter par email. Nous traitons ces demandes sous 48 heures.
                            </p>
                        </div>
                    </div>
                </section>

                <section>
                    <div class="flex items-start space-x-6">
                        <span class="section-number text-sm font-bold mt-1">04/</span>
                        <div>
                            <h2 class="text-xl font-bold mb-4 uppercase tracking-widest text-xs opacity-50">Sécurité du
                                réseau</h2>
                            <p class="text-slate-600">
                                Bien que ce site soit statique, nous appliquons des protocoles de sécurité rigoureux
                                pour garantir l'intégrité des échanges. Toutes les communications vers notre serveur de
                                messagerie sont cryptées via le protocole SSL/TLS.
                            </p>
                        </div>
                    </div>
                </section>

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

    <footer class="py-12 border-t border-stone-300/50 text-center">
        <div class="container mx-auto px-6">
            <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">
                © 2026 Cyrex — Intégrité & Excellence
            </p>
        </div>
    </footer>

</body>

</html>