gaufre: improve styling when gaufre is manually used in a popup

this is basically for tchap as of now, they are the only ones using this

packages/integration/src/dev/StylesGaufre.tsx

@@ -7,7 +7,7 @@ import devStyles from "./dev.css?inline"
  *
  * this helps testing the html when we include the gaufre css
  */
-export const StylesGaufre = ({ children }: { children: ReactNode }) => {
+export const StylesGaufre = ({ children, mode }: { children: ReactNode, mode?: "borderless" }) => {
   useEffect(() => {
     if (document.querySelector("#styles-gaufre")) {
       return
@@ -16,8 +16,12 @@ export const StylesGaufre = ({ children }: { children: ReactNode }) => {
     style.id = "styles-gaufre"
     style.innerHTML = gaufreStyles + devStyles
     document.head.appendChild(style)
+    if (mode === "borderless") {
+      document.body.classList.add("lasuite--gaufre-borderless")
+    }
     return () => {
       document.querySelector("#styles-gaufre")?.remove()
+      document.body.classList.remove("lasuite--gaufre-borderless")
     }
   }, [])
 

packages/integration/src/dev/dev.tsx

@@ -217,6 +217,57 @@ const routes = [
         </StylesGaufre>
       </DarkTheme>
     ),
+  },{
+    path: "/gaufre-borderless",
+    label: "Gaufre (mode sans bordure)",
+    component: (
+      <StylesGaufre mode="borderless">
+        <div
+          style={{
+            margin: "2rem auto",
+            width: 800,
+            border: "1px solid #999",
+            padding: "2rem",
+            borderRadius: "0.5rem",
+          }}
+        >
+          <div style={{ display: "flex" }}>
+            <h1>Sans bordure (pour intégrations customisées)</h1>
+            <Gaufre />
+          </div>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac diam a libero
+            posuere ornare facilisis in mi. Nullam eu vulputate augue, in auctor nibh. Praesent ac
+            tempus dui. Integer vel enim non purus facilisis mattis et vel dolor. Aliquam lacinia
+            elit et massa faucibus, at dictum risus ornare. Vivamus ultricies magna et gravida
+            consequat. Donec ac odio finibus, lobortis purus vel, consequat purus. Maecenas
+            convallis vel enim eu malesuada. Vestibulum elementum maximus massa, a porta erat
+            congue quis. Nunc neque quam, euismod et malesuada in, bibendum ac ex. Phasellus felis
+            elit, egestas a convallis nec, malesuada a est. Donec ac urna venenatis lorem aliquet
+            rhoncus in accumsan ipsum.
+          </p>
+          <p>
+            Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi sed augue
+            elementum, tempus diam in, euismod purus. Fusce interdum, leo nec blandit eleifend,
+            sapien ligula egestas quam, quis aliquam ex turpis ut augue. Nullam a neque
+            consectetur, feugiat eros a, lacinia tortor. Proin imperdiet vehicula justo, eget
+            bibendum tortor gravida a. Pellentesque sit amet fermentum urna. Ut rutrum eros a
+            ligula dapibus pharetra. In porttitor arcu in euismod dictum. Aenean vestibulum mi et
+            dignissim rutrum. Phasellus ultrices ex justo, eu tincidunt metus efficitur non.
+            Curabitur ac lorem ornare, aliquet neque et, tristique elit. Donec quis turpis
+            sodales, interdum massa fermentum, dictum magna.
+          </p>
+          <p>
+            Mauris elit risus, facilisis at magna quis, interdum tempor nulla. Ut ac erat eget
+            tellus ultricies semper. Ut at dictum ante. Lorem ipsum dolor sit amet, consectetur
+            adipiscing elit. Nam placerat lacinia eros ac convallis. Sed ultricies lectus et
+            pharetra aliquet. Vestibulum feugiat pulvinar fermentum. Vivamus imperdiet dapibus
+            ornare. Donec venenatis, lectus id faucibus tempus, sapien urna molestie augue, at
+            egestas enim lectus quis nisi.
+          </p>
+        </div>
+      </StylesGaufre>
+    ),
   },
 ]
 

website/src/components/GaufrePage.astro

@@ -151,8 +151,16 @@ const useSubsettedFont = import.meta.env.PUBLIC_USE_GAUFRE_SUBSETTED_FONT !== "0
           display: flex !important;
           align-items: center !important;
           padding: 16px 32px !important;
+          --gaufre-x-border-width: 0 !important;
           border-top: 1px solid transparent !important;
           border-bottom: 1px solid transparent !important;
+          border-left: var(--gaufre-x-border-width) solid transparent !important;
+          border-right: var(--gaufre-x-border-width) solid transparent !important;
+        }
+
+        .lasuite--gaufre-borderless .lagaufre-service {
+          --gaufre-x-border-width: 1px !important;
+          border-radius: 8px !important;
         }
 
         .lagaufre-service a {
@@ -179,20 +187,17 @@ const useSubsettedFont = import.meta.env.PUBLIC_USE_GAUFRE_SUBSETTED_FONT !== "0
 
         .lagaufre-service:hover {
           background-color: #f0f0fa !important;
-          border-top: 1px solid #8989cd !important;
-          border-bottom: 1px solid #8989cd !important;
+          border-color: #8989cd !important;
         }
         .lagaufre-service:has(:focus-visible) { /* this is like a "has-focus-within" selector */
           background-color: #f0f0fa !important;
-          border-top: 1px solid #8989cd !important;
-          border-bottom: 1px solid #8989cd !important;
+          border-color: #8989cd !important;
         }
         /* fallback for browsers that don't support :has */
         @supports not selector(:has(+ *)) {
           .lagaufre-service:focus-within {
             background-color: #f0f0fa !important;
-            border-top: 1px solid #8989cd !important;
-            border-bottom: 1px solid #8989cd !important;
+            border-color: #8989cd !important;
           }
         }
         .lagaufre-service:active {
@@ -201,19 +206,16 @@ const useSubsettedFont = import.meta.env.PUBLIC_USE_GAUFRE_SUBSETTED_FONT !== "0
 
         [data-fr-scheme="dark"] .lagaufre-service:hover {
           background-color: #2d2d2d !important;
-          border-top-color: #8989cd !important;
-          border-bottom-color: #8989cd !important;
+          border-color: #8989cd !important;
         }
         [data-fr-scheme="dark"] .lagaufre-service:has(:focus-visible) {
           background-color: #2d2d2d !important;
-          border-top-color: #8989cd !important;
-          border-bottom-color: #8989cd !important;
+          border-color: #8989cd !important;
         }
         @supports not selector(:has(+ *)) {
           [data-fr-scheme="dark"] .lagaufre-service:focus-within {
             background-color: #2d2d2d !important;
-            border-top-color: #8989cd !important;
-            border-bottom-color: #8989cd !important;
+            border-color: #8989cd !important;
           }
         }
 
@@ -241,7 +243,7 @@ const useSubsettedFont = import.meta.env.PUBLIC_USE_GAUFRE_SUBSETTED_FONT !== "0
           padding: 2px 6px !important;
           border-radius: 99px !important;
           position: absolute !important;
-          bottom: -2ch !important;
+          bottom: -1.75ch !important;
           right: -2.5ch !important;
           line-height: 1.5 !important;
         }