allaw-ui 3.7.2 → 3.7.4

package/dist/components/atoms/buttons/InboxButton.d.ts

@@ -1,27 +1,23 @@
 import React from "react";
 export interface InboxButtonProps {
-    /** Nombre d'éléments à afficher */
-    count?: number;
-    /** Callback au clic */
-    onClick?: () => void;
     /** Textes à afficher suivant la valeur de count */
     labels: {
         none: string;
         one: string;
         multiple: string;
     };
-    /** Identifiant pour les tests Playwright */
-    dataCy?: string;
-    /**
-     * Thème de couleur automatique :
-     * - "notification" : bleu si 0, rouge sinon (et disabled si 0)
-     * - "qualification" : vert si count>0, gris sinon
-     */
+    /** Nombre d'éléments à afficher */
+    count?: number;
+    /** Callback au clic */
+    onClick?: () => void;
+    /** Thème visuel */
     scheme?: "notification" | "qualification";
     /** Classe CSS de l'icône à gauche */
     iconClassName?: string;
     /** aria-label de l'icône */
     iconAriaLabel?: string;
+    /** Identifiant pour les tests Playwright */
+    dataCy?: string;
 }
 declare const InboxButton: React.FC<InboxButtonProps>;
 export default InboxButton;

package/dist/components/atoms/buttons/InboxButton.js

