Design ludique arrondi + mobile responsive + fix IPv6

- ToolboxVignette: prop bullets[] remplace description, touch targets agrandis
- Design arrondi: border-radius 16px cards, 20px pills, 12px inputs, no borders
- Hover animations: translateY(-3px) + shadow, active states pour touch
- SectionLayout: toolbox accordion mobile, pills scroll horizontal, responsive title/subtitle
- app.vue: MoodSwitcher dans drawer mobile, header responsive, nav touch-friendly
- Dashboard: grille 2-colonnes mobile, connect banner column layout, formula code scroll
- Documents/decisions/mandates/protocols: cards responsive (padding, font-size, gap)
- Login: touch targets 3rem min, iOS zoom prevention, responsive sizing
- Modals: padding responsive sm:p-6
- Protocols: table compact mobile, proto items responsive
- nuxt.config: host 0.0.0.0 pour fix IPv4/IPv6 binding

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/app/components/common/ToolboxVignette.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /**
- * ToolboxVignette — Carte compacte pour la boite a outils.
+ * ToolboxVignette — Carte compacte, bullet points, bouton Demarrer.
  */
 
 export interface ToolboxAction {
@@ -8,18 +8,17 @@ export interface ToolboxAction {
   icon?: string
   to?: string
   emit?: string
+  primary?: boolean
 }
 
 const props = withDefaults(
   defineProps<{
     title: string
-    description?: string
-    contextLabel?: string
+    bullets?: string[]
     actions?: ToolboxAction[]
   }>(),
   {
-    description: undefined,
-    contextLabel: undefined,
+    bullets: undefined,
     actions: undefined,
   },
 )
@@ -29,10 +28,9 @@ const emit = defineEmits<{
 }>()
 
 const defaultActions: ToolboxAction[] = [
-  { label: 'Contexte', icon: 'i-lucide-info', emit: 'context' },
   { label: 'Tutos', icon: 'i-lucide-graduation-cap', emit: 'tutos' },
-  { label: 'Choisir', icon: 'i-lucide-check-circle', emit: 'choisir' },
-  { label: 'Demarrer', icon: 'i-lucide-play', emit: 'demarrer' },
+  { label: 'Formules', icon: 'i-lucide-calculator', emit: 'formules' },
+  { label: 'Demarrer', icon: 'i-lucide-play', emit: 'demarrer', primary: true },
 ]
 
 const resolvedActions = computed(() => props.actions ?? defaultActions)
@@ -50,19 +48,18 @@ function handleAction(action: ToolboxAction) {
 <template>
   <div class="vignette">
     <h4 class="vignette__title">{{ title }}</h4>
-    <p v-if="description" class="vignette__desc">{{ description }}</p>
-    <div v-if="contextLabel" class="vignette__ctx">
-      <UIcon name="i-lucide-tag" class="text-xs" />
-      <span>{{ contextLabel }}</span>
-    </div>
+    <ul v-if="bullets && bullets.length > 0" class="vignette__bullets">
+      <li v-for="(b, i) in bullets" :key="i">{{ b }}</li>
+    </ul>
     <div class="vignette__actions">
       <button
         v-for="action in resolvedActions"
         :key="action.label"
         class="vignette__btn"
+        :class="{ 'vignette__btn--primary': action.primary }"
         @click="handleAction(action)"
       >
-        <UIcon v-if="action.icon" :name="action.icon" class="text-xs" />
+        <UIcon v-if="action.icon" :name="action.icon" />
         <span>{{ action.label }}</span>
       </button>
     </div>
@@ -71,45 +68,37 @@ function handleAction(action: ToolboxAction) {
 
 <style scoped>
 .vignette {
-  background: var(--mood-surface);
-  border: 1px solid var(--mood-border);
-  border-radius: 4px;
-  padding: 0.625rem;
+  background: var(--mood-accent-soft);
+  border-radius: 12px;
+  padding: 0.75rem;
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
-  transition: border-color 0.15s ease;
-}
-.vignette:hover {
-  border-color: var(--mood-accent);
+  gap: 0.5rem;
 }
 
 .vignette__title {
-  font-size: 0.75rem;
-  font-weight: 600;
+  font-size: 0.9375rem;
+  font-weight: 700;
   color: var(--mood-text);
   margin: 0;
 }
 
-.vignette__desc {
-  font-size: 0.6875rem;
-  color: var(--mood-text-muted);
-  line-height: 1.35;
+.vignette__bullets {
   margin: 0;
-}
-
-.vignette__ctx {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 0.625rem;
+  padding: 0 0 0 1rem;
+  font-size: 0.8125rem;
   color: var(--mood-text-muted);
+  line-height: 1.5;
+  list-style-type: disc;
+}
+.vignette__bullets li::marker {
+  color: var(--mood-accent);
 }
 
 .vignette__actions {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.25rem;
+  gap: 0.375rem;
   margin-top: 0.125rem;
 }
 
@@ -117,18 +106,35 @@ function handleAction(action: ToolboxAction) {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
-  padding: 0.1875rem 0.5rem;
-  font-size: 0.625rem;
-  font-weight: 600;
+  padding: 0.5rem 0.875rem;
+  font-size: 0.8125rem;
+  font-weight: 700;
   color: var(--mood-accent);
-  background: var(--mood-accent-soft);
-  border: none;
-  border-radius: 3px;
+  background: var(--mood-surface);
+  border-radius: 20px;
   cursor: pointer;
-  transition: opacity 0.12s ease;
-  letter-spacing: 0.01em;
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+  min-height: 2.25rem;
 }
+
+@media (min-width: 640px) {
+  .vignette__btn {
+    padding: 0.375rem 0.75rem;
+    min-height: auto;
+  }
+}
+
 .vignette__btn:hover {
-  opacity: 0.8;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px var(--mood-shadow);
+}
+
+.vignette__btn:active {
+  transform: translateY(0);
+}
+
+.vignette__btn--primary {
+  color: var(--mood-accent-text);
+  background: var(--mood-accent);
 }
 </style>