/* ===========================================================
THEME : ROUTE 0/0 - TERMINAL EDITION
Author: Ibrahim (with a touch of AI logic)
Version: 2.0 (2026)
===========================================================
*/

/* 1. VARIABLES DE COULEURS (La base du design) */
:root {
    --primary-color: #00ff41;    /* Vert Terminal Matrix */
    --accent-color: #ff0055;     /* Rose Cyberpunk (Focus/Alertes) */
    --bg-dark: #0d1117;          /* Fond GitHub Dark */
    --card-bg: #161b22;          /* Fond des articles */
    --border-color: #30363d;     /* Bordures discrètes */
    --text-main: #c9d1d9;        /* Gris clair lisible */
    --text-muted: #8b949e;       /* Texte secondaire */
}

/* 2. STRUCTURE GENERALE */
body {
    background-color: var(--bg-dark) !important;
    color: var(--text-main);
    font-family: 'Fira Code', 'Courier New', monospace; /* Police mono obligatoire */
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

#outer-container {
    max-width: 1100px;
    margin: 20px auto;
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Espace entre articles et sidebar */
}

/* 3. HEADER & TITRE CLIGNOTANT */
#header {
    width: 100%;
    padding: 40px 0;
    text-align: left;
}

#header h1 a {
    color: white !important;
    font-size: 2.8em;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: -1px;
}

#header h1 a::before {
    content: "> ";
    color: var(--primary-color);
}

/* Animation du curseur clignotant */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

#header h1 a::after {
    content: "_";
    color: var(--primary-color);
    animation: blink 1s infinite;
    margin-left: 8px;
}

#header p { /* Le slogan */
    color: var(--text-muted);
    font-style: italic;
    margin-left: 45px;
    font-size: 1.1em;
}

/* 4. ZONE DE CONTENU (ARTICLES) */
#content-container {
    flex: 3;
    min-width: 320px;
}

.entry {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 6px 6px 0px rgba(0, 255, 65, 0.1);
    transition: all 0.2s ease-in-out;
}

.entry:hover {
    border-color: var(--primary-color);
    box-shadow: 6px 6px 0px var(--primary-color);
    transform: translate(-2px, -2px);
}

.entry h2 {
    color: var(--primary-color);
    font-size: 1.6em;
    margin-top: 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

/* 5. LIENS ET INTERACTIVITE */
a {
    color: var(--primary-color);
    transition: 0.3s;
    text-decoration: none;
}

a:hover {
    color: var(--accent-color);
    text-shadow: 0 0 5px var(--accent-color);
}

/* 6. SIDEBAR (LA COLONNE) */
.column {
    flex: 1;
    min-width: 250px;
}

.widget {
    background: rgba(22, 27, 34, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
}

.widget h3 {
    color: white;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-left: 3px solid var(--primary-color);
    padding-left: 10px;
    margin-top: 0;
}

/* 7. BLOCS DE CODE (Essentiel pour toi) */
pre, code {
    background: #000 !important;
    color: var(--primary-color) !important;
    padding: 15px;
    border-radius: 4px;
    display: block;
    overflow-x: auto;
    border: 1px solid var(--border-color);
}

/* 8. FOOTER */
#footer {
    width: 100%;
    text-align: center;
    padding: 40px 0;
    color: var(--text-muted);
    font-size: 0.85em;
    border-top: 1px solid var(--border-color);
}

/* 9. RESPONSIVE DESIGN */
@media (max-width: 768px) {
    #outer-container {
        flex-direction: column;
    }
    #header { text-align: center; }
    #header p { margin-left: 0; }
}

#outer-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
}

/* La colonne de gauche (que tu as ajoutée dans header.tpl) */
#left-column {
    flex: 1;
    min-width: 200px;
    order: 1; /* Force à gauche */
}

/* Le contenu principal (index.tpl) */
#main {
    flex: 3;
    min-width: 400px;
    order: 2; /* Au milieu */
}

/* La colonne de droite (index.tpl) */
#right-column {
    flex: 1;
    min-width: 200px;
    order: 3; /* À droite */
}

/* Sur mobile, on empile tout */
@media (max-width: 800px) {
    #outer-container { flex-direction: column; }
    #left-column, #main, #right-column { width: 100%; order: initial; }
}

/* Style de la barre de recherche "Terminal" */
#top-widgets {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

#top-widgets .widget {
    width: 60%;
    max-width: 600px;
    background: #000;
    border: 1px solid var(--primary-color);
    padding: 10px;
    border-radius: 4px;
    position: relative;
}

/* Ajout d'un prompt devant l'input */
#top-widgets form::before {
    content: "guest@route0-0:~$ ";
    color: var(--primary-color);
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

#top-widgets input[type="text"] {
    background: transparent;
    border: none;
    color: var(--primary-color);
    width: 60%;
    outline: none;
    font-family: 'Courier New', monospace;
}

#top-widgets input[type="submit"] {
    background: var(--primary-color);
    color: #000;
    border: none;
    padding: 2px 10px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
}
/* Empêche les images de déborder du container */
.entry-content img,
.entry img {
    max-width: 100%;
    height: auto;    /* Garde les proportions de l'image */
    display: block;  /* Évite les espaces vides sous l'image */
    margin: 10px 0;  /* Ajoute un petit espace haut/bas */
    border: 1px solid var(--border-color);
    border-radius: 4px;
}