Documentation - Collectif Coeur du Ferret

1. Architecture du site

Le site est un ensemble de fichiers statiques (HTML, CSS, JS, JSON) heberge sur Cloudflare Pages. Il n'y a pas de serveur ni de base de donnees. Le contenu dynamique (actualites, conversations IA) est charge via des fichiers JSON.

Arborescence des fichiers

Site/
  index.html                  -- Page principale du site public
  conversations.json          -- Conversations IA (site public)
  robots.txt                  -- Regles pour les moteurs de recherche
  sitemap.xml                 -- Plan du site pour le SEO
  actualites/
    actualites.json           -- Fil d'actualites
    *.pdf                     -- Documents PDF publics
  bureau/
    index.html                -- Page Bureau (acces restreint)
    bureau-conversations.json -- Conversations IA du Bureau
  images/
    logo-coeur-ferret-*.png   -- Logos (64, 256, 512, 1200px)
    dessins/                  -- Galerie dessins
    photos/                   -- Galerie photos
    web/                      -- Images optimisees pour le web
  newsletters/
    *.pdf                     -- Newsletters PDF

Domaines

URL	Contenu	Acces
`coeurduferret.com`	Site public	Tout le monde
`coeurduferret.org`	Redirige (301) vers .com	Tout le monde
`coeurduferret.com/bureau/`	Espace Bureau	Membres autorises (Cloudflare Zero Trust)
`coeurduferret.com/feux/`	Page "point quotidien feux" (statique, dans ce site)	Tout le monde
`feux.coeurduferret.com`	Application carte vent/incendie — projet SEPARE heberge sur ChatGPT (voir section 12)	Tout le monde
`coeurduferret.pages.dev`	Miroir Cloudflare	Tout le monde

Technologies

Composant	Technologie
HTML/CSS/JS	Vanilla (pas de framework)
Polices	Playfair Display + Inter (Google Fonts)
Hebergement	Cloudflare Pages
Protection Bureau	Cloudflare Zero Trust Access
Paiement	HelloAsso (widget iframe)
Contenu dynamique	Fichiers JSON charges par fetch()

2. Mettre a jour les actualites

Les actualites sont stockees dans le fichier actualites/actualites.json. Chaque actualite est un objet JSON dans un tableau.

Structure du fichier

[
    {
        "date": "2026-03-27",           // Format AAAA-MM-JJ
        "badge": "Vie municipale",      // Categorie affichee en badge
        "titre": "Conseil municipal",    // Titre de l'actualite
        "texte": "Description...",       // Texte (HTML autorise: <strong>, <a>)
        "soustitre": "Optionnel",        // Sous-titre en or (facultatif)
        "liens": [                           // Boutons (facultatif)
            {
                "label": "Voir le PDF",
                "url": "actualites/mon-doc.pdf",
                "style": "primary"       // "primary" (or) ou "terracotta" (rouge)
            }
        ]
    }
]

Ajouter une actualite

1

Ouvrir actualites/actualites.json dans un editeur de texte (Notepad++, VS Code...)

2

