From db76a36e8f81832e2bec9ddf58c60f39228bfe86 Mon Sep 17 00:00:00 2001
From: TRUkae <thisistheloud1@gmail.com>
Date: Wed, 17 Sep 2025 11:49:15 +0000
Subject: [PATCH] Upload files to "projets"

---
 projets/styles.css | 271 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 271 insertions(+)
 create mode 100644 projets/styles.css

diff --git a/projets/styles.css b/projets/styles.css
new file mode 100644
index 0000000..bdbcd5f
--- /dev/null
+++ b/projets/styles.css
@@ -0,0 +1,271 @@
+/* 1. Général et fond */
+body {
+  margin: 0;
+  background: linear-gradient(135deg, #0d1120 0%, #1b2250 100%);
+  font-family: 'Segoe UI', Arial, sans-serif;
+  color: #f5f6fa;
+}
+
+/* 2. Conteneur principal centré et responsive */
+.page-container {
+  max-width: 820px;
+  margin: 2rem auto;
+  padding: 4rem 2rem; /* vert (plus grand = moins haut) / hori */
+  box-sizing: border-box;
+  width: 95vw;
+}
+
+
+/* 3. Navigation supérieure */
+.top-nav {
+  display: flex;
+  gap: 2.5rem;
+  justify-content: center;
+  padding: 1.2rem 0 0.5rem 0;
+  background: rgba(10, 20, 50, 0.85);
+  border-bottom: 2px solid #2a3ca6;
+  box-shadow: 0 2px 12px #2a3ca655;
+  border-radius: 12px 12px 0 0;
+  margin-bottom: 1.5rem;
+}
+.top-nav a {
+  color: #6ec6ff;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 1.15rem;
+  letter-spacing: 1px;
+  transition: color 0.2s, text-shadow 0.2s;
+}
+.top-nav a:hover {
+  color: #fff;
+  text-shadow: 0 0 8px #6ec6ff, 0 0 2px #fff;
+}
+
+/* 4. Titre centré */
+.page-title {
+  text-align: center;
+  font-size: 2.3rem;
+  font-weight: 700;
+  margin-bottom: 2.2rem;
+  letter-spacing: 1px;
+  color: #e6ecff;
+  text-shadow: 0 0 16px #2a3ca6, 0 2px 12px #000a;
+  word-break: break-word;
+}
+
+/* 5. Onglets et barre de recherche (centrés) */
+.tabs-search-bar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 1.2rem;
+  margin-bottom: 2.2rem;
+}
+.tabs {
+  display: flex;
+  gap: 1.1rem;
+  justify-content: center;
+}
+.tab {
+  background: linear-gradient(90deg, #232b4a 0%, #2a3ca6 100%);
+  color: #bfc7e6;
+  border: 2px solid #2a3ca6;
+  border-radius: 12px 12px 0 0;
+  padding: 0.7rem 2.3rem;
+  font-size: 1.05rem;
+  font-weight: 600;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: background 0.2s, color 0.2s, opacity 0.2s, border-color 0.2s;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+.tab.active {
+  background: linear-gradient(90deg, #3e51b5 0%, #6ec6ff 100%);
+  color: #fff;
+  opacity: 1;
+  border-color: #6ec6ff;
+  box-shadow: 0 2px 8px #6ec6ff55, 0 0 8px #fff2;
+}
+.tab:not(.active):hover {
+  opacity: 1;
+  background: #28325a;
+  color: #e6ecff;
+  border-color: #3e51b5;
+}
+
+/* 6. Barre de recherche */
+.search-bar {
+  background: #232b4a;
+  color: #e6ecff;
+  border: 2px solid #2a3ca6;
+  border-radius: 20px;
+  padding: 0.7rem 1.5rem;
+  font-size: 1rem;
+  width: 220px;
+  max-width: 100vw;
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  box-shadow: 0 2px 8px #3949ab22;
+}
+.search-bar:focus {
+  border-color: #6ec6ff;
+  box-shadow: 0 0 10px #6ec6ff88;
+}
+.search-bar::placeholder {
+  color: #bfc7e6;
+  opacity: 0.7;
+}
+
+/* 7. Contenu des onglets */
+.tab-content {
+  background: rgba(20, 30, 60, 0.92);
+  border-radius: 0 0 14px 14px;
+  box-shadow: 0 6px 32px #2a3ca644;
+  padding: 2.2rem 2.5rem;
+  margin-bottom: 2rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+.tab-panel {
+  display: none;
+}
+.tab-panel.active {
+  display: block;
+  animation: fadeInPanel 0.4s;
+}
+@keyframes fadeInPanel {
+  from { opacity: 0; transform: translateY(20px);}
+  to   { opacity: 1; transform: translateY(0);}
+}
+
+/* 8. Sections et checklist */
+.section {
+  margin-bottom: 2.5rem;
+  background: #181c30;
+  border-radius: 10px;
+  padding: 1.2rem 1.5rem;
+  box-shadow: 0 2px 8px #232b4a22;
+  border-left: 4px solid #2a3ca6;
+}
+.section-title {
+  font-size: 1.2rem;
+  font-weight: 700;
+  margin-bottom: 1.1rem;
+  color: #bfc7e6;
+  letter-spacing: 0.5px;
+}
+.subsection {
+  margin-bottom: 1.2rem;
+  background: #232b4a;
+  border-radius: 7px;
+  padding: 0.9rem 1.2rem;
+}
+.subsection-title {
+  font-size: 1.07rem;
+  font-weight: 600;
+  margin-bottom: 0.7rem;
+  color: #e6ecff;
+}
+.checklist {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.checklist li {
+  margin-bottom: 0.6rem;
+  padding: 0.3rem 0.7rem;
+  border-radius: 4px;
+  transition: background 0.2s;
+}
+.checklist li.highlight {
+  background: linear-gradient(90deg, #2a3ca622, #6ec6ff44);
+  color: #fff;
+  font-weight: bold;
+}
+.checklist label {
+  cursor: pointer;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.checklist input[type="checkbox"] {
+  accent-color: #3e51b5;
+  width: 1.1rem;
+  height: 1.1rem;
+}
+.checklist a {
+  color: #8eaaff;
+  text-decoration: underline;
+  font-weight: 600;
+  transition: color 0.2s;
+}
+.checklist a:hover {
+  color: #e6ecff;
+}
+
+/* 9. Responsive : adaptation pour petits écrans */
+@media (max-width: 900px) {
+  .page-container {
+    padding: 1.2rem 0.5rem;
+    max-width: 99vw;
+  }
+  .tab-content {
+    padding: 1.2rem 0.5rem;
+  }
+}
+@media (max-width: 700px) {
+  .top-nav {
+    flex-direction: column;
+    gap: 0.7rem;
+    font-size: 1rem;
+    padding: 0.7rem 0 0.3rem 0;
+  }
+  .page-title {
+    font-size: 1.5rem;
+    margin-bottom: 1.1rem;
+  }
+  .tabs-search-bar {
+    flex-direction: column;
+    gap: 0.7rem;
+    align-items: center;
+  }
+  .tabs {
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
+    align-items: center;
+  }
+  .tab {
+    width: 100%;
+    min-width: unset;
+    font-size: 1rem;
+    border-radius: 8px;
+    text-align: center;
+  }
+  .search-bar {
+    width: 100%;
+    max-width: 100vw;
+    font-size: 1rem;
+    margin-top: 0.7rem;
+  }
+  .tab-content {
+    padding: 0.7rem 0.2rem;
+  }
+  .section,
+  .subsection {
+    padding: 0.7rem 0.3rem;
+  }
+}
+@media (max-width: 400px) {
+  .page-title {
+    font-size: 1.1rem;
+    margin: 1rem 0;
+  }
+  .tab {
+    font-size: 0.95rem;
+    padding: 0.5rem 0.7rem;
+  }
+}