diff --git a/css/alerte.css b/css/alerte.css
new file mode 100644
index 0000000..36e273b
--- /dev/null
+++ b/css/alerte.css
@@ -0,0 +1,56 @@
+/*
+ * @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
+*/
+
+/* Le conteneur de l'alerte, va couvrir tout l'écran*/
+.modal {
+  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 */
+}
+  
+/* 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;
+}
+  
+/* 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/index.css b/css/index.css
new file mode 100644
index 0000000..c678c50
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,53 @@
+@keyframes faireTournerImage {
+    0% {
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+    100% {
+        transform: rotate(360deg);
+        opacity: 1;
+    }
+}
+
+#image-collegue-animee {
+    width: auto;
+    height: auto;
+    animation: faireTournerImage 2s linear forwards infinite;
+    z-index: 1;
+}
+
+.div-centrer-contenu{
+    width: 100%;
+    justify-content: center;
+    text-align: center;
+}
+
+
+@keyframes pluieConfetti {
+    0% {
+        transform: translateY(-100px) rotate(0deg);
+        opacity: 1;
+    }
+    100% {
+        transform: translateY(100vh) rotate(720deg);
+        opacity: 0;
+    }
+}
+
+.confetti {
+    position: absolute;
+    width: 10px;
+    height: 20px;
+    animation: pluieConfetti 5s linear infinite;
+    opacity: 0;
+}
+
+.confetti-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    pointer-events: none; /* pour ne pas interagir avec les confettis */
+}
\ No newline at end of file
diff --git a/css/t1.css b/css/t1.css
new file mode 100644
index 0000000..9f0f277
--- /dev/null
+++ b/css/t1.css
@@ -0,0 +1,33 @@
+/* t1.css - HTML */
+body {
+    font-family: Arial, sans-serif;
+    background-color: white;
+    color: black;
+    margin: 500;
+    padding: 20px;
+}
+
+
+
+button {
+    padding: 5px 15px;
+    border: 1px solid #000;
+    background-color: white;
+    cursor: pointer;
+}
+
+
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border: 1px solid #000;
+}
+
+table.table_magasin{
+    width: 150px;
+    padding: 12px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+}
diff --git a/css/t2.css b/css/t2.css
new file mode 100644
index 0000000..177d0d3
--- /dev/null
+++ b/css/t2.css
@@ -0,0 +1,74 @@
+/* t2.css - HTML+ */
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f55555;
+    color: #333333;
+    margin: 10;
+    padding: 20px;
+}
+
+output {
+    color: aqua;
+    font-size: 75px;
+    border:dotted #00ff62;
+    border-radius: 14px;
+}
+
+button {
+    padding: 8px 15px;
+    border: 1px solid #ddd;
+    background-color: #0206ff;
+    cursor: pointer;
+    border-radius: 5px;
+    color: #ddd;
+}
+
+button:hover {
+    background-color: #bbb;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 5px;
+}
+
+th {
+    font-family:Impact;
+    color: rgb(38, 231, 17);
+} 
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border: 15px solid #e99d0f;
+}
+
+td, th {
+    padding: 8px;
+    text-align: left;
+    border: 8px solid #fc04fc;
+}
+
+div.ad{
+    visibility: visible;
+    display: block !important;
+    
+    width: 150px;
+    padding: 12px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #87bc44;
+    background: #e0ff92;
+    line-height: 1.2;
+    }
+div.ad.adt3{
+    visibility: hidden;
+}
+table.table_magasin{
+    width: 150px;
+    padding: 12px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+}
diff --git a/css/t3.css b/css/t3.css
new file mode 100644
index 0000000..de9af5c
--- /dev/null
+++ b/css/t3.css
@@ -0,0 +1,78 @@
+/* t3.css - HTML 2.0 */
+body {
+    font-family: 'Segoe UI', sans-serif;
+    background-color: #f0f0f0;
+    color: #ddd;
+    margin: 0;
+    padding: 30px;
+    background-image: url(../img/codevert.jpg);
+}
+
+
+
+button {
+    padding: 10px 20px;
+    border: none;
+    background-color: #000000;
+    color: white;
+    cursor: pointer;
+    border-radius: 10px;
+    font-weight: bold;
+}
+
+button:hover {
+    background-color: #66ff00;
+}
+
+output {
+    color: #ddd;
+    font-size: 50px;
+
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border: 1px solid #ccc;
+}
+th {   
+    font-size: 20px;
+
+}
+
+td {
+    padding: 10px;
+    text-align: left;
+    border: 1px solid #ddd;
+}
+
+div.ad{
+    visibility: visible;
+    display: block !important;
+    float: right;
+    width: 162px;
+    padding: 12px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #87bc44;
+    background: #e0ff92;
+    line-height: 1.2;
+    }
+div.ad.adt3{
+    visibility: visible;
+}
+
+table.table_magasin{
+    width: 150px;
+    padding: 12px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+}
\ No newline at end of file