/* ==========================================================================
   MKDEVS.EU - EXTENSION COMMODORE 64 RÉTRO (MISE À JOUR CONTRASTE & ALIGNEMENT)
   ========================================================================== */

/* 1. Global Reset */
* {
    box-sizing: border-box;
    border-radius: 0px !important; /* On oublie les arrondis modernes */
}

body {
    background-color: #7b71d8 !important; /* Le cadre extérieur bleu clair */
    font-family: 'Share Tech Mono', monospace !important;
    color: #7b71d8 !important;
    line-height: 1.6;
    padding: 20px 10px;
}

/* 2. Unification des largeurs et alignement de la grille */
.container, main, #wrapper, .c64-header-top, .c64-menu {
    /* max-width: 1050px !important; /* Largeur augmentée et uniforme */
    max-width: 1280px !important; /* Largeur augmentée et uniforme */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Le Conteneur Principal (L'écran du C64) */
.container, main, #wrapper {
    background-color: #3a319c !important; /* L'écran central bleu foncé */
    border: 12px solid #7b71d8 !important; /* Cadre rétro */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
    padding: 40px !important; /* Plus d'espace interne pour respirer */
}

/* 3. L'Écran de Boot (Simulateur de moniteur autonome) */
.c64-boot-screen {
    background-color: #000000 !important; /* Fond noir pour simuler un vrai tube cathodique */
    border: 4px solid #7b71d8 !important;  /* Cadre bleu clair */
    padding: 20px !important;
    margin-bottom: 30px;
    box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.2);
}

.c64-boot-screen pre {
    background-color: transparent !important;
    color: #9ad284 !important; /* Texte vert phosphore pour le boot */
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 1.1rem;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-transform: uppercase;
    line-height: 1.4;
}

/* 4. Typographies, Titres et Header */
h1, h2, h3, h4, .navbar-brand {
    font-family: 'VT323', monospace !important;
    text-transform: uppercase;
    color: #7b71d8 !important;
    letter-spacing: 1px;
}

h1 { font-size: 3rem !important; }
h2 { font-size: 2.2rem !important; border-bottom: 2px dashed #7b71d8; padding-bottom: 5px; }

/* Alignement du bloc Logo + Réseaux sociaux */
.c64-header-top {
    display: flex;
    justify-content: space-between; /* Pousse le logo à gauche et les réseaux à droite */
    align-items: center;           /* Aligne verticalement à mi-hauteur */
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 10px;
}

.c64-logo {
    height: 40px;
    width: auto;
    display: block;
}

.c64-title-link {
    text-decoration: none !important;
    border-bottom: none !important;
}

.c64-title {
    font-family: 'VT323', monospace !important;
    font-size: 4rem !important;
    color: #ffffff !important; /* Blanc brillant pour ressortir */
    text-shadow: 3px 3px 0px #7b71d8;
    text-transform: uppercase;
    margin-bottom: 5px !important;
    letter-spacing: 3px;
    display: inline-block;
}

.c64-slogan {
    color: #3a319c !important; /* Le beau Cyan C64 original */
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center !important; /* Force le centrage absolu */
    width: 100%;
    display: block;
}

/* 5. Éléments de navigation (Mode Foncé / Inverse Vidéo) */
.c64-socials {
    display: flex;
    gap: 15px;
}

.c64-socials a {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 1.1rem;
    background-color: #7b71d8 !important; /* Fond clair */
    color: #3a319c !important;            /* Texte foncé */
    text-transform: uppercase;
    text-decoration: none !important;
    border: 2px solid #7b71d8 !important;
    padding: 4px 8px;
    font-weight: bold;
}

.c64-socials a:hover {
    background-color: #9ad284 !important; /* Vert au survol */
    border-color: #9ad284 !important;
    color: #3a319c !important;
}

.c64-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin: 20px auto;
    padding: 10px 0;
}

