From d61a42d24b9abb9e00854a27dc332af990355404 Mon Sep 17 00:00:00 2001
From: thaaoblues <thaaoblues81@gmail.com>
Date: Tue, 31 Dec 2024 16:45:36 +0100
Subject: [PATCH] le bo css

---
 css/alerte/a9.css | 38 ++++++++++++++++++++++++++++++--------
 index.html        |  4 ++--
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/css/alerte/a9.css b/css/alerte/a9.css
index ff2ac24..8e1cbed 100644
--- a/css/alerte/a9.css
+++ b/css/alerte/a9.css
@@ -1,23 +1,45 @@
 .modal {
-  background: linear-gradient(135deg, #1f1c2c, #928dab); /* Dégradé futuriste */
-  backdrop-filter: blur(10px); /* Flou pour un effet sophistiqué */
+  background: linear-gradient(135deg, #1f1c2c, #928dab); /* Futuristic gradient */
+  backdrop-filter: blur(10px); /* Sophisticated blur effect */
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
 }
 
 .modal-content {
-  background: radial-gradient(circle, #222, #000);
+  margin-top: 20vh;
+  background: radial-gradient(circle, #222, #000); /* Dark radial gradient */
   color: #fff;
   border-radius: 20px;
   border: none;
+  box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.5); /* Intense shadows */
+  transform: perspective(1000px) rotateX(5deg); /* 3D tilt effect */
+  padding: 20px;
   width: 40vw;
-  box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.5); /* Ombres intenses */
-  transform: perspective(1000px) rotateX(5deg); /* Effet 3D */
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.modal.button {
-  background: linear-gradient(45deg, #ff6f91, #ffc371); /* Dégradé dynamique */
+.bouton-ok {
+  background: linear-gradient(45deg, #ff6f91, #ffc371); /* Dynamic gradient */ 
   font-size: 20px;
+  color: white;
+  border: none;
   border-radius: 50px;
-  animation: pulse 1.5s infinite; /* Animation d’impulsion */
+  padding: 15px 30px;
+  cursor: pointer;
+  animation: pulse 1.5s infinite; /* Pulse animation */
+  transition: transform 0.3s ease;
+}
+
+.bouton-ok:hover {
+  transform: scale(1.2) ; /* Slightly larger on hover */
+  background-color: rebeccapurple;
 }
 
 @keyframes pulse {
diff --git a/index.html b/index.html
index 42ffd1d..be5d68d 100644
--- a/index.html
+++ b/index.html
@@ -62,7 +62,7 @@
 
 
     <!-- Custom Alert Modal -->
-    <div id="alerte_jolie" class="modal">
+    <div id="alerte_jolie" class="modal div-centrer-contenu">
         <div class="modal-content">
         <span class="close-btn" onclick="fermerAlerte()">&times;</span>
         <p id="message_alerte_jolie"></p>
@@ -70,7 +70,7 @@
         <div class="div-centrer-contenu">
             <input type="text" id="input_alerte_jolie">
         
-            <button onclick="fermerAlerte()">OK</button>
+            <button class="bouton-ok" onclick="fermerAlerte()">OK</button>
         </div>
 
         </div>