From f630bbf6493baf183f9ce97adfbdd93759b3a530 Mon Sep 17 00:00:00 2001
From: Guillaume <stage1@echoes.solutions>
Date: Wed, 17 Jun 2026 16:04:44 +0200
Subject: [PATCH] add style table

---
 pages/css/style_services.css | 166 +++++++++++++++++++++++++++++++++++
 1 file changed, 166 insertions(+)
 create mode 100644 pages/css/style_services.css

diff --git a/pages/css/style_services.css b/pages/css/style_services.css
new file mode 100644
index 0000000..4a1738d
--- /dev/null
+++ b/pages/css/style_services.css
@@ -0,0 +1,166 @@
+* {
+    box-sizing: border-box;
+}
+body {
+    width: 100%;
+    height: 100%;
+    background-color: rgb(190, 255, 255);
+    margin: 0;
+    padding-bottom: 60px;
+}
+#img_1 {
+    width: 20%;
+    height: auto;
+}
+.image_footer {
+    display: flex;
+    width: 30%;
+    height: auto;
+}
+.align_x {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-top: 20px;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+#text_1 {
+    width: 65%;
+    font-size: 200%;
+}
+h1 {
+    background-color: steelblue;
+    font-size: 40px;
+}
+.footer {
+    text-align: center;
+    background-color: cadetblue;
+    font-size: 25px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}
+#nav_barre {
+    display: flex;
+    width: 100%;
+    height: 100px;
+    background-color: steelblue;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.styled {
+    border: 0;
+    height: 70px;
+    width: 130px;
+    line-height: 2.5;
+    padding: 0 20px;
+    font-size: 1rem;
+    text-align: center;
+    color: white;
+    text-shadow: 1px 1px 1px black;
+    border-radius: 10px;
+    background-color: royalblue;
+    background-image: linear-gradient(
+        to top left,
+        rgb(0 0 0 / 0.2),
+        rgb(0 0 0 / 0.2) 30%,
+        transparent
+    );
+}
+
+.styled:hover {
+    background-color: midnightblue;
+}
+
+.styled:active {
+    box-shadow:
+        inset -2px -2px 3px rgb(255 255 255 / 0.6),
+        inset 2px 2px 3px rgb(0 0 0 / 0.6);
+}
+.x_to_x {
+    border: 0;
+    height: 70px;
+    width: 130px;
+    line-height: 2.5;
+    padding: 0 20px;
+    font-size: 1rem;
+    text-align: center;
+    color: white;
+    text-shadow: 1px 1px 1px black;
+    border-radius: 10px;
+    background-color: midnightblue;
+    background-image:
+        linear-gradient to top left,
+        rgb(0 0 0 / 0.2),
+        rgb(0 0 0 / 0.2) 30%,
+        transparent;
+}
+.retour {
+    border: 0;
+    height: 50px;
+    width: 130px;
+    line-height: 2.5;
+    padding: 0 20px;
+    font-size: 1rem;
+    text-align: center;
+    color: black;
+    border-radius: 10px;
+    background-color: white;
+    background-image: linear-gradient(
+        to top left,
+        rgb(0 0 0 / 0.2),
+        rgb(0 0 0 / 0.2) 30%,
+        transparent
+    );
+}
+
+.retour:hover {
+    background-color: gray;
+}
+
+.retour:active {
+    box-shadow:
+        inset -2px -2px 3px rgb(255 255 255 / 0.6),
+        inset 2px 2px 3px rgb(0 0 0 / 0.6);
+}
+#buttons {
+    height: 100%;
+    width: 37%;
+    display: flex;
+    justify-content: space-around;
+    flex-direction: row-reverse;
+    margin-left: auto;
+    align-items: center;
+}
+.shadow {
+    box-shadow: 0px 10px 5px gray;
+}
+p {
+    font-family: cursive;
+}
+.sous-titre {
+    font-size: 25px;
+}
+.table {
+    background-color: dodgerblue;
+    border-collapse: collapse;
+    font-size: 25px;
+    table-layout: auto;
+    border: 2px solid;
+    th,
+    td {
+        padding: 10px;
+        text-align: center;
+    }
+
+    td {
+        background-color: lightskyblue;
+    }
+}
+.padding_left {
+    padding-left: 10px;
+}