feat(accommodation): rooms, cabins, exterior coming-next

Six main-house rooms (Qilin / Phoenix / Alicorn / Brownie / Golem /
Kelpie) with bed type, view and bath/kitchen note; each carries an
open or coming-soon status badge. Three cabins (Zephyr / Shinook /
Xocomil) below. A dashed-bordered list previews the exterior wave
(dépendance, dorm caravan, natural cabins, circus-barn apartment,
glamping tents). Reserve mailto + back-link at the foot.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/i18n/locales/en.json

@@ -178,6 +178,64 @@
       "cta": "Write to us"
     }
   },
+  "accommodation": {
+    "hero": {
+      "kicker": "Reservations · Accommodation",
+      "title": "Where you'll stay",
+      "lede": "Rooms in the main house, cabins in the trees, and a growing constellation of exterior places to sleep. Each one is named after a creature from a mythology we love."
+    },
+    "statusOpen": "Open",
+    "statusComingSoon": "Coming soon",
+    "rooms": {
+      "title": "Main house",
+      "subtitle": "Six bedrooms, all with desk and view.",
+      "qilin": {
+        "name": "Qilin",
+        "summary": "Queen bed · work desk · south-facing · shared bath · shared kitchen"
+      },
+      "phoenix": {
+        "name": "Phoenix",
+        "summary": "Queen bed · work desk · south-facing · ensuite · semi-private kitchenette"
+      },
+      "alicorn": {
+        "name": "Alicorn",
+        "summary": "Queen bed · work desk · south-facing · ensuite · private kitchenette"
+      },
+      "brownie": {
+        "name": "Brownie",
+        "summary": "Double bed · garden view · ensuite · shared kitchen"
+      },
+      "golem": {
+        "name": "Golem",
+        "summary": "Double bed · work desk · garden view · ensuite · semi-private kitchen"
+      },
+      "kelpie": {
+        "name": "Kelpie",
+        "summary": "Double bed · work desk · garden view · ensuite · semi-private kitchenette"
+      }
+    },
+    "cabins": {
+      "title": "Cabins",
+      "subtitle": "Lightweight, natural homes among the trees.",
+      "zephyr": "Zephyr",
+      "shinook": "Shinook",
+      "xocomil": "Xocomil"
+    },
+    "exterior": {
+      "title": "Coming next",
+      "subtitle": "A second wave of places to stay, taking shape on the land.",
+      "items": [
+        "A three-bedroom apartment in the dépendance, with kitchen and bathroom",
+        "Three simple bedrooms in the dépendance with shared bathrooms",
+        "A four-bed dorm caravan with kitchen and outdoor facilities",
+        "Three natural cabins",
+        "A two-bedroom apartment in the circus barn",
+        "Ten glamping tents"
+      ]
+    },
+    "ctaReserve": "Request a stay",
+    "ctaBack": "Back to plan your visit"
+  },
   "reservations": {
     "hero": {
       "kicker": "Reservations · Plan Your Visit",

src/i18n/locales/fr.json

@@ -178,6 +178,64 @@
       "cta": "Nous écrire"
     }
   },
