cinqcinqdev-seo 0.1.72 → 0.1.73

package/dist/runtime/components/sections/swiss-style/ServiceGrid.vue

@@ -0,0 +1,121 @@
+<template>
+  <section ref="sectionEl" :class="[sectionPad, isVisible ? 'sv-in' : 'sv-out']" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+    <div :class="[containerClass]">
+
+      <!-- Header -->
+      <div v-if="title || description" class="border-b pb-6 mb-0" :style="{ borderColor: ca(textColor,'15') }">
+        <span v-if="badge" class="block text-[9px] font-black uppercase tracking-[0.5em] mb-3" :style="{ opacity: 0.35 }">{{ badge }}</span>
+        <component :is="titleTag" class="font-black uppercase leading-[0.88]" :style="{ fontSize: titleFontSize, letterSpacing: '-0.03em' }">{{ title }}</component>
+        <p v-if="description" :class="[bodyClass, 'leading-relaxed mt-3 max-w-xl']" :style="{ opacity: 0.55 }">{{ description }}</p>
+      </div>
+
+      <!-- GRID -->
+      <div v-if="layout === 'grid'" class="grid grid-cols-1 md:grid-cols-3 border divide-x divide-y" :style="{ borderColor: ca(textColor,'12') }">
+        <div v-for="(service, idx) in items" :key="idx" class="p-8 hover:bg-black/[0.02] transition-colors" :style="{ borderColor: ca(textColor,'12') }">
+          <div class="font-black tabular-nums mb-6" :style="{ fontSize: '1.8rem', opacity: 0.1, letterSpacing: '-0.05em' }">{{ String(idx+1).padStart(2,'0') }}</div>
+          <component :is="itemTag" class="text-base font-black uppercase tracking-tight mb-3 leading-tight">{{ service.title }}</component>
+          <p class="text-sm leading-relaxed mb-4" :style="{ opacity: 0.5 }">{{ service.description }}</p>
+          <p v-if="service.price" class="text-xl font-black tracking-tight mb-4">{{ service.price }}</p>
+          <NuxtLink v-if="service.ctaText || service.link" :to="service.link || '#'" class="inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest transition-all hover:gap-4" :style="{ color: textColor }">{{ service.ctaText || 'En savoir +' }}<span>→</span></NuxtLink>
+        </div>
+      </div>
+
+      <!-- LIST -->
+      <div v-else-if="layout === 'list'" class="divide-y" :style="{ borderColor: ca(textColor,'10') }">
+        <div v-for="(service, idx) in items" :key="idx" class="flex items-start gap-8 py-8" :style="{ borderColor: ca(textColor,'10') }">
+          <span class="text-[11px] font-black tabular-nums pt-1 shrink-0" :style="{ opacity: 0.2 }">{{ String(idx+1).padStart(2,'0') }}</span>
+          <div class="flex-1 min-w-0">
+            <component :is="itemTag" class="text-xl font-black uppercase tracking-tight mb-2">{{ service.title }}</component>
+            <p class="text-sm leading-relaxed" :style="{ opacity: 0.5 }">{{ service.description }}</p>
+            <p v-if="service.price" class="text-xl font-black tracking-tight mt-3">{{ service.price }}</p>
+          </div>
+          <NuxtLink v-if="service.ctaText || service.link" :to="service.link || '#'" class="inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest shrink-0 mt-1 transition-all hover:gap-4" :style="{ color: textColor }">{{ service.ctaText || '→' }}</NuxtLink>
+        </div>
+      </div>
+
+      <!-- MINIMAL (default) -->
+      <div v-else class="divide-y" :style="{ borderColor: ca(textColor,'10') }">
+        <div v-for="(service, idx) in items" :key="idx" class="flex items-start justify-between gap-6 py-6" :style="{ borderColor: ca(textColor,'10') }">
+          <div>
+            <component :is="itemTag" class="font-black uppercase tracking-tight mb-1">{{ service.title }}</component>
+            <p v-if="service.description" class="text-sm" :style="{ opacity: 0.5 }">{{ service.description }}</p>
+          </div>
+          <p v-if="service.price" class="text-xl font-black tracking-tighter shrink-0">{{ service.price }}</p>
+        </div>
+      </div>
+
+    </div>
+  </section>
+</template>
+
+<script setup>
+const ca = (c, h) => {
+  const m = c?.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
+  return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : (c || "") + h;
+};
+import { ref, computed, onMounted } from "vue";
+const props = defineProps({
+  layout: { type: String, default: "grid" },
+  badge: { type: String, default: "" },
+  title: { type: String, default: "" },
+  titleTag: { type: String, default: "h2" },
+  itemTag: { type: String, default: "h3" },
+  description: { type: String, default: "" },
+  headerAlign: { type: String, default: "left" },
+  ctas: { type: Array, default: () => [] },
+  items: { type: Array, default: () => [] },
+  bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
+  textColor: { type: String, default: "rgba(var(--text-color), 1)" },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "sharp" },
+  textDirection: { type: String, default: "ltr" },
+  contentWidth: { type: String, default: "normal" },
+  textSize: { type: String, default: "md" },
+  paddingTop: { type: String, default: "" },
+  paddingBottom: { type: String, default: "" },
+  marginTop: { type: String, default: "" },
+  marginBottom: { type: String, default: "" },
+  paddingX: { type: String, default: "" }
+});
+const sectionEl = ref(null);
+const isVisible = ref(false);
+onMounted(() => {
+  const obs = new IntersectionObserver(([e]) => {
+    if (e.isIntersecting) {
+      isVisible.value = true;
+      obs.disconnect();
+    }
+  }, { threshold: 0.06 });
+  if (sectionEl.value) obs.observe(sectionEl.value);
+  setTimeout(() => {
+    if (!isVisible.value) isVisible.value = true;
+  }, 300);
+});
+const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-8 md:px-16", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-8 md:px-16");
+const containerClass = computed(() => ({ narrow: "max-w-3xl mx-auto", normal: "max-w-6xl mx-auto", wide: "max-w-7xl mx-auto", full: "max-w-full" })[props.contentWidth] || "max-w-6xl mx-auto");
+const titleFontSize = computed(() => ({ sm: "clamp(1rem,1.5vw,1.3rem)", md: "clamp(1.5rem,2.5vw,2rem)", lg: "clamp(2.5rem,6vw,5rem)" })[props.textSize] || "clamp(1.5rem,2.5vw,2rem)");
+const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  if (props.paddingBottom && SM[props.paddingBottom]) s.paddingBottom = SM[props.paddingBottom];
+  if (props.marginTop && SM[props.marginTop]) s.marginTop = SM[props.marginTop];
+  if (props.marginBottom && SM[props.marginBottom]) s.marginBottom = SM[props.marginBottom];
+  if (props.paddingX && SM[props.paddingX]) {
+    const v = SM[props.paddingX];
+    if (v.startsWith("-")) {
+      s.marginLeft = v;
+      s.marginRight = v;
+    } else {
+      s.paddingLeft = v;
+      s.paddingRight = v;
+    }
+  }
+  return s;
+});
+</script>
+
+<style scoped>
+.sv-out{opacity:0;transform:translateY(16px)}.sv-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
+</style>

