From 879f10659cc5a2e363a8a827a16ba3827aa5641b Mon Sep 17 00:00:00 2001
From: thaaoblues <thaaoblues81@gmail.com>
Date: Tue, 31 Dec 2024 16:28:04 +0100
Subject: [PATCH] dinguerie le css

---
 css/t1.css |   8 ++-
 css/t2.css |   4 +-
 css/t3.css |   6 ++-
 css/t4.css |   2 +-
 css/t5.css |   2 +-
 css/t6.css |   2 +-
 css/t7.css | 154 ++++++++++++++++++++++++++++++++++++++---------------
 css/t9.css |  41 +++++++++-----
 index.html |   4 +-
 9 files changed, 157 insertions(+), 66 deletions(-)

diff --git a/css/t1.css b/css/t1.css
index 9f0f277..613547c 100644
--- a/css/t1.css
+++ b/css/t1.css
@@ -24,10 +24,14 @@ table {
     border: 1px solid #000;
 }
 
-table.table_magasin{
+table.table-magasin{
     width: 150px;
     padding: 12px;
     margin-top: 10px;
     margin-bottom: 10px;
-
 }
+
+
+#table_magasin_collegues{
+    text-align: center;
+}
\ No newline at end of file
diff --git a/css/t2.css b/css/t2.css
index 177d0d3..fe9dc58 100644
--- a/css/t2.css
+++ b/css/t2.css
@@ -19,7 +19,6 @@ button {
     border: 1px solid #ddd;
     background-color: #0206ff;
     cursor: pointer;
-    border-radius: 5px;
     color: #ddd;
 }
 
