Repository navigation
Expand file tree
/
Copy path404.html
More file actions
409 lines (374 loc) · 21.1 KB
/
Copy path404.html
File metadata and controls
409 lines (374 loc) · 21.1 KB
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
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
<!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" />
<meta name="referrer" content="strict-origin-when-cross-origin" />
<!-- Primary SEO Meta Tags -->
<title>Page Introuvable (404) | Tagada Studio</title>
<meta name="description" content="Oups ! La page demandée n'existe pas ou a été déplacée. Retrouvez tous nos services de photographie scolaire, sportive et associative sur Tagada Studio." />
<link rel="canonical" href="https://tagadastudio.fr/404.html" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://tagadastudio.fr/404.html" />
<meta property="og:title" content="Page Introuvable (404) | Tagada Studio" />
<meta property="og:description" content="Oups ! La page demandée n'existe pas ou a été déplacée. Retrouvez tous nos services de photographie scolaire, sportive et associative sur Tagada Studio." />
<meta property="og:image" content="https://tagadastudio.fr/Images/photo_scolaire.webp" />
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://tagadastudio.fr/404.html" />
<meta name="twitter:title" content="Page Introuvable (404) | Tagada Studio" />
<meta name="twitter:description" content="Oups ! La page demandée n'existe pas ou a été déplacée. Retrouvez tous nos services de photographie scolaire, sportive et associative sur Tagada Studio." />
<meta name="twitter:image" content="https://tagadastudio.fr/Images/photo_scolaire.webp" />
<!-- Structured Data (Schema.org JSON-LD) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://tagadastudio.fr/#organization",
"name": "Tagada Studio",
"url": "https://tagadastudio.fr",
"logo": "https://tagadastudio.fr/Images/Logo.png"
},
{
"@type": "LocalBusiness",
"@id": "https://tagadastudio.fr/#business",
"name": "Tagada Studio",
"image": "https://tagadastudio.fr/Images/photo_scolaire.webp",
"telephone": "+33-7-81-75-77-54",
"email": "tagadastudiophoto@gmail.com",
"url": "https://tagadastudio.fr/404.html",
"priceRange": "€€",
"address": {
"@type": "PostalAddress",
"streetAddress": "Neuilly-sur-Marne",
"addressLocality": "Neuilly-sur-Marne",
"postalCode": "93330",
"addressRegion": "Île-de-France",
"addressCountry": "FR"
},
"geo": {
"@type": "GeoCoordinates",
"latitude": 48.8584,
"longitude": 2.5332
},
"openingHoursSpecification": [
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday"
],
"opens": "08:00",
"closes": "18:30"
}
]
},
{
"@type": "BreadcrumbList",
"@id": "https://tagadastudio.fr/404.html#breadcrumb",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Accueil",
"item": "https://tagadastudio.fr/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Erreur 404",
"item": "https://tagadastudio.fr/404.html"
}
]
}
]
}
</script>
<meta name="robots" content="noindex, follow" />
<!-- Google Fonts -->
<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" />
<!-- Tailwind CSS CDN -->
<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>
<!-- Global Custom Styles -->
<style>
body {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
background-color: #FDFBF7;
color: #0C110D;
overflow-x: hidden;
}
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;
}
#header-nav.scrolled #nav-links a {
color: rgba(12, 17, 13, 0.8) !important;
}
#header-nav.scrolled #nav-links a:hover {
color: #1A4D2E !important;
}
</style>
<link rel="stylesheet" href="/assets/css/style.min.css">
<link rel="preload" href="/Images/Logo-tagada-studio-fond-transparent2-800 2 - Petite.png" as="image">
<link rel="prefetch" href="/Images/Logo.png" as="image">
</head>
<body class="bg-stone text-ink antialiased selection:bg-forest selection:text-white flex flex-col min-h-screen">
<a href="#main-content" class="skip-link sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-[#1A4D2E] focus:text-white focus:rounded-xl focus:shadow-2xl focus:outline-none focus:ring-2 focus:ring-amber-500">Aller au contenu principal</a>
<!-- ===================== HEADER / NAV ===================== -->
<header class="fixed top-0 left-0 right-0 z-50 transition-all duration-500 bg-forest-dark py-4" id="header-nav">
<nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 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-tagada-studio-fond-transparent2-800 2 - Petite.png" alt="Tagada Studio - Photographe scolaire en Île-de-France" class="h-10 sm:h-11 w-auto object-contain transition-all duration-300 group-hover:scale-105" width="320" height="135" decoding="async" fetchpriority="high" />
</a>
<!-- DESKTOP NAV -->
<ul class="hidden md:flex items-center gap-8 list-none text-sm font-medium text-white/90" 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-white/20 bg-white/10 hover:bg-white hover:text-forest hover:border-white text-white">
Contact & Devis
</a>
</div>
</nav>
</header>
<!-- ===================== STICKY CTA DESKTOP ===================== -->
<div id="sticky-cta-desktop" class="fixed top-5 right-6 z-50 transition-all duration-300 opacity-0 pointer-events-none translate-y-[-10px] hidden md:block">
<a href="demande-devis.html" class="cta-click-track px-6 py-2.5 rounded-full bg-forest text-white text-sm font-bold shadow-lg hover:bg-forest-light hover:shadow-xl transition-all flex items-center gap-2" data-cta-location="desktop_sticky">
<span>Demander un devis</span>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
</a>
</div>
<!-- ===================== MAIN ERROR CONTENT ===================== -->
<main id="main-content" class="flex-grow pt-36 pb-20 px-4 sm:px-6 lg:px-8 flex items-center justify-center">
<div class="max-w-3xl mx-auto text-center space-y-8">
<span class="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-forest/20 bg-forest-soft text-forest text-xs sm:text-sm font-bold tracking-wide">
Erreur 404 · Page introuvable
</span>
<h1 class="font-display text-4xl sm:text-5xl md:text-6xl font-black text-ink leading-tight">
Oups, cet instant s'est échappé !
</h1>
<p class="text-base sm:text-lg text-gray-600 leading-relaxed max-w-xl mx-auto">
La page que vous tentez d'atteindre n'existe pas ou a été déplacée. Pas d'inquiétude, l'ensemble de nos galeries et services photo sont toujours accessibles ci-dessous.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
<a href="index.html" class="w-full sm:w-auto px-8 py-3.5 rounded-full text-base font-bold bg-forest text-white hover:bg-forest-light transition-all shadow-lg text-center">
Retour à l'accueil
</a>
<a href="scolaire.html" class="w-full sm:w-auto px-8 py-3.5 rounded-full text-base font-bold border border-forest/30 text-forest bg-white hover:bg-forest-soft transition-all text-center">
Découvrir nos photos scolaires
</a>
<a href="index.html#contact" class="w-full sm:w-auto px-8 py-3.5 rounded-full text-base font-bold border border-forest/20 text-ink bg-transparent hover:bg-forest/5 transition-all text-center">
Demander un devis
</a>
</div>
<!-- Liens rapides utiles -->
<div class="pt-8 border-t border-gray-200 mt-12">
<h2 class="text-xs font-bold uppercase tracking-widest text-gray-500 mb-4">Pages populaires</h2>
<div class="flex flex-wrap justify-center gap-4 text-sm font-medium text-forest">
<a href="photo-de-classe.html" class="hover:underline">Photos de classe</a>
<span>·</span>
<a href="tarif-photographe-scolaire.html" class="hover:underline">Tarifs & Devis</a>
<span>·</span>
<a href="commande-photo-scolaire-en-ligne.html" class="hover:underline">Commande en ligne</a>
<span>·</span>
<a href="sport.html" class="hover:underline">Clubs sportifs</a>
<span>·</span>
<a href="association.html" class="hover:underline">Associations</a>
</div>
</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">
<picture>
<source type="image/webp" srcset="/Images/logo-white.webp">
<img src="/Images/Logo-tagada-studio-fond-transparent2-800 2 - Petite.png" alt="Tagada Studio - Photographe scolaire" class="h-8 sm:h-9 w-auto object-contain opacity-90 hover:opacity-100 transition-opacity" width="320" height="135" loading="lazy" decoding="async" />
</picture>
<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="a-propos.html" class="hover:text-white transition-colors">À Propos</a></li>
<li><a href="temoignages.html" class="hover:text-white transition-colors">Témoignages</a></li>
<li><a href="blog.html" class="hover:text-white transition-colors">Blog & Guides</a></li>
<li><a href="faq.html" class="hover:text-white transition-colors">FAQ</a></li>
<li><a href="demande-devis.html" class="hover:text-white transition-colors">Demander un Devis</a></li>
<li><a href="mentions-legales.html" class="hover:text-white transition-colors">Mentions Légales & RGPD</a></li>
<li><a href="politique-confidentialite.html" class="hover:text-white transition-colors">Politique de Confidentialité</a></li>
<li><a href="cgv.html" class="hover:text-white transition-colors">Conditions Générales de Vente (CGV)</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 5 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>
<!-- ===================== STICKY CTA MOBILE ===================== -->
<aside id="sticky-cta-mobile" class="fixed bottom-0 left-0 right-0 z-40 bg-stone-dark/95 backdrop-blur-md border-t border-gray-200 py-3 px-4 flex items-center justify-between shadow-2xl transition-transform duration-300 translate-y-full md:hidden" aria-label="Devis rapide mobile">
<div class="flex flex-col">
<span class="text-[11px] font-bold text-forest uppercase tracking-wider">Un projet photo ?</span>
<span class="text-xs text-ink/80">Devis gratuit sous 24h</span>
</div>
<div class="flex items-center gap-2">
<a href="tel:0781757754" class="p-2.5 rounded-full bg-stone-slate text-ink hover:text-forest transition-colors" aria-label="Appeler Tagada Studio">
<svg class="w-4 h-4 text-forest" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
</a>
<a href="demande-devis.html" class="cta-click-track px-5 py-2.5 rounded-full bg-forest text-white text-xs font-bold shadow-md hover:bg-forest-light transition-all flex items-center gap-1.5" data-cta-location="mobile_sticky">
<span>Demander un devis</span>
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
</a>
</div>
</aside>
<script>
// Desktop & Mobile Sticky CTAs Behavior
const stickyDesktopCta = document.getElementById('sticky-cta-desktop');
const stickyMobileCta = document.getElementById('sticky-cta-mobile');
function checkHeaderScroll() {
const header = document.getElementById('header-nav');
const navLogoImg = document.getElementById('nav-logo-img');
const navLinks = document.getElementById('nav-links');
const navCtaBtn = document.getElementById('nav-cta-btn');
const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
if (!header) return;
const isScrolled = window.scrollY > 40;
if (isScrolled) {
header.classList.add('scrolled', 'bg-stone/95', 'backdrop-blur-md', 'shadow-md', 'py-3');
header.classList.remove('bg-forest-dark', 'py-4');
if (navLogoImg) navLogoImg.src = '/Images/Logo.png';
if (navLinks) {
navLinks.classList.remove('text-white/90');
navLinks.classList.add('text-ink/80');
}
} else {
header.classList.remove('scrolled', 'bg-stone/95', 'backdrop-blur-md', 'shadow-md', 'py-3');
header.classList.add('bg-forest-dark', 'py-4');
if (navLogoImg) navLogoImg.src = '/Images/Logo-tagada-studio-fond-transparent2-800 2 - Petite.png';
if (navLinks) {
navLinks.classList.add('text-white/90');
navLinks.classList.remove('text-ink/80');
}
}
}
window.addEventListener('scroll', () => {
checkHeaderScroll();
const scrollY = window.scrollY;
// Desktop Sticky CTA (appear at scroll > 300px)
if (stickyDesktopCta) {
if (scrollY > 300) {
stickyDesktopCta.classList.remove('opacity-0', 'pointer-events-none', 'translate-y-[-10px]');
stickyDesktopCta.classList.add('opacity-100', 'pointer-events-auto', 'translate-y-0');
} else {
stickyDesktopCta.classList.add('opacity-0', 'pointer-events-none', 'translate-y-[-10px]');
stickyDesktopCta.classList.remove('opacity-100', 'pointer-events-auto', 'translate-y-0');
}
}
// Mobile Sticky CTA (appear at scroll > 240px)
if (stickyMobileCta) {
if (scrollY > 240) {
stickyMobileCta.classList.remove('translate-y-full');
} else {
stickyMobileCta.classList.add('translate-y-full');
}
}
}, { passive: true });
window.addEventListener('DOMContentLoaded', checkHeaderScroll);
checkHeaderScroll();
// GA4 Event: cta_click
document.querySelectorAll('.cta-click-track').forEach(btn => {
btn.addEventListener('click', () => {
const loc = btn.getAttribute('data-cta-location') || 'sticky';
if (typeof gtag === 'function') {
gtag('event', 'cta_click', {
'event_category': 'Engagement',
'event_label': 'Bouton Demander un Devis',
'button_location': loc
});
}
});
});
</script>
</body>
</html>