@@ -1,47 +1,35 @@
-import clsx from "clsx";
 import React from "react";
 import styles from "./InboxButton.module.css";
 var InboxButton = function (_a) {
-    var _b = _a.count, count = _b === void 0 ? 0 : _b, onClick = _a.onClick, labels = _a.labels, dataCy = _a.dataCy, _c = _a.scheme, scheme = _c === void 0 ? "notification" : _c, iconClassName = _a.iconClassName, iconAriaLabel = _a.iconAriaLabel;
-    var isZero = count === 0;
-    var isDisabled = scheme === "qualification" && isZero;
-    var isQualificationZero = scheme === "qualification" && isZero;
-    // Choix du label
-    var label = isZero
-        ? labels.none
-        : count === 1
-            ? labels.one
-            : labels.multiple.replace("{{count}}", String(count));
-    // Choix automatique des classes bg + text
-    var bgKey;
-    var colorKey;
-    if (scheme === "notification") {
-        if (isZero) {
-            bgKey = "light-blue";
-            colorKey = "blue";
-        }
-        else {
-            bgKey = "light-red";
-            colorKey = "red";
-        }
-    }
-    else {
-        // qualification
-        if (isZero) {
-            bgKey = "pure-white";
-            colorKey = "mid-grey";
-        }
-        else {
-            bgKey = "light-red";
-            colorKey = "red";
-        }
-    }
-    return (React.createElement("button", { className: clsx(styles.inboxBtn, isDisabled && styles.disabled, isQualificationZero && styles.qualificationZero, !isDisabled && !isQualificationZero && styles["bg-".concat(bgKey)], scheme === "qualification" &&
-            !isQualificationZero &&
-            styles.qualificationActive, scheme === "notification" && !isZero && styles.notifActive, scheme === "qualification" && !isZero && styles.shiny), disabled: isDisabled, onClick: onClick, "data-cy": dataCy },
-        iconClassName && (React.createElement("i", { className: clsx(styles.icon, iconClassName, !isDisabled && !isQualificationZero && styles["color-".concat(colorKey)], isQualificationZero && styles.colorDarkGrey, scheme === "qualification" &&
-                !isQualificationZero &&
-                styles.colorNoir), "aria-label": iconAriaLabel })),
-        React.createElement("span", { className: clsx(styles.label, isDisabled && styles.labelDisabled, !isDisabled && !isQualificationZero && styles["color-".concat(colorKey)], isQualificationZero && styles.colorDarkGrey, scheme === "qualification" && !isQualificationZero && styles.colorNoir) }, label)));
+    var labels = _a.labels, _b = _a.count, count = _b === void 0 ? 0 : _b, onClick = _a.onClick, _c = _a.scheme, scheme = _c === void 0 ? "notification" : _c, iconClassName = _a.iconClassName, iconAriaLabel = _a.iconAriaLabel, dataCy = _a.dataCy;
+    // Calcul du label
+    var getLabel = function () {
+        if (count === 0)
+            return labels.none;
+        if (count === 1)
+            return labels.one;
+        return labels.multiple.replace("{{count}}", String(count));
+    };
+    // Logique des états
+    var isNotificationZero = scheme === "notification" && count === 0;
+    var isNotificationActive = scheme === "notification" && count > 0;
+    var isQualificationZero = scheme === "qualification" && count === 0;
+    var isQualificationActive = scheme === "qualification" && count > 0;
+    // Le bouton est disabled seulement pour notification à 0
+    var isDisabled = isNotificationZero;
+    // Classes CSS
+    var buttonClasses = [
+        styles.inboxBtn,
+        isNotificationZero && styles.notificationZero,
+        isNotificationActive && styles.notificationActive,
+        isQualificationZero && styles.qualificationZero,
+        isQualificationActive && styles.qualificationActive,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    var iconClasses = [styles.icon, iconClassName].filter(Boolean).join(" ");
+    return (React.createElement("button", { className: buttonClasses, disabled: isDisabled, onClick: onClick, "data-cy": dataCy },
+        iconClassName && (React.createElement("i", { className: iconClasses, "aria-label": iconAriaLabel })),
+        React.createElement("span", { className: styles.label }, getLabel())));
 };
 export default InboxButton;

package/dist/components/atoms/buttons/InboxButton.module.css

@@ -1,196 +1,118 @@
-/* Effet shiny pour les boutons qualification actifs */
-.shiny {
-  position: relative;
-  overflow: hidden;
-}
-
-.shiny::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    120deg,
-    transparent,
-    rgba(225, 81, 81, 0.4),
-    transparent
-  );
-  animation: shine 5s ease-in-out infinite;
-  transition: left 0.65s ease-in-out;
-}
-
-@keyframes shine {
-  0% {
-    left: -100%;
-  }
-  13% {
-    left: 100%;
-  }
-  100% {
-    left: 100%;
-  }
-}
+/* ===========================================
+   BASE STYLES
+   =========================================== */
 
 .inboxBtn {
+  /* Layout */
   display: flex;
   flex-direction: row;
-  flex-wrap: nowrap;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem;
+
+  /* Dimensions */
   width: 100%;
+  padding: 0.5rem;
+
+  /* Style */
   border: none;
   border-radius: 0.5rem;
-}
-
-.notifActive {
-  cursor: pointer;
-}
-
-.notifActive:hover {
-  cursor: pointer;
-  background-color: #fbe8e8;
-}
-
-.qualificationActive:hover {
-  background-color: #fbe8e8;
-  border: 0px solid #fbe8e8;
-  cursor: pointer;
-}
-
-.qualificationActive:hover .icon {
-  color: #456073;
-}
-
-.qualificationActive:hover .label {
-  color: #456073;
-}
-
-.disabled {
-  cursor: default;
-  background-color: #daebfb;
-  /* color: #1985e8; */
-}
-
-.qualificationZero {
-  cursor: initial;
-  background-color: #ffffff;
-  color: #d1dce8;
-  border: 0px solid #e6edf5;
-}
-
-.qualificationActive {
-  background-color: #fdf2f2;
-  color: #456073;
-  position: relative;
-  border: 0px solid #fdf2f2;
-  overflow: hidden;
-}
-
-.colorDarkGrey {
-  color: #d1dce8;
-}
-
-.colorNoir {
-  color: #456073;
-}
 
-.label {
+  /* Typography */
   font-family: "Open Sans", sans-serif;
   font-size: 15px;
-  font-style: normal;
   font-weight: 600;
   line-height: normal;
 }
 
