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