+  "accommodation": {
+    "hero": {
+      "kicker": "Réservations · Hébergement",
+      "title": "Où dormir",
+      "lede": "Des chambres dans la maison principale, des cabanes dans les arbres, et une constellation grandissante de lieux de couchage extérieurs. Chacun porte le nom d'une créature de mythologies qui nous touchent."
+    },
+    "statusOpen": "Disponible",
+    "statusComingSoon": "Bientôt",
+    "rooms": {
+      "title": "Maison principale",
+      "subtitle": "Six chambres, toutes avec bureau et vue.",
+      "qilin": {
+        "name": "Qilin",
+        "summary": "Lit queen · bureau · plein sud · salle de bain partagée · cuisine partagée"
+      },
+      "phoenix": {
+        "name": "Phoenix",
+        "summary": "Lit queen · bureau · plein sud · salle de bain privative · kitchenette semi-privée"
+      },
+      "alicorn": {
+        "name": "Alicorn",
+        "summary": "Lit queen · bureau · plein sud · salle de bain privative · kitchenette privée"
+      },
+      "brownie": {
+        "name": "Brownie",
+        "summary": "Lit double · vue jardin · salle de bain privative · cuisine partagée"
+      },
+      "golem": {
+        "name": "Golem",
+        "summary": "Lit double · bureau · vue jardin · salle de bain privative · cuisine semi-privée"
+      },
+      "kelpie": {
+        "name": "Kelpie",
+        "summary": "Lit double · bureau · vue jardin · salle de bain privative · kitchenette semi-privée"
+      }
+    },
+    "cabins": {
+      "title": "Cabanes",
+      "subtitle": "Des refuges légers, en matériaux naturels, parmi les arbres.",
+      "zephyr": "Zephyr",
+      "shinook": "Shinook",
+      "xocomil": "Xocomil"
+    },
+    "exterior": {
+      "title": "Bientôt",
+      "subtitle": "Une seconde vague de couchages, qui prend forme sur le terrain.",
+      "items": [
+        "Un appartement trois chambres dans la dépendance, avec cuisine et salle de bain",
+        "Trois chambres simples dans la dépendance avec salles de bain partagées",
+        "Une caravane-dortoir quatre couchages avec cuisine et sanitaires extérieurs",
+        "Trois cabanes naturelles",
+        "Un appartement deux chambres dans la grange-cirque",
+        "Dix tentes de glamping"
+      ]
+    },
+    "ctaReserve": "Demander un séjour",
+    "ctaBack": "Retour à la visite"
+  },
   "reservations": {
     "hero": {
       "kicker": "Réservations · Préparer votre visite",

src/views/AccommodationView.vue

@@ -1,12 +1,196 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import { RouterLink } from 'vue-router'
 
-const { t } = useI18n()
+const { t, tm, rt } = useI18n()
+
+const rooms = [
+  {
+    key: 'qilin' as const,
+    open: true,
+    image: 'https://static.wixstatic.com/media/f1cbb8_730fb87f6fb34f3aae3bd29fdc5ac9c2~mv2.jpg',
+  },
+  {
+    key: 'phoenix' as const,
+    open: false,
+    image: 'https://static.wixstatic.com/media/f1cbb8_2eec53ae0df2467693d96be8b5a1d185~mv2.jpg',
+  },
+  {
+    key: 'alicorn' as const,
+    open: true,
+    image: 'https://static.wixstatic.com/media/f1cbb8_6978194bdef4420aa0242b619517cec5~mv2.jpg',
+  },
+  {
+    key: 'brownie' as const,
+    open: false,
+    image: 'https://static.wixstatic.com/media/f1cbb8_2eec53ae0df2467693d96be8b5a1d185~mv2.jpg',
+  },
+  {
+    key: 'golem' as const,
+    open: false,
+    image: 'https://static.wixstatic.com/media/f1cbb8_2eec53ae0df2467693d96be8b5a1d185~mv2.jpg',
+  },
+  {
+    key: 'kelpie' as const,
+    open: true,
+    image: 'https://static.wixstatic.com/media/f1cbb8_e81d64b31aea4f00959cc9e0c5727eba~mv2.jpg',
+  },
+]
+
+const cabins = [
+  {
+    key: 'zephyr' as const,
+    image: 'https://static.wixstatic.com/media/11062b_f2ca1af1993942a1943618e329538cfd~mv2.jpg',
+  },
+  {
+    key: 'shinook' as const,
+    image: 'https://static.wixstatic.com/media/11062b_615437e62d0b43e1bff59bd7a91f4b95~mv2.jpg',
+  },
+  {
+    key: 'xocomil' as const,
+    image: 'https://static.wixstatic.com/media/11062b_643c688a59af4aa5ab5a93f38b35dcda~mv2.jpg',
+  },
+]
+
+const exteriorItems = tm('accommodation.exterior.items') as string[]
 </script>
 
 <template>
-  <article class="mx-auto max-w-4xl px-4 py-16">
+  <div>
-    <h1 class="font-serif text-4xl font-semibold tracking-tight">{{ t('nav.accommodation') }}</h1>
+    <!-- Hero -->
-    <p class="mt-4 text-muted-foreground">{{ t('common.comingSoon') }}</p>
+    <section class="border-b border-border bg-secondary/40">
-  </article>
+      <div class="mx-auto max-w-4xl px-4 py-16 lg:px-6 lg:py-20">
+        <p class="text-xs uppercase tracking-[0.2em] text-accent">
+          {{ t('accommodation.hero.kicker') }}
+        </p>
+        <h1 class="mt-3 font-serif text-5xl font-semibold leading-tight tracking-tight md:text-6xl">
+          {{ t('accommodation.hero.title') }}
+        </h1>
+        <p class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">
+          {{ t('accommodation.hero.lede') }}
+        </p>
+      </div>
+    </section>
+
+    <!-- Rooms -->
+    <section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
+      <div class="max-w-3xl">
+        <h2 class="font-serif text-3xl font-semibold tracking-tight">
+          {{ t('accommodation.rooms.title') }}
+        </h2>
+        <p class="mt-3 text-muted-foreground">{{ t('accommodation.rooms.subtitle') }}</p>
+      </div>
+      <ul class="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <li
+          v-for="room in rooms"
+          :key="room.key"
+          class="overflow-hidden rounded-lg border border-border bg-card"
+        >
+          <img
+            :src="room.image"
+            alt=""
+            class="aspect-[4/3] w-full object-cover"
+            loading="lazy"
+          />
+          <div class="p-5">
+            <div class="flex items-baseline justify-between gap-3">
+              <h3 class="font-serif text-xl font-semibold">
+                {{ t(`accommodation.rooms.${room.key}.name`) }}
+              </h3>
+              <span
+                class="rounded-full px-2 py-0.5 text-[10px] uppercase tracking-wider"
+                :class="
+                  room.open
+                    ? 'bg-primary/10 text-primary'
+                    : 'border border-border text-muted-foreground'
+                "
+              >
+                {{
+                  room.open
+                    ? t('accommodation.statusOpen')
+                    : t('accommodation.statusComingSoon')
+                }}
+              </span>
+            </div>
+            <p class="mt-3 text-sm leading-relaxed text-foreground/85">
+              {{ t(`accommodation.rooms.${room.key}.summary`) }}
+            </p>
+          </div>
+        </li>
+      </ul>
+    </section>
+
+    <!-- Cabins -->
+    <section class="border-y border-border bg-card">
+      <div class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
+        <div class="max-w-3xl">
+          <h2 class="font-serif text-3xl font-semibold tracking-tight">
+            {{ t('accommodation.cabins.title') }}
+          </h2>
+          <p class="mt-3 text-muted-foreground">{{ t('accommodation.cabins.subtitle') }}</p>
+        </div>
+        <ul class="mt-8 grid gap-6 md:grid-cols-3">
+          <li
+            v-for="cabin in cabins"
+            :key="cabin.key"
+            class="overflow-hidden rounded-lg border border-border bg-background"
+          >
+            <img
+              :src="cabin.image"
+              alt=""
+              class="aspect-[4/3] w-full object-cover"
+              loading="lazy"
+            />
+            <div class="flex items-baseline justify-between gap-3 p-5">
+              <h3 class="font-serif text-xl font-semibold">
+                {{ t(`accommodation.cabins.${cabin.key}`) }}
+              </h3>
+              <span
+                class="rounded-full border border-border px-2 py-0.5 text-[10px] uppercase tracking-wider text-muted-foreground"
+              >
+                {{ t('accommodation.statusComingSoon') }}
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </section>
+
+    <!-- Exterior, coming next -->
+    <section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
+      <div class="max-w-3xl">
+        <h2 class="font-serif text-3xl font-semibold tracking-tight">
+          {{ t('accommodation.exterior.title') }}
+        </h2>
+        <p class="mt-3 text-muted-foreground">{{ t('accommodation.exterior.subtitle') }}</p>
+      </div>
+      <ul class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <li
+          v-for="(item, i) in exteriorItems"
+          :key="i"
+          class="rounded-lg border border-dashed border-border bg-secondary/20 p-5 text-sm text-foreground/85"
+        >
+          {{ rt(item) }}
+        </li>
+      </ul>
+    </section>
+
+    <!-- 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">
+        <a
+          href="mailto:chateaudufaune@ariege.io?subject=R%C3%A9servation%20%E2%80%94%20Ch%C3%A2teau%20du%20Faune"
+          class="rounded-md bg-primary px-5 py-3 text-sm font-medium text-primary-foreground hover:opacity-90"
+        >
+          {{ t('accommodation.ctaReserve') }}
+        </a>
+        <RouterLink
+          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>
 </template>