-.labelDisabled {
-  color: #d1dce8;
-}
-
-.bg-mid-grey {
-  background-color: #728ea7;
-}
-
-.bg-dark-grey {
-  background-color: #456073;
-}
-
-.bg-noir {
-  background-color: #000000;
+.icon {
+  font-size: 20px;
+  line-height: 1;
+  padding-right: 0.15rem;
 }
 
-.bg-pure-white {
-  background-color: #ffffff;
+.label {
+  /* Hérite de la couleur du bouton parent */
 }
 
-.bg-light-red {
-  background-color: #fdf2f2;
-}
+/* ===========================================
+   NOTIFICATION STATES
+   =========================================== */
 
-.bg-light-blue {
+/* Notification Zero: disabled, bleu */
+.notificationZero {
   background-color: #daebfb;
+  color: #1985e8;
+  cursor: default;
 }
 
-.bg-dark-green {
-  background-color: #29a36a;
-}
-
-.bg-grey-venom {
-  background-color: #e6edf5;
-}
-
-.bg-grey-light {
-  background-color: #f6fcfe;
+/* Notification Active: rouge, cliquable */
+.notificationActive {
+  background-color: #fdf2f2;
+  color: #e15151;
+  cursor: pointer;
 }
 
-.color-grey-light {
-  color: #f6fcfe;
+.notificationActive:hover {
+  background-color: #fbe8e8;
 }
 
-.color-mid-grey {
-  color: #728ea7;
-}
+/* ===========================================
+   QUALIFICATION STATES
+   =========================================== */
 
-.color-dark-grey {
-  color: #456073;
-}
-
-.color-noir {
-  color: #000000;
+/* Qualification Zero: rouge, cliquable */
+.qualificationZero {
+  background-color: #fdf2f2;
+  color: #e15151;
+  cursor: pointer;
 }
 
-.color-pure-white {
-  color: #ffffff;
+.qualificationZero:hover {
+  background-color: #fbe8e8;
 }
 
-.color-red {
+/* Qualification Active: rouge, cliquable + effet shiny */
+.qualificationActive {
+  background-color: #fdf2f2;
   color: #e15151;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
 }
 
-.color-green {
-  color: #29a36a;
+.qualificationActive:hover {
+  background-color: #fbe8e8;
 }
 
-.color-blue {
-  color: #1985e8;
-}
+/* ===========================================
+   SHINY EFFECT (qualification active uniquement)
+   =========================================== */
 
-.icon {
-  font-size: 20px;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  padding-right: 0.15rem;
+.qualificationActive::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    120deg,
+    transparent,
+    rgba(225, 81, 81, 0.4),
+    transparent
+  );
+  animation: shine 5s ease-in-out infinite;
 }
 
-@keyframes rotateReflection {
-  from {
-    transform: rotate(0deg);
+@keyframes shine {
+  0% {
+    left: -100%;
+  }
+  13% {
+    left: 100%;
   }
-  to {
-    transform: rotate(360deg);
+  100% {
+    left: 100%;
   }
 }

package/dist/components/atoms/buttons/InboxButton.stories.d.ts

@@ -2,75 +2,67 @@ declare namespace _default {
     export let title: string;
     export { InboxButton as component };
     export let tags: string[];
-    export let argTypes: {
-        count: {
-            control: {
-                type: string;
-            };
-            description: string;
-            defaultValue: number;
-        };
-        "labels.none": {
-            control: {
-                type: string;
-            };
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        "labels.one": {
-            control: {
-                type: string;
-            };
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        "labels.multiple": {
-            control: {
-                type: string;
-            };
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        scheme: {
-            control: {
-                type: string;
-                options: string[];
-            };
-            description: string;
-        };
-        iconClassName: {
-            control: {
-                type: string;
-            };
-            description: string;
-        };
-        iconAriaLabel: {
-            control: {
-                type: string;
-            };
-            description: string;
-        };
-        onClick: {
-            action: string;
-        };
-    };
+    export namespace argTypes {
+        namespace labels {
+            let control: string;
+            let description: string;
+        }
+        namespace count {
+            export namespace control_1 {
+                let type: string;
+            }
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+            export let defaultValue: number;
+        }
+        namespace scheme {
+            export namespace control_2 {
+                let type_1: string;
+                export { type_1 as type };
+                export let options: string[];
+            }
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        namespace iconClassName {
+            export namespace control_3 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 as description };
+        }
+        namespace iconAriaLabel {
+            export namespace control_4 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        namespace onClick {
+            let action: string;
+        }
+    }
     export namespace parameters {
         namespace docs {
-            namespace description {
+            export namespace description_5 {
                 let component: string;
             }
+            export { description_5 as description };
         }
     }
 }
 export default _default;
-export const AucuneNotification: any;
-export const UneNotification: any;
-export const PlusieursNotifications: any;
-export const ClientQualifications: any;
+export const NotificationZero: any;
+export const NotificationOne: any;
+export const NotificationMultiple: any;
+export const QualificationZero: any;
+export const QualificationOne: any;
+export const QualificationMultiple: any;
+export const SansIcone: any;
 import InboxButton from "./InboxButton";

package/dist/components/atoms/buttons/InboxButton.stories.js

@@ -17,95 +17,127 @@ export default {
     component: InboxButton,
     tags: ["autodocs"],
     argTypes: {
+        labels: {
+            control: "object",
+            description: "Textes à afficher selon le count",
+        },
         count: {
             control: { type: "number" },
-            description: "Nombre d’éléments à traiter",
+            description: "Nombre d'éléments à traiter",
             defaultValue: 0,
         },
-        "labels.none": {
-            control: { type: "text" },
-            description: "Texte affiché si count === 0",
-            table: { category: "labels" },
-        },
-        "labels.one": {
-            control: { type: "text" },
-            description: "Texte affiché si count === 1",
-            table: { category: "labels" },
-        },
-        "labels.multiple": {
-            control: { type: "text" },
-            description: "Texte affiché si count > 1 (utiliser {{count}})",
-            table: { category: "labels" },
-        },
         scheme: {
             control: { type: "select", options: ["notification", "qualification"] },
-            description: "Thème de couleur du bouton",
+            description: "Thème visuel du bouton",
         },
         iconClassName: {
             control: { type: "text" },
-            description: "Classe CSS de l’icône à afficher",
+            description: "Classe CSS de l'icône à afficher",
         },
         iconAriaLabel: {
             control: { type: "text" },
-            description: "Label accessible pour l’icône",
+            description: "Label accessible pour l'icône",
         },
         onClick: { action: "clicked" },
     },
     parameters: {
         docs: {
             description: {
-                component: "Bouton affichant un nombre d’éléments avec style conditionnel en fonction du thème.",
+                component: "Bouton avec compteur dynamique et thèmes visuels configurables pour notifications et qualifications.",
             },
         },
     },
 };
-var Template = function (args) { return (React.createElement("div", { style: { padding: "20px", display: "flex", gap: "20px", flexWrap: "wrap" } },
+var Template = function (args) { return (React.createElement("div", { style: { padding: "20px", maxWidth: "300px" } },
     React.createElement(InboxButton, __assign({}, args)))); };
-export var AucuneNotification = Template.bind({});
-AucuneNotification.args = {
+// ===========================================
+// NOTIFICATION SCHEME
+// ===========================================
+export var NotificationZero = Template.bind({});
+NotificationZero.args = {
     count: 0,
+    scheme: "notification",
     labels: {
-        none: "Aucune demande",
-        one: "1 demande en attente",
-        multiple: "{{count}} demandes en attente",
+        none: "Aucune notification",
+        one: "1 notification",
+        multiple: "{{count}} notifications",
     },
-    scheme: "notification",
     iconClassName: "allaw-icon-inbox",
-    iconAriaLabel: "Inbox",
+    iconAriaLabel: "Notifications",
 };
-export var UneNotification = Template.bind({});
-UneNotification.args = {
+export var NotificationOne = Template.bind({});
+NotificationOne.args = {
     count: 1,
+    scheme: "notification",
     labels: {
-        none: "Aucune demande",
-        one: "1 demande en attente",
-        multiple: "{{count}} demandes en attente",
+        none: "Aucune notification",
+        one: "1 notification",
+        multiple: "{{count}} notifications",
     },
-    scheme: "notification",
     iconClassName: "allaw-icon-inbox",
-    iconAriaLabel: "Inbox",
+    iconAriaLabel: "Notifications",
 };
-export var PlusieursNotifications = Template.bind({});
-PlusieursNotifications.args = {
-    count: 7,
+export var NotificationMultiple = Template.bind({});
+NotificationMultiple.args = {
+    count: 5,
+    scheme: "notification",
     labels: {
-        none: "Aucune demande",
-        one: "1 demande en attente",
-        multiple: "{{count}} demandes en attente",
+        none: "Aucune notification",
+        one: "1 notification",
+        multiple: "{{count}} notifications",
     },
-    scheme: "notification",
     iconClassName: "allaw-icon-inbox",
-    iconAriaLabel: "Inbox",
+    iconAriaLabel: "Notifications",
 };
-export var ClientQualifications = Template.bind({});
-ClientQualifications.args = {
-    count: 5,
+// ===========================================
+// QUALIFICATION SCHEME
+// ===========================================
+export var QualificationZero = Template.bind({});
+QualificationZero.args = {
+    count: 0,
+    scheme: "qualification",
     labels: {
-        none: "Aucune demande",
-        one: "1 demande en attente",
-        multiple: "{{count}} demandes en attente",
+        none: "Aucune qualification",
+        one: "1 contact à qualifier",
+        multiple: "{{count}} contacts à qualifier",
     },
+    iconClassName: "allaw-icon-check-circle",
+    iconAriaLabel: "Qualification",
+};
+export var QualificationOne = Template.bind({});
+QualificationOne.args = {
+    count: 1,
     scheme: "qualification",
+    labels: {
+        none: "Aucune qualification",
+        one: "1 contact à qualifier",
+        multiple: "{{count}} contacts à qualifier",
+    },
     iconClassName: "allaw-icon-check-circle",
-    iconAriaLabel: "Check",
+    iconAriaLabel: "Qualification",
+};
+export var QualificationMultiple = Template.bind({});
+QualificationMultiple.args = {
+    count: 3,
+    scheme: "qualification",
+    labels: {
+        none: "Aucune qualification",
+        one: "1 contact à qualifier",
+        multiple: "{{count}} contacts à qualifier",
+    },
+    iconClassName: "allaw-icon-check-circle",
+    iconAriaLabel: "Qualification",
+};
+// ===========================================
+// SANS ICÔNE
+// ===========================================
+export var SansIcone = Template.bind({});
+SansIcone.args = {
+    count: 2,
+    scheme: "qualification",
+    labels: {
+        none: "Aucun élément",
+        one: "1 élément",
+        multiple: "{{count}} éléments",
+    },
 };

package/dist/components/atoms/typography/TinyInfo.css

@@ -11,17 +11,20 @@
 
 /* Classes d'alignement */
 .tiny-info.left {
-  justify-self: flex-start;
+  width: 100%;
+  justify-content: flex-start;
   text-align: left;
 }
 
 .tiny-info.center {
-  justify-self: center;
+  width: 100%;
+  justify-content: center;
   text-align: center;
 }
 
 .tiny-info.right {
-  justify-self: flex-end;
+  width: 100%;
+  justify-content: flex-end;
   text-align: right;
 }
 

package/dist/components/molecules/modal/Modal.js

@@ -86,20 +86,27 @@ var Modal = function (_a) {
     };
     var renderModalContent = function () {
         return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: style.modalHeadingWrapper },
-                React.createElement(Heading, { text: title, variant: "h4", color: "noir", align: "left" })),
-            React.createElement("div", { className: style.modalParagraphWrapper },
-                React.createElement(Paragraph, { text: description, variant: "medium", size: "default", className: style.modalParagraph })),
-            renderContent && (React.createElement("div", { className: style.modalCustomWrapper }, renderContent({ isOpen: show, onClose: onCancel }))),
-            !renderContent && customContent && (React.createElement("div", { className: style.modalCustomWrapper },
-                React.createElement(customContent.component, __assign({}, (customContent.props || {}))))),
-            !renderContent && !customContent && children && (React.createElement("div", { className: style.modalCustomWrapper }, children)),
-            !renderContent &&
-                !customContent &&
-                !children &&
-                imageConfig &&
-                !imgError && (React.createElement("div", { className: "".concat(style.modalImageWrapper, " ").concat(imageConfig.className || ""), style: __assign({ padding: imageConfig.padding }, imageConfig.style) },
-                React.createElement("img", { src: imageConfig.url, alt: imageConfig.alt || "", width: imageConfig.width, height: imageConfig.height, onError: handleImageError, className: style.modalImage })))));
+            React.createElement("header", { className: style.modalHeader },
+                React.createElement("div", { className: style.modalHeadingWrapper },
+                    React.createElement(Heading, { text: title, variant: "h4", color: "noir", align: "left" })),
+                React.createElement("button", { className: style.modalCloseButton, onClick: onCancel, "aria-label": "Fermer", type: "button" },
+                    React.createElement("span", { className: style.modalCloseIcon }, "\u00D7"))),
+            React.createElement("section", { className: style.modalBody },
+                React.createElement("div", { className: style.modalParagraphWrapper },
+                    React.createElement(Paragraph, { text: description, variant: "medium", size: "default", className: style.modalParagraph })),
+                renderContent && (React.createElement("div", { className: style.modalCustomWrapper }, renderContent({ isOpen: show, onClose: onCancel }))),
+                !renderContent && customContent && (React.createElement("div", { className: style.modalCustomWrapper },
+                    React.createElement(customContent.component, __assign({}, (customContent.props || {}))))),
+                !renderContent && !customContent && children && (React.createElement("div", { className: style.modalCustomWrapper }, children)),
+                !renderContent &&
+                    !customContent &&
+                    !children &&
+                    imageConfig &&
+                    !imgError && (React.createElement("div", { className: "".concat(style.modalImageWrapper, " ").concat(imageConfig.className || ""), style: __assign({ padding: imageConfig.padding }, imageConfig.style) },
+                    React.createElement("img", { src: imageConfig.url, alt: imageConfig.alt || "", width: imageConfig.width, height: imageConfig.height, onError: handleImageError, className: style.modalImage })))),
+            React.createElement("footer", { className: style.modalFooter },
+                cancelLabel && (React.createElement(SecondaryButton, { label: cancelLabel, onClick: onCancel, startIconName: "allaw-icon-close", startIcon: true })),
+                React.createElement(PrimaryButton, { label: confirmLabel, variant: isDanger ? "warning" : "default", onClick: onConfirm, startIconName: confirmIconName, startIcon: true }))));
     };
     // Générer les styles pour la largeur maximale responsive
     var getMaxWidthStyles = function () {
@@ -203,11 +210,7 @@ var Modal = function (_a) {
                 ? "".concat(horizontalOffset.right, "px")
                 : undefined,
         } },
-        React.createElement("div", { className: "".concat(style.modalContent, " ").concat(show ? style.modal : "", " ").concat(getMaxWidthClasses(), " ").concat(getDynamicModalClass()), ref: modalContentRef, style: __assign({}, getMaxWidthStyles()) },
-            renderModalContent(),
-            React.createElement("div", { className: style.modalButtons },
-                cancelLabel && (React.createElement(SecondaryButton, { label: cancelLabel, onClick: onCancel, startIconName: "allaw-icon-close", startIcon: true })),
-                React.createElement(PrimaryButton, { label: confirmLabel, variant: isDanger ? "warning" : "default", onClick: onConfirm, startIconName: confirmIconName, startIcon: true })))));
+        React.createElement("div", { className: "".concat(style.modalContent, " ").concat(show ? style.modal : "", " ").concat(getMaxWidthClasses(), " ").concat(getDynamicModalClass()), ref: modalContentRef, style: __assign({}, getMaxWidthStyles()) }, renderModalContent())));
     return ReactDOM.createPortal(modalContent, portalContainerRef.current);
 };
 export default Modal;

package/dist/components/molecules/modal/Modal.module.css

@@ -254,30 +254,89 @@
 .modalContent {
   background: #fff;
   border-radius: 16px;
-  padding: 2rem;
   max-width: 500px;
   width: 90%;
   animation: fadeIn 0.2s ease-out;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  max-height: 90vh;
+  max-height: calc(100vh - 120px);
   display: flex;
   flex-direction: column;
 }
 
+.modalHeader {
+  flex-shrink: 0;
+  padding: 2rem 2rem 0 2rem;
+  background: #fff;
+  border-radius: 16px 16px 0 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
 .modalHeadingWrapper {
-  margin-bottom: 1.5rem;
+  flex: 1;
   display: flex;
   justify-content: start;
 }
 
-.modalParagraphWrapper {
-  margin-bottom: 2.5rem;
+.modalCloseButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  margin: -0.25rem -0.25rem -0.25rem 0;
+  border-radius: 0.375rem;
+  transition: background-color 0.2s ease;
+  flex-shrink: 0;
+}
+
+.modalCloseButton:hover {
+  background-color: #f3f4f6;
+}
+
+.modalCloseIcon {
+  font-size: 1.5rem;
+  line-height: 1;
+  color: #6b7280;
+  font-weight: 300;
+  display: block;
+  width: 24px;
+  height: 24px;
+  text-align: center;
+}
+
+.modalBody {
+  flex: 1;
   overflow-y: auto;
+  padding: 1.5rem 2rem;
+}
+
+.modalBody::-webkit-scrollbar {
+  width: 8px;
+}
+
+.modalBody::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.modalBody::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+
+.modalBody::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+.modalParagraphWrapper {
+  margin-bottom: 1rem;
 }
 
 .modalImageWrapper {
   text-align: center;
-  margin: 0 0 2.5rem 0;
+  margin: 1rem 0;
 }
 
 .modalImage {
@@ -288,18 +347,40 @@
 
 .modalCustomWrapper {
   width: 100%;
-  margin-bottom: 2.5rem;
+  margin-top: 1rem;
 }
 
 .modalParagraph {
   text-align: left;
 }
 
+.modalFooter {
+  flex-shrink: 0;
+  padding: 0 2rem 2rem 2rem;
+  background: #fff;
+  border-radius: 0 0 16px 16px;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.modalFooter button {
+  flex: 1;
+}
+
+.modalFooter button:only-child {
+  width: 100%;
+}
+
+/* Deprecated - gardé pour backward compatibility */
 .modalButtons {
+  flex-shrink: 0;
+  padding: 0 2rem 2rem 2rem;
+  background: #fff;
+  border-radius: 0 0 16px 16px;
   display: flex;
   justify-content: space-between;
   gap: 16px;
-  margin-top: auto;
 }
 
 .modalButtons button {
@@ -322,7 +403,6 @@
     position: fixed;
     bottom: 0;
     justify-content: flex-start;
-    padding: 2rem;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     max-height: none;
@@ -330,6 +410,21 @@
     max-width: 100%;
   }
 
+  .modalHeader {
+    padding: 1.5rem 2rem 0 2rem;
+    border-radius: 0;
+  }
+
+  .modalBody {
+    padding: 1rem 2rem;
+  }
+
+  .modalFooter,
+  .modalButtons {
+    padding: 0 2rem 1.5rem 2rem;
+    border-radius: 0;
+  }
+
   .modalOverlay {
     padding-top: 0 !important;
     padding-bottom: 0 !important;

package/dist/components/molecules/modal/Modal.stories.d.ts

@@ -123,4 +123,6 @@ export const WithLargeContentAndMaxWidth: any;
 export const WithCustomBreakpoints: any;
 export const WithManyBreakpoints: any;
 export const WithMixedUnitsBreakpoints: any;
+export const WithScrollableContent: any;
+export const WithScrollableContentMobile: any;
 import Modal from "./Modal";

package/dist/components/molecules/modal/Modal.stories.js

@@ -307,3 +307,67 @@ WithMixedUnitsBreakpoints.args = __assign(__assign({}, Default.args), { title: "
             { breakpoint: 1200, maxWidth: 900 },
         ],
     } });
+// Nouvelle story pour tester le scroll avec header/footer fixes
+export var WithScrollableContent = Template.bind({});
+WithScrollableContent.args = {
+    show: false,
+    title: "Modal avec contenu scrollable",
+    description: "Cette modal contient beaucoup de contenu pour tester le comportement de scroll. Le header (titre + bouton fermer) et le footer (boutons) doivent rester fixes pendant que seul le corps de la modal défile.",
+    confirmLabel: "Valider",
+    cancelLabel: "Annuler",
+    children: (React.createElement("div", { style: { textAlign: "left" } },
+        React.createElement("h3", { style: { marginBottom: "1rem", color: "#1f2937" } }, "Contenu tr\u00E8s long pour tester le scroll"),
+        Array.from({ length: 20 }, function (_, i) { return (React.createElement("div", { key: i, style: {
+                marginBottom: "1.5rem",
+                padding: "1rem",
+                backgroundColor: i % 2 === 0 ? "#f9fafb" : "#f3f4f6",
+                borderRadius: "0.5rem",
+                border: "1px solid #e5e7eb",
+            } },
+            React.createElement("h4", { style: { margin: "0 0 0.5rem 0", color: "#374151" } },
+                "Section ",
+                i + 1),
+            React.createElement("p", { style: { margin: 0, color: "#6b7280", lineHeight: "1.6" } }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."),
+            i === 5 && (React.createElement("div", { style: {
+                    marginTop: "1rem",
+                    padding: "1rem",
+                    backgroundColor: "#dbeafe",
+                    borderRadius: "0.375rem",
+                    border: "1px solid #93c5fd",
+                } },
+                React.createElement("p", { style: { margin: 0, fontSize: "0.875rem", color: "#1e40af" } },
+                    "\uD83D\uDCA1 ",
+                    React.createElement("strong", null, "Note importante :"),
+                    " Pendant que vous scrollez ce contenu, v\u00E9rifiez que le titre en haut et les boutons en bas restent toujours visibles et fixes."))),
+            i === 10 && (React.createElement("div", { style: {
+                    marginTop: "1rem",
+                    padding: "1rem",
+                    backgroundColor: "#ecfdf5",
+                    borderRadius: "0.375rem",
+                    border: "1px solid #86efac",
+                } },
+                React.createElement("p", { style: { margin: 0, fontSize: "0.875rem", color: "#047857" } },
+                    "\u2705 ",
+                    React.createElement("strong", null, "Test r\u00E9ussi :"),
+                    " Si vous voyez ce message au milieu du scroll, l'architecture header/body/footer fonctionne correctement !"))))); }),
+        React.createElement("div", { style: {
+                padding: "1.5rem",
+                backgroundColor: "#fef2f2",
+                borderRadius: "0.5rem",
+                border: "2px solid #fecaca",
+                textAlign: "center",
+            } },
+            React.createElement("h4", { style: { margin: "0 0 1rem 0", color: "#dc2626" } }, "\uD83C\uDFAF Fin du contenu scrollable"),
+            React.createElement("p", { style: { margin: 0, color: "#991b1b", fontSize: "0.875rem" } }, "Vous avez atteint la fin du contenu. Les boutons Annuler/Valider doivent toujours \u00EAtre visibles en bas de la modal.")))),
+};
+// Story pour tester sur viewport mobile restreint
+export var WithScrollableContentMobile = Template.bind({});
+WithScrollableContentMobile.args = __assign(__assign({}, WithScrollableContent.args), { title: "Test mobile - Scroll fixe", description: "Version optimisée pour tester le comportement sur écrans mobiles avec hauteur réduite." });
+WithScrollableContentMobile.parameters = {
+    viewport: {
+        defaultViewport: "mobile1",
+    },
+    backgrounds: {
+        default: "light",
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "3.7.2",
+  "version": "3.7.4",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",