TagadaStudio/mentions-legales.html at main · attackattackneo-sys/TagadaStudio · 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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-WWLJQZXZ0R"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-WWLJQZXZ0R');
  </script>

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mentions Légales | Tagada Studio</title>
  <meta name="description" content="Mentions légales du site internet de Tagada Studio, photographe professionnel à Neuilly-sur-Marne." />
  <meta name="robots" content="noindex, follow" />

  <!-- Fonts & Tailwind -->
  <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=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            forest: {
              DEFAULT: '#1A4D2E',
              light: '#256D41',
              dark: '#0F2F1B',
              soft: '#E8F3EC',
            },
            stone: {
              DEFAULT: '#FDFBF7',
              dark: '#F3EFE9',
              slate: '#E9E4DC',
            },
            ink: '#0C110D',
          },
          fontFamily: {
            display: ['"Playfair Display"', 'Georgia', 'serif'],
            body: ['"Plus Jakarta Sans"', 'system-ui', 'sans-serif'],
          }
        }
      }
    }
  </script>

  <style>
    body {
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
      background-color: #FDFBF7;
      color: #0C110D;
    }
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 9999;
    }

    /* Scrolled dynamic styles for color contrast */
    #header-nav.scrolled #nav-links a {
      color: rgba(12, 17, 13, 0.8) !important;
    }
    #header-nav.scrolled #nav-links a:hover {
      color: #1A4D2E !important;
    }
    #header-nav.scrolled #nav-links a.active-link {
      color: #1A4D2E !important;
      border-color: rgba(26, 77, 46, 0.6) !important;
    }
  </style>
