Portfolio-Codex/docs/stories/2.2.bouton-cta-navbar.md

Story 2.2: Bouton CTA "Me Contacter" dans la Navbar

Status

review

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 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

<!-- 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-02-04	0.1	Implementation story 2.2	Amelia
2026-01-22	0.1	Création initiale	Sarah (PO)

Dev Agent Record

Agent Model Used

GPT-5 Codex

Debug Log References

• tests/cta.test.ps1: CTA coverage

Completion Notes List

• CTA desktop confirmé (btn-primary text-sm, ml-4)
• Menu mobile CTA full-width avec séparateur visuel
• États interactifs via classe btn-primary (hover, focus, active)
• Lien pointe vers /contact
• Tests: powershell -ExecutionPolicy Bypass -File tests/run.ps1

File List

Fichier	Action
templates/navbar.php	Modifié (CTA mobile + label)
assets/css/output.css	Regénéré
tests/cta.test.ps1	Créé
tests/run.ps1	Modifié

QA Results

À compléter par le QA agent