.c64-menu-item {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 1.2rem !important;
    background-color: #7b71d8 !important; /* Fond clair */
    color: #3a319c !important;            /* Texte foncé */
    text-transform: uppercase;
    text-decoration: none !important;
    border: 2px solid #7b71d8 !important;
    padding: 6px 12px;
    font-weight: bold;
}

.c64-menu-item:hover {
    background-color: #9ad284 !important; /* Vert au survol */
    border-color: #9ad284 !important;
    color: #3a319c !important;
}

/* 6. Les Liens internes aux articles */
a {
    color: #70a4b2 !important;
    text-decoration: none !important;
    border-bottom: 1px dashed #70a4b2;
    transition: color 0.2s ease;
}

a:hover {
    color: #9ad284 !important;
    border-bottom-style: solid;
}

/* 7. Lignes de séparation */
/* Ligne de séparation alignée sur la couleur sombre des boutons */ 
.c64-hr {
    border: none !important;
    border-bottom: 4px solid #3a319c !important; /* Devient bleu foncé comme le texte des liens/menus */
    margin-top: 25px;
    margin-bottom: 30px;
    opacity: 1 !important;
    display: block !important;
    width: 100%;
    max-width: 1280px;
}

/* 8. Blocs de Code (Pour les tutos) */
pre {
    background-color: #000000 !important;
    border: 2px solid #7b71d8 !important;
    padding: 15px !important;
    overflow-x: auto;
}

pre code {
    font-family: 'Share Tech Mono', monospace !important;
    color: #9ad284 !important; /* Vert phosphore */
    background-color: transparent !important;
    padding: 0 !important;
}

p code {
    font-family: 'Share Tech Mono', monospace !important;
    background-color: #000000 !important;
    color: #9ad284 !important;
    padding: 2px 6px !important;
    display: inline;
}

/* 9. Ajustements des composants (Cartes d'articles, boutons) */
.card, .box, .post {
    background-color: transparent !important;
    border: 2px solid #7b71d8 !important;
    margin-bottom: 20px;
    padding: 20px;
}

.btn, button, input[type="submit"] {
    background: transparent !important;
    border: 2px solid #7b71d8 !important;
    color: #7b71d8 !important;
    text-transform: uppercase;
    font-weight: bold;
    padding: 8px 16px;
    cursor: pointer;
}

.btn:hover, button:hover {
    background-color: #7b71d8 !important;
    color: #3a319c !important;
}

/* 10. Reconstruction Complète du Footer */
.c64-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0 10px 0;
    width: 100%;
}

.c64-pag-btn {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 1.1rem !important;
    text-transform: uppercase;
    text-decoration: none !important;
    padding: 6px 12px;
    border: 2px solid #7b71d8 !important;
    color: #3a319c !important;
    background-color: #7b71d8 !important; /* Version foncée */
    font-weight: bold;
}

a.c64-pag-btn:hover {
    color: #3a319c !important;
    background-color: #9ad284 !important;
    border-color: #9ad284 !important;
}

.c64-pag-btn.disabled {
    color: #514b9c !important;
    border-color: #514b9c !important;
    background-color: transparent !important;
    opacity: 0.5;
    cursor: not-allowed;
}

.c64-footer-credits {
    font-family: 'Share Tech Mono', monospace !important;
    background-color: #7b71d8 !important; /* Bloc de statut clair */
    color: #3a319c !important;            /* Texte foncé super lisible */
    padding: 15px;
    text-align: center;
    margin-top: 30px;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: bold;
    border: 2px solid #7b71d8;
}

.c64-footer-credits p {
    margin: 4px 0;
}

.c64-footer-credits a {
    color: #000000 !important; /* Liens en noir pur dans le footer */
    border-bottom: 1px solid #000000;
}

.c64-footer-credits a:hover {
    color: #3a319c !important;
    background-color: #9ad284 !important;
    border-bottom-style: none;
}