commit eed64cfeb668b091524266cb2882e15164f2d2cc
Author: Yasser Boulayoune <yasder5@noreply.localhost>
Date:   Fri Mar 6 18:00:00 2026 +0100

    Copie propre du code final de Folliow (projet d'équipe DWWM)

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..924798a
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,21 @@
+# config BDD
+
+DB_CONNECTION=mysql
+DB_HOSTNAME=localhost
+DB_DATABASE=projet_folliow
+DB_USERNAME=
+DB_PASSWORD=
+
+# image path
+IMG_PROJECT_PATH = uploads/projects/
+IMG_USER_PATH = uploads/profiles/
+BASE_URL=http://localhost:8000/
+
+# envoi d'e-mails (SMTP)
+SMTP_HOST=
+SMTP_PORT=587
+SMTP_SECURE=tls
+SMTP_USERNAME=
+SMTP_PASSWORD=
+MAIL_FROM=
+MAIL_FROM_NAME=Folliow
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..2b0195b
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+/templates_c/
+/vendor/
+.env
+uploads/*/*
+!uploads/*/.gitkeep
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..4e54814
--- /dev/null
+++ b/README.md
@@ -0,0 +1,38 @@
+# Folliow
+
+> **Ce dépôt est une copie propre du projet, pas le dépôt de travail.**
+>
+> Folliow a été développé en équipe de quatre pendant la formation DWWM (CCI Campus Colmar, 2026), dans un dépôt partagé qui reste privé. Son historique contient des éléments qui n'ont pas leur place en public : une clé d'envoi d'e-mails écrite en dur à un moment du projet (corrigée depuis, la configuration passe par le `.env`), les adresses e-mail personnelles des membres de l'équipe et la configuration de déploiement du serveur.
+>
+> Plutôt que de réécrire l'historique d'un dépôt commun, cette copie publie **le code final tel qu'il a été rendu**, sans historique, sans dépendances installées, sans images envoyées par les utilisateurs de la démo et sans configuration de déploiement. Le code lui-même n'a pas été retouché : les `@author` en tête de chaque fichier indiquent qui a écrit quoi.
+
+Plateforme de portfolios à mi-chemin entre Behance et LinkedIn : chaque profil met en avant de vrais projets, avec leurs technologies, et on peut suivre les autres membres.
+
+Démo en ligne : https://php.boulayoune.com · Présentation détaillée : https://yasser.boulayoune.com/realisations/projet-php/
+
+## Fonctionnalités
+
+- Inscription, connexion et gestion du profil
+- Création et édition de projets (description, technologies, images)
+- Fil de projets, recherche de profils et de projets
+- Abonnements entre utilisateurs
+- Partage d'un projet par e-mail
+- Espace d'administration (catégories, modération)
+
+## Stack
+
+- PHP 8 en MVC sans framework (contrôleurs, modèles, entités)
+- Smarty pour les gabarits
+- MySQL / MariaDB
+- PHPMailer pour l'envoi d'e-mails, vlucas/phpdotenv pour la configuration
+- HTML, CSS, JavaScript, Bootstrap
+
+## Installation
+
+```
+composer install
+cp .env.example .env        # renseigner l'accès à la base (et le SMTP si besoin)
+mysql -u <utilisateur> -p < database/database.sql
+```
+
+Puis servir le dossier avec Apache (ou `php -S localhost:8000`). La base fournie contient trois comptes de démonstration fictifs.
diff --git a/assests/.gitkeep b/assests/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/assests/css/style.css b/assests/css/style.css
new file mode 100644
index 0000000..13d28fb
--- /dev/null
+++ b/assests/css/style.css
@@ -0,0 +1,178 @@
+*{
+  margin: 0;
+  padding: 0;
+}
+body {
+  background-color: #f5f5f5;
+}
+
+.navbar {
+  background-color: #ffffff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 0.8rem 2rem;
+  min-height: 64px;
+  max-height: 64px;
+}
+.navbar .navbar-collapse {
+            align-items: center;
+        }
+
+.navbar-brand {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #0d6efd !important;
+}
+
+.navbar-brand span {
+  color: #6c757d;
+}
+
+.navbar-nav .nav-link {
+  color: #333;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  margin: 0 0.2rem;
+  transition: color 0.3s;
+}
+.nav-avatar {
+            width: 36px;
+            height: 36px;
+            object-fit: cover;
+            border-radius: 50%;
+            display: block;
+        }
+.navbar-nav .nav-link:hover {
+  color: #0d6efd;
+}
+
+.btn-login {
+  color: #333;
+  background-color: transparent;
+  border: none;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+}
+
+.btn-login:hover {
+  color: #0d6efd;
+}
+
+.btn-signup {
+  background-color: #0d6efd;
+  color: white;
+  border: none;
+  border-radius: 25px;
+  padding: 0.5rem 2rem;
+  font-weight: 500;
+  transition: background-color 0.3s;
+}
+
+.btn-signup:hover {
+  background-color: #0b5ed7;
+}
+
+.notification-bell {
+  font-size: 1.2rem;
+  color: #6c757d;
+  margin-right: 1rem;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.notification-bell:hover {
+  color: #0d6efd;
+}
+
+.logo-image {
+  height: 30px;
+  width: auto;
+  margin-right: 0.5rem;
+}
+.logo{ 
+    font-size: 5rem;
+    font-weight: 700;
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.article-card {
+    height: 400px;
+}
+
+.article-img {
+    height: 50px;
+    width: 100%;
+    overflow: hidden;
+}
+.article-content {
+    height: 20%;
+    padding: 0.75rem;
+}
+
+.footer{
+  color: white;
+  background-color: #6A6ED4;
+}
+
+.footer ul{
+  list-style: none;
+}
+
+.footer a{
+  text-decoration: none;
+  color: white;
+}
+
+.txt_title {
+  color: rgb(51, 152, 217);
+}
+
+/* On cible la card sans casser ses propriétés Bootstrap */
+.tiger-theme {
+    background-color: #ff8c00 !important; /* Orange tigre */
+    background-image: repeating-linear-gradient(
+        45deg,
+        transparent,
+        transparent 30px,
+        rgba(0, 0, 0, 0.15) 30px,
+        rgba(0, 0, 0, 0.15) 60px
+    ) !important;
+    border: 2px solid #000 !important;
+    color: #000 !important;
+    position: relative;
+    z-index: 1;
+}
+
+/* Style du texte pour qu'il ressorte sur l'orange */
+.tiger-text {
+    font-weight: 800 !important;
+    text-transform: uppercase;
+    color: #000 !important;
+}
+
+.tiger-date {
+    font-size: 0.8rem;
+    font-weight: bold;
+    color: rgba(0, 0, 0, 0.7);
+}
+
+/* Bordure de l'image (n'affecte pas la taille de la card) */
+.tiger-border {
+    box-shadow: 0 0 0 4px #000; 
+}
+
+/* Bouton style tigre */
+.btn-tiger {
+    background-color: #000 !important;
+    color: #ff8c00 !important;
+    border: none !important;
+    font-weight: bold !important;
+    transition: transform 0.2s;
+}
+
+.btn-tiger:hover {
+    transform: scale(1.05);
+    background-color: #222 !important;
+}
\ No newline at end of file
diff --git a/assests/css/styles.css b/assests/css/styles.css
new file mode 100644
index 0000000..2ac9d24
--- /dev/null
+++ b/assests/css/styles.css
@@ -0,0 +1,11243 @@
+@charset "UTF-8";
+/*!
+* Start Bootstrap - SB Admin v7.0.7 (https://startbootstrap.com/template/sb-admin)
+* Copyright 2013-2023 Start Bootstrap
+* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-sb-admin/blob/master/LICENSE)
+*/
+/*!
+ * Bootstrap  v5.2.3 (https://getbootstrap.com/)
+ * Copyright 2011-2022 The Bootstrap Authors
+ * Copyright 2011-2022 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+:root {
+  --bs-blue: #0d6efd;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #d63384;
+  --bs-red: #dc3545;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #ffc107;
+  --bs-green: #198754;
+  --bs-teal: #20c997;
+  --bs-cyan: #0dcaf0;
+  --bs-black: #000;
+  --bs-white: #fff;
+  --bs-gray: #6c757d;
+  --bs-gray-dark: #343a40;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #e9ecef;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #adb5bd;
+  --bs-gray-600: #6c757d;
+  --bs-gray-700: #495057;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #212529;
+  --bs-primary: #0d6efd;
+  --bs-secondary: #6c757d;
+  --bs-success: #198754;
+  --bs-info: #0dcaf0;
+  --bs-warning: #ffc107;
+  --bs-danger: #dc3545;
+  --bs-light: #f8f9fa;
+  --bs-dark: #212529;
+  --bs-primary-rgb: 13, 110, 253;
+  --bs-secondary-rgb: 108, 117, 125;
+  --bs-success-rgb: 25, 135, 84;
+  --bs-info-rgb: 13, 202, 240;
+  --bs-warning-rgb: 255, 193, 7;
+  --bs-danger-rgb: 220, 53, 69;
+  --bs-light-rgb: 248, 249, 250;
+  --bs-dark-rgb: 33, 37, 41;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-body-color-rgb: 33, 37, 41;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #212529;
+  --bs-body-bg: #fff;
+  --bs-border-width: 1px;
+  --bs-border-style: solid;
+  --bs-border-color: #dee2e6;
+  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
+  --bs-border-radius: 0.375rem;
+  --bs-border-radius-sm: 0.25rem;
+  --bs-border-radius-lg: 0.5rem;
+  --bs-border-radius-xl: 1rem;
+  --bs-border-radius-2xl: 2rem;
+  --bs-border-radius-pill: 50rem;
+  --bs-link-color: #0d6efd;
+  --bs-link-hover-color: #0a58ca;
+  --bs-code-color: #d63384;
+  --bs-highlight-bg: #fff3cd;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  margin: 0;
+  font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  font-weight: var(--bs-body-font-weight);
+  line-height: var(--bs-body-line-height);
+  color: var(--bs-body-color);
+  text-align: var(--bs-body-text-align);
+  background-color: var(--bs-body-bg);
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  border: 0;
+  border-top: 1px solid;
+  opacity: 0.25;
+}
+
+h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+h1, .h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+@media (min-width: 1200px) {
+  h1, .h1 {
+    font-size: 2.5rem;
+  }
+}
+
+h2, .h2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  h2, .h2 {
+    font-size: 2rem;
+  }
+}
+
+h3, .h3 {
+  font-size: calc(1.3rem + 0.6vw);
+}
+@media (min-width: 1200px) {
+  h3, .h3 {
+    font-size: 1.75rem;
+  }
+}
+
+h4, .h4 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+@media (min-width: 1200px) {
+  h4, .h4 {
+    font-size: 1.5rem;
+  }
+}
+
+h5, .h5 {
+  font-size: 1.25rem;
+}
+
+h6, .h6 {
+  font-size: 1rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title] {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+  cursor: help;
+  -webkit-text-decoration-skip-ink: none;
+          text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul {
+  padding-left: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small, .small {
+  font-size: 0.875em;
+}
+
+mark, .mark {
+  padding: 0.1875em;
+  background-color: var(--bs-highlight-bg);
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+a {
+  color: var(--bs-link-color);
+  text-decoration: underline;
+}
+a:hover {
+  color: var(--bs-link-hover-color);
+}
+
+a:not([href]):not([class]), a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: var(--bs-font-monospace);
+  font-size: 1em;
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  font-size: 0.875em;
+}
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+
+code {
+  font-size: 0.875em;
+  color: var(--bs-code-color);
+  word-wrap: break-word;
+}
+a > code {
+  color: inherit;
+}
+
+kbd {
+  padding: 0.1875rem 0.375rem;
+  font-size: 0.875em;
+  color: var(--bs-body-bg);
+  background-color: var(--bs-body-color);
+  border-radius: 0.25rem;
+}
+kbd kbd {
+  padding: 0;
+  font-size: 1em;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: #6c757d;
+  text-align: left;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+label {
+  display: inline-block;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[role=button] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+select:disabled {
+  opacity: 1;
+}
+
+[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
+  display: none !important;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
+  cursor: pointer;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  float: left;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.5rem;
+  font-size: calc(1.275rem + 0.3vw);
+  line-height: inherit;
+}
+@media (min-width: 1200px) {
+  legend {
+    font-size: 1.5rem;
+  }
+}
+legend + * {
+  clear: left;
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  outline-offset: -2px;
+  -webkit-appearance: textfield;
+}
+
+/* rtl:raw:
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+*/
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::file-selector-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+.lead {
+  font-size: 1.25rem;
+  font-weight: 300;
+}
+
+.display-1 {
+  font-size: calc(1.625rem + 4.5vw);
+  font-weight: 300;
+  line-height: 1.2;
+}
+@media (min-width: 1200px) {
+  .display-1 {
+    font-size: 5rem;
+  }
+}
+
+.display-2 {
+  font-size: calc(1.575rem + 3.9vw);
+  font-weight: 300;
+  line-height: 1.2;
+}
+@media (min-width: 1200px) {
+  .display-2 {
+    font-size: 4.5rem;
+  }
+}
+
+.display-3 {
+  font-size: calc(1.525rem + 3.3vw);
+  font-weight: 300;
+  line-height: 1.2;
+}
+@media (min-width: 1200px) {
+  .display-3 {
+    font-size: 4rem;
+  }
+}
+
+.display-4 {
+  font-size: calc(1.475rem + 2.7vw);
+  font-weight: 300;
+  line-height: 1.2;
+}
+@media (min-width: 1200px) {
+  .display-4 {
+    font-size: 3.5rem;
+  }
+}
+
+.display-5 {
+  font-size: calc(1.425rem + 2.1vw);
+  font-weight: 300;
+  line-height: 1.2;
+}
+@media (min-width: 1200px) {
+  .display-5 {
+    font-size: 3rem;
+  }
+}
+
+.display-6 {
+  font-size: calc(1.375rem + 1.5vw);
+  font-weight: 300;
+  line-height: 1.2;
+}
+@media (min-width: 1200px) {
+  .display-6 {
+    font-size: 2.5rem;
+  }
+}
+
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+
+.list-inline {
+  padding-left: 0;
+  list-style: none;
+}
+
+.list-inline-item {
+  display: inline-block;
+}
+.list-inline-item:not(:last-child) {
+  margin-right: 0.5rem;
+}
+
+.initialism {
+  font-size: 0.875em;
+  text-transform: uppercase;
+}
+
+.blockquote {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+}
+.blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.blockquote-footer {
+  margin-top: -1rem;
+  margin-bottom: 1rem;
+  font-size: 0.875em;
+  color: #6c757d;
+}
+.blockquote-footer::before {
+  content: "— ";
+}
+
+.img-fluid {
+  max-width: 100%;
+  height: auto;
+}
+
+.img-thumbnail {
+  padding: 0.25rem;
+  background-color: #fff;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.375rem;
+  max-width: 100%;
+  height: auto;
+}
+
+.figure {
+  display: inline-block;
+}
+
+.figure-img {
+  margin-bottom: 0.5rem;
+  line-height: 1;
+}
+
+.figure-caption {
+  font-size: 0.875em;
+  color: #6c757d;
+}
+
+.container,
+.container-fluid,
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  width: 100%;
+  padding-right: calc(var(--bs-gutter-x) * 0.5);
+  padding-left: calc(var(--bs-gutter-x) * 0.5);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 576px) {
+  .container-sm, .container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container-md, .container-sm, .container {
+    max-width: 720px;
+  }
+}
+@media (min-width: 992px) {
+  .container-lg, .container-md, .container-sm, .container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1140px;
+  }
+}
+@media (min-width: 1400px) {
+  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1320px;
+  }
+}
+.row {
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--bs-gutter-y));
+  margin-right: calc(-0.5 * var(--bs-gutter-x));
+  margin-left: calc(-0.5 * var(--bs-gutter-x));
+}
+.row > * {
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%;
+  padding-right: calc(var(--bs-gutter-x) * 0.5);
+  padding-left: calc(var(--bs-gutter-x) * 0.5);
+  margin-top: var(--bs-gutter-y);
+}
+
+.col {
+  flex: 1 0 0%;
+}
+
+.row-cols-auto > * {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+.row-cols-1 > * {
+  flex: 0 0 auto;
+  width: 100%;
+}
+
+.row-cols-2 > * {
+  flex: 0 0 auto;
+  width: 50%;
+}
+
+.row-cols-3 > * {
+  flex: 0 0 auto;
+  width: 33.3333333333%;
+}
+
+.row-cols-4 > * {
+  flex: 0 0 auto;
+  width: 25%;
+}
+
+.row-cols-5 > * {
+  flex: 0 0 auto;
+  width: 20%;
+}
+
+.row-cols-6 > * {
+  flex: 0 0 auto;
+  width: 16.6666666667%;
+}
+
+.col-auto {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+.col-1 {
+  flex: 0 0 auto;
+  width: 8.33333333%;
+}
+
+.col-2 {
+  flex: 0 0 auto;
+  width: 16.66666667%;
+}
+
+.col-3 {
+  flex: 0 0 auto;
+  width: 25%;
+}
+
+.col-4 {
+  flex: 0 0 auto;
+  width: 33.33333333%;
+}
+
+.col-5 {
+  flex: 0 0 auto;
+  width: 41.66666667%;
+}
+
+.col-6 {
+  flex: 0 0 auto;
+  width: 50%;
+}
+
+.col-7 {
+  flex: 0 0 auto;
+  width: 58.33333333%;
+}
+
+.col-8 {
+  flex: 0 0 auto;
+  width: 66.66666667%;
+}
+
+.col-9 {
+  flex: 0 0 auto;
+  width: 75%;
+}
+
+.col-10 {
+  flex: 0 0 auto;
+  width: 83.33333333%;
+}
+
+.col-11 {
+  flex: 0 0 auto;
+  width: 91.66666667%;
+}
+
+.col-12 {
+  flex: 0 0 auto;
+  width: 100%;
+}
+
+.offset-1 {
+  margin-left: 8.33333333%;
+}
+
+.offset-2 {
+  margin-left: 16.66666667%;
+}
+
+.offset-3 {
+  margin-left: 25%;
+}
+
+.offset-4 {
+  margin-left: 33.33333333%;
+}
+
+.offset-5 {
+  margin-left: 41.66666667%;
+}
+
+.offset-6 {
+  margin-left: 50%;
+}
+
+.offset-7 {
+  margin-left: 58.33333333%;
+}
+
+.offset-8 {
+  margin-left: 66.66666667%;
+}
+
+.offset-9 {
+  margin-left: 75%;
+}
+
+.offset-10 {
+  margin-left: 83.33333333%;
+}
+
+.offset-11 {
+  margin-left: 91.66666667%;
+}
+
+.g-0,
+.gx-0 {
+  --bs-gutter-x: 0;
+}
+
+.g-0,
+.gy-0 {
+  --bs-gutter-y: 0;
+}
+
+.g-1,
+.gx-1 {
+  --bs-gutter-x: 0.25rem;
+}
+
+.g-1,
+.gy-1 {
+  --bs-gutter-y: 0.25rem;
+}
+
+.g-2,
+.gx-2 {
+  --bs-gutter-x: 0.5rem;
+}
+
+.g-2,
+.gy-2 {
+  --bs-gutter-y: 0.5rem;
+}
+
+.g-3,
+.gx-3 {
+  --bs-gutter-x: 1rem;
+}
+
+.g-3,
+.gy-3 {
+  --bs-gutter-y: 1rem;
+}
+
+.g-4,
+.gx-4 {
+  --bs-gutter-x: 1.5rem;
+}
+
+.g-4,
+.gy-4 {
+  --bs-gutter-y: 1.5rem;
+}
+
+.g-5,
+.gx-5 {
+  --bs-gutter-x: 3rem;
+}
+
+.g-5,
+.gy-5 {
+  --bs-gutter-y: 3rem;
+}
+
+@media (min-width: 576px) {
+  .col-sm {
+    flex: 1 0 0%;
+  }
+  .row-cols-sm-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .row-cols-sm-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .row-cols-sm-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .row-cols-sm-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .row-cols-sm-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .row-cols-sm-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .row-cols-sm-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .col-sm-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .col-sm-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+  .col-sm-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+  .col-sm-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .col-sm-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+  .col-sm-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+  .col-sm-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .col-sm-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+  .col-sm-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+  .col-sm-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .col-sm-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+  .col-sm-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+  .col-sm-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .offset-sm-0 {
+    margin-left: 0;
+  }
+  .offset-sm-1 {
+    margin-left: 8.33333333%;
+  }
+  .offset-sm-2 {
+    margin-left: 16.66666667%;
+  }
+  .offset-sm-3 {
+    margin-left: 25%;
+  }
+  .offset-sm-4 {
+    margin-left: 33.33333333%;
+  }
+  .offset-sm-5 {
+    margin-left: 41.66666667%;
+  }
+  .offset-sm-6 {
+    margin-left: 50%;
+  }
+  .offset-sm-7 {
+    margin-left: 58.33333333%;
+  }
+  .offset-sm-8 {
+    margin-left: 66.66666667%;
+  }
+  .offset-sm-9 {
+    margin-left: 75%;
+  }
+  .offset-sm-10 {
+    margin-left: 83.33333333%;
+  }
+  .offset-sm-11 {
+    margin-left: 91.66666667%;
+  }
+  .g-sm-0,
+  .gx-sm-0 {
+    --bs-gutter-x: 0;
+  }
+  .g-sm-0,
+  .gy-sm-0 {
+    --bs-gutter-y: 0;
+  }
+  .g-sm-1,
+  .gx-sm-1 {
+    --bs-gutter-x: 0.25rem;
+  }
+  .g-sm-1,
+  .gy-sm-1 {
+    --bs-gutter-y: 0.25rem;
+  }
+  .g-sm-2,
+  .gx-sm-2 {
+    --bs-gutter-x: 0.5rem;
+  }
+  .g-sm-2,
+  .gy-sm-2 {
+    --bs-gutter-y: 0.5rem;
+  }
+  .g-sm-3,
+  .gx-sm-3 {
+    --bs-gutter-x: 1rem;
+  }
+  .g-sm-3,
+  .gy-sm-3 {
+    --bs-gutter-y: 1rem;
+  }
+  .g-sm-4,
+  .gx-sm-4 {
+    --bs-gutter-x: 1.5rem;
+  }
+  .g-sm-4,
+  .gy-sm-4 {
+    --bs-gutter-y: 1.5rem;
+  }
+  .g-sm-5,
+  .gx-sm-5 {
+    --bs-gutter-x: 3rem;
+  }
+  .g-sm-5,
+  .gy-sm-5 {
+    --bs-gutter-y: 3rem;
+  }
+}
+@media (min-width: 768px) {
+  .col-md {
+    flex: 1 0 0%;
+  }
+  .row-cols-md-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .row-cols-md-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .row-cols-md-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .row-cols-md-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .row-cols-md-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .row-cols-md-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .row-cols-md-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .col-md-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .col-md-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+  .col-md-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+  .col-md-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .col-md-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+  .col-md-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+  .col-md-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .col-md-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+  .col-md-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+  .col-md-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .col-md-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+  .col-md-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+  .col-md-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .offset-md-0 {
+    margin-left: 0;
+  }
+  .offset-md-1 {
+    margin-left: 8.33333333%;
+  }
+  .offset-md-2 {
+    margin-left: 16.66666667%;
+  }
+  .offset-md-3 {
+    margin-left: 25%;
+  }
+  .offset-md-4 {
+    margin-left: 33.33333333%;
+  }
+  .offset-md-5 {
+    margin-left: 41.66666667%;
+  }
+  .offset-md-6 {
+    margin-left: 50%;
+  }
+  .offset-md-7 {
+    margin-left: 58.33333333%;
+  }
+  .offset-md-8 {
+    margin-left: 66.66666667%;
+  }
+  .offset-md-9 {
+    margin-left: 75%;
+  }
+  .offset-md-10 {
+    margin-left: 83.33333333%;
+  }
+  .offset-md-11 {
+    margin-left: 91.66666667%;
+  }
+  .g-md-0,
+  .gx-md-0 {
+    --bs-gutter-x: 0;
+  }
+  .g-md-0,
+  .gy-md-0 {
+    --bs-gutter-y: 0;
+  }
+  .g-md-1,
+  .gx-md-1 {
+    --bs-gutter-x: 0.25rem;
+  }
+  .g-md-1,
+  .gy-md-1 {
+    --bs-gutter-y: 0.25rem;
+  }
+  .g-md-2,
+  .gx-md-2 {
+    --bs-gutter-x: 0.5rem;
+  }
+  .g-md-2,
+  .gy-md-2 {
+    --bs-gutter-y: 0.5rem;
+  }
+  .g-md-3,
+  .gx-md-3 {
+    --bs-gutter-x: 1rem;
+  }
+  .g-md-3,
+  .gy-md-3 {
+    --bs-gutter-y: 1rem;
+  }
+  .g-md-4,
+  .gx-md-4 {
+    --bs-gutter-x: 1.5rem;
+  }
+  .g-md-4,
+  .gy-md-4 {
+    --bs-gutter-y: 1.5rem;
+  }
+  .g-md-5,
+  .gx-md-5 {
+    --bs-gutter-x: 3rem;
+  }
+  .g-md-5,
+  .gy-md-5 {
+    --bs-gutter-y: 3rem;
+  }
+}
+@media (min-width: 992px) {
+  .col-lg {
+    flex: 1 0 0%;
+  }
+  .row-cols-lg-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .row-cols-lg-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .row-cols-lg-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .row-cols-lg-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .row-cols-lg-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .row-cols-lg-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .row-cols-lg-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .col-lg-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .col-lg-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+  .col-lg-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+  .col-lg-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .col-lg-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+  .col-lg-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+  .col-lg-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .col-lg-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+  .col-lg-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+  .col-lg-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .col-lg-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+  .col-lg-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+  .col-lg-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .offset-lg-0 {
+    margin-left: 0;
+  }
+  .offset-lg-1 {
+    margin-left: 8.33333333%;
+  }
+  .offset-lg-2 {
+    margin-left: 16.66666667%;
+  }
+  .offset-lg-3 {
+    margin-left: 25%;
+  }
+  .offset-lg-4 {
+    margin-left: 33.33333333%;
+  }
+  .offset-lg-5 {
+    margin-left: 41.66666667%;
+  }
+  .offset-lg-6 {
+    margin-left: 50%;
+  }
+  .offset-lg-7 {
+    margin-left: 58.33333333%;
+  }
+  .offset-lg-8 {
+    margin-left: 66.66666667%;
+  }
+  .offset-lg-9 {
+    margin-left: 75%;
+  }
+  .offset-lg-10 {
+    margin-left: 83.33333333%;
+  }
+  .offset-lg-11 {
+    margin-left: 91.66666667%;
+  }
+  .g-lg-0,
+  .gx-lg-0 {
+    --bs-gutter-x: 0;
+  }
+  .g-lg-0,
+  .gy-lg-0 {
+    --bs-gutter-y: 0;
+  }
+  .g-lg-1,
+  .gx-lg-1 {
+    --bs-gutter-x: 0.25rem;
+  }
+  .g-lg-1,
+  .gy-lg-1 {
+    --bs-gutter-y: 0.25rem;
+  }
+  .g-lg-2,
+  .gx-lg-2 {
+    --bs-gutter-x: 0.5rem;
+  }
+  .g-lg-2,
+  .gy-lg-2 {
+    --bs-gutter-y: 0.5rem;
+  }
+  .g-lg-3,
+  .gx-lg-3 {
+    --bs-gutter-x: 1rem;
+  }
+  .g-lg-3,
+  .gy-lg-3 {
+    --bs-gutter-y: 1rem;
+  }
+  .g-lg-4,
+  .gx-lg-4 {
+    --bs-gutter-x: 1.5rem;
+  }
+  .g-lg-4,
+  .gy-lg-4 {
+    --bs-gutter-y: 1.5rem;
+  }
+  .g-lg-5,
+  .gx-lg-5 {
+    --bs-gutter-x: 3rem;
+  }
+  .g-lg-5,
+  .gy-lg-5 {
+    --bs-gutter-y: 3rem;
+  }
+}
+@media (min-width: 1200px) {
+  .col-xl {
+    flex: 1 0 0%;
+  }
+  .row-cols-xl-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .row-cols-xl-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .row-cols-xl-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .row-cols-xl-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .row-cols-xl-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .row-cols-xl-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .row-cols-xl-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .col-xl-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .col-xl-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+  .col-xl-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+  .col-xl-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .col-xl-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+  .col-xl-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+  .col-xl-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .col-xl-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+  .col-xl-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+  .col-xl-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .col-xl-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+  .col-xl-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+  .col-xl-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .offset-xl-0 {
+    margin-left: 0;
+  }
+  .offset-xl-1 {
+    margin-left: 8.33333333%;
+  }
+  .offset-xl-2 {
+    margin-left: 16.66666667%;
+  }
+  .offset-xl-3 {
+    margin-left: 25%;
+  }
+  .offset-xl-4 {
+    margin-left: 33.33333333%;
+  }
+  .offset-xl-5 {
+    margin-left: 41.66666667%;
+  }
+  .offset-xl-6 {
+    margin-left: 50%;
+  }
+  .offset-xl-7 {
+    margin-left: 58.33333333%;
+  }
+  .offset-xl-8 {
+    margin-left: 66.66666667%;
+  }
+  .offset-xl-9 {
+    margin-left: 75%;
+  }
+  .offset-xl-10 {
+    margin-left: 83.33333333%;
+  }
+  .offset-xl-11 {
+    margin-left: 91.66666667%;
+  }
+  .g-xl-0,
+  .gx-xl-0 {
+    --bs-gutter-x: 0;
+  }
+  .g-xl-0,
+  .gy-xl-0 {
+    --bs-gutter-y: 0;
+  }
+  .g-xl-1,
+  .gx-xl-1 {
+    --bs-gutter-x: 0.25rem;
+  }
+  .g-xl-1,
+  .gy-xl-1 {
+    --bs-gutter-y: 0.25rem;
+  }
+  .g-xl-2,
+  .gx-xl-2 {
+    --bs-gutter-x: 0.5rem;
+  }
+  .g-xl-2,
+  .gy-xl-2 {
+    --bs-gutter-y: 0.5rem;
+  }
+  .g-xl-3,
+  .gx-xl-3 {
+    --bs-gutter-x: 1rem;
+  }
+  .g-xl-3,
+  .gy-xl-3 {
+    --bs-gutter-y: 1rem;
+  }
+  .g-xl-4,
+  .gx-xl-4 {
+    --bs-gutter-x: 1.5rem;
+  }
+  .g-xl-4,
+  .gy-xl-4 {
+    --bs-gutter-y: 1.5rem;
+  }
+  .g-xl-5,
+  .gx-xl-5 {
+    --bs-gutter-x: 3rem;
+  }
+  .g-xl-5,
+  .gy-xl-5 {
+    --bs-gutter-y: 3rem;
+  }
+}
+@media (min-width: 1400px) {
+  .col-xxl {
+    flex: 1 0 0%;
+  }
+  .row-cols-xxl-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .row-cols-xxl-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .row-cols-xxl-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .row-cols-xxl-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .row-cols-xxl-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .row-cols-xxl-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .row-cols-xxl-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .col-xxl-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .col-xxl-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+  .col-xxl-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+  .col-xxl-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .col-xxl-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+  .col-xxl-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+  .col-xxl-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .col-xxl-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+  .col-xxl-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+  .col-xxl-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .col-xxl-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+  .col-xxl-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+  .col-xxl-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .offset-xxl-0 {
+    margin-left: 0;
+  }
+  .offset-xxl-1 {
+    margin-left: 8.33333333%;
+  }
+  .offset-xxl-2 {
+    margin-left: 16.66666667%;
+  }
+  .offset-xxl-3 {
+    margin-left: 25%;
+  }
+  .offset-xxl-4 {
+    margin-left: 33.33333333%;
+  }
+  .offset-xxl-5 {
+    margin-left: 41.66666667%;
+  }
+  .offset-xxl-6 {
+    margin-left: 50%;
+  }
+  .offset-xxl-7 {
+    margin-left: 58.33333333%;
+  }
+  .offset-xxl-8 {
+    margin-left: 66.66666667%;
+  }
+  .offset-xxl-9 {
+    margin-left: 75%;
+  }
+  .offset-xxl-10 {
+    margin-left: 83.33333333%;
+  }
+  .offset-xxl-11 {
+    margin-left: 91.66666667%;
+  }
+  .g-xxl-0,
+  .gx-xxl-0 {
+    --bs-gutter-x: 0;
+  }
+  .g-xxl-0,
+  .gy-xxl-0 {
+    --bs-gutter-y: 0;
+  }
+  .g-xxl-1,
+  .gx-xxl-1 {
+    --bs-gutter-x: 0.25rem;
+  }
+  .g-xxl-1,
+  .gy-xxl-1 {
+    --bs-gutter-y: 0.25rem;
+  }
+  .g-xxl-2,
+  .gx-xxl-2 {
+    --bs-gutter-x: 0.5rem;
+  }
+  .g-xxl-2,
+  .gy-xxl-2 {
+    --bs-gutter-y: 0.5rem;
+  }
+  .g-xxl-3,
+  .gx-xxl-3 {
+    --bs-gutter-x: 1rem;
+  }
+  .g-xxl-3,
+  .gy-xxl-3 {
+    --bs-gutter-y: 1rem;
+  }
+  .g-xxl-4,
+  .gx-xxl-4 {
+    --bs-gutter-x: 1.5rem;
+  }
+  .g-xxl-4,
+  .gy-xxl-4 {
+    --bs-gutter-y: 1.5rem;
+  }
+  .g-xxl-5,
+  .gx-xxl-5 {
+    --bs-gutter-x: 3rem;
+  }
+  .g-xxl-5,
+  .gy-xxl-5 {
+    --bs-gutter-y: 3rem;
+  }
+}
+.table, .datatable-table {
+  --bs-table-color: var(--bs-body-color);
+  --bs-table-bg: transparent;
+  --bs-table-border-color: var(--bs-border-color);
+  --bs-table-accent-bg: transparent;
+  --bs-table-striped-color: var(--bs-body-color);
+  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
+  --bs-table-active-color: var(--bs-body-color);
+  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
+  --bs-table-hover-color: var(--bs-body-color);
+  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
+  width: 100%;
+  margin-bottom: 1rem;
+  color: var(--bs-table-color);
+  vertical-align: top;
+  border-color: var(--bs-table-border-color);
+}
+.table > :not(caption) > * > *, .datatable-table > :not(caption) > * > * {
+  padding: 0.5rem 0.5rem;
+  background-color: var(--bs-table-bg);
+  border-bottom-width: 1px;
+  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
+}
+.table > tbody, .datatable-table > tbody {
+  vertical-align: inherit;
+}
+.table > thead, .datatable-table > thead {
+  vertical-align: bottom;
+}
+
+.table-group-divider {
+  border-top: 2px solid currentcolor;
+}
+
+.caption-top {
+  caption-side: top;
+}
+
+.table-sm > :not(caption) > * > * {
+  padding: 0.25rem 0.25rem;
+}
+
+.table-bordered > :not(caption) > *, .datatable-table > :not(caption) > * {
+  border-width: 1px 0;
+}
+.table-bordered > :not(caption) > * > *, .datatable-table > :not(caption) > * > * {
+  border-width: 0 1px;
+}
+
+.table-borderless > :not(caption) > * > * {
+  border-bottom-width: 0;
+}
+.table-borderless > :not(:first-child) {
+  border-top-width: 0;
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) > * {
+  --bs-table-accent-bg: var(--bs-table-striped-bg);
+  color: var(--bs-table-striped-color);
+}
+
+.table-striped-columns > :not(caption) > tr > :nth-child(even) {
+  --bs-table-accent-bg: var(--bs-table-striped-bg);
+  color: var(--bs-table-striped-color);
+}
+
+.table-active {
+  --bs-table-accent-bg: var(--bs-table-active-bg);
+  color: var(--bs-table-active-color);
+}
+
+.table-hover > tbody > tr:hover > *, .datatable-table > tbody > tr:hover > * {
+  --bs-table-accent-bg: var(--bs-table-hover-bg);
+  color: var(--bs-table-hover-color);
+}
+
+.table-primary {
+  --bs-table-color: #000;
+  --bs-table-bg: #cfe2ff;
+  --bs-table-border-color: #bacbe6;
+  --bs-table-striped-bg: #c5d7f2;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #bacbe6;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #bfd1ec;
+  --bs-table-hover-color: #000;
+  color: var(--bs-table-color);
+  border-color: var(--bs-table-border-color);
+}
+
+.table-secondary {
+  --bs-table-color: #000;
+  --bs-table-bg: #e2e3e5;
+  --bs-table-border-color: #cbccce;
+  --bs-table-striped-bg: #d7d8da;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #cbccce;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #d1d2d4;
+  --bs-table-hover-color: #000;
+  color: var(--bs-table-color);
+  border-color: var(--bs-table-border-color);
+}
+
+.table-success {
+  --bs-table-color: #000;
+  --bs-table-bg: #d1e7dd;
+  --bs-table-border-color: #bcd0c7;
+  --bs-table-striped-bg: #c7dbd2;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #bcd0c7;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #c1d6cc;
+  --bs-table-hover-color: #000;
+  color: var(--bs-table-color);
+  border-color: var(--bs-table-border-color);
+}
+
+.table-info {
+  --bs-table-color: #000;
+  --bs-table-bg: #cff4fc;
+  --bs-table-border-color: #badce3;
+  --bs-table-striped-bg: #c5e8ef;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #badce3;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #bfe2e9;
+  --bs-table-hover-color: #000;
+  color: var(--bs-table-color);
+  border-color: var(--bs-table-border-color);
+}
+
+.table-warning {
+  --bs-table-color: #000;
+  --bs-table-bg: #fff3cd;
+  --bs-table-border-color: #e6dbb9;
+  --bs-table-striped-bg: #f2e7c3;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #e6dbb9;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #ece1be;
+  --bs-table-hover-color: #000;
+  color: var(--bs-table-color);
+  border-color: var(--bs-table-border-color);
+}
+
+.table-danger {
+  --bs-table-color: #000;
+  --bs-table-bg: #f8d7da;
+  --bs-table-border-color: #dfc2c4;
+  --bs-table-striped-bg: #eccccf;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #dfc2c4;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #e5c7ca;
+  --bs-table-hover-color: #000;
+  color: var(--bs-table-color);
+  border-color: var(--bs-table-border-color);
+}
+
+.table-light {
+  --bs-table-color: #000;
+  --bs-table-bg: #f8f9fa;
+  --bs-table-border-color: #dfe0e1;
+  --bs-table-striped-bg: #ecedee;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #dfe0e1;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #e5e6e7;
+  --bs-table-hover-color: #000;
+  color: var(--bs-table-color);
+  border-color: var(--bs-table-border-color);
+}
+
+.table-dark {
+  --bs-table-color: #fff;
+  --bs-table-bg: #212529;
+  --bs-table-border-color: #373b3e;
+  --bs-table-striped-bg: #2c3034;
+  --bs-table-striped-color: #fff;
+  --bs-table-active-bg: #373b3e;
+  --bs-table-active-color: #fff;
+  --bs-table-hover-bg: #323539;
+  --bs-table-hover-color: #fff;
+  color: var(--bs-table-color);
+  border-color: var(--bs-table-border-color);
+}
+
+.table-responsive, .datatable-wrapper .datatable-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+@media (max-width: 575.98px) {
+  .table-responsive-sm {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+@media (max-width: 767.98px) {
+  .table-responsive-md {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+@media (max-width: 991.98px) {
+  .table-responsive-lg {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+@media (max-width: 1199.98px) {
+  .table-responsive-xl {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+@media (max-width: 1399.98px) {
+  .table-responsive-xxl {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+.form-label {
+  margin-bottom: 0.5rem;
+}
+
+.col-form-label {
+  padding-top: calc(0.375rem + 1px);
+  padding-bottom: calc(0.375rem + 1px);
+  margin-bottom: 0;
+  font-size: inherit;
+  line-height: 1.5;
+}
+
+.col-form-label-lg {
+  padding-top: calc(0.5rem + 1px);
+  padding-bottom: calc(0.5rem + 1px);
+  font-size: 1.25rem;
+}
+
+.col-form-label-sm {
+  padding-top: calc(0.25rem + 1px);
+  padding-bottom: calc(0.25rem + 1px);
+  font-size: 0.875rem;
+}
+
+.form-text {
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #6c757d;
+}
+
+.form-control, .datatable-input {
+  display: block;
+  width: 100%;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border-radius: 0.375rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .form-control, .datatable-input {
+    transition: none;
+  }
+}
+.form-control[type=file], [type=file].datatable-input {
+  overflow: hidden;
+}
+.form-control[type=file]:not(:disabled):not([readonly]), [type=file].datatable-input:not(:disabled):not([readonly]) {
+  cursor: pointer;
+}
+.form-control:focus, .datatable-input:focus {
+  color: #212529;
+  background-color: #fff;
+  border-color: #86b7fe;
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+.form-control::-webkit-date-and-time-value, .datatable-input::-webkit-date-and-time-value {
+  height: 1.5em;
+}
+.form-control::-moz-placeholder, .datatable-input::-moz-placeholder {
+  color: #6c757d;
+  opacity: 1;
+}
+.form-control::placeholder, .datatable-input::placeholder {
+  color: #6c757d;
+  opacity: 1;
+}
+.form-control:disabled, .datatable-input:disabled {
+  background-color: #e9ecef;
+  opacity: 1;
+}
+.form-control::file-selector-button, .datatable-input::file-selector-button {
+  padding: 0.375rem 0.75rem;
+  margin: -0.375rem -0.75rem;
+  -webkit-margin-end: 0.75rem;
+          margin-inline-end: 0.75rem;
+  color: #212529;
+  background-color: #e9ecef;
+  pointer-events: none;
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+  border-inline-end-width: 1px;
+  border-radius: 0;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .form-control::file-selector-button, .datatable-input::file-selector-button {
+    transition: none;
+  }
+}
+.form-control:hover:not(:disabled):not([readonly])::file-selector-button, .datatable-input:hover:not(:disabled):not([readonly])::file-selector-button {
+  background-color: #dde0e3;
+}
+
+.form-control-plaintext {
+  display: block;
+  width: 100%;
+  padding: 0.375rem 0;
+  margin-bottom: 0;
+  line-height: 1.5;
+  color: #212529;
+  background-color: transparent;
+  border: solid transparent;
+  border-width: 1px 0;
+}
+.form-control-plaintext:focus {
+  outline: 0;
+}
+.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.form-control-sm {
+  min-height: calc(1.5em + 0.5rem + 2px);
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.25rem;
+}
+.form-control-sm::file-selector-button {
+  padding: 0.25rem 0.5rem;
+  margin: -0.25rem -0.5rem;
+  -webkit-margin-end: 0.5rem;
+          margin-inline-end: 0.5rem;
+}
+
+.form-control-lg {
+  min-height: calc(1.5em + 1rem + 2px);
+  padding: 0.5rem 1rem;
+  font-size: 1.25rem;
+  border-radius: 0.5rem;
+}
+.form-control-lg::file-selector-button {
+  padding: 0.5rem 1rem;
+  margin: -0.5rem -1rem;
+  -webkit-margin-end: 1rem;
+          margin-inline-end: 1rem;
+}
+
+textarea.form-control, textarea.datatable-input {
+  min-height: calc(1.5em + 0.75rem + 2px);
+}
+textarea.form-control-sm {
+  min-height: calc(1.5em + 0.5rem + 2px);
+}
+textarea.form-control-lg {
+  min-height: calc(1.5em + 1rem + 2px);
+}
+
+.form-control-color {
+  width: 3rem;
+  height: calc(1.5em + 0.75rem + 2px);
+  padding: 0.375rem;
+}
+.form-control-color:not(:disabled):not([readonly]) {
+  cursor: pointer;
+}
+.form-control-color::-moz-color-swatch {
+  border: 0 !important;
+  border-radius: 0.375rem;
+}
+.form-control-color::-webkit-color-swatch {
+  border-radius: 0.375rem;
+}
+.form-control-color.form-control-sm {
+  height: calc(1.5em + 0.5rem + 2px);
+}
+.form-control-color.form-control-lg {
+  height: calc(1.5em + 1rem + 2px);
+}
+
+.form-select, .datatable-selector {
+  display: block;
+  width: 100%;
+  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
+  -moz-padding-start: calc(0.75rem - 3px);
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  background-color: #fff;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 16px 12px;
+  border: 1px solid #ced4da;
+  border-radius: 0.375rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .form-select, .datatable-selector {
+    transition: none;
+  }
+}
+.form-select:focus, .datatable-selector:focus {
+  border-color: #86b7fe;
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+.form-select[multiple], [multiple].datatable-selector, .form-select[size]:not([size="1"]), [size].datatable-selector:not([size="1"]) {
+  padding-right: 0.75rem;
+  background-image: none;
+}
+.form-select:disabled, .datatable-selector:disabled {
+  background-color: #e9ecef;
+}
+.form-select:-moz-focusring, .datatable-selector:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #212529;
+}
+
+.form-select-sm {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.25rem;
+}
+
+.form-select-lg {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  font-size: 1.25rem;
+  border-radius: 0.5rem;
+}
+
+.form-check {
+  display: block;
+  min-height: 1.5rem;
+  padding-left: 1.5em;
+  margin-bottom: 0.125rem;
+}
+.form-check .form-check-input {
+  float: left;
+  margin-left: -1.5em;
+}
+
+.form-check-reverse {
+  padding-right: 1.5em;
+  padding-left: 0;
+  text-align: right;
+}
+.form-check-reverse .form-check-input {
+  float: right;
+  margin-right: -1.5em;
+  margin-left: 0;
+}
+
+.form-check-input {
+  width: 1em;
+  height: 1em;
+  margin-top: 0.25em;
+  vertical-align: top;
+  background-color: #fff;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  -webkit-print-color-adjust: exact;
+          print-color-adjust: exact;
+}
+.form-check-input[type=checkbox] {
+  border-radius: 0.25em;
+}
+.form-check-input[type=radio] {
+  border-radius: 50%;
+}
+.form-check-input:active {
+  filter: brightness(90%);
+}
+.form-check-input:focus {
+  border-color: #86b7fe;
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+.form-check-input:checked {
+  background-color: #0d6efd;
+  border-color: #0d6efd;
+}
+.form-check-input:checked[type=checkbox] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+}
+.form-check-input:checked[type=radio] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
+}
+.form-check-input[type=checkbox]:indeterminate {
+  background-color: #0d6efd;
+  border-color: #0d6efd;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
+}
+.form-check-input:disabled {
+  pointer-events: none;
+  filter: none;
+  opacity: 0.5;
+}
+.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.form-switch {
+  padding-left: 2.5em;
+}
+.form-switch .form-check-input {
+  width: 2em;
+  margin-left: -2.5em;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
+  background-position: left center;
+  border-radius: 2em;
+  transition: background-position 0.15s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .form-switch .form-check-input {
+    transition: none;
+  }
+}
+.form-switch .form-check-input:focus {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
+}
+.form-switch .form-check-input:checked {
+  background-position: right center;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
+}
+.form-switch.form-check-reverse {
+  padding-right: 2.5em;
+  padding-left: 0;
+}
+.form-switch.form-check-reverse .form-check-input {
+  margin-right: -2.5em;
+  margin-left: 0;
+}
+
+.form-check-inline {
+  display: inline-block;
+  margin-right: 1rem;
+}
+
+.btn-check {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+  pointer-events: none;
+}
+.btn-check[disabled] + .btn, .btn-check:disabled + .btn {
+  pointer-events: none;
+  filter: none;
+  opacity: 0.65;
+}
+
+.form-range {
+  width: 100%;
+  height: 1.5rem;
+  padding: 0;
+  background-color: transparent;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.form-range:focus {
+  outline: 0;
+}
+.form-range:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+.form-range:focus::-moz-range-thumb {
+  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+.form-range::-moz-focus-outer {
+  border: 0;
+}
+.form-range::-webkit-slider-thumb {
+  width: 1rem;
+  height: 1rem;
+  margin-top: -0.25rem;
+  background-color: #0d6efd;
+  border: 0;
+  border-radius: 1rem;
+  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  -webkit-appearance: none;
+          appearance: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .form-range::-webkit-slider-thumb {
+    -webkit-transition: none;
+    transition: none;
+  }
+}
+.form-range::-webkit-slider-thumb:active {
+  background-color: #b6d4fe;
+}
+.form-range::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 0.5rem;
+  color: transparent;
+  cursor: pointer;
+  background-color: #dee2e6;
+  border-color: transparent;
+  border-radius: 1rem;
+}
+.form-range::-moz-range-thumb {
+  width: 1rem;
+  height: 1rem;
+  background-color: #0d6efd;
+  border: 0;
+  border-radius: 1rem;
+  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  -moz-appearance: none;
+       appearance: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .form-range::-moz-range-thumb {
+    -moz-transition: none;
+    transition: none;
+  }
+}
+.form-range::-moz-range-thumb:active {
+  background-color: #b6d4fe;
+}
+.form-range::-moz-range-track {
+  width: 100%;
+  height: 0.5rem;
+  color: transparent;
+  cursor: pointer;
+  background-color: #dee2e6;
+  border-color: transparent;
+  border-radius: 1rem;
+}
+.form-range:disabled {
+  pointer-events: none;
+}
+.form-range:disabled::-webkit-slider-thumb {
+  background-color: #adb5bd;
+}
+.form-range:disabled::-moz-range-thumb {
+  background-color: #adb5bd;
+}
+
+.form-floating {
+  position: relative;
+}
+.form-floating > .form-control, .form-floating > .datatable-input,
+.form-floating > .form-control-plaintext,
+.form-floating > .form-select,
+.form-floating > .datatable-selector {
+  height: calc(3.5rem + 2px);
+  line-height: 1.25;
+}
+.form-floating > label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 1rem 0.75rem;
+  overflow: hidden;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+  border: 1px solid transparent;
+  transform-origin: 0 0;
+  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .form-floating > label {
+    transition: none;
+  }
+}
+.form-floating > .form-control, .form-floating > .datatable-input,
+.form-floating > .form-control-plaintext {
+  padding: 1rem 0.75rem;
+}
+.form-floating > .form-control::-moz-placeholder, .form-floating > .datatable-input::-moz-placeholder, .form-floating > .form-control-plaintext::-moz-placeholder {
+  color: transparent;
+}
+.form-floating > .form-control::placeholder, .form-floating > .datatable-input::placeholder,
+.form-floating > .form-control-plaintext::placeholder {
+  color: transparent;
+}
+.form-floating > .form-control:not(:-moz-placeholder-shown), .form-floating > .datatable-input:not(:-moz-placeholder-shown), .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) {
+  padding-top: 1.625rem;
+  padding-bottom: 0.625rem;
+}
+.form-floating > .form-control:focus, .form-floating > .datatable-input:focus, .form-floating > .form-control:not(:placeholder-shown), .form-floating > .datatable-input:not(:placeholder-shown),
+.form-floating > .form-control-plaintext:focus,
+.form-floating > .form-control-plaintext:not(:placeholder-shown) {
+  padding-top: 1.625rem;
+  padding-bottom: 0.625rem;
+}
+.form-floating > .form-control:-webkit-autofill, .form-floating > .datatable-input:-webkit-autofill,
+.form-floating > .form-control-plaintext:-webkit-autofill {
+  padding-top: 1.625rem;
+  padding-bottom: 0.625rem;
+}
+.form-floating > .form-select, .form-floating > .datatable-selector {
+  padding-top: 1.625rem;
+  padding-bottom: 0.625rem;
+}
+.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label, .form-floating > .datatable-input:not(:-moz-placeholder-shown) ~ label {
+  opacity: 0.65;
+  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+}
+.form-floating > .form-control:focus ~ label, .form-floating > .datatable-input:focus ~ label,
+.form-floating > .form-control:not(:placeholder-shown) ~ label,
+.form-floating > .datatable-input:not(:placeholder-shown) ~ label,
+.form-floating > .form-control-plaintext ~ label,
+.form-floating > .form-select ~ label,
+.form-floating > .datatable-selector ~ label {
+  opacity: 0.65;
+  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+}
+.form-floating > .form-control:-webkit-autofill ~ label, .form-floating > .datatable-input:-webkit-autofill ~ label {
+  opacity: 0.65;
+  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+}
+.form-floating > .form-control-plaintext ~ label {
+  border-width: 1px 0;
+}
+
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  width: 100%;
+}
+.input-group > .form-control, .input-group > .datatable-input,
+.input-group > .form-select,
+.input-group > .datatable-selector,
+.input-group > .form-floating {
+  position: relative;
+  flex: 1 1 auto;
+  width: 1%;
+  min-width: 0;
+}
+.input-group > .form-control:focus, .input-group > .datatable-input:focus,
+.input-group > .form-select:focus,
+.input-group > .datatable-selector:focus,
+.input-group > .form-floating:focus-within {
+  z-index: 5;
+}
+.input-group .btn {
+  position: relative;
+  z-index: 2;
+}
+.input-group .btn:focus {
+  z-index: 5;
+}
+
+.input-group-text {
+  display: flex;
+  align-items: center;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  text-align: center;
+  white-space: nowrap;
+  background-color: #e9ecef;
+  border: 1px solid #ced4da;
+  border-radius: 0.375rem;
+}
+
+.input-group-lg > .form-control, .input-group-lg > .datatable-input,
+.input-group-lg > .form-select,
+.input-group-lg > .datatable-selector,
+.input-group-lg > .input-group-text,
+.input-group-lg > .btn {
+  padding: 0.5rem 1rem;
+  font-size: 1.25rem;
+  border-radius: 0.5rem;
+}
+
+.input-group-sm > .form-control, .input-group-sm > .datatable-input,
+.input-group-sm > .form-select,
+.input-group-sm > .datatable-selector,
+.input-group-sm > .input-group-text,
+.input-group-sm > .btn {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.25rem;
+}
+
+.input-group-lg > .form-select, .input-group-lg > .datatable-selector,
+.input-group-sm > .form-select,
+.input-group-sm > .datatable-selector {
+  padding-right: 3rem;
+}
+
+.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
+.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),
+.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,
+.input-group:not(.has-validation) > .form-floating:not(:last-child) > .datatable-input,
+.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select,
+.input-group:not(.has-validation) > .form-floating:not(:last-child) > .datatable-selector {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
+.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4),
+.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-control,
+.input-group.has-validation > .form-floating:nth-last-child(n+3) > .datatable-input,
+.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-select,
+.input-group.has-validation > .form-floating:nth-last-child(n+3) > .datatable-selector {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.input-group > .form-floating:not(:first-child) > .form-control, .input-group > .form-floating:not(:first-child) > .datatable-input,
+.input-group > .form-floating:not(:first-child) > .form-select,
+.input-group > .form-floating:not(:first-child) > .datatable-selector {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.valid-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #198754;
+}
+
+.valid-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
+  color: #fff;
+  background-color: rgba(25, 135, 84, 0.9);
+  border-radius: 0.375rem;
+}
+
+.was-validated :valid ~ .valid-feedback,
+.was-validated :valid ~ .valid-tooltip,
+.is-valid ~ .valid-feedback,
+.is-valid ~ .valid-tooltip {
+  display: block;
+}
+
+.was-validated .form-control:valid, .was-validated .datatable-input:valid, .form-control.is-valid, .is-valid.datatable-input {
+  border-color: #198754;
+  padding-right: calc(1.5em + 0.75rem);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right calc(0.375em + 0.1875rem) center;
+  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+.was-validated .form-control:valid:focus, .was-validated .datatable-input:valid:focus, .form-control.is-valid:focus, .is-valid.datatable-input:focus {
+  border-color: #198754;
+  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+}
+
+.was-validated textarea.form-control:valid, .was-validated textarea.datatable-input:valid, textarea.form-control.is-valid, textarea.is-valid.datatable-input {
+  padding-right: calc(1.5em + 0.75rem);
+  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
+}
+
+.was-validated .form-select:valid, .was-validated .datatable-selector:valid, .form-select.is-valid, .is-valid.datatable-selector {
+  border-color: #198754;
+}
+.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .datatable-selector:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .was-validated .datatable-selector:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .is-valid.datatable-selector:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"], .is-valid.datatable-selector:not([multiple])[size="1"] {
+  padding-right: 4.125rem;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+  background-position: right 0.75rem center, center right 2.25rem;
+  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+.was-validated .form-select:valid:focus, .was-validated .datatable-selector:valid:focus, .form-select.is-valid:focus, .is-valid.datatable-selector:focus {
+  border-color: #198754;
+  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+}
+
+.was-validated .form-control-color:valid, .form-control-color.is-valid {
+  width: calc(3rem + calc(1.5em + 0.75rem));
+}
+
+.was-validated .form-check-input:valid, .form-check-input.is-valid {
+  border-color: #198754;
+}
+.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {
+  background-color: #198754;
+}
+.was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus {
+  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+}
+.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
+  color: #198754;
+}
+
+.form-check-inline .form-check-input ~ .valid-feedback {
+  margin-left: 0.5em;
+}
+
+.was-validated .input-group > .form-control:not(:focus):valid, .was-validated .input-group > .datatable-input:not(:focus):valid, .input-group > .form-control:not(:focus).is-valid, .input-group > .datatable-input:not(:focus).is-valid,
+.was-validated .input-group > .form-select:not(:focus):valid,
+.was-validated .input-group > .datatable-selector:not(:focus):valid,
+.input-group > .form-select:not(:focus).is-valid,
+.input-group > .datatable-selector:not(:focus).is-valid,
+.was-validated .input-group > .form-floating:not(:focus-within):valid,
+.input-group > .form-floating:not(:focus-within).is-valid {
+  z-index: 3;
+}
+
+.invalid-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #dc3545;
+}
+
+.invalid-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
+  color: #fff;
+  background-color: rgba(220, 53, 69, 0.9);
+  border-radius: 0.375rem;
+}
+
+.was-validated :invalid ~ .invalid-feedback,
+.was-validated :invalid ~ .invalid-tooltip,
+.is-invalid ~ .invalid-feedback,
+.is-invalid ~ .invalid-tooltip {
+  display: block;
+}
+
+.was-validated .form-control:invalid, .was-validated .datatable-input:invalid, .form-control.is-invalid, .is-invalid.datatable-input {
+  border-color: #dc3545;
+  padding-right: calc(1.5em + 0.75rem);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right calc(0.375em + 0.1875rem) center;
+  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+.was-validated .form-control:invalid:focus, .was-validated .datatable-input:invalid:focus, .form-control.is-invalid:focus, .is-invalid.datatable-input:focus {
+  border-color: #dc3545;
+  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+}
+
+.was-validated textarea.form-control:invalid, .was-validated textarea.datatable-input:invalid, textarea.form-control.is-invalid, textarea.is-invalid.datatable-input {
+  padding-right: calc(1.5em + 0.75rem);
+  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
+}
+
+.was-validated .form-select:invalid, .was-validated .datatable-selector:invalid, .form-select.is-invalid, .is-invalid.datatable-selector {
+  border-color: #dc3545;
+}
+.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .datatable-selector:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .was-validated .datatable-selector:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .is-invalid.datatable-selector:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"], .is-invalid.datatable-selector:not([multiple])[size="1"] {
+  padding-right: 4.125rem;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+  background-position: right 0.75rem center, center right 2.25rem;
+  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+.was-validated .form-select:invalid:focus, .was-validated .datatable-selector:invalid:focus, .form-select.is-invalid:focus, .is-invalid.datatable-selector:focus {
+  border-color: #dc3545;
+  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+}
+
+.was-validated .form-control-color:invalid, .form-control-color.is-invalid {
+  width: calc(3rem + calc(1.5em + 0.75rem));
+}
+
+.was-validated .form-check-input:invalid, .form-check-input.is-invalid {
+  border-color: #dc3545;
+}
+.was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {
+  background-color: #dc3545;
+}
+.was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus {
+  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+}
+.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
+  color: #dc3545;
+}
+
+.form-check-inline .form-check-input ~ .invalid-feedback {
+  margin-left: 0.5em;
+}
+
+.was-validated .input-group > .form-control:not(:focus):invalid, .was-validated .input-group > .datatable-input:not(:focus):invalid, .input-group > .form-control:not(:focus).is-invalid, .input-group > .datatable-input:not(:focus).is-invalid,
+.was-validated .input-group > .form-select:not(:focus):invalid,
+.was-validated .input-group > .datatable-selector:not(:focus):invalid,
+.input-group > .form-select:not(:focus).is-invalid,
+.input-group > .datatable-selector:not(:focus).is-invalid,
+.was-validated .input-group > .form-floating:not(:focus-within):invalid,
+.input-group > .form-floating:not(:focus-within).is-invalid {
+  z-index: 4;
+}
+
+.btn {
+  --bs-btn-padding-x: 0.75rem;
+  --bs-btn-padding-y: 0.375rem;
+  --bs-btn-font-family: ;
+  --bs-btn-font-size: 1rem;
+  --bs-btn-font-weight: 400;
+  --bs-btn-line-height: 1.5;
+  --bs-btn-color: #212529;
+  --bs-btn-bg: transparent;
+  --bs-btn-border-width: 1px;
+  --bs-btn-border-color: transparent;
+  --bs-btn-border-radius: 0.375rem;
+  --bs-btn-hover-border-color: transparent;
+  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
+  --bs-btn-disabled-opacity: 0.65;
+  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
+  display: inline-block;
+  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
+  font-family: var(--bs-btn-font-family);
+  font-size: var(--bs-btn-font-size);
+  font-weight: var(--bs-btn-font-weight);
+  line-height: var(--bs-btn-line-height);
+  color: var(--bs-btn-color);
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
+  border-radius: var(--bs-btn-border-radius);
+  background-color: var(--bs-btn-bg);
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .btn {
+    transition: none;
+  }
+}
+.btn:hover {
+  color: var(--bs-btn-hover-color);
+  background-color: var(--bs-btn-hover-bg);
+  border-color: var(--bs-btn-hover-border-color);
+}
+.btn-check + .btn:hover {
+  color: var(--bs-btn-color);
+  background-color: var(--bs-btn-bg);
+  border-color: var(--bs-btn-border-color);
+}
+.btn:focus-visible {
+  color: var(--bs-btn-hover-color);
+  background-color: var(--bs-btn-hover-bg);
+  border-color: var(--bs-btn-hover-border-color);
+  outline: 0;
+  box-shadow: var(--bs-btn-focus-box-shadow);
+}
+.btn-check:focus-visible + .btn {
+  border-color: var(--bs-btn-hover-border-color);
+  outline: 0;
+  box-shadow: var(--bs-btn-focus-box-shadow);
+}
+.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
+  color: var(--bs-btn-active-color);
+  background-color: var(--bs-btn-active-bg);
+  border-color: var(--bs-btn-active-border-color);
+}
+.btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
+  box-shadow: var(--bs-btn-focus-box-shadow);
+}
+.btn:disabled, .btn.disabled, fieldset:disabled .btn {
+  color: var(--bs-btn-disabled-color);
+  pointer-events: none;
+  background-color: var(--bs-btn-disabled-bg);
+  border-color: var(--bs-btn-disabled-border-color);
+  opacity: var(--bs-btn-disabled-opacity);
+}
+
+.btn-primary {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #0d6efd;
+  --bs-btn-border-color: #0d6efd;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #0b5ed7;
+  --bs-btn-hover-border-color: #0a58ca;
+  --bs-btn-focus-shadow-rgb: 49, 132, 253;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #0a58ca;
+  --bs-btn-active-border-color: #0a53be;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #0d6efd;
+  --bs-btn-disabled-border-color: #0d6efd;
+}
+
+.btn-secondary {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #6c757d;
+  --bs-btn-border-color: #6c757d;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #5c636a;
+  --bs-btn-hover-border-color: #565e64;
+  --bs-btn-focus-shadow-rgb: 130, 138, 145;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #565e64;
+  --bs-btn-active-border-color: #51585e;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #6c757d;
+  --bs-btn-disabled-border-color: #6c757d;
+}
+
+.btn-success {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #198754;
+  --bs-btn-border-color: #198754;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #157347;
+  --bs-btn-hover-border-color: #146c43;
+  --bs-btn-focus-shadow-rgb: 60, 153, 110;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #146c43;
+  --bs-btn-active-border-color: #13653f;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #198754;
+  --bs-btn-disabled-border-color: #198754;
+}
+
+.btn-info {
+  --bs-btn-color: #000;
+  --bs-btn-bg: #0dcaf0;
+  --bs-btn-border-color: #0dcaf0;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #31d2f2;
+  --bs-btn-hover-border-color: #25cff2;
+  --bs-btn-focus-shadow-rgb: 11, 172, 204;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #3dd5f3;
+  --bs-btn-active-border-color: #25cff2;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #0dcaf0;
+  --bs-btn-disabled-border-color: #0dcaf0;
+}
+
+.btn-warning {
+  --bs-btn-color: #000;
+  --bs-btn-bg: #ffc107;
+  --bs-btn-border-color: #ffc107;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #ffca2c;
+  --bs-btn-hover-border-color: #ffc720;
+  --bs-btn-focus-shadow-rgb: 217, 164, 6;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #ffcd39;
+  --bs-btn-active-border-color: #ffc720;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #ffc107;
+  --bs-btn-disabled-border-color: #ffc107;
+}
+
+.btn-danger {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #dc3545;
+  --bs-btn-border-color: #dc3545;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #bb2d3b;
+  --bs-btn-hover-border-color: #b02a37;
+  --bs-btn-focus-shadow-rgb: 225, 83, 97;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #b02a37;
+  --bs-btn-active-border-color: #a52834;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #dc3545;
+  --bs-btn-disabled-border-color: #dc3545;
+}
+
+.btn-light {
+  --bs-btn-color: #000;
+  --bs-btn-bg: #f8f9fa;
+  --bs-btn-border-color: #f8f9fa;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #d3d4d5;
+  --bs-btn-hover-border-color: #c6c7c8;
+  --bs-btn-focus-shadow-rgb: 211, 212, 213;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #c6c7c8;
+  --bs-btn-active-border-color: #babbbc;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #f8f9fa;
+  --bs-btn-disabled-border-color: #f8f9fa;
+}
+
+.btn-dark {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #212529;
+  --bs-btn-border-color: #212529;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #424649;
+  --bs-btn-hover-border-color: #373b3e;
+  --bs-btn-focus-shadow-rgb: 66, 70, 73;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #4d5154;
+  --bs-btn-active-border-color: #373b3e;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #212529;
+  --bs-btn-disabled-border-color: #212529;
+}
+
+.btn-outline-primary {
+  --bs-btn-color: #0d6efd;
+  --bs-btn-border-color: #0d6efd;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #0d6efd;
+  --bs-btn-hover-border-color: #0d6efd;
+  --bs-btn-focus-shadow-rgb: 13, 110, 253;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #0d6efd;
+  --bs-btn-active-border-color: #0d6efd;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #0d6efd;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #0d6efd;
+  --bs-gradient: none;
+}
+
+.btn-outline-secondary {
+  --bs-btn-color: #6c757d;
+  --bs-btn-border-color: #6c757d;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #6c757d;
+  --bs-btn-hover-border-color: #6c757d;
+  --bs-btn-focus-shadow-rgb: 108, 117, 125;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #6c757d;
+  --bs-btn-active-border-color: #6c757d;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #6c757d;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #6c757d;
+  --bs-gradient: none;
+}
+
+.btn-outline-success {
+  --bs-btn-color: #198754;
+  --bs-btn-border-color: #198754;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #198754;
+  --bs-btn-hover-border-color: #198754;
+  --bs-btn-focus-shadow-rgb: 25, 135, 84;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #198754;
+  --bs-btn-active-border-color: #198754;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #198754;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #198754;
+  --bs-gradient: none;
+}
+
+.btn-outline-info {
+  --bs-btn-color: #0dcaf0;
+  --bs-btn-border-color: #0dcaf0;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #0dcaf0;
+  --bs-btn-hover-border-color: #0dcaf0;
+  --bs-btn-focus-shadow-rgb: 13, 202, 240;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #0dcaf0;
+  --bs-btn-active-border-color: #0dcaf0;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #0dcaf0;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #0dcaf0;
+  --bs-gradient: none;
+}
+
+.btn-outline-warning {
+  --bs-btn-color: #ffc107;
+  --bs-btn-border-color: #ffc107;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #ffc107;
+  --bs-btn-hover-border-color: #ffc107;
+  --bs-btn-focus-shadow-rgb: 255, 193, 7;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #ffc107;
+  --bs-btn-active-border-color: #ffc107;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #ffc107;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #ffc107;
+  --bs-gradient: none;
+}
+
+.btn-outline-danger {
+  --bs-btn-color: #dc3545;
+  --bs-btn-border-color: #dc3545;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #dc3545;
+  --bs-btn-hover-border-color: #dc3545;
+  --bs-btn-focus-shadow-rgb: 220, 53, 69;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #dc3545;
+  --bs-btn-active-border-color: #dc3545;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #dc3545;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #dc3545;
+  --bs-gradient: none;
+}
+
+.btn-outline-light {
+  --bs-btn-color: #f8f9fa;
+  --bs-btn-border-color: #f8f9fa;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #f8f9fa;
+  --bs-btn-hover-border-color: #f8f9fa;
+  --bs-btn-focus-shadow-rgb: 248, 249, 250;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #f8f9fa;
+  --bs-btn-active-border-color: #f8f9fa;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #f8f9fa;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #f8f9fa;
+  --bs-gradient: none;
+}
+
+.btn-outline-dark {
+  --bs-btn-color: #212529;
+  --bs-btn-border-color: #212529;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #212529;
+  --bs-btn-hover-border-color: #212529;
+  --bs-btn-focus-shadow-rgb: 33, 37, 41;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #212529;
+  --bs-btn-active-border-color: #212529;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #212529;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #212529;
+  --bs-gradient: none;
+}
+
+.btn-link {
+  --bs-btn-font-weight: 400;
+  --bs-btn-color: var(--bs-link-color);
+  --bs-btn-bg: transparent;
+  --bs-btn-border-color: transparent;
+  --bs-btn-hover-color: var(--bs-link-hover-color);
+  --bs-btn-hover-border-color: transparent;
+  --bs-btn-active-color: var(--bs-link-hover-color);
+  --bs-btn-active-border-color: transparent;
+  --bs-btn-disabled-color: #6c757d;
+  --bs-btn-disabled-border-color: transparent;
+  --bs-btn-box-shadow: none;
+  --bs-btn-focus-shadow-rgb: 49, 132, 253;
+  text-decoration: underline;
+}
+.btn-link:focus-visible {
+  color: var(--bs-btn-color);
+}
+.btn-link:hover {
+  color: var(--bs-btn-hover-color);
+}
+
+.btn-lg, .btn-group-lg > .btn {
+  --bs-btn-padding-y: 0.5rem;
+  --bs-btn-padding-x: 1rem;
+  --bs-btn-font-size: 1.25rem;
+  --bs-btn-border-radius: 0.5rem;
+}
+
+.btn-sm, .btn-group-sm > .btn {
+  --bs-btn-padding-y: 0.25rem;
+  --bs-btn-padding-x: 0.5rem;
+  --bs-btn-font-size: 0.875rem;
+  --bs-btn-border-radius: 0.25rem;
+}
+
+.fade {
+  transition: opacity 0.15s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fade {
+    transition: none;
+  }
+}
+.fade:not(.show) {
+  opacity: 0;
+}
+
+.collapse:not(.show) {
+  display: none;
+}
+
+.collapsing {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.35s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .collapsing {
+    transition: none;
+  }
+}
+.collapsing.collapse-horizontal {
+  width: 0;
+  height: auto;
+  transition: width 0.35s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .collapsing.collapse-horizontal {
+    transition: none;
+  }
+}
+
+.dropup,
+.dropend,
+.dropdown,
+.dropstart,
+.dropup-center,
+.dropdown-center {
+  position: relative;
+}
+
+.dropdown-toggle {
+  white-space: nowrap;
+}
+.dropdown-toggle::after {
+  display: inline-block;
+  margin-left: 0.255em;
+  vertical-align: 0.255em;
+  content: "";
+  border-top: 0.3em solid;
+  border-right: 0.3em solid transparent;
+  border-bottom: 0;
+  border-left: 0.3em solid transparent;
+}
+.dropdown-toggle:empty::after {
+  margin-left: 0;
+}
+
+.dropdown-menu {
+  --bs-dropdown-zindex: 1000;
+  --bs-dropdown-min-width: 10rem;
+  --bs-dropdown-padding-x: 0;
+  --bs-dropdown-padding-y: 0.5rem;
+  --bs-dropdown-spacer: 0.125rem;
+  --bs-dropdown-font-size: 1rem;
+  --bs-dropdown-color: #212529;
+  --bs-dropdown-bg: #fff;
+  --bs-dropdown-border-color: var(--bs-border-color-translucent);
+  --bs-dropdown-border-radius: 0.375rem;
+  --bs-dropdown-border-width: 1px;
+  --bs-dropdown-inner-border-radius: calc(0.375rem - 1px);
+  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
+  --bs-dropdown-divider-margin-y: 0.5rem;
+  --bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  --bs-dropdown-link-color: #212529;
+  --bs-dropdown-link-hover-color: #1e2125;
+  --bs-dropdown-link-hover-bg: #e9ecef;
+  --bs-dropdown-link-active-color: #fff;
+  --bs-dropdown-link-active-bg: #0d6efd;
+  --bs-dropdown-link-disabled-color: #adb5bd;
+  --bs-dropdown-item-padding-x: 1rem;
+  --bs-dropdown-item-padding-y: 0.25rem;
+  --bs-dropdown-header-color: #6c757d;
+  --bs-dropdown-header-padding-x: 1rem;
+  --bs-dropdown-header-padding-y: 0.5rem;
+  position: absolute;
+  z-index: var(--bs-dropdown-zindex);
+  display: none;
+  min-width: var(--bs-dropdown-min-width);
+  padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
+  margin: 0;
+  font-size: var(--bs-dropdown-font-size);
+  color: var(--bs-dropdown-color);
+  text-align: left;
+  list-style: none;
+  background-color: var(--bs-dropdown-bg);
+  background-clip: padding-box;
+  border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
+  border-radius: var(--bs-dropdown-border-radius);
+}
+.dropdown-menu[data-bs-popper] {
+  top: 100%;
+  left: 0;
+  margin-top: var(--bs-dropdown-spacer);
+}
+
+.dropdown-menu-start {
+  --bs-position: start;
+}
+.dropdown-menu-start[data-bs-popper] {
+  right: auto;
+  left: 0;
+}
+
+.dropdown-menu-end {
+  --bs-position: end;
+}
+.dropdown-menu-end[data-bs-popper] {
+  right: 0;
+  left: auto;
+}
+
+@media (min-width: 576px) {
+  .dropdown-menu-sm-start {
+    --bs-position: start;
+  }
+  .dropdown-menu-sm-start[data-bs-popper] {
+    right: auto;
+    left: 0;
+  }
+  .dropdown-menu-sm-end {
+    --bs-position: end;
+  }
+  .dropdown-menu-sm-end[data-bs-popper] {
+    right: 0;
+    left: auto;
+  }
+}
+@media (min-width: 768px) {
+  .dropdown-menu-md-start {
+    --bs-position: start;
+  }
+  .dropdown-menu-md-start[data-bs-popper] {
+    right: auto;
+    left: 0;
+  }
+  .dropdown-menu-md-end {
+    --bs-position: end;
+  }
+  .dropdown-menu-md-end[data-bs-popper] {
+    right: 0;
+    left: auto;
+  }
+}
+@media (min-width: 992px) {
+  .dropdown-menu-lg-start {
+    --bs-position: start;
+  }
+  .dropdown-menu-lg-start[data-bs-popper] {
+    right: auto;
+    left: 0;
+  }
+  .dropdown-menu-lg-end {
+    --bs-position: end;
+  }
+  .dropdown-menu-lg-end[data-bs-popper] {
+    right: 0;
+    left: auto;
+  }
+}
+@media (min-width: 1200px) {
+  .dropdown-menu-xl-start {
+    --bs-position: start;
+  }
+  .dropdown-menu-xl-start[data-bs-popper] {
+    right: auto;
+    left: 0;
+  }
+  .dropdown-menu-xl-end {
+    --bs-position: end;
+  }
+  .dropdown-menu-xl-end[data-bs-popper] {
+    right: 0;
+    left: auto;
+  }
+}
+@media (min-width: 1400px) {
+  .dropdown-menu-xxl-start {
+    --bs-position: start;
+  }
+  .dropdown-menu-xxl-start[data-bs-popper] {
+    right: auto;
+    left: 0;
+  }
+  .dropdown-menu-xxl-end {
+    --bs-position: end;
+  }
+  .dropdown-menu-xxl-end[data-bs-popper] {
+    right: 0;
+    left: auto;
+  }
+}
+.dropup .dropdown-menu[data-bs-popper] {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: var(--bs-dropdown-spacer);
+}
+.dropup .dropdown-toggle::after {
+  display: inline-block;
+  margin-left: 0.255em;
+  vertical-align: 0.255em;
+  content: "";
+  border-top: 0;
+  border-right: 0.3em solid transparent;
+  border-bottom: 0.3em solid;
+  border-left: 0.3em solid transparent;
+}
+.dropup .dropdown-toggle:empty::after {
+  margin-left: 0;
+}
+
+.dropend .dropdown-menu[data-bs-popper] {
+  top: 0;
+  right: auto;
+  left: 100%;
+  margin-top: 0;
+  margin-left: var(--bs-dropdown-spacer);
+}
+.dropend .dropdown-toggle::after {
+  display: inline-block;
+  margin-left: 0.255em;
+  vertical-align: 0.255em;
+  content: "";
+  border-top: 0.3em solid transparent;
+  border-right: 0;
+  border-bottom: 0.3em solid transparent;
+  border-left: 0.3em solid;
+}
+.dropend .dropdown-toggle:empty::after {
+  margin-left: 0;
+}
+.dropend .dropdown-toggle::after {
+  vertical-align: 0;
+}
+
+.dropstart .dropdown-menu[data-bs-popper] {
+  top: 0;
+  right: 100%;
+  left: auto;
+  margin-top: 0;
+  margin-right: var(--bs-dropdown-spacer);
+}
+.dropstart .dropdown-toggle::after {
+  display: inline-block;
+  margin-left: 0.255em;
+  vertical-align: 0.255em;
+  content: "";
+}
+.dropstart .dropdown-toggle::after {
+  display: none;
+}
+.dropstart .dropdown-toggle::before {
+  display: inline-block;
+  margin-right: 0.255em;
+  vertical-align: 0.255em;
+  content: "";
+  border-top: 0.3em solid transparent;
+  border-right: 0.3em solid;
+  border-bottom: 0.3em solid transparent;
+}
+.dropstart .dropdown-toggle:empty::after {
+  margin-left: 0;
+}
+.dropstart .dropdown-toggle::before {
+  vertical-align: 0;
+}
+
+.dropdown-divider {
+  height: 0;
+  margin: var(--bs-dropdown-divider-margin-y) 0;
+  overflow: hidden;
+  border-top: 1px solid var(--bs-dropdown-divider-bg);
+  opacity: 1;
+}
+
+.dropdown-item {
+  display: block;
+  width: 100%;
+  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
+  clear: both;
+  font-weight: 400;
+  color: var(--bs-dropdown-link-color);
+  text-align: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+}
+.dropdown-item:hover, .dropdown-item:focus {
+  color: var(--bs-dropdown-link-hover-color);
+  background-color: var(--bs-dropdown-link-hover-bg);
+}
+.dropdown-item.active, .dropdown-item:active {
+  color: var(--bs-dropdown-link-active-color);
+  text-decoration: none;
+  background-color: var(--bs-dropdown-link-active-bg);
+}
+.dropdown-item.disabled, .dropdown-item:disabled {
+  color: var(--bs-dropdown-link-disabled-color);
+  pointer-events: none;
+  background-color: transparent;
+}
+
+.dropdown-menu.show {
+  display: block;
+}
+
+.dropdown-header {
+  display: block;
+  padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
+  margin-bottom: 0;
+  font-size: 0.875rem;
+  color: var(--bs-dropdown-header-color);
+  white-space: nowrap;
+}
+
+.dropdown-item-text {
+  display: block;
+  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
+  color: var(--bs-dropdown-link-color);
+}
+
+.dropdown-menu-dark {
+  --bs-dropdown-color: #dee2e6;
+  --bs-dropdown-bg: #343a40;
+  --bs-dropdown-border-color: var(--bs-border-color-translucent);
+  --bs-dropdown-box-shadow: ;
+  --bs-dropdown-link-color: #dee2e6;
+  --bs-dropdown-link-hover-color: #fff;
+  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
+  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
+  --bs-dropdown-link-active-color: #fff;
+  --bs-dropdown-link-active-bg: #0d6efd;
+  --bs-dropdown-link-disabled-color: #adb5bd;
+  --bs-dropdown-header-color: #adb5bd;
+}
+
+.btn-group,
+.btn-group-vertical {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+.btn-group > .btn,
+.btn-group-vertical > .btn {
+  position: relative;
+  flex: 1 1 auto;
+}
+.btn-group > .btn-check:checked + .btn,
+.btn-group > .btn-check:focus + .btn,
+.btn-group > .btn:hover,
+.btn-group > .btn:focus,
+.btn-group > .btn:active,
+.btn-group > .btn.active,
+.btn-group-vertical > .btn-check:checked + .btn,
+.btn-group-vertical > .btn-check:focus + .btn,
+.btn-group-vertical > .btn:hover,
+.btn-group-vertical > .btn:focus,
+.btn-group-vertical > .btn:active,
+.btn-group-vertical > .btn.active {
+  z-index: 1;
+}
+
+.btn-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+.btn-toolbar .input-group {
+  width: auto;
+}
+
+.btn-group {
+  border-radius: 0.375rem;
+}
+.btn-group > :not(.btn-check:first-child) + .btn,
+.btn-group > .btn-group:not(:first-child) {
+  margin-left: -1px;
+}
+.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
+.btn-group > .btn.dropdown-toggle-split:first-child,
+.btn-group > .btn-group:not(:last-child) > .btn {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.btn-group > .btn:nth-child(n+3),
+.btn-group > :not(.btn-check) + .btn,
+.btn-group > .btn-group:not(:first-child) > .btn {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.dropdown-toggle-split {
+  padding-right: 0.5625rem;
+  padding-left: 0.5625rem;
+}
+.dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after, .dropend .dropdown-toggle-split::after {
+  margin-left: 0;
+}
+.dropstart .dropdown-toggle-split::before {
+  margin-right: 0;
+}
+
+.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
+  padding-right: 0.375rem;
+  padding-left: 0.375rem;
+}
+
+.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+}
+
+.btn-group-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+.btn-group-vertical > .btn,
+.btn-group-vertical > .btn-group {
+  width: 100%;
+}
+.btn-group-vertical > .btn:not(:first-child),
+.btn-group-vertical > .btn-group:not(:first-child) {
+  margin-top: -1px;
+}
+.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
+.btn-group-vertical > .btn-group:not(:last-child) > .btn {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.btn-group-vertical > .btn ~ .btn,
+.btn-group-vertical > .btn-group:not(:first-child) > .btn {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.nav {
+  --bs-nav-link-padding-x: 1rem;
+  --bs-nav-link-padding-y: 0.5rem;
+  --bs-nav-link-font-weight: ;
+  --bs-nav-link-color: var(--bs-link-color);
+  --bs-nav-link-hover-color: var(--bs-link-hover-color);
+  --bs-nav-link-disabled-color: #6c757d;
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.nav-link {
+  display: block;
+  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
+  font-size: var(--bs-nav-link-font-size);
+  font-weight: var(--bs-nav-link-font-weight);
+  color: var(--bs-nav-link-color);
+  text-decoration: none;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .nav-link {
+    transition: none;
+  }
+}
+.nav-link:hover, .nav-link:focus {
+  color: var(--bs-nav-link-hover-color);
+}
+.nav-link.disabled {
+  color: var(--bs-nav-link-disabled-color);
+  pointer-events: none;
+  cursor: default;
+}
+
+.nav-tabs {
+  --bs-nav-tabs-border-width: 1px;
+  --bs-nav-tabs-border-color: #dee2e6;
+  --bs-nav-tabs-border-radius: 0.375rem;
+  --bs-nav-tabs-link-hover-border-color: #e9ecef #e9ecef #dee2e6;
+  --bs-nav-tabs-link-active-color: #495057;
+  --bs-nav-tabs-link-active-bg: #fff;
+  --bs-nav-tabs-link-active-border-color: #dee2e6 #dee2e6 #fff;
+  border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
+}
+.nav-tabs .nav-link {
+  margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
+  background: none;
+  border: var(--bs-nav-tabs-border-width) solid transparent;
+  border-top-left-radius: var(--bs-nav-tabs-border-radius);
+  border-top-right-radius: var(--bs-nav-tabs-border-radius);
+}
+.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
+  isolation: isolate;
+  border-color: var(--bs-nav-tabs-link-hover-border-color);
+}
+.nav-tabs .nav-link.disabled, .nav-tabs .nav-link:disabled {
+  color: var(--bs-nav-link-disabled-color);
+  background-color: transparent;
+  border-color: transparent;
+}
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-item.show .nav-link {
+  color: var(--bs-nav-tabs-link-active-color);
+  background-color: var(--bs-nav-tabs-link-active-bg);
+  border-color: var(--bs-nav-tabs-link-active-border-color);
+}
+.nav-tabs .dropdown-menu {
+  margin-top: calc(-1 * var(--bs-nav-tabs-border-width));
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.nav-pills {
+  --bs-nav-pills-border-radius: 0.375rem;
+  --bs-nav-pills-link-active-color: #fff;
+  --bs-nav-pills-link-active-bg: #0d6efd;
+}
+.nav-pills .nav-link {
+  background: none;
+  border: 0;
+  border-radius: var(--bs-nav-pills-border-radius);
+}
+.nav-pills .nav-link:disabled {
+  color: var(--bs-nav-link-disabled-color);
+  background-color: transparent;
+  border-color: transparent;
+}
+.nav-pills .nav-link.active,
+.nav-pills .show > .nav-link {
+  color: var(--bs-nav-pills-link-active-color);
+  background-color: var(--bs-nav-pills-link-active-bg);
+}
+
+.nav-fill > .nav-link,
+.nav-fill .nav-item {
+  flex: 1 1 auto;
+  text-align: center;
+}
+
+.nav-justified > .nav-link,
+.nav-justified .nav-item {
+  flex-basis: 0;
+  flex-grow: 1;
+  text-align: center;
+}
+
+.nav-fill .nav-item .nav-link,
+.nav-justified .nav-item .nav-link {
+  width: 100%;
+}
+
+.tab-content > .tab-pane {
+  display: none;
+}
+.tab-content > .active {
+  display: block;
+}
+
+.navbar {
+  --bs-navbar-padding-x: 0;
+  --bs-navbar-padding-y: 0.5rem;
+  --bs-navbar-color: rgba(0, 0, 0, 0.55);
+  --bs-navbar-hover-color: rgba(0, 0, 0, 0.7);
+  --bs-navbar-disabled-color: rgba(0, 0, 0, 0.3);
+  --bs-navbar-active-color: rgba(0, 0, 0, 0.9);
+  --bs-navbar-brand-padding-y: 0.3125rem;
+  --bs-navbar-brand-margin-end: 1rem;
+  --bs-navbar-brand-font-size: 1.25rem;
+  --bs-navbar-brand-color: rgba(0, 0, 0, 0.9);
+  --bs-navbar-brand-hover-color: rgba(0, 0, 0, 0.9);
+  --bs-navbar-nav-link-padding-x: 0.5rem;
+  --bs-navbar-toggler-padding-y: 0.25rem;
+  --bs-navbar-toggler-padding-x: 0.75rem;
+  --bs-navbar-toggler-font-size: 1.25rem;
+  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+  --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
+  --bs-navbar-toggler-border-radius: 0.375rem;
+  --bs-navbar-toggler-focus-width: 0.25rem;
+  --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
+}
+.navbar > .container,
+.navbar > .container-fluid,
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
+  display: flex;
+  flex-wrap: inherit;
+  align-items: center;
+  justify-content: space-between;
+}
+.navbar-brand {
+  padding-top: var(--bs-navbar-brand-padding-y);
+  padding-bottom: var(--bs-navbar-brand-padding-y);
+  margin-right: var(--bs-navbar-brand-margin-end);
+  font-size: var(--bs-navbar-brand-font-size);
+  color: var(--bs-navbar-brand-color);
+  text-decoration: none;
+  white-space: nowrap;
+}
+.navbar-brand:hover, .navbar-brand:focus {
+  color: var(--bs-navbar-brand-hover-color);
+}
+
+.navbar-nav {
+  --bs-nav-link-padding-x: 0;
+  --bs-nav-link-padding-y: 0.5rem;
+  --bs-nav-link-font-weight: ;
+  --bs-nav-link-color: var(--bs-navbar-color);
+  --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
+  --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+.navbar-nav .show > .nav-link,
+.navbar-nav .nav-link.active {
+  color: var(--bs-navbar-active-color);
+}
+.navbar-nav .dropdown-menu {
+  position: static;
+}
+
+.navbar-text {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: var(--bs-navbar-color);
+}
+.navbar-text a,
+.navbar-text a:hover,
+.navbar-text a:focus {
+  color: var(--bs-navbar-active-color);
+}
+
+.navbar-collapse {
+  flex-basis: 100%;
+  flex-grow: 1;
+  align-items: center;
+}
+
+.navbar-toggler {
+  padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
+  font-size: var(--bs-navbar-toggler-font-size);
+  line-height: 1;
+  color: var(--bs-navbar-color);
+  background-color: transparent;
+  border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
+  border-radius: var(--bs-navbar-toggler-border-radius);
+  transition: var(--bs-navbar-toggler-transition);
+}
+@media (prefers-reduced-motion: reduce) {
+  .navbar-toggler {
+    transition: none;
+  }
+}
+.navbar-toggler:hover {
+  text-decoration: none;
+}
+.navbar-toggler:focus {
+  text-decoration: none;
+  outline: 0;
+  box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);
+}
+
+.navbar-toggler-icon {
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: middle;
+  background-image: var(--bs-navbar-toggler-icon-bg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+}
+
+.navbar-nav-scroll {
+  max-height: var(--bs-scroll-height, 75vh);
+  overflow-y: auto;
+}
+
+@media (min-width: 576px) {
+  .navbar-expand-sm {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-sm .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-sm .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-sm .navbar-nav .nav-link {
+    padding-right: var(--bs-navbar-nav-link-padding-x);
+    padding-left: var(--bs-navbar-nav-link-padding-x);
+  }
+  .navbar-expand-sm .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-sm .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-sm .navbar-toggler {
+    display: none;
+  }
+  .navbar-expand-sm .offcanvas {
+    position: static;
+    z-index: auto;
+    flex-grow: 1;
+    width: auto !important;
+    height: auto !important;
+    visibility: visible !important;
+    background-color: transparent !important;
+    border: 0 !important;
+    transform: none !important;
+    transition: none;
+  }
+  .navbar-expand-sm .offcanvas .offcanvas-header {
+    display: none;
+  }
+  .navbar-expand-sm .offcanvas .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+  }
+}
+@media (min-width: 768px) {
+  .navbar-expand-md {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-md .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-md .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-md .navbar-nav .nav-link {
+    padding-right: var(--bs-navbar-nav-link-padding-x);
+    padding-left: var(--bs-navbar-nav-link-padding-x);
+  }
+  .navbar-expand-md .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-md .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-md .navbar-toggler {
+    display: none;
+  }
+  .navbar-expand-md .offcanvas {
+    position: static;
+    z-index: auto;
+    flex-grow: 1;
+    width: auto !important;
+    height: auto !important;
+    visibility: visible !important;
+    background-color: transparent !important;
+    border: 0 !important;
+    transform: none !important;
+    transition: none;
+  }
+  .navbar-expand-md .offcanvas .offcanvas-header {
+    display: none;
+  }
+  .navbar-expand-md .offcanvas .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+  }
+}
+@media (min-width: 992px) {
+  .navbar-expand-lg {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-lg .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-lg .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-lg .navbar-nav .nav-link {
+    padding-right: var(--bs-navbar-nav-link-padding-x);
+    padding-left: var(--bs-navbar-nav-link-padding-x);
+  }
+  .navbar-expand-lg .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-lg .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-lg .navbar-toggler {
+    display: none;
+  }
+  .navbar-expand-lg .offcanvas {
+    position: static;
+    z-index: auto;
+    flex-grow: 1;
+    width: auto !important;
+    height: auto !important;
+    visibility: visible !important;
+    background-color: transparent !important;
+    border: 0 !important;
+    transform: none !important;
+    transition: none;
+  }
+  .navbar-expand-lg .offcanvas .offcanvas-header {
+    display: none;
+  }
+  .navbar-expand-lg .offcanvas .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+  }
+}
+@media (min-width: 1200px) {
+  .navbar-expand-xl {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-xl .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-xl .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-xl .navbar-nav .nav-link {
+    padding-right: var(--bs-navbar-nav-link-padding-x);
+    padding-left: var(--bs-navbar-nav-link-padding-x);
+  }
+  .navbar-expand-xl .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-xl .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-xl .navbar-toggler {
+    display: none;
+  }
+  .navbar-expand-xl .offcanvas {
+    position: static;
+    z-index: auto;
+    flex-grow: 1;
+    width: auto !important;
+    height: auto !important;
+    visibility: visible !important;
+    background-color: transparent !important;
+    border: 0 !important;
+    transform: none !important;
+    transition: none;
+  }
+  .navbar-expand-xl .offcanvas .offcanvas-header {
+    display: none;
+  }
+  .navbar-expand-xl .offcanvas .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+  }
+}
+@media (min-width: 1400px) {
+  .navbar-expand-xxl {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-xxl .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-xxl .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-xxl .navbar-nav .nav-link {
+    padding-right: var(--bs-navbar-nav-link-padding-x);
+    padding-left: var(--bs-navbar-nav-link-padding-x);
+  }
+  .navbar-expand-xxl .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-xxl .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-xxl .navbar-toggler {
+    display: none;
+  }
+  .navbar-expand-xxl .offcanvas {
+    position: static;
+    z-index: auto;
+    flex-grow: 1;
+    width: auto !important;
+    height: auto !important;
+    visibility: visible !important;
+    background-color: transparent !important;
+    border: 0 !important;
+    transform: none !important;
+    transition: none;
+  }
+  .navbar-expand-xxl .offcanvas .offcanvas-header {
+    display: none;
+  }
+  .navbar-expand-xxl .offcanvas .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+  }
+}
+.navbar-expand {
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+}
+.navbar-expand .navbar-nav {
+  flex-direction: row;
+}
+.navbar-expand .navbar-nav .dropdown-menu {
+  position: absolute;
+}
+.navbar-expand .navbar-nav .nav-link {
+  padding-right: var(--bs-navbar-nav-link-padding-x);
+  padding-left: var(--bs-navbar-nav-link-padding-x);
+}
+.navbar-expand .navbar-nav-scroll {
+  overflow: visible;
+}
+.navbar-expand .navbar-collapse {
+  display: flex !important;
+  flex-basis: auto;
+}
+.navbar-expand .navbar-toggler {
+  display: none;
+}
+.navbar-expand .offcanvas {
+  position: static;
+  z-index: auto;
+  flex-grow: 1;
+  width: auto !important;
+  height: auto !important;
+  visibility: visible !important;
+  background-color: transparent !important;
+  border: 0 !important;
+  transform: none !important;
+  transition: none;
+}
+.navbar-expand .offcanvas .offcanvas-header {
+  display: none;
+}
+.navbar-expand .offcanvas .offcanvas-body {
+  display: flex;
+  flex-grow: 0;
+  padding: 0;
+  overflow-y: visible;
+}
+
+.navbar-dark {
+  --bs-navbar-color: rgba(255, 255, 255, 0.55);
+  --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
+  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
+  --bs-navbar-active-color: #fff;
+  --bs-navbar-brand-color: #fff;
+  --bs-navbar-brand-hover-color: #fff;
+  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
+  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+.card {
+  --bs-card-spacer-y: 1rem;
+  --bs-card-spacer-x: 1rem;
+  --bs-card-title-spacer-y: 0.5rem;
+  --bs-card-border-width: 1px;
+  --bs-card-border-color: var(--bs-border-color-translucent);
+  --bs-card-border-radius: 0.375rem;
+  --bs-card-box-shadow: ;
+  --bs-card-inner-border-radius: calc(0.375rem - 1px);
+  --bs-card-cap-padding-y: 0.5rem;
+  --bs-card-cap-padding-x: 1rem;
+  --bs-card-cap-bg: rgba(0, 0, 0, 0.03);
+  --bs-card-cap-color: ;
+  --bs-card-height: ;
+  --bs-card-color: ;
+  --bs-card-bg: #fff;
+  --bs-card-img-overlay-padding: 1rem;
+  --bs-card-group-margin: 0.75rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  height: var(--bs-card-height);
+  word-wrap: break-word;
+  background-color: var(--bs-card-bg);
+  background-clip: border-box;
+  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
+  border-radius: var(--bs-card-border-radius);
+}
+.card > hr {
+  margin-right: 0;
+  margin-left: 0;
+}
+.card > .list-group {
+  border-top: inherit;
+  border-bottom: inherit;
+}
+.card > .list-group:first-child {
+  border-top-width: 0;
+  border-top-left-radius: var(--bs-card-inner-border-radius);
+  border-top-right-radius: var(--bs-card-inner-border-radius);
+}
+.card > .list-group:last-child {
+  border-bottom-width: 0;
+  border-bottom-right-radius: var(--bs-card-inner-border-radius);
+  border-bottom-left-radius: var(--bs-card-inner-border-radius);
+}
+.card > .card-header + .list-group,
+.card > .list-group + .card-footer {
+  border-top: 0;
+}
+
+.card-body {
+  flex: 1 1 auto;
+  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
+  color: var(--bs-card-color);
+}
+
+.card-title {
+  margin-bottom: var(--bs-card-title-spacer-y);
+}
+
+.card-subtitle {
+  margin-top: calc(-0.5 * var(--bs-card-title-spacer-y));
+  margin-bottom: 0;
+}
+
+.card-text:last-child {
+  margin-bottom: 0;
+}
+
+.card-link + .card-link {
+  margin-left: var(--bs-card-spacer-x);
+}
+
+.card-header {
+  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
+  margin-bottom: 0;
+  color: var(--bs-card-cap-color);
+  background-color: var(--bs-card-cap-bg);
+  border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
+}
+.card-header:first-child {
+  border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
+}
+
+.card-footer {
+  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
+  color: var(--bs-card-cap-color);
+  background-color: var(--bs-card-cap-bg);
+  border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
+}
+.card-footer:last-child {
+  border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
+}
+
+.card-header-tabs {
+  margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
+  margin-bottom: calc(-1 * var(--bs-card-cap-padding-y));
+  margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
+  border-bottom: 0;
+}
+.card-header-tabs .nav-link.active {
+  background-color: var(--bs-card-bg);
+  border-bottom-color: var(--bs-card-bg);
+}
+
+.card-header-pills {
+  margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
+  margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
+}
+
+.card-img-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: var(--bs-card-img-overlay-padding);
+  border-radius: var(--bs-card-inner-border-radius);
+}
+
+.card-img,
+.card-img-top,
+.card-img-bottom {
+  width: 100%;
+}
+
+.card-img,
+.card-img-top {
+  border-top-left-radius: var(--bs-card-inner-border-radius);
+  border-top-right-radius: var(--bs-card-inner-border-radius);
+}
+
+.card-img,
+.card-img-bottom {
+  border-bottom-right-radius: var(--bs-card-inner-border-radius);
+  border-bottom-left-radius: var(--bs-card-inner-border-radius);
+}
+
+.card-group > .card {
+  margin-bottom: var(--bs-card-group-margin);
+}
+@media (min-width: 576px) {
+  .card-group {
+    display: flex;
+    flex-flow: row wrap;
+  }
+  .card-group > .card {
+    flex: 1 0 0%;
+    margin-bottom: 0;
+  }
+  .card-group > .card + .card {
+    margin-left: 0;
+    border-left: 0;
+  }
+  .card-group > .card:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .card-group > .card:not(:last-child) .card-img-top,
+  .card-group > .card:not(:last-child) .card-header {
+    border-top-right-radius: 0;
+  }
+  .card-group > .card:not(:last-child) .card-img-bottom,
+  .card-group > .card:not(:last-child) .card-footer {
+    border-bottom-right-radius: 0;
+  }
+  .card-group > .card:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .card-group > .card:not(:first-child) .card-img-top,
+  .card-group > .card:not(:first-child) .card-header {
+    border-top-left-radius: 0;
+  }
+  .card-group > .card:not(:first-child) .card-img-bottom,
+  .card-group > .card:not(:first-child) .card-footer {
+    border-bottom-left-radius: 0;
+  }
+}
+
+.accordion {
+  --bs-accordion-color: #212529;
+  --bs-accordion-bg: #fff;
+  --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
+  --bs-accordion-border-color: var(--bs-border-color);
+  --bs-accordion-border-width: 1px;
+  --bs-accordion-border-radius: 0.375rem;
+  --bs-accordion-inner-border-radius: calc(0.375rem - 1px);
+  --bs-accordion-btn-padding-x: 1.25rem;
+  --bs-accordion-btn-padding-y: 1rem;
+  --bs-accordion-btn-color: #212529;
+  --bs-accordion-btn-bg: var(--bs-accordion-bg);
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon-width: 1.25rem;
+  --bs-accordion-btn-icon-transform: rotate(-180deg);
+  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-focus-border-color: #86b7fe;
+  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+  --bs-accordion-body-padding-x: 1.25rem;
+  --bs-accordion-body-padding-y: 1rem;
+  --bs-accordion-active-color: #0c63e4;
+  --bs-accordion-active-bg: #e7f1ff;
+}
+
+.accordion-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
+  font-size: 1rem;
+  color: var(--bs-accordion-btn-color);
+  text-align: left;
+  background-color: var(--bs-accordion-btn-bg);
+  border: 0;
+  border-radius: 0;
+  overflow-anchor: none;
+  transition: var(--bs-accordion-transition);
+}
+@media (prefers-reduced-motion: reduce) {
+  .accordion-button {
+    transition: none;
+  }
+}
+.accordion-button:not(.collapsed) {
+  color: var(--bs-accordion-active-color);
+  background-color: var(--bs-accordion-active-bg);
+  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
+}
+.accordion-button:not(.collapsed)::after {
+  background-image: var(--bs-accordion-btn-active-icon);
+  transform: var(--bs-accordion-btn-icon-transform);
+}
+.accordion-button::after {
+  flex-shrink: 0;
+  width: var(--bs-accordion-btn-icon-width);
+  height: var(--bs-accordion-btn-icon-width);
+  margin-left: auto;
+  content: "";
+  background-image: var(--bs-accordion-btn-icon);
+  background-repeat: no-repeat;
+  background-size: var(--bs-accordion-btn-icon-width);
+  transition: var(--bs-accordion-btn-icon-transition);
+}
+@media (prefers-reduced-motion: reduce) {
+  .accordion-button::after {
+    transition: none;
+  }
+}
+.accordion-button:hover {
+  z-index: 2;
+}
+.accordion-button:focus {
+  z-index: 3;
+  border-color: var(--bs-accordion-btn-focus-border-color);
+  outline: 0;
+  box-shadow: var(--bs-accordion-btn-focus-box-shadow);
+}
+
+.accordion-header {
+  margin-bottom: 0;
+}
+
+.accordion-item {
+  color: var(--bs-accordion-color);
+  background-color: var(--bs-accordion-bg);
+  border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
+}
+.accordion-item:first-of-type {
+  border-top-left-radius: var(--bs-accordion-border-radius);
+  border-top-right-radius: var(--bs-accordion-border-radius);
+}
+.accordion-item:first-of-type .accordion-button {
+  border-top-left-radius: var(--bs-accordion-inner-border-radius);
+  border-top-right-radius: var(--bs-accordion-inner-border-radius);
+}
+.accordion-item:not(:first-of-type) {
+  border-top: 0;
+}
+.accordion-item:last-of-type {
+  border-bottom-right-radius: var(--bs-accordion-border-radius);
+  border-bottom-left-radius: var(--bs-accordion-border-radius);
+}
+.accordion-item:last-of-type .accordion-button.collapsed {
+  border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
+  border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
+}
+.accordion-item:last-of-type .accordion-collapse {
+  border-bottom-right-radius: var(--bs-accordion-border-radius);
+  border-bottom-left-radius: var(--bs-accordion-border-radius);
+}
+
+.accordion-body {
+  padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
+}
+
+.accordion-flush .accordion-collapse {
+  border-width: 0;
+}
+.accordion-flush .accordion-item {
+  border-right: 0;
+  border-left: 0;
+  border-radius: 0;
+}
+.accordion-flush .accordion-item:first-child {
+  border-top: 0;
+}
+.accordion-flush .accordion-item:last-child {
+  border-bottom: 0;
+}
+.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
+  border-radius: 0;
+}
+
+.breadcrumb {
+  --bs-breadcrumb-padding-x: 0;
+  --bs-breadcrumb-padding-y: 0;
+  --bs-breadcrumb-margin-bottom: 1rem;
+  --bs-breadcrumb-bg: ;
+  --bs-breadcrumb-border-radius: ;
+  --bs-breadcrumb-divider-color: #6c757d;
+  --bs-breadcrumb-item-padding-x: 0.5rem;
+  --bs-breadcrumb-item-active-color: #6c757d;
+  display: flex;
+  flex-wrap: wrap;
+  padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
+  margin-bottom: var(--bs-breadcrumb-margin-bottom);
+  font-size: var(--bs-breadcrumb-font-size);
+  list-style: none;
+  background-color: var(--bs-breadcrumb-bg);
+  border-radius: var(--bs-breadcrumb-border-radius);
+}
+
+.breadcrumb-item + .breadcrumb-item {
+  padding-left: var(--bs-breadcrumb-item-padding-x);
+}
+.breadcrumb-item + .breadcrumb-item::before {
+  float: left;
+  padding-right: var(--bs-breadcrumb-item-padding-x);
+  color: var(--bs-breadcrumb-divider-color);
+  content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */;
+}
+.breadcrumb-item.active {
+  color: var(--bs-breadcrumb-item-active-color);
+}
+
+.pagination, .datatable-pagination ul {
+  --bs-pagination-padding-x: 0.75rem;
+  --bs-pagination-padding-y: 0.375rem;
+  --bs-pagination-font-size: 1rem;
+  --bs-pagination-color: var(--bs-link-color);
+  --bs-pagination-bg: #fff;
+  --bs-pagination-border-width: 1px;
+  --bs-pagination-border-color: #dee2e6;
+  --bs-pagination-border-radius: 0.375rem;
+  --bs-pagination-hover-color: var(--bs-link-hover-color);
+  --bs-pagination-hover-bg: #e9ecef;
+  --bs-pagination-hover-border-color: #dee2e6;
+  --bs-pagination-focus-color: var(--bs-link-hover-color);
+  --bs-pagination-focus-bg: #e9ecef;
+  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+  --bs-pagination-active-color: #fff;
+  --bs-pagination-active-bg: #0d6efd;
+  --bs-pagination-active-border-color: #0d6efd;
+  --bs-pagination-disabled-color: #6c757d;
+  --bs-pagination-disabled-bg: #fff;
+  --bs-pagination-disabled-border-color: #dee2e6;
+  display: flex;
+  padding-left: 0;
+  list-style: none;
+}
+
+.page-link, .datatable-pagination a {
+  position: relative;
+  display: block;
+  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
+  font-size: var(--bs-pagination-font-size);
+  color: var(--bs-pagination-color);
+  text-decoration: none;
+  background-color: var(--bs-pagination-bg);
+  border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .page-link, .datatable-pagination a {
+    transition: none;
+  }
+}
+.page-link:hover, .datatable-pagination a:hover {
+  z-index: 2;
+  color: var(--bs-pagination-hover-color);
+  background-color: var(--bs-pagination-hover-bg);
+  border-color: var(--bs-pagination-hover-border-color);
+}
+.page-link:focus, .datatable-pagination a:focus {
+  z-index: 3;
+  color: var(--bs-pagination-focus-color);
+  background-color: var(--bs-pagination-focus-bg);
+  outline: 0;
+  box-shadow: var(--bs-pagination-focus-box-shadow);
+}
+.page-link.active, .datatable-pagination a.active, .active > .page-link, .datatable-pagination .active > a {
+  z-index: 3;
+  color: var(--bs-pagination-active-color);
+  background-color: var(--bs-pagination-active-bg);
+  border-color: var(--bs-pagination-active-border-color);
+}
+.page-link.disabled, .datatable-pagination a.disabled, .disabled > .page-link, .datatable-pagination .disabled > a {
+  color: var(--bs-pagination-disabled-color);
+  pointer-events: none;
+  background-color: var(--bs-pagination-disabled-bg);
+  border-color: var(--bs-pagination-disabled-border-color);
+}
+
+.page-item:not(:first-child) .page-link, .page-item:not(:first-child) .datatable-pagination a, .datatable-pagination .page-item:not(:first-child) a, .datatable-pagination li:not(:first-child) .page-link, .datatable-pagination li:not(:first-child) a {
+  margin-left: -1px;
+}
+.page-item:first-child .page-link, .page-item:first-child .datatable-pagination a, .datatable-pagination .page-item:first-child a, .datatable-pagination li:first-child .page-link, .datatable-pagination li:first-child a {
+  border-top-left-radius: var(--bs-pagination-border-radius);
+  border-bottom-left-radius: var(--bs-pagination-border-radius);
+}
+.page-item:last-child .page-link, .page-item:last-child .datatable-pagination a, .datatable-pagination .page-item:last-child a, .datatable-pagination li:last-child .page-link, .datatable-pagination li:last-child a {
+  border-top-right-radius: var(--bs-pagination-border-radius);
+  border-bottom-right-radius: var(--bs-pagination-border-radius);
+}
+
+.pagination-lg {
+  --bs-pagination-padding-x: 1.5rem;
+  --bs-pagination-padding-y: 0.75rem;
+  --bs-pagination-font-size: 1.25rem;
+  --bs-pagination-border-radius: 0.5rem;
+}
+
+.pagination-sm {
+  --bs-pagination-padding-x: 0.5rem;
+  --bs-pagination-padding-y: 0.25rem;
+  --bs-pagination-font-size: 0.875rem;
+  --bs-pagination-border-radius: 0.25rem;
+}
+
+.badge {
+  --bs-badge-padding-x: 0.65em;
+  --bs-badge-padding-y: 0.35em;
+  --bs-badge-font-size: 0.75em;
+  --bs-badge-font-weight: 700;
+  --bs-badge-color: #fff;
+  --bs-badge-border-radius: 0.375rem;
+  display: inline-block;
+  padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
+  font-size: var(--bs-badge-font-size);
+  font-weight: var(--bs-badge-font-weight);
+  line-height: 1;
+  color: var(--bs-badge-color);
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: var(--bs-badge-border-radius);
+}
+.badge:empty {
+  display: none;
+}
+
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+
+.alert {
+  --bs-alert-bg: transparent;
+  --bs-alert-padding-x: 1rem;
+  --bs-alert-padding-y: 1rem;
+  --bs-alert-margin-bottom: 1rem;
+  --bs-alert-color: inherit;
+  --bs-alert-border-color: transparent;
+  --bs-alert-border: 1px solid var(--bs-alert-border-color);
+  --bs-alert-border-radius: 0.375rem;
+  position: relative;
+  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
+  margin-bottom: var(--bs-alert-margin-bottom);
+  color: var(--bs-alert-color);
+  background-color: var(--bs-alert-bg);
+  border: var(--bs-alert-border);
+  border-radius: var(--bs-alert-border-radius);
+}
+
+.alert-heading {
+  color: inherit;
+}
+
+.alert-link {
+  font-weight: 700;
+}
+
+.alert-dismissible {
+  padding-right: 3rem;
+}
+.alert-dismissible .btn-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  padding: 1.25rem 1rem;
+}
+
+.alert-primary {
+  --bs-alert-color: #084298;
+  --bs-alert-bg: #cfe2ff;
+  --bs-alert-border-color: #b6d4fe;
+}
+.alert-primary .alert-link {
+  color: #06357a;
+}
+
+.alert-secondary {
+  --bs-alert-color: #41464b;
+  --bs-alert-bg: #e2e3e5;
+  --bs-alert-border-color: #d3d6d8;
+}
+.alert-secondary .alert-link {
+  color: #34383c;
+}
+
+.alert-success {
+  --bs-alert-color: #0f5132;
+  --bs-alert-bg: #d1e7dd;
+  --bs-alert-border-color: #badbcc;
+}
+.alert-success .alert-link {
+  color: #0c4128;
+}
+
+.alert-info {
+  --bs-alert-color: #055160;
+  --bs-alert-bg: #cff4fc;
+  --bs-alert-border-color: #b6effb;
+}
+.alert-info .alert-link {
+  color: #04414d;
+}
+
+.alert-warning {
+  --bs-alert-color: #664d03;
+  --bs-alert-bg: #fff3cd;
+  --bs-alert-border-color: #ffecb5;
+}
+.alert-warning .alert-link {
+  color: #523e02;
+}
+
+.alert-danger {
+  --bs-alert-color: #842029;
+  --bs-alert-bg: #f8d7da;
+  --bs-alert-border-color: #f5c2c7;
+}
+.alert-danger .alert-link {
+  color: #6a1a21;
+}
+
+.alert-light {
+  --bs-alert-color: #636464;
+  --bs-alert-bg: #fefefe;
+  --bs-alert-border-color: #fdfdfe;
+}
+.alert-light .alert-link {
+  color: #4f5050;
+}
+
+.alert-dark {
+  --bs-alert-color: #141619;
+  --bs-alert-bg: #d3d3d4;
+  --bs-alert-border-color: #bcbebf;
+}
+.alert-dark .alert-link {
+  color: #101214;
+}
+
+@keyframes progress-bar-stripes {
+  0% {
+    background-position-x: 1rem;
+  }
+}
+.progress {
+  --bs-progress-height: 1rem;
+  --bs-progress-font-size: 0.75rem;
+  --bs-progress-bg: #e9ecef;
+  --bs-progress-border-radius: 0.375rem;
+  --bs-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+  --bs-progress-bar-color: #fff;
+  --bs-progress-bar-bg: #0d6efd;
+  --bs-progress-bar-transition: width 0.6s ease;
+  display: flex;
+  height: var(--bs-progress-height);
+  overflow: hidden;
+  font-size: var(--bs-progress-font-size);
+  background-color: var(--bs-progress-bg);
+  border-radius: var(--bs-progress-border-radius);
+}
+
+.progress-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  color: var(--bs-progress-bar-color);
+  text-align: center;
+  white-space: nowrap;
+  background-color: var(--bs-progress-bar-bg);
+  transition: var(--bs-progress-bar-transition);
+}
+@media (prefers-reduced-motion: reduce) {
+  .progress-bar {
+    transition: none;
+  }
+}
+
+.progress-bar-striped {
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-size: var(--bs-progress-height) var(--bs-progress-height);
+}
+
+.progress-bar-animated {
+  animation: 1s linear infinite progress-bar-stripes;
+}
+@media (prefers-reduced-motion: reduce) {
+  .progress-bar-animated {
+    animation: none;
+  }
+}
+
+.list-group {
+  --bs-list-group-color: #212529;
+  --bs-list-group-bg: #fff;
+  --bs-list-group-border-color: rgba(0, 0, 0, 0.125);
+  --bs-list-group-border-width: 1px;
+  --bs-list-group-border-radius: 0.375rem;
+  --bs-list-group-item-padding-x: 1rem;
+  --bs-list-group-item-padding-y: 0.5rem;
+  --bs-list-group-action-color: #495057;
+  --bs-list-group-action-hover-color: #495057;
+  --bs-list-group-action-hover-bg: #f8f9fa;
+  --bs-list-group-action-active-color: #212529;
+  --bs-list-group-action-active-bg: #e9ecef;
+  --bs-list-group-disabled-color: #6c757d;
+  --bs-list-group-disabled-bg: #fff;
+  --bs-list-group-active-color: #fff;
+  --bs-list-group-active-bg: #0d6efd;
+  --bs-list-group-active-border-color: #0d6efd;
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+  border-radius: var(--bs-list-group-border-radius);
+}
+
+.list-group-numbered {
+  list-style-type: none;
+  counter-reset: section;
+}
+.list-group-numbered > .list-group-item::before {
+  content: counters(section, ".") ". ";
+  counter-increment: section;
+}
+
+.list-group-item-action {
+  width: 100%;
+  color: var(--bs-list-group-action-color);
+  text-align: inherit;
+}
+.list-group-item-action:hover, .list-group-item-action:focus {
+  z-index: 1;
+  color: var(--bs-list-group-action-hover-color);
+  text-decoration: none;
+  background-color: var(--bs-list-group-action-hover-bg);
+}
+.list-group-item-action:active {
+  color: var(--bs-list-group-action-active-color);
+  background-color: var(--bs-list-group-action-active-bg);
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
+  color: var(--bs-list-group-color);
+  text-decoration: none;
+  background-color: var(--bs-list-group-bg);
+  border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
+}
+.list-group-item:first-child {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+.list-group-item:last-child {
+  border-bottom-right-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+.list-group-item.disabled, .list-group-item:disabled {
+  color: var(--bs-list-group-disabled-color);
+  pointer-events: none;
+  background-color: var(--bs-list-group-disabled-bg);
+}
+.list-group-item.active {
+  z-index: 2;
+  color: var(--bs-list-group-active-color);
+  background-color: var(--bs-list-group-active-bg);
+  border-color: var(--bs-list-group-active-border-color);
+}
+.list-group-item + .list-group-item {
+  border-top-width: 0;
+}
+.list-group-item + .list-group-item.active {
+  margin-top: calc(-1 * var(--bs-list-group-border-width));
+  border-top-width: var(--bs-list-group-border-width);
+}
+
+.list-group-horizontal {
+  flex-direction: row;
+}
+.list-group-horizontal > .list-group-item:first-child:not(:last-child) {
+  border-bottom-left-radius: var(--bs-list-group-border-radius);
+  border-top-right-radius: 0;
+}
+.list-group-horizontal > .list-group-item:last-child:not(:first-child) {
+  border-top-right-radius: var(--bs-list-group-border-radius);
+  border-bottom-left-radius: 0;
+}
+.list-group-horizontal > .list-group-item.active {
+  margin-top: 0;
+}
+.list-group-horizontal > .list-group-item + .list-group-item {
+  border-top-width: var(--bs-list-group-border-width);
+  border-left-width: 0;
+}
+.list-group-horizontal > .list-group-item + .list-group-item.active {
+  margin-left: calc(-1 * var(--bs-list-group-border-width));
+  border-left-width: var(--bs-list-group-border-width);
+}
+
+@media (min-width: 576px) {
+  .list-group-horizontal-sm {
+    flex-direction: row;
+  }
+  .list-group-horizontal-sm > .list-group-item:first-child:not(:last-child) {
+    border-bottom-left-radius: var(--bs-list-group-border-radius);
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-sm > .list-group-item:last-child:not(:first-child) {
+    border-top-right-radius: var(--bs-list-group-border-radius);
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-sm > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-sm > .list-group-item + .list-group-item {
+    border-top-width: var(--bs-list-group-border-width);
+    border-left-width: 0;
+  }
+  .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
+    margin-left: calc(-1 * var(--bs-list-group-border-width));
+    border-left-width: var(--bs-list-group-border-width);
+  }
+}
+@media (min-width: 768px) {
+  .list-group-horizontal-md {
+    flex-direction: row;
+  }
+  .list-group-horizontal-md > .list-group-item:first-child:not(:last-child) {
+    border-bottom-left-radius: var(--bs-list-group-border-radius);
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-md > .list-group-item:last-child:not(:first-child) {
+    border-top-right-radius: var(--bs-list-group-border-radius);
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-md > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-md > .list-group-item + .list-group-item {
+    border-top-width: var(--bs-list-group-border-width);
+    border-left-width: 0;
+  }
+  .list-group-horizontal-md > .list-group-item + .list-group-item.active {
+    margin-left: calc(-1 * var(--bs-list-group-border-width));
+    border-left-width: var(--bs-list-group-border-width);
+  }
+}
+@media (min-width: 992px) {
+  .list-group-horizontal-lg {
+    flex-direction: row;
+  }
+  .list-group-horizontal-lg > .list-group-item:first-child:not(:last-child) {
+    border-bottom-left-radius: var(--bs-list-group-border-radius);
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-lg > .list-group-item:last-child:not(:first-child) {
+    border-top-right-radius: var(--bs-list-group-border-radius);
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-lg > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-lg > .list-group-item + .list-group-item {
+    border-top-width: var(--bs-list-group-border-width);
+    border-left-width: 0;
+  }
+  .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
+    margin-left: calc(-1 * var(--bs-list-group-border-width));
+    border-left-width: var(--bs-list-group-border-width);
+  }
+}
+@media (min-width: 1200px) {
+  .list-group-horizontal-xl {
+    flex-direction: row;
+  }
+  .list-group-horizontal-xl > .list-group-item:first-child:not(:last-child) {
+    border-bottom-left-radius: var(--bs-list-group-border-radius);
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-xl > .list-group-item:last-child:not(:first-child) {
+    border-top-right-radius: var(--bs-list-group-border-radius);
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-xl > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-xl > .list-group-item + .list-group-item {
+    border-top-width: var(--bs-list-group-border-width);
+    border-left-width: 0;
+  }
+  .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
+    margin-left: calc(-1 * var(--bs-list-group-border-width));
+    border-left-width: var(--bs-list-group-border-width);
+  }
+}
+@media (min-width: 1400px) {
+  .list-group-horizontal-xxl {
+    flex-direction: row;
+  }
+  .list-group-horizontal-xxl > .list-group-item:first-child:not(:last-child) {
+    border-bottom-left-radius: var(--bs-list-group-border-radius);
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item:last-child:not(:first-child) {
+    border-top-right-radius: var(--bs-list-group-border-radius);
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item + .list-group-item {
+    border-top-width: var(--bs-list-group-border-width);
+    border-left-width: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
+    margin-left: calc(-1 * var(--bs-list-group-border-width));
+    border-left-width: var(--bs-list-group-border-width);
+  }
+}
+.list-group-flush {
+  border-radius: 0;
+}
+.list-group-flush > .list-group-item {
+  border-width: 0 0 var(--bs-list-group-border-width);
+}
+.list-group-flush > .list-group-item:last-child {
+  border-bottom-width: 0;
+}
+
+.list-group-item-primary {
+  color: #084298;
+  background-color: #cfe2ff;
+}
+.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
+  color: #084298;
+  background-color: #bacbe6;
+}
+.list-group-item-primary.list-group-item-action.active {
+  color: #fff;
+  background-color: #084298;
+  border-color: #084298;
+}
+
+.list-group-item-secondary {
+  color: #41464b;
+  background-color: #e2e3e5;
+}
+.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
+  color: #41464b;
+  background-color: #cbccce;
+}
+.list-group-item-secondary.list-group-item-action.active {
+  color: #fff;
+  background-color: #41464b;
+  border-color: #41464b;
+}
+
+.list-group-item-success {
+  color: #0f5132;
+  background-color: #d1e7dd;
+}
+.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
+  color: #0f5132;
+  background-color: #bcd0c7;
+}
+.list-group-item-success.list-group-item-action.active {
+  color: #fff;
+  background-color: #0f5132;
+  border-color: #0f5132;
+}
+
+.list-group-item-info {
+  color: #055160;
+  background-color: #cff4fc;
+}
+.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
+  color: #055160;
+  background-color: #badce3;
+}
+.list-group-item-info.list-group-item-action.active {
+  color: #fff;
+  background-color: #055160;
+  border-color: #055160;
+}
+
+.list-group-item-warning {
+  color: #664d03;
+  background-color: #fff3cd;
+}
+.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
+  color: #664d03;
+  background-color: #e6dbb9;
+}
+.list-group-item-warning.list-group-item-action.active {
+  color: #fff;
+  background-color: #664d03;
+  border-color: #664d03;
+}
+
+.list-group-item-danger {
+  color: #842029;
+  background-color: #f8d7da;
+}
+.list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
+  color: #842029;
+  background-color: #dfc2c4;
+}
+.list-group-item-danger.list-group-item-action.active {
+  color: #fff;
+  background-color: #842029;
+  border-color: #842029;
+}
+
+.list-group-item-light {
+  color: #636464;
+  background-color: #fefefe;
+}
+.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
+  color: #636464;
+  background-color: #e5e5e5;
+}
+.list-group-item-light.list-group-item-action.active {
+  color: #fff;
+  background-color: #636464;
+  border-color: #636464;
+}
+
+.list-group-item-dark {
+  color: #141619;
+  background-color: #d3d3d4;
+}
+.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
+  color: #141619;
+  background-color: #bebebf;
+}
+.list-group-item-dark.list-group-item-action.active {
+  color: #fff;
+  background-color: #141619;
+  border-color: #141619;
+}
+
+.btn-close {
+  box-sizing: content-box;
+  width: 1em;
+  height: 1em;
+  padding: 0.25em 0.25em;
+  color: #000;
+  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
+  border: 0;
+  border-radius: 0.375rem;
+  opacity: 0.5;
+}
+.btn-close:hover {
+  color: #000;
+  text-decoration: none;
+  opacity: 0.75;
+}
+.btn-close:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+  opacity: 1;
+}
+.btn-close:disabled, .btn-close.disabled {
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  opacity: 0.25;
+}
+
+.btn-close-white {
+  filter: invert(1) grayscale(100%) brightness(200%);
+}
+
+.toast {
+  --bs-toast-zindex: 1090;
+  --bs-toast-padding-x: 0.75rem;
+  --bs-toast-padding-y: 0.5rem;
+  --bs-toast-spacing: 1.5rem;
+  --bs-toast-max-width: 350px;
+  --bs-toast-font-size: 0.875rem;
+  --bs-toast-color: ;
+  --bs-toast-bg: rgba(255, 255, 255, 0.85);
+  --bs-toast-border-width: 1px;
+  --bs-toast-border-color: var(--bs-border-color-translucent);
+  --bs-toast-border-radius: 0.375rem;
+  --bs-toast-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  --bs-toast-header-color: #6c757d;
+  --bs-toast-header-bg: rgba(255, 255, 255, 0.85);
+  --bs-toast-header-border-color: rgba(0, 0, 0, 0.05);
+  width: var(--bs-toast-max-width);
+  max-width: 100%;
+  font-size: var(--bs-toast-font-size);
+  color: var(--bs-toast-color);
+  pointer-events: auto;
+  background-color: var(--bs-toast-bg);
+  background-clip: padding-box;
+  border: var(--bs-toast-border-width) solid var(--bs-toast-border-color);
+  box-shadow: var(--bs-toast-box-shadow);
+  border-radius: var(--bs-toast-border-radius);
+}
+.toast.showing {
+  opacity: 0;
+}
+.toast:not(.show) {
+  display: none;
+}
+
+.toast-container {
+  --bs-toast-zindex: 1090;
+  position: absolute;
+  z-index: var(--bs-toast-zindex);
+  width: -moz-max-content;
+  width: max-content;
+  max-width: 100%;
+  pointer-events: none;
+}
+.toast-container > :not(:last-child) {
+  margin-bottom: var(--bs-toast-spacing);
+}
+
+.toast-header {
+  display: flex;
+  align-items: center;
+  padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
+  color: var(--bs-toast-header-color);
+  background-color: var(--bs-toast-header-bg);
+  background-clip: padding-box;
+  border-bottom: var(--bs-toast-border-width) solid var(--bs-toast-header-border-color);
+  border-top-left-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
+  border-top-right-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
+}
+.toast-header .btn-close {
+  margin-right: calc(-0.5 * var(--bs-toast-padding-x));
+  margin-left: var(--bs-toast-padding-x);
+}
+
+.toast-body {
+  padding: var(--bs-toast-padding-x);
+  word-wrap: break-word;
+}
+
+.modal {
+  --bs-modal-zindex: 1055;
+  --bs-modal-width: 500px;
+  --bs-modal-padding: 1rem;
+  --bs-modal-margin: 0.5rem;
+  --bs-modal-color: ;
+  --bs-modal-bg: #fff;
+  --bs-modal-border-color: var(--bs-border-color-translucent);
+  --bs-modal-border-width: 1px;
+  --bs-modal-border-radius: 0.5rem;
+  --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  --bs-modal-inner-border-radius: calc(0.5rem - 1px);
+  --bs-modal-header-padding-x: 1rem;
+  --bs-modal-header-padding-y: 1rem;
+  --bs-modal-header-padding: 1rem 1rem;
+  --bs-modal-header-border-color: var(--bs-border-color);
+  --bs-modal-header-border-width: 1px;
+  --bs-modal-title-line-height: 1.5;
+  --bs-modal-footer-gap: 0.5rem;
+  --bs-modal-footer-bg: ;
+  --bs-modal-footer-border-color: var(--bs-border-color);
+  --bs-modal-footer-border-width: 1px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--bs-modal-zindex);
+  display: none;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+}
+
+.modal-dialog {
+  position: relative;
+  width: auto;
+  margin: var(--bs-modal-margin);
+  pointer-events: none;
+}
+.modal.fade .modal-dialog {
+  transition: transform 0.3s ease-out;
+  transform: translate(0, -50px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .modal.fade .modal-dialog {
+    transition: none;
+  }
+}
+.modal.show .modal-dialog {
+  transform: none;
+}
+.modal.modal-static .modal-dialog {
+  transform: scale(1.02);
+}
+
+.modal-dialog-scrollable {
+  height: calc(100% - var(--bs-modal-margin) * 2);
+}
+.modal-dialog-scrollable .modal-content {
+  max-height: 100%;
+  overflow: hidden;
+}
+.modal-dialog-scrollable .modal-body {
+  overflow-y: auto;
+}
+
+.modal-dialog-centered {
+  display: flex;
+  align-items: center;
+  min-height: calc(100% - var(--bs-modal-margin) * 2);
+}
+
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  color: var(--bs-modal-color);
+  pointer-events: auto;
+  background-color: var(--bs-modal-bg);
+  background-clip: padding-box;
+  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
+  border-radius: var(--bs-modal-border-radius);
+  outline: 0;
+}
+
+.modal-backdrop {
+  --bs-backdrop-zindex: 1050;
+  --bs-backdrop-bg: #000;
+  --bs-backdrop-opacity: 0.5;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--bs-backdrop-zindex);
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--bs-backdrop-bg);
+}
+.modal-backdrop.fade {
+  opacity: 0;
+}
+.modal-backdrop.show {
+  opacity: var(--bs-backdrop-opacity);
+}
+
+.modal-header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--bs-modal-header-padding);
+  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
+  border-top-left-radius: var(--bs-modal-inner-border-radius);
+  border-top-right-radius: var(--bs-modal-inner-border-radius);
+}
+.modal-header .btn-close {
+  padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5);
+  margin: calc(-0.5 * var(--bs-modal-header-padding-y)) calc(-0.5 * var(--bs-modal-header-padding-x)) calc(-0.5 * var(--bs-modal-header-padding-y)) auto;
+}
+
+.modal-title {
+  margin-bottom: 0;
+  line-height: var(--bs-modal-title-line-height);
+}
+
+.modal-body {
+  position: relative;
+  flex: 1 1 auto;
+  padding: var(--bs-modal-padding);
+}
+
+.modal-footer {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5);
+  background-color: var(--bs-modal-footer-bg);
+  border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
+  border-bottom-right-radius: var(--bs-modal-inner-border-radius);
+  border-bottom-left-radius: var(--bs-modal-inner-border-radius);
+}
+.modal-footer > * {
+  margin: calc(var(--bs-modal-footer-gap) * 0.5);
+}
+
+@media (min-width: 576px) {
+  .modal {
+    --bs-modal-margin: 1.75rem;
+    --bs-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  }
+  .modal-dialog {
+    max-width: var(--bs-modal-width);
+    margin-right: auto;
+    margin-left: auto;
+  }
+  .modal-sm {
+    --bs-modal-width: 300px;
+  }
+}
+@media (min-width: 992px) {
+  .modal-lg,
+  .modal-xl {
+    --bs-modal-width: 800px;
+  }
+}
+@media (min-width: 1200px) {
+  .modal-xl {
+    --bs-modal-width: 1140px;
+  }
+}
+.modal-fullscreen {
+  width: 100vw;
+  max-width: none;
+  height: 100%;
+  margin: 0;
+}
+.modal-fullscreen .modal-content {
+  height: 100%;
+  border: 0;
+  border-radius: 0;
+}
+.modal-fullscreen .modal-header,
+.modal-fullscreen .modal-footer {
+  border-radius: 0;
+}
+.modal-fullscreen .modal-body {
+  overflow-y: auto;
+}
+
+@media (max-width: 575.98px) {
+  .modal-fullscreen-sm-down {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0;
+  }
+  .modal-fullscreen-sm-down .modal-content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
+  }
+  .modal-fullscreen-sm-down .modal-header,
+  .modal-fullscreen-sm-down .modal-footer {
+    border-radius: 0;
+  }
+  .modal-fullscreen-sm-down .modal-body {
+    overflow-y: auto;
+  }
+}
+@media (max-width: 767.98px) {
+  .modal-fullscreen-md-down {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0;
+  }
+  .modal-fullscreen-md-down .modal-content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
+  }
+  .modal-fullscreen-md-down .modal-header,
+  .modal-fullscreen-md-down .modal-footer {
+    border-radius: 0;
+  }
+  .modal-fullscreen-md-down .modal-body {
+    overflow-y: auto;
+  }
+}
+@media (max-width: 991.98px) {
+  .modal-fullscreen-lg-down {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0;
+  }
+  .modal-fullscreen-lg-down .modal-content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
+  }
+  .modal-fullscreen-lg-down .modal-header,
+  .modal-fullscreen-lg-down .modal-footer {
+    border-radius: 0;
+  }
+  .modal-fullscreen-lg-down .modal-body {
+    overflow-y: auto;
+  }
+}
+@media (max-width: 1199.98px) {
+  .modal-fullscreen-xl-down {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0;
+  }
+  .modal-fullscreen-xl-down .modal-content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
+  }
+  .modal-fullscreen-xl-down .modal-header,
+  .modal-fullscreen-xl-down .modal-footer {
+    border-radius: 0;
+  }
+  .modal-fullscreen-xl-down .modal-body {
+    overflow-y: auto;
+  }
+}
+@media (max-width: 1399.98px) {
+  .modal-fullscreen-xxl-down {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0;
+  }
+  .modal-fullscreen-xxl-down .modal-content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
+  }
+  .modal-fullscreen-xxl-down .modal-header,
+  .modal-fullscreen-xxl-down .modal-footer {
+    border-radius: 0;
+  }
+  .modal-fullscreen-xxl-down .modal-body {
+    overflow-y: auto;
+  }
+}
+.tooltip {
+  --bs-tooltip-zindex: 1080;
+  --bs-tooltip-max-width: 200px;
+  --bs-tooltip-padding-x: 0.5rem;
+  --bs-tooltip-padding-y: 0.25rem;
+  --bs-tooltip-margin: ;
+  --bs-tooltip-font-size: 0.875rem;
+  --bs-tooltip-color: #fff;
+  --bs-tooltip-bg: #000;
+  --bs-tooltip-border-radius: 0.375rem;
+  --bs-tooltip-opacity: 0.9;
+  --bs-tooltip-arrow-width: 0.8rem;
+  --bs-tooltip-arrow-height: 0.4rem;
+  z-index: var(--bs-tooltip-zindex);
+  display: block;
+  padding: var(--bs-tooltip-arrow-height);
+  margin: var(--bs-tooltip-margin);
+  font-family: var(--bs-font-sans-serif);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: left;
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-break: normal;
+  white-space: normal;
+  word-spacing: normal;
+  line-break: auto;
+  font-size: var(--bs-tooltip-font-size);
+  word-wrap: break-word;
+  opacity: 0;
+}
+.tooltip.show {
+  opacity: var(--bs-tooltip-opacity);
+}
+.tooltip .tooltip-arrow {
+  display: block;
+  width: var(--bs-tooltip-arrow-width);
+  height: var(--bs-tooltip-arrow-height);
+}
+.tooltip .tooltip-arrow::before {
+  position: absolute;
+  content: "";
+  border-color: transparent;
+  border-style: solid;
+}
+
+.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
+  bottom: 0;
+}
+.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
+  top: -1px;
+  border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
+  border-top-color: var(--bs-tooltip-bg);
+}
+
+/* rtl:begin:ignore */
+.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
+  left: 0;
+  width: var(--bs-tooltip-arrow-height);
+  height: var(--bs-tooltip-arrow-width);
+}
+.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
+  right: -1px;
+  border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
+  border-right-color: var(--bs-tooltip-bg);
+}
+
+/* rtl:end:ignore */
+.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
+  top: 0;
+}
+.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
+  bottom: -1px;
+  border-width: 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
+  border-bottom-color: var(--bs-tooltip-bg);
+}
+
+/* rtl:begin:ignore */
+.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
+  right: 0;
+  width: var(--bs-tooltip-arrow-height);
+  height: var(--bs-tooltip-arrow-width);
+}
+.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
+  left: -1px;
+  border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
+  border-left-color: var(--bs-tooltip-bg);
+}
+
+/* rtl:end:ignore */
+.tooltip-inner {
+  max-width: var(--bs-tooltip-max-width);
+  padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
+  color: var(--bs-tooltip-color);
+  text-align: center;
+  background-color: var(--bs-tooltip-bg);
+  border-radius: var(--bs-tooltip-border-radius);
+}
+
+.popover {
+  --bs-popover-zindex: 1070;
+  --bs-popover-max-width: 276px;
+  --bs-popover-font-size: 0.875rem;
+  --bs-popover-bg: #fff;
+  --bs-popover-border-width: 1px;
+  --bs-popover-border-color: var(--bs-border-color-translucent);
+  --bs-popover-border-radius: 0.5rem;
+  --bs-popover-inner-border-radius: calc(0.5rem - 1px);
+  --bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  --bs-popover-header-padding-x: 1rem;
+  --bs-popover-header-padding-y: 0.5rem;
+  --bs-popover-header-font-size: 1rem;
+  --bs-popover-header-color: ;
+  --bs-popover-header-bg: #f0f0f0;
+  --bs-popover-body-padding-x: 1rem;
+  --bs-popover-body-padding-y: 1rem;
+  --bs-popover-body-color: #212529;
+  --bs-popover-arrow-width: 1rem;
+  --bs-popover-arrow-height: 0.5rem;
+  --bs-popover-arrow-border: var(--bs-popover-border-color);
+  z-index: var(--bs-popover-zindex);
+  display: block;
+  max-width: var(--bs-popover-max-width);
+  font-family: var(--bs-font-sans-serif);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: left;
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-break: normal;
+  white-space: normal;
+  word-spacing: normal;
+  line-break: auto;
+  font-size: var(--bs-popover-font-size);
+  word-wrap: break-word;
+  background-color: var(--bs-popover-bg);
+  background-clip: padding-box;
+  border: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
+  border-radius: var(--bs-popover-border-radius);
+}
+.popover .popover-arrow {
+  display: block;
+  width: var(--bs-popover-arrow-width);
+  height: var(--bs-popover-arrow-height);
+}
+.popover .popover-arrow::before, .popover .popover-arrow::after {
+  position: absolute;
+  display: block;
+  content: "";
+  border-color: transparent;
+  border-style: solid;
+  border-width: 0;
+}
+
+.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow {
+  bottom: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
+}
+.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
+  border-width: var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * 0.5) 0;
+}
+.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before {
+  bottom: 0;
+  border-top-color: var(--bs-popover-arrow-border);
+}
+.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
+  bottom: var(--bs-popover-border-width);
+  border-top-color: var(--bs-popover-bg);
+}
+
+/* rtl:begin:ignore */
+.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow {
+  left: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
+  width: var(--bs-popover-arrow-height);
+  height: var(--bs-popover-arrow-width);
+}
+.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
+  border-width: calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * 0.5) 0;
+}
+.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before {
+  left: 0;
+  border-right-color: var(--bs-popover-arrow-border);
+}
+.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
+  left: var(--bs-popover-border-width);
+  border-right-color: var(--bs-popover-bg);
+}
+
+/* rtl:end:ignore */
+.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow {
+  top: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
+}
+.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
+  border-width: 0 calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height);
+}
+.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before {
+  top: 0;
+  border-bottom-color: var(--bs-popover-arrow-border);
+}
+.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
+  top: var(--bs-popover-border-width);
+  border-bottom-color: var(--bs-popover-bg);
+}
+.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  display: block;
+  width: var(--bs-popover-arrow-width);
+  margin-left: calc(-0.5 * var(--bs-popover-arrow-width));
+  content: "";
+  border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-header-bg);
+}
+
+/* rtl:begin:ignore */
+.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow {
+  right: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
+  width: var(--bs-popover-arrow-height);
+  height: var(--bs-popover-arrow-width);
+}
+.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
+  border-width: calc(var(--bs-popover-arrow-width) * 0.5) 0 calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height);
+}
+.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before {
+  right: 0;
+  border-left-color: var(--bs-popover-arrow-border);
+}
+.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
+  right: var(--bs-popover-border-width);
+  border-left-color: var(--bs-popover-bg);
+}
+
+/* rtl:end:ignore */
+.popover-header {
+  padding: var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);
+  margin-bottom: 0;
+  font-size: var(--bs-popover-header-font-size);
+  color: var(--bs-popover-header-color);
+  background-color: var(--bs-popover-header-bg);
+  border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
+  border-top-left-radius: var(--bs-popover-inner-border-radius);
+  border-top-right-radius: var(--bs-popover-inner-border-radius);
+}
+.popover-header:empty {
+  display: none;
+}
+
+.popover-body {
+  padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
+  color: var(--bs-popover-body-color);
+}
+
+.carousel {
+  position: relative;
+}
+
+.carousel.pointer-event {
+  touch-action: pan-y;
+}
+
+.carousel-inner {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+.carousel-inner::after {
+  display: block;
+  clear: both;
+  content: "";
+}
+
+.carousel-item {
+  position: relative;
+  display: none;
+  float: left;
+  width: 100%;
+  margin-right: -100%;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  transition: transform 0.6s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .carousel-item {
+    transition: none;
+  }
+}
+
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: block;
+}
+
+.carousel-item-next:not(.carousel-item-start),
+.active.carousel-item-end {
+  transform: translateX(100%);
+}
+
+.carousel-item-prev:not(.carousel-item-end),
+.active.carousel-item-start {
+  transform: translateX(-100%);
+}
+
+.carousel-fade .carousel-item {
+  opacity: 0;
+  transition-property: opacity;
+  transform: none;
+}
+.carousel-fade .carousel-item.active,
+.carousel-fade .carousel-item-next.carousel-item-start,
+.carousel-fade .carousel-item-prev.carousel-item-end {
+  z-index: 1;
+  opacity: 1;
+}
+.carousel-fade .active.carousel-item-start,
+.carousel-fade .active.carousel-item-end {
+  z-index: 0;
+  opacity: 0;
+  transition: opacity 0s 0.6s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .carousel-fade .active.carousel-item-start,
+  .carousel-fade .active.carousel-item-end {
+    transition: none;
+  }
+}
+
+.carousel-control-prev,
+.carousel-control-next {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 15%;
+  padding: 0;
+  color: #fff;
+  text-align: center;
+  background: none;
+  border: 0;
+  opacity: 0.5;
+  transition: opacity 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .carousel-control-prev,
+  .carousel-control-next {
+    transition: none;
+  }
+}
+.carousel-control-prev:hover, .carousel-control-prev:focus,
+.carousel-control-next:hover,
+.carousel-control-next:focus {
+  color: #fff;
+  text-decoration: none;
+  outline: 0;
+  opacity: 0.9;
+}
+
+.carousel-control-prev {
+  left: 0;
+}
+
+.carousel-control-next {
+  right: 0;
+}
+
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  background-repeat: no-repeat;
+  background-position: 50%;
+  background-size: 100% 100%;
+}
+
+/* rtl:options: {
+  "autoRename": true,
+  "stringMap":[ {
+    "name"    : "prev-next",
+    "search"  : "prev",
+    "replace" : "next"
+  } ]
+} */
+.carousel-control-prev-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+}
+
+.carousel-control-next-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+}
+
+.carousel-indicators {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  padding: 0;
+  margin-right: 15%;
+  margin-bottom: 1rem;
+  margin-left: 15%;
+  list-style: none;
+}
+.carousel-indicators [data-bs-target] {
+  box-sizing: content-box;
+  flex: 0 1 auto;
+  width: 30px;
+  height: 3px;
+  padding: 0;
+  margin-right: 3px;
+  margin-left: 3px;
+  text-indent: -999px;
+  cursor: pointer;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 0;
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  opacity: 0.5;
+  transition: opacity 0.6s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .carousel-indicators [data-bs-target] {
+    transition: none;
+  }
+}
+.carousel-indicators .active {
+  opacity: 1;
+}
+
+.carousel-caption {
+  position: absolute;
+  right: 15%;
+  bottom: 1.25rem;
+  left: 15%;
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+  color: #fff;
+  text-align: center;
+}
+
+.carousel-dark .carousel-control-prev-icon,
+.carousel-dark .carousel-control-next-icon {
+  filter: invert(1) grayscale(100);
+}
+.carousel-dark .carousel-indicators [data-bs-target] {
+  background-color: #000;
+}
+.carousel-dark .carousel-caption {
+  color: #000;
+}
+
+.spinner-grow,
+.spinner-border {
+  display: inline-block;
+  width: var(--bs-spinner-width);
+  height: var(--bs-spinner-height);
+  vertical-align: var(--bs-spinner-vertical-align);
+  border-radius: 50%;
+  animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);
+}
+
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg) /* rtl:ignore */;
+  }
+}
+.spinner-border {
+  --bs-spinner-width: 2rem;
+  --bs-spinner-height: 2rem;
+  --bs-spinner-vertical-align: -0.125em;
+  --bs-spinner-border-width: 0.25em;
+  --bs-spinner-animation-speed: 0.75s;
+  --bs-spinner-animation-name: spinner-border;
+  border: var(--bs-spinner-border-width) solid currentcolor;
+  border-right-color: transparent;
+}
+
+.spinner-border-sm {
+  --bs-spinner-width: 1rem;
+  --bs-spinner-height: 1rem;
+  --bs-spinner-border-width: 0.2em;
+}
+
+@keyframes spinner-grow {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    opacity: 1;
+    transform: none;
+  }
+}
+.spinner-grow {
+  --bs-spinner-width: 2rem;
+  --bs-spinner-height: 2rem;
+  --bs-spinner-vertical-align: -0.125em;
+  --bs-spinner-animation-speed: 0.75s;
+  --bs-spinner-animation-name: spinner-grow;
+  background-color: currentcolor;
+  opacity: 0;
+}
+
+.spinner-grow-sm {
+  --bs-spinner-width: 1rem;
+  --bs-spinner-height: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner-border,
+  .spinner-grow {
+    --bs-spinner-animation-speed: 1.5s;
+  }
+}
+.offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
+  --bs-offcanvas-zindex: 1045;
+  --bs-offcanvas-width: 400px;
+  --bs-offcanvas-height: 30vh;
+  --bs-offcanvas-padding-x: 1rem;
+  --bs-offcanvas-padding-y: 1rem;
+  --bs-offcanvas-color: ;
+  --bs-offcanvas-bg: #fff;
+  --bs-offcanvas-border-width: 1px;
+  --bs-offcanvas-border-color: var(--bs-border-color-translucent);
+  --bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+}
+
+@media (max-width: 575.98px) {
+  .offcanvas-sm {
+    position: fixed;
+    bottom: 0;
+    z-index: var(--bs-offcanvas-zindex);
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    color: var(--bs-offcanvas-color);
+    visibility: hidden;
+    background-color: var(--bs-offcanvas-bg);
+    background-clip: padding-box;
+    outline: 0;
+    transition: transform 0.3s ease-in-out;
+  }
+}
+@media (max-width: 575.98px) and (prefers-reduced-motion: reduce) {
+  .offcanvas-sm {
+    transition: none;
+  }
+}
+@media (max-width: 575.98px) {
+  .offcanvas-sm.offcanvas-start {
+    top: 0;
+    left: 0;
+    width: var(--bs-offcanvas-width);
+    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateX(-100%);
+  }
+}
+@media (max-width: 575.98px) {
+  .offcanvas-sm.offcanvas-end {
+    top: 0;
+    right: 0;
+    width: var(--bs-offcanvas-width);
+    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateX(100%);
+  }
+}
+@media (max-width: 575.98px) {
+  .offcanvas-sm.offcanvas-top {
+    top: 0;
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateY(-100%);
+  }
+}
+@media (max-width: 575.98px) {
+  .offcanvas-sm.offcanvas-bottom {
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateY(100%);
+  }
+}
+@media (max-width: 575.98px) {
+  .offcanvas-sm.showing, .offcanvas-sm.show:not(.hiding) {
+    transform: none;
+  }
+}
+@media (max-width: 575.98px) {
+  .offcanvas-sm.showing, .offcanvas-sm.hiding, .offcanvas-sm.show {
+    visibility: visible;
+  }
+}
+@media (min-width: 576px) {
+  .offcanvas-sm {
+    --bs-offcanvas-height: auto;
+    --bs-offcanvas-border-width: 0;
+    background-color: transparent !important;
+  }
+  .offcanvas-sm .offcanvas-header {
+    display: none;
+  }
+  .offcanvas-sm .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+    background-color: transparent !important;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .offcanvas-md {
+    position: fixed;
+    bottom: 0;
+    z-index: var(--bs-offcanvas-zindex);
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    color: var(--bs-offcanvas-color);
+    visibility: hidden;
+    background-color: var(--bs-offcanvas-bg);
+    background-clip: padding-box;
+    outline: 0;
+    transition: transform 0.3s ease-in-out;
+  }
+}
+@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
+  .offcanvas-md {
+    transition: none;
+  }
+}
+@media (max-width: 767.98px) {
+  .offcanvas-md.offcanvas-start {
+    top: 0;
+    left: 0;
+    width: var(--bs-offcanvas-width);
+    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateX(-100%);
+  }
+}
+@media (max-width: 767.98px) {
+  .offcanvas-md.offcanvas-end {
+    top: 0;
+    right: 0;
+    width: var(--bs-offcanvas-width);
+    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateX(100%);
+  }
+}
+@media (max-width: 767.98px) {
+  .offcanvas-md.offcanvas-top {
+    top: 0;
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateY(-100%);
+  }
+}
+@media (max-width: 767.98px) {
+  .offcanvas-md.offcanvas-bottom {
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateY(100%);
+  }
+}
+@media (max-width: 767.98px) {
+  .offcanvas-md.showing, .offcanvas-md.show:not(.hiding) {
+    transform: none;
+  }
+}
+@media (max-width: 767.98px) {
+  .offcanvas-md.showing, .offcanvas-md.hiding, .offcanvas-md.show {
+    visibility: visible;
+  }
+}
+@media (min-width: 768px) {
+  .offcanvas-md {
+    --bs-offcanvas-height: auto;
+    --bs-offcanvas-border-width: 0;
+    background-color: transparent !important;
+  }
+  .offcanvas-md .offcanvas-header {
+    display: none;
+  }
+  .offcanvas-md .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+    background-color: transparent !important;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .offcanvas-lg {
+    position: fixed;
+    bottom: 0;
+    z-index: var(--bs-offcanvas-zindex);
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    color: var(--bs-offcanvas-color);
+    visibility: hidden;
+    background-color: var(--bs-offcanvas-bg);
+    background-clip: padding-box;
+    outline: 0;
+    transition: transform 0.3s ease-in-out;
+  }
+}
+@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
+  .offcanvas-lg {
+    transition: none;
+  }
+}
+@media (max-width: 991.98px) {
+  .offcanvas-lg.offcanvas-start {
+    top: 0;
+    left: 0;
+    width: var(--bs-offcanvas-width);
+    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateX(-100%);
+  }
+}
+@media (max-width: 991.98px) {
+  .offcanvas-lg.offcanvas-end {
+    top: 0;
+    right: 0;
+    width: var(--bs-offcanvas-width);
+    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateX(100%);
+  }
+}
+@media (max-width: 991.98px) {
+  .offcanvas-lg.offcanvas-top {
+    top: 0;
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateY(-100%);
+  }
+}
+@media (max-width: 991.98px) {
+  .offcanvas-lg.offcanvas-bottom {
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateY(100%);
+  }
+}
+@media (max-width: 991.98px) {
+  .offcanvas-lg.showing, .offcanvas-lg.show:not(.hiding) {
+    transform: none;
+  }
+}
+@media (max-width: 991.98px) {
+  .offcanvas-lg.showing, .offcanvas-lg.hiding, .offcanvas-lg.show {
+    visibility: visible;
+  }
+}
+@media (min-width: 992px) {
+  .offcanvas-lg {
+    --bs-offcanvas-height: auto;
+    --bs-offcanvas-border-width: 0;
+    background-color: transparent !important;
+  }
+  .offcanvas-lg .offcanvas-header {
+    display: none;
+  }
+  .offcanvas-lg .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+    background-color: transparent !important;
+  }
+}
+
+@media (max-width: 1199.98px) {
+  .offcanvas-xl {
+    position: fixed;
+    bottom: 0;
+    z-index: var(--bs-offcanvas-zindex);
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    color: var(--bs-offcanvas-color);
+    visibility: hidden;
+    background-color: var(--bs-offcanvas-bg);
+    background-clip: padding-box;
+    outline: 0;
+    transition: transform 0.3s ease-in-out;
+  }
+}
+@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
+  .offcanvas-xl {
+    transition: none;
+  }
+}
+@media (max-width: 1199.98px) {
+  .offcanvas-xl.offcanvas-start {
+    top: 0;
+    left: 0;
+    width: var(--bs-offcanvas-width);
+    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateX(-100%);
+  }
+}
+@media (max-width: 1199.98px) {
+  .offcanvas-xl.offcanvas-end {
+    top: 0;
+    right: 0;
+    width: var(--bs-offcanvas-width);
+    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateX(100%);
+  }
+}
+@media (max-width: 1199.98px) {
+  .offcanvas-xl.offcanvas-top {
+    top: 0;
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateY(-100%);
+  }
+}
+@media (max-width: 1199.98px) {
+  .offcanvas-xl.offcanvas-bottom {
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateY(100%);
+  }
+}
+@media (max-width: 1199.98px) {
+  .offcanvas-xl.showing, .offcanvas-xl.show:not(.hiding) {
+    transform: none;
+  }
+}
+@media (max-width: 1199.98px) {
+  .offcanvas-xl.showing, .offcanvas-xl.hiding, .offcanvas-xl.show {
+    visibility: visible;
+  }
+}
+@media (min-width: 1200px) {
+  .offcanvas-xl {
+    --bs-offcanvas-height: auto;
+    --bs-offcanvas-border-width: 0;
+    background-color: transparent !important;
+  }
+  .offcanvas-xl .offcanvas-header {
+    display: none;
+  }
+  .offcanvas-xl .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+    background-color: transparent !important;
+  }
+}
+
+@media (max-width: 1399.98px) {
+  .offcanvas-xxl {
+    position: fixed;
+    bottom: 0;
+    z-index: var(--bs-offcanvas-zindex);
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    color: var(--bs-offcanvas-color);
+    visibility: hidden;
+    background-color: var(--bs-offcanvas-bg);
+    background-clip: padding-box;
+    outline: 0;
+    transition: transform 0.3s ease-in-out;
+  }
+}
+@media (max-width: 1399.98px) and (prefers-reduced-motion: reduce) {
+  .offcanvas-xxl {
+    transition: none;
+  }
+}
+@media (max-width: 1399.98px) {
+  .offcanvas-xxl.offcanvas-start {
+    top: 0;
+    left: 0;
+    width: var(--bs-offcanvas-width);
+    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateX(-100%);
+  }
+}
+@media (max-width: 1399.98px) {
+  .offcanvas-xxl.offcanvas-end {
+    top: 0;
+    right: 0;
+    width: var(--bs-offcanvas-width);
+    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateX(100%);
+  }
+}
+@media (max-width: 1399.98px) {
+  .offcanvas-xxl.offcanvas-top {
+    top: 0;
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateY(-100%);
+  }
+}
+@media (max-width: 1399.98px) {
+  .offcanvas-xxl.offcanvas-bottom {
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateY(100%);
+  }
+}
+@media (max-width: 1399.98px) {
+  .offcanvas-xxl.showing, .offcanvas-xxl.show:not(.hiding) {
+    transform: none;
+  }
+}
+@media (max-width: 1399.98px) {
+  .offcanvas-xxl.showing, .offcanvas-xxl.hiding, .offcanvas-xxl.show {
+    visibility: visible;
+  }
+}
+@media (min-width: 1400px) {
+  .offcanvas-xxl {
+    --bs-offcanvas-height: auto;
+    --bs-offcanvas-border-width: 0;
+    background-color: transparent !important;
+  }
+  .offcanvas-xxl .offcanvas-header {
+    display: none;
+  }
+  .offcanvas-xxl .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+    background-color: transparent !important;
+  }
+}
+
+.offcanvas {
+  position: fixed;
+  bottom: 0;
+  z-index: var(--bs-offcanvas-zindex);
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  color: var(--bs-offcanvas-color);
+  visibility: hidden;
+  background-color: var(--bs-offcanvas-bg);
+  background-clip: padding-box;
+  outline: 0;
+  transition: transform 0.3s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .offcanvas {
+    transition: none;
+  }
+}
+.offcanvas.offcanvas-start {
+  top: 0;
+  left: 0;
+  width: var(--bs-offcanvas-width);
+  border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+  transform: translateX(-100%);
+}
+.offcanvas.offcanvas-end {
+  top: 0;
+  right: 0;
+  width: var(--bs-offcanvas-width);
+  border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+  transform: translateX(100%);
+}
+.offcanvas.offcanvas-top {
+  top: 0;
+  right: 0;
+  left: 0;
+  height: var(--bs-offcanvas-height);
+  max-height: 100%;
+  border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+  transform: translateY(-100%);
+}
+.offcanvas.offcanvas-bottom {
+  right: 0;
+  left: 0;
+  height: var(--bs-offcanvas-height);
+  max-height: 100%;
+  border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+  transform: translateY(100%);
+}
+.offcanvas.showing, .offcanvas.show:not(.hiding) {
+  transform: none;
+}
+.offcanvas.showing, .offcanvas.hiding, .offcanvas.show {
+  visibility: visible;
+}
+
+.offcanvas-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1040;
+  width: 100vw;
+  height: 100vh;
+  background-color: #000;
+}
+.offcanvas-backdrop.fade {
+  opacity: 0;
+}
+.offcanvas-backdrop.show {
+  opacity: 0.5;
+}
+
+.offcanvas-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
+}
+.offcanvas-header .btn-close {
+  padding: calc(var(--bs-offcanvas-padding-y) * 0.5) calc(var(--bs-offcanvas-padding-x) * 0.5);
+  margin-top: calc(-0.5 * var(--bs-offcanvas-padding-y));
+  margin-right: calc(-0.5 * var(--bs-offcanvas-padding-x));
+  margin-bottom: calc(-0.5 * var(--bs-offcanvas-padding-y));
+}
+
+.offcanvas-title {
+  margin-bottom: 0;
+  line-height: 1.5;
+}
+
+.offcanvas-body {
+  flex-grow: 1;
+  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
+  overflow-y: auto;
+}
+
+.placeholder {
+  display: inline-block;
+  min-height: 1em;
+  vertical-align: middle;
+  cursor: wait;
+  background-color: currentcolor;
+  opacity: 0.5;
+}
+.placeholder.btn::before {
+  display: inline-block;
+  content: "";
+}
+
+.placeholder-xs {
+  min-height: 0.6em;
+}
+
+.placeholder-sm {
+  min-height: 0.8em;
+}
+
+.placeholder-lg {
+  min-height: 1.2em;
+}
+
+.placeholder-glow .placeholder {
+  animation: placeholder-glow 2s ease-in-out infinite;
+}
+
+@keyframes placeholder-glow {
+  50% {
+    opacity: 0.2;
+  }
+}
+.placeholder-wave {
+  -webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
+          mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
+  -webkit-mask-size: 200% 100%;
+          mask-size: 200% 100%;
+  animation: placeholder-wave 2s linear infinite;
+}
+
+@keyframes placeholder-wave {
+  100% {
+    -webkit-mask-position: -200% 0%;
+            mask-position: -200% 0%;
+  }
+}
+.clearfix::after {
+  display: block;
+  clear: both;
+  content: "";
+}
+
+.text-bg-primary {
+  color: #fff !important;
+  background-color: RGBA(13, 110, 253, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-secondary {
+  color: #fff !important;
+  background-color: RGBA(108, 117, 125, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-success {
+  color: #fff !important;
+  background-color: RGBA(25, 135, 84, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-info {
+  color: #000 !important;
+  background-color: RGBA(13, 202, 240, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-warning {
+  color: #000 !important;
+  background-color: RGBA(255, 193, 7, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-danger {
+  color: #fff !important;
+  background-color: RGBA(220, 53, 69, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-light {
+  color: #000 !important;
+  background-color: RGBA(248, 249, 250, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-dark {
+  color: #fff !important;
+  background-color: RGBA(33, 37, 41, var(--bs-bg-opacity, 1)) !important;
+}
+
+.link-primary {
+  color: #0d6efd !important;
+}
+.link-primary:hover, .link-primary:focus {
+  color: #0a58ca !important;
+}
+
+.link-secondary {
+  color: #6c757d !important;
+}
+.link-secondary:hover, .link-secondary:focus {
+  color: #565e64 !important;
+}
+
+.link-success {
+  color: #198754 !important;
+}
+.link-success:hover, .link-success:focus {
+  color: #146c43 !important;
+}
+
+.link-info {
+  color: #0dcaf0 !important;
+}
+.link-info:hover, .link-info:focus {
+  color: #3dd5f3 !important;
+}
+
+.link-warning {
+  color: #ffc107 !important;
+}
+.link-warning:hover, .link-warning:focus {
+  color: #ffcd39 !important;
+}
+
+.link-danger {
+  color: #dc3545 !important;
+}
+.link-danger:hover, .link-danger:focus {
+  color: #b02a37 !important;
+}
+
+.link-light {
+  color: #f8f9fa !important;
+}
+.link-light:hover, .link-light:focus {
+  color: #f9fafb !important;
+}
+
+.link-dark {
+  color: #212529 !important;
+}
+.link-dark:hover, .link-dark:focus {
+  color: #1a1e21 !important;
+}
+
+.ratio {
+  position: relative;
+  width: 100%;
+}
+.ratio::before {
+  display: block;
+  padding-top: var(--bs-aspect-ratio);
+  content: "";
+}
+.ratio > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ratio-1x1 {
+  --bs-aspect-ratio: 100%;
+}
+
+.ratio-4x3 {
+  --bs-aspect-ratio: 75%;
+}
+
+.ratio-16x9 {
+  --bs-aspect-ratio: 56.25%;
+}
+
+.ratio-21x9 {
+  --bs-aspect-ratio: 42.8571428571%;
+}
+
+.fixed-top, .sb-nav-fixed #layoutSidenav #layoutSidenav_nav, .sb-nav-fixed .sb-topnav {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1030;
+}
+
+.fixed-bottom {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1030;
+}
+
+.sticky-top {
+  position: sticky;
+  top: 0;
+  z-index: 1020;
+}
+
+.sticky-bottom {
+  position: sticky;
+  bottom: 0;
+  z-index: 1020;
+}
+
+@media (min-width: 576px) {
+  .sticky-sm-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+  .sticky-sm-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 768px) {
+  .sticky-md-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+  .sticky-md-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 992px) {
+  .sticky-lg-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+  .sticky-lg-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 1200px) {
+  .sticky-xl-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+  .sticky-xl-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 1400px) {
+  .sticky-xxl-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+  .sticky-xxl-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+.hstack {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+}
+
+.vstack {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-self: stretch;
+}
+
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.stretched-link::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  content: "";
+}
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vr {
+  display: inline-block;
+  align-self: stretch;
+  width: 1px;
+  min-height: 1em;
+  background-color: currentcolor;
+  opacity: 0.25;
+}
+
+.align-baseline {
+  vertical-align: baseline !important;
+}
+
+.align-top {
+  vertical-align: top !important;
+}
+
+.align-middle {
+  vertical-align: middle !important;
+}
+
+.align-bottom {
+  vertical-align: bottom !important;
+}
+
+.align-text-bottom {
+  vertical-align: text-bottom !important;
+}
+
+.align-text-top {
+  vertical-align: text-top !important;
+}
+
+.float-start {
+  float: left !important;
+}
+
+.float-end {
+  float: right !important;
+}
+
+.float-none {
+  float: none !important;
+}
+
+.opacity-0 {
+  opacity: 0 !important;
+}
+
+.opacity-25 {
+  opacity: 0.25 !important;
+}
+
+.opacity-50 {
+  opacity: 0.5 !important;
+}
+
+.opacity-75 {
+  opacity: 0.75 !important;
+}
+
+.opacity-100 {
+  opacity: 1 !important;
+}
+
+.overflow-auto {
+  overflow: auto !important;
+}
+
+.overflow-hidden {
+  overflow: hidden !important;
+}
+
+.overflow-visible {
+  overflow: visible !important;
+}
+
+.overflow-scroll {
+  overflow: scroll !important;
+}
+
+.d-inline {
+  display: inline !important;
+}
+
+.d-inline-block {
+  display: inline-block !important;
+}
+
+.d-block {
+  display: block !important;
+}
+
+.d-grid {
+  display: grid !important;
+}
+
+.d-table {
+  display: table !important;
+}
+
+.d-table-row {
+  display: table-row !important;
+}
+
+.d-table-cell {
+  display: table-cell !important;
+}
+
+.d-flex {
+  display: flex !important;
+}
+
+.d-inline-flex {
+  display: inline-flex !important;
+}
+
+.d-none {
+  display: none !important;
+}
+
+.shadow {
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+}
+
+.shadow-sm {
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+}
+
+.shadow-lg {
+  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
+}
+
+.shadow-none {
+  box-shadow: none !important;
+}
+
+.position-static {
+  position: static !important;
+}
+
+.position-relative {
+  position: relative !important;
+}
+
+.position-absolute {
+  position: absolute !important;
+}
+
+.position-fixed {
+  position: fixed !important;
+}
+
+.position-sticky {
+  position: sticky !important;
+}
+
+.top-0 {
+  top: 0 !important;
+}
+
+.top-50 {
+  top: 50% !important;
+}
+
+.top-100 {
+  top: 100% !important;
+}
+
+.bottom-0 {
+  bottom: 0 !important;
+}
+
+.bottom-50 {
+  bottom: 50% !important;
+}
+
+.bottom-100 {
+  bottom: 100% !important;
+}
+
+.start-0 {
+  left: 0 !important;
+}
+
+.start-50 {
+  left: 50% !important;
+}
+
+.start-100 {
+  left: 100% !important;
+}
+
+.end-0 {
+  right: 0 !important;
+}
+
+.end-50 {
+  right: 50% !important;
+}
+
+.end-100 {
+  right: 100% !important;
+}
+
+.translate-middle {
+  transform: translate(-50%, -50%) !important;
+}
+
+.translate-middle-x {
+  transform: translateX(-50%) !important;
+}
+
+.translate-middle-y {
+  transform: translateY(-50%) !important;
+}
+
+.border {
+  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+}
+
+.border-0 {
+  border: 0 !important;
+}
+
+.border-top {
+  border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+}
+
+.border-top-0 {
+  border-top: 0 !important;
+}
+
+.border-end {
+  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+}
+
+.border-end-0 {
+  border-right: 0 !important;
+}
+
+.border-bottom {
+  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+}
+
+.border-bottom-0 {
+  border-bottom: 0 !important;
+}
+
+.border-start {
+  border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+}
+
+.border-start-0 {
+  border-left: 0 !important;
+}
+
+.border-primary {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
+}
+
+.border-secondary {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important;
+}
+
+.border-success {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
+}
+
+.border-info {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important;
+}
+
+.border-warning {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important;
+}
+
+.border-danger {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important;
+}
+
+.border-light {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important;
+}
+
+.border-dark {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important;
+}
+
+.border-white {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important;
+}
+
+.border-1 {
+  --bs-border-width: 1px;
+}
+
+.border-2 {
+  --bs-border-width: 2px;
+}
+
+.border-3 {
+  --bs-border-width: 3px;
+}
+
+.border-4 {
+  --bs-border-width: 4px;
+}
+
+.border-5 {
+  --bs-border-width: 5px;
+}
+
+.border-opacity-10 {
+  --bs-border-opacity: 0.1;
+}
+
+.border-opacity-25 {
+  --bs-border-opacity: 0.25;
+}
+
+.border-opacity-50 {
+  --bs-border-opacity: 0.5;
+}
+
+.border-opacity-75 {
+  --bs-border-opacity: 0.75;
+}
+
+.border-opacity-100 {
+  --bs-border-opacity: 1;
+}
+
+.w-25 {
+  width: 25% !important;
+}
+
+.w-50 {
+  width: 50% !important;
+}
+
+.w-75 {
+  width: 75% !important;
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+.w-auto {
+  width: auto !important;
+}
+
+.mw-100 {
+  max-width: 100% !important;
+}
+
+.vw-100 {
+  width: 100vw !important;
+}
+
+.min-vw-100 {
+  min-width: 100vw !important;
+}
+
+.h-25 {
+  height: 25% !important;
+}
+
+.h-50 {
+  height: 50% !important;
+}
+
+.h-75 {
+  height: 75% !important;
+}
+
+.h-100 {
+  height: 100% !important;
+}
+
+.h-auto {
+  height: auto !important;
+}
+
+.mh-100 {
+  max-height: 100% !important;
+}
+
+.vh-100 {
+  height: 100vh !important;
+}
+
+.min-vh-100 {
+  min-height: 100vh !important;
+}
+
+.flex-fill {
+  flex: 1 1 auto !important;
+}
+
+.flex-row {
+  flex-direction: row !important;
+}
+
+.flex-column {
+  flex-direction: column !important;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse !important;
+}
+
+.flex-column-reverse {
+  flex-direction: column-reverse !important;
+}
+
+.flex-grow-0 {
+  flex-grow: 0 !important;
+}
+
+.flex-grow-1 {
+  flex-grow: 1 !important;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0 !important;
+}
+
+.flex-shrink-1 {
+  flex-shrink: 1 !important;
+}
+
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse !important;
+}
+
+.justify-content-start {
+  justify-content: flex-start !important;
+}
+
+.justify-content-end {
+  justify-content: flex-end !important;
+}
+
+.justify-content-center {
+  justify-content: center !important;
+}
+
+.justify-content-between {
+  justify-content: space-between !important;
+}
+
+.justify-content-around {
+  justify-content: space-around !important;
+}
+
+.justify-content-evenly {
+  justify-content: space-evenly !important;
+}
+
+.align-items-start {
+  align-items: flex-start !important;
+}
+
+.align-items-end {
+  align-items: flex-end !important;
+}
+
+.align-items-center {
+  align-items: center !important;
+}
+
+.align-items-baseline {
+  align-items: baseline !important;
+}
+
+.align-items-stretch {
+  align-items: stretch !important;
+}
+
+.align-content-start {
+  align-content: flex-start !important;
+}
+
+.align-content-end {
+  align-content: flex-end !important;
+}
+
+.align-content-center {
+  align-content: center !important;
+}
+
+.align-content-between {
+  align-content: space-between !important;
+}
+
+.align-content-around {
+  align-content: space-around !important;
+}
+
+.align-content-stretch {
+  align-content: stretch !important;
+}
+
+.align-self-auto {
+  align-self: auto !important;
+}
+
+.align-self-start {
+  align-self: flex-start !important;
+}
+
+.align-self-end {
+  align-self: flex-end !important;
+}
+
+.align-self-center {
+  align-self: center !important;
+}
+
+.align-self-baseline {
+  align-self: baseline !important;
+}
+
+.align-self-stretch {
+  align-self: stretch !important;
+}
+
+.order-first {
+  order: -1 !important;
+}
+
+.order-0 {
+  order: 0 !important;
+}
+
+.order-1 {
+  order: 1 !important;
+}
+
+.order-2 {
+  order: 2 !important;
+}
+
+.order-3 {
+  order: 3 !important;
+}
+
+.order-4 {
+  order: 4 !important;
+}
+
+.order-5 {
+  order: 5 !important;
+}
+
+.order-last {
+  order: 6 !important;
+}
+
+.m-0 {
+  margin: 0 !important;
+}
+
+.m-1 {
+  margin: 0.25rem !important;
+}
+
+.m-2 {
+  margin: 0.5rem !important;
+}
+
+.m-3 {
+  margin: 1rem !important;
+}
+
+.m-4 {
+  margin: 1.5rem !important;
+}
+
+.m-5 {
+  margin: 3rem !important;
+}
+
+.m-auto {
+  margin: auto !important;
+}
+
+.mx-0 {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+
+.mx-1 {
+  margin-right: 0.25rem !important;
+  margin-left: 0.25rem !important;
+}
+
+.mx-2 {
+  margin-right: 0.5rem !important;
+  margin-left: 0.5rem !important;
+}
+
+.mx-3 {
+  margin-right: 1rem !important;
+  margin-left: 1rem !important;
+}
+
+.mx-4 {
+  margin-right: 1.5rem !important;
+  margin-left: 1.5rem !important;
+}
+
+.mx-5 {
+  margin-right: 3rem !important;
+  margin-left: 3rem !important;
+}
+
+.mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
+.my-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.my-1 {
+  margin-top: 0.25rem !important;
+  margin-bottom: 0.25rem !important;
+}
+
+.my-2 {
+  margin-top: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
+}
+
+.my-3 {
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
+}
+
+.my-4 {
+  margin-top: 1.5rem !important;
+  margin-bottom: 1.5rem !important;
+}
+
+.my-5 {
+  margin-top: 3rem !important;
+  margin-bottom: 3rem !important;
+}
+
+.my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+
+.mt-0 {
+  margin-top: 0 !important;
+}
+
+.mt-1 {
+  margin-top: 0.25rem !important;
+}
+
+.mt-2 {
+  margin-top: 0.5rem !important;
+}
+
+.mt-3 {
+  margin-top: 1rem !important;
+}
+
+.mt-4 {
+  margin-top: 1.5rem !important;
+}
+
+.mt-5 {
+  margin-top: 3rem !important;
+}
+
+.mt-auto {
+  margin-top: auto !important;
+}
+
+.me-0 {
+  margin-right: 0 !important;
+}
+
+.me-1 {
+  margin-right: 0.25rem !important;
+}
+
+.me-2 {
+  margin-right: 0.5rem !important;
+}
+
+.me-3 {
+  margin-right: 1rem !important;
+}
+
+.me-4 {
+  margin-right: 1.5rem !important;
+}
+
+.me-5 {
+  margin-right: 3rem !important;
+}
+
+.me-auto {
+  margin-right: auto !important;
+}
+
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem !important;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem !important;
+}
+
+.mb-3 {
+  margin-bottom: 1rem !important;
+}
+
+.mb-4 {
+  margin-bottom: 1.5rem !important;
+}
+
+.mb-5 {
+  margin-bottom: 3rem !important;
+}
+
+.mb-auto {
+  margin-bottom: auto !important;
+}
+
+.ms-0 {
+  margin-left: 0 !important;
+}
+
+.ms-1 {
+  margin-left: 0.25rem !important;
+}
+
+.ms-2 {
+  margin-left: 0.5rem !important;
+}
+
+.ms-3 {
+  margin-left: 1rem !important;
+}
+
+.ms-4 {
+  margin-left: 1.5rem !important;
+}
+
+.ms-5 {
+  margin-left: 3rem !important;
+}
+
+.ms-auto {
+  margin-left: auto !important;
+}
+
+.p-0 {
+  padding: 0 !important;
+}
+
+.p-1 {
+  padding: 0.25rem !important;
+}
+
+.p-2 {
+  padding: 0.5rem !important;
+}
+
+.p-3 {
+  padding: 1rem !important;
+}
+
+.p-4 {
+  padding: 1.5rem !important;
+}
+
+.p-5 {
+  padding: 3rem !important;
+}
+
+.px-0 {
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+}
+
+.px-1 {
+  padding-right: 0.25rem !important;
+  padding-left: 0.25rem !important;
+}
+
+.px-2 {
+  padding-right: 0.5rem !important;
+  padding-left: 0.5rem !important;
+}
+
+.px-3 {
+  padding-right: 1rem !important;
+  padding-left: 1rem !important;
+}
+
+.px-4 {
+  padding-right: 1.5rem !important;
+  padding-left: 1.5rem !important;
+}
+
+.px-5 {
+  padding-right: 3rem !important;
+  padding-left: 3rem !important;
+}
+
+.py-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.py-1 {
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
+}
+
+.py-2 {
+  padding-top: 0.5rem !important;
+  padding-bottom: 0.5rem !important;
+}
+
+.py-3 {
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
+}
+
+.py-4 {
+  padding-top: 1.5rem !important;
+  padding-bottom: 1.5rem !important;
+}
+
+.py-5 {
+  padding-top: 3rem !important;
+  padding-bottom: 3rem !important;
+}
+
+.pt-0 {
+  padding-top: 0 !important;
+}
+
+.pt-1 {
+  padding-top: 0.25rem !important;
+}
+
+.pt-2 {
+  padding-top: 0.5rem !important;
+}
+
+.pt-3 {
+  padding-top: 1rem !important;
+}
+
+.pt-4 {
+  padding-top: 1.5rem !important;
+}
+
+.pt-5 {
+  padding-top: 3rem !important;
+}
+
+.pe-0 {
+  padding-right: 0 !important;
+}
+
+.pe-1 {
+  padding-right: 0.25rem !important;
+}
+
+.pe-2 {
+  padding-right: 0.5rem !important;
+}
+
+.pe-3 {
+  padding-right: 1rem !important;
+}
+
+.pe-4 {
+  padding-right: 1.5rem !important;
+}
+
+.pe-5 {
+  padding-right: 3rem !important;
+}
+
+.pb-0 {
+  padding-bottom: 0 !important;
+}
+
+.pb-1 {
+  padding-bottom: 0.25rem !important;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem !important;
+}
+
+.pb-3 {
+  padding-bottom: 1rem !important;
+}
+
+.pb-4 {
+  padding-bottom: 1.5rem !important;
+}
+
+.pb-5 {
+  padding-bottom: 3rem !important;
+}
+
+.ps-0 {
+  padding-left: 0 !important;
+}
+
+.ps-1 {
+  padding-left: 0.25rem !important;
+}
+
+.ps-2 {
+  padding-left: 0.5rem !important;
+}
+
+.ps-3 {
+  padding-left: 1rem !important;
+}
+
+.ps-4 {
+  padding-left: 1.5rem !important;
+}
+
+.ps-5 {
+  padding-left: 3rem !important;
+}
+
+.gap-0 {
+  gap: 0 !important;
+}
+
+.gap-1 {
+  gap: 0.25rem !important;
+}
+
+.gap-2 {
+  gap: 0.5rem !important;
+}
+
+.gap-3 {
+  gap: 1rem !important;
+}
+
+.gap-4 {
+  gap: 1.5rem !important;
+}
+
+.gap-5 {
+  gap: 3rem !important;
+}
+
+.font-monospace {
+  font-family: var(--bs-font-monospace) !important;
+}
+
+.fs-1 {
+  font-size: calc(1.375rem + 1.5vw) !important;
+}
+
+.fs-2 {
+  font-size: calc(1.325rem + 0.9vw) !important;
+}
+
+.fs-3 {
+  font-size: calc(1.3rem + 0.6vw) !important;
+}
+
+.fs-4 {
+  font-size: calc(1.275rem + 0.3vw) !important;
+}
+
+.fs-5 {
+  font-size: 1.25rem !important;
+}
+
+.fs-6 {
+  font-size: 1rem !important;
+}
+
+.fst-italic {
+  font-style: italic !important;
+}
+
+.fst-normal {
+  font-style: normal !important;
+}
+
+.fw-light {
+  font-weight: 300 !important;
+}
+
+.fw-lighter {
+  font-weight: lighter !important;
+}
+
+.fw-normal {
+  font-weight: 400 !important;
+}
+
+.fw-bold {
+  font-weight: 700 !important;
+}
+
+.fw-semibold {
+  font-weight: 600 !important;
+}
+
+.fw-bolder {
+  font-weight: bolder !important;
+}
+
+.lh-1 {
+  line-height: 1 !important;
+}
+
+.lh-sm {
+  line-height: 1.25 !important;
+}
+
+.lh-base {
+  line-height: 1.5 !important;
+}
+
+.lh-lg {
+  line-height: 2 !important;
+}
+
+.text-start {
+  text-align: left !important;
+}
+
+.text-end {
+  text-align: right !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-decoration-none {
+  text-decoration: none !important;
+}
+
+.text-decoration-underline {
+  text-decoration: underline !important;
+}
+
+.text-decoration-line-through {
+  text-decoration: line-through !important;
+}
+
+.text-lowercase {
+  text-transform: lowercase !important;
+}
+
+.text-uppercase {
+  text-transform: uppercase !important;
+}
+
+.text-capitalize {
+  text-transform: capitalize !important;
+}
+
+.text-wrap {
+  white-space: normal !important;
+}
+
+.text-nowrap {
+  white-space: nowrap !important;
+}
+
+/* rtl:begin:remove */
+.text-break {
+  word-wrap: break-word !important;
+  word-break: break-word !important;
+}
+
+/* rtl:end:remove */
+.text-primary {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-secondary {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-success {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-info {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-warning {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-danger {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-light {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-dark {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-black {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-white {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-body {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-muted {
+  --bs-text-opacity: 1;
+  color: #6c757d !important;
+}
+
+.text-black-50 {
+  --bs-text-opacity: 1;
+  color: rgba(0, 0, 0, 0.5) !important;
+}
+
+.text-white-50 {
+  --bs-text-opacity: 1;
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+
+.text-reset {
+  --bs-text-opacity: 1;
+  color: inherit !important;
+}
+
+.text-opacity-25 {
+  --bs-text-opacity: 0.25;
+}
+
+.text-opacity-50 {
+  --bs-text-opacity: 0.5;
+}
+
+.text-opacity-75 {
+  --bs-text-opacity: 0.75;
+}
+
+.text-opacity-100 {
+  --bs-text-opacity: 1;
+}
+
+.bg-primary {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-secondary {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-success {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-info {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-warning {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-danger {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-light {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-dark {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-black {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-white {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-body {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-transparent {
+  --bs-bg-opacity: 1;
+  background-color: transparent !important;
+}
+
+.bg-opacity-10 {
+  --bs-bg-opacity: 0.1;
+}
+
+.bg-opacity-25 {
+  --bs-bg-opacity: 0.25;
+}
+
+.bg-opacity-50 {
+  --bs-bg-opacity: 0.5;
+}
+
+.bg-opacity-75 {
+  --bs-bg-opacity: 0.75;
+}
+
+.bg-opacity-100 {
+  --bs-bg-opacity: 1;
+}
+
+.bg-gradient {
+  background-image: var(--bs-gradient) !important;
+}
+
+.user-select-all {
+  -webkit-user-select: all !important;
+     -moz-user-select: all !important;
+          user-select: all !important;
+}
+
+.user-select-auto {
+  -webkit-user-select: auto !important;
+     -moz-user-select: auto !important;
+          user-select: auto !important;
+}
+
+.user-select-none {
+  -webkit-user-select: none !important;
+     -moz-user-select: none !important;
+          user-select: none !important;
+}
+
+.pe-none {
+  pointer-events: none !important;
+}
+
+.pe-auto {
+  pointer-events: auto !important;
+}
+
+.rounded {
+  border-radius: var(--bs-border-radius) !important;
+}
+
+.rounded-0 {
+  border-radius: 0 !important;
+}
+
+.rounded-1 {
+  border-radius: var(--bs-border-radius-sm) !important;
+}
+
+.rounded-2 {
+  border-radius: var(--bs-border-radius) !important;
+}
+
+.rounded-3 {
+  border-radius: var(--bs-border-radius-lg) !important;
+}
+
+.rounded-4 {
+  border-radius: var(--bs-border-radius-xl) !important;
+}
+
+.rounded-5 {
+  border-radius: var(--bs-border-radius-2xl) !important;
+}
+
+.rounded-circle {
+  border-radius: 50% !important;
+}
+
+.rounded-pill {
+  border-radius: var(--bs-border-radius-pill) !important;
+}
+
+.rounded-top {
+  border-top-left-radius: var(--bs-border-radius) !important;
+  border-top-right-radius: var(--bs-border-radius) !important;
+}
+
+.rounded-end {
+  border-top-right-radius: var(--bs-border-radius) !important;
+  border-bottom-right-radius: var(--bs-border-radius) !important;
+}
+
+.rounded-bottom {
+  border-bottom-right-radius: var(--bs-border-radius) !important;
+  border-bottom-left-radius: var(--bs-border-radius) !important;
+}
+
+.rounded-start {
+  border-bottom-left-radius: var(--bs-border-radius) !important;
+  border-top-left-radius: var(--bs-border-radius) !important;
+}
+
+.visible {
+  visibility: visible !important;
+}
+
+.invisible {
+  visibility: hidden !important;
+}
+
+@media (min-width: 576px) {
+  .float-sm-start {
+    float: left !important;
+  }
+  .float-sm-end {
+    float: right !important;
+  }
+  .float-sm-none {
+    float: none !important;
+  }
+  .d-sm-inline {
+    display: inline !important;
+  }
+  .d-sm-inline-block {
+    display: inline-block !important;
+  }
+  .d-sm-block {
+    display: block !important;
+  }
+  .d-sm-grid {
+    display: grid !important;
+  }
+  .d-sm-table {
+    display: table !important;
+  }
+  .d-sm-table-row {
+    display: table-row !important;
+  }
+  .d-sm-table-cell {
+    display: table-cell !important;
+  }
+  .d-sm-flex {
+    display: flex !important;
+  }
+  .d-sm-inline-flex {
+    display: inline-flex !important;
+  }
+  .d-sm-none {
+    display: none !important;
+  }
+  .flex-sm-fill {
+    flex: 1 1 auto !important;
+  }
+  .flex-sm-row {
+    flex-direction: row !important;
+  }
+  .flex-sm-column {
+    flex-direction: column !important;
+  }
+  .flex-sm-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+  .flex-sm-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+  .flex-sm-grow-0 {
+    flex-grow: 0 !important;
+  }
+  .flex-sm-grow-1 {
+    flex-grow: 1 !important;
+  }
+  .flex-sm-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+  .flex-sm-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+  .flex-sm-wrap {
+    flex-wrap: wrap !important;
+  }
+  .flex-sm-nowrap {
+    flex-wrap: nowrap !important;
+  }
+  .flex-sm-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+  .justify-content-sm-start {
+    justify-content: flex-start !important;
+  }
+  .justify-content-sm-end {
+    justify-content: flex-end !important;
+  }
+  .justify-content-sm-center {
+    justify-content: center !important;
+  }
+  .justify-content-sm-between {
+    justify-content: space-between !important;
+  }
+  .justify-content-sm-around {
+    justify-content: space-around !important;
+  }
+  .justify-content-sm-evenly {
+    justify-content: space-evenly !important;
+  }
+  .align-items-sm-start {
+    align-items: flex-start !important;
+  }
+  .align-items-sm-end {
+    align-items: flex-end !important;
+  }
+  .align-items-sm-center {
+    align-items: center !important;
+  }
+  .align-items-sm-baseline {
+    align-items: baseline !important;
+  }
+  .align-items-sm-stretch {
+    align-items: stretch !important;
+  }
+  .align-content-sm-start {
+    align-content: flex-start !important;
+  }
+  .align-content-sm-end {
+    align-content: flex-end !important;
+  }
+  .align-content-sm-center {
+    align-content: center !important;
+  }
+  .align-content-sm-between {
+    align-content: space-between !important;
+  }
+  .align-content-sm-around {
+    align-content: space-around !important;
+  }
+  .align-content-sm-stretch {
+    align-content: stretch !important;
+  }
+  .align-self-sm-auto {
+    align-self: auto !important;
+  }
+  .align-self-sm-start {
+    align-self: flex-start !important;
+  }
+  .align-self-sm-end {
+    align-self: flex-end !important;
+  }
+  .align-self-sm-center {
+    align-self: center !important;
+  }
+  .align-self-sm-baseline {
+    align-self: baseline !important;
+  }
+  .align-self-sm-stretch {
+    align-self: stretch !important;
+  }
+  .order-sm-first {
+    order: -1 !important;
+  }
+  .order-sm-0 {
+    order: 0 !important;
+  }
+  .order-sm-1 {
+    order: 1 !important;
+  }
+  .order-sm-2 {
+    order: 2 !important;
+  }
+  .order-sm-3 {
+    order: 3 !important;
+  }
+  .order-sm-4 {
+    order: 4 !important;
+  }
+  .order-sm-5 {
+    order: 5 !important;
+  }
+  .order-sm-last {
+    order: 6 !important;
+  }
+  .m-sm-0 {
+    margin: 0 !important;
+  }
+  .m-sm-1 {
+    margin: 0.25rem !important;
+  }
+  .m-sm-2 {
+    margin: 0.5rem !important;
+  }
+  .m-sm-3 {
+    margin: 1rem !important;
+  }
+  .m-sm-4 {
+    margin: 1.5rem !important;
+  }
+  .m-sm-5 {
+    margin: 3rem !important;
+  }
+  .m-sm-auto {
+    margin: auto !important;
+  }
+  .mx-sm-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+  .mx-sm-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
+  }
+  .mx-sm-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
+  }
+  .mx-sm-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
+  }
+  .mx-sm-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
+  }
+  .mx-sm-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
+  }
+  .mx-sm-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+  .my-sm-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+  .my-sm-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
+  }
+  .my-sm-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+  .my-sm-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+  }
+  .my-sm-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+  }
+  .my-sm-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
+  }
+  .my-sm-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+  .mt-sm-0 {
+    margin-top: 0 !important;
+  }
+  .mt-sm-1 {
+    margin-top: 0.25rem !important;
+  }
+  .mt-sm-2 {
+    margin-top: 0.5rem !important;
+  }
+  .mt-sm-3 {
+    margin-top: 1rem !important;
+  }
+  .mt-sm-4 {
+    margin-top: 1.5rem !important;
+  }
+  .mt-sm-5 {
+    margin-top: 3rem !important;
+  }
+  .mt-sm-auto {
+    margin-top: auto !important;
+  }
+  .me-sm-0 {
+    margin-right: 0 !important;
+  }
+  .me-sm-1 {
+    margin-right: 0.25rem !important;
+  }
+  .me-sm-2 {
+    margin-right: 0.5rem !important;
+  }
+  .me-sm-3 {
+    margin-right: 1rem !important;
+  }
+  .me-sm-4 {
+    margin-right: 1.5rem !important;
+  }
+  .me-sm-5 {
+    margin-right: 3rem !important;
+  }
+  .me-sm-auto {
+    margin-right: auto !important;
+  }
+  .mb-sm-0 {
+    margin-bottom: 0 !important;
+  }
+  .mb-sm-1 {
+    margin-bottom: 0.25rem !important;
+  }
+  .mb-sm-2 {
+    margin-bottom: 0.5rem !important;
+  }
+  .mb-sm-3 {
+    margin-bottom: 1rem !important;
+  }
+  .mb-sm-4 {
+    margin-bottom: 1.5rem !important;
+  }
+  .mb-sm-5 {
+    margin-bottom: 3rem !important;
+  }
+  .mb-sm-auto {
+    margin-bottom: auto !important;
+  }
+  .ms-sm-0 {
+    margin-left: 0 !important;
+  }
+  .ms-sm-1 {
+    margin-left: 0.25rem !important;
+  }
+  .ms-sm-2 {
+    margin-left: 0.5rem !important;
+  }
+  .ms-sm-3 {
+    margin-left: 1rem !important;
+  }
+  .ms-sm-4 {
+    margin-left: 1.5rem !important;
+  }
+  .ms-sm-5 {
+    margin-left: 3rem !important;
+  }
+  .ms-sm-auto {
+    margin-left: auto !important;
+  }
+  .p-sm-0 {
+    padding: 0 !important;
+  }
+  .p-sm-1 {
+    padding: 0.25rem !important;
+  }
+  .p-sm-2 {
+    padding: 0.5rem !important;
+  }
+  .p-sm-3 {
+    padding: 1rem !important;
+  }
+  .p-sm-4 {
+    padding: 1.5rem !important;
+  }
+  .p-sm-5 {
+    padding: 3rem !important;
+  }
+  .px-sm-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+  .px-sm-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
+  .px-sm-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
+  .px-sm-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
+  .px-sm-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
+  }
+  .px-sm-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+  }
+  .py-sm-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+  .py-sm-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+  .py-sm-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
+  .py-sm-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+  }
+  .py-sm-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
+  .py-sm-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
+  }
+  .pt-sm-0 {
+    padding-top: 0 !important;
+  }
+  .pt-sm-1 {
+    padding-top: 0.25rem !important;
+  }
+  .pt-sm-2 {
+    padding-top: 0.5rem !important;
+  }
+  .pt-sm-3 {
+    padding-top: 1rem !important;
+  }
+  .pt-sm-4 {
+    padding-top: 1.5rem !important;
+  }
+  .pt-sm-5 {
+    padding-top: 3rem !important;
+  }
+  .pe-sm-0 {
+    padding-right: 0 !important;
+  }
+  .pe-sm-1 {
+    padding-right: 0.25rem !important;
+  }
+  .pe-sm-2 {
+    padding-right: 0.5rem !important;
+  }
+  .pe-sm-3 {
+    padding-right: 1rem !important;
+  }
+  .pe-sm-4 {
+    padding-right: 1.5rem !important;
+  }
+  .pe-sm-5 {
+    padding-right: 3rem !important;
+  }
+  .pb-sm-0 {
+    padding-bottom: 0 !important;
+  }
+  .pb-sm-1 {
+    padding-bottom: 0.25rem !important;
+  }
+  .pb-sm-2 {
+    padding-bottom: 0.5rem !important;
+  }
+  .pb-sm-3 {
+    padding-bottom: 1rem !important;
+  }
+  .pb-sm-4 {
+    padding-bottom: 1.5rem !important;
+  }
+  .pb-sm-5 {
+    padding-bottom: 3rem !important;
+  }
+  .ps-sm-0 {
+    padding-left: 0 !important;
+  }
+  .ps-sm-1 {
+    padding-left: 0.25rem !important;
+  }
+  .ps-sm-2 {
+    padding-left: 0.5rem !important;
+  }
+  .ps-sm-3 {
+    padding-left: 1rem !important;
+  }
+  .ps-sm-4 {
+    padding-left: 1.5rem !important;
+  }
+  .ps-sm-5 {
+    padding-left: 3rem !important;
+  }
+  .gap-sm-0 {
+    gap: 0 !important;
+  }
+  .gap-sm-1 {
+    gap: 0.25rem !important;
+  }
+  .gap-sm-2 {
+    gap: 0.5rem !important;
+  }
+  .gap-sm-3 {
+    gap: 1rem !important;
+  }
+  .gap-sm-4 {
+    gap: 1.5rem !important;
+  }
+  .gap-sm-5 {
+    gap: 3rem !important;
+  }
+  .text-sm-start {
+    text-align: left !important;
+  }
+  .text-sm-end {
+    text-align: right !important;
+  }
+  .text-sm-center {
+    text-align: center !important;
+  }
+}
+@media (min-width: 768px) {
+  .float-md-start {
+    float: left !important;
+  }
+  .float-md-end {
+    float: right !important;
+  }
+  .float-md-none {
+    float: none !important;
+  }
+  .d-md-inline {
+    display: inline !important;
+  }
+  .d-md-inline-block {
+    display: inline-block !important;
+  }
+  .d-md-block {
+    display: block !important;
+  }
+  .d-md-grid {
+    display: grid !important;
+  }
+  .d-md-table {
+    display: table !important;
+  }
+  .d-md-table-row {
+    display: table-row !important;
+  }
+  .d-md-table-cell {
+    display: table-cell !important;
+  }
+  .d-md-flex {
+    display: flex !important;
+  }
+  .d-md-inline-flex {
+    display: inline-flex !important;
+  }
+  .d-md-none {
+    display: none !important;
+  }
+  .flex-md-fill {
+    flex: 1 1 auto !important;
+  }
+  .flex-md-row {
+    flex-direction: row !important;
+  }
+  .flex-md-column {
+    flex-direction: column !important;
+  }
+  .flex-md-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+  .flex-md-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+  .flex-md-grow-0 {
+    flex-grow: 0 !important;
+  }
+  .flex-md-grow-1 {
+    flex-grow: 1 !important;
+  }
+  .flex-md-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+  .flex-md-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+  .flex-md-wrap {
+    flex-wrap: wrap !important;
+  }
+  .flex-md-nowrap {
+    flex-wrap: nowrap !important;
+  }
+  .flex-md-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+  .justify-content-md-start {
+    justify-content: flex-start !important;
+  }
+  .justify-content-md-end {
+    justify-content: flex-end !important;
+  }
+  .justify-content-md-center {
+    justify-content: center !important;
+  }
+  .justify-content-md-between {
+    justify-content: space-between !important;
+  }
+  .justify-content-md-around {
+    justify-content: space-around !important;
+  }
+  .justify-content-md-evenly {
+    justify-content: space-evenly !important;
+  }
+  .align-items-md-start {
+    align-items: flex-start !important;
+  }
+  .align-items-md-end {
+    align-items: flex-end !important;
+  }
+  .align-items-md-center {
+    align-items: center !important;
+  }
+  .align-items-md-baseline {
+    align-items: baseline !important;
+  }
+  .align-items-md-stretch {
+    align-items: stretch !important;
+  }
+  .align-content-md-start {
+    align-content: flex-start !important;
+  }
+  .align-content-md-end {
+    align-content: flex-end !important;
+  }
+  .align-content-md-center {
+    align-content: center !important;
+  }
+  .align-content-md-between {
+    align-content: space-between !important;
+  }
+  .align-content-md-around {
+    align-content: space-around !important;
+  }
+  .align-content-md-stretch {
+    align-content: stretch !important;
+  }
+  .align-self-md-auto {
+    align-self: auto !important;
+  }
+  .align-self-md-start {
+    align-self: flex-start !important;
+  }
+  .align-self-md-end {
+    align-self: flex-end !important;
+  }
+  .align-self-md-center {
+    align-self: center !important;
+  }
+  .align-self-md-baseline {
+    align-self: baseline !important;
+  }
+  .align-self-md-stretch {
+    align-self: stretch !important;
+  }
+  .order-md-first {
+    order: -1 !important;
+  }
+  .order-md-0 {
+    order: 0 !important;
+  }
+  .order-md-1 {
+    order: 1 !important;
+  }
+  .order-md-2 {
+    order: 2 !important;
+  }
+  .order-md-3 {
+    order: 3 !important;
+  }
+  .order-md-4 {
+    order: 4 !important;
+  }
+  .order-md-5 {
+    order: 5 !important;
+  }
+  .order-md-last {
+    order: 6 !important;
+  }
+  .m-md-0 {
+    margin: 0 !important;
+  }
+  .m-md-1 {
+    margin: 0.25rem !important;
+  }
+  .m-md-2 {
+    margin: 0.5rem !important;
+  }
+  .m-md-3 {
+    margin: 1rem !important;
+  }
+  .m-md-4 {
+    margin: 1.5rem !important;
+  }
+  .m-md-5 {
+    margin: 3rem !important;
+  }
+  .m-md-auto {
+    margin: auto !important;
+  }
+  .mx-md-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+  .mx-md-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
+  }
+  .mx-md-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
+  }
+  .mx-md-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
+  }
+  .mx-md-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
+  }
+  .mx-md-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
+  }
+  .mx-md-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+  .my-md-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+  .my-md-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
+  }
+  .my-md-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+  .my-md-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+  }
+  .my-md-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+  }
+  .my-md-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
+  }
+  .my-md-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+  .mt-md-0 {
+    margin-top: 0 !important;
+  }
+  .mt-md-1 {
+    margin-top: 0.25rem !important;
+  }
+  .mt-md-2 {
+    margin-top: 0.5rem !important;
+  }
+  .mt-md-3 {
+    margin-top: 1rem !important;
+  }
+  .mt-md-4 {
+    margin-top: 1.5rem !important;
+  }
+  .mt-md-5 {
+    margin-top: 3rem !important;
+  }
+  .mt-md-auto {
+    margin-top: auto !important;
+  }
+  .me-md-0 {
+    margin-right: 0 !important;
+  }
+  .me-md-1 {
+    margin-right: 0.25rem !important;
+  }
+  .me-md-2 {
+    margin-right: 0.5rem !important;
+  }
+  .me-md-3 {
+    margin-right: 1rem !important;
+  }
+  .me-md-4 {
+    margin-right: 1.5rem !important;
+  }
+  .me-md-5 {
+    margin-right: 3rem !important;
+  }
+  .me-md-auto {
+    margin-right: auto !important;
+  }
+  .mb-md-0 {
+    margin-bottom: 0 !important;
+  }
+  .mb-md-1 {
+    margin-bottom: 0.25rem !important;
+  }
+  .mb-md-2 {
+    margin-bottom: 0.5rem !important;
+  }
+  .mb-md-3 {
+    margin-bottom: 1rem !important;
+  }
+  .mb-md-4 {
+    margin-bottom: 1.5rem !important;
+  }
+  .mb-md-5 {
+    margin-bottom: 3rem !important;
+  }
+  .mb-md-auto {
+    margin-bottom: auto !important;
+  }
+  .ms-md-0 {
+    margin-left: 0 !important;
+  }
+  .ms-md-1 {
+    margin-left: 0.25rem !important;
+  }
+  .ms-md-2 {
+    margin-left: 0.5rem !important;
+  }
+  .ms-md-3 {
+    margin-left: 1rem !important;
+  }
+  .ms-md-4 {
+    margin-left: 1.5rem !important;
+  }
+  .ms-md-5 {
+    margin-left: 3rem !important;
+  }
+  .ms-md-auto {
+    margin-left: auto !important;
+  }
+  .p-md-0 {
+    padding: 0 !important;
+  }
+  .p-md-1 {
+    padding: 0.25rem !important;
+  }
+  .p-md-2 {
+    padding: 0.5rem !important;
+  }
+  .p-md-3 {
+    padding: 1rem !important;
+  }
+  .p-md-4 {
+    padding: 1.5rem !important;
+  }
+  .p-md-5 {
+    padding: 3rem !important;
+  }
+  .px-md-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+  .px-md-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
+  .px-md-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
+  .px-md-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
+  .px-md-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
+  }
+  .px-md-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+  }
+  .py-md-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+  .py-md-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+  .py-md-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
+  .py-md-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+  }
+  .py-md-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
+  .py-md-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
+  }
+  .pt-md-0 {
+    padding-top: 0 !important;
+  }
+  .pt-md-1 {
+    padding-top: 0.25rem !important;
+  }
+  .pt-md-2 {
+    padding-top: 0.5rem !important;
+  }
+  .pt-md-3 {
+    padding-top: 1rem !important;
+  }
+  .pt-md-4 {
+    padding-top: 1.5rem !important;
+  }
+  .pt-md-5 {
+    padding-top: 3rem !important;
+  }
+  .pe-md-0 {
+    padding-right: 0 !important;
+  }
+  .pe-md-1 {
+    padding-right: 0.25rem !important;
+  }
+  .pe-md-2 {
+    padding-right: 0.5rem !important;
+  }
+  .pe-md-3 {
+    padding-right: 1rem !important;
+  }
+  .pe-md-4 {
+    padding-right: 1.5rem !important;
+  }
+  .pe-md-5 {
+    padding-right: 3rem !important;
+  }
+  .pb-md-0 {
+    padding-bottom: 0 !important;
+  }
+  .pb-md-1 {
+    padding-bottom: 0.25rem !important;
+  }
+  .pb-md-2 {
+    padding-bottom: 0.5rem !important;
+  }
+  .pb-md-3 {
+    padding-bottom: 1rem !important;
+  }
+  .pb-md-4 {
+    padding-bottom: 1.5rem !important;
+  }
+  .pb-md-5 {
+    padding-bottom: 3rem !important;
+  }
+  .ps-md-0 {
+    padding-left: 0 !important;
+  }
+  .ps-md-1 {
+    padding-left: 0.25rem !important;
+  }
+  .ps-md-2 {
+    padding-left: 0.5rem !important;
+  }
+  .ps-md-3 {
+    padding-left: 1rem !important;
+  }
+  .ps-md-4 {
+    padding-left: 1.5rem !important;
+  }
+  .ps-md-5 {
+    padding-left: 3rem !important;
+  }
+  .gap-md-0 {
+    gap: 0 !important;
+  }
+  .gap-md-1 {
+    gap: 0.25rem !important;
+  }
+  .gap-md-2 {
+    gap: 0.5rem !important;
+  }
+  .gap-md-3 {
+    gap: 1rem !important;
+  }
+  .gap-md-4 {
+    gap: 1.5rem !important;
+  }
+  .gap-md-5 {
+    gap: 3rem !important;
+  }
+  .text-md-start {
+    text-align: left !important;
+  }
+  .text-md-end {
+    text-align: right !important;
+  }
+  .text-md-center {
+    text-align: center !important;
+  }
+}
+@media (min-width: 992px) {
+  .float-lg-start {
+    float: left !important;
+  }
+  .float-lg-end {
+    float: right !important;
+  }
+  .float-lg-none {
+    float: none !important;
+  }
+  .d-lg-inline {
+    display: inline !important;
+  }
+  .d-lg-inline-block {
+    display: inline-block !important;
+  }
+  .d-lg-block {
+    display: block !important;
+  }
+  .d-lg-grid {
+    display: grid !important;
+  }
+  .d-lg-table {
+    display: table !important;
+  }
+  .d-lg-table-row {
+    display: table-row !important;
+  }
+  .d-lg-table-cell {
+    display: table-cell !important;
+  }
+  .d-lg-flex {
+    display: flex !important;
+  }
+  .d-lg-inline-flex {
+    display: inline-flex !important;
+  }
+  .d-lg-none {
+    display: none !important;
+  }
+  .flex-lg-fill {
+    flex: 1 1 auto !important;
+  }
+  .flex-lg-row {
+    flex-direction: row !important;
+  }
+  .flex-lg-column {
+    flex-direction: column !important;
+  }
+  .flex-lg-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+  .flex-lg-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+  .flex-lg-grow-0 {
+    flex-grow: 0 !important;
+  }
+  .flex-lg-grow-1 {
+    flex-grow: 1 !important;
+  }
+  .flex-lg-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+  .flex-lg-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+  .flex-lg-wrap {
+    flex-wrap: wrap !important;
+  }
+  .flex-lg-nowrap {
+    flex-wrap: nowrap !important;
+  }
+  .flex-lg-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+  .justify-content-lg-start {
+    justify-content: flex-start !important;
+  }
+  .justify-content-lg-end {
+    justify-content: flex-end !important;
+  }
+  .justify-content-lg-center {
+    justify-content: center !important;
+  }
+  .justify-content-lg-between {
+    justify-content: space-between !important;
+  }
+  .justify-content-lg-around {
+    justify-content: space-around !important;
+  }
+  .justify-content-lg-evenly {
+    justify-content: space-evenly !important;
+  }
+  .align-items-lg-start {
+    align-items: flex-start !important;
+  }
+  .align-items-lg-end {
+    align-items: flex-end !important;
+  }
+  .align-items-lg-center {
+    align-items: center !important;
+  }
+  .align-items-lg-baseline {
+    align-items: baseline !important;
+  }
+  .align-items-lg-stretch {
+    align-items: stretch !important;
+  }
+  .align-content-lg-start {
+    align-content: flex-start !important;
+  }
+  .align-content-lg-end {
+    align-content: flex-end !important;
+  }
+  .align-content-lg-center {
+    align-content: center !important;
+  }
+  .align-content-lg-between {
+    align-content: space-between !important;
+  }
+  .align-content-lg-around {
+    align-content: space-around !important;
+  }
+  .align-content-lg-stretch {
+    align-content: stretch !important;
+  }
+  .align-self-lg-auto {
+    align-self: auto !important;
+  }
+  .align-self-lg-start {
+    align-self: flex-start !important;
+  }
+  .align-self-lg-end {
+    align-self: flex-end !important;
+  }
+  .align-self-lg-center {
+    align-self: center !important;
+  }
+  .align-self-lg-baseline {
+    align-self: baseline !important;
+  }
+  .align-self-lg-stretch {
+    align-self: stretch !important;
+  }
+  .order-lg-first {
+    order: -1 !important;
+  }
+  .order-lg-0 {
+    order: 0 !important;
+  }
+  .order-lg-1 {
+    order: 1 !important;
+  }
+  .order-lg-2 {
+    order: 2 !important;
+  }
+  .order-lg-3 {
+    order: 3 !important;
+  }
+  .order-lg-4 {
+    order: 4 !important;
+  }
+  .order-lg-5 {
+    order: 5 !important;
+  }
+  .order-lg-last {
+    order: 6 !important;
+  }
+  .m-lg-0 {
+    margin: 0 !important;
+  }
+  .m-lg-1 {
+    margin: 0.25rem !important;
+  }
+  .m-lg-2 {
+    margin: 0.5rem !important;
+  }
+  .m-lg-3 {
+    margin: 1rem !important;
+  }
+  .m-lg-4 {
+    margin: 1.5rem !important;
+  }
+  .m-lg-5 {
+    margin: 3rem !important;
+  }
+  .m-lg-auto {
+    margin: auto !important;
+  }
+  .mx-lg-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+  .mx-lg-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
+  }
+  .mx-lg-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
+  }
+  .mx-lg-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
+  }
+  .mx-lg-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
+  }
+  .mx-lg-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
+  }
+  .mx-lg-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+  .my-lg-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+  .my-lg-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
+  }
+  .my-lg-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+  .my-lg-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+  }
+  .my-lg-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+  }
+  .my-lg-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
+  }
+  .my-lg-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+  .mt-lg-0 {
+    margin-top: 0 !important;
+  }
+  .mt-lg-1 {
+    margin-top: 0.25rem !important;
+  }
+  .mt-lg-2 {
+    margin-top: 0.5rem !important;
+  }
+  .mt-lg-3 {
+    margin-top: 1rem !important;
+  }
+  .mt-lg-4 {
+    margin-top: 1.5rem !important;
+  }
+  .mt-lg-5 {
+    margin-top: 3rem !important;
+  }
+  .mt-lg-auto {
+    margin-top: auto !important;
+  }
+  .me-lg-0 {
+    margin-right: 0 !important;
+  }
+  .me-lg-1 {
+    margin-right: 0.25rem !important;
+  }
+  .me-lg-2 {
+    margin-right: 0.5rem !important;
+  }
+  .me-lg-3 {
+    margin-right: 1rem !important;
+  }
+  .me-lg-4 {
+    margin-right: 1.5rem !important;
+  }
+  .me-lg-5 {
+    margin-right: 3rem !important;
+  }
+  .me-lg-auto {
+    margin-right: auto !important;
+  }
+  .mb-lg-0 {
+    margin-bottom: 0 !important;
+  }
+  .mb-lg-1 {
+    margin-bottom: 0.25rem !important;
+  }
+  .mb-lg-2 {
+    margin-bottom: 0.5rem !important;
+  }
+  .mb-lg-3 {
+    margin-bottom: 1rem !important;
+  }
+  .mb-lg-4 {
+    margin-bottom: 1.5rem !important;
+  }
+  .mb-lg-5 {
+    margin-bottom: 3rem !important;
+  }
+  .mb-lg-auto {
+    margin-bottom: auto !important;
+  }
+  .ms-lg-0 {
+    margin-left: 0 !important;
+  }
+  .ms-lg-1 {
+    margin-left: 0.25rem !important;
+  }
+  .ms-lg-2 {
+    margin-left: 0.5rem !important;
+  }
+  .ms-lg-3 {
+    margin-left: 1rem !important;
+  }
+  .ms-lg-4 {
+    margin-left: 1.5rem !important;
+  }
+  .ms-lg-5 {
+    margin-left: 3rem !important;
+  }
+  .ms-lg-auto {
+    margin-left: auto !important;
+  }
+  .p-lg-0 {
+    padding: 0 !important;
+  }
+  .p-lg-1 {
+    padding: 0.25rem !important;
+  }
+  .p-lg-2 {
+    padding: 0.5rem !important;
+  }
+  .p-lg-3 {
+    padding: 1rem !important;
+  }
+  .p-lg-4 {
+    padding: 1.5rem !important;
+  }
+  .p-lg-5 {
+    padding: 3rem !important;
+  }
+  .px-lg-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+  .px-lg-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
+  .px-lg-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
+  .px-lg-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
+  .px-lg-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
+  }
+  .px-lg-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+  }
+  .py-lg-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+  .py-lg-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+  .py-lg-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
+  .py-lg-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+  }
+  .py-lg-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
+  .py-lg-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
+  }
+  .pt-lg-0 {
+    padding-top: 0 !important;
+  }
+  .pt-lg-1 {
+    padding-top: 0.25rem !important;
+  }
+  .pt-lg-2 {
+    padding-top: 0.5rem !important;
+  }
+  .pt-lg-3 {
+    padding-top: 1rem !important;
+  }
+  .pt-lg-4 {
+    padding-top: 1.5rem !important;
+  }
+  .pt-lg-5 {
+    padding-top: 3rem !important;
+  }
+  .pe-lg-0 {
+    padding-right: 0 !important;
+  }
+  .pe-lg-1 {
+    padding-right: 0.25rem !important;
+  }
+  .pe-lg-2 {
+    padding-right: 0.5rem !important;
+  }
+  .pe-lg-3 {
+    padding-right: 1rem !important;
+  }
+  .pe-lg-4 {
+    padding-right: 1.5rem !important;
+  }
+  .pe-lg-5 {
+    padding-right: 3rem !important;
+  }
+  .pb-lg-0 {
+    padding-bottom: 0 !important;
+  }
+  .pb-lg-1 {
+    padding-bottom: 0.25rem !important;
+  }
+  .pb-lg-2 {
+    padding-bottom: 0.5rem !important;
+  }
+  .pb-lg-3 {
+    padding-bottom: 1rem !important;
+  }
+  .pb-lg-4 {
+    padding-bottom: 1.5rem !important;
+  }
+  .pb-lg-5 {
+    padding-bottom: 3rem !important;
+  }
+  .ps-lg-0 {
+    padding-left: 0 !important;
+  }
+  .ps-lg-1 {
+    padding-left: 0.25rem !important;
+  }
+  .ps-lg-2 {
+    padding-left: 0.5rem !important;
+  }
+  .ps-lg-3 {
+    padding-left: 1rem !important;
+  }
+  .ps-lg-4 {
+    padding-left: 1.5rem !important;
+  }
+  .ps-lg-5 {
+    padding-left: 3rem !important;
+  }
+  .gap-lg-0 {
+    gap: 0 !important;
+  }
+  .gap-lg-1 {
+    gap: 0.25rem !important;
+  }
+  .gap-lg-2 {
+    gap: 0.5rem !important;
+  }
+  .gap-lg-3 {
+    gap: 1rem !important;
+  }
+  .gap-lg-4 {
+    gap: 1.5rem !important;
+  }
+  .gap-lg-5 {
+    gap: 3rem !important;
+  }
+  .text-lg-start {
+    text-align: left !important;
+  }
+  .text-lg-end {
+    text-align: right !important;
+  }
+  .text-lg-center {
+    text-align: center !important;
+  }
+}
+@media (min-width: 1200px) {
+  .float-xl-start {
+    float: left !important;
+  }
+  .float-xl-end {
+    float: right !important;
+  }
+  .float-xl-none {
+    float: none !important;
+  }
+  .d-xl-inline {
+    display: inline !important;
+  }
+  .d-xl-inline-block {
+    display: inline-block !important;
+  }
+  .d-xl-block {
+    display: block !important;
+  }
+  .d-xl-grid {
+    display: grid !important;
+  }
+  .d-xl-table {
+    display: table !important;
+  }
+  .d-xl-table-row {
+    display: table-row !important;
+  }
+  .d-xl-table-cell {
+    display: table-cell !important;
+  }
+  .d-xl-flex {
+    display: flex !important;
+  }
+  .d-xl-inline-flex {
+    display: inline-flex !important;
+  }
+  .d-xl-none {
+    display: none !important;
+  }
+  .flex-xl-fill {
+    flex: 1 1 auto !important;
+  }
+  .flex-xl-row {
+    flex-direction: row !important;
+  }
+  .flex-xl-column {
+    flex-direction: column !important;
+  }
+  .flex-xl-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+  .flex-xl-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+  .flex-xl-grow-0 {
+    flex-grow: 0 !important;
+  }
+  .flex-xl-grow-1 {
+    flex-grow: 1 !important;
+  }
+  .flex-xl-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+  .flex-xl-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+  .flex-xl-wrap {
+    flex-wrap: wrap !important;
+  }
+  .flex-xl-nowrap {
+    flex-wrap: nowrap !important;
+  }
+  .flex-xl-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+  .justify-content-xl-start {
+    justify-content: flex-start !important;
+  }
+  .justify-content-xl-end {
+    justify-content: flex-end !important;
+  }
+  .justify-content-xl-center {
+    justify-content: center !important;
+  }
+  .justify-content-xl-between {
+    justify-content: space-between !important;
+  }
+  .justify-content-xl-around {
+    justify-content: space-around !important;
+  }
+  .justify-content-xl-evenly {
+    justify-content: space-evenly !important;
+  }
+  .align-items-xl-start {
+    align-items: flex-start !important;
+  }
+  .align-items-xl-end {
+    align-items: flex-end !important;
+  }
+  .align-items-xl-center {
+    align-items: center !important;
+  }
+  .align-items-xl-baseline {
+    align-items: baseline !important;
+  }
+  .align-items-xl-stretch {
+    align-items: stretch !important;
+  }
+  .align-content-xl-start {
+    align-content: flex-start !important;
+  }
+  .align-content-xl-end {
+    align-content: flex-end !important;
+  }
+  .align-content-xl-center {
+    align-content: center !important;
+  }
+  .align-content-xl-between {
+    align-content: space-between !important;
+  }
+  .align-content-xl-around {
+    align-content: space-around !important;
+  }
+  .align-content-xl-stretch {
+    align-content: stretch !important;
+  }
+  .align-self-xl-auto {
+    align-self: auto !important;
+  }
+  .align-self-xl-start {
+    align-self: flex-start !important;
+  }
+  .align-self-xl-end {
+    align-self: flex-end !important;
+  }
+  .align-self-xl-center {
+    align-self: center !important;
+  }
+  .align-self-xl-baseline {
+    align-self: baseline !important;
+  }
+  .align-self-xl-stretch {
+    align-self: stretch !important;
+  }
+  .order-xl-first {
+    order: -1 !important;
+  }
+  .order-xl-0 {
+    order: 0 !important;
+  }
+  .order-xl-1 {
+    order: 1 !important;
+  }
+  .order-xl-2 {
+    order: 2 !important;
+  }
+  .order-xl-3 {
+    order: 3 !important;
+  }
+  .order-xl-4 {
+    order: 4 !important;
+  }
+  .order-xl-5 {
+    order: 5 !important;
+  }
+  .order-xl-last {
+    order: 6 !important;
+  }
+  .m-xl-0 {
+    margin: 0 !important;
+  }
+  .m-xl-1 {
+    margin: 0.25rem !important;
+  }
+  .m-xl-2 {
+    margin: 0.5rem !important;
+  }
+  .m-xl-3 {
+    margin: 1rem !important;
+  }
+  .m-xl-4 {
+    margin: 1.5rem !important;
+  }
+  .m-xl-5 {
+    margin: 3rem !important;
+  }
+  .m-xl-auto {
+    margin: auto !important;
+  }
+  .mx-xl-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+  .mx-xl-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
+  }
+  .mx-xl-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
+  }
+  .mx-xl-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
+  }
+  .mx-xl-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
+  }
+  .mx-xl-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
+  }
+  .mx-xl-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+  .my-xl-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+  .my-xl-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
+  }
+  .my-xl-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+  .my-xl-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+  }
+  .my-xl-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+  }
+  .my-xl-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
+  }
+  .my-xl-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+  .mt-xl-0 {
+    margin-top: 0 !important;
+  }
+  .mt-xl-1 {
+    margin-top: 0.25rem !important;
+  }
+  .mt-xl-2 {
+    margin-top: 0.5rem !important;
+  }
+  .mt-xl-3 {
+    margin-top: 1rem !important;
+  }
+  .mt-xl-4 {
+    margin-top: 1.5rem !important;
+  }
+  .mt-xl-5 {
+    margin-top: 3rem !important;
+  }
+  .mt-xl-auto {
+    margin-top: auto !important;
+  }
+  .me-xl-0 {
+    margin-right: 0 !important;
+  }
+  .me-xl-1 {
+    margin-right: 0.25rem !important;
+  }
+  .me-xl-2 {
+    margin-right: 0.5rem !important;
+  }
+  .me-xl-3 {
+    margin-right: 1rem !important;
+  }
+  .me-xl-4 {
+    margin-right: 1.5rem !important;
+  }
+  .me-xl-5 {
+    margin-right: 3rem !important;
+  }
+  .me-xl-auto {
+    margin-right: auto !important;
+  }
+  .mb-xl-0 {
+    margin-bottom: 0 !important;
+  }
+  .mb-xl-1 {
+    margin-bottom: 0.25rem !important;
+  }
+  .mb-xl-2 {
+    margin-bottom: 0.5rem !important;
+  }
+  .mb-xl-3 {
+    margin-bottom: 1rem !important;
+  }
+  .mb-xl-4 {
+    margin-bottom: 1.5rem !important;
+  }
+  .mb-xl-5 {
+    margin-bottom: 3rem !important;
+  }
+  .mb-xl-auto {
+    margin-bottom: auto !important;
+  }
+  .ms-xl-0 {
+    margin-left: 0 !important;
+  }
+  .ms-xl-1 {
+    margin-left: 0.25rem !important;
+  }
+  .ms-xl-2 {
+    margin-left: 0.5rem !important;
+  }
+  .ms-xl-3 {
+    margin-left: 1rem !important;
+  }
+  .ms-xl-4 {
+    margin-left: 1.5rem !important;
+  }
+  .ms-xl-5 {
+    margin-left: 3rem !important;
+  }
+  .ms-xl-auto {
+    margin-left: auto !important;
+  }
+  .p-xl-0 {
+    padding: 0 !important;
+  }
+  .p-xl-1 {
+    padding: 0.25rem !important;
+  }
+  .p-xl-2 {
+    padding: 0.5rem !important;
+  }
+  .p-xl-3 {
+    padding: 1rem !important;
+  }
+  .p-xl-4 {
+    padding: 1.5rem !important;
+  }
+  .p-xl-5 {
+    padding: 3rem !important;
+  }
+  .px-xl-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+  .px-xl-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
+  .px-xl-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
+  .px-xl-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
+  .px-xl-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
+  }
+  .px-xl-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+  }
+  .py-xl-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+  .py-xl-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+  .py-xl-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
+  .py-xl-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+  }
+  .py-xl-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
+  .py-xl-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
+  }
+  .pt-xl-0 {
+    padding-top: 0 !important;
+  }
+  .pt-xl-1 {
+    padding-top: 0.25rem !important;
+  }
+  .pt-xl-2 {
+    padding-top: 0.5rem !important;
+  }
+  .pt-xl-3 {
+    padding-top: 1rem !important;
+  }
+  .pt-xl-4 {
+    padding-top: 1.5rem !important;
+  }
+  .pt-xl-5 {
+    padding-top: 3rem !important;
+  }
+  .pe-xl-0 {
+    padding-right: 0 !important;
+  }
+  .pe-xl-1 {
+    padding-right: 0.25rem !important;
+  }
+  .pe-xl-2 {
+    padding-right: 0.5rem !important;
+  }
+  .pe-xl-3 {
+    padding-right: 1rem !important;
+  }
+  .pe-xl-4 {
+    padding-right: 1.5rem !important;
+  }
+  .pe-xl-5 {
+    padding-right: 3rem !important;
+  }
+  .pb-xl-0 {
+    padding-bottom: 0 !important;
+  }
+  .pb-xl-1 {
+    padding-bottom: 0.25rem !important;
+  }
+  .pb-xl-2 {
+    padding-bottom: 0.5rem !important;
+  }
+  .pb-xl-3 {
+    padding-bottom: 1rem !important;
+  }
+  .pb-xl-4 {
+    padding-bottom: 1.5rem !important;
+  }
+  .pb-xl-5 {
+    padding-bottom: 3rem !important;
+  }
+  .ps-xl-0 {
+    padding-left: 0 !important;
+  }
+  .ps-xl-1 {
+    padding-left: 0.25rem !important;
+  }
+  .ps-xl-2 {
+    padding-left: 0.5rem !important;
+  }
+  .ps-xl-3 {
+    padding-left: 1rem !important;
+  }
+  .ps-xl-4 {
+    padding-left: 1.5rem !important;
+  }
+  .ps-xl-5 {
+    padding-left: 3rem !important;
+  }
+  .gap-xl-0 {
+    gap: 0 !important;
+  }
+  .gap-xl-1 {
+    gap: 0.25rem !important;
+  }
+  .gap-xl-2 {
+    gap: 0.5rem !important;
+  }
+  .gap-xl-3 {
+    gap: 1rem !important;
+  }
+  .gap-xl-4 {
+    gap: 1.5rem !important;
+  }
+  .gap-xl-5 {
+    gap: 3rem !important;
+  }
+  .text-xl-start {
+    text-align: left !important;
+  }
+  .text-xl-end {
+    text-align: right !important;
+  }
+  .text-xl-center {
+    text-align: center !important;
+  }
+}
+@media (min-width: 1400px) {
+  .float-xxl-start {
+    float: left !important;
+  }
+  .float-xxl-end {
+    float: right !important;
+  }
+  .float-xxl-none {
+    float: none !important;
+  }
+  .d-xxl-inline {
+    display: inline !important;
+  }
+  .d-xxl-inline-block {
+    display: inline-block !important;
+  }
+  .d-xxl-block {
+    display: block !important;
+  }
+  .d-xxl-grid {
+    display: grid !important;
+  }
+  .d-xxl-table {
+    display: table !important;
+  }
+  .d-xxl-table-row {
+    display: table-row !important;
+  }
+  .d-xxl-table-cell {
+    display: table-cell !important;
+  }
+  .d-xxl-flex {
+    display: flex !important;
+  }
+  .d-xxl-inline-flex {
+    display: inline-flex !important;
+  }
+  .d-xxl-none {
+    display: none !important;
+  }
+  .flex-xxl-fill {
+    flex: 1 1 auto !important;
+  }
+  .flex-xxl-row {
+    flex-direction: row !important;
+  }
+  .flex-xxl-column {
+    flex-direction: column !important;
+  }
+  .flex-xxl-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+  .flex-xxl-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+  .flex-xxl-grow-0 {
+    flex-grow: 0 !important;
+  }
+  .flex-xxl-grow-1 {
+    flex-grow: 1 !important;
+  }
+  .flex-xxl-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+  .flex-xxl-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+  .flex-xxl-wrap {
+    flex-wrap: wrap !important;
+  }
+  .flex-xxl-nowrap {
+    flex-wrap: nowrap !important;
+  }
+  .flex-xxl-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+  .justify-content-xxl-start {
+    justify-content: flex-start !important;
+  }
+  .justify-content-xxl-end {
+    justify-content: flex-end !important;
+  }
+  .justify-content-xxl-center {
+    justify-content: center !important;
+  }
+  .justify-content-xxl-between {
+    justify-content: space-between !important;
+  }
+  .justify-content-xxl-around {
+    justify-content: space-around !important;
+  }
+  .justify-content-xxl-evenly {
+    justify-content: space-evenly !important;
+  }
+  .align-items-xxl-start {
+    align-items: flex-start !important;
+  }
+  .align-items-xxl-end {
+    align-items: flex-end !important;
+  }
+  .align-items-xxl-center {
+    align-items: center !important;
+  }
+  .align-items-xxl-baseline {
+    align-items: baseline !important;
+  }
+  .align-items-xxl-stretch {
+    align-items: stretch !important;
+  }
+  .align-content-xxl-start {
+    align-content: flex-start !important;
+  }
+  .align-content-xxl-end {
+    align-content: flex-end !important;
+  }
+  .align-content-xxl-center {
+    align-content: center !important;
+  }
+  .align-content-xxl-between {
+    align-content: space-between !important;
+  }
+  .align-content-xxl-around {
+    align-content: space-around !important;
+  }
+  .align-content-xxl-stretch {
+    align-content: stretch !important;
+  }
+  .align-self-xxl-auto {
+    align-self: auto !important;
+  }
+  .align-self-xxl-start {
+    align-self: flex-start !important;
+  }
+  .align-self-xxl-end {
+    align-self: flex-end !important;
+  }
+  .align-self-xxl-center {
+    align-self: center !important;
+  }
+  .align-self-xxl-baseline {
+    align-self: baseline !important;
+  }
+  .align-self-xxl-stretch {
+    align-self: stretch !important;
+  }
+  .order-xxl-first {
+    order: -1 !important;
+  }
+  .order-xxl-0 {
+    order: 0 !important;
+  }
+  .order-xxl-1 {
+    order: 1 !important;
+  }
+  .order-xxl-2 {
+    order: 2 !important;
+  }
+  .order-xxl-3 {
+    order: 3 !important;
+  }
+  .order-xxl-4 {
+    order: 4 !important;
+  }
+  .order-xxl-5 {
+    order: 5 !important;
+  }
+  .order-xxl-last {
+    order: 6 !important;
+  }
+  .m-xxl-0 {
+    margin: 0 !important;
+  }
+  .m-xxl-1 {
+    margin: 0.25rem !important;
+  }
+  .m-xxl-2 {
+    margin: 0.5rem !important;
+  }
+  .m-xxl-3 {
+    margin: 1rem !important;
+  }
+  .m-xxl-4 {
+    margin: 1.5rem !important;
+  }
+  .m-xxl-5 {
+    margin: 3rem !important;
+  }
+  .m-xxl-auto {
+    margin: auto !important;
+  }
+  .mx-xxl-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+  .mx-xxl-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
+  }
+  .mx-xxl-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
+  }
+  .mx-xxl-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
+  }
+  .mx-xxl-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
+  }
+  .mx-xxl-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
+  }
+  .mx-xxl-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+  .my-xxl-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+  .my-xxl-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
+  }
+  .my-xxl-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+  .my-xxl-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+  }
+  .my-xxl-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+  }
+  .my-xxl-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
+  }
+  .my-xxl-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+  .mt-xxl-0 {
+    margin-top: 0 !important;
+  }
+  .mt-xxl-1 {
+    margin-top: 0.25rem !important;
+  }
+  .mt-xxl-2 {
+    margin-top: 0.5rem !important;
+  }
+  .mt-xxl-3 {
+    margin-top: 1rem !important;
+  }
+  .mt-xxl-4 {
+    margin-top: 1.5rem !important;
+  }
+  .mt-xxl-5 {
+    margin-top: 3rem !important;
+  }
+  .mt-xxl-auto {
+    margin-top: auto !important;
+  }
+  .me-xxl-0 {
+    margin-right: 0 !important;
+  }
+  .me-xxl-1 {
+    margin-right: 0.25rem !important;
+  }
+  .me-xxl-2 {
+    margin-right: 0.5rem !important;
+  }
+  .me-xxl-3 {
+    margin-right: 1rem !important;
+  }
+  .me-xxl-4 {
+    margin-right: 1.5rem !important;
+  }
+  .me-xxl-5 {
+    margin-right: 3rem !important;
+  }
+  .me-xxl-auto {
+    margin-right: auto !important;
+  }
+  .mb-xxl-0 {
+    margin-bottom: 0 !important;
+  }
+  .mb-xxl-1 {
+    margin-bottom: 0.25rem !important;
+  }
+  .mb-xxl-2 {
+    margin-bottom: 0.5rem !important;
+  }
+  .mb-xxl-3 {
+    margin-bottom: 1rem !important;
+  }
+  .mb-xxl-4 {
+    margin-bottom: 1.5rem !important;
+  }
+  .mb-xxl-5 {
+    margin-bottom: 3rem !important;
+  }
+  .mb-xxl-auto {
+    margin-bottom: auto !important;
+  }
+  .ms-xxl-0 {
+    margin-left: 0 !important;
+  }
+  .ms-xxl-1 {
+    margin-left: 0.25rem !important;
+  }
+  .ms-xxl-2 {
+    margin-left: 0.5rem !important;
+  }
+  .ms-xxl-3 {
+    margin-left: 1rem !important;
+  }
+  .ms-xxl-4 {
+    margin-left: 1.5rem !important;
+  }
+  .ms-xxl-5 {
+    margin-left: 3rem !important;
+  }
+  .ms-xxl-auto {
+    margin-left: auto !important;
+  }
+  .p-xxl-0 {
+    padding: 0 !important;
+  }
+  .p-xxl-1 {
+    padding: 0.25rem !important;
+  }
+  .p-xxl-2 {
+    padding: 0.5rem !important;
+  }
+  .p-xxl-3 {
+    padding: 1rem !important;
+  }
+  .p-xxl-4 {
+    padding: 1.5rem !important;
+  }
+  .p-xxl-5 {
+    padding: 3rem !important;
+  }
+  .px-xxl-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+  .px-xxl-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
+  .px-xxl-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
+  .px-xxl-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
+  .px-xxl-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
+  }
+  .px-xxl-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+  }
+  .py-xxl-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+  .py-xxl-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+  .py-xxl-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
+  .py-xxl-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+  }
+  .py-xxl-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
+  .py-xxl-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
+  }
+  .pt-xxl-0 {
+    padding-top: 0 !important;
+  }
+  .pt-xxl-1 {
+    padding-top: 0.25rem !important;
+  }
+  .pt-xxl-2 {
+    padding-top: 0.5rem !important;
+  }
+  .pt-xxl-3 {
+    padding-top: 1rem !important;
+  }
+  .pt-xxl-4 {
+    padding-top: 1.5rem !important;
+  }
+  .pt-xxl-5 {
+    padding-top: 3rem !important;
+  }
+  .pe-xxl-0 {
+    padding-right: 0 !important;
+  }
+  .pe-xxl-1 {
+    padding-right: 0.25rem !important;
+  }
+  .pe-xxl-2 {
+    padding-right: 0.5rem !important;
+  }
+  .pe-xxl-3 {
+    padding-right: 1rem !important;
+  }
+  .pe-xxl-4 {
+    padding-right: 1.5rem !important;
+  }
+  .pe-xxl-5 {
+    padding-right: 3rem !important;
+  }
+  .pb-xxl-0 {
+    padding-bottom: 0 !important;
+  }
+  .pb-xxl-1 {
+    padding-bottom: 0.25rem !important;
+  }
+  .pb-xxl-2 {
+    padding-bottom: 0.5rem !important;
+  }
+  .pb-xxl-3 {
+    padding-bottom: 1rem !important;
+  }
+  .pb-xxl-4 {
+    padding-bottom: 1.5rem !important;
+  }
+  .pb-xxl-5 {
+    padding-bottom: 3rem !important;
+  }
+  .ps-xxl-0 {
+    padding-left: 0 !important;
+  }
+  .ps-xxl-1 {
+    padding-left: 0.25rem !important;
+  }
+  .ps-xxl-2 {
+    padding-left: 0.5rem !important;
+  }
+  .ps-xxl-3 {
+    padding-left: 1rem !important;
+  }
+  .ps-xxl-4 {
+    padding-left: 1.5rem !important;
+  }
+  .ps-xxl-5 {
+    padding-left: 3rem !important;
+  }
+  .gap-xxl-0 {
+    gap: 0 !important;
+  }
+  .gap-xxl-1 {
+    gap: 0.25rem !important;
+  }
+  .gap-xxl-2 {
+    gap: 0.5rem !important;
+  }
+  .gap-xxl-3 {
+    gap: 1rem !important;
+  }
+  .gap-xxl-4 {
+    gap: 1.5rem !important;
+  }
+  .gap-xxl-5 {
+    gap: 3rem !important;
+  }
+  .text-xxl-start {
+    text-align: left !important;
+  }
+  .text-xxl-end {
+    text-align: right !important;
+  }
+  .text-xxl-center {
+    text-align: center !important;
+  }
+}
+@media (min-width: 1200px) {
+  .fs-1 {
+    font-size: 2.5rem !important;
+  }
+  .fs-2 {
+    font-size: 2rem !important;
+  }
+  .fs-3 {
+    font-size: 1.75rem !important;
+  }
+  .fs-4 {
+    font-size: 1.5rem !important;
+  }
+}
+@media print {
+  .d-print-inline {
+    display: inline !important;
+  }
+  .d-print-inline-block {
+    display: inline-block !important;
+  }
+  .d-print-block {
+    display: block !important;
+  }
+  .d-print-grid {
+    display: grid !important;
+  }
+  .d-print-table {
+    display: table !important;
+  }
+  .d-print-table-row {
+    display: table-row !important;
+  }
+  .d-print-table-cell {
+    display: table-cell !important;
+  }
+  .d-print-flex {
+    display: flex !important;
+  }
+  .d-print-inline-flex {
+    display: inline-flex !important;
+  }
+  .d-print-none {
+    display: none !important;
+  }
+}
+html,
+body {
+  height: 100%;
+}
+
+#layoutAuthentication {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+#layoutAuthentication #layoutAuthentication_content {
+  min-width: 0;
+  flex-grow: 1;
+}
+#layoutAuthentication #layoutAuthentication_footer {
+  min-width: 0;
+}
+
+#layoutSidenav {
+  display: flex;
+}
+#layoutSidenav #layoutSidenav_nav {
+  flex-basis: 225px;
+  flex-shrink: 0;
+  transition: transform 0.15s ease-in-out;
+  z-index: 1038;
+  transform: translateX(-225px);
+}
+#layoutSidenav #layoutSidenav_content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-width: 0;
+  flex-grow: 1;
+  min-height: calc(100vh - 56px);
+  margin-left: -225px;
+}
+
+.sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
+  transform: translateX(0);
+}
+.sb-sidenav-toggled #layoutSidenav #layoutSidenav_content:before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  z-index: 1037;
+  opacity: 0.5;
+  transition: opacity 0.3s ease-in-out;
+}
+
+@media (min-width: 992px) {
+  #layoutSidenav #layoutSidenav_nav {
+    transform: translateX(0);
+  }
+  #layoutSidenav #layoutSidenav_content {
+    margin-left: 0;
+    transition: margin 0.15s ease-in-out;
+  }
+  .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
+    transform: translateX(-225px);
+  }
+  .sb-sidenav-toggled #layoutSidenav #layoutSidenav_content {
+    margin-left: -225px;
+  }
+  .sb-sidenav-toggled #layoutSidenav #layoutSidenav_content:before {
+    display: none;
+  }
+}
+.sb-nav-fixed .sb-topnav {
+  z-index: 1039;
+}
+.sb-nav-fixed #layoutSidenav #layoutSidenav_nav {
+  width: 225px;
+  height: 100vh;
+  z-index: 1038;
+}
+.sb-nav-fixed #layoutSidenav #layoutSidenav_nav .sb-sidenav {
+  padding-top: 56px;
+}
+.sb-nav-fixed #layoutSidenav #layoutSidenav_nav .sb-sidenav .sb-sidenav-menu {
+  overflow-y: auto;
+}
+.sb-nav-fixed #layoutSidenav #layoutSidenav_content {
+  padding-left: 225px;
+  top: 56px;
+}
+
+#layoutError {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+#layoutError #layoutError_content {
+  min-width: 0;
+  flex-grow: 1;
+}
+#layoutError #layoutError_footer {
+  min-width: 0;
+}
+
+.img-error {
+  max-width: 20rem;
+}
+
+.nav .nav-link .sb-nav-link-icon,
+.sb-sidenav-menu .nav-link .sb-nav-link-icon {
+  margin-right: 0.5rem;
+}
+
+.sb-topnav {
+  padding-left: 0;
+  height: 56px;
+  z-index: 1039;
+}
+.sb-topnav .navbar-brand {
+  width: 225px;
+  margin: 0;
+}
+.sb-topnav.navbar-dark #sidebarToggle {
+  color: rgba(255, 255, 255, 0.5);
+}
+.sb-topnav.navbar-light #sidebarToggle {
+  color: #212529;
+}
+
+.sb-sidenav {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex-wrap: nowrap;
+}
+.sb-sidenav .sb-sidenav-menu {
+  flex-grow: 1;
+}
+.sb-sidenav .sb-sidenav-menu .nav {
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+.sb-sidenav .sb-sidenav-menu .nav .sb-sidenav-menu-heading {
+  padding: 1.75rem 1rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.sb-sidenav .sb-sidenav-menu .nav .nav-link {
+  display: flex;
+  align-items: center;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  position: relative;
+}
+.sb-sidenav .sb-sidenav-menu .nav .nav-link .sb-nav-link-icon {
+  font-size: 0.9rem;
+}
+.sb-sidenav .sb-sidenav-menu .nav .nav-link .sb-sidenav-collapse-arrow {
+  display: inline-block;
+  margin-left: auto;
+  transition: transform 0.15s ease;
+}
+.sb-sidenav .sb-sidenav-menu .nav .nav-link.collapsed .sb-sidenav-collapse-arrow {
+  transform: rotate(-90deg);
+}
+.sb-sidenav .sb-sidenav-menu .nav .sb-sidenav-menu-nested {
+  margin-left: 1.5rem;
+  flex-direction: column;
+}
+.sb-sidenav .sb-sidenav-footer {
+  padding: 0.75rem;
+  flex-shrink: 0;
+}
+
+.sb-sidenav-dark {
+  background-color: #212529;
+  color: rgba(255, 255, 255, 0.5);
+}
+.sb-sidenav-dark .sb-sidenav-menu .sb-sidenav-menu-heading {
+  color: rgba(255, 255, 255, 0.25);
+}
+.sb-sidenav-dark .sb-sidenav-menu .nav-link {
+  color: rgba(255, 255, 255, 0.5);
+}
+.sb-sidenav-dark .sb-sidenav-menu .nav-link .sb-nav-link-icon {
+  color: rgba(255, 255, 255, 0.25);
+}
+.sb-sidenav-dark .sb-sidenav-menu .nav-link .sb-sidenav-collapse-arrow {
+  color: rgba(255, 255, 255, 0.25);
+}
+.sb-sidenav-dark .sb-sidenav-menu .nav-link:hover {
+  color: #fff;
+}
+.sb-sidenav-dark .sb-sidenav-menu .nav-link.active {
+  color: #fff;
+}
+.sb-sidenav-dark .sb-sidenav-menu .nav-link.active .sb-nav-link-icon {
+  color: #fff;
+}
+.sb-sidenav-dark .sb-sidenav-footer {
+  background-color: #343a40;
+}
+
+.sb-sidenav-light {
+  background-color: #f8f9fa;
+  color: #212529;
+}
+.sb-sidenav-light .sb-sidenav-menu .sb-sidenav-menu-heading {
+  color: #adb5bd;
+}
+.sb-sidenav-light .sb-sidenav-menu .nav-link {
+  color: #212529;
+}
+.sb-sidenav-light .sb-sidenav-menu .nav-link .sb-nav-link-icon {
+  color: #adb5bd;
+}
+.sb-sidenav-light .sb-sidenav-menu .nav-link .sb-sidenav-collapse-arrow {
+  color: #adb5bd;
+}
+.sb-sidenav-light .sb-sidenav-menu .nav-link:hover {
+  color: #0d6efd;
+}
+.sb-sidenav-light .sb-sidenav-menu .nav-link.active {
+  color: #0d6efd;
+}
+.sb-sidenav-light .sb-sidenav-menu .nav-link.active .sb-nav-link-icon {
+  color: #0d6efd;
+}
+.sb-sidenav-light .sb-sidenav-footer {
+  background-color: #e9ecef;
+}
+
+.datatable-wrapper .datatable-container {
+  font-size: 0.875rem;
+}
+
+.datatable-wrapper.no-header .datatable-container {
+  border-top: none;
+}
+
+.datatable-wrapper.no-footer .datatable-container {
+  border-bottom: none;
+}
+
+.datatable-top {
+  padding: 0 0 1rem;
+}
+
+.datatable-bottom {
+  padding: 0;
+}
+
+.datatable-top > nav:first-child,
+.datatable-top > div:first-child,
+.datatable-bottom > nav:first-child,
+.datatable-bottom > div:first-child {
+  float: left;
+}
+
+.datatable-top > nav:last-child,
+.datatable-top > div:last-child,
+.datatable-bottom > nav:last-child,
+.datatable-bottom > div:last-child {
+  float: right;
+}
+
+.datatable-selector {
+  width: auto;
+  display: inline-block;
+  padding-left: 1.125rem;
+  padding-right: 2.125rem;
+  margin-right: 0.25rem;
+}
+
+.datatable-info {
+  margin: 7px 0;
+}
+
+/* PAGER */
+.datatable-pagination a:hover {
+  background-color: #e9ecef;
+}
+
+.datatable-pagination .active a,
+.datatable-pagination .active a:focus,
+.datatable-pagination .active a:hover {
+  background-color: #0d6efd;
+}
+
+.datatable-pagination .ellipsis a,
+.datatable-pagination .disabled a,
+.datatable-pagination .disabled a:focus,
+.datatable-pagination .disabled a:hover {
+  cursor: not-allowed;
+}
+
+.datatable-pagination .disabled a,
+.datatable-pagination .disabled a:focus,
+.datatable-pagination .disabled a:hover {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.datatable-pagination .pager a {
+  font-weight: bold;
+}
+
+/* TABLE */
+.datatable-table {
+  border-collapse: collapse;
+}
+
+.datatable-table > tbody > tr > td,
+.datatable-table > tbody > tr > th,
+.datatable-table > tfoot > tr > td,
+.datatable-table > tfoot > tr > th,
+.datatable-table > thead > tr > td,
+.datatable-table > thead > tr > th {
+  vertical-align: top;
+  padding: 0.5rem 0.5rem;
+}
+
+.datatable-table > thead > tr > th {
+  vertical-align: bottom;
+  text-align: left;
+  border-bottom: none;
+}
+
+.datatable-table > tfoot > tr > th {
+  vertical-align: bottom;
+  text-align: left;
+}
+
+.datatable-table th {
+  vertical-align: bottom;
+  text-align: left;
+}
+
+.datatable-table th a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.datatable-sorter {
+  display: inline-block;
+  height: 100%;
+  position: relative;
+  width: 100%;
+  padding-right: 1rem;
+}
+
+.datatable-sorter::before,
+.datatable-sorter::after {
+  content: "";
+  height: 0;
+  width: 0;
+  position: absolute;
+  right: 4px;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  opacity: 0.2;
+}
+
+.datatable-sorter::before {
+  bottom: 4px;
+}
+
+.datatable-sorter::after {
+  top: 0px;
+}
+
+.asc .datatable-sorter::after,
+.desc .datatable-sorter::before {
+  opacity: 0.6;
+}
+
+.datatables-empty {
+  text-align: center;
+}
+
+.datatable-top::after,
+.datatable-bottom::after {
+  clear: both;
+  content: " ";
+  display: table;
+}
+
+.datatable-pagination li.datatable-hidden {
+  visibility: visible;
+}
+
+.btn-datatable {
+  height: 20px !important;
+  width: 20px !important;
+  font-size: 0.75rem;
+  border-radius: 0.375rem !important;
+}
\ No newline at end of file
diff --git a/assests/img/Group-49.ico b/assests/img/Group-49.ico
new file mode 100644
index 0000000..55624b2
Binary files /dev/null and b/assests/img/Group-49.ico differ
diff --git a/assests/img/Logo-Wordmark.svg b/assests/img/Logo-Wordmark.svg
new file mode 100644
index 0000000..6a0c669
--- /dev/null
+++ b/assests/img/Logo-Wordmark.svg
@@ -0,0 +1,89 @@
+<svg width="2130" height="558" viewBox="0 0 2130 558" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M510.224 203.704C544.762 203.704 574.076 210.742 598.169 224.819C622.259 238.897 640.595 258.304 653.173 283.045C665.754 307.784 672.041 336.152 672.041 368.145V390.217C672.041 424.557 665.754 454.309 653.173 479.477C640.595 504.642 622.259 524.052 598.169 537.703C574.076 551.141 544.762 557.857 510.224 557.857C475.685 557.857 446.263 551.141 421.957 537.703C397.868 524.052 379.426 504.75 366.635 479.796C354.054 454.628 347.767 424.875 347.767 390.538V368.784C347.767 336.792 354.054 308.427 366.635 283.685C379.426 258.73 397.868 239.216 421.957 225.139C446.263 210.848 475.685 203.704 510.224 203.704ZM509.903 279.845C495.619 279.845 484.107 283.898 475.367 292.004C466.837 299.894 460.654 310.558 456.817 323.996C452.98 337.218 451.061 351.722 451.061 367.505V393.418C451.061 408.135 452.875 422.212 456.499 435.647C460.336 449.085 466.518 460.068 475.046 468.6C483.786 477.13 495.406 481.399 509.903 481.399C524.615 481.399 536.235 477.238 544.762 468.918C553.29 460.389 559.367 449.404 562.991 435.968C566.828 422.53 568.747 408.348 568.747 393.418V367.505C568.747 351.722 566.828 337.218 562.991 323.996C559.154 310.558 552.968 299.894 544.441 292.004C535.914 283.898 524.402 279.845 509.903 279.845ZM735.362 551.459V91.7314H837.378V551.459H735.362ZM917.648 551.459V91.7314H1019.66V551.459H917.648ZM1100.57 551.459V209.782H1202.59V551.459H1100.57ZM1096.42 123.723C1096.42 108.58 1101.85 96.5308 1112.73 87.5724C1123.6 78.6145 1136.6 74.1357 1151.74 74.1357C1166.88 74.1357 1179.78 78.6145 1190.44 87.5724C1201.31 96.5308 1206.75 108.58 1206.75 123.723C1206.75 138.867 1201.31 151.024 1190.44 160.195C1179.78 169.366 1166.88 173.951 1151.74 173.951C1136.6 173.951 1123.6 169.366 1112.73 160.195C1101.85 151.024 1096.42 138.867 1096.42 123.723ZM1429.33 203.704C1463.86 203.704 1493.18 210.742 1517.27 224.819C1541.36 238.897 1559.7 258.304 1572.28 283.045C1584.86 307.784 1591.15 336.152 1591.15 368.145V390.217C1591.15 424.557 1584.86 454.309 1572.28 479.477C1559.7 504.642 1541.36 524.052 1517.27 537.703C1493.18 551.141 1463.86 557.857 1429.33 557.857C1394.79 557.857 1365.36 551.141 1341.06 537.703C1316.97 524.052 1298.53 504.75 1285.74 479.796C1273.16 454.628 1266.87 424.875 1266.87 390.538V368.784C1266.87 336.792 1273.16 308.427 1285.74 283.685C1298.53 258.73 1316.97 239.216 1341.06 225.139C1365.36 210.848 1394.79 203.704 1429.33 203.704ZM1429 279.845C1414.72 279.845 1403.21 283.898 1394.47 292.004C1385.94 299.894 1379.76 310.558 1375.92 323.996C1372.08 337.218 1370.16 351.722 1370.16 367.505V393.418C1370.16 408.135 1371.98 422.212 1375.6 435.647C1379.44 449.085 1385.62 460.068 1394.15 468.6C1402.89 477.13 1414.51 481.399 1429 481.399C1443.72 481.399 1455.34 477.238 1463.86 468.918C1472.39 460.389 1478.47 449.404 1482.09 435.968C1485.93 422.53 1487.85 408.348 1487.85 393.418V367.505C1487.85 351.722 1485.93 337.218 1482.09 323.996C1478.26 310.558 1472.07 299.894 1463.54 292.004C1455.02 283.898 1443.5 279.845 1429 279.845ZM2130 209.782L2043.33 551.459H1935.25L1877.04 320.475H1873.52L1815.33 551.459H1706.28L1620.25 209.782H1723.23L1766.72 451.322H1770.87L1827.79 209.782H1923.41L1980.66 451.322H1984.81L2028.3 209.782H2130Z" fill="url(#paint0_linear_323_447)"/>
+<path d="M0 139.789L208.446 0H348.766L139.032 139.789H0Z" fill="url(#paint1_linear_323_447)"/>
+<path d="M139.137 139.548L348.755 0L313.88 139.548H139.137Z" fill="url(#paint2_linear_323_447)"/>
+<path d="M209.253 0L0.000366211 139.548L0.000366216 0H209.253Z" fill="url(#paint3_linear_323_447)"/>
+<path d="M0.000732422 418.644L0.000732613 279.096H140.987L0.000732422 418.644Z" fill="url(#paint4_linear_323_447)"/>
+<path d="M0 418.639L137.27 279.004L279.013 278.968L138.779 418.639H0Z" fill="url(#paint5_linear_323_447)"/>
+<path d="M278.909 279.096L244.683 418.644H138.754L278.909 279.096Z" fill="url(#paint6_linear_323_447)"/>
+<path d="M0 139.458H138.76V279.006L0 139.458Z" fill="url(#paint7_linear_323_447)"/>
+<path d="M0 418.452H138.76V558L0 418.452Z" fill="url(#paint8_linear_323_447)"/>
+<path d="M0 420.379L135.518 282.525L275.453 282.489L137.008 420.379H0Z" fill="url(#paint9_linear_323_447)"/>
+<path d="M0 145.086L205.787 7.08105H344.316L137.258 145.086H0Z" fill="url(#paint10_linear_323_447)"/>
+<path d="M137.362 144.849L344.305 7.08105L309.875 144.849H137.362Z" fill="url(#paint11_linear_323_447)"/>
+<path d="M206.584 7.08105L0.000732422 144.849L0.000732427 7.08105H206.584Z" fill="url(#paint12_linear_323_447)"/>
+<path d="M0.000732422 420.384L0.00073261 282.616H139.188L0.000732422 420.384Z" fill="url(#paint13_linear_323_447)"/>
+<path d="M275.351 282.616L241.561 420.384H136.983L275.351 282.616Z" fill="url(#paint14_linear_323_447)"/>
+<path d="M0 144.76H136.99V282.527L0 144.76Z" fill="url(#paint15_linear_323_447)"/>
+<path d="M0 420.193H136.99V557.961L0 420.193Z" fill="url(#paint16_linear_323_447)"/>
+<defs>
+<linearGradient id="paint0_linear_323_447" x1="1260.89" y1="1062.25" x2="2688.61" y2="-887.578" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0099FF"/>
+<stop offset="1" stop-color="#0000FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_323_447" x1="174.383" y1="0" x2="174.383" y2="139.789" gradientUnits="userSpaceOnUse">
+<stop stop-color="#91D3FF"/>
+<stop offset="1" stop-color="#0099FF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_323_447" x1="223.477" y1="1.83571" x2="264.403" y2="228.183" gradientUnits="userSpaceOnUse">
+<stop stop-color="#28DBFF"/>
+<stop offset="1" stop-color="#0000FF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_323_447" x1="-175.546" y1="-231.311" x2="656.398" y2="312.107" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E1F7FF"/>
+<stop offset="1" stop-color="#0E9FFF"/>
+</linearGradient>
+<linearGradient id="paint4_linear_323_447" x1="141.083" y1="306.265" x2="-193.82" y2="198.214" gradientUnits="userSpaceOnUse">
+<stop stop-color="#45B5FF"/>
+<stop offset="1" stop-color="#E1F7FF"/>
+</linearGradient>
+<linearGradient id="paint5_linear_323_447" x1="129.044" y1="268.506" x2="151.125" y2="424.265" gradientUnits="userSpaceOnUse">
+<stop stop-color="#95D6FF"/>
+<stop offset="1" stop-color="#0385FF"/>
+</linearGradient>
+<linearGradient id="paint6_linear_323_447" x1="182.521" y1="278.967" x2="208.823" y2="533.74" gradientUnits="userSpaceOnUse">
+<stop stop-color="#29DAFF"/>
+<stop offset="1" stop-color="#0000FF"/>
+</linearGradient>
+<linearGradient id="paint7_linear_323_447" x1="166.514" y1="313.303" x2="-66.2218" y2="39.4828" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0087E8"/>
+<stop offset="1" stop-color="#000091"/>
+</linearGradient>
+<linearGradient id="paint8_linear_323_447" x1="166.514" y1="592.297" x2="-66.2218" y2="318.477" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0087E8"/>
+<stop offset="1" stop-color="#000091"/>
+</linearGradient>
+<linearGradient id="paint9_linear_323_447" x1="127.397" y1="272.161" x2="149.197" y2="425.932" gradientUnits="userSpaceOnUse">
+<stop stop-color="#95D6FF"/>
+<stop offset="1" stop-color="#0385FF"/>
+</linearGradient>
+<linearGradient id="paint10_linear_323_447" x1="172.158" y1="7.08105" x2="172.158" y2="145.086" gradientUnits="userSpaceOnUse">
+<stop stop-color="#91D3FF"/>
+<stop offset="1" stop-color="#0099FF"/>
+</linearGradient>
+<linearGradient id="paint11_linear_323_447" x1="220.625" y1="8.89334" x2="261.03" y2="232.352" gradientUnits="userSpaceOnUse">
+<stop stop-color="#28DBFF"/>
+<stop offset="1" stop-color="#0000FF"/>
+</linearGradient>
+<linearGradient id="paint12_linear_323_447" x1="-173.306" y1="-221.278" x2="648.023" y2="315.206" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E1F7FF"/>
+<stop offset="1" stop-color="#0E9FFF"/>
+</linearGradient>
+<linearGradient id="paint13_linear_323_447" x1="191.449" y1="282.521" x2="-191.351" y2="202.773" gradientUnits="userSpaceOnUse">
+<stop stop-color="#45B5FF"/>
+<stop offset="1" stop-color="#E1F7FF"/>
+</linearGradient>
+<linearGradient id="paint14_linear_323_447" x1="180.192" y1="282.49" x2="206.158" y2="534.011" gradientUnits="userSpaceOnUse">
+<stop stop-color="#29DAFF"/>
+<stop offset="1" stop-color="#0000FF"/>
+</linearGradient>
+<linearGradient id="paint15_linear_323_447" x1="164.389" y1="316.386" x2="-65.3768" y2="46.0602" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0087E8"/>
+<stop offset="1" stop-color="#000091"/>
+</linearGradient>
+<linearGradient id="paint16_linear_323_447" x1="164.389" y1="591.82" x2="-65.3768" y2="321.494" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0087E8"/>
+<stop offset="1" stop-color="#000091"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assests/img/default_avatar.jpg b/assests/img/default_avatar.jpg
new file mode 100644
index 0000000..10cfb2f
Binary files /dev/null and b/assests/img/default_avatar.jpg differ
diff --git a/assests/img/error403.jpg b/assests/img/error403.jpg
new file mode 100644
index 0000000..ddb9376
Binary files /dev/null and b/assests/img/error403.jpg differ
diff --git a/assests/img/error404.webp b/assests/img/error404.webp
new file mode 100644
index 0000000..1fb29eb
Binary files /dev/null and b/assests/img/error404.webp differ
diff --git a/assests/img/logo.png b/assests/img/logo.png
new file mode 100644
index 0000000..ba0b4fe
Binary files /dev/null and b/assests/img/logo.png differ
diff --git a/assests/js/scripts.js b/assests/js/scripts.js
new file mode 100644
index 0000000..9c4118a
--- /dev/null
+++ b/assests/js/scripts.js
@@ -0,0 +1,26 @@
+/*!
+    * Start Bootstrap - SB Admin v7.0.7 (https://startbootstrap.com/template/sb-admin)
+    * Copyright 2013-2023 Start Bootstrap
+    * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-sb-admin/blob/master/LICENSE)
+    */
+    // 
+// Scripts
+// 
+
+window.addEventListener('DOMContentLoaded', event => {
+
+    // Toggle the side navigation
+    const sidebarToggle = document.body.querySelector('#sidebarToggle');
+    if (sidebarToggle) {
+        // Uncomment Below to persist sidebar toggle between refreshes
+        // if (localStorage.getItem('sb|sidebar-toggle') === 'true') {
+        //     document.body.classList.toggle('sb-sidenav-toggled');
+        // }
+        sidebarToggle.addEventListener('click', event => {
+            event.preventDefault();
+            document.body.classList.toggle('sb-sidenav-toggled');
+            localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));
+        });
+    }
+
+});
diff --git a/assests/styles.css b/assests/styles.css
new file mode 100644
index 0000000..f78a396
--- /dev/null
+++ b/assests/styles.css
@@ -0,0 +1,11 @@
+/* Style général appliqué à toute la page */
+body{
+    /* Couleur de fond claire pour améliorer la lisibilité */
+    background: #f7f8fb;
+}
+
+/* Style de base des cartes Bootstrap */
+.card{
+    /* Fond blanc pour mettre en valeur le contenu */
+    background: #fff;
+}
diff --git a/composer.json b/composer.json
new file mode 100644
index 0000000..a478818
--- /dev/null
+++ b/composer.json
@@ -0,0 +1,22 @@
+{
+    "name": "groupe3/projetphp",
+    "description": "le projet php de ces mort",
+    "require": {
+        "smarty/smarty": "^5.7",
+        "phpmailer/phpmailer": "^7.0",
+        "vlucas/phpdotenv": "^5.6"
+    },
+    "autoload": {
+        "psr-4": {
+            "Controllers\\": "controllers/",
+            "Entities\\": "entities/",
+            "Models\\": "models/"
+        }
+    },
+    "authors": [
+        {
+            "name": "Le Meilleur groupe",
+            "email": "pasdemail@meilleurgroupe.ccicampus"
+        }
+    ]
+}
diff --git a/composer.lock b/composer.lock
new file mode 100644
index 0000000..e54fc18
--- /dev/null
+++ b/composer.lock
@@ -0,0 +1,650 @@
+{
+    "_readme": [
+        "This file locks the dependencies of your project to a known state",
+        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
+        "This file is @generated automatically"
+    ],
+    "content-hash": "d2f573a5d0618ae6d7627bef30d78eb9",
+    "packages": [
+        {
+            "name": "graham-campbell/result-type",
+            "version": "v1.1.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/GrahamCampbell/Result-Type.git",
+                "reference": "e01f4a821471308ba86aa202fed6698b6b695e3b"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/GrahamCampbell/Result-Type/zipball/e01f4a821471308ba86aa202fed6698b6b695e3b",
+                "reference": "e01f4a821471308ba86aa202fed6698b6b695e3b",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.2.5 || ^8.0",
+                "phpoption/phpoption": "^1.9.5"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^8.5.41 || ^9.6.22 || ^10.5.45 || ^11.5.7"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "GrahamCampbell\\ResultType\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Graham Campbell",
+                    "email": "hello@gjcampbell.co.uk",
+                    "homepage": "https://github.com/GrahamCampbell"
+                }
+            ],
+            "description": "An Implementation Of The Result Type",
+            "keywords": [
+                "Graham Campbell",
+                "GrahamCampbell",
+                "Result Type",
+                "Result-Type",
+                "result"
+            ],
+            "support": {
+                "issues": "https://github.com/GrahamCampbell/Result-Type/issues",
+                "source": "https://github.com/GrahamCampbell/Result-Type/tree/v1.1.4"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/GrahamCampbell",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/graham-campbell/result-type",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-12-27T19:43:20+00:00"
+        },
+        {
+            "name": "phpmailer/phpmailer",
+            "version": "v7.0.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/PHPMailer/PHPMailer.git",
+                "reference": "ebf1655bd5b99b3f97e1a3ec0a69e5f4cd7ea088"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/PHPMailer/PHPMailer/zipball/ebf1655bd5b99b3f97e1a3ec0a69e5f4cd7ea088",
+                "reference": "ebf1655bd5b99b3f97e1a3ec0a69e5f4cd7ea088",
+                "shasum": ""
+            },
+            "require": {
+                "ext-ctype": "*",
+                "ext-filter": "*",
+                "ext-hash": "*",
+                "php": ">=5.5.0"
+            },
+            "require-dev": {
+                "dealerdirect/phpcodesniffer-composer-installer": "^1.0",
+                "doctrine/annotations": "^1.2.6 || ^1.13.3",
+                "php-parallel-lint/php-console-highlighter": "^1.0.0",
+                "php-parallel-lint/php-parallel-lint": "^1.3.2",
+                "phpcompatibility/php-compatibility": "^10.0.0@dev",
+                "squizlabs/php_codesniffer": "^3.13.5",
+                "yoast/phpunit-polyfills": "^1.0.4"
+            },
+            "suggest": {
+                "decomplexity/SendOauth2": "Adapter for using XOAUTH2 authentication",
+                "directorytree/imapengine": "For uploading sent messages via IMAP, see gmail example",
+                "ext-imap": "Needed to support advanced email address parsing according to RFC822",
+                "ext-mbstring": "Needed to send email in multibyte encoding charset or decode encoded addresses",
+                "ext-openssl": "Needed for secure SMTP sending and DKIM signing",
+                "greew/oauth2-azure-provider": "Needed for Microsoft Azure XOAUTH2 authentication",
+                "hayageek/oauth2-yahoo": "Needed for Yahoo XOAUTH2 authentication",
+                "league/oauth2-google": "Needed for Google XOAUTH2 authentication",
+                "psr/log": "For optional PSR-3 debug logging",
+                "symfony/polyfill-mbstring": "To support UTF-8 if the Mbstring PHP extension is not enabled (^1.2)",
+                "thenetworg/oauth2-azure": "Needed for Microsoft XOAUTH2 authentication"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "PHPMailer\\PHPMailer\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "LGPL-2.1-only"
+            ],
+            "authors": [
+                {
+                    "name": "Marcus Bointon",
+                    "email": "phpmailer@synchromedia.co.uk"
+                },
+                {
+                    "name": "Jim Jagielski",
+                    "email": "jimjag@gmail.com"
+                },
+                {
+                    "name": "Andy Prevost",
+                    "email": "codeworxtech@users.sourceforge.net"
+                },
+                {
+                    "name": "Brent R. Matzelle"
+                }
+            ],
+            "description": "PHPMailer is a full-featured email creation and transfer class for PHP",
+            "support": {
+                "issues": "https://github.com/PHPMailer/PHPMailer/issues",
+                "source": "https://github.com/PHPMailer/PHPMailer/tree/v7.0.2"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/Synchro",
+                    "type": "github"
+                }
+            ],
+            "time": "2026-01-09T18:02:33+00:00"
+        },
+        {
+            "name": "phpoption/phpoption",
+            "version": "1.9.5",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/schmittjoh/php-option.git",
+                "reference": "75365b91986c2405cf5e1e012c5595cd487a98be"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/schmittjoh/php-option/zipball/75365b91986c2405cf5e1e012c5595cd487a98be",
+                "reference": "75365b91986c2405cf5e1e012c5595cd487a98be",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.2.5 || ^8.0"
+            },
+            "require-dev": {
+                "bamarni/composer-bin-plugin": "^1.8.2",
+                "phpunit/phpunit": "^8.5.44 || ^9.6.25 || ^10.5.53 || ^11.5.34"
+            },
+            "type": "library",
+            "extra": {
+                "bamarni-bin": {
+                    "bin-links": true,
+                    "forward-command": false
+                },
+                "branch-alias": {
+                    "dev-master": "1.9-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "PhpOption\\": "src/PhpOption/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "Apache-2.0"
+            ],
+            "authors": [
+                {
+                    "name": "Johannes M. Schmitt",
+                    "email": "schmittjoh@gmail.com",
+                    "homepage": "https://github.com/schmittjoh"
+                },
+                {
+                    "name": "Graham Campbell",
+                    "email": "hello@gjcampbell.co.uk",
+                    "homepage": "https://github.com/GrahamCampbell"
+                }
+            ],
+            "description": "Option Type for PHP",
+            "keywords": [
+                "language",
+                "option",
+                "php",
+                "type"
+            ],
+            "support": {
+                "issues": "https://github.com/schmittjoh/php-option/issues",
+                "source": "https://github.com/schmittjoh/php-option/tree/1.9.5"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/GrahamCampbell",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/phpoption/phpoption",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-12-27T19:41:33+00:00"
+        },
+        {
+            "name": "smarty/smarty",
+            "version": "v5.8.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/smarty-php/smarty.git",
+                "reference": "78d259d3b971c59a0cd719c270cc5cbb740c36a7"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/smarty-php/smarty/zipball/78d259d3b971c59a0cd719c270cc5cbb740c36a7",
+                "reference": "78d259d3b971c59a0cd719c270cc5cbb740c36a7",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.2 || ^8.0",
+                "symfony/polyfill-mbstring": "^1.27"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^8.5 || ^7.5",
+                "smarty/smarty-lexer": "^4.0.2"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "5.0.x-dev"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "src/functions.php"
+                ],
+                "psr-4": {
+                    "Smarty\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "LGPL-3.0"
+            ],
+            "authors": [
+                {
+                    "name": "Monte Ohrt",
+                    "email": "monte@ohrt.com"
+                },
+                {
+                    "name": "Uwe Tews",
+                    "email": "uwe.tews@googlemail.com"
+                },
+                {
+                    "name": "Rodney Rehm",
+                    "email": "rodney.rehm@medialize.de"
+                },
+                {
+                    "name": "Simon Wisselink",
+                    "homepage": "https://www.iwink.nl/"
+                }
+            ],
+            "description": "Smarty - the compiling PHP template engine",
+            "homepage": "https://smarty-php.github.io/smarty/",
+            "keywords": [
+                "templating"
+            ],
+            "support": {
+                "forum": "https://github.com/smarty-php/smarty/discussions",
+                "issues": "https://github.com/smarty-php/smarty/issues",
+                "source": "https://github.com/smarty-php/smarty/tree/v5.8.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/wisskid",
+                    "type": "github"
+                }
+            ],
+            "time": "2026-02-15T14:27:15+00:00"
+        },
+        {
+            "name": "symfony/polyfill-ctype",
+            "version": "v1.33.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-ctype.git",
+                "reference": "a3cc8b044a6ea513310cbd48ef7333b384945638"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-ctype/zipball/a3cc8b044a6ea513310cbd48ef7333b384945638",
+                "reference": "a3cc8b044a6ea513310cbd48ef7333b384945638",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2"
+            },
+            "provide": {
+                "ext-ctype": "*"
+            },
+            "suggest": {
+                "ext-ctype": "For best performance"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/polyfill",
+                    "name": "symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Ctype\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Gert de Pagter",
+                    "email": "BackEndTea@gmail.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill for ctype functions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "ctype",
+                "polyfill",
+                "portable"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/polyfill-ctype/tree/v1.33.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-09-09T11:45:10+00:00"
+        },
+        {
+            "name": "symfony/polyfill-mbstring",
+            "version": "v1.33.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-mbstring.git",
+                "reference": "6d857f4d76bd4b343eac26d6b539585d2bc56493"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/6d857f4d76bd4b343eac26d6b539585d2bc56493",
+                "reference": "6d857f4d76bd4b343eac26d6b539585d2bc56493",
+                "shasum": ""
+            },
+            "require": {
+                "ext-iconv": "*",
+                "php": ">=7.2"
+            },
+            "provide": {
+                "ext-mbstring": "*"
+            },
+            "suggest": {
+                "ext-mbstring": "For best performance"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/polyfill",
+                    "name": "symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Mbstring\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill for the Mbstring extension",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "mbstring",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/polyfill-mbstring/tree/v1.33.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-12-23T08:48:59+00:00"
+        },
+        {
+            "name": "symfony/polyfill-php80",
+            "version": "v1.33.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-php80.git",
+                "reference": "0cc9dd0f17f61d8131e7df6b84bd344899fe2608"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-php80/zipball/0cc9dd0f17f61d8131e7df6b84bd344899fe2608",
+                "reference": "0cc9dd0f17f61d8131e7df6b84bd344899fe2608",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/polyfill",
+                    "name": "symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Php80\\": ""
+                },
+                "classmap": [
+                    "Resources/stubs"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Ion Bazan",
+                    "email": "ion.bazan@gmail.com"
+                },
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill backporting some PHP 8.0+ features to lower PHP versions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/polyfill-php80/tree/v1.33.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-01-02T08:10:11+00:00"
+        },
+        {
+            "name": "vlucas/phpdotenv",
+            "version": "v5.6.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/vlucas/phpdotenv.git",
+                "reference": "955e7815d677a3eaa7075231212f2110983adecc"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/vlucas/phpdotenv/zipball/955e7815d677a3eaa7075231212f2110983adecc",
+                "reference": "955e7815d677a3eaa7075231212f2110983adecc",
+                "shasum": ""
+            },
+            "require": {
+                "ext-pcre": "*",
+                "graham-campbell/result-type": "^1.1.4",
+                "php": "^7.2.5 || ^8.0",
+                "phpoption/phpoption": "^1.9.5",
+                "symfony/polyfill-ctype": "^1.26",
+                "symfony/polyfill-mbstring": "^1.26",
+                "symfony/polyfill-php80": "^1.26"
+            },
+            "require-dev": {
+                "bamarni/composer-bin-plugin": "^1.8.2",
+                "ext-filter": "*",
+                "phpunit/phpunit": "^8.5.34 || ^9.6.13 || ^10.4.2"
+            },
+            "suggest": {
+                "ext-filter": "Required to use the boolean validator."
+            },
+            "type": "library",
+            "extra": {
+                "bamarni-bin": {
+                    "bin-links": true,
+                    "forward-command": false
+                },
+                "branch-alias": {
+                    "dev-master": "5.6-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Dotenv\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Graham Campbell",
+                    "email": "hello@gjcampbell.co.uk",
+                    "homepage": "https://github.com/GrahamCampbell"
+                },
+                {
+                    "name": "Vance Lucas",
+                    "email": "vance@vancelucas.com",
+                    "homepage": "https://github.com/vlucas"
+                }
+            ],
+            "description": "Loads environment variables from `.env` to `getenv()`, `$_ENV` and `$_SERVER` automagically.",
+            "keywords": [
+                "dotenv",
+                "env",
+                "environment"
+            ],
+            "support": {
+                "issues": "https://github.com/vlucas/phpdotenv/issues",
+                "source": "https://github.com/vlucas/phpdotenv/tree/v5.6.3"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/GrahamCampbell",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/vlucas/phpdotenv",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-12-27T19:49:13+00:00"
+        }
+    ],
+    "packages-dev": [],
+    "aliases": [],
+    "minimum-stability": "stable",
+    "stability-flags": {},
+    "prefer-stable": false,
+    "prefer-lowest": false,
+    "platform": {},
+    "platform-dev": {},
+    "plugin-api-version": "2.9.0"
+}
diff --git a/controllers/.gitkeep b/controllers/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/controllers/AdminCtrl.php b/controllers/AdminCtrl.php
new file mode 100644
index 0000000..670082b
--- /dev/null
+++ b/controllers/AdminCtrl.php
@@ -0,0 +1,105 @@
+<?php 
+    namespace Controllers;
+
+    use Models\CategoryModel;
+    use Models\UserModel;
+    use Models\AuthorisationModel;
+
+    use Entities\Category;
+    use Entities\Authorisation;
+    use Entities\User;
+
+    /**
+     * Le controller de la partie accessible uniquement par l'admin
+     * @author Laura
+     */
+
+    class AdminCtrl extends MotherCtrl{
+        /**
+		* Page Admin
+		*/
+        public function admin(){
+
+            if (!isset($_SESSION['user']) && ($_SESSION['user']['user_status'] != 1 )){ 
+				$error = new \Controllers\ErrorCtrl();
+                return $error->error_403();
+			}
+
+            $objCategoryModel = new CategoryModel;
+
+            if (!empty($_POST['new_category'])) {
+                $newCat = new Category();
+                $newCat->setName($_POST['new_category']);
+                $objCategoryModel->insertCategory($newCat);
+                $_SESSION['success'] = "La catégorie a bien été ajoutée";
+                header('Location: '.$_ENV['BASE_URL'].'/admin/admin'); 
+                exit;
+            }
+
+            if (!empty($_POST['id_to_edit']) && !empty($_POST['new_name'])) {
+                $editCat = new Category();
+                $editCat->setId($_POST['id_to_edit']);
+                $editCat->setName($_POST['new_name']);
+                $objCategoryModel->editCategory($editCat);
+                $_SESSION['success'] = "La catégorie a bien été modifiée";
+                header('Location: '.$_ENV['BASE_URL'].'/admin/admin');
+                exit;
+            }
+
+            $arrCategory = $objCategoryModel->findAllCategory();
+            $arrCategoryToDisplay = array(); 
+
+            foreach($arrCategory as $arrDetCategory){
+                $objCategory = new Category;
+                $objCategory->hydrate($arrDetCategory);
+                $arrCategoryToDisplay[] = $objCategory;
+            }
+
+            $objUserModel = new UserModel;
+
+            if (!empty($_POST['action'])) {
+                $intUserId = (int)$_POST['user_id'];
+
+                if ($intUserId > 0) {
+                    if ($_POST['action'] === 'update_status' && !empty($_POST['new_status'])) {
+                        $objUser = new User();
+                        $objUser->setId($intUserId);
+                        $objUser->setStatus((int)$_POST['new_status']);
+                        if ($objUserModel->editStatus($objUser)) {
+                            $_SESSION['success'] = "Le statut a bien été modifié !";
+                        }
+                    } 
+                    elseif ($_POST['action'] === 'delete_user') {
+                        $objUserModel->delete_soft($intUserId);
+                        $_SESSION['success'] = "L'utilisateur a été supprimé.";
+                    }
+                    header('Location: '.$_ENV['BASE_URL'].'/admin/admin');
+                    exit;
+                }
+            }
+
+            $arrUser = $objUserModel->findAllUsers();
+            $arrUserToDisplay = array(); 
+
+            foreach($arrUser as $arrDetUser){
+                $objUser = new User;
+                $objUser->hydrate($arrDetUser);
+                $arrUserToDisplay[] = $objUser;
+            }
+
+            $objAuthorisationModel = new AuthorisationModel;
+            $arrAuthorisation = $objAuthorisationModel->findAllAuthorisation();
+            $arrAuthorisationToDisplay = array(); 
+
+            foreach($arrAuthorisation as $arrDetAuthorisation){
+                $objAuthorisation = new Authorisation;
+                $objAuthorisation->hydrate($arrDetAuthorisation);
+                $arrAuthorisationToDisplay[] = $objAuthorisation;
+            }
+            
+            $this->_arrData['arrCategoryToDisplay']	        = $arrCategoryToDisplay;
+            $this->_arrData['arrUserToDisplay']	            = $arrUserToDisplay;
+            $this->_arrData['arrAuthorisationToDisplay']	= $arrAuthorisationToDisplay;
+			$this->_display("admin"); 
+        }
+    }
diff --git a/controllers/ErrorCtrl.php b/controllers/ErrorCtrl.php
new file mode 100644
index 0000000..9a5e0ff
--- /dev/null
+++ b/controllers/ErrorCtrl.php
@@ -0,0 +1,28 @@
+<?php
+	namespace Controllers;
+
+	/** 
+	* Le contrôleur des erreurs
+	* @author Laura
+	*/
+	class ErrorCtrl extends MotherCtrl{
+		
+		/**
+		* Page erreur 404
+		*/
+		public function error_404(){
+			http_response_code(404);
+			$this->_display("error_404");
+			exit;
+		}
+		
+		/**
+		* Page erreur 403
+		*/
+		public function error_403(){
+			http_response_code(403);
+			$this->_display("error_403");
+			exit;
+		}
+		
+	}
\ No newline at end of file
diff --git a/controllers/MotherCtrl.php b/controllers/MotherCtrl.php
new file mode 100644
index 0000000..49ccbdf
--- /dev/null
+++ b/controllers/MotherCtrl.php
@@ -0,0 +1,52 @@
+<?php
+	namespace Controllers;
+	
+	use Smarty\Smarty;
+	
+	/**
+     * Controller Mère qui permet de gèrer l'affichage des pages
+     * @author Yasser
+     */
+	
+	class MotherCtrl {
+		
+		protected array $_arrData = array(); // ou = []
+		
+		/** 
+		* Méthode d'affichage des pages 
+		* @param string $strView Le fichier a afficher
+		* @param bool $boolDisplay Booléen pour afficher web ou mail
+		* @return page|object affiche la page ou retourne l'objet pour le mail
+		*/
+		protected function _display($strView, bool $boolDisplay = true){
+		
+			$objSmarty	= new Smarty();
+			$objSmarty->registerPlugin('modifier', 'vardump', 'var_dump');
+			$objSmarty->registerPlugin('modifier', 'file_exists', 'file_exists');
+			$objSmarty->registerPlugin('modifier', 'stripos', 'stripos');
+			$objSmarty->caching = false;
+
+			$objSmarty->force_compile = true;
+
+			$objSmarty->compile_check = true;
+
+			foreach($this->_arrData as $key=>$value){
+				$objSmarty->assign($key, $value);
+			}
+
+			$objSmarty->assign("success_message", $_SESSION['success']??'');
+			unset($_SESSION['success']);
+
+			if (isset($_SESSION['error'])){
+				$objSmarty->assign("arrError", array($_SESSION['error']));
+				unset($_SESSION['error']);
+			}
+			
+			if ($boolDisplay){
+				$objSmarty->display("views/".$strView.".tpl");
+			}else{
+				return $objSmarty->fetch("views/".$strView.".tpl");
+			}
+		}
+		
+	}
\ No newline at end of file
diff --git a/controllers/PageCtrl.php b/controllers/PageCtrl.php
new file mode 100644
index 0000000..248435d
--- /dev/null
+++ b/controllers/PageCtrl.php
@@ -0,0 +1,39 @@
+<?php
+
+	namespace Controllers;
+
+
+    /**
+     * Le controller des pages annexes
+     * @author Laura & Besnik
+     */
+
+    class PageCtrl extends MotherCtrl{
+
+
+        /** 
+		* Page aide utilisateur
+		*/
+        public function help(){
+
+            $this->_display("help");
+
+        }
+
+        /** 
+		* Page mentions légales 
+		*/
+		public function mentions(){
+			// Afficher
+			$this->_display("mentions");
+		}
+			
+		/** 
+		* Page à propos
+		*/
+		public function about(){
+			// Afficher
+			$this->_display("about");
+		}
+
+    }
\ No newline at end of file
diff --git a/controllers/ProjectCtrl.php b/controllers/ProjectCtrl.php
new file mode 100644
index 0000000..e636ead
--- /dev/null
+++ b/controllers/ProjectCtrl.php
@@ -0,0 +1,554 @@
+<?php
+
+	namespace Controllers;
+
+  
+
+	use Models\ProjectModel;
+	use Models\CategoryModel;
+	use Models\ImageModel;
+	use Models\UserModel;
+
+	
+	use Entities\Project;
+	use Entities\Category;
+    use Entities\Authorisation;
+    use Entities\User;
+
+    use PHPMailer\PHPMailer\PHPMailer;
+	use PHPMailer\PHPMailer\Exception;
+	use PHPMailer\PHPMailer\SMTP;
+
+    /**
+     * Le controler des Project
+     * @author Yasser, Laura, Besnik & Guillaume
+     */
+
+    class ProjectCtrl extends MotherCtrl{
+
+        /**
+         * Fonction d'affichage de la page d'acceuil
+         */
+        public function home(){
+
+
+			if (!isset($_SESSION['user']) && isset($_COOKIE['remember_me'])) {
+        
+        		$token_du_cookie = $_COOKIE['remember_me'];
+        		$hash_a_verifier = hash('sha256', $token_du_cookie);
+
+				$objUserModel = new UserModel;
+        		$row = $objUserModel->getTokenUser($hash_a_verifier);
+
+        		if ($row) {
+        		    $user = $objUserModel->findUserById($row['token_user_id']);
+
+        		    if ($user) {
+        		        $_SESSION['user'] = $user;
+        		    }
+        		}
+    		}	
+
+
+			$intCategory = 0; 
+			if (!empty($_GET['filter_cat'])) {
+				$intCategory = (int) $_GET['filter_cat'];
+			}
+
+			$boolOld = false;
+			if (!empty($_GET['filter_old']) && $_GET['filter_old'] == 'true') {
+				$boolOld = true;
+			}
+            
+            $objProjectModel 	= new ProjectModel;
+            $arrProject		    = $objProjectModel->findAll(0,'',0,0,'','','',$intCategory,$boolOld);
+            $arrProjectToDisplay = array();
+            foreach($arrProject as $arrDetProject){
+                $objProject = new Project;
+                $objProject->hydrate($arrDetProject);
+                $arrProjectToDisplay[] = $objProject;
+            }
+
+            $this->_arrData['arrProjectToDisplay']  = $arrProjectToDisplay;
+			$this->_display("home");
+
+        }
+
+        /**
+         * Fonction d'affichage de la barre de recherche
+         */
+        public function search(){
+
+                $strKeywords 	= $_POST['keywords']??"";
+                $intAuthor		= $_POST['author']??0;
+                $intPeriod		= $_POST['period']??0;
+                $strDate		= $_POST['date']??'';
+                $strStartDate	= $_POST['startdate']??'';
+                $strEndDate		= $_POST['enddate']??'';
+                $intCategory	= $_POST['category']??0;
+
+            $objProjectModel    = new ProjectModel;
+            $arrProject         = $objProjectModel->findAll(intAuthor:$intAuthor, intPeriod:$intPeriod, strDate:$strDate, 
+							    strKeywords:$strKeywords, strStartDate:$strStartDate, strEndDate:$strEndDate, intCategory:$intCategory);
+            $arrProjectToDisplay    = array(); 
+
+            foreach($arrProject as $arrDetProject){
+                $objProject = new Project;
+                $objProject->hydrate($arrDetProject);
+                $arrProjectToDisplay[]  = $objProject;
+            }
+        
+            $objUserModel   = new UserModel;
+            $arrUser        = $objUserModel->findAllUsers();
+
+            $objCategoryModel   = new CategoryModel;
+            $arrCategory        = $objCategoryModel->findAllCategory();
+
+            $this->_arrData['arrProjectToDisplay']  = $arrProjectToDisplay;
+            $this->_arrData['arrCategory']  = $arrCategory;
+            $this->_arrData['arrProject']  	= $arrProject;
+            $this->_arrData['arrUser']  	= $arrUser;
+			$this->_arrData['strKeywords']  = $strKeywords;
+            $this->_arrData['intAuthor']    = $intAuthor;
+            $this->_arrData['intPeriod']    = $intPeriod;
+            $this->_arrData['strDate']      = $strDate;
+            $this->_arrData['strStartDate'] = $strStartDate;
+            $this->_arrData['strEndDate']   = $strEndDate;
+            $this->_arrData['intCategory']  = $intCategory;
+
+            $this->_display("search");
+        }
+
+        /**
+         * Fonction d'affichage de la page projet
+         */
+		public function addedit_project() {
+			if (!isset($_SESSION['user'])){
+				$error = new \Controllers\ErrorCtrl();
+                return $error->error_403();
+			}
+			
+			$objProject         = new Project;
+			$objProjectModel    = new ProjectModel;
+			$objCategoryModel   = new CategoryModel;
+			
+			if (isset($_GET['id'])){
+				$arrProject = $objProjectModel->findOne($_GET['id']);
+				if($_SESSION['user']['user_id'] != $arrProject['project_user_id']){
+					$error = new \Controllers\ErrorCtrl();
+                	return $error->error_403();
+				}
+				$objProject->hydrate($arrProject);
+				$this->_arrData['arrImages'] = $objProjectModel->getImagesByProjectId($objProject->getId());
+			}
+			
+			$arrError = [];
+			if (count($_POST) > 0) {
+				
+				$objProject->hydrate($_POST);
+				if ($objProject->getTitle() == ""){
+					$arrError['title'] = "Le titre est obligatoire";
+				}
+				
+				if ($objProject->getDescription() == ""){
+					$arrError['description'] = "La description est obligatoire";
+				}
+				
+				if ($objProject->getContent() == ""){
+					$arrError['content'] = "Le contenu est obligatoire";
+				}   
+				
+				$arrTypeAllowed = array('image/jpeg', 'image/png', 'image/webp');
+				if ($_FILES['thumbnail']['error'] != 4){ 
+					if (!in_array($_FILES['thumbnail']['type'], $arrTypeAllowed)){
+						$arrError['thumbnail'] = "Le type de fichier n'est pas autorisé";
+					}else{
+						switch ($_FILES['thumbnail']['error']){
+							case 0 : 
+								$strImageName = uniqid().".webp";
+								$strOldImg    = $objProject->getThumbnail();
+								$objProject->setThumbnail($strImageName);
+								break;
+							case 1 :
+								$arrError['thumbnail'] = "Le fichier est trop volumineux";
+								break;
+							case 2 :
+								$arrError['thumbnail'] = "Le fichier est trop volumineux";
+								break;
+							case 3 :
+								$arrError['thumbnail'] = "Le fichier a été partiellement téléchargé";
+								break;
+							case 6 :
+								$arrError['thumbnail'] = "Le répertoire temporaire est manquant";
+								break;
+							default :
+								$arrError['thumbnail'] = "Erreur sur l'image";
+								break;
+						}
+					}
+				}else{
+					if (is_null($objProject->getThumbnail())){ 
+						$arrError['thumbnail'] = "L'image est obligatoire";
+					}
+				}
+
+				if (count($arrError) == 0){
+
+					$boolImageOk = true;
+					if (isset($strImageName)){
+						$strDest    = $_ENV['IMG_PROJECT_PATH'].$strImageName;
+						$strSource  = $_FILES['thumbnail']['tmp_name'];
+						list($intWidth, $intHeight) = getimagesize($strSource);
+						
+						$intDestWidth = 1280; $intDestHeight = 720;
+						$fltDestRatio = $intDestWidth / $intDestHeight;
+						$fltSourceRatio = $intWidth / $intHeight;
+						
+						if ($fltSourceRatio > $fltDestRatio) {
+							$intCropHeight = $intHeight;
+							$intCropWidth = (int)round($intHeight * $fltDestRatio);
+							$intCropX = (int)(($intWidth - $intCropWidth) / 2);
+							$intCropY = 0;
+						} else {
+							$intCropWidth = $intWidth;
+							$intCropHeight = (int)round($intWidth / $fltDestRatio);
+							$intCropX = 0;
+							$intCropY = (int)(($intHeight - $intCropHeight) / 2);
+						}
+						
+						$objDest = imagecreatetruecolor($intDestWidth, $intDestHeight); 
+						switch ($_FILES['thumbnail']['type']) {
+							case 'image/jpeg' : 
+								$objSource = imagecreatefromjpeg($strSource); 
+								break;
+							case 'image/png'  : 
+								$objSource = imagecreatefrompng($strSource); 
+								break;
+							case 'image/webp' : 
+								$objSource = imagecreatefromwebp($strSource); 
+								break;
+						}
+						
+						imagecopyresampled($objDest, $objSource, 0, 0, $intCropX, $intCropY, $intDestWidth, $intDestHeight, $intCropWidth, $intCropHeight);
+						$boolImageOk = imagewebp($objDest, $strDest);
+						
+						imagedestroy($objDest);
+						imagedestroy($objSource);
+					}
+
+					if ($boolImageOk){
+						if (!isset($_GET['id'])){
+							$objProject->setUser_id($_SESSION['user']['user_id']);
+							$boolOk = $objProjectModel->insert($objProject);
+						} else {
+							$boolOk = $objProjectModel->updateProject($objProject);
+						}
+						
+						if ($boolOk){
+							if (isset($_FILES['imageProject']) && $_FILES['imageProject']['error'][0] != 4) {
+								$files = $_FILES['imageProject'];
+								$maxPhotos = 20;
+
+								$currentImages = $objProjectModel->getImagesByProjectId($objProject->getId());
+								$totalExisting = count($currentImages);
+								$remainingSlots = $maxPhotos - $totalExisting;
+
+								if ($remainingSlots <= 0) {
+									$_SESSION['error'] = "Limite de $maxPhotos photos atteinte. Supprimez-en pour en ajouter de nouvelles.";
+								} else {
+									$uploadedCount = 0;
+
+									foreach ($files['name'] as $key => $name) {
+										if ($uploadedCount >= $remainingSlots) break;
+
+										if ($files['error'][$key] === 0 && in_array($files['type'][$key], $arrTypeAllowed)) {
+											
+											$galleryName = uniqid() . "_gallery.webp";
+											$strDestGallery = $_ENV['IMG_PROJECT_PATH'].$galleryName;
+											$strSourceGallery = $files['tmp_name'][$key];
+
+											list($intW, $intH) = getimagesize($strSourceGallery);
+											
+											$intDestW = 150; $intDestH = 150; 
+											$fltDestR = $intDestW / $intDestH;
+											$fltSourceR = $intW / $intH;
+											
+											if ($fltSourceR > $fltDestR) {
+												$intCropH = $intH;
+												$intCropW = (int)round($intH * $fltDestR);
+												$intCropX = (int)(($intW - $intCropW) / 2);
+												$intCropY = 0;
+											} else {
+												$intCropW = $intW;
+												$intCropH = (int)round($intW / $fltDestR);
+												$intCropX = 0;
+												$intCropY = (int)(($intH - $intCropH) / 2);
+											}
+											
+											$objDestGallery = imagecreatetruecolor($intDestW, $intDestH); 
+
+											switch ($files['type'][$key]) {
+												case 'image/jpeg' : 
+													$objSourceGallery = imagecreatefromjpeg($strSourceGallery); 
+													break;
+												case 'image/png'  : 
+													$objSourceGallery = imagecreatefrompng($strSourceGallery); 
+													break;
+												case 'image/webp' : 
+													$objSourceGallery = imagecreatefromwebp($strSourceGallery);
+													break;
+											}
+
+											if ($objSourceGallery) {
+												imagecopyresampled($objDestGallery, $objSourceGallery, 0, 0, $intCropX, $intCropY, $intDestW, $intDestH, $intCropW, $intCropH);
+												
+												if (imagewebp($objDestGallery, $strDestGallery)) {
+													$objProjectModel->addImageInProject($galleryName, $objProject->getId());
+													$uploadedCount++;
+												}
+												
+												imagedestroy($objDestGallery);
+												imagedestroy($objSourceGallery);
+											}
+										}
+									}
+
+									if ($uploadedCount > 0) {
+										$_SESSION['success'] = "$uploadedCount image(s) ajoutée(s) à la galerie !";
+									}
+								}
+							}
+							
+							if(isset($strOldImg) && !empty($strOldImg) && isset($strImageName)){
+								$strOldFile = $_ENV['IMG_PROJECT_PATH'].$strOldImg;
+								if (file_exists($strOldFile)) unlink($strOldFile);
+							}
+
+							$_SESSION['success'] = (!isset($_GET['id'])) ? "Le projet a bien été créé" : "Le projet a bien été modifié";
+							header('Location:'.$_ENV['BASE_URL']);
+							exit;
+						} else {
+							$arrError[] = "Erreur lors de l'enregistrement en base de données";
+						}
+					} else {
+						$arrError['thumbnail'] = "Erreur dans le traitement de l'image";
+					}
+				}
+			}
+			
+			$this->_arrData['arrCategory'] = $objCategoryModel->findAllCategory();
+			$this->_arrData['objProject']  = $objProject; 
+			$this->_arrData['arrError']    = $arrError;
+
+			if ($objProject->getId()) {
+				$this->_arrData['arrImages'] = $objProjectModel->getImagesByProjectId($objProject->getId());
+			} else {
+				$this->_arrData['arrImages'] = [];
+			}
+
+			$this->_display('addedit_project');
+		}
+
+		
+		/**
+         * Fonction d'affichage d'un projet
+         */
+        public function display() {
+			$intId = $_GET['id'] ?? null;
+
+			if ($intId) {
+				$objProjectModel = new ProjectModel();
+				$arrProject = $objProjectModel->findOne((int)$intId);
+				
+				
+				if ($arrProject) {
+					$arrImages = $objProjectModel->getImagesByProjectId((int)$intId);
+					$objProject = new Project();
+					$objProject->hydrate($arrProject);
+					
+					$this->_arrData["arrProject"] = $arrProject;
+					$this->_arrData["objProject"] = $objProject;
+					$this->_arrData["arrImages"] = $arrImages; 
+
+					$this->_display("project_display");
+					
+				} else {
+					header('Location: '.$_ENV['BASE_URL'].'/project/home');
+					exit;
+				}
+			} else {
+				header('Location: '.$_ENV['BASE_URL'].'/project/home');
+				exit;
+			}
+		}
+		
+		/**
+         * Fonction d'envoi d'email
+         */
+		public function sendEmail(){
+			if (count($_POST) > 0) {
+
+				$projectId = (int)($_POST['project_id'] ?? 0);
+				$toEmail   = trim($_POST['to_email'] ?? '');
+ 
+				$objProjectModel = new ProjectModel();
+				$arrProject = $objProjectModel->findOne($projectId);
+ 
+				if (!$arrProject) {
+					header('Location: '.$_ENV['BASE_URL'].'/project/home');
+					exit;
+				}
+ 
+				$objProject = new Project();
+				$objProject->hydrate($arrProject);
+ 
+				$objMail = new PHPMailer();
+				$objMail->IsSMTP();
+				$objMail->Mailer    = "smtp";
+				$objMail->CharSet   = PHPMailer::CHARSET_UTF8;
+				$objMail->SMTPDebug = 0;   				
+ 
+				$objMail->SMTPAuth   = true;
+				$objMail->SMTPSecure = $_ENV['SMTP_SECURE'];
+				$objMail->Port       = $_ENV['SMTP_PORT'];
+				$objMail->Host       = $_ENV['SMTP_HOST'];
+				$objMail->Username   = $_ENV['SMTP_USERNAME'];
+				$objMail->Password   = $_ENV['SMTP_PASSWORD'];
+ 
+				$objMail->SMTPOptions = [
+					'ssl' => [
+						'verify_peer'       => false,						
+					],
+				];
+ 
+ 
+				$objMail->IsHTML(true);
+ 
+				$objMail->setFrom($_ENV['MAIL_FROM'], $_ENV['MAIL_FROM_NAME']);
+				$objMail->addAddress($toEmail);
+ 
+				$objMail->Subject = "Projet : " . $objProject->getTitle();
+ 
+				$url = $_ENV['BASE_URL'].'/project/display/'.$projectId;
+				
+				$this->_arrData['projectTitle']       = $objProject->getTitle();
+				$this->_arrData['projectDescription'] = $objProject->getDescription();
+				$this->_arrData['projectUrl']         = $url;
+ 
+				$objMail->Body = $this->_display("mail_message", false);
+ 
+				if ($objMail->Send()) {
+					header('Location: '.$_ENV['BASE_URL'].'/project/display/'.$projectId.'?mail=ok');
+				} else {
+					header('Location: '.$_ENV['BASE_URL'].'/project/display/'.$projectId.'?mail=fail');
+				}
+				exit;
+			}
+ 
+			header('Location: '.$_ENV['BASE_URL'].'/project/home');
+			exit;
+		}
+		
+		/** 
+		* Fonction de modération de projet = accepté
+		*/
+		public function accept(){
+
+			$intId = $_GET['id'];
+
+			$objProjectModel = new ProjectModel;
+			$objProjectModel->accept($intId);
+
+			header('Location: '.$_ENV['BASE_URL']);
+			exit;
+		}
+		
+		/** 
+		* Fonction de modération de projet = refusé
+		*/
+		public function refuse(){
+
+			$intId = $_GET['id'];
+
+			$objProjectModel = new ProjectModel;
+			$objProjectModel->refuse($intId);
+
+			header('Location: '.$_ENV['BASE_URL']);
+			exit;
+		}
+		
+		/** 
+		* Fonction de suppression de projet
+		*/
+		public function delete(){
+
+			$objProjectModel = new ProjectModel();
+			$intId = $_GET['id'] ?? null;
+			$project = $objProjectModel->findOne($intId);
+			if (
+			    !isset($_SESSION['user']) ||
+			    !$project &&
+			    ($_SESSION['user']['user_status'] != 2 || $project['project_user_id'] != $_SESSION['user']['user_id'])
+			) {
+			    header('Location: '.$_ENV['BASE_URL']);
+			    exit;
+			}	
+			
+
+			if ($intId) {
+				if ($objProjectModel->delete_soft_project((int) $intId)) {
+					$_SESSION['success'] = "Le projet a été archivé avec succès.";
+				} else {
+					$_SESSION['error'] = "Une erreur est survenue lors de l'archivage.";
+				}
+			}
+
+			header('Location: '.$_ENV['BASE_URL']);
+			exit;
+		}
+		
+		/**
+		* Fonction de changement de statut (Approuvé, Refusé, En attente)
+		*/
+		public function change_image_status() {
+			if (isset($_GET['id_img']) && isset($_GET['status'])) {
+				$idImg  = (int)$_GET['id_img'];
+				$status = $_GET['status'];
+				
+				$objProjectModel = new ProjectModel();
+				
+				if ($objProjectModel->updateImageStatus($idImg, $status)) {
+					$_SESSION['success'] = "Le statut de l'image est désormais : " . ucfirst($status);
+				}
+			}
+			
+			$urlRedirect = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : "index.php";
+			header('Location: ' . $urlRedirect);
+			exit;
+		}
+		
+		
+		/** 
+		* Fonction de validation de l'image de projet 
+		*/
+		public function delete_image() {
+
+			$idImg = $_GET['id'];
+			$objProjectModel = new ProjectModel();
+			
+			$image = $objProjectModel->findImage($idImg);
+			if ($image) {
+				$filePath = $_ENV['IMG_PROJECT_PATH'] . $image['image_name'];
+				if (file_exists($filePath)) unlink($filePath);
+				
+				$objProjectModel->deleteImage($idImg);
+				$_SESSION['success'] = "Image supprimée !";
+			}
+			
+			$url = (isset($_SERVER['HTTP_REFERER'])) ? $_SERVER['HTTP_REFERER'] : "index.php";
+			header('Location: ' . $url);
+			exit;
+		}
+		
+				
+    }
diff --git a/controllers/UserCtrl.php b/controllers/UserCtrl.php
new file mode 100644
index 0000000..1464775
--- /dev/null
+++ b/controllers/UserCtrl.php
@@ -0,0 +1,334 @@
+<?php
+
+	namespace Controllers;
+
+	use Models\UserModel;
+	use Models\ProjectModel;
+
+	use Entities\User;
+	use Entities\Project;
+
+	/**
+     * Le controller de la page d'aide utilisateur
+     * @author Guillaume & Besnik & Yasser
+     */
+
+class UserCtrl  extends MotherCtrl {
+		/**
+		* Page Login
+		*/
+		public function login(){
+			
+			$strMail 		= $_POST['user_mail']??"";
+			$strPwd 		= $_POST['user_password']??"";
+			
+			$arrError = [];
+			if (count($_POST) > 0) {
+				if ($strMail == ""){
+					$arrError['mail'] = "Le mail est obligatoire";
+				}	
+				if ($strPwd == ""){
+					$arrError['pwd'] = "Le mot de passe est obligatoire";
+				}
+				
+				if (count($arrError) == 0){
+					$objUserModel 	= new UserModel;
+					$arrResult 		= $objUserModel->verifUser($strMail, $strPwd);
+					if ($arrResult === false){ 
+						$arrError[] = "Mail ou mot de passe invalide";
+					}else{
+						$_SESSION['user']		= $arrResult;
+						$_SESSION['success'] 	= "Bienvenue, vous êtes bien connecté";
+						if (isset($_POST['remember_me'])) {
+
+							$token = bin2hex(random_bytes(32));
+							$token_hash = hash('sha256', $token);
+							$objUserModel->remember($_SESSION['user']['user_id'],$token_hash);	
+
+							setcookie('remember_me', $token, time() + (15*24*60*60), "/", "", true, true);				
+
+						}
+						header("Location:".$_ENV['BASE_URL']);
+						exit;
+					}
+				}
+			}	
+			$this->_arrData['arrError']	= $arrError;
+			$this->_display("login");
+
+		}
+		
+		/**
+		* Fonction pour ce déconnecter
+		*/
+		public function logout(){
+
+			if (isset($_COOKIE['remember_me'])) {
+			    $hash = hash('sha256', $_COOKIE['remember_me']);
+
+			    $objUserModel = new UserModel;
+				$objUserModel->deleteToken($hash);
+			
+			    setcookie('remember_me', '', time() - 3600, "/");
+			}
+			unset($_SESSION['user']);
+			
+			$_SESSION['success'] 	= "Vous êtes bien déconnecté";
+			
+			header("Location:".$_ENV['BASE_URL']);
+			exit;
+
+		}
+    	/**
+		 * Fonction d'inscription d'un utilisateur
+		 * Effectue les validations du formulaire,
+		 * vérifie l'unicité du mail et du pseudo, puis insère l'utilisateur en base de données
+		 * @return void
+		 */
+		public function signup(){
+
+			$objUser = new User();
+			$strPwdConfirm = $_POST['pwd_confirm'] ?? "";
+
+			$objUser->hydrate($_POST);
+
+			$arrError = [];
+
+			if (!empty($_POST)) {
+				
+				$arrError	= array_merge($this->_verifInfos($objUser), 
+										  $this->_verifPwd($objUser, $strPwdConfirm));
+
+				if (count($arrError) === 0) {
+					$objUserModel = new UserModel();
+					if ($objUserModel->mailExists($objUser->getMail())) {
+						$arrError['user_mail'] = "Impossible de créer le compte avec ces informations";
+					}
+					if ($objUserModel->pseudoExists($objUser->getPseudo())) {
+						$arrError['user_pseudo'] = "Ce pseudo existe déjà";
+					}
+					if (count($arrError) === 0) {
+						$boolInsert = $objUserModel->insert($objUser);
+
+						if ($boolInsert === true) {
+							$_SESSION['success'] = "Compte créé avec succès";
+							header("Location:".$_ENV['BASE_URL']."/user/login");
+							exit;
+						} else {
+							$arrError['global'] = "Erreur lors de l'ajout";
+						}
+					}
+				}
+			}
+
+			$this->_arrData['objUser'] = $objUser;
+			$this->_arrData['arrError'] = $arrError;
+			$this->_display("signup");
+		}	
+
+
+		protected function _verifInfos(User $objUser): array {
+
+			$arrError = [];
+
+			if (trim($objUser->getName()) === "") {
+				$arrError['user_name'] = "Le nom est obligatoire";
+			}
+
+			if (trim($objUser->getFirstname()) === "") {
+				$arrError['user_firstname'] = "Le prénom est obligatoire";
+			}
+
+			if (trim($objUser->getMail()) === "") {
+				$arrError['user_mail'] = "L'adresse e-mail est obligatoire";
+			} elseif (!filter_var($objUser->getMail(), FILTER_VALIDATE_EMAIL)) {
+				$arrError['user_mail'] = "Le format de l'adresse e-mail est invalide";
+			}
+
+			if (trim($objUser->getPseudo()) === "") {
+				$arrError['user_pseudo'] = "Le pseudo est obligatoire";
+			}
+
+			return $arrError;
+		}
+
+
+		/**
+		 * Vérification du mot de passe
+		 */
+		protected function _verifPwd(User $objUser, string $strPwdConfirm): array {
+
+			$arrError = [];
+
+			$strRegex = "/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{15,}$/";
+
+			if ($objUser->getPwd() == ""){
+				$arrError['user_password'] = "Le mot de passe est obligatoire";
+			}
+			else if (!preg_match($strRegex, $objUser->getPwd())){
+				$arrError['user_password'] = "Le mot de passe ne respecte pas les critères";
+			}
+			else if ($objUser->getPwd() != $strPwdConfirm){
+				$arrError['pwd_confirm'] = "La confirmation du mot de passe ne correspond pas";
+			}
+
+			return $arrError;
+		}
+	
+
+		/**
+		 * le controlleur affichage de la page user
+		 */
+		public function user(){
+
+			$strPseudo = $_GET['pseudo']??'';
+
+			$objUserModel = new UserModel;
+			$arrUserData  = $objUserModel->findUserByPseudo($strPseudo);
+
+			if ($arrUserData === false) {
+				header("Location: ".$_ENV['BASE_URL']);
+				exit;
+			}
+
+			$objUser = new User;
+			$objUser->hydrate($arrUserData);
+			$objProjectModel = new ProjectModel;
+			$arrProjects = $objProjectModel->findAll(0,'',$objUser->getId());
+
+			$arrProjectToDisplay = array();
+			foreach($arrProjects as $projectData) {
+				$objProject = new Project();
+				$objProject->hydrate($projectData);
+				$arrProjectToDisplay[] = $objProject;
+			}
+
+			$this->_arrData['user'] = $objUser;
+			$this->_arrData['arrProjectToDisplay'] = $arrProjectToDisplay;
+			$this->_display("user");
+		}
+
+		/**
+		 * le controlleur de la modification d'un user
+		 */
+		public function edit(){
+			if(!isset($_SESSION['user'])){
+				header("Location: ".$_ENV['BASE_URL']);
+				exit;
+			}	
+			$objUserModel = new UserModel;
+			$arrError = [];
+			$objUser = new User;
+			$arrUserData  = $objUserModel->findUserById($_SESSION['user']['user_id']);
+			$objUser->hydrate($arrUserData);
+			if (!empty($_POST)) {
+						if ($objUserModel->mailExists($_POST['user_mail']) && ($_POST['user_mail'] != $objUser->getMail())) {
+
+								$arrError['user_mail'] = "Ce mail est déjà associé";
+							} else {
+								if ($objUserModel->pseudoExists($_POST['user_pseudo']) && ($_POST['user_pseudo'] != $objUser->getPseudo())){
+									$arrError['user_pseudo'] = "Ce pseudo est déjà utiliser";
+								}else{
+									$objUser->hydrate($_POST);
+									$objUser->setId($_SESSION['user']['user_id']);
+
+									$arrTypeAllowed = array('image/jpeg', 'image/png', 'image/webp');
+									$boolImageOk = true;
+
+									if ($_FILES['image']['error'] != 4) {
+										if (!in_array($_FILES['image']['type'], $arrTypeAllowed)) {
+											$arrError['image'] = "Le type de fichier n'est pas autorisé";
+										} else {
+											switch ($_FILES['image']['error']) {
+												case 0:
+													$strImageName = uniqid() . ".webp";
+													$strOldImg = $objUser->getImage();
+													$objUser->setImage($strImageName);
+													break;
+												case 1:
+												case 2:
+													$arrError['image'] = "Le fichier est trop volumineux";
+													break;
+												case 3:
+													$arrError['image'] = "Le fichier a été partiellement téléchargé";
+													break;
+												case 6:
+													$arrError['image'] = "Le répertoire temporaire est manquant";
+													break;
+												default:
+													$arrError['image'] = "Erreur sur l'image";
+													break;
+											}
+										}
+									}
+
+												
+									if (count($arrError) == 0 && isset($strImageName)) {
+										$strDest    = $_ENV['IMG_USER_PATH'] . $strImageName;
+										$strSource  = $_FILES['image']['tmp_name'];
+										list($intWidth, $intHeight) = getimagesize($strSource);
+												
+										$intDestWidth = 200; $intDestHeight = 200;
+										$fltDestRatio   = $intDestWidth / $intDestHeight;
+										$fltSourceRatio = $intWidth / $intHeight;
+												
+										if ($fltSourceRatio > $fltDestRatio) {
+											$intCropHeight  = $intHeight;
+											$intCropWidth   = (int)round($intHeight * $fltDestRatio);
+											$intCropX       = (int)(($intWidth - $intCropWidth) / 2);
+											$intCropY       = 0;
+										} else {
+											$intCropWidth   = $intWidth;
+											$intCropHeight  = (int)round($intWidth / $fltDestRatio);
+											$intCropX       = 0;
+											$intCropY       = (int)(($intHeight - $intCropHeight) / 2);
+										}
+												
+										$objDest = imagecreatetruecolor($intDestWidth, $intDestHeight);
+										switch ($_FILES['image']['type']) {
+											case 'image/jpeg': $objSource = imagecreatefromjpeg($strSource); break;
+											case 'image/png':  $objSource = imagecreatefrompng($strSource);  break;
+											case 'image/webp': $objSource = imagecreatefromwebp($strSource); break;
+										}
+												
+										imagecopyresampled($objDest, $objSource, 0, 0, $intCropX, $intCropY, $intDestWidth, $intDestHeight, $intCropWidth, $intCropHeight);
+										$boolImageOk = imagewebp($objDest, $strDest);
+										imagedestroy($objDest);
+										imagedestroy($objSource);
+									}
+
+
+									if ($_POST['delete_image'] === '1') {
+									    $strOldImg = $objUser->getImage();
+									    if (!empty($strOldImg) && $strOldImg !== 'images.jpg') {
+									        $strOldFile = $_ENV['IMG_USER_PATH'] . $strOldImg;
+									        if (file_exists($strOldFile)) unlink($strOldFile);
+									    }
+									    $objUser->setImage('images.jpg');
+									}
+									$boolInsert = $objUserModel->update($objUser);
+
+									if ($boolInsert === true) {
+										if (isset($strOldImg) && !empty($strOldImg) && $strOldImg !== 'images.jpg' && isset($strImageName)) {
+										    $strOldFile = $_ENV['IMG_USER_PATH'] . $strOldImg;
+										    if (file_exists($strOldFile)) unlink($strOldFile);
+										}
+										$arrNewInfo = $objUserModel->findUserByPseudo($objUser->getPseudo());
+										$_SESSION['user'] = $arrNewInfo;
+										$_SESSION['success'] = "Compte modifier avec succès";
+										header('Location:'.$_ENV['BASE_URL'].'/user/user/'.$objUser->getPseudo());
+										exit;
+									} else {
+										$arrError['global'] = "Erreur lors de l'update";
+									}
+							}
+						}
+			}
+
+			$this->_arrData["arrError"] = $arrError;
+			$this->_arrData['objUser'] = $objUser;
+			$this->_display("useredit");
+
+		}
+		
+}
diff --git a/controllers/templates_c/299f75d7692a19207f23bf5795a2721f507c3fc6_0.file_home.tpl.php b/controllers/templates_c/299f75d7692a19207f23bf5795a2721f507c3fc6_0.file_home.tpl.php
new file mode 100644
index 0000000..208dcfd
--- /dev/null
+++ b/controllers/templates_c/299f75d7692a19207f23bf5795a2721f507c3fc6_0.file_home.tpl.php
@@ -0,0 +1,69 @@
+<?php
+/* Smarty version 5.7.0, created on 2026-02-06 08:21:14
+  from 'file:views/home.tpl' */
+
+/* @var \Smarty\Template $_smarty_tpl */
+if ($_smarty_tpl->getCompiled()->isFresh($_smarty_tpl, array (
+  'version' => '5.7.0',
+  'unifunc' => 'content_6985a47abcda40_19846426',
+  'has_nocache_code' => false,
+  'file_dependency' => 
+  array (
+    '299f75d7692a19207f23bf5795a2721f507c3fc6' => 
+    array (
+      0 => 'views/home.tpl',
+      1 => 1770365364,
+      2 => 'file',
+    ),
+  ),
+  'includes' => 
+  array (
+    'file:views/_partial/preview.tpl' => 1,
+  ),
+))) {
+function content_6985a47abcda40_19846426 (\Smarty\Template $_smarty_tpl) {
+$_smarty_current_dir = 'C:\\wamp64\\www\\projetphp\\views';
+$_smarty_tpl->getInheritance()->init($_smarty_tpl, false);
+?>
+
+<?php 
+$_smarty_tpl->getInheritance()->instanceBlock($_smarty_tpl, 'Block_3150142016985a47abb6c29_00747518', "content");
+?>
+
+<?php }
+/* {block "content"} */
+class Block_3150142016985a47abb6c29_00747518 extends \Smarty\Runtime\Block
+{
+public function callBlock(\Smarty\Template $_smarty_tpl) {
+$_smarty_current_dir = 'C:\\wamp64\\www\\projetphp\\views';
+?>
+
+<section class="container mt-5 p-5 d-flex flex-column align-items-center text-center">
+    <h1 class="logo">Folliow</h1>
+    <h2>Là où les talents rencontrent leur avenir</h2>
+    <p class="col-6">Une plateforme de portfolio adapté à vos besoins et aux besoins des entreprises. 
+        Créer un portfolio réellement pertinent aux exigences du marché et rentrez 
+        directement en contact avec les entreprises.</p>
+</section>
+
+<section class="container" aria-label="Articles récents">
+	<h2 class="visually-hidden">Les 4 derniers articles</h2>
+	<div class="row mb-2">
+	
+    <?php
+$_from = $_smarty_tpl->getSmarty()->getRuntime('Foreach')->init($_smarty_tpl, $_smarty_tpl->getValue('arrProjectToDisplay'), 'objProject');
+$foreach0DoElse = true;
+foreach ($_from ?? [] as $_smarty_tpl->getVariable('objProject')->value) {
+$foreach0DoElse = false;
+?>
+		<?php $_smarty_tpl->renderSubTemplate("file:views/_partial/preview.tpl", $_smarty_tpl->cache_id, $_smarty_tpl->compile_id, 0, $_smarty_tpl->cache_lifetime, array(), (int) 0, $_smarty_current_dir);
+?>
+	<?php
+}
+$_smarty_tpl->getSmarty()->getRuntime('Foreach')->restore($_smarty_tpl, 1);?> 
+</section>
+<?php
+}
+}
+/* {/block "content"} */
+}
diff --git a/controllers/templates_c/c724044e55872f26030b02de6dcd14dc34a20b16_0.file_preview.tpl.php b/controllers/templates_c/c724044e55872f26030b02de6dcd14dc34a20b16_0.file_preview.tpl.php
new file mode 100644
index 0000000..50ed66a
--- /dev/null
+++ b/controllers/templates_c/c724044e55872f26030b02de6dcd14dc34a20b16_0.file_preview.tpl.php
@@ -0,0 +1,66 @@
+<?php
+/* Smarty version 5.7.0, created on 2026-02-06 08:21:14
+  from 'file:views/_partial/preview.tpl' */
+
+/* @var \Smarty\Template $_smarty_tpl */
+if ($_smarty_tpl->getCompiled()->isFresh($_smarty_tpl, array (
+  'version' => '5.7.0',
+  'unifunc' => 'content_6985a47ad585d5_25749521',
+  'has_nocache_code' => false,
+  'file_dependency' => 
+  array (
+    'c724044e55872f26030b02de6dcd14dc34a20b16' => 
+    array (
+      0 => 'views/_partial/preview.tpl',
+      1 => 1770365554,
+      2 => 'file',
+    ),
+  ),
+  'includes' => 
+  array (
+  ),
+))) {
+function content_6985a47ad585d5_25749521 (\Smarty\Template $_smarty_tpl) {
+$_smarty_current_dir = 'C:\\wamp64\\www\\projetphp\\views\\_partial';
+?><article class="col-md-3 mb-4">
+    <div class="card h-100 shadow-sm article-card">
+        
+                <div class="ratio ratio-16x9">
+            <img src=".<?php echo $_smarty_tpl->getValue('objProject')->getThumbnail();?>
+"
+            class="w-100 h-100 object-fit-cover"
+            alt=""
+            loading="lazy">
+        </div>
+
+        <div class="d-flex align-items-start gap-3">
+
+        <img src=".<?php echo $_smarty_tpl->getValue('objProject')->getUser_image();?>
+"
+         class="rounded-circle flex-shrink-0 mt-2 ml-5"
+         style="width: 48px; height: 48px; object-fit: cover;"
+         alt="Photo de profil">
+
+        <div class="flex-grow-1 card-body p-3">
+        <h3 class="h6 mb-1"><?php echo $_smarty_tpl->getValue('objProject')->getTitle();?>
+</h3>
+
+        <small class="text-body-secondary d-block mb-1">
+            <time><?php echo $_smarty_tpl->getValue('objProject')->getCreation_date();?>
+</time>
+            – <?php echo $_smarty_tpl->getValue('objProject')->getCreatorname();?>
+
+        </small>
+
+        <a href="?id=<?php echo $_smarty_tpl->getValue('objProject')->getId();?>
+"
+           class="stretched-link small">
+            Lire la suite →
+        </a>
+    </div>
+
+</div>
+
+    </div>
+</article><?php }
+}
diff --git a/database/.gitkeep b/database/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/database/database.sql b/database/database.sql
new file mode 100644
index 0000000..649db7d
--- /dev/null
+++ b/database/database.sql
@@ -0,0 +1,253 @@
+CREATE DATABASE IF NOT EXISTS `projet_folliow`
+  DEFAULT CHARACTER SET utf8mb4
+  COLLATE utf8mb4_unicode_ci;
+
+USE `projet_folliow`;
+
+/*M!999999\- enable the sandbox mode */ 
+-- MariaDB dump 10.19  Distrib 10.11.14-MariaDB, for debian-linux-gnu (x86_64)
+--
+-- Host: localhost    Database: projet_folliow
+-- ------------------------------------------------------
+-- Server version	10.11.14-MariaDB-0+deb12u2
+
+/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
+/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
+/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
+/*!40101 SET NAMES utf8mb4 */;
+/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
+/*!40103 SET TIME_ZONE='+00:00' */;
+/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
+/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
+/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
+/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
+
+--
+-- Table structure for table `authorisation`
+--
+
+DROP TABLE IF EXISTS `authorisation`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8mb4 */;
+CREATE TABLE `authorisation` (
+  `authorisation_id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT 'Identifiant unique des autorisations',
+  `authorisation_name` varchar(30) NOT NULL COMMENT 'Administrateur, modérateur, utilisateur',
+  PRIMARY KEY (`authorisation_id`),
+  UNIQUE KEY `uk_authorisation_name` (`authorisation_name`)
+) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Dumping data for table `authorisation`
+--
+
+LOCK TABLES `authorisation` WRITE;
+/*!40000 ALTER TABLE `authorisation` DISABLE KEYS */;
+INSERT INTO `authorisation` VALUES
+(1,'Administrateur'),
+(2,'Modérateur'),
+(3,'Utilisateur');
+/*!40000 ALTER TABLE `authorisation` ENABLE KEYS */;
+UNLOCK TABLES;
+
+--
+-- Table structure for table `category`
+--
+
+DROP TABLE IF EXISTS `category`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8mb4 */;
+CREATE TABLE `category` (
+  `category_id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT 'Identifiant unique des catégorie du projet',
+  `category_name` varchar(150) NOT NULL COMMENT 'Nom de chaque catégorie',
+  `category_parent` int(10) unsigned DEFAULT NULL COMMENT 'ID de la catégorie parente (NULL = catégorie principale)',
+  PRIMARY KEY (`category_id`),
+  UNIQUE KEY `uk_category_name_parent` (`category_name`,`category_parent`),
+  KEY `fk_category_parent` (`category_parent`),
+  CONSTRAINT `fk_category_parent` FOREIGN KEY (`category_parent`) REFERENCES `category` (`category_id`) ON DELETE CASCADE ON UPDATE CASCADE
+) ENGINE=InnoDB AUTO_INCREMENT=54 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Dumping data for table `category`
+--
+
+LOCK TABLES `category` WRITE;
+/*!40000 ALTER TABLE `category` DISABLE KEYS */;
+INSERT INTO `category` VALUES
+(32,'3D',4),
+(34,'Aquarelle',4),
+(5,'Architecture',NULL),
+(36,'Architecture d\'Intérieur',5),
+(35,'Architecture Moderne',5),
+(24,'Backend',2),
+(33,'Bande Dessinée',4),
+(1,'Design',NULL),
+(2,'Développement Web',NULL),
+(31,'Digital Art',4),
+(30,'Événementiel',3),
+(23,'Frontend',2),
+(25,'Full-Stack',2),
+(4,'Illustration',NULL),
+(20,'Logo & Identité Visuelle',1),
+(39,'Marketing',NULL),
+(46,'Marketing',NULL),
+(26,'Mobile',2),
+(21,'Motion Design',1),
+(38,'Patrimoine',5),
+(28,'Paysage',3),
+(3,'Photographie',NULL),
+(27,'Portrait',3),
+(22,'Print Design',1),
+(40,'Rédaction',NULL),
+(47,'Rédaction',NULL),
+(29,'Sport',3),
+(19,'UI/UX Design',1),
+(37,'Urbanisme',5),
+(41,'Vidéo',NULL),
+(48,'Vidéo',NULL);
+/*!40000 ALTER TABLE `category` ENABLE KEYS */;
+UNLOCK TABLES;
+
+--
+-- Table structure for table `image`
+--
+
+DROP TABLE IF EXISTS `image`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8mb4 */;
+CREATE TABLE `image` (
+  `image_id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT 'identifiant unique des images',
+  `image_name` varchar(150) NOT NULL COMMENT 'Chemin de l''image enregistrée',
+  `image_alt` varchar(255) DEFAULT NULL COMMENT 'Alt de l''image',
+  `image_status` varchar(50) NOT NULL DEFAULT 'en_attente' COMMENT 'Statut de modération de l''image',
+  `image_project` int(10) unsigned DEFAULT NULL COMMENT 'Identifiant du projet où se trouve l''image',
+  PRIMARY KEY (`image_id`),
+  KEY `fk_image_project` (`image_project`),
+  CONSTRAINT `fk_image_project` FOREIGN KEY (`image_project`) REFERENCES `project` (`project_id`) ON DELETE CASCADE ON UPDATE CASCADE,
+  CONSTRAINT `chk_image_status` CHECK (`image_status` in ('en_attente','approuvé','rejeté'))
+) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Dumping data for table `image`
+--
+
+LOCK TABLES `image` WRITE;
+/*!40000 ALTER TABLE `image` DISABLE KEYS */;
+INSERT INTO `image` VALUES
+(1,'/uploads/projects/ecommerce-01.jpg','Page d\'accueil du site e-commerce refondu','approuvé',1),
+(2,'/uploads/projects/ecommerce-02.jpg','Interface mobile du processus de commande','approuvé',1),
+(3,'/uploads/projects/taskmanager-01.jpg','Vue kanban de l\'application','approuvé',2),
+(4,'/uploads/projects/urban-01.jpg','Architecture moderne à La Défense','en_attente',3);
+/*!40000 ALTER TABLE `image` ENABLE KEYS */;
+UNLOCK TABLES;
+
+--
+-- Table structure for table `project`
+--
+
+DROP TABLE IF EXISTS `project`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8mb4 */;
+CREATE TABLE `project` (
+  `project_id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT 'Identifiant unique du projet',
+  `project_title` varchar(150) NOT NULL COMMENT 'Titre du projet',
+  `project_description` text DEFAULT NULL COMMENT 'Description du projet',
+  `project_thumbnail` varchar(150) DEFAULT NULL COMMENT 'Image miniature du projet',
+  `project_content` text DEFAULT NULL COMMENT 'Contenu du projet',
+  `project_creation_date` date NOT NULL COMMENT 'Date de création du projet',
+  `project_status` varchar(30) NOT NULL DEFAULT 'brouillon' COMMENT 'Statut du projet : brouillon, publié, en_attente',
+  `project_user` int(10) unsigned DEFAULT NULL COMMENT 'Identifiant de l''user',
+  `project_category` int(10) unsigned DEFAULT NULL COMMENT 'Identifiant de la catégorie',
+
+  PRIMARY KEY (`project_id`),
+  KEY `fk_project_user` (`project_user`),
+  KEY `fk_project_category` (`project_category`),
+  KEY `idx_project_status` (`project_status`),
+  KEY `idx_project_creation_date` (`project_creation_date`),
+
+  CONSTRAINT `fk_project_category`
+    FOREIGN KEY (`project_category`)
+    REFERENCES `category` (`category_id`)
+    ON DELETE SET NULL
+    ON UPDATE CASCADE,
+
+  CONSTRAINT `fk_project_user`
+    FOREIGN KEY (`project_user`)
+    REFERENCES `users` (`user_id`)
+    ON DELETE CASCADE
+    ON UPDATE CASCADE
+) ENGINE=InnoDB
+DEFAULT CHARSET=utf8mb4
+COLLATE=utf8mb4_unicode_ci;
+
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Dumping data for table `project`
+--
+
+LOCK TABLES `project` WRITE;
+/*!40000 ALTER TABLE `project` DISABLE KEYS */;
+INSERT INTO `project` VALUES
+(1,'Refonte du site e-commerce','Refonte complète de l\'interface utilisateur d\'une boutique en ligne avec focus sur l\'expérience mobile','/uploads/projects/ecommerce-thumb.jpg','Ce projet visait à moderniser entièrement l\'interface d\'un site e-commerce existant. Les principales améliorations incluent une navigation simplifiée, un processus de commande optimisé et une interface responsive.','2025-12-01','publié',1,1),
+(2,'Application de gestion de tâches','Développement d\'une application web pour la gestion collaborative de projets','/uploads/projects/taskmanager-thumb.jpg','Application web développée en React et Node.js permettant aux équipes de gérer leurs projets de manière collaborative. Fonctionnalités : kanban, calendrier, notifications en temps réel.','2025-12-15','publié',2,2),
+(3,'Série photo urbaine','Collection de photographies capturant l\'architecture moderne de Paris','/uploads/projects/urban-thumb.jpg','Série de 30 photographies prises dans différents quartiers de Paris, mettant en valeur le contraste entre architecture classique et moderne. Travail sur la lumière naturelle et les perspectives.','2026-01-05','en_attente',3,3);
+/*!40000 ALTER TABLE `project` ENABLE KEYS */;
+UNLOCK TABLES;
+
+--
+-- Table structure for table `users`
+--
+
+DROP TABLE IF EXISTS `users`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8mb4 */;
+CREATE TABLE `users` (
+  `user_id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT 'Identifiant unique de l''utilisateur',
+  `user_name` varchar(100) NOT NULL COMMENT 'Nom de l''utilisateur',
+  `user_firstname` varchar(100) NOT NULL COMMENT 'Prénom de l''utilisateur',
+  `user_pseudo` varchar(30) NOT NULL COMMENT 'Pseudo de l''utilisateur',
+  `user_image` varchar(150) DEFAULT NULL COMMENT 'Photo de profil de l''utilisateur',
+  `user_mail` varchar(100) NOT NULL COMMENT 'Mail de l''utilisateur',
+  `user_password` varchar(255) NOT NULL COMMENT 'Mot de passe de l''utilisateur',
+  `user_phone` varchar(20) DEFAULT NULL COMMENT 'Téléphone de l''utilisateur',
+  `user_work` varchar(50) DEFAULT NULL COMMENT 'Profession de l''utilisateur',
+  `user_birth` date DEFAULT NULL COMMENT 'Date de naissance de l''utilisateur',
+  `user_location` varchar(150) DEFAULT NULL COMMENT 'Localisation de l''utilisateur',
+  `user_description` varchar(255) DEFAULT NULL COMMENT 'Phrase d''accroche de l''utilisateur',
+  `user_account_creation` datetime NOT NULL DEFAULT current_timestamp() COMMENT 'Date et heure de création du compte',
+  `user_status` int(10) unsigned DEFAULT NULL COMMENT 'identifiant de niveau d''autorisation',
+  PRIMARY KEY (`user_id`),
+  UNIQUE KEY `uk_user_mail` (`user_mail`),
+  UNIQUE KEY `uk_user_pseudo` (`user_pseudo`),
+  KEY `fk_users_authorisation` (`user_status`),
+  KEY `idx_user_mail` (`user_mail`),
+  CONSTRAINT `fk_users_authorisation` FOREIGN KEY (`user_status`) REFERENCES `authorisation` (`authorisation_id`) ON DELETE SET NULL ON UPDATE CASCADE
+) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Dumping data for table `users`
+--
+
+LOCK TABLES `users` WRITE;
+/*!40000 ALTER TABLE `users` DISABLE KEYS */;
+INSERT INTO `users` VALUES
+(1,'Dupont','Marie','marie_design','/uploads/users/marie.jpg','marie.dupont@example.com','$2y$10$T5kWRD3NBqXKWtQqrBG3We1Qpq2Odum0/xYAoT2SaCclG7h2Y0Gvq','0612345678','Designer UI/UX','1995-03-15','Paris, France','Passionnée de design et d\'expérience utilisateur','2024-01-15 10:30:00',1),
+(2,'Martin','Thomas','thomas_dev','/uploads/users/thomas.jpg','thomas.martin@example.com','$2y$10$T5kWRD3NBqXKWtQqrBG3We1Qpq2Odum0/xYAoT2SaCclG7h2Y0Gvq','0623456789','Développeur Full-Stack','1992-07-22','Lyon, France','Créateur d\'applications web modernes','2024-02-20 14:45:00',2),
+(3,'Dubois','Sophie','sophie_photo','/uploads/users/sophie.jpg','sophie.dubois@example.com','$2y$10$T5kWRD3NBqXKWtQqrBG3We1Qpq2Odum0/xYAoT2SaCclG7h2Y0Gvq','0634567890','Photographe','1998-11-08','Marseille, France','Capturer l\'instant présent est ma passion','2024-03-10 09:15:00',3);
+/*!40000 ALTER TABLE `users` ENABLE KEYS */;
+UNLOCK TABLES;
+/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;
+
+/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
+/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
+/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
+/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
+/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
+/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
+/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
+
+-- Dump completed on 2026-01-09 17:33:08
diff --git a/entities/Authorisation.php b/entities/Authorisation.php
new file mode 100644
index 0000000..cac51b4
--- /dev/null
+++ b/entities/Authorisation.php
@@ -0,0 +1,53 @@
+<?php
+	namespace Entities;
+
+	
+	/**
+	 * Classe d'un objet Authorisation
+	 * @author Laura
+	 */
+	class Authorisation extends Mother{
+
+        private int $_id;
+		private string $_name = '';
+
+		/**
+		 * le constructeur de la table authorisation
+		 */
+        public function __construct(){
+			$this->_prefix = 'authorisation_';
+		}
+		
+		/**
+		 * Récuperation de l'id du statut d'un utilisateur
+		 * @return int l'id du statut
+		 */
+		public function getId():int{
+			return $this->_id;
+		}
+
+		/**
+		 * Mise à jour de l'id du statut d'un utilisateur
+		 * @param int le nouvelle id du statut
+		 */
+		public function setId(int $id){
+			$this->_id = $id;
+		}
+		
+		/**
+		 * Récuperation de l'intitulé du statut d'un utilisateur
+		 * @return string l'intitulé du statut
+		 */
+		public function getName():string{
+			return $this->_name;
+        }
+
+		/**
+		 * Mise à jour de l'intitulé du statut d'un utilisateur
+		 * @return string le nouvel intitulé du statut
+		 */
+		public function setName(string $name){
+			$this->_name = $name;
+		}
+
+    }
\ No newline at end of file
diff --git a/entities/Category.php b/entities/Category.php
new file mode 100644
index 0000000..9b9b749
--- /dev/null
+++ b/entities/Category.php
@@ -0,0 +1,81 @@
+<?php
+
+namespace Entities;
+
+/**
+ * Classe d'un objet Category
+ * @author Laura
+ */
+
+class Category extends Mother{
+
+    private ?int         $_id = null;
+    protected string     $_name = '';
+    protected ?int       $_parent = null;
+
+    /**
+     * le constructeur de la table category
+     */
+    public function __construct(){
+        $this->_prefix = 'category_';
+    }
+
+    // Méthode Getter et Setter
+
+    /**
+     * Récuperation de l'id de la catégorie
+     * @return int l'id de la catégorie
+     */
+    public function getId(): ?int{
+        return $this->_id;
+    }
+
+    /**
+     * Mise à jour de l'id de la catégorie
+     * @param int le nouvelle id
+     */
+    public function setId($id){
+        if (empty($id)) {
+            $this->_id = null;
+        } else {
+            $this->_id = (int) $id;
+        }
+    }
+
+    /**
+     * Récuperation du nom de la catégorie
+     * @return string nom de la catégorie
+     */
+    public function getName(){
+        return $this->_name;
+    }
+
+    /**
+     * Mise à jour du nom de la catégorie
+     * @param string le nouveau nom de la catégorie
+     */
+    public function setName($name){
+        $this->_name = $name;
+    }
+
+    /**
+     * Récuperation du nom du parent de la catégorie
+     * @return int nom de la catégorie
+     */
+    public function getParent():?int{
+        return $this->_parent;
+    }
+
+    /**
+     * Mise à jour du nom du parent de la catégorie
+     * @param int le nouveau nom de la catégorie
+     */
+    public function setParent($parent){
+        if (empty($parent)) {
+            $this->_parent = null;
+        } else {
+            $this->_parent = (int) $parent;
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/entities/Image.php b/entities/Image.php
new file mode 100644
index 0000000..11dfad5
--- /dev/null
+++ b/entities/Image.php
@@ -0,0 +1,92 @@
+<?php
+
+namespace Entities;
+
+
+	/**
+	 * Classe d'un objet Projet
+	 * @author Laura
+	 */
+class Image extends Mother{
+
+    private int       $_id;
+    private string    $_name = '';
+    private string    $_alt = '';
+    private string    $_status ='';
+    private int       $_project = 0; 
+
+
+    /**
+     * le constructeur de la table image
+     */
+     public function __construct(){
+        $this->_prefix = 'image_';
+    }
+
+    // Méthode Getter et Setter
+
+    /**
+     * Récuperation de l'id de l'image
+     * @return int l'id de l'image
+     */
+    public function getId():int{
+        return $this->_id;
+    }
+
+    /**
+     * Mise à jour de l'id de l'image
+     * @param int le nouvelle id
+     */
+    public function setId($id){
+        $this->_id = $id;
+    }
+
+    /**
+     * Récuperation du nom de l'image
+     * @return string nom de l'image
+     */
+    public function getName(){
+        return $this->_name;
+    }
+
+    /**
+     * Mise à jour du nom de l'image
+     * @param string le nouveau nom de l'image
+     */
+    public function setName($name){
+        $this->_name = $name;
+    }
+
+    /**
+     * Récuperation de l'alt
+     * @return string contenu de l'alt
+     */
+    public function getAlt(){
+        return $this->_alt;
+    }
+
+    /**
+     * Mise à jour de l'alt
+     * @param string le nouveau contenu de l'alt
+     */
+    public function setAlt($alt){
+        $this->_alt = $alt;
+    }
+
+    /**
+     * Récuperation du statut de la photo
+     * @return string du statut
+     */
+    public function getStatus(){
+        return $this->_status;
+    }
+
+    /**
+     * Mise à jour du statut de la photo
+     * @param string le nouveau statut de la photo
+     */
+    public function setStatus($status){
+        $this->_status = $status;
+    }
+
+    }
\ No newline at end of file
diff --git a/entities/Mother.php b/entities/Mother.php
new file mode 100644
index 0000000..c05ced3
--- /dev/null
+++ b/entities/Mother.php
@@ -0,0 +1,31 @@
+<?php
+
+    namespace Entities;
+    
+    /**
+     * Classe d'un Mere de tout objet 
+     * @author Yass & Laura
+     */
+
+    class Mother{
+
+        protected string    $_prefix = '';
+
+
+        public function hydrate(array $arrData){
+            foreach($arrData as $key=>$value){
+                $strMethodName = "set".ucfirst(str_replace($this->_prefix,'',$key));
+                if (method_exists($this,$strMethodName)){
+                    $this->$strMethodName($value);
+                }
+            }
+        }
+
+        protected function nettoyer(string $strText){
+			$strText	= trim($strText);
+			$strText	= str_replace("<script>", "", $strText);
+			$strText	= str_replace("</script>", "", $strText);
+			return $strText;
+		}
+
+    }
\ No newline at end of file
diff --git a/entities/Project.php b/entities/Project.php
new file mode 100644
index 0000000..ca5c941
--- /dev/null
+++ b/entities/Project.php
@@ -0,0 +1,240 @@
+<?php
+    namespace Entities;
+
+    use \DateTime;
+    use \IntlDateFormatter;
+
+/**
+ * Classe d'un objet Projet
+ * @author Yass
+ */
+
+class Project extends Mother{
+
+    private ?int    $_id 					= null;             
+    private string  $_title 				= "";
+    private string  $_description 			= "";
+    private ?string $_thumbnail 			= null;
+    private string  $_content 				= "";
+    private string  $_creation_date;
+    private string  $_status 				= "en_attente";
+    private int     $_user;
+    private int     $_category = 0;
+    private string  $_creatorname;
+    private ?string $_user_image 			= null;
+	private ?string $_project_deleted_at = null;
+
+
+    /**
+     * le constructeur de la table project
+     */
+    public function __construct(){
+        $this->_prefix = 'project_';
+    }
+
+    // Méthode Getter et Setter
+
+    /**
+     * Récuperation de l'id du projet
+     * @return int l'id du projet
+     */
+    public function getId():?int{
+        return $this->_id;
+    }
+
+    /**
+     * Mise à jour de l'id du projet 
+     * @param int le nouvelle id
+     */
+    public function setId(int $id){
+        $this->_id = $id; 
+		return $this;
+    }
+
+    /**
+     * Récuperation du titre
+     * @return string tite du projet
+     */
+    public function getTitle(){
+        return $this->nettoyer($this->_title);
+    }
+
+    /**
+     * Mise à jour du titre
+     * @param string le nouveau titre
+     */
+    public function setTitle($title){
+        $this->_title = $title;
+    }
+
+    /**
+     * Récuperation de la description
+     * @return string description du projet
+     */
+    public function getDescription(){
+        return $this->nettoyer($this->_description)    ;
+    }
+
+    /**
+     * Mise à jour de la description
+     * @param string la nouvelle description
+     */
+    public function setDescription($description){
+        $this->_description = $description;
+    }
+
+
+    /**
+     * Récuperation de l'image
+     * @return string chemin vers l'image
+     */
+    public function getThumbnail(){
+        return $this->_thumbnail;
+    }
+
+    /**
+     * Mise à jour de l'image
+     * @param string chemin vers nouvelle image
+     */
+    public function setThumbnail($thumbnail){
+        $this->_thumbnail = $thumbnail;
+    }
+
+    /**
+     * Récuperation du contenu
+     * @return string contenu du projet
+     */
+    public function getContent(){
+        return $this->nettoyer($this->_content);
+    }
+
+    /**
+     * Mise à jour du contenu
+     * @param string le nouveau contenu
+     */
+    public function setContent($content){
+        $this->_content = $content;
+    }
+
+    /**
+     * Récupération de la date de création
+     * @param  string lang de formatage de la date (par défaut = "fr_FR")
+     * @return string date de création formatter
+     */
+    public function getCreation_date(string $strFormat = "fr_FR"){
+        $objDate = new DateTime($this->_creation_date);
+
+        $objDateFormatter = new IntlDateFormatter(
+            $strFormat,
+            IntlDateFormatter::LONG,
+            IntlDateFormatter::NONE,
+            
+        );
+        $strFormat = $objDateFormatter->format($objDate);
+        return $strFormat;
+    }
+
+    /**
+     * Mise à jour de la date de création
+     * @param string la nouvelle date de création
+     */
+    public function setCreation_date($creation_date){
+        $this->_creation_date = $creation_date;
+    }
+
+    /**
+     * Récupération du statut
+     * @return string statut
+     */
+    public function getStatus(){
+        return $this->_status;
+    }
+
+    /**
+     * Mise à jour du statut
+     * @param string le nouveau statut
+     */
+    public function setStatus($status){
+        $this->_status = $status;
+    }
+
+    /**
+     * Récupération de l'utilisateur
+     * @return int id de l'utilisateur
+     */
+    public function getUser_id(){
+        return $this->_user;
+    }
+
+    /**
+     * Mise à jour de l'utilisateur
+     * @param int id de l'utilisateur
+     */
+    public function setUser_id($user){
+        $this->_user = $user;
+    }
+
+    /**
+     * Récupération de la catégorie
+     * @return int id de la catégorie
+     */
+    public function getCategory():?int{
+        return $this->_category;
+    }
+
+    /**
+     * Mise à jour de la catégorie
+     * @param int id de la catégorie
+     */
+    public function setCategory($category){
+        $this->_category = $category;
+    }
+
+    /**
+     * Récupération du nom du créateur
+     * @return string nom du créateur
+     */
+    public function getCreatorName(){
+        return $this->_creatorname;
+    }
+
+    /**
+     * Mise à jour du nom du créateur
+     * @param string le nom du créateur
+     */
+    public function setCreatorName($creatorname){
+        $this->_creatorname = $creatorname;
+    }
+	
+    /**
+     * Récupération du chemin photo profil
+     * @return string nom du chemin photo profil
+     */
+    public function getUser_image(){
+        return $this->_user_image;
+    }
+
+    /**
+     * Mise à jour du chemin photo profil
+     * @param string chemin photo profil
+     */
+    public function setUser_image($user_image){
+        $this->_user_image = $user_image;
+    }
+	
+	/**
+     * Récupération de la date du projet supprimer
+     * @return string date du projet
+     */
+    public function getDeleted_at(){
+        return $this->_project_deleted_at;
+    }
+
+    /**
+     * Mise à jour de la date de suppression de projet
+     * @param string date du projet 
+     */
+    public function setDeleted_at($project_deleted_at){
+        $this->_project_deleted_at = $project_deleted_at;
+    }
+}
\ No newline at end of file
diff --git a/entities/User.php b/entities/User.php
new file mode 100644
index 0000000..f156205
--- /dev/null
+++ b/entities/User.php
@@ -0,0 +1,263 @@
+<?php
+	    namespace Entities;
+
+	
+	/**
+	 * Classe d'un objet User
+	 * @author Besnik & Laura
+	 */
+	class User extends Mother{
+		private int $_id;
+		private string $_name = '';
+		private string $_firstname = '';
+		private string $_pseudo = '';
+		private ?string $_image = null;
+		private string $_mail = '';
+		private string $_pwd;
+		private string $_phone = '';
+		private string $_work = '';
+		private ?string $_birth = null;
+		private string $_location = '';
+		private string $_description = '';
+		private string $_account_creation = '';
+		private int $_status;
+		
+		/**
+		 * le constructeur de la table user
+		 */
+		public function __construct(){
+			$this->_prefix = 'user_';
+		}
+		
+		/**
+		 * Récuperation de l'id d'un utilisateur
+		 * @return int l'id de l'utilisateur
+		 */
+		public function getId():int{
+			return $this->_id;
+		}
+
+		/**
+		 * Mise à jour de l'id d'un utilisateur
+		 * @param int le nouvelle id de l'utilisateur
+		 */
+		public function setId(int $id){
+			$this->_id = $id;
+		}
+		
+		/**
+		 * Récuperation du nom d'un utilisateur
+		 * @return string le nom de l'utilisateur
+		 */
+		public function getName():string{
+			return $this->nettoyer($this->_name);
+		}
+
+		/**
+		 * Mise à jour du nom d'un utilisateur
+		 * @return string le nouveau nom de l'utilisateur
+		 */
+		public function setName(string $name){
+			$this->_name = $name;
+		}
+		
+		/**
+		 * Récuperation du prénom d'un utilisateur
+		 * @return string le prénom de l'utilisateur
+		 */
+		public function getFirstname():string{
+			return $this->nettoyer($this->_firstname);
+		}
+
+		/**
+		 * Mise à jour du prénom d'un utilisateur
+		 * @return string le nouveau prénom de l'utilisateur
+		 */
+		public function setFirstname(string $firstname){
+			$this->_firstname = $firstname;
+		}
+		
+		/**
+		 * Récuperation du pseudo unique d'un utilisateur
+		 * @return string le pseudo de l'utilisateur
+		 */
+		public function getPseudo():string{
+			return $this->nettoyer($this->_pseudo);
+		}
+
+		/**
+		 * Mise à jour du pseudo unique d'un utilisateur
+		 * @return string le nouveau pseudo de l'utilisateur
+		 */
+		public function setPseudo(string $pseudo){
+			$this->_pseudo = str_replace(" ","_",$pseudo);
+		}
+		
+		/**
+		 * Récuperation du nom de l'image d'un utilisateur
+		 * @return string du nom de l'image de l'utilisateur
+		 */
+		public function getImage():?string{
+			return $this->_image;
+		}
+
+		/**
+		 * Mise à jour du nom de l'image d'un utilisateur
+		 * @return string le nouveau nom de l'image de l'utilisateur
+		 */
+		public function setImage(?string $image){
+			$this->_image = $image;
+		}
+		
+		/**
+		 * Récuperation de l'email d'un utilisateur
+		 * @return string l'email de l'utilisateur
+		 */
+		public function getMail():string{
+			return $this->_mail;
+		}
+
+		/**
+		 * Mise à jour de l'email d'un utilisateur
+		 * @return string le nouvel email de l'utilisateur
+		 */
+		public function setMail(string $mail){
+			$this->_mail = strtolower($mail);
+		}
+		
+		/**
+		 * Récuperation du mot de passe d'un utilisateur
+		 * @return string le mot de passe de l'utilisateur
+		 */
+		public function getPwd():string{
+			return $this->_pwd;
+		}
+
+		/**
+		 * Récuperation du mot de passe haché d'un utilisateur
+		 * @return string le mot de passe haché de l'utilisateur
+		 */
+		public function getPwdHash():string{
+			return password_hash($this->_pwd, PASSWORD_DEFAULT);
+		}
+
+		/**
+		 * Mise à jour du mot de passe d'un utilisateur
+		 * @return string le nouveau mot de passe de l'utilisateur
+		 */
+		public function setPwd(string $pwd){
+			$this->_pwd = $pwd;
+		}
+		
+		/**
+		 * Récuperation du numéro de téléphone d'un utilisateur
+		 * @return string le numéro de téléphone de l'utilisateur
+		 */
+		public function getPhone():string{
+			return $this->nettoyer($this->_phone);
+		}
+
+		/**
+		 * Mise à jour du numéro de téléphone d'un utilisateur
+		 * @return string le nouveau numéro de téléphone de l'utilisateur
+		 */
+		public function setPhone(string $phone){
+			$this->_phone = $phone;
+		}
+		
+		/**
+		 * Récuperation de la profession d'un utilisateur
+		 * @return string la profession de l'utilisateur
+		 */
+		public function getWork():string{
+			return $this->nettoyer($this->_work);
+		}
+
+		/**
+		 * Mise à jour de la profession d'un utilisateur
+		 * @return string la nouvelle profession de l'utilisateur
+		 */
+		public function setWork(string $work){
+			$this->_work = $work;
+		}
+		
+		/**
+		 * Récuperation de la date de naissance d'un utilisateur
+		 * @return string la date de naissance de l'utilisateur
+		 */
+		public function getBirth():?string{
+			return $this->_birth;
+		}
+
+		/**
+		 * Mise à jour de la date de naissance d'un utilisateur
+		 * @return string la nouvelle date de naissance de l'utilisateur
+		 */
+		public function setBirth(?string $birth){
+			$this->_birth = $birth;
+		}
+		
+		/**
+		 * Récuperation de la localisation d'un utilisateur
+		 * @return string la localisation de l'utilisateur
+		 */
+		public function getLocation():string{
+			return $this->nettoyer($this->_location);
+		}
+
+		/**
+		 * Mise à jour de la localisation d'un utilisateur
+		 * @return string la nouvelle localisation de l'utilisateur
+		 */
+		public function setLocation(string $location){
+			$this->_location = $location;
+		}
+		
+		/**
+		 * Récuperation de la description d'un utilisateur
+		 * @return string la description de l'utilisateur
+		 */
+		public function getDescription():string{
+			return $this->nettoyer($this->_description);
+		}
+
+		/**
+		 * Mise à jour de la description d'un utilisateur
+		 * @return string la nouvelle description de l'utilisateur
+		 */
+		public function setDescription(string $description){
+			$this->_description = $description;
+		}
+		
+		/**
+		 * Récuperation de la date de création d'un utilisateur
+		 * @return string la date de création de l'utilisateur
+		 */
+		public function getAccountCreation():string{
+			return $this->_account_creation;
+		}
+
+		/**
+		 * Mise à jour de la date de création d'un utilisateur
+		 * @return string la nouvelle date de création de l'utilisateur
+		 */
+		public function setAccountCreation(string $account_creation){
+			$this->_account_creation = $account_creation;
+		}
+		
+		/**
+		 * Récuperation de l'id du statut d'un utilisateur
+		 * @return int l'id du statut de l'utilisateur
+		 */
+		public function getStatus():int{
+			return $this->_status;
+		}
+
+		/**
+		 * Mise à jour de l'id du statut d'un utilisateur
+		 * @return int le nouvel id du statut de l'utilisateur
+		 */
+		public function setStatus(int $status){
+			$this->_status = $status;
+		}
+	}
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..72358a6
--- /dev/null
+++ b/index.php
@@ -0,0 +1,32 @@
+<?php
+    session_start();
+    require(__DIR__ . "/vendor/autoload.php");
+
+    $dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
+    $dotenv->safeLoad();
+
+    $strCtrl   = preg_replace('/[^a-zA-Z]/', '', $_GET['ctrl'] ?? 'project');
+    $strMethod = preg_replace('/[^a-zA-Z_]/', '', $_GET['action'] ?? 'home');
+
+    $strClassName = "Controllers\\" . ucfirst($strCtrl) . "Ctrl";
+
+    $boolError = false;
+
+    if (class_exists($strClassName)) {
+        $objController = new $strClassName();
+
+        if (method_exists($objController, $strMethod)) {
+            $objController->$strMethod();
+        } else {
+            $boolError = true;
+        }
+    } else {
+        $boolError = true;
+    }
+
+    if ($boolError) {
+        http_response_code(404); // ← important pour le SEO et les navigateurs
+        $error = new \Controllers\ErrorCtrl();
+        $error->error_404(); // ← pas de "return", juste l'appel
+        exit; // ← stoppe l'exécution après l'affichage
+    }
\ No newline at end of file
diff --git a/models/.gitkeep b/models/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/models/AuthorisationModel.php b/models/AuthorisationModel.php
new file mode 100644
index 0000000..f98030b
--- /dev/null
+++ b/models/AuthorisationModel.php
@@ -0,0 +1,30 @@
+<?php
+	namespace Models;
+	use \PDO;
+
+
+
+	/**
+	* Traitement des requêtes pour le status de l'utilisateur
+	* @author : Laura
+	*/
+	
+	class AuthorisationModel extends MotherModel{
+
+		public function __construct(){
+			parent::__construct();
+		}
+
+        /**
+         * fonction de récupération des infos d'authorisation
+         * @return array
+         */
+		public function findAllAuthorisation():array{
+        
+			$strRq	= "SELECT *
+						FROM authorisation";
+	
+			return $this->_db->query($strRq)->fetchAll();
+		}
+
+    }
\ No newline at end of file
diff --git a/models/CategoryModel.php b/models/CategoryModel.php
new file mode 100644
index 0000000..3ce1dc4
--- /dev/null
+++ b/models/CategoryModel.php
@@ -0,0 +1,93 @@
+<?php
+	namespace Models;
+	use \PDO;
+
+	
+	/**
+	* Traitement des requêtes pour les catégories
+	* @author : Laura
+	*/
+
+	class CategoryModel extends MotherModel{
+
+		/**
+		* Fonction de récupération des catégories
+		* @param int $intLimit
+        * @return array
+        */
+
+        public function findAllCategory(int $intLimit=0):array{
+			
+			$strRq	= "SELECT category.* 
+						FROM category";
+			
+			if ($intLimit > 0){
+				$strRq  .= " LIMIT :limit";
+			}
+
+			$rqPrep = $this->_db->prepare($strRq);
+
+			if ($intLimit > 0){
+				$rqPrep->bindValue(":limit", $intLimit, PDO::PARAM_INT);
+			}
+
+			$rqPrep->execute();
+
+			return  $rqPrep->fetchAll();
+		}
+
+		/**
+		* fonction d'insertion d'une nouvelle catégorie dans la bdd
+        * @param object $objCategory l'objet catégorie
+		* @return bool Est-ce que la requête s'est bien passée
+        */
+		public function insertCategory(object $objCategory):bool{
+
+		$strRq = "INSERT INTO category (category_name)
+					VALUES (:name)";
+
+		$rqPrep	= $this->_db->prepare($strRq);
+
+		$rqPrep->bindValue(":name", $objCategory->getName(), PDO::PARAM_STR);
+
+		return $rqPrep->execute();
+
+		}
+
+		/**
+		* fonction de suppression d'une catégorie dans la bdd
+        * @param object $objCategory l'objet catégorie
+		* @return bool Est-ce que la requête s'est bien passée
+        */
+		public function deleteCategory(object $objCategory):bool{
+		
+			$strRq = "DELETE FROM category 
+					WHERE category_id= :id";
+
+			$rqPrep	= $this->_db->prepare($strRq);
+			
+			$rqPrep->bindValue(":id", $objCategory->getId(), PDO::PARAM_INT);
+			
+			return $rqPrep->execute();
+		}
+
+		/**
+		* fonction de modification d'une catégorie dans la bdd
+        * @param object $objCategory l'objet catégorie
+		* @return bool Est-ce que la requête s'est bien passée
+        */
+		public function editCategory(object $objCategory):bool{
+
+			$strRq = "UPDATE category 
+						SET category_name = :name
+						WHERE category_id = :id";
+
+			$rqPrep	= $this->_db->prepare($strRq);
+			
+			$rqPrep->bindValue(":id", $objCategory->getId(), PDO::PARAM_INT);
+			$rqPrep->bindValue(":name", $objCategory->getName(), PDO::PARAM_STR);
+
+			return $rqPrep->execute();
+		}
+    }
+    
\ No newline at end of file
diff --git a/models/ImageModel.php b/models/ImageModel.php
new file mode 100644
index 0000000..c3cc95d
--- /dev/null
+++ b/models/ImageModel.php
@@ -0,0 +1,39 @@
+<?php
+	namespace Models;
+
+	use \PDO;
+
+	
+/**
+ * Traitement de la requête pour les images
+ * @author Laura
+ */
+
+	class ImageModel extends MotherModel{
+
+		/**
+		* Fonction de récupération des images
+		* @param int $intLimit
+        * @return array
+        */
+
+        public function findAllImage(int $intLimit=0):array{
+			
+			$strRq	= "SELECT image.* 
+						FROM image";
+			
+			if ($intLimit > 0){
+				$strRq  .= " LIMIT :limit";
+			}
+
+			$rqPrep = $this->_db->prepare($strRq);
+
+			if ($intLimit > 0){
+				$rqPrep->bindValue(":limit", $intLimit, PDO::PARAM_INT);
+			}
+			
+			$rqPrep->execute();
+
+			return  $rqPrep->fetchAll();
+		}
+    }
\ No newline at end of file
diff --git a/models/MotherModel.php b/models/MotherModel.php
new file mode 100644
index 0000000..079d791
--- /dev/null
+++ b/models/MotherModel.php
@@ -0,0 +1,24 @@
+<?php
+	namespace Models;
+
+	use \PDO;
+
+	class MotherModel {
+		
+		protected $_db;
+
+		public function __construct(){
+			try{
+				$this->_db	= new PDO(
+								"mysql:host=".$_ENV['DB_HOSTNAME'].";dbname=".$_ENV['DB_DATABASE'], 
+								$_ENV['DB_USERNAME'], 
+								$_ENV['DB_PASSWORD'],
+								array(PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC) 
+				);
+				$this->_db->exec("SET CHARACTER SET utf8");
+				$this->_db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);			
+			} catch(PDOException$e) {
+				echo "Échec : " . $e->getMessage();
+			}
+		}
+	}
\ No newline at end of file
diff --git a/models/ProjectModel.php b/models/ProjectModel.php
new file mode 100644
index 0000000..40e1087
--- /dev/null
+++ b/models/ProjectModel.php
@@ -0,0 +1,320 @@
+<?php
+	namespace Models;
+
+	use \PDO;
+
+
+
+	/**
+	* Traitement des requêtes pour les projets
+	* @author Laura & Guillaume
+	*/
+	
+	class ProjectModel extends MotherModel{
+
+
+		/**
+		* Fonction de recherche des projets 
+		* @param type string, int et bool
+		* @return array
+		*/	
+		public function findAll(int $intLimit=0, string $strKeywords='', int $intAuthor=0, 
+                        int $intPeriod=0, string $strDate='', string $strStartDate='', 
+                        string $strEndDate='', int $intCategory=0, bool $boolOlderThan6Months=false): array {
+
+			
+			$strRq = "SELECT project.*, 
+						user_pseudo AS 'project_creatorname',
+						user_image
+						FROM project
+						INNER JOIN users ON user_id = project_user_id
+						WHERE 1=1";
+
+			if ($strKeywords != '') {
+				$strRq .= " AND (project_title LIKE :keywords OR project_content LIKE :keywords)";
+			}
+
+			if ($intAuthor > 0){
+				$strRq .= " AND project_user_id = :author";
+			}
+
+			if ($intCategory > 0){
+				$strRq .= " AND project_category = :category";
+			}
+
+			if ($boolOlderThan6Months === true) {
+				$strRq .= " AND project_creation_date <= DATE_SUB(NOW(), INTERVAL 6 MONTH)";
+			}
+
+			if ($intPeriod == 0){
+				if ($strDate != ''){
+					$strRq .= " AND project_creation_date = :date_exacte";
+				}
+			} else {
+				if ($strStartDate != '' && $strEndDate != ''){
+					$strRq .= " AND project_creation_date BETWEEN :date_debut AND :date_fin";
+				} else {
+					if ($strStartDate != ''){
+						$strRq .= " AND project_creation_date >= :date_debut";
+					} else if ($strEndDate != ''){
+						$strRq .= " AND project_creation_date <= :date_fin";
+					}
+				}
+			}
+
+			$strRq .= " ORDER BY project_creation_date DESC";
+
+			if ($intLimit > 0){
+				$strRq .= " LIMIT :limit"; 
+			}
+
+			$rqPrep = $this->_db->prepare($strRq);
+
+			if ($strKeywords != '') {
+				$rqPrep->bindValue(':keywords', '%' . $strKeywords . '%', PDO::PARAM_STR);
+			}
+			if ($intAuthor > 0){
+				$rqPrep->bindValue(':author', $intAuthor, PDO::PARAM_INT);
+			}
+			if ($intCategory > 0){
+				$rqPrep->bindValue(':category', $intCategory, PDO::PARAM_INT);
+			}
+			if ($intPeriod == 0){
+				if ($strDate != ''){
+					$rqPrep->bindValue(':date_exacte', $strDate, PDO::PARAM_STR);
+				}
+			} else {
+				if ($strStartDate != '' && $strEndDate != ''){
+					$rqPrep->bindValue(':date_debut', $strStartDate, PDO::PARAM_STR);
+					$rqPrep->bindValue(':date_fin', $strEndDate, PDO::PARAM_STR);
+				} else {
+					if ($strStartDate != ''){
+						$rqPrep->bindValue(':date_debut', $strStartDate, PDO::PARAM_STR);
+					} else if ($strEndDate != ''){
+						$rqPrep->bindValue(':date_fin', $strEndDate, PDO::PARAM_STR);
+					}
+				}
+			}
+			if ($intLimit > 0){
+				$rqPrep->bindValue(':limit', $intLimit, PDO::PARAM_INT);
+			}
+
+			$rqPrep->execute();
+			return $rqPrep->fetchAll();
+		}
+
+		
+		/**
+		* Fonction d'insertion d'un nouveau projet dans la bdd
+		* @param object $objProject l'objet projet
+		* @return bool Est-ce que la requête s'est bien passée
+		*/	
+		public function insert(object $objProject):bool{
+
+			$strRq 	= "INSERT INTO project (project_title, project_description, project_thumbnail, project_content, project_status, project_creation_date, project_user_id, project_category)
+						VALUES (:title, :description, :thumbnail, :content, :status, DATE(NOW()), :project_user_id, :project_category)";
+			
+			$rqPrep	= $this->_db->prepare($strRq);
+
+			$rqPrep->bindValue(":title", $objProject->getTitle(), PDO::PARAM_STR);
+			$rqPrep->bindValue(":description", $objProject->getDescription(), PDO::PARAM_STR);
+			$rqPrep->bindValue(":thumbnail", $objProject->getThumbnail(), PDO::PARAM_STR);
+			$rqPrep->bindValue(":content", $objProject->getContent(), PDO::PARAM_STR);
+			$rqPrep->bindValue(":status", $objProject->getStatus(), PDO::PARAM_STR);
+			$rqPrep->bindValue(":project_user_id", $objProject->getUser_id(), PDO::PARAM_STR);
+			$rqPrep->bindValue(":project_category", $objProject->getCategory(), PDO::PARAM_STR);
+
+			$boolOk = $rqPrep->execute();
+
+			if ($boolOk) {
+				$objProject->setId($this->_db->lastInsertId());
+			}
+
+			return $boolOk;
+		}
+
+		/**
+		* Fonction de recherche d'un seul projet
+		* @param int $intId
+		* @return array|bool
+		*/
+		public function findOne(int $intId) :array|bool{
+			$strRq = "SELECT project.*, 
+						users.user_pseudo AS 'project_creatorname',
+						users.user_image, 
+						users.user_mail,
+						category.category_name
+					  FROM project
+					  INNER JOIN users ON users.user_id = project.project_user_id
+					  LEFT JOIN category ON category.category_id = project.project_category
+					  WHERE project.project_id = :id
+					  AND project.project_deleted_at IS NULL";
+
+			$rqPrep = $this->_db->prepare($strRq);
+			$rqPrep->bindValue(":id", $intId, PDO::PARAM_INT);
+			$rqPrep->execute();
+
+			return $rqPrep->fetch();
+		}
+		
+		/**
+		* Fonction de changement de status (accepter) d'un projet en BDD
+		* @param int $id l'id du projet
+		* @return bool Est-ce que la requête s'est bien passée
+		*/
+		public function accept(int $id){
+
+			$strRq = "UPDATE project 
+						SET project_status		= 'publié',
+							project_edit_date 	= NOW()
+						WHERE project_id =".$id;
+
+			return $this->_db->query($strRq);
+		}
+
+		/**
+		* Fonction de changement de status (refusé) d'un projet en BDD
+		* @param int $id l'id du projet
+		* @return bool Est-ce que la requête s'est bien passée
+		*/
+		public function refuse(int $id){
+
+			$strRq = "UPDATE project 
+						SET project_status		= 'refusé',
+							project_edit_date 	= NOW()
+						WHERE project_id =".$id;
+
+			return $this->_db->query($strRq);
+		}
+		
+		/**
+		* Fonction de suppression d'un projet en BDD
+		* @param int $id l'id du projet
+		* @return bool Est-ce que la requête s'est bien passée
+		*/
+		public function delete_soft_project(int $intId): bool {
+			$strRq = "UPDATE project 
+					  SET 	project_deleted_at 	= NOW(),
+							project_edit_date 	= NOW(),
+							project_status = 'supprimé'
+					  WHERE project_id = :id";
+					  
+			$rqPrep = $this->_db->prepare($strRq);
+			$rqPrep->bindValue(":id", $intId, PDO::PARAM_INT);
+
+			return $rqPrep->execute();
+		}
+
+		/**
+		* Fonction de mise à jour d'un projet en BDD
+		* @param object $objProject L'objet utilisateur
+		* @return bool Est-ce que la requête s'est bien passée
+		*/
+		public function updateProject(object $objProject):bool{
+    
+			$strRq = "UPDATE project
+					SET project_title = :title,
+						project_description = :description, 
+						project_content = :content,
+						project_thumbnail = :thumbnail,
+						project_status = 'en_attente',
+						project_edit_date = NOW()
+					WHERE project_id = :id";
+			
+			$rqPrep = $this->_db->prepare($strRq);
+			
+			$rqPrep->bindValue(":title", $objProject->getTitle(), PDO::PARAM_STR);
+			$rqPrep->bindValue(":description", $objProject->getDescription(), PDO::PARAM_STR);
+			$rqPrep->bindValue(":content", $objProject->getContent(), PDO::PARAM_STR);
+			$rqPrep->bindValue(":thumbnail", $objProject->getThumbnail(), PDO::PARAM_STR);
+			$rqPrep->bindValue(":id", $objProject->getId(), PDO::PARAM_INT);
+			
+			return $rqPrep->execute();
+		}
+		
+		/**
+		* Fonction de récupération d'image d'un projet en BDD
+		* @param int $objProject L'Id du projet choisit
+		* @return array Un tableau avec les informations de la bdd
+		*/
+		public function getImagesByProjectId(int $projectId): array {
+			$strRq = "SELECT image_id, image_name, image_alt, image_status 
+					  FROM image 
+					  WHERE image_project = :id";
+			
+			$rqPrep = $this->_db->prepare($strRq);
+			$rqPrep->bindValue(":id", $projectId, PDO::PARAM_INT);
+			$rqPrep->execute();
+			
+			return $rqPrep->fetchAll(PDO::FETCH_ASSOC);
+		}
+		
+		/**
+		* Fonction de récupération d'image d'un projet en BDD
+		* @param int $id L'Id de l'image choisit
+		* @return array Un tableau avec les informations de la bdd
+		*/
+		public function deleteImage(int $id): bool {
+			$strRq = "DELETE FROM image WHERE image_id = :id";
+			$rqPrep = $this->_db->prepare($strRq);
+			$rqPrep->bindValue(':id', $id, PDO::PARAM_INT);
+			return $rqPrep->execute();
+		}
+		
+		/**
+		* Fonction de modifications de status de l'image d'un projet en BDD
+		* @param int $id L'Id de l'image choisit, string $status le status choisit
+		* @return array Un tableau avec les informations de la bdd
+		*/
+		public function updateImageStatus(int $id, string $status): bool {
+			$strRq = "UPDATE image 
+						SET image_status = :status 
+						WHERE image_id = :id";
+			$rqPrep = $this->_db->prepare($strRq);
+			$rqPrep->bindValue(':status', $status, PDO::PARAM_STR);
+			$rqPrep->bindValue(':id', $id, PDO::PARAM_INT);
+			return $rqPrep->execute();
+		}
+			
+		/**
+		* Fonction de récupération d'image d'un projet en BDD
+		* @param int $id L'Id de l'image choisit
+		* @return array Un tableau avec les informations de la bdd
+		*/
+		public function findImage(int $id): array|bool {
+			$strRq = "SELECT * FROM image 
+							WHERE image_id = :id";
+			$rqPrep = $this->_db->prepare($strRq);
+			$rqPrep->bindValue(':id', $id, PDO::PARAM_INT);
+			$rqPrep->execute();
+			return $rqPrep->fetch(PDO::FETCH_ASSOC);
+		}
+	
+	
+		/**
+		 * Ajoute une image liée à un projet dans la table 'image'
+		 * @param string $fileName Nom du fichier image
+		 * @param int $projectId ID du projet parent
+		 * @param string $alt Texte alternatif
+		 * @return bool
+		 */
+		public function addImageInProject(string $fileName, int $projectId, string $alt = "Image projet"): bool {
+			$strRq = "INSERT INTO image (
+						image_name, 
+						image_alt, 
+						image_status, 
+						image_project
+					  ) 
+					  VALUES (:name, :alt, :status, :project)";
+			
+			$rqPrep = $this->_db->prepare($strRq);
+			
+			$rqPrep->bindValue(":name", $fileName, PDO::PARAM_STR);
+			$rqPrep->bindValue(":alt", $alt, PDO::PARAM_STR);
+			$rqPrep->bindValue(":status", "en_attente", PDO::PARAM_STR); 
+			$rqPrep->bindValue(":project", $projectId, PDO::PARAM_INT);
+			
+			return $rqPrep->execute();
+		}
+
+}
\ No newline at end of file
diff --git a/models/UserModel.php b/models/UserModel.php
new file mode 100644
index 0000000..f171308
--- /dev/null
+++ b/models/UserModel.php
@@ -0,0 +1,262 @@
+<?php
+	namespace Models;
+
+	use \PDO;
+
+
+
+	/**
+	* Traitement des requêtes pour les utilisateurs
+	* @author : Yasser, Guillaume & Besnik
+	*/
+
+	class UserModel extends MotherModel{
+
+		public function __construct(){
+			parent::__construct();
+		}
+
+        /**
+		 * Fonction de recherche des utilisateurs et leur niveau d'autorisation
+         * @return array
+         */
+		public function findAllUsers():array{
+			$strRq	= "SELECT user_id, user_firstname, user_name, user_image, user_status, authorisation_name, user_pseudo
+						FROM users INNER JOIN authorisation ON authorisation.authorisation_id = users.user_status
+						WHERE user_deleted_at IS NULL";
+			return $this->_db->query($strRq)->fetchAll();
+		}
+
+        /**
+		 * Fonction de vérification des utilisateurs
+         * @param string $strMail
+         * @param string $strPwd
+         * @return array|bool
+         */
+		public function verifUser(string $strMail, string $strPwd):array|bool{
+			
+			$strRq	= "SELECT user_id, user_name, user_firstname, user_password, user_image, user_status, authorisation_name, user_pseudo
+						FROM users INNER JOIN authorisation ON authorisation.authorisation_id = users.user_status
+						WHERE user_mail = :mail";
+
+			$rqPrep = $this->_db->prepare($strRq);
+			$rqPrep->bindValue(":mail", $strMail, PDO::PARAM_STR);
+			$rqPrep->execute();
+
+
+		
+			$arrUser 	= $rqPrep->fetch();
+			if ($arrUser === false) {
+				return false;
+			}
+
+			if (empty($arrUser['user_password'])) {
+				return false;
+			}
+
+			if (!password_verify($strPwd, $arrUser['user_password'])) {
+				return false;
+			}
+			unset($arrUser['user_password']);
+			return $arrUser;
+		}
+		
+		/**
+		* Fonction d'insertion d'un utilisateur en BDD
+		* @param object $objUser L'objet utilisateur
+		* @return bool Est-ce que la requête s'est bien passée
+		*/
+		public function insert(object $objUser):bool{
+			
+			$strRq = "INSERT INTO users (user_name, user_firstname, user_pseudo, user_mail, user_password, user_phone, user_work, user_location, user_description) 
+								VALUES (:name, :firstname, :pseudo,:mail, :pwd, :phone, :work, :location,:description)";
+			
+			$rqPrep	= $this->_db->prepare($strRq);
+			
+			$rqPrep->bindValue(":name", $objUser->getName(), PDO::PARAM_STR);
+			$rqPrep->bindValue(":firstname", $objUser->getFirstname(), PDO::PARAM_STR);
+			$rqPrep->bindValue(":pseudo", $objUser->getPseudo(), PDO::PARAM_STR);
+			$rqPrep->bindValue(":mail", $objUser->getMail(), PDO::PARAM_STR);
+			$rqPrep->bindValue(":pwd", $objUser->getPwdHash(), PDO::PARAM_STR);
+			$rqPrep->bindValue(':phone', $objUser->getPhone() ?? "", PDO::PARAM_STR);
+			$rqPrep->bindValue(':work', $objUser->getWork() ?? "", PDO::PARAM_STR);
+			$rqPrep->bindValue(':location', $objUser->getLocation() ?? "", PDO::PARAM_STR);
+			$rqPrep->bindValue(':description', $objUser->getDescription() ?? "", PDO::PARAM_STR);
+
+			return $rqPrep->execute();
+		}
+
+		/** 
+		* Méthode pour sauvegarder l'utilisateur lorsqu'il veut être souvenue
+		* @param int $userId l'id de l'utilisateur a se rappeler
+		* @param string $token Token hashé unique lié à l'utilisateur à se rappeler
+		* @return bool Est-ce que la requête s'est bien passée
+		*/
+		public function remember(int $userId, string $token):bool{
+			$strRq = "INSERT INTO tokens (token_user_id, token_hash, token_created_at, token_expire_at) VALUES (:id, :token, NOW(), :exp)";
+			$rqPrep	= $this->_db->prepare($strRq);
+			$rqPrep->bindValue(":id", $userId, PDO::PARAM_INT);
+			$rqPrep->bindValue(":token", $token, PDO::PARAM_STR);
+			$rqPrep->bindValue(":exp", 
+				date('Y-m-d H:i:s', time() + (15*24*60*60))
+				, PDO::PARAM_STR);
+			return $rqPrep->execute();
+		}
+		
+		/** 
+		* Méthode pour récupperer l'utilisateur par rapport au cookie enregistrer
+		* @param string $hash Token hashé unique lié à l'utilisateur 
+		* @return bool Est-ce que la requête s'est bien passée
+		*/
+		
+		public function getTokenUser(string $hash){
+			$strRq = $this->_db->prepare("SELECT token_user_id FROM tokens WHERE token_hash = :hash AND token_expire_at > NOW()");
+    		$strRq->execute(['hash' => $hash]);
+			return $strRq->fetch();
+		}
+		
+		/** 
+		* Méthode pour supprimer le token lors de la déconnexion
+		* @param string $hash Token hashé unique lié à l'utilisateur 
+		* @return bool Est-ce que la requête s'est bien passée
+		*/
+		public function deleteToken(string $hash){
+			$strRq = $this->_db->prepare("DELETE FROM tokens WHERE token_hash = :hash");
+    		return $strRq->execute(['hash' => $hash]);
+		}
+
+
+		/** 
+		* Méthode pour mettre a jour l'utilisateur
+		* @param object $objUser L'objet user a mettre à jour  
+		* @return bool Est-ce que la requête s'est bien passée
+		*/
+		public function update(object $objUser):bool{
+			$strRq = "UPDATE users SET 
+                			user_name = :name,
+                			user_firstname = :firstname,
+                			user_pseudo = :pseudo,
+                			user_mail = :mail,
+                			user_phone = :phone,
+                			user_work = :work,
+                			user_location = :location,
+                			user_description = :description,
+							user_image = :image
+              			WHERE user_id = :id";
+
+
+			$rqPrep	= $this->_db->prepare($strRq);
+			
+			$rqPrep->bindValue(":id", $objUser->getId(), PDO::PARAM_INT);
+			$rqPrep->bindValue(":name", $objUser->getName(), PDO::PARAM_STR);
+			$rqPrep->bindValue(":firstname", $objUser->getFirstname(), PDO::PARAM_STR);
+			$rqPrep->bindValue(":pseudo", $objUser->getPseudo(), PDO::PARAM_STR);
+			$rqPrep->bindValue(":mail", $objUser->getMail(), PDO::PARAM_STR);
+			$rqPrep->bindValue(':phone', $objUser->getPhone() ?? "", PDO::PARAM_STR);
+			$rqPrep->bindValue(':work', $objUser->getWork() ?? "", PDO::PARAM_STR);
+			$rqPrep->bindValue(':location', $objUser->getLocation() ?? "", PDO::PARAM_STR);
+			$rqPrep->bindValue(':description', $objUser->getDescription() ?? "", PDO::PARAM_STR);
+			$rqPrep->bindValue(':image', $objUser->getImage() ?? "", PDO::PARAM_STR);
+
+			return $rqPrep->execute();
+
+		}
+
+		/**
+		* Fonction de vérification de mail
+		* @param string $mail
+		* @return bool Est-ce que la requête s'est bien passée
+		*/
+		public function mailExists(string $mail): bool{
+			
+			$rq = $this->_db->prepare("SELECT 1 FROM users WHERE user_mail = :mail LIMIT 1");
+			$rq->bindValue(":mail", $mail);
+			$rq->execute();
+
+			return (bool)$rq->fetchColumn();
+		}
+
+		/**
+		* Fonction de changement de status d'un utilisateur
+		* @param object $objUser L'objet utilisateur
+		* @return bool Est-ce que la requête s'est bien passée
+		*/
+
+		public function editStatus(object $objUser):bool{
+
+			$strRq = "UPDATE users
+						SET user_status = :status
+						WHERE user_id = :id";
+
+			$rqPrep	= $this->_db->prepare($strRq);
+			$rqPrep->bindValue(":id", $objUser->getId(), PDO::PARAM_INT);
+			$rqPrep->bindValue(":status", $objUser->getStatus(), PDO::PARAM_INT);
+			return $rqPrep->execute();
+		}
+
+		/**
+		* Fonction permettant de supprimer un utilisateur avec une date de suppression
+		* @param int $intId L'identifiant de l'utilisateur
+		* @return bool Est-ce que la requête s'est bien passée
+		*/
+		public function delete_soft(int $intId):bool{
+
+			$strRq 	= "UPDATE users 
+						SET user_deleted_at = NOW()
+						WHERE user_id = :id";
+						
+			$rqPrep	= $this->_db->prepare($strRq);
+			$rqPrep->bindValue(":id", $intId, PDO::PARAM_INT);
+			return $rqPrep->execute();
+		}	
+		
+		/**
+		 * Récupère les informations d'un utilisateur par son ID
+		 * @param int $intId L'identifiant de l'utilisateur
+		 * @return array Tableau associatif (ou false si pas trouvé)
+		 */
+		public function findUserById(int $intId): array|bool {
+			
+			$strRq = "SELECT user_id,user_status ,user_image ,user_name, user_firstname, user_pseudo, user_mail, user_phone, user_work, user_location, user_description, authorisation_name
+					FROM users INNER JOIN authorisation ON authorisation.authorisation_id = users.user_status
+					WHERE user_id = :id";
+			
+			$prep = $this->_db->prepare($strRq);
+			$prep->bindValue(':id', $intId, PDO::PARAM_INT);
+			$prep->execute();
+			
+			return $prep->fetch();
+		}
+
+		/**
+		 * Récupère les informations d'un utilisateur par son ID
+		 * @param string $strPseudo Pseudo de l'utilisateur
+		 * @return array Tableau associatif (ou false si pas trouvé)
+		 */
+		public function findUserByPseudo(string $strPseudo): array|bool {
+			
+			$strRq = "SELECT user_id,user_image, user_status ,user_name, user_firstname, user_pseudo, user_mail,  user_phone, user_work, user_location, user_description, authorisation_name
+					FROM users INNER JOIN authorisation ON authorisation.authorisation_id = users.user_status
+					WHERE user_pseudo = :pseudo";
+			
+			$prep = $this->_db->prepare($strRq);
+			$prep->bindValue(':pseudo', $strPseudo, PDO::PARAM_STR);
+			$prep->execute();
+			
+			return $prep->fetch();
+		}
+
+		/**
+		 * Verifie sur le pseudo entré n'est pas déjà utilisé
+		 * @param string $pseudo Pseudo a verifié
+		 * @return bool Le pseudo existe ou pas
+		 */
+		public function pseudoExists(string $pseudo): bool{
+			
+			$rq = $this->_db->prepare("SELECT 1 FROM users WHERE user_pseudo = :pseudo LIMIT 1");
+			$rq->bindValue(":pseudo", $pseudo, PDO::PARAM_STR);
+			$rq->execute();
+
+			return (bool)$rq->fetchColumn();
+		}
+	}
diff --git a/uploads/profiles/.gitkeep b/uploads/profiles/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/uploads/projects/.gitkeep b/uploads/projects/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/views/.gitkeep b/views/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/views/_partial/apigeo.tpl b/views/_partial/apigeo.tpl
new file mode 100644
index 0000000..fb32c47
--- /dev/null
+++ b/views/_partial/apigeo.tpl
@@ -0,0 +1,112 @@
+<!-- Script d'autocomplétion ville/département — API Géo (gouvernement français) -->
+<script>
+(function () {
+	const input       = document.getElementById('user_location');
+	const suggestions = document.getElementById('location-suggestions');
+	let debounceTimer = null;
+
+	// Ferme la liste si on clique ailleurs
+	document.addEventListener('click', function (e) {
+		if (!input.contains(e.target) && !suggestions.contains(e.target)) {
+			hideSuggestions();
+		}
+	});
+
+	input.addEventListener('input', function () {
+		const query = this.value.trim();
+
+		clearTimeout(debounceTimer);
+
+		if (query.length < 2) {
+			hideSuggestions();
+			return;
+		}
+
+		// Délai de 300 ms pour éviter trop d'appels API
+		debounceTimer = setTimeout(function () {
+			fetchCities(query);
+		}, 300);
+	});
+
+	// Navigation clavier dans la liste
+	input.addEventListener('keydown', function (e) {
+		const items = suggestions.querySelectorAll('.list-group-item');
+		const active = suggestions.querySelector('.list-group-item.active');
+		let index = Array.from(items).indexOf(active);
+
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			if (index < items.length - 1) setActive(items, index + 1);
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			if (index > 0) setActive(items, index - 1);
+		} else if (e.key === 'Enter' && active) {
+			e.preventDefault();
+			selectItem(active.dataset.value);
+		} else if (e.key === 'Escape') {
+			hideSuggestions();
+		}
+	});
+
+	function fetchCities(query) {
+		// On cherche par nom de commune, on récupère aussi le département
+		const url = 'https://geo.api.gouv.fr/communes?nom=' + encodeURIComponent(query)
+			+ '&fields=nom,departement&boost=population&limit=8';
+
+		fetch(url)
+			.then(function (res) { return res.json(); })
+			.then(function (data) { renderSuggestions(data); })
+			.catch(function () { hideSuggestions(); });
+	}
+
+	function renderSuggestions(cities) {
+		suggestions.innerHTML = '';
+
+		if (!cities || cities.length === 0) {
+			hideSuggestions();
+			return;
+		}
+
+		cities.forEach(function (city) {
+			const dept  = city.departement
+				? city.departement.nom + ' (' + city.departement.code + ')'
+				: '';
+			const label = city.nom + (dept ? ' — ' + dept : '');
+			// Valeur stockée : "Ville (Département)"
+			const value = city.nom + (city.departement ? ' (' + city.departement.nom + ')' : '');
+
+			const li = document.createElement('li');
+			li.className   = 'list-group-item list-group-item-action py-2 px-3';
+			li.style.cursor = 'pointer';
+			li.dataset.value = value;
+			li.textContent = label;
+
+			li.addEventListener('mousedown', function (e) {
+				// mousedown avant blur pour éviter que la liste disparaisse avant le clic
+				e.preventDefault();
+				selectItem(value);
+			});
+
+			suggestions.appendChild(li);
+		});
+
+		suggestions.style.display = 'block';
+	}
+
+	function selectItem(value) {
+		input.value = value;
+		hideSuggestions();
+	}
+
+	function hideSuggestions() {
+		suggestions.style.display = 'none';
+		suggestions.innerHTML = '';
+	}
+
+	function setActive(items, index) {
+		items.forEach(function (item) { item.classList.remove('active'); });
+		items[index].classList.add('active');
+		input.value = items[index].dataset.value;
+	}
+})();
+</script>
\ No newline at end of file
diff --git a/views/_partial/delphoto.tpl b/views/_partial/delphoto.tpl
new file mode 100644
index 0000000..019ebcb
--- /dev/null
+++ b/views/_partial/delphoto.tpl
@@ -0,0 +1,31 @@
+<script>
+    const defaultAvatar = "{$smarty.env.IMG_USER_PATH}images.jpg";
+
+    // Suppression du listener précédent avant d'en ajouter un nouveau
+    const inputImage   = document.getElementById('image');
+    const btnDelete    = document.getElementById('btn-delete-image');
+    const previewAvatar = document.getElementById('preview-avatar');
+    const deleteInput  = document.getElementById('delete_image');
+
+    inputImage?.addEventListener('change', function () {
+        const file = this.files[0];
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = e => {
+            previewAvatar.src = e.target.result;
+            previewAvatar.style.opacity = '1';
+        };
+        reader.readAsDataURL(file);
+        deleteInput.value = '0';
+        if (btnDelete) {
+            btnDelete.disabled = false;
+        }
+    });
+
+    btnDelete?.addEventListener('click', function () {
+        deleteInput.value = '1';
+        previewAvatar.src = defaultAvatar;
+        previewAvatar.style.opacity = '0.5';
+        this.disabled = true;
+    });
+</script>
\ No newline at end of file
diff --git a/views/_partial/footer.tpl b/views/_partial/footer.tpl
new file mode 100644
index 0000000..1bff1bf
--- /dev/null
+++ b/views/_partial/footer.tpl
@@ -0,0 +1,23 @@
+
+    <footer class="py-3 mt-3 text-center" >
+        <p>Créé par YaLaGuBe</a></p>
+		<nav aria-label="Navigation pied de page">
+            <ul class="list-inline">
+                <li class="list-inline-item">
+                    <a href="{$smarty.env.BASE_URL}/page/about">A propos</a>
+                </li>
+                <li class="list-inline-item" aria-hidden="true">|</li>
+                <li class="list-inline-item">
+                    <a href="{$smarty.env.BASE_URL}/page/help">Aide et support</a>
+                </li>
+				 <li class="list-inline-item" aria-hidden="true">|</li>
+				<li class="list-inline-item">
+                    <a href="{$smarty.env.BASE_URL}/page/mentions">Mentions légales</a>
+                </li>
+            </ul>
+        </nav>
+    </footer>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
+    <script src="{$smarty.env.BASE_URL}/assests/js/scripts.js"></script>
+
+		
diff --git a/views/_partial/header.tpl b/views/_partial/header.tpl
new file mode 100644
index 0000000..61c2094
--- /dev/null
+++ b/views/_partial/header.tpl
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{$smarty.env.BASE_URL}/assests/css/style.css">
+    <link rel="shortcut icon" href="{$smarty.env.BASE_URL}/assests/img/Group-49.ico" type="image/x-icon">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
+    <title>Folliow{block name="title"}{/block}</title>
+</head>
+<body class="d-flex flex-column min-vh-100">
+
+    <nav class="navbar navbar-expand-lg navbar-light">
+        <div class="container-fluid">
+
+            <!-- Logo -->
+            <a class="navbar-brand d-flex align-items-center" href="{$smarty.env.BASE_URL}">
+                <img src="{$smarty.env.BASE_URL}/assests/img/logo.png" alt="Logo" class="logo-image">
+            </a>
+
+            <!-- Bouton hamburger mobile -->
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <!-- Liens de navigation -->
+            <div class="collapse navbar-collapse" id="navbarNav">
+
+                <!-- Liens gauche -->
+                <ul class="navbar-nav me-auto mb-0">
+                    <li class="nav-item">
+                        <a class="nav-link" href="{$smarty.env.BASE_URL}/page/about">À propos</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{$smarty.env.BASE_URL}/project/search">Rechercher</a>
+                    </li>
+                    {if isset($smarty.session.user)}
+                        <li class="nav-item">
+                            <a class="nav-link" href="{$smarty.env.BASE_URL}/project/addedit_project">Ajouter un projet</a>
+                        </li>
+                        {if $smarty.session.user.authorisation_name == "Administrateur"}
+                            <li class="nav-item">
+                                <a class="nav-link" href="{$smarty.env.BASE_URL}/admin/admin">Admin</a>
+                            </li>
+                        {/if}
+                    {/if}
+                </ul>
+
+                <!-- Liens droite (connexion / profil) -->
+                <nav aria-label="Connexion utilisateur">
+                    {if !isset($smarty.session.user)}
+                        <ul class="navbar-nav d-flex flex-row align-items-center gap-1 mb-0">
+                            <li class="nav-item">
+                                <a class="nav-link" href="{$smarty.env.BASE_URL}/user/signup"
+                                    title="Créer un compte" aria-label="Créer un compte">
+                                    S'inscrire
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="{$smarty.env.BASE_URL}/user/login"
+                                    title="Se connecter" aria-label="Se connecter">
+                                    Se connecter
+                                </a>
+                            </li>
+                        </ul>
+                    {else}
+                        <ul class="navbar-nav d-flex flex-row align-items-center gap-2 mb-0">
+                            <li class="nav-item d-flex align-items-center">
+                                <a class="nav-link p-0" href="{$smarty.env.BASE_URL}/user/user/{$smarty.session.user.user_pseudo}"
+                                    title="Modifier mon compte" aria-label="Modifier mon compte">
+                                    <img
+                                        src="{$smarty.env.BASE_URL}/{$smarty.env.IMG_USER_PATH}{if ($smarty.env.IMG_USER_PATH|cat:($smarty.session.user.user_image))|file_exists}{$smarty.session.user.user_image}{else}images.jpg{/if}"
+                                        class="nav-avatar"
+                                        alt="Photo de profil"
+                                    >
+                                </a>
+                            </li>
+                            <li class="nav-item d-flex align-items-center">
+                                <a class="nav-link" href="{$smarty.env.BASE_URL}/user/logout"
+                                    title="Se déconnecter" aria-label="Se déconnecter">
+                                    Se déconnecter
+                                </a>
+                            </li>
+                        </ul>
+                    {/if}
+                </nav>
+
+            </div>
+        </div>
+    </nav>
+    {include file="views/_partial/messages.tpl"}
+
+
+    <main id="main-content" class="container my-4" {block name="display"}{/block}>
+        <section class="p-4 mb-4 text-center txt_title" aria-labelledby="page-title">
+            <div class="col-lg-8 mx-auto">
+                <h2 id="page-title" class="display-5 fw-semibold mb-3">
+                    {block name="h2"}{/block}
+                </h2>
+                <p class="lead mb-2">
+                    {block name="p"}{/block}
+                </p>
+                <p class="text-muted small mb-0">
+                    {block name="date_maj"}{/block}
+                </p>
+            </div>
+        </section>
+    </main>
diff --git a/views/_partial/messages.tpl b/views/_partial/messages.tpl
new file mode 100644
index 0000000..29cf5b4
--- /dev/null
+++ b/views/_partial/messages.tpl
@@ -0,0 +1,14 @@
+
+    {if ($success_message != '')}
+		<div class="alert alert-success">
+			<p>{$success_message}</p>
+		</div>
+	{/if}
+	
+	{if (isset($arrError) && count($arrError) > 0) }
+		<div class="alert alert-danger">
+		{foreach $arrError as $strError}
+			<p>{$strError}</p>
+		{/foreach}
+		</div>
+	{/if}
diff --git a/views/_partial/preview.tpl b/views/_partial/preview.tpl
new file mode 100644
index 0000000..dceb12f
--- /dev/null
+++ b/views/_partial/preview.tpl
@@ -0,0 +1,111 @@
+<article class="col-md-3 mb-5 {if isset($smarty.session.user) and $smarty.session.user.user_status == 2} pb-5 {/if}" style="border-radius: 100px ;">
+    <div class="card h-100 shadow article-card  rounded-4" style="border-width: 2px; overflow: hidden;">
+        
+
+        <div class="ratio ratio-4x3">
+            <a href="{$smarty.env.BASE_URL}/project/display/{$objProject->getId()}">
+            <img src="{$smarty.env.BASE_URL}/{$smarty.env.IMG_PROJECT_PATH}{if ($smarty.env.IMG_PROJECT_PATH|cat:$objProject->getThumbnail())|file_exists}{$objProject->getThumbnail()}{else}{math equation="rand(1,4)"}.jpg{/if}"
+                 class="w-100 h-100 object-fit-cover"
+                 {if $objProject->getCreatorName()|stripos:'minou' !== false}
+                 style =" box-shadow: 0 0 0 4px #000; "{/if}
+                 alt=""
+                 loading="lazy">
+                 </a>
+        </div>
+        
+
+        <div class="card-body p-3 bg-light" {if $objProject->getCreatorName()|stripos:'minou' !== false}style=" background-color: #ff8c00 !important; /* Orange tigre */
+    background-image: repeating-linear-gradient(
+        45deg,
+        transparent,
+        transparent 30px,
+        rgba(0, 0, 0, 0.15) 30px,
+        rgba(0, 0, 0, 0.15) 60px
+    ) !important;
+    color: #000 !important;
+    position: relative;
+    z-index: 1;"{/if}>
+            <div class="d-flex align-items-start gap-3">
+                <a href="{$smarty.env.BASE_URL}/user/user/{$objProject->getCreatorname()}">
+                <img src="{$smarty.env.BASE_URL}/{$smarty.env.IMG_USER_PATH}{if ($smarty.env.IMG_USER_PATH|cat:($objProject->getUser_image()))|file_exists}{$objProject->getUser_image()}{else}images.jpg{/if}"
+     				class="rounded-circle flex-shrink-0 border border-2 border-white"
+     				style="width: 64px; height: 64px; object-fit: cover; margin-top: 8px;{if $objProject->getCreatorName()|stripos:'minou' !== false}
+    box-shadow: 0 0 0 4px #000; {/if}"
+     				alt="Photo de profil">
+                </a>
+                <div class="flex-grow-1">
+                    <h3 class="h6 fw-bold mb-2 mt-1">{$objProject->getTitle()}</h3>
+                    <p class="small text-muted mb-1">
+                        <i class="bi bi-person"></i> 
+                        <a href="{$smarty.env.BASE_URL}/user/user/{$objProject->getCreatorname()}" 
+                           class="text-decoration-none text-muted"
+                           style="position: relative; z-index: 2;
+                           {if $objProject->getCreatorName()|stripos:'minou' !== false}font-weight: 800 !important;
+    text-transform: uppercase;
+    color: #000 !important;{/if}">
+                            {$objProject->getCreatorname()}
+                        </a>
+                    </p>
+                    <p class="small text-muted mb-0">
+                        <i class="bi bi-geo-alt">Colmar</i>
+                    </p>
+                </div>
+            </div>
+            
+            <div class="d-flex justify-content-between align-items-center mt-3">
+                <small class="text-muted">
+                    <i class="bi bi-clock"><time>{$objProject->getCreation_date()}</time></i> 
+                </small>
+				{if $objProject->getStatus() != "refusé" && $objProject->getStatus() != "supprimé"}
+                <a href="{$smarty.env.BASE_URL}/project/display/{$objProject->getId()}"
+                   class="btn btn-sm btn-primary" {if $objProject->getCreatorName()|stripos:'minou' !== false}style="
+    background-color: #000 !important;
+    color: #ff8c00 !important;
+    border: none !important;
+    font-weight: bold !important;
+    transition: transform 0.2s;"{/if}>
+                    Voir →
+                </a>
+				{/if}
+            </div>
+            
+            {if isset($smarty.session.user)}
+                {if ($smarty.session.user.user_id == $objProject->getUser_id()) && $objProject->getStatus() == "en_attente" && $objProject->getStatus() == "accepté"}
+                    <a href="{$smarty.env.BASE_URL}/project/addedit_project/{$objProject->getId()}"
+                       class="btn btn-sm btn-outline-secondary mt-2 w-100"
+                       style="position: relative; z-index: 2;">
+                        Editer
+                    </a>
+                {/if}
+            {/if}
+        </div>
+        
+        {if isset($smarty.session.user)
+            and $smarty.session.user.user_status == 2
+            and $objProject->getStatus() == "en_attente"}
+            <div class="card-footer bg-white border-top-0 p-2">
+                <div class="d-flex gap-2">
+                    <a class="btn btn-sm btn-success flex-fill" 
+                       href="{$smarty.env.BASE_URL}/project/accept/{$objProject->getId()}" 
+                       name="toPublished">Accepter</a>
+                    <a class="btn btn-sm btn-warning flex-fill" 
+                       href="{$smarty.env.BASE_URL}/project/refuse/{$objProject->getId()}" 
+                       name="toRefused">Refuser</a>
+                    <a class="btn btn-sm btn-danger flex-fill" 
+                       href="{$smarty.env.BASE_URL}/project/delete/{$objProject->getId()}" 
+                       name="toDelete" 
+					   onclick="return confirm('Attention ! Êtes-vous sûr de vouloir supprimer ce projet ? Cette action est irréversible.');">
+					   Supprimer</a>
+                </div>
+            </div>
+        {elseif $objProject->getStatus() == "refusé"}
+            <div class="card-footer bg-white border-top-0 p-2">
+                <p class="text-danger fw-bold text-center mb-0 small">Projet refusé</p>
+            </div>
+        {elseif $objProject->getStatus() == "supprimé"}
+            <div class="card-footer bg-white border-top-0 p-2">
+                <p class="text-danger fw-bold text-center mb-0 small">Projet archivé</p>
+            </div>
+        {/if}
+    </div>
+</article>
diff --git a/views/about.tpl b/views/about.tpl
new file mode 100644
index 0000000..c75c438
--- /dev/null
+++ b/views/about.tpl
@@ -0,0 +1,197 @@
+{extends file="views/layout.tpl"}
+
+{block name="title" append} - À propos{/block}
+
+{block name="h2"}À propos{/block}
+{block name="p"}Plateforme de partage de portfolio – Projet pédagogique{/block}
+
+{block name="content"}
+
+<section aria-label="À propos de FOLLIOW">
+
+    <div class="row g-5">
+
+        <!-- CONTENU PRINCIPAL -->
+        <div class="col-lg-8">
+
+            <!-- INTRO -->
+            <div class="mb-5">
+                <h3 class="h4 mb-3">
+                    <i class="bi bi-lightbulb me-2 text-primary"></i>
+                    Présentation du projet
+                </h3>
+
+                <p class="lead fs-4">
+                    <strong>FOLLIOW</strong> est un réseau social dédié aux portfolios numériques.
+                </p>
+
+                <p class="fs-5">
+                    La plateforme permet à chacun de créer un profil personnalisé, de mettre en avant ses projets
+                    et de valoriser ses compétences à travers une présentation claire et professionnelle.
+                </p>
+
+                <p class="fs-5">
+                    Les recruteurs et visiteurs peuvent rechercher des profils, consulter les réalisations
+                    et prendre contact avec les utilisateurs qui les intéressent.
+                </p>
+
+                <p class="fs-5">
+                    Ce projet a été développé dans un cadre pédagogique afin de concevoir une application web
+                    complète simulant un environnement professionnel réel.
+                </p>
+            </div>
+
+            <!-- FONCTIONNALITÉS -->
+            <div class="mb-5">
+                <h3 class="h4 mb-3">
+                    <i class="bi bi-gear me-2 text-primary"></i>
+                    Fonctionnalités principales
+                </h3>
+
+                <div class="row">
+                    <div class="col-md-6">
+                        <ul class="list-unstyled fs-5">
+                            <li class="mb-2">
+                                <i class="bi bi-check-circle text-success me-2"></i>
+                                Création et gestion de projets
+                            </li>
+                            <li class="mb-2">
+                                <i class="bi bi-check-circle text-success me-2"></i>
+                                Affichage dynamique des contenus
+                            </li>
+                            <li class="mb-2">
+                                <i class="bi bi-check-circle text-success me-2"></i>
+                                Gestion des utilisateurs
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="col-md-6">
+                        <ul class="list-unstyled fs-5">
+                            <li class="mb-2">
+                                <i class="bi bi-check-circle text-success me-2"></i>
+                                Partage d’un projet par email
+                            </li>
+                            <li class="mb-2">
+                                <i class="bi bi-check-circle text-success me-2"></i>
+                                Interface responsive et accessible
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <!-- OBJECTIFS -->
+            <div class="mb-5">
+                <h3 class="h4 mb-3">
+                    <i class="bi bi-bullseye me-2 text-primary"></i>
+                    Objectifs pédagogiques
+                </h3>
+
+                <p class="fs-5">
+                    L’objectif principal de FOLLIOW est de démontrer la capacité à concevoir
+                    une application web complète, structurée et sécurisée.
+                </p>
+
+                <ul class="fs-5">
+                    <li>Structuration d’un projet en architecture MVC</li>
+                    <li>Manipulation de bases de données relationnelles</li>
+                    <li>Validation et sécurisation des données</li>
+                    <li>Implémentation d’un système d’envoi d’emails</li>
+                    <li>Respect des bonnes pratiques (RGPD, accessibilité, organisation du code)</li>
+                </ul>
+            </div>
+
+            <!-- TECHNOLOGIES -->
+            <div>
+                <h3 class="h4 mb-4">
+                    <i class="bi bi-code-slash me-2 text-primary"></i>
+                    Technologies utilisées
+                </h3>
+
+                <div class="row g-4">
+
+                    <div class="col-md-6">
+                        <div class="border rounded p-3 h-100">
+                            <strong class="fs-5">Backend</strong>
+                            <p class="small text-muted mb-0">
+                                PHP orienté objet – Architecture MVC – MySQL
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="col-md-6">
+                        <div class="border rounded p-3 h-100">
+                            <strong class="fs-5">Frontend</strong>
+                            <p class="small text-muted mb-0">
+                                HTML5 – CSS3 – Bootstrap – Smarty
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="col-md-6">
+                        <div class="border rounded p-3 h-100">
+                            <strong class="fs-5">Emails</strong>
+                            <p class="small text-muted mb-0">
+                                PHPMailer – SMTP – Brevo
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="col-md-6">
+                        <div class="border rounded p-3 h-100">
+                            <strong class="fs-5">Sécurité</strong>
+                            <p class="small text-muted mb-0">
+                                Validation des données – Protection des formulaires – Gestion des sessions
+                            </p>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
+        </div>
+
+        <!-- SIDEBAR -->
+        <div class="col-lg-4">
+
+            <div class="sticky-top" style="top: 90px;">
+
+                <div class="border rounded p-4 mb-4">
+                    <h4 class="h5 mb-3">
+                        <i class="bi bi-mortarboard me-2 text-primary"></i>
+                        Projet pédagogique
+                    </h4>
+
+                    <p class="fs-5 mb-0">
+                        FOLLIOW a été développé dans le cadre du module PROJET WEB 2,
+						consacré à la conception d’une application web dynamique en PHP orienté objet (architecture MVC),
+						au sein d’une formation en Développement Web et Web Mobile à CCI Campus Colmar.
+						Il s’agit d’une plateforme démonstrative réalisée à des fins pédagogiques.
+                    </p>
+                </div>
+
+                <div class="border rounded p-4">
+                    <h4 class="h5 mb-3">
+                        <i class="bi bi-envelope me-2 text-primary"></i>
+                        Contact
+                    </h4>
+
+                    <p class="fs-5 mb-2">
+                        Pour toute question :
+                    </p>
+
+                    <a href="mailto:projet.folliow@hotmail.com" class="fs-5 text-decoration-none">
+                        projet.folliow@hotmail.com
+                    </a>
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+
+</section>
+
+{/block}
\ No newline at end of file
diff --git a/views/addedit_project.tpl b/views/addedit_project.tpl
new file mode 100644
index 0000000..96f8c0f
--- /dev/null
+++ b/views/addedit_project.tpl
@@ -0,0 +1,105 @@
+{extends file="views/layout.tpl"}
+
+{block name="h2"}Ajouter un projet{/block}
+{block name="p"}Ajouter un projet à votre portfolio{/block}
+
+
+{block name="content"}
+<section class="container mt-4">
+   {if isset($smarty.session.user)}
+    <form class="m-2" method="POST" enctype="multipart/form-data" onsubmit="return confirm('Êtes-vous certain de vouloir poster votre projet ?')">
+        
+        <div class="mb-3">
+            <label class="form-label">Titre</label>
+            <input type="text" name="title" class="form-control {if (isset($arrError['title'])) } is-invalid {/if} " value="{if $objProject}{$objProject->getTitle()}{/if}" required>
+        </div>
+
+        <div class="mb-3">
+            <label class="form-label">Description (courte)</label>
+            <textarea name="description" class="form-control {if (isset($arrError['descProject'])) } is-invalid {/if} " rows="2">{if $objProject}{$objProject->getDescription()}{/if}</textarea>
+        </div>
+
+        <div class="mb-3">
+            <label class="form-label">Texte complet du Portfolio</label>
+            <textarea name="content" class="form-control {if (isset($arrError['content'])) } is-invalid {/if}" rows="5">{if $objProject}{$objProject->getContent()}{/if}</textarea>
+        </div>
+
+        <div class="col-6 mb-3">
+            <fieldset class="border p-2 rounded">
+                <legend class="form-label h6">Catégorie</legend>
+                <select class="form-select" id="category" name="category">
+				<option value="0" {if $objProject->getCategory() == 0}selected{/if}>Toutes les catégories</option>
+				{foreach $arrCategory as $arrDetCategory}
+				<option value="{$arrDetCategory['category_id']}" 
+					{if $objProject->getCategory() == $arrDetCategory['category_id']}selected{/if}>
+					{$arrDetCategory['category_name']}
+				</option>
+				{/foreach}
+				</select>
+            </fieldset>
+        </div>
+
+        <div class="mb-3">
+            <label class="h5">Miniature de votre projet</label>
+            <input name="thumbnail" class="form-control" type="file">
+			{if $objProject && $objProject->getId()}
+				<label class="h5">Miniature actuelle :</label>
+				<img src="{$smarty.env.BASE_URL}/{$smarty.env.IMG_PROJECT_PATH}{$objProject->getThumbnail()}" alt="Miniature">
+			{/if}
+        </div>
+
+        <div class="mb-3">
+			<label class="form-label h5">Galerie de photos (Max 20)</label>
+			{assign var="nbActuel" value=$arrImages|@count}
+			{assign var="disponible" value=20 - $nbActuel}
+
+			{if $disponible > 0}
+				<p class="small text-muted">Il vous reste <strong>{$disponible}</strong> emplacement(s) libre(s).</p>
+				<input type="file" name="imageProject[]" multiple class="form-control" accept="image/*">
+			{else}
+				<div class="alert alert-warning p-2">
+					<i class="fas fa-exclamation-triangle"></i> Quota de 20 photos atteint.
+				</div>
+				<input type="file" disabled class="form-control">
+			{/if}
+		</div>
+		
+		<div class="row mt-4">
+			<label class="h5">Galerie du projet</label>
+			{foreach $arrImages as $image}
+				<div class="col-md-3 mb-3 text-center">
+					<div class="card shadow-sm h-100 border-{if $image.image_status == 'approuvé'}success{elseif $image.image_status == 'refusé'}danger{else}warning{/if}">
+						<img src="{$smarty.env.BASE_URL}/{$smarty.env.IMG_PROJECT_PATH}{$image.image_name}" 
+							 class="card-img-top img-thumbnail" 
+							 alt="{$image.image_alt}" 
+							 style="height: 150px; object-fit: cover;">
+						
+						<div class="card-body p-2">
+							<span class="badge {if $image.image_status == 'approuvé'}bg-success{elseif $image.image_status == 'refusé'}bg-danger{else}bg-warning text-dark{/if}">
+								{$image.image_status|replace:'_':' '}
+							</span>
+							
+							<div class="mt-2 d-flex flex-column gap-1">
+								<a href="{$smarty.env.BASE_URL}/project/delete_image/{$image.image_id}" 
+								   class="btn btn-sm btn-danger" 
+								   onclick="return confirm('Supprimer définitivement cette image ?')">Supprimer</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			{foreachelse}
+				<p class="text-muted italic">Aucune photo dans la galerie pour le moment.</p>
+			{/foreach}
+		</div>
+
+        <div class="mt-4">
+            <button type="submit" class="btn btn-primary btn-md" name="sendProject">Envoyer</button>
+        </div>
+    </form>
+	{else}
+		<div class="alert alert-danger mt-5">
+			<p class="mb-0">Vous devez vous connecter pour accéder à cette fonctionnalité</p>
+		</div>
+	{/if}
+</section>
+{/block}
\ No newline at end of file
diff --git a/views/admin.tpl b/views/admin.tpl
new file mode 100644
index 0000000..df2183a
--- /dev/null
+++ b/views/admin.tpl
@@ -0,0 +1,109 @@
+{extends file="views/layout.tpl"}
+
+{block name="h2"}Admin{/block}
+{block name="p"}Tableau de bord administrateur{/block}
+
+{block name="content"}
+
+<div class="container-fluid px-4 py-4">
+
+    <div class="d-flex justify-content-between align-items-center mb-4">
+        <h1 class="h3 mb-0 fw-bold">Dashboard</h1>
+        <span class="text-muted small">Connecté : <strong>{$smarty.session.user.user_name} {$smarty.session.user.user_firstname}</strong></span>
+    </div>
+
+    <!-- Gestion utilisateurs -->
+    <div class="card shadow-sm mb-4">
+        <div class="card-header bg-primary text-white fw-semibold">
+            👤 Gestion des utilisateurs
+        </div>
+        <div class="card-body">
+            <p class="text-muted small mb-3">Modifier le statut ou supprimer un compte utilisateur.</p>
+            <form method="POST">
+                <div class="row g-3 align-items-end">
+                    <div class="col-md-4">
+                        <label class="form-label fw-semibold">Utilisateur</label>
+                        <select class="form-select" name="user_id">
+                            <option value="0">Choisir un utilisateur…</option>
+                            {foreach from=$arrUserToDisplay item=user}
+                                <option value="{$user->getId()}">{$user->getName()} {$user->getFirstname()}</option>
+                            {/foreach}
+                        </select>
+                    </div>
+                    <div class="col-md-4">
+                        <label class="form-label fw-semibold">Nouveau statut</label>
+                        <select class="form-select" name="new_status">
+                            <option value="0">Sélectionner un statut…</option>
+                            {foreach from=$arrAuthorisationToDisplay item=arrDetAuthorisation}
+                                <option value="{$arrDetAuthorisation->getId()}">{$arrDetAuthorisation->getName()}</option>
+                            {/foreach}
+                        </select>
+                    </div>
+                    <div class="col-md-4 d-flex gap-2">
+                        <button type="submit" name="action" value="update_status" class="btn btn-success w-100">
+                            ✓ Valider
+                        </button>
+                        <button type="submit" name="action" value="delete_user" class="btn btn-danger w-100"
+                            onclick="return confirm('Êtes-vous sûr de vouloir supprimer cet utilisateur ? Cette action est irréversible.');">
+                            🗑 Supprimer
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Gestion des catégories -->
+    <div class="row g-4">
+
+        <!-- Modifier une catégorie -->
+        <div class="col-md-6">
+            <div class="card shadow-sm h-100">
+                <div class="card-header bg-secondary text-white fw-semibold">
+                    ✏️ Modifier une catégorie
+                </div>
+                <div class="card-body">
+                    <p class="text-muted small mb-3">Renommer une catégorie existante.</p>
+                    <form method="POST">
+                        <div class="mb-3">
+                            <label class="form-label fw-semibold">Catégorie à modifier</label>
+                            <select class="form-select" name="id_to_edit">
+                                <option value="0">Choisir une catégorie…</option>
+                                {foreach from=$arrCategoryToDisplay item=category}
+                                    <option value="{$category->getId()}">{$category->getName()}</option>
+                                {/foreach}
+                            </select>
+                        </div>
+                        <div class="mb-3">
+                            <label class="form-label fw-semibold">Nouveau nom</label>
+                            <input type="text" class="form-control" name="new_name" placeholder="Nouveau nom de la catégorie">
+                        </div>
+                        <button type="submit" class="btn btn-success">✓ Renommer</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+
+        <!-- Créer une catégorie -->
+        <div class="col-md-6">
+            <div class="card shadow-sm h-100">
+                <div class="card-header bg-secondary text-white fw-semibold">
+                    ➕ Créer une catégorie
+                </div>
+                <div class="card-body">
+                    <p class="text-muted small mb-3">Ajouter une nouvelle catégorie au catalogue.</p>
+                    <form method="POST">
+                        <div class="mb-3">
+                            <label class="form-label fw-semibold">Nom de la catégorie</label>
+                            <input type="text" class="form-control" name="new_category" placeholder="Nom de la nouvelle catégorie">
+                        </div>
+                        <button type="submit" class="btn btn-success">➕ Créer</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+{/block}
diff --git a/views/error_403.tpl b/views/error_403.tpl
new file mode 100644
index 0000000..4fdb493
--- /dev/null
+++ b/views/error_403.tpl
@@ -0,0 +1,9 @@
+{extends file="views/layout.tpl"}
+
+{block name="content"}
+    <div class="text-center">
+        <h1 class="display-1">Erreur 403</h1>
+        <h2 class="display-3">Vous n'êtes pas autorisé à accéder à cette page !</h2>
+        <img class="img-fluid" src="{$smarty.env.BASE_URL}/assests/img/error403.jpg">
+    </div>
+{/block}
\ No newline at end of file
diff --git a/views/error_404.tpl b/views/error_404.tpl
new file mode 100644
index 0000000..41e395b
--- /dev/null
+++ b/views/error_404.tpl
@@ -0,0 +1,9 @@
+{extends file="views/layout.tpl"}
+
+{block name="content"}
+    <div class="text-center">
+        <h1 class="display-1">Erreur 404</h1>
+        <h2 class="display-3">Cette page n'existe pas !</h2>
+        <img class="img-fluid" src="{$smarty.env.BASE_URL}/assests/img/error404.webp">
+    </div>
+{/block}
\ No newline at end of file
diff --git a/views/help.tpl b/views/help.tpl
new file mode 100644
index 0000000..4e75efa
--- /dev/null
+++ b/views/help.tpl
@@ -0,0 +1,245 @@
+{extends file="views/layout.tpl"}
+
+{block name="h2"}Bienvenue sur l'aide & support de Folliow !{/block}
+{block name="p"}Ici, vous trouverez de l'aide pour naviguer sur notre site.{/block}
+
+{block name="content"}
+
+<section class="container">
+{if isset($smarty.session.user)}
+
+    {if $smarty.session.user.user_status == 3}
+    <div class="accordion" id="accordionExample">
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                Comment créer un nouveau projet ?
+            </button>
+            </h2>
+            <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
+                <div class="accordion-body">
+                    <p>Un haut, dans votre barre de navigation, vous avez un lien pour ajouter un nouveau projet. 
+                    Il faudra remplir votre projet avec un titre, une description, des images (jusqu'à 20 par projet) et une image de présentation qui apparaitra en illustration dans la liste des projets.<br>
+                    Plus votre projet est rempli, plus il sera intéressant pour les autres profils, alors n'hésitez pas à bien le remplir !</p>
+                </div>
+            </div>
+        </div>
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                Comment modifier mon projet ?
+            </button>
+            </h2>
+            <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+                <div class="accordion-body">
+                    <p>Une fois votre projet créé, vous avez la possibilité de modifier son contenu. Si vous êtes bien connecté à votre compte, vous pouvez aller sur votre profil et dans la liste de vos projets, 
+                    il vous suffira de cliquer sur "éditer" pour voir toutes les informations apparaitres et changer directement ce que vous souhaitez modifier.
+                    N'oubliez pas de valider vos modifications !</p>
+                </div>
+            </div>
+        </div>
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                Comment modifier mes informations personnelles ?
+            </button>
+            </h2>
+            <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+                <div class="accordion-body">
+                    <p>Si vous êtes bien connecté à votre compte, vous pouvez cliquer sur votre photo de profil en haut à droite de votre écran pour accéder à votre profil.
+                    Vous pourrez ensuite modifier vos informations directement depuis votre profil !
+                    Simple comme "bonjour" :) </p>
+                </div>
+            </div>
+        </div>
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+                Nous contacter
+            </button>
+            </h2>
+            <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+                <div class="accordion-body">
+                    <p>Si vous avez des questions ? Un problème avec votre compte ? 
+                    Vous souhaitez supprimer toutes vos données ou débloquer votre compte suite à une modération ? N'hésitez pas à nous écrire à <a href="mailto:projet.folliow@hotmail.com">projet.folliow@hotmail.com </a> !</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {elseif $smarty.session.user.user_status == 2}
+    <div class="accordion" id="accordionExample">
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                Comment vérifier le statut d'un projet ou d'une image ?
+            </button>
+            </h2>
+            <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
+                <div class="accordion-body">
+                    <p>Bienvenue dans notre team de modérateurs ! Vous avez maintenant accès à de nouvelles fonctionnalités. 
+                    Vous verez le statut de chaque projet et image en dessous de chacun. Si rien n'est mentionné, celà signifie que le projet est déjà approuvé !</p>
+                </div>
+            </div>
+        </div>
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                Comment modérer du contenu ?
+            </button>
+            </h2>
+            <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+                <div class="accordion-body">
+                    <p>Très bonne question ! En plus du statut du projet ou de l'image, vous avez également accès à 3 boutons : approuver, refuser et supprimer. 
+                    Si le projet est valide à nos conditions d'utilisation de Folliow, vous pouvez l'approuver. Si vous pensez qu'il faut légèrement modifier ou adapter, vous pouvez le refuser et l'utilisateur pourra modifier son projet.</p>
+                    <p>Et si le projet enfreint nos règles d'utilisation, vous pouvez supprimer le projet de l'utilisateur. Attention, cette action est définitive.
+                    N'hésitez pas à signaler un utilisateur à l'administrateur en cas de besoin !</p>
+                </div>
+            </div>
+        </div>
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                Comment modérer une image ?
+            </button>
+            </h2>
+            <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+                <div class="accordion-body">
+                    De la même manière que vous pouvez modérer un projet ! Dans la liste des images, vous aurez la possibilité de refuser, approuver ou bien supprimer une image.
+                </div>
+            </div>
+        </div>
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+                Nous contacter
+            </button>
+            </h2>
+            <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+                <div class="accordion-body">
+                    <p>Si vous avez des questions ? Une fonctionnalité que vous avez du mal à comprendre ? Des suggestions d'amélioration ? N'hésitez pas à nous écrire à <a href="mailto:projet.folliow@hotmail.com">projet.folliow@hotmail.com </a>! </p>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    {elseif $smarty.session.user.user_status == 1}
+    <div class="accordion" id="accordionExample">
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                Comment accéder à mon espace administrateur ?
+            </button>
+            </h2>
+            <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
+                <div class="accordion-body">
+                    <p>Rien de plus simple ! Si vous êtes connecté à votre compte, un lien <a href="{$smarty.env.BASE_URL}/admin/admin">"admin"</a> sera visible dans votre barre de navigation. 
+                    Cliquez dessus et vous voici dans l'antre réservée à nos fabuleux administrateurs !</p>
+                </div>
+            </div>
+        </div>
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                Comment gérer un utilisateur ?
+            </button>
+            </h2>
+            <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+                <div class="accordion-body">
+                    <p>La première fonctionnalité accessible sur votre Dashbord est la maintenance utilisateur. Vous pouvez dans le menu déroulant seléctionner l'utilisateur concerné par votre action.
+                    Un nouveau modérateurs rejoint l'équipe ? Il suffira ensuite de choisir dans le menu déroulant, son nouveau statut ! N'oubliez pas de valider la modification !</p>
+                    <p>Oh, oh... Quelqu'un n'a pas respecté nos règles de modération et vous devez maintenant supprimer cette utilisateur... Après l'avoir séléctionné, vous pouvez appuyer sur le bouton "supprimer l'utilisateur".
+                    Nous vous demanderons une confirmation avant de finaliser la suppression. Attention ! Cette action est définitive et l'utilisateur perdra tous ses projets !</p>
+                </div>
+            </div>
+        </div>
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                Comment modifier ou créer une catégorie de projet ?
+            </button>
+            </h2>
+            <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+                <div class="accordion-body">
+                    <p>Voici la seconde partie de votre Dashbord. Si celà vous semble judicieux ou suite à des suggestions d'utilisateurs, vous pouvez modifier l'intitulé d'une catégorie. 
+                    Dans le menu déroulant, choisissez la catégorie concerncée, puis écrivez son nouveau nom dans le champ "nouveau nom de la catégorie". N'oubliez pas de valider le changement !</p>
+                    <p>Et si vous souhaitez créer une nouvelle catégorie, écrivez son intitulé dans le champ "nom de la nouvelle catégorie" et validez la création. Votre nouvelle catégorie apparait déjà dans le menu déroulant !</p>
+                    <p>La suppression d'une catégorie n'est pas possible, car beaucoup de projet se retrouveraient orphelins :( Mais avec la modification et la création, vous avez les outils nécessaire pour organiser le classement de tous nos beaux projets.</p>
+                </div>
+            </div>
+        </div>
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+                Nous contacter
+            </button>
+            </h2>
+            <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+                <div class="accordion-body">
+                    <p> Vous avez des questions ? Un problème avec votre espace administrateur ou une suggestion d'amélioration ? N'hésitez pas à nous écrire à <a href="mailto:projet.folliow@hotmail.com">projet.folliow@hotmail.com </a> !<p>
+                </div>
+            </div>
+        </div>
+    </div>
+    {/if}
+
+{else} 
+    <div class="accordion" id="accordionExample">
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                Qu'est-ce que Folliow ?
+            </button>
+            </h2>
+            <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
+                <div class="accordion-body">
+                    <p>Folliow est un réseau social de portfolio. Il vous permet de rassembler et mettre en avant tous les projets que vous avez effectué ! 
+                    Et si vous êtes rectruteur à la recherche de talents, vous pourrez rechercher les profils en fonction de vos besoins, partager leur contenus et les contacter si vous souhaitez collaborer avec eux.</p>
+                </div>
+            </div>
+        </div>
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                Comment créer un compte
+            </button>
+            </h2>
+            <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+                <div class="accordion-body">
+                    <p>En haut à droite de votre écran, vous avez le lien <a href="{$smarty.env.BASE_URL}/user/signin">"s'inscrire"</a>. Nous demandons certaines informations obligatoires pour l'identification, 
+                    ensuite à vous de remplir les informations complémentaires pour alimenter votre profil et permettre aux autres utilisateurs de mieux vous connaitre et vous contacter.</p>
+                </div>
+            </div>
+        </div>
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                Partager un projet
+            </button>
+            </h2>
+            <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+                <div class="accordion-body">
+                    <p>Lorsque vous consultez un projet, vous pouvez remplir le champ "email" avec l'email de la personne à qui vous souhaitez partager le projet. 
+                    Votre contact recevra en moins de 5 minutes, un mail de notre part avec le lien vers le projet en question ! Pratique, n'est-ce pas ?</p>
+                </div>
+            </div>
+        </div>
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+                Nous contacter
+            </button>
+            </h2>
+            <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+                <div class="accordion-body">
+                    <p>Si vous avez des questions, n'hésitez pas à nous écrire à <a href="mailto:projet.folliow@hotmail.com">projet.folliow@hotmail.com </a>!</p>
+                </div>
+            </div>
+        </div>
+    </div>
+{/if}
+</section>
+<br>
+<br>
+
+{/block}
\ No newline at end of file
diff --git a/views/home.tpl b/views/home.tpl
new file mode 100644
index 0000000..df0bdcb
--- /dev/null
+++ b/views/home.tpl
@@ -0,0 +1,43 @@
+{extends file="views/layout.tpl"}
+{block name="display" }style="display:none;"{/block}
+{block name="content"}
+	<section class="container mt-5 p-5 d-flex flex-column align-items-center text-center">
+		<h1 class="logo">Folliow</h1>
+		<h2>Là où les talents rencontrent leur avenir</h2>
+		<p class="col-6">Une plateforme de portfolio adapté à vos besoins et aux besoins des entreprises. 
+			Créer un portfolio réellement pertinent aux exigences du marché et rentrez 
+			directement en contact avec les entreprises.</p>
+	</section>
+
+	<section class="container mt-5 p-5 d-flex flex-column align-items-center text-center">
+		<div class="mb-4">
+		<form method="GET" action="{$smarty.env.BASE_URL}">
+			<button type="submit" name="filter_cat" value="1" class="btn btn-primary">Design</button>
+			<button type="submit" name="filter_cat" value="2" class="btn btn-primary">Développement Web</button>
+			<button type="submit" name="filter_old" value="true" class="btn btn-primary">Plus de 6 mois</button>
+			<a href="{$smarty.env.BASE_URL}/project/home" class="btn btn-primary">Tout</a>
+		</form>
+	</div>
+	</section>
+
+<section class="container-fluid" aria-label="Articles récents">
+	<h2 class="visually-hidden">Les 4 derniers articles</h2>
+	<div class="row mb-2">
+	
+	{foreach from=$arrProjectToDisplay item=objProject}
+
+		{assign var="isAuthor" value=(isset($smarty.session.user) && $smarty.session.user.user_id == $objProject->getUser_id())}
+		{assign var="isModerator" value=(isset($smarty.session.user) && $smarty.session.user.user_status == 2)}
+		{assign var="isDeleted" value=($objProject->getDeleted_at() !== null)}
+		{assign var="isRefused" value=($objProject->getStatus() == "refusé")}
+
+		{if $isModerator 
+			|| ($isAuthor && !$isDeleted) 
+			|| (!$isRefused && !$isDeleted)}
+			
+			{include file="views/_partial/preview.tpl"}
+		{/if}
+
+	{/foreach}
+</section>
+{/block}
diff --git a/views/layout.tpl b/views/layout.tpl
new file mode 100644
index 0000000..6f8d4b6
--- /dev/null
+++ b/views/layout.tpl
@@ -0,0 +1,8 @@
+{include file="views/_partial/header.tpl"}
+
+<main class="container mb-4 mt-1 flex-grow-1 d-flex flex-column align-items-center justify-content-center">
+    {block name="content"}
+    {/block}
+</main>
+
+{include file="views/_partial/footer.tpl"}
\ No newline at end of file
diff --git a/views/login.tpl b/views/login.tpl
new file mode 100644
index 0000000..3847034
--- /dev/null
+++ b/views/login.tpl
@@ -0,0 +1,89 @@
+{extends file="views/layout.tpl"}
+{block name="title" append} - Connexion{/block}
+
+{block name="display" }style="display:none;"{/block}
+{block name="content"}
+<section aria-label="Se connecter">
+
+	<div class="py-5">
+		<!-- Centrage horizontal du formulaire -->
+		<div class="row justify-content-center">
+			<div class="col-12 col-md-8 col-lg-5">
+
+				<!-- Carte contenant le formulaire de connexion -->
+				<div class="card shadow-sm border-0 rounded-4 p-4 p-lg-5">
+
+					<!-- Titre principal -->
+					<h1 class="h3 fw-bold mb-1">Connexion</h1>
+
+					<!-- Texte descriptif -->
+					<p class="text-secondary mb-4">
+						Connectez-vous à votre compte.
+					</p>
+
+					<!-- Formulaire de connexion -->
+					<!-- Le traitement sera effectué en PHP via la méthode POST -->
+					<form method="POST">
+						<div class="row g-3">
+
+							<!-- Champ : adresse e-mail de l'utilisateur -->
+							<div class="col-12">
+								<label for="user_mail" class="form-label">
+									Adresse e-mail
+								</label>
+								<input
+									value="{$strMail|default:''}"
+									type="email"
+									class="form-control {if isset($arrError.user_mail)}is-invalid{/if}"
+									id="user_mail"
+									name="user_mail"
+									required
+								>
+							</div>
+
+							<!-- Champ : mot de passe -->
+							<div class="col-12">
+								<label for="user_password" class="form-label">
+									Mot de passe
+								</label>
+								<input
+									type="password"
+									class="form-control {if isset($arrError.user_password)}is-invalid{/if}"
+									id="user_password"
+									name="user_password"
+									required
+								>
+							</div>
+							<div class="form-check col-12">
+   							 	<input type="checkbox" class="form-check-input" id="remember_me" name="remember_me">
+    							<label class="form-check-label" for="remember_me">Se souvenir de moi</label>
+  							</div>
+
+							<!-- Bouton de soumission du formulaire -->
+							<div class="col-12 d-grid mt-2">
+								<button type="submit" class="btn btn-primary btn-lg rounded-3">
+									Se connecter
+								</button>
+							</div>
+
+							<!-- Lien vers la page d'inscription -->
+							<div class="col-12 text-center">
+								<small class="text-secondary">
+									Pas encore de compte ?
+									<a href="{$smarty.env.BASE_URL}/user/signup" class="link-primary">
+										Créer un compte
+									</a>
+								</small>
+							</div>
+
+						</div>
+					</form>
+
+				</div>
+
+			</div>
+		</div>
+	</div>
+
+</section>
+{/block}
diff --git a/views/mail_message.tpl b/views/mail_message.tpl
new file mode 100644
index 0000000..cdab24c
--- /dev/null
+++ b/views/mail_message.tpl
@@ -0,0 +1,27 @@
+<p>Bonjour,</p>
+
+<p>
+    Un projet a été partagé avec vous via la plateforme <strong>Folliow</strong>.
+</p>
+
+<h3>{$projectTitle}</h3>
+
+<p>
+    {$projectDescription}
+</p>
+
+<p>
+    Vous pouvez consulter le projet en cliquant sur le lien ci-dessous :
+</p>
+
+<p>
+    <a href="{$projectUrl}">
+        {$projectUrl}
+    </a>
+</p>
+
+<p>
+    Cordialement,<br>
+    L’équipe Folliow
+</p>
+<img src="{$smarty.env.BASE_URL}/assests/img/logo.png" style="height : 30px;">
diff --git a/views/mentions.tpl b/views/mentions.tpl
new file mode 100644
index 0000000..e2c3f1a
--- /dev/null
+++ b/views/mentions.tpl
@@ -0,0 +1,287 @@
+{extends file="views/layout.tpl"}
+
+{block name="title" append} - Mentions légales{/block}
+
+{block name="h2"}Mentions légales{/block}
+{block name="p"}Informations légales et politique de confidentialité{/block}
+
+{block name="date_maj"}
+	<p class="text-muted small mb-0">
+		<i class="bi bi-calendar-event me-2" aria-hidden="true"></i>
+		Dernière mise à jour : <time datetime="2026-03-05">5 mars 2026</time>
+	</p>
+{/block}
+
+{block name="js_footer" append}
+	<script>
+	{literal}
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                    target.focus();
+                }
+            });
+        });
+	{/literal}
+    </script>
+{/block}
+
+{block name="content"}
+<section aria-label="Mentions légales">
+	<h2 class="visually-hidden">Mentions légales</h2>
+
+	<div class="row g-5">
+		<div class="col-md-12">
+
+			<!-- Table des matières -->
+			<nav class="table-of-contents bg-light rounded shadow-sm p-4 mb-4" aria-labelledby="toc-heading">
+				<h3 id="toc-heading" class="h5 mb-3">
+					<i class="bi bi-list-ul me-2" aria-hidden="true"></i>
+					Sommaire
+				</h3>
+				<ul class="list-unstyled ms-3">
+					<li class="mb-2"><a href="#editeur">1. Éditeur du site</a></li>
+					<li class="mb-2"><a href="#hebergeur">2. Hébergement</a></li>
+					<li class="mb-2"><a href="#propriete">3. Propriété intellectuelle</a></li>
+					<li class="mb-2"><a href="#rgpd">4. Protection des données personnelles (RGPD)</a></li>
+					<li class="mb-2"><a href="#cookies">5. Cookies</a></li>
+					<li class="mb-2"><a href="#responsabilite">6. Limitation de responsabilité</a></li>
+					<li class="mb-2"><a href="#liens">7. Liens hypertextes</a></li>
+					<li class="mb-2"><a href="#droit">8. Droit applicable</a></li>
+				</ul>
+			</nav>
+
+			<!-- Section 1 : Éditeur -->
+			<section id="editeur" class="legal-section bg-light rounded shadow-sm p-4 mb-4" aria-labelledby="editeur-heading">
+				<h3 id="editeur-heading" class="h4">
+					<i class="bi bi-building me-2 text-primary" aria-hidden="true"></i>
+					1. Éditeur du site
+				</h3>
+
+				<p class="text-muted">
+					FOLLIOW est un <strong>projet pédagogique</strong> réalisé dans le cadre d’un exercice de formation.					
+				</p>
+
+				<dl class="row">
+					<dt class="col-sm-3">Nom du projet</dt>
+					<dd class="col-sm-9">FOLLIOW</dd>
+
+					<dt class="col-sm-3">Nature</dt>
+					<dd class="col-sm-9">Projet scolaire / démonstration technique</dd>
+
+					<dt class="col-sm-3">Établissement</dt>
+					<dd class="col-sm-9">FOLLIOW</dd>
+
+					<dt class="col-sm-3">Forme juridique</dt>
+					<dd class="col-sm-9">Non applicable (projet pédagogique)</dd>
+
+					<dt class="col-sm-3">Capital social</dt>
+					<dd class="col-sm-9">Non applicable</dd>
+
+					<dt class="col-sm-3">Adresse</dt>
+					<dd class="col-sm-9">4 Rue du Rhin, 68000 Colmar</dd>
+
+					<dt class="col-sm-3">Téléphone</dt>
+					<dd class="col-sm-9">03 68 67 20 00</dd>
+
+					<dt class="col-sm-3">Email</dt>
+					<dd class="col-sm-9">
+						<a href="mailto:projet.folliow@hotmail.com">projet.folliow@hotmail.com</a>
+					</dd>
+
+					<dt class="col-sm-3">Directeur de publication</dt>
+					<dd class="col-sm-9">L’équipe du projet FOLLIOW</dd>
+
+					<dt class="col-sm-3">SIRET</dt>
+					<dd class="col-sm-9">Non applicable (projet scolaire)</dd>
+				</dl>
+			</section>
+
+			<!-- Section 2 : Hébergeur -->
+			<section id="hebergeur" class="legal-section bg-light rounded shadow-sm p-4 mb-4" aria-labelledby="hebergeur-heading">
+				<h3 id="hebergeur-heading" class="h4">
+					<i class="bi bi-hdd-network me-2 text-primary" aria-hidden="true"></i>
+					2. Hébergement
+				</h3>
+
+				<p>Le site est hébergé sur une infrastructure pédagogique mise à disposition pour le projet :</p>
+
+				<dl class="row">
+					<dt class="col-sm-3">Hébergeur</dt>
+					<dd class="col-sm-9">Yass Le Goat en faite (et o2switch)<dd>
+
+					<dt class="col-sm-3">Domaine / accès</dt>
+					<dd class="col-sm-9">php.boulayoune.com</dd>
+
+					<dt class="col-sm-3">Adresse</dt>
+					<dd class="col-sm-9">REDACTED FOR PRIVACY</dd>
+
+					<dt class="col-sm-3">Téléphone</dt>
+					<dd class="col-sm-9">REDACTED FOR PRIVACY</dd>
+				</dl>
+			</section>
+
+			<!-- Section 3 : Propriété intellectuelle -->
+			<section id="propriete" class="legal-section bg-light rounded shadow-sm p-4 mb-4" aria-labelledby="propriete-heading">
+				<h3 id="propriete-heading" class="h4">
+					<i class="bi bi-c-circle me-2 text-primary" aria-hidden="true"></i>
+					3. Propriété intellectuelle
+				</h3>
+				<p>
+					Sauf mention contraire, l’ensemble des contenus présents sur FOLLIOW (textes, visuels, logo, éléments d’interface)
+					est utilisé dans le cadre du projet et reste la propriété de leurs auteurs respectifs.
+				</p>
+				<p>
+					Toute reproduction ou réutilisation à des fins commerciales est interdite sans autorisation préalable.
+				</p>
+				<p>
+					Les éventuels contenus tiers (images, icônes, bibliothèques) restent soumis à leurs licences d’origine.
+				</p>
+			</section>
+
+			<!-- Section 4 : RGPD -->
+			<section id="rgpd" class="legal-section bg-light rounded shadow-sm p-4 mb-4" aria-labelledby="rgpd-heading">
+				<h3 id="rgpd-heading" class="h4">
+					<i class="bi bi-shield-lock me-2 text-primary" aria-hidden="true"></i>
+					4. Protection des données personnelles (RGPD)
+				</h3>
+
+				<h4 class="h5 mt-4">4.1 Responsable du traitement</h4>
+				<p>
+					Le responsable du traitement est l’équipe du projet FOLLIOW (projet pédagogique).
+				</p>
+
+				<h4 class="h5 mt-4">4.2 Données collectées</h4>
+				<p>Selon l’utilisation du site, les données pouvant être collectées sont :</p>
+				<ul>
+					<li>Nom / Prenom </li>
+					<li>Pseudo </li>					
+					<li>Adresse email (inscription, connexion, partage de projet par email)</li>
+					<li>Contenus déposés par l’utilisateur (projets, descriptions, images)</li>
+				</ul>
+
+				<h4 class="h5 mt-4">4.3 Finalités du traitement</h4>
+				<ul>
+					<li>Création et gestion de compte</li>
+					<li>Publication et affichage de projets</li>
+					<li>Partage d’un projet par email à la demande de l’utilisateur</li>
+					<li>Sécurisation du site et prévention des abus</li>
+				</ul>
+
+				<h4 class="h5 mt-4">4.4 Durée de conservation</h4>
+				<p>
+					Dans le cadre de ce projet pédagogique, les données sont conservées pendant la durée du projet et des évaluations,
+					puis supprimées ou anonymisées, sauf obligation légale contraire.
+				</p>
+
+				<h4 class="h5 mt-4">4.5 Vos droits</h4>
+				<p>Conformément au RGPD, vous disposez de droits d’accès, de rectification, d’effacement et d’opposition.</p>
+				<p>
+					Pour exercer ces droits, contactez-nous à :
+					<a href="mailto:projet.folliow@hotmail.com">projet.folliow@hotmail.com</a>
+				</p>
+				<p>
+					Vous pouvez également introduire une réclamation auprès de la CNIL
+					(<a href="https://www.cnil.fr" target="_blank" rel="noopener">www.cnil.fr</a>).
+				</p>
+			</section>
+
+			<!-- Section 5 : Cookies -->
+			<section id="cookies" class="legal-section bg-light rounded shadow-sm p-4 mb-4" aria-labelledby="cookies-heading">
+				<h3 id="cookies-heading" class="h4">
+					<i class="bi bi-cookie me-2 text-primary" aria-hidden="true"></i>
+					5. Cookies
+				</h3>
+
+				<p>
+					FOLLIOW peut utiliser des cookies <strong>strictement nécessaires</strong> au fonctionnement du site
+					(ex : session de connexion). Aucun cookie publicitaire n’est utilisé.
+				</p>
+
+				<h4 class="h5 mt-4">5.1 Qu’est-ce qu’un cookie ?</h4>
+				<p>
+					Un cookie est un petit fichier texte déposé sur votre appareil lors de la visite d’un site.
+					Il permet notamment de conserver une session ou des préférences.
+				</p>
+
+				<h4 class="h5 mt-4">5.2 Types de cookies utilisés</h4>
+				<ul>
+					<li><strong>Cookies techniques</strong> : indispensables (session, sécurité)</li>
+					<li><strong>Cookies de préférence</strong> : éventuels (langue, affichage) si implémentés</li>
+				</ul>
+
+				<h4 class="h5 mt-4">5.3 Gestion des cookies</h4>
+				<p>
+					Vous pouvez configurer votre navigateur pour refuser les cookies. Certaines fonctionnalités du site
+					peuvent alors ne pas fonctionner correctement.
+				</p>
+			</section>
+
+			<!-- Section 6 : Limitation de responsabilité -->
+			<section id="responsabilite" class="legal-section bg-light rounded shadow-sm p-4 mb-4" aria-labelledby="responsabilite-heading">
+				<h3 id="responsabilite-heading" class="h4">
+					<i class="bi bi-exclamation-triangle me-2 text-primary" aria-hidden="true"></i>
+					6. Limitation de responsabilité
+				</h3>
+				<p>
+					Les informations présentées sur FOLLIOW sont fournies à titre démonstratif dans le cadre d’un projet pédagogique.
+					L’équipe s’efforce de maintenir le site accessible, sans garantie d’absence d’erreurs ou d’interruptions.
+				</p>
+				<p>
+					L’équipe FOLLIOW ne pourra être tenue responsable des dommages directs ou indirects résultant de l’utilisation du site,
+					notamment en cas d’indisponibilité ou de perte de données.
+				</p>
+			</section>
+
+			<!-- Section 7 : Liens hypertextes -->
+			<section id="liens" class="legal-section bg-light rounded shadow-sm p-4 mb-4" aria-labelledby="liens-heading">
+				<h3 id="liens-heading" class="h4">
+					<i class="bi bi-link-45deg me-2 text-primary" aria-hidden="true"></i>
+					7. Liens hypertextes
+				</h3>
+				<p>
+					Le site peut contenir des liens vers des sites tiers. FOLLIOW n’exerce aucun contrôle sur ces sites et décline toute
+					responsabilité quant à leur contenu ou leur disponibilité.
+				</p>
+			</section>
+
+			<!-- Section 8 : Droit applicable -->
+			<section id="droit" class="legal-section bg-light rounded shadow-sm p-4 mb-4" aria-labelledby="droit-heading">
+				<h3 id="droit-heading" class="h4">
+					<i class="bi bi-hammer me-2 text-primary" aria-hidden="true"></i>
+					8. Droit applicable et juridiction compétente
+				</h3>
+				<p>
+					Les présentes mentions légales sont régies par le droit français. En cas de litige, et à défaut d’accord amiable,
+					les tribunaux français seront seuls compétents.
+				</p>
+			</section>
+
+			<!-- Contact -->
+			<section class="mt-5 p-4 bg-light rounded shadow-sm" aria-labelledby="contact-legal">
+				<h3 id="contact-legal" class="h4 mb-3">
+					<i class="bi bi-envelope me-2 text-primary" aria-hidden="true"></i>
+					Questions ou réclamations
+				</h3>
+				<p>
+					Pour toute question concernant ces mentions légales ou pour exercer vos droits, vous pouvez nous contacter :
+				</p>
+				<ul class="list-unstyled">
+					<li class="mb-2">
+						<i class="bi bi-envelope me-2" aria-hidden="true"></i>
+						Par email : <a href="mailto:projet.folliow@hotmail.com">projet.folliow@hotmail.com</a>
+					</li>
+					
+				</ul>
+			</section>
+
+		</div>
+	</div>
+</section>
+{/block}
\ No newline at end of file
diff --git a/views/project.tpl b/views/project.tpl
new file mode 100644
index 0000000..1e88fab
--- /dev/null
+++ b/views/project.tpl
@@ -0,0 +1,75 @@
+{extends file="views/layout.tpl"}
+
+{block name="content"}
+<body>
+    <section class="container mt-5 p-5 d-flex flex-column align-items-center">
+        <div>
+            <h2>Alimenter votre projet</h2>
+			<form method="post">
+				<button type="submit" class="btn btn-primary btn-lg" name="showForm">+</button>
+				{if isset($smarty.post.toContinue)}
+					<button type="submit" class="btn btn-warning btn-lg" name="showFormContinue">Reprendre</button>
+				{/if}
+			</form>
+			
+			{* Affichage d'un formulaire en cas d'appuie sur le bouton "+" *}
+			{if isset($smarty.post.showForm) || isset($smarty.post.showFormContinue)}
+				{if isset($smarty.session.user)}
+				<form class="m-2" method="post" enctype="multipart/form-data" onsubmit="return confirm('Voulez-vous vraiment envoyer le formulaire ?')">
+					<div>
+						<label>Titre</label>
+						<input type="text" name="titleProject">
+					</div>
+					<div> 
+						<label>Description</label>
+						<input type="text" name="descProject">
+					</div>
+					<div>
+						<label>Texte Portfolio</label>
+						<input type="text" name="textProject">
+					</div>
+					<div>
+						<h3>Image thumbnail</h3>
+						<input name="imageThumbnail" class="form-control" type="file">
+					</div>
+					<div>
+						<h3>Image du projet</h3>
+						<input name="imageProject" class="form-control" type="file">
+					</div>
+					<div class="mt-2">
+						<button type="submit" class="btn btn-primary btn-md" name="sendMessage">Envoyer</button>
+						<button type="submit" class="btn btn-warning btn-md" name="toContinue">Remettre à plus tard</button>
+					</div>
+				</form>
+				{else}
+				<div class="border rounded mt-5">
+					<p class="text-danger p-2">Vous devez vous connecter pour accéder à cette fonctionnalité</p>
+				</div>
+				{/if}
+			{/if}
+			
+        </div>
+            <div>
+                <h3>Description</h3>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            </div>
+            <div>
+                <h3>Photos behind the scene</h3>
+                <div class="row mb-2">
+                    <img>
+                </div>
+            </div>
+            <div>
+                <h3>Other projects</h3>
+                <div class="row mb-2">
+                    {foreach $arrProjectToDisplay as $objProject}
+                        {include file="../app/views/partials/preview.tpl"}
+                    {/foreach}
+                </div>
+            </div>
+        </div>
+    <section>
+</body>
+{/block}
\ No newline at end of file
diff --git a/views/project_display.tpl b/views/project_display.tpl
new file mode 100644
index 0000000..6cc8d8c
--- /dev/null
+++ b/views/project_display.tpl
@@ -0,0 +1,178 @@
+{extends file="views/layout.tpl"}
+
+{block name="title" append} - {$objProject->getTitle()}{/block}
+
+{block name="h2"}Projet de {$objProject->getCreatorName()}{/block}
+
+{block name="p"}Portfolio créatif partagé sur FOLLIOW{/block}
+
+{block name="content"}
+
+    <!-- Message après l'envoi d'email -->
+    {if isset($smarty.get.mail) && $smarty.get.mail === 'ok'}
+        <div class="alert alert-success">Email envoyé avec succès.</div>
+    {elseif isset($smarty.get.mail) && $smarty.get.mail === 'fail'}
+        <div class="alert alert-danger">Erreur lors de l'envoi de l'email.</div>
+    {/if}
+
+    <div class="row g-4">
+
+        <!-- Contenu principal du projet -->
+        <div class="col-lg-8">
+
+            <h1 class="fw-bold">{$objProject->getTitle()}</h1>
+
+            <p class="text-muted">
+                {$arrProject.category_name ?? 'Général'}
+            </p>
+
+            <div class="mb-4 shadow-sm {if !($smarty.env.IMG_PROJECT_PATH|cat:$objProject->getThumbnail())|file_exists}d-none{/if}" >
+                <img src="{$smarty.env.BASE_URL}/{$smarty.env.IMG_PROJECT_PATH}{$objProject->getThumbnail()}"
+                     class="img-fluid rounded w-100">
+            </div>
+
+            <div class="bg-light p-4 rounded mb-4">
+                <h4 class="border-bottom pb-2">Description</h4>
+                <p class="lead">{$objProject->getDescription()}</p>
+
+                <div class="mt-4"  style="white-space: pre-wrap; overflow-wrap: break-word;">
+                    {$objProject->getContent()}
+                </div>
+            </div>
+			
+			
+			<!-- Images du projet  -->
+			<section id="galerie-projet">
+				<h2>Galerie du projet</h2>
+					<div class="row">
+						{foreach $arrImages as $image}
+						
+							{* On affiche l'image si elle est approuvée OU si l'utlilisateur possède le projet OU si l'utlilisateur est Modérateur ET que l'image est disponible sur le serveur*}
+							{if (($image.image_status == 'approuvé') || 
+								(isset($smarty.session.user) && $smarty.session.user.user_status == 2) || 
+								(isset($smarty.session.user) && $smarty.session.user.user_id == $objProject->getUser_id())) && (($smarty.env.IMG_PROJECT_PATH|cat:$objProject->getThumbnail())|file_exists)}
+								
+								<div class="col-md-4 mb-4">
+									<div class="card {if $image.image_status != 'approuvé'}border-warning shadow-none opacity-75{/if}">
+										
+										<img src="{$smarty.env.BASE_URL}/{$smarty.env.IMG_PROJECT_PATH}{$image.image_name}" class="card-img-top" alt="{$image.image_alt}">
+
+										{* Visible uniquement par le modérateur *}
+										{if isset($smarty.session.user.user_status) && $smarty.session.user.user_status == 2}
+											<div class="moderator-tools border-top pt-2 mt-2">
+												<div class="d-flex gap-2">
+													<a href="{$smarty.env.BASE_URL}/project/change_image_status/{$image.image_id}?status=approuvé" 
+													   class="btn btn-sm btn-success">Valider</a>
+													
+													<a href="{$smarty.env.BASE_URL}/project/delete_image/{$image.image_id}" 
+													   class="btn btn-sm btn-outline-danger" 
+													   onclick="return confirm('Supprimer définitivement ?')">Supprimer</a>
+												</div>
+											</div>
+										{/if}
+									</div>
+								</div>
+							{/if}
+						{foreachelse}
+							<p>Aucune image disponible pour ce projet.</p>
+						{/foreach}
+					</div>
+			</section>
+		
+		
+            <!-- Formulaire qui envoie la demande au contrôleur (sendEmail) -->
+            <div class="card shadow-sm p-4 mb-5">
+                <form method="post" action="{$smarty.env.BASE_URL}/project/sendEmail">
+
+                    <input type="hidden" name="project_id"
+                           value="{$objProject->getId()}">
+
+                    <input type="email" name="to_email"
+                           class="form-control mb-3"
+                           placeholder="Adresse email" required>
+
+                    <button type="submit" class="btn btn-primary w-100">
+                        Envoyer par email
+                    </button>
+
+                </form>
+            </div>
+
+        </div>
+
+        <!-- Sidebar : informations du créateur -->
+        <div class="col-lg-4">
+    <div class="card text-center shadow-sm p-4" {if $objProject->getCreatorName()|stripos:'minou' !== false}style=" background-color: #ff8c00 !important; /* Orange tigre */
+    background-image: repeating-linear-gradient(
+        45deg,
+        transparent,
+        transparent 30px,
+        rgba(0, 0, 0, 0.15) 30px,
+        rgba(0, 0, 0, 0.15) 60px
+    ) !important;
+    border: 2px solid #000 !important;
+    color: #000 !important;
+    position: relative;
+    z-index: 1;"{/if}>
+        
+        <a href="{$smarty.env.BASE_URL}/user/user/{$objProject->getCreatorName()}" class="text-decoration-none text-dark">
+            <img src="{$smarty.env.BASE_URL}/{$smarty.env.IMG_USER_PATH}{if ($smarty.env.IMG_USER_PATH|cat:($objProject->getUser_image()))|file_exists}{$objProject->getUser_image()}{else}images.jpg{/if}"
+                 class="rounded-circle mb-3 mx-auto "
+                 style="width:100px;height:100px;object-fit:cover;{if $objProject->getCreatorName()|stripos:'minou' !== false}
+    box-shadow: 0 0 0 4px #000; {/if}">
+        </a>
+        
+        <h5 {if $objProject->getCreatorName()|stripos:'minou' !== false}style="font-weight: 800 !important;
+    text-transform: uppercase;
+    color: #000 !important;"{/if}>
+            {$objProject->getCreatorName()}
+        </h5>
+
+        <p class="text-muted small">
+            Publié le {$objProject->getCreation_date()}
+        </p>
+
+        <a  href="mailto:{$arrProject['user_mail']}" class="btn btn-primary" {if $objProject->getCreatorName()|stripos:'minou' !== false}style="
+    background-color: #000 !important;
+    color: #ff8c00 !important;
+    border: none !important;
+    font-weight: bold !important;
+    transition: transform 0.2s;"{/if}>
+            Contacter le talent
+        </a>
+
+        {if $objProject->getCreatorName()|stripos:"minou" !== false}
+            <div class="small mt-2">MINOU NE MEURT JAMAIS ! 🐯</div>
+        {/if}
+    </div>
+</div>
+		{*Controle de l'utilisateur ainsi que du status du projet + Suppression disponible pour l'utilisateur possédant le projet*}
+		{if isset($smarty.session.user)}
+			{if ($smarty.session.user.user_status == 2 || $smarty.session.user.user_id == $objProject->getUser_id())}
+				<div class="border rounded text-center">
+						<a class="btn btn-sm btn-danger flex-fill" 
+                       href="{$smarty.env.BASE_URL}/project/delete/{$objProject->getId()}" 
+                       name="toDelete" 
+					   onclick="return confirm('Attention ! Êtes-vous sûr de vouloir supprimer ce projet ? Cette action est irréversible.');">
+					   Supprimer</a>
+			{/if}
+			
+			
+			{if $smarty.session.user.user_id == $objProject->getUser_id()}
+					<a class="btn btn-sm m-1 btn-warning" href="{$smarty.env.BASE_URL}/project/addedit_project/{$objProject->getId()}" name="addedit">Modifier le projet</a>
+			{/if}
+			
+			{*Conditions permettant au Modérateur de modifier le status d'un projet*}
+			{if $smarty.session.user.user_status == 2 && $objProject->getStatus() == "en_attente"}
+					<a class="btn btn-sm m-1 btn-success" href="{$smarty.env.BASE_URL}/project/accept/{$objProject->getId()}" name="toPublished">Accepter</a>
+					<a class="btn btn-sm m-1 btn-warning" href="{$smarty.env.BASE_URL}/project/refuse/{$objProject->getId()}" name="toRefused">Refuser</a>
+				</div>
+			{elseif $projectStatus == "refusé"}
+				<p class="text-danger fw-bold">Portfolio refusé</p>
+			{/if}
+		{/if}
+			
+        </div>
+		
+    </div>
+{/block}
\ No newline at end of file
diff --git a/views/search.tpl b/views/search.tpl
new file mode 100644
index 0000000..b0825bc
--- /dev/null
+++ b/views/search.tpl
@@ -0,0 +1,195 @@
+{extends file="views/layout.tpl"}
+{block name="title" append} - Rechercher{/block}
+
+{block name="h2"}Rechercher{/block}
+{block name="p"}Recherche de projets par mot clés, date, auteur et catégorie.{/block}
+
+
+{block name="content"}
+<section aria-label="Blog">
+			<h2 class="visually-hidden">Rechercher parmi les projets</h2>
+            <div class="row mb-2">
+				<section class="mb-5" aria-labelledby="search-heading">
+					<form name="formSearch" method="post" action="" class="border rounded p-4 bg-light">
+						<h3 id="search-heading" class="h4 mb-4">
+							<i class="fas fa-search me-2" aria-hidden="true"></i>
+							Rechercher des projets
+						</h3>
+						
+						<div class="row g-3">
+							<div class="col-md-6">
+								<label for="keywords" class="form-label">Mots-clés</label>
+								<input 
+									value="{$strKeywords}" type="text" class="form-control" id="keywords" name="keywords" placeholder="Design, IA, back-end" aria-describedby="keywords-help">
+								<small id="keywords-help" class="form-text text-muted">
+									Recherchez dans les titres et contenus
+								</small>
+							</div>
+							
+							<div class="col-md-6">
+								<label for="author" class="form-label">Auteurs</label>
+								<select class="form-select" id="author" name="author">
+									<option value="0" {if $intAuthor == 0}selected{/if}>Tous les auteurs</option>
+									{foreach $arrUser as $arrDetUser}
+										<option value="{$arrDetUser['user_id']}" 
+											{if $intAuthor == $arrDetUser['user_id']}selected{/if}
+										>
+											{$arrDetUser['user_firstname']} {$arrDetUser['user_name']}
+										</option>
+									{/foreach}
+								</select>
+							</div>
+
+							<div class="col-6">
+							<div class="col-6">
+								<fieldset>
+									<legend class="form-label">Recherche par date</legend>
+									<div class="form-check form-check-inline">
+										<input 
+											class="form-check-input" 
+											type="radio" 
+											name="period" 
+											id="period-exact" 
+											value="0" 
+											{if $intPeriod == 0}checked{/if}
+											aria-controls="date-exact date-range">
+										<label class="form-check-label" for="period-exact">
+											Date exacte
+										</label>
+									</div>
+									<div class="form-check form-check-inline">
+										<input 
+											class="form-check-input" 
+											type="radio" 
+											name="period" 
+											id="period-range" 
+											value="1"
+											{if $intPeriod == 1}checked{/if}
+											aria-controls="date-exact date-range">
+										<label class="form-check-label" for="period-range">
+											Période
+										</label>
+									</div>
+								</fieldset>
+							</div>
+							
+							
+							<div class="col-12" id="date-exact">
+								<label for="date" class="form-label">Date</label>
+								<input 
+									type="date" 
+									class="form-control" 
+									id="date" 
+									name="date"
+									aria-describedby="date-help"
+									value="{$strDate}" >
+								<small id="date-help" class="form-text text-muted">
+									Format: JJ/MM/AAAA
+								</small>
+							</div>
+							
+							<div id="date-range" style="display: none;">
+								<div class="row g-3">
+									<div class="col-md-6">
+										<label for="startdate" class="form-label">Date de début</label>
+										<input 
+											type="date" 
+											class="form-control" 
+											id="startdate" 
+											name="startdate"
+											value="{$strStartDate}" >
+									</div>
+									<div class="col-md-6">
+										<label for="enddate" class="form-label">Date de fin</label>
+										<input 
+											type="date" 
+											class="form-control" 
+											id="enddate" 
+											name="enddate"
+											value="{$strEndDate}" >
+									</div>
+								</div>
+							</div>
+							</div>
+							<div class="col-6">
+								<fieldset>
+									<legend class="form-label">Recherche par catégories</legend>
+									<div class="col-md-6">
+										<label for="author" class="form-label">Catégorie</label>
+										<select class="form-select" id="category" name="category">
+											<option value="0" {if $intCategory == 0}selected{/if}>Toutes les catégories</option>
+											{foreach $arrCategory as $arrDetCategory}
+												<option value="{$arrDetCategory['category_id']}" 
+													{if $intCategory == $arrDetCategory['category_id']}selected{/if}
+												>
+													{$arrDetCategory['category_name']}
+												</option>
+											{/foreach}
+										</select>
+									</div>
+								</fieldset>
+							</div>
+							<div class="col-12">
+								<button type="submit" class="btn btn-primary">
+									<i class="fas fa-search me-2" aria-hidden="true"></i>
+									Rechercher
+								</button>
+								<a href="{$smarty.env.BASE_URL}/project/search" class="btn btn-secondary ms-2">
+									<i class="fas fa-redo me-2" aria-hidden="true"></i>
+									Réinitialiser
+								</a>
+							</div>
+						</div>
+					</form>
+				</section>
+
+				<section aria-labelledby="articles-heading">
+            <h3 id="articles-heading" class="visually-hidden">Liste des projets</h3>
+            <div class="row mb-2">
+				{if count($arrProject) == 0}
+					<div class="alert alert-warning">
+						<p>Pas de résultats</p>
+					</div>
+				{/if}
+				{foreach from=$arrProjectToDisplay item=objProject}
+
+					{assign var="isAuthor" value=(isset($smarty.session.user) && $smarty.session.user.user_id == $objProject->getUser_id())}
+					{assign var="isModerator" value=(isset($smarty.session.user) && $smarty.session.user.user_status == 2)}
+					{assign var="isDeleted" value=($objProject->getDeleted_at() !== null)}
+					{assign var="isRefused" value=($objProject->getStatus() == "refusé")}
+
+					{if $isModerator 
+						|| ($isAuthor && !$isDeleted) 
+						|| (!$isRefused && !$isDeleted)}
+						
+						{include file="views/_partial/preview.tpl"}
+					{/if}
+
+				{/foreach}            
+            </div>
+        </section>
+	</div>
+</section>
+	<script>
+        const periodRadios = document.querySelectorAll('input[name="period"]');
+        const dateExact = document.getElementById('date-exact');
+        const dateRange = document.getElementById('date-range');
+        
+        function toggleDateFields() {
+            const selectedPeriod = document.querySelector('input[name="period"]:checked').value;
+            
+            if (selectedPeriod === '0') {
+                dateExact.style.display = 'block';
+                dateRange.style.display = 'none';
+            } else {
+                dateExact.style.display = 'none';
+                dateRange.style.display = 'block';
+            }
+        }
+        
+        periodRadios.forEach(radio => {
+            radio.addEventListener('change', toggleDateFields);
+        });
+        toggleDateFields();
+    </script>
+{/block}
diff --git a/views/signup.tpl b/views/signup.tpl
new file mode 100644
index 0000000..3d22e0d
--- /dev/null
+++ b/views/signup.tpl
@@ -0,0 +1,278 @@
+{extends file="views/layout.tpl"}
+{block name="title" append} - Inscription{/block}
+
+{block name="display" }style="display:none;"{/block}
+{block name="content"}
+<!-- Page : Inscription -->
+<div class="py-5">
+
+	<!-- Centrage horizontal du formulaire -->
+	<div class="row justify-content-center">
+		<div class="col-12 col-md-10 col-lg-6">
+
+			<!-- Carte contenant le formulaire d'inscription -->
+			<div class="card shadow-sm border-0 rounded-4 p-4 p-lg-5">
+
+				<!-- Titre principal de la page -->
+				<h1 class="h3 fw-bold mb-1">Inscription</h1>
+
+				<!-- Texte descriptif -->
+				<p class="text-secondary mb-4">
+					Créez votre compte utilisateur.
+				</p>
+
+				<!-- Formulaire d'inscription -->
+				<!-- Les données seront traitées côté serveur en PHP via la méthode POST -->
+				<form method="POST">
+					<div class="row g-3">
+
+						<!-- Champ : prénom de l'utilisateur -->
+						<div class="col-md-6">
+							<label class="form-label" for="user_firstname">
+								Prénom *
+							</label>
+							<input
+								class="form-control"
+								type="text"
+								id="user_firstname"
+								name="user_firstname"
+								value="{$objUser->getFirstname()|default:''}"
+								required
+							>
+						</div>
+
+						<!-- Champ : nom de l'utilisateur -->
+						<div class="col-md-6">
+							<label class="form-label" for="user_name">
+								Nom *
+							</label>
+							<input
+								class="form-control"
+								type="text"
+								id="user_name"
+								name="user_name"
+								value="{$objUser->getName()|default:''}"
+								required
+							>
+						</div>
+
+						<!-- Champ : pseudo -->
+						<div class="col-12">
+							<label class="form-label" for="user_pseudo">
+								Pseudo *
+							</label>
+							<div class="input-group">
+								<span class="input-group-text">@</span>
+								<input
+									class="form-control"
+									type="text"
+									id="user_pseudo"
+									name="user_pseudo"
+									value="{$objUser->getPseudo()|default:''}"
+									required
+								>
+							</div>
+						</div>
+
+						<!-- Champ : adresse e-mail -->
+						<div class="col-12">
+							<label class="form-label" for="user_mail">
+								Adresse e-mail *
+							</label>
+							<input
+								class="form-control"
+								type="email"
+								id="user_mail"
+								name="user_mail"
+								value="{$objUser->getMail()|default:''}"
+								required
+							>
+						</div>
+
+						<!-- Champ : mot de passe -->
+						<div class="col-12">
+							<label class="form-label" for="user_password">
+								Mot de passe *
+							</label>
+							<div class="position-relative">
+    						    <input
+    						        class="form-control pe-5" 
+    						        type="password"
+    						        id="user_pwd"
+    						        name="user_pwd"
+    						        required
+    						    >
+    						    <button
+    						        class="btn position-absolute top-50 end-0 translate-middle-y me-2 p-0 border-0 bg-transparent text-muted"
+    						        type="button"
+    						        onclick="togglePassword('user_pwd', this)"
+    						        style="z-index: 10;"
+    						    >
+    						        <i class="fa-solid fa-eye-slash"></i>
+    						    </button>
+    						</div>
+							<div class="mt-2 small text-muted">
+                            <p class="mb-1">Le mot de passe doit contenir :</p>
+                            <ul class="mb-0 ps-3">
+                                <li>Au moins <strong>15 caractères</strong></li>
+                                <li>Au moins <strong>une lettre majuscule</strong></li>
+                                <li>Au moins <strong>une lettre minuscule</strong></li>
+                                <li>Au moins <strong>un chiffre</strong></li>
+                                <li>Au moins <strong>un caractère spécial</strong> (# ? ! @ $ % ^ & * -)</li>
+                            </ul>
+                        </div>
+						</div>
+
+						<!-- Champ : confirmer le mot de passe -->
+						<div class="col-12">
+							<label class="form-label" for="pwd_confirm">
+								Confirmer le mot de passe *
+							</label>
+							<div class="position-relative">
+							<input
+								class="form-control"
+								type="password"
+								id="pwd_confirm"
+								name="pwd_confirm"
+								required
+							><button
+    						        class="btn position-absolute top-50 end-0 translate-middle-y me-2 p-0 border-0 bg-transparent text-muted"
+    						        type="button"
+    						        onclick="togglePassword('pwd_confirm', this)"
+    						        style="z-index: 10;"
+    						    >
+    						        <i class="fa-solid fa-eye-slash"></i>
+    						    </button>
+    						</div>
+						</div>
+
+						<!-- Champ optionnel : numéro de téléphone -->
+						<div class="col-12">
+							<label class="form-label" for="user_phone">
+								Téléphone
+							</label>
+							<input
+								class="form-control"
+								type="text"
+								id="user_phone"
+								name="user_phone"
+								value="{$objUser->getPhone()|default:''}"
+							>
+						</div>
+
+						<!-- Champ optionnel : profession de l'utilisateur -->
+						<div class="col-12">
+							<label class="form-label" for="user_work">
+								Profession
+							</label>
+							<input
+								class="form-control"
+								type="text"
+								id="user_work"
+								name="user_work"
+								value="{$objUser->getWork()|default:''}"
+							>
+						</div>
+
+						<!-- Champ optionnel : localisation de l'utilisateur -->
+						<div class="col-12">
+							<label class="form-label" for="user_location">
+								Localisation
+							</label>
+							<div class="position-relative">
+								<input
+									class="form-control"
+									type="text"
+									id="user_location"
+									name="user_location"
+									value="{$objUser->getLocation()|default:''}"
+									autocomplete="off"
+									placeholder="Ex : Paris, Lyon..."
+								>
+								<!-- Liste déroulante des suggestions -->
+								<ul
+									id="location-suggestions"
+									class="list-group position-absolute w-100 shadow-sm"
+									style="z-index: 1000; display: none; max-height: 220px; overflow-y: auto; top: 100%; left: 0;"
+								></ul>
+							</div>
+						</div>
+
+						<!-- Champ optionnel : phrase d'accroche -->
+						<div class="col-12">
+							<label class="form-label" for="user_description">
+								Phrase d'accroche
+							</label>
+							<textarea
+								class="form-control"
+								id="user_description"
+								name="user_description"
+								rows="3"
+							>{$objUser->getDescription()|default:''}</textarea>
+						</div>
+
+						<!-- Bouton de soumission du formulaire -->
+						<div class="col-12 d-grid mt-2">
+							<button type="submit" class="btn btn-primary btn-lg rounded-3">
+								Créer mon compte
+							</button>
+						</div>
+
+						<!-- Lien vers la page de connexion -->
+						<div class="col-12 text-center">
+							<small class="text-secondary">
+								Déjà un compte ?
+								<a class="link-primary" href="{$smarty.env.BASE_URL}/user/login">
+									Se connecter
+								</a>
+							</small>
+						</div>
+
+					</div>
+				</form>
+
+			</div>
+
+		</div>
+	</div>
+
+</div>
+<script>
+    const pwd = document.getElementById('user_pwd');
+
+    const rules = {
+        length:  { el: null, test: v => v.length >= 15 },
+        upper:   { el: null, test: v => /[A-Z]/.test(v) },
+        lower:   { el: null, test: v => /[a-z]/.test(v) },
+        digit:   { el: null, test: v => /[0-9]/.test(v) },
+        special: { el: null, test: v => /[#?!@$%^&*\-]/.test(v) }
+    };
+
+    // Associe chaque règle à son <li> dans l'ordre du DOM
+    const items = pwd.closest('.col-12').querySelectorAll('ul li');
+    const keys = Object.keys(rules);
+    items.forEach((li, i) => rules[keys[i]].el = li);
+
+    pwd.addEventListener('input', () => {
+        const v = pwd.value;
+        keys.forEach(key => {
+            const { el, test } = rules[key];
+            el.classList.toggle('text-success', test(v));
+            el.classList.toggle('text-danger',   !test(v));
+        });
+    });
+
+	function togglePassword(fieldId, btn) {
+	    const input = document.getElementById(fieldId);
+	    const icon = btn.querySelector('svg');
+	    if (input.type === 'password') {
+	        input.type = 'text';
+	        icon.classList.replace('fa-eye-slash', 'fa-eye');
+	    } else {
+	        input.type = 'password';
+	        icon.classList.replace('fa-eye', 'fa-eye-slash');
+	    }
+	}
+</script>
+{include file="views/_partial/apigeo.tpl"}
+{/block}
\ No newline at end of file
diff --git a/views/user.tpl b/views/user.tpl
new file mode 100644
index 0000000..89a165c
--- /dev/null
+++ b/views/user.tpl
@@ -0,0 +1,88 @@
+{extends file="views/layout.tpl"}
+
+{block name="content"}
+
+{assign var="isMinou" value=($user->getPseudo()|stripos:'minou' !== false)}
+
+<div class="w-100 align-self-start">
+
+    <!-- Profil -->
+    <section class="mb-5 p-4 rounded-3 {if $isMinou}border border-dark border-2{/if}"
+        {if $isMinou}style="background-color:#ff8c00; background-image:repeating-linear-gradient(45deg,transparent,transparent 30px,rgba(0,0,0,.15) 30px,rgba(0,0,0,.15) 60px);"{/if}>
+
+        <div class="row align-items-center g-4">
+
+            <!-- Avatar -->
+            <div class="col-md-3 text-center">
+                <img src="{$smarty.env.BASE_URL}/{$smarty.env.IMG_USER_PATH}{if ($smarty.env.IMG_USER_PATH|cat:($user->getImage()))|file_exists}{$user->getImage()}{else}images.jpg{/if}"
+                     alt="Avatar de {$user->getPseudo()}"
+                     class="rounded-circle border border-3 border-white shadow"
+                     style="width:180px; height:180px; object-fit:cover; {if $isMinou}outline:4px solid #000;{/if}">
+            </div>
+
+            <!-- Infos -->
+            <div class="col-md-9">
+                <h1 class="fw-bold mb-1 {if $isMinou}text-uppercase text-dark{/if}">
+                    {$user->getPseudo()}
+                </h1>
+                <p class="text-muted mb-3">{$user->getMail()}</p>
+
+                {if $user->getWork()}
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                        <i class="fa-solid fa-briefcase text-secondary"></i>
+                        <span>{$user->getWork()}</span>
+                    </div>
+                {/if}
+
+                {if $user->getLocation()}
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                        <i class="fa-solid fa-location-dot text-secondary"></i>
+                        <span>{$user->getLocation()}</span>
+                    </div>
+                {/if}
+
+                {if $user->getDescription()}
+                    <div class="d-flex align-items-center gap-2 mb-3">
+                        <i class="fa-regular fa-note-sticky text-secondary"></i>
+                        <span>{$user->getDescription()}</span>
+                    </div>
+                {/if}
+
+                {if isset($smarty.session.user) && $smarty.session.user.user_id == $user->getId()}
+                    <a href="{$smarty.env.BASE_URL}/user/edit"
+                       class="btn btn-sm {if $isMinou}btn-dark{else}btn-primary{/if}">
+                        ✏️ Modifier mon profil
+                    </a>
+                {/if}
+            </div>
+
+        </div>
+    </section>
+
+    <!-- Projets -->
+    <section>
+        <h2 class="mb-4 border-bottom pb-2">Les projets de {$user->getPseudo()}</h2>
+
+        <div class="row g-4">
+            {if count($arrProjectToDisplay) > 0}
+                {foreach $arrProjectToDisplay as $objProject}
+                    {assign var="isAuthor"    value=(isset($smarty.session.user) && $smarty.session.user.user_id == $objProject->getUser_id())}
+                    {assign var="isModerator" value=(isset($smarty.session.user) && $smarty.session.user.user_status == 2)}
+                    {assign var="isDeleted"   value=($objProject->getDeleted_at() !== null)}
+                    {assign var="isRefused"   value=($objProject->getStatus() == "refusé")}
+
+                    {if $isModerator || ($isAuthor && !$isDeleted) || (!$isRefused && !$isDeleted)}
+                        {include file="views/_partial/preview.tpl"}
+                    {/if}
+                {/foreach}
+            {else}
+                <div class="col-12">
+                    <p class="alert alert-info">Cet utilisateur n'a pas encore publié de projets.</p>
+                </div>
+            {/if}
+        </div>
+    </section>
+
+</div>
+
+{/block}
diff --git a/views/useredit.tpl b/views/useredit.tpl
new file mode 100644
index 0000000..7b83205
--- /dev/null
+++ b/views/useredit.tpl
@@ -0,0 +1,211 @@
+{extends file="views/layout.tpl"}
+
+{block name="content"}
+<!-- Page : Inscription -->
+
+
+<main class="container py-5">
+
+        <!-- Centrage horizontal du formulaire -->
+    <div class="row justify-content-center position-relative">
+        <div class="col-12 col-md-10 col-lg-6">
+
+                            <!-- Carte contenant le formulaire d'inscription -->
+            <div class="card shadow-sm border-0 rounded-4 p-4 p-lg-5">
+
+                            <!-- Titre principal de la page -->
+                <h1 class="h3 fw-bold mb-1">Modification du profil</h1>
+
+                {if (isset($arrError) && count($arrError) > 0) }
+	            	<div class="alert alert-danger">
+	            	{foreach $arrError as $strError}
+	            		<p>{$strError}</p>
+	            	{/foreach}
+	            	</div>
+	            {/if}
+                        <!-- Formulaire d'inscription -->
+                <!-- Les données seront traitées côté serveur en PHP via la méthode POST -->
+                <form method="POST" enctype="multipart/form-data">
+
+                    <div class="row g-3">
+                        <div class="col-md-6">
+                            <label class="form-label" for="user_firstname">
+                                                    Prénom 
+                            </label>
+                            <input
+                                                    class="form-control"
+                                                    type="text"
+                                                    id="user_firstname"
+                                                    name="user_firstname"
+                                                    value="{$objUser->getFirstname()}"
+                                                     >
+                        </div>
+
+                        <div class="col-md-6">
+                            <label class="form-label" for="user_name">
+                                                    Nom 
+                            </label>
+                            <input
+                                                    class="form-control"
+                                                    type="text"
+                                                    id="user_name"
+                                                    name="user_name"
+                                                    value="{$objUser->getName()}"
+                                                    
+                            >
+                        </div>
+
+                        <div class="col-12">
+                            <label class="form-label" for="user_pseudo">
+                                                    Pseudo
+                            </label>
+                            <div class="input-group">
+                            <span class="input-group-text">@</span>
+                            <input
+                                                        class="form-control"
+                                                        type="text"
+                                                        id="user_pseudo"
+                                                        name="user_pseudo"
+                                                         value="{$objUser->getPseudo()}"
+                                                        
+                            >
+                        </div>
+                    </div>
+                    <div class="col-12">
+                    <label class="form-label" for="image">Photo de profil</label>
+
+                    <div class="d-flex align-items-center gap-4 mb-3">
+                        <!-- Avatar preview -->
+                        <img
+                            id="preview-avatar"
+                            src="{$smarty.env.BASE_URL}/{if $objUser->getImage()}{$smarty.env.IMG_USER_PATH}{$objUser->getImage()}{else}assests/img/images.jpg{/if}"
+                            alt="Photo de profil"
+                            class="rounded-circle border"
+                            style="width:80px; height:80px; object-fit:cover;"
+                        >
+                            
+                        <!-- Actions à droite de l'avatar -->
+                        <div class="d-flex flex-column gap-2">
+                            <label for="image" class="btn btn-outline-secondary btn-sm mb-0">
+                                <i class="fa-solid fa-upload me-1"></i> Changer la photo
+                            </label>
+                            {if $objUser->getImage() != "images.jpg"}
+                                <button type="button" class="btn btn-outline-danger btn-sm" id="btn-delete-image">
+                                    <i class="fa-solid fa-trash me-1"></i> Supprimer la photo
+                                </button>
+                            {/if}
+                        </div>
+                    </div>
+                        
+                    <!-- Input file caché, déclenché par le label -->
+                    <input
+                        class="d-none"
+                        type="file"
+                        id="image"
+                        name="image"
+                        accept="image/jpeg, image/png, image/webp"
+                    >
+                    <input type="hidden" name="delete_image" id="delete_image" value="0">
+                    <div class="form-text">Formats acceptés : JPEG, PNG, WEBP. Laisser vide pour ne pas changer.</div>
+                </div>
+                    <div class="col-12">
+                        <label class="form-label" for="user_mail">
+                                                Adresse e-mail 
+                        </label>
+                        <input
+                                                class="form-control"
+                                                type="email"
+                                                id="user_mail"
+                                                name="user_mail"
+                                                value="{$objUser->getMail()}"
+                                                
+                        >
+                    </div>
+
+                                    
+                    <div class="col-12">
+                        <label class="form-label" for="user_phone">
+                                                Téléphone
+                        </label>
+                        <input
+                                                class="form-control"
+                                                type="text"
+                                                id="user_phone"
+                                                name="user_phone"
+                                                value="{$objUser->getPhone()}"
+                        >
+                    </div>
+
+                                    
+                    <div class="col-12">
+                        <label class="form-label" for="user_work">
+                                                Profession
+                        </label>
+                        <input
+                                                class="form-control"
+                                                type="text"
+                                                id="user_work"
+                                                name="user_work"
+                                                value="{$objUser->getWork()}"
+                        >
+                    </div>
+
+                                   
+                    <!-- Champ optionnel : localisation de l'utilisateur -->
+						<div class="col-12">
+							<label class="form-label" for="user_location">
+								Localisation
+							</label>
+							<div class="position-relative">
+								<input
+									class="form-control"
+									type="text"
+									id="user_location"
+									name="user_location"
+									value="{$objUser->getLocation()}"
+									autocomplete="off"
+									placeholder="Ex : Paris, Lyon..."
+								>
+								<!-- Liste déroulante des suggestions -->
+								<ul
+									id="location-suggestions"
+									class="list-group position-absolute w-100 shadow-sm"
+									style="z-index: 1000; display: none; max-height: 220px; overflow-y: auto; top: 100%; left: 0;"
+								></ul>
+							</div>
+						</div>
+
+                                    
+                    <div class="col-12">
+                        <label class="form-label" for="user_description">
+                                                Phrase d'accroche
+                        </label>
+                        <textarea
+                                                class="form-control"
+                                                id="user_description"
+                                                name="user_description"
+                                                rows="3"
+                        >
+                        {$objUser->getDescription()}
+                        </textarea>
+                    </div>
+                    <div class="col-12 d-grid mt-2">
+                        <button type="submit" class="btn btn-primary btn-lg rounded-3">
+                                            Confirmer
+                        </button>
+                    </div>
+
+                        
+                </form>
+
+            </div>
+                
+
+        </div>
+
+    </div>
+</div>
+</main>
+{include file="views/_partial/delphoto.tpl"}
+{include file="views/_partial/apigeo.tpl"}
+{/block}