diff --git a/mailbanner.html b/mailbanner.html
new file mode 100644
index 0000000..b9f169e
--- /dev/null
+++ b/mailbanner.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RépliQ - Générateur de bannière e-mail</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            text-align: center;
+        }
+        .banner {
+            padding: 10px;
+            font-weight: bold;
+            margin-top: 20px;
+            border-radius: 5px;
+            display: inline-block;
+            width: auto;
+            min-width: 250px;
+            text-align: center;
+        }
+        .output-container {
+            margin-top: 20px;
+        }
+        .copy-btn {
+            margin-top: 10px;
+            padding: 8px 15px;
+            font-size: 14px;
+            cursor: pointer;
+            border: none;
+            background-color: #0078D7;
+            color: white;
+            border-radius: 5px;
+        }
+        .copy-btn:hover {
+            background-color: #005A9E;
+        }
+        #hiddenContainer {
+            position: absolute;
+            left: -9999px;
+            top: -9999px;
+        }
+    </style>
+</head>
+<body>
+    <h2>RépliQ - Générateur de bannière e-mail</h2>
+    <label for="action">Demander une :</label>
+    <select id="action">
+        <option value="Lecture">Lecture</option>
+        <option value="Action">Action</option>
+        <option value="Réponse">Réponse</option>
+    </select>
+    <br><br>
+    <label for="date">Date limite :</label>
+    <input type="date" id="date">
+    <br><br>
+    <button onclick="generateBanner()">Générer</button>
+    <button onclick="setASAP()">ASAP</button>
+
+    <div class="output-container">
+        <div id="result" class="banner" style="display: none;"></div>
+        <button class="copy-btn" onclick="copyFormattedBanner()" style="display: none;" id="copyButton">Copier le bandeau</button>
+    </div>
+
+    <div id="hiddenContainer"></div>
+
+    <script>
+        function generateBanner() {
+            const action = document.getElementById("action").value;
+            const dateInput = document.getElementById("date").value;
+            const resultDiv = document.getElementById("result");
+            const copyButton = document.getElementById("copyButton");
+            const hiddenContainer = document.getElementById("hiddenContainer");
+
+            if (!dateInput) {
+                alert("Veuillez sélectionner une date ou utiliser le bouton ASAP.");
+                return;
+            }
+
+            const selectedDate = new Date(dateInput);
+            const formattedDate = selectedDate.toLocaleDateString("fr-FR");
+            const today = new Date();
+            const diffTime = selectedDate - today;
+            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+            let bgColor = "#A8E6A3";
+            let textColor = "#206A1E";
+            let message = `${action} souhaitée avant le ${formattedDate}.`;
+
+            if (diffDays <= 3) {
+                bgColor = "#FFD580";
+                textColor = "#A65E00";
+            }
+
+            if (action === "Lecture") {
+                message += "<br>Inutile de répondre.";
+            }
+
+            resultDiv.style.backgroundColor = bgColor;
+            resultDiv.style.color = textColor;
+            resultDiv.innerHTML = message;
+            resultDiv.style.display = "block";
+            copyButton.style.display = "inline-block";
+
+            // Mettre le HTML formaté dans un conteneur caché
+            hiddenContainer.innerHTML = `<div style='background-color: ${bgColor}; color: ${textColor}; padding: 10px; font-weight: bold; border-radius: 5px; display: inline-block; text-align: center;'>${message}</div>`;
+        }
+
+        function setASAP() {
+            const action = document.getElementById("action").value;
+            const resultDiv = document.getElementById("result");
+            const copyButton = document.getElementById("copyButton");
+            const hiddenContainer = document.getElementById("hiddenContainer");
+
+            resultDiv.style.backgroundColor = "#FFA8A8";
+            resultDiv.style.color = "#8B0000";
+            let message = `${action} souhaitée dès que possible.`;
+
+            if (action === "Lecture") {
+                message += "<br>Inutile de répondre.";
+            }
+
+            resultDiv.innerHTML = message;
+            resultDiv.style.display = "block";
+            copyButton.style.display = "inline-block";
+
+            // Mettre le HTML formaté dans un conteneur caché
+            hiddenContainer.innerHTML = `<div style='background-color: #FFA8A8; color: #8B0000; padding: 10px; font-weight: bold; border-radius: 5px; display: inline-block; text-align: center;'>${message}</div>`;
+        }
+
+        function copyFormattedBanner() {
+            const hiddenContainer = document.getElementById("hiddenContainer");
+            const range = document.createRange();
+            range.selectNode(hiddenContainer);
+            window.getSelection().removeAllRanges();
+            window.getSelection().addRange(range);
+            document.execCommand("copy");
+            window.getSelection().removeAllRanges();
+            alert("Bandeau copié ! Collez-le directement dans Outlook.");
+        }
+    </script>
+</body>
+</html>
