:root {
    --bg-page: #0f172a; 
    --terminal-bg: #020617; 
    --text-green: #4ade80; 
    --text-dim: #94a3b8;
    --accent-blue: #38bdf8;
}

* { box-sizing: border-box; }

body { 
    background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
    margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; font-family: 'Fira Code', monospace; 
}

.terminal {
    width: 95%; max-width: 900px; height: 75vh; background-color: var(--terminal-bg); border-radius: 12px; display: flex; flex-direction: column; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); overflow: hidden; border: 1px solid #1e293b;
}

.header { background-color: #1e293b; padding: 10px 15px; display: flex; align-items: center; border-bottom: 1px solid #334155; }
.dot { width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; }
.red { background: #ff5f56; } .yellow { background: #ffbd2e; } .green { background: #27c93f; }
.title { margin-left: auto; margin-right: auto; font-size: 12px; color: #64748b; }

#output { flex: 1; padding: 25px; overflow-y: auto; color: var(--text-green); scroll-behavior: smooth; }
#output::-webkit-scrollbar { width: 6px; }
#output::-webkit-scrollbar-track { background: var(--terminal-bg); }
#output::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }

.input-container { display: flex; align-items: center; padding: 15px 25px; background-color: #0f172a; border-top: 1px solid #334155; position: relative; }
.prompt-user { color: var(--text-green); font-weight: 300; opacity: 0.8; }
.prompt-path { color: var(--text-dim); font-weight: 300; margin-right: 5px; }
.prompt-symbol { color: var(--text-green); font-weight: 500; margin-right: 5px; }

#cmd-input { position: absolute; left: 145px; top: 15px; width: calc(100% - 145px); background: transparent; border: none; color: transparent; outline: none; font-family: inherit; font-size: 16px; z-index: 2; }
#input-visual { display: flex; align-items: center; pointer-events: none; white-space: pre-wrap; color: var(--text-green); }
.cursor { width: 8px; height: 1.2em; background: var(--text-green); animation: blink 0.8s infinite step-end; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }

.line { margin-bottom: 6px; line-height: 1.6; word-break: break-all; font-weight: 300; }
.cmd-entry { color: var(--text-dim); font-style: italic; font-weight: 400; }
.error { color: #ff5f56; } .info { color: var(--accent-blue); } .success { color: var(--text-green); } .dim { color: #64748b; }

/* --- IMAGE WRITER STYLE (Aligné à gauche) --- */
.image-writer-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligné à gauche */
    margin: 10px 0;
}

.image-slice {
    display: block;
    overflow: hidden;
    /* On ajoute une petite ombre pour l'effet de relief sur chaque tranche */
    box-shadow: inset 0 -1px 2px rgba(0,0,0,0.3);
}

.progress-container { width: 100%; background: #334155; height: 8px; border-radius: 4px; margin: 8px 0; overflow: hidden; }
.progress-bar { height: 100%; background: var(--text-green); width: 0%; transition: width 0.4s ease; }

footer { margin-top: 20px; font-size: 11px; color: #64748b; letter-spacing: 2px; text-transform: uppercase; }