Story 1.1: initialisation projet

2026-02-04 02:14:17 +01:00
parent c9f95d39a0
commit e3f062249b
38 changed files with 10300 additions and 0 deletions
--- a/docs/stories/2.2.bouton-cta-navbar.md
+++ b/docs/stories/2.2.bouton-cta-navbar.md
@@ -0,0 +1,120 @@
+# Story 2.2: Bouton CTA "Me Contacter" dans la Navbar
+
+## Status
+
+Ready for Dev
+
+## Story
+
+**As a** visiteur,
+**I want** voir un bouton "Me contacter" visible en permanence,
+**so that** je puisse initier un contact à tout moment sans chercher.
+
+## Acceptance Criteria
+
+1. Le bouton "Me contacter" est stylé différemment des autres liens (bouton rempli, couleur d'accent)
+2. Le bouton est visible sur desktop ET sur mobile (même dans le menu hamburger)
+3. Le bouton redirige vers la page contact.php
+4. Le bouton a un état hover/focus visible
+5. Le bouton respecte l'accessibilité (focusable, contraste suffisant)
+
+## Tasks / Subtasks
+
+- [] **Task 1 : Styler le bouton CTA dans la navbar** (AC: 1)
+  - [] Appliquer la classe `btn-primary` au lien Contact
+  - [] Ajouter un espacement distinct (margin-left)
+  - [] Vérifier le contraste des couleurs
+
+- [] **Task 2 : Assurer la visibilité mobile** (AC: 2)
+  - [] Vérifier que le CTA est présent dans le menu mobile
+  - [] Styler le CTA différemment dans le menu mobile (full-width ou mis en avant)
+
+- [] **Task 3 : Configurer le lien** (AC: 3)
+  - [] Le href pointe vers `/contact`
+  - [] Tester la navigation
+
+- [] **Task 4 : Implémenter les états interactifs** (AC: 4, 5)
+  - [] État hover (couleur plus claire)
+  - [] État focus visible (ring)
+  - [] État active (couleur plus foncée)
+
+## Dev Notes
+
+### Modification navbar.php
+
+Le bouton CTA est déjà prévu dans la Story 2.1. Vérifier que :
+
+```php
+<?php if (!empty($link['isCta'])): ?>
+    <li class="ml-4">
+        <a href="<?= $link['url'] ?>" class="btn-primary text-sm">
+            <?= $link['label'] ?>
+        </a>
+    </li>
+<?php endif; ?>
+```
+
+### Style du CTA dans le menu mobile
+
+```php
+<!-- Dans le menu mobile -->
+<?php if (!empty($link['isCta'])): ?>
+    <li class="pt-2 border-t border-border mt-2">
+        <a href="<?= $link['url'] ?>" class="btn-primary w-full justify-center">
+            <?= $link['label'] ?>
+        </a>
+    </li>
+<?php else: ?>
+    <!-- ... liens normaux ... -->
+<?php endif; ?>
+```
+
+### Vérification Contraste
+
+| Élément | Couleurs | Ratio | Conformité |
+|---------|----------|-------|------------|
+| Texte bouton | `#17171F` sur `#FA784F` | 5.2:1 | AA |
+
+## Testing
+
+- [ ] Le bouton est orange (#FA784F) et se distingue des autres liens
+- [ ] Le texte est lisible (fond sombre sur orange)
+- [ ] Le hover change la couleur vers #FB9570
+- [ ] Le focus affiche un ring visible
+- [ ] Le bouton est présent et stylé dans le menu mobile
+- [ ] La navigation vers /contact fonctionne
+
+## Change Log
+
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2026-01-22 | 0.1 | Création initiale | Sarah (PO) |
+
+## Dev Agent Record
+
+### Agent Model Used
+
+Claude Opus 4.5 (claude-opus-4-5-20251101)
+
+### Debug Log References
+
+_Aucun_
+
+### Completion Notes List
+
+- CTA desktop déjà implémenté en story 2.1 (btn-primary text-sm, ml-4)
+- Menu mobile amélioré : CTA full-width avec séparateur visuel
+- États interactifs via classe btn-primary (hover, focus, active)
+- Lien pointe vers /contact
+- Contraste vérifié (5.2:1 AA)
+
+### File List
+
+| Fichier | Action |
+|---------|--------|
+| `templates/navbar.php` | Modifié (CTA mobile) |
+| `assets/css/output.css` | Regénéré |
+
+## QA Results
+
+_À compléter par le QA agent_