@@ -42,6 +41,7 @@ table {
     width: 100%;
     border-collapse: collapse;
     border: 15px solid #e99d0f;
+    text-align: center;
 }
 
 td, th {
@@ -65,7 +65,7 @@ div.ad{
 div.ad.adt3{
     visibility: hidden;
 }
-table.table_magasin{
+table.table-magasin{
     width: 150px;
     padding: 12px;
     margin-top: 10px;
diff --git a/css/t3.css b/css/t3.css
index 8ba7a78..e5a2c43 100644
--- a/css/t3.css
+++ b/css/t3.css
@@ -15,9 +15,11 @@ button {
     background-color: #000000;
     color: white;
     cursor: pointer;
-    border-radius: 10px;
     font-weight: bold;
     color: #ddd;
+    border-width: 2px;
+    border-style: dotted;
+    border-color: greenyellow;
 }
 
 button:hover {
@@ -70,7 +72,7 @@ div.ad.adt3{
     visibility: visible;
 }
 
-table.table_magasin{
+table.table-magasin{
     width: 150px;
     padding: 12px;
     margin-top: 10px;
diff --git a/css/t4.css b/css/t4.css
index c4fd135..37003b4 100644
--- a/css/t4.css
+++ b/css/t4.css
@@ -55,7 +55,7 @@ td {
     border: 1px solid #ddd;
 }
 
-table.table_magasin{
+table.table-magasin{
     width: 150px;
     padding: 12px;
     margin-top: 10px;
diff --git a/css/t5.css b/css/t5.css
index cf2e658..9fa04a4 100644
--- a/css/t5.css
+++ b/css/t5.css
@@ -55,7 +55,7 @@ td, th {
     text-align: left;
     border: 1px solid #ecf0f1;
 }
-table.table_magasin{
+table.table-magasin{
     color: #ddd;
     width: 150px;
     padding: 12px;
diff --git a/css/t6.css b/css/t6.css
index 0d9f92d..f00f1f9 100644
--- a/css/t6.css
+++ b/css/t6.css
@@ -43,7 +43,7 @@ td, th {
     text-align: left;
     border: 1px solid #ddd;
 }
-table.table_magasin{
+table.table-magasin{
     width: 150px;
     padding: 12px;
     margin-top: 10px;
diff --git a/css/t7.css b/css/t7.css
index 672a4b6..2a3b7c5 100644
--- a/css/t7.css
+++ b/css/t7.css
@@ -1,74 +1,142 @@
-/* t7.css - XHTML 1.0 */
+/* t7.css - XHTML 1.0 - Représentation de la fin des années 2010 */
 body {
-    font-family: 'Segoe UI', serif;
-    background-color: #ecf0f1;
-    color: #34495e;
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+    background-color: #f4f4f9;
+    color: #2c3e50;
     margin: 0;
-    padding: 70px;
+    padding: 0;
+    line-height: 1.6;
 }
 
-output {
-    font-size: 30px;
+header {
+    background-color: #3498db;
+    color: white;
+    padding: 20px 0;
+    text-align: center;
+    font-size: 24px;
+    font-weight: bold;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
+main {
+    max-width: 960px;
+    margin: 40px auto;
+    padding: 20px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
 
+h1, h2, h3 {
+    color: #34495e;
+    margin-bottom: 20px;
+    font-weight: 600;
+    text-align: center;
+}
+
+p {
+    margin-bottom: 20px;
+}
 
 button {
-    padding: 15px 30px;
-    border: 2px solid #e74c3c;
-    background-color: white;
-    color: #e74c3c;
+    padding: 10px 25px;
+    font-size: 16px;
+    color: white;
+    background-color: #e74c3c;
+    border: none;
+    border-radius: 5px;
     cursor: pointer;
-    border-radius: 25px;
-    font-size: 20px;
-    transition: transform 0.2s ease;
+    transition: background-color 0.3s ease, transform 0.2s ease;
 }
 
 button:hover {
-    transform: scale(1.05);
-    background-color: #e74c3c;
-    color: white;
+    background-color: #c0392b;
+    transform: translateY(-2px);
+}
+
+button:active {
+    transform: translateY(0);
+}
+
+a {
+    color: #3498db;
+    text-decoration: none;
+    font-weight: bold;
+    transition: color 0.3s ease;
+}
+
+a:hover {
+    color: #2980b9;
 }
 
 img {
+    display: block;
     max-width: 100%;
-    height: auto;
-    border-radius: 20px;
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+    margin: 20px 0;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 table {
     width: 100%;
     border-collapse: collapse;
-    border: 2px solid #ff9900;
-    
+    margin: 20px 0;
+    border-radius: 5px;
+    overflow: hidden;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-td, th {
-    padding: 20px;
+table th, table td {
+    padding: 15px;
     text-align: left;
-    border: 1px solid #ff9900;
-    
-}
-table.table_magasin{
-
-    width: 150px;
-    padding: 12px;
-    margin-top: 10px;
-    margin-bottom: 10px;
 }
 
-a{
-    color: #fda500;
+table th {
+    background-color: #3498db;
+    color: white;
+    font-weight: bold;
 }
 
-a:visited{
-    color: #e74c3c;
+table tr:nth-child(odd) {
+    background-color: #ecf0f1;
 }
 
-div.score_button{
-     
-    background-color: #8a9198;
-    position: fixed;
-    top: 0%;
-}
\ No newline at end of file
+table tr:nth-child(even) {
+    background-color: #ffffff;
+}
+
+footer {
+    text-align: center;
+    padding: 10px 0;    border-radius: 5px;
+
+    background-color: #2c3e50;
+    color: white;
+    margin-top: 40px;
+    font-size: 14px;
+}
+
+div.card {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    margin: 20px 0;
+    transition: transform 0.2s ease, box-shadow 0.3s ease;
+}
+
+div.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+
+div.score-button{
+    margin-top: 2vh;
+    margin-bottom: 2vh;
+    padding: 15px;
+    background-color: #2c3e50;
+    color: white;
+    font-weight: bolder;
+    font-size: xx-large;
+    width: 100vw;
+}
diff --git a/css/t9.css b/css/t9.css
index 759f857..f9b78ce 100644
--- a/css/t9.css
+++ b/css/t9.css
@@ -4,9 +4,6 @@ body {
     background-color: #ffffff;
     color: #2c3e50;
     margin: 0;
-    padding: 90px;
-    
-    
 }
 
 output{
@@ -50,10 +47,16 @@ img:hover {
 }
 
 table {
-    width: 100%;
+    width: 85vw;
     border-collapse: collapse;
     border: 3px solid #ff9900;
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    transition: box-shadow 0.3s ease;
+    margin-left: auto;
+    margin-right: auto;
+}
+table:hover {
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
 }
 
 td, th {
@@ -78,13 +81,6 @@ table tr:hover {
     background-color: #b61212;
 }
 
-table.table_magasin{
-    width: 150px;
-    padding: 12px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-
-}
 
 a{
     color: #fda500;
@@ -92,4 +88,25 @@ a{
 
 a:visited{
     color: #e74c3c;
+}
+
+
+div.score-button{
+    margin-top: 2vh;
+    margin-bottom: 2vh;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 15px;
+    background-color: #fda500;
+    color: white;
+    font-weight: bolder;
+    font-size: xx-large;
+    width: 75vw;
+    border-radius: 10px;
+    text-align: center;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    transition: box-shadow 0.3s ease;
+}
+div.score-button:hover {
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 5aac685..42ffd1d 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
     <script src="./js/alerte.js"></script>
     <script src="./js/collegue.js"></script>
     <div id="confetti-container"></div>
-    <div id="score_button" class="score_button">
+    <div id="score_button" class="score-button">
         <div id="div_score" class="div-centrer-contenu">
 
         </div>
@@ -26,7 +26,7 @@
             <button id="bouton-prof" onclick="leBoostDuProf()">Le Méga Boost du Prof</button>
         </div>
     </div>
-    <table id="table_magasin_technologies" class="table_magasin">
+    <table id="table_magasin_technologies" class="table-magasin">
         <thead id="table_magasin_technologies_head">
 
         </thead>