From a038851895b9d5490d5e33bc597102f33047fb99 Mon Sep 17 00:00:00 2001
From: Yvv <yves@pervier.com>
Date: Tue, 24 Mar 2026 00:12:39 +0100
Subject: [PATCH] =?UTF-8?q?Home/citoyenne=20:=20blocs=20enti=C3=A8rement?=
 =?UTF-8?q?=20cliquables=20+=20SejeteralO=20dans=20tarifs=20eau?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AxisBlock : overlay z-index 1 (au-dessus du contenu), actions z-index 2
  (boutons au-dessus de l'overlay) — fix blocage du clic sur tout le bloc
- citoyenne/index : même correction overlay/z-index ; suppression des
  NuxtLink "En savoir plus" devenus redondants (overlay gère la navigation)
- home.yml : ajout bouton "Ouvrir SejeteralO" sur le bloc Tarifs de l'eau

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/components/home/AxisBlock.vue | 27 +++++++++++++++++++++------
 app/pages/citoyenne/index.vue     | 30 +++++++++++++++++-------------
 site/pages/home.yml               |  6 ++++++
 3 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/app/components/home/AxisBlock.vue b/app/components/home/AxisBlock.vue
index 125855a..a901ab7 100644
--- a/app/components/home/AxisBlock.vue
+++ b/app/components/home/AxisBlock.vue
@@ -16,12 +16,17 @@
         class="axis-item card-surface"
         :class="{ 'axis-item--gestation': item.gestation }"
       >
-        <!-- Clickable card body -->
+        <!-- Overlay link — full card clickable (z-index 0) -->
         <component
           :is="itemTag(item)"
           v-bind="itemAttrs(item)"
-          class="axis-item-body"
-        >
+          class="axis-item-overlay"
+          :aria-label="item.label"
+          tabindex="-1"
+        />
+
+        <!-- Card body (position relative, z-index 1 — above overlay) -->
+        <div class="axis-item-body">
           <!-- Item icon -->
           <div v-if="item.icon" class="axis-item-icon" :class="`axis-item-icon--${color}`">
             <span v-if="item.icon === 'g1'" class="axis-item-icon-g1">Ğ1</span>
@@ -46,9 +51,9 @@
             </div>
             <p class="axis-pi-text">{{ item.presentation.text }}</p>
           </div>
-        </component>
+        </div>
 
-        <!-- Actions zone (separate from card link) -->
+        <!-- Actions zone — z-index 1, above overlay, boutons ouvrent liens externes -->
         <div v-if="item.actions?.length" class="axis-actions">
           <!-- Primary row -->
           <div class="axis-actions-row">
@@ -185,9 +190,18 @@ function itemAttrs(item: AxisItem) {
   border: 1px solid hsl(var(--color-text) / 0.08);
   background: hsl(var(--color-surface));
   transition: border-color 0.2s, box-shadow 0.2s;
+  position: relative;
   /* overflow: visible pour laisser le tooltip sortir du cadre */
 }
 
+/* Lien overlay — couvre toute la carte, AU-DESSUS du contenu */
+.axis-item-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+}
+
 .axis-item:hover {
   border-color: hsl(var(--color-primary) / 0.25);
   box-shadow: 0 4px 24px hsl(var(--color-primary) / 0.06);
@@ -206,7 +220,6 @@ function itemAttrs(item: AxisItem) {
   flex-direction: column;
   padding: 1.25rem;
   flex: 1;
-  text-decoration: none;
   color: inherit;
 }
 
@@ -262,6 +275,8 @@ function itemAttrs(item: AxisItem) {
   background: hsl(var(--color-bg) / 0.4);
   border-bottom-left-radius: 0.75rem;
   border-bottom-right-radius: 0.75rem;
+  position: relative;
+  z-index: 2;
 }
 
 .axis-actions-row {
diff --git a/app/pages/citoyenne/index.vue b/app/pages/citoyenne/index.vue
index c34c683..e98ba75 100644
--- a/app/pages/citoyenne/index.vue
+++ b/app/pages/citoyenne/index.vue
@@ -343,7 +343,8 @@
       <div class="mx-auto max-w-3xl flex flex-col gap-6">
         <!-- Decision collective -->
         <div class="item-card">
-          <NuxtLink to="/citoyenne/decision" class="item-body group">
+          <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" />
@@ -355,11 +356,7 @@
             <p class="leading-relaxed mt-3" style="color: hsl(var(--color-text-muted))">
               Se donner les moyens de la décision collective.
             </p>
-            <div class="mt-3 inline-flex items-center gap-1 text-sm text-primary group-hover:text-primary/80 transition-colors">
-              En savoir plus
-              <div class="i-lucide-arrow-right h-3.5 w-3.5" />
-            </div>
-          </NuxtLink>
+          </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" />
@@ -370,7 +367,8 @@
 
         <!-- Tarifs de l'eau -->
         <div class="item-card">
-          <NuxtLink to="/citoyenne/tarifs-eau" class="item-body group">
+          <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" />
@@ -387,11 +385,7 @@
               Application pour obtenir justice sociale et incitation dynamique à la réduction.
               Permet de confier la décision à la population des communes.
             </p>
-            <div class="mt-3 inline-flex items-center gap-1 text-sm text-primary group-hover:text-primary/80 transition-colors">
-              En savoir plus
-              <div class="i-lucide-arrow-right h-3.5 w-3.5" />
-            </div>
-          </NuxtLink>
+          </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" />
@@ -431,16 +425,24 @@ useHead({
   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;
-  text-decoration: none;
   color: inherit;
 }
 
@@ -484,6 +486,8 @@ useHead({
   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 {
diff --git a/site/pages/home.yml b/site/pages/home.yml
index 878d5f2..5ddd662 100644
--- a/site/pages/home.yml
+++ b/site/pages/home.yml
@@ -121,6 +121,12 @@ axes:
         to: /citoyenne/tarifs-eau
         gestation: true
         icon: droplets
+        actions:
+          - id: open-sejeteral0
+            label: Ouvrir SejeteralO
+            icon: external-link
+            highlight: true
+            href: https://collectivites.librodrome.org
 gratewizard:
   title: grateWizard
   subtitle: Un utilitaire pratique pour estimer les valeurs de façon relative