body {
    font-family: "Noto Sans", sans-serif;
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(.77,0,.18,1);
    background: linear-gradient(120deg, #eaf4ff 0%, #cbe2ff 100%);
    margin: 0;
    padding: 0;
}
body.page-loaded { opacity: 1; }

header {
    background: rgba(219,236,255,0.97);
    border-bottom: 2px solid #261800;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5vw;
    height: 70px;
    box-shadow: 0 2px 12px rgba(63,139,232,0.07);
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    box-sizing: border-box;
}
.logo-header {
    width: 150px;
    transition: transform 0.2s;
}
.logo-header:hover {
    transform: rotate(-1deg) scale(1.2);
}
nav { display: flex; gap: 10px; align-items: center; }
nav a {
    font-size: large;
    color: royalblue;
    text-decoration: none;
    border: royalblue 2px solid;
    background-color: #fff;
    border-radius: 7px;
    padding: 5px 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}
nav a:hover, nav a:focus, nav a:active {
    color: white;
    border: white 2px solid;
    background-color: royalblue;
    box-shadow: #6b8495 1px 1px 10px;
}

main { margin-top: 90px; min-height: 70vh; }

.prestiges-section {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 16px rgba(63, 139, 232, 0.10);
    max-width: 800px;
    margin: 40px auto 30px auto;
    padding: 38px 36px 32px 36px;
    border: 2px solid #3f8be8;
    animation: fadeIn 1.2s;
}
.prestiges-section h1 {
    font-family: "Exo 2", sans-serif;
    color: #3f8be8;
    font-size: 2.1rem;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
}
#prestige-search {
    width: 100%;
    padding: 12px 16px;
    font-size: 1.1em;
    border: 2px solid #3f8be8;
    border-radius: 8px;
    margin-bottom: 28px;
    outline: none;
    transition: border 0.2s;
    box-sizing: border-box;
}
#prestige-search:focus { border: 2px solid #FFD700; }

#prestige-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.prestige-card {
    background: linear-gradient(100deg, #fff 80%, #ffe7c7 100%);
    border: 2px solid #FFD700;
    border-radius: 14px;
    padding: 22px 28px 18px 28px;
    font-size: 1.08em;
    color: #261800;
    box-shadow: 0 2px 16px #bfaeae44;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
}
.prestige-card:hover {
    transform: translateY(-2px) scale(1.025);
    box-shadow: 0 6px 24px #bfaeae66;
}
.prestige-card img {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    border: 1.5px solid #FFD700;
    object-fit: cover;
    background: #fff;
    margin-right: 10px;
    flex-shrink: 0;
}
.prestige-info {
    flex: 1;
}
.prestige-title {
    font-family: "Exo 2", sans-serif;
    font-size: 1.2em;
    color: #3f8be8;
    margin: 0 0 8px 0;
    font-weight: bold;
}
.prestige-desc {
    white-space: pre-line;
    color: #222;
    margin: 0;
    font-size: 1em;
}

/* Ajout pour la modale de proposition */
#prestige-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0; top: 0; width: 100vw; height: 100vh;
}
#prestige-modal .modal-backdrop {
    position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; background: #0008;
}
#prestige-modal .modal-content {
    position: relative;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px #3f8be855;
    padding: 32px 28px 18px 28px;
    min-width: 320px;
    max-width: 70vw;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 2;
    animation: fadeIn 0.3s;
    margin: 0 auto; /* Ajouté pour garantir le centrage horizontal */
}
#prestige-modal .modal-close {
    position: absolute; right: 12px; top: 10px; background: none; border: none; font-size: 2em; color: #3f8be8; cursor: pointer;
}
#prestige-modal label { display: block; margin-top: 12px; font-weight: 500; color: #3f8be8; }
#prestige-modal input[type="text"], #prestige-modal input[type="url"], #prestige-modal textarea {
    width: 100%; padding: 7px 10px; margin-top: 4px; border: 1.5px solid #b3b3b3; border-radius: 6px; font-size: 1em; box-sizing: border-box;
}
#prestige-modal textarea { min-height: 60px; resize: vertical; }
#prestige-modal .modal-submit {
    margin-top: 18px; background: #3f8be8; color: #fff; border: none; border-radius: 7px; padding: 9px 18px; font-size: 1.08em; cursor: pointer;
    transition: background 0.2s;
}
#prestige-modal .modal-submit:hover { background: #FFD700; color: #222; }

/* Ajoute ce CSS à la fin de prestiges.css pour la section contributions et le footer */
/* filepath: vscode-vfs://github/Hypebot-discord/hypebot-dashboard/Pages/Accueil/prestiges.css */

