/* ===== STYLE ANNÉES 2000 - vdepontac ===== */
/* Override du style VGUI pour un look rétro années 2000 */

/* Animation blink (remplace <blink> déprécié) */
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}
.blink {
    animation: blink 1.5s step-end infinite;
}

/* Curseur personnalisé années 2000 */
body, html {
    cursor: url("assets/Cursor_normal.cur"), default;
}
a, button, .btn, input[type="submit"], input[type="button"] {
    cursor: url("assets/Cursor_link.cur"), pointer;
}
.Loading, .disabled, [disabled] {
    cursor: url("assets/Cursor_busy.cur"), wait;
}
.noselect {
    cursor: url("assets/Cursor_blocked.cur"), not-allowed;
}

/* Fond avec motif répété années 2000 + starfield subtil */
@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

body {
    color: #000000;
    font-family: "Comic Sans MS", "Arial", sans-serif;
    font-size: 12px;
    background: #c0c0c0 url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0z' fill='%23d0d0d0'/%3E%3Cpath d='M0 0h1v20H0z' fill='%23e0e0e0'/%3E%3Cpath d='M0 0h20v1H0z' fill='%23e0e0e0'/%3E%3C/svg%3E") repeat;
    padding: 8px;
    margin: 0;
    line-height: 1.5;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(2px 2px at 5% 15%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 25% 35%, rgba(255,200,255,0.5), transparent),
        radial-gradient(2px 2px at 45% 55%, rgba(200,255,255,0.6), transparent),
        radial-gradient(2px 2px at 65% 25%, rgba(255,255,200,0.5), transparent),
        radial-gradient(2px 2px at 85% 75%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 15% 85%, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 95% 45%, rgba(255,200,255,0.5), transparent);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: twinkle 3s ease-in-out infinite;
}

.vgui-font {
    color: #000000;
    font-family: "Comic Sans MS", "Arial", sans-serif;
    font-size: 12px;
}

/* Wrapper années 2000 : largeur fixe, centré, bordure bevelée */
#wrapper {
    width: 800px;
    margin: 0 auto;
    background: linear-gradient(180deg, #e8e8e8 0%, #c0c0c0 100%);
    min-height: 100vh;
    border: 3px solid #ffffff;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.3), inset 1px 1px 0 #ffffff;
    position: relative;
    z-index: 1;
}

/* Header avec effet bevelé */
#header {
    background: linear-gradient(180deg, #4169e1 0%, #1e90ff 50%, #0000cd 100%);
    border-bottom: 2px solid #000080;
    padding: 12px;
}

.topbar-logo {
    display: flex;
    align-items: center;
}

.topbar h1, .topbar-logo a:not(.btn-home-big), .site-title {
    color: #ffffff !important;
    text-shadow: 2px 2px 2px #000000;
    font-family: "Impact", "Arial Black", sans-serif !important;
    font-size: 16px;
    margin: 0;
}

/* Navigation menu style années 2000 */
#bmenum {
    background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 100%);
    border-top: 2px outset #808080;
    border-bottom: 2px inset #404040;
    padding: 6px 12px;
}

#main_menu a {
    color: #00ffff !important;
    text-decoration: underline;
}

#main_menu a:hover, #main_menu a.active {
    color: #ff69b4 !important;
    background: #333333 !important;
}

#main_menu ul ul {
    background: #2a2a2a;
    border: 2px outset #808080;
}

/* Liens : bleu non visité, violet visité (classique années 2000) */
a {
    color: #0000ff;
    text-decoration: underline;
}

a:visited {
    color: #800080;
}

a:hover {
    color: #ff0000;
}

