feat(outils): trois sous-onglets, contenu sorti du template (B6-M1)

Co-Authored-By: Claude Sonnet <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0136n5xMLHuaBDLcPJYCDjRW

components/SimulateurFeature.vue

@@ -14,6 +14,7 @@
             <span v-if="tag" :class="['simu-feature__badge', `simu-feature__badge--${tag}`]">{{ tagLabel }}</span>
           </div>
           <p class="simu-feature__desc">{{ description }}</p>
+          <p v-if="mention" class="simu-feature__mention">{{ mention }}</p>
         </div>
       </div>
       <span v-if="cta && url" class="simu-feature__cta">{{ cta }}</span>
@@ -29,6 +30,8 @@ const props = defineProps<{
   description?: string
   cta?: string
   tag?: string
+  /** Ligne de réserve datée sous la description (ex. « Ordre de grandeur — version du … »). */
+  mention?: string | null
 }>()
 
 const tagLabels: Record<string, string> = {
@@ -127,6 +130,13 @@ const tagLabel = computed(() => props.tag ? (tagLabels[props.tag] ?? props.tag)
   line-height: 1.55;
 }
 
+.simu-feature__mention {
+  font-size: 0.78rem;
+  font-style: italic;
+  color: color-mix(in srgb, var(--text) 78%, transparent);
+  margin: 0.4rem 0 0;
+}
+
 .simu-feature__cta {
   display: inline-flex;
   align-items: center;
@@ -145,6 +155,12 @@ const tagLabel = computed(() => props.tag ? (tagLabels[props.tag] ?? props.tag)
   opacity: 0.88;
 }
 
+@media (max-width: 640px) {
+  .simu-feature { padding: 1.1rem 1rem; }
+  .simu-feature__inner { flex-direction: column; align-items: stretch; gap: 1rem; }
+  .simu-feature__cta { justify-content: center; }
+}
+
 :global(.dark) .simu-feature__badge {
   background: #064e3b;
   color: #a7f3d0;