20 changed files with 294 additions and 360 deletions
--- a/index.html
+++ b/index.html
@ -2,18 +2,12 @@
 <html lang="fr">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/avif" href="./src/assets/cosmic-stag.avif" />
+    <link rel="icon" type="image/png" href="/cosmic-stag.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Château du Faune — centre pour l'art et l'écologie en Ariège. Résidences d'artistes, fermette, événements et hébergement au pied des Pyrénées."
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Aboreto&family=Roboto:wght@300;400;500;700&family=Tangerine:wght@700&display=swap"
      rel="stylesheet"
    />
    <title>Château du Faune — Centre pour l'art et l'écologie</title>
  </head>
  <body>
--- a/public/property-map.png
+++ b/public/property-map.png
--- a/src/assets/cosmic-stag.avif
+++ b/src/assets/cosmic-stag.avif
--- a/src/assets/hero-landscape.webp
+++ b/src/assets/hero-landscape.webp
--- a/src/assets/section-tile.webp
+++ b/src/assets/section-tile.webp
--- a/src/components/SiteFooter.vue
+++ b/src/components/SiteFooter.vue
@ -1,17 +1,16 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import cosmicStag from '@/assets/cosmic-stag.avif'
 const { t } = useI18n()
 const year = new Date().getFullYear()
 </script>
 <template>
-  <footer class="mt-16 border-t border-border bg-black/90">
+  <footer class="mt-16 border-t border-border bg-secondary/40">
    <div class="mx-auto grid max-w-7xl gap-8 px-4 py-10 lg:px-6 md:grid-cols-3">
      <div>
        <div class="mb-3 flex items-center gap-3">
-          <img :src="cosmicStag" alt="" class="h-10 w-10" />
+          <img src="/cosmic-stag.png" alt="" class="h-10 w-10" />
          <span class="font-serif text-lg">Château du Faune</span>
        </div>
        <p class="text-sm text-muted-foreground">{{ t('footer.tagline') }}</p>
@ -42,24 +41,19 @@ const year = new Date().getFullYear()
              href="https://www.instagram.com/chateaudufaune"
              target="_blank"
              rel="noopener"
-              class="inline-flex items-center gap-2 text-muted-foreground hover:text-primary"
+              class="text-muted-foreground hover:text-primary"
            >
-              <svg
+              Instagram @chateaudufaune
-                xmlns="http://www.w3.org/2000/svg"
+            </a>
-                viewBox="0 0 24 24"
+          </li>
-                fill="none"
+          <li>
-                stroke="currentColor"
+            <a
-                stroke-width="2"
+              href="https://www.linkedin.com/company/chateau-du-faune"
-                stroke-linecap="round"
+              target="_blank"
-                stroke-linejoin="round"
+              rel="noopener"
-                class="h-4 w-4"
+              class="text-muted-foreground hover:text-primary"
-                aria-hidden="true"
+            >
-              >
+              LinkedIn
                <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
              </svg>
              @chateaudufaune
            </a>
          </li>
        </ul>
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@ -2,7 +2,6 @@
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterLink, useRoute } from 'vue-router'
 import cosmicStag from '@/assets/cosmic-stag.avif'
 const { t, locale } = useI18n()
 const route = useRoute()
