/* --- Variables & Reset --- */
:root {
    --bg: #0f172a;           /* Fond général sombre bleuâtre */
    --nav-bg: #1e293b;       /* Fond de la navigation */
    --card: #1e293b;         /* Fond des cartes */
    --text: #f8fafc;         /* Texte clair */
    --muted: #94a3b8;        /* Texte estompé */
    --accent: #10b981;       /* Vert Émeraude (Actions positives) */
    --border: #334155;       /* Bordures discrètes */
    --danger: #ef4444;       /* Rouge */
    --warning: #f59e0b;      /* Orange */
    --primary: #3b82f6;      /* Bleu (Focus/Nav) */
}

* { box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    display: flex; /* Pour la barre de nav à gauche */
    min-height: 100vh;
}

/* --- Barre de Navigation --- */
nav {
    width: 260px;
    background: var(--nav-bg);
    height: 100vh;
    position: fixed;
    border-right: 1px solid var(--border);
    z-index: 100;
}

nav h2 { 
    text-align: center; 
    padding: 2rem 0; 
    color: var(--accent); 
    font-family: 'Fira Code', monospace;
    letter-spacing: -1px;
}

nav ul { list-style: none; padding: 0; margin: 0; }

nav ul li a {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    color: var(--muted);
    text-decoration: none;
    transition: all 0.2s;
    border-left: 4px solid transparent;
}

nav ul li a:hover, nav ul li a.active {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    border-left: 4px solid var(--accent);
}

/* --- Zone Principale --- */
main {
    margin-left: 260px; /* Largeur de la nav */
    padding: 2rem 3rem;
    width: calc(100% - 260px);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}

header {
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Cartes et Grilles --- */
.card {
    background: var(--card);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin-bottom: 1.5rem;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* --- Formulaires & Inputs --- */
.item {
    background: var(--card);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column; /* Force le titre au dessus de l'input */
    gap: 0.5rem; /* Espace entre le label et l'input/switch */
}

.row {
    display: flex;
    justify-content: space-between; /* Pour que le switch soit à droite du nom */
    align-items: center;
}

label {
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    color: var(--accent);
}

input[type="text"], input[type="number"], select {
    background: var(--bg);
    border: 1px solid var(--border);
    color: white;
    padding: 0.6rem;
    border-radius: 6px;
    width: 100%;
    margin-top: 0.5rem;
}

/* --- Boutons --- */
.btn {
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.btn-start, .btn-save { background: var(--accent); color: white; }
.btn-stop { background: var(--danger); color: white; }
.btn-restart { background: var(--warning); color: #000; }

.btn-save {
    /* Couleurs (Emerald) */
    background-color: var(--accent); /* #10b981 */
    color: white;
    border: none; /* Enlève la bordure 3D par défaut */

    /* La correction importante : L'ARRONDI */
    border-radius: 8px; /* Un arrondi moyen et propre */

    /* Taille et Position */
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600; /* Plus gras pour le statut */
    cursor: pointer;
    
    /* Position fixed en bas à droite (comme tu l'avais défini) */
    position: fixed;
    bottom: 2rem;
    right: 2rem;

    /* Petite ombre douce (ton code de box-shadow amélioré) */
    box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.4);
    
    /* Transition pour l'effet de survol */
    transition: all 0.2s ease;
}

/* Effet de survol pour un bouton plus réactif */
.btn-save:hover {
    opacity: 0.9;
    transform: translateY(-2px); /* Léger soulèvement */
}

/* --- Switch & Toast (Ton code conservé) --- */
.switch { position: relative; display: inline-block; width: 34px; height: 18px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #475569; transition: .3s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px; background: white; transition: .3s; border-radius: 50%; }
input:checked + .slider { background: var(--accent); }
input:checked + .slider:before { transform: translateX(16px); }

.toast { 
    position: fixed; bottom: 25px; right: 25px; background: var(--accent); 
    padding: 1rem; border-radius: 8px; opacity: 0; transform: translateY(20px); transition: 0.3s; 
}
.toast.show { opacity: 1; transform: translateY(0); }
.hidden { display: none; }