librodrome/app/pages/citoyenne/index.vue

<template>
  <div class="axis-scope axis-scope--cit oiseaux-scene relative overflow-hidden section-padding">
    <div class="container-content">
      <header class="mb-12 text-center">
        <p class="relative mb-2 font-mono text-sm tracking-widest text-primary uppercase">
          <!-- Phone: the title fills the width; the bird stands at the end of this line, on its baseline -->
          {{ content?.kicker }}<UiOiseauPose nom="vigie" pose="perche" bout :w="72" retourne mobile-seul />
        </p>
        <h1 class="page-title relative font-display font-bold tracking-tight" style="color: hsl(var(--color-text))">
          <!-- At the end of the title, on its baseline (rule e, docs/da-oiseaux.md) -->
          {{ content?.title }}<UiOiseauPose nom="vigie" pose="perche" bout left="16px" :w="96" retourne :seuil="1200" />
        </h1>
        <p class="mt-4 mx-auto max-w-2xl leading-relaxed" style="color: hsl(var(--color-text-muted))">
          {{ content?.description }}
        </p>
      </header>

      <div class="mx-auto max-w-3xl flex flex-col gap-6">
        <!-- Decision collective — the card clips its corners, the birds stand on a wrapper -->
        <div class="relative">
        <UiOiseauPose nom="juge" pose="marge-d" ecart="40px" :w="84" retourne />
        <div class="item-card">
          <NuxtLink to="/citoyenne/decision" class="item-overlay" aria-label="Décision collective" tabindex="-1" />
          <div class="item-body group">
            <div class="item-header">
              <div class="item-icon">
                <div class="i-lucide-gavel h-5 w-5" />
              </div>
              <h2 class="font-display text-xl font-bold" style="color: hsl(var(--color-text))">
                Décision collective
              </h2>
              <UiStatusBadge class="ml-auto" v-bind="statusOf('decision')" />
            </div>
            <p class="leading-relaxed mt-3" style="color: hsl(var(--color-text-muted))">
              Se donner les moyens de la décision collective.
            </p>
          </div>
          <div class="item-actions">
            <a :href="decisionUrl" target="_blank" rel="noopener" class="action-btn action-btn--primary">
              <div class="i-lucide-external-link h-3.5 w-3.5" />
              Ouvrir libreDecision
            </a>
          </div>
        </div>
        </div>

        <!-- Tarifs de l'eau -->
        <div class="relative">
        <!-- 24 px between the two cards: no room above them for a perched bird (DA rule of 03/11) -->
        <!-- Out by the side of the card, not by its corners: the card is a link (rule h); its feet
             46 px above the card's bottom, where the captain stands on the other side (rule c) -->
        <UiOiseauPose nom="cartographe" pose="derriere" left="calc(100% - 100px)" bottom="46px" :w="210" />
        <UiOiseauPose nom="capitaine" pose="marge-g" ecart="46px" :w="136" />
        <div class="item-card">
          <NuxtLink to="/citoyenne/tarifs-eau" class="item-overlay" aria-label="Tarifs de l'eau" tabindex="-1" />
          <div class="item-body group">
            <div class="item-header">
              <div class="item-icon">
                <div class="i-lucide-droplets h-5 w-5" />
              </div>
              <h2 class="font-display text-xl font-bold" style="color: hsl(var(--color-text))">
                Tarifs de l'eau
              </h2>
              <UiStatusBadge class="ml-auto" v-bind="statusOf('tarifs-eau')" />
            </div>
            <p class="leading-relaxed mt-3" style="color: hsl(var(--color-text-muted))">
              Application pour obtenir justice sociale et incitation dynamique à la réduction.
              Permet de confier la décision à la population des communes.
            </p>
          </div>
          <div class="item-actions">
            <a :href="sejeteral0Url" target="_blank" rel="noopener" class="action-btn action-btn--primary">
              <div class="i-lucide-external-link h-3.5 w-3.5" />
              Lancer SejeteralO
            </a>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'default',
})

const { data: content } = await usePageContent('citoyenne')
const statusOf = (id: string) => {
  const item = ((content.value as any)?.items ?? []).find((i: any) => i.id === id) ?? {}
  return { status: item.status, since: item.since, gestation: item.gestation }
}

const appConfig = useAppConfig()
const decisionUrl = (appConfig.libredecision as { url: string })?.url ?? '#'
const sejeteral0Url = (appConfig.sejeteral0 as { url: string })?.url ?? '#'

useSeoPage({
  title: content.value?.meta?.title ?? 'Autonomie citoyenne',
  description: (content.value as Record<string, unknown> | null)?.description as string ?? 'Décision collective, gouvernance locale, outils citoyens — l\'autonomie politique à l\'échelle des bassins de vie.',
})
</script>

<style scoped>
.page-title {
  font-size: clamp(2rem, 5vw, 2.75rem);
}

.item-card {
  border-radius: 16px;
  border: none;
  background: hsl(var(--color-surface));
  transition: border-color 0.2s;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.item-card:hover {
  border-color: hsl(var(--color-primary) / 0.2);
}

/* Lien overlay — couvre toute la carte, AU-DESSUS du contenu */
.item-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.item-body {
  display: block;
  padding: 1.5rem;
  color: inherit;
}

.item-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: hsl(var(--color-primary) / 0.15);
  color: hsl(var(--color-primary));
  box-shadow: 0 0 12px hsl(var(--color-primary) / 0.12);
  flex-shrink: 0;
}

.gestation-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: hsl(var(--color-accent) / 0.12);
  color: hsl(var(--color-accent));
  font-size: 0.7rem;
  font-weight: 500;
  font-family: var(--font-mono);
}

.item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid hsl(var(--color-text) / 0.06);
  background: hsl(var(--color-bg) / 0.4);
  position: relative;
  z-index: 2;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}

.action-btn--primary {
  color: hsl(var(--color-primary));
  background: hsl(var(--color-primary) / 0.12);
  border: 1px solid hsl(var(--color-primary) / 0.25);
}

.action-btn--primary:hover {
  background: hsl(var(--color-primary) / 0.2);
  border-color: hsl(var(--color-primary) / 0.4);
}
</style>