optimiser SEO et images, corriger age minimum inscription

frontend/src/pages/Accueil.jsx

@@ -3,9 +3,6 @@ import { Link } from 'react-router-dom'
 import usePageMeta from '../hooks/usePageMeta'
 import bannerImg from '../assets/img/banner-accueil.webp'
 
-// Tous les lots possibles hors grand lot (déjà mis en avant dans sa propre
-// carte). Chaque lot devient sa propre carte flottante, étalée en quinconce
-// le long de la partie droite de l'illustration plutôt qu'empilée en liste.
 const gains = [
   { label: 'Infuseur à thé', top: '26%', right: '26%', delay: 700, variant: 'a' },
   { label: 'Boîte 100 g détox ou infusion', top: '22%', right: '1%', delay: 850, variant: 'b' },
@@ -14,9 +11,6 @@ const gains = [
   { label: 'Coffret découverte 69 €', top: '84%', right: '24%', delay: 1300, variant: 'a' },
 ]
 
-// Légère inclinaison 3D des cartes de la bannière au passage de la souris,
-// façon « tilt card ». Fonctions déclarées hors du composant : elles ne
-// dépendent d'aucun state, inutile de les recréer à chaque rendu.
 function handleCardTilt(e) {
   const el = e.currentTarget
   const rect = el.getBoundingClientRect()
@@ -28,11 +22,6 @@ function resetCardTilt(e) {
   e.currentTarget.style.transform = ''
 }
 
-// Petites animations de thé générées en JS : position, taille, durée et
-// délai tirés au sort une seule fois (useMemo) pour parsemer toute la
-// bannière de feuilles/tasses/théières/cuillères qui dérivent doucement,
-// sans jamais se superposer deux fois de la même façon. Taille et opacité
-// relevées pour qu'elles restent bien visibles sur le fond teal.
 const TEA_EMOJI = ['🍃', '🍵', '🫖', '☕', '🥄', '✨']
 
 function createTeaParticles(count) {
@@ -100,12 +89,10 @@ const faqJsonLd = {
 
 export default function Accueil() {
   usePageMeta({
-    title: 'Jeu-concours 100 % Gagnant | Thé Tip Top — Thés bio et faits main',
+    title: 'Jeu-concours 100 % Gagnant du 2 au 31 octobre | Thé Tip Top',
     description: "Du 2 au 31 octobre, tout ticket de plus de 49 € de notre boutique de Nice porte un code 100 % gagnant. Saisissez le vôtre et repartez avec votre lot.",
   })
 
-  // Tirées au sort une seule fois au montage : la bannière ne doit pas
-  // réordonner ses particules de thé à chaque re-render.
   const teaParticles = useMemo(() => createTeaParticles(30), [])
 
   return (
@@ -113,25 +100,14 @@ export default function Accueil() {
 
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(faqJsonLd) }} />
 
-      {/* Bannière : fond teal plein cadre, illustration très grande et animée à l'entrée,
-          textes et cartes de gains répartis en plusieurs blocs pour occuper toute la zone
-          plutôt qu'une seule colonne dense. La composition « poster » en absolute (position:
-          static → absolute) ne s'active qu'à partir de lg (1024px) : en dessous — mobile ET
-          tablette —, un écran trop étroit ferait chevaucher le titre et l'illustration de façon
-          illisible (constaté sur iPad portrait), donc tout reste en empilement normal, dans
-          l'ordre du DOM, jusqu'à avoir vraiment la place. */}
       <section className="relative bg-[#006B6B] overflow-hidden">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 relative py-10 lg:py-0 lg:h-[680px] xl:h-[780px]">
 
-          {/* Halo doux derrière l'illustration (uniquement pertinent à partir de lg, où
-              l'illustration passe en fond de la composition) */}
           <div
             className="hidden lg:block absolute right-[-10%] top-1/2 -translate-y-1/2 w-[75%] h-[75%] rounded-full bg-white/10 blur-3xl"
             aria-hidden="true"
           />
 
-          {/* Particules de thé générées en JS (position/taille/durée tirées au sort dans
-              teaParticles), parsemées sur toute la bannière derrière le contenu. */}
           <div className="pointer-events-none absolute inset-0 overflow-hidden z-0" aria-hidden="true">
             {teaParticles.map((p) => (
               <span
@@ -152,7 +128,6 @@ export default function Accueil() {
             ))}
           </div>
 
-          {/* Titre */}
           <div className="static lg:absolute lg:left-0 lg:top-10 max-w-full lg:max-w-md mb-6 lg:mb-0">
             <p className="inline-block text-sm sm:text-base font-bold uppercase tracking-widest text-amber-300 border border-white/70 rounded-lg px-3.5 py-2 mb-3">
               Du 02 au 31 octobre 2026
@@ -163,10 +138,6 @@ export default function Accueil() {
             </h1>
           </div>
 
-          {/* Illustration : très grande à partir de lg, débordant du cadre en haut/bas (rogné
-              proprement par le overflow-hidden de la section) et glissant à l'entrée. En
-              dessous de lg, recadrée (object-cover) sur le personnage pour ne pas gaspiller
-              l'espace transparent intégré au visuel d'origine. */}
           <div className="relative -mx-4 sm:mx-0 lg:mx-0 mb-6 lg:mb-0 lg:contents">
             <div className="relative aspect-[16/10] sm:aspect-[21/9] overflow-hidden lg:hidden">
               <img
@@ -184,27 +155,14 @@ export default function Accueil() {
             />
           </div>
 
-          {/* Sous-titre : mis en évidence dans une carte « verre dépoli » distincte du fond
-              teal uni (bordure d'accent + fond translucide flouté), pour qu'il se détache
-              clairement plutôt que de se fondre dans le reste du texte blanc de la bannière. */}
           <p className="static lg:absolute lg:left-0 lg:top-1/2 lg:-translate-y-1/2 max-w-full lg:max-w-md text-lg sm:text-2xl lg:text-3xl font-semibold text-white leading-snug [text-wrap:balance] mb-6 lg:mb-0 bg-white/10 backdrop-blur-sm border-l-4 border-amber-300 rounded-2xl px-4 py-3 sm:px-6 sm:py-4 shadow-lg">
             À l'occasion de l'ouverture de notre{' '}
             <span className="text-amber-300">10<sup>e</sup> boutique</span> à Nice : chaque code
             distribué correspond à un lot réel, attribué à l'avance.
           </p>
 
-          {/* Cartes de gains : le grand lot (agrandi) + tous les autres lots possibles, en
-              cartes flottantes autour de l'illustration à partir de lg uniquement — masquées
-              sur mobile/tablette, où elles surchargeaient l'écran en plus du reste du contenu.
-              Chaque carte flotte doucement en continu (animate-card-float-*) et s'incline
-              légèrement au passage de la souris (onMouseMove → handleCardTilt), deux animations
-              portées par des conteneurs séparés pour ne pas se marcher dessus. */}
           <div className="hidden lg:contents">
 
-            {/* Grand lot : décalé plus bas et plus à droite que les autres cartes du haut
-                (elle touchait « Boîte détox ou infusion »), dans le grand espace libre entre
-                cette carte et « Coffret découverte 39 € », pour amorcer un arc de cercle autour
-                de l'illustration plutôt qu'un empilement dans le même coin. */}
             <div className="shrink-0 lg:absolute lg:right-[1%] lg:top-[45%] animate-banner-badge [animation-delay:500ms]">
               <div className="animate-card-float-a">
                 <div
@@ -220,14 +178,6 @@ export default function Accueil() {
               </div>
             </div>
 
-            {/* Les autres lots : une carte par lot, éclatées en quinconce (position en %
-                définie dans le tableau `gains`) plutôt qu'empilées dans une seule colonne.
-                top/right en style inline : ils ne s'appliquent qu'à partir de lg (seul
-                breakpoint où la carte passe en absolute), sans effet en dessous.
-                whitespace-nowrap plutôt qu'un max-w fixe : une carte plus étroite que sa
-                ligne de texte forçait un retour à la ligne qui laissait du blanc (ex. « Boîte
-                100 g détox ou » / « infusion »). En nowrap, chaque carte se limite exactement
-                à la largeur de son texte, sur une seule ligne, sans espace perdu. */}
             {gains.map((gain) => (
               <div
                 key={gain.label}
@@ -247,7 +197,6 @@ export default function Accueil() {
             ))}
           </div>
 
-          {/* CTA, remonté par rapport au bord bas de la bannière */}
           <div className="static lg:absolute lg:left-0 lg:bottom-24 xl:bottom-28 flex flex-col sm:flex-row gap-3 sm:gap-4">
             <Link
               to="/saisir-code-unique"
@@ -265,7 +214,6 @@ export default function Accueil() {
         </div>
       </section>
 
-      {/* Comment participer */}
       <section className="max-w-5xl mx-auto px-4 pt-6 sm:px-6 pb-12 sm:pb-20">
         <h2 className="text-2xl sm:text-3xl font-bold text-[#006B6B] mb-6 sm:mb-8 text-center">
           Comment participer ?
@@ -284,7 +232,6 @@ export default function Accueil() {
         </ol>
       </section>
 
-      {/* Questions fréquentes */}
       <section className="max-w-3xl mx-auto px-4 sm:px-6 pb-16 sm:pb-24">
         <h2 className="text-2xl sm:text-3xl font-bold text-[#006B6B] mb-6 sm:mb-8 text-center">
           Questions fréquentes