diff --git a/css/alerte.css b/css/alerte.css
index d7d2b2a..df25c37 100644
--- a/css/alerte.css
+++ b/css/alerte.css
@@ -1,65 +1,56 @@
-/* styles.css */
+/*
+ * @file            css/alerte.css
+ * @description     
+ * @author          mougnibas <mougnibas@insa-toulouse.fr>
+ * @createTime      2024-11-29 10:35:07
+ * @lastModified    2024-12-15 18:53:32
+ * Copyright ©Théo Mougnibas All rights reserved
+*/
 
-/* Modal styles */
+/* Le conteneur de l'alerte, va couvrir tout l'écran*/
 .modal {
-    display: none; /* Hidden by default */
-    position: fixed; /* Fixed in place */
-    z-index: 1; /* On top of everything */
-    left: 0;
-    top: 0;
-    width: 100%; /* Full width */
-    height: 100%; /* Full height */
-    background-color: rgba(0, 0, 0, 0.4); /* Black background with transparency */
-  }
+  display: none; /* on la cache par défaut */
+  position: fixed; 
+  z-index: 1; /* BAM ! AU DESSUS DE TOUT */
+  left: 0;
+  top: 0;
+  width: 100%; 
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4); /* On floute le derrière */
+}
   
-  /* Modal content box */
-  .modal-content {
-    background-color: #fefefe;
-    margin: 15% auto; /* Center the modal */
-    padding: 20px;
-    border: 1px solid #888;
-    width: 80%; /* Width of the modal */
-    max-width: 400px;
-    text-align: center;
-  }
+/* Contenu de l'alerte */
+.modal-content {
+  background-color: #fefefe;
+  margin: 15% auto; /* on le centre */
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+  max-width: 400px;
+  text-align: center;
+}
   
