# AGENTS.md — CAHIER DES CHARGES COMPLET : THÈME WORDPRESS `cgt-wp-theme` **Projet :** Site officiel de l'Union Locale CGT Foix Haute-Ariège (`https://cgt-fha.fr/`) **Dépôt Gitea officiel :** `https://git.cgt-fha.fr/Union_Locale_CGT_Foix_Haute-Ariege/cgt-wp-theme.git` **Chemin de déploiement VPS :** `/var/www/fastuser/data/www/cgt-fha.fr/wp-content/themes/cgt-fha/` **Ressource Skills locale :** `../skills/` (`../skills/wp-performance/SKILL.md` et `../skills/wp-block-themes/SKILL.md`) **Ressource graphique locale :** `../ressources/banniere union locale noir.png` (à copier dans `assets/img/banniere-ul-noir.png` et utiliser comme logo par défaut de l'en-tête) **Maquette de référence visuelle :** L'utilisateur fournit l'image de maquette validée en pièce jointe. Respecte fidèlement sa hiérarchie visuelle, ses proportions, ses espacements et son style graphique. --- ## 1. PHILOSOPHIE TECHNIQUE, SKILLS & RÈGLES D'ARCHITECTURE Tu es l'unique développeur de ce thème WordPress sur mesure. Ce thème remplace un thème généraliste bridé (*Neve*) pour offrir une souveraineté totale, une vitesse de chargement maximale et une ergonomie pensée pour les salariés et militants de Haute-Ariège[cite: 6]. - **Utilisation des Skills (`../skills/`) :** - Lis et applique les bonnes pratiques définies dans `../skills/wp-performance/SKILL.md` (optimisation des requêtes, cache Transients, WP-Cron) et `../skills/wp-block-themes/SKILL.md` (uniquement pour la structure propre de `theme.json`)[cite: 6]. - **Restriction stricte :** Ne génère **jamais** de blocs Gutenberg personnalisés en React (`@wordpress/scripts`, `block.json` compilés) ni de Full Site Editing complet[cite: 6]. - **Architecture : Thème PHP Classique / Hybride Moderne :** - Utilise des gabarits PHP 8.x propres, typés et sécurisés (`header.php`, `footer.php`, `front-page.php`, `home.php`, `single.php`, `page.php`, `archive.php`, `404.php`)[cite: 6]. - Utilise `theme.json` uniquement pour déclarer la palette de couleurs CGT et les typographies dans l'éditeur d'articles[cite: 6]. - **Zéro dépendance externe lourde (RGPD & Performance) :** - CSS moderne natif (`CSS Custom Properties`, `CSS Grid`, `Flexbox`, mobile-first). Aucune bibliothèque CSS externe (pas de Bootstrap ni Tailwind CDN)[cite: 6]. - JavaScript *Vanilla* ES6 minimaliste uniquement pour le menu mobile accessible et les onglets de l'admin (pas de jQuery)[cite: 6]. - Aucune police Google Fonts chargée via CDN tiers : utilise des polices système modernes (`system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`) ou des fichiers hébergés localement[cite: 6]. - **100 % Modifiable sans toucher au code :** - En dehors des articles locaux (publiés dans WordPress) et des actualités confédérales extraites automatiquement depuis `cgt.fr`, **tous les textes, images, icônes, liens, boutons et coordonnées du thème doivent être modifiables depuis l'administration WordPress** (*Apparence > Réglages UL CGT* + *Apparence > Menus* + *Médiathèque*). - **Pré-remplissage obligatoire par défaut :** Toutes les options doivent posséder des valeurs par défaut complètes (définies via `wp_parse_args()`) afin que le site soit immédiatement fonctionnel et complet dès l'activation du thème, sans aucune zone vide. - **Intégration propre avec les extensions sœurs (Gitea) :** - Le thème gère le visuel, le SEO/OpenGraph de base, le bandeau de mobilisation et l'encart d'actualités confédérales[cite: 6]. - Il prévoit des hooks/emplacements propres (`do_action(...)` / support de shortcodes) pour accueillir les sorties des extensions `cgt-wp-calendar` (Agenda) et `cgt-wp-forms` (Formulaires Défense, Adhésion, Formation), tout en affichant un rendu cohérent même si ces extensions ne sont pas encore activées[cite: 6]. --- ## 2. IDENTITÉ VISUELLE & CHARTE GRAPHIQUE - **Couleur primaire (Rouge CGT) :** `--cgt-red: #d20012;` (hover : `--cgt-red-dark: #a8000e;`)[cite: 7] - **Couleurs neutres & surfaces :** - Fond principal : `--bg-main: #ffffff;` - Fond alterné (section Confédérale / Formation / Footer) : `--bg-soft: #f1f3f5;` - Barre supérieure contact : `--bg-topbar: #1c1e21;` - Texte principal : `--text-main: #1a1a1a;` - Texte secondaire : `--text-muted: #4a5568;` - Bordures des cartes : `--border-card: #cbd5e1;` - Rayons d'arrondi : `--radius-card: 12px;` à `14px`, boutons pilules `--radius-pill: 999px;`. --- ## 3. EN-TÊTE (`header.php`) & NAVIGATION Respecte exactement le haut de la maquette de référence : 1. **Barre supérieure (`topbar`) :** - Fond sombre (`#1c1e21`), texte blanc fin (`13px`). - À gauche : icône téléphone + lien `tel:` (`07 60 49 64 69` par défaut) et icône enveloppe + lien `mailto:` (`union-locale@cgt-fha.fr` par défaut)[cite: 7]. - À droite : icônes réseaux sociaux (Facebook officiel de l'UL `https://www.facebook.com/profile.php?id=61552410568856`, etc., éditables dans les réglages)[cite: 7]. 2. **Bandeau d'Alerte Mobilisation Auto-Expirant :** - Bandeau pleine largeur sur fond rouge CGT (`#d20012`), texte blanc centré en gras (ex. : `MOBILISATION : Grève et manifestation à Foix - Allées de Villote`), cliquable si une URL est renseignée[cite: 6]. - **Condition stricte d'affichage :** S'affiche uniquement si la case *Activer le bandeau* est cochée **ET** que l'horodatage actuel (`current_time('timestamp')`) est strictement inférieur à la *Date et heure d'expiration* configurée dans l'admin[cite: 6]. Passé ce délai, le bandeau disparaît automatiquement[cite: 6]. 3. **Barre de Navigation Principale (`
`) :** - Fond blanc, hauteur confortable, ombre légère au défilement. - À gauche : Logo officiel de l'Union Locale CGT Foix Haute-Ariège (modifiable via `custom_logo` dans WordPress, avec fallback SVG/PNG local propre). - À droite : Menu principal horizontal (`wp_nav_menu` : **Accueil**, **Actualités**, **Calendrier**, **Contact**), avec soulignement rouge sur l'élément actif. - **IMPORTANT :** Ne mets **PAS** de bouton rouge « Syndiquez-vous » dans cette barre de navigation (pour éviter la répétition avec le Hero juste en dessous). - Sur mobile (`< 768px`) : bouton menu hamburger accessible (`aria-expanded="false"`, contrôle clavier `Escape`). --- ## 4. PAGE D'ACCUEIL (`front-page.php`) — STRUCTURE COMPLÈTE La page d'accueil s'articule en **7 sections verticales** dans cet ordre exact : ### Section 1 : Bannière Hero Plein Écran (Ancrage Territorial & Action) - **Visuel de fond :** Image panoramique des montagnes d'Ariège / territoire (configurable dans l'admin avec une image par défaut intégrée dans `assets/img/hero-ariege.jpg`), recouverte d'un voile sombre dégradé (`rgba(15, 18, 22, 0.62)`) assurant une lisibilité parfaite du texte blanc. - **Contenu centré verticalement et horizontalement :** - Titre principal (`

