First Commit

static/themes/00s/banner.css

@@ -0,0 +1,108 @@
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
+.banner {
+    width: 100%;
+    height: 150px;
+    background: linear-gradient(to bottom, #003366 0%, #0066cc 100%);
+    border: 2px solid #00ccff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    margin: auto;
+    box-shadow: 0 0 10px #00ccff;
+    animation: fadeIn 2s ease-in-out;
+}
+
+@keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+.galaxy-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: 
+        linear-gradient(90deg, 
+            rgba(0, 204, 255, 0.1) 0%, 
+            rgba(255, 255, 255, 0.1) 100%
+        ),
+        linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%),
+        repeating-linear-gradient(
+            0deg,
+            transparent 0%,
+            transparent 1px,
+            rgba(255, 255, 255, 0.1) 2px,
+            rgba(255, 255, 255, 0.1) 4px
+        );
+    z-index: 1;
+    animation: moveBackground 10s linear infinite;
+}
+
+@keyframes moveBackground {
+    0% { background-position: 0 0; }
+    100% { background-position: 100% 0; }
+}
+
+.banner-text {
+    font-family: 'Press Start 2P', cursive;
+    font-size: 36px;
+    color: #ffffff;
+    text-shadow: 2px 2px 0px #00ccff, 4px 4px 0px #0066cc;
+    z-index: 2;
+    animation: textGlow 1.5s ease-in-out infinite alternate;
+}
+
+@keyframes textGlow {
+    0% { text-shadow: 2px 2px 0px #00ccff, 4px 4px 0px #0066cc; }
+    100% { text-shadow: 2px 2px 10px #00ccff, 4px 4px 10px #0066cc; }
+}
+
+.slogan {
+    font-family: 'Press Start 2P', cursive;
+    font-size: 14px;
+    color: #ffffff;
+    text-shadow: 1px 1px 0px #00ccff;
+    z-index: 2;
+    margin-top: 10px;
+    text-align: center;
+    padding: 0 20px;
+    animation: fadeIn 3s ease-in-out;
+}
+
+/* Ajout des styles responsive */
+@media screen and (max-width: 768px) {
+    .banner {
+        height: 120px;
+    }
+
+    .banner-text {
+        font-size: 24px;
+        text-align: center;
+        padding: 0 10px;
+    }
+
+    .slogan {
+        font-size: 12px;
+        padding: 0 10px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .banner {
+        height: 100px;
+    }
+
+    .banner-text {
+        font-size: 18px;
+    }
+
+    .slogan {
+        font-size: 10px;
+    }
+}

static/themes/00s/bbcode.css

@@ -0,0 +1,78 @@
+
+.bbcode-bar, .bbcode-bar ul {
+    display: flex;
+}
+
+.bbcode-bar {
+    flex-direction: column;
+    margin: 0 -5px -5px 5px;
+    width: 99%;
+}
+
+.bbcode-bar ul {
+    flex-direction: row;
+    flex-wrap: wrap;
+    list-style-type: none;
+}
+
+.bbcode-bar li {
+    margin: 0 3px 3px 3px;
+}
+
+.bbcode-bar button {
+    margin: 0;
+}
+
+.draggable {
+    width: 600px;
+    height: 300px;
+    overflow: auto;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    z-index: 1000;
+    display: none;
+}
+
+.draggable .header {
+    position: fixed;
+    width: 596px;
+    padding: 5px;
+    cursor: move;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.draggable .close-button {
+    font-size: 20px;
+    cursor: pointer;
+}
+
+.draggable .content {
+    padding: 15px;
+    overflow-y: auto;
+}
+
+ul.bbcode-list {
+    margin-left: 50px;
+    display: flex;
+    flex-direction: column;
+}
+
+h1.h1-bbcode {
+    font-size: 1.8rem;
+}
+
+h2.h2-bbcode {
+    font-size: 1.5rem;
+    border: none;
+}
+
+h3.h3-bbcode {
+    font-size: 1.2rem;
+}
+
+fieldset.quote-bbcode {
+    padding: 10px;
+}

static/themes/00s/forms.css

@@ -0,0 +1,39 @@
+form {
+    display: flex;
+    flex-direction: column;
+}
+
+.btn, input[type="submit"], button {
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    width: auto;
+    max-width: max-content;
+    font-size: 0.8rem;
+    cursor: pointer;
+}
+
+.btn-small {
+    font-size: 0.5rem;
+}
+
+.btn-large {
+    font-size: 1.2rem;
+}
+
+input[type="text"], input[type="password"], input[type="email"], select, textarea {
+    padding: 5px;
+    margin: 5px;
+    width: 99%;
+    border: 1px solid;
+}
+
+input[type="text"], input[type="password"], input[type="email"], select {
+    height: 35px;
+}
+
+.form-inline {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 10px;
+}

static/themes/00s/gallery.css

@@ -0,0 +1,13 @@
+.gallery {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: flex-start; 
+}
+
+.gallery-item {
+    display: flex;
+    flex-direction: column;
+    max-width: 200px;
+}

static/themes/00s/games.css

@@ -0,0 +1,310 @@
+.card-game {
+    margin: 15px;
+}
+
+.card-game .header {
+    padding: 10px;
+    font-size: 1.1rem;
+    font-weight: 700;
+}
+
+.card-game .body {
+    padding: 10px;
+}
+
+.card-game .footer {
+    padding: 10px;
+    font-size: 0.8rem;
+}
+
+ul.inline {
+    display: flex;
+    flex-direction: row;
+}
+
+ul.inline li {
+    display: flex;
+    list-style: none;
+    margin: 0 10px 0 0;
+}
+
+.countdown {
+    font-size: 20px; 
+    text-align: center;
+}
+
+/* PETIT BAC */
+.game-bac-letter {
+    position: absolute;
+    right: 10px;
+    top: 60px; 
+    margin: auto;
+    padding: 10px;
+    font-size: 1.5rem;
+}
+
+table.bac {
+    width: 90%;
+    margin: auto;
+    border-collapse: collapse;
+}
+
+table.bac th, table.bac td {
+    text-align: center;
+    padding: 5px;
+}
+
+/* QUIZ */
+
+table.quiz {
+    width: 90%;
+    margin: auto;
+    border-collapse: collapse;
+}
+
+table.quiz th, table.quiz td {
+    text-align: center;
+    padding: 5px;
+}
+
+/* QUIZ */
+.quizes {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    padding: 20px;
+}
+
+.quiz-item {
+    flex: 1 1 300px;
+    padding: 15px;
+}
+
+.quiz-item h3 {
+    padding-bottom: 10px;
+    margin-top: 0;
+}
+
+.quiz-item p {
+    margin: 8px 0;
+    font-size: 0.9rem;
+}
+
+/* Quiz Styles */
+.quiz-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.quiz-title {
+    text-align: center;
+    margin-bottom: 30px;
+    font-size: 2rem;
+    padding-bottom: 10px;
+}
+
+.quiz-form {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.quiz-question {
+    margin-bottom: 20px;
+}
+
+.question-header {
+    padding: 10px 15px;
+    font-weight: bold;
+}
+
+.question-content {
+    padding: 20px;
+}
+
+.question-content h3 {
+    margin-bottom: 15px;
+    font-size: 1.2rem;
+}
+
+.choices-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 10px;
+}
+
+.choice-item {
+    display: flex;
+    align-items: center;
+    padding: 8px 8px 8px 25px;
+}
+
+.choice-item input[type="radio"] {
+    margin-right: 10px;
+}
+
+.choice-item label {
+    cursor: pointer;
+    flex: 1;
+}
+
+.submit-container {
+    text-align: center;
+    margin-top: 30px;
+}
+
+.submit-button {
+    margin: 10px auto;
+    padding: 12px 30px;
+    font-size: 1.1rem;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+/* Quiz Results Styles */
+.quiz-result-container {
+    max-width: 800px;
+    margin: 40px auto;
+    padding: 20px;
+}
+
+.quiz-result-card {
+    text-align: center;
+    padding: 20px;
+}
+
+.score-number {
+    font-size: 36px;
+    font-weight: bold;
+}
+
+.score-message {
+    font-size: 18px;
+    margin: 15px 0;
+}
+
+.quiz-score {
+    float: right;
+    font-size: 0.9rem;
+    padding: 2px 8px;
+}
+
+.progress-circle {
+    position: relative;
+    width: 200px;
+    height: 200px;
+}
+
+.circular-chart {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg); /* Fait démarrer la progression à midi */
+}
+
+.progress-path {
+    stroke-linecap: round;
+    transition: stroke-dasharray 0.5s ease;
+}
+
+
+.percentage-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 2rem;
+    font-weight: bold;
+}
+
+.progress-circle-container {
+    display: flex;
+    justify-content: center;
+    margin: 30px 0;
+}
+
+.progress-circle {
+    width: 200px;
+    height: 200px;
+    position: relative;
+}
+
+/* Responsive table styles */
+.responsive-table {
+    width: 100%;
+    margin-bottom: 1.5em;
+}
+
+.responsive-table input[type="text"] {
+    width: 100%;
+    padding: 8px;
+    box-sizing: border-box;
+}
+
+/* Mobile first styles */
+@media screen and (max-width: 600px) {
+    .responsive-table thead {
+        display: none;
+    }
+
+    .responsive-table tr {
+        margin-bottom: 20px;
+        display: block;
+        border: 1px solid #cccccc;
+    }
+
+    .responsive-table td {
+        display: block;
+        text-align: left;
+        border: none;
+        border-bottom: 1px solid #cccccc;
+    }
+
+    .responsive-table td:before {
+        content: attr(data-label);
+        font-weight: bold;
+        display: inline-block;
+        width: 100%;
+        margin-bottom: 5px;
+    }
+
+    .game-bac-letter {
+        position: static;
+        text-align: center;
+        margin: 1em auto;
+        width: fit-content;
+    }
+}
+
+/* Desktop styles */
+@media screen and (min-width: 601px) {
+    .responsive-table {
+        display: table;
+    }
+
+    .responsive-table thead {
+        display: table-header-group;
+    }
+
+    .responsive-table tbody {
+        display: table-row-group;
+    }
+
+    .responsive-table tr {
+        display: table-row;
+    }
+
+    .responsive-table td, 
+    .responsive-table th {
+        display: table-cell;
+    }
+
+    .responsive-table td:before {
+        content: none;
+    }
+
+    .responsive-table input[type="text"] {
+        width: 90%;
+    }
+}

static/themes/00s/grid.css

@@ -0,0 +1,59 @@
+/* Système de grille utilisant les flexbox */
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.row-xs {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    width: 80%;
+    margin: auto;
+}
+
+.col {
+    flex: 1;
+    margin: 10px;
+}
+
+/* classes pour les largeurs des colonnes */
+
+.col-1 { flex: 0 0 8.33%; }
+.col-2 { flex: 0 0 16.667%; }
+.col-3 { flex: 0 0 25%; }
+.col-4 { flex: 0 0 33.33%; }
+.col-5 { flex: 0 0 46.66%; }
+.col-6 { flex: 0 0 50%; }
+.col-7 { flex: 0 0 58.33%; }
+.col-8 { flex: 0 0 66.66%; }
+.col-9 { flex: 0 0 75%; }
+.col-10 { flex: 0 0 83.33%; }
+.col-11 { flex: 0 0 91.66%; }
+.col-12 { flex: 0 0 100%; }
+
+/* Responsive */
+
+@media screen and (max-width: 768px) {
+    .row {
+        flex-direction: column;
+    }
+
+    .col {
+        margin: 10px 0;
+    }
+
+    .menu ul.guestbook li span.date {
+        color: #646788;  
+    }
+
+    .col-2 {
+        order: 2;  /* Placer après .col-7 */
+    }
+
+    .col-7 {
+        order: 1;  /* Placer avant .col-1 */
+    }
+}

static/themes/00s/pm.css

@@ -0,0 +1,27 @@
+.table {
+    display: flex;
+    flex-direction: column;
+    width: 90%;
+    margin: 0 auto 10px auto;
+}
+
+.table .header {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    font-weight: 800;
+    font-size: 1rem;
+}
+
+.table .body {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+}
+
+.new-message {
+    display: inline-block;
+    font-size: 0.5rem;
+    margin-right: 10px;
+    padding: 3px;
+}

static/themes/00s/post.css

@@ -0,0 +1,30 @@
+.postmenu {
+    width: 300px;
+    margin: 10px;
+    float: right;
+    display: flex;
+    flex-direction: column;
+}
+
+.postmenu .header {
+    padding: 5px;
+    font-size: 1.2rem;
+    font-weight: 700;
+}
+
+.postmenu .body {
+    padding: 10px;
+    color: #333333;
+}
+
+.postmenu .body ul {
+    display: flex;
+    flex-direction: column;
+}
+
+.postmenu .body ul li {
+    display: flex;
+    flex-direction: column;
+    list-style-type: none;
+    padding: 5px 0;
+}

static/themes/00s/profile.css

@@ -0,0 +1,228 @@
+.profile-header {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+.profile-avatar {
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+}
+
+.profile-info {
+    flex: 1;
+}
+
+.profile-name {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+}
+
+.profile-username {
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+}
+
+.profile-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1rem;
+    margin: 2rem 0;
+    padding: 1rem;
+}
+
+.stat-item {
+    text-align: center;
+    padding: 1rem;
+}
+
+.stat-value {
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+
+.stat-label {
+    font-size: 0.9rem;
+    margin-top: 0.5rem;
+}
+
+.profile-bio {
+    line-height: 1.6;
+    margin: 2rem 0;
+    padding: 1rem;
+}
+
+.profile-contact {
+    display: flex;
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+.contact-button {
+    padding: 0.8rem 1.5rem;
+    cursor: pointer;
+}
+
+.profile-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 2rem;
+    margin-top: 2rem;
+}
+
+.profile-main {
+    padding: 2rem;
+}
+
+.profile-header {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+.avatar-container {
+    position: relative;
+    width: 150px;
+    height: 150px;
+}
+
+.level-badge {
+    position: absolute;
+    padding: 0.5rem;
+    width: 60px;
+    height: 60px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.8rem;
+}
+
+.level-number {
+    font-size: 1rem;
+    font-weight: bold;
+    z-index: 3;
+}
+
+.profile-info {
+    flex: 1;
+}
+
+.username {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+}
+
+.joined-date {
+    font-size: 0.9rem;
+}
+
+.profile-bio {
+    margin-top: 2rem;
+    padding-top: 2rem;
+}
+
+.bio-content {
+    line-height: 1.6;
+}
+
+/* Colonne de droite */
+.profile-stats {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.stats-card, .achievements-card {
+    padding: 1.5rem;
+}
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.stat-item {
+    text-align: center;
+    padding: 1rem;
+}
+
+.stat-value {
+    font-size: 1.5rem;
+    font-weight: bold;
+    display: block;
+}
+
+.stat-label {
+    font-size: 0.9rem;
+    margin-top: 0.5rem;
+}
+
+.achievements-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.badge-item {
+    text-align: center;
+    padding: 0.5rem;
+}
+
+.badge-item img {
+    width: 50px;
+    height: 50px;
+    margin-bottom: 0.5rem;
+}
+
+.badge-name {
+    font-size: 0.8rem;
+}
+
+.profile-actions {
+    margin-top: 2rem;
+    display: flex;
+    gap: 1rem;
+}
+
+.inventory {
+    padding: 1.5rem;
+    width: 98%;
+    margin: 10px auto;
+}
+
+.inventory-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 15px;
+    padding: 15px;
+}
+
+.inventory-item {
+    text-align: center;
+    margin: 15px;
+    padding: 15px;
+}
+
+.item-quantity {
+    font-size: 1.5rem;
+    font-weight: bold;
+    display: block;
+}
+
+/* Responsive */
+@media (max-width: 768px) { 
+    .profile-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}

static/themes/00s/shop.css

@@ -0,0 +1,69 @@
+.shop {
+    padding: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+}
+.card-shop {
+    margin: 15px 0;
+    padding: 15px;
+    width: 250px;
+    min-height: 380px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    margin-right: 15px;
+    vertical-align: top;
+    justify-content: space-between;
+}
+
+.card-shop img {
+    max-width: 220px;
+    margin-bottom: 10px;
+    margin: auto;
+}
+
+.card-shop .card-title {
+    margin-bottom: 10px;
+}
+
+.card-shop .card-text {
+    margin-bottom: 10px;
+}
+
+.card-shop .card-content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.card-shop .button-container {
+    margin-top: auto;
+    text-align: center;
+    padding-top: 15px;
+}
+
+a.btn-shop {
+    text-decoration: none;
+}
+
+.btn-shop-primary {
+    padding: 5px 15px;
+    font-weight: bold;
+    cursor: pointer;
+    display: inline-block;
+    min-width: 120px;
+}
+
+.btn-shop-secondary {
+    padding: 5px 15px;
+    font-weight: bold;
+    cursor: pointer;
+    display: inline-block;
+    min-width: 120px;
+}
+
+.btn-shop-large {
+    padding: 10px 20px;
+    height: 65px;
+}

static/themes/00s/structure.css

@@ -0,0 +1,455 @@
+/* Marges, paddings, dimensions, flexbox */
+*, html, body {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    /* margin: 20px 0 20px 0; */
+    padding: 10px;
+}
+
+p, ul {
+    padding: 10px;
+}
+
+p.date {
+    font-size: 0.8em;
+    text-align: right;
+}
+
+.notification {
+    padding: 10px;
+}
+
+.notification ul {
+    list-style-type: none;
+}
+
+.notification ul li {
+    padding: 10px;
+    margin: 5px 0;
+}
+
+.container, .menu {
+    padding: 0;
+    margin-bottom: 10px;
+}
+
+.container {
+    position: relative;
+}
+
+.menu h2 {
+    padding: 10px;
+    margin: 0 0 20px;
+    width: 100%;
+    display: block;
+    box-sizing: border-box;
+    text-align: center;
+    font-size: 2em;
+}
+
+.menu ul {
+    list-style: none;
+    width: 100%;
+}
+
+.container h2 {
+    padding: 10px;
+    margin: 0 0 20px;
+    width: 100%;
+    display: block;
+    box-sizing: border-box;
+    text-align: center;
+    font-size: 2em;
+}
+
+/* Menu horizontal */
+.menu-horizontal {
+    position: relative;
+    width: 100%;
+}
+
+.menu-horizontal ul {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    justify-content: center;
+}
+
+.menu-horizontal ul li {
+    position: relative;
+}
+
+.menu-horizontal ul li a {
+    display: block;
+    padding: 10px 20px;
+    text-decoration: none;
+}
+
+.menu-horizontal .dropdown {
+    display: none;
+    position: absolute;
+    min-width: 200px;
+    z-index: 1000;
+    top: 100%;
+    left: 0;
+}
+
+.menu-horizontal li:hover .dropdown {
+    display: block;
+}
+
+.menu-horizontal .dropdown li {
+    width: 100%;
+    border: none;
+}
+
+.menu-horizontal .dropdown a {
+    margin: 10px;
+    padding: 10px;
+    font-size: 0.8rem;
+}
+
+.badge {
+    padding: 2px;
+}
+
+/* Style du menu burger */
+.burger-menu {
+    display: none;
+    width: 100%;
+    padding: 10px;
+}
+
+.burger-icon {
+    background: none;
+    border: none;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.burger-icon span {
+    display: block;
+    width: 30px;
+    height: 3px;
+}
+
+@media screen and (max-width: 768px) {
+    body {
+        margin-top: 80px;
+    }
+
+    .burger-menu {
+        display: block;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        z-index: 1000;
+        padding: 10px;
+    }
+
+    .menu-horizontal {
+        display: none;
+        position: fixed;
+        top: 50px; /* Hauteur du burger menu */
+        left: 0;
+        width: 100%;
+        height: auto;
+        z-index: 999;
+    }
+
+    .menu-horizontal.active {
+        display: block;
+    }
+
+    .menu-horizontal ul {
+        flex-direction: column;
+        width: 100%;
+        padding: 0;
+    }
+
+    .menu-horizontal ul li {
+        width: 100%;
+        border-bottom: 1px solid #333;
+    }
+
+    .menu-horizontal ul li a {
+        padding: 15px;
+        display: block;
+        width: 100%;
+    }
+
+    /* Style des sous-menus sur mobile */
+    .menu-horizontal ul ul {
+        position: static;
+        display: none;
+        width: 100%;
+        background: #222;
+    }
+
+    .menu-horizontal li.active > ul {
+        display: block;
+    }
+
+    .menu-horizontal .dropdown {
+        position: static;
+        width: 100%;
+        box-shadow: none;
+    }
+
+    .menu-horizontal .dropdown li {
+        padding-left: 20px; /* Indentation pour les sous-menus */
+    }
+
+    .menu-horizontal li:hover .dropdown {
+        display: none; /* Désactive l'affichage au hover sur mobile */
+    }
+
+    .menu-horizontal li.active .dropdown {
+        display: block;
+    }
+
+    /* Animation du burger quand actif */
+    .burger-menu.active .burger-icon span:first-child {
+        transform: rotate(45deg) translate(8px, 6px);
+    }
+
+    .burger-menu.active .burger-icon span:nth-child(2) {
+        opacity: 0;
+    }
+
+    .burger-menu.active .burger-icon span:last-child {
+        transform: rotate(-45deg) translate(8px, -6px);
+    }
+
+    /* Styles des sous-menus sur mobile */
+    .menu-horizontal .dropdown {
+        position: static;
+        width: 100%;
+        box-shadow: none;
+        background: #222;
+    }
+
+    .menu-horizontal li:hover .dropdown {
+        display: none; /* Désactive l'affichage au hover sur mobile */
+    }
+
+    .menu-horizontal li.active .dropdown {
+        display: block; /* Affiche uniquement quand .active est présent */
+    }
+}
+
+@media screen and (min-width: 769px) {
+    .burger-menu {
+        display: none;
+    }
+
+    .menu-horizontal {
+        display: block !important;
+    }
+}
+
+.news-header, .post-card-header {
+    display: flex;
+    flex-direction: row;
+}
+
+.contrib {
+    margin: 10px;
+    padding: 10px;
+}
+
+.contrib a {
+    font-size: 1.3rem;
+}
+
+span.post-offline {
+    font-weight:bold;
+    margin:5px;
+    background-image: url('../../img/icons/shield-red-cross.png');
+    width: 25px;
+    height: 25px;
+}
+
+span.post-online {
+    font-weight:bold;
+    margin:5px;
+    background-image: url('../../img/icons/shield-green-v.png');
+    width: 25px;
+    height: 25px;
+}
+
+/* forum */
+.forum {
+    display: flex;
+    flex-direction: column;
+    margin: 0 0 10px 0;
+}
+
+.forum .row {
+    justify-content: space-between;
+}
+
+.forum h3 {
+    margin: 0;
+}
+
+.forum-header {
+    display: flex;
+    flex-direction: row;
+    border: 1px 1px 0 1px solid;
+    margin: 10px 10px -10px 10px;
+}
+
+.forum-column, .forum-column-detail {
+    flex: 1;
+    flex-direction: column;
+    border: 1px solid;
+    padding: 10px;
+}
+
+.forum-column:nth-child(1) {
+    flex: 2;
+}
+
+.forum-column:nth-child(2), .forum-column:nth-child(3) {
+    flex: 1;
+}
+
+.forum-column-detail:nth-child(1) {
+    flex: 1;
+}
+
+.forum-column-detail:nth-child(2) {
+    flex: 4;
+}
+
+.forum-column-detail ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.forum-body {
+    display: flex;
+    flex-direction: column;
+    border: 0 1px 1px 1px solid;
+    margin: 10px 10px -10px 10px;
+}
+
+.forum-body img {
+    max-width: 100%;
+}
+
+.forum-row {
+    display: flex;
+    flex-direction: row;
+    border: 0 1px 0 1px solid;
+}
+
+.stats_forum {
+    margin: 20px 0 10px 0;
+    border-top: 2px solid
+}
+
+.stats_forum ul {
+    list-style-type: none;
+    border: 1px solid;
+    padding: 10px;
+}
+
+.stats_forum ul li {
+    margin: 5px 0;
+}
+
+ul.breadcrumbs {
+    display: flex;
+    flex-direction: row;
+    font-size: 1rem;
+    list-style-type: none;
+    margin: 10px 0 10px 0;
+}
+
+ul.breadcrumbs li {
+    margin: 0 5px 0 5px;
+}
+
+ul.breadcrumbs li a {
+    text-decoration: none;
+}
+
+/* Pagination */
+ul.pagination {
+    display: flex;
+    flex-direction: row;
+    list-style-type: none;
+    margin: 10px 0 10px 0;
+}
+
+ul.pagination li.page-item {
+    margin: 0 5px 0 5px;
+}
+
+ul.pagination li.page-item a {
+    text-decoration: none;
+}
+
+.page-link {
+    padding: 5px 10px;
+    border: 2px solid;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    width: auto;
+    max-width: max-content;
+    font-size: 0.8rem;
+    cursor: pointer;
+}
+
+li.disabled {
+    pointer-events: none;
+    cursor: default;
+}
+
+.footer {
+    text-align: center;
+}
+
+table {
+    border-collapse: separate;
+    border-spacing: 2px;
+}
+
+td, th {
+    padding: 4px;
+}
+
+/* Ajout d'un compteur de visiteurs style années 2000 */
+.visitor-counter {
+    padding: 5px;
+    text-align: center;
+    margin: 10px 0;
+}
+
+@media screen and (max-width: 768px) {
+    .warning-announce-not-mobile-compatible {
+        display: block;
+        position: absolute;
+        padding: 10px;
+        margin: 10px;
+        border: 1px solid orange;
+        background-color: rgb(255, 215, 140);
+        color: rgb(152, 120, 60);
+        text-shadow: none;
+        z-index: 1000;
+    }
+}

static/themes/00s/styles.css

@@ -0,0 +1,883 @@
+:root {
+  --primary-color: #2b90d3;
+  --secondary-color: #393939;
+  --tertiary-color: #f5f5f5;
+  --success-color: #28a745;
+  --danger-color: #dc3545;
+  --warning-color: #ffc107;
+
+  --text-primary-color: #393939;
+  --text-secondary-color: #f5f5f5;
+  --text-tertiary-color: #2b90d3;
+
+  --bg-primary-color: #f5f5f5;
+  --bg-secondary-color: #393939;
+  --bg-grey-color: #4c4c4c;
+
+  --link-color: #2b90d3;
+  --link-hover-color: #28a745;
+  --link-danger-color: #dc3545;
+  --link-admin-color: #dc3545;
+  --link-new-item-color: #28a745;
+
+  --border-color-primary: #333639;
+  --border-color-secondary: #b8b8b8;
+}
+
+/* HTML & BODY */
+html, body {
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  color: var(--text-primary-color);
+  background-color: var(--bg-primary-color);
+}
+
+/* NOTIFICATIONS */
+.notification {
+
+}
+
+.notification ul li {
+
+}
+
+.notification li.success {
+
+}
+
+.notification li.error {
+
+}
+
+/* CONTAINER */
+.container {
+  border: 1px solid var(--border-color-primary);
+  border-radius: 2px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.container h2 {
+  background-color: var(--primary-color);
+  color: var(--text-secondary-color);
+  text-shadow: 0 0 10px rgba(153, 204, 255, 0.5);
+}
+
+.container h2::after {
+  content: '';
+}
+
+/* MENU */
+.menu-horizontal {
+  background: linear-gradient(to bottom, var(--bg-grey-color) 0%, var(--bg-secondary-color) 100%);
+  border: 1px solid #666;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+}
+
+.menu-horizontal ul {
+
+}
+
+.menu-horizontal ul li {
+
+}
+
+.menu-horizontal ul li a {
+  color: var(--text-secondary-color);
+  text-shadow: 1px 1px 0 var(--text-primary-color);
+}
+
+.menu-horizontal ul li a:hover {
+  color: var(--text-tertiary-color);
+}
+
+.menu-horizontal .dropdown {
+
+}
+
+.menu-horizontal li:hover .dropdown {
+  background-color: var(--bg-secondary-color);
+}
+
+.menu-horizontal .dropdown li {
+
+}
+
+.menu-horizontal .dropdown a {
+
+}
+
+.menu {
+  background-color: var(--bg-primary-color);
+  border: 1px solid var(--border-color-secondary);
+  border-radius: 2px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.menu h2 {
+  background-color: var(--secondary-color);
+  color: var(--text-secondary-color);
+}
+
+.menu ul {
+  
+}
+
+.menu ul li {
+
+}
+
+.menu ul li::before {
+
+}
+
+.menu ul li a {
+
+}
+
+.menu ul li a:hover {
+
+}
+
+.menu ul.guestbook {
+
+}
+
+.menu ul.guestbook li span.date {
+
+}
+
+.menu ul.guestbook li span.author {
+
+}
+
+.guestbook p span.author {
+
+}
+
+.new-item-menu::after {
+
+}
+
+.badge {
+
+}
+
+/* CONTRIB PAGE */
+.contrib {
+
+}
+
+.contrib a {
+
+}
+
+.contrib a:hover {
+
+}
+
+.movies, .musics, .tech {
+
+}
+
+.movies:hover, .musics:hover, .tech:hover {
+
+}
+
+.category {
+
+}
+
+.category:hover {
+
+}
+
+.games, .movies, .musics, .news_contrib, .tech {
+
+}
+
+.games:hover, .movies:hover, .musics:hover, .news_contrib:hover, .tech:hover {
+
+}
+
+.games::before, .movies::before, .musics::before, .news_contrib::before, .tech::before {
+
+}
+
+.games:hover::before, .movies:hover::before, .musics:hover::before, .news_contrib:hover::before, .tech:hover::before {
+
+}
+
+/* BBCODE */
+.bbcode-bar {
+
+}
+
+.draggable {
+
+}
+
+.draggable .header {
+
+}
+
+.draggable .close-button {
+
+}
+
+h2.h2-bbcode {
+
+}
+
+fieldset.quote-bbcode {
+
+}
+
+/* LINKS */
+a {
+
+}
+
+a:hover {
+
+}
+
+a.danger {
+
+}
+
+a.text-admin {
+
+}
+
+a.new-item-menu {
+
+}
+
+a.new-item-menu:hover {
+
+}
+
+a.new-item-menu::after {
+
+}
+
+/* FORUM */
+.forum h3 {
+
+}
+
+.forum .category-name {
+
+}
+
+.forum .forum-row {
+
+}
+
+.forum .forum-row:hover {
+
+}
+
+.forum .forum-header {
+
+}
+
+.stats_forum ul {
+
+}
+
+span.unread-badge {
+
+}
+
+/* Animation pour le badge non-lu */
+@keyframes pulse {
+
+}
+
+/* Animation pour le badge NEW */
+@keyframes blink {
+
+}
+
+/* FORMS */
+.btn {
+
+}
+
+input[type="submit"], button {
+
+}
+
+button, .btn-default {
+
+}
+
+button:hover, .btn-default:hover {
+
+}
+
+.btn::after, input[type="submit"]::after, button::after {
+
+}
+
+.btn:hover::after, input[type="submit"]:hover::after, button:hover::after {
+
+}
+
+.btn-add {
+
+}
+
+.btn-add:hover {
+
+}
+
+.btn-danger {
+
+}
+
+.btn-danger:hover {
+
+}
+
+.btn-warning {
+
+}
+
+.btn-warning:hover {
+
+}
+
+input[type="text"], input[type="password"], input[type="email"], select, textarea {
+
+}
+
+input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, select:focus, textarea:focus {
+
+}
+
+/* PAGINATION */
+.page-link {
+
+}
+
+li.active span {
+
+}
+
+li.disabled span {
+
+}
+
+/* FOOTER */
+.footer {
+
+}
+
+.footer p {
+
+}
+
+/* GAMES */
+.card-game {
+
+}
+
+.card-game:hover {
+
+}
+
+.card-game .header {
+
+}
+
+.card-game .body {
+
+}
+
+.card-game .footer {
+
+}
+
+.countdown {
+
+}
+
+.game-bac-letter {
+
+}
+
+table.bac, table.bac th, table.bac tr, table.bac td {
+
+}
+
+table.bac th {
+
+}
+
+table.quiz, table.quiz th, table.quiz tr, table.quiz td {
+
+}
+
+table.quiz th {
+
+}
+
+.quiz-item {
+
+}
+
+.quiz-item::after {
+
+}
+
+.quiz-item:hover {
+
+}
+
+.quiz-item h3 {
+
+}
+
+.quiz-item h3 a {
+
+}
+
+.quiz-item h3 a:hover {
+
+}
+
+.quiz-item p {
+
+}
+
+.quiz-item p:last-child {
+
+}
+
+.quiz-container {
+
+}
+
+.quiz-title {
+
+}
+
+.quiz-question {
+
+}
+
+.question-header {
+
+}
+
+.question-content h3 {
+
+}
+
+.choices-container {
+
+}
+
+.choice-item {
+
+}
+
+.choice-item:hover {
+
+}
+
+.choice-item input[type="radio"] {
+
+}
+
+.choice-item label {
+
+}
+
+.submit-container {
+
+}
+
+.submit-button {
+
+}
+
+.submit-button:hover {
+
+}
+
+.breadcrumbs {
+
+}
+
+.breadcrumbs li {
+
+}
+
+.breadcrumbs li a {
+
+}
+
+.breadcrumbs li a:hover {
+
+}
+
+.quiz-container {
+
+}
+
+.quiz-title {
+
+}
+
+.quiz-question {
+
+}
+
+.quiz-header {
+
+}
+
+.choice-item {
+
+}
+
+.choice-item:hover {
+
+}
+
+.choice-item label {
+
+}
+
+.submit-button {
+
+}
+
+.submit-button:hover {
+
+}
+
+.quiz-result-container {
+
+}
+
+.score-number {
+
+}
+
+.score-number.high { }
+.score-number.medium { }
+.score-number.low { }
+
+.score-message {
+
+}
+
+.quiz-score {
+
+}
+
+.progress-path {
+
+}
+
+.progress-path.high {
+
+}
+
+.progress-path.medium {
+
+}
+
+.progress-path.low {
+
+}
+
+.high { }
+
+.medium { }
+
+.low { }
+
+/* PM */
+.table .header {
+
+}
+
+.table .body {
+
+}
+
+.new-message {
+
+}
+
+/* POSTS */
+.postmenu {
+
+}
+
+.postmenu .header {
+
+}
+
+.postmenu .body ul li:hover {
+
+}
+
+.post-card {
+
+}
+
+.post-card-header {
+
+}
+
+.news-header {
+
+}
+
+/* PROFILE */
+.profile-avatar {
+
+}
+
+.profile-avatar:hover {
+
+}
+
+.profile-name {
+
+}
+
+.username {
+
+}
+
+.profile-stats {
+
+}
+
+.stat-value {
+
+}
+
+.stat-label {
+
+}
+
+.profile-bio {
+
+}
+
+.contact-button {
+
+}
+
+.contact-button:hover {
+
+}
+
+.profile-main {
+
+}
+
+.level-badge {
+
+}
+
+.joined-date {
+
+}
+
+.bio-content {
+
+}
+
+.stats-card, .achievements-card {
+
+}
+
+.stat-item {
+
+}
+
+.stat-value {
+
+}
+
+.stat-label {
+
+}
+
+.badge-name {
+
+}
+
+.inventory {
+
+}
+
+.inventory-item {
+
+}
+
+.inventory-item:hover {
+
+}
+
+.inventory-item a {
+
+}
+
+.inventory-item a:hover {
+
+}
+
+.item-quantity {
+
+}
+
+/* SHOP */
+.card-shop {
+
+}
+
+.card-shop:hover {
+
+}
+
+.card-shop .card-title {
+
+}
+
+.card-shop .card-text {
+
+}
+
+.btn-shop-primary {
+
+}
+
+.btn-shop-primary:hover {
+
+}
+
+.btn-shop-secondary {
+
+}
+
+.btn-shop-secondary:hover {
+
+}
+
+/* COMMONS */
+.deactivate {
+
+}
+
+/* Animation pixel pour les hovers */
+@keyframes pixel-pulse {
+
+}
+
+/* Animation supplémentaire pour les interactions */
+@keyframes item-hover {
+
+}
+
+/* QUIZ RESULTS */
+.quiz-result-card {
+
+}
+
+.progress-circle-container {
+
+}
+
+.progress-circle {
+
+}
+
+.circular-chart {
+
+}
+
+.circular-chart path {
+
+}
+
+.progress-path {
+
+}
+
+.progress-path.high {
+
+}
+
+.progress-path.medium {
+
+}
+
+.progress-path.low {
+
+}
+
+.percentage-text {
+
+}
+
+.score-details {
+
+}
+
+.score-details h3 {
+
+}
+
+.score-number {
+
+}
+
+.score-number.high {
+
+}
+
+.score-number.medium {
+
+}
+
+.score-number.low {
+
+}
+
+.score-message {
+
+}
+
+.actions {
+
+}
+
+.actions .btn {
+
+}
+
+.actions .btn:hover {
+
+}
+
+@keyframes glow-green {
+
+}
+
+@keyframes glow-yellow {
+
+}
+
+@keyframes glow-red {
+
+}

static/themes/00s/typo.css

@@ -0,0 +1,46 @@
+@import url('https://fonts.googleapis.com/css2?family=Tahoma:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Verdana:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Trebuchet+MS:wght@400;700&display=swap');
+
+body {
+    font-family: 'Verdana', sans-serif;
+    font-size: 14px;
+}
+
+h1, h2, h3, .breadcrumbs, .btn, input, select, textarea, button, .notification, .page-link, .guestbook p {
+    font-family: 'Trebuchet MS', sans-serif;
+}
+
+h1, h2, h3 {
+    font-family: 'Tahoma', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    line-height: 1.5;
+}
+
+.btn, button {
+    font-family: 'Trebuchet MS', sans-serif;
+    text-transform: uppercase;
+    font-size: 14px;
+}
+
+.menu h2 {
+    font-family: 'Verdana', sans-serif;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+}
+
+.container {
+    font-family: 'Verdana', sans-serif;
+}
+
+.blink {
+    animation: blink 1s linear infinite;
+}
+
+@keyframes blink {
+    0% { opacity: 1; }
+    50% { opacity: 0; }
+    100% { opacity: 1; }
+}