:root {
  --fond: #f6f7f9;
  --carte: #ffffff;
  --texte: #1d2330;
  --doux: #5f6b7a;
  --bord: #dde2e8;
  --accent: #1f5f99;
  --accent-clair: #e6eff8;
  --ok: #1e7a4d;
  --alerte: #a15c00;
  --erreur: #b3261e;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--fond); color: var(--texte); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 28px 0 12px; }
.sous { color: var(--doux); margin: 0 0 20px; }

.barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; background: var(--carte); border-bottom: 1px solid var(--bord); padding: 10px 16px; }
.marque { font-weight: 700; font-size: 18px; letter-spacing: .04em; color: var(--texte); }
.barre nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.barre nav a { padding: 6px 10px; border-radius: 6px; color: var(--texte); }
.barre nav a.actif, .barre nav a:hover { background: var(--accent-clair); color: var(--accent); text-decoration: none; }
.moi { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.moi form { margin: 0; }

.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 16px 20px; }
.grille { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.stat { display: block; color: var(--texte); }
.stat strong { display: block; font-size: 28px; }
.stat:hover { border-color: var(--accent); text-decoration: none; }

table { width: 100%; border-collapse: collapse; background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--bord); vertical-align: top; }
th { background: #eef1f5; font-weight: 600; font-size: 13px; color: var(--doux); }
tr:last-child td { border-bottom: 0; }
.tableau { overflow-x: auto; }

.onglets { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.onglets a { padding: 6px 12px; border: 1px solid var(--bord); border-radius: 999px; background: var(--carte); color: var(--texte); font-size: 14px; }
.onglets a.actif { background: var(--accent); border-color: var(--accent); color: #fff; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: #eef1f5; color: var(--doux); }
.badge.etudes { background: #e8f0fb; color: #1f5f99; }
.badge.en_cours { background: #e6f4ec; color: var(--ok); }
.badge.livre { background: #f1ecfa; color: #5b3fa0; }
.badge.abandonne { background: #fbeaea; color: var(--erreur); }
.badge.en_attente { background: #fff3e0; color: var(--alerte); }
.badge.copie { background: #e6f4ec; color: var(--ok); }
.badge.erreur { background: #fbeaea; color: var(--erreur); }

form.pile { display: grid; gap: 12px; max-width: 560px; }
label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
input, select, textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--bord); border-radius: 6px; background: #fff; width: 100%; }
textarea { min-height: 90px; }
.cases { display: flex; gap: 16px; font-weight: 400; }
.cases label { display: flex; gap: 6px; align-items: center; font-weight: 400; }
.cases input { width: auto; }
button, .bouton { font: inherit; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; display: inline-block; }
.bouton.second, button.second { background: #fff; color: var(--accent); }
button.lien { background: none; border: 0; color: var(--accent); padding: 0; }
button.danger { background: var(--erreur); border-color: var(--erreur); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.ligne > * { flex: 1 1 180px; }
.ligne > button { flex: 0 0 auto; }

.flash { padding: 10px 14px; border-radius: 8px; background: #e6f4ec; color: var(--ok); }
.flash.erreur { background: #fbeaea; color: var(--erreur); }
.doux { color: var(--doux); }
.connexion { max-width: 380px; margin: 10vh auto; }
.deux { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .deux { grid-template-columns: 1.4fr 1fr; } }
code { background: #eef1f5; padding: 1px 6px; border-radius: 4px; word-break: break-all; }
@media (max-width: 720px) {
  .barre nav { order: 3; flex-basis: 100%; }
  .moi { margin-left: auto; }
}