From 5c35f4b8f05eadd8b349db5b5347f4e492c99cbb Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Mon, 8 Jun 2026 15:56:43 +0200
Subject: [PATCH] fix : layout style

---
 frontend/app/layouts/default.vue                      |  7 +++----
 .../modules/commercial/pages/clients/[id]/edit.vue    |  4 ++--
 .../modules/commercial/pages/clients/[id]/index.vue   |  4 ++--
 frontend/modules/commercial/pages/clients/index.vue   |  8 ++++----
 frontend/modules/commercial/pages/clients/new.vue     |  2 +-
 frontend/shared/components/ui/PageHeader.vue          | 11 ++++++++---
 6 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/frontend/app/layouts/default.vue b/frontend/app/layouts/default.vue
index 0fa7ab9..ee46cf8 100644
--- a/frontend/app/layouts/default.vue
+++ b/frontend/app/layouts/default.vue
@@ -2,7 +2,9 @@
     Valeurs en dur issues de la maquette Figma (design Starseed) :
       - sidebar depliee : 232px (w-[232px], repli laisse par defaut 72px)
       - marge horizontale du contenu sur desktop : 170px (xl:px-[170px])
-      - bande blanche sticky sous la navbar : 47px (h-[47px])
+    La marge haute du contenu (44px) vit desormais DANS l'entete (PageHeader,
+    pt-11) et non sur le <main> : sinon, l'entete etant sticky, ce padding
+    laissait un trou blanc entre le SiteSelector et l'entete.
     A faire evoluer uniquement avec une mise a jour de maquette.
 -->
 <template>
@@ -25,9 +27,6 @@
                 <SiteSelector v-if="showSiteSelector"/>
                 <main
                     class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-10 sm:px-6 lg:px-12 xl:px-11">
-                    <div
-                        aria-hidden="true"
-                        class="pointer-events-none sticky top-0 z-30 h-11 flex-shrink-0 bg-white"/>
                     <slot/>
                 </main>
             </div>
diff --git a/frontend/modules/commercial/pages/clients/[id]/edit.vue b/frontend/modules/commercial/pages/clients/[id]/edit.vue
index 0fc367f..df007d9 100644
--- a/frontend/modules/commercial/pages/clients/[id]/edit.vue
+++ b/frontend/modules/commercial/pages/clients/[id]/edit.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <!-- En-tete : retour repertoire + nom du client. -->
-        <div class="flex items-center gap-3">
+        <div class="flex items-center gap-3 pt-11">
             <MalioButtonIcon
                 icon="mdi:arrow-left-bold"
                 icon-size="24"
@@ -9,7 +9,7 @@
                 v-bind="{ ariaLabel: t('commercial.clients.edit.back') }"
                 @click="goBack"
             />
-            <h1 class="text-[32px] font-bold text-m-primary">{{ headerTitle }}</h1>
+            <h1 class="text-[30px] font-bold text-m-primary">{{ headerTitle }}</h1>
         </div>
 
         <!-- Etats de chargement / introuvable. -->
diff --git a/frontend/modules/commercial/pages/clients/[id]/index.vue b/frontend/modules/commercial/pages/clients/[id]/index.vue
index fe05227..d34a0ba 100644
--- a/frontend/modules/commercial/pages/clients/[id]/index.vue
+++ b/frontend/modules/commercial/pages/clients/[id]/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <!-- En-tete : retour repertoire + nom du client + actions (Modifier / Archiver|Restaurer). -->
-        <div class="flex items-center gap-3">
+        <div class="flex items-center gap-3 pt-11">
             <MalioButtonIcon
                 icon="mdi:arrow-left-bold"
                 icon-size="24"
@@ -9,7 +9,7 @@
                 v-bind="{ ariaLabel: t('commercial.clients.consultation.back') }"
                 @click="goBack"
             />
-            <h1 class="text-[32px] font-bold text-m-primary">{{ headerTitle }}</h1>
+            <h1 class="text-[30px] font-bold text-m-primary">{{ headerTitle }}</h1>
 
             <!-- gap-12 = 48px : meme espacement que Ajouter / Filtres du repertoire. -->
             <div class="ml-auto flex items-center gap-12">
diff --git a/frontend/modules/commercial/pages/clients/index.vue b/frontend/modules/commercial/pages/clients/index.vue
index 4ac735e..b4a5668 100644
--- a/frontend/modules/commercial/pages/clients/index.vue
+++ b/frontend/modules/commercial/pages/clients/index.vue
@@ -4,7 +4,7 @@
             {{ t('commercial.clients.title') }}
             <template #actions>
                 <!-- gap-12 = 48px d'espacement entre Ajouter et Filtres. -->
-                <div class="flex items-center gap-12">
+                <div class="flex items-center gap-8">
                     <MalioButton
                         v-if="canManage"
                         variant="secondary"
@@ -21,8 +21,8 @@
                         :label="filterButtonLabel"
                         icon-name="mdi:tune"
                         icon-position="left"
-                        icon-size="24"
-                        button-class="w-[184px] justify-start gap-4 text-black"
+                        icon-size="20"
+                        button-class="w-[180px] justify-start gap-4 text-black"
                         @click="openFilters"
                     />
                 </div>
@@ -70,7 +70,7 @@
             </template>
         </MalioDataTable>
 
-        <div class="flex justify-center mt-6">
+        <div class="flex justify-center mt-4">
             <MalioButton
                 v-if="canView"
                 variant="primary"
diff --git a/frontend/modules/commercial/pages/clients/new.vue b/frontend/modules/commercial/pages/clients/new.vue
index 7953876..d2bcd94 100644
--- a/frontend/modules/commercial/pages/clients/new.vue
+++ b/frontend/modules/commercial/pages/clients/new.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <!-- En-tete : retour vers le repertoire + titre. -->
-        <div class="flex items-center gap-3">
+        <div class="flex items-center gap-3 pt-11">
             <MalioButtonIcon
                 icon="mdi:arrow-left-bold"
                 icon-size="24"
diff --git a/frontend/shared/components/ui/PageHeader.vue b/frontend/shared/components/ui/PageHeader.vue
index ec9f595..42ef59f 100644
--- a/frontend/shared/components/ui/PageHeader.vue
+++ b/frontend/shared/components/ui/PageHeader.vue
@@ -1,8 +1,13 @@
 <template>
     <!-- Entete de page standard : source unique du style des titres.
-         Slot par defaut = texte du titre, slot #actions = boutons a droite. -->
-    <div class="mb-[44px] flex items-center justify-between gap-4">
-        <h1 class="text-[32px] font-semibold text-primary-500">
+         Slot par defaut = texte du titre, slot #actions = boutons a droite.
+         Sticky en haut du <main> scrollable : reste visible au scroll. Fond blanc
+         + pt-11/pb-[34px] (au lieu de marges) pour que le contenu defilant soit
+         masque sous l'entete (espaces haut ET bas compris) et que l'entete soit
+         collee sous le SiteSelector sans trou. pt-11 = 44px, la marge haute
+         d'origine. z-20 < drawers/modales. -->
+    <div class="sticky top-0 z-20 flex items-center justify-between gap-4 bg-white pt-11 pb-[34px]">
+        <h1 class="text-[30px] font-semibold text-primary-500">
             <slot/>
         </h1>
         <div v-if="$slots.actions" class="shrink-0">