:root {
    --couleur-primaire: #2c3e50;
    --couleur-accent: #3498db;
    --couleur-fond: #f5f6fa;
    --couleur-active: #27ae60;
    --couleur-cloturee: #95a5a6;
}

* { box-sizing: border-box; }

body {
    font-family: system-ui, sans-serif;
    background: var(--couleur-fond);
    margin: 0;
    color: #2c3e50;
}

header {
    background: var(--couleur-primaire);
    color: #fff;
    padding: 1rem;
}

main { max-width: 800px; margin: 0 auto; padding: 1rem; }

form label { display: block; margin-top: 1rem; font-weight: 600; }
form input, form textarea, form select {
    width: 100%; padding: 0.6rem; margin-top: 0.3rem;
    border: 1px solid #ccc; border-radius: 4px; font-size: 1rem;
}
form textarea { min-height: 200px; }

button, .btn {
    background: var(--couleur-accent); color: #fff; border: none;
    padding: 0.6rem 1.2rem; border-radius: 4px; cursor: pointer; margin-top: 1rem;
}

.filtres { display: flex; gap: 1rem; margin-bottom: 1rem; }

#liste-notes { list-style: none; padding: 0; }
.note-item {
    background: #fff; border-radius: 6px; padding: 1rem; margin-bottom: 0.8rem;
    display: flex; flex-direction: column; gap: 0.3rem;
    border-left: 4px solid var(--couleur-active);
}
.note-item.note-cloturee { border-left-color: var(--couleur-cloturee); opacity: 0.7; }
.note-mot-clef { font-weight: 700; color: var(--couleur-accent); }
.note-date { font-size: 0.8rem; color: #777; }