.contrib-section {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 16px rgba(63, 139, 232, 0.10);
    max-width: 800px;
    margin: 30px auto 0 auto;
    padding: 32px 36px 18px 36px;
    border: 2px solid #FFD700;
    animation: fadeIn 1.2s;
}
.contrib-section h2 {
    font-family: "Exo 2", sans-serif;
    color: #FFD700;
    font-size: 1.5rem;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.contrib-ul {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}
.contrib-ul li {
    margin-bottom: 10px;
    font-size: 1.08em;
    color: #222;
}
.contrib-user {
    color: #3f8be8;
    font-weight: 500;
    font-family: "Exo 2", sans-serif;
}
.contrib-dev {
    color: #FFD700;
    font-weight: bold;
    text-shadow: 0 1px 6px #ffe06688;
}
.contrib-detail {
    color: #b3b3b3;
    font-size: 0.98em;
    margin-left: 2px;
}
.contrib-special {
    margin-top: 18px;
    font-size: 1em;
    color: #3f8be8;
    background: #eaf4ff;
    border-radius: 8px;
    padding: 10px 14px;
    border-left: 4px solid #FFD700;
}

/* Footer (repris depuis terms-service.css) */
footer {
    background: linear-gradient(120deg, #eaf4ff 60%, #cbe2ff 100%);
    border-top: 2px solid #261800;
    box-shadow: 0 -2px 24px rgba(63,139,232,0.10);
    padding: 38px 0 18px 0;
    margin-top: 60px;
    font-size: 1.08em;
    color: #222;
}
.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1100px;
    margin: 0 auto;
    gap: 30px;
    padding: 0 5vw;
}
.footer-logo-social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    min-width: 220px;
}
.footer-logo {
    width: 70px;
    border-radius: 18px;
    box-shadow: 0 2px 12px #3f8be855;
    background: #fff;
    padding: 6px;
}
.discord-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, #5865F2 60%, #3f8be8 100%);
    color: #fff;
    font-weight: bold;
    font-size: 1.1em;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    text-decoration: none;
    box-shadow: 0 2px 12px #3f8be855;
    transition: background 0.2s, transform 0.2s;
}
.discord-btn:hover {
    background: linear-gradient(90deg, #3f8be8 60%, #5865F2 100%);
    transform: translateY(-2px) scale(1.04);
    color: #fff;
}
.footer-infos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    align-items: flex-start;
    min-width: 220px;
}
.footer-infos a {
    color: #3f8be8;
    text-decoration: underline;
    font-weight: 500;
}
.footer-legals {
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-start;
    align-items: flex-start;
}
.footer-legals h4 {
    margin: 0 0 4px 0;
    font-size: 1.08em;
    color: #3f8be8;
    font-family: "Exo 2", sans-serif;
}
.footer-legals a {
    color: #3f8be8;
    text-decoration: underline;
    font-size: 1em;
    font-family: "Noto Sans", sans-serif;
    transition: color 0.2s;
}
.footer-legals a:hover {
    color: royalblue;
}
@media (max-width: 900px) {
    header { position: static; width: 100%; padding: 0 3vw; }
    main { margin-top: 0; }
    .prestiges-section { margin: 24px 2vw 18px 2vw; padding: 18px 8vw 18px 8vw; }
    .contrib-section { margin: 18px 2vw 0 2vw; padding: 14px 8vw 10px 8vw; }
    .footer-content {
        flex-direction: column;
        align-items: center;
        gap: 18px;
        padding: 0 2vw;
    }
    .footer-infos { align-items: center; text-align: center; }
    .footer-legals { align-items: center; text-align: center; margin-top: 10px; }
}
@media (max-width: 600px) {
    .prestiges-section { padding: 12px 2vw 12px 2vw; }
    .prestiges-section h1 { font-size: 1.3rem; margin-bottom: 20px; }
    #prestige-list { gap: 12px; }
    .prestige-card { flex-direction: column; align-items: center; padding: 14px 8px; }
    .prestige-card img { margin: 0 0 10px 0; }
    #prestige-modal .modal-content { padding: 12px 4vw 12px 4vw; min-width: 0; }
    .contrib-section { padding: 8px 2vw 8px 2vw; }
    .contrib-section h2 { font-size: 1.1rem; }
    footer { font-size: small; }
    .footer-content { gap: 12px; padding: 0 2vw; }
    .footer-logo-social { min-width: 180px; }
    .footer-infos, .footer-legals { align-items: center; text-align: center; }
}