/* Boutons avec effet 3D bevelé */
input[type=button]:not(:active), .btn {
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #404040;
    border-right: 2px solid #404040;
    color: #000000;
    background: linear-gradient(180deg, #c0c0c0 0%, #a0a0a0 100%);
    padding: 6px 12px;
    font-size: 12px;
    font-family: "Arial", sans-serif;
}

input[type=button]:active, .btn:hover {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-bottom: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    background: linear-gradient(180deg, #a0a0a0 0%, #c0c0c0 100%);
}

/* Inputs style Windows 98 */
input:not([type=button]), input[type="text"], input[type="email"], textarea {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-bottom: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    background: #ffffff;
    color: #000000;
}

/* Frame / conteneurs */
.frame {
    background: #ffffff;
    border: 2px inset #808080;
    padding: 12px;
    margin: 8px;
}

/* Hero section */
.hero {
    background: linear-gradient(135deg, #4169e1 0%, #9370db 100%);
    border: 2px outset #a0a0a0;
    padding: 20px;
    margin: 12px 0;
    text-align: center;
}

.hero-title {
    color: #ffffff !important;
    font-family: "Impact", "Arial Black", sans-serif !important;
    font-size: 24px !important;
    text-shadow: 3px 3px 3px #000000;
}

.title-highlight {
    color: #ffff00 !important;
    text-shadow: 2px 2px 2px #000000;
}

.hero-subtitle {
    color: #ffff00 !important;
    font-size: 14px !important;
}

.hero-description {
    color: #ffffff !important;
    font-size: 12px !important;
}

/* Project cards */
.project-card {
    background: #f0f0f0;
    border: 2px outset #a0a0a0;
    padding: 12px;
    margin-bottom: 10px;
}

.project-card:hover {
    background: #e8e8ff;
    border: 2px inset #808080;
}

.project-header h3 {
    color: #0000ff !important;
    font-family: "Arial", sans-serif !important;
}

.project-content p {
    color: #000000 !important;
}

.project-meta {
    color: #333333 !important;
}

.project-meta a {
    color: #0000ff !important;
}

.project-meta a:visited {
    color: #800080 !important;
}

.project-meta-muted {
    color: #555555 !important;
}

.about-text {
    color: #000000 !important;
    font-size: 10px;
    line-height: 1.4;
    margin: 0;
}

.project-badge {
    border: 1px solid #000000;
    font-family: "Arial", sans-serif !important;
}

.project-badge--playable,
.project-badge--completed {
    background: #00ff00 !important;
    color: #000000 !important;
}

.project-badge--early {
    background: #ffff00 !important;
    color: #000000 !important;
}

.project-badge--cancelled,
.project-badge--lost {
    background: #ff0000 !important;
    color: #ffffff !important;
}

/* Badge "Under construction" pour projets WIP/Alpha */
.project-badge--early,
.project-badge.wip,
.project-badge.alpha {
    position: relative;
}
.project-badge--early::after,
.project-badge.wip::after,
.project-badge.alpha::after {
    content: " ✧";
    font-size: 10px;
    animation: blink 1.5s step-end infinite;
}

/* Dividers animés entre sections (années 2000) */
@keyframes divider-move {
    0% { background-position: 0 0; }
    100% { background-position: 20px 0; }
}

.section-divider {
    height: 4px;
    border: none;
    margin: 24px 0;
    background: repeating-linear-gradient(
        90deg,
        #ff69b4 0px,
        #00ffff 4px,
        #ffff00 8px,
        #00ff00 12px,
        #ff69b4 16px
    );
    background-size: 20px 4px;
    animation: divider-move 2s linear infinite;
}

/* Guestbook (livre d'or) */
.guestbook-form {
    margin: 24px 0;
}
.guestbook-success {
    background: #00ff00 !important;
    color: #000000 !important;
    padding: 8px 12px;
    border: 2px outset #808080;
    margin-bottom: 16px;
}
.guestbook-empty {
    color: #404040 !important;
    font-style: italic;
}
.guestbook-entry {
    background: #f8f8f8;
    border: 2px outset #a0a0a0;
    padding: 12px;
    margin-bottom: 12px;
}
.guestbook-entry-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}
.guestbook-entry-header strong {
    color: #0000ff !important;
}
.guestbook-entry-date {
    font-size: 9px;
    color: #666666 !important;
}
.guestbook-entry-message {
    color: #000000 !important;
    margin: 0;
    font-size: 11px;
}

/* Section headers */
.section-title {
    color: #0000ff !important;
    font-family: "Impact", "Arial Black", sans-serif !important;
    text-shadow: 1px 1px 1px #c0c0c0;
}

.section-subtitle {
    color: #404040 !important;
}

/* Timeline */
.timeline-item {
    background: #f8f8f8;
    border: 2px outset #a0a0a0;
    margin-bottom: 10px;
}

.timeline-item:hover {
    background: #e8e8ff !important;
    border: 2px inset #808080 !important;
}

.timeline-date {
    color: #ff00ff !important;
    font-weight: bold;
}

.timeline-content h3 {
    color: #0000ff !important;
}

.timeline-content p {
    color: #000000 !important;
}

/* Contact cards */
.contact-card {
    background: #f5f5f5;
    border: 2px outset #a0a0a0;
}

.contact-card:hover {
    background: #e8e8ff !important;
    border: 2px inset #808080 !important;
}

.contact-card h3 {
    color: #0000ff !important;
}

.contact-card p {
    color: #000000 !important;
}

.contact-form {
    background: #ffffff;
    border: 2px inset #808080;
}

.form-group label {
    color: #000000 !important;
}

/* Liens dans hero (fond bleu/violet) */
.hero a {
    color: #ffff00 !important;
}

.hero a:hover {
    color: #ffffff !important;
}

/* Boutons hero : style unifié et lisible */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.hero-actions .btn {
    background: linear-gradient(180deg, #ffffff 0%, #e8e8e8 100%) !important;
    color: #1a1a1a !important;
    border: 2px solid #2c3e50 !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: bold !important;
}

.hero-actions .btn:hover {
    background: linear-gradient(180deg, #ffff00 0%, #ffcc00 100%) !important;
    color: #000000 !important;
}

.hero-actions .btn-hero-guestbook {
    background: linear-gradient(180deg, #ff1493 0%, #c71585 100%) !important;
    color: #ffffff !important;
    border-color: #8b0045 !important;
}

.hero-actions .btn-hero-guestbook:hover {
    background: linear-gradient(180deg, #ff69b4 0%, #ff1493 100%) !important;
    color: #ffffff !important;
}

/* Liens dans cards/frame clair */
.contact-card a,
.frame a {
    color: #0000ff !important;
}

.contact-card a:visited,
.frame a:visited {
    color: #800080 !important;
}

/* Bloc présentateur (fond sombre) */
.presentateur-link {
    background: #3a3a3a !important;
    border: 2px outset #808080 !important;
    color: #ffffff !important;
}

.presentateur-link span,
.presentateur-link .presentateur-hint {
    color: #c0c0c0 !important;
    font-size: 9px;
}
#lastTrigger { display: block; margin-top: 4px; }

.presentateur-link a {
    color: #00ffff !important;
}

.presentateur-link a:visited {
    color: #ff69b4 !important;
}

.presentateur-link a:hover {
    color: #ffffff !important;
}

/* Sound grid (trois-cabanes) */
.sound-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 16px 0;
}
.sound-card {
    background: #f0f0f0;
    border: 2px outset #808080;
    padding: 12px;
}
.sound-card h3 { margin: 0 0 8px 0; color: #0000ff !important; }
.sound-card audio { width: 100%; margin: 8px 0; }
@media (max-width: 600px) { .sound-grid { grid-template-columns: 1fr; } }

/* Page présentateur (trois-cabanes) */
.presentateur-page {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}
.presentateur-page h1 {
    font-family: "Impact", "Arial Black", sans-serif !important;
    color: #0000ff !important;
    font-size: 18px !important;
    margin-bottom: 24px !important;
}
.presentateur-page .btn {
    font-size: 18px !important;
    padding: 24px 48px !important;
}
.btn-stop {
    font-size: 16px !important;
    padding: 16px 32px !important;
    margin-top: 16px !important;
    background: linear-gradient(180deg, #c0a0a0 0%, #a08080 100%) !important;
    border: 2px outset #808080 !important;
    color: #ffffff !important;
}
.btn-stop:hover {
    background: linear-gradient(180deg, #a08080 0%, #c0a0a0 100%) !important;
    border: 2px inset #404040 !important;
}

.presentateur-page .feedback {
    margin-top: 16px;
    font-size: 12px;
    min-height: 20px;
    color: #404040 !important;
}


/* LGEL types de partie */
.type-fun { color: #5d9cec !important; }
.type-carnage { color: #8d41a4 !important; }
.type-normale { color: #93af5c !important; }
.type-serieuse { color: #ee8989 !important; }
.role-select-option { display: flex; align-items: center; }
.role-select-option img { width: 12px; height: 12px; margin-right: 5px; }

/* Img responsive - SAUF dans les project-card où on limite la taille */
img.responsive { width: 100%; max-width: 100%; height: auto; margin-bottom: 8px; }
.project-card img.responsive,
.project-content img.responsive,
.project-thumb img,
.projects-grid img {
    width: auto !important;
    max-width: 120px !important;
    max-height: 90px !important;
    height: auto !important;
}

/* Video modal */
.video-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
}
.video-modal-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    cursor: pointer;
}
.video-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    width: 90vw;
    max-width: 1200px;
    z-index: 10001;
}
.video-modal-header {
    padding: 4px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.video-modal-header h3 { margin: 0; }
.video-player-container {
    padding: 4px;
    max-width: 100%;
    overflow: hidden;
}

/* Footer */
.footer {
    background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 100%);
    border-top: 2px outset #808080;
    color: #ffffff !important;
}

.footer-text, .footer-copyright, .footer-text a, .footer-copyright a {
    color: #00ffff !important;
}

/* Footer brand - texte clair sur fond sombre */
.footer-brand-name {
    color: #ffffff !important;
    font-weight: bold;
    font-size: 12px;
}

.footer-brand-tagline {
    color: #c0c0c0 !important;
    font-size: 9px;
}

/* Stat items */
.stat-item {
    background: linear-gradient(180deg, #c0c0c0 0%, #a0a0a0 100%);
    border: 2px outset #808080;
}

.stat-number {
    color: #ff00ff !important;
}

/* Marquee band - couleurs néon renforcées */
.marquee-band {
    background: linear-gradient(90deg, #ff1493, #00ffff, #ffff00, #ff69b4, #00ff00);
    color: #000000;
    padding: 6px 0;
    font-weight: bold;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #000000;
}

/* Visitor counter style LCD années 2000 */
.visitor-counter {
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%) !important;
    color: #00ff00 !important;
    font-family: "Courier New", "LCD", monospace !important;
    padding: 8px 16px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border: 3px inset #404040 !important;
    display: inline-block !important;
    margin: 8px 0 4px 0 !important;
    text-shadow: 0 0 8px #00ff00 !important;
    box-shadow: inset 0 0 10px rgba(0,255,0,0.1) !important;
    letter-spacing: 2px !important;
}
.visitor-counter #visitorCount {
    color: #00ff00 !important;
    font-size: 18px !important;
}

/* User info (header) */
.user-info {
    background: linear-gradient(180deg, #c0c0c0 0%, #a0a0a0 100%) !important;
    border: 2px outset #808080 !important;
    color: #000000 !important;
}

.user-pseudo {
    color: #0000ff !important;
}

.login-btn, .logout-btn {
    background: linear-gradient(180deg, #c0c0c0 0%, #a0a0a0 100%) !important;
    border: 2px outset #808080 !important;
    color: #000000 !important;
}

/* Footer : dernière mise à jour + webring */
.footer-updated {
    font-size: 9px;
    color: #c0c0c0 !important;
    margin: 4px 0;
}

.webring-badge {
    margin: 8px 0 4px 0;
}

.webring-badge a {
    background: linear-gradient(180deg, #ff69b4 0%, #ff1493 100%) !important;
    color: #ffffff !important;
    padding: 4px 12px !important;
    border: 2px outset #808080 !important;
    text-decoration: none !important;
}

.webring-badge a:hover {
    color: #ffff00 !important;
}

.marquee-bottom {
    margin-top: 0;
}

/* Marquee vertical (côté gauche) */
.marquee-vertical {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 120px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    background: linear-gradient(180deg, #ff69b4, #00ffff);
    color: #000000;
    font-weight: bold;
    font-size: 10px;
    z-index: 100;
    border: 2px outset #808080;
}
@media (max-width: 900px) {
    .marquee-vertical { display: none; }
}

/* Fausses pubs improbables années 2000 (desktop uniquement) */
@media (max-width: 1100px) {
    .fake-ads { display: none !important; }
}

.fake-ads {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    z-index: 150;
    pointer-events: none;
}

.fake-ads-left {
    left: 42px;
}

.fake-ads-right {
    right: 8px;
}

.fake-ad {
    width: 120px;
    min-height: 120px;
    margin-bottom: 14px;
    padding: 6px;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    border: 2px solid #000000;
}

.fake-ad::before {
    content: "publicité";
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 6px;
    color: #666666;
}

.fake-ad .ad-cta {
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin-top: 8px;
    animation: ad-blink 1.5s step-end infinite;
}

@keyframes ad-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.6; }
}

.fake-ad-green { background: #00ff00 !important; color: #000000 !important; }
.fake-ad-green .ad-cta { color: #ff0000 !important; }

.fake-ad-red { background: #ff0000 !important; color: #ffff00 !important; }
.fake-ad-red .ad-cta { color: #ffffff !important; }

.fake-ad-blue { background: #0066ff !important; color: #ffffff !important; }
.fake-ad-blue .ad-cta { color: #ffff00 !important; }

.fake-ad-yellow { background: #ffff00 !important; color: #ff0000 !important; }
.fake-ad-yellow .ad-cta { color: #0000ff !important; }

.fake-ad-magenta { background: #ff00ff !important; color: #ffffff !important; }
.fake-ad-magenta .ad-cta { color: #ffff00 !important; }

.fake-ad-orange { background: #ff6600 !important; color: #000000 !important; }
.fake-ad-orange .ad-cta { color: #ffffff !important; }

/* Bannière "Under construction" animée */
@keyframes under-construction-blink {
    0%, 100% { opacity: 1; visibility: visible; }
    50% { opacity: 0.5; visibility: visible; }
}

.under-construction-banner {
    background: #ffff00;
    color: #ff0000;
    text-align: center;
    padding: 4px 0;
    font-size: 10px;
    font-weight: bold;
    border: 2px dashed #ff0000;
    margin-bottom: 12px;
    animation: under-construction-blink 1s step-end infinite;
}

/* Mode Konami (easter egg) */
body.konami-mode .marquee-band {
    animation: konami-rainbow 0.5s linear infinite;
}
@keyframes konami-rainbow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Bouton Accueil (header, à droite du logo) */
.btn-home-big {
    position: relative;
    z-index: 999;
    padding: 6px 14px !important;
    font-size: 12px !important;
    text-decoration: none !important;
    margin-left: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%) !important;
    color: #0000ff !important;
    border: 2px outset #808080 !important;
}
.btn-home-big:hover {
    color: #ff0000 !important;
}

/* Web buttons 88x31 (style années 1990-2000) */
.web-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
}

.web-btn {
    display: inline-block;
    width: 88px;
    height: 31px;
    line-height: 31px;
    font-size: 9px;
    font-weight: bold;
    text-align: center;
    text-decoration: none !important;
    border: 1px solid #333333;
    overflow: hidden;
    padding: 0 4px;
}

.web-btn:hover {
    border-color: #00ffff !important;
}

.web-btn-netscape { background: #003399 !important; color: #ffffff !important; }
.web-btn-ie { background: #006600 !important; color: #ffffff !important; }
.web-btn-res { background: #cc0000 !important; color: #ffffff !important; }
.web-btn-notepad { background: #663399 !important; color: #ffffff !important; }
.web-btn-github { background: #333333 !important; color: #ffffff !important; }

/* Support pour images 88x31 (ajoutez <img src="assets/buttons/xxx.gif" class="web-btn-img">) */
.web-btn-img {
    width: 88px;
    height: 31px;
    display: block;
    border: 1px solid #333333;
}

.web-btn-img:hover {
    border-color: #00ffff;
}

/* "Best viewed" disclaimer - fond sombre du footer */
.best-viewed {
    font-size: 9px;
    color: #c0c0c0 !important;
    text-align: center;
    margin: 4px 0;
}

/* Notification style années 2000 */
.notification {
    background: #ffff00 !important;
    border: 2px outset #808080 !important;
    color: #000000 !important;
}

.notification.success {
    background: #00ff00 !important;
}

.notification.error {
    background: #ff0000 !important;
    color: #ffffff !important;
}

/* Scroll-to-top button */
.scroll-to-top {
    background: linear-gradient(180deg, #c0c0c0 0%, #a0a0a0 100%) !important;
    border: 2px outset #808080 !important;
    color: #000000 !important;
}

.scroll-to-top:hover {
    background: linear-gradient(180deg, #a0a0a0 0%, #c0c0c0 100%) !important;
}

/* Projects toolbar */
.projects-toolbar {
    color: #000000 !important;
}

.view-toggle-btn.active {
    background: #0000ff !important;
    color: #ffffff !important;
}

/* LGEL + pages sans #wrapper : conteneur .container */
.container {
    max-width: 800px;
    margin: 0 auto;
    background: linear-gradient(180deg, #e8e8e8 0%, #c0c0c0 100%);
    border: 3px solid #ffffff;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.3);
    padding: 12px;
}

.header {
    background: linear-gradient(180deg, #4169e1 0%, #1e90ff 50%, #0000cd 100%);
    border: 2px outset #808080;
    color: #ffffff;
    padding: 12px;
}

/* Navbar des default.php (lpdl, tmhub) */
.navbar {
    background: linear-gradient(180deg, #4169e1 0%, #0000cd 100%) !important;
    border-bottom: 2px solid #000080 !important;
}

.nav-link {
    color: #00ffff !important;
}

/* Splash "Cliquez pour entrer" années 2000 */
.splash-enter {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #4169e1 0%, #9370db 50%, #0000cd 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    border: 4px outset #808080;
}
.splash-enter.hidden { display: none !important; }
.splash-enter-content {
    text-align: center;
    padding: 40px;
}
.splash-enter-title {
    font-family: "Impact", "Arial Black", sans-serif !important;
    font-size: 36px !important;
    color: #ffff00 !important;
    text-shadow: 3px 3px 3px #000000;
    margin-bottom: 12px;
}
.splash-enter-subtitle {
    font-size: 18px !important;
    color: #ffffff !important;
    margin-bottom: 32px;
}
.splash-enter-btn {
    font-size: 20px !important;
    padding: 16px 40px !important;
    background: linear-gradient(180deg, #00ff00 0%, #00cc00 100%) !important;
    color: #000000 !important;
    border: 3px outset #808080 !important;
}

/* Bouton livre d'or : styles définis dans .hero-actions */

/* Contact card email */
.contact-card-email {
    border-color: #0000ff;
}

/* Bouton copier email */
.btn-copy-email {
    margin-top: 8px;
    font-size: 10px !important;
}

/* Nuage de tags */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.tag {
    display: inline-block;
    padding: 4px 12px;
    font-size: 10px;
    background: linear-gradient(180deg, #e0e0e0 0%, #c0c0c0 100%);
    border: 1px solid #808080;
    color: #0000ff !important;
    text-decoration: none !important;
}

.tag:hover {
    background: linear-gradient(180deg, #00ffff 0%, #00cccc 100%) !important;
    color: #000000 !important;
}

/* Utilitaires */
.hidden { display: none !important; }
.disabled { cursor: not-allowed; opacity: 0.5; }
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mb-8 { margin-bottom: 8px; }
.ml-8 { margin-left: 8px; }

/* Thumbnails projets (placeholders sans image) */
.project-thumb {
    text-align: center;
    margin: 8px 0;
    min-height: 60px;
    max-height: 90px;
    max-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 8px;
    overflow: hidden;
}
.project-thumb img,
.project-card img,
.project-content img {
    max-width: 120px !important;
    max-height: 90px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.project-thumb--yandex { background: linear-gradient(135deg,#ffeb3b,#ffc107); color:#000; }
.project-thumb--asteroids { background: linear-gradient(135deg,#ffc107,#ff9800); color:#000; }
.project-thumb--rtx { background: linear-gradient(135deg,#e91e63,#ad1457); color:#fff; }
.project-thumb--oldinone { background: linear-gradient(135deg,#607d8b,#37474f); color:#fff; }
.project-thumb--lille { background: linear-gradient(135deg,#9c27b0,#673ab7); color:#fff; }

/* Mobile menu toggle - masqué par défaut, visible sur mobile */
.mobile-menu-toggle { display: none; }
@media (max-width: 480px) {
    .mobile-menu-toggle { display: block !important; }
}

/* Login / Logout pages */
.login-container, .logout-container {
    max-width: 480px;
    margin: 50px auto;
    padding: 20px;
}
.login-header, .logout-header {
    text-align: center;
    margin-bottom: 30px;
}
.login-header h1, .logout-header h1 {
    font-size: 18px;
    margin-bottom: 8px;
}
.login-form {
    background: #ffffff;
    border: 2px inset #808080;
    padding: 16px;
}
.message-box {
    background: #f0f0f0;
    border: 2px inset #808080;
    padding: 16px;
    color: #000000;
    text-align: center;
}
.actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.btn-link {
    display: inline-block;
    padding: 6px 12px;
    background: linear-gradient(180deg, #c0c0c0 0%, #a0a0a0 100%);
    border: 2px outset #808080;
    color: #000000;
    text-decoration: none;
}
.btn-link:hover {
    border: 2px inset #808080;
}
.error-message {
    background: #ffcccc;
    border: 2px solid #ff0000;
    color: #ff0000;
    padding: 8px;
    margin-bottom: 16px;
    text-align: center;
}
.info-box {
    background: #f5f5f5;
    border: 2px inset #808080;
    padding: 12px;
    margin-top: 16px;
    color: #000000;
}
.info-box h3 { margin-bottom: 6px; }
.back-link { text-align: center; margin-top: 16px; }
.back-link a { color: #0000ff; }

/* Contact page CTA */
.cta {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 2rem;
    background: linear-gradient(180deg, #c0c0c0 0%, #a0a0a0 100%);
    border: 2px outset #808080;
    color: #000000;
    text-decoration: none;
    font-weight: 500;
}
.cta:hover {
    border: 2px inset #808080;
}

/* TMHub download system */
.download-system { max-width: 800px; margin: 0 auto; padding: 20px; }
.download-header { text-align: center; margin-bottom: 30px; }
.download-header h1 { color: #0000ff !important; font-size: 24px; margin-bottom: 10px; }
.download-header p { color: #333333 !important; font-size: 12px; }
.selector-form, .result-section {
    background: #f0f0f0;
    border: 2px inset #808080;
    padding: 20px;
    margin: 20px 0;
}
.form-row { display: flex; gap: 15px; margin-bottom: 15px; align-items: center; }
.form-group { flex: 1; }
.version-info {
    background: #f5f5f5;
    border: 2px outset #808080;
    padding: 15px;
    margin-bottom: 15px;
}
.mt-20 { margin-top: 20px; }
.version-info.mt-20 { margin-top: 20px; }
.version-title { color: #0000ff !important; font-size: 14px; font-weight: bold; margin-bottom: 5px; }
.version-desc { color: #333333 !important; font-size: 11px; margin-bottom: 10px; }
.download-links h4, .requirements h4, .compatibility h4 { color: #0000ff !important; font-size: 12px; margin-bottom: 8px; }
.download-links a { color: #0000ff !important; }
.version-info p, .version-info li, .version-info-detail { color: #333333 !important; font-size: 9px; margin-left: 10px; margin-bottom: 3px; }
.version-info .warning, li.warning { color: #ff9800 !important; }
.version-info .feature, li.feature { color: #333333 !important; }
.text-center.mt-15 { margin-top: 15px; }

/* Responsive : garder une largeur min sur mobile */
@media (max-width: 820px) {
    #wrapper {
        width: 95%;
    }
}