From ebfc74457451be1b130f8002f75dc3e453b3c59d Mon Sep 17 00:00:00 2001
From: Jules Neny <transformationsresilientes@gmail.com>
Date: Mon, 28 Sep 2026 16:48:24 +0200
Subject: [PATCH] =?UTF-8?q?feat(proposer):=20chip=20secondaire=20en=20cont?=
 =?UTF-8?q?our,=20chip=20actif=20plein=20et=20contrast=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le second choix du double type se lit en contour (texte --nav-text), le
principal passe en fond plein --nav-primary-solid : 4,16:1 → 14,6:1 mesuré
(le fond actif translucide de Chip.vue était sous AA). Survol collant
neutralisé sur tactile, annonce sr-only « Principal · second choix ».
Scopé à FormLibre ; Chip.vue non modifié (défaut global signalé).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AzGo8bxhHp6M9RxuAFbyLU
---
 components/FormLibre.vue | 70 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)

diff --git a/components/FormLibre.vue b/components/FormLibre.vue
index 7718ba2..1d9b69a 100644
--- a/components/FormLibre.vue
+++ b/components/FormLibre.vue
@@ -46,12 +46,21 @@
           :label="TYPES_SUGGERES_LABELS[t]"
           variant="fonction"
           :active="typeSuggere === t || typeSecondaire === t"
+          :class="{ 'chip--secondaire': typeSecondaire === t }"
           @toggle="toggleType(t)"
         />
       </ChipGroup>
       <span id="libre-type-hint" class="label-hint">
         Écosystème : {{ TYPES_SUGGERES_HINTS.ecosysteme }} · Réseau : {{ TYPES_SUGGERES_HINTS.reseau }} · Jobs : {{ TYPES_SUGGERES_HINTS.jobs }} · Outils : {{ TYPES_SUGGERES_HINTS.outils }} · Références : {{ TYPES_SUGGERES_HINTS.references }}
       </span>
+      <!-- Distinction non visuelle premier choix / second choix pour lecteurs d'écran :
+           les deux chips actifs partagent le même aria-pressed, sans quoi rien ne dit
+           lequel est principal. -->
+      <span class="sr-only" aria-live="polite">
+        <template v-if="typeSuggere && typeSecondaire">
+          Principal : {{ TYPES_SUGGERES_LABELS[typeSuggere] }} · second choix : {{ TYPES_SUGGERES_LABELS[typeSecondaire] }}
+        </template>
+      </span>
     </div>
 
     <div class="field-group" :class="{ 'field-error': errors.submitted_by_email }">
@@ -264,4 +273,65 @@ async function submit() {
   clip: rect(0 0 0 0);
   white-space: nowrap;
 }
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+/* ── B5-M2c : distinction principal / second choix + contraste chip actif ──
+   Mesuré avant modif (script de capture, af4-avant-*) : le chip actif de
+   Chip.vue (variant fonction, fond rgba(26,34,56,.6) sur fond de page
+   #f8f6f1) rend ≈ 4.16:1 au repos — sous le seuil AA 4.5:1. C'est un défaut
+   général de Chip.vue (touche aussi les filtres de / et /agences), signalé
+   hors mandat — voir rapport. On neutralise ce point pour CE formulaire
+   seulement, sans toucher Chip.vue : fond plein (--nav-primary-solid) au
+   lieu de la version translucide, pairing déjà utilisé ailleurs sur le site
+   (pages/trouver-du-taf.vue .taff-tab--active). Mesuré après : ≈14.6:1. */
+.field-group :deep(.chip--fonction.chip--active) {
+  background: var(--nav-primary-solid);
+  color: var(--nav-text-on-primary);
+}
+
+/* Chip secondaire (deuxième choix) : contour au lieu de plein, pour ne
+   jamais se confondre avec le principal — ni à l'œil ni au clic. Texte
+   --nav-text sur le fond de page : contraste très large (>10:1), stable
+   dans tous les états. */
+.field-group :deep(.chip--secondaire.chip--active) {
+  background: transparent !important;
+  border-color: var(--nav-primary-solid) !important;
+  color: var(--nav-text) !important;
+}
+.field-group :deep(.chip--secondaire.chip--active:hover) {
+  background: rgba(var(--nav-primary-raw), 0.08) !important;
+  border-color: var(--nav-primary-solid) !important;
+  color: var(--nav-text) !important;
+}
+
+/* Survol collant sur tactile (le :hover de Chip.vue n'est pas gardé par
+   @media (hover: hover)) : neutralisé ici pour les deux chips actifs de ce
+   formulaire, sans toucher Chip.vue. Mesuré : le survol n'aggravait pas le
+   contraste du principal (6.68:1 contre 4.16:1 au repos, avant modif) mais
+   figeait un fond et un transform incohérents après un tap tant que rien ne
+   les levait. */
+@media (hover: none) {
+  .field-group :deep(.chip--fonction.chip--active) {
+    transform: none !important;
+  }
+  .field-group :deep(.chip--fonction.chip--active:hover) {
+    background: var(--nav-primary-solid) !important;
+    color: var(--nav-text-on-primary) !important;
+    transform: none !important;
+  }
+  .field-group :deep(.chip--secondaire.chip--active:hover) {
+    background: transparent !important;
+    border-color: var(--nav-primary-solid) !important;
+    color: var(--nav-text) !important;
+    transform: none !important;
+  }
+}
 </style>