From 034cb8ba99ecf1b7b0506761dd5b75af9424e13e Mon Sep 17 00:00:00 2001
From: Arnaud <dupleix@gmail.com>
Date: Thu, 28 May 2026 22:42:25 +0200
Subject: [PATCH] =?UTF-8?q?feat(donut):=20noms=20de=20cat=C3=A9gories=20su?=
 =?UTF-8?q?r=20l'anneau=20interm=C3=A9diaire=20(ceiling=20ring)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Les noms étaient tout à l'extérieur (R=275), au-delà des limites planétaires.
L'utilisateur veut "sur le cercle intermédiaire entre les camemberts des
catégories et les limites planétaires" — c'est-à-dire SUR l'anneau gris du
plafond écologique qui sépare la zone sûre (où vivent les wedges colorés)
des limites planétaires.

  - R_CAT_LABEL : 275 → 212 (milieu de l'anneau gris 200..225)
  - viewBox : retour à 560×560 (plus besoin d'étendre à R=275)
  - Cream background : 295 → 270 (idem)
  - Font-size : 11 → 10 (plus discret sur ring)
  - paint-order + stroke #FAFAF6 sur le texte : "halo" cream autour des
    lettres pour rester lisibles malgré le pattern strié du ring gris.
    Plus simple qu'un mask et fonctionne dans tous les browsers modernes.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/DonutPage.vue | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/DonutPage.vue b/frontend/src/pages/DonutPage.vue
index 7891af9..f86a8a0 100644
--- a/frontend/src/pages/DonutPage.vue
+++ b/frontend/src/pages/DonutPage.vue
@@ -58,8 +58,8 @@ onMounted(load)
 // lisibles : circonférence ≈ 2π × R, donc plus R est grand, plus chaque label
 // d'arc dispose de place. Le centre et le ring extérieur ne bougent pas, c'est
 // uniquement la zone intérieure qui grossit, en mangeant un peu sur l'espace sûr.
-const R_CAT_LABEL     = 275  // noms de catégories EN ARC, tout à l'extérieur
-const R_PLANET_LABEL  = 252  // étiquettes des limites planétaires (entre catégories et ceiling)
+const R_PLANET_LABEL  = 252  // étiquettes des limites planétaires (extérieur)
+const R_CAT_LABEL     = 212  // noms de catégories EN ARC, sur l'anneau gris du plafond (intermédiaire)
 const R_CEILING_OUTER = 225
 const R_CEILING_INNER = 200
 const R_FLOOR_OUTER   = 125
@@ -358,7 +358,7 @@ function gotoProject(p: ProjectListRow) {
     <div v-else class="mt-10 grid grid-cols-1 lg:grid-cols-5 gap-10 items-start">
       <!-- Donut SVG (3/5 sur grands écrans) -->
       <div class="lg:col-span-3 flex flex-col items-center">
-        <svg viewBox="-300 -300 600 600" class="w-full max-w-[680px] aspect-square">
+        <svg viewBox="-280 -280 560 560" class="w-full max-w-[640px] aspect-square">
           <defs>
             <!-- Anneaux gris légèrement striés -->
             <pattern id="ring-stripes" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
@@ -382,8 +382,8 @@ function gotoProject(p: ProjectListRow) {
           </defs>
 
           <!-- 1) ZONE D'OVERSHOOT (au-delà du plafond) -->
-          <!--    fond cream clair pour soutenir les labels limites planétaires + catégories -->
-          <circle r="295" fill="#F5F2EA" />
+          <!--    fond cream clair pour soutenir les labels limites planétaires -->
+          <circle r="270" fill="#F5F2EA" />
 
           <!-- 2) Étiquettes des 9 LIMITES PLANÉTAIRES, le long de leur arc -->
           <g>
@@ -424,14 +424,15 @@ function gotoProject(p: ProjectListRow) {
             />
           </g>
 
-          <!-- 7) Noms des CATÉGORIES en arc, tout à l'extérieur du donut, en couleur catégorie -->
+          <!-- 7) Noms des CATÉGORIES en arc, SUR L'ANNEAU GRIS DU PLAFOND (entre wedges et
+                  limites planétaires), en couleur catégorie pour contraster avec le pattern. -->
           <g>
             <text
               v-for="arc in categoryArcs" :key="`cat-text-${arc.key}`"
-              font-size="11"
+              font-size="10"
               font-weight="700"
               :fill="categories[arc.key]?.color_hex ?? '#111827'"
-              style="letter-spacing: 0.5px"
+              style="letter-spacing: 0.5px; paint-order: stroke; stroke: #FAFAF6; stroke-width: 2.5; stroke-linejoin: round"
             >
               <textPath :href="`#${arc.lines[0].pathId}`" startOffset="50%" text-anchor="middle">
                 {{ arc.lines[0].text }}