</head>
<body class="bg-stone text-ink antialiased selection:bg-forest selection:text-white">

  <!-- ===================== HEADER / NAV ===================== -->
  <header class="fixed top-0 left-0 right-0 z-50 transition-all duration-500 bg-stone/95 backdrop-blur-md shadow-md py-4 sm:py-5 scrolled" id="header-nav">
    <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-5 flex items-center justify-between" aria-label="Navigation principale">

      <!-- LOGO -->
      <a href="index.html" class="flex items-center gap-3 group focus:outline-none" aria-label="Tagada Studio - Accueil">
        <img id="nav-logo-img" src="Images/Logo.png" alt="Tagada Studio" class="h-10 sm:h-11 w-auto object-contain transition-all duration-300 group-hover:scale-105" />
      </a>

      <!-- DESKTOP NAV -->
      <ul class="hidden md:flex items-center gap-8 list-none text-sm font-medium text-ink/80" id="nav-links" role="list">
        <li><a href="index.html" class="hover:text-white transition-colors">Accueil</a></li>
        <li><a href="scolaire.html" class="hover:text-white transition-colors">Photos Scolaires</a></li>
        <li><a href="sport.html" class="hover:text-white transition-colors">Clubs Sportifs</a></li>
        <li><a href="association.html" class="hover:text-white transition-colors">Associations</a></li>
        <li><a href="index.html#contact" class="hover:text-white transition-colors">Contact & Devis</a></li>
      </ul>

      <!-- CTA -->
      <div class="flex items-center gap-3">
        <a href="index.html#contact" class="hidden sm:inline-flex items-center gap-2 px-5 py-2.5 rounded-full text-sm font-semibold transition-all border border-forest/20 bg-forest/5 hover:bg-forest hover:text-white hover:border-forest text-forest" id="nav-cta-btn">
          Contact & Devis
        </a>
        <button id="mobile-menu-toggle" class="md:hidden p-2 rounded-xl text-forest hover:bg-forest/10 transition-colors" aria-label="Ouvrir le menu" aria-expanded="false">
          <svg id="hamburger-icon" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
          <svg id="close-icon" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
      </div>
    </nav>

    <!-- MOBILE MENU -->
    <div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full bg-forest-dark py-6 px-4 shadow-xl z-40">
      <ul class="flex flex-col gap-4 list-none text-base font-semibold text-white/90" role="list">
        <li><a href="index.html" class="block py-2 px-3 rounded-lg hover:bg-white/5">Accueil</a></li>
        <li><a href="scolaire.html" class="block py-2 px-3 rounded-lg hover:bg-white/5">Photos Scolaires</a></li>
        <li><a href="sport.html" class="block py-2 px-3 rounded-lg hover:bg-white/5">Clubs Sportifs</a></li>
        <li><a href="association.html" class="block py-2 px-3 rounded-lg hover:bg-white/5">Associations</a></li>
        <li><a href="index.html#contact" class="block py-2 px-3 rounded-lg hover:bg-white/5">Devis & Tarifs</a></li>
        <li><a href="index.html#contact" class="block mt-4 text-center bg-white text-forest py-3 rounded-full font-bold">Contact & Devis</a></li>
      </ul>
    </div>
  </header>

  <!-- ===================== MAIN CONTENT ===================== -->
  <main class="pt-32 pb-24 px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl mx-auto bg-white border border-gray-100 rounded-[32px] p-8 sm:p-12 shadow-sm mt-8">
      <h1 class="font-display text-3xl sm:text-4xl font-extrabold text-forest mb-8 border-b pb-4">Mentions Légales</h1>

      <div class="space-y-6 text-gray-600 text-sm sm:text-base leading-relaxed">

        <section>
          <h2 class="font-display text-xl font-bold text-ink mb-3">1. Présentation du site internet</h2>
          <p>
            En vertu de l'article 6 de la loi n° 2004-575 du 21 juin 2004 pour la confiance dans l'économie numérique, il est précisé aux utilisateurs du site internet <a href="https://tagadastudio.fr" class="text-forest underline font-semibold">tagadastudio.fr</a> l'identité des différents intervenants dans le cadre de sa réalisation et de son suivi :
          </p>
          <ul class="list-disc pl-5 mt-2 space-y-1">
            <li><strong>Propriétaire</strong> : Tagada Studio EURL, immatriculée au RCS de Bobigny, SIRET : 984 595 538 00013, Capital social de 1 000 €.</li>
            <li><strong>Adresse postale</strong> : Neuilly-sur-Marne (93330).</li>
            <li><strong>Directeur de la publication</strong> : Grégory – Directeur Général de Tagada Studio – <a href="mailto:tagadastudiophoto@gmail.com" class="text-forest underline">tagadastudiophoto@gmail.com</a>.</li>
            <li><strong>Hébergeur</strong> : GitHub Pages – GitHub, Inc. 88 Colin P Kelly Jr St, San Francisco, CA 94107, États-Unis.</li>
          </ul>
        </section>

        <section>
          <h2 class="font-display text-xl font-bold text-ink mb-3">2. Conditions générales d’utilisation du site</h2>
          <p>
            Le Site constitue une œuvre de l’esprit protégée par les dispositions du Code de la Propriété Intellectuelle et des Réglementations Internationales applicables. L’utilisateur ne peut en aucune manière réutiliser, céder ou exploiter pour son propre compte tout ou partie des éléments ou travaux du Site.
          </p>
          <p class="mt-2">
            L’utilisation du site <a href="index.html" class="text-forest underline">tagadastudio.fr</a> implique l’acceptation pleine et entière des conditions générales d’utilisation ci-après décrites. Ces conditions d’utilisation sont susceptibles d’être modifiées ou complétées à tout moment.
          </p>
        </section>

        <section>
          <h2 class="font-display text-xl font-bold text-ink mb-3">3. Description des services fournis</h2>
          <p>
            Le site internet <a href="index.html" class="text-forest underline">tagadastudio.fr</a> a pour objet de fournir une information concernant l’ensemble des activités de la société. Tagada Studio s’efforce de fournir sur le site des informations aussi précises que possible. Toutefois, il ne pourra être tenu responsable des oublis, 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>
        </section>

        <section>
          <h2 class="font-display text-xl font-bold text-ink mb-3">4. Propriété intellectuelle et contrefaçons</h2>
          <p>
            Tagada Studio est propriétaire des droits de propriété intellectuelle et détient les droits d’usage sur tous les éléments accessibles sur le site internet, notamment les textes, images, graphismes, logos, vidéos, icônes et sons.
          </p>
          <p class="mt-2">
            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, sauf autorisation écrite préalable de Tagada Studio.
          </p>
        </section>

        <section>
          <h2 class="font-display text-xl font-bold text-ink mb-3">5. Limitations de responsabilité</h2>
          <p>
            Tagada Studio agit en tant qu’éditeur du site et reste responsable de la qualité et de la véracité du contenu qu'il publie.
          </p>
          <p class="mt-2">
            Tagada Studio ne pourra être tenu responsable des dommages directs et indirects causés au matériel de l’utilisateur, lors de l’accès au site internet <a href="index.html" class="text-forest underline">tagadastudio.fr</a>, et résultant soit de l’utilisation d’un matériel ne répondant pas aux spécifications indiquées, soit de l’apparition d’un bug ou d’une incompatibilité.
          </p>
        </section>

        <section>
          <h2 class="font-display text-xl font-bold text-ink mb-3">6. Droit applicable et attribution de juridiction</h2>
          <p>
            Tout litige en relation avec l’utilisation du site <a href="index.html" class="text-forest underline">tagadastudio.fr</a> est soumis au droit français. En dehors des cas où la loi ne le permet pas, il est fait attribution exclusive de juridiction aux tribunaux compétents de Bobigny.
          </p>
        </section>

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

  <!-- ===================== FOOTER ===================== -->
  <footer class="bg-forest-dark text-white border-t border-white/5 pt-16 pb-8" aria-label="Pied de page">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8 gap-y-12 mb-16">
        <div class="col-span-2 md:col-span-1 space-y-4">
          <img src="Images/Logo-tagada-studio-fond-transparent2-800 2 - Petite.png" alt="Tagada Studio" class="h-8 sm:h-9 w-auto object-contain opacity-90" />
          <p class="text-white/60 text-sm leading-relaxed max-w-xs">
            Spécialiste de la photographie scolaire, sportive et associative en Seine-Saint-Denis (93) et Île-de-France. Fiers d'un artisanat moderne et engagé.
          </p>
        </div>

        <nav aria-label="Silos Navigation Footer">
          <h4 class="text-xs font-bold uppercase tracking-widest text-white/55 mb-4">Nos Expertises</h4>
          <ul class="space-y-2 text-sm text-white/60 list-none">
            <li><a href="scolaire.html" class="hover:text-white transition-colors">Photographie Scolaire</a></li>
            <li><a href="photo-de-classe.html" class="hover:text-white transition-colors">Photos de Classe</a></li>
            <li><a href="sport.html" class="hover:text-white transition-colors">Photo Club Sport</a></li>
            <li><a href="association.html" class="hover:text-white transition-colors">Reportage Associatif</a></li>
          </ul>
        </nav>

        <nav aria-label="Liens Utiles Footer">
          <h4 class="text-xs font-bold uppercase tracking-widest text-white/55 mb-4">Services & Tarifs</h4>
          <ul class="space-y-2 text-sm text-white/60 list-none">
            <li><a href="commande-photo-scolaire-en-ligne.html" class="hover:text-white transition-colors">Commande en Ligne</a></li>
            <li><a href="tarif-photographe-scolaire.html" class="hover:text-white transition-colors">Tarifs & Devis Scolaire</a></li>
            <li><a href="index.html#processus" class="hover:text-white transition-colors">Notre Méthode</a></li>
            <li><a href="index.html#faq" class="hover:text-white transition-colors">Questions Fréquentes</a></li>
          </ul>
        </nav>

        <nav aria-label="Légal Navigation Footer">
          <h4 class="text-xs font-bold uppercase tracking-widest text-white/55 mb-4">Légal & Localisation</h4>
          <ul class="space-y-2 text-sm text-white/60 list-none">
            <li><a href="photographe-scolaire-ile-de-france.html" class="hover:text-white transition-colors">Scolaire Île-de-France</a></li>
            <li><a href="photographe-scolaire-paris.html" class="hover:text-white transition-colors">Scolaire Paris</a></li>
            <li><a href="photographe-scolaire-seine-saint-denis.html" class="hover:text-white transition-colors">Scolaire Seine-Saint-Denis</a></li>
            <li><a href="mentions-legales.html" class="hover:text-white text-white font-bold transition-colors">Mentions Légales & RGPD</a></li>
          </ul>
        </nav>
      </div>

      <div class="border-t border-white/5 pt-8 flex flex-col md:flex-row items-center justify-between gap-4 text-xs text-white/40">
        <p>© 2026 Tagada Studio. Tous droits réservés. EURL au capital de 1 000 € · SIRET : 984 595 538 00013 · Neuilly-sur-Marne (93330).</p>
        <p class="text-center md:text-right">
          Ciblage Local : <a href="photographe-scolaire-seine-saint-denis.html" class="hover:text-white/70 underline transition-colors">Photographe scolaire Neuilly-sur-Marne (93)</a> · <a href="sport.html" class="hover:text-white/70 underline transition-colors">Photo club sport</a> · <a href="association.html" class="hover:text-white/70 underline transition-colors">Reportage associatif Île-de-France</a>
        </p>
      </div>
    </div>
  </footer>

  <script>
    // Header Glassmorphism effect
    const header = document.getElementById('header-nav');
    const navLogoText = document.getElementById('nav-logo-text');
    const navLogoSub = document.getElementById('nav-logo-sub');
    const navLinks = document.getElementById('nav-links');
    const navCtaBtn = document.getElementById('nav-cta-btn');

    function checkHeaderScroll() {
      // Keep colors always scrolled on light pages, only transition padding
      header.classList.add('scrolled', 'bg-stone/95', 'backdrop-blur-md', 'shadow-md');
      if (window.scrollY > 40) {
        header.classList.add('py-3');
        header.classList.remove('py-4', 'sm:py-5');
      } else {
        header.classList.remove('py-3');
        header.classList.add('py-4', 'sm:py-5');
      }
    }
    window.addEventListener('scroll', checkHeaderScroll, { passive: true });
    checkHeaderScroll();

    // Mobile Menu Toggle
    const menuToggleBtn = document.getElementById('mobile-menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    const hamburgerIcon = document.getElementById('hamburger-icon');
    const closeIcon = document.getElementById('close-icon');

    menuToggleBtn.addEventListener('click', () => {
      const isExpanded = menuToggleBtn.getAttribute('aria-expanded') === 'true';
      menuToggleBtn.setAttribute('aria-expanded', !isExpanded);

      mobileMenu.classList.toggle('hidden');
      hamburgerIcon.classList.toggle('hidden');
      closeIcon.classList.toggle('hidden');
    });
  </script>
</body>
</html>