`, blanc, grand, gras, 2 lignes) : `Union Locale CGT Foix Haute-Ariège` `Votre syndicat de proximité !` - Citation centrée en dessous (blanc doux, italique, éditable dans l'admin) : `« La régression sociale ne se négocie pas, elle se combat ! » — Henri Krasucki, Secrétaire Général de la CGT de 1982 à 1992` - **Deux boutons d'action centrés côte à côte** (`display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;`) : 1. Bouton gauche (fond blanc `#ffffff`, texte noir `#1a1a1a`, coins arrondis `8px`, gras) : **« J'ai besoin d'aide »** (lien configurable, par défaut vers la page Contact / Urgence salarié)[cite: 6]. 2. Bouton droit (fond sombre translucide ou rouge foncé, bordure blanche/rouge, texte blanc, coins arrondis `8px`, gras) : **« Rejoindre la CGT »** (lien configurable, par défaut vers la page Syndiquez-vous)[cite: 6]. ### Section 2 : Module « À QUOI NOUS SERVONS ? » (3 Cartes de Mission) Placé **immédiatement sous le Hero et avant les actualités** (fond blanc `#ffffff`) : - **Titre de section :** `À QUOI NOUS SERVONS ?` centré en majuscules (`

`). - **Grille 3 colonnes** (`grid-template-columns: repeat(3, 1fr); gap: 1.5rem;`, 1 colonne sur mobile) : - Chaque carte possède un fond blanc, une bordure fine (`1px solid #cbd5e1`), des coins arrondis (`border-radius: 12px`), un padding généreux (`1.75rem`) et un contenu centré : 1. **Carte 1 :** Icône poing levé / collectif (SVG propre) • Titre `S'ORGANISER` • Texte par défaut : *« Construire le syndicat dans votre entreprise, préparer les élections CSE et ne plus rester isolé face à l'employeur. »* 2. **Carte 2 :** Icône bouclier (SVG propre) • Titre `SE DÉFENDRE` • Texte par défaut : *« Faire respecter vos droits, vos salaires et vos conditions de travail, avec l'appui de nos conseillers du salarié et juristes. »* 3. **Carte 3 :** Icône bulles d'échange / livre (SVG propre) • Titre `S'INFORMER & SE FORMER` • Texte par défaut : *« Connaître les actualités des luttes en Haute-Ariège et bénéficier de vos droits à la formation syndicale (CFESES). »* - *Note :* Les icônes (sélecteur parmi une bibliothèque SVG intégrée), titres et textes de ces 3 cartes sont modifiables dans l'admin WordPress. ### Section 3 : Vitrine 1 — « SUR LE TERRAIN EN HAUTE-ARIÈGE » (Actualités Locales) - **Priorité éditoriale locale :** Affiche automatiquement les **3 derniers articles publiés** dans le WordPress de l'UL (`WP_Query` sur `post_type => 'post'`, `posts_per_page => 3`)[cite: 6]. - **Titre de section :** `SUR LE TERRAIN EN HAUTE-ARIÈGE` centré en majuscules (`