package/dist/runtime/components/sections/swiss-style/ServiceGrid.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: any;

package/dist/runtime/components/sections/swiss-style/Testimonials.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: any;

package/dist/runtime/components/sections/swiss-style/Testimonials.vue

@@ -0,0 +1,126 @@
+<template>
+  <section ref="sectionEl" :class="[sectionPad, isVisible ? 'sv-in' : 'sv-out']" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+    <div :class="[containerClass]">
+
+      <!-- Header -->
+      <div v-if="title || description" class="border-b pb-6 mb-0" :style="{ borderColor: ca(textColor,'15') }">
+        <span v-if="badge" class="block text-[9px] font-black uppercase tracking-[0.5em] mb-3" :style="{ opacity: 0.35 }">{{ badge }}</span>
+        <component :is="titleTag" class="font-black uppercase leading-[0.88]" :style="{ fontSize: titleFontSize, letterSpacing: '-0.03em' }">{{ title }}</component>
+        <p v-if="description" :class="[bodyClass, 'leading-relaxed mt-3 max-w-xl']" :style="{ opacity: 0.55 }">{{ description }}</p>
+      </div>
+
+      <!-- GRID -->
+      <div v-if="layout === 'grid'" class="divide-y" :style="{ borderColor: ca(textColor,'10') }">
+        <div v-for="(item, i) in items" :key="i" class="grid md:grid-cols-4 gap-8 py-10" :style="{ borderColor: ca(textColor,'10') }">
+          <div class="md:col-span-3">
+            <div v-if="item.rating" class="flex gap-1 mb-4">
+              <span v-for="s in 5" :key="s" class="text-xs" :style="{ opacity: s <= item.rating ? 1 : 0.12 }">★</span>
+            </div>
+            <p class="text-base md:text-lg leading-relaxed italic mb-0" :style="{ opacity: 0.75 }">"{{ item.quote }}"</p>
+          </div>
+          <div class="flex md:flex-col items-start gap-3 md:border-l md:pl-8" :style="{ borderColor: ca(textColor,'10') }">
+            <img v-if="item.avatar" :src="item.avatar" class="w-10 h-10 object-cover shrink-0" style="border-radius:0" />
+            <div v-else class="w-10 h-10 flex items-center justify-center text-[11px] font-black shrink-0" :style="{ backgroundColor: ca(textColor,'15') }">{{ (item.name || '?')[0] }}</div>
+            <div>
+              <p class="text-[11px] font-black uppercase tracking-wide leading-none">{{ item.name }}</p>
+              <p v-if="item.role || item.company" class="text-[9px] mt-1" :style="{ opacity: 0.4 }">{{ [item.role, item.company].filter(Boolean).join(' · ') }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- FEATURED or default -->
+      <div v-else>
+        <div v-if="items[0]" class="border-b py-12" :style="{ borderColor: ca(textColor,'10') }">
+          <div class="text-[4rem] font-black leading-none mb-6" :style="{ opacity: 0.08 }">"</div>
+          <p class="text-xl md:text-3xl font-black leading-snug mb-10 max-w-4xl" :style="{ opacity: 0.82 }">{{ items[0].quote }}</p>
+          <div class="flex items-center gap-4">
+            <img v-if="items[0].avatar" :src="items[0].avatar" class="w-10 h-10 object-cover" style="border-radius:0" />
+            <div v-else class="w-10 h-10 flex items-center justify-center text-sm font-black" :style="{ backgroundColor: ca(textColor,'15') }">{{ (items[0].name || '?')[0] }}</div>
+            <div class="h-px w-8" :style="{ backgroundColor: ca(textColor,'25') }"></div>
+            <div>
+              <p class="text-sm font-black uppercase tracking-wide">{{ items[0].name }}</p>
+              <p v-if="items[0].role || items[0].company" class="text-[10px]" :style="{ opacity: 0.4 }">{{ [items[0].role, items[0].company].filter(Boolean).join(' · ') }}</p>
+            </div>
+          </div>
+        </div>
+        <div v-if="items.length > 1" class="grid md:grid-cols-2 divide-x" :style="{ borderColor: ca(textColor,'10') }">
+          <div v-for="(item, i) in items.slice(1)" :key="i" class="py-8 first:pr-8 last:pl-8">
+            <p class="text-sm italic leading-relaxed mb-5" :style="{ opacity: 0.68 }">"{{ item.quote }}"</p>
+            <p class="text-[10px] font-black uppercase tracking-wider">{{ item.name }}</p>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </section>
+</template>
+
+<script setup>
+const ca = (c, h) => {
+  const m = c?.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
+  return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : (c || "") + h;
+};
+import { ref, computed, onMounted } from "vue";
+const props = defineProps({
+  layout: { type: String, default: "featured" },
+  badge: { type: String, default: "" },
+  title: { type: String, default: "" },
+  titleTag: { type: String, default: "h2" },
+  description: { type: String, default: "" },
+  items: { type: Array, default: () => [] },
+  bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
+  textColor: { type: String, default: "rgba(var(--text-color), 1)" },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "sharp" },
+  textDirection: { type: String, default: "ltr" },
+  contentWidth: { type: String, default: "normal" },
+  textSize: { type: String, default: "md" },
+  paddingTop: { type: String, default: "" },
+  paddingBottom: { type: String, default: "" },
+  marginTop: { type: String, default: "" },
+  marginBottom: { type: String, default: "" },
+  paddingX: { type: String, default: "" }
+});
+const sectionEl = ref(null);
+const isVisible = ref(false);
+onMounted(() => {
+  const obs = new IntersectionObserver(([e]) => {
+    if (e.isIntersecting) {
+      isVisible.value = true;
+      obs.disconnect();
+    }
+  }, { threshold: 0.06 });
+  if (sectionEl.value) obs.observe(sectionEl.value);
+  setTimeout(() => {
+    if (!isVisible.value) isVisible.value = true;
+  }, 300);
+});
+const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-8 md:px-16", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-8 md:px-16");
+const containerClass = computed(() => ({ narrow: "max-w-3xl mx-auto", normal: "max-w-6xl mx-auto", wide: "max-w-7xl mx-auto", full: "max-w-full" })[props.contentWidth] || "max-w-6xl mx-auto");
+const titleFontSize = computed(() => ({ sm: "clamp(1rem,1.5vw,1.3rem)", md: "clamp(1.5rem,2.5vw,2rem)", lg: "clamp(2.5rem,6vw,5rem)" })[props.textSize] || "clamp(1.5rem,2.5vw,2rem)");
+const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  if (props.paddingBottom && SM[props.paddingBottom]) s.paddingBottom = SM[props.paddingBottom];
+  if (props.marginTop && SM[props.marginTop]) s.marginTop = SM[props.marginTop];
+  if (props.marginBottom && SM[props.marginBottom]) s.marginBottom = SM[props.marginBottom];
+  if (props.paddingX && SM[props.paddingX]) {
+    const v = SM[props.paddingX];
+    if (v.startsWith("-")) {
+      s.marginLeft = v;
+      s.marginRight = v;
+    } else {
+      s.paddingLeft = v;
+      s.paddingRight = v;
+    }
+  }
+  return s;
+});
+</script>
+
+<style scoped>
+.sv-out{opacity:0;transform:translateY(16px)}.sv-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
+</style>