-  /* Close button */
-  .close-btn {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-  }
-  
-  .close-btn:hover,
-  .close-btn:focus {
-    color: black;
-    text-decoration: none;
-    cursor: pointer;
-  }
-  
-  /* Button inside modal */
-  .modal.button {
-    padding: 10px 20px;
-    background-color: #4CAF50;
-    color: white;
-    border: none;
-    cursor: pointer;
-  }
-  
-  .modal:hover {
-    background-color: #45a049;
-  }
-  
-  /* Styling for the main button */
-  .modal.button.show-alert-btn {
-    padding: 10px 20px;
-    background-color: #008CBA;
-    color: white;
-    border: none;
-    cursor: pointer;
-  }
-  
-  .modal.button.show-alert-btn:hover {
-    background-color: #007b9e;
-  }
\ No newline at end of file
+/* Bouton pour fermer l'alerte */
+.close-btn {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close-btn:hover,
+.close-btn:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* Bouton OK */
+.modal.button {
+  padding: 10px 20px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
diff --git a/css/alerte/a1.css b/css/alerte/a1.css
new file mode 100644
index 0000000..4eec347
--- /dev/null
+++ b/css/alerte/a1.css
@@ -0,0 +1,32 @@
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #ccc; /* Gris uni */
+}
+
+.modal-content {
+    background-color: white;
+    margin: 15% auto;
+    padding: 10px;
+    border: 2px solid black; /* Bordures noires bien visibles */
+    width: 40vw;
+    text-align: left; /* Alignement à gauche */
+    font-family: Arial, sans-serif; /* Typo basique */
+}
+
+.close-btn {
+    color: black;
+    font-size: 18px;
+}
+
+.modal.button {
+    padding: 5px 10px;
+    background-color: #008CBA; /* Bleu très simple */
+    color: white;
+}
+  
\ No newline at end of file
diff --git a/css/alerte/a2.css b/css/alerte/a2.css
new file mode 100644
index 0000000..0c25b81
--- /dev/null
+++ b/css/alerte/a2.css
@@ -0,0 +1,39 @@
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #ccc; /* Gris uni */
+}
+
+.modal-content {
+  background-color: white;
+  margin: 15% auto;
+  padding: 10px;
+  border: 2px solid black; /* Bordures noires bien visibles */
+  width: 40vw;
+  text-align: left; /* Alignement à gauche */
+  font-family: Arial, sans-serif; /* Typo basique */
+  border-radius: 5px; /* Bordures légèrement arrondies */
+  border: 1px solid gray;
+}
+
+.close-btn {
+  color: black;
+  font-size: 18px;
+}
+
+.modal.button {
+  padding: 5px 10px;
+  background-color: #008CBA; /* Bleu très simple */
+  color: white;
+}
+
+.close-btn:hover,
+.close-btn:focus {
+  color: red; /* Rouge pour attirer l’attention */
+}
+  
\ No newline at end of file
diff --git a/css/alerte/a3.css b/css/alerte/a3.css
new file mode 100644
index 0000000..cfec72c
--- /dev/null
+++ b/css/alerte/a3.css
@@ -0,0 +1,39 @@
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: url('background.jpg') repeat; /* Texture kitsch */
+}
+
+.modal-content {
+  background-color: white;
+  margin: 15% auto;
+  padding: 10px;
+  width: 40vw;
+  text-align: left; /* Alignement à gauche */
+  border-radius: 5px; /* Bordures légèrement arrondies */
+  border: 1px solid gray;
+  font-family: "Comic Sans MS", cursive; /* Typo iconique des années 2000 */
+  background-color: pink; /* Couleurs flashy */
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* Ombres portées pour effet "pop" */
+}
+
+.close-btn {
+  color: black;
+  font-size: 18px;
+}
+
+.modal.button {
+  padding: 5px 10px;
+  background-color: #ff69b4; /* Rose bonbon */
+  font-weight: bold;}
+
+.close-btn:hover,
+.close-btn:focus {
+  color: red; /* Rouge pour attirer l’attention */
+}
+  
\ No newline at end of file
diff --git a/css/alerte/a4.css b/css/alerte/a4.css
new file mode 100644
index 0000000..cc75592
--- /dev/null
+++ b/css/alerte/a4.css
@@ -0,0 +1,44 @@
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: url('../../img/tecktonik.jpeg') repeat; /* Texture kitsch */
+}
+@font-face {
+  font-family: "Comic Sans MS";
+  src: url("../font/comic-sans.woff") format("woff");
+}
+.modal-content {
+  margin: 15% auto;
+  padding: 10px;
+  width: 40vw;
+  text-align: left; /* Alignement à gauche */
+  font-family:"Comic Sans MS"; /* Typo iconique des années 2000 */
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); /* Ombres portées pour effet "pop" */
+  background: linear-gradient(to bottom, #ffffff, #e0e0e0); /* Dégradé élégant */
+  border: none;
+  border-radius: 10px;
+  color:purple;
+}
+
+.close-btn {
+  color: black;
+  font-size: 18px;
+}
+
+.modal.button {
+  padding: 5px 10px;
+  background-color: #ff69b4; /* Rose bonbon */
+  font-weight: bold;
+  border-radius: 0px !important;
+}
+
+.close-btn:hover,
+.close-btn:focus {
+  color: red; /* Rouge pour attirer l’attention */
+}
+  
\ No newline at end of file
diff --git a/css/alerte/a5.css b/css/alerte/a5.css
new file mode 100644
index 0000000..64a667c
--- /dev/null
+++ b/css/alerte/a5.css
@@ -0,0 +1,37 @@
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.modal-content {
+  margin: 15% auto;
+  padding: 10px;
+  width: 40vw;
+  text-align: left; /* Alignement à gauche */
+  background-color: white;
+  border: 2px solid #4caf50; /* Vert plat */
+  box-shadow: none;
+}
+
+.close-btn {
+  color: black;
+  font-size: 18px;
+}
+
+.modal.button {
+  background-color: #4caf50;
+  color: white;
+  border-radius: 3px;
+  border: none;
+}
+
+.close-btn:hover,
+.close-btn:focus {
+  color: red; /* Rouge pour attirer l’attention */
+}
+  
\ No newline at end of file
diff --git a/css/alerte/a6.css b/css/alerte/a6.css
new file mode 100644
index 0000000..128b8ef
--- /dev/null
+++ b/css/alerte/a6.css
@@ -0,0 +1,41 @@
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.modal-content {
+  margin: 15% auto;
+  padding: 10px;
+  width: 40vw;
+  background-color: white;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Ombres douces */
+  border-radius: 4px;
+}
+
+.close-btn {
+  color: black;
+  font-size: 18px;
+}
+
+.modal.button {
+  background-color: #4caf50;
+  color: white;
+  border-radius: 3px;
+  border: none;
+  transition: background-color 0.3s ease;
+}
+
+.modal.button:hover {
+  background-color: #45a049; /* Vert plus sombre au survol */
+}
+
+.close-btn:hover,
+.close-btn:focus {
+  color: red; /* Rouge pour attirer l’attention */
+}
+  
\ No newline at end of file
diff --git a/css/alerte/a7.css b/css/alerte/a7.css
new file mode 100644
index 0000000..7c8fb43
--- /dev/null
+++ b/css/alerte/a7.css
@@ -0,0 +1,41 @@
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8); /* Fond plus sombre */
+}
+
+.modal-content {
+  margin: 15% auto;
+  padding: 10px;
+  width: 40vw;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Ombres douces */
+  background-color: #1e1e1e; /* Fond sombre */
+  color: #ffffff;
+  border: 1px solid #444444;
+  border-radius: 4px;
+}
+
+
+.close-btn {
+  color: black;
+  font-size: 18px;
+}
+
+.modal.button {
+  border-radius: 3px;
+  border: none;
+  background-color: #bb86fc; /* Couleur violet pastel */
+  color: #000;
+}
+
+
+.close-btn:hover,
+.close-btn:focus {
+  color: red; /* Rouge pour attirer l’attention */
+}
+  
\ No newline at end of file
diff --git a/css/alerte/a8.css b/css/alerte/a8.css
new file mode 100644
index 0000000..30b4eae
--- /dev/null
+++ b/css/alerte/a8.css
@@ -0,0 +1,40 @@
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8); /* Fond plus sombre */
+}
+
+.modal-content {
+  margin: 15% auto;
+  padding: 10px;
+  width: 40vw;
+  background-color: #ffdb00; /* Jaune vif */
+  color: #000;
+  border: 4px solid #000; /* Bordures audacieuses */
+  font-family: "Arial Black", sans-serif;
+}
+
+
+.close-btn {
+  color: black;
+  font-size: 18px;
+}
+
+.modal.button {
+  border-radius: 3px;
+  border: none;
+  background-color: #e63946; /* Rouge frappant */
+  font-size: 18px;
+}
+
+
+.close-btn:hover,
+.close-btn:focus {
+  color: red; /* Rouge pour attirer l’attention */
+}
+  
\ No newline at end of file
diff --git a/css/alerte/a9.css b/css/alerte/a9.css
new file mode 100644
index 0000000..e3941b3
--- /dev/null
+++ b/css/alerte/a9.css
@@ -0,0 +1,33 @@
+.modal {
+  background: linear-gradient(135deg, #1f1c2c, #928dab); /* Dégradé futuriste */
+  backdrop-filter: blur(10px); /* Flou pour un effet sophistiqué */
+}
+
+.modal-content {
+  background: radial-gradient(circle, #222, #000);
+  color: #fff;
+  border-radius: 20px;
+  border: none;
+  width: 40vw;
+  box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.5); /* Ombres intenses */
+  transform: perspective(1000px) rotateX(5deg); /* Effet 3D */
+}
+
+.modal.button {
+  background: linear-gradient(45deg, #ff6f91, #ffc371); /* Dégradé dynamique */
+  font-size: 20px;
+  border-radius: 50px;
+  animation: pulse 1.5s infinite; /* Animation d’impulsion */
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
diff --git a/css/font/comic-sans.woff b/css/font/comic-sans.woff
new file mode 100644
index 0000000..d377892
Binary files /dev/null and b/css/font/comic-sans.woff differ
diff --git a/css/t4.css b/css/t4.css
index b45c4d6..f73ffd4 100644
--- a/css/t4.css
+++ b/css/t4.css
@@ -1,6 +1,13 @@
-/* t4.css - HTML 3.2 */
+/*
+ * @file            css/t4.css
+ * @description     
+ * @author          mougnibas <mougnibas@insa-toulouse.fr>
+ * @createTime      2024-11-21 11:51:17
+ * @lastModified    2024-12-15 20:38:31
+ * Copyright ©Théo Mougnibas All rights reserved
+*/
+
 body {
-    font-family: 'Arial', sans-serif;
     background-color: #ecf0f1;
     color: #ddd;
     margin: 0;
diff --git a/img/tecktonik.jpeg b/img/tecktonik.jpeg
new file mode 100644
index 0000000..86a7d3f
Binary files /dev/null and b/img/tecktonik.jpeg differ
diff --git a/index.html b/index.html
index 2fa246b..01d5491 100755
--- a/index.html
+++ b/index.html
@@ -6,8 +6,8 @@
     <title>Prog Web Legend</title>
     <script> alert("click")</script>
     <link rel="stylesheet" href="" id="link-css">
-    <link rel="stylesheet" href="./css/alerte.css">
     <link rel="stylesheet" href="./css/index.css">
+    <link rel="stylesheet" href="./css/alerte/a1.css" id="alerte-css">
 
 </head>
 <body>
diff --git a/js/main.js b/js/main.js
index 7bbf663..a80ede7 100644
--- a/js/main.js
+++ b/js/main.js
@@ -57,6 +57,11 @@ async function remplirMagasinTechnologies(){
 
                 // ne laisse acheter que si on a l'argent
                 if(score >= t.cout){
+
+
+                    // incrémente le score implicite d'evolution pour permettre à la prochaine amelioration de s'afficher
+                    evolution_tech += 1
+                    
                     // on améliore le style de la page :)
                     t.appliquerAmeliorationStyle()
                         
@@ -71,6 +76,7 @@ async function remplirMagasinTechnologies(){
                     magasin_tech = {}
                     remplirMagasinTechnologies()
 
+
                     // finalement, on lui débit son compte de points tel un vendeur de voitures
                     score -= t.cout
                     const score_aff = document.getElementById("score_affichage")
@@ -86,8 +92,6 @@ async function remplirMagasinTechnologies(){
                         boost += t.boost
                     }
 
-                    // incrémente le score implicite d'evolution pour permettre à la prochaine amelioration de s'afficher
-                    evolution_tech += 1
                 }else{
                     // PAS ASSEZ RICHE !!!!!
                     ouvrirAlerte("PAS ASSEZ RICHE !!!!!!!!!!!!")
diff --git a/js/technologie.js b/js/technologie.js
index 682402a..054f1e5 100644
--- a/js/technologie.js
+++ b/js/technologie.js
@@ -7,6 +7,7 @@ class Technologie{
     }
 
     appliquerAmeliorationStyle(){
+        document.getElementById("alerte-css").setAttribute("href","css/alerte/a"+evolution_tech+".css")
         document.getElementById("link-css").setAttribute("href","css/"+this.props.css_id)
     }
 
diff --git a/lisezmoi.md b/lisezmoi.md
index d8efe8c..25f88ce 100755
--- a/lisezmoi.md
+++ b/lisezmoi.md
@@ -38,10 +38,8 @@ XHTML5
 
 ## TOUDOU
 - rajouter dans le html des elements invisibles qui pop petit à petit et s'améliorent
-- mettre des animations au premier achat d'un personnage
 - mettre des animations quand le score change de milier ( feu d'artifice ?)
 - vidéos
-- arreter de fetch quand on instancie une classe et passer le dict en argument direct
 - ne faire apparaitre les header du tableau qu'au premier clic
 - faire une fonction qui en fonction de la puissance de 10 troncature le nb et met "milions", "quintilions"...
 - mettre un palier où des photos aparaissent à coté de chaque collegue dans le magasin