`). - **Mise en page des 3 cartes** (fidèle à la maquette) : - Grille 3 colonnes (`gap: 1.5rem`). - Image à la une en haut avec coins arrondis (`border-radius: 12px; height: 190px; object-fit: cover; width: 100%;`), avec fallback SVG propre si un article n'a pas d'image. - Juste sous l'image : une pilule rouge CGT (`background: #d20012; color: #fff; border-radius: 999px; font-size: 12px; padding: 2px 10px;`) affichant la catégorie principale (ex. *Mobilisation*, *Vie syndicale*) suivie de la date de publication (`d.m.Y`). - Titre de l'article en gras (`18px`) cliquable vers `single.php`. - Extrait nettoyé (`wp_trim_words`, ~20 mots). - **Pied de section :** Bouton lien discret centré *« Voir toutes les actualités locales → »* vers la page des articles (`get_permalink(get_option('page_for_posts'))`), suivi du hook `do_action('cgt_fha_after_local_news');` permettant d'injecter les prochains rendez-vous de `cgt-wp-calendar`[cite: 6]. ### Section 4 : Vitrine 2 — « ACTUALITÉ CONFÉDÉRALE » (Récupération automatique `cgt.fr`) - **Fond de section :** Gris très doux (`#f1f3f5`) pour bien la distinguer des actualités locales. - **Titre de section :** `ACTUALITÉ CONFÉDÉRALE` centré en majuscules (`

