PageSourceSearch

https://animou-app.com/

html animou-app.com collected 2026-10-02 00:27:25 UTC 774,813 bytes, 5,252 lines download raw bytes

1<!DOCTYPE html>
2<html lang="fr" >
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6
7    
8    <title>Animou | L&#039;app communautaire pour les animaux perdus</title>
9
10
11<meta name="description" content="Animou est l&#039;application gratuite qui mobilise votre quartier dès qu&#039;un animal disparaît. Téléchargez-la sur l&#039;App Store et Google Play.">
12
13
14
15
16<link rel="canonical" href="https://animou-app.com">
17
18
19
20
21<meta property="og:title" content="Animou | L&#039;app communautaire pour les animaux perdus">
22<meta property="og:type" content="website">
23<meta property="og:url" content="https://animou-app.com">
24<meta property="og:site_name" content="Animou">
25<meta property="og:locale" content="fr_FR">
26<meta property="og:locale:alternate" content="en_US">
27<meta property="og:logo" content="https://animou-app.com/storage/35/animou_logo.png">
28<meta property="og:description" content="Animou est l&#039;application gratuite qui mobilise votre quartier dès qu&#039;un animal disparaît. Téléchargez-la sur l&#039;App Store et Google Play.">
29<meta property="og:image" content="https://animou-app.com/img/37/opengraph.jpg?w=1200&amp;h=630&amp;fit=crop&amp;fm=jpg&amp;q=85&amp;s=d728d6bf1514e131f277d5ff6ec13bb4">
30<meta property="og:image:type" content="image/jpeg">
31<meta property="og:image:width" content="1200">
32<meta property="og:image:height" content="630">
33
34
35
36
37
38
39<meta name="twitter:card" content="summary_large_image">
40<meta name="twitter:title" content="Animou | L&#039;app communautaire pour les animaux perdus">
41<meta name="twitter:description" content="Animou est l&#039;application gratuite qui mobilise votre quartier dès qu&#039;un animal disparaît. Téléchargez-la sur l&#039;App Store et Google Play.">
42<meta name="twitter:image" content="https://animou-app.com/img/37/opengraph.jpg?w=1200&amp;h=630&amp;fit=crop&amp;fm=jpg&amp;q=85&amp;s=d728d6bf1514e131f277d5ff6ec13bb4">
43<meta name="twitter:site" content="@animouapp">
44
45
46
47
48<link rel="alternate" type="application/rss+xml" title="Animou RSS Feed" href="https://animou-app.com/feed">
49
50    <link rel="alternate" hreflang="fr" href="https://animou-app.com" />
51            
52                <link rel="alternate" hreflang="en" href="https://animou-app.com/en" />
53        
54            <link rel="alternate" hreflang="x-default" href="https://animou-app.com" />
55    
56    
56<script type="application/ld+json">
57{
58    "@context": "https://schema.org",
59    "@type": "WebSite",
60    "name": "Animou",
61    "url": "https://animou-app.com",
62    "description": "La première application communautaire pour retrouver les animaux perdus.",
63    "potentialAction": {
64        "@type": "SearchAction",
65        "target": {
66            "@type": "EntryPoint",
67            "urlTemplate": "https://animou-app.com/?s={search_term_string}"
68        },
69        "query-input": "required name=search_term_string"
70    }
71}
72</script>
vendor: 1 bytes, line 72
72
73<script type="application/ld+json">
74{
75    "@context": "https://schema.org",
76    "@type": "WebPage",
77    "name": "Animou | L'app communautaire pour les animaux perdus",
78    "description": "Animou est l'application gratuite qui mobilise votre quartier dès qu'un animal disparaît. Téléchargez-la sur l'App Store et Google Play.",
79    "url": "https://animou-app.com",
80    "isPartOf": {
81        "@type": "WebSite",
82        "name": "Animou",
83        "url": "https://animou-app.com"
84    }
85}
86</script>
86
87
88    
89    
89<script type="application/ld+json">
90{
91    "@context": "https://schema.org",
92    "@type": "Organization",
93    "@id": "https://animou-app.com/#organization",
94    "name": "Animou",
95    "url": "https://animou-app.com/",
96    "description": "La première application communautaire pour retrouver les animaux perdus.",
97    "logo": {
98        "@type": "ImageObject",
99        "url": "https://animou-app.com/storage/35/animou_logo.png"
100    },
101    "image": "https://animou-app.com/storage/35/animou_logo.png",
102    "sameAs": [
103        "https://www.wikidata.org/wiki/Q139860337",
104        "https://www.linkedin.com/company/animou",
105        "https://x.com/animouapp",
106        "https://facebook.com/animouapp",
107        "https://instagram.com/animouapp",
108        "https://www.tiktok.com/@animouapp"
109    ],
110    "contactPoint": {
111        "url": "https://animou-app.com/contact",
112        "@type": "ContactPoint",
113        "contactType": "customer support",
114        "availableLanguage": [
115            "French",
116            "English"
117        ]
118    },
119    "identifier": {
120        "@type": "PropertyValue",
121        "propertyID": "wikidata",
122        "value": "Q139860337"
123    },
124    "founder": {
125        "@type": "Person",
126        "@id": "https://animou-app.com/a-propos#aymeric-deloche",
127        "name": "Aymeric Deloche",
128        "url": "https://animou-app.com/a-propos"
129    }
130}
131</script>
131
132
133    
134    
135    
136    
137    <meta name="csrf-token" content="nPp0aFD5nwzQw95GCjl894frMvKbrdPExvaLBFsn">
138
139    
140    <style>
141        *, *::before, *::after { box-sizing: border-box; }
142        body { margin: 0; background: #FFFFFF; color: #0F0B3F; -webkit-font-smoothing: antialiased; }
143        [x-cloak], [hidden] { display: none !important; }
144        .an-skip-link { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
145        @layer base {
146            img, svg, video, canvas, picture { display: block; max-width: 100%; }
147        }
148        @layer utilities {
149            .hidden { display: none; }
150            .invisible { visibility: hidden; }
151            .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
152        }
153        @media (max-width: 720px) { .page-section { padding: 60px 0 40px; } .page-wrapper { width: min(100% - 32px, 100%); } }
154    </style>
155
156        <link rel="preload" as="font" href="https://animou-app.com/themes/animou/build/assets/HelveticaNowDisplay-Regular-Cte0Ds4x.woff2" type="font/woff2" crossorigin>
157    <link rel="preload" as="font" href="https://animou-app.com/themes/animou/build/assets/HelveticaNowDisplay-Medium-BLBjukeX.woff2" type="font/woff2" crossorigin>
158    
159    
160                                            <link rel="preload" as="style" href="https://animou-app.com/themes/animou/build/assets/app-4B7U8dQ7.css">
161                        <link rel="stylesheet" href="https://animou-app.com/themes/animou/build/assets/app-4B7U8dQ7.css">
162                                
162<script type="module" src="https://animou-app.com/themes/animou/build/assets/app-ADNd14x_.js"></script>
162
163                <!-- Livewire Styles --><style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.list-item][wire\:loading\.list-item], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}[wire\:cloak] {display: none !important;}dialog#livewire-error::backdrop {background-color: rgba(0, 0, 0, .6);}</style>
164        <link rel="icon" type="image/svg+xml" href="https://animou-app.com/storage/33/favicon.svg" />
165    <link rel="icon" type="image/x-icon" href="https://animou-app.com/favicon.ico" />
166    <link rel="apple-touch-icon" sizes="180x180" href="https://animou-app.com/apple-touch-icon.png" />
167    <link rel="manifest" href="https://animou-app.com/site.webmanifest" />
168                
169        <meta name="apple-itunes-app" content="app-id=6779167347, app-argument=https://animou-app.com">
170        <style>[x-cloak] { display: none !important; }</style>
171        </head>
172<body class="flex flex-col min-h-screen bg-background text-foreground antialiased">
173    <a href="#content" class="an-skip-link">Aller au contenu principal</a>
174    
175    <div x-data="{ mobileMenuOpen: false }">
176    <header class="w-full z-50 absolute top-0 left-0">
177        <div class="page-wrapper flex items-center justify-between pt-[20px] pb-[32px]">
178            
179            <div class="flex items-center gap-[72px]">
180            
181            <a class="flex items-center no-underline shrink-0" href="https://animou-app.com" aria-label="Animou">
182                <span class="sr-only">Animou</span>
183                <span class="inline-block w-[113px] lg:w-[170px] aspect-[171/48] logo-white-0" style="--logo-url: url('https://animou-app.com/img/35/animou_logo.png?w=340&amp;fm=webp&amp;q=90&amp;fit=max&amp;s=04ec5a5baee589ecb5d438e24374ca8a')" role="img" aria-hidden="true"></span>
184            </a>
185
186            
187            <nav id="main-nav" class="hidden lg:flex items-center gap-8" aria-label="Navigation principale">
188                                                            <a
189                            href="/application-mobile"
190                            class="font-helvetica-now-display font-medium text-lg leading-[1.4] no-underline transition-colors whitespace-nowrap text-white-0 hover:text-white-0/80"
191                        >Application</a>
192                                                                                <a
193                            href="/a-propos"
194                            class="font-helvetica-now-display font-medium text-lg leading-[1.4] no-underline transition-colors whitespace-nowrap text-white-0 hover:text-white-0/80"
195                        >À propos</a>
196                                                                                <div
197                            class="relative"
198                            x-data="{ open: false }"
199                            @mouseenter="open = true"
200                            @mouseleave="open = false"
201                            @click.outside="open = false"
202                            @keydown.escape="open = false"
203                        >
204                            <button
205                                type="button"
206                                class="flex items-center gap-1.5 font-helvetica-now-display font-medium text-lg leading-[1.4] transition-colors whitespace-nowrap text-white-0 hover:text-white-0/80"
207                                @click="open = ! open"
208                                :aria-expanded="open"
209                                aria-haspopup="true"
210                            >
211                                <span>Communauté</span>
212                                <svg class="size-4 transition-transform duration-200" :class="open && 'rotate-180'" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
213                                    <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
214                                </svg>
215                            </button>
216                            
217                            <div
218                                x-show="open"
219                                x-cloak
220                                x-transition:enter="transition ease-out duration-200"
221                                x-transition:enter-start="opacity-0 -translate-y-1"
222                                x-transition:enter-end="opacity-100 translate-y-0"
223                                x-transition:leave="transition ease-in duration-150"
224                                x-transition:leave-start="opacity-100"
225                                x-transition:leave-end="opacity-0"
226                                class="absolute left-1/2 -translate-x-1/2 top-full pt-4 z-50"
227                            >
228                                <div class="bg-white-0 rounded-2xl shadow-[0_8px_30px_rgba(15,11,63,0.12)] py-2 min-w-[200px] flex flex-col">
229                                                                            <a
230                                            href="/devenir-ambassadeur"
231                                            class="px-5 py-2.5 font-helvetica-now-display font-medium text-base leading-[1.4] text-dark-850 hover:text-purple-500 no-underline transition-colors whitespace-nowrap"
232                                        >Ambassadeur</a>
233                                                                            <a
234                                            href="/devenir-partenaire"
235                                            class="px-5 py-2.5 font-helvetica-now-display font-medium text-base leading-[1.4] text-dark-850 hover:text-purple-500 no-underline transition-colors whitespace-nowrap"
236                                        >Partenaire</a>
237                                                                    </div>
238                            </div>
239                        </div>
240                                                                                <a
241                            href="/blog"
242                            class="font-helvetica-now-display font-medium text-lg leading-[1.4] no-underline transition-colors whitespace-nowrap text-white-0 hover:text-white-0/80"
243                        >Blog</a>
244                                                                                <a
245                            href="/faq"
246                            class="font-helvetica-now-display font-medium text-lg leading-[1.4] no-underline transition-colors whitespace-nowrap text-white-0 hover:text-white-0/80"
247                        >FAQ</a>
248                                                                                <a
249                            href="/contact"
250                            class="font-helvetica-now-display font-medium text-lg leading-[1.4] no-underline transition-colors whitespace-nowrap text-white-0 hover:text-white-0/80"
251                        >Contact</a>
252                                                </nav>
253            </div>
254
255            
256            <div class="flex items-center gap-3">
257                                    <nav class="hidden lg:flex items-center gap-1" aria-label="Langue">
258                                                                                <a
259                                href="https://animou-app.com"
260                                class="font-helvetica-now-display font-medium text-sm leading-[1.4] no-underline transition-colors text-white-0"
261                                hreflang="fr"
262                                 aria-current="true"                             >FR</a>
263                                                            <span class="text-white-0/30 text-sm select-none" aria-hidden="true">|</span>
264                                                                                                            <a
265                                href="https://animou-app.com/en"
266                                class="font-helvetica-now-display font-medium text-sm leading-[1.4] no-underline transition-colors text-white-0/50 hover:text-white-0/80"
267                                hreflang="en"
268                                                            >EN</a>
269                                                                        </nav>
270                
271                                <a
272                    href="https://animou.app/telechargement"
273                     target="_blank" rel="noopener noreferrer"                     data-track="download-cta"
274                    class="
275                        group hidden lg:inline-flex items-center justify-center gap-1.5
276                        h-[48px] pl-6 pr-5 rounded-btn
277                        border font-helvetica-now-display font-medium text-base leading-6
278                        no-underline transition-colors border-white-0 text-white-0 hover:bg-white-0/10
279                    "
280                >
281                    <span>Télécharger</span>
282                    <svg class="size-[18px] rotate-45 motion-safe:transition-transform motion-safe:duration-[400ms] motion-safe:ease-out group-hover:rotate-180" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
283                        <path d="M9 3.75V14.25M9 3.75L4.5 8.25M9 3.75L13.5 8.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
284                    </svg>
285                </a>
286                
287                
288                <button
289                    type="button"
290                    class="lg:hidden flex flex-col items-center justify-center gap-1.5 size-10"
291                    x-ref="menuToggle"
292                    @click="mobileMenuOpen = true"
293                    :aria-expanded="mobileMenuOpen"
294                    aria-controls="landing-mobile-menu"
295                    aria-label="Ouvrir le menu"
296                >
297                    <span class="block w-6 h-[2px] rounded-full bg-white-0"></span>
298                    <span class="block w-6 h-[2px] rounded-full bg-white-0"></span>
299                    <span class="block w-6 h-[2px] rounded-full bg-white-0"></span>
300                </button>
301            </div>
302        </div>
303    </header>
304
305    
306    <div
307        x-trap.noscroll="mobileMenuOpen"
308        class="fixed inset-0 z-[60] lg:hidden"
309        id="landing-mobile-menu"
310        x-show="mobileMenuOpen"
311        x-transition:enter="transition ease-out duration-300"
312        x-transition:enter-start="opacity-0"
313        x-transition:enter-end="opacity-100"
314        x-transition:leave="transition ease-in duration-200"
315        x-transition:leave-start="opacity-100"
316        x-transition:leave-end="opacity-0"
317        x-cloak
318        aria-label="Navigation mobile"
319        role="dialog"
320        aria-modal="true"
321        @keydown.escape.window="mobileMenuOpen = false; $nextTick(() => $refs.menuToggle.focus())"
322    >
323        <div class="bg-white-0 w-full h-full flex flex-col">
324
325            
326            <div class="flex items-center justify-between page-wrapper pt-[20px] pb-[32px] shrink-0">
327                <a class="flex items-center no-underline" href="https://animou-app.com" @click="mobileMenuOpen = false" aria-label="Animou">
328                    <span class="sr-only">Animou</span>
329                    <span class="inline-block w-[113px] aspect-[171/48] logo-dark-850" style="--logo-url: url('https://animou-app.com/img/35/animou_logo.png?w=340&amp;fm=webp&amp;q=90&amp;fit=max&amp;s=04ec5a5baee589ecb5d438e24374ca8a')" role="img" aria-hidden="true"></span>
330                </a>
331                <button
332                    type="button"
333                    class="flex items-center justify-center size-10"
334                    @click="mobileMenuOpen = false; $nextTick(() => $refs.menuToggle.focus())"
335                    aria-label="Fermer le menu"
336                >
337                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
338                        <path d="M28 28L20 20M20 20L12 12M20 20L28 12M20 20L12 28" stroke="#0F0B3F" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
339                    </svg>
340                </button>
341            </div>
342
343            
344            <div class="flex-1 min-h-0 overflow-y-auto flex flex-col items-center gap-8 px-4 py-8 w-full max-w-[358px] mx-auto">
345                                                            <a
346                            href="/application-mobile"
347                            class="font-helvetica-now-display font-medium text-lg leading-[1.4] text-dark-850 no-underline"
348                            @click="mobileMenuOpen = false"
349                        >Application</a>
350                                                                                <a
351                            href="/a-propos"
352                            class="font-helvetica-now-display font-medium text-lg leading-[1.4] text-dark-850 no-underline"
353                            @click="mobileMenuOpen = false"
354                        >À propos</a>
355                                                                                <div x-data="{ open: false }" class="flex flex-col items-center">
356                            <button
357                                type="button"
358                                class="flex items-center gap-1.5 font-helvetica-now-display font-medium text-lg leading-[1.4] text-dark-850"
359                                @click="open = ! open"
360                                :aria-expanded="open"
361                            >
362                                <span>Communauté</span>
363                                <svg class="size-4 transition-transform duration-200" :class="open && 'rotate-180'" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
364                                    <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
365                                </svg>
366                            </button>
367                            <div x-show="open" x-cloak class="flex flex-col items-center gap-6 pt-6">
368                                                                    <a
369                                        href="/devenir-ambassadeur"
370                                        class="font-helvetica-now-display font-medium text-base leading-[1.4] text-dark-700 no-underline"
371                                        @click="mobileMenuOpen = false"
372                                    >Ambassadeur</a>
373                                                                    <a
374                                        href="/devenir-partenaire"
375                                        class="font-helvetica-now-display font-medium text-base leading-[1.4] text-dark-700 no-underline"
376                                        @click="mobileMenuOpen = false"
377                                    >Partenaire</a>
378                                                            </div>
379                        </div>
380                                                                                <a
381                            href="/blog"
382                            class="font-helvetica-now-display font-medium text-lg leading-[1.4] text-dark-850 no-underline"
383                            @click="mobileMenuOpen = false"
384                        >Blog</a>
385                                                                                <a
386                            href="/faq"
387                            class="font-helvetica-now-display font-medium text-lg leading-[1.4] text-dark-850 no-underline"
388                            @click="mobileMenuOpen = false"
389                        >FAQ</a>
390                                                                                <a
391                            href="/contact"
392                            class="font-helvetica-now-display font-medium text-lg leading-[1.4] text-dark-850 no-underline"
393                            @click="mobileMenuOpen = false"
394                        >Contact</a>
395                                    
396                                    <nav class="flex items-center gap-2" aria-label="Langue">
397                                                                                <a
398                                href="https://animou-app.com"
399                                class="font-helvetica-now-display font-medium text-sm leading-[1.4] no-underline transition-colors text-dark-850"
400                                hreflang="fr"
401                                 aria-current="true"                             >FR</a>
402                                                            <span class="text-dark-850/20 text-sm select-none" aria-hidden="true">|</span>
403                                                                                                            <a
404                                href="https://animou-app.com/en"
405                                class="font-helvetica-now-display font-medium text-sm leading-[1.4] no-underline transition-colors text-dark-850/40 hover:text-dark-850/70"
406                                hreflang="en"
407                                                            >EN</a>
408                                                                        </nav>
409                
410                                <a
411                    href="https://animou.app/telechargement"
412                     target="_blank" rel="noopener noreferrer"                     data-track="download-cta"
413                    class="flex shrink-0 items-center justify-center gap-1.5 w-full h-[48px] rounded-btn bg-dark-850 text-white-0 font-helvetica-now-display font-medium text-base no-underline"
414                    @click="mobileMenuOpen = false"
415                >
416                    <span>Télécharger</span>
417                    <svg class="size-[18px] rotate-45" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
418                        <path d="M9 3.75V14.25M9 3.75L4.5 8.25M9 3.75L13.5 8.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
419                    </svg>
420                </a>
421                            </div>
422
423            
424            <div class="shrink-0 bg-purple-15 py-5 flex flex-col items-center gap-3">
425                <div class="flex items-center gap-4">
426                        <a
427                href="https://x.com/animouapp"
428                target="_blank"
429                rel="noopener noreferrer"
430                class="relative flex items-center justify-center size-12 rounded-full no-underline transition-colors
431                    bg-white-0 hover:bg-white-0/80"
432                aria-label="X"
433            >
434                <span class="sr-only">X</span>
435                                <svg class="size-[22px] relative text-purple-500" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
436            <path d="M12.8537 9.52267L20.1137 1H18.4037L12.0937 8.39467L7.01367 1H1.13367L8.74367 12.1187L1.13367 21H2.84367L9.50367 13.2467L14.8637 21H20.7437L12.8537 9.52267ZM10.3737 12.2187L9.60367 11.1007L3.45367 2.32067H6.18367L11.0537 9.46667L11.8237 10.5847L18.4037 19.7387H15.6737L10.3737 12.2187Z" fill="currentColor"/>
437        </svg>
438                    </a>
439                                <a
440                href="https://instagram.com/animouapp"
441                target="_blank"
442                rel="noopener noreferrer"
443                class="relative flex items-center justify-center size-12 rounded-full no-underline transition-colors
444                    bg-white-0 hover:bg-white-0/80"
445                aria-label="Instagram"
446            >
447                <span class="sr-only">Instagram</span>
448                                <svg class="size-[22px] relative text-purple-500" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
449            <path d="M11 1.9C13.84 1.9 14.185 1.912 15.312 1.963C16.356 2.011 16.92 2.183 17.295 2.328C17.7896 2.51427 18.2371 2.80282 18.607 3.173C18.9772 3.54293 19.2657 3.99044 19.452 4.485C19.597 4.86 19.769 5.424 19.817 6.468C19.868 7.596 19.88 7.94 19.88 10.78C19.88 13.62 19.868 13.964 19.817 15.092C19.769 16.136 19.597 16.7 19.452 17.075C19.2657 17.5696 18.9772 18.0171 18.607 18.387C18.2371 18.7572 17.7896 19.0457 17.295 19.232C16.92 19.377 16.356 19.549 15.312 19.597C14.185 19.648 13.84 19.66 11 19.66C8.16 19.66 7.815 19.648 6.688 19.597C5.644 19.549 5.08 19.377 4.705 19.232C4.21044 19.0457 3.76293 18.7572 3.393 18.387C3.02282 18.0171 2.73427 17.5696 2.548 17.075C2.403 16.7 2.231 16.136 2.183 15.092C2.132 13.964 2.12 13.62 2.12 10.78C2.12 7.94 2.132 7.596 2.183 6.468C2.231 5.424 2.403 4.86 2.548 4.485C2.73427 3.99044 3.02282 3.54293 3.393 3.173C3.76293 2.80282 4.21044 2.51427 4.705 2.328C5.08 2.183 5.644 2.011 6.688 1.963C7.815 1.912 8.16 1.9 11 1.9ZM11 0C8.115 0 7.744 0.013 6.604 0.064C5.464 0.115 4.68 0.295 3.996 0.557C3.28283 0.826726 2.63432 1.24581 2.095 1.786C1.55481 2.32532 1.13573 2.97383 0.866 3.687C0.604 4.371 0.424 5.155 0.373 6.294C0.322 7.436 0.309 7.806 0.309 10.691C0.309 13.576 0.322 13.946 0.373 15.087C0.424 16.226 0.604 17.011 0.866 17.694C1.13573 18.4072 1.55481 19.0557 2.095 19.595C2.63432 20.1352 3.28283 20.5543 3.996 20.824C4.68 21.086 5.464 21.266 6.604 21.317C7.744 21.368 8.115 21.381 11 21.381C13.885 21.381 14.256 21.368 15.396 21.317C16.536 21.266 17.32 21.086 18.004 20.824C18.7172 20.5543 19.3657 20.1352 19.905 19.595C20.4452 19.0557 20.8643 18.4072 21.134 17.694C21.396 17.011 21.576 16.226 21.627 15.087C21.678 13.946 21.691 13.576 21.691 10.691C21.691 7.806 21.678 7.436 21.627 6.294C21.576 5.155 21.396 4.371 21.134 3.687C20.8643 2.97383 20.4452 2.32532 19.905 1.786C19.3657 1.24581 18.7172 0.826726 18.004 0.557C17.32 0.295 16.536 0.115 15.396 0.064C14.256 0.013 13.885 0 11 0Z" fill="currentColor"/>
450            <path d="M11 5.2C9.89469 5.2 8.81363 5.52779 7.89254 6.14315C6.97145 6.7585 6.25108 7.63443 5.82074 8.6584C5.3904 9.68237 5.26913 10.8063 5.47209 11.8922C5.67506 12.978 
4506.19303 13.9752 6.96118 14.7574C7.72933 15.5396 8.71614 16.0757 9.79793 16.2988C10.8797 16.5219 12.0054 16.4217 13.0374 16.0109C14.0694 15.6001 14.9595 14.8971 15.5931 13.9883C16.2268 13.0796 16.576 12.0053 16.6 10.9C16.6199 10.1674 16.4934 9.43852 16.2277 8.75493C15.9621 8.07133 15.5626 7.44653 15.053 6.91667C14.5435 6.38682 13.9343 5.96284 13.2612 5.67035C12.5881 5.37786 11.8643 5.22276 11.132 5.214L11 5.2ZM11 14.581C10.2326 14.581 9.48236 14.3534 8.84348 13.9267C8.20459 13.5 7.70564 12.8934 7.40935 12.1851C7.11307 11.4768 7.0328 10.6987 7.17848 9.9473C7.32416 9.19594 7.68939 8.5049 8.22824 7.96218C8.76709 7.41946 9.4554 7.0493 10.2055 6.89837C10.9557 6.74744 11.7343 6.82235 12.4447 7.11373C13.155 7.40511 13.7652 7.89988 14.1966 8.53581C14.6281 9.17173 14.861 9.92042 14.866 10.688C14.8693 11.1982 14.7711 11.704 14.577 12.1746C14.3829 12.6451 14.0969 13.0713 13.7357 13.4283C13.3744 13.7854 12.945 14.0662 12.4721 14.2547C11.9993 14.4432 11.4924 14.5354 10.982 14.526L11 14.581Z" fill="currentColor"/>
451            <path d="M16.868 6.282C17.5101 6.282 18.031 5.76113 18.031 5.119C18.031 4.47688 17.5101 3.956 16.868 3.956C16.2259 3.956 15.705 4.47688 15.705 5.119C15.705 5.76113 16.2259 6.282 16.868 6.282Z" fill="currentColor"/>
452        </svg>
453                    </a>
454                                <a
455                href="https://facebook.com/animouapp"
456                target="_blank"
457                rel="noopener noreferrer"
458                class="relative flex items-center justify-center size-12 rounded-full no-underline transition-colors
459                    bg-white-0 hover:bg-white-0/80"
460                aria-label="Facebook"
461            >
462                <span class="sr-only">Facebook</span>
463                                <svg class="size-[22px] relative text-purple-500" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
464            <path d="M22 11.0611C22 4.95106 17.08 0.00305557 11.004 5.55729e-07C4.922 -0.00305446 -0.00400066 4.93906 6.65188e-07 11.0551C0.00400079 16.5271 3.94 21.0691 9.154 21.9811V14.2591H6.4V11.0611H9.154V8.63006C9.154 5.89206 10.79 4.38406 13.272 4.38406C14.462 4.38406 15.706 4.59606 15.706 4.59606V7.28606H14.336C13.002 7.28606 12.588 8.11006 12.588 8.95606V11.0611H15.58L15.114 14.2591H12.588V21.9811C17.802 21.0691 21.996 16.5251 22 11.0611Z" fill="currentColor"/>
465        </svg>
466                    </a>
467                                <a
468                href="https://www.tiktok.com/@animouapp"
469                target="_blank"
470                rel="noopener noreferrer"
471                class="relative flex items-center justify-center size-12 rounded-full no-underline transition-colors
472                    bg-white-0 hover:bg-white-0/80"
473                aria-label="TikTok"
474            >
475                <span class="sr-only">TikTok</span>
476                                <svg class="size-[22px] relative text-purple-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
477            <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.27 6.27 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.34-6.34V8.75a8.18 8.18 0 0 0 4.77 1.52V6.84a4.84 4.84 0 0 1-1.01-.15Z" fill="currentColor"/>
478        </svg>
479                    </a>
480                                <a
481                href="https://www.linkedin.com/company/animou"
482                target="_blank"
483                rel="noopener noreferrer"
484                class="relative flex items-center justify-center size-12 rounded-full no-underline transition-colors
485                    bg-white-0 hover:bg-white-0/80"
486                aria-label="LinkedIn"
487            >
488                <span class="sr-only">LinkedIn</span>
489                                <svg class="size-[22px] relative text-purple-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
490            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 1 1 0-4.124 2.062 2.062 0 0 1 0 4.124zM6.87 20.452H3.804V9H6.87v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" fill="currentColor"/>
491        </svg>
492                    </a>
493            </div>
494                <div class="flex items-center gap-3 font-helvetica-now-display text-sm leading-[1.4] text-dark-700">
495                                                                    <sp
495an data-obf-email="uryyb|navzbh-ncc|pbz">Email protégé — activez JavaScript</span>
496                                    </div>
497            </div>
498
499        </div>
500    </div>
501</div>
502
503    
504    
505    <main class="flex-1">
506        <!--[if BLOCK]><![endif]-->    
507    <div wire:snapshot="{&quot;data&quot;:{&quot;page&quot;:[null,{&quot;class&quot;:&quot;PercyCms\\Cms\\Models\\CmsPage&quot;,&quot;key&quot;:1,&quot;s&quot;:&quot;mdl&quot;}],&quot;renderedContent&quot;:&quot;&lt;section\n     id=\&quot;top\&quot;     class=\&quot;page-section page-section--hero\&quot;\n             aria-label=\&quot;Pr\u00e9sentation\&quot;\n    &gt;\n            &lt;script data-hero-motion-gate&gt;\n    (() =&gt; {\n        const hero = document.currentScript.closest(&#039;.page-section--hero&#039;);\n\n        if (! hero || window.matchMedia(&#039;(prefers-reduced-motion: reduce)&#039;).matches) {\n            return;\n        }\n\n        hero.classList.add(&#039;hero-media-loading&#039;);\n\n        const reveal = () =&gt; window.requestAnimationFrame(() =&gt; {\n            hero.classList.remove(&#039;hero-media-loading&#039;);\n        });\n\n        const init = () =&gt; {\n            const media = hero.querySelector(&#039;.hero-media-reveal img&#039;);\n\n            if (! media) {\n                reveal();\n\n                return;\n            }\n\n            const waitForLoad = () =&gt; new Promise((resolve) =&gt; {\n                if (media.complete) {\n                    resolve();\n\n                    return;\n                }\n\n                media.addEventListener(&#039;load&#039;, resolve, { once: true });\n                media.addEventListener(&#039;error&#039;, resolve, { once: true });\n            });\n\n            const ready = typeof media.decode === &#039;function&#039;\n                ? media.decode().catch(waitForLoad)\n                : waitForLoad();\n\n            ready.finally(reveal);\n        };\n\n        if (document.readyState === &#039;loading&#039;) {\n            document.addEventListener(&#039;DOMContentLoaded&#039;, init, { once: true });\n        } else {\n            init();\n        }\n    })();\n&lt;\/script&gt;\n\n    \n            &lt;div class=\&quot;absolute inset-0 pointer-events-none\&quot; aria-hidden=\&quot;true\&quot;&gt;\n            &lt;picture&gt;\n    \n                    &lt;source\n            media=\&quot;(min-width: 100rem)\&quot;\n            type=\&quot;image\/avif\&quot;\n            srcset=\&quot;\/img\/1\/background.webp?w=1920&amp;amp;fm=avif&amp;amp;q=75&amp;amp;fit=cover&amp;amp;s=a82dbaff9e075c6f0ffeddbe0734070c\&quot;\n            width=\&quot;1920\&quot;\n                    \/&gt;\n                    &lt;source\n            media=\&quot;(min-width: 75rem)\&quot;\n            type=\&quot;image\/avif\&quot;\n            srcset=\&quot;\/img\/1\/background.webp?w=1600&amp;amp;fm=avif&amp;amp;q=75&amp;amp;fit=cover&amp;amp;s=b7272860cfd695cccc14fc9442508467\&quot;\n            width=\&quot;1600\&quot;\n                    \/&gt;\n                    &lt;source\n            media=\&quot;(min-width: 48rem)\&quot;\n            type=\&quot;image\/avif\&quot;\n            srcset=\&quot;\/img\/1\/background.webp?w=1200&amp;amp;fm=avif&amp;amp;q=75&amp;amp;fit=cover&amp;amp;s=796377685506be5f0d1adc5618df1d2f\&quot;\n            width=\&quot;1200\&quot;\n                    \/&gt;\n    \n    \n                    &lt;source\n            media=\&quot;(min-width: 100rem)\&quot;\n            type=\&quot;image\/webp\&quot;\n            srcset=\&quot;\/img\/1\/background.webp?w=1920&amp;amp;q=75&amp;amp;fit=cover&amp;amp;s=fa473370349902c25ea2d8dd1780921d\&quot;\n            width=\&quot;1920\&quot;\n                    \/&gt;\n                    &lt;source\n            media=\&quot;(min-width: 75rem)\&quot;\n            type=\&quot;image\/webp\&quot;\n            srcset=\&quot;\/img\/1\/background.webp?w=1600&amp;amp;q=75&amp;amp;fit=cover&amp;amp;s=62c6d959f5071dfc11a5e71523a2436e\&quot;\n            width=\&quot;1600\&quot;\n                    \/&gt;\n                    &lt;source\n            media=\&quot;(min-width: 48rem)\&quot;\n            type=\&quot;image\/webp\&quot;\n            srcset=\&quot;\/img\/1\/background.webp?w=1200&amp;amp;q=75&amp;amp;fit=cover&amp;amp;s=652bcc3c37898c8fdc5bf90ce9a17697\&quot;\n            width=\&quot;1200\&quot;\n                    \/&gt;\n    \n    \n        &lt;img\n        src=\&quot;\/img\/1\/background.webp?w=768&amp;amp;q=75&amp;amp;fit=cover&amp;amp;s=5423be49da8fb3a9776a596b77907bff\&quot;\n        width=\&quot;768\&quot;\n                alt=\&quot;\&quot;\n        loading=\&quot;eager\&quot;\n        decoding=\&quot;async\&quot;\n        fetchpriority=\&quot;high\&quot; class=\&quot;absolute inset-0 w-full h-full object-cover\&quot;\n    \/&gt;\n&lt;\/picture&gt;\n        &lt;\/div&gt;\n    \n    \n    &lt;div\n            class=\&quot;absolute inset-0 z-[5] pointer-events-none opacity-[0.68]\&quot;\n            style=\&quot;background: linear-gradient(to bottom, rgba(79,98,191,0.75) 0%, rgba(79,98,191,0
507) 50%, rgba(79,98,191,0.70) 100%);\&quot;\n            aria-hidden=\&quot;true\&quot;\n    &gt;&lt;\/div&gt;\n\n    \n    &lt;div class=\&quot;page-wrapper relative\&quot;&gt;\n        \n        &lt;div class=\&quot;flex flex-col lg:flex-row lg:items-start lg:justify-between pt-[80px] lg:pt-[91px]\&quot;&gt;\n\n            \n            &lt;div class=\&quot;flex flex-col items-start w-full lg:max-w-[544px] shrink-0 lg:pt-[71px] relative z-10\&quot;&gt;\n\n                                &lt;h1 class=\&quot;sr-only\&quot;&gt;Animou : l&amp;#039;app communautaire pour retrouver les animaux perdus&lt;\/h1&gt;\n\n                \n                &lt;p\n                        class=\&quot;\n                        text-heading-hero text-gradient-white\n                    \&quot;\n                &gt;\n                    &lt;span class=\&quot;block\&quot;&gt;Vous n&amp;#039;\u00eates&lt;\/span&gt;\n                    &lt;span class=\&quot;block\&quot;&gt;pas seul&lt;\/span&gt;\n                &lt;\/p&gt;\n\n                \n                &lt;p data-reveal class=\&quot;\n                    mt-1\n                    text-subtitle\n                    text-white-0\/90\n                    max-w-[425px]\n                \&quot;&gt;Animou est disponible gratuitement. La premi\u00e8re application qui mobilise instantan\u00e9ment votre quartier lorsqu&amp;#039;un animal dispara\u00eet.&lt;\/p&gt;\n\n                                    &lt;div data-reveal class=\&quot;mt-[48px] lg:mt-[62px] flex flex-wrap gap-2 items-start\&quot;&gt;\n                        &lt;a\n                            href=\&quot;https:\/\/apps.apple.com\/fr\/app\/animou-animaux-perdus\/id6779167347\&quot;\n                            target=\&quot;_blank\&quot;\n                            rel=\&quot;noopener noreferrer\&quot;\n                            data-track=\&quot;appstore\&quot;\n                            class=\&quot;bg-[#130F43] border border-white-0\/20 rounded-[10px] h-[66px] flex items-center px-[21px] gap-2 hover:opacity-90 motion-safe:transition-opacity\&quot;\n                        &gt;\n                            &lt;img src=\&quot;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/download\/app-store-icon.svg\&quot; alt=\&quot;\&quot; aria-hidden=\&quot;true\&quot; class=\&quot;size-8 shrink-0\&quot;&gt;\n\n                            &lt;span class=\&quot;flex flex-col text-white-0 leading-[1.4] text-left\&quot;&gt;\n                                &lt;span class=\&quot;font-helvetica-now-display font-medium text-[14px]\&quot;&gt;Disponible sur&lt;\/span&gt;\n                                &lt;span class=\&quot;font-helvetica-now-display font-medium text-[18px]\&quot;&gt;App Store&lt;\/span&gt;\n                            &lt;\/span&gt;\n                        &lt;\/a&gt;\n\n                        &lt;a\n                            href=\&quot;https:\/\/play.google.com\/store\/apps\/details?id=com.animou.app\&quot;\n                            target=\&quot;_blank\&quot;\n                            rel=\&quot;noopener noreferrer\&quot;\n                            data-track=\&quot;playstore\&quot;\n                            class=\&quot;bg-[#130F43] border border-white-0\/20 rounded-[10px] h-[66px] flex items-center px-[21px] gap-2 hover:opacity-90 motion-safe:transition-opacity\&quot;\n                        &gt;\n                            &lt;img src=\&quot;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/download\/google-play-icon.svg\&quot; alt=\&quot;\&quot; aria-hidden=\&quot;true\&quot; class=\&quot;size-8 shrink-0\&quot;&gt;\n\n                            &lt;span class=\&quot;flex flex-col text-white-0 leading-[1.4] text-left\&quot;&gt;\n                                &lt;span class=\&quot;font-helvetica-now-display font-medium text-[14px]\&quot;&gt;Disponible sur&lt;\/span&gt;\n                                &lt;span class=\&quot;font-helvetica-now-display font-medium text-[18px]\&quot;&gt;Google Play&lt;\/span&gt;\n                            &lt;\/span&gt;\n                        &lt;\/a&gt;\n                    &lt;\/div&gt;\n                            &lt;\/div&gt;\n\n            \n            \n            &lt;div class=\&quot;relative mt-10 lg:mt-0 lg:ml-[var(--grid-gutter)] flex-1 flex justify-center lg:justify-end\&quot;&gt;\n                \n                &lt;div class=\&quot;relative w-full max-w-[586px] @container\&quot;&gt;\n\n                    \n                                            &lt;div class=\&quot;hero-media-reveal hero-media-reveal--figure absolute w-full top-0 left-0 right-[-15%] bottom-[6%] overflow-hidden z-[5]\&quot;&gt;\n                        &lt;img\n        src=\&quot;\/img\/2\/main-figure.png?q=75&amp;amp;fm=webp&amp;amp;fit=max&amp;amp;w=560&amp;amp;h=843&amp;amp;s=e620783c482a54147bab5b0f9da9bd80\&quot;\n         srcset=\&quot;\/img\/2\/main-figure.png?q=75&amp;amp;fm=webp&amp;amp;fit=max&amp;amp;w=420&amp;amp;h=633&amp;amp;s=66a54b46cf6ccd616d3b61e085140da2 420w, \/img\/2\/main-figure.png?q=75&amp;amp;fm=webp&amp;amp;fit=max&amp;amp;w=560&amp;amp;h=843&amp;amp;s=e620783c482a54147bab5b0f9da9bd80 560w, \/img\/2\/main-figure.png?q=75&amp;amp;fm=webp&amp;amp;fit=max&amp;amp;w=720&amp;amp;h=1084&amp;amp;s=32990c521cbc58702889759116d0e6f8 720w, \/img\/2\/main-figure.png?q=75&amp;amp;fm=webp&amp;amp;fit=max&amp;amp;w=960&amp;amp;h=1446&amp;amp;s=f49b8666f87143655ee971d982bc145f 960w\&quot;          sizes=\&quot;(min-width: 1024px) 674px, calc(100vw - 32px)\&quot;          width=\&quot;650\&quot;          height=\&quot;979\&quot;         alt=\&quot;Femme tenant un chien\&quot;\n        loading=\&quot;eager\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;absolute inset-0 size-full object-cover object-top\&quot; fetchpriority=\&quot;high\&quot;\n    \/&gt;\n                        &lt;\/div&gt;\n                    \n                    \n                    &lt;div class=\&quot;relative mx-[4%] mt-[4.5%] mb-[6%] rounded-card z-10\&quot;&gt;\n\n                        \n                        &lt;span class=\&quot;
507gradient-border-frame rounded-card\&quot; style=\&quot;--frame-thickness: 6px\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n\n                        \n                        &lt;div class=\&quot;min-h-[67.23cqw]\&quot;&gt;&lt;\/div&gt;\n\n                        \n                        &lt;div class=\&quot;relative z-10 flex flex-col gap-[2.73cqw] px-[3.5%] pb-[3.5%]\&quot;&gt;\n                            \n                            &lt;div class=\&quot;flex flex-wrap gap-[2.73cqw]\&quot;&gt;\n                                                                    &lt;div\n                                        class=\&quot;\n                                            hero-media-reveal hero-media-reveal--badge\n                                            relative flex items-center justify-center gap-1.5\n                                            h-[max(6.48cqw,2rem)] px-[max(3.4cqw,0.75rem)]\n                                            rounded-pill\n                                            backdrop-blur-[var(--blur-glass-for-tab)]\n                                            bg-white-0\/15\n                                        \&quot;\n                                            style=\&quot;--hero-reveal-delay: 380ms; box-shadow: var(--shadow-badge-glass);\&quot;\n                                    &gt;\n                                        &lt;span class=\&quot;gradient-border-frame rounded-pill\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n                                                                                    &lt;span\n            role=\&quot;presentation\&quot;\n            aria-hidden=\&quot;true\&quot;\n            style=\&quot;display:inline-block;background-image:url(&#039;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/hero\/tag-heart.svg&#039;);background-repeat:no-repeat;background-position:center;background-size:contain;\&quot;\n            class=\&quot;w-[max(3.4cqw,0.875rem)] h-[max(3.4cqw,0.875rem)] shrink-0\&quot;\n        &gt;&lt;\/span&gt;\n                                                                                    &lt;span class=\&quot;text-[max(2.38cqw,0.75rem)] font-medium text-white-0 whitespace-nowrap leading-none\&quot;&gt;100% Gratuit&lt;\/span&gt;\n                                    &lt;\/div&gt;\n                                                                    &lt;div\n                                        class=\&quot;\n                                            hero-media-reveal hero-media-reveal--badge\n                                            relative flex items-center justify-center gap-1.5\n                                            h-[max(6.48cqw,2rem)] px-[max(3.4cqw,0.75rem)]\n                                            rounded-pill\n                                            backdrop-blur-[var(--blur-glass-for-tab)]\n                                            bg-white-0\/15\n                                        \&quot;\n                                            style=\&quot;--hero-reveal-delay: 470ms; box-shadow: var(--shadow-badge-glass);\&quot;\n                                    &gt;\n                                        &lt;span class=\&quot;gradient-border-frame rounded-pill\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n                                                                                    &lt;span\n            role=\&quot;presentation\&quot;\n            aria-hidden=\&quot;true\&quot;\n            style=\&quot;display:inline-block;background-image:url(&#039;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/hero\/tag-lock.svg&#039;);background-repeat:no-repeat;background-position:center;background-size:contain;\&quot;\n            class=\&quot;w-[max(3.4cqw,0.875rem)] h-[max(3.4cqw,0.875rem)] shrink-0\&quot;\n        &gt;&lt;\/span&gt;\n                                                                                    &lt;span class=\&quot;text-[max(2.38cqw,0.75rem)] font-medium text-white-0 whitespace-nowrap leading-none\&quot;&gt;Respect de la vie priv\u00e9e&lt;\/span&gt;\n                                    &lt;\/div&gt;\n                                                                    &lt;div\n                                        class=\&quot;\n                                            hero-media-reveal hero-media-reveal--badge\n                                            relative flex items-center justify-center gap-1.5\n                                            h-[max(6.48cqw,2rem)] px-[max(3.4cqw,0.75rem)]\n                                            rounded-pill\n                                            backdrop-blur-[var(--blur-glass-for-tab)]\n                                            bg-white-0\/15\n                                        \&quot;\n                                            style=\&quot;--hero-reveal-delay: 560ms; box-shadow: var(--shadow-badge-glass);\&quot;\n                                    &gt;\n                                        &lt;span class=\&quot;
507gradient-border-frame rounded-pill\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n                                                                                    &lt;span\n            role=\&quot;presentation\&quot;\n            aria-hidden=\&quot;true\&quot;\n            style=\&quot;display:inline-block;background-image:url(&#039;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/hero\/tag-community.svg&#039;);background-repeat:no-repeat;background-position:center;background-size:contain;\&quot;\n            class=\&quot;w-[max(3.4cqw,0.875rem)] h-[max(3.4cqw,0.875rem)] shrink-0\&quot;\n        &gt;&lt;\/span&gt;\n                                                                                    &lt;span class=\&quot;text-[max(2.38cqw,0.75rem)] font-medium text-white-0 whitespace-nowrap leading-none\&quot;&gt;Port\u00e9 par la communaut\u00e9&lt;\/span&gt;\n                                    &lt;\/div&gt;\n                                                            &lt;\/div&gt;\n\n                            \n                            \n                            &lt;div class=\&quot;hero-media-reveal hero-media-reveal--map relative h-[37.54cqw] rounded-card\&quot;&gt;\n                                &lt;div class=\&quot;absolute inset-0 backdrop-blur-[13.875px] bg-white-0\/30 rounded-card\&quot;&gt;&lt;\/div&gt;\n                                                                    &lt;div class=\&quot;absolute inset-3 rounded-pill overflow-hidden\&quot;&gt;\n                                        &lt;img\n        src=\&quot;\/img\/4\/map-view.webp?q=80&amp;amp;fit=cover&amp;amp;w=480&amp;amp;h=211&amp;amp;s=2dbdd404cb06635a06703c8c69c520bf\&quot;\n         srcset=\&quot;\/img\/4\/map-view.webp?q=80&amp;amp;fit=cover&amp;amp;w=320&amp;amp;h=141&amp;amp;s=5eeb3e1dfed830c1e6066745af6e6189 320w, \/img\/4\/map-view.webp?q=80&amp;amp;fit=cover&amp;amp;w=480&amp;amp;h=211&amp;amp;s=2dbdd404cb06635a06703c8c69c520bf 480w, \/img\/4\/map-view.webp?q=80&amp;amp;fit=cover&amp;amp;w=640&amp;amp;h=282&amp;amp;s=ae37e1401960ab75c3496d661d4a0266 640w, \/img\/4\/map-view.webp?q=80&amp;amp;fit=cover&amp;amp;w=720&amp;amp;h=317&amp;amp;s=066e63742a323e0117a23b8a130486d8 720w\&quot;          sizes=\&quot;(min-width: 1024px) 470px, calc(100vw - 110px)\&quot;          width=\&quot;500\&quot;          height=\&quot;220\&quot;         alt=\&quot;Vue carte du quartier Animou\&quot;\n        loading=\&quot;eager\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;absolute inset-0 size-full object-cover\&quot;\n    \/&gt;\n                                        &lt;div class=\&quot;hero-map-marker-position absolute left-1\/2 top-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-[11.09cqw] transition-transform hover:scale-110\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                                            &lt;div class=\&quot;hero-media-reveal hero-media-reveal--marker relative w-full\&quot;&gt;\n                                                                                                    \n                                                    &lt;span\n            role=\&quot;presentation\&quot;\n            aria-hidden=\&quot;true\&quot;\n            style=\&quot;display:inline-block;background-image:url(&#039;https:\/\/animou-app.com\/storage\/5\/pin.svg&#039;);background-repeat:no-repeat;background-position:center;background-size:contain;\&quot;\n            class=\&quot;w-full aspect-[65\/75]\&quot;\n        &gt;&lt;\/span&gt;\n                                                                                                                                                        \n                                                    &lt;img\n        src=\&quot;\/img\/3\/dog-avatar.png?q=80&amp;amp;fm=webp&amp;amp;fit=cover&amp;amp;w=64&amp;amp;h=64&amp;amp;s=77104d7f7bf13c705b1bf565e657f493\&quot;\n         srcset=\&quot;\/img\/3\/dog-avatar.png?q=80&amp;amp;fm=webp&amp;amp;fit=cover&amp;amp;w=128&amp;amp;h=128&amp;amp;s=088fb874ad0e12b54a33759941457387 2x\&quot;                  width=\&quot;64\&quot;          height=\&quot;64\&quot;         alt=\&quot;\&quot;\n        loading=\&quot;eager\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;absolute top-[9.46%] left-[49.46%] -translate-x-1\/2 w-[73.85%] aspect-square rounded-full object-cover\&quot;\n    \/&gt;\n                                                                                            &lt;\/div&gt;\n                                        &lt;\/div&gt;\n                                    &lt;\/div&gt;\n                                                                &lt;div class=\&quot;absolute left-3 right-3 top-3 backdrop-blur-[7.5px] bg-white-0\/10 rounded-t-pill shadow-[var(--shadow-map-tab)] z-10\&quot;&gt;\n                                    &lt;div class=\&quot;flex items-center px-[2.73cqw]\&quot;&gt;\n                                        &lt;div class=\&quot;flex-1 flex flex-col items-center gap-[1.3cqw] h-[6.82cqw] justify-end pt-[1.3cqw]\&quot;&gt;\n                                            &lt;span class=\&quot;font-helvetica-now-display font-medium text-[2.38cqw] leading-[1.4] text-purple-500 text-center w-full\&quot;&gt;Vue carte&lt;\/span&gt;\n                                            &lt;div class=\&quot;w-full h-[2px] bg-purple-500 rounded-[10px]\&quot;&gt;&lt;\/div&gt;\n                                        &lt;\/div&gt;\n                                        &lt;div class=\&quot;flex-1 flex flex-col items-center gap-[1.3cqw] h-[6.82cqw] justify-end pt-[1.3cqw]\&quot;&gt;\n                                            &lt;span class=\&quot;font-helvetica-now-display font-normal text-[2.38cqw] leading-[1.4] text-gray-500 text-center w-full\&quot;&gt;Vue liste&lt;\/span&gt;\n                                            &lt;div class=\&quot;w-full h-[2px] bg-purple-500 rounded-[10px] opacity-0\&quot;&gt;&lt;\/div&gt;\n                                        &lt;\/div&gt;\n                                    &lt;\/div&gt;\n                                &lt;\/div&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    \n    &lt;div\n            class=\&quot;absolute inset-x-0 bottom-0 h-[80px] lg:h-[140px] z-[15] pointer-events-none backdrop-blur-[100px]\&quot;\n            style=\&quot;\n            background: linear-gradient(to bottom, rgba(104,129,207,0), rgb(104,129,207));\n            -webkit-mask-image: linear-gradient(to bottom, transparent, black);\n            mask-image: linear-gradient(to bottom, transparent, black);\n        \&quot;\n            aria-hidden=\&quot;true\&quot;\n    &gt;&lt;\/div&gt;\n    \n\n&lt;\/section&gt;\n&lt;section\n     id=\&quot;app-overview\&quot;     class=\&quot;page-section\&quot;\n         data-section-label=\&quot;Aper\u00e7u de l&amp;#039;application\&quot;      aria-labelledby=\&quot;heading-overview\&quot;\n    &gt;&lt;div data-top-gradient class=\&quot;section-top-gradient\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/div&gt;\n            &lt;div class=\&quot;page-wrapper\&quot;&gt;\n        &lt;div class=\&quot;relative z-10 flex flex-col gap-4 lg:flex-row lg:justify-between lg:items-start\&quot; data-reveal&gt;\n            &lt;h2\n                    id=\&quot;heading-overview\&quot;\n                    class=\&quot;text-heading-section text-dark-850 lg:max-w-[480px]\&quot;\n            &gt;Une application pour agir ensemble&lt;\/h2&gt;\n            &lt;p class=\&quot;text-body text-dark-700 lg:max-w-[315px] lg:pt-2\&quot;&gt;\n                Parce qu&amp;#039;un animal retrouv\u00e9, c&amp;#039;est une famille soulag\u00e9e. Animou connecte propri\u00e9taires, voisins et refuges autour d&amp;#039;une m\u00eame urgence.\n            &lt;\/p&gt;\n        &lt;\/div&gt;\n\n                &lt;div class=\&quot;relative z-10 mt-10 lg:mt-16 flex flex-col lg:flex-row gap-[var(--grid-gutter)]\&quot;&gt;\n\n            &lt;div class=\&quot;flex flex-col gap-4 lg:w-[calc(50%-var(--grid-gutter)\/2)] order-2 lg:order-1\&quot;&gt;\n\n                &lt;div\n                    x-data=\&quot;physicsBox()\&quot;\n                    x-init=\&quot;active = false\&quot;\n                    x-intersect.once.margin.-10%=\&quot;startPhysics()\&quot;\n                    class=\&quot;relative bg-blue-50 rounded-[26px] h-[450px] lg:h-[366px] overflow-hidden group\&quot;\n                    id=\&quot;physics-container\&quot;\n                &gt;\n                    &lt;div class=\&quot;flex items-start justify-between p-5 lg:p-6 relative z-20 pointer-events-none\&quot;&gt;\n                        &lt;div class=\&quot;font-outfit text-[28px] lg:text-[43px] uppercase leading-[1.1]\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                                                                                            &lt;div\n                                    class=\&quot;transition-all duration-700 ease-out\&quot;\n                                    x-cloak\n                                    :class=\&quot;active ? &#039;opacity-100 translate-y-0&#039; : &#039;opacity-0 -translate-y-4&#039;\&quot;\n                                    style=\&quot;transition-delay: 1800ms\&quot;\n                                &gt;\n                                    &lt;span class=\&quot;text-purple-300\&quot;&gt;ON&lt;\/span&gt;\n                                                                            &lt;span class=\&quot;text-white-0\&quot;&gt; VOIT&lt;\/span&gt;\n                                                                    &lt;\/div&gt;\n                                                                                            &lt;div\n                                    class=\&quot;transition-all duration-700 ease-out\&quot;\n                                    x-cloak\n                                    :class=\&quot;active ? &#039;opacity-100 translate-y-0&#039; : &#039;opacity-0 -translate-y-4&#039;\&quot;\n                                    style=\&quot;transition-delay: 2150ms\&quot;\n                                &gt;\n                                    &lt;span class=\&quot;text-purple-300\&quot;&gt;ON&lt;\/span&gt;\n                                                                            &lt;span class=\&quot;text-white-0\&quot;&gt; AGIT&lt;\/span&gt;\n                                                                    &lt;\/div&gt;\n                                                                                            &lt;div\n                                    class=\&quot;transition-all duration-700 ease-out\&quot;\n                                    x-cloak\n                                    :class=\&quot;active ? &#039;opacity-100 translate-y-0&#039; : &#039;opacity-0 -translate-y-4&#039;\&quot;\n                                    style=\&quot;transition-delay: 2500ms\&quot;\n                                &gt;\n                                    &lt;span class=\&quot;text-purple-300\&quot;&gt;ON&lt;\/span&gt;\n                                                                            &lt;span class=\&quot;text-white-0\&quot;&gt; S&amp;#039;ENTRAIDE&lt;\/span&gt;\n                                                                    &lt;\/div&gt;\n                                                    &lt;\/div&gt;\n                        &lt;span\n                            class=\&quot;font-helvetica-now-display font-normal text-base uppercase text-purple-400 shrink-0 transition-all duration-700 ease-out\&quot;\n                            x-cloak\n                            :class=\&quot;active ? &#039;opacity-100 scale-100&#039; : &#039;opacity-0 scale-90&#039;\&quot;\n                            style=\&quot;transition-delay: 3250ms\&quot;\n                        &gt;\n                            ANIMOU\n                        &lt;\/span&gt;\n                    &lt;\/div&gt;\n\n                    &lt;div class=\&quot;absolute inset-0 z-10 overflow-hidden\&quot; x-ref=\&quot;box\&quot;&gt;\n                                                    &lt;div\n                                class=\&quot;physics-item absolute opacity-0\&quot;\n                                x-ref=\&quot;pill0\&quot;\n                                style=\&quot;will-change: transform;\&quot;\n                            &gt;\n                                &lt;div class=\&quot;flex items-center gap-3 pl-1 pr-[26px] py-1 bg-white-0 rounded-card shadow-[var(--shadow-pill-float)]\&quot;&gt;\n    &lt;div class=\&quot;flex items-center justify-center size-12 rounded-full bg-purple-15 shrink-0\&quot;&gt;\n                                    &lt;img src=\&quot;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/overview\/bell-icon.svg\&quot; alt=\&quot;\&quot; aria-hidden=\&quot;true\&quot; class=\&quot;size-8\&quot;&gt;\n                        &lt;\/div&gt;\n    &lt;span class=\&quot;text-body font-medium text-gray-700\&quot;&gt;Suivez les signalements sur la carte&lt;\/span&gt;\n&lt;\/div&gt;\n                            &lt;\/div&gt;\n                                                    &lt;div\n                                class=\&quot;physics-item absolute opacity-0\&quot;\n                                x-ref=\&quot;pill1\&quot;\n                                style=\&quot;will-change: transform;\&quot;\n                            &gt;\n                                &lt;div class=\&quot;flex items-center gap-3 pl-1 pr-[26px] py-1 bg-white-0 rounded-card shadow-[var(--shadow-pill-float)]\&quot;&gt;\n    &lt;div class=\&quot;flex items-center justify-center size-12 rounded-full bg-purple-15 shrink-0\&quot;&gt;\n                                    &lt;img src=\&quot;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/overview\/update-icon.svg\&quot; alt=\&quot;\&quot; aria-hidden=\&quot;true\&quot; class=\&quot;size-6\&quot;&gt;\n                        &lt;\/div&gt;\n    &lt;span class=\&quot;text-body font-medium text-gray-700\&quot;&gt;Alertez voisins, refuges et v\u00e9t\u00e9rinaires&lt;\/span&gt;\n&lt;\/div&gt;\n                            &lt;\/div&gt;\n                                                    &lt;div\n                                class=\&quot;physics-item absolute opacity-0\&quot;\n                                x-ref=\&quot;pill2\&quot;\n                                style=\&quot;will-change: transform;\&quot;\n                            &gt;\n                                &lt;div class=\&quot;flex items-center gap-3 pl-1 pr-[26px] py-1 bg-white-0 rounded-card shadow-[var(--shadow-pill-float)]\&quot;&gt;\n    &lt;div class=\&quot;flex items-center justify-center size-12 rounded-full bg-purple-15 shrink-0\&quot;&gt;\n                                    &lt;svg class=\&quot;size-7\&quot;
507 viewBox=\&quot;0 0 32 32\&quot; fill=\&quot;none\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                    &lt;path d=\&quot;M16 2C10.477 2 6 6.477 6 12c0 7.5 10 18 10 18s10-10.5 10-18c0-5.523-4.477-10-10-10Zm0 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z\&quot; fill=\&quot;var(--fill-0, #413A9F)\&quot;\/&gt;\n                &lt;\/svg&gt;\n                        &lt;\/div&gt;\n    &lt;span class=\&quot;text-body font-medium text-gray-700\&quot;&gt;Recevez des mises \u00e0 jour en temps r\u00e9el&lt;\/span&gt;\n&lt;\/div&gt;\n                            &lt;\/div&gt;\n                                                    &lt;div\n                                class=\&quot;physics-item absolute opacity-0\&quot;\n                                x-ref=\&quot;pill3\&quot;\n                                style=\&quot;will-change: transform;\&quot;\n                            &gt;\n                                &lt;div class=\&quot;flex items-center gap-3 pl-1 pr-[26px] py-1 bg-white-0 rounded-card shadow-[var(--shadow-pill-float)]\&quot;&gt;\n    &lt;div class=\&quot;flex items-center justify-center size-12 rounded-full bg-purple-15 shrink-0\&quot;&gt;\n                                    &lt;img src=\&quot;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/overview\/reach-icon.svg\&quot; alt=\&quot;\&quot; aria-hidden=\&quot;true\&quot; class=\&quot;size-8\&quot;&gt;\n                        &lt;\/div&gt;\n    &lt;span class=\&quot;text-body font-medium text-gray-700\&quot;&gt;Lancez une alerte en quelques secondes&lt;\/span&gt;\n&lt;\/div&gt;\n                            &lt;\/div&gt;\n                        \n                                                                            &lt;div\n                                class=\&quot;physics-paw absolute opacity-0 size-[54px] bg-purple-250 rounded-full flex items-center justify-center\&quot;\n                                x-ref=\&quot;paw0\&quot;\n                                style=\&quot;will-change: transform;\&quot;\n                            &gt;\n                                &lt;svg width=\&quot;32\&quot; height=\&quot;32\&quot;
507 viewBox=\&quot;0 0 32 32\&quot; fill=\&quot;none\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot;&gt;\n                                    &lt;path d=\&quot;M8.72704 22.134C9.01583 25.1946 11.731 27.2505 14.7572 26.7094L19.7557 25.8157C23.1575 25.2074 25.0043 22.045 23.84 18.7856C22.6145 15.3649 18.6958 13.0827 15.1165 13.7226C11.2347 14.4167 8.35829 18.2048 8.72704 22.134Z\&quot; stroke=\&quot;white\&quot; stroke-width=\&quot;1.61022\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;path d=\&quot;M13.3249 11.3508C14.7657 11.0932 15.7249 9.71638 15.4672 8.27558C15.2096 6.83479 13.8328 5.87564 12.392 6.13327C10.9512 6.39089 9.99205 7.76772 10.2497 9.20852C10.5073 10.6493 11.8841 11.6085 13.3249 11.3508Z\&quot; stroke=\&quot;white\&quot; stroke-width=\&quot;1.61022\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;path d=\&quot;M20.6761 11.3287C21.8288 11.1226 22.5961 10.0211 22.39 8.86845C22.1839 7.71582 21.0824 6.9485 19.9298 7.1546C18.7772 7.3607 18.0098 8.46217 18.2159 9.6148C18.422 10.7674 19.5235 11.5348 20.6761 11.3287Z\&quot; stroke=\&quot;white\&quot; stroke-width=\&quot;1.61022\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;path d=\&quot;M25.2832 14.8123C26.1477 14.6578 26.7232 13.8317 26.5686 12.9672C26.4141 12.1027 25.5879 11.5272 24.7235 11.6818C23.859 11.8364 23.2835 12.6625 23.4381 13.5269C23.5927 14.3914 24.4188 14.9669 25.2832 14.8123Z\&quot; stroke=\&quot;white\&quot; stroke-width=\&quot;1.61022\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;path d=\&quot;M7.13904 15.9029C8.29167 15.6968 9.05899 14.5953 8.85289 13.4427C8.64679 12.29 7.54533 11.5227 6.39269 11.7288C5.24006 11.9349 4.47274 13.0364 4.67884 14.189C4.88493 15.3417 5.9864 16.109 7.13904 15.9029Z\&quot; stroke=\&quot;white\&quot; stroke-width=\&quot;1.61022\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;path d=\&quot;M23.9817 21.4765C23.5802 24.7423 19.5583 26.7731 15.7629 26.3065C11.7897 26.9536 8.4531 26.3812 9.27837 19.6688C9.67989 16.403 13.4804 13.5338 17.2758 14.0004C21.0713 14.4671 24.3832 18.2107 23.9817 21.4765Z\&quot; fill=\&quot;white\&quot;\/&gt;\n                                    &lt;circle cx=\&quot;6.74935\&quot; cy=\&quot;13.842\&quot; r=\&quot;1.61022\&quot; transform=\&quot;rotate(7.00913 6.74935 13.842)\&quot; fill=\&quot;white\&quot;\/&gt;\n                                    &lt;circle cx=\&quot;12.8921\&quot; cy=\&quot;8.7567\&quot; r=\&quot;2.25431\&quot; transform=\&quot;rotate(7.00913 12.8921 8.7567)\&quot; fill=\&quot;white\&quot;\/&gt;\n                                    &lt;circle cx=\&quot;20.2827\&quot; cy=\&quot;9.34092\&quot; r=\&quot;2.25431\&quot; transform=\&quot;rotate(7.00913 20.2827 9.34092)\&quot; fill=\&quot;white\&quot;\/&gt;\n                                    &lt;circle cx=\&quot;24.5028\&quot; cy=\&quot;13.2666\&quot; r=\&quot;1.77125\&quot; transform=\&quot;rotate(7.00913 24.5028 13.2666)\&quot; fill=\&quot;white\&quot;\/&gt;\n                                &lt;\/svg&gt;\n                            &lt;\/div&gt;\n                                                    &lt;div\n                                class=\&quot;physics-paw absolute opacity-0 size-[44px] bg-purple-250 rounded-full flex items-center justify-center\&quot;\n                                x-ref=\&quot;paw1\&quot;\n                                style=\&quot;will-change: transform;\&quot;\n                            &gt;\n                                &lt;svg width=\&quot;32\&quot; height=\&quot;32\&quot;
507 viewBox=\&quot;0 0 32 32\&quot; fill=\&quot;none\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot;&gt;\n                                    &lt;path d=\&quot;M8.72704 22.134C9.01583 25.1946 11.731 27.2505 14.7572 26.7094L19.7557 25.8157C23.1575 25.2074 25.0043 22.045 23.84 18.7856C22.6145 15.3649 18.6958 13.0827 15.1165 13.7226C11.2347 14.4167 8.35829 18.2048 8.72704 22.134Z\&quot; stroke=\&quot;white\&quot; stroke-width=\&quot;1.61022\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;path d=\&quot;M13.3249 11.3508C14.7657 11.0932 15.7249 9.71638 15.4672 8.27558C15.2096 6.83479 13.8328 5.87564 12.392 6.13327C10.9512 6.39089 9.99205 7.76772 10.2497 9.20852C10.5073 10.6493 11.8841 11.6085 13.3249 11.3508Z\&quot; stroke=\&quot;white\&quot; stroke-width=\&quot;1.61022\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;path d=\&quot;M20.6761 11.3287C21.8288 11.1226 22.5961 10.0211 22.39 8.86845C22.1839 7.71582 21.0824 6.9485 19.9298 7.1546C18.7772 7.3607 18.0098 8.46217 18.2159 9.6148C18.422 10.7674 19.5235 11.5348 20.6761 11.3287Z\&quot; stroke=\&quot;white\&quot; stroke-width=\&quot;1.61022\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;path d=\&quot;M25.2832 14.8123C26.1477 14.6578 26.7232 13.8317 26.5686 12.9672C26.4141 12.1027 25.5879 11.5272 24.7235 11.6818C23.859 11.8364 23.2835 12.6625 23.4381 13.5269C23.5927 14.3914 24.4188 14.9669 25.2832 14.8123Z\&quot; stroke=\&quot;white\&quot; stroke-width=\&quot;1.61022\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;path d=\&quot;M7.13904 15.9029C8.29167 15.6968 9.05899 14.5953 8.85289 13.4427C8.64679 12.29 7.54533 11.5227 6.39269 11.7288C5.24006 11.9349 4.47274 13.0364 4.67884 14.189C4.88493 15.3417 5.9864 16.109 7.13904 15.9029Z\&quot; stroke=\&quot;white\&quot; stroke-width=\&quot;1.61022\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;path d=\&quot;M23.9817 21.4765C23.5802 24.7423 19.5583 26.7731 15.7629 26.3065C11.7897 26.9536 8.4531 26.3812 9.27837 19.6688C9.67989 16.403 13.4804 13.5338 17.2758 14.0004C21.0713 14.4671 24.3832 18.2107 23.9817 21.4765Z\&quot; fill=\&quot;white\&quot;\/&gt;\n                                    &lt;circle cx=\&quot;6.74935\&quot; cy=\&quot;13.842\&quot; r=\&quot;1.61022\&quot; transform=\&quot;rotate(7.00913 6.74935 13.842)\&quot; fill=\&quot;white\&quot;\/&gt;\n                                    &lt;circle cx=\&quot;12.8921\&quot; cy=\&quot;8.7567\&quot; r=\&quot;2.25431\&quot; transform=\&quot;rotate(7.00913 12.8921 8.7567)\&quot; fill=\&quot;white\&quot;\/&gt;\n                                    &lt;circle cx=\&quot;20.2827\&quot; cy=\&quot;9.34092\&quot; r=\&quot;2.25431\&quot; transform=\&quot;rotate(7.00913 20.2827 9.34092)\&quot; fill=\&quot;white\&quot;\/&gt;\n                                    &lt;circle cx=\&quot;24.5028\&quot; cy=\&quot;13.2666\&quot; r=\&quot;1.77125\&quot; transform=\&quot;rotate(7.00913 24.5028 13.2666)\&quot; fill=\&quot;white\&quot;\/&gt;\n                                &lt;\/svg&gt;\n                            &lt;\/div&gt;\n                                                    &lt;div\n                                class=\&quot;physics-paw absolute opacity-0 size-[38px] bg-purple-250 rounded-full flex items-center justify-center\&quot;\n                                x-ref=\&quot;paw2\&quot;\n                                style=\&quot;will-change: transform;\&quot;\n                            &gt;\n                                &lt;svg width=\&quot;32\&quot; height=\&quot;32\&quot;
507 viewBox=\&quot;0 0 32 32\&quot; fill=\&quot;none\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot;&gt;\n                                    &lt;path d=\&quot;M8.72704 22.134C9.01583 25.1946 11.731 27.2505 14.7572 26.7094L19.7557 25.8157C23.1575 25.2074 25.0043 22.045 23.84 18.7856C22.6145 15.3649 18.6958 13.0827 15.1165 13.7226C11.2347 14.4167 8.35829 18.2048 8.72704 22.134Z\&quot; stroke=\&quot;white\&quot; stroke-width=\&quot;1.61022\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;path d=\&quot;M13.3249 11.3508C14.7657 11.0932 15.7249 9.71638 15.4672 8.27558C15.2096 6.83479 13.8328 5.87564 12.392 6.13327C10.9512 6.39089 9.99205 7.76772 10.2497 9.20852C10.5073 10.6493 11.8841 11.6085 13.3249 11.3508Z\&quot; stroke=\&quot;white\&quot; stroke-width=\&quot;1.61022\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;path d=\&quot;M20.6761 11.3287C21.8288 11.1226 22.5961 10.0211 22.39 8.86845C22.1839 7.71582 21.0824 6.9485 19.9298 7.1546C18.7772 7.3607 18.0098 8.46217 18.2159 9.6148C18.422 10.7674 19.5235 11.5348 20.6761 11.3287Z\&quot; stroke=\&quot;white\&quot; stroke-width=\&quot;1.61022\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;path d=\&quot;M25.2832 14.8123C26.1477 14.6578 26.7232 13.8317 26.5686 12.9672C26.4141 12.1027 25.5879 11.5272 24.7235 11.6818C23.859 11.8364 23.2835 12.6625 23.4381 13.5269C23.5927 14.3914 24.4188 14.9669 25.2832 14.8123Z\&quot; stroke=\&quot;white\&quot; stroke-width=\&quot;1.61022\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;path d=\&quot;M7.13904 15.9029C8.29167 15.6968 9.05899 14.5953 8.85289 13.4427C8.64679 12.29 7.54533 11.5227 6.39269 11.7288C5.24006 11.9349 4.47274 13.0364 4.67884 14.189C4.88493 15.3417 5.9864 16.109 7.13904 15.9029Z\&quot; stroke=\&quot;white\&quot; stroke-width=\&quot;1.61022\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;path d=\&quot;M23.9817 21.4765C23.5802 24.7423 19.5583 26.7731 15.7629 26.3065C11.7897 26.9536 8.4531 26.3812 9.27837 19.6688C9.67989 16.403 13.4804 13.5338 17.2758 14.0004C21.0713 14.4671 24.3832 18.2107 23.9817 21.4765Z\&quot; fill=\&quot;white\&quot;\/&gt;\n                                    &lt;circle cx=\&quot;6.74935\&quot; cy=\&quot;13.842\&quot; r=\&quot;1.61022\&quot; transform=\&quot;rotate(7.00913 6.74935 13.842)\&quot; fill=\&quot;white\&quot;\/&gt;\n                                    &lt;circle cx=\&quot;12.8921\&quot; cy=\&quot;8.7567\&quot; r=\&quot;2.25431\&quot; transform=\&quot;rotate(7.00913 12.8921 8.7567)\&quot; fill=\&quot;white\&quot;\/&gt;\n                                    &lt;circle cx=\&quot;20.2827\&quot; cy=\&quot;9.34092\&quot; r=\&quot;2.25431\&quot; transform=\&quot;rotate(7.00913 20.2827 9.34092)\&quot; fill=\&quot;white\&quot;\/&gt;\n                                    &lt;circle cx=\&quot;24.5028\&quot; cy=\&quot;13.2666\&quot; r=\&quot;1.77125\&quot; transform=\&quot;rotate(7.00913 24.5028 13.2666)\&quot; fill=\&quot;white\&quot;\/&gt;\n                                &lt;\/svg&gt;\n                            &lt;\/div&gt;\n                                            &lt;\/div&gt;\n\n                    &lt;script&gt;\n                        function physicsBox() {\n                            return {\n                                active: false,\n                                engine: null,\n                                runner: null,\n                                bodies: [],\n\n                                async startPhysics() {\n                                    if (this.active) return;\n                                    this.active = true;\n\n                                    \/\/ Show items statically if user prefers reduced motion\n                                    if (window.matchMedia(&#039;(prefers-reduced-motion: reduce)&#039;).matches) {\n                                        this.$refs.box.querySelectorAll(&#039;.physics-item, .physics-paw&#039;).forEach(el =&gt; {\n                                            el.style.opacity = 1;\n                                        });\n                                        return;\n                                    }\n\n                                    \/\/ Lazy-load Matter.js only when section is visible\n                                    if (!window.Matter) {\n                                        await new Promise((resolve, reject) =&gt; {\n                                            const s = document.createElement(&#039;script&#039;);\n                                            s.src = &#039;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/matter-js\/0.19.0\/matter.min.js&#039;;\n                                            s.onload = resolve;\n                                            s.onerror = reject;\n                                            document.head.appendChild(s);\n                                        });\n                                    }\n\n                                    const Engine = Matter.Engine,\n                                          Render = Matter.Render,\n                                          Runner = Matter.Runner,\n                                          Bodies = Matter.Bodies,\n                                          Composite = Matter.Composite;\n\n                                    this.engine = Engine.create();\n                                    const world = this.engine.world;\n\n                                    const container = this.$refs.box;\n                                    const width = container.offsetWidth;\n                                    const height = container.offsetHeight;\n\n                                    \/\/ Boundaries\n                                    const ground = Bodies.rectangle(width\/2, height + 25, width, 50, { isStatic: true });\n                                    const leftWall = Bodies.rectangle(-25, height\/2, 50, height, { isStatic: true });\n                                    const rightWall = Bodies.rectangle(width + 25, height\/2, 50, height, { isStatic: true });\n\n                                    Composite.add(world, [ground, leftWall, rightWall]);\n\n                                    \/\/ Add Pills\n                                    const pills = container.querySelectorAll(&#039;.physics-item&#039;);
507\n                                    pills.forEach((el, i) =&gt; {\n                                        const rect = el.getBoundingClientRect();\n                                        const x = 50 + (Math.random() * (width - 100));\n                                        const y = -100 - (i * 150);\n\n                                        const body = Bodies.rectangle(x, y, rect.width, rect.height, {\n                                            chamfer: { radius: rect.height \/ 2 },\n                                            restitution: 0.5,\n                                            friction: 0.1,\n                                            angle: (Math.random() - 0.5) * 0.5\n                                        });\n\n                                        this.bodies.push({ el, body });\n                                        Composite.add(world, body);\n                                        el.style.opacity = 1;\n                                    });\n\n                                    \/\/ Add Paws\n                                    const paws = container.querySelectorAll(&#039;.physics-paw&#039;);\n                                    paws.forEach((el, i) =&gt; {\n                                        const rect = el.getBoundingClientRect();\n                                        const x = 50 + (Math.random() * (width - 100));\n                                        const y = -100 - (i * 200 + 300);\n\n                                        const body = Bodies.circle(x, y, rect.width \/ 2, {\n                                            restitution: 0.6,\n                                            friction: 0.1\n                                        });\n\n                                        this.bodies.push({ el, body });\n                                        Composite.add(world, body);\n                                        el.style.opacity = 1;\n                                    });\n\n                                    this.runner = Runner.create();\n                                    Runner.run(this.runner, this.engine);\n\n                                    \/\/ Physics events: self-righting + text area repulsion\n                                    Matter.Events.on(this.engine, &#039;beforeUpdate&#039;, () =&gt; {\n                                        this.bodies.forEach(({ body, el }) =&gt; {\n                                            \/\/ 1. Repulsion Zone: Nudge items out of the top-left text area\n                                            if (body.position.x &lt; 320 &amp;&amp; body.position.y &lt; 160) {\n                                                body.force.x += 0.0008; \/\/ Gentle push to the right\n                                                body.force.y += 0.0005; \/\/ Gentle push downwards\n                                            }\n\n                                            \/\/ 2. Self-righting (pills only)\n                                            if (el.classList.contains(&#039;physics-item&#039;)) {\n                                                const targetAngle = 0;\n                                                const torque = (targetAngle - body.angle) * 0.15;\n                                                body.torque = torque;\n                                                const maxAngle = Math.PI \/ 4;\n                                                if (body.angle &gt; maxAngle) Matter.Body.setAngle(body, maxAngle);\n                                                if (body.angle &lt; -maxAngle) Matter.Body.setAngle(body, -maxAngle);\n                                            }\n                                        });\n                                    });\n                                    \/\/ Sync loop\n                                    const update = () =&gt; {\n                                        this.bodies.forEach(({ el, body }) =&gt; {\n                                            const { x, y } = body.position;\n                                            const angle = body.angle;\n                                            el.style.transform = `translate(${x - el.offsetWidth\/2}px, ${y - el.offsetHeight\/2}px) rotate(${angle}rad)`;\n                                        });\n                                        if (this.active) requestAnimationFrame(update);\n                                    };\n                                    update();\n                                }\n                            }\n                        }\n                    &lt;\/script&gt;\n                &lt;\/div&gt;\n\n                &lt;p class=\&quot;text-body text-dark-700 lg:max-w-[372px]\&quot; data-reveal&gt;\n                    Signalez un animal perdu, trouv\u00e9 ou vu en quelques secondes. Animou diffuse l&amp;#039;alerte autour de vous pour mobiliser la communaut\u00e9 rapidement.\n                &lt;\/p&gt;\n            &lt;\/div&gt;\n\n            &lt;div class=\&quot;lg:w-[calc(50%-var(--grid-gutter)\/2)] order-1 lg:order-2\&quot;&gt;\n                &lt;div class=\&quot;
507relative w-full rounded-card aspect-[668\/723] max-h-[410px] lg:max-h-none overflow-hidden\&quot;\n                     style=\&quot;background: var(--gradient-purple-white);\&quot;&gt;\n\n                    &lt;svg class=\&quot;absolute inset-0 w-full h-full\&quot; viewBox=\&quot;0 0 668 723\&quot; preserveAspectRatio=\&quot;none\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;ellipse cx=\&quot;628\&quot; cy=\&quot;1133\&quot; rx=\&quot;718\&quot; ry=\&quot;1313\&quot; transform=\&quot;rotate(27 628 1133)\&quot; fill=\&quot;#A5A0EB\&quot;\/&gt;\n                    &lt;\/svg&gt;\n\n                                            &lt;img\n        src=\&quot;\/img\/86\/mockup-fr.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=360&amp;amp;h=720&amp;amp;s=341cb8319b965b9f7964c980c6070726\&quot;\n         srcset=\&quot;\/img\/86\/mockup-fr.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=280&amp;amp;h=560&amp;amp;s=8566de551aad487f9c94ab64af8a01cb 280w, \/img\/86\/mockup-fr.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=360&amp;amp;h=720&amp;amp;s=341cb8319b965b9f7964c980c6070726 360w, \/img\/86\/mockup-fr.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=480&amp;amp;h=960&amp;amp;s=6533eaef64cc6afc0cb2106aa58e17ba 480w, \/img\/86\/mockup-fr.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=540&amp;amp;h=1080&amp;amp;s=d599e23170870d35a73dafef9710a621 540w, \/img\/86\/mockup-fr.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=720&amp;amp;h=1440&amp;amp;s=019dc6dd2cb95fb0986299ae0983a650 720w\&quot;          sizes=\&quot;(min-width: 1024px) 383px, 280px\&quot;          width=\&quot;600\&quot;          height=\&quot;1200\&quot;         alt=\&quot;Aper\u00e7u des alertes Animou\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;absolute z-[1]\n                                top-[5%]\n                                left-1\/2 -translate-x-1\/2\n                                lg:left-[17%] lg:translate-x-0\n                                w-[70%] lg:w-[66%] max-w-[280px] lg:max-w-none\n                                h-auto\&quot;\n    \/&gt;\n                                    &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n            &lt;\/div&gt;\n\n                    &lt;div class=\&quot;page-wrapper relative z-10 mt-10 lg:mt-16\&quot;&gt;\n                &lt;div class=\&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[var(--grid-gutter)]\&quot; data-reveal-group&gt;\n                                                                                                &lt;div class=\&quot;relative h-full min-h-[211px] rounded-[24px] overflow-hidden\&quot;&gt;\n                                                                    &lt;img\n        src=\&quot;\/img\/78\/dog.png?q=72&amp;amp;fm=webp&amp;amp;fit=cover&amp;amp;w=450&amp;amp;h=211&amp;amp;s=a142622765847e7699406238d642e08e\&quot;\n         srcset=\&quot;\/img\/78\/dog.png?q=72&amp;amp;fm=webp&amp;amp;fit=cover&amp;amp;w=320&amp;amp;h=150&amp;amp;s=78e363b9375f8488c4e92209ae95ca5c 320w, \/img\/78\/dog.png?q=72&amp;amp;fm=webp&amp;amp;fit=cover&amp;amp;w=380&amp;amp;h=178&amp;amp;s=33c4d47234977eb99653c194a8202bac 380w, \/img\/78\/dog.png?q=72&amp;amp;fm=webp&amp;amp;fit=cover&amp;amp;w=480&amp;amp;h=225&amp;amp;s=907a1906cad580037b8cac9c4b19e33e 480w, \/img\/78\/dog.png?q=72&amp;amp;fm=webp&amp;amp;fit=cover&amp;amp;w=640&amp;amp;h=300&amp;amp;s=c331a8d31fbc87d9d82eb5e18ce10c78 640w\&quot;          sizes=\&quot;(min-width: 1024px) 30vw, (min-width: 768px) 47vw, calc(100vw - 32px)\&quot;          width=\&quot;450\&quot;          height=\&quot;211\&quot;         alt=\&quot;Photo de chien\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;absolute inset-0 w-full h-full object-cover\&quot;\n    \/&gt;\n                                                            &lt;\/div&gt;\n                                                                                                                        &lt;div\n                                class=\&quot;feature-card group relative bg-blue-50 hover:bg-purple-250 motion-safe:transition-colors motion-safe:duration-300 border-2 border-white-0 rounded-[24px] px-[35px] py-[30px] flex flex-col items-center gap-5 text-center\&quot;\n                                 style=\&quot;--feature-icon-url: url(&#039;https:\/\/animou-app.com\/storage\/72\/icon-map.svg&#039;);\&quot;                             &gt;\n                                &lt;div class=\&quot;size-[60px] rounded-full bg-purple-250 group-hover:bg-white-0 motion-safe:transition-colors motion-safe:duration-300 relative shrink-0\&quot;&gt;\n                                    &lt;span\n                                        class=\&quot;absolute inset-0 m-auto block size-[34px] bg-white-0 group-hover:bg-purple-250 motion-safe:transition-colors motion-safe:duration-300\&quot;\n                                        style=\&quot;-webkit-mask: var(--feature-icon-url) center\/contain no-repeat; mask: var(--feature-icon-url) center\/contain no-repeat;\&quot;\n                                        aria-hidden=\&quot;true\&quot;\n                                    &gt;&lt;\/span&gt;\n                                &lt;\/div&gt;\n                                &lt;div class=\&quot;flex flex-col gap-3 text-purple-400 group-hover:text-white-0 motion-safe:transition-colors motion-safe:duration-300\&quot;&gt;\n                                                                            &lt;h3 id=\&quot;carte-interactive\&quot; class=\&quot;font-helvetica-now-display font-bold text-[24px] leading-[1.4] tracking-[0.07px]\&quot;&gt;Carte interactive&lt;\/h3&gt;\n                                                                                                                &lt;p class=\&quot;font-helvetica-now-display text-[18px] leading-[1.4]\&quot;&gt;Voir les signalements en temps r\u00e9el&lt;\/p&gt;\n                                                                    &lt;\/div&gt;\n                            &lt;\/div&gt;\n                                                                                                                        &lt;div\n                                class=\&quot;feature-card group relative bg-blue-50 hover:bg-purple-250 motion-safe:transition-colors motion-safe:duration-300 border-2 border-white-0 rounded-[24px] px-[35px] py-[30px] flex flex-col items-center gap-5 text-center\&quot;\n                                 style=\&quot;--feature-icon-url: url(&#039;https:\/\/animou-app.com\/storage\/73\/icon-bell.svg&#039;);\&quot;                             &gt;\n                                &lt;div class=\&quot;size-[60px] rounded-full bg-purple-250 group-hover:bg-white-0 motion-safe:transition-colors motion-safe:duration-300 relative shrink-0\&quot;&gt;\n                                    &lt;span\n                                        class=\&quot;absolute inset-0 m-auto block size-[34px] bg-white-0 group-hover:bg-purple-250 motion-safe:transition-colors motion-safe:duration-300\&quot;\n                                        style=\&quot;-webkit-mask: var(--feature-icon-url) center\/contain no-repeat; mask: var(--feature-icon-url) center\/contain no-repeat;\&quot;\n                                        aria-hidden=\&quot;true\&quot;\n                                    &gt;&lt;\/span&gt;\n                                &lt;\/div&gt;\n                                &lt;div class=\&quot;flex flex-col gap-3 text-purple-400 group-hover:text-white-0 motion-safe:transition-colors motion-safe:duration-300\&quot;&gt;\n                                                                            &lt;h3 id=\&quot;notifications-intelligentes\&quot; class=\&quot;font-helvetica-now-display font-bold text-[24px] leading-[1.4] tracking-[0.07px]\&quot;&gt;Notifications intelligentes&lt;\/h3&gt;\n                                                                                                                &lt;p class=\&quot;font-helvetica-now-display text-[18px] leading-[1.4]\&quot;&gt;Alertes cibl\u00e9es dans votre zone&lt;\/p&gt;\n                                                                    &lt;\/div&gt;\n                            &lt;\/div&gt;\n                                                                                                                        &lt;div\n                                class=\&quot;feature-card group relative bg-blue-50 hover:bg-purple-250 motion-safe:transition-colors motion-safe:duration-300 border-2 border-white-0 rounded-[24px] px-[35px] py-[30px] flex flex-col items-center gap-5 text-center\&quot;\n                                 style=\&quot;--feature-icon-url: url(&#039;https:\/\/animou-app.com\/storage\/76\/icon-pet.svg&#039;);\&quot;                             &gt;\n                                &lt;div class=\&quot;size-[60px] rounded-full bg-purple-250 group-hover:bg-white-0 motion-safe:transition-colors motion-safe:duration-300 relative shrink-0\&quot;&gt;\n                                    &lt;span\n                                        class=\&quot;absolute inset-0 m-auto block size-[34px] bg-white-0 group-hover:bg-purple-250 motion-safe:transition-colors motion-safe:duration-300\&quot;\n                                        style=\&quot;-webkit-mask: var(--feature-icon-url) center\/contain no-repeat; mask: var(--feature-icon-url) center\/contain no-repeat;\&quot;\n                                        aria-hidden=\&quot;true\&quot;\n                                    &gt;&lt;\/span&gt;\n                                &lt;\/div&gt;\n                                &lt;div class=\&quot;flex flex-col gap-3 text-purple-400 group-hover:text-white-0 motion-safe:transition-colors motion-safe:duration-300\&quot;&gt;\n                                                                            &lt;h3 id=\&quot;annonces-claires-et-detaillees\&quot; class=\&quot;font-helvetica-now-display font-bold text-[24px] leading-[1.4] tracking-[0.07px]\&quot;&gt;Annonces claires et d\u00e9taill\u00e9es&lt;\/h3&gt;\n                                                                                                                &lt;p class=\&quot;font-helvetica-now-display text-[18px] leading-[1.4]\&quot;&gt;Voir les signalements en temps r\u00e9el&lt;\/p&gt;\n                                                                    &lt;\/div&gt;\n                            &lt;\/div&gt;\n                                                                                                                        &lt;div class=\&quot;relative h-full min-h-[211px] rounded-[24px] overflow-hidden\&quot;&gt;\n                                                                    &lt;img\n        src=\&quot;\/img\/77\/cat.png?q=72&amp;amp;fm=webp&amp;amp;fit=cover&amp;amp;w=450&amp;amp;h=211&amp;amp;s=cd3e3715a349f9f71138e4787e17d73a\&quot;\n         srcset=\&quot;\/img\/77\/cat.png?q=72&amp;amp;fm=webp&amp;amp;fit=cover&amp;amp;w=320&amp;amp;h=150&amp;amp;s=60d073c459d812d0fd8be806fb1d88e1 320w, \/img\/77\/cat.png?q=72&amp;amp;fm=webp&amp;amp;fit=cover&amp;amp;w=380&amp;amp;h=178&amp;amp;s=132ed6be0857925d35152b886417f794 380w, \/img\/77\/cat.png?q=72&amp;amp;fm=webp&amp;amp;fit=cover&amp;amp;w=480&amp;amp;h=225&amp;amp;s=a306ffd97b0bf72329e1092fef155e22 480w, \/img\/77\/cat.png?q=72&amp;amp;fm=webp&amp;amp;fit=cover&amp;amp;w=640&amp;amp;h=300&amp;amp;s=1e222239ae1dfda2dc381f7a24e20a54 640w\&quot;          sizes=\&quot;(min-width: 1024px) 30vw, (min-width: 768px) 47vw, calc(100vw - 32px)\&quot;          width=\&quot;450\&quot;          height=\&quot;211\&quot;         alt=\&quot;Photo de chat\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;absolute inset-0 w-full h-full object-cover\&quot;\n    \/&gt;\n                                                            &lt;\/div&gt;\n                                                                                                                        &lt;div\n                                class=\&quot;feature-card group relative bg-blue-50 hover:bg-purple-250 motion-safe:transition-colors motion-safe:duration-300 border-2 border-white-0 rounded-[24px] px-[35px] py-[30px] flex flex-col items-center gap-5 text-center\&quot;\n                                 style=\&quot;--feature-icon-url: url(&#039;https:\/\/animou-app.com\/storage\/75\/icon-chat.svg&#039;);\&quot;                             &gt;\n                                &lt;div class=\&quot;size-[60px] rounded-full bg-purple-250 group-hover:bg-white-0 motion-safe:transition-colors motion-safe:duration-300 relative shrink-0\&quot;&gt;\n                                    &lt;span\n                                        class=\&quot;absolute inset-0 m-auto block size-[34px] bg-white-0 group-hover:bg-purple-250 motion-safe:transition-colors motion-safe:duration-300\&quot;\n                                        style=\&quot;-webkit-mask: var(--feature-icon-url) center\/contain no-repeat; mask: var(--feature-icon-url) center\/contain no-repeat;\&quot;\n                                        aria-hidden=\&quot;true\&quot;\n                                    &gt;&lt;\/span&gt;\n                                &lt;\/div&gt;\n                                &lt;div class=\&quot;flex flex-col gap-3 text-purple-400 group-hover:text-white-0 motion-safe:transition-colors motion-safe:duration-300\&quot;&gt;\n                                                                            &lt;h3 id=\&quot;messagerie-securisee\&quot; class=\&quot;font-helvetica-now-display font-bold text-[24px] leading-[1.4] tracking-[0.07px]\&quot;&gt;Messagerie s\u00e9curis\u00e9e&lt;\/h3&gt;\n                                                                                                                &lt;p class=\&quot;font-helvetica-now-display text-[18px] leading-[1.4]\&quot;&gt;Discutez directement avec les voisins&lt;\/p&gt;\n                                                                    &lt;\/div&gt;\n                            &lt;\/div&gt;\n                                                            &lt;\/div&gt;\n            &lt;\/div&gt;\n        \n    &lt;div class=\&quot;page-wrapper hidden lg:block pointer-events-none pt-[70px]\&quot;&gt;\n    &lt;div x-data=\&quot;sectionNav({ inheritPrevious: false })\&quot;\n     class=\&quot;transition-opacity duration-300\&quot;\n     :style=\&quot;&#039;opacity: &#039;
507 + opacity\&quot;\n     x-cloak&gt;\n    &lt;div class=\&quot;w-[425px]\&quot;&gt;\n        &lt;div class=\&quot;flex items-center justify-end gap-3 font-helvetica-now-display text-lg leading-[1.4] mb-[20px] text-purple-500\&quot;&gt;\n            &lt;span class=\&quot;tabular-nums\&quot; x-text=\&quot;number\&quot;&gt;&lt;\/span&gt;\n            &lt;span x-text=\&quot;label\&quot;&gt;&lt;\/span&gt;\n        &lt;\/div&gt;\n        &lt;div class=\&quot;relative\&quot;&gt;\n            &lt;div class=\&quot;h-px w-full rounded-[1px]\&quot;\n                 style=\&quot;background: linear-gradient(to right, rgba(127,121,209,0) 0%, #7F79D1 100%);\&quot;&gt;&lt;\/div&gt;\n            &lt;div class=\&quot;absolute top-1\/2 -translate-y-1\/2 transition-[left] duration-300 ease-out will-change-[left,opacity]\&quot;\n                 :style=\&quot;&#039;left: &#039; + arrowLeft + &#039;px&#039;\&quot;&gt;\n                &lt;div class=\&quot;flex items-center justify-center h-[33px] px-4 rounded-full bg-purple-10 text-purple-500\&quot;&gt;\n                    &lt;svg width=\&quot;18\&quot; height=\&quot;18\&quot;
507 viewBox=\&quot;0 0 24 24\&quot; fill=\&quot;none\&quot;&gt;\n                        &lt;path d=\&quot;M8.91 19.92L15.43 13.4C16.2 12.63 16.2 11.37 15.43 10.6L8.91 4.08\&quot;\n                              stroke=\&quot;currentColor\&quot; stroke-width=\&quot;1.5\&quot; stroke-miterlimit=\&quot;10\&quot;\n                              stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                    &lt;\/svg&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n    \n\n&lt;\/section&gt;\n&lt;section\n        class=\&quot;page-section page-section--compact-top\&quot;\n            data-viewport-motion\n        x-data=\&quot;{ viewportMotionActive: false }\&quot;\n        x-intersect:enter.margin.-10%=\&quot;viewportMotionActive = true\&quot;\n        x-intersect:leave.margin.-10%=\&quot;viewportMotionActive = false\&quot;\n        :class=\&quot;{\n            &#039;viewport-motion-active&#039;: viewportMotionActive,\n            &#039;viewport-motion-pending&#039;: ! viewportMotionActive,\n        }\&quot;\n         data-section-label=\&quot;Perdu ou trouv\u00e9\&quot;      aria-labelledby=\&quot;heading-cta-banner\&quot;\n    &gt;\n            &lt;div class=\&quot;page-wrapper\&quot;&gt;\n            &lt;div class=\&quot;cta-banner-card relative flex min-h-[214px] w-full flex-col justify-center overflow-hidden rounded-[32px] bg-gradient-to-b from-[#6E7DE4] via-[#8290EB] to-[#A8B3F0] px-8 py-10 lg:px-10\&quot;&gt;\n        \n        &lt;div class=\&quot;pointer-events-none absolute inset-0 overflow-hidden\&quot; aria-hidden=\&quot;true\&quot;&gt;\n            \n            &lt;div class=\&quot;cta-banner-circle absolute right-0 top-0 size-[500px] translate-x-[40%] -translate-y-[40%] rounded-full bg-white-0\/10 lg:size-[827px] lg:translate-x-[15%] lg:-translate-y-[15%]\&quot; style=\&quot;--cta-drift-dur: 22s;\&quot;&gt;&lt;\/div&gt;\n            &lt;div class=\&quot;cta-banner-circle absolute right-0 top-0 size-[340px] translate-x-[40%] -translate-y-[40%] rounded-full bg-white-0\/15 lg:size-[577px] lg:translate-x-[10%] lg:-translate-y-[17%]\&quot; style=\&quot;--cta-drift-dur: 16s;\&quot;&gt;&lt;\/div&gt;\n        &lt;\/div&gt;\n\n        \n                    &lt;span aria-hidden=\&quot;true\&quot; class=\&quot;cta-banner-watermark pointer-events-none absolute -left-10 top-[68%] -translate-y-1\/2 select-none text-white-0\/10\&quot;&gt;\n                                    &lt;svg width=\&quot;220\&quot; height=\&quot;220\&quot;
507 viewBox=\&quot;0 0 24 24\&quot; fill=\&quot;currentColor\&quot;&gt;&lt;path d=\&quot;M8.35 3.35c1.2-.5 2.5.3 2.9 1.7.4 1.4-.2 2.9-1.4 3.3-1.2.5-2.5-.3-2.9-1.7-.4-1.4.2-2.8 1.4-3.3Zm7.3 0c1.2.5 1.8 2 1.4 3.3-.4 1.4-1.7 2.2-2.9 1.7-1.2-.4-1.8-1.9-1.4-3.3.4-1.4 1.7-2.2 2.9-1.7ZM3.8 8.6c1.1-.7 2.6-.2 3.2 1.1.7 1.3.3 2.8-.8 3.5-1.1.6-2.5.1-3.2-1.2-.6-1.3-.3-2.8.8-3.4Zm16.4 0c1.1.6 1.4 2.1.8 3.4-.7 1.3-2.1 1.8-3.2 1.2-1.1-.7-1.5-2.2-.8-3.5.6-1.3 2.1-1.8 3.2-1.1ZM12 11c2.3 0 5.5 2.7 5.5 5.3 0 1.7-1.2 2.7-2.8 2.7-1 0-1.8-.5-2.7-.5-.9 0-1.7.5-2.7.5-1.6 0-2.8-1-2.8-2.7C6.5 13.7 9.7 11 12 11Z\&quot;\/&gt;&lt;\/svg&gt;\n                            &lt;\/span&gt;\n        \n        &lt;div class=\&quot;relative z-10 flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between\&quot;&gt;\n            &lt;div class=\&quot;flex max-w-[600px] flex-col gap-2\&quot;&gt;\n                &lt;h2 id=\&quot;heading-cta-banner\&quot; class=\&quot;text-heading-section text-white-0\&quot;&gt;Le bon r\u00e9flexe pour chaque situation&lt;\/h2&gt;\n                                    &lt;p class=\&quot;text-subtitle text-white-0\/85\&quot;&gt;D\u00e9couvrez comment fonctionne Animou et consultez nos guides pratiques pour agir sans attendre.&lt;\/p&gt;\n                            &lt;\/div&gt;\n\n                            &lt;div class=\&quot;flex shrink-0 flex-wrap items-center gap-4\&quot;&gt;\n                                            &lt;a href=\&quot;\/application-mobile\&quot;   data-track=\&quot;download-cta\&quot;                            class=\&quot;inline-flex items-center gap-2 rounded-full bg-dark-850 px-6 py-3 text-white-0 transition-colors hover:bg-dark-700\&quot;&gt;\n                            D\u00e9couvrir l\u2019application\n                            &lt;span aria-hidden=\&quot;true\&quot;&gt;&amp;rarr;&lt;\/span&gt;\n                        &lt;\/a&gt;\n                                                                &lt;a href=\&quot;\/blog\&quot;                            class=\&quot;inline-flex items-center gap-2 rounded-full bg-white-0 px-6 py-3 text-dark-850 transition-colors hover:bg-purple-10\&quot;&gt;\n                            Consulter les guides\n                        &lt;\/a&gt;\n                                    &lt;\/div&gt;\n                    &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    \n    &lt;style&gt;\n        @media (prefers-reduced-motion: no-preference) {\n            .cta-banner-card {\n                animation: cta-banner-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;\n            }\n\n            .cta-banner-watermark {\n                animation: cta-banner-heartbeat 2.4s ease-in-out 0.8s infinite;\n                transform-origin: 40% 50%;\n            }\n\n            .cta-banner-circle {\n                animation: cta-banner-drift var(--cta-drift-dur, 20s) ease-in-out infinite alternate;\n            }\n\n            @keyframes cta-banner-in {\n                from {\n                    opacity: 0;\n                    transform: translateY(24px);\n                }\n                to {\n                    opacity: 1;\n                    transform: translateY(0);\n                }\n            }\n\n            \n            @keyframes cta-banner-heartbeat {\n                0%, 40%, 100% { transform: scale(1); }\n                8% { transform: scale(1.07); }\n                16% { transform: scale(1); }\n                24% { transform: scale(1.05); }\n            }\n\n            @keyframes cta-banner-drift {\n                from { transform: translate(0, 0); }\n                to { transform: translate(-28px, 18px); }\n            }\n        }\n    &lt;\/style&gt;\n        &lt;\/div&gt;\n    \n\n&lt;\/section&gt;\n&lt;section\n     id=\&quot;how-it-works\&quot;     class=\&quot;page-section\&quot;\n            data-viewport-motion\n        x-data=\&quot;{ viewportMotionActive: false }\&quot;\n        x-intersect:enter.margin.-10%=\&quot;viewportMotionActive = true\&quot;\n        x-intersect:leave.margin.-10%=\&quot;viewportMotionActive = false\&quot;\n        :class=\&quot;{\n            &#039;viewport-motion-active&#039;: viewportMotionActive,\n            &#039;viewport-motion-pending&#039;: ! viewportMotionActive,\n        }\&quot;\n         data-section-label=\&quot;Comment \u00e7a marche\&quot;      aria-labelledby=\&quot;heading-how-it-works\&quot;\n    &gt;\n            &lt;div class=\&quot;page-wrapper\&quot;&gt;\n            &lt;div data-reveal class=\&quot;flex flex-col gap-4 lg:items-center lg:text-center lg:max-w-[700px] lg:mx-auto\&quot;&gt;\n        &lt;h2\n                id=\&quot;heading-how-it-works\&quot;\n                class=\&quot;text-heading-section text-dark-850\&quot;\n        &gt;Comment \u00e7a marche&lt;\/h2&gt;\n        &lt;p class=\&quot;text-subtitle text-dark-700\&quot;&gt;\n            Une application pens\u00e9e pour agir vite, ensemble.\n        &lt;\/p&gt;\n    &lt;\/div&gt;\n\n    \n    \n    &lt;ol data-reveal-group class=\&quot;relative mt-10 lg:mt-16 gap-4 lg:gap-[var(--grid-gutter)] list-none m-0 p-0 flex flex-col lg:flex-row lg:items-stretch\&quot;&gt;\n                                &lt;li class=\&quot;group relative flex flex-col lg:flex-1\&quot;&gt;\n                &lt;div class=\&quot;\n                    relative z-10 overflow-hidden flex-1\n                    bg-white-0 border border-gray-10 rounded-2xl lg:rou
507nded-3xl\n                    shadow-[var(--shadow-for-how-it-works)] transition-all duration-300 group-hover:shadow-lg group-hover:-translate-y-1\n                    min-h-[168px] lg:min-h-[236px]\n                \&quot;&gt;\n                    \n                    &lt;div\n    class=\&quot;absolute inset-0 pointer-events-none opacity-80 animate-[grid-drift_8s_linear_infinite]\&quot;\n    style=\&quot;background-image: url(&#039;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/how-it-works\/dot-grid.svg&#039;);\n           background-size: 49.27px 49.27px;\n           mask-image: linear-gradient(to bottom left, black 0%, transparent 75%);\n           -webkit-mask-image: linear-gradient(to bottom left, black 0%, transparent 75%);\&quot;\n    aria-hidden=\&quot;true\&quot;\n&gt;&lt;\/div&gt;\n\n                    \n                    &lt;div class=\&quot;relative z-10 flex flex-col gap-3 lg:gap-4 p-4 lg:p-8\&quot;&gt;\n                        \n                                                                                &lt;div class=\&quot;flex items-center justify-center size-12 lg:size-16 rounded-full bg-purple-15 shrink-0 transition-transform duration-500 group-hover:scale-110\&quot;&gt;\n                                &lt;img\n            src=\&quot;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/how-it-works\/location-icon.svg\&quot;\n            alt=\&quot;\&quot;\n            loading=\&quot;lazy\&quot;\n            aria-hidden=\&quot;true\&quot; class=\&quot;size-[22px] lg:size-[29px]\&quot; style=\&quot;animation: animouPin 3s ease-in-out infinite; animation-delay: 0s;\&quot;\n        \/&gt;\n                                &lt;\/div&gt;\n                        \n                        \n                        &lt;div class=\&quot;flex flex-col gap-2 lg:gap-4\&quot;&gt;\n                            &lt;h3 id=\&quot;signalez\&quot; class=\&quot;text-heading-card text-dark-850\&quot;&gt;\n                                Signalez\n                            &lt;\/h3&gt;\n                            &lt;p class=\&quot;font-helvetica-now-display font-normal text-sm lg:text-base leading-[1.4] text-gray-500\&quot;&gt;\n                                Publiez une alerte pour un animal perdu, trouv\u00e9 ou vu, avec une photo, une description et sa localisation.\n                            &lt;\/p&gt;\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n\n                \n                \n                \n                                    &lt;div class=\&quot;absolute -top-[10%] right-[0%] lg:-right-4 z-20\&quot;&gt;\n                        &lt;span class=\&quot;inline-flex items-center justify-center px-4 lg:px-6 py-1.5 lg:py-2.5 bg-purple-500 rounded-full font-helvetica-now-display font-medium text-sm lg:text-base leading-[1.4] text-white-0 whitespace-nowrap shadow-lg rotate-3\&quot;&gt;\n                            1 \u00e9tape\n                        &lt;\/span&gt;\n                    &lt;\/div&gt;\n                            &lt;\/li&gt;\n                                &lt;li class=\&quot;group relative flex flex-col lg:flex-1\&quot;&gt;\n                &lt;div class=\&quot;\n                    relative z-10 overflow-hidden flex-1\n                    bg-white-0 border border-gray-10 rounded-2xl lg:rounded-3xl\n                    shadow-[var(--shadow-for-how-it-works)] transition-all duration-300 group-hover:shadow-lg group-hover:-translate-y-1\n                    min-h-[168px] lg:min-h-[236px]\n                \&quot;&gt;\n                    \n                    &lt;div\n    class=\&quot;absolute inset-0 pointer-events-none opacity-80 animate-[grid-drift_8s_linear_infinite]\&quot;\n    style=\&quot;background-image: url(&#039;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/how-it-works\/dot-grid.svg&#039;);\n           background-size: 49.27px 49.27px;\n           mask-image: linear-gradient(to bottom left, black 0%, transparent 75%);\n           -webkit-mask-image: linear-gradient(to bottom left, black 0%, transparent 75%);\&quot;\n    aria-hidden=\&quot;true\&quot;\n&gt;&lt;\/div&gt;\n\n                    \n                    &lt;div class=\&quot;relative z-10 flex flex-col gap-3 lg:gap-4 p-4 lg:p-8\&quot;&gt;\n                        \n                                                                                &lt;div class=\&quot;flex items-center justify-center size-12 lg:size-16 rounded-full bg-purple-15 shrink-0 transition-transform duration-500 group-hover:scale-110\&quot;&gt;\n                                &lt;img\n            src=\&quot;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/how-it-works\/bell-icon.svg\&quot;\n            alt=\&quot;\&quot;\n            loading=\&quot;lazy\&quot;\n            aria-hidden=\&quot;true\&quot; class=\&quot;size-[22px] lg:size-[29px]\&quot; style=\&quot;animation: animouBell 3s ease-in-out infinite; animation-delay: 0.4s;\&quot;\n        \/&gt;\n                                &lt;\/div&gt;\n                        \n                        \n                        &lt;div class=\&quot;flex flex-col gap-2 lg:gap-4\&quot;&gt;\n                            &lt;h3 id=\&quot;mobilisez\&quot; class=\&quot;text-heading-card text-dark-850\&quot;&gt;\n                                Mobilisez\n                            &lt;\/h3&gt;\n                            &lt;p class=\&quot;font-helvetica-now-display font-normal text-sm lg:text-base leading-[1.4] text-gray-500\&quot;&gt;\n                                Animou diffuse l&amp;#039;alerte autour de vous pour pr\u00e9venir rapidement les bonnes personnes.\n                            &lt;\/p&gt;\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n\n                \n                                    &lt;div class=\&quot;flex absolute bottom-[-20px] right-0 z-50 pointer-events-none items-center justify-center lg:bottom-[-10px] lg:right-0 lg:translate-x-1\/2 lg:translate-y-1\/2 lg:z-0\&quot;&gt;\n                        &lt;svg viewBox=\&quot;0 0 81.114 26.654\&quot; fill=\&quot;none\&quot; aria-hidden=\&quot;true\&quot; class=\&quot;w-20 h-auto rotate-90 -scale-y-100 opacity-80 lg:rotate-[15deg] lg:scale-y-100\&quot;&gt;\n                            &lt;path fill=\&quot;#cbc7ff\&quot; d=\&quot;M.051 0c.457.111.63.156.818.477.646 1.099 1.236 2.288 1.845 3.4a35.3 35.3 0 0 0 4.214 6.12c4.315 5.09 10.165 9.175 16.983 11.859 10.076 3.834 21.597 4.232 32.033 1.11 9.025-2.645 16.871-7.414 21.044-14.604-1.567.38-4.588 1.147-6.28 1.214-.308.012-.636-.307-.812-.512.299-1.6 7.456-3.013 9.242-3.278.508-.076.88.29 1.166.544.633 1.687.551 4.936.785 6.714.071.538.005.808-.427 1.177-.588.08-.325.121-.823-.109-.776-.91-.965-3.41-1.185-4.68-2.859 4.863-7.175 8.364-12.666 11.31-9.916 5.27-21.974 7.118-33.545 5.136C19.898 23.674 8.787 16.64 2.898 7.303 1.967 5.825-.375 1.643.05 0\&quot;\/&gt;\n                        &lt;\/svg&gt;\n                    &lt;\/div&gt;\n                \n                \n                            &lt;\/li&gt;\n                                &lt;li class=\&quot;group relative flex flex-col lg:flex-1\&quot;&gt;\n                &lt;div class=\&quot;\n                    relative z-10 overflow-hidden flex-1\n                    bg-white-0 border border-gray-10 rounded-2xl lg:rou
507nded-3xl\n                    shadow-[var(--shadow-for-how-it-works)] transition-all duration-300 group-hover:shadow-lg group-hover:-translate-y-1\n                    min-h-[168px] lg:min-h-[236px]\n                \&quot;&gt;\n                    \n                    &lt;div\n    class=\&quot;absolute inset-0 pointer-events-none opacity-80 animate-[grid-drift_8s_linear_infinite]\&quot;\n    style=\&quot;background-image: url(&#039;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/how-it-works\/dot-grid.svg&#039;);\n           background-size: 49.27px 49.27px;\n           mask-image: linear-gradient(to bottom left, black 0%, transparent 75%);\n           -webkit-mask-image: linear-gradient(to bottom left, black 0%, transparent 75%);\&quot;\n    aria-hidden=\&quot;true\&quot;\n&gt;&lt;\/div&gt;\n\n                    \n                    &lt;div class=\&quot;relative z-10 flex flex-col gap-3 lg:gap-4 p-4 lg:p-8\&quot;&gt;\n                        \n                                                                                &lt;div class=\&quot;flex items-center justify-center size-12 lg:size-16 rounded-full bg-purple-15 shrink-0 transition-transform duration-500 group-hover:scale-110\&quot;&gt;\n                                &lt;img\n            src=\&quot;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/how-it-works\/chat-icon.svg\&quot;\n            alt=\&quot;\&quot;\n            loading=\&quot;lazy\&quot;\n            aria-hidden=\&quot;true\&quot; class=\&quot;size-[22px] lg:size-[29px]\&quot; style=\&quot;animation: animouBubble 3s ease-in-out infinite; animation-delay: 0.8s;\&quot;\n        \/&gt;\n                                &lt;\/div&gt;\n                        \n                        \n                        &lt;div class=\&quot;flex flex-col gap-2 lg:gap-4\&quot;&gt;\n                            &lt;h3 id=\&quot;retrouvez\&quot; class=\&quot;text-heading-card text-dark-850\&quot;&gt;\n                                Retrouvez\n                            &lt;\/h3&gt;\n                            &lt;p class=\&quot;font-helvetica-now-display font-normal text-sm lg:text-base leading-[1.4] text-gray-500\&quot;&gt;\n                                \u00c9changez via la messagerie s\u00e9curis\u00e9e et agissez plus vite gr\u00e2ce \u00e0 la communaut\u00e9.\n                            &lt;\/p&gt;\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n\n                \n                \n                \n                            &lt;\/li&gt;\n            &lt;\/ol&gt;\n\n    \n            &lt;div data-reveal class=\&quot;mt-8 lg:mt-12 flex justify-center\&quot;&gt;\n            &lt;a\n                    href=\&quot;\/devenir-ambassadeur\&quot;\n                                        class=\&quot;btn-filled w-full lg:w-auto px-6 no-underline\&quot;\n            &gt;Rejoindre la communaut\u00e9 Animou&lt;\/a&gt;\n        &lt;\/div&gt;\n    \n    &lt;div class=\&quot;page-wrapper hidden lg:block pointer-events-none pt-[70px]\&quot;&gt;\n    &lt;div x-data=\&quot;sectionNav({ inheritPrevious: false })\&quot;\n     class=\&quot;transition-opacity duration-300\&quot;\n     :style=\&quot;&#039;opacity: &#039; + opacity\&quot;\n     x-cloak&gt;\n    &lt;div class=\&quot;w-[425px]\&quot;&gt;\n        &lt;div class=\&quot;flex items-center justify-end gap-3 font-helvetica-now-display text-lg leading-[1.4] mb-[20px] text-purple-500\&quot;&gt;\n            &lt;span class=\&quot;tabular-nums\&quot; x-text=\&quot;number\&quot;&gt;&lt;\/span&gt;\n            &lt;span x-text=\&quot;label\&quot;&gt;&lt;\/span&gt;\n        &lt;\/div&gt;\n        &lt;div class=\&quot;relative\&quot;&gt;\n            &lt;div class=\&quot;h-px w-full rounded-[1px]\&quot;\n                 style=\&quot;background: linear-gradient(to right, rgba(127,121,209,0) 0%, #7F79D1 100%);\&quot;&gt;&lt;\/div&gt;\n            &lt;div class=\&quot;absolute top-1\/2 -translate-y-1\/2 transition-[left] duration-300 ease-out will-change-[left,opacity]\&quot;\n                 :style=\&quot;&#039;left: &#039;
507 + arrowLeft + &#039;px&#039;\&quot;&gt;\n                &lt;div class=\&quot;flex items-center justify-center h-[33px] px-4 rounded-full bg-purple-10 text-purple-500\&quot;&gt;\n                    &lt;svg width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 24 24\&quot; fill=\&quot;none\&quot;&gt;\n                        &lt;path d=\&quot;M8.91 19.92L15.43 13.4C16.2 12.63 16.2 11.37 15.43 10.6L8.91 4.08\&quot;\n                              stroke=\&quot;currentColor\&quot; stroke-width=\&quot;1.5\&quot; stroke-miterlimit=\&quot;10\&quot;\n                              stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                    &lt;\/svg&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n        &lt;\/div&gt;\n    \n\n&lt;\/section&gt;\n&lt;section\n     id=\&quot;why-urgent\&quot;     class=\&quot;page-section\&quot;\n            data-viewport-motion\n        x-data=\&quot;{ viewportMotionActive: false }\&quot;\n        x-intersect:enter.margin.-10%=\&quot;viewportMotionActive = true\&quot;\n        x-intersect:leave.margin.-10%=\&quot;viewportMotionActive = false\&quot;\n        :class=\&quot;{\n            &#039;viewport-motion-active&#039;: viewportMotionActive,\n            &#039;viewport-motion-pending&#039;: ! viewportMotionActive,\n        }\&quot;\n         data-section-label=\&quot;Pourquoi c&amp;#039;est urgent\&quot;      aria-labelledby=\&quot;heading-urgent\&quot;\n    &gt;\n            &lt;div class=\&quot;page-wrapper\&quot;&gt;\n            &lt;div data-reveal class=\&quot;flex flex-col gap-4 items-start lg:items-center text-left lg:text-center\&quot;&gt;\n        &lt;h2\n                id=\&quot;heading-urgent\&quot;\n                class=\&quot;text-heading-section text-dark-850 w-full lg:max-w-[908px]\&quot;\n        &gt;\n            &lt;span&gt;Un probl\u00e8me massif,&lt;\/span&gt;\n            &lt;br class=\&quot;hidden lg:block\&quot; aria-hidden=\&quot;true\&quot;&gt;\n            &lt;span&gt;une r\u00e9ponse collective&lt;\/span&gt;\n        &lt;\/h2&gt;\n        &lt;p class=\&quot;text-subtitle text-gray-500 w-full lg:max-w-[600px]\&quot;&gt;\n            Chaque ann\u00e9e, des milliers d&amp;#039;animaux disparaissent, mais les recherches restent dispers\u00e9es et peu efficaces.\n        &lt;\/p&gt;\n    &lt;\/div&gt;\n\n    \n    &lt;div data-reveal-group class=\&quot;flex flex-col lg:flex-row gap-4 lg:gap-5 mt-10 lg:mt-16\&quot;&gt;\n        \n        &lt;div class=\&quot;\n            relative overflow-hidden rounded-2xl lg:rounded-card\n            bg-blue-10 h-[350px] lg:h-[510px] w-full lg:flex-[2]\n        \&quot;&gt;\n            \n                            &lt;img\n        src=\&quot;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/urgent\/illustration.svg\&quot;\n                         width=\&quot;556\&quot;          height=\&quot;568\&quot;         alt=\&quot;Illustration Animou sur la recherche urgente d&amp;#039;animaux\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;absolute top-[-10px] lg:top-[-10px] left-0 w-full lg:w-[556px] h-[360px] lg:h-[568px] object-contain pointer-events-none\&quot;\n    \/&gt;\n            \n            \n                            &lt;p class=\&quot;\n                    absolute top-4 lg:top-10 right-4 lg:right-10\n                    font-helvetica-now-display font-normal text-base lg:text-xl leading-[1.4] text-purple-400\n                    w-[140px] lg:w-[180px]\n                \&quot;&gt;\n                    Animou centralise tout, gratuitement\n                &lt;\/p&gt;\n            \n            \n            &lt;div class=\&quot;absolute bottom-4 lg:bottom-[50px] left-4 lg:left-10 flex flex-col gap-2 lg:gap-3\&quot;&gt;\n                &lt;strong\n                    x-data=\&quot;counter(82264, &#039;&#039;)\&quot;\n                    x-intersect.once=\&quot;animate()\&quot;\n                    x-text=\&quot;formatted() ?? &#039;82\u202f264&#039;\&quot;\n                    class=\&quot;text-heading-big-number text-purple-400\&quot;\n                &gt;82\u202f264&lt;\/strong&gt;\n                &lt;span class=\&quot;text-card-meta text-purple-400\&quot;&gt;\n                    Animaux d\u00e9clar\u00e9s perdus en 2024\n                &lt;\/span&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n\n        \n        &lt;div\n                class=\&quot;\n                flex flex-col items-center gap-6 lg:gap-[23px]\n                rounded-2xl lg:rou
507nded-card px-6 lg:px-8 py-12 lg:py-[93px]\n                w-full lg:w-[366px] lg:shrink-0 relative overflow-hidden\n            \&quot;\n                style=\&quot;background: var(--gradient-urgent-card)\&quot;\n        &gt;\n            \n                            &lt;div class=\&quot;relative size-[100px] lg:size-[120px] shrink-0 flex items-center justify-center\&quot;&gt;\n                    &lt;div class=\&quot;absolute inset-0 bg-white-0\/30 rounded-full animate-[ping_2s_cubic-bezier(0,0,0.2,1)_infinite]\&quot;&gt;&lt;\/div&gt;\n                    &lt;div class=\&quot;absolute inset-[-15px] bg-white-0\/20 rounded-full animate-[ping_3s_cubic-bezier(0,0,0.2,1)_infinite_1s]\&quot;&gt;&lt;\/div&gt;\n                    &lt;img\n            src=\&quot;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/urgent\/clock-icon.svg\&quot;\n            alt=\&quot;\&quot;\n            loading=\&quot;lazy\&quot;\n            aria-hidden=\&quot;true\&quot; class=\&quot;relative z-10 size-full\&quot;\n        \/&gt;\n                    &lt;\/div&gt;\n            \n            \n            &lt;div class=\&quot;relative z-10 flex flex-col gap-3 lg:gap-6 items-center text-center text-white-0 w-full\&quot;&gt;\n                &lt;strong class=\&quot;text-heading-big-number\&quot;&gt;\n                    8 min\n                &lt;\/strong&gt;\n                &lt;span class=\&quot;text-card-meta\&quot;&gt;\n                    C&amp;#039;est tout ce qu&amp;#039;il faut pour qu&amp;#039;un chat disparaisse de votre radar.\n                &lt;\/span&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    \n            &lt;p data-reveal class=\&quot;text-body text-dark-700 lg:max-w-[372px]\&quot;&gt;\n            Sources : I-CAD, Barom\u00e8tre 2025 (donn\u00e9es 2024) et bilan estival 2025\n        &lt;\/p&gt;\n    \n    &lt;div class=\&quot;page-wrapper hidden lg:block pointer-events-none pt-[70px]\&quot;&gt;\n    &lt;div x-data=\&quot;sectionNav({ inheritPrevious: false })\&quot;\n     class=\&quot;transition-opacity duration-300\&quot;\n     :style=\&quot;&#039;opacity: &#039; + opacity\&quot;\n     x-cloak&gt;\n    &lt;div class=\&quot;w-[425px]\&quot;&gt;\n        &lt;div class=\&quot;flex items-center justify-end gap-3 font-helvetica-now-display text-lg leading-[1.4] mb-[20px] text-purple-500\&quot;&gt;\n            &lt;span class=\&quot;tabular-nums\&quot; x-text=\&quot;number\&quot;&gt;&lt;\/span&gt;\n            &lt;span x-text=\&quot;label\&quot;&gt;&lt;\/span&gt;\n        &lt;\/div&gt;\n        &lt;div class=\&quot;relative\&quot;&gt;\n            &lt;div class=\&quot;h-px w-full rounded-[1px]\&quot;\n                 style=\&quot;background: linear-gradient(to right, rgba(127,121,209,0) 0%, #7F79D1 100%);\&quot;&gt;&lt;\/div&gt;\n            &lt;div class=\&quot;absolute top-1\/2 -translate-y-1\/2 transition-[left] duration-300 ease-out will-change-[left,opacity]\&quot;\n                 :style=\&quot;&#039;left: &#039;
507 + arrowLeft + &#039;px&#039;\&quot;&gt;\n                &lt;div class=\&quot;flex items-center justify-center h-[33px] px-4 rounded-full bg-purple-10 text-purple-500\&quot;&gt;\n                    &lt;svg width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 24 24\&quot; fill=\&quot;none\&quot;&gt;\n                        &lt;path d=\&quot;M8.91 19.92L15.43 13.4C16.2 12.63 16.2 11.37 15.43 10.6L8.91 4.08\&quot;\n                              stroke=\&quot;currentColor\&quot; stroke-width=\&quot;1.5\&quot; stroke-miterlimit=\&quot;10\&quot;\n                              stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                    &lt;\/svg&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n        &lt;\/div&gt;\n    \n\n&lt;\/section&gt;\n&lt;section\n     id=\&quot;act-locally\&quot;     class=\&quot;page-section page-section--colored\&quot;\n         data-section-label=\&quot;Communaut\u00e9 &amp;amp; Partenaires\&quot;      aria-labelledby=\&quot;heading-community\&quot;\n    &gt;\n            &lt;script&gt;\n        window.animouWaitForImages ??= (container) =&gt; Promise.all(\n            Array.from(container.querySelectorAll(&#039;img&#039;)).map((image) =&gt; new Promise((resolve) =&gt; {\n                const decode = () =&gt; {\n                    if (typeof image.decode !== &#039;function&#039;) {\n                        resolve()\n\n                        return\n                    }\n\n                    image.decode().catch(() =&gt; {}).finally(resolve)\n                }\n\n                if (image.complete) {\n                    decode()\n\n                    return\n                }\n\n                image.addEventListener(&#039;load&#039;, decode, { once: true })\n                image.addEventListener(&#039;error&#039;, resolve, { once: true })\n            })),\n        )\n    &lt;\/script&gt;\n\n    \n    &lt;div\n            class=\&quot;relative text-white-0 mask-fade-edges\&quot;\n            style=\&quot;background: linear-gradient(180deg, var(--color-blue-450) 0%, var(--color-purple-500) 100%);\&quot;\n    &gt;\n        \n                    &lt;div class=\&quot;absolute inset-0 overflow-hidden pointer-events-none\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                &lt;picture&gt;\n    \n                    &lt;source\n            media=\&quot;(min-width: 100rem)\&quot;\n            type=\&quot;image\/avif\&quot;\n            srcset=\&quot;\/img\/21\/background.webp?w=1920&amp;amp;fm=avif&amp;amp;q=75&amp;amp;fit=cover&amp;amp;s=00b6c257e6c78233b51ae7149cf949d0\&quot;\n            width=\&quot;1920\&quot;\n                    \/&gt;\n                    &lt;source\n            media=\&quot;(min-width: 75rem)\&quot;\n            type=\&quot;image\/avif\&quot;\n            srcset=\&quot;\/img\/21\/background.webp?w=1600&amp;amp;fm=avif&amp;amp;q=75&amp;amp;fit=cover&amp;amp;s=b54c1a4b3f50a7012bacfb579de03b13\&quot;\n            width=\&quot;1600\&quot;\n                    \/&gt;\n                    &lt;source\n            media=\&quot;(min-width: 48rem)\&quot;\n            type=\&quot;image\/avif\&quot;\n            srcset=\&quot;\/img\/21\/background.webp?w=1200&amp;amp;fm=avif&amp;amp;q=75&amp;amp;fit=cover&amp;amp;s=526432924e8e417923255d861f91cf54\&quot;\n            width=\&quot;1200\&quot;\n                    \/&gt;\n    \n    \n                    &lt;source\n            media=\&quot;(min-width: 100rem)\&quot;\n            type=\&quot;image\/webp\&quot;\n            srcset=\&quot;\/img\/21\/background.webp?w=1920&amp;amp;q=75&amp;amp;fit=cover&amp;amp;s=fade472d8c91f5712d79ed9f4629d7a9\&quot;\n            width=\&quot;1920\&quot;\n                    \/&gt;\n                    &lt;source\n            media=\&quot;(min-width: 75rem)\&quot;\n            type=\&quot;image\/webp\&quot;\n            srcset=\&quot;\/img\/21\/background.webp?w=1600&amp;amp;q=75&amp;amp;fit=cover&amp;amp;s=46d3130fb9249ca678cb1ee0bc164256\&quot;\n            width=\&quot;1600\&quot;\n                    \/&gt;\n                    &lt;source\n            media=\&quot;(min-width: 48rem)\&quot;\n            type=\&quot;image\/webp\&quot;\n            srcset=\&quot;\/img\/21\/background.webp?w=1200&amp;amp;q=75&amp;amp;fit=cover&amp;amp;s=9cd0e790b1ac686b0656f8dfe3670e7b\&quot;\n            width=\&quot;1200\&quot;\n                    \/&gt;\n    \n    \n        &lt;img\n        src=\&quot;\/img\/21\/background.webp?w=768&amp;amp;q=75&amp;amp;fit=cover&amp;amp;s=3abd3614b48f94de250f6d7b556dd00c\&quot;\n        width=\&quot;768\&quot;\n                alt=\&quot;\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;absolute inset-0 w-full h-full object-cover\&quot;\n    \/&gt;\n&lt;\/picture&gt;\n                &lt;div class=\&quot;absolute inset-0 bg-gradient-to-b from-[rgba(79,98,191,0.51)] via-[rgba(79,98,191,0
507)] to-[rgba(79,98,191,0.48)]\&quot;&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n        \n        &lt;div class=\&quot;page-wrapper relative py-[120px] lg:py-[180px]\&quot;&gt;\n\n            \n            &lt;div class=\&quot;flex flex-col lg:flex-row lg:items-start gap-10 lg:gap-[var(--grid-gutter)]\&quot;&gt;\n\n                \n                &lt;div class=\&quot;lg:w-[380px] xl:w-[480px] lg:shrink-0 lg:pt-[90px]\&quot; data-reveal&gt;\n                    &lt;div class=\&quot;flex flex-col gap-6\&quot;&gt;\n                        &lt;div class=\&quot;flex flex-col gap-4\&quot;&gt;\n                            &lt;h2\n                                    id=\&quot;heading-community\&quot;\n                                    class=\&quot;text-heading-section text-gradient-white\&quot;\n                            &gt;Une communaut\u00e9 pr\u00eate \u00e0 agir&lt;\/h2&gt;\n\n                            &lt;p class=\&quot;text-subtitle text-white-0\/80 lg:max-w-[425px]\&quot;&gt;\n                                Chaque utilisateur peut devenir un aidant dans son quartier. Quand un animal dispara\u00eet, la communaut\u00e9 locale peut faire la diff\u00e9rence.\n                            &lt;\/p&gt;\n                        &lt;\/div&gt;\n\n                                                    &lt;a\n                                    href=\&quot;\/devenir-ambassadeur\&quot;\n                                                                        class=\&quot;btn-filled w-full lg:w-auto lg:self-start lg:px-8 no-underline\&quot;\n                            &gt;\n                                Commencer \u00e0 aider\n                                &lt;svg viewBox=\&quot;0 0 16 16\&quot; fill=\&quot;none\&quot; aria-hidden=\&quot;true\&quot; class=\&quot;size-4 shrink-0\&quot;&gt;\n                                    &lt;path stroke=\&quot;currentColor\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.333\&quot; d=\&quot;M3.333 8h9.333M8 3.333 12.667 8 8 12.666\&quot;\/&gt;\n                                &lt;\/svg&gt;\n                            &lt;\/a&gt;\n                                            &lt;\/div&gt;\n                &lt;\/div&gt;\n\n                \n                &lt;div class=\&quot;relative w-full max-w-[420px] mx-auto lg:mx-0 lg:max-w-none lg:flex-1 min-h-[620px] lg:min-h-[580px]\&quot;&gt;\n                    \n                                            &lt;div class=\&quot;absolute left-5 top-[85px] lg:top-0 w-[172px] lg:w-[278px] -rotate-[9deg] lg:-rotate-[16deg] z-0\&quot;&gt;\n                            &lt;div class=\&quot;overflow-hidden rounded-pill lg:rounded-card shadow-lg\&quot;&gt;\n                                &lt;img\n        src=\&quot;\/img\/22\/dog-large.webp?q=80&amp;amp;fit=cover&amp;amp;w=278&amp;amp;h=287&amp;amp;s=7ee2c8257c664f3cc2f58e69587aa82e\&quot;\n         srcset=\&quot;\/img\/22\/dog-large.webp?q=80&amp;amp;fit=cover&amp;amp;w=556&amp;amp;h=574&amp;amp;s=4614f1757ab21cc4522c4c9970924a9f 2x\&quot;                  width=\&quot;278\&quot;          height=\&quot;287\&quot;         alt=\&quot;\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        aria-hidden=\&quot;true\&quot; class=\&quot;w-full h-auto object-cover aspect-[278\/287]\&quot;\n    \/&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                    \n                    \n                                            &lt;div class=\&quot;absolute right-10 top-[120px] lg:left-[60px] lg:top-[280px] w-[135px] lg:w-[183px] rotate-[9deg] z-10\&quot;&gt;\n                            &lt;div class=\&quot;overflow-hidden rounded-[14px] lg:rounded-[21px] shadow-lg\&quot;&gt;\n                                &lt;img\n        src=\&quot;\/img\/23\/dog-small.webp?q=80&amp;amp;fit=cover&amp;amp;w=183&amp;amp;h=200&amp;amp;s=f2cf102b5adec07df68e931bfa222980\&quot;\n         srcset=\&quot;\/img\/23\/dog-small.webp?q=80&amp;amp;fit=cover&amp;amp;w=366&amp;amp;h=400&amp;amp;s=d18e63f5ee7f41934ab280b1c3a8d444 2x\&quot;                  width=\&quot;183\&quot;          height=\&quot;200\&quot;         alt=\&quot;\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        aria-hidden=\&quot;true\&quot; class=\&quot;w-full h-auto object-cover aspect-[183\/200]\&quot;\n    \/&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                    \n                    \n                    &lt;div\n                            class=\&quot;\n                            absolute left-0 lg:left-[120px] top-[240px] lg:top-[180px]\n                            w-full lg:w-[420px]\n                            rounded-2xl lg:rou
507nded-card overflow-hidden\n                            p-4 lg:p-12\n                            gradient-border\n                            z-20\n                        \&quot;\n                            data-reveal=\&quot;scale\&quot;\n                    &gt;\n                        &lt;div class=\&quot;flex flex-col gap-6 lg:gap-8\&quot;&gt;\n                            &lt;div class=\&quot;flex flex-col gap-2 lg:gap-3 text-white-0\&quot;&gt;\n                                &lt;p class=\&quot;font-helvetica-now-display font-bold text-[28px] lg:text-[40px] leading-[1.1] tracking-[-0.56px] lg:tracking-[-1.6px]\&quot;&gt;\n                                    Rejoignez nos partenaires\n                                &lt;\/p&gt;\n                                &lt;p class=\&quot;text-card-meta lg:w-[319px]\&quot;&gt;\n                                    Refuges, v\u00e9t\u00e9rinaires, associations : unissons nos forces pour agir plus vite.\n                                &lt;\/p&gt;\n                            &lt;\/div&gt;\n\n                                                            &lt;a\n                                        href=\&quot;\/devenir-partenaire\&quot;\n                                                                                class=\&quot;btn-filled w-full lg:w-auto lg:self-start lg:px-8 no-underline\&quot;\n                                &gt;\n                                    Devenir partenaire\n                                    &lt;svg viewBox=\&quot;0 0 16 16\&quot; fill=\&quot;none\&quot; aria-hidden=\&quot;true\&quot; class=\&quot;size-4 shrink-0\&quot;&gt;\n                                        &lt;path stroke=\&quot;currentColor\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.333\&quot; d=\&quot;M3.333 8h9.333M8 3.333 12.667 8 8 12.666\&quot;\/&gt;\n                                    &lt;\/svg&gt;\n                                &lt;\/a&gt;\n                                                    &lt;\/div&gt;\n                    &lt;\/div&gt;\n\n                    \n                                            &lt;ul\n                                class=\&quot;lg:hidden list-none\&quot;\n                                aria-hidden=\&quot;true\&quot;\n                                x-data=\&quot;{\n                                    shown: false,\n                                    async revealWhenImagesReady() {\n                                        await window.animouWaitForImages(this.$el)\n                                        this.shown = true\n                                    },\n                                }\&quot;\n                                x-intersect.once=\&quot;revealWhenImagesReady()\&quot;\n                        &gt;\n                                                            &lt;li class=\&quot;absolute flex items-center gap-3 bg-glass-fill border border-gray-10 rounded-full px-4 py-3 z-30 shadow-badge-glass backdrop-blur-sm left-[20px] top-10 rotate-[9deg]\&quot;\n                                :class=\&quot;shown ? &#039;percycms-animate animate-pill-pop anim-duration-500&#039; : &#039;opacity-0&#039;\&quot;\n                                style=\&quot;animation-delay: 0ms\&quot;\n                                &gt;\n                                                                            &lt;div class=\&quot;size-8 shrink-0 flex items-center justify-center bg-purple-15 rounded-full\&quot;&gt;\n                                            &lt;img\n            src=\&quot;https:\/\/animou-app.com\/storage\/24\/vet-icon.svg\&quot;\n            alt=\&quot;V\u00e9t\u00e9rinaire\&quot;\n            loading=\&quot;lazy\&quot;\n            class=\&quot;size-4\&quot;\n        \/&gt;\n                                            &lt;\/div&gt;\n                                                                        &lt;span class=\&quot;font-helvetica-now-display font-bold text-sm leading-[1.4] text-white-0 whitespace-nowrap\&quot;&gt;\n                                        V\u00e9t\u00e9rinaire\n                                    &lt;\/span&gt;\n                                &lt;\/li&gt;\n                                                            &lt;li class=\&quot;absolute flex items-center gap-3 bg-glass-fill border border-gray-10 rounded-full px-4 py-3 z-30 shadow-badge-glass backdrop-blur-sm right-[20px] top-[40px] rotate-[-10deg]\&quot;\n                                :class=\&quot;shown ? &#039;percycms-animate animate-pill-pop anim-duration-500&#039; : &#039;opacity-0&#039;\&quot;\n                                style=\&quot;animation-delay: 150ms\&quot;\n                                &gt;\n                                                                            &lt;div class=\&quot;size-8 shrink-0 flex items-center justify-center bg-purple-15 rounded-full\&quot;&gt;\n                                            &lt;img\n            src=\&quot;https:\/\/animou-app.com\/storage\/25\/petsafe-icon.svg\&quot;\n            alt=\&quot;Association\&quot;\n            loading=\&quot;lazy\&quot;\n            class=\&quot;size-4\&quot;\n        \/&gt;\n                                            &lt;\/div&gt;\n                                                                        &lt;span class=\&quot;font-helvetica-now-display font-bold text-sm leading-[1.4] text-white-0 whitespace-nowrap\&quot;&gt;\n                                        Association\n                                    &lt;\/span&gt;\n                                &lt;\/li&gt;\n                                                            &lt;li class=\&quot;absolute flex items-center gap-3 bg-glass-fill border border-gray-10 rounded-full px-4 py-3 z-30 shadow-badge-glass backdrop-blur-sm left-[20px] bottom-[75px] max-[380px]:bottom-[45px] rotate-[-16deg]\&quot;\n                                :class=\&quot;shown ? &#039;percycms-animate animate-pill-pop anim-duration-500&#039; : &#039;opacity-0&#039;\&quot;\n                                style=\&quot;animation-delay: 300ms\&quot;\n                                &gt;\n                                                                            &lt;div class=\&quot;size-8 shrink-0 flex items-center justify-center bg-purple-15 rounded-full\&quot;&gt;\n                                            &lt;img\n            src=\&quot;https:\/\/animou-app.com\/storage\/28\/people-icon.svg\&quot;\n            alt=\&quot;Professionnel\&quot;\n            loading=\&quot;lazy\&quot;\n            class=\&quot;size-4\&quot;\n        \/&gt;\n                                            &lt;\/div&gt;\n                                                                        &lt;span class=\&quot;font-helvetica-now-display font-bold text-sm leading-[1.4] text-white-0 whitespace-nowrap\&quot;&gt;\n                                        Professionnel\n                                    &lt;\/span&gt;\n                                &lt;\/li&gt;\n                                                            &lt;li class=\&quot;absolute flex items-center gap-3 bg-glass-fill border border-gray-10 rounded-full px-4 py-3 z-30 shadow-badge-glass backdrop-blur-sm right-[20px] bottom-[
507110px] max-[380px]:bottom-[65px] rotate-[7deg]\&quot;\n                                :class=\&quot;shown ? &#039;percycms-animate animate-pill-pop anim-duration-500&#039; : &#039;opacity-0&#039;\&quot;\n                                style=\&quot;animation-delay: 450ms\&quot;\n                                &gt;\n                                                                            &lt;div class=\&quot;size-8 shrink-0 flex items-center justify-center bg-purple-15 rounded-full\&quot;&gt;\n                                            &lt;img\n            src=\&quot;https:\/\/animou-app.com\/storage\/29\/home-icon.svg\&quot;\n            alt=\&quot;Refuge\&quot;\n            loading=\&quot;lazy\&quot;\n            class=\&quot;size-4\&quot;\n        \/&gt;\n                                            &lt;\/div&gt;\n                                                                        &lt;span class=\&quot;font-helvetica-now-display font-bold text-sm leading-[1.4] text-white-0 whitespace-nowrap\&quot;&gt;\n                                        Refuge\n                                    &lt;\/span&gt;\n                                &lt;\/li&gt;\n                                                    &lt;\/ul&gt;\n                                    &lt;\/div&gt;\n\n                \n                                    &lt;div\n                            class=\&quot;hidden lg:flex lg:w-[200px] lg:shrink-0 relative\&quot;\n                            x-data=\&quot;{\n                                shown: false,\n                                async revealWhenImagesReady() {\n                                    await window.animouWaitForImages(this.$el)\n                                    this.shown = true\n                                },\n                            }\&quot;\n                            x-intersect.once=\&quot;revealWhenImagesReady()\&quot;\n                    &gt;\n                        \n                        &lt;svg viewBox=\&quot;0 0 2 743\&quot; preserveAspectRatio=\&quot;none\&quot; fill=\&quot;none\&quot; aria-hidden=\&quot;true\&quot;\n                             class=\&quot;absolute right-4 top-0 h-full w-[2px] pointer-events-none\&quot;\n                             :class=\&quot;shown ? &#039;percycms-animate animate-fade-in-down&#039; : &#039;opacity-0&#039;\&quot;&gt;\n                            &lt;path stroke=\&quot;url(#animou-dashed-line-gradient)\&quot; stroke-dasharray=\&quot;16 16\&quot; stroke-width=\&quot;2\&quot; d=\&quot;M1 0v743\&quot;\/&gt;\n                            &lt;defs&gt;\n                                &lt;linearGradient id=\&quot;animou-dashed-line-gradient\&quot; x1=\&quot;-.5\&quot; x2=\&quot;-.5\&quot; y1=\&quot;0\&quot; y2=\&quot;743\&quot; gradientUnits=\&quot;userSpaceOnUse\&quot;&gt;\n                                    &lt;stop offset=\&quot;.074\&quot; stop-color=\&quot;#adccf6\&quot; stop-opacity=\&quot;0\&quot;\/&gt;\n                                    &lt;stop offset=\&quot;.251\&quot; stop-color=\&quot;#adccf6\&quot;\/&gt;\n                                    &lt;stop offset=\&quot;.642\&quot; stop-color=\&quot;#adccf6\&quot;\/&gt;\n                                    &lt;stop offset=\&quot;.934\&quot; stop-color=\&quot;#adccf6\&quot; stop-opacity=\&quot;0\&quot;\/&gt;\n                                &lt;\/linearGradient&gt;\n                            &lt;\/defs&gt;\n                        &lt;\/svg&gt;\n\n                        \n                        &lt;ul class=\&quot;flex flex-col items-end gap-[56px] w-full pt-[22px] list-none\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                                                            &lt;li class=\&quot;\n                                    relative flex items-center gap-4\n                                    bg-glass-fill backdrop-blur-sm border border-gray-10\n                                    rounded-full px-5 py-3\n                                \&quot;\n                                :class=\&quot;shown ? &#039;percycms-animate animate-fade-in-left anim-duration-700&#039; : &#039;opacity-0&#039;\&quot;\n                                style=\&quot;animation-delay: 200ms\&quot;\n                                &gt;\n                                                                            &lt;div class=\&quot;size-10 shrink-0 flex items-center justify-center bg-purple-15 rounded-full\&quot;&gt;\n                                            &lt;img\n            src=\&quot;https:\/\/animou-app.com\/storage\/24\/vet-icon.svg\&quot;\n            alt=\&quot;V\u00e9t\u00e9rinaire\&quot;\n            loading=\&quot;lazy\&quot;\n            class=\&quot;size-5\&quot;\n        \/&gt;\n                                            &lt;\/div&gt;\n                                                                        &lt;span class=\&quot;font-helvetica-now-display font-bold text-lg leading-[1.4] text-white-0 whitespace-nowrap\&quot;&gt;\n                                        V\u00e9t\u00e9rinaire\n                                    &lt;\/span&gt;\n                                &lt;\/li&gt;\n                                                            &lt;li class=\&quot;\n                                    relative flex items-center gap-4\n                                    bg-glass-fill backdrop-blur-sm border border-gray-10\n                                    rounded-full px-5 py-3\n                                \&quot;\n                                :class=\&quot;shown ? &#039;percycms-animate animate-fade-in-left anim-duration-700&#039; : &#039;opacity-0&#039;\&quot;\n                                style=\&quot;animation-delay: 350ms\&quot;\n                                &gt;\n                                                                            &lt;div class=\&quot;size-10 shrink-0 flex items-center justify-center bg-purple-15 rounded-full\&quot;&gt;\n                                            &lt;img\n            src=\&quot;https:\/\/animou-app.com\/storage\/25\/petsafe-icon.svg\&quot;\n            alt=\&quot;Association\&quot;\n            loading=\&quot;lazy\&quot;\n            class=\&quot;size-5\&quot;\n        \/&gt;\n                                            &lt;\/div&gt;\n                                                                        &lt;span class=\&quot;font-helvetica-now-display font-bold text-lg leading-[1.4] text-white-0 whitespace-nowrap\&quot;&gt;\n                                        Association\n                                    &lt;\/span&gt;\n                                &lt;\/li&gt;\n                                                            &lt;li class=\&quot;\n                                    relative flex items-center gap-4\n                                    bg-glass-fill backdrop-blur-sm border border-gray-10\n                                    rounded-full px-5 py-3\n                                \&quot;\n                                :class=\&quot;shown ? &#039;percycms-animate animate-fade-in-left anim-duration-700&#039; : &#039;opacity-0&#039;\&quot;\n                                style=\&quot;animation-delay: 500ms\&quot;\n                                &gt;\n                                                                            &lt;div class=\&quot;size-10 shrink-0 flex items-center justify-center bg-purple-15 rounded-full\&quot;&gt;\n                                            &lt;img\n            src=\&quot;https:\/\/animou-app.com\/storage\/28\/people-icon.svg\&quot;\n            alt=\&quot;Professionnel\&quot;\n            loading=\&quot;lazy\&quot;\n            class=\&quot;size-5\&quot;\n        \/&gt;\n                                            &lt;\/div&gt;\n                                                                        &lt;span class=\&quot;font-helvetica-now-display font-bold text-lg leading-[1.4] text-white-0 whitespace-nowrap\&quot;&gt;\n                                        Professionnel\n                                    &lt;\/span&gt;\n                                &lt;\/li&gt;\n                                                            &lt;li class=\&quot;\n                                    relative flex items-center gap-4\n                                    bg-glass-fill backdrop-blur-sm border border-gray-10\n                                    rounded-full px-5 py-3\n                                \&quot;\n                                :class=\&quot;shown ? &#039;percycms-animate animate-fade-in-left anim-duration-700&#039; : &#039;opacity-0&#039;\&quot;\n                                style=\&quot;animation-delay: 650ms\&quot;\n                                &gt;\n                                                                            &lt;div class=\&quot;size-10 shrink-0 flex items-center justify-center bg-purple-15 rounded-full\&quot;&gt;\n                                            &lt;img\n            src=\&quot;https:\/\/animou-app.com\/storage\/29\/home-icon.svg\&quot;\n            alt=\&quot;Refuge\&quot;\n            loading=\&quot;lazy\&quot;\n            class=\&quot;size-5\&quot;\n        \/&gt;\n                                            &lt;\/div&gt;\n                                                                        &lt;span class=\&quot;font-helvetica-now-display font-bold text-lg leading-[1.4] text-white-0 whitespace-nowrap\&quot;&gt;\n                                        Refuge\n                                    &lt;\/span&gt;\n                                &lt;\/li&gt;\n                                                    &lt;\/ul&gt;\n                    &lt;\/div&gt;\n                            &lt;\/div&gt;\n            \n        &lt;\/div&gt;\n    &lt;\/div&gt;\n    \n\n&lt;\/section&gt;\n&lt;section\n        class=\&quot;page-section page-section--flush-top\&quot;\n             aria-labelledby=\&quot;heading-partner-showcase\&quot;\n    &gt;\n            &lt;div class=\&quot;page-wrapper\&quot;&gt;\n            &lt;h2 id=\&quot;heading-partner-showcase\&quot; class=\&quot;sr-only\&quot;&gt;Ils soutiennent d\u00e9j\u00e0 le r\u00e9seau&lt;\/h2&gt;\n\n    &lt;div\n        class=\&quot;flex flex-col gap-[30px] pb-[60px] lg:flex-row\&quot;\n        x-data=\&quot;{\n            logoCount: 8,\n            quoteCount: 5,\n            logoSlots: 3,\n            quoteSlots: 2,\n            logoIndexes: JSON.parse(&#039;[0,1,2]&#039;),\n            quoteIndexes: JSON.parse(&#039;[0,1]&#039;),\n            nextLogo: 3,\n            nextQuote: 2,\n            paused: false,\n            timer: null,\n            cursor: 0,\n            order: [],\n            revealed: false,\n            visible: false,\n            reducedMotion: false,\n            sequence: JSON.parse(&#039;[[\\u0022logo\\u0022,0],[\\u0022quote\\u0022,0],[\\u0022logo\\u0022,1],[\\u0022logo\\u0022,2],[\\u0022quote\\u0022,1]]&#039;),\n            logoIndex(slot) {\n                return this.logoCount ? this.logoIndexes[slot] % this.logoCount : 0\n            },\n            quoteIndex(slot) {\n                return this.quoteCount ? this.quoteIndexes[slot] % this.quoteCount : 0\n            },\n            advanceCard(type, slot) {\n                if (type === &#039;logo&#039; &amp;&amp; this.logoCount &gt; this.logoSlots) {\n                    this.logoIndexes[slot] = this.nextLogo % this.logoCount\n                    this.nextLogo++\n                }\n\n                if (type === &#039;quote&#039; &amp;&amp; this.quoteCount &gt; this.quoteSlots) {\n                    this.quoteIndexes[slot] = this.nextQuote % this.quoteCount\n                    this.nextQuote++\n                }\n            },\n            shuffle(n) {\n                const a = Array.from({ length: n }, (_, i) =&gt; i)\n                for (let i = a.length - 1; i &gt; 0; i--) {\n                    const j = Math.floor(Math.random() * (i + 1))\n                    ;[a[i], a[j]] = [a[j], a[i]]\n                }\n                return a\n            },\n            reshuffle() {\n                \/\/ New random round; keep the first pick different from the last\n                \/\/ one so no card pops twice back-to-back.\n                const last = this.order.length ? this.order[this.order.length - 1] : 
507-1\n                const next = this.shuffle(this.sequence.length)\n                if (this.sequence.length &gt; 1 &amp;&amp; next[0] === last) {\n                    ;[next[0], next[1]] = [next[1], next[0]]\n                }\n                this.order = next\n                this.cursor = 0\n            },\n            tick() {\n                if (this.paused || ! this.sequence.length) return\n\n                \/\/ Advance a single card per tick, in a random order, so only one\n                \/\/ element ever pops in\/out at a time and never in a fixed sweep.\n                if (this.cursor &gt;= this.order.length) this.reshuffle()\n                const [type, slot] = this.sequence[this.order[this.cursor]]\n                this.advanceCard(type, slot)\n                this.cursor++\n            },\n            start() {\n                this.stop()\n                if (this.visible &amp;&amp; ! this.reducedMotion) {\n                    if (! this.order.length) this.reshuffle()\n                    this.timer = window.setInterval(() =&gt; this.tick(), 2200)\n                }\n            },\n            stop() {\n                window.clearInterval(this.timer)\n                this.timer = null\n            },\n            async waitForVisibleImages() {\n                const images = Array.from(this.$el.querySelectorAll(&#039;img&#039;))\n                    .filter(image =&gt; image.offsetParent !== null)\n\n                await Promise.all(images.map(image =&gt; new Promise(resolve =&gt; {\n                    const decode = () =&gt; {\n                        if (typeof image.decode !== &#039;function&#039;) {\n                            resolve()\n                            return\n                        }\n\n                        image.decode().catch(() =&gt; {}).finally(resolve)\n                    }\n\n                    if (image.complete) {\n                        decode()\n                        return\n                    }\n\n                    image.addEventListener(&#039;load&#039;, decode, { once: true })\n                    image.addEventListener(&#039;error&#039;, resolve, { once: true })\n                })))\n            },\n            async enterViewport() {\n                this.visible = true\n                await this.waitForVisibleImages()\n                if (! this.visible) return\n\n                this.revealed = true\n                this.start()\n            },\n            leaveViewport() {\n                this.visible = false\n                this.stop()\n            },\n            destroy() {\n                this.stop()\n            },\n        }\&quot;\n        x-init=\&quot;reducedMotion = window.matchMedia(&#039;(prefers-reduced-motion: reduce)&#039;).matches\&quot;\n        x-intersect:enter.margin.-10%=\&quot;enterViewport()\&quot;\n        x-intersect:leave.margin.-10%=\&quot;leaveViewport()\&quot;\n        :class=\&quot;{\n            &#039;partner-showcase-intro-active&#039;: revealed,\n            &#039;partner-showcase-intro-pending&#039;: ! revealed,\n        }\&quot;\n        @mouseenter=\&quot;paused = true\&quot;\n        @mouseleave=\&quot;paused = false\&quot;\n    &gt;\n        \n        \n        &lt;div\n            class=\&quot;partner-showcase-intro relative flex flex-col justify-between gap-10 overflow-hidden rounded-[24px] p-5 text-white-0 lg:h-[426px] lg:w-[312px] lg:shrink-0\&quot;\n            style=\&quot;animation-delay: 0ms; background: linear-gradient(164deg, #6E7DE4 8.57%, #8290EB 52.87%, #A8B3F0 97.17%);\&quot;\n        &gt;\n            &lt;div class=\&quot;flex flex-col gap-1\&quot;&gt;\n                &lt;p class=\&quot;m-0 font-helvetica-now-display text-[72px] font-bold leading-[1.1] tracking-[-2.88px] lg:text-[100px] lg:tracking-[-4px]\&quot;&gt;19+&lt;\/p&gt;\n                &lt;p class=\&quot;m-0 font-helvetica-now-display text-[20px] leading-[1.4]\&quot;&gt;Ils soutiennent d\u00e9j\u00e0 le r\u00e9seau&lt;\/p&gt;\n            &lt;\/div&gt;\n\n            &lt;div class=\&quot;flex flex-col gap-[23px]\&quot;&gt;\n                &lt;p class=\&quot;m-0 text-[14px] leading-[1.4]\&quot;&gt;Des partenaires locaux et des associations engag\u00e9s pour le bien-\u00eatre animal partout en France&lt;\/p&gt;\n                                    &lt;a href=\&quot;\/devenir-partenaire\&quot;  class=\&quot;btn-filled w-full !text-[14px] no-underline\&quot;&gt;\n                        Voir tous nos partenaires\n                        &lt;svg viewBox=\&quot;0 0 16 16\&quot; fill=\&quot;none\&quot; aria-hidden=\&quot;true\&quot; class=\&quot;size-4 shrink-0\&quot;&gt;\n                            &lt;path stroke=\&quot;currentColor\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.333\&quot; d=\&quot;M3.333 8h9.333M8 3.333 12.667 8 8 12.666\&quot;\/&gt;\n                        &lt;\/svg&gt;\n                    &lt;\/a&gt;\n                            &lt;\/div&gt;\n        &lt;\/div&gt;\n\n        \n                    &lt;div class=\&quot;flex min-w-0 flex-1 flex-col gap-[30px] lg:h-[426px]\&quot;&gt;\n                                                                                    &lt;div class=\&quot;partner-showcase-intro relative overflow-hidden max-lg:min-h-[160px] lg:h-[160px] lg:shrink-0\&quot; style=\&quot;animation-delay: 90ms;\&quot;&gt;\n                                                                                            &lt;a\n                                     href=\&quot;https:\/\/c3po.link\/QqUrSpwysy\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer sponsored\&quot; data-track=\&quot;partner-website\&quot; data-partner-name=\&quot;Ultra Premium Direct\&quot;                                     x-show=\&quot;logoIndex(0) === 0\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(0) === 0 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                                                    &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/1\/logo\/32\/01KWW3C28R3WPHEM7T4YASZFVP.jpg\&quot; alt=\&quot;Ultra Premium Direct\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                                &lt;p class=\&quot;m-0 text-center text-[14px] leading-[1.4] text-dark-700\&quot;&gt;Alimentation premium pour chien et chat, fabriqu\u00e9e en France, vendue en direct.&lt;\/p&gt;\n                                                                    &lt;\/a&gt;\n                                                                                            &lt;div\n                                                                        x-show=\&quot;logoIndex(0) === 1\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(0) === 1 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/20\/logo\/958\/8be4f55e-c491-4cef-936a-00e558349c8b.jpg\&quot; alt=\&quot;Alma D\u00e9fense Animale\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                        &lt;\/div&gt;\n                                                                                            &lt;div\n                                                                        x-show=\&quot;logoIndex(0) === 2\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(0) === 2 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/12\/logo\/950\/a1e3833c-27b1-4159-90a7-76635
50756795bd.jpg\&quot; alt=\&quot;Chat Bonheur\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                        &lt;\/div&gt;\n                                                                                            &lt;div\n                                                                        x-show=\&quot;logoIndex(0) === 3\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(0) === 3 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/19\/logo\/957\/64068d17-3c34-45a2-8e82-d880ee20328d.png\&quot; alt=\&quot;L&amp;#039;\u00e9cole du chat\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                        &lt;\/div&gt;\n                                                                                            &lt;div\n                                                                        x-show=\&quot;logoIndex(0) === 4\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(0) === 4 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/17\/logo\/955\/007e4408-37d6-48c2-9092-2fe755b31afc.png\&quot; alt=\&quot;La Garenne de Maya\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                        &lt;\/div&gt;\n                                                                                            &lt;a\n                                     href=\&quot;https:\/\/muzon.fr\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;partner-website\&quot; data-partner-name=\&quot;Muzon\&quot;                                     x-show=\&quot;logoIndex(0) === 5\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(0) === 5 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/4\/logo\/1406\/8667929a-aacf-4fdc-ab99-dfcdbb5a7783.jpg\&quot; alt=\&quot;Muzon\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                                &lt;p class=\&quot;m-0 text-center text-[14px] leading-[1.4] text-dark-700\&quot;&gt;Concept store d&amp;#039;accessoires et d&amp;#039;alimentation pour chiens et chats.&lt;\/p&gt;\n                                                                    &lt;\/a&gt;\n                                                                                            &lt;a\n                                     href=\&quot;https:\/\/nuggetshop.fr\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;partner-website\&quot; data-partner-name=\&quot;Nugget\&quot;                                     x-show=\&quot;logoIndex(0) === 6\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(0) === 6 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/3\/logo\/55\/01KWXZZD0N8D9QVE2DDYKQT9CT.png\&quot; alt=\&quot;Nugget\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                                &lt;p class=\&quot;m-0 text-center text-[14px] leading-[1.4] text-dark-700\&quot;&gt;Concept store bordelais d&amp;#039;accessoires, soins et caf\u00e9 pour chiens et chats.&lt;\/p&gt;\n                                                                    &lt;\/a&gt;\n                                                                                            &lt;div\n                                                                        x-show=\&quot;logoIndex(0) === 7\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(0) === 7 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/14\/logo\/952\/efaaeae4-9004-47c8-84c8-59a3d647404e.png\&quot; alt=\&quot;Sowly\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                        &lt;\/div&gt;\n                                                    &lt;\/div&gt;\n                                                                                                        &lt;div class=\&quot;partner-showcase-intro relative min-h-[220px] overflow-hidden lg:min-h-0 lg:flex-1\&quot; style=\&quot;animation-delay: 180ms;\&quot;&gt;\n                                                                                            &lt;figure\n                                    x-show=\&quot;quoteIndex(0) === 0\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: quoteIndex(0) === 0 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 m-0 rounded-[20px] border border-transparent bg-blue-10 p-6 hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                                                    &gt;\n                                    &lt;svg viewBox=\&quot;0 0 32 32\&quot; fill=\&quot;none\&quot; aria-hidden=\&quot;true\&quot; class=\&quot;size-8 text-purple-400\&quot;&gt;\n                                        &lt;path fill=\&quot;currentColor\&quot; d=\&quot;M18.6893 28V18.1453C18.6893 10.54 23.664 5.38533 30.6667 4L31.9933 6.868C28.7507 8.09067 26.6667 11.7187 26.6667 14.6667H32V28H18.6893ZM0 28V18.1453C0 10.54 4.99733 5.38533 12 4L13.328 6.868C10.084 8.09067 8 11.7187 8 14.6667H13.3107V28H0Z\&quot;\/&gt;\n                                    &lt;\/svg&gt;\n                                    &lt;blockquote class=\&quot;m-0 mt-4 border-0 p-0\&quot;&gt;\n                                        &lt;p class=\&quot;m-0 line-clamp-4 max-w-[225px] font-helvetica-now-display text-[17px] leading-[1.4] text-dark-850\&quot;&gt;Animou fait partie de ces applications qui ont su allier utilit\u00e9 et amour des animaux, et \u00e7a ne s&amp;#039;improvise pas. Un partenariat naturel pour Caats, parce que quand les valeurs se rejoignent \u00e0 ce point, s&amp;#039;engager ensemble ne se discute m\u00eame pas.&lt;\/p&gt;\n                                    &lt;\/blockquote&gt;\n                                    &lt;figcaption class=\&quot;mt-3 text-[12px] leading-[1.4] text-dark-700\&quot;&gt;Caats&lt;\/figcaption&gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/9\/logo\/17\/logo.png\&quot; alt=\&quot;\&quot; width=\&quot;90\&quot; height=\&quot;72\&quot; aria-hidden=\&quot;true\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;absolute bottom-3 right-3 h-[72px] w-auto max-w-[90px] object-contain\&quot; \/&gt;\n                                                                                                                \n                                        &lt;a href=\&quot;https:\/\/caats.co\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;partner-website\&quot; data-partner-name=\&quot;Caats\&quot; aria-label=\&quot;Caats\&quot; class=\&quot;absolute inset-0 z-10\&quot;&gt;&lt;\/a&gt;\n                                                                    &lt;\/figure&gt;\n                                                                                            &lt;figure\n                                    x-show=\&quot;quoteIndex(0) === 1\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: quoteIndex(0) === 1 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 m-0 rounded-[20px] border border-transparent bg-blue-10 p-6 hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                    &lt;svg viewBox=\&quot;0 0 32 32\&quot; fill=\&quot;none\&quot; aria-hidden=\&quot;true\&quot; class=\&quot;size-8 text-purple-400\&quot;&gt;\n                                        &lt;path fill=\&quot;currentColor\&quot; d=\&quot;M18.6893 28V18.1453C18.6893 10.54 23.664 5.38533 30.6667 4L31.9933 6.868C28.7507 8.09067 26.6667 11.7187 26.6667 14.6667H32V28H18.6893ZM0 28V18.1453C0 10.54 4.99733 5.38533 12 4L13.328 6.868C10.084 8.09067 8 11.7187 8 14.6667H13.3107V28H0Z\&quot;\/&gt;\n                                    &lt;\/svg&gt;\n                                    &lt;blockquote class=\&quot;m-0 mt-4 border-0 p-0\&quot;&gt;\n                                        &lt;p class=\&quot;m-0 line-clamp-4 max-w-[225px] font-helvetica-now-display text-[17px] leading-[1.4] text-dark-850\&quot;&gt;Invoxia est fi\u00e8re d&amp;#039;\u00eatre partenaire de ce projet. Les inscrits \u00e0 la plateform
507e b\u00e9n\u00e9ficient d&amp;#039;une offre exclusive sur le Biotracker Invoxia.&lt;\/p&gt;\n                                    &lt;\/blockquote&gt;\n                                    &lt;figcaption class=\&quot;mt-3 text-[12px] leading-[1.4] text-dark-700\&quot;&gt;Invoxia&lt;\/figcaption&gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/5\/logo\/9\/logo.png\&quot; alt=\&quot;\&quot; width=\&quot;90\&quot; height=\&quot;72\&quot; aria-hidden=\&quot;true\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;absolute bottom-3 right-3 h-[72px] w-auto max-w-[90px] object-contain\&quot; \/&gt;\n                                                                                                                \n                                        &lt;a href=\&quot;https:\/\/c3po.link\/Q53hhqfbkq\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer sponsored\&quot; data-track=\&quot;partner-website\&quot; data-partner-name=\&quot;Invoxia\&quot; aria-label=\&quot;Invoxia\&quot; class=\&quot;absolute inset-0 z-10\&quot;&gt;&lt;\/a&gt;\n                                                                    &lt;\/figure&gt;\n                                                                                            &lt;figure\n                                    x-show=\&quot;quoteIndex(0) === 2\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: quoteIndex(0) === 2 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 m-0 rounded-[20px] border border-transparent bg-blue-10 p-6 hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                    &lt;svg viewBox=\&quot;0 0 32 32\&quot; fill=\&quot;none\&quot; aria-hidden=\&quot;true\&quot; class=\&quot;size-8 text-purple-400\&quot;&gt;\n                                        &lt;path fill=\&quot;currentColor\&quot; d=\&quot;M18.6893 28V18.1453C18.6893 10.54 23.664 5.38533 30.6667 4L31.9933 6.868C28.7507 8.09067 26.6667 11.7187 26.6667 14.6667H32V28H18.6893ZM0 28V18.1453C0 10.54 4.99733 5.38533 12 4L13.328 6.868C10.084 8.09067 8 11.7187 8 14.6667H13.3107V28H0Z\&quot;\/&gt;\n                                    &lt;\/svg&gt;\n                                    &lt;blockquote class=\&quot;m-0 mt-4 border-0 p-0\&quot;&gt;\n                                        &lt;p class=\&quot;m-0 line-clamp-4 max-w-[225px] font-helvetica-now-display text-[17px] leading-[1.4] text-dark-850\&quot;&gt;Un animal qui se perd, c&amp;#039;est toute une famille qui s&amp;#039;inqui\u00e8te. Tout ce qui aide \u00e0 le retrouver plus vite compte vraiment, et c&amp;#039;est pr\u00e9cis\u00e9ment ce que permet Animou. Chez Franklin, prendre soin de nos compagnons ne s&amp;#039;arr\u00eate pas \u00e0 leur gamelle : nous sommes fiers de compter parmi ses premiers partenaires.&lt;\/p&gt;\n                                    &lt;\/blockquote&gt;\n                                    &lt;figcaption class=\&quot;mt-3 text-[12px] leading-[1.4] text-dark-700\&quot;&gt;Franklin Pet Food&lt;\/figcaption&gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/7\/logo\/13\/logo.png\&quot; alt=\&quot;\&quot; width=\&quot;90\&quot; height=\&quot;72\&quot; aria-hidden=\&quot;true\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;absolute bottom-3 right-3 h-[72px] w-auto max-w-[90px] object-contain\&quot; \/&gt;\n                                                                                                                \n                                        &lt;a href=\&quot;https:\/\/c3po.link\/QhwjcrC4Cy\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;partner-website\&quot; data-partner-name=\&quot;Franklin Pet Food\&quot; aria-label=\&quot;Franklin Pet Food\&quot; class=\&quot;absolute inset-0 z-10\&quot;&gt;&lt;\/a&gt;\n                                                                    &lt;\/figure&gt;\n                                                                                            &lt;figure\n                                    x-show=\&quot;quoteIndex(0) === 3\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: quoteIndex(0) === 3 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 m-0 rounded-[20px] border border-transparent bg-blue-10 p-6 hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                    &lt;svg viewBox=\&quot;0 0 32 32\&quot; fill=\&quot;none\&quot; aria-hidden=\&quot;true\&quot; class=\&quot;size-8 text-purple-400\&quot;&gt;\n                                        &lt;path fill=\&quot;currentColor\&quot; d=\&quot;M18.6893 28V18.1453C18.6893 10.54 23.664 5.38533 30.6667 4L31.9933 6.868C28.7507 8.09067 26.6667 11.7187 26.6667 14.6667H32V28H18.6893ZM0 28V18.1453C0 10.54 4.99733 5.38533 12 4L13.328 6.868C10.084 8.09067 8 11.7187 8 14.6667H13.3107V28H0Z\&quot;\/&gt;\n                                    &lt;\/svg&gt;\n                                    &lt;blockquote class=\&quot;m-0 mt-4 border-0 p-0\&quot;&gt;\n                                        &lt;p class=\&quot;m-0 line-clamp-4 max-w-[225px] font-helvetica-now-display text-[17px] leading-[1.4] text-dark-850\&quot;&gt;Nous avons choisi de soutenir le d\u00e9veloppement de cette belle initiative solidaire, parce qu&amp;#039;ensemble, associations, refuges, b\u00e9n\u00e9voles et citoyens peuvent faire la diff\u00e9rence pour les animaux perdus.&lt;\/p&gt;\n                                    &lt;\/blockquote&gt;\n                                    &lt;figcaption class=\&quot;mt-3 text-[12px] leading-[1.4] text-dark-700\&quot;&gt;La Ligue des Animaux&lt;\/figcaption&gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/10\/logo\/945\/b39f0b9a-da25-442a-8458-95
507538808cced.png\&quot; alt=\&quot;\&quot; width=\&quot;90\&quot; height=\&quot;72\&quot; aria-hidden=\&quot;true\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;absolute bottom-3 right-3 h-[72px] w-auto max-w-[90px] object-contain\&quot; \/&gt;\n                                                                                                                \n                                        &lt;a href=\&quot;https:\/\/laliguedesanimaux.fr\/\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;partner-website\&quot; data-partner-name=\&quot;La Ligue des Animaux\&quot; aria-label=\&quot;La Ligue des Animaux\&quot; class=\&quot;absolute inset-0 z-10\&quot;&gt;&lt;\/a&gt;\n                                                                    &lt;\/figure&gt;\n                                                                                            &lt;figure\n                                    x-show=\&quot;quoteIndex(0) === 4\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: quoteIndex(0) === 4 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 m-0 rounded-[20px] border border-transparent bg-blue-10 p-6 hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                    &lt;svg viewBox=\&quot;0 0 32 32\&quot; fill=\&quot;none\&quot; aria-hidden=\&quot;true\&quot; class=\&quot;size-8 text-purple-400\&quot;&gt;\n                                        &lt;path fill=\&quot;currentColor\&quot; d=\&quot;M18.6893 28V18.1453C18.6893 10.54 23.664 5.38533 30.6667 4L31.9933 6.868C28.7507 8.09067 26.6667 11.7187 26.6667 14.6667H32V28H18.6893ZM0 28V18.1453C0 10.54 4.99733 5.38533 12 4L13.328 6.868C10.084 8.09067 8 11.7187 8 14.6667H13.3107V28H0Z\&quot;\/&gt;\n                                    &lt;\/svg&gt;\n                                    &lt;blockquote class=\&quot;m-0 mt-4 border-0 p-0\&quot;&gt;\n                                        &lt;p class=\&quot;m-0 line-clamp-4 max-w-[225px] font-helvetica-now-display text-[17px] leading-[1.4] text-dark-850\&quot;&gt;Tout ce qui permet de diffuser plus rapidement une information et de mobiliser davantage de personnes me semble int\u00e9ressant. Et c&amp;#039;est pr\u00e9cis\u00e9ment ce que cherche \u00e0 faire Animou.&lt;\/p&gt;\n                                    &lt;\/blockquote&gt;\n                                    &lt;figcaption class=\&quot;mt-3 text-[12px] leading-[1.4] text-dark-700\&quot;&gt;Le guide du chat&lt;\/figcaption&gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/11\/logo\/946\/e5deb7dd-9354-478f-9dbf-3a9b9cd0df02.jpg\&quot; alt=\&quot;\&quot; width=\&quot;90\&quot; height=\&quot;72\&quot; aria-hidden=\&quot;true\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;absolute bottom-3 right-3 h-[72px] w-auto max-w-[90px] object-contain\&quot; \/&gt;\n                                                                                                                \n                                        &lt;a href=\&quot;https:\/\/leguideduchat.fr\/\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;partner-website\&quot; data-partner-name=\&quot;Le guide du chat\&quot; aria-label=\&quot;Le guide du chat\&quot; class=\&quot;absolute inset-0 z-10\&quot;&gt;&lt;\/a&gt;\n                                                                    &lt;\/figure&gt;\n                                                    &lt;\/div&gt;\n                                                &lt;\/div&gt;\n                    &lt;div class=\&quot;flex min-w-0 flex-1 flex-col gap-[30px] lg:h-[426px]\&quot;&gt;\n                                                            &lt;div class=\&quot;partner-showcase-intro relative min-h-0 overflow-hidden rounded-[20px] max-lg:aspect-[4\/3] lg:flex-1\&quot; style=\&quot;
507animation-delay: 270ms;\&quot;&gt;\n                            &lt;img\n        src=\&quot;\/img\/168\/partners-photo-4c82573d24f6.webp?q=80&amp;amp;fit=cover&amp;amp;w=500&amp;amp;h=480&amp;amp;s=5f03a98c5d47fddbe6abc036998274cd\&quot;\n         srcset=\&quot;\/img\/168\/partners-photo-4c82573d24f6.webp?q=80&amp;amp;fit=cover&amp;amp;w=1000&amp;amp;h=960&amp;amp;s=cad9b57f3af53774414e3376cb192a46 2x\&quot;                  width=\&quot;500\&quot;          height=\&quot;480\&quot;         alt=\&quot;Un chien attentif sous un arbre en fleurs\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;absolute inset-0 size-full object-cover\&quot;\n    \/&gt;\n                        &lt;\/div&gt;\n                                                                                                        &lt;div class=\&quot;partner-showcase-intro relative overflow-hidden max-lg:min-h-[160px] lg:h-[160px] lg:shrink-0\&quot; style=\&quot;animation-delay: 360ms;\&quot;&gt;\n                                                                                            &lt;a\n                                     href=\&quot;https:\/\/c3po.link\/QqUrSpwysy\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer sponsored\&quot; data-track=\&quot;partner-website\&quot; data-partner-name=\&quot;Ultra Premium Direct\&quot;                                     x-show=\&quot;logoIndex(1) === 0\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(1) === 0 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/1\/logo\/32\/01KWW3C28R3WPHEM7T4YASZFVP.jpg\&quot; alt=\&quot;Ultra Premium Direct\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                                &lt;p class=\&quot;m-0 text-center text-[14px] leading-[1.4] text-dark-700\&quot;&gt;Alimentation premium pour chien et chat, fabriqu\u00e9e en France, vendue en direct.&lt;\/p&gt;\n                                                                    &lt;\/a&gt;\n                                                                                            &lt;div\n                                                                        x-show=\&quot;logoIndex(1) === 1\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(1) === 1 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                                                    &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/20\/logo\/958\/8be4f55e-c491-4cef-936a-00e558349c8b.jpg\&quot; alt=\&quot;Alma D\u00e9fense Animale\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                        &lt;\/div&gt;\n                                                                                            &lt;div\n                                                                        x-show=\&quot;logoIndex(1) === 2\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(1) === 2 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/12\/logo\/950\/a1e3833c-27b1-4159-90a7-76635
50756795bd.jpg\&quot; alt=\&quot;Chat Bonheur\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                        &lt;\/div&gt;\n                                                                                            &lt;div\n                                                                        x-show=\&quot;logoIndex(1) === 3\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(1) === 3 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/19\/logo\/957\/64068d17-3c34-45a2-8e82-d880ee20328d.png\&quot; alt=\&quot;L&amp;#039;\u00e9cole du chat\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                        &lt;\/div&gt;\n                                                                                            &lt;div\n                                                                        x-show=\&quot;logoIndex(1) === 4\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(1) === 4 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/17\/logo\/955\/007e4408-37d6-48c2-9092-2fe755b31afc.png\&quot; alt=\&quot;La Garenne de Maya\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                        &lt;\/div&gt;\n                                                                                            &lt;a\n                                     href=\&quot;https:\/\/muzon.fr\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;partner-website\&quot; data-partner-name=\&quot;Muzon\&quot;                                     x-show=\&quot;logoIndex(1) === 5\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(1) === 5 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/4\/logo\/1406\/8667929a-aacf-4fdc-ab99-dfcdbb5a7783.jpg\&quot; alt=\&quot;Muzon\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                                &lt;p class=\&quot;m-0 text-center text-[14px] leading-[1.4] text-dark-700\&quot;&gt;Concept store d&amp;#039;accessoires et d&amp;#039;alimentation pour chiens et chats.&lt;\/p&gt;\n                                                                    &lt;\/a&gt;\n                                                                                            &lt;a\n                                     href=\&quot;https:\/\/nuggetshop.fr\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;partner-website\&quot; data-partner-name=\&quot;Nugget\&quot;                                     x-show=\&quot;logoIndex(1) === 6\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(1) === 6 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/3\/logo\/55\/01KWXZZD0N8D9QVE2DDYKQT9CT.png\&quot; alt=\&quot;Nugget\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                                &lt;p class=\&quot;m-0 text-center text-[14px] leading-[1.4] text-dark-700\&quot;&gt;Concept store bordelais d&amp;#039;accessoires, soins et caf\u00e9 pour chiens et chats.&lt;\/p&gt;\n                                                                    &lt;\/a&gt;\n                                                                                            &lt;div\n                                                                        x-show=\&quot;logoIndex(1) === 7\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(1) === 7 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/14\/logo\/952\/efaaeae4-9004-47c8-84c8-59a3d647404e.png\&quot; alt=\&quot;Sowly\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                        &lt;\/div&gt;\n                                                    &lt;\/div&gt;\n                                                &lt;\/div&gt;\n                    &lt;div class=\&quot;flex min-w-0 flex-1 flex-col gap-[30px] lg:h-[426px]\&quot;&gt;\n                                                                                    &lt;div class=\&quot;partner-showcase-intro relative overflow-hidden max-lg:min-h-[160px] lg:h-[160px] lg:shrink-0\&quot; style=\&quot;animation-delay: 450ms;\&quot;&gt;\n                                                                                            &lt;a\n                                     href=\&quot;https:\/\/c3po.link\/QqUrSpwysy\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer sponsored\&quot; data-track=\&quot;partner-website\&quot; data-partner-name=\&quot;Ultra Premium Direct\&quot;                                     x-show=\&quot;logoIndex(2) === 0\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(2) === 0 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/1\/logo\/32\/01KWW3C28R3WPHEM7T4YASZFVP.jpg\&quot; alt=\&quot;Ultra Premium Direct\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                                &lt;p class=\&quot;m-0 text-center text-[14px] leading-[1.4] text-dark-700\&quot;&gt;Alimentation premium pour chien et chat, fabriqu\u00e9e en France, vendue en direct.&lt;\/p&gt;\n                                                                    &lt;\/a&gt;\n                                                                                            &lt;div\n                                                                        x-show=\&quot;logoIndex(2) === 1\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(2) === 1 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/20\/logo\/958\/8be4f55e-c491-4cef-936a-00e558349c8b.jpg\&quot; alt=\&quot;Alma D\u00e9fense Animale\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                        &lt;\/div&gt;\n                                                                                            &lt;div\n                                                                        x-show=\&quot;logoIndex(2) === 2\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(2) === 2 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                                                    &gt;\n           
507                                                                 &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/12\/logo\/950\/a1e3833c-27b1-4159-90a7-7663556795bd.jpg\&quot; alt=\&quot;Chat Bonheur\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                        &lt;\/div&gt;\n                                                                                            &lt;div\n                                                                        x-show=\&quot;logoIndex(2) === 3\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(2) === 3 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/19\/logo\/957\/64068d17-3c34-45a2-8e82-d880ee20328d.png\&quot; alt=\&quot;L&amp;#039;\u00e9cole du chat\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                        &lt;\/div&gt;\n                                                                                            &lt;div\n                                                                        x-show=\&quot;logoIndex(2) === 4\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(2) === 4 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/17\/logo\/955\/007e4408-37d6-48c2-9092-2fe755b31afc.png\&quot; alt=\&quot;La Garenne de Maya\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                        &lt;\/div&gt;\n                                                                                            &lt;a\n                                     href=\&quot;https:\/\/muzon.fr\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;partner-website\&quot; data-partner-name=\&quot;Muzon\&quot;                                     x-show=\&quot;logoIndex(2) === 5\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(2) === 5 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/4\/logo\/1406\/8667929a-aacf-4fdc-ab99-dfcdbb5a7783.jpg\&quot; alt=\&quot;Muzon\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                                &lt;p class=\&quot;m-0 text-center text-[14px] leading-[1.4] text-dark-700\&quot;&gt;Concept store d&amp;#039;accessoires et d&amp;#039;alimentation pour chiens et chats.&lt;\/p&gt;\n                                                                    &lt;\/a&gt;\n                                                                                            &lt;a\n                                     href=\&quot;https:\/\/nuggetshop.fr\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;partner-website\&quot; data-partner-name=\&quot;Nugget\&quot;                                     x-show=\&quot;logoIndex(2) === 6\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(2) === 6 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/3\/logo\/55\/01KWXZZD0N8D9QVE2DDYKQT9CT.png\&quot; alt=\&quot;Nugget\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                                &lt;p class=\&quot;m-0 text-center text-[14px] leading-[1.4] text-dark-700\&quot;&gt;Concept store bordelais d&amp;#039;accessoires, soins et caf\u00e9 pour chiens et chats.&lt;\/p&gt;\n                                                                    &lt;\/a&gt;\n                                                                                            &lt;div\n                                                                        x-show=\&quot;logoIndex(2) === 7\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: logoIndex(2) === 7 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/14\/logo\/952\/efaaeae4-9004-47c8-84c8-59a3d647404e.png\&quot; alt=\&quot;Sowly\&quot; width=\&quot;120\&quot; height=\&quot;48\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;h-[48px] w-auto max-w-[70%] object-contain\&quot; \/&gt;\n                                                                                                        &lt;\/div&gt;\n                                                    &lt;\/div&gt;\n                                                                                                        &lt;div class=\&quot;partner-showcase-intro relative min-h-[220px] overflow-hidden lg:min-h-0 lg:flex-1\&quot; style=\&quot;animation-delay: 540ms;\&quot;&gt;\n                                                                                            &lt;figure\n                                    x-show=\&quot;quoteIndex(1) === 0\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: quoteIndex(1) === 0 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 m-0 rounded-[20px] border border-transparent bg-blue-10 p-6 hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                    &lt;svg viewBox=\&quot;0 0 32 32\&quot; fill=\&quot;none\&quot; aria-hidden=\&quot;true\&quot; class=\&quot;size-8 text-purple-400\&quot;&gt;\n                                        &lt;path fill=\&quot;currentColor\&quot; d=\&quot;M18.6893 28V18.1453C18.6893 10.54 23.664 5.38533 30.6667 4L31.9933 6.868C28.7507 8.09067 26.6667 11.7187 26.6667 14.6667H32V28H18.6893ZM0 28V18.1453C0 10.54 4.99733 5.38533 12 4L13.328 6.868C10.084 8.09067 8 11.7187 8 14.6667H13.3107V28H0Z\&quot;\/&gt;\n                                    &lt;\/svg&gt;\n                                    &lt;blockquote class=\&quot;m-0 mt-4 border-0 p-0\&quot;&gt;\n                                        &lt;p class=\&quot;m-0 line-clamp-4 max-w-[225px] font-helvetica-now-display text-[17px] leading-[1.4] text-dark-850\&quot;&gt;Animou fait partie de ces applications qui ont su allier utilit\u00e9 et amour des animaux, et \u00e7a ne s&amp;#039;improvise pas. Un partenariat naturel pour Caats, parce que quand les valeurs se rejoignent \u00e0 ce point, s&amp;#039;engager ensemble ne se discute m\u00eame pas.&lt;\/p&gt;\n                                    &lt;\/blockquote&gt;\n                                    &lt;figcaption class=\&quot;mt-3 text-[12px] leading-[1.4] text-dark-700\&quot;&gt;Caats&lt;\/figcaption&gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/9\/logo\/17\/logo.png\&quot; alt=\&quot;\&quot; width=\&quot;90\&quot; height=\&quot;72\&quot; aria-hidden=\&quot;true\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;absolute bottom-3 right-3 h-[72px] w-auto max-w-[90px] object-contain\&quot; \/&gt;\n                                                                                                                \n                                        &lt;a href=\&quot;https:\/\/caats.co\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;partner-website\&quot; data-partner-name=\&quot;Caats\&quot; aria-label=\&quot;Caats\&quot; class=\&quot;absolute inset-0 z-10\&quot;&gt;&lt;\/a&gt;\n                                                                    &lt;\/figure&gt;\n                                                                                            &lt;figure\n                                    x-show=\&quot;quoteIndex(1) === 1\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: quoteIndex(1) === 1 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 m-0 rounded-[20px] border border-transparent bg-blue-10 p-6 hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                                                    &gt;\n                                    &lt;svg viewBox=\&quot;0 0 32 32\&quot; fill=\&quot;none\&quot; aria-hidden=\&quot;true\&quot; class=\&quot;size-8 text-purple-400\&quot;&gt;\n                                        &lt;path fill=\&quot;currentColor\&quot; d=\&quot;M18.6893 28V18.1453C18.6893 10.54 23.664 5.38533 30.6667 4L31.9933 6.868C28.7507 8.09067 26.6667 11.7187 26.6667 14.6667H32V28H18.6893ZM0 28V18.1453C0 10.54 4.99733 5.38533 12 4L13.328 6.868C10.084 8.09067 8 11.7187 8 14.6667H13.3107V28H0Z\&quot;\/&gt;\n                                    &lt;\/svg&gt;\n                                    &lt;blockquote class=\&quot;m-0 mt-4 border-0 p-0\&quot;&gt;\n                                        &lt;p class=\&quot;m-0 line-clamp-4 max-w-[225px] font-hel
507vetica-now-display text-[17px] leading-[1.4] text-dark-850\&quot;&gt;Invoxia est fi\u00e8re d&amp;#039;\u00eatre partenaire de ce projet. Les inscrits \u00e0 la plateforme b\u00e9n\u00e9ficient d&amp;#039;une offre exclusive sur le Biotracker Invoxia.&lt;\/p&gt;\n                                    &lt;\/blockquote&gt;\n                                    &lt;figcaption class=\&quot;mt-3 text-[12px] leading-[1.4] text-dark-700\&quot;&gt;Invoxia&lt;\/figcaption&gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/5\/logo\/9\/logo.png\&quot; alt=\&quot;\&quot; width=\&quot;90\&quot; height=\&quot;72\&quot; aria-hidden=\&quot;true\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;absolute bottom-3 right-3 h-[72px] w-auto max-w-[90px] object-contain\&quot; \/&gt;\n                                                                                                                \n                                        &lt;a href=\&quot;https:\/\/c3po.link\/Q53hhqfbkq\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer sponsored\&quot; data-track=\&quot;partner-website\&quot; data-partner-name=\&quot;Invoxia\&quot; aria-label=\&quot;Invoxia\&quot; class=\&quot;absolute inset-0 z-10\&quot;&gt;&lt;\/a&gt;\n                                                                    &lt;\/figure&gt;\n                                                                                            &lt;figure\n                                    x-show=\&quot;quoteIndex(1) === 2\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: quoteIndex(1) === 2 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 m-0 rounded-[20px] border border-transparent bg-blue-10 p-6 hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                    &lt;svg viewBox=\&quot;0 0 32 32\&quot; fill=\&quot;none\&quot; aria-hidden=\&quot;true\&quot; class=\&quot;size-8 text-purple-400\&quot;&gt;\n                                        &lt;path fill=\&quot;currentColor\&quot; d=\&quot;M18.6893 28V18.1453C18.6893 10.54 23.664 5.38533 30.6667 4L31.9933 6.868C28.7507 8.09067 26.6667 11.7187 26.6667 14.6667H32V28H18.6893ZM0 28V18.1453C0 10.54 4.99733 5.38533 12 4L13.328 6.868C10.084 8.09067 8 11.7187 8 14.6667H13.3107V28H0Z\&quot;\/&gt;\n                                    &lt;\/svg&gt;\n                                    &lt;blockquote class=\&quot;m-0 mt-4 border-0 p-0\&quot;&gt;\n                                        &lt;p class=\&quot;m-0 line-clamp-4 max-w-[225px] font-helvetica-now-display text-[17px] leading-[1.4] text-dark-850\&quot;&gt;Un animal qui se perd, c&amp;#039;est toute une famille qui s&amp;#039;inqui\u00e8te. Tout ce qui aide \u00e0 le retrouver plus vite compte vraiment, et c&amp;#039;est pr\u00e9cis\u00e9ment ce que permet Animou. Chez Franklin, prendre soin de nos compagnons ne s&amp;#039;arr\u00eate pas \u00e0 leur gamelle : nous sommes fiers de compter parmi ses premiers partenaires.&lt;\/p&gt;\n                                    &lt;\/blockquote&gt;\n                                    &lt;figcaption class=\&quot;mt-3 text-[12px] leading-[1.4] text-dark-700\&quot;&gt;Franklin Pet Food&lt;\/figcaption&gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/7\/logo\/13\/logo.png\&quot; alt=\&quot;\&quot; width=\&quot;90\&quot; height=\&quot;72\&quot; aria-hidden=\&quot;true\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;absolute bottom-3 right-3 h-[72px] w-auto max-w-[90px] object-contain\&quot; \/&gt;\n                                                                                                                \n                                        &lt;a href=\&quot;https:\/\/c3po.link\/QhwjcrC4Cy\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;partner-website\&quot; data-partner-name=\&quot;Franklin Pet Food\&quot; aria-label=\&quot;Franklin Pet Food\&quot; class=\&quot;absolute inset-0 z-10\&quot;&gt;&lt;\/a&gt;\n                                                                    &lt;\/figure&gt;\n                                                                                            &lt;figure\n                                    x-show=\&quot;quoteIndex(1) === 3\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: quoteIndex(1) === 3 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 m-0 rounded-[20px] border border-transparent bg-blue-10 p-6 hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                    &lt;svg viewBox=\&quot;0 0 32 32\&quot; fill=\&quot;none\&quot; aria-hidden=\&quot;true\&quot; class=\&quot;size-8 text-purple-400\&quot;&gt;\n                                        &lt;path fill=\&quot;currentColor\&quot; d=\&quot;M18.6893 28V18.1453C18.6893 10.54 23.664 5.38533 30.6667 4L31.9933 6.868C28.7507 8.09067 26.6667 11.7187 26.6667 14.6667H32V28H18.6893ZM0 28V18.1453C0 10.54 4.99733 5.38533 12 4L13.328 6.868C10.084 8.09067 8 11.7187 8 14.6667H13.3107V28H0Z\&quot;\/&gt;\n                                    &lt;\/svg&gt;\n                                    &lt;blockquote class=\&quot;m-0 mt-4 border-0 p-0\&quot;&gt;\n                                        &lt;p class=\&quot;m-0 line-clamp-4 max-w-[225px] font-helvetica-now-display text-[17px] leading-[1.4] text-dark-850\&quot;&gt;Nous avons choisi de soutenir le d\u00e9veloppement de cette belle initiative solidaire, parce qu&amp;#039;ensemble, associations, refuges, b\u00e9n\u00e9voles et citoyens peuvent faire la diff\u00e9rence pour les animaux perdus.&lt;\/p&gt;\n                                    &lt;\/blockquote&gt;\n                                    &lt;figcaption class=\&quot;mt-3 text-[12px] leading-[1.4] text-dark-700\&quot;&gt;La Ligue des Animaux&lt;\/figcaption&gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/10\/logo\/945\/b39f0b9a-da25-442a-8458-95
507538808cced.png\&quot; alt=\&quot;\&quot; width=\&quot;90\&quot; height=\&quot;72\&quot; aria-hidden=\&quot;true\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;absolute bottom-3 right-3 h-[72px] w-auto max-w-[90px] object-contain\&quot; \/&gt;\n                                                                                                                \n                                        &lt;a href=\&quot;https:\/\/laliguedesanimaux.fr\/\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;partner-website\&quot; data-partner-name=\&quot;La Ligue des Animaux\&quot; aria-label=\&quot;La Ligue des Animaux\&quot; class=\&quot;absolute inset-0 z-10\&quot;&gt;&lt;\/a&gt;\n                                                                    &lt;\/figure&gt;\n                                                                                            &lt;figure\n                                    x-show=\&quot;quoteIndex(1) === 4\&quot;\n                                    x-transition:enter=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:enter-start=\&quot;partner-showcase-card-enter\&quot;\n                                    x-transition:enter-end=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave=\&quot;partner-showcase-card-transition\&quot;\n                                    x-transition:leave-start=\&quot;partner-showcase-card-visible\&quot;\n                                    x-transition:leave-end=\&quot;partner-showcase-card-leave\&quot;\n                                    :class=\&quot;{ &#039;z-10&#039;: quoteIndex(1) === 4 }\&quot;\n                                    class=\&quot;partner-showcase-card-face absolute inset-0 m-0 rounded-[20px] border border-transparent bg-blue-10 p-6 hover:border-purple-100 hover:bg-purple-50\/40\&quot;\n                                     style=\&quot;display: none;\&quot;                                 &gt;\n                                    &lt;svg viewBox=\&quot;0 0 32 32\&quot; fill=\&quot;none\&quot; aria-hidden=\&quot;true\&quot; class=\&quot;size-8 text-purple-400\&quot;&gt;\n                                        &lt;path fill=\&quot;currentColor\&quot; d=\&quot;M18.6893 28V18.1453C18.6893 10.54 23.664 5.38533 30.6667 4L31.9933 6.868C28.7507 8.09067 26.6667 11.7187 26.6667 14.6667H32V28H18.6893ZM0 28V18.1453C0 10.54 4.99733 5.38533 12 4L13.328 6.868C10.084 8.09067 8 11.7187 8 14.6667H13.3107V28H0Z\&quot;\/&gt;\n                                    &lt;\/svg&gt;\n                                    &lt;blockquote class=\&quot;m-0 mt-4 border-0 p-0\&quot;&gt;\n                                        &lt;p class=\&quot;m-0 line-clamp-4 max-w-[225px] font-helvetica-now-display text-[17px] leading-[1.4] text-dark-850\&quot;&gt;Tout ce qui permet de diffuser plus rapidement une information et de mobiliser davantage de personnes me semble int\u00e9ressant. Et c&amp;#039;est pr\u00e9cis\u00e9ment ce que cherche \u00e0 faire Animou.&lt;\/p&gt;\n                                    &lt;\/blockquote&gt;\n                                    &lt;figcaption class=\&quot;mt-3 text-[12px] leading-[1.4] text-dark-700\&quot;&gt;Le guide du chat&lt;\/figcaption&gt;\n                                                                            &lt;img src=\&quot;https:\/\/media.animou-app.com\/partners\/11\/logo\/946\/e5deb7dd-9354-478f-9dbf-3a9b9cd0df02.jpg\&quot; alt=\&quot;\&quot; width=\&quot;90\&quot; height=\&quot;72\&quot; aria-hidden=\&quot;true\&quot; loading=\&quot;lazy\&quot; decoding=\&quot;async\&quot; class=\&quot;absolute bottom-3 right-3 h-[72px] w-auto max-w-[90px] object-contain\&quot; \/&gt;\n                                                                                                                \n                                        &lt;a href=\&quot;https:\/\/leguideduchat.fr\/\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;partner-website\&quot; data-partner-name=\&quot;Le guide du chat\&quot; aria-label=\&quot;Le guide du chat\&quot; class=\&quot;absolute inset-0 z-10\&quot;&gt;&lt;\/a&gt;\n                                                                    &lt;\/figure&gt;\n                                                    &lt;\/div&gt;\n                                                &lt;\/div&gt;\n            &lt;\/div&gt;\n\n    &lt;div class=\&quot;hidden lg:block pointer-events-none pt-[70px]\&quot;&gt;\n    &lt;div x-data=\&quot;sectionNav({ inheritPrevious: true })\&quot;\n     class=\&quot;transition-opacity duration-300\&quot;\n     :style=\&quot;&#039;opacity: &#039;
507 + opacity\&quot;\n     x-cloak&gt;\n    &lt;div class=\&quot;w-[425px]\&quot;&gt;\n        &lt;div class=\&quot;flex items-center justify-end gap-3 font-helvetica-now-display text-lg leading-[1.4] mb-[20px] text-purple-500\&quot;&gt;\n            &lt;span class=\&quot;tabular-nums\&quot; x-text=\&quot;number\&quot;&gt;&lt;\/span&gt;\n            &lt;span x-text=\&quot;label\&quot;&gt;&lt;\/span&gt;\n        &lt;\/div&gt;\n        &lt;div class=\&quot;relative\&quot;&gt;\n            &lt;div class=\&quot;h-px w-full rounded-[1px]\&quot;\n                 style=\&quot;background: linear-gradient(to right, rgba(127,121,209,0) 0%, #7F79D1 100%);\&quot;&gt;&lt;\/div&gt;\n            &lt;div class=\&quot;absolute top-1\/2 -translate-y-1\/2 transition-[left] duration-300 ease-out will-change-[left,opacity]\&quot;\n                 :style=\&quot;&#039;left: &#039; + arrowLeft + &#039;px&#039;\&quot;&gt;\n                &lt;div class=\&quot;flex items-center justify-center h-[33px] px-4 rounded-full bg-purple-10 text-purple-500\&quot;&gt;\n                    &lt;svg width=\&quot;18\&quot; height=\&quot;18\&quot;
507 viewBox=\&quot;0 0 24 24\&quot; fill=\&quot;none\&quot;&gt;\n                        &lt;path d=\&quot;M8.91 19.92L15.43 13.4C16.2 12.63 16.2 11.37 15.43 10.6L8.91 4.08\&quot;\n                              stroke=\&quot;currentColor\&quot; stroke-width=\&quot;1.5\&quot; stroke-miterlimit=\&quot;10\&quot;\n                              stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                    &lt;\/svg&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n        &lt;\/div&gt;\n    \n\n&lt;\/section&gt;\n&lt;section\n     id=\&quot;commitment\&quot;     class=\&quot;page-section\&quot;\n            data-viewport-motion\n        x-data=\&quot;{ viewportMotionActive: false }\&quot;\n        x-intersect:enter.margin.-10%=\&quot;viewportMotionActive = true\&quot;\n        x-intersect:leave.margin.-10%=\&quot;viewportMotionActive = false\&quot;\n        :class=\&quot;{\n            &#039;viewport-motion-active&#039;: viewportMotionActive,\n            &#039;viewport-motion-pending&#039;: ! viewportMotionActive,\n        }\&quot;\n         data-section-label=\&quot;Notre engagement\&quot;      aria-labelledby=\&quot;heading-commitment\&quot;\n    &gt;\n            &lt;div class=\&quot;page-wrapper\&quot;&gt;\n            &lt;div data-reveal class=\&quot;flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between lg:gap-0\&quot;&gt;\n        &lt;h2\n                id=\&quot;heading-commitment\&quot;\n                class=\&quot;text-heading-section text-dark-850 lg:w-[440px] lg:shrink-0\&quot;\n        &gt;\n            &lt;span&gt;La solidarit\u00e9&lt;\/span&gt;\n            &lt;br aria-hidden=\&quot;true\&quot;&gt;\n            &lt;span&gt;ne se vend pas&lt;\/span&gt;\n        &lt;\/h2&gt;\n        &lt;p class=\&quot;text-body text-dark-700 lg:w-[273px] lg:shrink-0 lg:py-2\&quot;&gt;\n            Parce que la d\u00e9tresse de perdre un animal ne devrait jamais devenir une opportunit\u00e9 commerciale.\n        &lt;\/p&gt;\n    &lt;\/div&gt;\n\n    \n    &lt;div data-reveal-group class=\&quot;grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6 mt-10 lg:mt-16\&quot;&gt;\n                                    \n                &lt;div class=\&quot;relative h-[385px] lg:h-[723px] bg-blue-10 rounded-2xl lg:rounded-3xl overflow-hidden\&quot; x-data=\&quot;{ shown: false }\&quot; x-intersect.once=\&quot;shown = true\&quot;&gt;\n                    \n                    &lt;div class=\&quot;flex flex-col gap-2 lg:gap-3 items-start absolute top-4 left-4 lg:top-10 lg:left-10 right-4 lg:right-10 z-10\&quot;&gt;\n                        &lt;p class=\&quot;font-outfit font-normal text-xl lg:text-2xl leading-[1.4] tracking-[-0.2px] lg:tracking-[-0.48px] text-dark-850 uppercase\&quot;&gt;\n                            Animou est et restera &lt;span class=\&quot;font-semibold text-purple-400\&quot;&gt;100% gratuit&lt;\/span&gt;\n                        &lt;\/p&gt;\n                        &lt;p class=\&quot;text-subtitle text-dark-700\&quot;&gt;\n                            Pas de frais cach\u00e9s. Pas de publicit\u00e9 intrusive.\n                        &lt;\/p&gt;\n                    &lt;\/div&gt;\n\n                    \n                    &lt;div class=\&quot;absolute bottom-4 lg:bottom-[100px] left-1\/2 -translate-x-1\/2 w-[326px] lg:w-[549px] h-auto pointer-events-none transition-all duration-1000 ease-out\&quot;\n                         :class=\&quot;shown ? &#039;translate-y-0 opacity-100 rotate-0&#039; : &#039;translate-y-16 opacity-0 rotate-[4deg]&#039;\&quot;&gt;\n                        &lt;svg width=\&quot;100%\&quot;
507 viewBox=\&quot;0 0 549 395\&quot; fill=\&quot;none\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot;&gt;\n                            &lt;style&gt;\n                                @keyframes float-badge {\n                                    0%, 100% { transform: translate3d(0, 0, 0); }\n                                    50% { transform: translate3d(0, calc(-8 \/ 223 * 100%), 0); }\n                                }\n                                .anim-badge {\n                                    animation: float-badge 3s ease-in-out infinite;\n                                    will-change: transform;\n                                }\n\n                                @keyframes bell-ring {\n                                    0%, 100% { transform: rotate(0deg); }\n                                    20% { transform: rotate(15deg); }\n                                    40% { transform: rotate(-10deg); }\n                                    60% { transform: rotate(5deg); }\n                                    80% { transform: rotate(-5deg); }\n                                }\n                                .anim-bell {\n                                    animation: bell-ring 2.5s ease-in-out infinite;\n                                    transform-box: fill-box;\n                                    transform-origin: top center;\n                                    will-change: transform;\n                                }\n\n                                @keyframes refresh-spin {\n                                    0%, 100% { transform: rotate(0deg); }\n                                    30% { transform: rotate(45deg); }\n                                    70% { transform: rotate(-45deg); }\n                                }\n                                .anim-refresh {\n                                    animation: refresh-spin 3.5s ease-in-out infinite;\n                                    transform-box: fill-box;\n                                    transform-origin: center;\n                                    will-change: transform;\n                                }\n\n                                @keyframes heart-beat {\n                                    0%, 100% { transform: scale(1); }\n                                    15% { transform: scale(1.15); }\n                                    30% { transform: scale(1); }\n                                    45% { transform: scale(1.15); }\n                                    60% { transform: scale(1); }\n                                }\n                                .anim-heart {\n                                    animation: heart-beat 2s ease-in-out infinite;\n                                    transform-box: fill-box;\n                                    transform-origin: center;\n                                    will-change: transform;\n                                }\n\n                                @keyframes pin-jump {\n                                    0%, 100% { transform: translateY(0); }\n                                    40% { transform: translateY(-15px) scaleY(1.05); }\n                                    50% { transform: translateY(0) scaleY(0.95); }\n                                    60% { transform: translateY(-7px); }\n                                    70% { transform: translateY(0); }\n                                }\n                                .anim-pin {\n                                    animation: pin-jump 2.5s ease-in-out infinite;\n                                    transform-box: fill-box;\n                                    transform-origin: bottom center;\n                                    will-change: transform;\n                                }\n\n                                @keyframes paw-wave {\n                                    0%, 100% { transform: rotate(0deg); }\n                                    25% { transform: rotate(15deg); }\n                                    75% { transform: rotate(-15deg); }\n                                }\n                                .anim-paw {\n                                    animation: paw-wave 3s ease-in-out infinite;\n                                    transform-box: fill-box;\n                                    transform-origin: bottom center;\n                                    will-change: transform;\n                                }\n\n                                @keyframes icon-pop {\n                                    0%, 100% { transform: scale(1); }\n                                    50% { transform: scale(1.1) rotate(5deg); }\n                                }
507\n                                .anim-pop {\n                                    animation: icon-pop 3.5s ease-in-out infinite;\n                                    transform-box: fill-box;\n                                    transform-origin: center;\n                                    will-change: transform;\n                                }\n\n                                @media (prefers-reduced-motion: reduce) {\n                                    .anim-badge, .anim-bell, .anim-refresh,\n                                    .anim-heart, .anim-pin, .anim-paw, .anim-pop {\n                                        animation: none !important;\n                                    }\n                                }\n                            &lt;\/style&gt;\n                            &lt;g clip-path=\&quot;url(#clip0_3300_924)\&quot;&gt;\n                                &lt;rect x=\&quot;40\&quot; y=\&quot;72\&quot; width=\&quot;153.667\&quot; height=\&quot;139.5\&quot; rx=\&quot;16\&quot; fill=\&quot;white\&quot;\/&gt;\n                                &lt;rect x=\&quot;355.333\&quot; y=\&quot;72\&quot; width=\&quot;153.667\&quot; height=\&quot;139.5\&quot; rx=\&quot;16\&quot; fill=\&quot;white\&quot;\/&gt;\n                                &lt;rect x=\&quot;40\&quot; y=\&quot;215.5\&quot; width=\&quot;153.667\&quot; height=\&quot;139.5\&quot; rx=\&quot;16\&quot; fill=\&quot;white\&quot;\/&gt;\n                                &lt;rect x=\&quot;197.667\&quot; y=\&quot;215.5\&quot; width=\&quot;153.667\&quot; height=\&quot;139.5\&quot; rx=\&quot;16\&quot; fill=\&quot;white\&quot;\/&gt;\n                                &lt;rect x=\&quot;355.333\&quot; y=\&quot;215.5\&quot; width=\&quot;153.667\&quot; height=\&quot;139.5\&quot; rx=\&quot;16\&quot; fill=\&quot;white\&quot;\/&gt;\n\n                                &lt;!-- TOP LEFT CLUSTER --&gt;\n                                &lt;g class=\&quot;anim-paw\&quot;&gt;\n                                    &lt;path d=\&quot;M99.5543 158.292C99.0343 164.553 103.758 169.667 110.041 169.667H120.419C127.483 169.667 132.336 163.968 131.166 156.992C129.931 149.668 122.868 143.667 115.436 143.667C107.376 143.667 100.226 150.253 99.5543 158.292Z\&quot; stroke=\&quot;#E8E8FF\&quot; stroke-width=\&quot;3.29114\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;path d=\&quot;M112.685 138.25C115.676 138.25 118.101 135.825 118.101 132.834C118.101 129.842 115.676 127.417 112.685 127.417C109.693 127.417 107.268 129.842 107.268 132.834C107.268 135.825 109.693 138.25 112.685 138.25Z\&quot; stroke=\&quot;#E8E8FF\&quot; stroke-width=\&quot;3.29114\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;path d=\&quot;M127.482 140.85C129.875 140.85 131.816 138.91 131.816 136.517C131.816 134.124 129.875 132.184 127.482 132.184C125.089 132.184 123.149 134.124 123.149 136.517C123.149 138.91 125.089 140.85 127.482 140.85Z\&quot; stroke=\&quot;#E8E8FF\&quot; stroke-width=\&quot;3.29114\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;path d=\&quot;M135.5 149.517C137.295 149.517 138.75 148.062 138.75 146.267C138.75 144.472 137.295 143.017 135.5 143.017C133.705 143.017 132.25 144.472 132.25 146.267C132.25 148.062 133.705 149.517 135.5 149.517Z\&quot; stroke=\&quot;#E8E8FF\&quot; stroke-width=\&quot;3.29114\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;path d=\&quot;M98.6009 145.183C100.994 145.183 102.934 143.243 102.934 140.85C102.934 138.457 100.994 136.517 98.6009 136.517C96.2077 136.517 94.2676 138.457 94.2676 140.85C94.2676 143.243 96.2077 145.183 98.6009 145.183Z\&quot; stroke=\&quot;#E8E8FF\&quot; stroke-width=\&quot;3.29114\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;path d=\&quot;M130.483 162.456C128.5 168.882 119.677 171.521 112.209 169.217C103.982 169.09 97.4749 166.738 101.55 153.529C103.533 147.103 112.212 142.697 119.68 145.002C127.149 147.306 132.466 156.03 130.483 162.456Z\&quot; fill=\&quot;#E8E8FF\&quot;\/&gt;\n                                    &lt;circle cx=\&quot;98.5583\&quot; cy=\&quot;140.897\&quot; r=\&quot;3.29114\&quot; transform=\&quot;rotate(17.1468 98.5583 140.897)\&quot; fill=\&quot;#E8E8FF\&quot;\/&gt;\n                                    &lt;circle cx=\&quot;
507112.746\&quot; cy=\&quot;132.875\&quot; r=\&quot;4.60759\&quot; transform=\&quot;rotate(17.1468 112.746 132.875)\&quot; fill=\&quot;#E8E8FF\&quot;\/&gt;\n                                    &lt;circle cx=\&quot;127.407\&quot; cy=\&quot;136.708\&quot; r=\&quot;4.60759\&quot; transform=\&quot;rotate(17.1468 127.407 136.708)\&quot; fill=\&quot;#E8E8FF\&quot;\/&gt;\n                                    &lt;circle cx=\&quot;134.485\&quot; cy=\&quot;146.126\&quot; r=\&quot;3.62025\&quot; transform=\&quot;rotate(17.1468 134.485 146.126)\&quot; fill=\&quot;#E8E8FF\&quot;\/&gt;\n                                &lt;\/g&gt;\n\n                                &lt;!-- HEART --&gt;\n                                &lt;path d=\&quot;M439.316 163.693C439.006 165.195 438.21 166.542 437.06 167.507C435.91 168.473 434.477 169 432.998 169C431.52 169 430.087 168.473 428.937 167.507C427.787 166.542 426.991 165.195 426.681 163.693C430.881 164.166 435.116 164.166 439.316 163.693ZM433 122C436.189 122 439.279 123.148 441.745 125.249C444.211 127.35 445.901 130.275 446.527 133.525L448.527 143.921C448.937 146.05 449.942 148.004 451.418 149.539L452.827 151.003C453.332 151.529 453.693 152.185 453.872 152.905C454.051 153.624 454.042 154.381 453.845 155.095C453.648 155.81 453.27 156.456 452.751 156.968C452.233 157.479 451.592 157.837 450.895 158.004L446.172 159.139C437.505 161.222 428.495 161.222 419.828 159.139L415.105 158.004C414.408 157.837 413.767 157.479 413.249 156.968C412.73 156.456 412.352 155.81 412.155 155.095C411.958 154.381 411.949 153.624 412.128 152.905C412.307 152.185 412.668 151.529 413.173 151.003L414.585 149.536C416.062 148.001 417.068 146.046 417.476 143.918L419.48 133.521C420.106 130.273 421.795 127.35 424.26 125.25C426.724 123.15 429.813 122.001 433 122Z\&quot; fill=\&quot;#E8E8FF\&quot; class=\&quot;anim-bell\&quot;\/&gt;\n\n                                &lt;!-- CALENDAR MASK --&gt;\n                                &lt;g clip-path=\&quot;url(#clip1_3300_924)\&quot; class=\&quot;anim-refresh\&quot;&gt;\n                                    &lt;mask id=\&quot;mask0_3300_924\&quot; style=\&quot;mask-type:luminance\&quot; maskUnits=\&quot;userSpaceOnUse\&quot; x=\&quot;93\&quot; y=\&quot;262\&quot; width=\&quot;46\&quot; height=\&quot;46\&quot;&gt;\n                                        &lt;path d=\&quot;M116.083 306.167C127.728 306.167 137.167 296.728 137.167 285.083C137.167 273.439 127.728 264 116.083 264C104.439 264 95 273.439 95 285.083C95 296.728 104.439 306.167 116.083 306.167Z\&quot; fill=\&quot;white\&quot; stroke=\&quot;white\&quot; stroke-width=\&quot;3\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                        &lt;path d=\&quot;M126.142 288.246C124.799 292.522 120.804 295.625 116.083 295.625C111.363 295.625 107.367 292.522 106.024 288.246V294.571M126.142 275.596V281.921C124.799 277.644 120.804 274.542 116.083 274.542C111.363 274.542 107.367 277.644 106.024 281.921\&quot; stroke=\&quot;black\&quot; stroke-width=\&quot;3\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                                    &lt;\/mask&gt;\n                                    &lt;g mask=\&quot;url(#mask0_3300_924)\&quot;&gt;\n                                        &lt;path d=\&quot;M90.7827 259.783H141.383V310.383H90.7827V259.783Z\&quot; fill=\&quot;#E8E8FF\&quot;\/&gt;\n                                    &lt;\/g&gt;\n                                &lt;\/g&gt;\n\n                                &lt;!-- REFRESH --&gt;\n                                &lt;path d=\&quot;M290.165 289.335C293.394 286.171 296.665 282.38 296.665 277.418C296.665 274.258 295.41 271.227 293.175 268.992C290.94 266.757 287.909 265.501 284.749 265.501C280.935 265.501 278.249 266.585 274.999 269.835C271.749 266.585 269.062 265.501 265.249 265.501C262.088 265.501 259.057 266.757 256.822 268.992C254.588 271.227 253.332 274.258 253.332 277.418C253.332 282.401 256.582 286.193 259.832 289.335L274.999 304.501L290.165 289.335Z\&quot; fill=\&quot;#E8E8FF\&quot; stroke=\&quot;#E8E8FF\&quot; stroke-width=\&quot;4.33333\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; class=\&quot;anim-heart\&quot;\/&gt;\n\n                                &lt;!-- LOCATION --&gt;\n                                &lt;path d=\&quot;M424.073 304.44C425.335 305.481 426.652 306.433 428 307.363C429.351 306.446 430.661 305.471 431.927 304.44C434.038 302.707 436.024 300.828 437.871 298.817C442.129 294.161 446.75 287.411 446.75 279.833C446.75 277.371 446.265 274.933 445.323 272.658C444.38 270.383 442.999 268.316 441.258 266.575C439.517 264.834 437.45 263.453 435.175 262.511C432.9 261.568 430.462 261.083 428 261.083C425.538 261.083 423.1 261.568 420.825 262.511C418.55 263.453 416.483 264.834 414.742 266.575C413.001 268.316 411.62 270.383 410.677 272.658C409.735 274.933 409.25 277.371 409.25 279.833C409.25 287.411 413.871 294.158 418.129 298.817C419.976 300.829 421.962 302.706 424.073 304.44ZM428 286.604C426.204 286.604 424.482 285.891 423.212 284.621C421.943 283.351 421.229 281.629 421.229 279.833C421.229 278.038 421.943 276.316 423.212 275.046C424.482 273.776 426.204 273.063 428 273.063C429.796 273.063 431.518 273.776 432.788 275.046C434.057 276.316 434.771 278.038 434.771 279.833C434.771 281.629 434.057 283.351 432.788 284.621C431.518 285.891 429.796 286.604 428 286.604Z\&quot; fill=\&quot;#E8E8FF\&quot; class=\&quot;anim-pin\&quot;\/&gt;\n\n                                &lt;rect opacity=\&quot;0.6\&quot; x=\&quot;-118\&quot; y=\&quot;216\&quot; width=\&quot;153.667\&quot; height=\&quot;139.5\&quot; rx=\&quot;16\&quot; fill=\&quot;white\&quot;\/&gt;\n                                &lt;rect opacity=\&quot;0.6\&quot; x=\&quot;-118\&quot; y=\&quot;360\&quot; width=\&quot;153.667\&quot; height=\&quot;139.5\&quot; rx=\&quot;16\&quot; fill=\&quot;white\&quot;\/&gt;\n                                &lt;rect opacity=\&quot;0.6\&quot; x=\&quot;40\&quot; y=\&quot;360\&quot; width=\&quot;153.667\&quot; height=\&quot;139.5\&quot; rx=\&quot;16\&quot; fill=\&quot;white\&quot;\/&gt;\n                                &lt;rect opacity=\&quot;0.6\&quot; x=\&quot;197\&quot; y=\&quot;360\&quot; width=\&quot;153.667\&quot; height=\&quot;139.5\&quot; rx=\&quot;16\&quot; fill=\&quot;white\&quot;\/&gt;\n                                &lt;rect opacity=\&quot;0.6\&quot; x=\&quot;355\&quot; y=\&quot;360\&quot; width=\&quot;153.667\&quot; height=\&quot;139.5\&quot; rx=\&quot;16\&quot; fill=\&quot;white\&quot;\/&gt;\n                                &lt;rect opacity=\&quot;0.6\&quot; x=\&quot;513\&quot; y=\&quot;360\&quot; width=\&quot;153.667\&quot; height=\&quot;139.5\&quot; rx=\&quot;16\&quot; fill=\&quot;white\&quot;\/&gt;\n                                &lt;rect opacity=\&quot;0.6\&quot; x=\&quot;-118\&quot; y=\&quot;72\&quot; width=\&quot;153.667\&quot; height=\&quot;139.5\&quot; rx=\&quot;16\&quot; fill=\&quot;white\&quot;\/&gt;\n                                &lt;rect opacity=\&quot;0.6\&quot; x=\&quot;513\&quot; y=\&quot;216\&quot; width=\&quot;153.667\&quot; height=\&quot;139.5\&quot; rx=\&quot;16\&quot; fill=\&quot;white\&quot;\/&gt;\n                                &lt;rect opacity=\&quot;0.6\&quot; x=\&quot;513\&quot; y=\&quot;72\&quot; width=\&quot;153.667\&quot; height=\&quot;139.5\&quot; rx=\&quot;16\&quot; fill=\&quot;white\&quot;\/&gt;\n                            &lt;\/g&gt;\n                            &lt;defs&gt;\n                                &lt;clipPath id=\&quot;clip0_3300_924\&quot;&gt;\n                                    &lt;path d=\&quot;M0 0H549V371C549 384.255 538.255 395 525 395H24C10.7452 395 0 384.255 0 371V0Z\&quot; fill=\&quot;white\&quot;\/&gt;\n                                &lt;
507\/clipPath&gt;\n                                &lt;clipPath id=\&quot;clip1_3300_924\&quot;&gt;\n                                    &lt;rect width=\&quot;46\&quot; height=\&quot;46\&quot; fill=\&quot;white\&quot; transform=\&quot;translate(93 262)\&quot;\/&gt;\n                                &lt;\/clipPath&gt;\n                            &lt;\/defs&gt;\n                        &lt;\/svg&gt;\n                        \n                        &lt;div class=\&quot;anim-badge absolute top-0 left-[calc(163\/549*100%)] -mt-[calc(4\/549*100%)] w-[calc(223\/549*100%)] aspect-square\&quot;&gt;\n                            &lt;svg class=\&quot;block size-full\&quot; viewBox=\&quot;163 -4 223 223\&quot; fill=\&quot;none\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                                &lt;g filter=\&quot;url(#filter0_d_3300_924)\&quot;&gt;\n                                    &lt;rect x=\&quot;178\&quot; y=\&quot;8\&quot; width=\&quot;193\&quot; height=\&quot;193\&quot; rx=\&quot;27.0233\&quot; fill=\&quot;#6960CD\&quot;\/&gt;\n                                    &lt;g filter=\&quot;url(#filter1_d_3300_924)\&quot;&gt;\n                                        &lt;path d=\&quot;M211.434 123.662L226.211 70.676C227.237 66.9971 230.375 64.2958 234.165 63.8279L287.35 57.263C291.411 56.7617 295.414 58.5618 297.735 61.9328L309.021 78.3312C309.691 79.3046 310.743 79.9474 311.915 80.0993L329.367 82.3621C336.064 83.2305 339.915 90.4331 336.919 96.4852L325.985 118.571C325.379 119.795 324.254 120.682 322.921 120.984L296.548 126.974C290.163 128.424 286.201 134.82 287.746 141.182L289.49 148.362C290.647 153.126 287.038 157.717 282.135 157.717L241.869 157.717C237.349 157.717 236.633 151.224 241.044 150.239L266.712 144.507C271.871 143.355 275.475 138.69 275.288 133.407L274.078 99.3117C273.908 94.5076 277.234 90.2837 281.944 89.3223L290.439 87.5884C294.226 86.8154 295.954 82.391 293.693 79.2556C292.507 77.6114 290.502 76.7668 288.497 77.0665L273.021 79.3799C268.199 80.1006 264.559 84.127 264.325 88.9965L262.769 121.49C262.534 126.4 258.836 130.447 253.966 131.122L221.847 135.575C215.099 136.511 209.605 130.224 211.434 123.662Z\&quot; fill=\&quot;white\&quot;\/&gt;\n                                    &lt;\/g&gt;\n                                &lt;\/g&gt;\n                                &lt;defs&gt;\n                                    &lt;filter id=\&quot;filter0_d_3300_924\&quot; x=\&quot;163\&quot; y=\&quot;-4\&quot; width=\&quot;223\&quot; height=\&quot;223\&quot; filterUnits=\&quot;userSpaceOnUse\&quot; color-interpolation-filters=\&quot;sRGB\&quot;&gt;\n                                        &lt;feFlood flood-opacity=\&quot;0\&quot; result=\&quot;BackgroundImageFix\&quot;\/&gt;\n                                        &lt;feColorMatrix in=\&quot;SourceAlpha\&quot; type=\&quot;matrix\&quot; values=\&quot;0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\&quot; result=\&quot;hardAlpha\&quot;\/&gt;\n                                        &lt;feMorphology radius=\&quot;5\&quot; operator=\&quot;dilate\&quot; in=\&quot;SourceAlpha\&quot; result=\&quot;effect1_dropShadow_3300_924\&quot;\/&gt;\n                                        &lt;feOffset dy=\&quot;3\&quot;\/&gt;\n                                        &lt;feGaussianBlur stdDeviation=\&quot;5\&quot;\/&gt;\n                                        &lt;feComposite in2=\&quot;hardAlpha\&quot; operator=\&quot;out\&quot;\/&gt;\n                                        &lt;feColorMatrix type=\&quot;matrix\&quot; values=\&quot;0 0 0 0 0.109802 0 0 0 0 0.0932559 0 0 0 0 0.323392 0 0 0 0.25 0\&quot;\/&gt;\n                                        &lt;feBlend mode=\&quot;normal\&quot; in2=\&quot;BackgroundImageFix\&quot; result=\&quot;effect1_dropShadow_3300_924\&quot;\/&gt;\n                                        &lt;feBlend mode=\&quot;normal\&quot; in=\&quot;SourceGraphic\&quot; in2=\&quot;effect1_dropShadow_3300_924\&quot; result=\&quot;shape\&quot;\/&gt;\n                                    &lt;\/filter&gt;\n                                    &lt;filter id=\&quot;filter1_d_3300_924\&quot; x=\&quot;197.532\&quot; y=\&quot;28.5662\&quot; width=\&quot;153.937\&quot; height=\&quot;157.141\&quot; filterUnits=\&quot;userSpaceOnUse\&quot; color-interpolation-filters=\&quot;sRGB\&quot;&gt;\n                                        &lt;feFlood flood-opacity=\&quot;0\&quot; result=\&quot;
507BackgroundImageFix\&quot;\/&gt;\n                                        &lt;feColorMatrix in=\&quot;SourceAlpha\&quot; type=\&quot;matrix\&quot; values=\&quot;0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\&quot; result=\&quot;hardAlpha\&quot;\/&gt;\n                                        &lt;feOffset dy=\&quot;2.63642\&quot;\/&gt;\n                                        &lt;feGaussianBlur stdDeviation=\&quot;2.40573\&quot;\/&gt;\n                                        &lt;feComposite in2=\&quot;hardAlpha\&quot; operator=\&quot;out\&quot;\/&gt;\n                                        &lt;feColorMatrix type=\&quot;matrix\&quot; values=\&quot;0 0 0 0 0.249522 0 0 0 0 0.207827 0 0 0 0 0.825665 0 0 0 1 0\&quot;\/&gt;\n                                        &lt;feBlend mode=\&quot;normal\&quot; in2=\&quot;BackgroundImageFix\&quot; result=\&quot;effect1_dropShadow_3300_924\&quot;\/&gt;\n                                        &lt;feBlend mode=\&quot;normal\&quot; in=\&quot;SourceGraphic\&quot; in2=\&quot;effect1_dropShadow_3300_924\&quot; result=\&quot;shape\&quot;\/&gt;\n                                    &lt;\/filter&gt;\n                                &lt;\/defs&gt;\n                            &lt;\/svg&gt;\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n                                                \n                &lt;div class=\&quot;relative flex flex-col justify-between h-[385px] lg:h-[723px] rounded-2xl lg:rounded-3xl overflow-hidden bg-gradient-to-b from-purple-100 to-white-0 p-4 lg:p-10\&quot;&gt;\n                    \n                                            &lt;img\n                            src=\&quot;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/commitment\/paper.webp\&quot;\n                            alt=\&quot;\&quot;\n                            loading=\&quot;lazy\&quot;\n                            decoding=\&quot;async\&quot;\n                            class=\&quot;absolute inset-0 w-full h-full object-cover opacity-10 pointer-events-none mix-blend-multiply\&quot;\n                            aria-hidden=\&quot;true\&quot;\n                        &gt;\n                    \n                    \n                    &lt;div class=\&quot;relative z-10\&quot;&gt;\n                        &lt;p class=\&quot;font-helvetica text-[22px] lg:text-[32px] font-normal leading-[1.4] text-purple-500\&quot;&gt;\n                            Des citoyens, des refuges et des b\u00e9n\u00e9voles unis pour qu&amp;#039;aucun animal ne passe inaper\u00e7u.\n                        &lt;\/p&gt;\n                    &lt;\/div&gt;\n\n                    \n                    &lt;div class=\&quot;relative z-10 w-full lg:text-center pb-12 lg:pb-4\&quot;&gt;\n                        &lt;p class=\&quot;font-caveat font-normal text-[28px] lg:text-[40px] leading-none lg:leading-[55px] text-purple-400 min-h-[55px]\&quot;\n                           x-data=\&quot;{ text: &#039;&#039;, fullText: &#039;L\\&amp;#039;\u00e9quipe Animou - Pour l\\&amp;#039;amour des animaux.&#039;, i: 0, type() { if(this.i &lt; this.fullText.length) { this.text += this.fullText.charAt(this.i); this.i++; setTimeout(() =&gt; this.type(), 40); } } }\&quot;\n                           x-intersect.once=\&quot;type()\&quot;\n                           x-text=\&quot;text\&quot;\n                        &gt;&lt;\/p&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n                        &lt;\/div&gt;\n\n    &lt;div class=\&quot;page-wrapper hidden lg:block pointer-events-none pt-[70px]\&quot;&gt;\n    &lt;div x-data=\&quot;sectionNav({ inheritPrevious: false })\&quot;\n     class=\&quot;transition-opacity duration-300\&quot;\n     :style=\&quot;&#039;opacity: &#039; + opacity\&quot;\n     x-cloak&gt;\n    &lt;div class=\&quot;w-[425px]\&quot;&gt;\n        &lt;div class=\&quot;flex items-center justify-end gap-3 font-helvetica-now-display text-lg leading-[1.4] mb-[20px] text-purple-500\&quot;&gt;\n            &lt;span class=\&quot;tabular-nums\&quot; x-text=\&quot;number\&quot;&gt;&lt;\/span&gt;\n            &lt;span x-text=\&quot;label\&quot;&gt;&lt;\/span&gt;\n        &lt;\/div&gt;\n        &lt;div class=\&quot;relative\&quot;&gt;\n            &lt;div class=\&quot;h-px w-full rounded-[1px]\&quot;\n                 style=\&quot;background: linear-gradient(to right, rgba(127,121,209,0) 0%, #7F79D1 100%);\&quot;&gt;&lt;\/div&gt;\n            &lt;div class=\&quot;absolute top-1\/2 -translate-y-1\/2 transition-[left] duration-300 ease-out will-change-[left,opacity]\&quot;\n                 :style=\&quot;&#039;left: &#039;
507 + arrowLeft + &#039;px&#039;\&quot;&gt;\n                &lt;div class=\&quot;flex items-center justify-center h-[33px] px-4 rounded-full bg-purple-10 text-purple-500\&quot;&gt;\n                    &lt;svg width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 24 24\&quot; fill=\&quot;none\&quot;&gt;\n                        &lt;path d=\&quot;M8.91 19.92L15.43 13.4C16.2 12.63 16.2 11.37 15.43 10.6L8.91 4.08\&quot;\n                              stroke=\&quot;currentColor\&quot; stroke-width=\&quot;1.5\&quot; stroke-miterlimit=\&quot;10\&quot;\n                              stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                    &lt;\/svg&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n        &lt;\/div&gt;\n    \n\n&lt;\/section&gt;\n&lt;section\n        class=\&quot;page-section\&quot;\n         data-section-label=\&quot;Presse\&quot;      aria-labelledby=\&quot;heading-logos\&quot;\n    &gt;\n            &lt;div class=\&quot;page-wrapper\&quot;&gt;\n            &lt;div class=\&quot;flex flex-col items-start lg:items-center gap-4\&quot; data-reveal&gt;\n        \n        &lt;h2\n                id=\&quot;heading-logos\&quot;\n                class=\&quot;text-heading-section text-dark-850 lg:text-center\&quot;\n        &gt;\n            Ils parlent\n            &lt;span class=\&quot;text-purple-400\&quot;&gt;d&amp;#039;Animou&lt;\/span&gt;\n        &lt;\/h2&gt;\n\n        \n        &lt;p class=\&quot;text-subtitle text-gray-500 lg:text-center lg:max-w-[490px]\&quot;&gt;\n            Les m\u00e9dias et acteurs animaliers qui ont relay\u00e9 la mission d&amp;#039;Animou et l&amp;#039;entraide autour des animaux perdus.\n        &lt;\/p&gt;\n    &lt;\/div&gt;\n\n    \n    &lt;ul class=\&quot;hidden lg:flex flex-wrap justify-center items-center gap-[var(--grid-gutter)] mt-10 lg:mt-16 list-none m-0 p-0\&quot; data-reveal-group&gt;\n                    &lt;li data-reveal=\&quot;scale\&quot; class=\&quot;\n                flex items-center justify-center\n                w-[201px] h-[121px]\n                bg-white-0 border border-gray-10 rounded-btn\n                shadow-[var(--shadow-logos)] overflow-hidden\n            \&quot;&gt;\n                                                        &lt;img\n        src=\&quot;\/img\/204\/presse-ici-gironde-78b1cc6c019a.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=cd31c93721cdd569c00dc37eca182fde\&quot;\n         srcset=\&quot;\/img\/204\/presse-ici-gironde-78b1cc6c019a.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=e6c455a7fc8511fece954f4ac1d47d98 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;ici Gironde\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                &lt;\/li&gt;\n                    &lt;li data-reveal=\&quot;scale\&quot; class=\&quot;\n                flex items-center justify-center\n                w-[201px] h-[121px]\n                bg-white-0 border border-gray-10 rounded-btn\n                shadow-[var(--shadow-logos)] overflow-hidden\n            \&quot;&gt;\n                                                            &lt;a href=\&quot;https:\/\/www.lessentiel.fr\/bordeaux\/entreprises\/2026-09-02\/des-bordelais-creent-une-application-pour-retrouver-les-animaux\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;press-link\&quot; data-press-name=\&quot;L&amp;#039;essentiel Bordeaux\&quot; class=\&quot;flex items-center justify-center w-full h-full\&quot;&gt;\n                                        &lt;img\n        src=\&quot;\/img\/212\/presse-lessentiel-bordeaux-f745e245e4df.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=549faeac4b43a00db18b2d8c05a27905\&quot;\n         srcset=\&quot;\/img\/212\/presse-lessentiel-bordeaux-f745e245e4df.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=1c790012ce6595696f49b5c2938d9141 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;L&amp;#039;essentiel Bordeaux\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                            &lt;\/a&gt;\n                                                &lt;\/li&gt;\n                    &lt;li data-reveal=\&quot;scale\&quot; class=\&quot;\n                flex items-center justify-center\n                w-[201px] h-[121px]\n                bg-white-0 border border-gray-10 rounded-btn\n                shadow-[var(--shadow-logos)] overflow-hidden\n            \&quot;&gt;\n                                                            &lt;a href=\&quot;https:\/\/www.lebonbon.fr\/bordeaux\/news\/2-bordelais-lancent-premiere-application-gratuite-retrouver-animaux-perdus\/\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;press-link\&quot; data-press-name=\&quot;Le Bonbon\&quot; class=\&quot;flex items-center justify-center w-full h-full\&quot;&gt;\n                                        &lt;img\n        src=\&quot;\/img\/205\/presse-le-bonbon-252ee121285a.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=163832f116117fb927894293adc68173\&quot;\n         srcset=\&quot;\/img\/205\/presse-le-bonbon-252ee121285a.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=6d1ba8c18ac7d4686dc9ec49fb45d59f 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;Le Bonbon\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                            &lt;\/a&gt;\n                                                &lt;\/li&gt;\n                    &lt;li data-reveal=\&quot;scale\&quot; class=\&quot;\n                flex items-center justify-center\n                w-[201px] h-[121px]\n                bg-white-0 border border-gray-10 rounded-btn\n                shadow-[var(--shadow-logos)] overflow-hidden\n            \&quot;&gt;\n                                                            &lt;a href=\&quot;https:\/\/www.bougerabordeaux.com\/actu\/news\/animou-lapplication-bordelaise-qui-veut-revolutionner-la-recherche-danimaux-perdus\/\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;press-link\&quot; data-press-name=\&quot;Bouger \u00e0 Bordeaux\&quot; class=\&quot;flex items-center justify-center w-full h-full\&quot;&gt;\n                                        &lt;img\n        src=\&quot;\/img\/206\/presse-bouger-a-bordeaux-1c11f31c09f4.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=c730aad82a30b8ba3ad3be662aa9da6d\&quot;\n         srcset=\&quot;\/img\/206\/presse-bouger-a-bordeaux-1c11f31c09f4.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=f2d0cd4ea730a3c8780c086ad4034f84 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;Bouger \u00e0 Bordeaux\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                            &lt;\/a&gt;\n                                                &lt;\/li&gt;\n                    &lt;li data-reveal=\&quot;scale\&quot; class=\&quot;\n                flex items-center justify-center\n                w-[201px] h-[121px]\n                bg-white-0 border border-gray-10 rounded-btn\n                shadow-[var(--shadow-logos)] overflow-hidden\n            \&quot;&gt;\n                                                            &lt;a href=\&quot;https:\/\/leguideduchat.fr\/comportement-du-chat\/animou-app-retrouver-chat-perdu\/\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;press-link\&quot; data-press-name=\&quot;Le Guide du Chat\&quot; class=\&quot;flex items-center justify-center w-full h-full\&quot;&gt;\n                                        &lt;img\n        src=\&quot;
507\/img\/207\/presse-le-guide-du-chat-2a72c2d336bd.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=6fbdddf24c63e2a70ce09fb23feca366\&quot;\n         srcset=\&quot;\/img\/207\/presse-le-guide-du-chat-2a72c2d336bd.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=3ee3336f84209c88e06c383cbe1abb8f 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;Le Guide du Chat\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                            &lt;\/a&gt;\n                                                &lt;\/li&gt;\n                    &lt;li data-reveal=\&quot;scale\&quot; class=\&quot;\n                flex items-center justify-center\n                w-[201px] h-[121px]\n                bg-white-0 border border-gray-10 rounded-btn\n                shadow-[var(--shadow-logos)] overflow-hidden\n            \&quot;&gt;\n                                                        &lt;img\n        src=\&quot;\/img\/208\/presse-pattounes-magazine-2fe09779df7b.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=cab8ccaf0d5c20af78d17483d9da5512\&quot;\n         srcset=\&quot;\/img\/208\/presse-pattounes-magazine-2fe09779df7b.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=31be30213532dd1cb023ba07bb1db6f3 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;Pattounes Magazine\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                &lt;\/li&gt;\n                    &lt;li data-reveal=\&quot;scale\&quot; class=\&quot;\n                flex items-center justify-center\n                w-[201px] h-[121px]\n                bg-white-0 border border-gray-10 rounded-btn\n                shadow-[var(--shadow-logos)] overflow-hidden\n            \&quot;&gt;\n                                                        &lt;img\n        src=\&quot;\/img\/209\/presse-rfm-b1253335fe5e.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=28bcff67237bda45753ef240629b7846\&quot;\n         srcset=\&quot;\/img\/209\/presse-rfm-b1253335fe5e.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=4ce7e2170892f44c58cbb8a7dbaf8828 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;RFM Bordeaux\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                &lt;\/li&gt;\n                    &lt;li data-reveal=\&quot;scale\&quot; class=\&quot;\n                flex items-center justify-center\n                w-[201px] h-[121px]\n                bg-white-0 border border-gray-10 rounded-btn\n                shadow-[var(--shadow-logos)] overflow-hidden\n            \&quot;&gt;\n                                                        &lt;img\n        src=\&quot;\/img\/203\/presse-nrj-d6833d932722.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=ba6d1962c7cf408653f14f41f8ad775d\&quot;\n         srcset=\&quot;\/img\/203\/presse-nrj-d6833d932722.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=f2913b6a9fb3293399bdacf6e1bd2b3f 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;NRJ Bordeaux\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                &lt;\/li&gt;\n                    &lt;li data-reveal=\&quot;scale\&quot; class=\&quot;\n                flex items-center justify-center\n                w-[201px] h-[121px]\n                bg-white-0 border border-gray-10 rounded-btn\n                shadow-[var(--shadow-logos)] overflow-hidden\n            \&quot;&gt;\n                                                        &lt;img\n        src=\&quot;
507\/img\/217\/presse-cherie-fm-da914e71d171.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=86149ab86095904f1f830ee3f5cf98a9\&quot;\n         srcset=\&quot;\/img\/217\/presse-cherie-fm-da914e71d171.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=371af2d0890fee82b91f540b48dd07d0 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;Ch\u00e9rie FM\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                &lt;\/li&gt;\n                    &lt;li data-reveal=\&quot;scale\&quot; class=\&quot;\n                flex items-center justify-center\n                w-[201px] h-[121px]\n                bg-white-0 border border-gray-10 rounded-btn\n                shadow-[var(--shadow-logos)] overflow-hidden\n            \&quot;&gt;\n                                                        &lt;img\n        src=\&quot;\/img\/210\/presse-smile-media-e32443bfe369.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=477852cb793738d16dd809c0981ba007\&quot;\n         srcset=\&quot;\/img\/210\/presse-smile-media-e32443bfe369.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=86553fecb6311a07900cbece56f32122 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;Smile M\u00e9dia\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                &lt;\/li&gt;\n                    &lt;li data-reveal=\&quot;scale\&quot; class=\&quot;\n                flex items-center justify-center\n                w-[201px] h-[121px]\n                bg-white-0 border border-gray-10 rounded-btn\n                shadow-[var(--shadow-logos)] overflow-hidden\n            \&quot;&gt;\n                                                            &lt;a href=\&quot;https:\/\/laliguedesanimaux.fr\/2026\/05\/27\/animou-x-la-ligue-des-animaux-unir-nos-forces-pour-les-animaux\/\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;press-link\&quot; data-press-name=\&quot;La Ligue des Animaux\&quot; class=\&quot;flex items-center justify-center w-full h-full\&quot;&gt;\n                                        &lt;img\n        src=\&quot;\/img\/220\/presse-la-ligue-des-animaux-h-d24fb0280c92.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=d98e8381a64da5cb6a11a94221bacd89\&quot;\n         srcset=\&quot;\/img\/220\/presse-la-ligue-des-animaux-h-d24fb0280c92.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=73c4dd87da185e6aff7d6086e20f10b0 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;La Ligue des Animaux\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                            &lt;\/a&gt;\n                                                &lt;\/li&gt;\n            &lt;\/ul&gt;\n\n    \n    &lt;div\n        class=\&quot;lg:hidden mt-10 overflow-hidden\&quot;\n        data-reveal\n        x-data=\&quot;emblaMarquee({ speed: 0.8 })\&quot;\n        x-ref=\&quot;viewport\&quot;\n        role=\&quot;region\&quot;\n        aria-label=\&quot;Logos des partenaires\&quot;\n    &gt;\n        &lt;div class=\&quot;flex gap-3\&quot;&gt;\n            \n                                                &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                                            &gt;\n                                                                                &lt;img\n        src=\&quot;\/img\/204\/presse-ici-gironde-78b1cc6c019a.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=cd31c93721cdd569c00dc37eca182fde\&quot;\n         srcset=\&quot;\/img\/204\/presse-ici-gironde-78b1cc6c019a.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=e6c455a7fc8511fece954f4ac1d47d98 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;ici Gironde\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                                            &gt;\n                                                                                    &lt;a href=\&quot;https:\/\/www.lessentiel.fr\/bordeaux\/entreprises\/2026-09-02\/des-bordelais-creent-une
507-application-pour-retrouver-les-animaux\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;press-link\&quot; data-press-name=\&quot;L&amp;#039;essentiel Bordeaux\&quot; class=\&quot;flex items-center justify-center w-full h-full\&quot;&gt;\n                                                        &lt;img\n        src=\&quot;\/img\/212\/presse-lessentiel-bordeaux-f745e245e4df.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=549faeac4b43a00db18b2d8c05a27905\&quot;\n         srcset=\&quot;\/img\/212\/presse-lessentiel-bordeaux-f745e245e4df.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=1c790012ce6595696f49b5c2938d9141 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;L&amp;#039;essentiel Bordeaux\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                            &lt;\/a&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                                            &gt;\n                                                                                    &lt;a href=\&quot;https:\/\/www.lebonbon.fr\/bordeaux\/news\/2-bordelais-lancent-premiere-application-gratuite-retrouver-animaux-perdus\/\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;press-link\&quot; data-press-name=\&quot;Le Bonbon\&quot; class=\&quot;flex items-center justify-center w-full h-full\&quot;&gt;\n                                                        &lt;img\n        src=\&quot;\/img\/205\/presse-le-bonbon-252ee121285a.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=163832f116117fb927894293adc68173\&quot;\n         srcset=\&quot;\/img\/205\/presse-le-bonbon-252ee121285a.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=6d1ba8c18ac7d4686dc9ec49fb45d59f 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;Le Bonbon\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                            &lt;\/a&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                                            &gt;\n                                                                                    &lt;a href=\&quot;https:\/\/www.bougerabordeaux.com\/actu\/news\/animou-lapplication-bordelaise-qui-veut-revolutionner-la-recherche-danimaux-perdus\/\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;press-link\&quot; data-press-name=\&quot;Bouger \u00e0 Bordeaux\&quot; class=\&quot;flex items-center justify-center w-full h-full\&quot;&gt;\n                                                        &lt;img\n        src=\&quot;\/img\/206\/presse-bouger-a-bordeaux-1c11f31c09f4.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=c730aad82a30b8ba3ad3be662aa9da6d\&quot;\n         srcset=\&quot;\/img\/206\/presse-bouger-a-bordeaux-1c11f31c09f4.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=f2d0cd4ea730a3c8780c086ad4034f84 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;Bouger \u00e0 Bordeaux\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                            &lt;\/a&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                                            &gt;\n                                                                                    &lt;a href=\&quot;https:\/\/leguideduchat.fr\/comportement-du-chat\/animou-app-retrouver-chat-perdu\/\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;press-link\&quot; data-press-name=\&quot;Le Guide du Chat\&quot; class=\&quot;flex items-center justify-center w-full h-full\&quot;&gt;\n                                                        &lt;img\n        src=\&quot;
507\/img\/207\/presse-le-guide-du-chat-2a72c2d336bd.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=6fbdddf24c63e2a70ce09fb23feca366\&quot;\n         srcset=\&quot;\/img\/207\/presse-le-guide-du-chat-2a72c2d336bd.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=3ee3336f84209c88e06c383cbe1abb8f 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;Le Guide du Chat\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                            &lt;\/a&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                                            &gt;\n                                                                                &lt;img\n        src=\&quot;\/img\/208\/presse-pattounes-magazine-2fe09779df7b.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=cab8ccaf0d5c20af78d17483d9da5512\&quot;\n         srcset=\&quot;\/img\/208\/presse-pattounes-magazine-2fe09779df7b.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=31be30213532dd1cb023ba07bb1db6f3 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;Pattounes Magazine\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                                            &gt;\n                                                                                &lt;img\n        src=\&quot;\/img\/209\/presse-rfm-b1253335fe5e.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=28bcff67237bda45753ef240629b7846\&quot;\n         srcset=\&quot;\/img\/209\/presse-rfm-b1253335fe5e.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=4ce7e2170892f44c58cbb8a7dbaf8828 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;RFM Bordeaux\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                                            &gt;\n                                                                                &lt;img\n        src=\&quot;\/img\/203\/presse-nrj-d6833d932722.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=ba6d1962c7cf408653f14f41f8ad775d\&quot;\n         srcset=\&quot;\/img\/203\/presse-nrj-d6833d932722.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=f2913b6a9fb3293399bdacf6e1bd2b3f 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;NRJ Bordeaux\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                                            &gt;\n                                                                                &lt;img\n        src=\&quot;
507\/img\/217\/presse-cherie-fm-da914e71d171.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=86149ab86095904f1f830ee3f5cf98a9\&quot;\n         srcset=\&quot;\/img\/217\/presse-cherie-fm-da914e71d171.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=371af2d0890fee82b91f540b48dd07d0 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;Ch\u00e9rie FM\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                                            &gt;\n                                                                                &lt;img\n        src=\&quot;\/img\/210\/presse-smile-media-e32443bfe369.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=477852cb793738d16dd809c0981ba007\&quot;\n         srcset=\&quot;\/img\/210\/presse-smile-media-e32443bfe369.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=86553fecb6311a07900cbece56f32122 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;Smile M\u00e9dia\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                                            &gt;\n                                                                                    &lt;a href=\&quot;https:\/\/laliguedesanimaux.fr\/2026\/05\/27\/animou-x-la-ligue-des-animaux-unir-nos-forces-pour-les-animaux\/\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot; data-track=\&quot;press-link\&quot; data-press-name=\&quot;La Ligue des Animaux\&quot; class=\&quot;flex items-center justify-center w-full h-full\&quot;&gt;\n                                                        &lt;img\n        src=\&quot;\/img\/220\/presse-la-ligue-des-animaux-h-d24fb0280c92.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=d98e8381a64da5cb6a11a94221bacd89\&quot;\n         srcset=\&quot;\/img\/220\/presse-la-ligue-des-animaux-h-d24fb0280c92.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=73c4dd87da185e6aff7d6086e20f10b0 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;La Ligue des Animaux\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                            &lt;\/a&gt;\n                                                                        &lt;\/div&gt;\n                                                                &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                         aria-hidden=\&quot;true\&quot;                     &gt;\n                                                                                &lt;img\n        src=\&quot;\/img\/204\/presse-ici-gironde-78b1cc6c019a.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=cd31c93721cdd569c00dc37eca182fde\&quot;\n         srcset=\&quot;\/img\/204\/presse-ici-gironde-78b1cc6c019a.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=e6c455a7fc8511fece954f4ac1d47d98 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                         aria-hidden=\&quot;true\&quot;                     &gt;\n                                                                                &lt;img\n        src=\&quot;\/img\/212\/presse-lessentiel-bordeaux-f745e245e4df.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=549faeac4b43a00db18b2d8c05a27905\&quot;\n         srcset=\&quot;\/img\/212\/presse-lessentiel-bordeaux-f745e245e4df.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=1c790012ce6595696f49b5c2938d9141 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                         aria-hidden=\&quot;true\&quot;                     &gt;\n                                                                                &lt;img\n        src=\&quot;\/img\/205\/presse-le-bonbon-252ee121285a.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=163832f116117fb927894293adc68173\&quot;\n         srcset=\&quot;\/img\/205\/presse-le-bonbon-252ee121285a.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=6d1ba8c18ac7d4686dc9ec49fb45d59f 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                         aria-hidden=\&quot;true\&quot;                     &gt;\n                                                                                &lt;img\n        src=\&quot;\/img\/206\/presse-bouger-a-bordeaux-1c11f31c09f4.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=c730aad82a30b8ba3ad3be662aa9da6d\&quot;\n         srcset=\&quot;\/img\/206\/presse-bouger-a-bordeaux-1c11f31c09f4.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=f2d0cd4ea730a3c8780c086ad4034f84 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                         aria-hidden=\&quot;true\&quot;                     &gt;\n                                                                                &lt;img\n        src=\&quot;
507\/img\/207\/presse-le-guide-du-chat-2a72c2d336bd.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=6fbdddf24c63e2a70ce09fb23feca366\&quot;\n         srcset=\&quot;\/img\/207\/presse-le-guide-du-chat-2a72c2d336bd.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=3ee3336f84209c88e06c383cbe1abb8f 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                         aria-hidden=\&quot;true\&quot;                     &gt;\n                                                                                &lt;img\n        src=\&quot;\/img\/208\/presse-pattounes-magazine-2fe09779df7b.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=cab8ccaf0d5c20af78d17483d9da5512\&quot;\n         srcset=\&quot;\/img\/208\/presse-pattounes-magazine-2fe09779df7b.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=31be30213532dd1cb023ba07bb1db6f3 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                         aria-hidden=\&quot;true\&quot;                     &gt;\n                                                                                &lt;img\n        src=\&quot;\/img\/209\/presse-rfm-b1253335fe5e.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=28bcff67237bda45753ef240629b7846\&quot;\n         srcset=\&quot;\/img\/209\/presse-rfm-b1253335fe5e.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=4ce7e2170892f44c58cbb8a7dbaf8828 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                         aria-hidden=\&quot;true\&quot;                     &gt;\n                                                                                &lt;img\n        src=\&quot;\/img\/203\/presse-nrj-d6833d932722.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=ba6d1962c7cf408653f14f41f8ad775d\&quot;\n         srcset=\&quot;\/img\/203\/presse-nrj-d6833d932722.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=f2913b6a9fb3293399bdacf6e1bd2b3f 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                         aria-hidden=\&quot;true\&quot;                     &gt;\n                                                                                &lt;img\n        src=\&quot;
507\/img\/217\/presse-cherie-fm-da914e71d171.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=86149ab86095904f1f830ee3f5cf98a9\&quot;\n         srcset=\&quot;\/img\/217\/presse-cherie-fm-da914e71d171.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=371af2d0890fee82b91f540b48dd07d0 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                         aria-hidden=\&quot;true\&quot;                     &gt;\n                                                                                &lt;img\n        src=\&quot;\/img\/210\/presse-smile-media-e32443bfe369.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=477852cb793738d16dd809c0981ba007\&quot;\n         srcset=\&quot;\/img\/210\/presse-smile-media-e32443bfe369.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=86553fecb6311a07900cbece56f32122 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;\n                            flex items-center justify-center shrink-0\n                            w-[114px] h-[69px]\n                            bg-white-0 border border-gray-10 rounded-[14px]\n                            shadow-[var(--shadow-logos)] overflow-hidden\n                        \&quot;\n                         aria-hidden=\&quot;true\&quot;                     &gt;\n                                                                                &lt;img\n        src=\&quot;\/img\/220\/presse-la-ligue-des-animaux-h-d24fb0280c92.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=120&amp;amp;h=40&amp;amp;s=d98e8381a64da5cb6a11a94221bacd89\&quot;\n         srcset=\&quot;\/img\/220\/presse-la-ligue-des-animaux-h-d24fb0280c92.png?q=80&amp;amp;fm=webp&amp;amp;fit=contain&amp;amp;w=240&amp;amp;h=80&amp;amp;s=73c4dd87da185e6aff7d6086e20f10b0 2x\&quot;                  width=\&quot;120\&quot;          height=\&quot;40\&quot;         alt=\&quot;\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;max-w-[70%] max-h-[55%] object-contain\&quot;\n    \/&gt;\n                                                                        &lt;\/div&gt;\n                                    &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\&quot;page-wrapper hidden lg:block pointer-events-none pt-[70px]\&quot;&gt;\n    &lt;div x-data=\&quot;sectionNav({ inheritPrevious: false })\&quot;\n     class=\&quot;transition-opacity duration-300\&quot;\n     :style=\&quot;&#039;opacity: &#039; + opacity\&quot;\n     x-cloak&gt;\n    &lt;div class=\&quot;w-[425px]\&quot;&gt;\n        &lt;div class=\&quot;flex items-center justify-end gap-3 font-helvetica-now-display text-lg leading-[1.4] mb-[20px] text-purple-500\&quot;&gt;\n            &lt;span class=\&quot;tabular-nums\&quot; x-text=\&quot;number\&quot;&gt;&lt;\/span&gt;\n            &lt;span x-text=\&quot;label\&quot;&gt;&lt;\/span&gt;\n        &lt;\/div&gt;\n        &lt;div class=\&quot;relative\&quot;&gt;\n            &lt;div class=\&quot;h-px w-full rounded-[1px]\&quot;\n                 style=\&quot;background: linear-gradient(to right, rgba(127,121,209,0) 0%, #7F79D1 100%);\&quot;&gt;&lt;\/div&gt;\n            &lt;div class=\&quot;absolute top-1\/2 -translate-y-1\/2 transition-[left] duration-300 ease-out will-change-[left,opacity]\&quot;\n                 :style=\&quot;&#039;left: &#039;
507 + arrowLeft + &#039;px&#039;\&quot;&gt;\n                &lt;div class=\&quot;flex items-center justify-center h-[33px] px-4 rounded-full bg-purple-10 text-purple-500\&quot;&gt;\n                    &lt;svg width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 24 24\&quot; fill=\&quot;none\&quot;&gt;\n                        &lt;path d=\&quot;M8.91 19.92L15.43 13.4C16.2 12.63 16.2 11.37 15.43 10.6L8.91 4.08\&quot;\n                              stroke=\&quot;currentColor\&quot; stroke-width=\&quot;1.5\&quot; stroke-miterlimit=\&quot;10\&quot;\n                              stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                    &lt;\/svg&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n        &lt;\/div&gt;\n    \n\n&lt;\/section&gt;\n&lt;section\n        class=\&quot;page-section\&quot;\n         data-section-label=\&quot;Avis\&quot;      aria-labelledby=\&quot;heading-testimonials\&quot;\n    &gt;\n            &lt;div class=\&quot;page-wrapper\&quot;&gt;\n            &lt;div\n            x-data=\&quot;emblaSlider({ perPage: 1, perPageLg: 3 })\&quot;\n            class=\&quot;flex flex-col items-center gap-8 lg:gap-10\&quot;\n    &gt;\n        \n        &lt;h2\n                id=\&quot;heading-testimonials\&quot;\n                data-reveal\n                class=\&quot;text-heading-section text-dark-850 lg:text-center w-full\&quot;\n        &gt;\n            Ce que disent les utilisateurs d&amp;#039;&lt;span class=\&quot;text-purple-400\&quot;&gt;Animou&lt;\/span&gt;\n        &lt;\/h2&gt;\n\n        \n        &lt;div class=\&quot;w-full overflow-hidden\&quot; x-ref=\&quot;viewport\&quot; data-reveal&gt;\n            &lt;div class=\&quot;flex gap-4 lg:gap-[var(--grid-gutter)]\&quot;&gt;\n                                    &lt;div\n                        class=\&quot;flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%\/3-var(--grid-gutter)*2\/3)]\&quot;\n                        role=\&quot;group\&quot;\n                        aria-label=\&quot;Avis 1 sur 11\&quot;\n                    &gt;\n                        &lt;div class=\&quot;border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rounded-3xl min-h-[415px] lg:min-h-[419px]\&quot;&gt;\n        \n            &lt;div class=\&quot;testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0\&quot; data-rating=\&quot;5\&quot;&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0\/10\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0\/[0.07]\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n                            &lt;p class=\&quot;relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]\&quot;&gt;Avis App Store&lt;\/p&gt;\n                        &lt;p class=\&quot;relative flex items-center gap-1.5\&quot; role=\&quot;img\&quot; aria-label=\&quot;5\/5\&quot;&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                            &lt;\/p&gt;\n            &lt;p class=\&quot;relative font-helvetica-now-display text-[28px] font-bold leading-none\&quot;&gt;5\/5&lt;\/p&gt;\n        &lt;\/div&gt;\n    \n    \n        &lt;div class=\&quot;flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5\&quot;&gt;\n        &lt;div class=\&quot;flex flex-1 flex-col justify-center gap-2\&quot;&gt;\n                            &lt;svg viewBox=\&quot;0 0 32 24\&quot; class=\&quot;h-6 w-8 shrink-0 text-[#CBC7FF]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                    &lt;path d=\&quot;M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z\&quot; \/&gt;\n                &lt;\/svg&gt;\n                        &lt;blockquote&gt;\n                &lt;p class=\&quot;text-body font-medium leading-relaxed text-dark-850\&quot;&gt;J&amp;#039;ai perdu mon chat il y a quelques jours et gr\u00e2ce \u00e0 cette application j&amp;#039;ai pu le retrouver assez rapidement. Merci \u00e0 Animou et \u00e0 la communaut\u00e9 pr\u00e9sente sur l&amp;#039;application.&lt;\/p&gt;\n            &lt;\/blockquote&gt;\n        &lt;\/div&gt;\n        &lt;div class=\&quot;flex items-center gap-3 border-t border-gray-75 pt-4\&quot;&gt;\n                            &lt;span class=\&quot;flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]\&quot; aria-hidden=\&quot;true\&quot;&gt;P&lt;\/span&gt;\n                        &lt;div class=\&quot;flex min-w-0 flex-col leading-tight\&quot;&gt;\n                &lt;p class=\&quot;text-body-sm font-bold text-dark-850\&quot;&gt;\n                    &lt;cite class=\&quot;not-italic\&quot;&gt;Paul&lt;\/cite&gt;\n                &lt;\/p&gt;\n                                    &lt;p class=\&quot;text-[13px] font-medium text-gray-500\&quot;&gt;Ao\u00fbt 2026&lt;\/p&gt;\n                            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n                    &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%\/3-var(--grid-gutter)*2\/3)]\&quot;\n                        role=\&quot;group\&quot;\n                        aria-label=\&quot;Avis 2 sur 11\&quot;\n                    &gt;\n                        &lt;div class=\&quot;border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rou
507nded-3xl min-h-[415px] lg:min-h-[419px]\&quot;&gt;\n        \n            &lt;div class=\&quot;testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0\&quot; data-rating=\&quot;5\&quot;&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0\/10\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0\/[0.07]\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n                            &lt;p class=\&quot;relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]\&quot;&gt;Avis Google Play&lt;\/p&gt;\n                        &lt;p class=\&quot;relative flex items-center gap-1.5\&quot; role=\&quot;img\&quot; aria-label=\&quot;5\/5\&quot;&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                            &lt;\/p&gt;\n            &lt;p class=\&quot;relative font-helvetica-now-display text-[28px] font-bold leading-none\&quot;&gt;5\/5&lt;\/p&gt;\n        &lt;\/div&gt;\n    \n    \n        &lt;div class=\&quot;flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5\&quot;&gt;\n        &lt;div class=\&quot;flex flex-1 flex-col justify-center gap-2\&quot;&gt;\n                            &lt;svg viewBox=\&quot;0 0 32 24\&quot; class=\&quot;h-6 w-8 shrink-0 text-[#CBC7FF]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                    &lt;path d=\&quot;M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z\&quot; \/&gt;\n                &lt;\/svg&gt;\n                        &lt;blockquote&gt;\n                &lt;p class=\&quot;text-body font-medium leading-relaxed text-dark-850\&quot;&gt;Enfin une application vraiment utile, gratuite et sans publicit\u00e9\u00a0! L&amp;#039;utilisation est simple et rapide\u00a0: en quelques instants, on peut signaler un animal perdu ou trouv\u00e9 et consulter les annonces autour de chez soi.&lt;\/p&gt;\n            &lt;\/blockquote&gt;\n        &lt;\/div&gt;\n        &lt;div class=\&quot;flex items-center gap-3 border-t border-gray-75 pt-4\&quot;&gt;\n                            &lt;span class=\&quot;flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]\&quot; aria-hidden=\&quot;true\&quot;&gt;T&lt;\/span&gt;\n                        &lt;div class=\&quot;flex min-w-0 flex-col leading-tight\&quot;&gt;\n                &lt;p class=\&quot;text-body-sm font-bold text-dark-850\&quot;&gt;\n                    &lt;cite class=\&quot;not-italic\&quot;&gt;Th\u00e9o&lt;\/cite&gt;\n                &lt;\/p&gt;\n                                    &lt;p class=\&quot;text-[13px] font-medium text-gray-500\&quot;&gt;Juillet 2026&lt;\/p&gt;\n                            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n                    &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%\/3-var(--grid-gutter)*2\/3)]\&quot;\n                        role=\&quot;group\&quot;\n                        aria-label=\&quot;Avis 3 sur 11\&quot;\n                    &gt;\n                        &lt;div class=\&quot;border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rou
507nded-3xl min-h-[415px] lg:min-h-[419px]\&quot;&gt;\n        \n            &lt;div class=\&quot;testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0\&quot; data-rating=\&quot;5\&quot;&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0\/10\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0\/[0.07]\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n                            &lt;p class=\&quot;relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]\&quot;&gt;Avis App Store&lt;\/p&gt;\n                        &lt;p class=\&quot;relative flex items-center gap-1.5\&quot; role=\&quot;img\&quot; aria-label=\&quot;5\/5\&quot;&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                            &lt;\/p&gt;\n            &lt;p class=\&quot;relative font-helvetica-now-display text-[28px] font-bold leading-none\&quot;&gt;5\/5&lt;\/p&gt;\n        &lt;\/div&gt;\n    \n    \n        &lt;div class=\&quot;flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5\&quot;&gt;\n        &lt;div class=\&quot;flex flex-1 flex-col justify-center gap-2\&quot;&gt;\n                            &lt;svg viewBox=\&quot;0 0 32 24\&quot; class=\&quot;h-6 w-8 shrink-0 text-[#CBC7FF]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                    &lt;path d=\&quot;M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z\&quot; \/&gt;\n                &lt;\/svg&gt;\n                        &lt;blockquote&gt;\n                &lt;p class=\&quot;text-body font-medium leading-relaxed text-dark-850\&quot;&gt;Application incroyablement bien faite et surtout intuitive\u00a0! Merci \u00e0 l&amp;#039;\u00e9quipe d&amp;#039;Animou pour le travail et surtout pour la cause\u00a0! Merci \u00e9norm\u00e9ment pour les animaux.&lt;\/p&gt;\n            &lt;\/blockquote&gt;\n        &lt;\/div&gt;\n        &lt;div class=\&quot;flex items-center gap-3 border-t border-gray-75 pt-4\&quot;&gt;\n                            &lt;span class=\&quot;flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]\&quot; aria-hidden=\&quot;true\&quot;&gt;S&lt;\/span&gt;\n                        &lt;div class=\&quot;flex min-w-0 flex-col leading-tight\&quot;&gt;\n                &lt;p class=\&quot;text-body-sm font-bold text-dark-850\&quot;&gt;\n                    &lt;cite class=\&quot;not-italic\&quot;&gt;Sylvie&lt;\/cite&gt;\n                &lt;\/p&gt;\n                                    &lt;p class=\&quot;text-[13px] font-medium text-gray-500\&quot;&gt;Septembre 2026&lt;\/p&gt;\n                            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n                    &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%\/3-var(--grid-gutter)*2\/3)]\&quot;\n                        role=\&quot;group\&quot;\n                        aria-label=\&quot;Avis 4 sur 11\&quot;\n                    &gt;\n                        &lt;div class=\&quot;border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rou
507nded-3xl min-h-[415px] lg:min-h-[419px]\&quot;&gt;\n        \n            &lt;div class=\&quot;testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0\&quot; data-rating=\&quot;5\&quot;&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0\/10\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0\/[0.07]\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n                            &lt;p class=\&quot;relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]\&quot;&gt;Avis App Store&lt;\/p&gt;\n                        &lt;p class=\&quot;relative flex items-center gap-1.5\&quot; role=\&quot;img\&quot; aria-label=\&quot;5\/5\&quot;&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                            &lt;\/p&gt;\n            &lt;p class=\&quot;relative font-helvetica-now-display text-[28px] font-bold leading-none\&quot;&gt;5\/5&lt;\/p&gt;\n        &lt;\/div&gt;\n    \n    \n        &lt;div class=\&quot;flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5\&quot;&gt;\n        &lt;div class=\&quot;flex flex-1 flex-col justify-center gap-2\&quot;&gt;\n                            &lt;svg viewBox=\&quot;0 0 32 24\&quot; class=\&quot;h-6 w-8 shrink-0 text-[#CBC7FF]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                    &lt;path d=\&quot;M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z\&quot; \/&gt;\n                &lt;\/svg&gt;\n                        &lt;blockquote&gt;\n                &lt;p class=\&quot;text-body font-medium leading-relaxed text-dark-850\&quot;&gt;C&amp;#039;est une application vraiment utile pour retrouver des animaux perdus ou aider \u00e0 retrouver ceux des autres\u00a0! L&amp;#039;interface est simple, les annonces sont faciles \u00e0 publier et c&amp;#039;est totalement gratuit\u00a0! Je recommande \u00e0 100\u00a0%.&lt;\/p&gt;\n            &lt;\/blockquote&gt;\n        &lt;\/div&gt;\n        &lt;div class=\&quot;flex items-center gap-3 border-t border-gray-75 pt-4\&quot;&gt;\n                            &lt;span class=\&quot;flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]\&quot; aria-hidden=\&quot;true\&quot;&gt;I&lt;\/span&gt;\n                        &lt;div class=\&quot;flex min-w-0 flex-col leading-tight\&quot;&gt;\n                &lt;p class=\&quot;text-body-sm font-bold text-dark-850\&quot;&gt;\n                    &lt;cite class=\&quot;not-italic\&quot;&gt;Iris&lt;\/cite&gt;\n                &lt;\/p&gt;\n                                    &lt;p class=\&quot;text-[13px] font-medium text-gray-500\&quot;&gt;Juillet 2026&lt;\/p&gt;\n                            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n                    &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%\/3-var(--grid-gutter)*2\/3)]\&quot;\n                        role=\&quot;group\&quot;\n                        aria-label=\&quot;Avis 5 sur 11\&quot;\n                    &gt;\n                        &lt;div class=\&quot;border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rou
507nded-3xl min-h-[415px] lg:min-h-[419px]\&quot;&gt;\n        \n            &lt;div class=\&quot;testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0\&quot; data-rating=\&quot;5\&quot;&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0\/10\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0\/[0.07]\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n                            &lt;p class=\&quot;relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]\&quot;&gt;Avis Google Play&lt;\/p&gt;\n                        &lt;p class=\&quot;relative flex items-center gap-1.5\&quot; role=\&quot;img\&quot; aria-label=\&quot;5\/5\&quot;&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                            &lt;\/p&gt;\n            &lt;p class=\&quot;relative font-helvetica-now-display text-[28px] font-bold leading-none\&quot;&gt;5\/5&lt;\/p&gt;\n        &lt;\/div&gt;\n    \n    \n        &lt;div class=\&quot;flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5\&quot;&gt;\n        &lt;div class=\&quot;flex flex-1 flex-col justify-center gap-2\&quot;&gt;\n                            &lt;svg viewBox=\&quot;0 0 32 24\&quot; class=\&quot;h-6 w-8 shrink-0 text-[#CBC7FF]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                    &lt;path d=\&quot;M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z\&quot; \/&gt;\n                &lt;\/svg&gt;\n                        &lt;blockquote&gt;\n                &lt;p class=\&quot;text-body font-medium leading-relaxed text-dark-850\&quot;&gt;Super\u00a0! J&amp;#039;esp\u00e8re que l&amp;#039;app sera de plus en plus utilis\u00e9e. Elle devrait devenir une app obligatoire lorsqu&amp;#039;on a un animal.&lt;\/p&gt;\n            &lt;\/blockquote&gt;\n        &lt;\/div&gt;\n        &lt;div class=\&quot;flex items-center gap-3 border-t border-gray-75 pt-4\&quot;&gt;\n                            &lt;span class=\&quot;flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]\&quot; aria-hidden=\&quot;true\&quot;&gt;N&lt;\/span&gt;\n                        &lt;div class=\&quot;flex min-w-0 flex-col leading-tight\&quot;&gt;\n                &lt;p class=\&quot;text-body-sm font-bold text-dark-850\&quot;&gt;\n                    &lt;cite class=\&quot;not-italic\&quot;&gt;Noah&lt;\/cite&gt;\n                &lt;\/p&gt;\n                                    &lt;p class=\&quot;text-[13px] font-medium text-gray-500\&quot;&gt;Juillet 2026&lt;\/p&gt;\n                            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n                    &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%\/3-var(--grid-gutter)*2\/3)]\&quot;\n                        role=\&quot;group\&quot;\n                        aria-label=\&quot;Avis 6 sur 11\&quot;\n                    &gt;\n                        &lt;div class=\&quot;border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rou
507nded-3xl min-h-[415px] lg:min-h-[419px]\&quot;&gt;\n        \n            &lt;div class=\&quot;testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0\&quot; data-rating=\&quot;5\&quot;&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0\/10\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0\/[0.07]\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n                            &lt;p class=\&quot;relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]\&quot;&gt;Avis Google Play&lt;\/p&gt;\n                        &lt;p class=\&quot;relative flex items-center gap-1.5\&quot; role=\&quot;img\&quot; aria-label=\&quot;5\/5\&quot;&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                            &lt;\/p&gt;\n            &lt;p class=\&quot;relative font-helvetica-now-display text-[28px] font-bold leading-none\&quot;&gt;5\/5&lt;\/p&gt;\n        &lt;\/div&gt;\n    \n    \n        &lt;div class=\&quot;flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5\&quot;&gt;\n        &lt;div class=\&quot;flex flex-1 flex-col justify-center gap-2\&quot;&gt;\n                            &lt;svg viewBox=\&quot;0 0 32 24\&quot; class=\&quot;h-6 w-8 shrink-0 text-[#CBC7FF]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                    &lt;path d=\&quot;M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z\&quot; \/&gt;\n                &lt;\/svg&gt;\n                        &lt;blockquote&gt;\n                &lt;p class=\&quot;text-body font-medium leading-relaxed text-dark-850\&quot;&gt;Super appli pour retrouver ses animaux disparus ou ceux des autres, c&amp;#039;est une appli vitale de nos jours et \u00e7a m\u00e9rite d&amp;#039;\u00eatre t\u00e9l\u00e9charg\u00e9 par tous les propri\u00e9taires d&amp;#039;animaux.&lt;\/p&gt;\n            &lt;\/blockquote&gt;\n        &lt;\/div&gt;\n        &lt;div class=\&quot;flex items-center gap-3 border-t border-gray-75 pt-4\&quot;&gt;\n                            &lt;span class=\&quot;flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]\&quot; aria-hidden=\&quot;true\&quot;&gt;L&lt;\/span&gt;\n                        &lt;div class=\&quot;flex min-w-0 flex-col leading-tight\&quot;&gt;\n                &lt;p class=\&quot;text-body-sm font-bold text-dark-850\&quot;&gt;\n                    &lt;cite class=\&quot;not-italic\&quot;&gt;Laureen&lt;\/cite&gt;\n                &lt;\/p&gt;\n                                    &lt;p class=\&quot;text-[13px] font-medium text-gray-500\&quot;&gt;Juillet 2026&lt;\/p&gt;\n                            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n                    &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%\/3-var(--grid-gutter)*2\/3)]\&quot;\n                        role=\&quot;group\&quot;\n                        aria-label=\&quot;Avis 7 sur 11\&quot;\n                    &gt;\n                        &lt;div class=\&quot;border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rou
507nded-3xl min-h-[415px] lg:min-h-[419px]\&quot;&gt;\n        \n            &lt;div class=\&quot;testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0\&quot; data-rating=\&quot;5\&quot;&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0\/10\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0\/[0.07]\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n                            &lt;p class=\&quot;relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]\&quot;&gt;Avis Google Play&lt;\/p&gt;\n                        &lt;p class=\&quot;relative flex items-center gap-1.5\&quot; role=\&quot;img\&quot; aria-label=\&quot;5\/5\&quot;&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                            &lt;\/p&gt;\n            &lt;p class=\&quot;relative font-helvetica-now-display text-[28px] font-bold leading-none\&quot;&gt;5\/5&lt;\/p&gt;\n        &lt;\/div&gt;\n    \n    \n        &lt;div class=\&quot;flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5\&quot;&gt;\n        &lt;div class=\&quot;flex flex-1 flex-col justify-center gap-2\&quot;&gt;\n                            &lt;svg viewBox=\&quot;0 0 32 24\&quot; class=\&quot;h-6 w-8 shrink-0 text-[#CBC7FF]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                    &lt;path d=\&quot;M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z\&quot; \/&gt;\n                &lt;\/svg&gt;\n                        &lt;blockquote&gt;\n                &lt;p class=\&quot;text-body font-medium leading-relaxed text-dark-850\&quot;&gt;Une application pour retrouver les animaux perdus ou pour retrouver les propri\u00e9taires d&amp;#039;animaux trouv\u00e9s est une bonne id\u00e9e. C&amp;#039;est tellement plus pratique. Merci de l&amp;#039;avoir cr\u00e9\u00e9e.&lt;\/p&gt;\n            &lt;\/blockquote&gt;\n        &lt;\/div&gt;\n        &lt;div class=\&quot;flex items-center gap-3 border-t border-gray-75 pt-4\&quot;&gt;\n                            &lt;span class=\&quot;flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]\&quot; aria-hidden=\&quot;true\&quot;&gt;V&lt;\/span&gt;\n                        &lt;div class=\&quot;flex min-w-0 flex-col leading-tight\&quot;&gt;\n                &lt;p class=\&quot;text-body-sm font-bold text-dark-850\&quot;&gt;\n                    &lt;cite class=\&quot;not-italic\&quot;&gt;Vinie&lt;\/cite&gt;\n                &lt;\/p&gt;\n                                    &lt;p class=\&quot;text-[13px] font-medium text-gray-500\&quot;&gt;Ao\u00fbt 2026&lt;\/p&gt;\n                            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n                    &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%\/3-var(--grid-gutter)*2\/3)]\&quot;\n                        role=\&quot;group\&quot;\n                        aria-label=\&quot;Avis 8 sur 11\&quot;\n                    &gt;\n                        &lt;div class=\&quot;border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rou
507nded-3xl min-h-[415px] lg:min-h-[419px]\&quot;&gt;\n        \n            &lt;div class=\&quot;testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0\&quot; data-rating=\&quot;5\&quot;&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0\/10\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0\/[0.07]\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n                            &lt;p class=\&quot;relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]\&quot;&gt;Avis App Store&lt;\/p&gt;\n                        &lt;p class=\&quot;relative flex items-center gap-1.5\&quot; role=\&quot;img\&quot; aria-label=\&quot;5\/5\&quot;&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                            &lt;\/p&gt;\n            &lt;p class=\&quot;relative font-helvetica-now-display text-[28px] font-bold leading-none\&quot;&gt;5\/5&lt;\/p&gt;\n        &lt;\/div&gt;\n    \n    \n        &lt;div class=\&quot;flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5\&quot;&gt;\n        &lt;div class=\&quot;flex flex-1 flex-col justify-center gap-2\&quot;&gt;\n                            &lt;svg viewBox=\&quot;0 0 32 24\&quot; class=\&quot;h-6 w-8 shrink-0 text-[#CBC7FF]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                    &lt;path d=\&quot;M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z\&quot; \/&gt;\n                &lt;\/svg&gt;\n                        &lt;blockquote&gt;\n                &lt;p class=\&quot;text-body font-medium leading-relaxed text-dark-850\&quot;&gt;Cette application \u00e9tait tellement attendue. Tr\u00e8s pratique pour inscrire vos animaux et lancer une alerte en cas de disparition. Et totalement gratuite, que demander de plus. Merci.&lt;\/p&gt;\n            &lt;\/blockquote&gt;\n        &lt;\/div&gt;\n        &lt;div class=\&quot;flex items-center gap-3 border-t border-gray-75 pt-4\&quot;&gt;\n                            &lt;span class=\&quot;flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]\&quot; aria-hidden=\&quot;true\&quot;&gt;M&lt;\/span&gt;\n                        &lt;div class=\&quot;flex min-w-0 flex-col leading-tight\&quot;&gt;\n                &lt;p class=\&quot;text-body-sm font-bold text-dark-850\&quot;&gt;\n                    &lt;cite class=\&quot;not-italic\&quot;&gt;Mathilde&lt;\/cite&gt;\n                &lt;\/p&gt;\n                                    &lt;p class=\&quot;text-[13px] font-medium text-gray-500\&quot;&gt;Juillet 2026&lt;\/p&gt;\n                            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n                    &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%\/3-var(--grid-gutter)*2\/3)]\&quot;\n                        role=\&quot;group\&quot;\n                        aria-label=\&quot;Avis 9 sur 11\&quot;\n                    &gt;\n                        &lt;div class=\&quot;border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rou
507nded-3xl min-h-[415px] lg:min-h-[419px]\&quot;&gt;\n        \n            &lt;div class=\&quot;testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0\&quot; data-rating=\&quot;5\&quot;&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0\/10\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0\/[0.07]\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n                            &lt;p class=\&quot;relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]\&quot;&gt;Avis Google Play&lt;\/p&gt;\n                        &lt;p class=\&quot;relative flex items-center gap-1.5\&quot; role=\&quot;img\&quot; aria-label=\&quot;5\/5\&quot;&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                            &lt;\/p&gt;\n            &lt;p class=\&quot;relative font-helvetica-now-display text-[28px] font-bold leading-none\&quot;&gt;5\/5&lt;\/p&gt;\n        &lt;\/div&gt;\n    \n    \n        &lt;div class=\&quot;flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5\&quot;&gt;\n        &lt;div class=\&quot;flex flex-1 flex-col justify-center gap-2\&quot;&gt;\n                            &lt;svg viewBox=\&quot;0 0 32 24\&quot; class=\&quot;h-6 w-8 shrink-0 text-[#CBC7FF]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                    &lt;path d=\&quot;M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z\&quot; \/&gt;\n                &lt;\/svg&gt;\n                        &lt;blockquote&gt;\n                &lt;p class=\&quot;text-body font-medium leading-relaxed text-dark-850\&quot;&gt;D\u00e9couverte sur Instagram, \u00e9tant une grande passionn\u00e9e et amoureuse des animaux, je ne peux que saluer la d\u00e9marche et recommander chaudement aux gens qui aiment leurs animaux autant que moi d&amp;#039;installer cette application.&lt;\/p&gt;\n            &lt;\/blockquote&gt;\n        &lt;\/div&gt;\n        &lt;div class=\&quot;flex items-center gap-3 border-t border-gray-75 pt-4\&quot;&gt;\n                            &lt;span class=\&quot;flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]\&quot; aria-hidden=\&quot;true\&quot;&gt;I&lt;\/span&gt;\n                        &lt;div class=\&quot;flex min-w-0 flex-col leading-tight\&quot;&gt;\n                &lt;p class=\&quot;text-body-sm font-bold text-dark-850\&quot;&gt;\n                    &lt;cite class=\&quot;not-italic\&quot;&gt;Ir\u00e9lia&lt;\/cite&gt;\n                &lt;\/p&gt;\n                                    &lt;p class=\&quot;text-[13px] font-medium text-gray-500\&quot;&gt;Juillet 2026&lt;\/p&gt;\n                            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n                    &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%\/3-var(--grid-gutter)*2\/3)]\&quot;\n                        role=\&quot;group\&quot;\n                        aria-label=\&quot;Avis 10 sur 11\&quot;\n                    &gt;\n                        &lt;div class=\&quot;border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rou
507nded-3xl min-h-[415px] lg:min-h-[419px]\&quot;&gt;\n        \n            &lt;div class=\&quot;testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0\&quot; data-rating=\&quot;5\&quot;&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0\/10\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0\/[0.07]\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n                            &lt;p class=\&quot;relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]\&quot;&gt;Avis App Store&lt;\/p&gt;\n                        &lt;p class=\&quot;relative flex items-center gap-1.5\&quot; role=\&quot;img\&quot; aria-label=\&quot;5\/5\&quot;&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                            &lt;\/p&gt;\n            &lt;p class=\&quot;relative font-helvetica-now-display text-[28px] font-bold leading-none\&quot;&gt;5\/5&lt;\/p&gt;\n        &lt;\/div&gt;\n    \n    \n        &lt;div class=\&quot;flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5\&quot;&gt;\n        &lt;div class=\&quot;flex flex-1 flex-col justify-center gap-2\&quot;&gt;\n                            &lt;svg viewBox=\&quot;0 0 32 24\&quot; class=\&quot;h-6 w-8 shrink-0 text-[#CBC7FF]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                    &lt;path d=\&quot;M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z\&quot; \/&gt;\n                &lt;\/svg&gt;\n                        &lt;blockquote&gt;\n                &lt;p class=\&quot;text-body font-medium leading-relaxed text-dark-850\&quot;&gt;Superbe initiative\u00a0! L&amp;#039;application est belle, elle est r\u00e9active, j&amp;#039;esp\u00e8re qu&amp;#039;elle aidera beaucoup de monde\u00a0!&lt;\/p&gt;\n            &lt;\/blockquote&gt;\n        &lt;\/div&gt;\n        &lt;div class=\&quot;flex items-center gap-3 border-t border-gray-75 pt-4\&quot;&gt;\n                            &lt;span class=\&quot;flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]\&quot; aria-hidden=\&quot;true\&quot;&gt;C&lt;\/span&gt;\n                        &lt;div class=\&quot;flex min-w-0 flex-col leading-tight\&quot;&gt;\n                &lt;p class=\&quot;text-body-sm font-bold text-dark-850\&quot;&gt;\n                    &lt;cite class=\&quot;not-italic\&quot;&gt;Cl\u00e9ment&lt;\/cite&gt;\n                &lt;\/p&gt;\n                                    &lt;p class=\&quot;text-[13px] font-medium text-gray-500\&quot;&gt;Juillet 2026&lt;\/p&gt;\n                            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n                    &lt;\/div&gt;\n                                    &lt;div\n                        class=\&quot;flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%\/3-var(--grid-gutter)*2\/3)]\&quot;\n                        role=\&quot;group\&quot;\n                        aria-label=\&quot;Avis 11 sur 11\&quot;\n                    &gt;\n                        &lt;div class=\&quot;border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rou
507nded-3xl min-h-[415px] lg:min-h-[419px]\&quot;&gt;\n        \n            &lt;div class=\&quot;testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0\&quot; data-rating=\&quot;5\&quot;&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0\/10\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n            &lt;span class=\&quot;pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0\/[0.07]\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;\/span&gt;\n                            &lt;p class=\&quot;relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]\&quot;&gt;Avis App Store&lt;\/p&gt;\n                        &lt;p class=\&quot;relative flex items-center gap-1.5\&quot; role=\&quot;img\&quot; aria-label=\&quot;5\/5\&quot;&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                                    &lt;svg viewBox=\&quot;0 0 24 24\&quot; class=\&quot;size-7 text-[#FFC63B]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                        &lt;path d=\&quot;M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z\&quot; \/&gt;\n                    &lt;\/svg&gt;\n                            &lt;\/p&gt;\n            &lt;p class=\&quot;relative font-helvetica-now-display text-[28px] font-bold leading-none\&quot;&gt;5\/5&lt;\/p&gt;\n        &lt;\/div&gt;\n    \n    \n        &lt;div class=\&quot;flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5\&quot;&gt;\n        &lt;div class=\&quot;flex flex-1 flex-col justify-center gap-2\&quot;&gt;\n                            &lt;svg viewBox=\&quot;0 0 32 24\&quot; class=\&quot;h-6 w-8 shrink-0 text-[#CBC7FF]\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n                    &lt;path d=\&quot;M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z\&quot; \/&gt;\n                &lt;\/svg&gt;\n                        &lt;blockquote&gt;\n                &lt;p class=\&quot;text-body font-medium leading-relaxed text-dark-850\&quot;&gt;Top id\u00e9e. Une appli pour maximiser les chances de retrouver ses animaux perdus.&lt;\/p&gt;\n            &lt;\/blockquote&gt;\n        &lt;\/div&gt;\n        &lt;div class=\&quot;flex items-center gap-3 border-t border-gray-75 pt-4\&quot;&gt;\n                            &lt;span class=\&quot;flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]\&quot; aria-hidden=\&quot;true\&quot;&gt;S&lt;\/span&gt;\n                        &lt;div class=\&quot;flex min-w-0 flex-col leading-tight\&quot;&gt;\n                &lt;p class=\&quot;text-body-sm font-bold text-dark-850\&quot;&gt;\n                    &lt;cite class=\&quot;not-italic\&quot;&gt;S\u00e9bastien&lt;\/cite&gt;\n                &lt;\/p&gt;\n                                    &lt;p class=\&quot;text-[13px] font-medium text-gray-500\&quot;&gt;Septembre 2026&lt;\/p&gt;\n                            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n                    &lt;\/div&gt;\n                            &lt;\/div&gt;\n        &lt;\/div&gt;\n\n        \n        &lt;div class=\&quot;flex items-center gap-1\&quot; role=\&quot;tablist\&quot; aria-label=\&quot;Navigation des avis\&quot;&gt;\n            &lt;template x-for=\&quot;i in count\&quot; :key=\&quot;i\&quot;&gt;\n                &lt;button\n                        type=\&quot;button\&quot;\n                        role=\&quot;tab\&quot;\n                        :aria-selected=\&quot;current === (i - 1) ? &#039;true&#039; : &#039;false&#039;\&quot;\n                        :aria-label=\&quot;&#039;Page &#039; + i\&quot;\n                        @click=\&quot;scrollTo(i - 1)\&quot;\n                        class=\&quot;flex items-center justify-center size-6 cursor-pointer\&quot;\n                &gt;\n                    &lt;span class=\&quot;rounded-full transition-all duration-300\&quot; :class=\&quot;current === (i - 1) ? &#039;w-[21px] h-2 bg-purple-100&#039; : &#039;size-2 bg-purple-50&#039;\&quot;&gt;&lt;\/span&gt;\n                &lt;\/button&gt;\n            &lt;\/template&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\&quot;page-wrapper hidden lg:block pointer-events-none pt-[70px]\&quot;&gt;\n    &lt;div x-data=\&quot;sectionNav({ inheritPrevious: false })\&quot;\n     class=\&quot;transition-opacity duration-300\&quot;\n     :style=\&quot;&#039;opacity: &#039;
507 + opacity\&quot;\n     x-cloak&gt;\n    &lt;div class=\&quot;w-[425px]\&quot;&gt;\n        &lt;div class=\&quot;flex items-center justify-end gap-3 font-helvetica-now-display text-lg leading-[1.4] mb-[20px] text-purple-500\&quot;&gt;\n            &lt;span class=\&quot;tabular-nums\&quot; x-text=\&quot;number\&quot;&gt;&lt;\/span&gt;\n            &lt;span x-text=\&quot;label\&quot;&gt;&lt;\/span&gt;\n        &lt;\/div&gt;\n        &lt;div class=\&quot;relative\&quot;&gt;\n            &lt;div class=\&quot;h-px w-full rounded-[1px]\&quot;\n                 style=\&quot;background: linear-gradient(to right, rgba(127,121,209,0) 0%, #7F79D1 100%);\&quot;&gt;&lt;\/div&gt;\n            &lt;div class=\&quot;absolute top-1\/2 -translate-y-1\/2 transition-[left] duration-300 ease-out will-change-[left,opacity]\&quot;\n                 :style=\&quot;&#039;left: &#039; + arrowLeft + &#039;px&#039;\&quot;&gt;\n                &lt;div class=\&quot;flex items-center justify-center h-[33px] px-4 rounded-full bg-purple-10 text-purple-500\&quot;&gt;\n                    &lt;svg width=\&quot;18\&quot; height=\&quot;18\&quot;
507 viewBox=\&quot;0 0 24 24\&quot; fill=\&quot;none\&quot;&gt;\n                        &lt;path d=\&quot;M8.91 19.92L15.43 13.4C16.2 12.63 16.2 11.37 15.43 10.6L8.91 4.08\&quot;\n                              stroke=\&quot;currentColor\&quot; stroke-width=\&quot;1.5\&quot; stroke-miterlimit=\&quot;10\&quot;\n                              stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                    &lt;\/svg&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n        &lt;\/div&gt;\n    \n\n&lt;\/section&gt;\n&lt;section\n     id=\&quot;faq\&quot;     class=\&quot;page-section\&quot;\n         data-section-label=\&quot;FAQ\&quot;      aria-labelledby=\&quot;heading-faq\&quot;\n    &gt;\n            &lt;div class=\&quot;page-wrapper relative z-10 flex flex-col items-center gap-8 lg:gap-10\&quot;&gt;\n        &lt;h2\n                id=\&quot;heading-faq\&quot;\n                data-reveal\n                class=\&quot;text-heading-section text-dark-850 lg:text-center\&quot;\n        &gt;\n            &lt;span&gt;Questions&lt;\/span&gt;\n            &lt;br class=\&quot;hidden lg:inline\&quot; aria-hidden=\&quot;true\&quot;&gt;\n            &lt;span&gt;fr\u00e9quentes&lt;\/span&gt;\n        &lt;\/h2&gt;\n\n        &lt;div data-reveal-group class=\&quot;w-full grid grid-cols-1 gap-4 lg:gap-[var(--grid-gutter)] lg:grid-cols-2\&quot;&gt;\n                                            &lt;div\n                        x-data=\&quot;{ open: true }\&quot;\n                        class=\&quot;
507border rounded-xl lg:rounded-2xl transition-all\&quot;\n                        :class=\&quot;open\n                        ? &#039;bg-white-0 border-overlay-border shadow-[var(--shadow-faq)]&#039;\n                        : &#039;bg-transparent border-overlay-border&#039;\&quot;\n                &gt;\n                    &lt;button\n                            type=\&quot;button\&quot;\n                            class=\&quot;flex items-center justify-between gap-4 w-full p-4 lg:p-8 text-left cursor-pointer\&quot;\n                            @click=\&quot;open = !open\&quot;\n                            :aria-expanded=\&quot;open.toString()\&quot;\n                            aria-controls=\&quot;faq-panel-0\&quot;\n                    &gt;\n                        &lt;span\n                                class=\&quot;font-helvetica-now-display font-medium text-base lg:text-lg leading-[1.4]\&quot;\n                                :class=\&quot;open ? &#039;text-purple-400&#039; : &#039;text-dark-850&#039;\&quot;\n                        &gt;Comment fonctionne l&amp;#039;alerte communautaire ?&lt;\/span&gt;\n\n                        &lt;span\n                                class=\&quot;shrink-0 flex items-center justify-center size-9 rounded-full transition-colors\&quot;\n                                :class=\&quot;open ? &#039;bg-purple-300&#039; : &#039;bg-blue-15&#039;\&quot;\n                        &gt;\n                                                            &lt;img\n                                        :src=\&quot;open ? &#039;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/faq\/minus-icon.svg&#039; : &#039;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/faq\/plus-icon.svg&#039;\&quot;\n                                        alt=\&quot;\&quot;\n                                        aria-hidden=\&quot;true\&quot;\n                                        class=\&quot;size-4\&quot;\n                                &gt;\n                                                    &lt;\/span&gt;\n                    &lt;\/button&gt;\n\n                                            &lt;div\n                                id=\&quot;faq-panel-0\&quot;\n                                x-show=\&quot;open\&quot;\n                                x-transition.opacity.duration.200ms\n                                class=\&quot;px-4 pb-4 lg:px-8 lg:pb-8 -mt-2\&quot;\n                        &gt;\n                            &lt;p class=\&quot;text-body text-dark-850\&quot;&gt;\n                                Vous signalez un animal perdu, trouv\u00e9 ou vu avec une photo, une description et une localisation. L&amp;#039;alerte est ensuite diffus\u00e9e localement pour mobiliser rapidement les personnes \u00e0 proximit\u00e9.\n                            &lt;\/p&gt;\n                        &lt;\/div&gt;\n                                    &lt;\/div&gt;\n                                            &lt;div\n                        x-data=\&quot;{ open: true }\&quot;\n                        class=\&quot;
507border rounded-xl lg:rounded-2xl transition-all\&quot;\n                        :class=\&quot;open\n                        ? &#039;bg-white-0 border-overlay-border shadow-[var(--shadow-faq)]&#039;\n                        : &#039;bg-transparent border-overlay-border&#039;\&quot;\n                &gt;\n                    &lt;button\n                            type=\&quot;button\&quot;\n                            class=\&quot;flex items-center justify-between gap-4 w-full p-4 lg:p-8 text-left cursor-pointer\&quot;\n                            @click=\&quot;open = !open\&quot;\n                            :aria-expanded=\&quot;open.toString()\&quot;\n                            aria-controls=\&quot;faq-panel-1\&quot;\n                    &gt;\n                        &lt;span\n                                class=\&quot;font-helvetica-now-display font-medium text-base lg:text-lg leading-[1.4]\&quot;\n                                :class=\&quot;open ? &#039;text-purple-400&#039; : &#039;text-dark-850&#039;\&quot;\n                        &gt;L&amp;#039;application est-elle vraiment gratuite ?&lt;\/span&gt;\n\n                        &lt;span\n                                class=\&quot;shrink-0 flex items-center justify-center size-9 rounded-full transition-colors\&quot;\n                                :class=\&quot;open ? &#039;bg-purple-300&#039; : &#039;bg-blue-15&#039;\&quot;\n                        &gt;\n                                                            &lt;img\n                                        :src=\&quot;open ? &#039;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/faq\/minus-icon.svg&#039; : &#039;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/faq\/plus-icon.svg&#039;\&quot;\n                                        alt=\&quot;\&quot;\n                                        aria-hidden=\&quot;true\&quot;\n                                        class=\&quot;size-4\&quot;\n                                &gt;\n                                                    &lt;\/span&gt;\n                    &lt;\/button&gt;\n\n                                            &lt;div\n                                id=\&quot;faq-panel-1\&quot;\n                                x-show=\&quot;open\&quot;\n                                x-transition.opacity.duration.200ms\n                                class=\&quot;px-4 pb-4 lg:px-8 lg:pb-8 -mt-2\&quot;\n                        &gt;\n                            &lt;p class=\&quot;text-body text-dark-850\&quot;&gt;\n                                Oui. Animou est et restera gratuite pour les fonctionnalit\u00e9s essentielles. Aucun frais cach\u00e9.\n                            &lt;\/p&gt;\n                        &lt;\/div&gt;\n                                    &lt;\/div&gt;\n                                            &lt;div\n                        x-data=\&quot;{ open: false }\&quot;\n                        class=\&quot;
507border rounded-xl lg:rounded-2xl transition-all\&quot;\n                        :class=\&quot;open\n                        ? &#039;bg-white-0 border-overlay-border shadow-[var(--shadow-faq)]&#039;\n                        : &#039;bg-transparent border-overlay-border&#039;\&quot;\n                &gt;\n                    &lt;button\n                            type=\&quot;button\&quot;\n                            class=\&quot;flex items-center justify-between gap-4 w-full p-4 lg:p-8 text-left cursor-pointer\&quot;\n                            @click=\&quot;open = !open\&quot;\n                            :aria-expanded=\&quot;open.toString()\&quot;\n                            aria-controls=\&quot;faq-panel-2\&quot;\n                    &gt;\n                        &lt;span\n                                class=\&quot;font-helvetica-now-display font-medium text-base lg:text-lg leading-[1.4]\&quot;\n                                :class=\&quot;open ? &#039;text-purple-400&#039; : &#039;text-dark-850&#039;\&quot;\n                        &gt;Mes donn\u00e9es personnelles sont-elles prot\u00e9g\u00e9es ?&lt;\/span&gt;\n\n                        &lt;span\n                                class=\&quot;shrink-0 flex items-center justify-center size-9 rounded-full transition-colors\&quot;\n                                :class=\&quot;open ? &#039;bg-purple-300&#039; : &#039;bg-blue-15&#039;\&quot;\n                        &gt;\n                                                            &lt;img\n                                        :src=\&quot;open ? &#039;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/faq\/minus-icon.svg&#039; : &#039;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/faq\/plus-icon.svg&#039;\&quot;\n                                        alt=\&quot;\&quot;\n                                        aria-hidden=\&quot;true\&quot;\n                                        class=\&quot;size-4\&quot;\n                                &gt;\n                                                    &lt;\/span&gt;\n                    &lt;\/button&gt;\n\n                                            &lt;div\n                                id=\&quot;faq-panel-2\&quot;\n                                x-show=\&quot;open\&quot;\n                                x-transition.opacity.duration.200ms\n                                class=\&quot;px-4 pb-4 lg:px-8 lg:pb-8 -mt-2\&quot;\n                        &gt;\n                            &lt;p class=\&quot;text-body text-dark-850\&quot;&gt;\n                                Oui. La protection des donn\u00e9es fait partie de nos priorit\u00e9s. Vos informations sont trait\u00e9es avec soin et ne sont pas revendues.\n                            &lt;\/p&gt;\n                        &lt;\/div&gt;\n                                    &lt;\/div&gt;\n                                            &lt;div\n                        x-data=\&quot;{ open: false }\&quot;\n                        class=\&quot;
507border rounded-xl lg:rounded-2xl transition-all\&quot;\n                        :class=\&quot;open\n                        ? &#039;bg-white-0 border-overlay-border shadow-[var(--shadow-faq)]&#039;\n                        : &#039;bg-transparent border-overlay-border&#039;\&quot;\n                &gt;\n                    &lt;button\n                            type=\&quot;button\&quot;\n                            class=\&quot;flex items-center justify-between gap-4 w-full p-4 lg:p-8 text-left cursor-pointer\&quot;\n                            @click=\&quot;open = !open\&quot;\n                            :aria-expanded=\&quot;open.toString()\&quot;\n                            aria-controls=\&quot;faq-panel-3\&quot;\n                    &gt;\n                        &lt;span\n                                class=\&quot;font-helvetica-now-display font-medium text-base lg:text-lg leading-[1.4]\&quot;\n                                :class=\&quot;open ? &#039;text-purple-400&#039; : &#039;text-dark-850&#039;\&quot;\n                        &gt;Puis-je aider m\u00eame si je n&amp;#039;ai pas perdu d&amp;#039;animal ?&lt;\/span&gt;\n\n                        &lt;span\n                                class=\&quot;shrink-0 flex items-center justify-center size-9 rounded-full transition-colors\&quot;\n                                :class=\&quot;open ? &#039;bg-purple-300&#039; : &#039;bg-blue-15&#039;\&quot;\n                        &gt;\n                                                            &lt;img\n                                        :src=\&quot;open ? &#039;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/faq\/minus-icon.svg&#039; : &#039;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/faq\/plus-icon.svg&#039;\&quot;\n                                        alt=\&quot;\&quot;\n                                        aria-hidden=\&quot;true\&quot;\n                                        class=\&quot;size-4\&quot;\n                                &gt;\n                                                    &lt;\/span&gt;\n                    &lt;\/button&gt;\n\n                                            &lt;div\n                                id=\&quot;faq-panel-3\&quot;\n                                x-show=\&quot;open\&quot;\n                                x-transition.opacity.duration.200ms\n                                class=\&quot;px-4 pb-4 lg:px-8 lg:pb-8 -mt-2\&quot;\n                        &gt;\n                            &lt;p class=\&quot;text-body text-dark-850\&quot;&gt;\n                                Oui. Chaque utilisateur peut contribuer en restant attentif aux alertes autour de lui et en aidant \u00e0 relayer les signalements.\n                            &lt;\/p&gt;\n                        &lt;\/div&gt;\n                                    &lt;\/div&gt;\n                    &lt;\/div&gt;\n\n            &lt;\/div&gt;\n\n            &lt;div class=\&quot;page-wrapper hidden lg:block pointer-events-none pt-[70px]\&quot;&gt;\n    &lt;div x-data=\&quot;sectionNav({ inheritPrevious: false })\&quot;\n     class=\&quot;transition-opacity duration-300\&quot;\n     :style=\&quot;&#039;opacity: &#039; + opacity\&quot;\n     x-cloak&gt;\n    &lt;div class=\&quot;w-[425px]\&quot;&gt;\n        &lt;div class=\&quot;flex items-center justify-end gap-3 font-helvetica-now-display text-lg leading-[1.4] mb-[20px] text-purple-500\&quot;&gt;\n            &lt;span class=\&quot;tabular-nums\&quot; x-text=\&quot;number\&quot;&gt;&lt;\/span&gt;\n            &lt;span x-text=\&quot;label\&quot;&gt;&lt;\/span&gt;\n        &lt;\/div&gt;\n        &lt;div class=\&quot;relative\&quot;&gt;\n            &lt;div class=\&quot;h-px w-full rounded-[1px]\&quot;\n                 style=\&quot;background: linear-gradient(to right, rgba(127,121,209,0) 0%, #7F79D1 100%);\&quot;&gt;&lt;\/div&gt;\n            &lt;div class=\&quot;absolute top-1\/2 -translate-y-1\/2 transition-[left] duration-300 ease-out will-change-[left,opacity]\&quot;\n                 :style=\&quot;&#039;left: &#039;
507 + arrowLeft + &#039;px&#039;\&quot;&gt;\n                &lt;div class=\&quot;flex items-center justify-center h-[33px] px-4 rounded-full bg-purple-10 text-purple-500\&quot;&gt;\n                    &lt;svg width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 24 24\&quot; fill=\&quot;none\&quot;&gt;\n                        &lt;path d=\&quot;M8.91 19.92L15.43 13.4C16.2 12.63 16.2 11.37 15.43 10.6L8.91 4.08\&quot;\n                              stroke=\&quot;currentColor\&quot; stroke-width=\&quot;1.5\&quot; stroke-miterlimit=\&quot;10\&quot;\n                              stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                    &lt;\/svg&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n    \n    \n                &lt;script type=\&quot;application\/ld+json\&quot;&gt;\n{\n    \&quot;@context\&quot;: \&quot;https:\/\/schema.org\&quot;,\n    \&quot;@type\&quot;: \&quot;FAQPage\&quot;,\n    \&quot;mainEntity\&quot;: [\n        {\n            \&quot;@type\&quot;: \&quot;Question\&quot;,\n            \&quot;name\&quot;: \&quot;Comment fonctionne l&#039;alerte communautaire ?\&quot;,\n            \&quot;acceptedAnswer\&quot;: {\n                \&quot;@type\&quot;: \&quot;Answer\&quot;,\n                \&quot;text\&quot;: \&quot;Vous signalez un animal perdu, trouv\u00e9 ou vu avec une photo, une description et une localisation. L&#039;alerte est ensuite diffus\u00e9e localement pour mobiliser rapidement les personnes \u00e0 proximit\u00e9.\&quot;\n            }\n        },\n        {\n            \&quot;@type\&quot;: \&quot;Question\&quot;,\n            \&quot;name\&quot;: \&quot;L&#039;application est-elle vraiment gratuite ?\&quot;,\n            \&quot;acceptedAnswer\&quot;: {\n                \&quot;@type\&quot;: \&quot;Answer\&quot;,\n                \&quot;text\&quot;: \&quot;Oui. Animou est et restera gratuite pour les fonctionnalit\u00e9s essentielles. Aucun frais cach\u00e9.\&quot;\n            }\n        },\n        {\n            \&quot;@type\&quot;: \&quot;Question\&quot;,\n            \&quot;name\&quot;: \&quot;Mes donn\u00e9es personnelles sont-elles prot\u00e9g\u00e9es ?\&quot;,\n            \&quot;acceptedAnswer\&quot;: {\n                \&quot;@type\&quot;: \&quot;Answer\&quot;,\n                \&quot;text\&quot;: \&quot;Oui. La protection des donn\u00e9es fait partie de nos priorit\u00e9s. Vos informations sont trait\u00e9es avec soin et ne sont pas revendues.\&quot;\n            }\n        },\n        {\n            \&quot;@type\&quot;: \&quot;Question\&quot;,\n            \&quot;name\&quot;: \&quot;Puis-je aider m\u00eame si je n&#039;ai pas perdu d&#039;animal ?\&quot;,\n            \&quot;acceptedAnswer\&quot;: {\n                \&quot;@type\&quot;: \&quot;Answer\&quot;,\n                \&quot;text\&quot;: \&quot;Oui. Chaque utilisateur peut contribuer en restant attentif aux alertes autour de lui et en aidant \u00e0 relayer les signalements.\&quot;\n            }\n        }\n    ]\n}\n        &lt;\/script&gt;\n    \n\n&lt;\/section&gt;\n&lt;section\n     id=\&quot;download\&quot;     class=\&quot;page-section\&quot;\n            data-viewport-motion\n        x-data=\&quot;{ viewportMotionActive: false }\&quot;\n        x-intersect:enter.margin.-10%=\&quot;viewportMotionActive = true\&quot;\n        x-intersect:leave.margin.-10%=\&quot;viewportMotionActive = false\&quot;\n        :class=\&quot;{\n            &#039;viewport-motion-active&#039;: viewportMotionActive,\n            &#039;viewport-motion-pending&#039;: ! viewportMotionActive,\n        }\&quot;\n         data-section-label=\&quot;T\u00e9l\u00e9chargement\&quot;      aria-labelledby=\&quot;heading-download\&quot;\n    &gt;\n            &lt;div class=\&quot;page-wrapper\&quot;&gt;\n            &lt;div data-reveal-group class=\&quot;flex flex-col lg:flex-row items-center gap-10 lg:gap-16 w-full\&quot;&gt;\n\n        \n        &lt;div class=\&quot;flex flex-col gap-8 lg:gap-12 flex-1 w-full min-w-0\&quot;&gt;\n            \n            &lt;div class=\&quot;flex flex-col gap-4\&quot;&gt;\n                &lt;h2\n                        id=\&quot;heading-download\&quot;\n                        class=\&quot;text-heading-section text-dark-850\&quot;\n                &gt;T\u00e9l\u00e9chargez Animou gratuitement&lt;\/h2&gt;\n                &lt;p class=\&quot;text-subtitle text-dark-700\&quot;&gt;\n                    Disponible d\u00e8s maintenant sur l&amp;#039;App Store et Google Play.\n                &lt;\/p&gt;\n            &lt;\/div&gt;\n\n            \n            &lt;div class=\&quot;flex flex-wrap lg:flex-nowrap gap-3 lg:gap-4 w-full\&quot;&gt;\n                &lt;a\n    href=\&quot;https:\/\/apps.apple.com\/fr\/app\/animou-animaux-perdus\/id6779167347\&quot;\n     data-track=\&quot;appstore\&quot;     class=\&quot;\n        flex items-center justify-center lg:justify-start gap-2 h-[60px] lg:h-[66px] px-3 lg:px-[21px] rounded-[10px]\n        bg-purple-500 border border-white-0\/20 no-underline\n        hover:bg-purple-400 transition-colors w-[180px] lg:w-[200px] shrink-0\n    \&quot;\n&gt;\n            &lt;img\n            src=\&quot;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/download\/app-store-icon.svg\&quot;\n            alt=\&quot;\&quot;\n            loading=\&quot;lazy\&quot;\n            aria-hidden=\&quot;true\&quot; class=\&quot;size-6 lg:size-8 shrink-0\&quot;\n        \/&gt;\n            &lt;span class=\&quot;flex flex-col font-helvetica-now-display font-medium leading-[1.2] text-white-0\&quot;&gt;\n        &lt;span class=\&quot;text-[10px] lg:text-xs\&quot;&gt;Disponible sur&lt;\/span&gt;\n        &lt;span class=\&quot;text-sm lg:text-[15px] whitespace-nowrap\&quot;&gt;App Store&lt;\/span&gt;\n    &lt;\/span&gt;\n&lt;\/a&gt;\n                &lt;a\n    href=\&quot;https:\/\/play.google.com\/store\/apps\/details?id=com.animou.app\&quot;\n     data-track=\&quot;playstore\&quot;     class=\&quot;\n        flex items-center justify-center lg:justify-start gap-2 h-[60px] lg:h-[66px] px-3 lg:px-[21px] rounded-[10px]\n        bg-purple-500 border border-white-0\/20 no-underline\n        hover:bg-purple-400 transition-colors w-[180px] lg:w-[200px] shrink-0\n    \&quot;\n&gt;\n            &lt;img\n            src=\&quot;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/download\/google-play-icon.svg\&quot;\n            alt=\&quot;\&quot;\n            loading=\&quot;lazy\&quot;\n            aria-hidden=\&quot;true\&quot; class=\&quot;size-6 lg:size-8 shrink-0\&quot;\n        \/&gt;\n            &lt;span class=\&quot;flex flex-col font-helvetica-now-display font-medium leading-[1.2] text-white-0\&quot;&gt;\n        &lt;span class=\&quot;text-[10px] lg:text-xs\&quot;&gt;Disponible sur&lt;\/span&gt;\n        &lt;span class=\&quot;text-sm lg:text-[15px] whitespace-nowrap\&quot;&gt;Google Play&lt;\/span&gt;\n    &lt;\/span&gt;\n&lt;\/a&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n\n        \n        &lt;div class=\&quot;\n            relative flex items-end justify-center flex-1 w-full min-w-0\n            h-[340px] lg:h-[500px]\n            rounded-2xl lg:rou
507nded-3xl overflow-hidden\n            bg-gradient-to-b from-purple-100 to-white-0 px-4 pt-8 lg:px-12 lg:pt-16\n        \&quot;&gt;\n            \n            &lt;div\n    class=\&quot;absolute inset-0 pointer-events-none opacity-80 animate-[grid-drift_8s_linear_infinite]\&quot;\n    style=\&quot;background-image: url(&#039;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/how-it-works\/dot-grid.svg&#039;);\n           background-size: 62.7px 62.7px;\n           mask-image: linear-gradient(to bottom left, black 0%, transparent 75%);\n           -webkit-mask-image: linear-gradient(to bottom left, black 0%, transparent 75%);\&quot;\n    aria-hidden=\&quot;true\&quot;\n&gt;&lt;\/div&gt;\n\n            \n            &lt;div class=\&quot;relative z-10 w-[60%] lg:w-[55%] max-w-[240px] lg:max-w-[384px] h-full flex items-end justify-center\&quot;&gt;\n                                    &lt;img\n        src=\&quot;\/img\/30\/phone-screen.webp?q=80&amp;amp;fit=contain&amp;amp;w=384&amp;amp;h=700&amp;amp;s=15a07b937be6905c15a326ce8a6b7781\&quot;\n         srcset=\&quot;\/img\/30\/phone-screen.webp?q=80&amp;amp;fit=contain&amp;amp;w=768&amp;amp;h=1400&amp;amp;s=ce24bee531e33fa6a23fa1b4a02521bc 2x\&quot;                  width=\&quot;384\&quot;          height=\&quot;700\&quot;         alt=\&quot;Application mobile Animou\&quot;\n        loading=\&quot;lazy\&quot;\n        decoding=\&quot;async\&quot;\n        class=\&quot;w-full h-auto object-contain rounded-t-pill lg:rounded-t-card drop-shadow-2xl\&quot;\n    \/&gt;\n                \n                \n                &lt;div class=\&quot;\n                    absolute top-1\/3 lg:top-[50%] right-[45%] lg:right-[60%] z-20\n                    flex items-center gap-2 lg:gap-4\n                    bg-white-0 border border-white-0\/60 rounded-[10px] lg:rounded-pill\n                    pl-2 lg:pl-4 pr-3 lg:pr-6 py-2 lg:py-4\n                    shadow-xl backdrop-blur-sm\n                    hover:-translate-y-1 transition-transform duration-300\n                    w-max max-w-[180px] lg:max-w-none\n                \&quot;&gt;\n                                            &lt;div class=\&quot;size-6 lg:size-10 shrink-0 flex items-center justify-center bg-purple-15 rounded-full text-purple-500\&quot;&gt;\n                            &lt;img\n            src=\&quot;https:\/\/animou-app.com\/themes\/animou\/img\/landing\/download\/bell-icon.svg\&quot;\n            alt=\&quot;\&quot;\n            loading=\&quot;lazy\&quot;\n            aria-hidden=\&quot;true\&quot; class=\&quot;size-3.5 lg:size-6\&quot;\n        \/&gt;\n                            &lt;\/div&gt;\n                                        &lt;div class=\&quot;flex flex-col gap-px\&quot;&gt;\n                        &lt;strong class=\&quot;font-helvetica-now-display font-bold text-xs lg:text-lg leading-[1.2] lg:leading-[1.4] text-dark-850 truncate\&quot;&gt;Milo retrouv\u00e9 !&lt;\/strong&gt;\n                        &lt;span class=\&quot;font-helvetica-now-display font-normal text-[10px] lg:text-sm leading-[1.2] lg:leading-[1.4] text-gray-500\&quot;&gt;Rue des Acacias - \u00e0 l&amp;#039;instant&lt;\/span&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n\n                \n                &lt;div class=\&quot;\n                    absolute bottom-1\/4 left-[75%] lg:left-[85%] z-20\n                    flex flex-col bg-white-0 border border-white-0\/60\n                    rounded-[10px] lg:rounded-pill px-3 lg:px-6 py-2 lg:py-4\n                    shadow-xl backdrop-blur-sm\n                    hover:-translate-y-1 transition-transform duration-300\n                    w-max\n                \&quot;\n                     x-data=\&quot;counter(43, &#039;&#039;)\&quot;\n                     x-intersect.once=\&quot;animate()\&quot;\n                &gt;\n                    &lt;strong\n                            class=\&quot;font-helvetica-now-display font-bold text-base lg:text-2xl leading-[1.2] lg:leading-[1.4] tracking-[0.07px] text-purple-500\&quot;\n                            x-text=\&quot;formatted() ?? &#039;43&#039;\&quot;\n                    &gt;43&lt;\/strong&gt;\n                    &lt;span class=\&quot;font-helvetica-now-display font-normal text-[10px] lg:text-base leading-[1.2] lg:leading-[1.4] text-gray-500\&quot;&gt;Voisins alert\u00e9s&lt;\/span&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\&quot;page-wrapper hidden lg:block pointer-events-none pt-[70px]\&quot;&gt;\n    &lt;div x-data=\&quot;sectionNav({ inheritPrevious: false })\&quot;\n     class=\&quot;transition-opacity duration-300\&quot;\n     :style=\&quot;&#039;opacity: &#039;
507 + opacity\&quot;\n     x-cloak&gt;\n    &lt;div class=\&quot;w-[425px]\&quot;&gt;\n        &lt;div class=\&quot;flex items-center justify-end gap-3 font-helvetica-now-display text-lg leading-[1.4] mb-[20px] text-purple-500\&quot;&gt;\n            &lt;span class=\&quot;tabular-nums\&quot; x-text=\&quot;number\&quot;&gt;&lt;\/span&gt;\n            &lt;span x-text=\&quot;label\&quot;&gt;&lt;\/span&gt;\n        &lt;\/div&gt;\n        &lt;div class=\&quot;relative\&quot;&gt;\n            &lt;div class=\&quot;h-px w-full rounded-[1px]\&quot;\n                 style=\&quot;background: linear-gradient(to right, rgba(127,121,209,0) 0%, #7F79D1 100%);\&quot;&gt;&lt;\/div&gt;\n            &lt;div class=\&quot;absolute top-1\/2 -translate-y-1\/2 transition-[left] duration-300 ease-out will-change-[left,opacity]\&quot;\n                 :style=\&quot;&#039;left: &#039; + arrowLeft + &#039;px&#039;\&quot;&gt;\n                &lt;div class=\&quot;flex items-center justify-center h-[33px] px-4 rounded-full bg-purple-10 text-purple-500\&quot;&gt;\n                    &lt;svg width=\&quot;18\&quot; height=\&quot;18\&quot;
507 viewBox=\&quot;0 0 24 24\&quot; fill=\&quot;none\&quot;&gt;\n                        &lt;path d=\&quot;M8.91 19.92L15.43 13.4C16.2 12.63 16.2 11.37 15.43 10.6L8.91 4.08\&quot;\n                              stroke=\&quot;currentColor\&quot; stroke-width=\&quot;1.5\&quot; stroke-miterlimit=\&quot;10\&quot;\n                              stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;\/&gt;\n                    &lt;\/svg&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n        &lt;\/div&gt;\n    \n\n&lt;\/section&gt;\n&quot;},&quot;memo&quot;:{&quot;id&quot;:&quot;mV5kesRU0xOLPumzDrdL&quot;,&quot;name&quot;:&quot;percy-cms.cms.livewire.cms-page-renderer&quot;,&quot;path&quot;:&quot;\/&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;release&quot;:&quot;a-a-a&quot;,&quot;children&quot;:[],&quot;scripts&quot;:[],&quot;assets&quot;:[],&quot;errors&quot;:[],&quot;locale&quot;:&quot;fr&quot;,&quot;islands&quot;:[]},&quot;checksum&quot;:&quot;a30ce945bfa0a91219be94a326c6231380d8d74a70a4690120cf44ec0b8b99ba&quot;}" wire:effects="{&quot;partials&quot;:[]}" wire:id="mV5kesRU0xOLPumzDrdL" wire:name="percy-cms.cms.livewire.cms-page-renderer" class="page-sections" id="content" tabindex="-1" data-content-width="full">
508    <section
509     id="top"     class="page-section page-section--hero"
510             aria-label="Présentation"
511    >
512            
512<script data-hero-motion-gate>
513    (() => {
514        const hero = document.currentScript.closest('.page-section--hero');
515
516        if (! hero || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
517            return;
518        }
519
520        hero.classList.add('hero-media-loading');
521
522        const reveal = () => window.requestAnimationFrame(() => {
523            hero.classList.remove('hero-media-loading');
524        });
525
526        const init = () => {
527            const media = hero.querySelector('.hero-media-reveal img');
528
529            if (! media) {
530                reveal();
531
532                return;
533            }
534
535            const waitForLoad = () => new Promise((resolve) => {
536                if (media.complete) {
537                    resolve();
538
539                    return;
540                }
541
542                media.addEventListener('load', resolve, { once: true });
543                media.addEventListener('error', resolve, { once: true });
544            });
545
546            const ready = typeof media.decode === 'function'
547                ? media.decode().catch(waitForLoad)
548                : waitForLoad();
549
550            ready.finally(reveal);
551        };
552
553        if (document.readyState === 'loading') {
554            document.addEventListener('DOMContentLoaded', init, { once: true });
555        } else {
556            init();
557        }
558    })();
559</script>
559
560
561    
562            <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
563            <picture>
564    
565                    <source
566            media="(min-width: 100rem)"
567            type="image/avif"
568            srcset="/img/1/background.webp?w=1920&amp;fm=avif&amp;q=75&amp;fit=cover&amp;s=a82dbaff9e075c6f0ffeddbe0734070c"
569            width="1920"
570                    />
571                    <source
572            media="(min-width: 75rem)"
573            type="image/avif"
574            srcset="/img/1/background.webp?w=1600&amp;fm=avif&amp;q=75&amp;fit=cover&amp;s=b7272860cfd695cccc14fc9442508467"
575            width="1600"
576                    />
577                    <source
578            media="(min-width: 48rem)"
579            type="image/avif"
580            srcset="/img/1/background.webp?w=1200&amp;fm=avif&amp;q=75&amp;fit=cover&amp;s=796377685506be5f0d1adc5618df1d2f"
581            width="1200"
582                    />
583    
584    
585                    <source
586            media="(min-width: 100rem)"
587            type="image/webp"
588            srcset="/img/1/background.webp?w=1920&amp;q=75&amp;fit=cover&amp;s=fa473370349902c25ea2d8dd1780921d"
589            width="1920"
590                    />
591                    <source
592            media="(min-width: 75rem)"
593            type="image/webp"
594            srcset="/img/1/background.webp?w=1600&amp;q=75&amp;fit=cover&amp;s=62c6d959f5071dfc11a5e71523a2436e"
595            width="1600"
596                    />
597                    <source
598            media="(min-width: 48rem)"
599            type="image/webp"
600            srcset="/img/1/background.webp?w=1200&amp;q=75&amp;fit=cover&amp;s=652bcc3c37898c8fdc5bf90ce9a17697"
601            width="1200"
602                    />
603    
604    
605        <img
606        src="/img/1/background.webp?w=768&amp;q=75&amp;fit=cover&amp;s=5423be49da8fb3a9776a596b77907bff"
607        width="768"
608                alt=""
609        loading="eager"
610        decoding="async"
611        fetchpriority="high" class="absolute inset-0 w-full h-full object-cover"
612    />
613</picture>
614        </div>
615    
616    
617    <div
618            class="absolute inset-0 z-[5] pointer-events-none opacity-[0.68]"
619            style="background: linear-gradient(to bottom, rgba(79,98,191,0.75) 0%, rgba(79,98,191,0) 50%, rgba(79,98,191,0.70) 100%);"
620            aria-hidden="true"
621    ></div>
622
623    
624    <div class="page-wrapper relative">
625        
626        <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between pt-[80px] lg:pt-[91px]">
627
628            
629            <div class="flex flex-col items-start w-full lg:max-w-[544px] shrink-0 lg:pt-[71px] relative z-10">
630
631                                <h1 class="sr-only">Animou : l&#039;app communautaire pour retrouver les animaux perdus</h1>
632
633                
634                <p
635                        class="
636                        text-heading-hero text-gradient-white
637                    "
638                >
639                    <span class="block">Vous n&#039;êtes</span>
640                    <span class="block">pas seul</span>
641                </p>
642
643                
644                <p data-reveal class="
645                    mt-1
646                    text-subtitle
647                    text-white-0/90
648                    max-w-[425px]
649                ">Animou est disponible gratuitement. La première application qui mobilise instantanément votre quartier lorsqu&#039;un animal disparaît.</p>
650
651                                    <div data-reveal class="mt-[48px] lg:mt-[62px] flex flex-wrap gap-2 items-start">
652                        <a
653                            href="https://apps.apple.com/fr/app/animou-animaux-perdus/id6779167347"
654                            target="_blank"
655                            rel="noopener noreferrer"
656                            data-track="appstore"
657                            class="bg-[#130F43] border border-white-0/20 rounded-[10px] h-[66px] flex items-center px-[21px] gap-2 hover:opacity-90 motion-safe:transition-opacity"
658                        >
659                            <img src="https://animou-app.com/themes/animou/img/landing/download/app-store-icon.svg" alt="" aria-hidden="true" class="size-8 shrink-0">
660
661                            <span class="flex flex-col text-white-0 leading-[1.4] text-left">
662                                <span class="font-helvetica-now-display font-medium text-[14px]">Disponible sur</span>
663                                <span class="font-helvetica-now-display font-medium text-[18px]">App Store</span>
664                            </span>
665                        </a>
666
667                        <a
668                            href="https://play.google.com/store/apps/details?id=com.animou.app"
669                            target="_blank"
670                            rel="noopener noreferrer"
671                            data-track="playstore"
672                            class="bg-[#130F43] border border-white-0/20 rounded-[10px] h-[66px] flex items-center px-[21px] gap-2 hover:opacity-90 motion-safe:transition-opacity"
673                        >
674                            <img src="https://animou-app.com/themes/animou/img/landing/download/google-play-icon.svg" alt="" aria-hidden="true" class="size-8 shrink-0">
675
676                            <span class="flex flex-col text-white-0 leading-[1.4] text-left">
677                                <span class="font-helvetica-now-display font-medium text-[14px]">Disponible sur</span>
678                                <span class="font-helvetica-now-display font-medium text-[18px]">Google Play</span>
679                            </span>
680                        </a>
681                    </div>
682                            </div>
683
684            
685            
686            <div class="relative mt-10 lg:mt-0 lg:ml-[var(--grid-gutter)] flex-1 flex justify-center lg:justify-end">
687                
688                <div class="relative w-full max-w-[586px] @container">
689
690                    
691                                            <div class="hero-media-reveal hero-media-reveal--figure absolute w-full top-0 left-0 right-[-15%] bottom-[6%] overflow-hidden z-[5]">
692                        <img
693        src="/img/2/main-figure.png?q=75&amp;fm=webp&amp;fit=max&amp;w=560&amp;h=843&amp;s=e620783c482a54147bab5b0f9da9bd80"
694         srcset="/img/2/main-figure.png?q=75&amp;fm=webp&amp;fit=max&amp;w=420&amp;h=633&amp;s=66a54b46cf6ccd616d3b61e085140da2 420w, /img/2/main-figure.png?q=75&amp;fm=webp&amp;fit=max&amp;w=560&amp;h=843&amp;s=e620783c482a54147bab5b0f9da9bd80 560w, /img/2/main-figure.png?q=75&amp;fm=webp&amp;fit=max&amp;w=720&amp;h=1084&amp;s=32990c521cbc58702889759116d0e6f8 720w, /img/2/main-figure.png?q=75&amp;fm=webp&amp;fit=max&amp;w=960&amp;h=1446&amp;s=f49b8666f87143655ee971d982bc145f 960w"          sizes="(min-width: 1024px) 674px, calc(100vw - 32px)"          width="650"          height="979"         alt="Femme tenant un chien"
695        loading="eager"
696        decoding="async"
697        class="absolute inset-0 size-full object-cover object-top" fetchpriority="high"
698    />
699                        </div>
700                    
701                    
702                    <div class="relative mx-[4%] mt-[4.5%] mb-[6%] rounded-card z-10">
703
704                        
705                        <span class="gradient-border-frame rounded-card" style="--frame-thickness: 6px" aria-hidden="true"></span>
706
707                        
708                        <div class="min-h-[67.23cqw]"></div>
709
710                        
711                        <div class="relative z-10 flex flex-col gap-[2.73cqw] px-[3.5%] pb-[3.5%]">
712                            
713                            <div class="flex flex-wrap gap-[2.73cqw]">
714                                                                    <div
715                                        class="
716                                            hero-media-reveal hero-media-reveal--badge
717                                            relative flex items-center justify-center gap-1.5
718                                            h-[max(6.48cqw,2rem)] px-[max(3.4cqw,0.75rem)]
719                                            rounded-pill
720                                            backdrop-blur-[var(--blur-glass-for-tab)]
721                                            bg-white-0/15
722                                        "
723                                            style="--hero-reveal-delay: 380ms; box-shadow: var(--shadow-badge-glass);"
724                                    >
725                                        <span class="gradient-border-frame rounded-pill" aria-hidden="true"></span>
726                                                                                    <span
727            role="presentation"
728            aria-hidden="true"
729            style="display:inline-block;background-image:url('https://animou-app.com/themes/animou/img/landing/hero/tag-heart.svg');background-repeat:no-repeat;background-position:center;background-size:contain;"
730            class="w-[max(3.4cqw,0.875rem)] h-[max(3.4cqw,0.875rem)] shrink-0"
731        ></span>
732                                                                                    <span class="text-[max(2.38cqw,0.75rem)] font-medium text-white-0 whitespace-nowrap leading-none">100% Gratuit</span>
733                                    </div>
734                                                                    <div
735                                        class="
736                                            hero-media-reveal hero-media-reveal--badge
737                                            relative flex items-center justify-center gap-1.5
738                                            h-[max(6.48cqw,2rem)] px-[max(3.4cqw,0.75rem)]
739                                            rounded-pill
740                                            backdrop-blur-[var(--blur-glass-for-tab)]
741                                            bg-white-0/15
742                                        "
743                                            style="--hero-reveal-delay: 470ms; box-shadow: var(--shadow-badge-glass);"
744                                    >
745                                        <span class="gradient-border-frame rounded-pill" aria-hidden="true"></span>
746                                                                                    <span
747            role="presentation"
748            aria-hidden="true"
749            style="display:inline-block;background-image:url('https://animou-app.com/themes/animou/img/landing/hero/tag-lock.svg');background-repeat:no-repeat;background-position:center;background-size:contain;"
750            class="w-[max(3.4cqw,0.875rem)] h-[max(3.4cqw,0.875rem)] shrink-0"
751        ></span>
752                                                                                    <span class="text-[max(2.38cqw,0.75rem)] font-medium text-white-0 whitespace-nowrap leading-none">Respect de la vie privée</span>
753                                    </div>
754                                                                    <div
755                                        class="
756                                            hero-media-reveal hero-media-reveal--badge
757                                            relative flex items-center justify-center gap-1.5
758                                            h-[max(6.48cqw,2rem)] px-[max(3.4cqw,0.75rem)]
759                                            rounded-pill
760                                            backdrop-blur-[var(--blur-glass-for-tab)]
761                                            bg-white-0/15
762                                        "
763                                            style="--hero-reveal-delay: 560ms; box-shadow: var(--shadow-badge-glass);"
764                                    >
765                                        <span class="gradient-border-frame rounded-pill" aria-hidden="true"></span>
766                                                                                    <span
767            role="presentation"
768            aria-hidden="true"
769            style="display:inline-block;background-image:url('https://animou-app.com/themes/animou/img/landing/hero/tag-community.svg');background-repeat:no-repeat;background-position:center;background-size:contain;"
770            class="w-[max(3.4cqw,0.875rem)] h-[max(3.4cqw,0.875rem)] shrink-0"
771        ></span>
772                                                                                    <span class="text-[max(2.38cqw,0.75rem)] font-medium text-white-0 whitespace-nowrap leading-none">Porté par la communauté</span>
773                                    </div>
774                                                            </div>
775
776                            
777                            
778                            <div class="hero-media-reveal hero-media-reveal--map relative h-[37.54cqw] rounded-card">
779                                <div class="absolute inset-0 backdrop-blur-[13.875px] bg-white-0/30 rounded-card"></div>
780                                                                    <div class="absolute inset-3 rounded-pill overflow-hidden">
781                                        <img
782        src="/img/4/map-view.webp?q=80&amp;fit=cover&amp;w=480&amp;h=211&amp;s=2dbdd404cb06635a06703c8c69c520bf"
783         srcset="/img/4/map-view.webp?q=80&amp;fit=cover&amp;w=320&amp;h=141&amp;s=5eeb3e1dfed830c1e6066745af6e6189 320w, /img/4/map-view.webp?q=80&amp;fit=cover&amp;w=480&amp;h=211&amp;s=2dbdd404cb06635a06703c8c69c520bf 480w, /img/4/map-view.webp?q=80&amp;fit=cover&amp;w=640&amp;h=282&amp;s=ae37e1401960ab75c3496d661d4a0266 640w, /img/4/map-view.webp?q=80&amp;fit=cover&amp;w=720&amp;h=317&amp;s=066e63742a323e0117a23b8a130486d8 720w"          sizes="(min-width: 1024px) 470px, calc(100vw - 110px)"          width="500"          height="220"         alt="Vue carte du quartier Animou"
784        loading="eager"
785        decoding="async"
786        class="absolute inset-0 size-full object-cover"
787    />
788                                        <div class="hero-map-marker-position absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[11.09cqw] transition-transform hover:scale-110" aria-hidden="true">
789                                            <div class="hero-media-reveal hero-media-reveal--marker relative w-full">
790                                                                                                    
791                                                    <span
792            role="presentation"
793            aria-hidden="true"
794            style="display:inline-block;background-image:url('https://animou-app.com/storage/5/pin.svg');background-repeat:no-repeat;background-position:center;background-size:contain;"
795            class="w-full aspect-[65/75]"
796        ></span>
797                                                                                                                                                        
798                                                    <img
799        src="/img/3/dog-avatar.png?q=80&amp;fm=webp&amp;fit=cover&amp;w=64&amp;h=64&amp;s=77104d7f7bf13c705b1bf565e657f493"
800         srcset="/img/3/dog-avatar.png?q=80&amp;fm=webp&amp;fit=cover&amp;w=128&amp;h=128&amp;s=088fb874ad0e12b54a33759941457387 2x"                  width="64"          height="64"         alt=""
801        loading="eager"
802        decoding="async"
803        class="absolute top-[9.46%] left-[49.46%] -translate-x-1/2 w-[73.85%] aspect-square rounded-full object-cover"
804    />
805                                                                                            </div>
806                                        </div>
807                                    </div>
808                                                                <div class="absolute left-3 right-3 top-3 backdrop-blur-[7.5px] bg-white-0/10 rounded-t-pill shadow-[var(--shadow-map-tab)] z-10">
809                                    <div class="flex items-center px-[2.73cqw]">
810                                        <div class="flex-1 flex flex-col items-center gap-[1.3cqw] h-[6.82cqw] justify-end pt-[1.3cqw]">
811                                            <span class="font-helvetica-now-display font-medium text-[2.38cqw] leading-[1.4] text-purple-500 text-center w-full">Vue carte</span>
812                                            <div class="w-full h-[2px] bg-purple-500 rounded-[10px]"></div>
813                                        </div>
814                                        <div class="flex-1 flex flex-col items-center gap-[1.3cqw] h-[6.82cqw] justify-end pt-[1.3cqw]">
815                                            <span class="font-helvetica-now-display font-normal text-[2.38cqw] leading-[1.4] text-gray-500 text-center w-full">Vue liste</span>
816                                            <div class="w-full h-[2px] bg-purple-500 rounded-[10px] opacity-0"></div>
817                                        </div>
818                                    </div>
819                                </div>
820                            </div>
821                        </div>
822                    </div>
823
824                </div>
825            </div>
826        </div>
827    </div>
828
829    
830    <div
831            class="absolute inset-x-0 bottom-0 h-[80px] lg:h-[140px] z-[15] pointer-events-none backdrop-blur-[100px]"
832            style="
833            background: linear-gradient(to bottom, rgba(104,129,207,0), rgb(104,129,207));
834            -webkit-mask-image: linear-gradient(to bottom, transparent, black);
835            mask-image: linear-gradient(to bottom, transparent, black);
836        "
837            aria-hidden="true"
838    ></div>
839    
840
841</section>
842<section
843     id="app-overview"     class="page-section"
844         data-section-label="Aperçu de l&#039;application"      aria-labelledby="heading-overview"
845    ><div data-top-gradient class="section-top-gradient" aria-hidden="true"></div>
846            <div class="page-wrapper">
847        <div class="relative z-10 flex flex-col gap-4 lg:flex-row lg:justify-between lg:items-start" data-reveal>
848            <h2
849                    id="heading-overview"
850                    class="text-heading-section text-dark-850 lg:max-w-[480px]"
851            >Une application pour agir ensemble</h2>
852            <p class="text-body text-dark-700 lg:max-w-[315px] lg:pt-2">
853                Parce qu&#039;un animal retrouvé, c&#039;est une famille soulagée. Animou connecte propriétaires, voisins et refuges autour d&#039;une même urgence.
854            </p>
855        </div>
856
857                <div class="relative z-10 mt-10 lg:mt-16 flex flex-col lg:flex-row gap-[var(--grid-gutter)]">
858
859            <div class="flex flex-col gap-4 lg:w-[calc(50%-var(--grid-gutter)/2)] order-2 lg:order-1">
860
861                <div
862                    x-data="physicsBox()"
863                    x-init="active = false"
864                    x-intersect.once.margin.-10%="startPhysics()"
865                    class="relative bg-blue-50 rounded-[26px] h-[450px] lg:h-[366px] overflow-hidden group"
866                    id="physics-container"
867                >
868                    <div class="flex items-start justify-between p-5 lg:p-6 relative z-20 pointer-events-none">
869                        <div class="font-outfit text-[28px] lg:text-[43px] uppercase leading-[1.1]" aria-hidden="true">
870                                                                                            <div
871                                    class="transition-all duration-700 ease-out"
872                                    x-cloak
873                                    :class="active ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-4'"
874                                    style="transition-delay: 1800ms"
875                                >
876                                    <span class="text-purple-300">ON</span>
877                                                                            <span class="text-white-0"> VOIT</span>
878                                                                    </div>
879                                                                                            <div
880                                    class="transition-all duration-700 ease-out"
881                                    x-cloak
882                                    :class="active ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-4'"
883                                    style="transition-delay: 2150ms"
884                                >
885                                    <span class="text-purple-300">ON</span>
886                                                                            <span class="text-white-0"> AGIT</span>
887                                                                    </div>
888                                                                                            <div
889                                    class="transition-all duration-700 ease-out"
890                                    x-cloak
891                                    :class="active ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-4'"
892                                    style="transition-delay: 2500ms"
893                                >
894                                    <span class="text-purple-300">ON</span>
895                                                                            <span class="text-white-0"> S&#039;ENTRAIDE</span>
896                                                                    </div>
897                                                    </div>
898                        <span
899                            class="font-helvetica-now-display font-normal text-base uppercase text-purple-400 shrink-0 transition-all duration-700 ease-out"
900                            x-cloak
901                            :class="active ? 'opacity-100 scale-100' : 'opacity-0 scale-90'"
902                            style="transition-delay: 3250ms"
903                        >
904                            ANIMOU
905                        </span>
906                    </div>
907
908                    <div class="absolute inset-0 z-10 overflow-hidden" x-ref="box">
909                                                    <div
910                                class="physics-item absolute opacity-0"
911                                x-ref="pill0"
912                                style="will-change: transform;"
913                            >
914                                <div class="flex items-center gap-3 pl-1 pr-[26px] py-1 bg-white-0 rounded-card shadow-[var(--shadow-pill-float)]">
915    <div class="flex items-center justify-center size-12 rounded-full bg-purple-15 shrink-0">
916                                    <img src="https://animou-app.com/themes/animou/img/landing/overview/bell-icon.svg" alt="" aria-hidden="true" class="size-8">
917                        </div>
918    <span class="text-body font-medium text-gray-700">Suivez les signalements sur la carte</span>
919</div>
920                            </div>
921                                                    <div
922                                class="physics-item absolute opacity-0"
923                                x-ref="pill1"
924                                style="will-change: transform;"
925                            >
926                                <div class="flex items-center gap-3 pl-1 pr-[26px] py-1 bg-white-0 rounded-card shadow-[var(--shadow-pill-float)]">
927    <div class="flex items-center justify-center size-12 rounded-full bg-purple-15 shrink-0">
928                                    <img src="https://animou-app.com/themes/animou/img/landing/overview/update-icon.svg" alt="" aria-hidden="true" class="size-6">
929                        </div>
930    <span class="text-body font-medium text-gray-700">Alertez voisins, refuges et vétérinaires</span>
931</div>
932                            </div>
933                                                    <div
934                                class="physics-item absolute opacity-0"
935                                x-ref="pill2"
936                                style="will-change: transform;"
937                            >
938                                <div class="flex items-center gap-3 pl-1 pr-[26px] py-1 bg-white-0 rounded-card shadow-[var(--shadow-pill-float)]">
939    <div class="flex items-center justify-center size-12 rounded-full bg-purple-15 shrink-0">
940                                    <svg class="size-7" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
941                    <path d="M16 2C10.477 2 6 6.477 6 12c0 7.5 10 18 10 18s10-10.5 10-18c0-5.523-4.477-10-10-10Zm0 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z" fill="var(--fill-0, #413A9F)"/>
942                </svg>
943                        </div>
944    <span class="text-body font-medium text-gray-700">Recevez des mises à jour en temps réel</span>
945</div>
946                            </div>
947                                                    <div
948                                class="physics-item absolute opacity-0"
949                                x-ref="pill3"
950                                style="will-change: transform;"
951                            >
952                                <div class="flex items-center gap-3 pl-1 pr-[26px] py-1 bg-white-0 rounded-card shadow-[var(--shadow-pill-float)]">
953    <div class="flex items-center justify-center size-12 rounded-full bg-purple-15 shrink-0">
954                                    <img src="https://animou-app.com/themes/animou/img/landing/overview/reach-icon.svg" alt="" aria-hidden="true" class="size-8">
955                        </div>
956    <span class="text-body font-medium text-gray-700">Lancez une alerte en quelques secondes</span>
957</div>
958                            </div>
959                        
960                                                                            <div
961                                class="physics-paw absolute opacity-0 size-[54px] bg-purple-250 rounded-full flex items-center justify-center"
962                                x-ref="paw0"
963                                style="will-change: transform;"
964                            >
965                                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
966                                    <path d="M8.72704 22.134C9.01583 25.1946 11.731 27.2505 14.7572 26.7094L19.7557 25.8157C23.1575 25.2074 25.0043 22.045 23.84 18.7856C22.6145 15.3649 18.6958 13.0827 15.1165 13.7226C11.2347 14.4167 8.35829 18.2048 8.72704 22.134Z" stroke="white" stroke-width="1.61022" stroke-linecap="round" stroke-linejoin="round"/>
967                                    <path d="M13.3249 11.3508C14.7657 11.0932 15.7249 9.71638 15.4672 8.27558C15.2096 6.83479 13.8328 5.87564 12.392 6.13327C10.9512 6.39089 9.99205 7.76772 10.2497 9.20852C10.5073 10.6493 11.8841 11.6085 13.3249 11.3508Z" stroke="white" stroke-width="1.61022" stroke-linecap="round" stroke-linejoin="round"/>
968                                    <path d="M20.6761 11.3287C21.8288 11.1226 22.5961 10.0211 22.39 8.86845C22.1839 7.71582 21.0824 6.9485 19.9298 7.1546C18.7772 7.3607 18.0098 8.46217 18.2159 9.6148C18.422 10.7674 19.5235 11.5348 20.6761 11.3287Z" stroke="white" stroke-width="1.61022" stroke-linecap="round" stroke-linejoin="round"/>
969                                    <path d="M25.2832 14.8123C26.1477 14.6578 26.7232 13.8317 26.5686 12.9672C26.4141 12.1027 25.5879 11.5272 24.7235 11.6818C23.859 11.8364 23.2835 12.6625 23.4381 13.5269C23.5927 14.3914 24.4188 14.9669 25.2832 14.8123Z" stroke="white" stroke-width="1.61022" stroke-linecap="round" stroke-linejoin="round"/>
970                                    <path d="M7.13904 15.9029C8.29167 15.6968 9.05899 14.5953 8.85289 13.4427C8.64679 12.29 7.54533 11.5227 6.39269 11.7288C5.24006 11.9349 4.47274 13.0364 4.67884 14.189C4.88493 15.3417 5.9864 16.109 7.13904 15.9029Z" stroke="white" stroke-width="1.61022" stroke-linecap="round" stroke-linejoin="round"/>
971                                    <path d="M23.9817 21.4765C23.5802 24.7423 19.5583 26.7731 15.7629 26.3065C11.7897 26.9536 8.4531 26.3812 9.27837 19.6688C9.67989 16.403 13.4804 13.5338 17.2758 14.0004C21.0713 14.4671 24.3832 18.2107 23.9817 21.4765Z" fill="white"/>
972                                    <circle cx="6.74935" cy="13.842" r="1.61022" transform="rotate(7.00913 6.74935 13.842)" fill="white"/>
973                                    <circle cx="12.8921" cy="8.7567" r="2.25431" transform="rotate(7.00913 12.8921 8.7567)" fill="white"/>
974                                    <circle cx="20.2827" cy="9.34092" r="2.25431" transform="rotate(7.00913 20.2827 9.34092)" fill="white"/>
975                                    <circle cx="24.5028" cy="13.2666" r="1.77125" transform="rotate(7.00913 24.5028 13.2666)" fill="white"/>
976                                </svg>
977                            </div>
978                                                    <div
979                                class="physics-paw absolute opacity-0 size-[44px] bg-purple-250 rounded-full flex items-center justify-center"
980                                x-ref="paw1"
981                                style="will-change: transform;"
982                            >
983                                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
984                                    <path d="M8.72704 22.134C9.01583 25.1946 11.731 27.2505 14.7572 26.7094L19.7557 25.8157C23.1575 25.2074 25.0043 22.045 23.84 18.7856C22.6145 15.3649 18.6958 13.0827 15.1165 13.7226C11.2347 14.4167 8.35829 18.2048 8.72704 22.134Z" stroke="white" stroke-width="1.61022" stroke-linecap="round" stroke-linejoin="round"/>
985                                    <path d="M13.3249 11.3508C14.7657 11.0932 15.7249 9.71638 15.4672 8.27558C15.2096 6.83479 13.8328 5.87564 12.392 6.13327C10.9512 6.39089 9.99205 7.76772 10.2497 9.20852C10.5073 10.6493 11.8841 11.6085 13.3249 11.3508Z" stroke="white" stroke-width="1.61022" stroke-linecap="round" stroke-linejoin="round"/>
986                                    <path d="M20.6761 11.3287C21.8288 11.1226 22.5961 10.0211 22.39 8.86845C22.1839 7.71582 21.0824 6.9485 19.9298 7.1546C18.7772 7.3607 18.0098 8.46217 18.2159 9.6148C18.422 10.7674 19.5235 11.5348 20.6761 11.3287Z" stroke="white" stroke-width="1.61022" stroke-linecap="round" stroke-linejoin="round"/>
987                                    <path d="M25.2832 14.8123C26.1477 14.6578 26.7232 13.8317 26.5686 12.9672C26.4141 12.1027 25.5879 11.5272 24.7235 11.6818C23.859 11.8364 23.2835 12.6625 23.4381 13.5269C23.5927 14.3914 24.4188 14.9669 25.2832 14.8123Z" stroke="white" stroke-width="1.61022" stroke-linecap="round" stroke-linejoin="round"/>
988                                    <path d="M7.13904 15.9029C8.29167 15.6968 9.05899 14.5953 8.85289 13.4427C8.64679 12.29 7.54533 11.5227 6.39269 11.7288C5.24006 11.9349 4.47274 13.0364 4.67884 14.189C4.88493 15.3417 5.9864 16.109 7.13904 15.9029Z" stroke="white" stroke-width="1.61022" stroke-linecap="round" stroke-linejoin="round"/>
989                                    <path d="M23.9817 21.4765C23.5802 24.7423 19.5583 26.7731 15.7629 26.3065C11.7897 26.9536 8.4531 26.3812 9.27837 19.6688C9.67989 16.403 13.4804 13.5338 17.2758 14.0004C21.0713 14.4671 24.3832 18.2107 23.9817 21.4765Z" fill="white"/>
990                                    <circle cx="6.74935" cy="13.842" r="1.61022" transform="rotate(7.00913 6.74935 13.842)" fill="white"/>
991                                    <circle cx="12.8921" cy="8.7567" r="2.25431" transform="rotate(7.00913 12.8921 8.7567)" fill="white"/>
992                                    <circle cx="20.2827" cy="9.34092" r="2.25431" transform="rotate(7.00913 20.2827 9.34092)" fill="white"/>
993                                    <circle cx="24.5028" cy="13.2666" r="1.77125" transform="rotate(7.00913 24.5028 13.2666)" fill="white"/>
994                                </svg>
995                            </div>
996                                                    <div
997                                class="physics-paw absolute opacity-0 size-[38px] bg-purple-250 rounded-full flex items-center justify-center"
998                                x-ref="paw2"
999                                style="will-change: transform;"
1000                            >
1001                                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
1002                                    <path d="M8.72704 22.134C9.01583 25.1946 11.731 27.2505 14.7572 26.7094L19.7557 25.8157C23.1575 25.2074 25.0043 22.045 23.84 18.7856C22.6145 15.3649 18.6958 13.0827 15.1165 13.7226C11.2347 14.4167 8.35829 18.2048 8.72704 22.134Z" stroke="white" stroke-width="1.61022" stroke-linecap="round" stroke-linejoin="round"/>
1003                                    <path d="M13.3249 11.3508C14.7657 11.0932 15.7249 9.71638 15.4672 8.27558C15.2096 6.83479 13.8328 5.87564 12.392 6.13327C10.9512 6.39089 9.99205 7.76772 10.2497 9.20852C10.5073 10.6493 11.8841 11.6085 13.3249 11.3508Z" stroke="white" stroke-width="1.61022" stroke-linecap="round" stroke-linejoin="round"/>
1004                                    <path d="M20.6761 11.3287C21.8288 11.1226 22.5961 10.0211 22.39 8.86845C22.1839 7.71582 21.0824 6.9485 19.9298 7.1546C18.7772 7.3607 18.0098 8.46217 18.2159 9.6148C18.422 10.7674 19.5235 11.5348 20.6761 11.3287Z" stroke="white" stroke-width="1.61022" stroke-linecap="round" stroke-linejoin="round"/>
1005                                    <path d="M25.2832 14.8123C26.1477 14.6578 26.7232 13.8317 26.5686 12.9672C26.4141 12.1027 25.5879 11.5272 24.7235 11.6818C23.859 11.8364 23.2835 12.6625 23.4381 13.5269C23.5927 14.3914 24.4188 14.9669 25.2832 14.8123Z" stroke="white" stroke-width="1.61022" stroke-linecap="round" stroke-linejoin="round"/>
1006                                    <path d="M7.13904 15.9029C8.29167 15.6968 9.05899 14.5953 8.85289 13.4427C8.64679 12.29 7.54533 11.5227 6.39269 11.7288C5.24006 11.9349 4.47274 13.0364 4.67884 14.189C4.88493 15.3417 5.9864 16.109 7.13904 15.9029Z" stroke="white" stroke-width="1.61022" stroke-linecap="round" stroke-linejoin="round"/>
1007                                    <path d="M23.9817 21.4765C23.5802 24.7423 19.5583 26.7731 15.7629 26.3065C11.7897 26.9536 8.4531 26.3812 9.27837 19.6688C9.67989 16.403 13.4804 13.5338 17.2758 14.0004C21.0713 14.4671 24.3832 18.2107 23.9817 21.4765Z" fill="white"/>
1008                                    <circle cx="6.74935" cy="13.842" r="1.61022" transform="rotate(7.00913 6.74935 13.842)" fill="white"/>
1009                                    <circle cx="12.8921" cy="8.7567" r="2.25431" transform="rotate(7.00913 12.8921 8.7567)" fill="white"/>
1010                                    <circle cx="20.2827" cy="9.34092" r="2.25431" transform="rotate(7.00913 20.2827 9.34092)" fill="white"/>
1011                                    <circle cx="24.5028" cy="13.2666" r="1.77125" transform="rotate(7.00913 24.5028 13.2666)" fill="white"/>
1012                                </svg>
1013                            </div>
1014                                            </div>
1015
1016                    
1016<script>
1017                        function physicsBox() {
1018                            return {
1019                                active: false,
1020                                engine: null,
1021                                runner: null,
1022                                bodies: [],
1023
1024                                async startPhysics() {
1025                                    if (this.active) return;
1026                                    this.active = true;
1027
1028                                    // Show items statically if user prefers reduced motion
1029                                    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
1030                                        this.$refs.box.querySelectorAll('.physics-item, .physics-paw').forEach(el => {
1031                                            el.style.opacity = 1;
1032                                        });
1033                                        return;
1034                                    }
1035
1036                                    // Lazy-load Matter.js only when section is visible
1037                                    if (!window.Matter) {
1038                                        await new Promise((resolve, reject) => {
1039                                            const s = document.createElement('script');
1040                                            s.src = 'https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js';
1041                                            s.onload = resolve;
1042                                            s.onerror = reject;
1043                                            document.head.appendChild(s);
1044                                        });
1045                                    }
1046
1047                                    const Engine = Matter.Engine,
1048                                          Render = Matter.Render,
1049                                          Runner = Matter.Runner,
1050                                          Bodies = Matter.Bodies,
1051                                          Composite = Matter.Composite;
1052
1053                                    this.engine = Engine.create();
1054                                    const world = this.engine.world;
1055
1056                                    const container = this.$refs.box;
1057                                    const width = container.offsetWidth;
1058                                    const height = container.offsetHeight;
1059
1060                                    // Boundaries
1061                                    const ground = Bodies.rectangle(width/2, height + 25, width, 50, { isStatic: true });
1062                                    const leftWall = Bodies.rectangle(-25, height/2, 50, height, { isStatic: true });
1063                                    const rightWall = Bodies.rectangle(width + 25, height/2, 50, height, { isStatic: true });
1064
1065                                    Composite.add(world, [ground, leftWall, rightWall]);
1066
1067                                    // Add Pills
1068                                    const pills = container.querySelectorAll('.physics-item');
1069                                    pills.forEach((el, i) => {
1070                                        const rect = el.getBoundingClientRect();
1071                                        const x = 50 + (Math.random() * (width - 100));
1072                                        const y = -100 - (i * 150);
1073
1074                                        const body = Bodies.rectangle(x, y, rect.width, rect.height, {
1075                                            chamfer: { radius: rect.height / 2 },
1076                                            restitution: 0.5,
1077                                            friction: 0.1,
1078                                            angle: (Math.random() - 0.5) * 0.5
1079                                        });
1080
1081                                        this.bodies.push({ el, body });
1082                                        Composite.add(world, body);
1083                                        el.style.opacity = 1;
1084                                    });
1085
1086                                    // Add Paws
1087                                    const paws = container.querySelectorAll('.physics-paw');
1088                                    paws.forEach((el, i) => {
1089                                        const rect = el.getBoundingClientRect();
1090                                        const x = 50 + (Math.random() * (width - 100));
1091                                        const y = -100 - (i * 200 + 300);
1092
1093                                        const body = Bodies.circle(x, y, rect.width / 2, {
1094                                            restitution: 0.6,
1095                                            friction: 0.1
1096                                        });
1097
1098                                        this.bodies.push({ el, body });
1099                                        Composite.add(world, body);
1100                                        el.style.opacity = 1;
1101                                    });
1102
1103                                    this.runner = Runner.create();
1104                                    Runner.run(this.runner, this.engine);
1105
1106                                    // Physics events: self-righting + text area repulsion
1107                                    Matter.Events.on(this.engine, 'beforeUpdate', () => {
1108                                        this.bodies.forEach(({ body, el }) => {
1109                                            // 1. Repulsion Zone: Nudge items out of the top-left text area
1110                                            if (body.position.x < 320 && body.position.y < 160) {
1111                                                body.force.x += 0.0008; // Gentle push to the right
1112                                                body.force.y += 0.0005; // Gentle push downwards
1113                                            }
1114
1115                                            // 2. Self-righting (pills only)
1116                                            if (el.classList.contains('physics-item')) {
1117                                                const targetAngle = 0;
1118                                                const torque = (targetAngle - body.angle) * 0.15;
1119                                                body.torque = torque;
1120                                                const maxAngle = Math.PI / 4;
1121                                                if (body.angle > maxAngle) Matter.Body.setAngle(body, maxAngle);
1122                                                if (body.angle < -maxAngle) Matter.Body.setAngle(body, -maxAngle);
1123                                            }
1124                                        });
1125                                    });
1126                                    // Sync loop
1127                                    const update = () => {
1128                                        this.bodies.forEach(({ el, body }) => {
1129                                            const { x, y } = body.position;
1130                                            const angle = body.angle;
1131                                            el.style.transform = `translate(${x - el.offsetWidth/2}px, ${y - el.offsetHeight/2}px) rotate(${angle}rad)`;
1132                                        });
1133                                        if (this.active) requestAnimationFrame(update);
1134                                    };
1135                                    update();
1136                                }
1137                            }
1138                        }
1139                    </script>
1139
1140                </div>
1141
1142                <p class="text-body text-dark-700 lg:max-w-[372px]" data-reveal>
1143                    Signalez un animal perdu, trouvé ou vu en quelques secondes. Animou diffuse l&#039;alerte autour de vous pour mobiliser la communauté rapidement.
1144                </p>
1145            </div>
1146
1147            <div class="lg:w-[calc(50%-var(--grid-gutter)/2)] order-1 lg:order-2">
1148                <div class="relative w-full rounded-card aspect-[668/723] max-h-[410px] lg:max-h-none overflow-hidden"
1149                     style="background: var(--gradient-purple-white);">
1150
1151                    <svg class="absolute inset-0 w-full h-full" viewBox="0 0 668 723" preserveAspectRatio="none" aria-hidden="true">
1152                        <ellipse cx="628" cy="1133" rx="718" ry="1313" transform="rotate(27 628 1133)" fill="#A5A0EB"/>
1153                    </svg>
1154
1155                                            <img
1156        src="/img/86/mockup-fr.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=360&amp;h=720&amp;s=341cb8319b965b9f7964c980c6070726"
1157         srcset="/img/86/mockup-fr.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=280&amp;h=560&amp;s=8566de551aad487f9c94ab64af8a01cb 280w, /img/86/mockup-fr.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=360&amp;h=720&amp;s=341cb8319b965b9f7964c980c6070726 360w, /img/86/mockup-fr.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=480&amp;h=960&amp;s=6533eaef64cc6afc0cb2106aa58e17ba 480w, /img/86/mockup-fr.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=540&amp;h=1080&amp;s=d599e23170870d35a73dafef9710a621 540w, /img/86/mockup-fr.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=720&amp;h=1440&amp;s=019dc6dd2cb95fb0986299ae0983a650 720w"          sizes="(min-width: 1024px) 383px, 280px"          width="600"          height="1200"         alt="Aperçu des alertes Animou"
1158        loading="lazy"
1159        decoding="async"
1160        class="absolute z-[1]
1161                                top-[5%]
1162                                left-1/2 -translate-x-1/2
1163                                lg:left-[17%] lg:translate-x-0
1164                                w-[70%] lg:w-[66%] max-w-[280px] lg:max-w-none
1165                                h-auto"
1166    />
1167                                    </div>
1168            </div>
1169        </div>
1170            </div>
1171
1172                    <div class="page-wrapper relative z-10 mt-10 lg:mt-16">
1173                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[var(--grid-gutter)]" data-reveal-group>
1174                                                                                                <div class="relative h-full min-h-[211px] rounded-[24px] overflow-hidden">
1175                                                                    <img
1176        src="/img/78/dog.png?q=72&amp;fm=webp&amp;fit=cover&amp;w=450&amp;h=211&amp;s=a142622765847e7699406238d642e08e"
1177         srcset="/img/78/dog.png?q=72&amp;fm=webp&amp;fit=cover&amp;w=320&amp;h=150&amp;s=78e363b9375f8488c4e92209ae95ca5c 320w, /img/78/dog.png?q=72&amp;fm=webp&amp;fit=cover&amp;w=380&amp;h=178&amp;s=33c4d47234977eb99653c194a8202bac 380w, /img/78/dog.png?q=72&amp;fm=webp&amp;fit=cover&amp;w=480&amp;h=225&amp;s=907a1906cad580037b8cac9c4b19e33e 480w, /img/78/dog.png?q=72&amp;fm=webp&amp;fit=cover&amp;w=640&amp;h=300&amp;s=c331a8d31fbc87d9d82eb5e18ce10c78 640w"          sizes="(min-width: 1024px) 30vw, (min-width: 768px) 47vw, calc(100vw - 32px)"          width="450"          height="211"         alt="Photo de chien"
1178        loading="lazy"
1179        decoding="async"
1180        class="absolute inset-0 w-full h-full object-cover"
1181    />
1182                                                            </div>
1183                                                                                                                        <div
1184                                class="feature-card group relative bg-blue-50 hover:bg-purple-250 motion-safe:transition-colors motion-safe:duration-300 border-2 border-white-0 rounded-[24px] px-[35px] py-[30px] flex flex-col items-center gap-5 text-center"
1185                                 style="--feature-icon-url: url('https://animou-app.com/storage/72/icon-map.svg');"                             >
1186                                <div class="size-[60px] rounded-full bg-purple-250 group-hover:bg-white-0 motion-safe:transition-colors motion-safe:duration-300 relative shrink-0">
1187                                    <span
1188                                        class="absolute inset-0 m-auto block size-[34px] bg-white-0 group-hover:bg-purple-250 motion-safe:transition-colors motion-safe:duration-300"
1189                                        style="-webkit-mask: var(--feature-icon-url) center/contain no-repeat; mask: var(--feature-icon-url) center/contain no-repeat;"
1190                                        aria-hidden="true"
1191                                    ></span>
1192                                </div>
1193                                <div class="flex flex-col gap-3 text-purple-400 group-hover:text-white-0 motion-safe:transition-colors motion-safe:duration-300">
1194                                                                            <h3 id="carte-interactive" class="font-helvetica-now-display font-bold text-[24px] leading-[1.4] tracking-[0.07px]">Carte interactive</h3>
1195                                                                                                                <p class="font-helvetica-now-display text-[18px] leading-[1.4]">Voir les signalements en temps réel</p>
1196                                                                    </div>
1197                            </div>
1198                                                                                                                        <div
1199                                class="feature-card group relative bg-blue-50 hover:bg-purple-250 motion-safe:transition-colors motion-safe:duration-300 border-2 border-white-0 rounded-[24px] px-[35px] py-[30px] flex flex-col items-center gap-5 text-center"
1200                                 style="--feature-icon-url: url('https://animou-app.com/storage/73/icon-bell.svg');"                             >
1201                                <div class="size-[60px] rounded-full bg-purple-250 group-hover:bg-white-0 motion-safe:transition-colors motion-safe:duration-300 relative shrink-0">
1202                                    <span
1203                                        class="absolute inset-0 m-auto block size-[34px] bg-white-0 group-hover:bg-purple-250 motion-safe:transition-colors motion-safe:duration-300"
1204                                        style="-webkit-mask: var(--feature-icon-url) center/contain no-repeat; mask: var(--feature-icon-url) center/contain no-repeat;"
1205                                        aria-hidden="true"
1206                                    ></span>
1207                                </div>
1208                                <div class="flex flex-col gap-3 text-purple-400 group-hover:text-white-0 motion-safe:transition-colors motion-safe:duration-300">
1209                                                                            <h3 id="notifications-intelligentes" class="font-helvetica-now-display font-bold text-[24px] leading-[1.4] tracking-[0.07px]">Notifications intelligentes</h3>
1210                                                                                                                <p class="font-helvetica-now-display text-[18px] leading-[1.4]">Alertes ciblées dans votre zone</p>
1211                                                                    </div>
1212                            </div>
1213                                                                                                                        <div
1214                                class="feature-card group relative bg-blue-50 hover:bg-purple-250 motion-safe:transition-colors motion-safe:duration-300 border-2 border-white-0 rounded-[24px] px-[35px] py-[30px] flex flex-col items-center gap-5 text-center"
1215                                 style="--feature-icon-url: url('https://animou-app.com/storage/76/icon-pet.svg');"                             >
1216                                <div class="size-[60px] rounded-full bg-purple-250 group-hover:bg-white-0 motion-safe:transition-colors motion-safe:duration-300 relative shrink-0">
1217                                    <span
1218                                        class="absolute inset-0 m-auto block size-[34px] bg-white-0 group-hover:bg-purple-250 motion-safe:transition-colors motion-safe:duration-300"
1219                                        style="-webkit-mask: var(--feature-icon-url) center/contain no-repeat; mask: var(--feature-icon-url) center/contain no-repeat;"
1220                                        aria-hidden="true"
1221                                    ></span>
1222                                </div>
1223                                <div class="flex flex-col gap-3 text-purple-400 group-hover:text-white-0 motion-safe:transition-colors motion-safe:duration-300">
1224                                                                            <h3 id="annonces-claires-et-detaillees" class="font-helvetica-now-display font-bold text-[24px] leading-[1.4] tracking-[0.07px]">Annonces claires et détaillées</h3>
1225                                                                                                                <p class="font-helvetica-now-display text-[18px] leading-[1.4]">Voir les signalements en temps réel</p>
1226                                                                    </div>
1227                            </div>
1228                                                                                                                        <div class="relative h-full min-h-[211px] rounded-[24px] overflow-hidden">
1229                                                                    <img
1230        src="/img/77/cat.png?q=72&amp;fm=webp&amp;fit=cover&amp;w=450&amp;h=211&amp;s=cd3e3715a349f9f71138e4787e17d73a"
1231         srcset="/img/77/cat.png?q=72&amp;fm=webp&amp;fit=cover&amp;w=320&amp;h=150&amp;s=60d073c459d812d0fd8be806fb1d88e1 320w, /img/77/cat.png?q=72&amp;fm=webp&amp;fit=cover&amp;w=380&amp;h=178&amp;s=132ed6be0857925d35152b886417f794 380w, /img/77/cat.png?q=72&amp;fm=webp&amp;fit=cover&amp;w=480&amp;h=225&amp;s=a306ffd97b0bf72329e1092fef155e22 480w, /img/77/cat.png?q=72&amp;fm=webp&amp;fit=cover&amp;w=640&amp;h=300&amp;s=1e222239ae1dfda2dc381f7a24e20a54 640w"          sizes="(min-width: 1024px) 30vw, (min-width: 768px) 47vw, calc(100vw - 32px)"          width="450"          height="211"         alt="Photo de chat"
1232        loading="lazy"
1233        decoding="async"
1234        class="absolute inset-0 w-full h-full object-cover"
1235    />
1236                                                            </div>
1237                                                                                                                        <div
1238                                class="feature-card group relative bg-blue-50 hover:bg-purple-250 motion-safe:transition-colors motion-safe:duration-300 border-2 border-white-0 rounded-[24px] px-[35px] py-[30px] flex flex-col items-center gap-5 text-center"
1239                                 style="--feature-icon-url: url('https://animou-app.com/storage/75/icon-chat.svg');"                             >
1240                                <div class="size-[60px] rounded-full bg-purple-250 group-hover:bg-white-0 motion-safe:transition-colors motion-safe:duration-300 relative shrink-0">
1241                                    <span
1242                                        class="absolute inset-0 m-auto block size-[34px] bg-white-0 group-hover:bg-purple-250 motion-safe:transition-colors motion-safe:duration-300"
1243                                        style="-webkit-mask: var(--feature-icon-url) center/contain no-repeat; mask: var(--feature-icon-url) center/contain no-repeat;"
1244                                        aria-hidden="true"
1245                                    ></span>
1246                                </div>
1247                                <div class="flex flex-col gap-3 text-purple-400 group-hover:text-white-0 motion-safe:transition-colors motion-safe:duration-300">
1248                                                                            <h3 id="messagerie-securisee" class="font-helvetica-now-display font-bold text-[24px] leading-[1.4] tracking-[0.07px]">Messagerie sécurisée</h3>
1249                                                                                                                <p class="font-helvetica-now-display text-[18px] leading-[1.4]">Discutez directement avec les voisins</p>
1250                                                                    </div>
1251                            </div>
1252                                                            </div>
1253            </div>
1254        
1255    <div class="page-wrapper hidden lg:block pointer-events-none pt-[70px]">
1256    <div x-data="sectionNav({ inheritPrevious: false })"
1257     class="transition-opacity duration-300"
1258     :style="'opacity: ' + opacity"
1259     x-cloak>
1260    <div class="w-[425px]">
1261        <div class="flex items-center justify-end gap-3 font-helvetica-now-display text-lg leading-[1.4] mb-[20px] text-purple-500">
1262            <span class="tabular-nums" x-text="number"></span>
1263            <span x-text="label"></span>
1264        </div>
1265        <div class="relative">
1266            <div class="h-px w-full rounded-[1px]"
1267                 style="background: linear-gradient(to right, rgba(127,121,209,0) 0%, #7F79D1 100%);"></div>
1268            <div class="absolute top-1/2 -translate-y-1/2 transition-[left] duration-300 ease-out will-change-[left,opacity]"
1269                 :style="'left: ' + arrowLeft + 'px'">
1270                <div class="flex items-center justify-center h-[33px] px-4 rounded-full bg-purple-10 text-purple-500">
1271                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
1272                        <path d="M8.91 19.92L15.43 13.4C16.2 12.63 16.2 11.37 15.43 10.6L8.91 4.08"
1273                              stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"
1274                              stroke-linecap="round" stroke-linejoin="round"/>
1275                    </svg>
1276                </div>
1277            </div>
1278        </div>
1279    </div>
1280</div>
1281</div>
1282    
1283
1284</section>
1285<section
1286        class="page-section page-section--compact-top"
1287            data-viewport-motion
1288        x-data="{ viewportMotionActive: false }"
1289        x-intersect:enter.margin.-10%="viewportMotionActive = true"
1290        x-intersect:leave.margin.-10%="viewportMotionActive = false"
1291        :class="{
1292            'viewport-motion-active': viewportMotionActive,
1293            'viewport-motion-pending': ! viewportMotionActive,
1294        }"
1295         data-section-label="Perdu ou trouvé"      aria-labelledby="heading-cta-banner"
1296    >
1297            <div class="page-wrapper">
1298            <div class="cta-banner-card relative flex min-h-[214px] w-full flex-col justify-center overflow-hidden rounded-[32px] bg-gradient-to-b from-[#6E7DE4] via-[#8290EB] to-[#A8B3F0] px-8 py-10 lg:px-10">
1299        
1300        <div class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
1301            
1302            <div class="cta-banner-circle absolute right-0 top-0 size-[500px] translate-x-[40%] -translate-y-[40%] rounded-full bg-white-0/10 lg:size-[827px] lg:translate-x-[15%] lg:-translate-y-[15%]" style="--cta-drift-dur: 22s;"></div>
1303            <div class="cta-banner-circle absolute right-0 top-0 size-[340px] translate-x-[40%] -translate-y-[40%] rounded-full bg-white-0/15 lg:size-[577px] lg:translate-x-[10%] lg:-translate-y-[17%]" style="--cta-drift-
1303dur: 16s;"></div>
1304        </div>
1305
1306        
1307                    <span aria-hidden="true" class="cta-banner-watermark pointer-events-none absolute -left-10 top-[68%] -translate-y-1/2 select-none text-white-0/10">
1308                                    <svg width="220" height="220" viewBox="0 0 24 24" fill="currentColor"><path d="M8.35 3.35c1.2-.5 2.5.3 2.9 1.7.4 1.4-.2 2.9-1.4 3.3-1.2.5-2.5-.3-2.9-1.7-.4-1.4.2-2.8 1.4-3.3Zm7.3 0c1.2.5 1.8 2 1.4 3.3-.4 1.4-1.7 2.2-2.9 1.7-1.2-.4-1.8-1.9-1.4-3.3.4-1.4 1.7-2.2 2.9-1.7ZM3.8 8.6c1.1-.7 2.6-.2 3.2 1.1.7 1.3.3 2.8-.8 3.5-1.1.6-2.5.1-3.2-1.2-.6-1.3-.3-2.8.8-3.4Zm16.4 0c1.1.6 1.4 2.1.8 3.4-.7 1.3-2.1 1.8-3.2 1.2-1.1-.7-1.5-2.2-.8-3.5.6-1.3 2.1-1.8 3.2-1.1ZM12 11c2.3 0 5.5 2.7 5.5 5.3 0 1.7-1.2 2.7-2.8 2.7-1 0-1.8-.5-2.7-.5-.9 0-1.7.5-2.7.5-1.6 0-2.8-1-2.8-2.7C6.5 13.7 9.7 11 12 11Z"/></svg>
1309                            </span>
1310        
1311        <div class="relative z-10 flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
1312            <div class="flex max-w-[600px] flex-col gap-2">
1313                <h2 id="heading-cta-banner" class="text-heading-section text-white-0">Le bon réflexe pour chaque situation</h2>
1314                                    <p class="text-subtitle text-white-0/85">Découvrez comment fonctionne Animou et consultez nos guides pratiques pour agir sans attendre.</p>
1315                            </div>
1316
1317                            <div class="flex shrink-0 flex-wrap items-center gap-4">
1318                                            <a href="/application-mobile"   data-track="download-cta"                            class="inline-flex items-center gap-2 rounded-full bg-dark-850 px-6 py-3 text-white-0 transition-colors hover:bg-dark-700">
1319                            Découvrir l’application
1320                            <span aria-hidden="true">&rarr;</span>
1321                        </a>
1322                                                                <a href="/blog"                            class="inline-flex items-center gap-2 rounded-full bg-white-0 px-6 py-3 text-dark-850 transition-colors hover:bg-purple-10">
1323                            Consulter les guides
1324                        </a>
1325                                    </div>
1326                    </div>
1327    </div>
1328
1329    
1330    <style>
1331        @media (prefers-reduced-motion: no-preference) {
1332            .cta-banner-card {
1333                animation: cta-banner-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
1334            }
1335
1336            .cta-banner-watermark {
1337                animation: cta-banner-heartbeat 2.4s ease-in-out 0.8s infinite;
1338                transform-origin: 40% 50%;
1339            }
1340
1341            .cta-banner-circle {
1342                animation: cta-banner-drift var(--cta-drift-dur, 20s) ease-in-out infinite alternate;
1343            }
1344
1345            @keyframes cta-banner-in {
1346                from {
1347                    opacity: 0;
1348                    transform: translateY(24px);
1349                }
1350                to {
1351                    opacity: 1;
1352                    transform: translateY(0);
1353                }
1354            }
1355
1356            
1357            @keyframes cta-banner-heartbeat {
1358                0%, 40%, 100% { transform: scale(1); }
1359                8% { transform: scale(1.07); }
1360                16% { transform: scale(1); }
1361                24% { transform: scale(1.05); }
1362            }
1363
1364            @keyframes cta-banner-drift {
1365                from { transform: translate(0, 0); }
1366                to { transform: translate(-28px, 18px); }
1367            }
1368        }
1369    </style>
1370        </div>
1371    
1372
1373</section>
1374<section
1375     id="how-it-works"     class="page-section"
1376            data-viewport-motion
1377        x-data="{ viewportMotionActive: false }"
1378        x-intersect:enter.margin.-10%="viewportMotionActive = true"
1379        x-intersect:leave.margin.-10%="viewportMotionActive = false"
1380        :class="{
1381            'viewport-motion-active': viewportMotionActive,
1382            'viewport-motion-pending': ! viewportMotionActive,
1383        }"
1384         data-section-label="Comment ça marche"      aria-labelledby="heading-how-it-works"
1385    >
1386            <div class="page-wrapper">
1387            <div data-reveal class="flex flex-col gap-4 lg:items-center lg:text-center lg:max-w-[700px] lg:mx-auto">
1388        <h2
1389                id="heading-how-it-works"
1390                class="text-heading-section text-dark-850"
1391        >Comment ça marche</h2>
1392        <p class="text-subtitle text-dark-700">
1393            Une application pensée pour agir vite, ensemble.
1394        </p>
1395    </div>
1396
1397    
1398    
1399    <ol data-reveal-group class="relative mt-10 lg:mt-16 gap-4 lg:gap-[var(--grid-gutter)] list-none m-0 p-0 flex flex-col lg:flex-row lg:items-stretch">
1400                                <li class="group relative flex flex-col lg:flex-1">
1401                <div class="
1402                    relative z-10 overflow-hidden flex-1
1403                    bg-white-0 border border-gray-10 rounded-2xl lg:rou
1403nded-3xl
1404                    shadow-[var(--shadow-for-how-it-works)] transition-all duration-300 group-hover:shadow-lg group-hover:-translate-y-1
1405                    min-h-[168px] lg:min-h-[236px]
1406                ">
1407                    
1408                    <div
1409    class="absolute inset-0 pointer-events-none opacity-80 animate-[grid-drift_8s_linear_infinite]"
1410    style="background-image: url('https://animou-app.com/themes/animou/img/landing/how-it-works/dot-grid.svg');
1411           background-size: 49.27px 49.27px;
1412           mask-image: linear-gradient(to bottom left, black 0%, transparent 75%);
1413           -webkit-mask-image: linear-gradient(to bottom left, black 0%, transparent 75%);"
1414    aria-hidden="true"
1415></div>
1416
1417                    
1418                    <div class="relative z-10 flex flex-col gap-3 lg:gap-4 p-4 lg:p-8">
1419                        
1420                                                                                <div class="flex items-center justify-center size-12 lg:size-16 rounded-full bg-purple-15 shrink-0 transition-transform duration-500 group-hover:scale-110">
1421                                <img
1422            src="https://animou-app.com/themes/animou/img/landing/how-it-works/location-icon.svg"
1423            alt=""
1424            loading="lazy"
1425            aria-hidden="true" class="size-[22px] lg:size-[29px]" style="animation: animouPin 3s ease-in-out infinite; animation-delay: 0s;"
1426        />
1427                                </div>
1428                        
1429                        
1430                        <div class="flex flex-col gap-2 lg:gap-4">
1431                            <h3 id="signalez" class="text-heading-card text-dark-850">
1432                                Signalez
1433                            </h3>
1434                            <p class="font-helvetica-now-display font-normal text-sm lg:text-base leading-[1.4] text-gray-500">
1435                                Publiez une alerte pour un animal perdu, trouvé ou vu, avec une photo, une description et sa localisation.
1436                            </p>
1437                        </div>
1438                    </div>
1439                </div>
1440
1441                
1442                
1443                
1444                                    <div class="absolute -top-[10%] right-[0%] lg:-right-4 z-20">
1445                        <span class="inline-flex items-center justify-center px-4 lg:px-6 py-1.5 lg:py-2.5 bg-purple-500 rounded-full font-helvetica-now-display font-medium text-sm lg:text-base leading-[1.4] text-white-0 whitespace-nowrap shadow-lg rotate-3">
1446                            1 étape
1447                        </span>
1448                    </div>
1449                            </li>
1450                                <li class="group relative flex flex-col lg:flex-1">
1451                <div class="
1452                    relative z-10 overflow-hidden flex-1
1453                    bg-white-0 border border-gray-10 rounded-2xl lg:rounded-3xl
1454                    shadow-[var(--shadow-for-how-it-works)] transition-all duration-300 group-hover:shadow-lg group-hover:-translate-y-1
1455                    min-h-[168px] lg:min-h-[236px]
1456                ">
1457                    
1458                    <div
1459    class="absolute inset-0 pointer-events-none opacity-80 animate-[grid-drift_8s_linear_infinite]"
1460    style="background-image: url('https://animou-app.com/themes/animou/img/landing/how-it-works/dot-grid.svg');
1461           background-size: 49.27px 49.27px;
1462           mask-image: linear-gradient(to bottom left, black 0%, transparent 75%);
1463           -webkit-mask-image: linear-gradient(to bottom left, black 0%, transparent 75%);"
1464    aria-hidden="true"
1465></div>
1466
1467                    
1468                    <div class="relative z-10 flex flex-col gap-3 lg:gap-4 p-4 lg:p-8">
1469                        
1470                                                                                <div class="flex items-center justify-center size-12 lg:size-16 rounded-full bg-purple-15 shrink-0 transition-transform duration-500 group-hover:scale-110">
1471                                <img
1472            src="https://animou-app.com/themes/animou/img/landing/how-it-works/bell-icon.svg"
1473            alt=""
1474            loading="lazy"
1475            aria-hidden="true" class="size-[22px] lg:size-[29px]" style="animation: animouBell 3s ease-in-out infinite; animation-delay: 0.4s;"
1476        />
1477                                </div>
1478                        
1479                        
1480                        <div class="flex flex-col gap-2 lg:gap-4">
1481                            <h3 id="mobilisez" class="text-heading-card text-dark-850">
1482                                Mobilisez
1483                            </h3>
1484                            <p class="font-helvetica-now-display font-normal text-sm lg:text-base leading-[1.4] text-gray-500">
1485                                Animou diffuse l&#039;alerte autour de vous pour prévenir rapidement les bonnes personnes.
1486                            </p>
1487                        </div>
1488                    </div>
1489                </div>
1490
1491                
1492                                    <div class="flex absolute bottom-[-20px] right-0 z-50 pointer-events-none items-center justify-center lg:bottom-[-10px] lg:right-0 lg:translate-x-1/2 lg:translate-y-1/2 lg:z-0">
1493                        <svg viewBox="0 0 81.114 26.654" fill="none" aria-hidden="true" class="w-20 h-auto rotate-90 -scale-y-100 opacity-80 lg:rotate-[15deg] lg:scale-y-100">
1494                            <path fill="#cbc7ff" d="M.051 0c.457.111.63.156.818.477.646 1.099 1.236 2.288 1.845 3.4a35.3 35.3 0 0 0 4.214 6.12c4.315 5.09 10.165 9.175 16.983 11.859 10.076 3.834 21.597 4.232 32.033 1.11 9.025-2.645 16.871-7.414 21.044-14.604-1.567.38-4.588 1.147-6.28 1.214-.308.012-.636-.307-.812-.512.299-1.6 7.456-3.013 9.242-3.278.508-.076.88.29 1.166.544.633 1.687.551 4.936.785 6.714.071.538.005.808-.427 1.177-.588.08-.325.121-.823-.109-.776-.91-.965-3.41-1.185-4.68-2.859 4.863-7.175 8.364-12.666 11.31-9.916 5.27-21.974 7.118-33.545 5.136C19.898 23.674 8.787 16.64 2.898 7.303 1.967 5.825-.375 1.643.05 0"/>
1495                        </svg>
1496                    </div>
1497                
1498                
1499                            </li>
1500                                <li class="group relative flex flex-col lg:flex-1">
1501                <div class="
1502                    relative z-10 overflow-hidden flex-1
1503                    bg-white-0 border border-gray-10 rounded-2xl lg:rou
1503nded-3xl
1504                    shadow-[var(--shadow-for-how-it-works)] transition-all duration-300 group-hover:shadow-lg group-hover:-translate-y-1
1505                    min-h-[168px] lg:min-h-[236px]
1506                ">
1507                    
1508                    <div
1509    class="absolute inset-0 pointer-events-none opacity-80 animate-[grid-drift_8s_linear_infinite]"
1510    style="background-image: url('https://animou-app.com/themes/animou/img/landing/how-it-works/dot-grid.svg');
1511           background-size: 49.27px 49.27px;
1512           mask-image: linear-gradient(to bottom left, black 0%, transparent 75%);
1513           -webkit-mask-image: linear-gradient(to bottom left, black 0%, transparent 75%);"
1514    aria-hidden="true"
1515></div>
1516
1517                    
1518                    <div class="relative z-10 flex flex-col gap-3 lg:gap-4 p-4 lg:p-8">
1519                        
1520                                                                                <div class="flex items-center justify-center size-12 lg:size-16 rounded-full bg-purple-15 shrink-0 transition-transform duration-500 group-hover:scale-110">
1521                                <img
1522            src="https://animou-app.com/themes/animou/img/landing/how-it-works/chat-icon.svg"
1523            alt=""
1524            loading="lazy"
1525            aria-hidden="true" class="size-[22px] lg:size-[29px]" style="animation: animouBubble 3s ease-in-out infinite; animation-delay: 0.8s;"
1526        />
1527                                </div>
1528                        
1529                        
1530                        <div class="flex flex-col gap-2 lg:gap-4">
1531                            <h3 id="retrouvez" class="text-heading-card text-dark-850">
1532                                Retrouvez
1533                            </h3>
1534                            <p class="font-helvetica-now-display font-normal text-sm lg:text-base leading-[1.4] text-gray-500">
1535                                Échangez via la messagerie sécurisée et agissez plus vite grâce à la communauté.
1536                            </p>
1537                        </div>
1538                    </div>
1539                </div>
1540
1541                
1542                
1543                
1544                            </li>
1545            </ol>
1546
1547    
1548            <div data-reveal class="mt-8 lg:mt-12 flex justify-center">
1549            <a
1550                    href="/devenir-ambassadeur"
1551                                        class="btn-filled w-full lg:w-auto px-6 no-underline"
1552            >Rejoindre la communauté Animou</a>
1553        </div>
1554    
1555    <div class="page-wrapper hidden lg:block pointer-events-none pt-[70px]">
1556    <div x-data="sectionNav({ inheritPrevious: false })"
1557     class="transition-opacity duration-300"
1558     :style="'opacity: ' + opacity"
1559     x-cloak>
1560    <div class="w-[425px]">
1561        <div class="flex items-center justify-end gap-3 font-helvetica-now-display text-lg leading-[1.4] mb-[20px] text-purple-500">
1562            <span class="tabular-nums" x-text="number"></span>
1563            <span x-text="label"></span>
1564        </div>
1565        <div class="relative">
1566            <div class="h-px w-full rounded-[1px]"
1567                 style="background: linear-gradient(to right, rgba(127,121,209,0) 0%, #7F79D1 100%);"></div>
1568            <div class="absolute top-1/2 -translate-y-1/2 transition-[left] duration-300 ease-out will-change-[left,opacity]"
1569                 :style="'left: ' + arrowLeft + 'px'">
1570                <div class="flex items-center justify-center h-[33px] px-4 rounded-full bg-purple-10 text-purple-500">
1571                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
1572                        <path d="M8.91 19.92L15.43 13.4C16.2 12.63 16.2 11.37 15.43 10.6L8.91 4.08"
1573                              stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"
1574                              stroke-linecap="round" stroke-linejoin="round"/>
1575                    </svg>
1576                </div>
1577            </div>
1578        </div>
1579    </div>
1580</div>
1581</div>
1582        </div>
1583    
1584
1585</section>
1586<section
1587     id="why-urgent"     class="page-section"
1588            data-viewport-motion
1589        x-data="{ viewportMotionActive: false }"
1590        x-intersect:enter.margin.-10%="viewportMotionActive = true"
1591        x-intersect:leave.margin.-10%="viewportMotionActive = false"
1592        :class="{
1593            'viewport-motion-active': viewportMotionActive,
1594            'viewport-motion-pending': ! viewportMotionActive,
1595        }"
1596         data-section-label="Pourquoi c&#039;est urgent"      aria-labelledby="heading-urgent"
1597    >
1598            <div class="page-wrapper">
1599            <div data-reveal class="flex flex-col gap-4 items-start lg:items-center text-left lg:text-center">
1600        <h2
1601                id="heading-urgent"
1602                class="text-heading-section text-dark-850 w-full lg:max-w-[908px]"
1603        >
1604            <span>Un problème massif,</span>
1605            <br class="hidden lg:block" aria-hidden="true">
1606            <span>une réponse collective</span>
1607        </h2>
1608        <p class="text-subtitle text-gray-500 w-full lg:max-w-[600px]">
1609            Chaque année, des milliers d&#039;animaux disparaissent, mais les recherches restent dispersées et peu efficaces.
1610        </p>
1611    </div>
1612
1613    
1614    <div data-reveal-group class="flex flex-col lg:flex-row gap-4 lg:gap-5 mt-10 lg:mt-16">
1615        
1616        <div class="
1617            relative overflow-hidden rounded-2xl lg:rounded-card
1618            bg-blue-10 h-[350px] lg:h-[510px] w-full lg:flex-[2]
1619        ">
1620            
1621                            <img
1622        src="https://animou-app.com/themes/animou/img/landing/urgent/illustration.svg"
1623                         width="556"          height="568"         alt="Illustration Animou sur la recherche urgente d&#039;animaux"
1624        loading="lazy"
1625        decoding="async"
1626        class="absolute top-[-10px] lg:top-[-10px] left-0 w-full lg:w-[556px] h-[360px] lg:h-[568px] object-contain pointer-events-none"
1627    />
1628            
1629            
1630                            <p class="
1631                    absolute top-4 lg:top-10 right-4 lg:right-10
1632                    font-helvetica-now-display font-normal text-base lg:text-xl leading-[1.4] text-purple-400
1633                    w-[140px] lg:w-[180px]
1634                ">
1635                    Animou centralise tout, gratuitement
1636                </p>
1637            
1638            
1639            <div class="absolute bottom-4 lg:bottom-[50px] left-4 lg:left-10 flex flex-col gap-2 lg:gap-3">
1640                <strong
1641                    x-data="counter(82264, '')"
1642                    x-intersect.once="animate()"
1643                    x-text="formatted() ?? '82 264'"
1644                    class="text-heading-big-number text-purple-400"
1645                >82 264</strong>
1646                <span class="text-card-meta text-purple-400">
1647                    Animaux déclarés perdus en 2024
1648                </span>
1649            </div>
1650        </div>
1651
1652        
1653        <div
1654                class="
1655                flex flex-col items-center gap-6 lg:gap-[23px]
1656                rounded-2xl lg:rounded-card px-6 lg:px-8 py-12 lg:py-[93px]
1657                w-full lg:w-[366px] lg:shrink-0 relative overflow-hidden
1658            "
1659                style="background: var(--gradient-urgent-card)"
1660        >
1661            
1662                            <div class="relative size-[100px] lg:size-[120px] shrink-0 flex items-center justify-center">
1663                    <div class="absolute inset-0 bg-white-0/30 rounded-full animate-[ping_2s_cubic-bezier(0,0,0.2,1)_infinite]"></div>
1664                    <div class="absolute inset-[-15px] bg-white-0/20 rounded-full animate-[ping_3s_cubic-bezier(0,0,0.2,1)_infinite_1s]"></div>
1665                    <img
1666            src="https://animou-app.com/themes/animou/img/landing/urgent/clock-icon.svg"
1667            alt=""
1668            loading="lazy"
1669            aria-hidden="true" class="relative z-10 size-full"
1670        />
1671                    </div>
1672            
1673            
1674            <div class="relative z-10 flex flex-col gap-3 lg:gap-6 items-center text-center text-white-0 w-full">
1675                <strong class="text-heading-big-number">
1676                    8 min
1677                </strong>
1678                <span class="text-card-meta">
1679                    C&#039;est tout ce qu&#039;il faut pour qu&#039;un chat disparaisse de votre radar.
1680                </span>
1681            </div>
1682        </div>
1683    </div>
1684
1685    
1686            <p data-reveal class="text-body text-dark-700 lg:max-w-[372px]">
1687            Sources : I-CAD, Baromètre 2025 (données 2024) et bilan estival 2025
1688        </p>
1689    
1690    <div class="page-wrapper hidden lg:block pointer-events-none pt-[70px]">
1691    <div x-data="sectionNav({ inheritPrevious: false })"
1692     class="transition-opacity duration-300"
1693     :style="'opacity: ' + opacity"
1694     x-cloak>
1695    <div class="w-[425px]">
1696        <div class="flex items-center justify-end gap-3 font-helvetica-now-display text-lg leading-[1.4] mb-[20px] text-purple-500">
1697            <span class="tabular-nums" x-text="number"></span>
1698            <span x-text="label"></span>
1699        </div>
1700        <div class="relative">
1701            <div class="h-px w-full rounded-[1px]"
1702                 style="background: linear-gradient(to right, rgba(127,121,209,0) 0%, #7F79D1 100%);"></div>
1703            <div class="absolute top-1/2 -translate-y-1/2 transition-[left] duration-300 ease-out will-change-[left,opacity]"
1704                 :style="'left: ' + arrowLeft + 'px'">
1705                <div class="flex items-center justify-center h-[33px] px-4 rounded-full bg-purple-10 text-purple-500">
1706                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
1707                        <path d="M8.91 19.92L15.43 13.4C16.2 12.63 16.2 11.37 15.43 10.6L8.91 4.08"
1708                              stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"
1709                              stroke-linecap="round" stroke-linejoin="round"/>
1710                    </svg>
1711                </div>
1712            </div>
1713        </div>
1714    </div>
1715</div>
1716</div>
1717        </div>
1718    
1719
1720</section>
1721<section
1722     id="act-locally"     class="page-section page-section--colored"
1723         data-section-label="Communauté &amp; Partenaires"      aria-labelledby="heading-community"
1724    >
1725            
1725<script>
1726        window.animouWaitForImages ??= (container) => Promise.all(
1727            Array.from(container.querySelectorAll('img')).map((image) => new Promise((resolve) => {
1728                const decode = () => {
1729                    if (typeof image.decode !== 'function') {
1730                        resolve()
1731
1732                        return
1733                    }
1734
1735                    image.decode().catch(() => {}).finally(resolve)
1736                }
1737
1738                if (image.complete) {
1739                    decode()
1740
1741                    return
1742                }
1743
1744                image.addEventListener('load', decode, { once: true })
1745                image.addEventListener('error', resolve, { once: true })
1746            })),
1747        )
1748    </script>
1748
1749
1750    
1751    <div
1752            class="relative text-white-0 mask-fade-edges"
1753            style="background: linear-gradient(180deg, var(--color-blue-450) 0%, var(--color-purple-500) 100%);"
1754    >
1755        
1756                    <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
1757                <picture>
1758    
1759                    <source
1760            media="(min-width: 100rem)"
1761            type="image/avif"
1762            srcset="/img/21/background.webp?w=1920&amp;fm=avif&amp;q=75&amp;fit=cover&amp;s=00b6c257e6c78233b51ae7149cf949d0"
1763            width="1920"
1764                    />
1765                    <source
1766            media="(min-width: 75rem)"
1767            type="image/avif"
1768            srcset="/img/21/background.webp?w=1600&amp;fm=avif&amp;q=75&amp;fit=cover&amp;s=b54c1a4b3f50a7012bacfb579de03b13"
1769            width="1600"
1770                    />
1771                    <source
1772            media="(min-width: 48rem)"
1773            type="image/avif"
1774            srcset="/img/21/background.webp?w=1200&amp;fm=avif&amp;q=75&amp;fit=cover&amp;s=526432924e8e417923255d861f91cf54"
1775            width="1200"
1776                    />
1777    
1778    
1779                    <source
1780            media="(min-width: 100rem)"
1781            type="image/webp"
1782            srcset="/img/21/background.webp?w=1920&amp;q=75&amp;fit=cover&amp;s=fade472d8c91f5712d79ed9f4629d7a9"
1783            width="1920"
1784                    />
1785                    <source
1786            media="(min-width: 75rem)"
1787            type="image/webp"
1788            srcset="/img/21/background.webp?w=1600&amp;q=75&amp;fit=cover&amp;s=46d3130fb9249ca678cb1ee0bc164256"
1789            width="1600"
1790                    />
1791                    <source
1792            media="(min-width: 48rem)"
1793            type="image/webp"
1794            srcset="/img/21/background.webp?w=1200&amp;q=75&amp;fit=cover&amp;s=9cd0e790b1ac686b0656f8dfe3670e7b"
1795            width="1200"
1796                    />
1797    
1798    
1799        <img
1800        src="/img/21/background.webp?w=768&amp;q=75&amp;fit=cover&amp;s=3abd3614b48f94de250f6d7b556dd00c"
1801        width="768"
1802                alt=""
1803        loading="lazy"
1804        decoding="async"
1805        class="absolute inset-0 w-full h-full object-cover"
1806    />
1807</picture>
1808                <div class="absolute inset-0 bg-gradient-to-b from-[rgba(79,98,191,0.51)] via-[rgba(79,98,191,0)] to-[rgba(79,98,191,0.48)]"></div>
1809            </div>
1810        
1811        <div class="page-wrapper relative py-[120px] lg:py-[180px]">
1812
1813            
1814            <div class="flex flex-col lg:flex-row lg:items-start gap-10 lg:gap-[var(--grid-gutter)]">
1815
1816                
1817                <div class="lg:w-[380px] xl:w-[480px] lg:shrink-0 lg:pt-[90px]" data-reveal>
1818                    <div class="flex flex-col gap-6">
1819                        <div class="flex flex-col gap-4">
1820                            <h2
1821                                    id="heading-community"
1822                                    class="text-heading-section text-gradient-white"
1823                            >Une communauté prête à agir</h2>
1824
1825                            <p class="text-subtitle text-white-0/80 lg:max-w-[425px]">
1826                                Chaque utilisateur peut devenir un aidant dans son quartier. Quand un animal disparaît, la communauté locale peut faire la différence.
1827                            </p>
1828                        </div>
1829
1830                                                    <a
1831                                    href="/devenir-ambassadeur"
1832                                                                        class="btn-filled w-full lg:w-auto lg:self-start lg:px-8 no-underline"
1833                            >
1834                                Commencer à aider
1835                                <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" class="size-4 shrink-0">
1836                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.333" d="M3.333 8h9.333M8 3.333 12.667 8 8 12.666"/>
1837                                </svg>
1838                            </a>
1839                                            </div>
1840                </div>
1841
1842                
1843                <div class="relative w-full max-w-[420px] mx-auto lg:mx-0 lg:max-w-none lg:flex-1 min-h-[620px] lg:min-h-[580px]">
1844                    
1845                                            <div class="absolute left-5 top-[85px] lg:top-0 w-[172px] lg:w-[278px] -rotate-[9deg] lg:-rotate-[16deg] z-0">
1846                            <div class="overflow-hidden rounded-pill lg:rounded-card shadow-lg">
1847                                <img
1848        src="/img/22/dog-large.webp?q=80&amp;fit=cover&amp;w=278&amp;h=287&amp;s=7ee2c8257c664f3cc2f58e69587aa82e"
1849         srcset="/img/22/dog-large.webp?q=80&amp;fit=cover&amp;w=556&amp;h=574&amp;s=4614f1757ab21cc4522c4c9970924a9f 2x"                  width="278"          height="287"         alt=""
1850        loading="lazy"
1851        decoding="async"
1852        aria-hidden="true" class="w-full h-auto object-cover aspect-[278/287]"
1853    />
1854                            </div>
1855                        </div>
1856                    
1857                    
1858                                            <div class="absolute right-10 top-[120px] lg:left-[60px] lg:top-[280px] w-[135px] lg:w-[183px] rotate-[9deg] z-10">
1859                            <div class="overflow-hidden rounded-[14px] lg:rounded-[21px] shadow-lg">
1860                                <img
1861        src="/img/23/dog-small.webp?q=80&amp;fit=cover&amp;w=183&amp;h=200&amp;s=f2cf102b5adec07df68e931bfa222980"
1862         srcset="/img/23/dog-small.webp?q=80&amp;fit=cover&amp;w=366&amp;h=400&amp;
1862s=d18e63f5ee7f41934ab280b1c3a8d444 2x"                  width="183"          height="200"         alt=""
1863        loading="lazy"
1864        decoding="async"
1865        aria-hidden="true" class="w-full h-auto object-cover aspect-[183/200]"
1866    />
1867                            </div>
1868                        </div>
1869                    
1870                    
1871                    <div
1872                            class="
1873                            absolute left-0 lg:left-[120px] top-[240px] lg:top-[180px]
1874                            w-full lg:w-[420px]
1875                            rounded-2xl lg:rounded-card overflow-hidden
1876                            p-4 lg:p-12
1877                            gradient-border
1878                            z-20
1879                        "
1880                            data-reveal="scale"
1881                    >
1882                        <div class="flex flex-col gap-6 lg:gap-8">
1883                            <div class="flex flex-col gap-2 lg:gap-3 text-white-0">
1884                                <p class="font-helvetica-now-display font-bold text-[28px] lg:text-[40px] leading-[1.1] tracking-[-0.56px] lg:tracking-[-1.6px]">
1885                                    Rejoignez nos partenaires
1886                                </p>
1887                                <p class="text-card-meta lg:w-[319px]">
1888                                    Refuges, vétérinaires, associations : unissons nos forces pour agir plus vite.
1889                                </p>
1890                            </div>
1891
1892                                                            <a
1893                                        href="/devenir-partenaire"
1894                                                                                class="btn-filled w-full lg:w-auto lg:self-start lg:px-8 no-underline"
1895                                >
1896                                    Devenir partenaire
1897                                    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" class="size-4 shrink-0">
1898                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.333" d="M3.333 8h9.333M8 3.333 12.667 8 8 12.666"/>
1899                                    </svg>
1900                                </a>
1901                                                    </div>
1902                    </div>
1903
1904                    
1905                                            <ul
1906                                class="lg:hidden list-none"
1907                                aria-hidden="true"
1908                                x-data="{
1909                                    shown: false,
1910                                    async revealWhenImagesReady() {
1911                                        await window.animouWaitForImages(this.$el)
1912                                        this.shown = true
1913                                    },
1914                                }"
1915                                x-intersect.once="revealWhenImagesReady()"
1916                        >
1917                                                            <li class="absolute flex items-center gap-3 bg-glass-fill border border-gray-10 rounded-full px-4 py-3 z-30 shadow-badge-glass backdrop-blur-sm left-[20px] top-10 rotate-[9deg]"
1918                                :class="shown ? 'percycms-animate animate-pill-pop anim-duration-500' : 'opacity-0'"
1919                                style="animation-delay: 0ms"
1920                                >
1921                                                                            <div class="size-8 shrink-0 flex items-center justify-center bg-purple-15 rounded-full">
1922                                            <img
1923            src="https://animou-app.com/storage/24/vet-icon.svg"
1924            alt="Vétérinaire"
1925            loading="lazy"
1926            class="size-4"
1927        />
1928                                            </div>
1929                                                                        <span class="font-helvetica-now-display font-bold text-sm leading-[1.4] text-white-0 whitespace-nowrap">
1930                                        Vétérinaire
1931                                    </span>
1932                                </li>
1933                                                            <li class="absolute flex items-center gap-3 bg-glass-fill border border-gray-10 rounded-full px-4 py-3 z-30 shadow-badge-glass backdrop-blur-sm right-[20px] top-[40px] rotate-[-10deg]"
1934                                :class="shown ? 'percycms-animate animate-pill-pop anim-duration-500' : 'opacity-0'"
1935                                style="animation-delay: 150ms"
1936                                >
1937                                                                            <div class="size-8 shrink-0 flex items-center justify-center bg-purple-15 rounded-full">
1938                                            <img
1939            src="https://animou-app.com/storage/25/petsafe-icon.svg"
1940            alt="Association"
1941            loading="lazy"
1942            class="size-4"
1943        />
1944                                            </div>
1945                                                                        <sp
1945an class="font-helvetica-now-display font-bold text-sm leading-[1.4] text-white-0 whitespace-nowrap">
1946                                        Association
1947                                    </span>
1948                                </li>
1949                                                            <li class="absolute flex items-center gap-3 bg-glass-fill border border-gray-10 rounded-full px-4 py-3 z-30 shadow-badge-glass backdrop-blur-sm left-[20px] bottom-[75px] max-[380px]:bottom-[45px] rotate-[-16deg]"
1950                                :class="shown ? 'percycms-animate animate-pill-pop anim-duration-500' : 'opacity-0'"
1951                                style="animation-delay: 300ms"
1952                                >
1953                                                                            <div class="size-8 shrink-0 flex items-center justify-center bg-purple-15 rounded-full">
1954                                            <img
1955            src="https://animou-app.com/storage/28/people-icon.svg"
1956            alt="Professionnel"
1957            loading="lazy"
1958            class="size-4"
1959        />
1960                                            </div>
1961                                                                        <span class="font-helvetica-now-display font-bold text-sm leading-[1.4] text-white-0 whitespace-nowrap">
1962                                        Professionnel
1963                                    </span>
1964                                </li>
1965                                                            <li class="absolute flex items-center gap-3 bg-glass-fill border border-gray-10 rounded-full px-4 py-3 z-30 shadow-badge-glass backdrop-blur-sm right-[20px] bottom-[110px] max-[380px]:bottom-[65px] rotate-[7deg]"
1966                                :class="shown ? 'percycms-animate animate-pill-pop anim-duration-500' : 'opacity-0'"
1967                                style="animation-delay: 450ms"
1968                                >
1969                                                                            <div class="size-8 shrink-0 flex items-center justify-center bg-purple-15 rounded-full">
1970                                            <img
1971            src="https://animou-app.com/storage/29/home-icon.svg"
1972            alt="Refuge"
1973            loading="lazy"
1974            class="size-4"
1975        />
1976                                            </div>
1977                                                                        <span class="font-helvetica-now-display font-bold text-sm leading-[1.4] text-white-0 whitespace-nowrap">
1978                                        Refuge
1979                                    </span>
1980                                </li>
1981                                                    </ul>
1982                                    </div>
1983
1984                
1985                                    <div
1986                            class="hidden lg:flex lg:w-[200px] lg:shrink-0 relative"
1987                            x-data="{
1988                                shown: false,
1989                                async revealWhenImagesReady() {
1990                                    await window.animouWaitForImages(this.$el)
1991                                    this.shown = true
1992                                },
1993                            }"
1994                            x-intersect.once="revealWhenImagesReady()"
1995                    >
1996                        
1997                        <svg viewBox="0 0 2 743" preserveAspectRatio="none" fill="none" aria-hidden="true"
1998                             class="absolute right-4 top-0 h-full w-[2px] pointer-events-none"
1999                             :class="shown ? 'percycms-animate animate-fade-in-down' : 'opacity-0'">
2000                            <path stroke="url(#animou-dashed-line-gradient)" stroke-dasharray="16 16" stroke-width="2" d="M1 0v743"/>
2001                            <defs>
2002                                <linearGradient id="animou-dashed-line-gradient" x1="-.5" x2="-.5" y1="0" y2="743" gradientUnits="userSpaceOnUse">
2003                                    <stop offset=".074" stop-color="#adccf6" stop-opacity="0"/>
2004                                    <stop offset=".251" stop-color="#adccf6"/>
2005                                    <stop offset=".642" stop-color="#adccf6"/>
2006                                    <stop offset=".934" stop-color="#adccf6" stop-opacity="0"/>
2007                                </linearGradient>
2008                            </defs>
2009                        </svg>
2010
2011                        
2012                        <ul class="flex flex-col items-end gap-[56px] w-full pt-[22px] list-none" aria-hidden="true">
2013                                                            <li class="
2014                                    relative flex items-center gap-4
2015                                    bg-glass-fill backdrop-blur-sm border border-gray-10
2016                                    rounded-full px-5 py-3
2017                                "
2018                                :class="shown ? 'percycms-animate animate-fade-in-left anim-duration-700' : 'opacity-0'"
2019                                style="animation-delay: 200ms"
2020                                >
2021                                                                            <div class="size-10 shrink-0 flex items-center justify-center bg-purple-15 rounded-full">
2022                                            <img
2023            src="https://animou-app.com/storage/24/vet-icon.svg"
2024            alt="Vétérinaire"
2025            loading="lazy"
2026            class="size-5"
2027        />
2028                                            </div>
2029                                                                        <sp
2029an class="font-helvetica-now-display font-bold text-lg leading-[1.4] text-white-0 whitespace-nowrap">
2030                                        Vétérinaire
2031                                    </span>
2032                                </li>
2033                                                            <li class="
2034                                    relative flex items-center gap-4
2035                                    bg-glass-fill backdrop-blur-sm border border-gray-10
2036                                    rounded-full px-5 py-3
2037                                "
2038                                :class="shown ? 'percycms-animate animate-fade-in-left anim-duration-700' : 'opacity-0'"
2039                                style="animation-delay: 350ms"
2040                                >
2041                                                                            <div class="size-10 shrink-0 flex items-center justify-center bg-purple-15 rounded-full">
2042                                            <img
2043            src="https://animou-app.com/storage/25/petsafe-icon.svg"
2044            alt="Association"
2045            loading="lazy"
2046            class="size-5"
2047        />
2048                                            </div>
2049                                                                        <span class="font-helvetica-now-display font-bold text-lg leading-[1.4] text-white-0 whitespace-nowrap">
2050                                        Association
2051                                    </span>
2052                                </li>
2053                                                            <li class="
2054                                    relative flex items-center gap-4
2055                                    bg-glass-fill backdrop-blur-sm border border-gray-10
2056                                    rounded-full px-5 py-3
2057                                "
2058                                :class="shown ? 'percycms-animate animate-fade-in-left anim-duration-700' : 'opacity-0'"
2059                                style="animation-delay: 500ms"
2060                                >
2061                                                                            <div class="size-10 shrink-0 flex items-center justify-center bg-purple-15 rounded-full">
2062                                            <img
2063            src="https://animou-app.com/storage/28/people-icon.svg"
2064            alt="Professionnel"
2065            loading="lazy"
2066            class="size-5"
2067        />
2068                                            </div>
2069                                                                        <span class="font-helvetica-now-display font-bold text-lg leading-[1.4] text-white-0 whitespace-nowrap">
2070                                        Professionnel
2071                                    </span>
2072                                </li>
2073                                                            <li class="
2074                                    relative flex items-center gap-4
2075                                    bg-glass-fill backdrop-blur-sm border border-gray-10
2076                                    rounded-full px-5 py-3
2077                                "
2078                                :class="shown ? 'percycms-animate animate-fade-in-left anim-duration-700' : 'opacity-0'"
2079                                style="animation-delay: 650ms"
2080                                >
2081                                                                            <div class="size-10 shrink-0 flex items-center justify-center bg-purple-15 rounded-full">
2082                                            <img
2083            src="https://animou-app.com/storage/29/home-icon.svg"
2084            alt="Refuge"
2085            loading="lazy"
2086            class="size-5"
2087        />
2088                                            </div>
2089                                                                        <span class="font-helvetica-now-display font-bold text-lg leading-[1.4] text-white-0 whitespace-nowrap">
2090                                        Refuge
2091                                    </span>
2092                                </li>
2093                                                    </ul>
2094                    </div>
2095                            </div>
2096            
2097        </div>
2098    </div>
2099    
2100
2101</section>
2102<section
2103        class="page-section page-section--flush-top"
2104             aria-labelledby="heading-partner-showcase"
2105    >
2106            <div class="page-wrapper">
2107            <h2 id="heading-partner-showcase" class="sr-only">Ils soutiennent déjà le réseau</h2>
2108
2109    <div
2110        class="flex flex-col gap-[30px] pb-[60px] lg:flex-row"
2111        x-data="{
2112            logoCount: 8,
2113            quoteCount: 5,
2114            logoSlots: 3,
2115            quoteSlots: 2,
2116            logoIndexes: JSON.parse('[0,1,2]'),
2117            quoteIndexes: JSON.parse('[0,1]'),
2118            nextLogo: 3,
2119            nextQuote: 2,
2120            paused: false,
2121            timer: null,
2122            cursor: 0,
2123            order: [],
2124            revealed: false,
2125            visible: false,
2126            reducedMotion: false,
2127            sequence: JSON.parse('[[\u0022logo\u0022,0],[\u0022quote\u0022,0],[\u0022logo\u0022,1],[\u0022logo\u0022,2],[\u0022quote\u0022,1]]'),
2128            logoIndex(slot) {
2129                return this.logoCount ? this.logoIndexes[slot] % this.logoCount : 0
2130            },
2131            quoteIndex(slot) {
2132                return this.quoteCount ? this.quoteIndexes[slot] % this.quoteCount : 0
2133            },
2134            advanceCard(type, slot) {
2135                if (type === 'logo' && this.logoCount > this.logoSlots) {
2136                    this.logoIndexes[slot] = this.nextLogo % this.logoCount
2137                    this.nextLogo++
2138                }
2139
2140                if (type === 'quote' && this.quoteCount > this.quoteSlots) {
2141                    this.quoteIndexes[slot] = this.nextQuote % this.quoteCount
2142                    this.nextQuote++
2143                }
2144            },
2145            shuffle(n) {
2146                const a = Array.from({ length: n }, (_, i) => i)
2147                for (let i = a.length - 1; i > 0; i--) {
2148                    const j = Math.floor(Math.random() * (i + 1))
2149                    ;[a[i], a[j]] = [a[j], a[i]]
2150                }
2151                return a
2152            },
2153            reshuffle() {
2154                // New random round; keep the first pick different from the last
2155                // one so no card pops twice back-to-back.
2156                const last = this.order.length ? this.order[this.order.length - 1] : 
2156-1
2157                const next = this.shuffle(this.sequence.length)
2158                if (this.sequence.length > 1 && next[0] === last) {
2159                    ;[next[0], next[1]] = [next[1], next[0]]
2160                }
2161                this.order = next
2162                this.cursor = 0
2163            },
2164            tick() {
2165                if (this.paused || ! this.sequence.length) return
2166
2167                // Advance a single card per tick, in a random order, so only one
2168                // element ever pops in/out at a time and never in a fixed sweep.
2169                if (this.cursor >= this.order.length) this.reshuffle()
2170                const [type, slot] = this.sequence[this.order[this.cursor]]
2171                this.advanceCard(type, slot)
2172                this.cursor++
2173            },
2174            start() {
2175                this.stop()
2176                if (this.visible && ! this.reducedMotion) {
2177                    if (! this.order.length) this.reshuffle()
2178                    this.timer = window.setInterval(() => this.tick(), 2200)
2179                }
2180            },
2181            stop() {
2182                window.clearInterval(this.timer)
2183                this.timer = null
2184            },
2185            async waitForVisibleImages() {
2186                const images = Array.from(this.$el.querySelectorAll('img'))
2187                    .filter(image => image.offsetParent !== null)
2188
2189                await Promise.all(images.map(image => new Promise(resolve => {
2190                    const decode = () => {
2191                        if (typeof image.decode !== 'function') {
2192                            resolve()
2193                            return
2194                        }
2195
2196                        image.decode().catch(() => {}).finally(resolve)
2197                    }
2198
2199                    if (image.complete) {
2200                        decode()
2201                        return
2202                    }
2203
2204                    image.addEventListener('load', decode, { once: true })
2205                    image.addEventListener('error', resolve, { once: true })
2206                })))
2207            },
2208            async enterViewport() {
2209                this.visible = true
2210                await this.waitForVisibleImages()
2211                if (! this.visible) return
2212
2213                this.revealed = true
2214                this.start()
2215            },
2216            leaveViewport() {
2217                this.visible = false
2218                this.stop()
2219            },
2220            destroy() {
2221                this.stop()
2222            },
2223        }"
2224        x-init="reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches"
2225        x-intersect:enter.margin.-10%="enterViewport()"
2226        x-intersect:leave.margin.-10%="leaveViewport()"
2227        :class="{
2228            'partner-showcase-intro-active': revealed,
2229            'partner-showcase-intro-pending': ! revealed,
2230        }"
2231        @mouseenter="paused = true"
2232        @mouseleave="paused = false"
2233    >
2234        
2235        
2236        <div
2237            class="partner-showcase-intro relative flex flex-col justify-between gap-10 overflow-hidden rounded-[24px] p-5 text-white-0 lg:h-[426px] lg:w-[312px] lg:shrink-0"
2238            style="animation-delay: 0ms; background: linear-gradient(164deg, #6E7DE4 8.57%, #8290EB 52.87%, #A8B3F0 97.17%);"
2239        >
2240            <div class="flex flex-col gap-1">
2241                <p class="m-0 font-helvetica-now-display text-[72px] font-bold leading-[1.1] tracking-[-2.88px] lg:text-[100px] lg:tracking-[-4px]">19+</p>
2242                <p class="m-0 font-helvetica-now-display text-[20px] leading-[1.4]">Ils soutiennent déjà le réseau</p>
2243            </div>
2244
2245            <div class="flex flex-col gap-[23px]">
2246                <p class="m-0 text-[14px] leading-[1.4]">Des partenaires locaux et des associations engagés pour le bien-être animal partout en France</p>
2247                                    <a href="/devenir-partenaire"  class="btn-filled w-full !text-[14px] no-underline">
2248                        Voir tous nos partenaires
2249                        <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" class="size-4 shrink-0">
2250                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.333" d="M3.333 8h9.333M8 3.333 12.667 8 8 12.666"/>
2251                        </svg>
2252                    </a>
2253                            </div>
2254        </div>
2255
2256        
2257                    <div class="flex min-w-0 flex-1 flex-col gap-[30px] lg:h-[426px]">
2258                                                                                    <div class="partner-showcase-intro relative overflow-hidden max-lg:min-h-[160px] lg:h-[160px] lg:shrink-0" style="animation-delay: 90ms;">
2259                                                                                            <a
2260                                     href="https://c3po.link/QqUrSpwysy" target="_blank" rel="noopener noreferrer sponsored" data-track="partner-website" data-partner-name="Ultra Premium Direct"                                     x-show="logoIndex(0) === 0"
2261                                    x-transition:enter="partner-showcase-card-transition"
2262                                    x-transition:enter-start="partner-showcase-card-enter"
2263                                    x-transition:enter-end="partner-showcase-card-visible"
2264                                    x-transition:leave="partner-showcase-card-transition"
2265                                    x-transition:leave-start="partner-showcase-card-visible"
2266                                    x-transition:leave-end="partner-showcase-card-leave"
2267                                    :class="{ 'z-10': logoIndex(0) === 0 }"
2268                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2269                                                                    >
2270                                                                            <img src="https://media.animou-app.com/partners/1/logo/32/01KWW3C28R3WPHEM7T4YASZFVP.jpg" alt="Ultra Premium Direct" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2271                                                                                                                <p class="m-0 text-center text-[14px] leading-[1.4] text-dark-700">Alimentation premium pour chien et chat, fabriquée en France, vendue en direct.</p>
2272                                                                    </a>
2273                                                                                            <div
2274                                                                        x-show="logoIndex(0) === 1"
2275                                    x-transition:enter="partner-showcase-card-transition"
2276                                    x-transition:enter-start="partner-showcase-card-enter"
2277                                    x-transition:enter-end="partner-showcase-card-visible"
2278                                    x-transition:leave="partner-showcase-card-transition"
2279                                    x-transition:leave-start="partner-showcase-card-visible"
2280                                    x-transition:leave-end="partner-showcase-card-leave"
2281                                    :class="{ 'z-10': logoIndex(0) === 1 }"
2282                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2283                                     style="display: none;"                                 >
2284                                                                            <img src="https://media.animou-app.com/partners/20/logo/958/8be4f55e-c491-4cef-936a-00e558349c8b.jpg" alt="Alma Défense Animale" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2285                                                                                                        </div>
2286                                                                                            <div
2287                                                                        x-show="logoIndex(0) === 2"
2288                                    x-transition:enter="partner-showcase-card-transition"
2289                                    x-transition:enter-start="partner-showcase-card-enter"
2290                                    x-transition:enter-end="partner-showcase-card-visible"
2291                                    x-transition:leave="partner-showcase-card-transition"
2292                                    x-transition:leave-start="partner-showcase-card-visible"
2293                                    x-transition:leave-end="partner-showcase-card-leave"
2294                                    :class="{ 'z-10': logoIndex(0) === 2 }"
2295                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2296                                     style="display: none;"                                 >
2297                                                                            <img src="https://media.animou-app.com/partners/12/logo/950/a1e3833c-27b1-4159-90a7-76635
229756795bd.jpg" alt="Chat Bonheur" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2298                                                                                                        </div>
2299                                                                                            <div
2300                                                                        x-show="logoIndex(0) === 3"
2301                                    x-transition:enter="partner-showcase-card-transition"
2302                                    x-transition:enter-start="partner-showcase-card-enter"
2303                                    x-transition:enter-end="partner-showcase-card-visible"
2304                                    x-transition:leave="partner-showcase-card-transition"
2305                                    x-transition:leave-start="partner-showcase-card-visible"
2306                                    x-transition:leave-end="partner-showcase-card-leave"
2307                                    :class="{ 'z-10': logoIndex(0) === 3 }"
2308                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2309                                     style="display: none;"                                 >
2310                                                                            <img src="https://media.animou-app.com/partners/19/logo/957/64068d17-3c34-45a2-8e82-d880ee20328d.png" alt="L&#039;école du chat" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2311                                                                                                        </div>
2312                                                                                            <div
2313                                                                        x-show="logoIndex(0) === 4"
2314                                    x-transition:enter="partner-showcase-card-transition"
2315                                    x-transition:enter-start="partner-showcase-card-enter"
2316                                    x-transition:enter-end="partner-showcase-card-visible"
2317                                    x-transition:leave="partner-showcase-card-transition"
2318                                    x-transition:leave-start="partner-showcase-card-visible"
2319                                    x-transition:leave-end="partner-showcase-card-leave"
2320                                    :class="{ 'z-10': logoIndex(0) === 4 }"
2321                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2322                                     style="display: none;"                                 >
2323                                                                            <img src="https://media.animou-app.com/partners/17/logo/955/007e4408-37d6-48c2-9092-2fe755b31afc.png" alt="La Garenne de Maya" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2324                                                                                                        </div>
2325                                                                                            <a
2326                                     href="https://muzon.fr" target="_blank" rel="noopener noreferrer" data-track="partner-website" data-partner-name="Muzon"                                     x-show="logoIndex(0) === 5"
2327                                    x-transition:enter="partner-showcase-card-transition"
2328                                    x-transition:enter-start="partner-showcase-card-enter"
2329                                    x-transition:enter-end="partner-showcase-card-visible"
2330                                    x-transition:leave="partner-showcase-card-transition"
2331                                    x-transition:leave-start="partner-showcase-card-visible"
2332                                    x-transition:leave-end="partner-showcase-card-leave"
2333                                    :class="{ 'z-10': logoIndex(0) === 5 }"
2334                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2335                                     style="display: none;"                                 >
2336                                                                            <img src="https://media.animou-app.com/partners/4/logo/14
233606/8667929a-aacf-4fdc-ab99-dfcdbb5a7783.jpg" alt="Muzon" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2337                                                                                                                <p class="m-0 text-center text-[14px] leading-[1.4] text-dark-700">Concept store d&#039;accessoires et d&#039;alimentation pour chiens et chats.</p>
2338                                                                    </a>
2339                                                                                            <a
2340                                     href="https://nuggetshop.fr" target="_blank" rel="noopener noreferrer" data-track="partner-website" data-partner-name="Nugget"                                     x-show="logoIndex(0) === 6"
2341                                    x-transition:enter="partner-showcase-card-transition"
2342                                    x-transition:enter-start="partner-showcase-card-enter"
2343                                    x-transition:enter-end="partner-showcase-card-visible"
2344                                    x-transition:leave="partner-showcase-card-transition"
2345                                    x-transition:leave-start="partner-showcase-card-visible"
2346                                    x-transition:leave-end="partner-showcase-card-leave"
2347                                    :class="{ 'z-10': logoIndex(0) === 6 }"
2348                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2349                                     style="display: none;"                                 >
2350                                                                            <img src="https://media.animou-app.com/partners/3/logo/55/01KWXZZD0N8D9QVE2DDYKQT9CT.png" alt="Nugget" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2351                                                                                                                <p class="m-0 text-center text-[14px] leading-[1.4] text-dark-700">Concept store bordelais d&#039;accessoires, soins et café pour chiens et chats.</p>
2352                                                                    </a>
2353                                                                                            <div
2354                                                                        x-show="logoIndex(0) === 7"
2355                                    x-transition:enter="partner-showcase-card-transition"
2356                                    x-transition:enter-start="partner-showcase-card-enter"
2357                                    x-transition:enter-end="partner-showcase-card-visible"
2358                                    x-transition:leave="partner-showcase-card-transition"
2359                                    x-transition:leave-start="partner-showcase-card-visible"
2360                                    x-transition:leave-end="partner-showcase-card-leave"
2361                                    :class="{ 'z-10': logoIndex(0) === 7 }"
2362                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2363                                     style="display: none;"                                 >
2364                                                                            <img src="https://media.animou-app.com/partners/14/logo/952/efaaeae4-9004-47c8-84c8-59a3d647404e.png" alt="Sowly" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2365                                                                                                        </div>
2366                                                    </div>
2367                                                                                                        <div class="partner-showcase-intro relative min-h-[220px] overflow-hidden lg:min-h-0 lg:flex-1" style="animation-delay: 180ms;">
2368                                                                                            <figure
2369                                    x-show="quoteIndex(0) === 0"
2370                                    x-transition:enter="partner-showcase-card-transition"
2371                                    x-transition:enter-start="partner-showcase-card-enter"
2372                                    x-transition:enter-end="partner-showcase-card-visible"
2373                                    x-transition:leave="partner-showcase-card-transition"
2374                                    x-transition:leave-start="partner-showcase-card-visible"
2375                                    x-transition:leave-end="partner-showcase-card-leave"
2376                                    :class="{ 'z-10': quoteIndex(0) === 0 }"
2377                                    class="partner-showcase-card-face absolute inset-0 m-0 rounded-[20px] border border-transparent bg-blue-10 p-6 hover:border-purple-100 hover:bg-purple-50/40"
2378                                                                    >
2379                                    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" class="size-8 text-purple-400">
2380                                        <path fill="currentColor" d="M18.6893 28V18.1453C18.6893 10.54 23.664 5.38533 30.6667 4L31.9933 6.868C28.7507 8.09067 26.6667 11.7187 26.6667 14.6667H32V28H18.6893ZM0 28V18.1453C0 10.54 4.99733 5.38533 12 4L13.328 6.868C10.084 8.09067 8 11.7187 8 14.6667H13.3107V28H0Z"/>
2381                                    </svg>
2382                                    <blockquote class="m-0 mt-4 border-0 p-0">
2383                                        <p class="m-0 line-clamp-4 max-w-[225px] font-helvetica-now-display text-[17px] leading-[1.4] text-dark-850">Animou fait partie de ces applications qui ont su allier utilité et amour des animaux, et ça ne s&#039;improvise pas. Un partenariat naturel pour Caats, parce que quand les valeurs se rejoignent à ce point, s&#039;engager ensemble ne se discute même pas.</p>
2384                                    </blockquote>
2385                                    <figcaption class="mt-3 text-[12px] leading-[1.4] text-dark-700">Caats</figcaption>
2386                                                                            <img src="https://media.animou-app.com/partners/9/logo/17/logo.png" alt="" width="90" height="72" aria-hidden="true" loading="lazy" decoding="async" class="absolute bottom-3 right-3 h-[72px] w-auto max-w-[90px] object-contain" />
2387                                                                                                                
2388                                        <a href="https://caats.co" target="_blank" rel="noopener noreferrer" data-track="partner-website" data-partner-name="Caats" aria-label="Caats" class="absolute inset-0 z-10"></a>
2389                                                                    </figure>
2390                                                                                            <figure
2391                                    x-show="quoteIndex(0) === 1"
2392                                    x-transition:enter="partner-showcase-card-transition"
2393                                    x-transition:enter-start="partner-showcase-card-enter"
2394                                    x-transition:enter-end="partner-showcase-card-visible"
2395                                    x-transition:leave="partner-showcase-card-transition"
2396                                    x-transition:leave-start="partner-showcase-card-visible"
2397                                    x-transition:leave-end="partner-showcase-card-leave"
2398                                    :class="{ 'z-10': quoteIndex(0) === 1 }"
2399                                    class="partner-showcase-card-face absolute inset-0 m-0 rounded-[20px] border border-transparent bg-blue-10 p-6 hover:border-purple-100 hover:bg-purple-50/40"
2400                                     style="display: none;"                                 >
2401                                    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" class="size-8 text-purple-400">
2402                                        <path fill="currentColor" d="M18.6893 28V18.1453C18.6893 10.54 23.664 5.38533 30.6667 4L31.9933 6.868C28.7507 8.09067 26.6667 11.7187 26.6667 14.6667H32V28H18.6893ZM0 28V18.1453C0 10.54 4.99733 5.38533 12 4L13.328 6.868C10.084 8.09067 8 11.7187 8 14.6667H13.3107V28H0Z"/>
2403                                    </svg>
2404                                    <blockquote class="m-0 mt-4 border-0 p-0">
2405                                        <p class="m-0 line-clamp-4 max-w-[225px] font-helvetica-now-display text-[17px] leading-[1.4] text-dark-850">Invoxia est fière d&#039;être partenaire de ce projet. Les inscrits à la plateforme bénéficient d&#039;une offre exclusive sur le Biotracker Invoxia.</p>
2406                                    </blockquote>
2407                                    <figcaption class="mt-3 text-[12px] leading-[1.4] text-dark-700">Invoxia</figcaption>
2408                                                                            <img src="https://media.animou-app.com/partners/5/logo/9/logo.png" alt="" width="90" height="72" aria-hidden="true" loading="lazy" decoding="async" class="absolute bottom-3 right-3 h-[72px] w-auto max-w-[90px] object-contain" />
2409                                                                                                                
2410                                        <a href="https://c3po.link/Q53hhqfbkq" target="_blank" rel="noopener noreferrer sponsored" data-track="partner-website" data-partner-name="Invoxia" aria-label="Invoxia" class="absolute inset-0 z-10"></a>
2411                                                                    </figure>
2412                                                                                            <figure
2413                                    x-show="quoteIndex(0) === 2"
2414                                    x-transition:enter="partner-showcase-card-transition"
2415                                    x-transition:enter-start="partner-showcase-card-enter"
2416                                    x-transition:enter-end="partner-showcase-card-visible"
2417                                    x-transition:leave="partner-showcase-card-transition"
2418                                    x-transition:leave-start="partner-showcase-card-visible"
2419                                    x-transition:leave-end="partner-showcase-card-leave"
2420                                    :class="{ 'z-10': quoteIndex(0) === 2 }"
2421                                    class="partner-showcase-card-face absolute inset-0 m-0 rounded-[20px] border border-transparent bg-blue-10 p-6 hover:border-purple-100 hover:bg-purple-50/40"
2422                                     style="display: none;"                                 >
2423                                    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" class="size-8 text-purple-400">
2424                                        <path fill="currentColor" d="M18.6893 28V18.1453C18.6893 10.54 23.664 5.38533 30.6667 4L31.9933 6.868C28.7507 8.09067 26.6667 11.7187 26.6667 14.6667H32V28H18.6893ZM0 28V18.1453C0 10.54 4.99733 5.38533 12 4L13.328 6.868C10.084 8.09067 8 11.7187 8 14.6667H13.3107V28H0Z"/>
2425                                    </svg>
2426                                    <blockquote class="m-0 mt-4 border-0 p-0">
2427                                        <p class="m-0 line-clamp-4 max-w-[225px] font-helvetica-now-display text-[17px] leading-[1.4] text-dark-850">Un animal qui se perd, c&#039;est toute une famille qui s&#039;inquiète. Tout ce qui aide à le retrouver plus vite compte vraiment, et c&#039;est précisément ce que permet Animou. Chez Franklin, prendre soin de nos compagnons ne s&#039;arrête pas à leur gamelle : nous sommes fiers de compter parmi ses premiers partenaires.</p>
2428                                    </blockquote>
2429                                    <figcaption class="mt-3 text-[12px] leading-[1.4] text-dark-700">Franklin Pet Food</figcaption>
2430                                                                            <img src="https://media.animou-app.com/partners/7/logo/13/logo.png" alt="" width="90" height="72" aria-hidden="true" loading="lazy" decoding="async" class="absolute bottom-3 right-3 h-[72px] w-auto max-w-[90px] object-contain" />
2431                                                                                                                
2432                                        <a href="https://c3po.link/QhwjcrC4Cy" target="_blank" rel="noopener noreferrer" data-track="partner-website" data-partner-name="Franklin Pet Food" aria-label="Franklin Pet Food" class="absolute inset-0 z-10"></a>
2433                                                                    </figure>
2434                                                                                            <figure
2435                                    x-show="quoteIndex(0) === 3"
2436                                    x-transition:enter="partner-showcase-card-transition"
2437                                    x-transition:enter-start="partner-showcase-card-enter"
2438                                    x-transition:enter-end="partner-showcase-card-visible"
2439                                    x-transition:leave="partner-showcase-card-transition"
2440                                    x-transition:leave-start="partner-showcase-card-visible"
2441                                    x-transition:leave-end="partner-showcase-card-leave"
2442                                    :class="{ 'z-10': quoteIndex(0) === 3 }"
2443                                    class="partner-showcase-card-face absolute inset-0 m-0 rounded-[20px] border border-transparent bg-blue-10 p-6 hover:border-purple-100 hover:bg-purple-50/40"
2444                                     style="display: none;"                                 >
2445                                    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" class="size-8 text-purple-400">
2446                                        <path fill="currentColor" d="M18.6893 28V18.1453C18.6893 10.54 23.664 5.38533 30.6667 4L31.9933 6.868C28.7507 8.09067 26.6667 11.7187 26.6667 14.6667H32V28H18.6893ZM0 28V18.1453C0 10.54 4.99733 5.38533 12 4L13.328 6.868C10.084 8.09067 8 11.7187 8 14.6667H13.3107V28H0Z"/>
2447                                    </svg>
2448                                    <blockquote class="m-0 mt-4 border-0 p-0">
2449                                        <p class="m-0 line-clamp-4 max-w-[225px] font-helvetica-now-display text-[17px] leading-[1.4] text-dark-850">Nous avons choisi de soutenir le développement de cette belle initiative solidaire, parce qu&#039;ensemble, associations, refuges, bénévoles et citoyens peuvent faire la différence pour les animaux perdus.</p>
2450                                    </blockquote>
2451                                    <figcaption class="mt-3 text-[12px] leading-[1.4] text-dark-700">La Ligue des Animaux</figcaption>
2452                                                                            <img src="https://media.animou-app.com/partners/10/logo/945/b39f0b9a-da25-442a-8458-95
2452538808cced.png" alt="" width="90" height="72" aria-hidden="true" loading="lazy" decoding="async" class="absolute bottom-3 right-3 h-[72px] w-auto max-w-[90px] object-contain" />
2453                                                                                                                
2454                                        <a href="https://laliguedesanimaux.fr/" target="_blank" rel="noopener noreferrer" data-track="partner-website" data-partner-name="La Ligue des Animaux" aria-label="La Ligue des Animaux" class="absolute inset-0 z-10"></a>
2455                                                                    </figure>
2456                                                                                            <figure
2457                                    x-show="quoteIndex(0) === 4"
2458                                    x-transition:enter="partner-showcase-card-transition"
2459                                    x-transition:enter-start="partner-showcase-card-enter"
2460                                    x-transition:enter-end="partner-showcase-card-visible"
2461                                    x-transition:leave="partner-showcase-card-transition"
2462                                    x-transition:leave-start="partner-showcase-card-visible"
2463                                    x-transition:leave-end="partner-showcase-card-leave"
2464                                    :class="{ 'z-10': quoteIndex(0) === 4 }"
2465                                    class="partner-showcase-card-face absolute inset-0 m-0 rounded-[20px] border border-transparent bg-blue-10 p-6 hover:border-purple-100 hover:bg-purple-50/40"
2466                                     style="display: none;"                                 >
2467                                    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" class="size-8 text-purple-400">
2468                                        <path fill="currentColor" d="M18.6893 28V18.1453C18.6893 10.54 23.664 5.38533 30.6667 4L31.9933 6.868C28.7507 8.09067 26.6667 11.7187 26.6667 14.6667H32V28H18.6893ZM0 28V18.1453C0 10.54 4.99733 5.38533 12 4L13.328 6.868C10.084 8.09067 8 11.7187 8 14.6667H13.3107V28H0Z"/>
2469                                    </svg>
2470                                    <blockquote class="m-0 mt-4 border-0 p-0">
2471                                        <p class="m-0 line-clamp-4 max-w-[225px] font-helvetica-now-display text-[17px] leading-[1.4] text-dark-850">Tout ce qui permet de diffuser plus rapidement une information et de mobiliser davantage de personnes me semble intéressant. Et c&#039;est précisément ce que cherche à faire Animou.</p>
2472                                    </blockquote>
2473                                    <figcaption class="mt-3 text-[12px] leading-[1.4] text-dark-700">Le guide du chat</figcaption>
2474                                                                            <img src="https://media.animou-app.com/partners/11/logo/946/e5deb7dd-9354-478f-9dbf-3a9b9cd0df02.jpg" alt="" width="90" height="72" aria-hidden="true" loading="lazy" decoding="async" class="absolute bottom-3 right-3 h-[72px] w-auto max-w-[90px] object-contain" />
2475                                                                                                                
2476                                        <a href="https://leguideduchat.fr/" target="_blank" rel="noopener noreferrer" data-track="partner-website" data-partner-name="Le guide du chat" aria-label="Le guide du chat" class="absolute inset-0 z-10"></a>
2477                                                                    </figure>
2478                                                    </div>
2479                                                </div>
2480                    <div class="flex min-w-0 flex-1 flex-col gap-[30px] lg:h-[426px]">
2481                                                            <div class="partner-showcase-intro relative min-h-0 overflow-hidden rounded-[20px] max-lg:aspect-[4/3] lg:flex-1" style="animation-delay: 270ms;">
2482                            <img
2483        src="/img/168/partners-photo-4c82573d24f6.webp?q=80&amp;fit=cover&amp;w=500&amp;h=480&amp;s=5f03a98c5d47fddbe6abc036998274cd"
2484         srcset="/img/168/partners-photo-4c82573d24f6.webp?q=80&amp;fit=cover&amp;w=1000&amp;h=960&amp;s=cad9b57f3af53774414e3376cb192a46 2x"                  width="500"          height="480"         alt="Un chien attentif sous un arbre en fleurs"
2485        loading="lazy"
2486        decoding="async"
2487        class="absolute inset-0 size-full object-cover"
2488    />
2489                        </div>
2490                                                                                                        <div class="partner-showcase-intro relative overflow-hidden max-lg:min-h-[160px] lg:h-[160px] lg:shrink-0" style="animation-delay: 360ms;">
2491                                                                                            <a
2492                                     href="https://c3po.link/QqUrSpwysy" target="_blank" rel="noopener noreferrer sponsored" data-track="partner-website" data-partner-name="Ultra Premium Direct"                                     x-show="logoIndex(1) === 0"
2493                                    x-transition:enter="partner-showcase-card-transition"
2494                                    x-transition:enter-start="partner-showcase-card-enter"
2495                                    x-transition:enter-end="partner-showcase-card-visible"
2496                                    x-transition:leave="partner-showcase-card-transition"
2497                                    x-transition:leave-start="partner-showcase-card-visible"
2498                                    x-transition:leave-end="partner-showcase-card-leave"
2499                                    :class="{ 'z-10': logoIndex(1) === 0 }"
2500                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2501                                     style="display: none;"                                 >
2502                                                                            <img src="https://media.animou-app.com/partners/1/logo/32/01KWW3C28R3WPHEM7T4YASZFVP.jpg" alt="Ultra Premium Direct" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2503                                                                                                                <p class="m-0 text-center text-[14px] leading-[1.4] text-dark-700">Alimentation premium pour chien et chat, fabriquée en France, vendue en direct.</p>
2504                                                                    </a>
2505                                                                                            <div
2506                                                                        x-show="logoIndex(1) === 1"
2507                                    x-transition:enter="partner-showcase-card-transition"
2508                                    x-transition:enter-start="partner-showcase-card-enter"
2509                                    x-transition:enter-end="partner-showcase-card-visible"
2510                                    x-transition:leave="partner-showcase-card-transition"
2511                                    x-transition:leave-start="partner-showcase-card-visible"
2512                                    x-transition:leave-end="partner-showcase-card-leave"
2513                                    :class="{ 'z-10': logoIndex(1) === 1 }"
2514                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2515                                                                    >
2516                                                                            <img src="https://media.animou-app.com/partners/20/logo/958/8be4f55e-c491-4cef-936a-00e558349c8b.jpg" alt="Alma Défense Animale" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2517                                                                                                        </div>
2518                                                                                            <div
2519                                                                        x-show="logoIndex(1) === 2"
2520                                    x-transition:enter="partner-showcase-card-transition"
2521                                    x-transition:enter-start="partner-showcase-card-enter"
2522                                    x-transition:enter-end="partner-showcase-card-visible"
2523                                    x-transition:leave="partner-showcase-card-transition"
2524                                    x-transition:leave-start="partner-showcase-card-visible"
2525                                    x-transition:leave-end="partner-showcase-card-leave"
2526                                    :class="{ 'z-10': logoIndex(1) === 2 }"
2527                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2528                                     style="display: none;"                                 >
2529                                                                            <img src="https://media.animou-app.com/partners/12/logo/950/a1e3833c-27b1-4159-90a7-76635
252956795bd.jpg" alt="Chat Bonheur" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2530                                                                                                        </div>
2531                                                                                            <div
2532                                                                        x-show="logoIndex(1) === 3"
2533                                    x-transition:enter="partner-showcase-card-transition"
2534                                    x-transition:enter-start="partner-showcase-card-enter"
2535                                    x-transition:enter-end="partner-showcase-card-visible"
2536                                    x-transition:leave="partner-showcase-card-transition"
2537                                    x-transition:leave-start="partner-showcase-card-visible"
2538                                    x-transition:leave-end="partner-showcase-card-leave"
2539                                    :class="{ 'z-10': logoIndex(1) === 3 }"
2540                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2541                                     style="display: none;"                                 >
2542                                                                            <img src="https://media.animou-app.com/partners/19/logo/957/64068d17-3c34-45a2-8e82-d880ee20328d.png" alt="L&#039;école du chat" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2543                                                                                                        </div>
2544                                                                                            <div
2545                                                                        x-show="logoIndex(1) === 4"
2546                                    x-transition:enter="partner-showcase-card-transition"
2547                                    x-transition:enter-start="partner-showcase-card-enter"
2548                                    x-transition:enter-end="partner-showcase-card-visible"
2549                                    x-transition:leave="partner-showcase-card-transition"
2550                                    x-transition:leave-start="partner-showcase-card-visible"
2551                                    x-transition:leave-end="partner-showcase-card-leave"
2552                                    :class="{ 'z-10': logoIndex(1) === 4 }"
2553                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2554                                     style="display: none;"                                 >
2555                                                                            <img src="https://media.animou-app.com/partners/17/logo/955/007e4408-37d6-48c2-9092-2fe755b31afc.png" alt="La Garenne de Maya" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2556                                                                                                        </div>
2557                                                                                            <a
2558                                     href="https://muzon.fr" target="_blank" rel="noopener noreferrer" data-track="partner-website" data-partner-name="Muzon"                                     x-show="logoIndex(1) === 5"
2559                                    x-transition:enter="partner-showcase-card-transition"
2560                                    x-transition:enter-start="partner-showcase-card-enter"
2561                                    x-transition:enter-end="partner-showcase-card-visible"
2562                                    x-transition:leave="partner-showcase-card-transition"
2563                                    x-transition:leave-start="partner-showcase-card-visible"
2564                                    x-transition:leave-end="partner-showcase-card-leave"
2565                                    :class="{ 'z-10': logoIndex(1) === 5 }"
2566                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2567                                     style="display: none;"                                 >
2568                                                                            <img src="https://media.animou-app.com/partners/4/logo/14
256806/8667929a-aacf-4fdc-ab99-dfcdbb5a7783.jpg" alt="Muzon" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2569                                                                                                                <p class="m-0 text-center text-[14px] leading-[1.4] text-dark-700">Concept store d&#039;accessoires et d&#039;alimentation pour chiens et chats.</p>
2570                                                                    </a>
2571                                                                                            <a
2572                                     href="https://nuggetshop.fr" target="_blank" rel="noopener noreferrer" data-track="partner-website" data-partner-name="Nugget"                                     x-show="logoIndex(1) === 6"
2573                                    x-transition:enter="partner-showcase-card-transition"
2574                                    x-transition:enter-start="partner-showcase-card-enter"
2575                                    x-transition:enter-end="partner-showcase-card-visible"
2576                                    x-transition:leave="partner-showcase-card-transition"
2577                                    x-transition:leave-start="partner-showcase-card-visible"
2578                                    x-transition:leave-end="partner-showcase-card-leave"
2579                                    :class="{ 'z-10': logoIndex(1) === 6 }"
2580                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2581                                     style="display: none;"                                 >
2582                                                                            <img src="https://media.animou-app.com/partners/3/logo/55/01KWXZZD0N8D9QVE2DDYKQT9CT.png" alt="Nugget" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2583                                                                                                                <p class="m-0 text-center text-[14px] leading-[1.4] text-dark-700">Concept store bordelais d&#039;accessoires, soins et café pour chiens et chats.</p>
2584                                                                    </a>
2585                                                                                            <div
2586                                                                        x-show="logoIndex(1) === 7"
2587                                    x-transition:enter="partner-showcase-card-transition"
2588                                    x-transition:enter-start="partner-showcase-card-enter"
2589                                    x-transition:enter-end="partner-showcase-card-visible"
2590                                    x-transition:leave="partner-showcase-card-transition"
2591                                    x-transition:leave-start="partner-showcase-card-visible"
2592                                    x-transition:leave-end="partner-showcase-card-leave"
2593                                    :class="{ 'z-10': logoIndex(1) === 7 }"
2594                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2595                                     style="display: none;"                                 >
2596                                                                            <img src="https://media.animou-app.com/partners/14/logo/952/efaaeae4-9004-47c8-84c8-59a3d647404e.png" alt="Sowly" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2597                                                                                                        </div>
2598                                                    </div>
2599                                                </div>
2600                    <div class="flex min-w-0 flex-1 flex-col gap-[30px] lg:h-[426px]">
2601                                                                                    <div class="partner-showcase-intro relative overflow-hidden max-lg:min-h-[160px] lg:h-[160px] lg:shrink-0" style="animation-delay: 450ms;">
2602                                                                                            <a
2603                                     href="https://c3po.link/QqUrSpwysy" target="_blank" rel="noopener noreferrer sponsored" data-track="partner-website" data-partner-name="Ultra Premium Direct"                                     x-show="logoIndex(2) === 0"
2604                                    x-transition:enter="partner-showcase-card-transition"
2605                                    x-transition:enter-start="partner-showcase-card-enter"
2606                                    x-transition:enter-end="partner-showcase-card-visible"
2607                                    x-transition:leave="partner-showcase-card-transition"
2608                                    x-transition:leave-start="partner-showcase-card-visible"
2609                                    x-transition:leave-end="partner-showcase-card-leave"
2610                                    :class="{ 'z-10': logoIndex(2) === 0 }"
2611                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2612                                     style="display: none;"                                 >
2613                                                                            <img src="https://media.animou-app.com/partners/1/logo/32/01KWW3C28R3WPHEM7T4YASZFVP.jpg" alt="Ultra Premium Direct" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2614                                                                                                                <p class="m-0 text-center text-[14px] leading-[1.4] text-dark-700">Alimentation premium pour chien et chat, fabriquée en France, vendue en direct.</p>
2615                                                                    </a>
2616                                                                                            <div
2617                                                                        x-show="logoIndex(2) === 1"
2618                                    x-transition:enter="partner-showcase-card-transition"
2619                                    x-transition:enter-start="partner-showcase-card-enter"
2620                                    x-transition:enter-end="partner-showcase-card-visible"
2621                                    x-transition:leave="partner-showcase-card-transition"
2622                                    x-transition:leave-start="partner-showcase-card-visible"
2623                                    x-transition:leave-end="partner-showcase-card-leave"
2624                                    :class="{ 'z-10': logoIndex(2) === 1 }"
2625                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2626                                     style="display: none;"                                 >
2627                                                                            <img src="https://media.animou-app.com/partners/20/logo/958/8be4f55e-c491-4cef-936a-00e558349c8b.jpg" alt="Alma Défense Animale" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2628                                                                                                        </div>
2629                                                                                            <div
2630                                                                        x-show="logoIndex(2) === 2"
2631                                    x-transition:enter="partner-showcase-card-transition"
2632                                    x-transition:enter-start="partner-showcase-card-enter"
2633                                    x-transition:enter-end="partner-showcase-card-visible"
2634                                    x-transition:leave="partner-showcase-card-transition"
2635                                    x-transition:leave-start="partner-showcase-card-visible"
2636                                    x-transition:leave-end="partner-showcase-card-leave"
2637                                    :class="{ 'z-10': logoIndex(2) === 2 }"
2638                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2639                                                                    >
2640                                                                            <img src="https://media.animou-app.com/partners/12/logo/950/a1e3833c-27b1-4159-90a7-76635
264056795bd.jpg" alt="Chat Bonheur" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2641                                                                                                        </div>
2642                                                                                            <div
2643                                                                        x-show="logoIndex(2) === 3"
2644                                    x-transition:enter="partner-showcase-card-transition"
2645                                    x-transition:enter-start="partner-showcase-card-enter"
2646                                    x-transition:enter-end="partner-showcase-card-visible"
2647                                    x-transition:leave="partner-showcase-card-transition"
2648                                    x-transition:leave-start="partner-showcase-card-visible"
2649                                    x-transition:leave-end="partner-showcase-card-leave"
2650                                    :class="{ 'z-10': logoIndex(2) === 3 }"
2651                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2652                                     style="display: none;"                                 >
2653                                                                            <img src="https://media.animou-app.com/partners/19/logo/957/64068d17-3c34-45a2-8e82-d880ee20328d.png" alt="L&#039;école du chat" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2654                                                                                                        </div>
2655                                                                                            <div
2656                                                                        x-show="logoIndex(2) === 4"
2657                                    x-transition:enter="partner-showcase-card-transition"
2658                                    x-transition:enter-start="partner-showcase-card-enter"
2659                                    x-transition:enter-end="partner-showcase-card-visible"
2660                                    x-transition:leave="partner-showcase-card-transition"
2661                                    x-transition:leave-start="partner-showcase-card-visible"
2662                                    x-transition:leave-end="partner-showcase-card-leave"
2663                                    :class="{ 'z-10': logoIndex(2) === 4 }"
2664                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2665                                     style="display: none;"                                 >
2666                                                                            <img src="https://media.animou-app.com/partners/17/logo/955/007e4408-37d6-48c2-9092-2fe755b31afc.png" alt="La Garenne de Maya" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2667                                                                                                        </div>
2668                                                                                            <a
2669                                     href="https://muzon.fr" target="_blank" rel="noopener noreferrer" data-track="partner-website" data-partner-name="Muzon"                                     x-show="logoIndex(2) === 5"
2670                                    x-transition:enter="partner-showcase-card-transition"
2671                                    x-transition:enter-start="partner-showcase-card-enter"
2672                                    x-transition:enter-end="partner-showcase-card-visible"
2673                                    x-transition:leave="partner-showcase-card-transition"
2674                                    x-transition:leave-start="partner-showcase-card-visible"
2675                                    x-transition:leave-end="partner-showcase-card-leave"
2676                                    :class="{ 'z-10': logoIndex(2) === 5 }"
2677                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2678                                     style="display: none;"                                 >
2679                                                                            <img src="https://media.animou-app.com/partners/4/logo/14
267906/8667929a-aacf-4fdc-ab99-dfcdbb5a7783.jpg" alt="Muzon" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2680                                                                                                                <p class="m-0 text-center text-[14px] leading-[1.4] text-dark-700">Concept store d&#039;accessoires et d&#039;alimentation pour chiens et chats.</p>
2681                                                                    </a>
2682                                                                                            <a
2683                                     href="https://nuggetshop.fr" target="_blank" rel="noopener noreferrer" data-track="partner-website" data-partner-name="Nugget"                                     x-show="logoIndex(2) === 6"
2684                                    x-transition:enter="partner-showcase-card-transition"
2685                                    x-transition:enter-start="partner-showcase-card-enter"
2686                                    x-transition:enter-end="partner-showcase-card-visible"
2687                                    x-transition:leave="partner-showcase-card-transition"
2688                                    x-transition:leave-start="partner-showcase-card-visible"
2689                                    x-transition:leave-end="partner-showcase-card-leave"
2690                                    :class="{ 'z-10': logoIndex(2) === 6 }"
2691                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2692                                     style="display: none;"                                 >
2693                                                                            <img src="https://media.animou-app.com/partners/3/logo/55/01KWXZZD0N8D9QVE2DDYKQT9CT.png" alt="Nugget" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2694                                                                                                                <p class="m-0 text-center text-[14px] leading-[1.4] text-dark-700">Concept store bordelais d&#039;accessoires, soins et café pour chiens et chats.</p>
2695                                                                    </a>
2696                                                                                            <div
2697                                                                        x-show="logoIndex(2) === 7"
2698                                    x-transition:enter="partner-showcase-card-transition"
2699                                    x-transition:enter-start="partner-showcase-card-enter"
2700                                    x-transition:enter-end="partner-showcase-card-visible"
2701                                    x-transition:leave="partner-showcase-card-transition"
2702                                    x-transition:leave-start="partner-showcase-card-visible"
2703                                    x-transition:leave-end="partner-showcase-card-leave"
2704                                    :class="{ 'z-10': logoIndex(2) === 7 }"
2705                                    class="partner-showcase-card-face absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-[20px] border border-transparent bg-blue-10 px-10 py-9 no-underline hover:border-purple-100 hover:bg-purple-50/40"
2706                                     style="display: none;"                                 >
2707                                                                            <img src="https://media.animou-app.com/partners/14/logo/952/efaaeae4-9004-47c8-84c8-59a3d647404e.png" alt="Sowly" width="120" height="48" loading="lazy" decoding="async" class="h-[48px] w-auto max-w-[70%] object-contain" />
2708                                                                                                        </div>
2709                                                    </div>
2710                                                                                                        <div class="partner-showcase-intro relative min-h-[220px] overflow-hidden lg:min-h-0 lg:flex-1" style="animation-delay: 540ms;">
2711                                                                                            <figure
2712                                    x-show="quoteIndex(1) === 0"
2713                                    x-transition:enter="partner-showcase-card-transition"
2714                                    x-transition:enter-start="partner-showcase-card-enter"
2715                                    x-transition:enter-end="partner-showcase-card-visible"
2716                                    x-transition:leave="partner-showcase-card-transition"
2717                                    x-transition:leave-start="partner-showcase-card-visible"
2718                                    x-transition:leave-end="partner-showcase-card-leave"
2719                                    :class="{ 'z-10': quoteIndex(1) === 0 }"
2720                                    class="partner-showcase-card-face absolute inset-0 m-0 rounded-[20px] border border-transparent bg-blue-10 p-6 hover:border-purple-100 hover:bg-purple-50/40"
2721                                     style="display: none;"                                 >
2722                                    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" class="size-8 text-purple-400">
2723                                        <path fill="currentColor" d="M18.6893 28V18.1453C18.6893 10.54 23.664 5.38533 30.6667 4L31.9933 6.868C28.7507 8.09067 26.6667 11.7187 26.6667 14.6667H32V28H18.6893ZM0 28V18.1453C0 10.54 4.99733 5.38533 12 4L13.328 6.868C10.084 8.09067 8 11.7187 8 14.6667H13.3107V28H0Z"/>
2724                                    </svg>
2725                                    <blockquote class="m-0 mt-4 border-0 p-0">
2726                                        <p class="m-0 line-clamp-4 max-w-[225px] font-helvetica-now-display text-[17px] leading-[1.4] text-dark-850">Animou fait partie de ces applications qui ont su allier utilité et amour des animaux, et ça ne s&#039;improvise pas. Un partenariat naturel pour Caats, parce que quand les valeurs se rejoignent à ce point, s&#039;engager ensemble ne se discute même pas.</p>
2727                                    </blockquote>
2728                                    <figcaption class="mt-3 text-[12px] leading-[1.4] text-dark-700">Caats</figcaption>
2729                                                                            <img src="https://media.animou-app.com/partners/9/logo/17/logo.png" alt="" width="90" height="72" aria-hidden="true" loading="lazy" decoding="async" class="absolute bottom-3 right-3 h-[72px] w-auto max-w-[90px] object-contain" />
2730                                                                                                                
2731                                        <a href="https://caats.co" target="_blank" rel="noopener noreferrer" data-track="partner-website" data-partner-name="Caats" aria-label="Caats" class="absolute inset-0 z-10"></a>
2732                                                                    </figure>
2733                                                                                            <figure
2734                                    x-show="quoteIndex(1) === 1"
2735                                    x-transition:enter="partner-showcase-card-transition"
2736                                    x-transition:enter-start="partner-showcase-card-enter"
2737                                    x-transition:enter-end="partner-showcase-card-visible"
2738                                    x-transition:leave="partner-showcase-card-transition"
2739                                    x-transition:leave-start="partner-showcase-card-visible"
2740                                    x-transition:leave-end="partner-showcase-card-leave"
2741                                    :class="{ 'z-10': quoteIndex(1) === 1 }"
2742                                    class="partner-showcase-card-face absolute inset-0 m-0 rounded-[20px] border border-transparent bg-blue-10 p-6 hover:border-purple-100 hover:bg-purple-50/40"
2743                                                                    >
2744                                    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" class="size-8 text-purple-400">
2745                                        <path fill="currentColor" d="M18.6893 28V18.1453C18.6893 10.54 23.664 5.38533 30.6667 4L31.9933 6.868C28.7507 8.09067 26.6667 11.7187 26.6667 14.6667H32V28H18.6893ZM0 28V18.1453C0 10.54 4.99733 5.38533 12 4L13.328 6.868C10.084 8.09067 8 11.7187 8 14.6667H13.3107V28H0Z"/>
2746                                    </svg>
2747                                    <blockquote class="m-0 mt-4 border-0 p-0">
2748                                        <p class="m-0 line-clamp-4 max-w-[225px] font-helvetica-now-display text-[17px] leading-[1.4] text-dark-850">Invoxia est fière d&#039;être partenaire de ce projet. Les inscrits à la plateforme bénéficient d&#039;une offre exclusive sur le Biotracker Invoxia.</p>
2749                                    </blockquote>
2750                                    <figcaption class="mt-3 text-[12px] leading-[1.4] text-dark-700">Invoxia</figcaption>
2751                                                                            <img src="https://media.animou-app.com/partners/5/logo/9/logo.png" alt="" width="90" height="72" aria-hidden="true" loading="lazy" decoding="async" class="absolute bottom-3 right-3 h-[72px] w-auto max-w-[90px] object-contain" />
2752                                                                                                                
2753                                        <a href="https://c3po.link/Q53hhqfbkq" target="_blank" rel="noopener noreferrer sponsored" data-track="partner-website" data-partner-name="Invoxia" aria-label="Invoxia" class="absolute inset-0 z-10"></a>
2754                                                                    </figure>
2755                                                                                            <figure
2756                                    x-show="quoteIndex(1) === 2"
2757                                    x-transition:enter="partner-showcase-card-transition"
2758                                    x-transition:enter-start="partner-showcase-card-enter"
2759                                    x-transition:enter-end="partner-showcase-card-visible"
2760                                    x-transition:leave="partner-showcase-card-transition"
2761                                    x-transition:leave-start="partner-showcase-card-visible"
2762                                    x-transition:leave-end="partner-showcase-card-leave"
2763                                    :class="{ 'z-10': quoteIndex(1) === 2 }"
2764                                    class="partner-showcase-card-face absolute inset-0 m-0 rounded-[20px] border border-transparent bg-blue-10 p-6 hover:border-purple-100 hover:bg-purple-50/40"
2765                                     style="display: none;"                                 >
2766                                    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" class="size-8 text-purple-400">
2767                                        <path fill="currentColor" d="M18.6893 28V18.1453C18.6893 10.54 23.664 5.38533 30.6667 4L31.9933 6.868C28.7507 8.09067 26.6667 11.7187 26.6667 14.6667H32V28H18.6893ZM0 28V18.1453C0 10.54 4.99733 5.38533 12 4L13.328 6.868C10.084 8.09067 8 11.7187 8 14.6667H13.3107V28H0Z"/>
2768                                    </svg>
2769                                    <blockquote class="m-0 mt-4 border-0 p-0">
2770                                        <p class="m-0 line-clamp-4 max-w-[225px] font-helvetica-now-display text-[17px] leading-[1.4] text-dark-850">Un animal qui se perd, c&#039;est toute une famille qui s&#039;inquiète. Tout ce qui aide à le retrouver plus vite compte vraiment, et c&#039;est précisément ce que permet Animou. Chez Franklin, prendre soin de nos compagnons ne s&#039;arrête pas à leur gamelle : nous sommes fiers de compter parmi ses premiers partenaires.</p>
2771                                    </blockquote>
2772                                    <figcaption class="mt-3 text-[12px] leading-[1.4] text-dark-700">Franklin Pet Food</figcaption>
2773                                                                            <img src="https://media.animou-app.com/partners/7/logo/13/logo.png" alt="" width="90" height="72" aria-hidden="true" loading="lazy" decoding="async" class="absolute bottom-3 right-3 h-[72px] w-auto max-w-[90px] object-contain" />
2774                                                                                                                
2775                                        <a href="https://c3po.link/QhwjcrC4Cy" target="_blank" rel="noopener noreferrer" data-track="partner-website" data-partner-name="Franklin Pet Food" aria-label="Franklin Pet Food" class="absolute inset-0 z-10"></a>
2776                                                                    </figure>
2777                                                                                            <figure
2778                                    x-show="quoteIndex(1) === 3"
2779                                    x-transition:enter="partner-showcase-card-transition"
2780                                    x-transition:enter-start="partner-showcase-card-enter"
2781                                    x-transition:enter-end="partner-showcase-card-visible"
2782                                    x-transition:leave="partner-showcase-card-transition"
2783                                    x-transition:leave-start="partner-showcase-card-visible"
2784                                    x-transition:leave-end="partner-showcase-card-leave"
2785                                    :class="{ 'z-10': quoteIndex(1) === 3 }"
2786                                    class="partner-showcase-card-face absolute inset-0 m-0 rounded-[20px] border border-transparent bg-blue-10 p-6 hover:border-purple-100 hover:bg-purple-50/40"
2787                                     style="display: none;"                                 >
2788                                    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" class="size-8 text-purple-400">
2789                                        <path fill="currentColor" d="M18.6893 28V18.1453C18.6893 10.54 23.664 5.38533 30.6667 4L31.9933 6.868C28.7507 8.09067 26.6667 11.7187 26.6667 14.6667H32V28H18.6893ZM0 28V18.1453C0 10.54 4.99733 5.38533 12 4L13.328 6.868C10.084 8.09067 8 11.7187 8 14.6667H13.3107V28H0Z"/>
2790                                    </svg>
2791                                    <blockquote class="m-0 mt-4 border-0 p-0">
2792                                        <p class="m-0 line-clamp-4 max-w-[225px] font-helvetica-now-display text-[17px] leading-[1.4] text-dark-850">Nous avons choisi de soutenir le développement de cette belle initiative solidaire, parce qu&#039;ensemble, associations, refuges, bénévoles et citoyens peuvent faire la différence pour les animaux perdus.</p>
2793                                    </blockquote>
2794                                    <figcaption class="mt-3 text-[12px] leading-[1.4] text-dark-700">La Ligue des Animaux</figcaption>
2795                                                                            <img src="https://media.animou-app.com/partners/10/logo/945/b39f0b9a-da25-442a-8458-95
2795538808cced.png" alt="" width="90" height="72" aria-hidden="true" loading="lazy" decoding="async" class="absolute bottom-3 right-3 h-[72px] w-auto max-w-[90px] object-contain" />
2796                                                                                                                
2797                                        <a href="https://laliguedesanimaux.fr/" target="_blank" rel="noopener noreferrer" data-track="partner-website" data-partner-name="La Ligue des Animaux" aria-label="La Ligue des Animaux" class="absolute inset-0 z-10"></a>
2798                                                                    </figure>
2799                                                                                            <figure
2800                                    x-show="quoteIndex(1) === 4"
2801                                    x-transition:enter="partner-showcase-card-transition"
2802                                    x-transition:enter-start="partner-showcase-card-enter"
2803                                    x-transition:enter-end="partner-showcase-card-visible"
2804                                    x-transition:leave="partner-showcase-card-transition"
2805                                    x-transition:leave-start="partner-showcase-card-visible"
2806                                    x-transition:leave-end="partner-showcase-card-leave"
2807                                    :class="{ 'z-10': quoteIndex(1) === 4 }"
2808                                    class="partner-showcase-card-face absolute inset-0 m-0 rounded-[20px] border border-transparent bg-blue-10 p-6 hover:border-purple-100 hover:bg-purple-50/40"
2809                                     style="display: none;"                                 >
2810                                    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" class="size-8 text-purple-400">
2811                                        <path fill="currentColor" d="M18.6893 28V18.1453C18.6893 10.54 23.664 5.38533 30.6667 4L31.9933 6.868C28.7507 8.09067 26.6667 11.7187 26.6667 14.6667H32V28H18.6893ZM0 28V18.1453C0 10.54 4.99733 5.38533 12 4L13.328 6.868C10.084 8.09067 8 11.7187 8 14.6667H13.3107V28H0Z"/>
2812                                    </svg>
2813                                    <blockquote class="m-0 mt-4 border-0 p-0">
2814                                        <p class="m-0 line-clamp-4 max-w-[225px] font-helvetica-now-display text-[17px] leading-[1.4] text-dark-850">Tout ce qui permet de diffuser plus rapidement une information et de mobiliser davantage de personnes me semble intéressant. Et c&#039;est précisément ce que cherche à faire Animou.</p>
2815                                    </blockquote>
2816                                    <figcaption class="mt-3 text-[12px] leading-[1.4] text-dark-700">Le guide du chat</figcaption>
2817                                                                            <img src="https://media.animou-app.com/partners/11/logo/946/e5deb7dd-9354-478f-9dbf-3a9b9cd0df02.jpg" alt="" width="90" height="72" aria-hidden="true" loading="lazy" decoding="async" class="absolute bottom-3 right-3 h-[72px] w-auto max-w-[90px] object-contain" />
2818                                                                                                                
2819                                        <a href="https://leguideduchat.fr/" target="_blank" rel="noopener noreferrer" data-track="partner-website" data-partner-name="Le guide du chat" aria-label="Le guide du chat" class="absolute inset-0 z-10"></a>
2820                                                                    </figure>
2821                                                    </div>
2822                                                </div>
2823            </div>
2824
2825    <div class="hidden lg:block pointer-events-none pt-[70px]">
2826    <div x-data="sectionNav({ inheritPrevious: true })"
2827     class="transition-opacity duration-300"
2828     :style="'opacity: ' + opacity"
2829     x-cloak>
2830    <div class="w-[425px]">
2831        <div class="flex items-center justify-end gap-3 font-helvetica-now-display text-lg leading-[1.4] mb-[20px] text-purple-500">
2832            <span class="tabular-nums" x-text="number"></span>
2833            <span x-text="label"></span>
2834        </div>
2835        <div class="relative">
2836            <div class="h-px w-full rounded-[1px]"
2837                 style="background: linear-gradient(to right, rgba(127,121,209,0) 0%, #7F79D1 100%);"></div>
2838            <div class="absolute top-1/2 -translate-y-1/2 transition-[left] duration-300 ease-out will-change-[left,opacity]"
2839                 :style="'left: ' + arrowLeft + 'px'">
2840                <div class="flex items-center justify-center h-[33px] px-4 rounded-full bg-purple-10 text-purple-500">
2841                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
2842                        <path d="M8.91 19.92L15.43 13.4C16.2 12.63 16.2 11.37 15.43 10.6L8.91 4.08"
2843                              stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"
2844                              stroke-linecap="round" stroke-linejoin="round"/>
2845                    </svg>
2846                </div>
2847            </div>
2848        </div>
2849    </div>
2850</div>
2851</div>
2852        </div>
2853    
2854
2855</section>
2856<section
2857     id="commitment"     class="page-section"
2858            data-viewport-motion
2859        x-data="{ viewportMotionActive: false }"
2860        x-intersect:enter.margin.-10%="viewportMotionActive = true"
2861        x-intersect:leave.margin.-10%="viewportMotionActive = false"
2862        :class="{
2863            'viewport-motion-active': viewportMotionActive,
2864            'viewport-motion-pending': ! viewportMotionActive,
2865        }"
2866         data-section-label="Notre engagement"      aria-labelledby="heading-commitment"
2867    >
2868            <div class="page-wrapper">
2869            <div data-reveal class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between lg:gap-0">
2870        <h2
2871                id="heading-commitment"
2872                class="text-heading-section text-dark-850 lg:w-[440px] lg:shrink-0"
2873        >
2874            <span>La solidarité</span>
2875            <br aria-hidden="true">
2876            <span>ne se vend pas</span>
2877        </h2>
2878        <p class="text-body text-dark-700 lg:w-[273px] lg:shrink-0 lg:py-2">
2879            Parce que la détresse de perdre un animal ne devrait jamais devenir une opportunité commerciale.
2880        </p>
2881    </div>
2882
2883    
2884    <div data-reveal-group class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6 mt-10 lg:mt-16">
2885                                    
2886                <div class="relative h-[385px] lg:h-[723px] bg-blue-10 rounded-2xl lg:rounded-3xl overflow-hidden" x-data="{ shown: false }" x-intersect.once="shown = true">
2887                    
2888                    <div class="flex flex-col gap-2 lg:gap-3 items-start absolute top-4 left-4 lg:top-10 lg:left-10 right-4 lg:right-10 z-10">
2889                        <p class="font-outfit font-normal text-xl lg:text-2xl leading-[1.4] tracking-[-0.2px] lg:tracking-[-0.48px] text-dark-850 uppercase">
2890                            Animou est et restera <span class="font-semibold text-purple-400">100% gratuit</span>
2891                        </p>
2892                        <p class="text-subtitle text-dark-700">
2893                            Pas de frais cachés. Pas de publicité intrusive.
2894                        </p>
2895                    </div>
2896
2897                    
2898                    <div class="absolute bottom-4 lg:bottom-[100px] left-1/2 -translate-x-1/2 w-[326px] lg:w-[549px] h-auto pointer-events-none transition-all duration-1000 ease-out"
2899                         :class="shown ? 'translate-y-0 opacity-100 rotate-0' : 'translate-y-16 opacity-0 rotate-[4deg]'">
2900                        <svg width="100%" viewBox="0 0 549 395" fill="none" xmlns="http://www.w3.org/2000/svg">
2901                            <style>
2902                                @keyframes float-badge {
2903                                    0%, 100% { transform: translate3d(0, 0, 0); }
2904                                    50% { transform: translate3d(0, calc(-8 / 223 * 100%), 0); }
2905                                }
2906                                .anim-badge {
2907                                    animation: float-badge 3s ease-in-out infinite;
2908                                    will-change: transform;
2909                                }
2910
2911                                @keyframes bell-ring {
2912                                    0%, 100% { transform: rotate(0deg); }
2913                                    20% { transform: rotate(15deg); }
2914                                    40% { transform: rotate(-10deg); }
2915                                    60% { transform: rotate(5deg); }
2916                                    80% { transform: rotate(-5deg); }
2917                                }
2918                                .anim-bell {
2919                                    animation: bell-ring 2.5s ease-in-out infinite;
2920                                    transform-box: fill-box;
2921                                    transform-origin: top center;
2922                                    will-change: transform;
2923                                }
2924
2925                                @keyframes refresh-spin {
2926                                    0%, 100% { transform: rotate(0deg); }
2927                                    30% { transform: rotate(45deg); }
2928                                    70% { transform: rotate(-45deg); }
2929                                }
2930                                .anim-refresh {
2931                                    animation: refresh-spin 3.5s ease-in-out infinite;
2932                                    transform-box: fill-box;
2933                                    transform-origin: center;
2934                                    will-change: transform;
2935                                }
2936
2937                                @keyframes heart-beat {
2938                                    0%, 100% { transform: scale(1); }
2939                                    15% { transform: scale(1.15); }
2940                                    30% { transform: scale(1); }
2941                                    45% { transform: scale(1.15); }
2942                                    60% { transform: scale(1); }
2943                                }
2944                                .anim-heart {
2945                                    animation: heart-beat 2s ease-in-out infinite;
2946                                    transform-box: fill-box;
2947                                    transform-origin: center;
2948                                    will-change: transform;
2949                                }
2950
2951                                @keyframes pin-jump {
2952                                    0%, 100% { transform: translateY(0); }
2953                                    40% { transform: translateY(-15px) scaleY(1.05); }
2954                                    50% { transform: translateY(0) scaleY(0.95); }
2955                                    60% { transform: translateY(-7px); }
2956                                    70% { transform: translateY(0); }
2957                                }
2958                                .anim-pin {
2959                                    animation: pin-jump 2.5s ease-in-out infinite;
2960                                    transform-box: fill-box;
2961                                    transform-origin: bottom center;
2962                                    will-change: transform;
2963                                }
2964
2965                                @keyframes paw-wave {
2966                                    0%, 100% { transform: rotate(0deg); }
2967                                    25% { transform: rotate(15deg); }
2968                                    75% { transform: rotate(-15deg); }
2969                                }
2970                                .anim-paw {
2971                                    animation: paw-wave 3s ease-in-out infinite;
2972                                    transform-box: fill-box;
2973                                    transform-origin: bottom center;
2974                                    will-change: transform;
2975                                }
2976
2977                                @keyframes icon-pop {
2978                                    0%, 100% { transform: scale(1); }
2979                                    50% { transform: scale(1.1) rotate(5deg); }
2980                                }
2981                                .anim-pop {
2982                                    animation: icon-pop 3.5s ease-in-out infinite;
2983                                    transform-box: fill-box;
2984                                    transform-origin: center;
2985                                    will-change: transform;
2986                                }
2987
2988                                @media (prefers-reduced-motion: reduce) {
2989                                    .anim-badge, .anim-bell, .anim-refresh,
2990                                    .anim-heart, .anim-pin, .anim-paw, .anim-pop {
2991                                        animation: none !important;
2992                                    }
2993                                }
2994                            </style>
2995                            <g clip-path="url(#clip0_3300_924)">
2996                                <rect x="40" y="72" width="153.667" height="139.5" rx="16" fill="white"/>
2997                                <rect x="355.333" y="72" width="153.667" height="139.5" rx="16" fill="white"/>
2998                                <rect x="40" y="215.5" width="153.667" height="139.5" rx="16" fill="white"/>
2999                                <rect x="197.667" y="215.5" width="153.667" height="139.5" rx="16" fill="white"/>
3000                                <rect x="355.333" y="215.5" width="153.667" height="139.5" rx="16" fill="white"/>
3001
3002                                <!-- TOP LEFT CLUSTER -->
3003                                <g class="anim-paw">
3004                                    <path d="M99.5543 158.292C99.0343 164.553 103.758 169.667 110.041 169.667H120.419C127.483 169.667 132.336 163.968 131.166 156.992C129.931 149.668 122.868 143.667 115.436 143.667C107.376 143.667 100.226 150.253 99.5543 158.292Z" stroke="#E8E8FF" stroke-width="3.29114" stroke-linecap="round" stroke-linejoin="round"/>
3005                                    <path d="M112.685 138.25C115.676 138.25 118.101 135.825 118.101 132.834C118.101 129.842 115.676 127.417 112.685 127.417C109.693 127.417 107.268 129.842 107.268 132.834C107.268 135.825 109.693 138.25 112.685 138.25Z" stroke="#E8E8FF" stroke-width="3.29114" stroke-linecap="round" stroke-linejoin="round"/>
3006                                    <path d="M127.482 140.85C129.875 140.85 131.816 138.91 131.816 136.517C131.816 134.124 129.875 132.184 127.482 132.184C125.089 132.184 123.149 134.124 123.149 136.517C123.149 138.91 125.089 140.85 127.482 140.85Z" stroke="#E8E8FF" stroke-width="3.29114" stroke-linecap="round" stroke-linejoin="round"/>
3007                                    <path d="M135.5 149.517C137.295 149.517 138.75 148.062 138.75 146.267C138.75 144.472 137.295 143.017 135.5 143.017C133.705 143.017 132.25 144.472 132.25 146.267C132.25 148.062 133.705 149.517 135.5 149.517Z" stroke="#E8E8FF" stroke-width="3.29114" stroke-linecap="round" stroke-linejoin="round"/>
3008                                    <path d="M98.6009 145.183C100.994 145.183 102.934 143.243 102.934 140.85C102.934 138.457 100.994 136.517 98.6009 136.517C96.2077 136.517 94.2676 138.457 94.2676 140.85C94.2676 143.243 96.2077 145.183 98.6009 145.183Z" stroke="#E8E8FF" stroke-width="3.29114" stroke-linecap="round" stroke-linejoin="round"/>
3009                                    <path d="M130.483 162.456C128.5 168.882 119.677 171.521 112.209 169.217C103.982 169.09 97.4749 166.738 101.55 153.529C103.533 147.103 112.212 142.697 119.68 145.002C127.149 147.306 132.466 156.03 130.483 162.456Z" fill="#E8E8FF"/>
3010                                    <circle cx="98.5583" cy="140.897" r="3.29114" transform="rotate(17.1468 98.5583 140.897)" fill="#E8E8FF"/>
3011                                    <circle cx="112.746" cy="132.875" r="4.60759" transform="rotate(17.1468 112.746 132.875)" fill="#E8E8FF"/>
3012                                    <circle cx="127.407" cy="136.708" r="4.60759" transform="rotate(17.1468 127.407 136.708)" fill="#E8E8FF"/>
3013                                    <circle cx="134.485" cy="146.126" r="3.62025" transform="rotate(17.1468 134.485 146.126)" fill="#E8E8FF"/>
3014                                </g>
3015
3016                                <!-- HEART -->
3017                                <path d="M439.316 163.693C439.006 165.195 438.21 166.542 437.06 167.507C435.91 168.473 434.477 169 432.998 169C431.52 169 430.087 168.473 428.937 167.507C427.787 166.542 426.991 165.195 426.681 163.693C430.881 164.166 435.116 164.166 439.316 163.693ZM433 122C436.189 122 439.279 123.148 441.745 125.249C444.211 127.35 445.901 130.275 446.527 133.525L448.527 143.921C448.937 146.05 449.942 148.004 451.418 149.539L452.827 151.003C453.332 151.529 453.693 152.185 453.872 152.905C454.051 153.624 454.042 154.381 453.845 155.095C453.648 155.81 453.27 156.456 452.751 156.968C452.233 157.479 451.592 157.837 450.895 158.004L446.172 159.139C437.505 161.222 428.495 161.222 419.828 159.139L415.105 158.004C414.408 157.837 413.767 157.479 413.249 156.968C412.73 156.456 412.352 155.81 412.155 155.095C411.958 154.381 411.949 153.624 412.128 152.905C412.307 152.185 412.668 151.529 413.173 151.003L414.585 149.536C416.062 148.001 417.068 146.046 417.476 143.918L419.48 133.521C420.106 130.273 421.795 127.35 424.26 125.25C426.724 123.15 429.813 122.001 433 122Z" fill="#E8E8FF" class="anim-bell"/>
3018
3019                                <!-- CALENDAR MASK -->
3020                                <g clip-path="url(#clip1_3300_924)" class="anim-refresh">
3021                                    <mask id="mask0_3300_924" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="93" y="262" width="46" height="46">
3022                                        <path d="M116.083 306.167C127.728 306.167 137.167 296.728 137.167 285.083C137.167 273.439 127.728 264 116.083 264C104.439 264 95 273.439 95 285.083C95 296.728 104.439 306.167 116.083 306.167Z" fill="white" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
3023                                        <path d="M126.142 288.246C124.799 292.522 120.804 295.625 116.083 295.625C111.363 295.625 107.367 292.522 106.024 288.246V294.571M126.142 275.596V281.921C124.799 277.644 120.804 274.542 116.083 274.542C111.363 274.542 107.367 277.644 106.024 281.921" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
3024                                    </mask>
3025                                    <g mask="url(#mask0_3300_924)">
3026                                        <path d="M90.7827 259.783H141.383V310.383H90.7827V259.783Z" fill="#E8E8FF"/>
3027                                    </g>
3028                                </g>
3029
3030                                <!-- REFRESH -->
3031                                <path d="M290.165 289.335C293.394 286.171 296.665 282.38 296.665 277.418C296.665 274.258 295.41 271.227 293.175 268.992C290.94 266.757 287.909 265.501 284.749 265.501C280.935 265.501 278.249 266.585 274.999 269.835C271.749 266.585 269.062 265.501 265.249 265.501C262.088 265.501 259.057 266.757 256.822 268.992C254.588 271.227 253.332 274.258 253.332 277.418C253.332 282.401 256.582 286.193 259.832 289.335L274.999 304.501L290.165 289.335Z" fill="#E8E8FF" stroke="#E8E8FF" stroke-width="4.33333" stroke-linecap="round" stroke-linejoin="round" class="anim-heart"/>
3032
3033                                <!-- LOCATION -->
3034                                <path d="M424.073 304.44C425.335 305.481 426.652 306.433 428 307.363C429.351 306.446 430.661 305.471 431.927 304.44C434.038 302.707 436.024 300.828 437.871 298.817C442.129 294.161 446.75 287.411 446.75 279.833C446.75 277.371 446.265 274.933 445.323 272.658C444.38 270.383 442.999 268.316 441.258 266.575C439.517 264.834 437.45 263.453 435.175 262.511C432.9 261.568 430.462 261.083 428 261.083C425.538 261.083 423.1 261.568 420.825 262.511C418.55 263.453 416.483 264.834 414.742 266.575C413.001 268.316 411.62 270.383 410.677 272.658C409.735 274.933 409.25 277.371 409.25 279.833C409.25 287.411 413.871 294.158 418.129 298.817C419.976 300.829 421.962 302.706 424.073 304.44ZM428 286.604C426.204 286.604 424.482 285.891 423.212 284.621C421.943 283.351 421.229 281.629 421.229 279.833C421.229 278.038 421.943 276.316 423.212 275.046C424.482 273.776 426.204 273.063 428 273.063C429.796 273.063 431.518 273.776 432.788 275.046C434.057 276.316 434.771 278.038 434.771 279.833C434.771 281.629 434.057 283.351 432.788 284.621C431.518 285.891 429.796 286.604 428 286.604Z" fill="#E8E8FF" class="anim-pin"/>
3035
3036                                <rect opacity="0.6" x="-118" y="216" width="153.667" height="139.5" rx="16" fill="white"/>
3037                                <rect opacity="0.6" x="-118" y="360" width="153.667" height="139.5" rx="16" fill="white"/>
3038                                <rect opacity="0.6" x="40" y="360" width="153.667" height="139.5" rx="16" fill="white"/>
3039                                <rect opacity="0.6" x="197" y="360" width="153.667" height="139.5" rx="16" fill="white"/>
3040                                <rect opacity="0.6" x="355" y="360" width="153.667" height="139.5" rx="16" fill="white"/>
3041                                <rect opacity="0.6" x="513" y="360" width="153.667" height="139.5" rx="16" fill="white"/>
3042                                <rect opacity="0.6" x="-118" y="72" width="153.667" height="139.5" rx="16" fill="white"/>
3043                                <rect opacity="0.6" x="513" y="216" width="153.667" height="139.5" rx="16" fill="white"/>
3044                                <rect opacity="0.6" x="513" y="72" width="153.667" height="139.5" rx="16" fill="white"/>
3045                            </g>
3046                            <defs>
3047                                <clipPath id="clip0_3300_924">
3048                                    <path d="M0 0H549V371C549 384.255 538.255 395 525 395H24C10.7452 395 0 384.255 0 371V0Z" fill="white"/>
3049                                </clipPath>
3050                                <clipPath id="clip1_3300_924">
3051                                    <rect width="46" height="46" fill="white" transform="translate(93 262)"/>
3052                                </clipPath>
3053                            </defs>
3054                        </svg>
3055                        
3056                        <div class="anim-badge absolute top-0 left-[calc(163/549*100%)] -mt-[calc(4/549*100%)] w-[calc(223/549*100%)] aspect-square">
3057                            <svg class="block size-full" viewBox="163 -4 223 223" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
3058                                <g filter="url(#filter0_d_3300_924)">
3059                                    <rect x="178" y="8" width="193" height="193" rx="27.0233" fill="#6960CD"/>
3060                                    <g filter="url(#filter1_d_3300_924)">
3061                                        <path d="M211.434 123.662L226.211 70.676C227.237 66.9971 230.375 64.2958 234.165 63.8279L287.35 57.263C291.411 56.7617 295.414 58.5618 297.735 61.9328L309.021 78.3312C309.691 79.3046 310.743 79.9474 311.915 80.0993L329.367 82.3621C336.064 83.2305 339.915 90.4331 336.919 96.4852L325.985 118.571C325.379 119.795 324.254 120.682 322.921 120.984L296.548 126.974C290.163 128.424 286.201 134.82 287.746 141.182L289.49 148.362C290.647 153.126 287.038 157.717 282.135 157.717L241.869 157.717C237.349 157.717 236.633 151.224 241.044 150.239L266.712 144.507C271.871 143.355 275.475 138.69 275.288 133.407L274.078 99.3117C273.908 94.5076 277.234 90.2837 281.944 89.3223L290.439 87.5884C294.226 86.8154 295.954 82.391 293.693 79.2556C292.507 77.6114 290.502 76.7668 288.497 77.0665L273.021 79.3799C268.199 80.1006 264.559 84.127 264.325 88.9965L262.769 121.49C262.534 126.4 258.836 130.447 253.966 131.122L221.847 135.575C215.099 136.511 209.605 130.224 211.434 123.662Z" fill="white"/>
3062                                    </g>
3063                                </g>
3064                                <defs>
3065                                    <filter id="filter0_d_3300_924" x="163" y="-4" width="223" height="223" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
3066                                        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
3067                                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
3068                                        <feMorphology radius="5" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_3300_924"/>
3069                                        <feOffset dy="3"/>
3070                                        <feGaussianBlur stdDeviation="5"/>
3071                                        <feComposite in2="hardAlpha" operator="out"/>
3072                                        <feColorMatrix type="matrix" values="0 0 0 0 0.109802 0 0 0 0 0.0932559 0 0 0 0 0.323392 0 0 0 0.25 0"/>
3073                                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3300_924"/>
3074                                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3300_924" result="shape"/>
3075                                    </filter>
3076                                    <filter id="filter1_d_3300_924" x="197.532" y="28.5662" width="153.937" height="157.141" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
3077                                        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
3078                                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
3079                                        <feOffset dy="2.63642"/>
3080                                        <feGaussianBlur stdDeviation="2.40573"/>
3081                                        <feComposite in2="hardAlpha" operator="out"/>
3082                                        <feColorMatrix type="matrix" values="0 0 0 0 0.249522 0 0 0 0 0.207827 0 0 0 0 0.825665 0 0 0 1 0"/>
3083                                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3300_924"/>
3084                                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3300_924" result="shape"/>
3085                                    </filter>
3086                                </defs>
3087                            </svg>
3088                        </div>
3089                    </div>
3090                </div>
3091                                                
3092                <div class="relative flex flex-col justify-between h-[385px] lg:h-[723px] rounded-2xl lg:rounded-3xl overflow-hidden bg-gradient-to-b from-purple-100 to-white-0 p-4 lg:p-10">
3093                    
3094                                            <img
3095                            src="https://animou-app.com/themes/animou/img/landing/commitment/paper.webp"
3096                            alt=""
3097                            loading="lazy"
3098                            decoding="async"
3099                            class="absolute inset-0 w-full h-full object-cover opacity-10 pointer-events-none mix-blend-multiply"
3100                            aria-hidden="true"
3101                        >
3102                    
3103                    
3104                    <div class="relative z-10">
3105                        <p class="font-helvetica text-[22px] lg:text-[32px] font-normal leading-[1.4] text-purple-500">
3106                            Des citoyens, des refuges et des bénévoles unis pour qu&#039;aucun animal ne passe inaperçu.
3107                        </p>
3108                    </div>
3109
3110                    
3111                    <div class="relative z-10 w-full lg:text-center pb-12 lg:pb-4">
3112                        <p class="font-caveat font-normal text-[28px] lg:text-[40px] leading-none lg:leading-[55px] text-purple-400 min-h-[55px]"
3113                           x-data="{ text: '', fullText: 'L\&#039;équipe Animou - Pour l\&#039;amour des animaux.', i: 0, type() { if(this.i < this.fullText.length) { this.text += this.fullText.charAt(this.i); this.i++; setTimeout(() => this.type(), 40); } } }"
3114                           x-intersect.once="type()"
3115                           x-text="text"
3116                        ></p>
3117                    </div>
3118                </div>
3119                        </div>
3120
3121    <div class="page-wrapper hidden lg:block pointer-events-none pt-[70px]">
3122    <div x-data="sectionNav({ inheritPrevious: false })"
3123     class="transition-opacity duration-300"
3124     :style="'opacity: ' + opacity"
3125     x-cloak>
3126    <div class="w-[425px]">
3127        <div class="flex items-center justify-end gap-3 font-helvetica-now-display text-lg leading-[1.4] mb-[20px] text-purple-500">
3128            <span class="tabular-nums" x-text="number"></span>
3129            <span x-text="label"></span>
3130        </div>
3131        <div class="relative">
3132            <div class="h-px w-full rounded-[1px]"
3133                 style="background: linear-gradient(to right, rgba(127,121,209,0) 0%, #7F79D1 100%);"></div>
3134            <div class="absolute top-1/2 -translate-y-1/2 transition-[left] duration-300 ease-out will-change-[left,opacity]"
3135                 :style="'left: ' + arrowLeft + 'px'">
3136                <div class="flex items-center justify-center h-[33px] px-4 rounded-full bg-purple-10 text-purple-500">
3137                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
3138                        <path d="M8.91 19.92L15.43 13.4C16.2 12.63 16.2 11.37 15.43 10.6L8.91 4.08"
3139                              stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"
3140                              stroke-linecap="round" stroke-linejoin="round"/>
3141                    </svg>
3142                </div>
3143            </div>
3144        </div>
3145    </div>
3146</div>
3147</div>
3148        </div>
3149    
3150
3151</section>
3152<section
3153        class="page-section"
3154         data-section-label="Presse"      aria-labelledby="heading-logos"
3155    >
3156            <div class="page-wrapper">
3157            <div class="flex flex-col items-start lg:items-center gap-4" data-reveal>
3158        
3159        <h2
3160                id="heading-logos"
3161                class="text-heading-section text-dark-850 lg:text-center"
3162        >
3163            Ils parlent
3164            <span class="text-purple-400">d&#039;Animou</span>
3165        </h2>
3166
3167        
3168        <p class="text-subtitle text-gray-500 lg:text-center lg:max-w-[490px]">
3169            Les médias et acteurs animaliers qui ont relayé la mission d&#039;Animou et l&#039;entraide autour des animaux perdus.
3170        </p>
3171    </div>
3172
3173    
3174    <ul class="hidden lg:flex flex-wrap justify-center items-center gap-[var(--grid-gutter)] mt-10 lg:mt-16 list-none m-0 p-0" data-reveal-group>
3175                    <li data-reveal="scale" class="
3176                flex items-center justify-center
3177                w-[201px] h-[121px]
3178                bg-white-0 border border-gray-10 rounded-btn
3179                shadow-[var(--shadow-logos)] overflow-hidden
3180            ">
3181                                                        <img
3182        src="/img/204/presse-ici-gironde-78b1cc6c019a.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=cd31c93721cdd569c00dc37eca182fde"
3183         srcset="/img/204/presse-ici-gironde-78b1cc6c019a.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=e6c455a7fc8511fece954f4ac1d47d98 2x"                  width="120"          height="40"         alt="ici Gironde"
3184        loading="lazy"
3185        decoding="async"
3186        class="max-w-[70%] max-h-[55%] object-contain"
3187    />
3188                                                </li>
3189                    <li data-reveal="scale" class="
3190                flex items-center justify-center
3191                w-[201px] h-[121px]
3192                bg-white-0 border border-gray-10 rounded-btn
3193                shadow-[var(--shadow-logos)] overflow-hidden
3194            ">
3195                                                            <a href="https://www.lessentiel.fr/bordeaux/entreprises/2026-09-02/des-bordelais-creent-une-application-pour-retrouver-les-animaux" target="_blank" rel="noopener noreferrer" data-track="press-link" data-press-name="L&#039;essentiel Bordeaux" class="flex items-center justify-center w-full h-full">
3196                                        <img
3197        src="/img/212/presse-lessentiel-bordeaux-f745e245e4df.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=549faeac4b43a00db18b2d8c05a27905"
3198         srcset="/img/212/presse-lessentiel-bordeaux-f745e245e4df.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=1c790012ce6595696f49b5c2938d9141 2x"                  width="120"          height="40"         alt="L&#039;essentiel Bordeaux"
3199        loading="lazy"
3200        decoding="async"
3201        class="max-w-[70%] max-h-[55%] object-contain"
3202    />
3203                                            </a>
3204                                                </li>
3205                    <li data-reveal="scale" class="
3206                flex items-center justify-center
3207                w-[201px] h-[121px]
3208                bg-white-0 border border-gray-10 rounded-btn
3209                shadow-[var(--shadow-logos)] overflow-hidden
3210            ">
3211                                                            <a href="https://www.lebonbon.fr/bordeaux/news/2-bordelais-lancent-premiere-application-gratuite-retrouver-animaux-perdus/" target="_blank" rel="noopener noreferrer" data-track="press-link" data-press-name="Le Bonbon" class="flex items-center justify-center w-full h-full">
3212                                        <img
3213        src="/img/205/presse-le-bonbon-252ee121285a.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=163832f116117fb927894293adc68173"
3214         srcset="/img/205/presse-le-bonbon-252ee121285a.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=6d1ba8c18ac7d4686dc9ec49fb45d59f 2x"                  width="120"          height="40"         alt="Le Bonbon"
3215        loading="lazy"
3216        decoding="async"
3217        class="max-w-[70%] max-h-[55%] object-contain"
3218    />
3219                                            </a>
3220                                                </li>
3221                    <li data-reveal="scale" class="
3222                flex items-center justify-center
3223                w-[201px] h-[121px]
3224                bg-white-0 border border-gray-10 rounded-btn
3225                shadow-[var(--shadow-logos)] overflow-hidden
3226            ">
3227                                                            <a href="https://www.bougerabordeaux.com/actu/news/animou-lapplication-bordelaise-qui-veut-revolutionner-la-recherche-danimaux-perdus/" target="_blank" rel="noopener noreferrer" data-track="press-link" data-press-name="Bouger à Bordeaux" class="flex items-center justify-center w-full h-full">
3228                                        <img
3229        src="/img/206/presse-bouger-a-bordeaux-1c11f31c09f4.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=c730aad82a30b8ba3ad3be662aa9da6d"
3230         srcset="/img/206/presse-bouger-a-bordeaux-1c11f31c09f4.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=f2d0cd4ea730a3c8780c086ad4034f84 2x"                  width="120"          height="40"         alt="Bouger à Bordeaux"
3231        loading="lazy"
3232        decoding="async"
3233        class="max-w-[70%] max-h-[55%] object-contain"
3234    />
3235                                            </a>
3236                                                </li>
3237                    <li data-reveal="scale" class="
3238                flex items-center justify-center
3239                w-[201px] h-[121px]
3240                bg-white-0 border border-gray-10 rounded-btn
3241                shadow-[var(--shadow-logos)] overflow-hidden
3242            ">
3243                                                            <a href="https://leguideduchat.fr/comportement-du-chat/animou-app-retrouver-chat-perdu/" target="_blank" rel="noopener noreferrer" data-track="press-link" data-press-name="Le Guide du Chat" class="flex items-center justify-center w-full h-full">
3244                                        <img
3245        src="/img/207/presse-le-guide-du-chat-2a72c2d336bd.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=6fbdddf24c63e2a70ce09fb23feca366"
3246         srcset="/img/207/presse-le-guide-du-chat-2a72c2d336bd.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=3ee3336f84209c88e06c383cbe1abb8f 2x"                  width="120"          height="40"         alt="Le Guide du Chat"
3247        loading="lazy"
3248        decoding="async"
3249        class="max-w-[70%] max-h-[55%] object-contain"
3250    />
3251                                            </a>
3252                                                </li>
3253                    <li data-reveal="scale" class="
3254                flex items-center justify-center
3255                w-[201px] h-[121px]
3256                bg-white-0 border border-gray-10 rounded-btn
3257                shadow-[var(--shadow-logos)] overflow-hidden
3258            ">
3259                                                        <img
3260        src="/img/208/presse-pattounes-magazine-2fe09779df7b.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=cab8ccaf0d5c20af78d17483d9da5512"
3261         srcset="/img/208/presse-pattounes-magazine-2fe09779df7b.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=31be30213532dd1cb023ba07bb1db6f3 2x"                  width="120"          height="40"         alt="Pattounes Magazine"
3262        loading="lazy"
3263        decoding="async"
3264        class="max-w-[70%] max-h-[55%] object-contain"
3265    />
3266                                                </li>
3267                    <li data-reveal="scale" class="
3268                flex items-center justify-center
3269                w-[201px] h-[121px]
3270                bg-white-0 border border-gray-10 rounded-btn
3271                shadow-[var(--shadow-logos)] overflow-hidden
3272            ">
3273                                                        <img
3274        src="/img/209/presse-rfm-b1253335fe5e.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=28bcff67237bda45753ef240629b7846"
3275         srcset="/img/209/presse-rfm-b1253335fe5e.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=4ce7e2170892f44c58cbb8a7dbaf8828 2x"                  width="120"          height="40"         alt="RFM Bordeaux"
3276        loading="lazy"
3277        decoding="async"
3278        class="max-w-[70%] max-h-[55%] object-contain"
3279    />
3280                                                </li>
3281                    <li data-reveal="scale" class="
3282                flex items-center justify-center
3283                w-[201px] h-[121px]
3284                bg-white-0 border border-gray-10 rounded-btn
3285                shadow-[var(--shadow-logos)] overflow-hidden
3286            ">
3287                                                        <img
3288        src="/img/203/presse-nrj-d6833d932722.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=ba6d1962c7cf408653f14f41f8ad775d"
3289         srcset="/img/203/presse-nrj-d6833d932722.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=f2913b6a9fb3293399bdacf6e1bd2b3f 2x"                  width="120"          height="40"         alt="NRJ Bordeaux"
3290        loading="lazy"
3291        decoding="async"
3292        class="max-w-[70%] max-h-[55%] object-contain"
3293    />
3294                                                </li>
3295                    <li data-reveal="scale" class="
3296                flex items-center justify-center
3297                w-[201px] h-[121px]
3298                bg-white-0 border border-gray-10 rounded-btn
3299                shadow-[var(--shadow-logos)] overflow-hidden
3300            ">
3301                                                        <img
3302        src="/img/217/presse-cherie-fm-da914e71d171.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=86149ab86095904f1f830ee3f5cf98a9"
3303         srcset="/img/217/presse-cherie-fm-da914e71d171.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=371af2d0890fee82b91f540b48dd07d0 2x"                  width="120"          height="40"         alt="Chérie FM"
3304        loading="lazy"
3305        decoding="async"
3306        class="max-w-[70%] max-h-[55%] object-contain"
3307    />
3308                                                </li>
3309                    <li data-reveal="scale" class="
3310                flex items-center justify-center
3311                w-[201px] h-[121px]
3312                bg-white-0 border border-gray-10 rounded-btn
3313                shadow-[var(--shadow-logos)] overflow-hidden
3314            ">
3315                                                        <img
3316        src="/img/210/presse-smile-media-e32443bfe369.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=477852cb793738d16dd809c0981ba007"
3317         srcset="/img/210/presse-smile-media-e32443bfe369.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=86553fecb6311a07900cbece56f32122 2x"                  width="120"          height="40"         alt="Smile Média"
3318        loading="lazy"
3319        decoding="async"
3320        class="max-w-[70%] max-h-[55%] object-contain"
3321    />
3322                                                </li>
3323                    <li data-reveal="scale" class="
3324                flex items-center justify-center
3325                w-[201px] h-[121px]
3326                bg-white-0 border border-gray-10 rounded-btn
3327                shadow-[var(--shadow-logos)] overflow-hidden
3328            ">
3329                                                            <a href="https://laliguedesanimaux.fr/2026/05/27/animou-x-la-ligue-des-animaux-unir-nos-forces-pour-les-animaux/" target="_blank" rel="noopener noreferrer" data-track="press-link" data-press-name="La Ligue des Animaux" class="flex items-center justify-center w-full h-full">
3330                                        <img
3331        src="/img/220/presse-la-ligue-des-animaux-h-d24fb0280c92.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=d98e8381a64da5cb6a11a94221bacd89"
3332         srcset="/img/220/presse-la-ligue-des-animaux-h-d24fb0280c92.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=73c4dd87da185e6aff7d6086e20f10b0 2x"                  width="120"          height="40"         alt="La Ligue des Animaux"
3333        loading="lazy"
3334        decoding="async"
3335        class="max-w-[70%] max-h-[55%] object-contain"
3336    />
3337                                            </a>
3338                                                </li>
3339            </ul>
3340
3341    
3342    <div
3343        class="lg:hidden mt-10 overflow-hidden"
3344        data-reveal
3345        x-data="emblaMarquee({ speed: 0.8 })"
3346        x-ref="viewport"
3347        role="region"
3348        aria-label="Logos des partenaires"
3349    >
3350        <div class="flex gap-3">
3351            
3352                                                <div
3353                        class="
3354                            flex items-center justify-center shrink-0
3355                            w-[114px] h-[69px]
3356                            bg-white-0 border border-gray-10 rounded-[14px]
3357                            shadow-[var(--shadow-logos)] overflow-hidden
3358                        "
3359                                            >
3360                                                                                <img
3361        src="/img/204/presse-ici-gironde-78b1cc6c019a.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=cd31c93721cdd569c00dc37eca182fde"
3362         srcset="/img/204/presse-ici-gironde-78b1cc6c019a.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=e6c455a7fc8511fece954f4ac1d47d98 2x"                  width="120"          height="40"         alt="ici Gironde"
3363        loading="lazy"
3364        decoding="async"
3365        class="max-w-[70%] max-h-[55%] object-contain"
3366    />
3367                                                                        </div>
3368                                    <div
3369                        class="
3370                            flex items-center justify-center shrink-0
3371                            w-[114px] h-[69px]
3372                            bg-white-0 border border-gray-10 rounded-[14px]
3373                            shadow-[var(--shadow-logos)] overflow-hidden
3374                        "
3375                                            >
3376                                                                                    <a href="https://www.lessentiel.fr/bordeaux/entreprises/2026-09-02/des-bordelais-creent-une
3376-application-pour-retrouver-les-animaux" target="_blank" rel="noopener noreferrer" data-track="press-link" data-press-name="L&#039;essentiel Bordeaux" class="flex items-center justify-center w-full h-full">
3377                                                        <img
3378        src="/img/212/presse-lessentiel-bordeaux-f745e245e4df.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=549faeac4b43a00db18b2d8c05a27905"
3379         srcset="/img/212/presse-lessentiel-bordeaux-f745e245e4df.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=1c790012ce6595696f49b5c2938d9141 2x"                  width="120"          height="40"         alt="L&#039;essentiel Bordeaux"
3380        loading="lazy"
3381        decoding="async"
3382        class="max-w-[70%] max-h-[55%] object-contain"
3383    />
3384                                                            </a>
3385                                                                        </div>
3386                                    <div
3387                        class="
3388                            flex items-center justify-center shrink-0
3389                            w-[114px] h-[69px]
3390                            bg-white-0 border border-gray-10 rounded-[14px]
3391                            shadow-[var(--shadow-logos)] overflow-hidden
3392                        "
3393                                            >
3394                                                                                    <a href="https://www.lebonbon.fr/bordeaux/news/2-bordelais-lancent-premiere-application-gratuite-retrouver-animaux-perdus/" target="_blank" rel="noopener noreferrer" data-track="press-link" data-press-name="Le Bonbon" class="flex items-center justify-center w-full h-full">
3395                                                        <img
3396        src="/img/205/presse-le-bonbon-252ee121285a.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=163832f116117fb927894293adc68173"
3397         srcset="/img/205/presse-le-bonbon-252ee121285a.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=6d1ba8c18ac7d4686dc9ec49fb45d59f 2x"                  width="120"          height="40"         alt="Le Bonbon"
3398        loading="lazy"
3399        decoding="async"
3400        class="max-w-[70%] max-h-[55%] object-contain"
3401    />
3402                                                            </a>
3403                                                                        </div>
3404                                    <div
3405                        class="
3406                            flex items-center justify-center shrink-0
3407                            w-[114px] h-[69px]
3408                            bg-white-0 border border-gray-10 rounded-[14px]
3409                            shadow-[var(--shadow-logos)] overflow-hidden
3410                        "
3411                                            >
3412                                                                                    <a href="https://www.bougerabordeaux.com/actu/news/animou-lapplication-bordelaise-qui-veut-revolutionner-la-recherche-danimaux-perdus/" target="_blank" rel="noopener noreferrer" data-track="press-link" data-press-name="Bouger à Bordeaux" class="flex items-center justify-center w-full h-full">
3413                                                        <img
3414        src="/img/206/presse-bouger-a-bordeaux-1c11f31c09f4.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=c730aad82a30b8ba3ad3be662aa9da6d"
3415         srcset="/img/206/presse-bouger-a-bordeaux-1c11f31c09f4.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=f2d0cd4ea730a3c8780c086ad4034f84 2x"                  width="120"          height="40"         alt="Bouger à Bordeaux"
3416        loading="lazy"
3417        decoding="async"
3418        class="max-w-[70%] max-h-[55%] object-contain"
3419    />
3420                                                            </a>
3421                                                                        </div>
3422                                    <div
3423                        class="
3424                            flex items-center justify-center shrink-0
3425                            w-[114px] h-[69px]
3426                            bg-white-0 border border-gray-10 rounded-[14px]
3427                            shadow-[var(--shadow-logos)] overflow-hidden
3428                        "
3429                                            >
3430                                                                                    <a href="https://leguideduchat.fr/comportement-du-chat/animou-app-retrouver-chat-perdu/" target="_blank" rel="noopener noreferrer" data-track="press-link" data-press-name="Le Guide du Chat" class="flex items-center justify-center w-full h-full">
3431                                                        <img
3432        src="/img/207/presse-le-guide-du-chat-2a72c2d336bd.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=6fbdddf24c63e2a70ce09fb23feca366"
3433         srcset="/img/207/presse-le-guide-du-chat-2a72c2d336bd.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=3ee3336f84209c88e06c383cbe1abb8f 2x"                  width="120"          height="40"         alt="Le Guide du Chat"
3434        loading="lazy"
3435        decoding="async"
3436        class="max-w-[70%] max-h-[55%] object-contain"
3437    />
3438                                                            </a>
3439                                                                        </div>
3440                                    <div
3441                        class="
3442                            flex items-center justify-center shrink-0
3443                            w-[114px] h-[69px]
3444                            bg-white-0 border border-gray-10 rounded-[14px]
3445                            shadow-[var(--shadow-logos)] overflow-hidden
3446                        "
3447                                            >
3448                                                                                <img
3449        src="/img/208/presse-pattounes-magazine-2fe09779df7b.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=cab8ccaf0d5c20af78d17483d9da5512"
3450         srcset="/img/208/presse-pattounes-magazine-2fe09779df7b.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=31be30213532dd1cb023ba07bb1db6f3 2x"                  width="120"          height="40"         alt="Pattounes Magazine"
3451        loading="lazy"
3452        decoding="async"
3453        class="max-w-[70%] max-h-[55%] object-contain"
3454    />
3455                                                                        </div>
3456                                    <div
3457                        class="
3458                            flex items-center justify-center shrink-0
3459                            w-[114px] h-[69px]
3460                            bg-white-0 border border-gray-10 rounded-[14px]
3461                            shadow-[var(--shadow-logos)] overflow-hidden
3462                        "
3463                                            >
3464                                                                                <img
3465        src="/img/209/presse-rfm-b1253335fe5e.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=28bcff67237bda45753ef240629b7846"
3466         srcset="/img/209/presse-rfm-b1253335fe5e.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=4ce7e2170892f44c58cbb8a7dbaf8828 2x"                  width="120"          height="40"         alt="RFM Bordeaux"
3467        loading="lazy"
3468        decoding="async"
3469        class="max-w-[70%] max-h-[55%] object-contain"
3470    />
3471                                                                        </div>
3472                                    <div
3473                        class="
3474                            flex items-center justify-center shrink-0
3475                            w-[114px] h-[69px]
3476                            bg-white-0 border border-gray-10 rounded-[14px]
3477                            shadow-[var(--shadow-logos)] overflow-hidden
3478                        "
3479                                            >
3480                                                                                <img
3481        src="/img/203/presse-nrj-d6833d932722.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=ba6d1962c7cf408653f14f41f8ad775d"
3482         srcset="/img/203/presse-nrj-d6833d932722.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=f2913b6a9fb3293399bdacf6e1bd2b3f 2x"                  width="120"          height="40"         alt="NRJ Bordeaux"
3483        loading="lazy"
3484        decoding="async"
3485        class="max-w-[70%] max-h-[55%] object-contain"
3486    />
3487                                                                        </div>
3488                                    <div
3489                        class="
3490                            flex items-center justify-center shrink-0
3491                            w-[114px] h-[69px]
3492                            bg-white-0 border border-gray-10 rounded-[14px]
3493                            shadow-[var(--shadow-logos)] overflow-hidden
3494                        "
3495                                            >
3496                                                                                <img
3497        src="/img/217/presse-cherie-fm-da914e71d171.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=86149ab86095904f1f830ee3f5cf98a9"
3498         srcset="/img/217/presse-cherie-fm-da914e71d171.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=371af2d0890fee82b91f540b48dd07d0 2x"                  width="120"          height="40"         alt="Chérie FM"
3499        loading="lazy"
3500        decoding="async"
3501        class="max-w-[70%] max-h-[55%] object-contain"
3502    />
3503                                                                        </div>
3504                                    <div
3505                        class="
3506                            flex items-center justify-center shrink-0
3507                            w-[114px] h-[69px]
3508                            bg-white-0 border border-gray-10 rounded-[14px]
3509                            shadow-[var(--shadow-logos)] overflow-hidden
3510                        "
3511                                            >
3512                                                                                <img
3513        src="/img/210/presse-smile-media-e32443bfe369.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=477852cb793738d16dd809c0981ba007"
3514         srcset="/img/210/presse-smile-media-e32443bfe369.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=86553fecb6311a07900cbece56f32122 2x"                  width="120"          height="40"         alt="Smile Média"
3515        loading="lazy"
3516        decoding="async"
3517        class="max-w-[70%] max-h-[55%] object-contain"
3518    />
3519                                                                        </div>
3520                                    <div
3521                        class="
3522                            flex items-center justify-center shrink-0
3523                            w-[114px] h-[69px]
3524                            bg-white-0 border border-gray-10 rounded-[14px]
3525                            shadow-[var(--shadow-logos)] overflow-hidden
3526                        "
3527                                            >
3528                                                                                    <a href="https://laliguedesanimaux.fr/2026/05/27/animou-x-la-ligue-des-animaux-unir-nos-forces-pour-les-animaux/" target="_blank" rel="noopener noreferrer" data-track="press-link" data-press-name="La Ligue des Animaux" class="flex items-center justify-center w-full h-full">
3529                                                        <img
3530        src="/img/220/presse-la-ligue-des-animaux-h-d24fb0280c92.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=d98e8381a64da5cb6a11a94221bacd89"
3531         srcset="/img/220/presse-la-ligue-des-animaux-h-d24fb0280c92.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=73c4dd87da185e6aff7d6086e20f10b0 2x"                  width="120"          height="40"         alt="La Ligue des Animaux"
3532        loading="lazy"
3533        decoding="async"
3534        class="max-w-[70%] max-h-[55%] object-contain"
3535    />
3536                                                            </a>
3537                                                                        </div>
3538                                                                <div
3539                        class="
3540                            flex items-center justify-center shrink-0
3541                            w-[114px] h-[69px]
3542                            bg-white-0 border border-gray-10 rounded-[14px]
3543                            shadow-[var(--shadow-logos)] overflow-hidden
3544                        "
3545                         aria-hidden="true"                     >
3546                                                                                <img
3547        src="/img/204/presse-ici-gironde-78b1cc6c019a.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=cd31c93721cdd569c00dc37eca182fde"
3548         srcset="/img/204/presse-ici-gironde-78b1cc6c019a.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=e6c455a7fc8511fece954f4ac1d47d98 2x"                  width="120"          height="40"         alt=""
3549        loading="lazy"
3550        decoding="async"
3551        class="max-w-[70%] max-h-[55%] object-contain"
3552    />
3553                                                                        </div>
3554                                    <div
3555                        class="
3556                            flex items-center justify-center shrink-0
3557                            w-[114px] h-[69px]
3558                            bg-white-0 border border-gray-10 rounded-[14px]
3559                            shadow-[var(--shadow-logos)] overflow-hidden
3560                        "
3561                         aria-hidden="true"                     >
3562                                                                                <img
3563        src="/img/212/presse-lessentiel-bordeaux-f745e245e4df.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=549faeac4b43a00db18b2d8c05a27905"
3564         srcset="/img/212/presse-lessentiel-bordeaux-f745e245e4df.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=1c790012ce6595696f49b5c2938d9141 2x"                  width="120"          height="40"         alt=""
3565        loading="lazy"
3566        decoding="async"
3567        class="max-w-[70%] max-h-[55%] object-contain"
3568    />
3569                                                                        </div>
3570                                    <div
3571                        class="
3572                            flex items-center justify-center shrink-0
3573                            w-[114px] h-[69px]
3574                            bg-white-0 border border-gray-10 rounded-[14px]
3575                            shadow-[var(--shadow-logos)] overflow-hidden
3576                        "
3577                         aria-hidden="true"                     >
3578                                                                                <img
3579        src="/img/205/presse-le-bonbon-252ee121285a.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=163832f116117fb927894293adc68173"
3580         srcset="/img/205/presse-le-bonbon-252ee121285a.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=6d1ba8c18ac7d4686dc9ec49fb45d59f 2x"                  width="120"          height="40"         alt=""
3581        loading="lazy"
3582        decoding="async"
3583        class="max-w-[70%] max-h-[55%] object-contain"
3584    />
3585                                                                        </div>
3586                                    <div
3587                        class="
3588                            flex items-center justify-center shrink-0
3589                            w-[114px] h-[69px]
3590                            bg-white-0 border border-gray-10 rounded-[14px]
3591                            shadow-[var(--shadow-logos)] overflow-hidden
3592                        "
3593                         aria-hidden="true"                     >
3594                                                                                <img
3595        src="/img/206/presse-bouger-a-bordeaux-1c11f31c09f4.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=c730aad82a30b8ba3ad3be662aa9da6d"
3596         srcset="/img/206/presse-bouger-a-bordeaux-1c11f31c09f4.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=f2d0cd4ea730a3c8780c086ad4034f84 2x"                  width="120"          height="40"         alt=""
3597        loading="lazy"
3598        decoding="async"
3599        class="max-w-[70%] max-h-[55%] object-contain"
3600    />
3601                                                                        </div>
3602                                    <div
3603                        class="
3604                            flex items-center justify-center shrink-0
3605                            w-[114px] h-[69px]
3606                            bg-white-0 border border-gray-10 rounded-[14px]
3607                            shadow-[var(--shadow-logos)] overflow-hidden
3608                        "
3609                         aria-hidden="true"                     >
3610                                                                                <img
3611        src="/img/207/presse-le-guide-du-chat-2a72c2d336bd.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=6fbdddf24c63e2a70ce09fb23feca366"
3612         srcset="/img/207/presse-le-guide-du-chat-2a72c2d336bd.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=3ee3336f84209c88e06c383cbe1abb8f 2x"                  width="120"          height="40"         alt=""
3613        loading="lazy"
3614        decoding="async"
3615        class="max-w-[70%] max-h-[55%] object-contain"
3616    />
3617                                                                        </div>
3618                                    <div
3619                        class="
3620                            flex items-center justify-center shrink-0
3621                            w-[114px] h-[69px]
3622                            bg-white-0 border border-gray-10 rounded-[14px]
3623                            shadow-[var(--shadow-logos)] overflow-hidden
3624                        "
3625                         aria-hidden="true"                     >
3626                                                                                <img
3627        src="/img/208/presse-pattounes-magazine-2fe09779df7b.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=cab8ccaf0d5c20af78d17483d9da5512"
3628         srcset="/img/208/presse-pattounes-magazine-2fe09779df7b.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=31be30213532dd1cb023ba07bb1db6f3 2x"                  width="120"          height="40"         alt=""
3629        loading="lazy"
3630        decoding="async"
3631        class="max-w-[70%] max-h-[55%] object-contain"
3632    />
3633                                                                        </div>
3634                                    <div
3635                        class="
3636                            flex items-center justify-center shrink-0
3637                            w-[114px] h-[69px]
3638                            bg-white-0 border border-gray-10 rounded-[14px]
3639                            shadow-[var(--shadow-logos)] overflow-hidden
3640                        "
3641                         aria-hidden="true"                     >
3642                                                                                <img
3643        src="/img/209/presse-rfm-b1253335fe5e.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=28bcff67237bda45753ef240629b7846"
3644         srcset="/img/209/presse-rfm-b1253335fe5e.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=4ce7e2170892f44c58cbb8a7dbaf8828 2x"                  width="120"          height="40"         alt=""
3645        loading="lazy"
3646        decoding="async"
3647        class="max-w-[70%] max-h-[55%] object-contain"
3648    />
3649                                                                        </div>
3650                                    <div
3651                        class="
3652                            flex items-center justify-center shrink-0
3653                            w-[114px] h-[69px]
3654                            bg-white-0 border border-gray-10 rounded-[14px]
3655                            shadow-[var(--shadow-logos)] overflow-hidden
3656                        "
3657                         aria-hidden="true"                     >
3658                                                                                <img
3659        src="/img/203/presse-nrj-d6833d932722.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=ba6d1962c7cf408653f14f41f8ad775d"
3660         srcset="/img/203/presse-nrj-d6833d932722.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=f2913b6a9fb3293399bdacf6e1bd2b3f 2x"                  width="120"          height="40"         alt=""
3661        loading="lazy"
3662        decoding="async"
3663        class="max-w-[70%] max-h-[55%] object-contain"
3664    />
3665                                                                        </div>
3666                                    <div
3667                        class="
3668                            flex items-center justify-center shrink-0
3669                            w-[114px] h-[69px]
3670                            bg-white-0 border border-gray-10 rounded-[14px]
3671                            shadow-[var(--shadow-logos)] overflow-hidden
3672                        "
3673                         aria-hidden="true"                     >
3674                                                                                <img
3675        src="/img/217/presse-cherie-fm-da914e71d171.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=86149ab86095904f1f830ee3f5cf98a9"
3676         srcset="/img/217/presse-cherie-fm-da914e71d171.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=371af2d0890fee82b91f540b48dd07d0 2x"                  width="120"          height="40"         alt=""
3677        loading="lazy"
3678        decoding="async"
3679        class="max-w-[70%] max-h-[55%] object-contain"
3680    />
3681                                                                        </div>
3682                                    <div
3683                        class="
3684                            flex items-center justify-center shrink-0
3685                            w-[114px] h-[69px]
3686                            bg-white-0 border border-gray-10 rounded-[14px]
3687                            shadow-[var(--shadow-logos)] overflow-hidden
3688                        "
3689                         aria-hidden="true"                     >
3690                                                                                <img
3691        src="/img/210/presse-smile-media-e32443bfe369.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=477852cb793738d16dd809c0981ba007"
3692         srcset="/img/210/presse-smile-media-e32443bfe369.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=86553fecb6311a07900cbece56f32122 2x"                  width="120"          height="40"         alt=""
3693        loading="lazy"
3694        decoding="async"
3695        class="max-w-[70%] max-h-[55%] object-contain"
3696    />
3697                                                                        </div>
3698                                    <div
3699                        class="
3700                            flex items-center justify-center shrink-0
3701                            w-[114px] h-[69px]
3702                            bg-white-0 border border-gray-10 rounded-[14px]
3703                            shadow-[var(--shadow-logos)] overflow-hidden
3704                        "
3705                         aria-hidden="true"                     >
3706                                                                                <img
3707        src="/img/220/presse-la-ligue-des-animaux-h-d24fb0280c92.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=120&amp;h=40&amp;s=d98e8381a64da5cb6a11a94221bacd89"
3708         srcset="/img/220/presse-la-ligue-des-animaux-h-d24fb0280c92.png?q=80&amp;fm=webp&amp;fit=contain&amp;w=240&amp;h=80&amp;s=73c4dd87da185e6aff7d6086e20f10b0 2x"                  width="120"          height="40"         alt=""
3709        loading="lazy"
3710        decoding="async"
3711        class="max-w-[70%] max-h-[55%] object-contain"
3712    />
3713                                                                        </div>
3714                                    </div>
3715    </div>
3716
3717    <div class="page-wrapper hidden lg:block pointer-events-none pt-[70px]">
3718    <div x-data="sectionNav({ inheritPrevious: false })"
3719     class="transition-opacity duration-300"
3720     :style="'opacity: ' + opacity"
3721     x-cloak>
3722    <div class="w-[425px]">
3723        <div class="flex items-center justify-end gap-3 font-helvetica-now-display text-lg leading-[1.4] mb-[20px] text-purple-500">
3724            <span class="tabular-nums" x-text="number"></span>
3725            <span x-text="label"></span>
3726        </div>
3727        <div class="relative">
3728            <div class="h-px w-full rounded-[1px]"
3729                 style="background: linear-gradient(to right, rgba(127,121,209,0) 0%, #7F79D1 100%);"></div>
3730            <div class="absolute top-1/2 -translate-y-1/2 transition-[left] duration-300 ease-out will-change-[left,opacity]"
3731                 :style="'left: ' + arrowLeft + 'px'">
3732                <div class="flex items-center justify-center h-[33px] px-4 rounded-full bg-purple-10 text-purple-500">
3733                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
3734                        <path d="M8.91 19.92L15.43 13.4C16.2 12.63 16.2 11.37 15.43 10.6L8.91 4.08"
3735                              stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"
3736                              stroke-linecap="round" stroke-linejoin="round"/>
3737                    </svg>
3738                </div>
3739            </div>
3740        </div>
3741    </div>
3742</div>
3743</div>
3744        </div>
3745    
3746
3747</section>
3748<section
3749        class="page-section"
3750         data-section-label="Avis"      aria-labelledby="heading-testimonials"
3751    >
3752            <div class="page-wrapper">
3753            <div
3754            x-data="emblaSlider({ perPage: 1, perPageLg: 3 })"
3755            class="flex flex-col items-center gap-8 lg:gap-10"
3756    >
3757        
3758        <h2
3759                id="heading-testimonials"
3760                data-reveal
3761                class="text-heading-section text-dark-850 lg:text-center w-full"
3762        >
3763            Ce que disent les utilisateurs d&#039;
3763<span class="text-purple-400">Animou</span>
3764        </h2>
3765
3766        
3767        <div class="w-full overflow-hidden" x-ref="viewport" data-reveal>
3768            <div class="flex gap-4 lg:gap-[var(--grid-gutter)]">
3769                                    <div
3770                        class="flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%/3-var(--grid-gutter)*2/3)]"
3771                        role="group"
3772                        aria-label="Avis 1 sur 11"
3773                    >
3774                        <div class="border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rounded-3xl min-h-[415px] lg:min-h-[419px]">
3775        
3776            <div class="testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0" data-rating="5">
3777            <span class="pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0/10" aria-hidden="true"></span>
3778            <span class="pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0/[0.07]" aria-hidden="true"></span>
3779                            <p class="relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]">Avis App Store</p>
3780                        <p class="relative flex items-center gap-1.5" role="img" aria-label="5/5">
3781                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3782                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3783                    </svg>
3784                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3785                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3786                    </svg>
3787                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3788                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3789                    </svg>
3790                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3791                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3792                    </svg>
3793                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3794                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3795                    </svg>
3796                            </p>
3797            <p class="relative font-helvetica-now-display text-[28px] font-bold leading-none">5/5</p>
3798        </div>
3799    
3800    
3801        <div class="flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5">
3802        <div class="flex flex-1 flex-col justify-center gap-2">
3803                            <svg viewBox="0 0 32 24" class="h-6 w-8 shrink-0 text-[#CBC7FF]" fill="currentColor" aria-hidden="true">
3804                    <path d="M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z" />
3805                </svg>
3806                        <blockquote>
3807                <p class="text-body font-medium leading-relaxed text-dark-850">J&#039;ai perdu mon chat il y a quelques jours et grâce à cette application j&#039;ai pu le retrouver assez rapidement. Merci à Animou et à la communauté présente sur l&#039;application.</p>
3808            </blockquote>
3809        </div>
3810        <div class="flex items-center gap-3 border-t border-gray-75 pt-4">
3811                            <span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]" aria-hidden="true">P</span>
3812                        <div class="flex min-w-0 flex-col leading-tight">
3813                <p class="text-body-sm font-bold text-dark-850">
3814                    <cite class="not-italic">Paul</cite>
3815                </p>
3816                                    <p class="text-[13px] font-medium text-gray-500">Août 2026</p>
3817                            </div>
3818        </div>
3819    </div>
3820</div>
3821                    </div>
3822                                    <div
3823                        class="flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%/3-var(--grid-gutter)*2/3)]"
3824                        role="group"
3825                        aria-label="Avis 2 sur 11"
3826                    >
3827                        <div class="border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rou
3827nded-3xl min-h-[415px] lg:min-h-[419px]">
3828        
3829            <div class="testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0" data-rating="5">
3830            <span class="pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0/10" aria-hidden="true"></span>
3831            <span class="pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0/[0.07]" aria-hidden="true"></span>
3832                            <p class="relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]">Avis Google Play</p>
3833                        <p class="relative flex items-center gap-1.5" role="img" aria-label="5/5">
3834                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3835                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3836                    </svg>
3837                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3838                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3839                    </svg>
3840                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3841                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3842                    </svg>
3843                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3844                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3845                    </svg>
3846                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3847                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3848                    </svg>
3849                            </p>
3850            <p class="relative font-helvetica-now-display text-[28px] font-bold leading-none">5/5</p>
3851        </div>
3852    
3853    
3854        <div class="flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5">
3855        <div class="flex flex-1 flex-col justify-center gap-2">
3856                            <svg viewBox="0 0 32 24" class="h-6 w-8 shrink-0 text-[#CBC7FF]" fill="currentColor" aria-hidden="true">
3857                    <path d="M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z" />
3858                </svg>
3859                        <blockquote>
3860                <p class="text-body font-medium leading-relaxed text-dark-850">Enfin une application vraiment utile, gratuite et sans publicité ! L&#039;utilisation est simple et rapide : en quelques instants, on peut signaler un animal perdu ou trouvé et consulter les annonces autour de chez soi.</p>
3861            </blockquote>
3862        </div>
3863        <div class="flex items-center gap-3 border-t border-gray-75 pt-4">
3864                            <span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]" aria-hidden="true">T</span>
3865                        <div class="flex min-w-0 flex-col leading-tight">
3866                <p class="text-body-sm font-bold text-dark-850">
3867                    <cite class="not-italic">Théo</cite>
3868                </p>
3869                                    <p class="text-[13px] font-medium text-gray-500">Juillet 2026</p>
3870                            </div>
3871        </div>
3872    </div>
3873</div>
3874                    </div>
3875                                    <div
3876                        class="flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%/3-var(--grid-gutter)*2/3)]"
3877                        role="group"
3878                        aria-label="Avis 3 sur 11"
3879                    >
3880                        <div class="border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rou
3880nded-3xl min-h-[415px] lg:min-h-[419px]">
3881        
3882            <div class="testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0" data-rating="5">
3883            <span class="pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0/10" aria-hidden="true"></span>
3884            <span class="pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0/[0.07]" aria-hidden="true"></span>
3885                            <p class="relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]">Avis App Store</p>
3886                        <p class="relative flex items-center gap-1.5" role="img" aria-label="5/5">
3887                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3888                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3889                    </svg>
3890                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3891                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3892                    </svg>
3893                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3894                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3895                    </svg>
3896                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3897                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3898                    </svg>
3899                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3900                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3901                    </svg>
3902                            </p>
3903            <p class="relative font-helvetica-now-display text-[28px] font-bold leading-none">5/5</p>
3904        </div>
3905    
3906    
3907        <div class="flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5">
3908        <div class="flex flex-1 flex-col justify-center gap-2">
3909                            <svg viewBox="0 0 32 24" class="h-6 w-8 shrink-0 text-[#CBC7FF]" fill="currentColor" aria-hidden="true">
3910                    <path d="M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z" />
3911                </svg>
3912                        <blockquote>
3913                <p class="text-body font-medium leading-relaxed text-dark-850">Application incroyablement bien faite et surtout intuitive ! Merci à l&#039;équipe d&#039;Animou pour le travail et surtout pour la cause ! Merci énormément pour les animaux.</p>
3914            </blockquote>
3915        </div>
3916        <div class="flex items-center gap-3 border-t border-gray-75 pt-4">
3917                            <span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]" aria-hidden="true">S</span>
3918                        <div class="flex min-w-0 flex-col leading-tight">
3919                <p class="text-body-sm font-bold text-dark-850">
3920                    <cite class="not-italic">Sylvie</cite>
3921                </p>
3922                                    <p class="text-[13px] font-medium text-gray-500">Septembre 2026</p>
3923                            </div>
3924        </div>
3925    </div>
3926</div>
3927                    </div>
3928                                    <div
3929                        class="flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%/3-var(--grid-gutter)*2/3)]"
3930                        role="group"
3931                        aria-label="Avis 4 sur 11"
3932                    >
3933                        <div class="border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rou
3933nded-3xl min-h-[415px] lg:min-h-[419px]">
3934        
3935            <div class="testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0" data-rating="5">
3936            <span class="pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0/10" aria-hidden="true"></span>
3937            <span class="pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0/[0.07]" aria-hidden="true"></span>
3938                            <p class="relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]">Avis App Store</p>
3939                        <p class="relative flex items-center gap-1.5" role="img" aria-label="5/5">
3940                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3941                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3942                    </svg>
3943                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3944                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3945                    </svg>
3946                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3947                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3948                    </svg>
3949                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3950                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3951                    </svg>
3952                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3953                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3954                    </svg>
3955                            </p>
3956            <p class="relative font-helvetica-now-display text-[28px] font-bold leading-none">5/5</p>
3957        </div>
3958    
3959    
3960        <div class="flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5">
3961        <div class="flex flex-1 flex-col justify-center gap-2">
3962                            <svg viewBox="0 0 32 24" class="h-6 w-8 shrink-0 text-[#CBC7FF]" fill="currentColor" aria-hidden="true">
3963                    <path d="M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z" />
3964                </svg>
3965                        <blockquote>
3966                <p class="text-body font-medium leading-relaxed text-dark-850">C&#039;est une application vraiment utile pour retrouver des animaux perdus ou aider à retrouver ceux des autres ! L&#039;interface est simple, les annonces sont faciles à publier et c&#039;est totalement gratuit ! Je recommande à 100 %.</p>
3967            </blockquote>
3968        </div>
3969        <div class="flex items-center gap-3 border-t border-gray-75 pt-4">
3970                            <span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]" aria-hidden="true">I</span>
3971                        <div class="flex min-w-0 flex-col leading-tight">
3972                <p class="text-body-sm font-bold text-dark-850">
3973                    <cite class="not-italic">Iris</cite>
3974                </p>
3975                                    <p class="text-[13px] font-medium text-gray-500">Juillet 2026</p>
3976                            </div>
3977        </div>
3978    </div>
3979</div>
3980                    </div>
3981                                    <div
3982                        class="flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%/3-var(--grid-gutter)*2/3)]"
3983                        role="group"
3984                        aria-label="Avis 5 sur 11"
3985                    >
3986                        <div class="border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rou
3986nded-3xl min-h-[415px] lg:min-h-[419px]">
3987        
3988            <div class="testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0" data-rating="5">
3989            <span class="pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0/10" aria-hidden="true"></span>
3990            <span class="pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0/[0.07]" aria-hidden="true"></span>
3991                            <p class="relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]">Avis Google Play</p>
3992                        <p class="relative flex items-center gap-1.5" role="img" aria-label="5/5">
3993                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3994                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3995                    </svg>
3996                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
3997                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
3998                    </svg>
3999                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4000                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4001                    </svg>
4002                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4003                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4004                    </svg>
4005                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4006                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4007                    </svg>
4008                            </p>
4009            <p class="relative font-helvetica-now-display text-[28px] font-bold leading-none">5/5</p>
4010        </div>
4011    
4012    
4013        <div class="flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5">
4014        <div class="flex flex-1 flex-col justify-center gap-2">
4015                            <svg viewBox="0 0 32 24" class="h-6 w-8 shrink-0 text-[#CBC7FF]" fill="currentColor" aria-hidden="true">
4016                    <path d="M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z" />
4017                </svg>
4018                        <blockquote>
4019                <p class="text-body font-medium leading-relaxed text-dark-850">Super ! J&#039;espère que l&#039;app sera de plus en plus utilisée. Elle devrait devenir une app obligatoire lorsqu&#039;on a un animal.</p>
4020            </blockquote>
4021        </div>
4022        <div class="flex items-center gap-3 border-t border-gray-75 pt-4">
4023                            <span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]" aria-hidden="true">N</span>
4024                        <div class="flex min-w-0 flex-col leading-tight">
4025                <p class="text-body-sm font-bold text-dark-850">
4026                    <cite class="not-italic">Noah</cite>
4027                </p>
4028                                    <p class="text-[13px] font-medium text-gray-500">Juillet 2026</p>
4029                            </div>
4030        </div>
4031    </div>
4032</div>
4033                    </div>
4034                                    <div
4035                        class="flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%/3-var(--grid-gutter)*2/3)]"
4036                        role="group"
4037                        aria-label="Avis 6 sur 11"
4038                    >
4039                        <div class="border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rou
4039nded-3xl min-h-[415px] lg:min-h-[419px]">
4040        
4041            <div class="testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0" data-rating="5">
4042            <span class="pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0/10" aria-hidden="true"></span>
4043            <span class="pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0/[0.07]" aria-hidden="true"></span>
4044                            <p class="relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]">Avis Google Play</p>
4045                        <p class="relative flex items-center gap-1.5" role="img" aria-label="5/5">
4046                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4047                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4048                    </svg>
4049                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4050                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4051                    </svg>
4052                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4053                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4054                    </svg>
4055                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4056                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4057                    </svg>
4058                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4059                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4060                    </svg>
4061                            </p>
4062            <p class="relative font-helvetica-now-display text-[28px] font-bold leading-none">5/5</p>
4063        </div>
4064    
4065    
4066        <div class="flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5">
4067        <div class="flex flex-1 flex-col justify-center gap-2">
4068                            <svg viewBox="0 0 32 24" class="h-6 w-8 shrink-0 text-[#CBC7FF]" fill="currentColor" aria-hidden="true">
4069                    <path d="M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z" />
4070                </svg>
4071                        <blockquote>
4072                <p class="text-body font-medium leading-relaxed text-dark-850">Super appli pour retrouver ses animaux disparus ou ceux des autres, c&#039;est une appli vitale de nos jours et ça mérite d&#039;être téléchargé par tous les propriétaires d&#039;animaux.</p>
4073            </blockquote>
4074        </div>
4075        <div class="flex items-center gap-3 border-t border-gray-75 pt-4">
4076                            <span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]" aria-hidden="true">L</span>
4077                        <div class="flex min-w-0 flex-col leading-tight">
4078                <p class="text-body-sm font-bold text-dark-850">
4079                    <cite class="not-italic">Laureen</cite>
4080                </p>
4081                                    <p class="text-[13px] font-medium text-gray-500">Juillet 2026</p>
4082                            </div>
4083        </div>
4084    </div>
4085</div>
4086                    </div>
4087                                    <div
4088                        class="flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%/3-var(--grid-gutter)*2/3)]"
4089                        role="group"
4090                        aria-label="Avis 7 sur 11"
4091                    >
4092                        <div class="border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rou
4092nded-3xl min-h-[415px] lg:min-h-[419px]">
4093        
4094            <div class="testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0" data-rating="5">
4095            <span class="pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0/10" aria-hidden="true"></span>
4096            <span class="pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0/[0.07]" aria-hidden="true"></span>
4097                            <p class="relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]">Avis Google Play</p>
4098                        <p class="relative flex items-center gap-1.5" role="img" aria-label="5/5">
4099                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4100                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4101                    </svg>
4102                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4103                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4104                    </svg>
4105                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4106                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4107                    </svg>
4108                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4109                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4110                    </svg>
4111                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4112                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4113                    </svg>
4114                            </p>
4115            <p class="relative font-helvetica-now-display text-[28px] font-bold leading-none">5/5</p>
4116        </div>
4117    
4118    
4119        <div class="flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5">
4120        <div class="flex flex-1 flex-col justify-center gap-2">
4121                            <svg viewBox="0 0 32 24" class="h-6 w-8 shrink-0 text-[#CBC7FF]" fill="currentColor" aria-hidden="true">
4122                    <path d="M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z" />
4123                </svg>
4124                        <blockquote>
4125                <p class="text-body font-medium leading-relaxed text-dark-850">Une application pour retrouver les animaux perdus ou pour retrouver les propriétaires d&#039;animaux trouvés est une bonne idée. C&#039;est tellement plus pratique. Merci de l&#039;avoir créée.</p>
4126            </blockquote>
4127        </div>
4128        <div class="flex items-center gap-3 border-t border-gray-75 pt-4">
4129                            <span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]" aria-hidden="true">V</span>
4130                        <div class="flex min-w-0 flex-col leading-tight">
4131                <p class="text-body-sm font-bold text-dark-850">
4132                    <cite class="not-italic">Vinie</cite>
4133                </p>
4134                                    <p class="text-[13px] font-medium text-gray-500">Août 2026</p>
4135                            </div>
4136        </div>
4137    </div>
4138</div>
4139                    </div>
4140                                    <div
4141                        class="flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%/3-var(--grid-gutter)*2/3)]"
4142                        role="group"
4143                        aria-label="Avis 8 sur 11"
4144                    >
4145                        <div class="border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rou
4145nded-3xl min-h-[415px] lg:min-h-[419px]">
4146        
4147            <div class="testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0" data-rating="5">
4148            <span class="pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0/10" aria-hidden="true"></span>
4149            <span class="pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0/[0.07]" aria-hidden="true"></span>
4150                            <p class="relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]">Avis App Store</p>
4151                        <p class="relative flex items-center gap-1.5" role="img" aria-label="5/5">
4152                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4153                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4154                    </svg>
4155                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4156                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4157                    </svg>
4158                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4159                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4160                    </svg>
4161                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4162                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4163                    </svg>
4164                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4165                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4166                    </svg>
4167                            </p>
4168            <p class="relative font-helvetica-now-display text-[28px] font-bold leading-none">5/5</p>
4169        </div>
4170    
4171    
4172        <div class="flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5">
4173        <div class="flex flex-1 flex-col justify-center gap-2">
4174                            <svg viewBox="0 0 32 24" class="h-6 w-8 shrink-0 text-[#CBC7FF]" fill="currentColor" aria-hidden="true">
4175                    <path d="M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z" />
4176                </svg>
4177                        <blockquote>
4178                <p class="text-body font-medium leading-relaxed text-dark-850">Cette application était tellement attendue. Très pratique pour inscrire vos animaux et lancer une alerte en cas de disparition. Et totalement gratuite, que demander de plus. Merci.</p>
4179            </blockquote>
4180        </div>
4181        <div class="flex items-center gap-3 border-t border-gray-75 pt-4">
4182                            <span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]" aria-hidden="true">M</span>
4183                        <div class="flex min-w-0 flex-col leading-tight">
4184                <p class="text-body-sm font-bold text-dark-850">
4185                    <cite class="not-italic">Mathilde</cite>
4186                </p>
4187                                    <p class="text-[13px] font-medium text-gray-500">Juillet 2026</p>
4188                            </div>
4189        </div>
4190    </div>
4191</div>
4192                    </div>
4193                                    <div
4194                        class="flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%/3-var(--grid-gutter)*2/3)]"
4195                        role="group"
4196                        aria-label="Avis 9 sur 11"
4197                    >
4198                        <div class="border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rou
4198nded-3xl min-h-[415px] lg:min-h-[419px]">
4199        
4200            <div class="testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0" data-rating="5">
4201            <span class="pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0/10" aria-hidden="true"></span>
4202            <span class="pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0/[0.07]" aria-hidden="true"></span>
4203                            <p class="relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]">Avis Google Play</p>
4204                        <p class="relative flex items-center gap-1.5" role="img" aria-label="5/5">
4205                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4206                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4207                    </svg>
4208                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4209                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4210                    </svg>
4211                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4212                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4213                    </svg>
4214                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4215                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4216                    </svg>
4217                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4218                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4219                    </svg>
4220                            </p>
4221            <p class="relative font-helvetica-now-display text-[28px] font-bold leading-none">5/5</p>
4222        </div>
4223    
4224    
4225        <div class="flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5">
4226        <div class="flex flex-1 flex-col justify-center gap-2">
4227                            <svg viewBox="0 0 32 24" class="h-6 w-8 shrink-0 text-[#CBC7FF]" fill="currentColor" aria-hidden="true">
4228                    <path d="M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z" />
4229                </svg>
4230                        <blockquote>
4231                <p class="text-body font-medium leading-relaxed text-dark-850">Découverte sur Instagram, étant une grande passionnée et amoureuse des animaux, je ne peux que saluer la démarche et recommander chaudement aux gens qui aiment leurs animaux autant que moi d&#039;installer cette application.</p>
4232            </blockquote>
4233        </div>
4234        <div class="flex items-center gap-3 border-t border-gray-75 pt-4">
4235                            <span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]" aria-hidden="true">I</span>
4236                        <div class="flex min-w-0 flex-col leading-tight">
4237                <p class="text-body-sm font-bold text-dark-850">
4238                    <cite class="not-italic">Irélia</cite>
4239                </p>
4240                                    <p class="text-[13px] font-medium text-gray-500">Juillet 2026</p>
4241                            </div>
4242        </div>
4243    </div>
4244</div>
4245                    </div>
4246                                    <div
4247                        class="flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%/3-var(--grid-gutter)*2/3)]"
4248                        role="group"
4249                        aria-label="Avis 10 sur 11"
4250                    >
4251                        <div class="border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rou
4251nded-3xl min-h-[415px] lg:min-h-[419px]">
4252        
4253            <div class="testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0" data-rating="5">
4254            <span class="pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0/10" aria-hidden="true"></span>
4255            <span class="pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0/[0.07]" aria-hidden="true"></span>
4256                            <p class="relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]">Avis App Store</p>
4257                        <p class="relative flex items-center gap-1.5" role="img" aria-label="5/5">
4258                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4259                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4260                    </svg>
4261                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4262                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4263                    </svg>
4264                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4265                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4266                    </svg>
4267                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4268                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4269                    </svg>
4270                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4271                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4272                    </svg>
4273                            </p>
4274            <p class="relative font-helvetica-now-display text-[28px] font-bold leading-none">5/5</p>
4275        </div>
4276    
4277    
4278        <div class="flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5">
4279        <div class="flex flex-1 flex-col justify-center gap-2">
4280                            <svg viewBox="0 0 32 24" class="h-6 w-8 shrink-0 text-[#CBC7FF]" fill="currentColor" aria-hidden="true">
4281                    <path d="M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z" />
4282                </svg>
4283                        <blockquote>
4284                <p class="text-body font-medium leading-relaxed text-dark-850">Superbe initiative ! L&#039;application est belle, elle est réactive, j&#039;espère qu&#039;elle aidera beaucoup de monde !</p>
4285            </blockquote>
4286        </div>
4287        <div class="flex items-center gap-3 border-t border-gray-75 pt-4">
4288                            <span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]" aria-hidden="true">C</span>
4289                        <div class="flex min-w-0 flex-col leading-tight">
4290                <p class="text-body-sm font-bold text-dark-850">
4291                    <cite class="not-italic">Clément</cite>
4292                </p>
4293                                    <p class="text-[13px] font-medium text-gray-500">Juillet 2026</p>
4294                            </div>
4295        </div>
4296    </div>
4297</div>
4298                    </div>
4299                                    <div
4300                        class="flex min-w-0 shrink-0 grow-0 basis-full lg:basis-[calc(100%/3-var(--grid-gutter)*2/3)]"
4301                        role="group"
4302                        aria-label="Avis 11 sur 11"
4303                    >
4304                        <div class="border border-gray-75 overflow-hidden flex flex-col flex-1 rounded-2xl lg:rou
4304nded-3xl min-h-[415px] lg:min-h-[419px]">
4305        
4306            <div class="testimonial-rating relative flex h-[184px] shrink-0 flex-col items-center justify-center gap-3 overflow-hidden bg-gradient-to-b from-[#8883D8] to-[#7168E4] text-white-0" data-rating="5">
4307            <span class="pointer-events-none absolute -top-24 right-[-50px] size-[200px] rounded-full bg-white-0/10" aria-hidden="true"></span>
4308            <span class="pointer-events-none absolute -bottom-28 left-[-70px] size-[200px] rounded-full bg-white-0/[0.07]" aria-hidden="true"></span>
4309                            <p class="relative text-[13px] font-medium uppercase leading-none tracking-[0.12em] text-[#F8F7FB]">Avis App Store</p>
4310                        <p class="relative flex items-center gap-1.5" role="img" aria-label="5/5">
4311                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4312                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4313                    </svg>
4314                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4315                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4316                    </svg>
4317                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4318                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4319                    </svg>
4320                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4321                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4322                    </svg>
4323                                    <svg viewBox="0 0 24 24" class="size-7 text-[#FFC63B]" fill="currentColor" aria-hidden="true">
4324                        <path d="M12 2.5l2.94 6.02 6.64.93-4.81 4.66 1.15 6.6L12 17.6l-5.92 3.11 1.15-6.6L2.42 9.45l6.64-.93L12 2.5z" />
4325                    </svg>
4326                            </p>
4327            <p class="relative font-helvetica-now-display text-[28px] font-bold leading-none">5/5</p>
4328        </div>
4329    
4330    
4331        <div class="flex flex-col flex-1 bg-white-0 gap-4 px-5 pt-5 pb-5">
4332        <div class="flex flex-1 flex-col justify-center gap-2">
4333                            <svg viewBox="0 0 32 24" class="h-6 w-8 shrink-0 text-[#CBC7FF]" fill="currentColor" aria-hidden="true">
4334                    <path d="M13.2 0v4.2c-2.6.5-4.4 2.3-4.7 5.1h4.7V24H0V11.6C0 4.4 4.6.6 13.2 0Zm18.8 0v4.2c-2.6.5-4.4 2.3-4.7 5.1H32V24H18.8V11.6C18.8 4.4 23.4.6 32 0Z" />
4335                </svg>
4336                        <blockquote>
4337                <p class="text-body font-medium leading-relaxed text-dark-850">Top idée. Une appli pour maximiser les chances de retrouver ses animaux perdus.</p>
4338            </blockquote>
4339        </div>
4340        <div class="flex items-center gap-3 border-t border-gray-75 pt-4">
4341                            <span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E2E0FF] font-helvetica-now-display text-[15px] font-bold text-[#413A9F]" aria-hidden="true">S</span>
4342                        <div class="flex min-w-0 flex-col leading-tight">
4343                <p class="text-body-sm font-bold text-dark-850">
4344                    <cite class="not-italic">Sébastien</cite>
4345                </p>
4346                                    <p class="text-[13px] font-medium text-gray-500">Septembre 2026</p>
4347                            </div>
4348        </div>
4349    </div>
4350</div>
4351                    </div>
4352                            </div>
4353        </div>
4354
4355        
4356        <div class="flex items-center gap-1" role="tablist" aria-label="Navigation des avis">
4357            <template x-for="i in count" :key="i">
4358                <button
4359                        type="button"
4360                        role="tab"
4361                        :aria-selected="current === (i - 1) ? 'true' : 'false'"
4362                        :aria-label="'Page ' + i"
4363                        @click="scrollTo(i - 1)"
4364                        class="flex items-center justify-center size-6 cursor-pointer"
4365                >
4366                    <span class="rounded-full transition-all duration-300" :class="current === (i - 1) ? 'w-[21px] h-2 bg-purple-100' : 'size-2 bg-purple-50'"></span>
4367                </button>
4368            </template>
4369        </div>
4370    </div>
4371
4372    <div class="page-wrapper hidden lg:block pointer-events-none pt-[70px]">
4373    <div x-data="sectionNav({ inheritPrevious: false })"
4374     class="transition-opacity duration-300"
4375     :style="'opacity: ' + opacity"
4376     x-cloak>
4377    <div class="w-[425px]">
4378        <div class="flex items-center justify-end gap-3 font-helvetica-now-display text-lg leading-[1.4] mb-[20px] text-purple-500">
4379            <span class="tabular-nums" x-text="number"></span>
4380            <span x-text="label"></span>
4381        </div>
4382        <div class="relative">
4383            <div class="h-px w-full rounded-[1px]"
4384                 style="background: linear-gradient(to right, rgba(127,121,209,0) 0%, #7F79D1 100%);"></div>
4385            <div class="absolute top-1/2 -translate-y-1/2 transition-[left] duration-300 ease-out will-change-[left,opacity]"
4386                 :style="'left: ' + arrowLeft + 'px'">
4387                <div class="flex items-center justify-center h-[33px] px-4 rounded-full bg-purple-10 text-purple-500">
4388                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
4389                        <path d="M8.91 19.92L15.43 13.4C16.2 12.63 16.2 11.37 15.43 10.6L8.91 4.08"
4390                              stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"
4391                              stroke-linecap="round" stroke-linejoin="round"/>
4392                    </svg>
4393                </div>
4394            </div>
4395        </div>
4396    </div>
4397</div>
4398</div>
4399        </div>
4400    
4401
4402</section>
4403<section
4404     id="faq"     class="page-section"
4405         data-section-label="FAQ"      aria-labelledby="heading-faq"
4406    >
4407            <div class="page-wrapper relative z-10 flex flex-col items-center gap-8 lg:gap-10">
4408        <h2
4409                id="heading-faq"
4410                data-reveal
4411                class="text-heading-section text-dark-850 lg:text-center"
4412        >
4413            <span>Questions</span>
4414            <br class="hidden lg:inline" aria-hidden="true">
4415            <span>fréquentes</span>
4416        </h2>
4417
4418        <div data-reveal-group class="w-full grid grid-cols-1 gap-4 lg:gap-[var(--grid-gutter)] lg:grid-cols-2">
4419                                            <div
4420                        x-data="{ open: true }"
4421                        class="border rounded-xl lg:rounded-2xl transition-all"
4422                        :class="open
4423                        ? 'bg-white-0 border-overlay-border shadow-[var(--shadow-faq)]'
4424                        : 'bg-transparent border-overlay-border'"
4425                >
4426                    <button
4427                            type="button"
4428                            class="flex items-center justify-between gap-4 w-full p-4 lg:p-8 text-left cursor-pointer"
4429                            @click="open = !open"
4430                            :aria-expanded="open.toString()"
4431                            aria-controls="faq-panel-0"
4432                    >
4433                        <span
4434                                class="font-helvetica-now-display font-medium text-base lg:text-lg leading-[1.4]"
4435                                :class="open ? 'text-purple-400' : 'text-dark-850'"
4436                        >Comment fonctionne l&#039;alerte communautaire ?</span>
4437
4438                        <span
4439                                class="shrink-0 flex items-center justify-center size-9 rounded-full transition-colors"
4440                                :class="open ? 'bg-purple-300' : 'bg-blue-15'"
4441                        >
4442                                                            <img
4443                                        :src="open ? 'https://animou-app.com/themes/animou/img/landing/faq/minus-icon.svg' : 'https://animou-app.com/themes/animou/img/landing/faq/plus-icon.svg'"
4444                                        alt=""
4445                                        aria-hidden="true"
4446                                        class="size-4"
4447                                >
4448                                                    </span>
4449                    </button>
4450
4451                                            <div
4452                                id="faq-panel-0"
4453                                x-show="open"
4454                                x-transition.opacity.duration.200ms
4455                                class="px-4 pb-4 lg:px-8 lg:pb-8 -mt-2"
4456                        >
4457                            <p class="text-body text-dark-850">
4458                                Vous signalez un animal perdu, trouvé ou vu avec une photo, une description et une localisation. L&#039;alerte est ensuite diffusée localement pour mobiliser rapidement les personnes à proximité.
4459                            </p>
4460                        </div>
4461                                    </div>
4462                                            <div
4463                        x-data="{ open: true }"
4464                        class="border rounded-xl lg:rounded-2xl transition-all"
4465                        :class="open
4466                        ? 'bg-white-0 border-overlay-border shadow-[var(--shadow-faq)]'
4467                        : 'bg-transparent border-overlay-border'"
4468                >
4469                    <button
4470                            type="button"
4471                            class="flex items-center justify-between gap-4 w-full p-4 lg:p-8 text-left cursor-pointer"
4472                            @click="open = !open"
4473                            :aria-expanded="open.toString()"
4474                            aria-controls="faq-panel-1"
4475                    >
4476                        <span
4477                                class="font-helvetica-now-display font-medium text-base lg:text-lg leading-[1.4]"
4478                                :class="open ? 'text-purple-400' : 'text-dark-850'"
4479                        >L&#039;application est-elle vraiment gratuite ?</span>
4480
4481                        <span
4482                                class="shrink-0 flex items-center justify-center size-9 rounded-full transition-colors"
4483                                :class="open ? 'bg-purple-300' : 'bg-blue-15'"
4484                        >
4485                                                            <img
4486                                        :src="open ? 'https://animou-app.com/themes/animou/img/landing/faq/minus-icon.svg' : 'https://animou-app.com/themes/animou/img/landing/faq/plus-icon.svg'"
4487                                        alt=""
4488                                        aria-hidden="true"
4489                                        class="size-4"
4490                                >
4491                                                    </span>
4492                    </button>
4493
4494                                            <div
4495                                id="faq-panel-1"
4496                                x-show="open"
4497                                x-transition.opacity.duration.200ms
4498                                class="px-4 pb-4 lg:px-8 lg:pb-8 -mt-2"
4499                        >
4500                            <p class="text-body text-dark-850">
4501                                Oui. Animou est et restera gratuite pour les fonctionnalités essentielles. Aucun frais caché.
4502                            </p>
4503                        </div>
4504                                    </div>
4505                                            <div
4506                        x-data="{ open: false }"
4507                        class="border rounded-xl lg:rounded-2xl transition-all"
4508                        :class="open
4509                        ? 'bg-white-0 border-overlay-border shadow-[var(--shadow-faq)]'
4510                        : 'bg-transparent border-overlay-border'"
4511                >
4512                    <button
4513                            type="button"
4514                            class="flex items-center justify-between gap-4 w-full p-4 lg:p-8 text-left cursor-pointer"
4515                            @click="open = !open"
4516                            :aria-expanded="open.toString()"
4517                            aria-controls="faq-panel-2"
4518                    >
4519                        <span
4520                                class="font-helvetica-now-display font-medium text-base lg:text-lg leading-[1.4]"
4521                                :class="open ? 'text-purple-400' : 'text-dark-850'"
4522                        >Mes données personnelles sont-elles protégées ?</span>
4523
4524                        <span
4525                                class="shrink-0 flex items-center justify-center size-9 rounded-full transition-colors"
4526                                :class="open ? 'bg-purple-300' : 'bg-blue-15'"
4527                        >
4528                                                            <img
4529                                        :src="open ? 'https://animou-app.com/themes/animou/img/landing/faq/minus-icon.svg' : 'https://animou-app.com/themes/animou/img/landing/faq/plus-icon.svg'"
4530                                        alt=""
4531                                        aria-hidden="true"
4532                                        class="size-4"
4533                                >
4534                                                    </span>
4535                    </button>
4536
4537                                            <div
4538                                id="faq-panel-2"
4539                                x-show="open"
4540                                x-transition.opacity.duration.200ms
4541                                class="px-4 pb-4 lg:px-8 lg:pb-8 -mt-2"
4542                        >
4543                            <p class="text-body text-dark-850">
4544                                Oui. La protection des données fait partie de nos priorités. Vos informations sont traitées avec soin et ne sont pas revendues.
4545                            </p>
4546                        </div>
4547                                    </div>
4548                                            <div
4549                        x-data="{ open: false }"
4550                        class="border rounded-xl lg:rounded-2xl transition-all"
4551                        :class="open
4552                        ? 'bg-white-0 border-overlay-border shadow-[var(--shadow-faq)]'
4553                        : 'bg-transparent border-overlay-border'"
4554                >
4555                    <button
4556                            type="button"
4557                            class="flex items-center justify-between gap-4 w-full p-4 lg:p-8 text-left cursor-pointer"
4558                            @click="open = !open"
4559                            :aria-expanded="open.toString()"
4560                            aria-controls="faq-panel-3"
4561                    >
4562                        <span
4563                                class="font-helvetica-now-display font-medium text-base lg:text-lg leading-[1.4]"
4564                                :class="open ? 'text-purple-400' : 'text-dark-850'"
4565                        >Puis-je aider même si je n&#039;ai pas perdu d&#039;animal ?</span>
4566
4567                        <span
4568                                class="shrink-0 flex items-center justify-center size-9 rounded-full transition-colors"
4569                                :class="open ? 'bg-purple-300' : 'bg-blue-15'"
4570                        >
4571                                                            <img
4572                                        :src="open ? 'https://animou-app.com/themes/animou/img/landing/faq/minus-icon.svg' : 'https://animou-app.com/themes/animou/img/landing/faq/plus-icon.svg'"
4573                                        alt=""
4574                                        aria-hidden="true"
4575                                        class="size-4"
4576                                >
4577                                                    </span>
4578                    </button>
4579
4580                                            <div
4581                                id="faq-panel-3"
4582                                x-show="open"
4583                                x-transition.opacity.duration.200ms
4584                                class="px-4 pb-4 lg:px-8 lg:pb-8 -mt-2"
4585                        >
4586                            <p class="text-body text-dark-850">
4587                                Oui. Chaque utilisateur peut contribuer en restant attentif aux alertes autour de lui et en aidant à relayer les signalements.
4588                            </p>
4589                        </div>
4590                                    </div>
4591                    </div>
4592
4593            </div>
4594
4595            <div class="page-wrapper hidden lg:block pointer-events-none pt-[70px]">
4596    <div x-data="sectionNav({ inheritPrevious: false })"
4597     class="transition-opacity duration-300"
4598     :style="'opacity: ' + opacity"
4599     x-cloak>
4600    <div class="w-[425px]">
4601        <div class="flex items-center justify-end gap-3 font-helvetica-now-display text-lg leading-[1.4] mb-[20px] text-purple-500">
4602            <span class="tabular-nums" x-text="number"></span>
4603            <span x-text="label"></span>
4604        </div>
4605        <div class="relative">
4606            <div class="h-px w-full rounded-[1px]"
4607                 style="background: linear-gradient(to right, rgba(127,121,209,0) 0%, #7F79D1 100%);"></div>
4608            <div class="absolute top-1/2 -translate-y-1/2 transition-[left] duration-300 ease-out will-change-[left,opacity]"
4609                 :style="'left: ' + arrowLeft + 'px'">
4610                <div class="flex items-center justify-center h-[33px] px-4 rounded-full bg-purple-10 text-purple-500">
4611                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
4612                        <path d="M8.91 19.92L15.43 13.4C16.2 12.63 16.2 11.37 15.43 10.6L8.91 4.08"
4613                              stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"
4614                              stroke-linecap="round" stroke-linejoin="round"/>
4615                    </svg>
4616                </div>
4617            </div>
4618        </div>
4619    </div>
4620</div>
4621</div>
4622    
4623    
4624                
4624<script type="application/ld+json">
4625{
4626    "@context": "https://schema.org",
4627    "@type": "FAQPage",
4628    "mainEntity": [
4629        {
4630            "@type": "Question",
4631            "name": "Comment fonctionne l'alerte communautaire ?",
4632            "acceptedAnswer": {
4633                "@type": "Answer",
4634                "text": "Vous signalez un animal perdu, trouvé ou vu avec une photo, une description et une localisation. L'alerte est ensuite diffusée localement pour mobiliser rapidement les personnes à proximité."
4635            }
4636        },
4637        {
4638            "@type": "Question",
4639            "name": "L'application est-elle vraiment gratuite ?",
4640            "acceptedAnswer": {
4641                "@type": "Answer",
4642                "text": "Oui. Animou est et restera gratuite pour les fonctionnalités essentielles. Aucun frais caché."
4643            }
4644        },
4645        {
4646            "@type": "Question",
4647            "name": "Mes données personnelles sont-elles protégées ?",
4648            "acceptedAnswer": {
4649                "@type": "Answer",
4650                "text": "Oui. La protection des données fait partie de nos priorités. Vos informations sont traitées avec soin et ne sont pas revendues."
4651            }
4652        },
4653        {
4654            "@type": "Question",
4655            "name": "Puis-je aider même si je n'ai pas perdu d'animal ?",
4656            "acceptedAnswer": {
4657                "@type": "Answer",
4658                "text": "Oui. Chaque utilisateur peut contribuer en restant attentif aux alertes autour de lui et en aidant à relayer les signalements."
4659            }
4660        }
4661    ]
4662}
4663        </script>
4663
4664    
4665
4666</section>
4667<section
4668     id="download"     class="page-section"
4669            data-viewport-motion
4670        x-data="{ viewportMotionActive: false }"
4671        x-intersect:enter.margin.-10%="viewportMotionActive = true"
4672        x-intersect:leave.margin.-10%="viewportMotionActive = false"
4673        :class="{
4674            'viewport-motion-active': viewportMotionActive,
4675            'viewport-motion-pending': ! viewportMotionActive,
4676        }"
4677         data-section-label="Téléchargement"      aria-labelledby="heading-download"
4678    >
4679            <div class="page-wrapper">
4680            <div data-reveal-group class="flex flex-col lg:flex-row items-center gap-10 lg:gap-16 w-full">
4681
4682        
4683        <div class="flex flex-col gap-8 lg:gap-12 flex-1 w-full min-w-0">
4684            
4685            <div class="flex flex-col gap-4">
4686                <h2
4687                        id="heading-download"
4688                        class="text-heading-section text-dark-850"
4689                >Téléchargez Animou gratuitement</h2>
4690                <p class="text-subtitle text-dark-700">
4691                    Disponible dès maintenant sur l&#039;App Store et Google Play.
4692                </p>
4693            </div>
4694
4695            
4696            <div class="flex flex-wrap lg:flex-nowrap gap-3 lg:gap-4 w-full">
4697                <a
4698    href="https://apps.apple.com/fr/app/animou-animaux-perdus/id6779167347"
4699     data-track="appstore"     class="
4700        flex items-center justify-center lg:justify-start gap-2 h-[60px] lg:h-[66px] px-3 lg:px-[21px] rounded-[10px]
4701        bg-purple-500 border border-white-0/20 no-underline
4702        hover:bg-purple-400 transition-colors w-[180px] lg:w-[200px] shrink-0
4703    "
4704>
4705            <img
4706            src="https://animou-app.com/themes/animou/img/landing/download/app-store-icon.svg"
4707            alt=""
4708            loading="lazy"
4709            aria-hidden="true" class="size-6 lg:size-8 shrink-0"
4710        />
4711            <span class="flex flex-col font-helvetica-now-display font-medium leading-[1.2] text-white-0">
4712        <span class="text-[10px] lg:text-xs">Disponible sur</span>
4713        <span class="text-sm lg:text-[15px] whitespace-nowrap">App Store</span>
4714    </span>
4715</a>
4716                <a
4717    href="https://play.google.com/store/apps/details?id=com.animou.app"
4718     data-track="playstore"     class="
4719        flex items-center justify-center lg:justify-start gap-2 h-[60px] lg:h-[66px] px-3 lg:px-[21px] rounded-[10px]
4720        bg-purple-500 border border-white-0/20 no-underline
4721        hover:bg-purple-400 transition-colors w-[180px] lg:w-[200px] shrink-0
4722    "
4723>
4724            <img
4725            src="https://animou-app.com/themes/animou/img/landing/download/google-play-icon.svg"
4726            alt=""
4727            loading="lazy"
4728            aria-hidden="true" class="size-6 lg:size-8 shrink-0"
4729        />
4730            <span class="flex flex-col font-helvetica-now-display font-medium leading-[1.2] text-white-0">
4731        <span class="text-[10px] lg:text-xs">Disponible sur</span>
4732        <span class="text-sm lg:text-[15px] whitespace-nowrap">Google Play</span>
4733    </span>
4734</a>
4735            </div>
4736        </div>
4737
4738        
4739        <div class="
4740            relative flex items-end justify-center flex-1 w-full min-w-0
4741            h-[340px] lg:h-[500px]
4742            rounded-2xl lg:rounded-3xl overflow-hidden
4743            bg-gradient-to-b from-purple-100 to-white-0 px-4 pt-8 lg:px-12 lg:pt-16
4744        ">
4745            
4746            <div
4747    class="absolute inset-0 pointer-events-none opacity-80 animate-[grid-drift_8s_linear_infinite]"
4748    style="background-image: url('https://animou-app.com/themes/animou/img/landing/how-it-works/dot-grid.svg');
4749           background-size: 62.7px 62.7px;
4750           mask-image: linear-gradient(to bottom left, black 0%, transparent 75%);
4751           -webkit-mask-image: linear-gradient(to bottom left, black 0%, transparent 75%);"
4752    aria-hidden="true"
4753></div>
4754
4755            
4756            <div class="relative z-10 w-[60%] lg:w-[55%] max-w-[240px] lg:max-w-[384px] h-full flex items-end justify-center">
4757                                    <img
4758        src="/img/30/phone-screen.webp?q=80&amp;fit=contain&amp;w=384&amp;h=700&amp;s=15a07b937be6905c15a326ce8a6b7781"
4759         srcset="/img/30/phone-screen.webp?q=80&amp;fit=contain&amp;w=768&amp;h=1400&amp;s=ce24bee531e33fa6a23fa1b4a02521bc 2x"                  width="384"          height="700"         alt="Application mobile Animou"
4760        loading="lazy"
4761        decoding="async"
4762        class="w-full h-auto object-contain rounded-t-pill lg:rounded-t-card drop-shadow-2xl"
4763    />
4764                
4765                
4766                <div class="
4767                    absolute top-1/3 lg:top-[50%] right-[45%] lg:right-[60%] z-20
4768                    flex items-center gap-2 lg:gap-4
4769                    bg-white-0 border border-white-0/60 rounded-[10px] lg:rounded-pill
4770                    pl-2 lg:pl-4 pr-3 lg:pr-6 py-2 lg:py-4
4771                    shadow-xl backdrop-blur-sm
4772                    hover:-translate-y-1 transition-transform duration-300
4773                    w-max max-w-[180px] lg:max-w-none
4774                ">
4775                                            <div class="size-6 lg:size-10 shrink-0 flex items-center justify-center bg-purple-15 rounded-full text-purple-500">
4776                            <img
4777            src="https://animou-app.com/themes/animou/img/landing/download/bell-icon.svg"
4778            alt=""
4779            loading="lazy"
4780            aria-hidden="true" class="size-3.5 lg:size-6"
4781        />
4782                            </div>
4783                                        <div class="flex flex-col gap-px">
4784                        <strong class="font-helvetica-now-display font-bold text-xs lg:text-lg leading-[1.2] lg:leading-[1.4] text-dark-850 truncate">Milo retrouvé !</strong>
4785                        <span class="font-helvetica-now-display font-normal text-[10px] lg:text-sm leading-[1.2] lg:leading-[1.4] text-gray-500">Rue des Acacias - à l&#039;instant</span>
4786                    </div>
4787                </div>
4788
4789                
4790                <div class="
4791                    absolute bottom-1/4 left-[75%] lg:left-[85%] z-20
4792                    flex flex-col bg-white-0 border border-white-0/60
4793                    rounded-[10px] lg:rounded-pill px-3 lg:px-6 py-2 lg:py-4
4794                    shadow-xl backdrop-blur-sm
4795                    hover:-translate-y-1 transition-transform duration-300
4796                    w-max
4797                "
4798                     x-data="counter(43, '')"
4799                     x-intersect.once="animate()"
4800                >
4801                    <strong
4802                            class="font-helvetica-now-display font-bold text-base lg:text-2xl leading-[1.2] lg:leading-[1.4] tracking-[0.07px] text-purple-500"
4803                            x-text="formatted() ?? '43'"
4804                    >43</strong>
4805                    <span class="font-helvetica-now-display font-normal text-[10px] lg:text-base leading-[1.2] lg:leading-[1.4] text-gray-500">Voisins alertés</span>
4806                </div>
4807            </div>
4808        </div>
4809    </div>
4810
4811    <div class="page-wrapper hidden lg:block pointer-events-none pt-[70px]">
4812    <div x-data="sectionNav({ inheritPrevious: false })"
4813     class="transition-opacity duration-300"
4814     :style="'opacity: ' + opacity"
4815     x-cloak>
4816    <div class="w-[425px]">
4817        <div class="flex items-center justify-end gap-3 font-helvetica-now-display text-lg leading-[1.4] mb-[20px] text-purple-500">
4818            <span class="tabular-nums" x-text="number"></span>
4819            <span x-text="label"></span>
4820        </div>
4821        <div class="relative">
4822            <div class="h-px w-full rounded-[1px]"
4823                 style="background: linear-gradient(to right, rgba(127,121,209,0) 0%, #7F79D1 100%);"></div>
4824            <div class="absolute top-1/2 -translate-y-1/2 transition-[left] duration-300 ease-out will-change-[left,opacity]"
4825                 :style="'left: ' + arrowLeft + 'px'">
4826                <div class="flex items-center justify-center h-[33px] px-4 rounded-full bg-purple-10 text-purple-500">
4827                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
4828                        <path d="M8.91 19.92L15.43 13.4C16.2 12.63 16.2 11.37 15.43 10.6L8.91 4.08"
4829                              stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"
4830                              stroke-linecap="round" stroke-linejoin="round"/>
4831                    </svg>
4832                </div>
4833            </div>
4834        </div>
4835    </div>
4836</div>
4837</div>
4838        </div>
4839    
4840
4841</section>
4842
4843</div>
4844<!--[if ENDBLOCK]><![endif]-->
4845            </main>
4846
4847    <footer class="
4848    relative overflow-hidden text-white-0
4849    flex flex-col items-center pt-12 gap-16
4850    lg:pt-[180px] lg:gap-0
4851">
4852    
4853    
4854    <picture>
4855    
4856                    <source
4857            media="(min-width: 100rem)"
4858            type="image/avif"
4859            srcset="/img/31/background.webp?w=1920&amp;fm=avif&amp;q=75&amp;fit=cover&amp;s=e61a360f03e7fe7fd3980f8646d80b54"
4860            width="1920"
4861                    />
4862                    <source
4863            media="(min-width: 75rem)"
4864            type="image/avif"
4865            srcset="/img/31/background.webp?w=1600&amp;fm=avif&amp;q=75&amp;fit=cover&amp;s=268813a1299913b8e25bebab26887617"
4866            width="1600"
4867                    />
4868                    <source
4869            media="(min-width: 48rem)"
4870            type="image/avif"
4871            srcset="/img/31/background.webp?w=1200&amp;fm=avif&amp;q=75&amp;fit=cover&amp;s=2889607caa2f24ecba858d60ffca78d0"
4872            width="1200"
4873                    />
4874    
4875    
4876                    <source
4877            media="(min-width: 100rem)"
4878            type="image/webp"
4879            srcset="/img/31/background.webp?w=1920&amp;q=75&amp;fit=cover&amp;s=00152a8852041f3bb0352fbae10e29d4"
4880            width="1920"
4881                    />
4882                    <source
4883            media="(min-width: 75rem)"
4884            type="image/webp"
4885            srcset="/img/31/background.webp?w=1600&amp;q=75&amp;fit=cover&amp;s=a868a0dc85d773c1514158d84d2ac905"
4886            width="1600"
4887                    />
4888                    <source
4889            media="(min-width: 48rem)"
4890            type="image/webp"
4891            srcset="/img/31/background.webp?w=1200&amp;q=75&amp;fit=cover&amp;s=3b39581307f0751c7b2a37bfc48aae39"
4892            width="1200"
4893                    />
4894    
4895    
4896        <img
4897        src="/img/31/background.webp?w=820&amp;q=75&amp;fit=cover&amp;h=1560&amp;s=dedb0b69209eef71a300d87b64189529"
4898        width="820"
4899         height="1560"         alt=""
4900        loading="lazy"
4901        decoding="async"
4902        class="absolute inset-0 w-full h-full object-cover"
4903    />
4904</picture>
4905    <div class="absolute inset-0 bg-black/25"></div>
4906
4907    
4908    <div class="
4909        relative flex flex-col items-center gap-8 lg:flex-row lg:items-start lg:justify-between lg:gap-0
4910        footer-wrapper lg:mb-[180px] mb-12
4911    ">
4912        
4913        <div class="flex flex-col items-center gap-8 lg:items-start lg:gap-[var(--grid-gutter)] lg:w-[283px]">
4914            
4915            <a href="https://animou-app.com" class="no-underline" aria-label="Animou">
4916                <span class="sr-only">Animou</span>
4917                <span class="inline-block h-auto w-[200px] lg:w-[283px] aspect-[171/48] logo-white-0" style="--logo-url: url('https://animou-app.com/img/35/animou_logo.png?w=566&amp;fm=webp&amp;q=90&amp;fit=max&amp;s=0dea4fd3fbf49b3b8ba7473a6e30e8d7')" role="img" aria-hidden="true"></span>
4918            </a>
4919
4920            
4921            <div class="hidden lg:block">
4922                <div class="flex items-center gap-4">
4923                        <a
4924                href="https://x.com/animouapp"
4925                target="_blank"
4926                rel="noopener noreferrer"
4927                class="relative flex items-center justify-center size-12 rounded-full no-underline transition-colors
4928                    bg-white-0/20 hover:bg-white-0/30"
4929                aria-label="X"
4930            >
4931                <span class="sr-only">X</span>
4932                                    <span class="gradient-border-frame rounded-full" aria-hidden="true"></span>
4933                                <svg class="size-[22px] relative text-white-0" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
4934            <path d="M12.8537 9.52267L20.1137 1H18.4037L12.0937 8.39467L7.01367 1H1.13367L8.74367 12.1187L1.13367 21H2.84367L9.50367 13.2467L14.8637 21H20.7437L12.8537 9.52267ZM10.3737 12.2187L9.60367 11.1007L3.45367 2.32067H6.18367L11.0537 9.46667L11.8237 10.5847L18.4037 19.7387H15.6737L10.3737 12.2187Z" fill="currentColor"/>
4935        </svg>
4936                    </a>
4937                                <a
4938                href="https://instagram.com/animouapp"
4939                target="_blank"
4940                rel="noopener noreferrer"
4941                class="relative flex items-center justify-center size-12 rounded-full no-underline transition-colors
4942                    bg-white-0/20 hover:bg-white-0/30"
4943                aria-label="Instagram"
4944            >
4945                <span class="sr-only">Instagram</span>
4946                                    <span class="gradient-border-frame rounded-full" aria-hidden="true"></span>
4947                                <svg class="size-[22px] relative text-white-0" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
4948            <path d="M11 1.9C13.84 1.9 14.185 1.912 15.312 1.963C16.356 2.011 16.92 2.183 17.295 2.328C17.7896 2.51427 18.2371 2.80282 18.607 3.173C18.9772 3.54293 19.2657 3.99044 19.452 4.485C19.597 4.86 19.769 5.424 19.817 6.468C19.868 7.596 19.88 7.94 19.88 10.78C19.88 13.62 19.868 13.964 19.817 15.092C19.769 16.136 19.597 16.7 19.452 17.075C19.2657 17.5696 18.9772 18.0171 18.607 18.387C18.2371 18.7572 17.7896 19.0457 17.295 19.232C16.92 19.377 16.356 19.549 15.312 19.597C14.185 19.648 13.84 19.66 11 19.66C8.16 19.66 7.815 19.648 6.688 19.597C5.644 19.549 5.08 19.377 4.705 19.232C4.21044 19.0457 3.76293 18.7572 3.393 18.387C3.02282 18.0171 2.73427 17.5696 2.548 17.075C2.403 16.7 2.231 16.136 2.183 15.092C2.132 13.964 2.12 13.62 2.12 10.78C2.12 7.94 2.132 7.596 2.183 6.468C2.231 5.424 2.403 4.86 2.548 4.485C2.73427 3.99044 3.02282 3.54293 3.393 3.173C3.76293 2.80282 4.21044 2.51427 4.705 2.328C5.08 2.183 5.644 2.011 6.688 1.963C7.815 1.912 8.16 1.9 11 1.9ZM11 0C8.115 0 7.744 0.013 6.604 0.064C5.464 0.115 4.68 0.295 3.996 0.557C3.28283 0.826726 2.63432 1.24581 2.095 1.786C1.55481 2.32532 1.13573 2.97383 0.866 3.687C0.604 4.371 0.424 5.155 0.373 6.294C0.322 7.436 0.309 7.806 0.309 10.691C0.309 13.576 0.322 13.946 0.373 15.087C0.424 16.226 0.604 17.011 0.866 17.694C1.13573 18.4072 1.55481 19.0557 2.095 19.595C2.63432 20.1352 3.28283 20.5543 3.996 20.824C4.68 21.086 5.464 21.266 6.604 21.317C7.744 21.368 8.115 21.381 11 21.381C13.885 21.381 14.256 21.368 15.396 21.317C16.536 21.266 17.32 21.086 18.004 20.824C18.7172 20.5543 19.3657 20.1352 19.905 19.595C20.4452 19.0557 20.8643 18.4072 21.134 17.694C21.396 17.011 21.576 16.226 21.627 15.087C21.678 13.946 21.691 13.576 21.691 10.691C21.691 7.806 21.678 7.436 21.627 6.294C21.576 5.155 21.396 4.371 21.134 3.687C20.8643 2.97383 20.4452 2.32532 19.905 1.786C19.3657 1.24581 18.7172 0.826726 18.004 0.557C17.32 0.295 16.536 0.115 15.396 0.064C14.256 0.013 13.885 0 11 0Z" fill="currentColor"/>
4949            <path d="M11 5.2C9.89469 5.2 8.81363 5.52779 7.89254 6.14315C6.97145 6.7585 6.25108 7.63443 5.82074 8.6584C5.3904 9.68237 5.26913 10.8063 5.47209 11.8922C5.67506 12.978 
49496.19303 13.9752 6.96118 14.7574C7.72933 15.5396 8.71614 16.0757 9.79793 16.2988C10.8797 16.5219 12.0054 16.4217 13.0374 16.0109C14.0694 15.6001 14.9595 14.8971 15.5931 13.9883C16.2268 13.0796 16.576 12.0053 16.6 10.9C16.6199 10.1674 16.4934 9.43852 16.2277 8.75493C15.9621 8.07133 15.5626 7.44653 15.053 6.91667C14.5435 6.38682 13.9343 5.96284 13.2612 5.67035C12.5881 5.37786 11.8643 5.22276 11.132 5.214L11 5.2ZM11 14.581C10.2326 14.581 9.48236 14.3534 8.84348 13.9267C8.20459 13.5 7.70564 12.8934 7.40935 12.1851C7.11307 11.4768 7.0328 10.6987 7.17848 9.9473C7.32416 9.19594 7.68939 8.5049 8.22824 7.96218C8.76709 7.41946 9.4554 7.0493 10.2055 6.89837C10.9557 6.74744 11.7343 6.82235 12.4447 7.11373C13.155 7.40511 13.7652 7.89988 14.1966 8.53581C14.6281 9.17173 14.861 9.92042 14.866 10.688C14.8693 11.1982 14.7711 11.704 14.577 12.1746C14.3829 12.6451 14.0969 13.0713 13.7357 13.4283C13.3744 13.7854 12.945 14.0662 12.4721 14.2547C11.9993 14.4432 11.4924 14.5354 10.982 14.526L11 14.581Z" fill="currentColor"/>
4950            <path d="M16.868 6.282C17.5101 6.282 18.031 5.76113 18.031 5.119C18.031 4.47688 17.5101 3.956 16.868 3.956C16.2259 3.956 15.705 4.47688 15.705 5.119C15.705 5.76113 16.2259 6.282 16.868 6.282Z" fill="currentColor"/>
4951        </svg>
4952                    </a>
4953                                <a
4954                href="https://facebook.com/animouapp"
4955                target="_blank"
4956                rel="noopener noreferrer"
4957                class="relative flex items-center justify-center size-12 rounded-full no-underline transition-colors
4958                    bg-white-0/20 hover:bg-white-0/30"
4959                aria-label="Facebook"
4960            >
4961                <span class="sr-only">Facebook</span>
4962                                    <span class="gradient-border-frame rounded-full" aria-hidden="true"></span>
4963                                <svg class="size-[22px] relative text-white-0" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
4964            <path d="M22 11.0611C22 4.95106 17.08 0.00305557 11.004 5.55729e-07C4.922 -0.00305446 -0.00400066 4.93906 6.65188e-07 11.0551C0.00400079 16.5271 3.94 21.0691 9.154 21.9811V14.2591H6.4V11.0611H9.154V8.63006C9.154 5.89206 10.79 4.38406 13.272 4.38406C14.462 4.38406 15.706 4.59606 15.706 4.59606V7.28606H14.336C13.002 7.28606 12.588 8.11006 12.588 8.95606V11.0611H15.58L15.114 14.2591H12.588V21.9811C17.802 21.0691 21.996 16.5251 22 11.0611Z" fill="currentColor"/>
4965        </svg>
4966                    </a>
4967                                <a
4968                href="https://www.tiktok.com/@animouapp"
4969                target="_blank"
4970                rel="noopener noreferrer"
4971                class="relative flex items-center justify-center size-12 rounded-full no-underline transition-colors
4972                    bg-white-0/20 hover:bg-white-0/30"
4973                aria-label="TikTok"
4974            >
4975                <span class="sr-only">TikTok</span>
4976                                    <span class="gradient-border-frame rounded-full" aria-hidden="true"></span>
4977                                <svg class="size-[22px] relative text-white-0" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
4978            <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.27 6.27 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.34-6.34V8.75a8.18 8.18 0 0 0 4.77 1.52V6.84a4.84 4.84 0 0 1-1.01-.15Z" fill="currentColor"/>
4979        </svg>
4980                    </a>
4981                                <a
4982                href="https://www.linkedin.com/company/animou"
4983                target="_blank"
4984                rel="noopener noreferrer"
4985                class="relative flex items-center justify-center size-12 rounded-full no-underline transition-colors
4986                    bg-white-0/20 hover:bg-white-0/30"
4987                aria-label="LinkedIn"
4988            >
4989                <span class="sr-only">LinkedIn</span>
4990                                    <span class="gradient-border-frame rounded-full" aria-hidden="true"></span>
4991                                <svg class="size-[22px] relative text-white-0" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
4992            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 1 1 0-4.124 2.062 2.062 0 0 1 0 4.124zM6.87 20.452H3.804V9H6.87v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" fill="currentColor"/>
4993        </svg>
4994                    </a>
4995            </div>
4996            </div>
4997        </div>
4998
4999        
5000                    <nav class="
5001                flex flex-col gap-8
5002                lg:flex-row lg:justify-between lg:w-[630px]
5003            " aria-label="Navigation du pied de page">
5004                                                        <div class="text-center lg:text-left">
5005                        <h3 class="font-helvetica-now-display text-lg font-bold leading-[1.4] uppercase text-white-0 mb-2 lg:mb-4">
5006                            Produit
5007                        </h3>
5008                                                    <ul class="flex flex-col gap-2 lg:gap-3 list-none p-0 m-0">
5009                                                                    <li><a href="/application-mobile" class="font-helvetica-now-display text-base font-medium leading-[1.4] text-white-0 no-underline hover:opacity-70 transition-opacity"  target="_self" rel="noopener noreferrer" >Application</a></li>
5010                                                                    <li><a href="/faq" class="font-helvetica-now-display text-base font-medium leading-[1.4] text-white-0 no-underline hover:opacity-70 transition-opacity"  target="_self" rel="noopener noreferrer" >FAQ</a></li>
5011                                                            </ul>
5012                                            </div>
5013                                                        <div class="text-center lg:text-left">
5014                        <h3 class="font-helvetica-now-display text-lg font-bold leading-[1.4] uppercase text-white-0 mb-2 lg:mb-4">
5015                            Entreprise
5016                        </h3>
5017                                                    <ul class="flex flex-col gap-2 lg:gap-3 list-none p-0 m-0">
5018                                                                    <li><a href="/a-propos" class="font-helvetica-now-display text-base font-medium leading-[1.4] text-white-0 no-underline hover:opacity-70 transition-opacity"  target="_self" rel="noopener noreferrer" >À propos</a></li>
5019                                                                    <li><a href="/devenir-ambassadeur" class="font-helvetica-now-display text-base font-medium leading-[1.4] text-white-0 no-underline hover:opacity-70 transition-opacity"  target="_self" rel="noopener noreferrer" >Ambassadeur</a></li>
5020                                                                    <li><a href="/devenir-partenaire" class="font-helvetica-now-display text-base font-medium leading-[1.4] text-white-0 no-underline hover:opacity-70 transition-opacity"  target="_self" rel="noopener noreferrer" >Partenaire</a></li>
5021                                                                    <li><a href="/remerciements" class="font-helvetica-now-display text-base font-medium leading-[1.4] text-white-0 no-underline hover:opacity-70 transition-opacity"  target="_self" rel="noopener noreferrer" >Remerciements</a></li>
5022                                                            </ul>
5023                                            </div>
5024                                                        <div class="text-center lg:text-left">
5025                        <h3 class="font-helvetica-now-display text-lg font-bold leading-[1.4] uppercase text-white-0 mb-2 lg:mb-4">
5026                            Support
5027                        </h3>
5028                                                    <ul class="flex flex-col gap-2 lg:gap-3 list-none p-0 m-0">
5029                                                                    <li><a href="/contact" class="font-helvetica-now-display text-base font-medium leading-[1.4] text-white-0 no-underline hover:opacity-70 transition-opacity"  target="_self" rel="noopener noreferrer" >Contact</a></li>
5030                                                                    <li><a href="/mentions-legales" class="font-helvetica-now-display text-base font-medium leading-[1.4] text-white-0 no-underline hover:opacity-70 transition-opacity"  target="_self" rel="noopener noreferrer" >Mentions légales</a></li>
5031                                                                    <li><a href="/politique-de-confidentialite" class="font-helvetica-now-display text-base font-medium leading-[1.4] text-white-0 no-underline hover:opacity-70 transition-opacity"  target="_self" rel="noopener noreferrer" >Confidentialité</a></li>
5032                                                                    <li><a href="/cgu" class="font-helvetica-now-display text-base font-medium leading-[1.4] text-white-0 no-underline hover:opacity-70 transition-opacity"  target="_self" rel="noopener noreferrer" >C.G.U</a></li>
5033                                                            </ul>
5034                                            </div>
5035                            </nav>
5036            </div>
5037
5038    
5039            <div class="relative footer-wrapper mb-12 lg:mb-[60px]">
5040            <div class="
5041                flex flex-col items-center gap-6
5042                lg:flex-row lg:items-center lg:justify-between
5043                bg-white-0/10 backdrop-blur-[13.875px] rounded-card
5044                px-6 py-8 lg:px-10 lg:py-10
5045            ">
5046                <div class="text-center lg:text-left lg:max-w-[400px]">
5047                    <h3 class="font-helvetica-now-display text-xl font-bold leading-[1.4] text-white-0">
5048                        Restons mobilisés pour eux
5049                    </h3>
5050                    <p class="mt-1 font-helvetica-now-display text-sm leading-[1.6] text-white-0/70">
5051                        Recevez les conseils, les actualités et les initiatives d’Animou pour mieux protéger nos animaux, ensemble.
5052                    </p>
5053                </div>
5054
5055                <div
5056        class="w-full lg:max-w-[420px]"
5057        x-data="newsletterForm('https://animou-app.com/newsletter/subscribe')"
5058    >
5059        
5060        <form
5061            x-show="!success"
5062            x-transition:leave="transition ease-in duration-200"
5063            x-transition:leave-start="opacity-100 scale-100"
5064            x-transition:leave-end="opacity-0 scale-95"
5065            @submit.prevent="submit"
5066            aria-label="Inscription à la newsletter"
5067            novalidate="novalidate"
5068            class="relative"
5069        >
5070            <div class="
5071                flex items-center rounded-card
5072                h-[48px] lg:h-[56px] pl-4 pr-[5px]
5073                bg-white-0 border border-gray-75
5074                transition-all duration-200
5075                focus-within:border-overlay-border focus-within:shadow-input-focus
5076                focus-within:ring-2 focus-within:ring-purple-300/40
5077            ">
5078                <label class="sr-only" for="footer-newsletter-email">Votre adresse email</label>
5079                <input
5080                    id="footer-newsletter-email"
5081                    type="email"
5082                    x-model="form.email"
5083                    @change="form.validate('email')"
5084                    required
5085                    autocomplete="email"
5086                    aria-required="true"
5087                    placeholder="Votre adresse email"
5088                    class="
5089                        flex-1 min-w-0
5090                        bg-transparent border-none outline-none focus-visible:outline-none
5091                        font-helvetica-now-display font-normal text-base leading-[1.4]
5092                        text-dark-850 placeholder:text-gray-400
5093                    "
5094                >
5095                <button
5096                    type="submit"
5097                    :disabled="form?.processing"
5098                    class="
5099                        shrink-0 flex items-center justify-center
5100                        rounded-btn whitespace-nowrap
5101                        h-[38px] lg:h-[46px] px-5 max-[380px]:px-3 max-[380px]:aspect-square
5102                        bg-dark-790 text-white-0
5103                        text-body-sm font-medium
5104                        transition-all duration-200
5105                        hover:bg-dark-750
5106                        disabled:opacity-50 disabled:cursor-not-allowed
5107                    "
5108                >
5109                    <span x-show="!form?.processing" class="max-[380px]:hidden">S&#039;inscrire</span>
5110                    <svg x-show="!form?.processing" class="hidden max-[380px]:block h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
5111                        <path d="M5.85 3.5a.75.75 0 0 0-1.117-1 9.719 9.719 0 0 0-2.348 4.876.75.75 0 0 0 1.479.248A8.219 8.219 0 0 1 5.85 3.5ZM19.267 2.5a.75.75 0 1 0-1.118 1 8.22 8.22 0 0 1 1.987 4.124.75.75 0 0 0 1.48-.248A9.72 9.72 0 0 0 19.266 2.5Z" />
5112                        <path fill-rule="evenodd" d="M12 2.25A6.75 6.75 0 0 0 5.25 9v.75a8.217 8.217 0 0 1-2.119 5.52.75.75 0 0 0 .298 1.206c1.544.57 3.16.99 4.831 1.243a3.75 3.75 0 1 0 7.48 0 24.583 24.583 0 0 0 4.83-1.244.75.75 0 0 0 .298-1.205 8.217 8.217 0 0 1-2.118-5.52V9A6.75 6.75 0 0 0 12 2.25ZM9.75 18c0-.034 0-.067.002-.1a25.05 25.05 0 0 0 4.496 0l.002.1a2.25 2.25 0 1 1-4.5 0Z" clip-rule="evenodd" />
5113                    </svg>
5114                    <span x-show="form?.processing" x-cloak>
5115                        <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
5116                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
5117                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
5118                        </svg>
5119                    </span>
5120                </button>
5121            </div>
5122
5123            
5124            <div class="absolute left-0 top-full mt-1">
5125                <template x-if="form?.invalid('email')">
5126                    <p class="text-body-sm text-red-600" x-text="form.errors.email"></p>
5127                </template>
5128                <template x-if="errorMessage">
5129                    <p class="text-body-sm text-red-600" x-text="errorMessage"></p>
5130                </template>
5131
5132                            </div>
5133        </form>
5134
5135        
5136        <div
5137            x-show="success"
5138            x-cloak
5139            x-transition:enter="transition ease-out duration-500 delay-200"
5140            x-transition:enter-start="opacity-0 translate-y-2"
5141            x-transition:enter-end="opacity-100 translate-y-0"
5142            class="
5143                flex items-center gap-3
5144                h-[48px] lg:h-[56px] px-5
5145                rounded-card bg-emerald-50
5146            "
5147        >
5148            
5149            <svg
5150                class="shrink-0 w-5 h-5 text-emerald-500"
5151                viewBox="0 0 20 20"
5152                fill="none"
5153                xmlns="http://www.w3.org/2000/svg"
5154            >
5155                <circle cx="10" cy="10" r="9" stroke="currentColor" stroke-width="1.5" opacity="0.3" />
5156                <path
5157                    d="M6 10.5L8.5 13L14 7"
5158                    stroke="currentColor"
5159                    stroke-width="1.8"
5160                    stroke-linecap="round"
5161                    stroke-linejoin="round"
5162                    style="
5163                        stroke-dasharray: 16;
5164                        stroke-dashoffset: 16;
5165                        animation: newsletter-check 0.4s ease-out 0.5s forwards;
5166                    "
5167                />
5168            </svg>
5169            <p class="text-body-sm font-medium text-emerald-700">Merci, votre inscription a bien été prise en compte !</p>
5170        </div>
5171
5172        <style>
5173            @keyframes newsletter-check {
5174                to { stroke-dashoffset: 0; }
5175            }
5176        </style>
5177    </div>
5178            </div>
5179        </div>
5180    
5181    
5182    <div class="relative self-stretch bg-dark-900 py-6">
5183        <div class="
5184            page-wrapper flex flex-col items-center gap-4
5185            lg:flex-row lg:justify-between lg:gap-0
5186            font-helvetica-now-display text-sm leading-[1.4]
5187        ">
5188            <div class="flex items-center gap-6 lg:order-3">
5189                                <span data-obf-email="uryyb|navzbh-ncc|pbz" class="text-white-0/70 lg:text-white-0 no-underline hover:text-white-0 transition-colors">Email protégé — activez JavaScript</span>
5190            </div>
5191
5192                            <nav class="flex items-center gap-4 lg:order-2" aria-label="Informations légales">
5193                            <button type="button" onclick="tarteaucitron.userInterface.openPanel
5193()"
5194                        class="lg:hidden text-white-0/70 no-underline hover:text-white-0 transition-colors cursor-pointer bg-transparent border-0 p-0 font-[inherit] text-[length:inherit] leading-[inherit]">
5195                    Gestion des cookies
5196                </button>
5197                </nav>
5198
5199            <p class="text-white-0/70 lg:order-1">
5200                &copy; 2026 Animou. Tous droits réservés.
5201            </p>
5202        </div>
5203    </div>
5204</footer>
5205
5206    <a
5207        href="#top"
5208        x-data="{ visible: false }"
5209        x-on:scroll.window="visible = window.scrollY > 400"
5210        x-show="visible"
5211        x-transition:enter="transition ease-out duration-300"
5212        x-transition:enter-start="opacity-0 translate-y-4"
5213        x-transition:enter-end="opacity-100 translate-y-0"
5214        x-transition:leave="transition ease-in duration-200"
5215        x-transition:leave-start="opacity-100 translate-y-0"
5216        x-transition:leave-end="opacity-0 translate-y-4"
5217        x-cloak
5218        aria-label="Retour en haut"
5219        class="fixed bottom-6 right-6 z-50 flex items-center justify-center size-12 rounded-full bg-primary text-white-0 shadow-lg hover:bg-primary-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
5220    >
5221        <span class="sr-only">Retour en haut</span>
5222        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5" aria-hidden="true">
5223            <path fill-rule="evenodd" d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z" clip-rule="evenodd" />
5224        </svg>
5225    </a>
5226
5227    
5227<script src="https://animou-app.com/livewire-1a8b74b9/livewire.min.js?id=8642c1d5"   data-csrf="nPp0aFD5nwzQw95GCjl894frMvKbrdPExvaLBFsn" data-module-url="https://animou-app.com/livewire-1a8b74b9" data-update-uri="https://animou-app.com/livewire-1a8b74b9/update" data-navigate-once="true"></script>
5227
5228    
5228<script>
5229window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}
5230(function(){var c=document.cookie.match(/tarteaucitron=([^;]+)/),t=c?decodeURIComponent(c[1]):'',ana=t.indexOf('gcmanalyticsstorage=true')!==-1,ads=t.indexOf('gcmadstorage=true')!==-1,aud=t.indexOf('gcmadsuserdata=true')!==-1;gtag('consent','default',{'analytics_storage':ana?'granted':'denied','ad_storage':ads?'granted':'denied','ad_user_data':aud?'granted':'denied','ad_personalization':aud?'granted':'denied','wait_for_update':ana||ads?0:800})})();
5231</script>
vendor: 64 bytes, lines 5231-5232
5231
5232<script async src="https://www.googletagmanager.com/gtag/js?id=
5232G-NSSSCXZKWB
vendor: 12 bytes, line 5232
5232"></script>
5233<script>gtag('js',new Date());gtag('config','G-NSSSCXZKWB');</script>
vendor: 1 bytes, line 5233
5233
5234<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/tarteaucitron.min.js"></script>
vendor: 1 bytes, line 5234
5234
5235<script>
5236document.addEventListener('DOMContentLoaded', function () {
5237    tarteaucitron.init({"privacyUrl":"","bodyPosition":"bottom","hashtag":"#tarteaucitron","cookieName":"tarteaucitron","orientation":"bottom","groupServices":false,"showDetailsOnClick":true,"serviceDefaultState":"wait","showAlertSmall":false,"cookieslist":false,"closePopup":false,"showIcon":true,"highPrivacy":true,"handleBrowserDNTRequest":false,"removeCredit":false,"moreInfoLink":true,"useExternalCss":true,"useExternalJs":false,"cookiesDuration":365,"readmoreLink":"","mandatory":true,"mandatoryCta":true,"googleConsentMode":true});
5238    tarteaucitron.lang.alertBigPrivacy = "<p></p>";
5239    tarteaucitron.user.facebookpixelId = '1955764788344181';
5240(tarteaucitron.job = tarteaucitron.job || []).push('facebookpixel');
5241tarteaucitron.user.tiktokId = 'D4I86R3C77UA1JCPSSUG';
5242(tarteaucitron.job = tarteaucitron.job || []).push('tiktok');
5243tarteaucitron.user.contentsquareID = 'f8ab87c817a2a';
5244(tarteaucitron.job = tarteaucitron.job || []).push('contentsquare');
5245(tarteaucitron.job = tarteaucitron.job || []).push('gcmanalyticsstorage');
5246(tarteaucitron.job = tarteaucitron.job || []).push('gcmadstorage');
5247(tarteaucitron.job = tarteaucitron.job || []).push('gcmadsuserdata');
5248});
5249</script>
5249
5250    
5250<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"ac8b8ca624894bb8a1035b929cee61e8","spa":2}' crossorigin="anonymous"></script>
5250
5251</body>
5252</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.