package/dist/runtime/components/sections/swiss-style/Testimonials.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: any;

package/dist/runtime/components/sections/swiss-style/TextVisual.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: any;

package/dist/runtime/components/sections/swiss-style/TextVisual.vue

@@ -0,0 +1,146 @@
+<template>
+  <section ref="sectionEl" :class="[sectionPad, isVisible ? 'sv-in' : 'sv-out']" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+
+    <!-- SPLIT -->
+    <div v-if="layout === 'split'" :class="[containerClass, 'grid grid-cols-1 md:grid-cols-2 border divide-x', reverse ? 'md:[direction:rtl]' : '']" :style="{ borderColor: ca(textColor,'15') }">
+      <div class="p-10 md:p-14 flex flex-col justify-between" :style="{ direction: 'ltr' }">
+        <div>
+          <span v-if="badge" class="block text-[9px] font-black uppercase tracking-[0.5em] mb-6" :style="{ opacity: 0.35 }">{{ badge }}</span>
+          <component :is="titleTag" class="font-black uppercase leading-[0.88] mb-6" :style="{ fontSize: titleFontSize, letterSpacing: '-0.03em' }">{{ title }}</component>
+          <p :class="[bodyClass, 'leading-relaxed max-w-md']" :style="{ opacity: 0.55 }">{{ content }}</p>
+        </div>
+        <div v-if="ctas && ctas.length" class="flex flex-wrap gap-3 mt-10 pt-8 border-t" :style="{ borderColor: ca(textColor,'12') }">
+          <NuxtLink v-for="(cta, i) in ctas" :key="i" :to="cta.link || '#'"
+            class="inline-flex items-center gap-3 px-6 py-3 text-[11px] font-black uppercase tracking-widest transition-all hover:gap-6 border"
+            :style="i === 0 ? { backgroundColor: textColor, color: bgColor, borderColor: textColor } : { borderColor: ca(textColor,'40'), color: textColor }">
+            {{ cta.text }}<span>→</span>
+          </NuxtLink>
+        </div>
+      </div>
+      <div class="overflow-hidden min-h-[300px]" :style="{ direction: 'ltr' }">
+        <img v-if="image" :src="image" :alt="imageAlt || title" class="w-full h-full object-cover" />
+        <div v-else class="w-full h-full" :style="{ backgroundColor: ca(textColor,'06') }"></div>
+      </div>
+    </div>
+
+    <!-- STACKED -->
+    <div v-else-if="layout === 'stacked'" :class="[containerClass]">
+      <div class="border overflow-hidden mb-8" :style="{ borderColor: ca(textColor,'15'), height: '380px' }">
+        <img v-if="image" :src="image" class="w-full h-full object-cover" />
+        <div v-else class="w-full h-full" :style="{ backgroundColor: ca(textColor,'06') }"></div>
+      </div>
+      <div class="grid md:grid-cols-2 gap-10 border-t pt-8" :style="{ borderColor: ca(textColor,'12') }">
+        <div>
+          <span v-if="badge" class="block text-[9px] font-black uppercase tracking-[0.5em] mb-4" :style="{ opacity: 0.35 }">{{ badge }}</span>
+          <component :is="titleTag" class="font-black uppercase leading-[0.88]" :style="{ fontSize: titleFontSize, letterSpacing: '-0.03em' }">{{ title }}</component>
+        </div>
+        <div>
+          <p :class="[bodyClass, 'leading-relaxed mb-6']" :style="{ opacity: 0.55 }">{{ content }}</p>
+          <div v-if="ctas && ctas.length" class="flex flex-wrap gap-3">
+            <NuxtLink v-for="(cta, i) in ctas" :key="i" :to="cta.link || '#'"
+              class="inline-flex items-center gap-3 px-6 py-3 text-[11px] font-black uppercase tracking-widest transition-all hover:gap-6 border"
+              :style="i === 0 ? { backgroundColor: textColor, color: bgColor, borderColor: textColor } : { borderColor: ca(textColor,'40'), color: textColor }">
+              {{ cta.text }}<span>→</span>
+            </NuxtLink>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- WIDE (default) -->
+    <div v-else :class="[containerClass, 'grid grid-cols-1 md:grid-cols-2 border divide-x', reverse ? 'md:[direction:rtl]' : '']" :style="{ borderColor: ca(textColor,'15') }">
+      <div class="overflow-hidden min-h-[280px]" :style="{ direction: 'ltr' }">
+        <img v-if="image" :src="image" class="w-full h-full object-cover" />
+        <div v-else class="w-full h-full" :style="{ backgroundColor: ca(textColor,'06') }"></div>
+      </div>
+      <div class="p-10 md:p-14 flex flex-col justify-between" :style="{ direction: 'ltr' }">
+        <div>
+          <span v-if="badge" class="block text-[9px] font-black uppercase tracking-[0.5em] mb-6" :style="{ opacity: 0.35 }">{{ badge }}</span>
+          <component :is="titleTag" class="font-black uppercase leading-[0.88] mb-6" :style="{ fontSize: titleFontSize, letterSpacing: '-0.03em' }">{{ title }}</component>
+          <p :class="[bodyClass, 'leading-relaxed']" :style="{ opacity: 0.55 }">{{ content }}</p>
+        </div>
+        <div v-if="ctas && ctas.length" class="flex flex-wrap gap-3 mt-8 pt-8 border-t" :style="{ borderColor: ca(textColor,'12') }">
+          <NuxtLink v-for="(cta, i) in ctas" :key="i" :to="cta.link || '#'"
+            class="inline-flex items-center gap-3 px-6 py-3 text-[11px] font-black uppercase tracking-widest transition-all hover:gap-6 border"
+            :style="i === 0 ? { backgroundColor: textColor, color: bgColor, borderColor: textColor } : { borderColor: ca(textColor,'40'), color: textColor }">
+            {{ cta.text }}<span>→</span>
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+
+  </section>
+</template>
+
+<script setup>
+const ca = (c, h) => {
+  const m = c?.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
+  return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : (c || "") + h;
+};
+import { ref, computed, onMounted } from "vue";
+const props = defineProps({
+  layout: { type: String, default: "split" },
+  badge: { type: String, default: "" },
+  title: { type: String, default: "" },
+  titleTag: { type: String, default: "h2" },
+  content: { type: String, default: "" },
+  image: { type: String, default: "" },
+  imageAlt: { type: String, default: "" },
+  reverse: { type: Boolean, default: false },
+  ctas: { type: Array, default: () => [] },
+  bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
+  textColor: { type: String, default: "rgba(var(--text-color), 1)" },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "sharp" },
+  textDirection: { type: String, default: "ltr" },
+  contentWidth: { type: String, default: "normal" },
+  textSize: { type: String, default: "md" },
+  paddingTop: { type: String, default: "" },
+  paddingBottom: { type: String, default: "" },
+  marginTop: { type: String, default: "" },
+  marginBottom: { type: String, default: "" },
+  paddingX: { type: String, default: "" }
+});
+const sectionEl = ref(null);
+const isVisible = ref(false);
+onMounted(() => {
+  const obs = new IntersectionObserver(([e]) => {
+    if (e.isIntersecting) {
+      isVisible.value = true;
+      obs.disconnect();
+    }
+  }, { threshold: 0.06 });
+  if (sectionEl.value) obs.observe(sectionEl.value);
+  setTimeout(() => {
+    if (!isVisible.value) isVisible.value = true;
+  }, 300);
+});
+const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-8 md:px-16", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-8 md:px-16");
+const containerClass = computed(() => ({ narrow: "max-w-3xl mx-auto", normal: "max-w-6xl mx-auto", wide: "max-w-7xl mx-auto", full: "max-w-full" })[props.contentWidth] || "max-w-6xl mx-auto");
+const titleFontSize = computed(() => ({ sm: "clamp(1rem,1.5vw,1.3rem)", md: "clamp(1.5rem,2.5vw,2rem)", lg: "clamp(2rem,4vw,3.5rem)" })[props.textSize] || "clamp(1.5rem,2.5vw,2rem)");
+const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
+const imageContainerClass = computed(() => ({ sm: "aspect-video", md: "aspect-[4/3]", lg: "aspect-square" })["md"] || "aspect-[4/3]");
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  if (props.paddingBottom && SM[props.paddingBottom]) s.paddingBottom = SM[props.paddingBottom];
+  if (props.marginTop && SM[props.marginTop]) s.marginTop = SM[props.marginTop];
+  if (props.marginBottom && SM[props.marginBottom]) s.marginBottom = SM[props.marginBottom];
+  if (props.paddingX && SM[props.paddingX]) {
+    const v = SM[props.paddingX];
+    if (v.startsWith("-")) {
+      s.marginLeft = v;
+      s.marginRight = v;
+    } else {
+      s.paddingLeft = v;
+      s.paddingRight = v;
+    }
+  }
+  return s;
+});
+</script>
+
+<style scoped>
+.sv-out{opacity:0;transform:translateY(16px)}.sv-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
+</style>