`). - **Moteur PHP (`inc/class-cgt-confederal-feed.php`) :** - Interroge `https://www.cgt.fr/` via `wp_remote_get()` (timeout 10s, User-Agent propre) et parse le HTML avec `DOMDocument` + `DOMXPath` (sans polluer `wp_posts`) : - **1 article `featured` (« À la une ») :** extrait depuis la section *"à la une de la cgt"* (`title`, `summary`, `image_url` convertie en URL absolue `https://www.cgt.fr/...`, `category`, `url`). - **3 articles `latest` (`ARTICLE 1`, `ARTICLE 2`, `ARTICLE 3`) :** extraits depuis les 3 premiers articles de la section suivante *"mais aussi..."* (complétés via `https://www.cgt.fr/actualites` si un résumé est manquant). - **Fallback de sécurité :** Si la page d'accueil `cgt.fr` échoue ou change de structure DOM, bascule automatiquement sur les 4 premiers articles de `https://www.cgt.fr/actualites` (le 1er devient `featured`, les 3 suivants deviennent `latest`). - **Cache & WP-Cron :** Stockage dans le transient `cgt_fha_confederal_feed` (expiration 3h) + sauvegarde de secours `cgt_fha_confederal_feed_backup` conservée en cas d'indisponibilité réseau. Événement `WP-Cron` toutes les 2 heures + bouton *"Actualiser les actus confédérales"* dans la barre d'admin WordPress (`admin_bar_menu`). - **Rendu HTML/CSS fidèle à la maquette :** - **Bloc supérieur « À LA UNE » :** - Conteneur centré (`max-width: 880px; margin: 0 auto 2.5rem auto;`), disposition horizontale Flexbox (`align-items: center`). - À gauche (`flex: 0 0 58%`) : Image de l'article (`border-radius: 14px; height: 290px; object-fit: cover;`) avec un badge overlay discret en bas à droite `À LA UNE`. - À droite (`flex: 1; margin-left: -40px; position: relative; z-index: 2;`) : **Boîte blanche arrondie chevauchant le bord droit de l'image** (`background: #fff; border: 1px solid #cbd5e1; border-radius: 14px; padding: 1.75rem; box-shadow: 0 10px 25px rgba(0,0,0,0.06); text-align: center;`) contenant : - Le titre de l'article (ou surtitre `À LA UNE` + titre). - La description / chapô nettoyé. - Le bouton pilule encadré (`border: 1.5px solid #1a1a1a; border-radius: 999px; padding: 6px 28px; font-weight: 700;`) : **« LIRE SUR CGT.FR ↗ »** (`target="_blank" rel="noopener noreferrer"`). - *Responsive mobile (`< 768px`) :* `flex-direction: column`, `margin-left: 0`, `margin-top: -24px`. - **Grille inférieure (3 colonnes : ARTICLE 1, ARTICLE 2, ARTICLE 3) :** - Grille CSS `grid-template-columns: repeat(3, 1fr); gap: 1.5rem;` (1 colonne sous `768px`). - Chaque carte affiche l'image en haut (`height: 190px; width: 100%; object-fit: cover; border-radius: 14px;`), puis une **boîte blanche arrondie qui remonte par-dessus le bas de l'image** (`margin-top: -24px; position: relative; z-index: 2; background: #fff; border: 1px solid #cbd5e1; border-radius: 14px; padding: 1.25rem; box-shadow: 0 6px 18px rgba(0,0,0,0.05); display: flex; flex-direction: column; text-align: center; flex: 1;`) contenant : - Le titre de l'article en gras. - La description courte (~120 caractères). - En bas (`margin-top: auto; padding-top: 1rem;`), le bouton pilule encadré **« LIEN ↗ »** (`target="_blank" rel="noopener noreferrer"`). ### Section 5 : Parcours « SALARIÉS ISOLÉS & TPE : VOUS N'ÊTES PAS SEULS » - **Fond :** Blanc (`#ffffff`). - **Contenu (entièrement éditable dans l'admin) :** - Bloc pédagogique destiné aux salariés des petites entreprises (< 11 salariés), commerces, artisanat ou chantiers sans CSE[cite: 6]. - Met en avant la **confidentialité absolue** de toute démarche vis-à-vis de l'employeur, le rôle du syndicat **Multipros**, et l'accompagnement par les **Conseillers du Salarié** lors des entretiens préalables[cite: 6]. - Bouton d'action rouge CGT : *« Contacter l'UL en toute confidentialité »*[cite: 6]. ### Section 6 : Vie Militante, Formation Syndicale (CFESES) & Appli Mobile - **Fond :** Gris doux (`#f1f3f5`). - **Grille 2 colonnes (`grid-template-columns: 1fr 1fr; gap: 2rem;`) :** 1. **Colonne gauche — Formation Syndicale (CFESES) :** Rappelle le droit légal de chaque salarié au **Congé de Formation Économique, Sociale, Environnementale et Syndicale** (maintien de salaire, demande à remettre à l'employeur 30 jours avant) et l'aide à la vie syndicale[cite: 6, 8]. 2. **Colonne droite — L'Application Mobile UL CGT Foix Haute-Ariège :** Présente l'application Android/KMP (actualités locales, alertes mobilisation Push, carte de syndiqué virtuelle & 13 timbres 100 % hors-ligne) avec emplacement pour le lien de téléchargement direct (`.apk` / Play Store) et l'image QR Code (configurables dans l'admin)[cite: 8]. ### Section 7 : Réseau Syndical CGT - **Fond :** Blanc (`#ffffff`). - Bandeau de liens structurés vers l'écosystème confédéral et départemental : **UD CGT 09**, **Confédération CGT (`cgt.fr`)**, **La NVO (`nvo.fr`)**, **IHS CGT**, **INDECOSA-CGT**[cite: 6]. --- ## 5. PIED DE PAGE (`footer.php`) — SOUVERAIN & PRATIQUE - **Aucune mention** *"Propulsé par WordPress"* ou *"Thème..."*[cite: 6]. - **Fond sombre (`#1c1e21`), texte blanc/gris clair, grille 3 colonnes :** 1. **Union Locale CGT Foix Haute-Ariège :** Logo (version claire/monochrome), courte présentation, et appel militant : *« Une lutte dans votre entreprise, une info à partager ? Contactez l'UL »*. 2. **Nos Locaux & Permanences (visible sur 100 % des pages) :**[cite: 6] - Adresse : `Espace Sabart, 10 Av. de l'Ayroule, 09400 Tarascon-sur-Ariège` (modifiable dans l'admin)[cite: 7]. - Téléphone cliquable : `07 60 49 64 69`[cite: 7] - Email cliquable : `union-locale@cgt-fha.fr`[cite: 7] - Horaires des permanences d'accueil et juridiques (éditables)[cite: 6]. - Lien vers la page Facebook officielle de l'UL[cite: 7]. 3. **Accès rapides & Mentions :** Liens vers *Actualités*, *Calendrier*, *Se syndiquer*, *Urgence salarié*, *Mentions légales & Confidentialité*. --- ## 6. PANNEAU D'ADMINISTRATION WORDPRESS (`inc/theme-options.php`) Crée une page de réglages complète et intuitive dans **Apparence > Réglages UL CGT** (organisée en onglets propres sans dépendance JS externe) permettant de modifier sans coder : 1. **Onglet 1 — Identité & Coordonnées :** Téléphone, E-mail, Adresse des locaux, Horaires des permanences, URL Facebook, URL page *Syndiquez-vous*, URL page *Besoin d'aide / Contact*. 2. **Onglet 2 — Bandeau Mobilisation :** Case *Activer*, Texte du mot d'ordre & lieu, Lien URL optionnel, Champ `datetime-local` d'expiration automatique[cite: 6]. 3. **Onglet 3 — Page d'accueil (Hero & Blocs statiques) :** - Sélecteur d'image de fond du Hero (via la Médiathèque WP `wp_enqueue_media()`), Titre H1, Citation, Libellés et liens des 2 boutons du Hero. - Champs pour les 3 cartes *« À quoi nous servons ? »* (choix d'icône SVG, titre, description pour chaque carte). - Champs pour les blocs *Salariés isolés / TPE*, *Formation CFESES* et *Application Mobile* (URL APK/Store + sélecteur image QR Code + cases pour afficher/masquer chaque bloc)[cite: 6, 8]. 4. **Onglet 4 — Flux Confédéral (`cgt.fr`) :** État du cache actuel (date de dernière synchronisation, aperçu de l'article *À la une* en cache) et bouton de rafraîchissement manuel immédiat. --- ## 7. SEO LOCAL, OPENGRAPH & PERFORMANCE (`inc/seo-performance.php`) 1. **Balises `` et `<meta name="description">` :** - Sur la page d'accueil : `Union Locale CGT Foix Haute-Ariège | Défense des salariés et action syndicale`[cite: 6]. - Sur les articles et pages : `[Titre] | Union Locale CGT Foix Haute-Ariège` + meta description extraite automatiquement du contenu nettoyé[cite: 6]. 2. **Balises OpenGraph :** Injection automatique de `og:title`, `og:description`, `og:url`, `og:type`, `og:locale` (`fr_FR`) et `og:image` (image à la une ou image Hero par défaut) pour des aperçus propres sur Facebook, WhatsApp et SMS[cite: 6]. 3. **Alerte Indexation Admin :** Si `get_option('blog_public') == '0'`, affiche une alerte rouge dans le tableau de bord WordPress invitant à autoriser l'indexation dans *Réglages > Lecture*[cite: 6]. 4. **Optimisation & Nettoyage :** Suppression de `wp-emoji` et `wp-embed`, ajout de `loading="lazy"` sur les images hors ligne de flottaison, échappement systématique (`esc_html`, `esc_url`, `esc_attr`, `wp_kses_post`)[cite: 6]. --- ## 8. GESTION DE VERSIONS & PUBLICATION GITEA - **Dépôt distant :** `https://git.cgt-fha.fr/Union_Locale_CGT_Foix_Haute-Ariege/cgt-wp-theme.git` (branche principale : `main`). - **Fichier `.gitignore` :** Crée un fichier `.gitignore` propre à la racine pour exclure les fichiers système (`.DS_Store`, `Thumbs.db`), les éditeurs (`.vscode/`, `.idea/`), et d'éventuels dossiers temporaires, tout en conservant le code source du thème et le fichier `AGENTS.md`. - **Compatibilité déploiement VPS :** Assure-toi que tous les chemins dans le thème utilisent exclusivement les fonctions natives WordPress (`get_template_directory()`, `get_template_directory_uri()`) afin que le déploiement automatisé vers `/var/www/fastuser/data/www/cgt-fha.fr/wp-content/themes/cgt-fha/` fonctionne sans aucune dépendance de chemin en dur[cite: 6]. --- ## 9. ARBORESCENCE DES FICHIERS À GÉNÉRER ```text / ├── AGENTS.md # Ce cahier des charges ├── .gitignore # Exclusions propres pour Gitea ├── style.css # En-tête thème WP + Variables CSS + Design System complet ├── theme.json # Palette couleurs CGT (#d20012) & réglages éditeur ├── functions.php # Chargement des modules, supports WP, menus, enqueues ├── header.php # Topbar, Bandeau Mobilisation auto-expirant, Nav responsive ├── footer.php # Footer 3 colonnes avec coordonnées Espace Sabart & liens CGT ├── front-page.php # Page d'accueil complète (7 sections fidèles à la maquette) ├── home.php # Liste paginée des actualités locales de l'UL ├── single.php # Gabarit d'article local (partage social, catégorie, navigation) ├── page.php # Gabarit de page standard (Contact, Calendrier, Syndiquez-vous...) ├── archive.php # Archives par catégorie/étiquette locale ├── 404.php # Page d'erreur 404 utile avec recherche et liens vers l'UL ├── inc/ │ ├── class-cgt-confederal-feed.php # Scraper cgt.fr + cache Transients + WP-Cron + rendu wireframe │ ├── theme-options.php # Page d'admin WP : Réglages UL CGT (onglets + médias WP) │ └── seo-performance.php # Titres SEO locaux, OpenGraph, alerte indexation, nettoyage WP └── assets/ ├── js/main.js # Menu mobile accessible & onglets admin (Vanilla JS) └── img/ # Visuels par défaut (hero-ariege.jpg/svg, logo-ul.svg, placeholder.svg)