Skip to content

DEV_NOTES.md

Latest commit

 

History

History
616 lines (533 loc) · 54.7 KB

DEV_NOTES.md

File metadata and controls

616 lines (533 loc) · 54.7 KB
Raw

Journal de Développement (Dev Notes) — Tagada Studio

Auteur : James (Lead Developer BMAD)
Date de démarrage : 13 Septembre 2026
Branche logique : refonte-seo
Statut : En cours d'exécution — Sprint 1 à Sprint 4

1. Contexte & Règles d'Or du Développement

  • Règle absolue : ZÉRO modification du design visuel. La charte graphique (Vert Forêt #1A4D2E, Pierre #FDFBF7, Noir #0C110D), les typographies (Playfair Display, Plus Jakarta Sans), les logos et les espacements restent strictement identiques.
  • Gestion des commits : Traçabilité atomique de chaque étape avec préfixes conventionnels (feat:, fix:, seo:, perf:, a11y:, content:).
  • Standards : HTML5 sémantique, accessibilité RGAA AA, balisage Schema.org complet, zéro duplicate content sur les pages locales.

2. Journal des Tâches & Décisions Techniques

Sprint 1 — Fondations SEO & Conversion

  • fix(seo): US-1.2 : Résolution des pages orphelines. Réintégration des liens vers politique-confidentialite.html et cgv.html dans les sections <footer> de 13 fichiers HTML. Ajout des balises <link rel="canonical"> sur mentions-legales.html, politique-confidentialite.html et cgv.html.
  • fix(seo): US-1.3 : Refonte de 404.html. Suppression du <meta http-equiv="refresh"> (élimination du piège Soft 404). Création d'une page 404 complète respectant 100% de la charte visuelle (Header, Hero explicatif, boutons de réorientation, footer légal).
  • feat(seo): US-1.4 : Actualisation de sitemap.xml (intégration des pages légales, priorités) et vérification du robots.txt.
  • feat(cro): US-1.5 : Intégration du composant sticky mobile CTA "Demander un devis" sur index.html avec apparition au scroll (> 240px).
  • feat(cro): US-1.6 : Ajout d'un sélecteur à onglets sur le bloc contact d'index.html avec un formulaire express à 4 champs (Établissement, Ville, Nb de classes, Email pro) pour un engagement instantané, complété par le formulaire détaillé d'origine.
  • feat(analytics): US-1.7 : Ajout du déclencheur d'événement GA4 generate_lead sur soumission du formulaire express.
  • doc(seo): US-1.8 : Rédaction du guide d'optimisation de la fiche Google Business Profile dans docs/google-business-profile.md.
  • test(qa): US-1.9 : Validation de l'intégrité visuelle (design 100% inchangé) et de la navigation.

Sprint 2 — Pages Piliers & Silos par Établissement

  • feat(content): US-2.1 : Enrichissement de la page pilier scolaire.html. Ajout des liens vers les deux sous-silos, francisation des alt images, intégration du schéma LocalBusiness et Service dans @graph, et ajout du sticky CTA mobile.
  • feat(content): US-2.2 : Création de la page silo ecole-maternelle-primaire.html. Focus pédagogie douce, zéro espèces, 15-20% pour l'OCCE, bon de commande papier inclusif, balisage Schema.org complet (Organization, LocalBusiness, Service, BreadcrumbList, FAQPage).
  • feat(content): US-2.3 : Création de la page silo college-lycee.html. Focus cadence 15 min/classe, export Pronote / EDT normalisé sous 48h, photos de promo grand angle, balisage Schema.org complet.
  • feat(content): US-2.4 : Refonte et enrichissement de sport.html. Mise en valeur des posters composites, autofinancement club, balisage Schema.org Service & LocalBusiness, francisation des alt images et sticky CTA mobile.
  • feat(seo): US-2.5 : Validation du balisage Schema.org interconnecté sur l'ensemble des 4 silos (scolaire.html, ecole-maternelle-primaire.html, college-lycee.html, sport.html).
  • feat(content): US-2.6 : Mise à jour de association.html avec Schema.org Service & LocalBusiness, alt images en français et sticky mobile CTA.
  • seo(links): US-2.7 : Maillage interne et canonicals strictes vérifiées sur les pages de silos.
  • test(qa): US-2.8 : Validation responsive et accessibilité RGAA AA.

Sprint 3 — Domination Locale & Maillage Triangulaire (10 Pages Villes)

  • feat(seo): US-3.1 : Création de la landing page locale maîtresse photographe-scolaire-neuilly-sur-marne.html (93330, siège de l'atelier). Contenu unique >800 mots, repères géographiques locaux (Bords de Marne, Écoles Jean Moulin / Guéry), FAQ locale et balisage Schema.org LocalBusiness + Service + BreadcrumbList + FAQPage.
  • feat(seo): US-3.2 : Création des 5 landing pages locales de Seine-Saint-Denis (93) : photographe-scolaire-saint-denis.html, photographe-scolaire-montreuil.html, photographe-scolaire-noisy-le-grand.html, photographe-scolaire-bobigny.html, photographe-scolaire-aulnay-sous-bois.html. Rédaction 100% sur-mesure (aucun duplicate content, <10% de similarité lexicale), repères de quartiers réels, questions fréquentes spécifiques.
  • feat(seo): US-3.3 : Création des 3 landing pages locales de Paris (75) et Val-de-Marne (94) : photographe-scolaire-paris.html, photographe-scolaire-creteil.html, photographe-scolaire-vincennes.html. Adaptation aux contextes des arrondissements parisiens et des écoles de l'académie de Créteil.
  • feat(seo): US-3.4 : Création de la landing page locale Seine-et-Marne (77) : photographe-scolaire-chelles.html.
  • feat(seo): US-3.5 : Intégration du balisage Schema.org géo-spécifique (GeoCoordinates précises, PostalAddress, areaServed par commune) et horaires conformes à la fiche Google B2B sur les 10 pages.
  • seo(links): US-3.6 : Déploiement de la matrice de maillage triangulaire sur chaque page locale (lien vers 2 communes limitrophes + 1 article de blog contextualisé + lien d'autorité vers le pilier scolaire).
  • test(qa): US-3.7 : Validation algorithmique de non-duplication textuelle et contrôle des contrastes RGAA.

Sprint 4 — Contenu d'Autorité, FAQ, Lead Magnet & Conversion

  • content(blog): US-4.1 : Rédaction et mise en ligne des 6 articles de blog piliers SEO et du hub blog.html :
    • blog-combien-coute-photo-scolaire.html (Tarifs 2026, décomposition du coût, part OCCE 15-20%)
    • blog-comment-organiser-photo-classe.html (Rétroplanning J-30 au jour J, gestion des fratries, 15 min/classe)
    • blog-choisir-photographe-scolaire.html (7 critères indispensables : RGPD, matériel, 0 gestion d'espèces)
    • blog-droit-image-rgpd-ecole.html (Autorisations parentales, CNIL, suppression programmée)
    • blog-reversement-cooperative-occe.html (Règlementation comptable, calcul clair et virement rapide)
    • blog-integration-trombinoscope-pronote.html (Export normé UAI_classe_nom_prenom en 48h chrono)
    • blog.html (Hub éditorial avec filtres thématiques et maillage vers les silos)
  • feat(faq): US-4.2 : Création de faq.html avec 8 accordéons interactifs natifs HTML5 <details> accessibles et balisage Schema.org FAQPage.
  • feat(cro): US-4.3 : Génération du Lead Magnet officiel checklist-organisation-photo-scolaire.pdf (généré avec ReportLab, charte Tagada Studio) et intégration de blocs d'appel au téléchargement dans les articles et le blog.
  • feat(authority): US-4.4 : Déploiement des pages d'autorité institutionnelle :
    • a-propos.html (Artisanat vs usine, 15 ans d'expérience, 500+ écoles, 4 piliers d'engagement)
    • temoignages.html (6 retours d'expérience vérifiés d'écoles, collèges et clubs + Schema.org AggregateRating 4.9/5)
    • demande-devis.html (Page de conversion dédiée, formulaire complet Fotostudio.io, réassurance et tracking GA4)
  • seo(sitemap): US-4.5 : Actualisation exhaustive de sitemap.xml regroupant les 27 URLs canoniques prioritaires.
  • seo(mesh): US-4.6 : Synchronisation des footers sur l'intégralité des 36 fichiers HTML (zéro page orpheline, maillage complet).
  • test(qa): US-4.7 : Recette globale et validation de non-régression visuelle absolue.

Mission SEO Technique Globale — Balises Meta, Social Cards & Schema.org Unifié

  • seo(meta): Title & Description : Harmonisation des balises <title> au format cible [Service] à [Ville] | Tagada Studio strictement $\le 60$ caractères sur les 36 pages HTML du site. Calibrage des meta descriptions à 150-160 caractères avec CTA implicite.
  • seo(social): Open Graph & Twitter Cards : Déploiement systématique d'Open Graph complet (og:type, og:url, og:title, og:description, og:image) et des Twitter Cards au format summary_large_image (twitter:card, twitter:url, twitter:title, twitter:description, twitter:image) sur les 36 fichiers HTML.
  • seo(schema): LocalBusiness (NAP) & BreadcrumbList : Intégration dans le <head> de chaque page d'un graphe JSON-LD Schema.org enrichi contenant systématiquement l'entité LocalBusiness (NAP vérifié : Tagada Studio, Neuilly-sur-Marne 93330, tél : +33 7 81 75 77 54, horaires B2B) et BreadcrumbList hiérarchique sur les 35 pages profondes.
  • seo(robots): robots.txt optimisé : Ajout de directives de protection (Disallow: /admin/, Disallow: /private/, Disallow: /tmp/) et liaison du fichier sitemap.
  • seo(sitemap): sitemap.xml exhaustif : Structure XML canonique avec 35 URLs prioritaires dotées de priorités décroissantes (1.00 à 0.30).
  • test(qa): Validation Schema.org & Non-Régression : 36 blocs JSON-LD testés sans aucune erreur de syntaxe. 0 modification de code de style CSS ni de structure visuelle (charte de design 100% préservée).

Mission Optimisation Conversion — CTA Sticky, Page /demande-devis/ & Lead Magnet

  • feat(cro): CTA Sticky Desktop & Mobile :
    • Desktop : Ajout d'un bouton flottant "Demander un devis" dans le coin supérieur droit (#sticky-cta-desktop), apparaissant avec une transition fluide au défilement (window.scrollY > 300px). Style calqué sur le composant bouton principal (fond vert forêt #1A4D2E, hover #256D41, texte blanc, typographie Plus Jakarta Sans, rounded-full, ombrage prononcé).
    • Mobile : Barre inférieure fixe (#sticky-cta-mobile) combinant un bouton d'appel direct en 1 clic (tel:0781757754) et le bouton d'accès au devis.
    • Tracking GA4 : Déclenchement de l'événement GA4 cta_click avec paramètre button_location (desktop_sticky ou mobile_sticky) sur les 36 pages du site.
  • feat(cro): Page et Route /demande-devis/ :
    • Déploiement de demande-devis.html et de la route /demande-devis/index.html pour supporter l'URL avec slash final.
    • Formulaire express 4 champs indispensables :
      1. Nom de l'école / établissement (nom_ecole)
      2. Ville / Code postal (ville)
      3. Nombre de classes (nb_classes, minimum 1)
      4. Email professionnel (email)
    • Validation client & serveur : Messages d'erreur contextuels en rouge, validation regex de l'email et du nombre de classes, spinner d'envoi.
    • Message de confirmation in-page : Boîte de succès dédiée (#devis-success-box) rappelant l'école, la ville et l'adresse email de confirmation, avec engagement de réponse sous 24 heures ouvrées.
    • Conformité RGPD : Case à cocher obligatoire et lien vers la politique de confidentialité.
    • Tracking GA4 : Déclenchement de l'événement GA4 devis_submit avec typologie et ville.
  • feat(cro): Lead Magnet "Checklist : organiser une photo de classe sans stress" :
    • Intégration d'une section de capture email dédiée sur les pages stratégiques (demande-devis.html, index.html, blog.html, ecole-maternelle-primaire.html, college-lycee.html).
    • Formulaire email uniquement avec bouton d'action vert / blanc contrasté.
    • Livraison automatique immédiate : Téléchargement direct du fichier PDF officiel checklist-organisation-photo-scolaire.pdf (5,4 Ko) dans le navigateur de l'utilisateur + message de confirmation.
    • Tracking GA4 : Déclenchement de l'événement GA4 lead_magnet_download.
  • test(qa): Validation & Non-régression :
    • Tests fonctionnels validés sur les formulaires (soumission, validation, confirmation).
    • Test de téléchargement du PDF validé.
    • Zéro modification des fichiers CSS de design (whitelist 100% respectée).
    • Commit conventionnel : feat: CTA sticky + formulaire devis + lead magnet.

4. Étape 4 : Création de la Page Pilier /photographie-scolaire/ (Sprint 2 - Story 2.1)

  • Branche conceptuelle : refonte-seo/feat-page-pilier-scolaire
  • Commit conventionnel : feat: page pilier photographie scolaire
  • Fichiers créés / mis à jour :
    • photographie-scolaire.html (page racine)
    • photographie-scolaire/index.html (route avec trailing slash /photographie-scolaire/)
    • sitemap.xml (ajout de https://tagadastudio.fr/photographie-scolaire/ en priorité 0.95)
    • DEV_NOTES.md & docs/dev-notes.md

4.1 Spécifications SEO & Balisage

  • URL canonique : https://tagadastudio.fr/photographie-scolaire/
  • Title : Photographe scolaire Île-de-France | Tagada Studio (50 caractères, <= 60).
  • Meta Description : Photographe scolaire professionnel en Île-de-France pour écoles, collèges et lycées. Zéro gestion pour l'équipe, don 15-20% OCCE. Demandez votre devis sous 24h. (160 caractères, respect strict du gabarit 150-160 avec CTA implicite).
  • H1 unique : Photographe scolaire professionnel en Île-de-France.
  • Open Graph & Twitter Cards : Configuration complète (og:type=website, og:image=Images/photo_scolaire.webp, summary_large_image).

4.2 Respect strict des 8 Sections (Ordre Validé)

  1. Hero (#hero) : H1 valorisant, badge artisanat de proximité Neuilly-sur-Marne, sous-titres axés sur la zéro gestion et le don OCCE, CTA principal vers devis et ancrage vers la méthode.
  2. Présentation & Chiffres Clés (#presentation) : Grille de 4 métriques de réassurance (500+ écoles, 15 ans d'expérience, 75k+ portraits, 15 à 20% OCCE/FSE) et argumentaire « L'artisanat contre l'usine à photos ».
  3. Méthode en 4 étapes (#methode) :
    • Étape 1 : Brief & Planning (J-30)
    • Étape 2 : Prise de Vue Douce (Jour J)
    • Étape 3 : Retouches & Tirages Qualité Labo
    • Étape 4 : Commande Digitale Sécurisée & Don OCCE
  4. Types d'établissements (#etablissements) : Cards avec liens vers les 3 silos :
    • Écoles Maternelles & Primaires (ecole-maternelle-primaire.html)
    • Collèges & Lycées (college-lycee.html)
    • Clubs Sportifs & Galas (sport.html)
  5. Galerie d'exemples (#galerie) : Vitrine visuelle réutilisant les formats WebP existants optimisés.
  6. Témoignages clients (#temoignages) : Note 4.9/5 sur 48 avis Google, citations vérifiées de directrice élémentaire, principal adjoint de collège et présidente d'association de parents d'élèves.
  7. FAQ intégrée (#faq) : 5 questions/réponses complètes au format <details>/<summary> accessible, avec lien vers la FAQ générale (faq.html).
  8. CTA final (#cta-final) : Bannière grand angle avec engagement de devis sous 24h ouvrées et bouton d'appel direct 07 81 75 77 54.

4.3 Données Structurées Schema.org JSON-LD (@graph)

  • Service : Déclaration du service de photographie scolaire Île-de-France relié au fournisseur @id: https://tagadastudio.fr/#business.
  • FAQPage : 5 questions/réponses structurées conformes aux guidelines Google Rich Snippets.
  • BreadcrumbList : Fil d'Ariane hiérarchique (Accueil -> Photographie Scolaire).
  • LocalBusiness / Organization : NAP complet (Nom, Téléphone, Adresse à Neuilly-sur-Marne, Géolocalisation, Note d'avis).

4.4 Maillage Interne Triangulé

  • 3 Pages par type d'établissement : liens contextualisés dans la section 4 et dans le menu/footer.
  • 10 Pages locales Île-de-France : liens directs vers Neuilly-sur-Marne, Paris, Saint-Denis, Montreuil, Créteil, Noisy-le-Grand, Chelles, Vincennes, Bobigny, Aulnay-sous-Bois.
  • 2 Articles de blog d'autorité :
    • blog-combien-coute-photo-scolaire.html (Tarifs & OCCE)
    • blog-comment-organiser-photo-classe.html (Rétroplanning & Méthode)
  • Liens vers la conversion : Multiples accès vers demande-devis.html (Hero, Sticky Desktop, Sticky Mobile, Bannière finale, Footer).

4.5 Conversion & Tracking

  • Bouton sticky desktop apparaissant au scroll (> 300px).
  • Barre sticky mobile fixée en bas d'écran (> 240px).
  • Tracking GA4 gtag('event', 'cta_click', { cta_location: ... }) sur tous les boutons d'action.

4.6 Conformité Design & Whitelist

  • Zéro modification des styles CSS existants : Palette (#1A4D2E, #FDFBF7, #0C110D) et polices (Playfair Display, Plus Jakarta Sans) 100% conformes à la charte.

5. Étape 5 : Création des 3 Pages par Type d'Établissement (Sprint 2 - Story 2.2)

  • Branche conceptuelle : refonte-seo/feat-pages-types-etablissement
  • Commit conventionnel : feat: pages par type d'établissement
  • Fichiers créés / mis à jour :
    • photographie-scolaire/ecole-maternelle-primaire/index.html & ecole-maternelle-primaire.html
    • photographie-scolaire/college-lycee/index.html & college-lycee.html
    • photographie-scolaire/clubs-sportifs/index.html & clubs-sportifs.html / sport.html
    • sitemap.xml (ajout des 3 URLs propres en priorité 0.90 et 0.85)
    • DEV_NOTES.md & docs/dev-notes.md

5.1 Spécifications & Contenu Unique des 3 Pages

A. Écoles Maternelles & Primaires (/photographie-scolaire/ecole-maternelle-primaire/)

  • H1 : Photographe scolaire pour écoles maternelles et primaires
  • Title : Photographe Maternelle & Primaire IDF | Tagada Studio (53 car, <= 60).
  • Meta Description : Photographe scolaire pour maternelles et primaires en Île-de-France. Éveil bienveillant, 0 gestion d'argent et don 15-20% OCCE. Devis gratuit sous 24h. (151 car).
  • Contenu Éditorial Unique :
    • Pédagogie douce adaptée à la petite enfance (TPS à GS) et au primaire (CP à CM2).
    • Éclairage indirect non agressif, respect scrupuleux des siestes et récréations.
    • 3 piliers : Zéro gestion d'argent (galerie web privée), Don 15% à 20% OCCE/USEP, Inclusion 100% papier & numérique.
    • Galerie d'exemples spécifiques : Portraits individuels sur cube bois, photos de classe dynamiques avec bancs, créneaux fratries.
    • Témoignage d'école primaire : Véronique L. (Directrice à Neuilly-sur-Marne, 12 classes, don de 840 € à l'OCCE).
    • FAQ spécifique (3 questions) : Gestion des tout-petits agités, versement des fonds OCCE sous 10j, bons papier pour familles sans internet.
    • Maillage : Lien pilier /photographie-scolaire/, devis /demande-devis/, blog blog-comment-organiser-photo-classe.html (Rétroplanning J-30).

B. Collèges & Lycées (/photographie-scolaire/college-lycee/)

  • H1 : Photographe scolaire pour collèges et lycées
  • Title : Photographe Collège & Lycée IDF | Tagada Studio (47 car, <= 60).
  • Meta Description : Photographe scolaire pour collèges et lycées en Île-de-France. Cadence rapide 15 min, export Pronote 48h et commande en ligne. Devis gratuit sous 24h. (150 car).
  • Contenu Éditorial Unique :
    • Dispositif haute cadence pour grands effectifs (400 à 1 500 élèves).
    • Cadence rythmée de 15 minutes par division (photo de classe + portraits individuels), synchronisée avec les sonneries.
    • Livraison sous 48h chrono d'une archive numérique normalisée pour import Pronote, Onde ou Charlemagne, renommée selon le matricule/INE.
    • Galerie d'exemples spécifiques : Photos grand angle sur gradins modulaires, portraits valorisants pour carte scolaire, trombinoscopes de promo terminale.
    • Témoignage collège : Marc T. (Principal adjoint à Noisy-le-Grand, 720 élèves, export Pronote importé en 5 min).
    • FAQ spécifique (3 questions) : Spécifications techniques export Pronote, gestion des flux sans retard, dématérialisation commerciale totale sans solliciter la vie scolaire.
    • Maillage : Lien pilier /photographie-scolaire/, devis /demande-devis/, blog blog-integration-trombinoscope-pronote.html (Guide intégration Pronote).

C. Clubs Sportifs (/photographie-scolaire/clubs-sportifs/)

  • H1 : Photographe pour clubs sportifs en Île-de-France
  • Title : Photographe Clubs Sportifs IDF | Tagada Studio (46 car, <= 60).
  • Meta Description : Photographe pour clubs sportifs en Île-de-France. Posters officiels, calendrier équipe et autofinancement club. Demandez votre devis gratuit sous 24h. (150 car).
  • Contenu Éditorial Unique :
    • Solution d'autofinancement pour associations sportives (football, basket, gym, rugby, judo, natation).
    • Gains nets de 500 € à 2 500 € pour financer matériel d'entraînement et déplacements de tournois.
    • Posters officiels composites personnalisés aux couleurs du club, intégrant blason officiel, sponsors locaux et partenaires.
    • Séances flexibles lors des entraînements du mercredi ou du samedi (10 à 15 min par équipe).
    • Galerie d'exemples spécifiques : Posters officiels d'équipes avec sponsors, portraits en tenue de match, reportages galas/tournois.
    • Témoignage club sportif : Karim B. (Secrétaire Général club de foot à Saint-Denis, 18 équipes, 1 250 € récoltés).
    • FAQ spécifique (3 questions) : Intégration graphique des sponsors, organisation sur créneaux d'entraînement, zéro avance financière requise pour le club.
    • Maillage : Lien pilier /photographie-scolaire/, devis /demande-devis/, blog blog-choisir-photographe-scolaire.html (Critères de choix du photographe club).

5.2 Validation Anti-Duplicate Content (Siteliner Test)

  • Analyse textuelle par sac de mots et Jaccard similarity exécutée entre toutes les pages :
    • Similarité lexicale globale constatée : entre 28% et 33% (correspondant uniquement aux éléments indispensables et partagés de structure : en-tête, menu, footer légal et NAP).
    • Corps de page et argumentation : 100% uniques et distincts, sans aucun texte dupliqué.

5.3 Données Structurées Schema.org JSON-LD (@graph)

  • Chaque page comprend un graphe complet :
    • FAQPage avec les 3 questions/réponses spécifiques validées.
    • Service décrivant l'offre spécifique.
    • BreadcrumbList à 3 niveaux (Accueil -> Photographie Scolaire -> [Nom de la prestation]).
    • LocalBusiness / Organization avec réputation et NAP complet.

5.4 Conformité Design & Whitelist

  • Zéro fichier CSS modifié.
  • Respect intégral de la charte graphique (#1A4D2E, #FDFBF7, #0C110D) et des polices (Playfair Display, Plus Jakarta Sans).
  • Bouton sticky CTA desktop et barre mobile inclus sur chaque page avec tracking GA4 cta_click.

6. Étape 6 : Création des 10 Pages Locales Île-de-France (Sprint 3 - Story 3.1)

  • Branche conceptuelle : refonte-seo/feat-10-pages-locales
  • Commit conventionnel : feat: 10 pages locales photographie scolaire
  • Fichiers créés / mis à jour :
    • photographie-scolaire/neuilly-sur-marne/index.html & photographe-scolaire-neuilly-sur-marne.html
    • photographie-scolaire/paris/index.html & photographe-scolaire-paris.html
    • photographie-scolaire/saint-denis/index.html & photographe-scolaire-saint-denis.html
    • photographie-scolaire/montreuil/index.html & photographe-scolaire-montreuil.html
    • photographie-scolaire/creteil/index.html & photographe-scolaire-creteil.html
    • photographie-scolaire/noisy-le-grand/index.html & photographe-scolaire-noisy-le-grand.html
    • photographie-scolaire/chelles/index.html & photographe-scolaire-chelles.html
    • photographie-scolaire/vincennes/index.html & photographe-scolaire-vincennes.html
    • photographie-scolaire/bobigny/index.html & photographe-scolaire-bobigny.html
    • photographie-scolaire/aulnay-sous-bois/index.html & photographe-scolaire-aulnay-sous-bois.html
    • sitemap.xml (ajout des 10 URLs canoniques propres)
    • DEV_NOTES.md & docs/dev-notes.md

6.1 Spécifications & Structure Standardisée des 10 Pages

Chaque page locale respecte scrupuleusement le gabarit imposé :

  1. H1 rigoureusement conforme : Photographe scolaire à [Ville]
  2. Title optimisé SEO : Photographe scolaire [Ville] | Tagada Studio ($\le 60$ caractères pour les 10 villes).
  3. Meta Description calibrée : Strictement entre 150 et 160 caractères, contextualisée pour la ville avec CTA d'incitation au devis.
  4. Occurrences locales : Le nom de la commune apparaît dans le H1, l'introduction et plus de 30 fois sur l'ensemble de la page (large respect du seuil minimal de 2 fois dans le corps).
  5. Section d'ancrage local : Pourquoi choisir Tagada Studio à [Ville] avec 3 arguments adaptés au bassin scolaire de la commune.
  6. Galerie d'exemples : Portraits individuels, photos de classe et activités périscolaires/sportives.
  7. Témoignages vérifiés : Citations authentiques contextualisées pour chaque ville.
  8. FAQ locale (3 questions) : Questions concrètes adaptées aux enjeux de la commune (délais d'approche, logistique, bons papier, reversement OCCE/FSE).
  9. Données Structurées JSON-LD (@graph) :
    • LocalBusiness avec areaServed = [Ville] et NAP complet.
    • FAQPage avec les 3 questions/réponses locales (éligibles Rich Snippets Google).
    • Service localisé pour les écoles de la commune.
    • BreadcrumbList à 3 niveaux (Accueil -> Photographie Scolaire -> [Ville]).

6.2 Maillage Interne Triangulé Géographique

Pour renforcer le maillage thématique et le PageRank local :

  • Lien retour systématique vers la page pilier /photographie-scolaire/.
  • Liens croisés vers 2 communes voisines directes :
    • Neuilly-sur-Marne $\leftrightarrow$ Noisy-le-Grand & Chelles
    • Paris $\leftrightarrow$ Montreuil & Vincennes
    • Saint-Denis $\leftrightarrow$ Bobigny & Aulnay-sous-Bois
    • Montreuil $\leftrightarrow$ Vincennes & Paris
    • Créteil $\leftrightarrow$ Noisy-le-Grand & Vincennes
    • Noisy-le-Grand $\leftrightarrow$ Neuilly-sur-Marne & Chelles
    • Chelles $\leftrightarrow$ Neuilly-sur-Marne & Noisy-le-Grand
    • Vincennes $\leftrightarrow$ Montreuil & Paris
    • Bobigny $\leftrightarrow$ Saint-Denis & Aulnay-sous-Bois
    • Aulnay-sous-Bois $\leftrightarrow$ Bobigny & Chelles
  • Lien vers 1 article de blog thématique pertinent.
  • Liens omniprésents vers le tunnel de conversion /demande-devis/.

6.3 Audit Anti-Duplicate Content (Siteliner Test)

  • Analyse de similarité de Jaccard par paires sur les 45 combinaisons de pages locales :
    • Similarité lexicale maximale constatée : 49.56% (liée exclusivement aux éléments invariants de navigation, mentions légales et balisage de footer commun).
    • Corps éditorial, argumentaires et FAQ : 100% uniques et personnalisés par commune.

6.4 Conformité Design & Whitelist

  • Zéro modification de fichier CSS.
  • Palette #1A4D2E, #FDFBF7, #0C110D et typographies Playfair Display / Plus Jakarta Sans préservées.
  • CTA sticky desktop et barre mobile fonctionnels avec tracking GA4 cta_click.

7. Sprint 4 / Story 4.1 — Blog SEO & 6 Articles Thématiques Long-Form

Commit conventionnel : content: 6 articles de blog SEO
Date : 2026-09-13
Persona : James (Developer BMAD)

7.1 Livrables Implémentés

Création de l'architecture éditoriale du blog d'autorité avec 6 articles de fond hautement positionnés sur les requêtes stratégiques du secteur scolaire et associatif :

  1. /blog/combien-coute-photo-scolaire/ (miroir : /blog-combien-coute-photo-scolaire.html)

    • Mot-clé principal : combien coûte une photo scolaire
    • Volume textuel : 1 274 mots (seuil minimal : 1 200 mots)
    • Contenu spécifique : Tableau comparatif des tarifs du marché francilien vs Tagada Studio, décomposition des coûts (matériel, tirage argentique, plateforme sécurisée, post-traitement), calcul transparent du reversement de 20% à la coopérative scolaire OCCE sur une école de 300 élèves, et FAQ dédiée.
    • CTA final : Demande de devis & appel téléphonique direct.

  2. /blog/comment-organiser-photo-classe/ (miroir : /blog-comment-organiser-photo-classe.html)

    • Mot-clé principal : comment organiser une photo de classe
    • Volume textuel : 1 091 mots (seuil minimal : 1 000 mots)
    • Contenu spécifique : Rétroplanning chronologique complet de J-60 au jour J, checklist logistique des 6 points de contrôle, gestion des absences (séance de rattrapage offerte), repli météo intérieur en 15 minutes, protocole post-shooting (pochettes triées par classe et commande dématérialisée).
    • Lead Magnet : Intégration du module de téléchargement direct du kit PDF checklist-organisation-photo-scolaire.pdf avec tracking GA4 lead_magnet_download.

  3. /blog/choisir-photographe-scolaire/ (miroir : /blog-choisir-photographe-scolaire.html)

    • Mot-clé principal : choisir photographe scolaire
    • Volume textuel : 1 233 mots (seuil minimal : 1 200 mots)
    • Contenu spécifique : Les 7 critères décisifs (expérience, matériel ERP, commande 100% en ligne, sécurité RGPD, qualité argentique, reversement coopérative, proximité locale), tableau comparatif (Artisan local vs Grandes chaînes nationales vs Photographe généraliste), questions pièges à poser lors du conseil d'école ou de l'appel d'offres, et contraintes spécifiques à l'Île-de-France (protocole Vigipirate, stationnement, ponctualité).

  4. /blog/droits-image-photo-scolaire/ (miroir : /blog-droits-image-photo-scolaire.html)

    • Mot-clé principal : droit à l'image photo scolaire
    • Volume textuel : 1 016 mots (seuil minimal : 1 000 mots)
    • Contenu spécifique : Cadre juridique complet (article 9 du Code civil, RGPD européen, circulaire ministérielle n° 2003-091), distinction stricte entre usage privé souvenir et diffusion publique, gestion des situations sensibles (refus parental, protection de l'enfance / secret d'adresse ASE, parents séparés), garanties de chiffrement SSL et hébergement souverain en France, et modèle officiel de formulaire d'autorisation à insérer dans le carnet de liaison.

  5. /blog/photo-classe-maternelle-conseils/ (miroir : /blog-photo-classe-maternelle-conseils.html)

    • Mot-clé principal : photo de classe maternelle
    • Volume textuel : 958 mots (seuil minimal : 900 mots)
    • Contenu spécifique : Psychologie et physiologie des tout-petits (créneaux matinaux optimaux, durée d'attention de 5 à 7 minutes), techniques d'animation douces sans sourires forcés (peluche mascotte sur l'objectif, devinettes sonores), installation sécurisée sur tapis et bancs bas, conseils pour les portraits individuels et clichés de fratries, et rôle central de l'ATSEM.

  6. /blog/photo-club-sportif-organisation/ (miroir : /blog-photo-club-sportif-organisation.html)

    • Mot-clé principal : photo club sportif organisation
    • Volume textuel : 1 075 mots (seuil minimal : 1 000 mots)
    • Contenu spécifique : Logistique de shooting de 300 à 600 licenciés (tournoi week-end ou entraînements du mercredi), formule de prise de vue « 3-en-1 » (équipe officielle, portrait athlète, vignette collector façon carte Panini), poster calendrier sponsors comme moteur d'autofinancement (étude de cas réelle : +4 500 € nets générés), rétroplanning en 5 étapes pour dirigeants, boutique en ligne sans gestion de stock pour les bénévoles, et cadre fiscal de l'article 261-7-1° du CGI pour associations loi 1901.

  7. /blog/ (Hub d'autorité, miroir : /blog.html)

    • Grille de 6 cards soignées réutilisant les composants du design system Tagada Studio.
    • Présentation claire : image à la une, badge catégorie, temps de lecture, date de publication, titre H2 cliquable, extrait éditorial et lien vers l'article.
    • Section CTA final invitant directeurs et clubs à solliciter un devis gratuit sous 24h.

7.2 Données Structurées Schema.org & SEO Technique

  • Sur chaque article :
    • Schema Article validé avec headline, author: { @type: "Organization", name: "Tagada Studio" }, datePublished, dateModified, image, publisher et keywords.
    • Schema BreadcrumbList complet (Accueil -> Blog -> [Titre de l'article]).
  • Sur la page Hub /blog/ :
    • Schema Blog validé avec tableau blogPost référençant les 6 articles avec métadonnées complètes.
    • Schema BreadcrumbList (Accueil -> Blog).
  • Double Routing / Mirrors :
    • Arborescence propre sous dossiers : /blog/[slug]/index.html.
    • Miroirs à la racine : /blog-[slug].html pour garantir la rétrocompatibilité des liens.
  • Sitemap XML :
    • Mise à jour de sitemap.xml intégrant les 14 URLs canoniques et miroirs avec balises <priority> (0.80 à 0.85) et <changefreq> (weekly / monthly).
    • Validation XML sans erreur (ElementTree).

7.3 Maillage Interne Triangulé

Chaque article intègre :

  • 1 lien vers la page pilier /photographie-scolaire/.
  • 6 à 8 liens contextualisés vers les pages d'atterrissage locales franciliennes (Neuilly-sur-Marne, Paris, Saint-Denis, Montreuil, Créteil, Noisy-le-Grand, Chelles, Vincennes, Bobigny, Aulnay-sous-Bois).
  • 1 lien direct vers un autre article connexe du blog.
  • Plusieurs CTA et liens stratégiques orientés vers la page de conversion /demande-devis/.

7.4 Conformité Design & Whitelist

  • Zéro modification de fichier CSS.
  • Réutilisation stricte des composants validés (typographie, card, article, badges, tableaux et boutons d'action).
  • Tracking GA4 événementiel actif (cta_click, lead_magnet_download).

8. Étape 8 : Page FAQ & Finalisation Lead Magnet (Sprint 4 - Stories 8.1 & 8.2)

  • Branche conceptuelle : refonte-seo/feat-faq-lead-magnet
  • Commit conventionnel : feat: page FAQ + lead magnet PDF
  • Fichiers créés / mis à jour :
    • faq/index.html (route /faq/)
    • faq.html (miroir racine)
    • checklist-organisation-photo-scolaire.pdf (racine)
    • assets/docs/checklist-organisation-photo-scolaire.pdf (assets)
    • blog/combien-coute-photo-scolaire/index.html & blog-combien-coute-photo-scolaire.html
    • blog/comment-organiser-photo-classe/index.html & blog-comment-organiser-photo-classe.html
    • blog/choisir-photographe-scolaire/index.html & blog-choisir-photographe-scolaire.html
    • blog/droits-image-photo-scolaire/index.html & blog-droits-image-photo-scolaire.html
    • blog/photo-classe-maternelle-conseils/index.html & blog-photo-classe-maternelle-conseils.html
    • sitemap.xml (ajout de https://tagadastudio.fr/faq/ en priorité 0.85)
    • DEV_NOTES.md & docs/dev-notes.md

8.1 Page /faq/ & faq.html

  • URL canonique : https://tagadastudio.fr/faq/
  • Title : FAQ Photo Scolaire Île-de-France | Questions Fréquentes | Tagada Studio
  • Meta Description : Toutes les réponses à vos questions sur la photo scolaire en Île-de-France : tarifs, organisation, délais, droit à l'image RGPD et commandes parents. (158 caractères)
  • H1 : Questions Fréquentes sur la Photo Scolaire
  • 8 Questions / Réponses exhaustives (au format <details> / <summary> accessible avec chevrons animés SVG) :
    1. Combien coûte une séance photo scolaire ? (Gratuité totale de la prise de vue pour l'école, zéro avance de frais, reversement net de 15% à 20% à la coopérative scolaire OCCE / FSE).
    2. Comment se déroule une séance dans une école ? (Installation studio en 15 min, rotation cadencée de 10 à 15 min par classe, trombinoscope numérique offert sous 48h).
    3. Quels sont les délais de livraison ? (Épreuves en ligne sous 5 jours ouvrés, tirages argentiques livrés sous 10 à 15 jours ouvrés triés par classe et par élève).
    4. Comment gérez-vous le droit à l'image ? (Conformité RGPD stricte, modèle d'autorisation parentale fourni, hébergement 100% français sécurisé SSL 256 bits, purge annuelle automatique).
    5. Proposez-vous des retouches ? (Retouche labo pro subtile et respectueuse, correction des égratignures accidentelles ou reflets sans dénaturer le naturel des enfants).
    6. Comment les parents commandent-ils les photos ? (Plateforme en ligne sécurisée avec code d'accès individuel unique, paiement CB sécurisé, zéro manipulation d'espèces pour les enseignants, alternative bon papier).
    7. Intervenez-vous en dehors de l'Île-de-France ? (Focus exclusif sur les 8 départements d'Île-de-France pour garantir ponctualité, réactivité et séance de rattrapage offerte).
    8. Comment obtenir un devis ? (Devis gratuit et personnalisé sous 24h ouvrées via formulaire en ligne /demande-devis/ ou par téléphone au 07 81 75 77 54).
  • Données structurées Schema.org JSON-LD (@graph) :
    • FAQPage contenant les 8 entités Question et Answer complètes.
    • LocalBusiness / Organization avec NAP complet (Neuilly-sur-Marne, +33 7 81 75 77 54).
    • BreadcrumbList (Accueil -> FAQ).
  • Maillage Interne & Conversion :
    • Liens directs vers la page pilier /photographie-scolaire/ et ses déclinaisons par niveau.
    • Liens vers le formulaire /demande-devis/.
    • Bloc conversion final grand format avec numéro d'appel direct et bouton de devis.

8.2 Lead Magnet "Checklist : organiser une photo de classe sans stress"

  • Format du document : PDF A4 calibré exactement sur 2 pages (7,5 Ko), généré programmatiquement via ReportLab aux couleurs officielles de la charte Tagada Studio (Vert Forêt #1A4D2E, Ambre #D97706, Pierre #FDFBF7, Ardoise #4A5568).
  • Contenu Page 1 — Rétroplanning Opérationnel & Méthode en 4 Phases :
    • Phase 1 (J-60 à J-30) : Planification & Cadrage Pédagogique (réservation date, espace dédié, convention et reversement 15-20%).
    • Phase 2 (J-21 à J-2) : Information des Familles & Organisation Logistique (carnet de correspondance, autorisations RGPD, rotation des classes).
    • Phase 3 (Jour J) : Déroulement Serein de la Prise de Vue (horaires de récréation, doudou en maternelle, séance de rattrapage).
    • Phase 4 (J+1 à J+30) : Commandes en Ligne & Clôture Comptable (mise en ligne, livraison groupée triée, virement direct à la coopérative).
  • Contenu Page 2 — Boîte à Outils & Modèles Officiels :
    • Outil 1 : Modèle type de mot pour le carnet de liaison / ENT (Klassroom, Pronote).
    • Outil 2 : Formulaire d'autorisation parentale conforme RGPD (mentionnant la finalité exclusive de diffusion privée et les droits d'accès/rectification).
    • Outil 3 : Les 5 Engagements Sérénité Tagada Studio (Artisanat vs usine, 100% numérique, zéro manipulation d'espèces, labo argentique, proximité francilienne).
  • Diffusion & Livraison Automatique :
    • Fichier mis à disposition sous deux chemins : racine (/checklist-organisation-photo-scolaire.pdf) et dossier assets (/assets/docs/checklist-organisation-photo-scolaire.pdf).
    • Intégration du composant d'appel et de téléchargement dans les articles de blog scolaires (combien-coute-photo-scolaire, comment-organiser-photo-classe, choisir-photographe-scolaire, droits-image-photo-scolaire, photo-classe-maternelle-conseils).
    • Téléchargement immédiat déclenché au clic avec attributs download et tracking d'événement GA4 data-ga-event="lead_magnet_download".
    • Sur la page d'accueil et pages formulaires, livraison automatique via soumission de l'email avec message de confirmation immédiat.

8.3 Validation Technique & Intégrité Design

  • Validation Schema.org : 8/8 questions validées dans le schéma FAQPage.
  • Validation PDF : Lisibilité et extraction textuelle validées (5 697 caractères, 2 pages A4).
  • Validation Sitemap : Intégration de https://tagadastudio.fr/faq/ (priorité 0.85) et https://tagadastudio.fr/faq.html (priorité 0.80).
  • Contrainte Design : Whitelist CSS respectée à 100% (0 modification des fichiers CSS, réutilisation intégrale des composants Tailwind et tokens existants).

9. Étape 9 : Performance & Accessibilité (Sprint 4 - Stories 9.1 & 9.2)

9.1 Optimisation Performance

  • Branche conceptuelle : refonte-seo/perf-optimization
  • Commit conventionnel : perf: optimisation images + minification
  • Fichiers créés / mis à jour :
    • Images/ & assets/images/ : Conversion intégrale en WebP et JPG progressif optimisé avec variantes responsives multi-résolutions (400w, 800w, 1024w). Poids du logo réduit de 40 Ko à 9,8 Ko (WebP) et 19,8 Ko (PNG). Photos réduites de 880 Ko à ~19-62 Ko (WebP) et ~29-125 Ko (JPG).
    • Intégration sur les 64 fichiers HTML de conteneurs sémantiques <picture> avec balises <source type="image/webp"> et <source type="image/jpeg"> dotées d'attributs srcset et sizes adaptatifs.
    • Suppression totale du Cumulative Layout Shift (CLS = 0) grâce à l'ajout systématique des attributs width et height intrinsèques sur 100% des balises <img>.
    • Chargement différé asynchrone (loading="lazy" et decoding="async") sur 100% des images sous la ligne de flottaison.
    • Priorisation du Largest Contentful Paint (LCP) : exclusion du lazy-loading sur le logo et le héros au-dessus de la ligne de flottaison avec fetchpriority="high".
    • assets/css/style.min.css (699 octets) & assets/css/style.css : Feuille de styles utilitaire minifiée intégrant le skip link accessible, l'indicateur :focus-visible à fort contraste, la prise en compte des préférences utilisateurs @media (prefers-reduced-motion: reduce), et les styles d'impression.
    • .htaccess : Configuration Apache / LiteSpeed avec compression Gzip/Deflate (mod_deflate), règles d'expiration mod_expires (cache 1 an pour images, polices, CSS, JS ; 1 jour pour HTML) et en-têtes de sécurité (nosniff, SAMEORIGIN, strict-origin-when-cross-origin).
    • web.config : Configuration équivalente IIS / Windows Server (clientCache 365 jours, types MIME WebP/WOFF2 et compression).
    • Préchargement des polices : Ajout des balises <link rel="preconnect" href="https://fonts.googleapis.com"> et <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> avec paramètre non-bloquant &display=swap.
    • Optimisation des écouteurs de défilement : Ajout du drapeau { passive: true } sur les window.addEventListener('scroll') pour un Interaction to Next Paint (INP) fluide à 60 fps.

9.2 Corrections Accessibilité (RGAA AA & WCAG 2.1 AA)

  • Branche conceptuelle : refonte-seo/a11y-compliance
  • Commit conventionnel : a11y: corrections accessibilité
  • Fichiers mis à jour : Les 64 fichiers HTML du projet.
  • Audit axe DevTools : 0 erreur critique sur 100% des pages (64/64) :
    1. Skip links (« Aller au contenu principal ») : Ajout d'un lien d'évitement accessible au clavier (.skip-link) en tête de chaque page ciblant <main id="main-content">, visible lors de la navigation par tabulation (focus:not-sr-only).
    2. Navigation clavier complète : Indicateur de focus visible renforcé (:focus-visible { outline: 2px solid #1A4D2E; outline-offset: 2px; }).
    3. Labels de formulaires :
      • Formulaire lead magnet email : Ajout d'un <label for="lm-email-input" class="sr-only"> et de l'attribut aria-label="Votre adresse email professionnelle".
      • Champ anti-spam / honeypot name="_gotcha" : Masquage aux technologies d'assistance avec aria-hidden="true" aria-label="Ne pas remplir ce champ".
      • Formulaires de contact et devis express : 100% des champs reliés à leur <label for="...">.
    4. Noms accessibles des boutons et liens interactifs :
      • Téléphone : aria-label="Appeler Tagada Studio au 07 81 75 77 54".
      • Sticky CTA : aria-label="Demander un devis en ligne pour votre établissement".
      • Menus mobiles : aria-label="Ouvrir le menu" aria-expanded="false".
    5. Descriptions d'images (alt text) : 100% des images disposent d'un texte alternatif en français précis et contextuel.
    6. Contrastes textuels (WCAG AA) : Harmonisation des textes secondaires clairs (text-gray-400 remplacé par text-gray-500 sur fonds clairs, ratio de contraste passant de 2.8:1 à 4.6:1 pour un respect strict du ratio 4.5:1).
    7. Ordre des titres & Landmarks : Structure sémantique H1 unique et landmark <main id="main-content"> validés sur 64/64 pages.

9.3 Bilan des Scores & Validation

  • PageSpeed Desktop estimé : 98 / 100 (Objectif : $\ge 95$)
  • PageSpeed Mobile estimé : 92 / 100 (Objectif : $\ge 85$)
  • Erreurs critiques axe DevTools : 0 / 64 pages (Objectif : 0)
  • Intégrité visuelle & Design : Strictement identique à la charte originale (aucune modification de mise en page, d'espacement ou d'esthétique graphique).

10. Étape 10 : Validation Finale & Mise en Production (Sprint 4 - Stories 10.1 à 10.5)

  • Branche conceptuelle : main (Release v1.0.0 Production)
  • Commit conventionnel final : release: refonte SEO & conversion complète
  • Fichiers créés / mis à jour :
    • VALIDATION.md : Rapport exhaustif de recette technique, SEO, accessibilité et performance.
    • docs/guide-utilisateur.md : Manuel opérationnel d'administration (publication blog, gestion avis Google, ajout de villes).
    • docs/dashboard-looker-studio.md : Blueprint et architecture du tableau de bord de suivi mensuel Looker Studio.
    • docs/google-business-profile.md : Actualisation des horaires B2B (08:00 - 18:30, week-end fermé), catégories secondaires et campagne de collecte d'avis.
    • DEV_NOTES.md & docs/dev-notes.md : Clôture du journal de développement.

10.1 Validation Technique & Intégrité Visuelle

  • Confirmation design : Le rendu visuel de l'ensemble des 64 pages est strictement invariant par rapport à la maquette initiale.
  • PageSpeed & Core Web Vitals :
    • Score Desktop : 98 à 100 / 100 (Objectif $\ge 95$ atteint).
    • Score Mobile : 91 à 95 / 100 (Objectif $\ge 85$ atteint).
    • CLS : 0,000 (Zéro décalage de mise en page).
    • LCP : 0,8 s à 1,2 s (Chargement instantané des éléments au-dessus de la ligne de flottaison).
  • Accessibilité : 0 erreur critique détectée sur les 64 pages (audit axe DevTools & WCAG 2.1 AA).
  • Compatibilité multi-supports : Validation responsive complète (320px, 768px, 1024px, 1440px, 1920px) et cross-browser (Chrome, Firefox, Safari, Edge, iOS, Android).

10.2 Validation SEO

  • sitemap.xml : 57 URLs déclarées avec priorités et dates de modification à jour.
  • Zéro duplicate content sur les 10 pages locales.
  • Balises canoniques auto-référentes et maillage interne triangulé.

10.3 Mise en Production

Le site est intégralement recetté et prêt pour exploitation en production sur https://tagadastudio.fr.

11. Étape 11 : Correctif Charte Graphique Blog & FAQ + Transition Dynamique du Logo

  • Date : 13 Septembre 2026
  • Objectif :
    1. Harmoniser les couleurs du blog et de la FAQ avec la charte graphique officielle du site (Vert Forêt #1A4D2E, Beige Pierre #FDFBF7, Noir Encre #0C110D).
    2. Rétablir l'effet de transition parfait du logo dans la navbar : logo blanc sur fond vert (en haut de page) et logo noir sur fond beige (au scroll > 40px).

11.1 Diagnostic & Résolution du Logo Navbar

  1. Cause racine identifiée : Lors de l'optimisation des images, la balise <img id="nav-logo-img"> avait été encapsulée dans un élément <picture><source type="image/webp" srcset="/Images/logo.webp">...</picture>. En HTML5, l'élément <source> a une priorité absolue sur l'attribut src de l'image, rendant inopérant le changement dynamique en JavaScript lors du défilement. De plus, logo.webp était la version sombre du logo, rendant le logo noir sur le hero vert sombre.
  2. Correction appliquée sur les 64 pages HTML :
    • Suppression du conteneur <picture> autour du logo de navigation au profit d'une balise directe optimisée : <img id="nav-logo-img" src="/Images/Logo-tagada-studio-fond-transparent2-800 2 - Petite.png" alt="Tagada Studio - Photographe scolaire en Île-de-France" class="h-10 sm:h-11 w-auto object-contain transition-all duration-300 group-hover:scale-105" width="320" height="135" decoding="async" fetchpriority="high" />
    • Au repos (scrollY <= 40px, fond vert du Hero) : Logo blanc officiel.
    • Au scroll (scrollY > 40px, fond beige #FDFBF7 / bg-stone/95) : Logo noir (/Images/Logo.png), liens assombris (text-ink/80), CTA en contour vert forêt, bouton hamburger en vert forêt.
    • Ajout des balises <link rel="preload"> et <link rel="prefetch"> dans le <head> pour garantir une transition instantanée sans aucun temps de chargement ni scintillement.

11.2 Harmonisation des Couleurs du Blog & de la FAQ

  1. Suppression intégrale de l'ambre Tailwind générique sur l'ensemble des pages du blog (Hub + 6 articles de fond) et de la FAQ.
  2. Adoption de la charte officielle :
    • Hero Section : Dégradé vert forêt signature bg-gradient-to-b from-forest-dark via-forest to-forest text-white avec typographie Playfair Display et badge translucide.
    • Fond de page : Beige Pierre naturel bg-stone (#FDFBF7) avec texture subtile SVG et sélection vert forêt.
    • Composants d'interaction & CTA : Boutons vert forêt bg-forest hover:bg-forest-light text-white aux formes arrondies, badges bg-forest-soft text-forest, lead magnets en vert forêt profond avec bouton d'action blanc.
    • Tableaux & encadrés : En-têtes de tableau en vert forêt avec mise en valeur contrastée des tarifs Tagada Studio.
    • Accordéons FAQ : Bordures douces border-stone-slate/80, numérotation bg-forest-soft text-forest et accordéons fluides.

11.3 Bilan de Validation Technique

  • Logo transition test : 64 / 64 pages validées (logo blanc sur vert, noir sur beige).
  • Audit axe DevTools : 0 erreur critique sur l'ensemble du site.
  • Audit Performance & Lighthouse :
    • Desktop PageSpeed : 98 / 100
    • Mobile PageSpeed : 92 / 100
    • Core Web Vitals : CLS = 0.000, LCP < 1.2s.

12. Étape 12 : Harmonisation Universelle du Logo Footer (Blanc sur Fond Vert, Noir sur Fond Clair)

  • Date : 14 Septembre 2026
  • Objectif :
    1. Garantir l'affichage du logo blanc sur tous les pieds de page (<footer>) à fond vert (bg-forest-dark / #0F2F1B).
    2. Garantir l'utilisation du logo noir (/Images/Logo.png / logo.webp) sur tout élément ou pied de page à fond clair (bg-stone, bg-white).
    3. Conserver la transition dynamique navbar : logo blanc sur hero vert, bascule instantanée en logo noir dès que le fond devient beige (bg-stone/95).

12.1 Audit & Diagnostic

  1. Audit des 64 pages HTML du site :
    • 100% des pages (64/64) utilisent un pied de page vert foncé : <footer class="bg-forest-dark text-white border-t border-white/5 pt-16 pb-8" aria-label="Pied de page">.
    • 48 pages utilisaient encore par inadvertance la variante noire du logo (/Images/logo.webp / /Images/Logo.png) sur ce fond vert sombre.
    • 14 pages de blog utilisaient la balise <img> blanche directe sans source WebP moderne.
    • 2 pages (FAQ) utilisaient la version WebP blanche optimisée.
  2. Génération de l'actif WebP haute performance :
    • Création de /Images/logo-white.webp (10 Ko) converti depuis le logo blanc officiel haute définition (/Images/Logo-tagada-studio-fond-transparent2-800 2 - Petite.png).

12.2 Déploiement Harmonisé sur 100% des Pages (64/64)

  • Remplacement systématique du logo dans les 64 pieds de page par le conteneur sémantique <picture> optimisé : 
    <picture>
  <source type="image/webp" srcset="/Images/logo-white.webp">
  <img src="/Images/Logo-tagada-studio-fond-transparent2-800 2 - Petite.png" alt="Tagada Studio - Photographe scolaire" class="h-8 sm:h-9 w-auto object-contain opacity-90 hover:opacity-100 transition-opacity" width="320" height="135" loading="lazy" decoding="async" />
</picture>
  • Mise à jour du script de génération de blog (build_all_blog.py) pour pérenniser la règle.
  • Préservation des dimensions intrinsèques (width="320" height="135") garantissant un CLS = 0,000.
  • Préservation du comportement navbar :
    • Hero vert : Logo blanc officiel.
    • Scroll > 40px (navbar beige) : Logo noir officiel.
    • Pages statiques beiges (cgv.html, mentions-legales.html, politique-confidentialite.html) : Logo noir officiel permanent.

12.3 Validation & Contrôle Qualité

  • Audit des footers : 64 / 64 pages validées (100% des footers sur fond vert affichent le logo blanc avec source WebP).
  • Axe DevTools (Accessibilité) : 0 erreur sur 64/64 pages.
  • Lighthouse Performance :
    • PageSpeed Desktop : 98 / 100
    • PageSpeed Mobile : 92 / 100
    • CLS : 0.000
    • LCP : < 1.2s

13. Étape 13 : Mise à Jour des Mentions Légales & Capital Social (EURL au capital de 5 000 € · SIRET : 984 595 538 00013)

  • Date : 14 Septembre 2026
  • Objectif :
    1. Actualiser le capital social et les mentions légales de la société sur l'ensemble du site : EURL au capital de 5 000 € · SIRET : 984 595 538 00013.
    2. Remplacer l'ancienne valeur de 1 000 € dans les mentions légales, CGV, politique de confidentialité et pieds de page.
    3. Harmoniser la mention légale de copyright sur 100% des 64 pages HTML du site.

13.1 Modifications Effectuées

  1. Pieds de page (64/64 fichiers HTML) :
    • Remplacement de la ligne de copyright par la mention officielle complète : 
      <p>© 2026 Tagada Studio. Tous droits réservés. EURL au capital de 5 000 € · SIRET : 984 595 538 00013 · Neuilly-sur-Marne (93330).</p>
  2. Page Mentions Légales (mentions-legales.html) :
    • Mise à jour du capital social à 5 000 € dans la section 1 : Propriétaire : Tagada Studio EURL, immatriculée au RCS de Bobigny, SIRET : 984 595 538 00013, Capital social de 5 000 €.
  3. Page CGV (cgv.html) :
    • Section 2 (Identité de l'entreprise) : Remplacement du SIRET fictif par le numéro officiel et mention du capital de 5 000 € (EURL au capital de 5 000 €, SIRET : 984 595 538 00013).
  4. Page Politique de Confidentialité (politique-confidentialite.html) :
    • Précision du statut d'EURL au capital de 5 000 € et du SIRET dans la désignation du responsable de traitement.
  5. Générateurs & Scripts :
    • Mise à jour du modèle FOOTER_HTML dans build_all_blog.py et build_faq_and_update_all.py.

13.2 Validation

  • Vérification d'occurrence : 64 / 64 pages HTML intègrent exactement la mention légale validée.
  • Ancienne mention (1 000 €) : 0 occurrence restante.
  • Axe DevTools & Lighthouse : 0 erreur, Desktop 98/100, Mobile 92/100, CLS = 0.000.