commit 6177e86a7e067731518711a2f3da449bb4b6d7fe
Author: GZod01 <gzod01@gzod01.fr>
Date:   Mon Nov 11 11:20:39 2024 +0100

    Ajouter main-site.scss

diff --git a/main-site.scss b/main-site.scss
new file mode 100644
index 0000000..f3d396b
--- /dev/null
+++ b/main-site.scss
@@ -0,0 +1,437 @@
+:root {
+    --pri-color: rgb(150 255 161);
+    --bg-color: grey;
+    --text-color: lime;
+    --sec-color: rgb(74 74 74);
+    --sec-color-darklight: rgb(27 27 27);
+    --error-bg: rgb(150, 50, 50);
+    --error-color: rgb(255, 220, 220);
+    --event-bg: rgb(255, 255, 255);
+    --sec-color-light: rgb(180, 180, 180);
+    --danger-color-1: #c40014;
+    --danger-color-2: #e86500;
+    --danger-color-text: #fff;
+    --danger-color-text-outline: rgb(250, 200, 200);
+    --confirmation-color: rgb(100, 200, 100);
+    --confirmation-color-text: rgb(220, 255, 220);
+}
+
+* {
+    z-index: 0;
+}
+
+body {
+    background-color: var(--bg-color);
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    width: 100%;
+    margin: 0px;
+}
+
+main.content {
+    margin: 0px 10px;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    flex: 2 0 0%;
+}
+
+main.content .admindiv {
+    width: 80%;
+    background-image: linear-gradient(20deg, var(--danger-color-1) 25%, var(--danger-color-2) 25%, var(--danger-color-2) 50%, var(--danger-color-1) 50%, var(--danger-color-1) 75%, var(--danger-color-2) 75%, var(--danger-color-2) 100%);
+    background-size: 116.95px 42.57px;
+    position: relative;
+    left: 50%;
+    transform: translate(-50%, 0px);
+    text-align: center;
+    z-index: 0;
+    place-self: center;
+    border-radius: 20px;
+    padding: 20px;
+    color: var(--danger-color-text);
+}
+
+main.content .admindiv * {
+    color: var(--danger-color-text);
+    font-weight: 900;
+    -webkit-text-fill-color: var(--danger-color-text);
+    -webkit-text-stroke-width: 0.5px;
+    -webkit-text-stroke-color: var(--danger-color-text-outline);
+}
+
+header.header {
+    height: 50px;
+    background-color: var(--sec-color);
+    color: var(--pri-color);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-radius: 0px 0px 10px 10px;
+    position: sticky;
+    top: 0px;
+    z-index: 50 !important;
+}
+
+header.header a.logo {
+    margin: 0px;
+    padding: 0px;
+    height: 50px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+header.header a.logo img {
+    margin: 0px;
+    border-radius: 100%;
+    height: 45px !important;
+}
+
+header.header a.logo:hover {
+    filter: brightness(80%);
+}
+
+header.header ul.nav {
+    transition: all 2s ease 0s;
+    position: absolute;
+    right: 15px;
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+    margin: 0px;
+    z-index: 50 !important;
+}
+
+header.header ul.nav li.nav-item {
+    padding: 0px;
+    height: 50px;
+    margin: 5px 0px;
+}
+
+header.header ul.nav li.nav-item a {
+    background-color: var(--sec-color);
+    display: inline-block;
+    padding: 0px 20px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    vertical-align: middle;
+    color: var(--pri-color);
+    text-decoration: none;
+}
+
+header.header ul.nav li.nav-item.active a {
+    background-color: var(--sec-color-darklight);
+}
+
+header.header ul.nav li.nav-item a:hover {
+    text-decoration: underline;
+    filter: brightness(80%);
+}
+
+.toggler-label,
+.toggler {
+    display: none;
+}
+
+header.header .toggler-label svg {
+    height: 45px !important;
+    width: 45px !important;
+}
+
+header.header .toggler-label svg path {
+    fill: var(--pri-color);
+}
+
+.toggler~header.header .toggler-label {
+    transition: all 0.3s ease-in-out 0s;
+}
+
+.toggler:checked~header.header .toggler-label {
+    transform: rotate(-180deg);
+}
+
+@media (max-width: 860px) {
+    header.header ul.nav {
+        overflow: hidden;
+        height: 0px;
+        position: fixed;
+        top: 50px;
+        padding: 0px;
+        margin: 0px;
+        width: 100%;
+        left: 0px;
+        right: 0px;
+        display: flex;
+        justify-content: space-around;
+        background: var(--pri-color);
+        flex-flow: column wrap;
+        transition: all 0.5s ease 0s;
+        z-index: 50 !important;
+    }
+
+    header.header ul.nav * {
+        transition: all 2s ease 0s;
+        opacity: 0;
+    }
+
+    header.header .toggler-label {
+        position: absolute;
+        display: block;
+        right: 15px;
+        height: 50px;
+        width: 50px;
+    }
+
+    .toggler:checked~header.header ul.nav {
+        overflow: auto;
+        padding-top: 20px;
+        padding-bottom: 20px;
+        height: calc(100% - 90px) !important;
+    }
+
+    .toggler:checked~header.header ul.nav * {
+        opacity: 100;
+    }
+
+    .toggler:checked~header.header ul.nav li.nav-item {
+        min-width: calc(50% - 2px);
+        border-left: 1px solid var(--pri-color);
+        border-right: solid 1px var(--pri-color);
+    }
+
+    .toggler:checked~header.header ul.nav li.nav-item a {
+        width: 100%;
+        padding: 0px;
+    }
+
+    .toggler:checked~header.header {
+        position: fixed;
+        width: 100%;
+        top: 0px;
+        z-index: 50 !important;
+        height: 50px !important;
+    }
+}
+
+footer.footer {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--sec-color);
+    color: var(--pri-color);
+}
+
+footer.footer a {
+    color: var(--pri-color);
+}
+
+footer.footer a:hover {
+    filter: brightness(80%);
+}
+
+.eventslist {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.eventitem {
+    display: flex;
+    margin: 10px 0px;
+    flex-direction: row;
+    width: 80%;
+    background-color: var(--event-bg);
+    padding: 10px;
+    border-radius: 20px;
+    height: 300px;
+}
+
+.eventitem .image {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.eventitem .image img {
+    max-width: 200px !important;
+    width: 30vw !important;
+}
+
+.eventitem .eventinfos {
+    flex: 2 0 0%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.eventitem .eventinfos .title {
+    font-weight: 900;
+    font-size: 150%;
+    text-align: center;
+    text-decoration: underline;
+    margin-bottom: 5px;
+}
+
+.eventitem .eventinfos time.date {
+    place-self: center;
+    background-color: var(--sec-color-light);
+    text-align: center;
+    border-radius: 5px;
+}
+
+.eventitem .eventinfos .desc {
+    padding: 5px;
+    flex: 2 0 0%;
+    max-height: 200px;
+    overflow: auto;
+    border: 2px solid var(--sec-color);
+    border-radius: 10px;
+}
+
+.cusfont {
+    font-family: IcoMoon-Free;
+}
+
+@font-face {
+    font-family: IcoMoon-Free;
+    src: url("./IcoMoon-Free.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+.check {
+    color: green;
+}
+
+.cross {
+    color: red;
+}
+
+.forfaits {
+    z-index: 0;
+    display: flex;
+    flex-direction: row;
+    background-color: rgb(54, 81, 90);
+    border-radius: 10px;
+    padding: 10px 0px;
+    justify-content: space-evenly;
+}
+
+.forfaits div.forfait {
+    z-index: 0;
+    display: flex;
+    flex-direction: column;
+    margin: 2px 10px;
+    border-radius: 10px;
+    background: rgb(100, 113, 131);
+    padding: 5px;
+    place-content: center;
+    align-items: center;
+    text-align: center;
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    overflow: hidden;
+    position: relative;
+}
+
+.forfaits .forfait .name {
+    font-size: xx-large;
+}
+
+.forfaits .forfait .price {
+    color: rgb(249, 249, 249);
+    font-weight: 600;
+    font-size: 200%;
+}
+
+.forfaits .forfait .price::after {
+    content: "\a /heure de travail";
+    font-size: 50%;
+    font-weight: 100;
+    white-space: pre;
+}
+
+.forfaits .forfait .buy,
+table.compforfait thead .buy {
+    padding: 10px;
+    border-radius: 5px;
+    background-color: rgb(90, 230, 150);
+    cursor: pointer;
+    border: 0px solid;
+    transition: all 0.5s ease-in 0s;
+}
+
+.forfaits .forfait .buy:hover,
+table.compforfait thead .buy:hover {
+    filter: brightness(80%);
+}
+
+.forfaits .forfait .buy.contact,
+table.compforfait thead .buy.contact {
+    background-color: rgb(90, 150, 230);
+}
+
+.forfaits .forfait::before {
+    border-bottom-right-radius: 30%;
+    padding: 2px;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    align-self: flex-start;
+}
+
+.forfaits .forfait.recommended::before {
+    background: rgb(165, 197, 255);
+    content: "Recommandé";
+}
+
+.forfaits .forfait.cheapest::before {
+    background: rgb(160, 255, 182);
+    content: "Le moins cher";
+}
+
+@media (max-width: 700px) {
+    .forfaits {
+        flex-direction: column;
+    }
+}
+
+table.compforfait {
+    z-index: 0;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0px;
+    text-align: center;
+}
+
+table.compforfait td,
+tr {
+    border: 1px solid black;
+}
+
+table.compforfait thead {
+    z-index: 0;
+    position: sticky;
+    top: 50px;
+    background: rgb(234, 234, 234);
+}
+
+table.compforfait thead tr:not(:first-child) td {
+    border-top: none;
+}
+
+table.compforfait thead tr:not(:last-child) td {
+    border-bottom: none;
+}
+
+table.compforfait tbody tr td:not(:first-child) {
+    font-family: IcoMoon-Free;
+}
\ No newline at end of file