Ajouts de la maquette web sur le nouveau git (suite au bug de l'ancien répertoire git

MaquetteWEB/css/PROF/paiements.css

@@ -0,0 +1,205 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+}
+.dashboard-container {
+    max-width: 1500px;
+    margin: auto;
+    padding: 20px;
+}
+.header {
+    background-color: #a17b12;
+    color: white;
+    padding: 10px 0;
+    text-align: center;
+}
+.section-header {
+    background-color: #f8f8f8;
+    padding: 10px;
+    border-left: 5px solid #a17b12;
+    margin-bottom: 20px;
+}
+.card {
+    background-color: white;
+    padding: 15px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    margin-bottom: 20px;
+}
+.table-container {
+    overflow-x: auto;
+}
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+table th, table td {
+    padding: 12px;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+}
+table th {
+    background-color: #f2f2f2;
+}
+.status-valide {
+    color: green;
+    font-weight: bold;
+}
+.status-attente {
+    color: red;
+    font-weight: bold;
+}
+/* Styles pour les graphiques */
+.chart-container {
+    width: 100%;
+    margin: 20px 0;
+}
+/* Styles pour le formulaire */
+.contact-form {
+    margin-top: 30px;
+    padding: 20px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+.contact-form h3 {
+    margin-bottom: 15px;
+}
+.contact-form select, .contact-form input, .contact-form textarea {
+    width: 100%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+.contact-form button {
+    background-color: #a17b12;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+}
+.contact-form button:hover {
+    background-color: #5f490b;
+}
+.footer {
+    text-align: center;
+    padding: 10px 0;
+    margin-top: 20px;
+    background-color: #a17b12;
+    color: white;
+}
+/* Styles pour le popup */
+        /* Styles pour le popup */
+        .popup {
+            display: none;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: #fff; /* Blanc */
+            padding: 20px;
+            border: 2px solid #a17b12; /* Bordure couleur thème */
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+            z-index: 1000;
+            border-radius: 10px;
+            text-align: center;
+            width: 300px; /* Largeur fixe */
+        }
+        .popup h4 {
+            margin: 0 0 15px 0;
+            font-size: 1.5em;
+            color: #a17b12; /* Couleur de texte */
+        }
+        .popup p {
+            font-size: 1.2em;
+            margin: 5px 0; /* Espacement entre les lignes */
+            color: #333; /* Couleur de texte */
+        }
+        .popup button {
+            background-color: #a17b12;
+            color: white;
+            border: none;
+            padding: 10px;
+            cursor: pointer;
+            border-radius: 5px; /* Arrondir les coins */
+            margin-top: 15px; /* Espacement au-dessus du bouton */
+        }
+        .popup button:hover {
+            background-color: #5f490b;
+        }
+
+.header {
+    background-color: #a17b12;
+    color: white;
+    padding: 10px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+}
+
+.logo-container img {
+    width: 200px;
+    height: 50px;
+    cursor: pointer;
+}
+.categories {
+    display: flex;
+    gap: 15px;
+    margin-left: 50px;
+}
+.categories a {
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+}
+.categories a:hover {
+    text-decoration: underline;
+}
+.user-section {
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+}
+.user-name {
+    margin-right: 15px;
+    font-size: 16px;
+    font-weight: bold;
+}
+.logout-container {
+    display: flex;
+    align-items: center;
+}
+.logout-container img {
+    width: 25px;
+    height: 25px;
+    margin-left: 10px;
+    cursor: pointer;
+}
+
+th[data-sort] {
+    cursor: pointer;
+    position: relative;
+    padding-right: 20px; /* Espace pour l'icône */
+}
+
+/* Icône par défaut (tri croissant) */
+th::after {
+    content: "▲";
+    position: absolute;
+    right: 10px;
+    font-size: 12px;
+    color: gray;
+}
+
+/* Classe pour tri croissant */
+th.ascending::after {
+    content: "▲"; /* Tri croissant */
+    color: black; /* Icône active */
+}
+
+/* Classe pour tri décroissant */
+th.descending::after {
+    content: "▼"; /* Tri décroissant */
+    color: black; /* Icône active */
+}