@ -94,12 +93,12 @@ onUnmounted(() => {
 <template>
  <header
    ref="headerEl"
-    class="sticky top-0 z-40 border-b border-white/10 bg-background/65 backdrop-blur-xl backdrop-saturate-150"
+    class="sticky top-0 z-40 border-b border-border bg-background/95 backdrop-blur"
  >
    <div class="mx-auto max-w-7xl px-4 lg:px-6">
      <div class="flex h-16 items-center justify-between gap-4">
        <RouterLink to="/" class="flex items-center gap-3" @click="closeAll">
-          <img :src="cosmicStag" alt="" class="h-9 w-9 shrink-0" />
+          <img src="/cosmic-stag.png" alt="" class="h-9 w-9 shrink-0" />
          <span class="leading-tight">
            <span class="block font-serif text-base tracking-tight text-foreground">
              Château du Faune
--- a/src/components/ui/button/Button.vue
+++ b/src/components/ui/button/Button.vue
@ -1,26 +0,0 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { Primitive, type PrimitiveProps } from 'reka-ui'
 import { type ButtonVariants, buttonVariants } from '.'
 import { cn } from '@/lib/utils'
 interface Props extends PrimitiveProps {
  variant?: ButtonVariants['variant']
  size?: ButtonVariants['size']
  class?: HTMLAttributes['class']
 }
 const props = withDefaults(defineProps<Props>(), {
  as: 'button',
 })
 </script>
 <template>
  <Primitive
    :as="as"
    :as-child="asChild"
    :class="cn(buttonVariants({ variant, size }), props.class)"
  >
    <slot />
  </Primitive>
 </template>
--- a/src/components/ui/button/index.ts
+++ b/src/components/ui/button/index.ts
@ -1,34 +0,0 @@
 import { cva, type VariantProps } from 'class-variance-authority'
 export { default as Button } from './Button.vue'
 export const buttonVariants = cva(
  'inline-flex items-center justify-center whitespace-nowrap font-display uppercase tracking-[0.2em] ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        default: 'rounded-full bg-primary text-primary-foreground hover:opacity-90',
        outline:
          'rounded-full border border-accent/50 bg-transparent text-accent hover:bg-accent/10',
        ghost: 'rounded-full text-accent hover:bg-accent/10',
        link: 'text-accent underline-offset-4 hover:underline',
        secondary:
          'rounded-full bg-secondary text-secondary-foreground hover:bg-secondary/80',
        destructive:
          'rounded-full bg-destructive text-destructive-foreground hover:bg-destructive/90',
      },
      size: {
        default: 'h-12 px-6 py-3 text-xs',
        sm: 'h-9 px-4 text-[10px]',
        lg: 'h-14 px-8 text-sm',
        icon: 'h-10 w-10 rounded-full',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
 )
 export type ButtonVariants = VariantProps<typeof buttonVariants>
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@ -137,19 +137,16 @@
    }
  },
  "home": {
    "hero": {
      "kicker": "Ariège · Pyrenean foothills",
      "lede": "An artist residency, a working farm and an events venue — practising slow living with humble reverence for the natural world.",
      "ctaVisit": "Plan your visit",
      "ctaConcept": "Discover the concept"
    },
    "welcome": {
-      "title": "Welcome to the Château du Faune",
+      "title": "Farmstand ✦ Land art ✦ Residency ✦ Events",
-      "body": "A place to create, to grow and to rejuvenate, at the foot of the Pyrenees. An artist residency and slow-living sanctuary for crafters, agroecologists and nature-enthusiasts looking for a home on the road.",
+      "body": "Eleven hectares at Château de Bénac, where regenerative practices, ecological design and artistic work share the same ground. We are growing the place slowly — opening to the public in fall 2026."
      "cta": "Learn more about the Center for Art & Ecology"
    },
    "bouge": {
      "kicker": "Currently in development at the château",
      "title": "bouge.ariege.io",
      "subtitle": "Launching summer 2026 · Try the demo",
      "body": "A native, community-wide, decentralised calendar-of-events app",
      "cta": "See more"
    },
    "pathwaysIntro": "Here are some possible paths…",
    "pathways": {
      "title": "Find your way in",
      "subtitle": "Four ways to meet the land.",
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@ -137,19 +137,16 @@
    }
  },
  "home": {
    "hero": {
      "kicker": "Ariège · piémont pyrénéen",
      "lede": "Une résidence d'artistes, une fermette en activité et un lieu d'événements — pratiquer le slow living avec révérence pour le monde naturel.",
      "ctaVisit": "Préparer votre visite",
      "ctaConcept": "Découvrir le concept"
    },
    "welcome": {
-      "title": "Bienvenue au Château du Faune",
+      "title": "Fermette ✦ Art de la terre ✦ Résidence ✦ Événements",
-      "body": "Un lieu pour créer, croître et se ressourcer, au pied des Pyrénées. Une résidence d'artistes et un sanctuaire de slow living pour artisan·es, agroécologues et amoureux·euses de la nature en quête d'un foyer sur le chemin.",
+      "body": "Onze hectares au Château de Bénac, où pratiques régénératives, design écologique et création artistique partagent le même sol. Nous faisons croître ce lieu doucement — ouverture au public à l'automne 2026."
      "cta": "En savoir plus sur le Centre pour l'art et l'écologie"
    },
    "bouge": {
      "kicker": "En cours de développement au château",
      "title": "bouge.ariege.io",
      "subtitle": "Lancement été 2026 · Essayer la démo",
      "body": "Une application de calendrier d'événements native, communautaire et décentralisée",
      "cta": "En savoir plus"
    },
    "pathwaysIntro": "Voici quelques chemins possibles…",
    "pathways": {
      "title": "Trouvez votre chemin",
      "subtitle": "Quatre façons de rencontrer le lieu.",
--- a/src/style.css
+++ b/src/style.css
@ -4,50 +4,50 @@
@custom-variant dark (&:is(.dark *));
 :root {
-  /* Wix-inspired palette: deep forest green dominant background, cream
+  /* Earthy palette: warm parchment background, deep moss primary,
-     foreground, gold (Aboreto/calligraphic spirit) for CTAs and accents. */
+     terracotta accent. Tuned for an artist-residency / land-art vibe. */
-  --background: hsl(151 100% 8%);
+  --background: hsl(38 32% 96%);
-  --foreground: hsl(200 32% 94%);
+  --foreground: hsl(120 14% 12%);
-  --card: hsl(151 80% 10%);
+  --card: hsl(38 30% 98%);
-  --card-foreground: hsl(200 32% 94%);
+  --card-foreground: hsl(120 14% 12%);
-  --popover: hsl(151 80% 10%);
+  --popover: hsl(38 30% 98%);
-  --popover-foreground: hsl(200 32% 94%);
+  --popover-foreground: hsl(120 14% 12%);
-  --primary: hsl(43 64% 41%);
+  --primary: hsl(125 24% 24%);
-  --primary-foreground: hsl(151 100% 6%);
+  --primary-foreground: hsl(38 32% 96%);
-  --secondary: hsl(151 65% 12%);
+  --secondary: hsl(36 22% 88%);
-  --secondary-foreground: hsl(200 32% 94%);
+  --secondary-foreground: hsl(120 14% 12%);
-  --muted: hsl(151 50% 14%);
+  --muted: hsl(36 18% 92%);
-  --muted-foreground: hsl(200 15% 72%);
+  --muted-foreground: hsl(120 8% 38%);
-  --accent: hsl(50 65% 50%);
+  --accent: hsl(22 58% 48%);
-  --accent-foreground: hsl(151 100% 6%);
+  --accent-foreground: hsl(38 32% 96%);
-  --destructive: hsl(0 60% 50%);
+  --destructive: hsl(0 70% 45%);
-  --destructive-foreground: hsl(200 32% 94%);
+  --destructive-foreground: hsl(38 32% 96%);
-  --border: hsl(151 50% 18%);
+  --border: hsl(36 16% 82%);
-  --input: hsl(151 50% 18%);
+  --input: hsl(36 16% 82%);
-  --ring: hsl(43 64% 50%);
+  --ring: hsl(125 24% 30%);
  --radius: 0.5rem;
 }
 .dark {
-  --background: hsl(151 100% 6%);
+  --background: hsl(120 12% 8%);
-  --foreground: hsl(200 32% 94%);
+  --foreground: hsl(38 26% 94%);
-  --card: hsl(151 80% 8%);
+  --card: hsl(120 10% 11%);
-  --card-foreground: hsl(200 32% 94%);
+  --card-foreground: hsl(38 26% 94%);
-  --popover: hsl(151 80% 8%);
+  --popover: hsl(120 10% 11%);
-  --popover-foreground: hsl(200 32% 94%);
+  --popover-foreground: hsl(38 26% 94%);
-  --primary: hsl(43 64% 45%);
+  --primary: hsl(38 28% 88%);
-  --primary-foreground: hsl(151 100% 6%);
+  --primary-foreground: hsl(120 14% 12%);
-  --secondary: hsl(151 65% 10%);
+  --secondary: hsl(120 8% 18%);
-  --secondary-foreground: hsl(200 32% 94%);
+  --secondary-foreground: hsl(38 26% 94%);
-  --muted: hsl(151 50% 12%);
+  --muted: hsl(120 8% 18%);
-  --muted-foreground: hsl(200 15% 70%);
+  --muted-foreground: hsl(36 14% 66%);
-  --accent: hsl(50 65% 52%);
+  --accent: hsl(22 52% 55%);
-  --accent-foreground: hsl(151 100% 6%);
+  --accent-foreground: hsl(120 14% 12%);
-  --destructive: hsl(0 60% 45%);
+  --destructive: hsl(0 60% 40%);
-  --destructive-foreground: hsl(200 32% 94%);
+  --destructive-foreground: hsl(38 26% 94%);
-  --border: hsl(151 50% 15%);
+  --border: hsl(120 8% 22%);
-  --input: hsl(151 50% 15%);
+  --input: hsl(120 8% 22%);
-  --ring: hsl(43 64% 52%);
+  --ring: hsl(38 26% 72%);
 }
@theme inline {
@ -74,9 +74,9 @@
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
  --font-sans:
-    'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-  --font-display: 'Aboreto', 'Cormorant Garamond', Georgia, serif;
+    sans-serif;
-  --font-script: 'Tangerine', 'Allura', cursive;
+  --font-serif: 'Cormorant Garamond', Cambria, Georgia, 'Times New Roman', serif;
 }
@layer base {
@ -86,12 +86,11 @@
  body {
    @apply bg-background text-foreground;
    font-family: var(--font-sans);
    font-weight: 300;
  }
  h1,
  h2,
  h3 {
-    font-family: var(--font-display);
+    font-family: var(--font-serif);
-    letter-spacing: 0.02em;
+    letter-spacing: -0.01em;
  }
 }
--- a/src/views/AccommodationView.vue
+++ b/src/views/AccommodationView.vue
@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
 const { t, tm, rt } = useI18n()
@ -179,14 +178,18 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
    <!-- CTAs -->
    <section class="border-t border-border bg-secondary/30">
      <div class="mx-auto flex max-w-7xl flex-wrap items-center gap-3 px-4 py-12 lg:px-6">
-        <Button as-child>
+        <a
-          <a href="mailto:chateaudufaune@ariege.io?subject=R%C3%A9servation%20%E2%80%94%20Ch%C3%A2teau%20du%20Faune">
+          href="mailto:chateaudufaune@ariege.io?subject=R%C3%A9servation%20%E2%80%94%20Ch%C3%A2teau%20du%20Faune"
-            {{ t('accommodation.ctaReserve') }}
+          class="rounded-md bg-primary px-5 py-3 text-sm font-medium text-primary-foreground hover:opacity-90"
-          </a>
+        >
-        </Button>
+          {{ t('accommodation.ctaReserve') }}
-        <Button as-child variant="outline">
+        </a>
-          <RouterLink to="/reservations">← {{ t('accommodation.ctaBack') }}</RouterLink>
+        <RouterLink
-        </Button>
+          to="/reservations"
          class="rounded-md border border-border px-5 py-3 text-sm font-medium hover:bg-muted"
        >
          ← {{ t('accommodation.ctaBack') }}
        </RouterLink>
      </div>
    </section>
  </div>
--- a/src/views/EventsView.vue
+++ b/src/views/EventsView.vue
@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
 const { t } = useI18n()
@ -91,9 +90,12 @@ const events = [
      </ul>
      <div class="mt-12 text-center">
-        <Button as-child variant="outline">
+        <RouterLink
-          <RouterLink to="/symposium">{{ t('nav.symposium') }} →</RouterLink>
+          to="/symposium"
-        </Button>
+          class="inline-block rounded-md border border-border px-5 py-3 text-sm font-medium hover:bg-muted"
        >
          {{ t('nav.symposium') }} →
        </RouterLink>
      </div>
    </section>
  </div>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -1,25 +1,30 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
 import cosmicStag from '@/assets/cosmic-stag.avif'
 import heroLandscape from '@/assets/hero-landscape.webp'
 import sectionTile from '@/assets/section-tile.webp'
 const tileStyle = {
  backgroundImage: `url(${sectionTile})`,
  backgroundRepeat: 'repeat',
  backgroundSize: 'auto',
  backgroundPosition: 'center center',
 }
 const { t } = useI18n()
 const pathways = [
-  { key: 'dayVisit' as const, to: '/reservations' },
+  {
-  { key: 'activity' as const, to: '/events' },
+    key: 'dayVisit' as const,
-  { key: 'retreat' as const, to: '/accommodation' },
+    to: '/reservations',
-  { key: 'residency' as const, to: '/long-stays' },
+    icon: '☕',
  },
  {
    key: 'activity' as const,
    to: '/events',
    icon: '✦',
  },
  {
    key: 'retreat' as const,
    to: '/accommodation',
    icon: '⛺',
  },
  {
    key: 'residency' as const,
    to: '/long-stays',
    icon: '✎',
  },
 ]
 const featuredEvents = [
@ -43,151 +48,131 @@ const featuredEvents = [
 <template>
  <div>
-    <!-- Pinned landscape backdrop: viewport-fixed so it stays put while
+    <!-- Hero -->
-         content scrolls over it. Visible behind the transparent hero;
+    <section class="relative overflow-hidden bg-gradient-to-b from-secondary/60 to-background">
         covered by the opaque welcome/bouge/etc sections as the user
         scrolls down. -->
    <img
      :src="heroLandscape"
      alt=""
      aria-hidden="true"
      class="fixed inset-0 -z-50 h-screen w-screen object-cover"
    />
    <!-- Hero: full-viewport, transparent over the pinned backdrop -->
    <section class="relative isolate flex min-h-screen flex-col items-center justify-center overflow-hidden">
      <div
-        class="pointer-events-none absolute inset-0 -z-10 bg-gradient-to-b from-background/55 to-transparent"
+        class="mx-auto grid max-w-7xl items-center gap-10 px-4 py-16 lg:grid-cols-2 lg:gap-16 lg:px-6 lg:py-24"
      ></div>
      <div
        class="relative mx-auto flex max-w-7xl flex-col items-center px-4 text-center lg:px-6"
      >
-        <p
+        <div>
-          class="font-display text-xl uppercase tracking-[0.25em] text-accent drop-shadow-[0_1px_4px_rgba(0,0,0,0.85)] md:text-3xl lg:text-4xl"
+          <p class="text-xs uppercase tracking-[0.2em] text-accent">
-        >
+            {{ t('home.hero.kicker') }}
          {{ t('common.tagline') }}
        </p>
        <h1
          class="mt-4 font-script font-bold text-6xl leading-none text-foreground drop-shadow-md md:text-7xl lg:text-8xl"
        >
          Château du Faune
        </h1>
        <img
          :src="cosmicStag"
          alt=""
          class="mt-4 h-80 w-80 object-contain md:h-[28rem] md:w-[28rem] lg:h-[36rem] lg:w-[36rem] xl:h-[42rem] xl:w-[42rem]"
        />
      </div>
    </section>
    <!-- Welcome: tiled-bg card with rounded corners; tile is partly
         translucent so the pinned photo glows through, plus a dark green
         overlay for legibility. -->
    <section class="px-3 py-3 sm:px-4 lg:px-6">
      <div class="relative mx-auto overflow-hidden rounded-2xl">
        <div class="absolute inset-0 opacity-80" :style="tileStyle"></div>
        <div class="absolute inset-0 bg-background/75"></div>
        <div class="relative mx-auto max-w-3xl px-4 py-20 text-center lg:py-24">
          <h2 class="font-display text-3xl uppercase tracking-wider md:text-4xl">
            {{ t('home.welcome.title') }}
          </h2>
          <p class="mt-6 text-base leading-relaxed text-foreground/90 md:text-lg">
            {{ t('home.welcome.body') }}
          </p>
-          <Button as-child variant="outline" class="mt-8">
+          <h1
-            <RouterLink to="/concept">{{ t('home.welcome.cta') }}</RouterLink>
+            class="mt-3 font-serif text-5xl font-semibold leading-tight tracking-tight md:text-6xl"
-          </Button>
+          >
-        </div>
+            Château du Faune
-      </div>
+          </h1>
-    </section>
+          <p class="mt-2 font-serif text-xl italic text-muted-foreground">
-
+            {{ t('common.tagline') }}
-    <!-- Bouge.ariege.io callout: tile under a heavier near-black tint -->
+          </p>
-    <section class="px-3 py-3 sm:px-4 lg:px-6">
+          <p class="mt-6 max-w-prose text-lg leading-relaxed">
-      <div class="relative mx-auto overflow-hidden rounded-2xl">
+            {{ t('home.hero.lede') }}
-        <div class="absolute inset-0 opacity-80" :style="tileStyle"></div>
+          </p>
-        <div class="absolute inset-0 bg-zinc-950/80"></div>
+          <div class="mt-8 flex flex-wrap items-center gap-3">
-        <div class="relative mx-auto max-w-4xl px-4 py-20 text-center lg:py-28">
+            <RouterLink
-        <p class="font-display text-xs uppercase tracking-[0.3em] text-accent">
+              to="/reservations"
-          {{ t('home.bouge.kicker') }}
+              class="rounded-md bg-primary px-5 py-3 text-sm font-medium text-primary-foreground hover:opacity-90"
-        </p>
+            >
-        <h2
+              {{ t('home.hero.ctaVisit') }}
-          class="mt-4 font-script font-bold text-6xl leading-none text-accent md:text-7xl lg:text-8xl"
+            </RouterLink>
-        >
+            <RouterLink
-          {{ t('home.bouge.title') }}
+              to="/concept"
-        </h2>
+              class="rounded-md border border-border px-5 py-3 text-sm font-medium hover:bg-muted"
-        <p class="mt-6 text-xs uppercase tracking-[0.2em] text-foreground/80">
+            >
-          {{ t('home.bouge.subtitle') }}
+              {{ t('home.hero.ctaConcept') }}
-        </p>
+            </RouterLink>
-        <h3
+          </div>
-          class="mt-6 font-display text-2xl uppercase tracking-wider text-foreground md:text-3xl"
+          <p class="mt-6 text-xs uppercase tracking-wider text-muted-foreground">
-        >
+            {{ t('common.openingFall2026') }}
          {{ t('home.bouge.body') }}
        </h3>
          <Button as-child class="mt-10">
            <a href="https://bouge.ariege.io" target="_blank" rel="noopener">
              {{ t('home.bouge.cta') }}
            </a>
          </Button>
        </div>
      </div>
    </section>
    <!-- Plan Your Visit: tiled-bg card -->
    <section class="px-3 py-3 sm:px-4 lg:px-6">
      <div class="relative mx-auto overflow-hidden rounded-2xl">
        <div class="absolute inset-0 opacity-80" :style="tileStyle"></div>
        <div class="absolute inset-0 bg-background/75"></div>
        <div class="relative mx-auto grid max-w-7xl gap-10 px-4 py-20 lg:grid-cols-5 lg:gap-14 lg:py-24">
        <div class="lg:col-span-3">
          <p class="font-display text-xs uppercase tracking-[0.3em] text-accent">
            {{ t('home.pathways.title') }}
          </p>
          <h2 class="mt-3 font-display text-2xl uppercase tracking-wider md:text-3xl">
            {{ t('home.pathwaysIntro') }}
          </h2>
          <ul class="mt-8 space-y-6">
            <li v-for="p in pathways" :key="p.key" class="flex gap-4">
              <span class="mt-2 h-2 w-2 shrink-0 rounded-full bg-accent"></span>
              <p class="text-base leading-relaxed text-foreground/90">
                <strong class="font-display uppercase tracking-wider text-foreground">
                  {{ t(`home.pathways.${p.key}.title`) }}
                </strong>
                — {{ t(`home.pathways.${p.key}.body`) }}
                <RouterLink :to="p.to" class="ml-1 text-accent underline">
                  {{ t('common.learnMore') }}
                </RouterLink>
              </p>
            </li>
          </ul>
        </div>
        <div class="relative flex items-center justify-center">
          <img
            src="/cosmic-stag.png"
            alt=""
            class="h-72 w-72 object-contain md:h-96 md:w-96"
          />
        </div>
      </div>
    </section>
    <!-- Welcome -->
    <section class="border-y border-border bg-card">
      <div class="mx-auto grid max-w-7xl gap-10 px-4 py-16 lg:grid-cols-5 lg:gap-14 lg:px-6">
        <div class="lg:col-span-2">
          <img
            src="https://static.wixstatic.com/media/11062b_a56b905cae7c424c84cbaa1677d59ec5~mv2.jpg"
            alt=""
-            class="aspect-[4/5] w-full rounded-lg object-cover"
+            class="aspect-[4/3] w-full rounded-lg object-cover"
            loading="lazy"
          />
        </div>
        <div class="lg:col-span-3">
          <h2 class="font-serif text-3xl font-semibold tracking-tight md:text-4xl">
            {{ t('home.welcome.title') }}
          </h2>
          <p class="mt-5 max-w-prose text-base leading-relaxed text-foreground/90">
            {{ t('home.welcome.body') }}
          </p>
          <RouterLink
            to="/vision-values"
            class="mt-6 inline-block text-sm font-medium text-accent hover:underline"
          >
            {{ t('common.learnMore') }} →
          </RouterLink>
        </div>
      </div>
    </section>
-    <!-- Upcoming residencies & community days: tiled-bg card -->
+    <!-- Pathways -->
-    <section class="px-3 py-3 sm:px-4 lg:px-6">
+    <section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
-      <div class="relative mx-auto overflow-hidden rounded-2xl">
+      <div class="mx-auto max-w-2xl text-center">
-        <div class="absolute inset-0 opacity-80" :style="tileStyle"></div>
+        <h2 class="font-serif text-3xl font-semibold tracking-tight md:text-4xl">
-        <div class="absolute inset-0 bg-background/75"></div>
+          {{ t('home.pathways.title') }}
-        <div class="relative mx-auto max-w-7xl px-4 py-20 lg:py-24">
+        </h2>
-        <div class="text-center">
+        <p class="mt-3 text-muted-foreground">{{ t('home.pathways.subtitle') }}</p>
-          <h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl">
+      </div>
-            {{ t('home.events.title') }}
+      <div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-          </h2>
+        <RouterLink
-          <p class="mx-auto mt-3 max-w-2xl text-sm text-foreground/80">
+          v-for="p in pathways"
-            {{ t('home.events.subtitle') }}
+          :key="p.key"
          :to="p.to"
          class="group rounded-lg border border-border bg-card p-6 transition hover:border-accent hover:shadow-sm"
        >
          <div class="text-3xl text-accent">{{ p.icon }}</div>
          <h3 class="mt-3 font-serif text-xl font-semibold">
            {{ t(`home.pathways.${p.key}.title`) }}
          </h3>
          <p class="mt-2 text-sm text-muted-foreground">
            {{ t(`home.pathways.${p.key}.body`) }}
          </p>
          <span class="mt-4 inline-block text-xs text-accent group-hover:underline">
            {{ t('common.learnMore') }} →
          </span>
        </RouterLink>
      </div>
    </section>
    <!-- Featured events -->
    <section class="bg-secondary/30">
      <div class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
        <div class="flex flex-wrap items-end justify-between gap-4">
          <div>
            <h2 class="font-serif text-3xl font-semibold tracking-tight md:text-4xl">
              {{ t('home.events.title') }}
            </h2>
            <p class="mt-2 max-w-prose text-muted-foreground">
              {{ t('home.events.subtitle') }}
            </p>
          </div>
          <RouterLink
            to="/events"
            class="text-sm font-medium text-accent hover:underline"
          >
            {{ t('home.events.seeAll') }} →
          </RouterLink>
        </div>
-        <div class="mt-10 grid gap-6 md:grid-cols-3">
+        <div class="mt-8 grid gap-6 md:grid-cols-3">
          <RouterLink
            v-for="e in featuredEvents"
            :key="e.key"
@ -204,22 +189,32 @@ const featuredEvents = [
              <p class="text-xs uppercase tracking-wider text-accent">
                {{ t(`events.${e.key}.date`) }}
              </p>
-              <h3 class="mt-2 font-display text-lg uppercase tracking-wider">
+              <h3 class="mt-1 font-serif text-xl font-semibold">
                {{ t(`events.${e.key}.title`) }}
              </h3>
-              <p class="mt-1 text-xs text-foreground/70">
+              <p class="mt-1 text-sm text-muted-foreground">
                {{ t(`events.${e.key}.location`) }}
              </p>
            </div>
          </RouterLink>
        </div>
        <div class="mt-10 text-center">
          <Button as-child>
            <RouterLink to="/events">{{ t('home.events.seeAll') }}</RouterLink>
          </Button>
        </div>
        </div>
      </div>
    </section>
    <!-- Contact band -->
    <section class="mx-auto max-w-4xl px-4 py-16 text-center lg:px-6">
      <h2 class="font-serif text-3xl font-semibold tracking-tight md:text-4xl">
        {{ t('home.contact.title') }}
      </h2>
      <p class="mx-auto mt-4 max-w-prose text-muted-foreground">
        {{ t('home.contact.body') }}
      </p>
      <a
        href="mailto:chateaudufaune@ariege.io"
        class="mt-8 inline-block rounded-md bg-primary px-5 py-3 text-sm font-medium text-primary-foreground hover:opacity-90"
      >
        {{ t('home.contact.cta') }}
      </a>
    </section>
  </div>
 </template>
--- a/src/views/LongStaysView.vue
+++ b/src/views/LongStaysView.vue
@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
 const { t } = useI18n()
@ -63,12 +62,18 @@ const paths = ['exchange', 'rental', 'partial', 'funded'] as const
            {{ t('longStays.symposiumTeaser.body') }}
          </p>
          <div class="mt-8 flex flex-wrap items-center gap-3">
-            <Button as-child>
+            <RouterLink
-              <RouterLink to="/symposium">{{ t('longStays.ctaSymposium') }}</RouterLink>
+              to="/symposium"
-            </Button>
+              class="rounded-md bg-primary px-5 py-3 text-sm font-medium text-primary-foreground hover:opacity-90"
-            <Button as-child variant="outline">
+            >
-              <a href="mailto:chateaudufaune@ariege.io">{{ t('longStays.ctaContact') }}</a>
+              {{ t('longStays.ctaSymposium') }}
-            </Button>
+            </RouterLink>
            <a
              href="mailto:chateaudufaune@ariege.io"
              class="rounded-md border border-border px-5 py-3 text-sm font-medium hover:bg-muted"
            >
              {{ t('longStays.ctaContact') }}
            </a>
          </div>
        </div>
      </div>
--- a/src/views/MarketplaceView.vue
+++ b/src/views/MarketplaceView.vue
@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { Button } from '@/components/ui/button'
 const { t } = useI18n()
@ -48,11 +47,12 @@ const categories = ['fresh', 'pantry', 'craft'] as const
        <p class="font-serif text-lg italic text-foreground/85">
          {{ t('marketplace.notice') }}
        </p>
-        <Button as-child variant="outline" class="mt-6">
+        <a
-          <a href="mailto:chateaudufaune@ariege.io?subject=Boutique%20%E2%80%94%20Ch%C3%A2teau%20du%20Faune">
+          href="mailto:chateaudufaune@ariege.io?subject=Boutique%20%E2%80%94%20Ch%C3%A2teau%20du%20Faune"
-            {{ t('marketplace.ctaContact') }}
+          class="mt-6 inline-block rounded-md border border-border bg-card px-5 py-3 text-sm font-medium hover:bg-muted"
-          </a>
+        >
-        </Button>
+          {{ t('marketplace.ctaContact') }}
        </a>
      </div>
    </section>
  </div>
--- a/src/views/OpportunitiesView.vue
+++ b/src/views/OpportunitiesView.vue
@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
 const { t } = useI18n()
@ -79,14 +78,18 @@ const applyKeys = ['model', 'window', 'open'] as const
          </article>
        </div>
        <div class="mt-10 flex flex-wrap items-center gap-3">
-          <Button as-child>
+          <a
-            <a href="mailto:chateaudufaune@ariege.io?subject=Application%20%E2%80%94%20Ch%C3%A2teau%20du%20Faune">
+            href="mailto:chateaudufaune@ariege.io?subject=Application%20%E2%80%94%20Ch%C3%A2teau%20du%20Faune"
-              {{ t('opportunities.ctaApply') }}
+            class="rounded-md bg-primary px-5 py-3 text-sm font-medium text-primary-foreground hover:opacity-90"
-            </a>
+          >
-          </Button>
+            {{ t('opportunities.ctaApply') }}
-          <Button as-child variant="outline">
+          </a>
-            <RouterLink to="/symposium">{{ t('opportunities.ctaSymposium') }}</RouterLink>
+          <RouterLink
-          </Button>
+            to="/symposium"
            class="rounded-md border border-border px-5 py-3 text-sm font-medium hover:bg-muted"
          >
            {{ t('opportunities.ctaSymposium') }}
          </RouterLink>
        </div>
      </div>
    </section>
--- a/src/views/ReservationsView.vue
+++ b/src/views/ReservationsView.vue
@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
 const { t } = useI18n()
@ -74,16 +73,18 @@ const kinds = ['weekend', 'retreat', 'gathering', 'residency'] as const
            <p class="font-serif italic">{{ t('reservations.formPlaceholder') }}</p>
          </div>
          <div class="mt-6 flex flex-wrap items-center gap-3">
-            <Button as-child>
+            <a
-              <a href="mailto:chateaudufaune@ariege.io?subject=R%C3%A9servation%20%E2%80%94%20Ch%C3%A2teau%20du%20Faune">
+              href="mailto:chateaudufaune@ariege.io?subject=R%C3%A9servation%20%E2%80%94%20Ch%C3%A2teau%20du%20Faune"
-                {{ t('reservations.ctaEmail') }}
+              class="rounded-md bg-primary px-5 py-3 text-sm font-medium text-primary-foreground hover:opacity-90"
-              </a>
+            >
-            </Button>
+              {{ t('reservations.ctaEmail') }}
-            <Button as-child variant="outline">
+            </a>
-              <RouterLink to="/accommodation">
+            <RouterLink
-                {{ t('reservations.ctaAccommodation') }}
+              to="/accommodation"
-              </RouterLink>
+              class="rounded-md border border-border px-5 py-3 text-sm font-medium hover:bg-muted"
-            </Button>
+            >
              {{ t('reservations.ctaAccommodation') }}
            </RouterLink>
          </div>
        </div>
--- a/src/views/SymposiumView.vue
+++ b/src/views/SymposiumView.vue
@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
 const { t } = useI18n()
@ -103,12 +102,18 @@ const applySteps = ['stepOne', 'stepTwo', 'stepThree'] as const
          </li>
        </ol>
        <div class="mt-10 flex flex-wrap items-center gap-3">
-          <Button as-child>
+          <RouterLink
-            <RouterLink to="/opportunities">{{ t('symposium.ctaApply') }}</RouterLink>
+            to="/opportunities"
-          </Button>
+            class="rounded-md bg-primary px-5 py-3 text-sm font-medium text-primary-foreground hover:opacity-90"
-          <Button as-child variant="outline">
+          >
-            <a href="mailto:chateaudufaune@ariege.io">{{ t('symposium.ctaContact') }}</a>
+            {{ t('symposium.ctaApply') }}
-          </Button>
+          </RouterLink>
          <a
            href="mailto:chateaudufaune@ariege.io"
            class="rounded-md border border-border px-5 py-3 text-sm font-medium hover:bg-muted"
          >
            {{ t('symposium.ctaContact') }}
          </a>
        </div>
      </div>
    </section>