Ajouter un nouvel objet au debut du tableau (avant le premier {), separe par une virgule

3

Si un PDF est associe, le placer dans le dossier actualites/

4

Deployer sur Cloudflare (voir section Deploiement)

Tri automatique : les actualites sont triees par date decroissante. La plus recente s'affiche toujours en premier, quel que soit l'ordre dans le fichier JSON.

Exemple : ajouter une actualite

[
    {
        "date": "2026-04-15",
        "badge": "Association",
        "titre": "Assemblee Generale 2026",
        "texte": "L'AG se tiendra le 15 juin a la salle des fetes.",
        "liens": [
            { "label": "Convocation AG", "url": "actualites/convocation-ag-2026.pdf", "style": "primary" }
        ]
    },
    // ... les actualites existantes suivent
]

3. Mettre a jour les conversations IA

Les conversations IA du site public sont dans conversations.json. Elles sont organisees par categories avec un systeme d'onglets.

Structure du fichier

{
    "categories": [
        {
            "id": "pprl",                       // Identifiant unique (minuscules, pas d'espaces)
            "nom": "PPRL",                      // Nom affiche dans l'onglet
            "description": "Plan de Prevention...",  // Description sous les onglets
            "conversations": [
                {
                    "service": "IA",              // Type : IA, claude, chatgpt, gpt, mistral, notebooklm
                    "titre": "Titre de l'analyse",
                    "resume": "Description courte",
                    "url": "https://...",          // Lien vers la conversation (Claude, ChatGPT...)
                    "date": "2026-03-20",          // Format AAAA-MM-JJ
                    "sources": "PPRL, DDTM"       // Sources utilisees (facultatif)
                }
            ]
        }
    ]
}

Services IA reconnus

Valeur service	Badge affiche	Couleur
`IA`	IA	Bleu-gris
`claude`	Claude	Beige
`chatgpt`	ChatGPT	Vert
`gpt`	GPT	Vert
`mistral`	Mistral	Bleu
`notebooklm`	NotebookLM	Violet (Bureau uniquement)

Ajouter une conversation

1

Ouvrir conversations.json

2

Trouver la categorie souhaitee (ou en creer une nouvelle)

3

Ajouter un nouvel objet dans le tableau "conversations" de cette categorie

4

Deployer sur Cloudflare

Ajouter une nouvelle categorie

// Ajouter cet objet dans le tableau "categories" :
{
    "id": "environnement",
    "nom": "Environnement",
    "description": "Ecologie, biodiversite, erosion du littoral",
    "conversations": []
}

Attention au JSON : chaque objet doit etre separe par une virgule. Le dernier element d'un tableau ne doit pas avoir de virgule apres lui. Utilisez jsonlint.com pour valider votre JSON en cas de doute.

4. Sous-site Bureau

Le Bureau est une page separee (bureau/index.html) protegee par Cloudflare Zero Trust. Seuls les emails autorises y ont acces.

Sections du Bureau

Section	Contenu	Mise a jour
Documents	PV, comptes-rendus	Directement dans le HTML
IA Bureau	Conversations IA privees	`bureau/bureau-conversations.json`
Boite a idees	Propositions des membres	Directement dans le HTML
Agenda	Reunions, echeances	Directement dans le HTML
Membres	Annuaire du bureau	Directement dans le HTML

Conversations IA du Bureau

Le fichier bureau/bureau-conversations.json a exactement la meme structure que conversations.json. Meme format, memes champs.

// bureau/bureau-conversations.json
{
    "categories": [
        {
            "id": "comptabilite",
            "nom": "Comptabilite",
            "description": "Suivi financier, budget, cotisations",
            "conversations": [
                {
                    "service": "claude",
                    "titre": "Analyse budget 2026",
                    "resume": "Previsions recettes/depenses",
                    "url": "https://claude.ai/share/...",
                    "date": "2026-04-01",
                    "sources": "Tresorerie"
                }
            ]
        }
    ]
}

Modifier l'agenda

Ouvrir bureau/index.html et chercher agenda-item. Modifier le jour, mois, titre et description. Exemple :

<div class="agenda-item">
    <div class="agenda-date-box">
        <div class="day">15</div>
        <div class="month">Mai</div>
    </div>
    <div class="agenda-content">
        <h3>Reunion de bureau - 18h00</h3>
        <p>Ordre du jour : preparation AG</p>
        <a href="https://teams.live.com/meet/..." target="_blank"
           class="btn btn-primary">Rejoindre sur Teams</a>
    </div>
</div>

Ajouter un membre

Dans bureau/index.html, chercher membres-grid et dupliquer un bloc membre-card :

<div class="membre-card">
    <div class="membre-avatar">XX</div>       <!-- Initiales -->
    <h3>Prenom Nom</h3>
    <span class="membre-role">Membre</span>  <!-- ou President, Tresorier -->
    <div class="membre-contact">
        <a href="mailto:[email protected]">[email protected]</a>
    </div>
</div>

Membres actuels du Bureau

Nom	Role	Email
JM de Heredia	President	[email protected]
Evelyne Grassin	Secretaire	[email protected]
Alain Roux	Membre	[email protected]
Christian Raguenet	Membre	[email protected]
Daniel Picard	Membre	[email protected]
Gilles Marguery	Tresorier	[email protected]
Herve Frandeboeuf	Membre	[email protected]
Jerome Benoit	Membre	[email protected]
Jean-Quentin Prats	Tresorier	[email protected]

5. HelloAsso (paiement cotisations)

Le widget de paiement HelloAsso est integre en iframe dans la section Adhesion du site public.

URL de la campagne

https://www.helloasso.com/associations/collectif-du-coeur-du-village-du-cap-ferret/adhesions/cotisation-coeur-du-ferret

Configuration

Parametre	Valeur
Campagne	Cotisation Coeur du Ferret
Montant	Prix libre, a partir de 20 EUR
Couleur widget	Terracotta (#B5503C)
Statut requis	Publiee (pas Brouillon)

Important : si la campagne est en "Brouillon" sur HelloAsso, le widget ne s'affiche pas sur le site. Pensez a la publier.

Changer la couleur du widget

Dans index.html, chercher l'URL de l'iframe et modifier le parametre ?color= :

src="...cotisation-coeur-du-ferret/widget?color=B5503C"
// Couleurs possibles : 1B3A4B (marine), D4A655 (or), B5503C (terracotta)

6. Deployer sur Cloudflare

Le dossier source est situe a :

C:\Users\jose-\OneDrive\Association\Site

Methode 1 : Dashboard Cloudflare (manuelle)

1

Aller sur dash.cloudflare.com > Workers & Pages > coeurduferret

2

Cliquer sur "Create deployment"

3

Glisser-deposer le contenu du dossier Site/

4

Cliquer "Deploy" et attendre la confirmation

Methode 2 : Wrangler CLI (automatisable)

# Installation (une seule fois)
npm install -g wrangler

# Deploiement
wrangler pages deploy "C:\Users\jose-\OneDrive\Association\Site" --project-name=coeurduferret

Script de deploiement rapide

Creer un fichier deploy.bat sur le bureau :

@echo off
echo Deploiement Coeur du Ferret...
wrangler pages deploy "C:\Users\jose-\OneDrive\Association\Site" --project-name=coeurduferret
echo.
echo Deploiement termine !
pause

Astuce : OneDrive synchronise automatiquement les fichiers. Apres toute modification sur votre PC, attendez que la synchronisation soit terminee (icone verte) avant de deployer.

7. Cloudflare Zero Trust (protection Bureau)

L'acces a coeurduferret.com/bureau/ est protege par Cloudflare Zero Trust Access. Seuls les emails autorises peuvent y acceder.

Configuration

1

Aller sur one.dash.cloudflare.com (Zero Trust)

2

Access > Applications > Add an application > Self-hosted

3

Application name: Bureau Coeur du Ferret, Domain: coeurduferret.com, Path: bureau

4

Policy: Allow, Include: Emails, saisir chaque email autorise

Emails a autoriser

[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

Fonctionnement

Quand un visiteur accede a /bureau/, Cloudflare affiche un ecran de connexion. L'utilisateur saisit son email, recoit un code PIN a 6 chiffres, le saisit et accede a la page. Plan gratuit : jusqu'a 50 utilisateurs.

8. SEO et referencement

Fichiers SEO en place

Fichier	Role
`robots.txt`	Autorise l'indexation, pointe vers le sitemap
`sitemap.xml`	Liste des pages pour Google/Bing
Balises meta (index.html)	Open Graph, Twitter Card, Schema.org (NGO)

Inscrire le site sur les moteurs de recherche

1

Google : aller sur Google Search Console, ajouter la propriete coeurduferret.com, verifier via Cloudflare DNS, puis soumettre le sitemap https://coeurduferret.com/sitemap.xml

2

Bing : aller sur Bing Webmaster Tools, importer depuis Google Search Console ou ajouter manuellement

Mettre a jour le sitemap

Apres chaque modification importante, mettre a jour la date lastmod dans sitemap.xml :

<url>
    <loc>https://coeurduferret.com/</loc>
    <lastmod>2026-04-12</lastmod>    <!-- Mettre la date du jour -->
    <changefreq>weekly</changefreq>
</url>

9. Mode clair / sombre

Le toggle jour/nuit est dans la barre de navigation (icone lune/soleil). Il fonctionne sur toutes les sections du site public et du Bureau.

Fonctionnement technique

Le bouton ajoute/retire la classe body.dark-mode. Les regles CSS sont definies pour chaque section par ID pour eviter les conflits de specificite.

Si une nouvelle section ne passe pas en dark mode : verifier que la regle body.dark-mode #maSection { background-color: #0c1820 !important; background-image: none !important; } est bien presente dans le CSS.

10. Contacts techniques

Sujet	Contact
Site web, maintenance	JM de Heredia ([email protected])
Email association	[email protected]
Cloudflare (hebergement)	dash.cloudflare.com
HelloAsso (paiements)	helloasso.com
Conception du site	AppyService

Documentation generee le 2026-04-12. Revision operationnelle : 2026-08-16. Derniere mise a jour du site : voir sitemap.xml pour la date exacte.

11. Particularites operationnelles

Points de fonctionnement non evidents, a connaitre absolument avant toute intervention. Cette section concentre les "pieges" du site tel qu'il fonctionne reellement.

11.1 Actualites et drapeau "prioritaire"

Le champ "prioritaire": true d'une actualite pilote trois elements a la fois : le classement en tete de liste, le bandeau d'alerte terracotta visible par tous les visiteurs, et l'encart "Risque Incendie" sur la page d'accueil.

Regle d'or : une seule actualite doit porter "prioritaire": true a la fois (la plus recente). En publier une nouvelle prioritaire implique de repasser la precedente a "prioritaire": false. Sinon plusieurs alertes se disputent l'affichage.

Champ	Effet
`prioritaire`	Alerte + encart hero + tete de liste
`active: false`	Masque l'actualite sans la supprimer
`note`	Ajoute l'encart "Notre position - Coeur du Ferret"
`\|\|` dans un texte	Separateur de paragraphe

Les textes du JSON sont ecrits en entites HTML (par ex. é pour "e accent aigu").

11.2 Encart "Risque Incendie" (page d'accueil)

Texte statique cliquable pointant vers feux.coeurduferret.com. Il s'affiche tant qu'il existe une actualite prioritaire active ; pour le faire disparaitre, retirer ou desactiver l'actualite prioritaire.

11.3 Notifications push (OneSignal) - envoi MANUEL

Le site ne fait que collecter les abonnes (bouton "Activer les notifications", section Adhesion). Aucune notification ne part automatiquement quand on publie une actualite.

Pour notifier : tableau de bord OneSignal → Messages → New Push → rediger → envoyer aux abonnes. C'est une action humaine a chaque fois.

Point critique : dans OneSignal, l'URL du site doit etre https://coeurduferret.com et non .org. Le web push est lie a l'origine exacte : une mauvaise URL bloque tous les abonnements. Le service worker OneSignalSDKWorker.js doit rester a la racine. AppId : f81428b2-ecbd-4357-964d-8cc4bfc217af.

Note : l'application carte des feux fait l'objet d'une section dediee (voir section 12).

11.4 Deux domaines : redirection .org vers .com

Le domaine canonique est coeurduferret.com. coeurduferret.org redirige en 301 vers .com via un petit Worker Cloudflare (dossier redirect-org-worker). Les deux domaines pointent sur le meme contenu, mais tout doit converger vers .com (notamment pour OneSignal).

11.5 Deux "feux" a ne pas confondre

Distinction essentielle : il existe deux choses differentes autour des feux.

Element	Nature	Deploiement
Page `feux/`	Page statique DANS ce site (point quotidien : Dernier point / Historique / Sources)	Avec le site (`npm run deploy`)
`feux.coeurduferret.com`	Application carte vent/incendie, projet SEPARE (vinext)	Heberge via un site ChatGPT (voir `.openai/hosting.json`)

Le dossier local Incendie_Gironde n'est qu'une copie de l'application carte. Toute modification (titre, sélecteur, liens) doit etre refaite et republiee sur la source ChatGPT ; editer la copie ne change rien en ligne.

11.6 HelloAsso (adhesions)

Le formulaire est integre par iframe (collecte "cotisation-annuelle"). Comme il s'agit d'un domaine externe :

Element	Modifiable ?
Couleur du formulaire	Uniquement dans l'espace HelloAsso (le parametre d'URL n'est plus pris en compte)
Libelle du bouton "Commander"	Non (iframe cross-origin ; impossible en JS)
Contribution volontaire a HelloAsso	Non desactivable (modele economique). Le payeur peut la mettre a 0

L'association recoit 100 % de la cotisation (la contribution est ajoutee par-dessus, payee par le donateur). Une alternative "formulaire maison + API HelloAsso Checkout" permettrait de personnaliser bouton et couleurs, mais exige un Worker cote serveur.

11.7 E-mail [email protected]

Reception : redirection via Cloudflare Email Routing (gratuit) vers une boite existante. Envoi depuis cette adresse : necessite une vraie boite (Google Workspace / Microsoft 365, potentiellement gratuit via l'offre non-profit et Solidatech) ou un "send as" configure sur un relais SMTP.

11.8 Brevo (campagnes ponctuelles)

Plus de newsletter reguliere : le contenu vit sur le site. Brevo sert a des campagnes ponctuelles invitant a s'abonner aux notifications (modele : campagne-brevo-notifications.html). Le formulaire d'inscription a ete retire du site.

11.9 Menu de navigation

"Adhesion" est un bouton dore a droite (classe nav-cta), pour servir d'appel a l'action. Le lien "Bureau" est masque du menu public ; la page reste accessible via /bureau/.

11.10 Deploiement - recapitulatif

Element	Commande / methode
Site principal (dont page `feux/`, bureau, actualites)	`npm run deploy` (Cloudflare Pages)
Redirection .org → .com	`npx wrangler deploy` dans `redirect-org-worker` (deja en place)
Application carte `feux.coeurduferret.com`	Republier via l'outil ChatGPT (pas de commande locale)

Astuce : un node_modules installe sous Windows ne fonctionne pas dans un environnement Linux. Refaire npm ci (ou npm install) sur la plateforme cible avant de builder.

12. Application carte des feux (site ChatGPT separe)

L'adresse feux.coeurduferret.com n'est PAS une page de ce site : c'est une application distincte (carte du vent et des points de feu), avec son propre code et son propre hebergement.

A retenir absolument : cette application est hebergee via un site ChatGPT (plateforme d'hebergement OpenAI). Le dossier Incendie_Gironde present sur l'ordinateur n'est qu'une copie de travail : y editer les fichiers ne modifie PAS le site en ligne. Toute modification doit etre refaite et republiee depuis la source ChatGPT.

Fiche technique

Element	Detail
URL publique	`feux.coeurduferret.com`
Nature	Application vinext (Vite + Cloudflare), carte MapLibre + couche vent
Hebergement	Site ChatGPT / OpenAI (identifiant projet dans `.openai/hosting.json`)
Copie locale	Dossier `Incendie_Gironde` (copie, non reliee au deploiement)
Fichier principal	`app/page.tsx`

Comment la modifier

1

Ouvrir la source ChatGPT qui a servi a creer et publier l'application (et non la copie locale).

2

Decrire la modification souhaitee en langage naturel (le rendu compte, pas le code exact).

3

Republier depuis cet outil. C'est la seule facon de mettre a jour feux.coeurduferret.com.

Modifications de reference deja appliquees

Ces changements ont ete faits dans la copie locale (app/page.tsx) et doivent etre reportes sur la source ChatGPT :

Zone	Modification
Fond de carte	Ordre Satellite, Clair, Sombre ; Satellite par defaut
Titre de l'alerte	"INCENDIE EN COURS" → "Risque Incendies"
Phrase de description	"Un incendie est signale sur huit communes..." supprimee
Selecteur de communes	Boutons (Saumos, Le Temple...) supprimes
Bouton Mairie	"Lire le point de la Mairie" supprime
Lien source Mairie	"Mairie de Lege-Cap-Ferret" retire de la liste de sources

Piste non encore realisee : afficher une echelle de couleurs selon la force du vent (sur la carte et sur le curseur de temps). A demander a la source ChatGPT si souhaite.

Documentation Coeur du Ferret

Sommaire

1. Architecture du site

Arborescence des fichiers

Domaines

Technologies

2. Mettre a jour les actualites

Structure du fichier

Ajouter une actualite

Exemple : ajouter une actualite

3. Mettre a jour les conversations IA

Structure du fichier

Services IA reconnus

Ajouter une conversation

Ajouter une nouvelle categorie

4. Sous-site Bureau

Sections du Bureau

Conversations IA du Bureau

Modifier l'agenda

Ajouter un membre

Membres actuels du Bureau

5. HelloAsso (paiement cotisations)

URL de la campagne

Configuration

Changer la couleur du widget

6. Deployer sur Cloudflare

Methode 1 : Dashboard Cloudflare (manuelle)

Methode 2 : Wrangler CLI (automatisable)

Script de deploiement rapide

7. Cloudflare Zero Trust (protection Bureau)

Configuration

Emails a autoriser

Fonctionnement

8. SEO et referencement

Fichiers SEO en place

Inscrire le site sur les moteurs de recherche

Mettre a jour le sitemap

9. Mode clair / sombre

Fonctionnement technique

10. Contacts techniques

11. Particularites operationnelles

11.1 Actualites et drapeau "prioritaire"

11.2 Encart "Risque Incendie" (page d'accueil)

11.3 Notifications push (OneSignal) - envoi MANUEL

11.4 Deux domaines : redirection .org vers .com

11.5 Deux "feux" a ne pas confondre

11.6 HelloAsso (adhesions)

11.7 E-mail [email protected]

11.8 Brevo (campagnes ponctuelles)

11.9 Menu de navigation

11.10 Deploiement - recapitulatif

12. Application carte des feux (site ChatGPT separe)

Fiche technique

Comment la modifier

Modifications de reference deja appliquees