package/dist/runtime/components/sections/swiss-style/TextVisual.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: any;

package/dist/runtime/composables/useAdminSettings.d.ts

@@ -19,6 +19,7 @@ export interface BrandSettings {
     font_body?: string;
     ai_context?: string;
     section_presets?: Record<string, SectionPreset>;
+    theme?: 'cinqcinq' | 'swiss-style';
     updated_at?: string;
 }
 export declare const useAdminSettings: () => {

package/dist/runtime/pages/admin/editor/[id].vue

@@ -62,7 +62,21 @@ const selectPage = (item, key, page2) => {
   pagePickerOpen.value[key] = false;
   trigger();
 };
-const resolveSection = (type) => vueApp.component(`Sections${type}`) || vueApp.component(type) || null;
+const themePrefix = computed(() => {
+  const t = adminSettings.settings.value?.theme || "";
+  if (!t) return "";
+  return t.split("-").map((s) => s[0].toUpperCase() + s.slice(1)).join("");
+});
+const resolveSection = (type) => {
+  const flat = vueApp.component(`Sections${type}`);
+  if (flat) return flat;
+  const prefix = themePrefix.value;
+  if (prefix) {
+    const themed = vueApp.component(`Sections${prefix}${type}`);
+    if (themed) return themed;
+  }
+  return vueApp.component(type) || null;
+};
 const { data: _rawPage } = await useAsyncData(`admin-edit-${pageId}`, async () => {
   const { data } = await supabase.from(table).select("*").eq("id", pageId).maybeSingle();
   return data;

package/dist/runtime/pages/admin/setup.vue

@@ -7,11 +7,13 @@ const { settings, loading, saving, load, save } = useAdminSettings();
 const sections = useAdminSections();
 const aiContext = ref("");
 const presets = ref({});
+const selectedTheme = ref("");
 const saved = ref(false);
 onMounted(async () => {
   await load();
   aiContext.value = settings.value?.ai_context || "";
   presets.value = JSON.parse(JSON.stringify(settings.value?.section_presets || {}));
+  selectedTheme.value = settings.value?.theme || "";
 });
 const setPreset = (sectionType, field, value) => {
   if (!presets.value[sectionType]) presets.value[sectionType] = {};
@@ -20,8 +22,10 @@ const setPreset = (sectionType, field, value) => {
 const getPreset = (sectionType, field, fallback) => {
   return presets.value[sectionType]?.[field] ?? fallback ?? "";
 };
+const canSave = computed(() => !!selectedTheme.value);
 const saveAll = async () => {
-  await save({ ai_context: aiContext.value, section_presets: presets.value });
+  if (!canSave.value) return;
+  await save({ ai_context: aiContext.value, section_presets: presets.value, theme: selectedTheme.value });
   saved.value = true;
   setTimeout(() => {
     saved.value = false;
@@ -43,7 +47,7 @@ const hasStyleOptions = (conf) => styleFields.some((f) => conf.fields?.[f]?.opti
         </div>
         <button
           @click="saveAll"
-          :disabled="saving"
+          :disabled="saving || !canSave"
           class="px-5 py-2.5 bg-slate-900 text-white text-sm font-semibold rounded-xl hover:bg-slate-700 disabled:opacity-50 transition-all flex items-center gap-2"
         >
           <svg v-if="!saving && !saved" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -61,6 +65,77 @@ const hasStyleOptions = (conf) => styleFields.some((f) => conf.fields?.[f]?.opti
 
       <div v-else class="space-y-6">
 
+        <!-- ── Theme Selection (required) ─────────────────────────────── -->
+        <div class="bg-white border rounded-2xl p-8" :class="!selectedTheme ? 'border-amber-300 ring-1 ring-amber-200' : 'border-slate-200'">
+          <div class="flex items-center gap-3 mb-2">
+            <span class="text-xl">🎨</span>
+            <h2 class="text-base font-bold text-slate-900">Thème de design <span class="text-amber-500 text-sm font-normal ml-1">(requis)</span></h2>
+          </div>
+          <p class="text-xs text-slate-500 mb-6 leading-relaxed">
+            Choisissez le thème visuel qui s'appliquera à toutes les sections de votre site. Cette sélection est obligatoire.
+          </p>
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <!-- CinqCinq theme -->
+            <button
+              @click="selectedTheme = 'cinqcinq'"
+              :class="[
+  'text-left p-5 border-2 rounded-xl transition-all',
+  selectedTheme === 'cinqcinq' ? 'border-slate-900 bg-slate-50' : 'border-slate-200 hover:border-slate-400'
+]"
+            >
+              <div class="flex items-center gap-3 mb-3">
+                <div class="w-8 h-8 rounded-lg bg-slate-900 flex items-center justify-center">
+                  <span class="text-white text-xs font-black">55</span>
+                </div>
+                <div>
+                  <div class="font-bold text-slate-900 text-sm">CinqCinq</div>
+                  <div class="text-[10px] text-slate-400 uppercase tracking-wider">Original</div>
+                </div>
+                <div v-if="selectedTheme === 'cinqcinq'" class="ml-auto w-5 h-5 rounded-full bg-slate-900 flex items-center justify-center">
+                  <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
+                </div>
+              </div>
+              <p class="text-xs text-slate-500 leading-relaxed">Design contemporain avec coins arrondis, cartes avec ombres et animations fluides. Moderne et accessible.</p>
+              <!-- Mini preview -->
+              <div class="mt-4 flex gap-1.5">
+                <div class="h-6 flex-1 rounded-lg bg-slate-100"></div>
+                <div class="h-6 flex-1 rounded-lg bg-slate-200"></div>
+                <div class="h-6 w-12 rounded-lg bg-slate-900"></div>
+              </div>
+            </button>
+
+            <!-- Swiss Style theme -->
+            <button
+              @click="selectedTheme = 'swiss-style'"
+              :class="[
+  'text-left p-5 border-2 rounded-xl transition-all',
+  selectedTheme === 'swiss-style' ? 'border-slate-900 bg-slate-50' : 'border-slate-200 hover:border-slate-400'
+]"
+            >
+              <div class="flex items-center gap-3 mb-3">
+                <div class="w-8 h-8 bg-black flex items-center justify-center">
+                  <span class="text-white text-xs font-black tracking-tighter">SW</span>
+                </div>
+                <div>
+                  <div class="font-bold text-slate-900 text-sm">Swiss Style</div>
+                  <div class="text-[10px] text-slate-400 uppercase tracking-wider">Typographic</div>
+                </div>
+                <div v-if="selectedTheme === 'swiss-style'" class="ml-auto w-5 h-5 rounded-full bg-slate-900 flex items-center justify-center">
+                  <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
+                </div>
+              </div>
+              <p class="text-xs text-slate-500 leading-relaxed">Style typographique suisse. Grilles strictes, bordures 1px, angles droits et hiérarchie typographique forte.</p>
+              <!-- Mini preview -->
+              <div class="mt-4 flex gap-1.5">
+                <div class="h-6 flex-1 border border-slate-300"></div>
+                <div class="h-6 flex-1 border border-slate-300 bg-slate-50"></div>
+                <div class="h-6 w-12 bg-black"></div>
+              </div>
+            </button>
+          </div>
+          <p v-if="!selectedTheme" class="text-xs text-amber-600 mt-3">Sélectionnez un thème pour pouvoir enregistrer.</p>
+        </div>
+
         <!-- ── AI Context ───────────────────────────────────────────────── -->
         <div class="bg-white border border-slate-200 rounded-2xl p-8">
           <div class="flex items-center gap-3 mb-2">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinqcinqdev-seo",
-  "version": "0.1.72",
+  "version": "0.1.73",
   "description": "A reusable Nuxt 3 admin CMS module with visual page editor powered by Supabase",
   "license": "MIT",
   "module": "./dist/module.mjs",