@font-face {
  font-family: "PIX Dot";
  src: url("/static/fonts/PIX-DOT-1-100.ttf") format("truetype");
  font-display: swap;
}
:root {
  --fond: #16120f; --carte: #221c17; --bord: #37302a;
  --texte: #ede4d8; --sourd: #a89b8a; --accent: #e8a33d;
  --vert: #7ac074; --rouge: #d9605e;
  --titres: "PIX Dot", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
}
.entete {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px; border-bottom: 1px solid var(--bord);
}
.logo { font-family: var(--titres); font-size: 19px; font-weight: 400;
        color: var(--texte); text-decoration: none; letter-spacing: .02em; }
.logo .vinyle { color: var(--accent); }
.nav-droite { display: flex; align-items: center; gap: 18px; }
.selecteur-langue a {
  color: var(--sourd); text-decoration: none; font-size: 12px; margin: 0 3px;
  padding: 2px 5px; border-radius: 5px;
}
.selecteur-langue a.actif { color: var(--accent); border: 1px solid var(--accent); }
.selecteur-langue a:hover { color: var(--texte); }
.conteneur { max-width: 860px; margin: 0 auto; padding: 40px 24px 60px; }
body.large .conteneur { max-width: 1180px; }
h1, h2 { font-family: var(--titres); font-weight: 400; letter-spacing: .02em; }
h1 { font-size: 26px; margin: 0 0 12px; }
.sourd { color: var(--sourd); }
.erreur { color: var(--rouge); }
.succes { color: var(--vert); }
.fort { font-weight: 700; }

.héros { text-align: center; padding: 60px 0 30px; }
.héros h1 { font-size: 34px; }
.accroche { font-size: 17px; max-width: 560px; margin: 14px auto; }
.actions { margin-top: 30px; display: flex; gap: 14px; justify-content: center; }

.bouton {
  display: inline-block; background: var(--accent); color: #16120f;
  font-weight: 700; text-decoration: none; border: none; cursor: pointer;
  border-radius: 9px; padding: 10px 22px; font-size: 15px;
}
.bouton:hover { filter: brightness(1.1); }
.bouton.discret { background: transparent; color: var(--texte); border: 1px solid var(--bord); font-weight: 400; }
.bouton.discret:hover { border-color: var(--accent); color: var(--accent); filter: none; }
.bouton.inactif { background: var(--bord); color: var(--sourd); cursor: not-allowed; }

.carte-formulaire, .carte-info {
  background: var(--carte); border: 1px solid var(--bord); border-radius: 14px;
  padding: 28px 30px; max-width: 430px; margin: 30px auto;
}
.carte-info { max-width: 560px; margin: 20px 0; }
form label { display: block; margin: 14px 0 4px; color: var(--sourd); font-size: 13px; }
form input, form select {
  width: 100%; background: var(--fond); color: var(--texte);
  border: 1px solid var(--bord); border-radius: 8px; padding: 9px 12px;
  font-size: 15px; margin-top: 4px;
}
form input:focus, form select:focus { outline: none; border-color: var(--accent); }
form .bouton { margin-top: 20px; width: 100%; }
.large-form { max-width: 520px; }
.large-form h2 { font-size: 15px; color: var(--accent); margin: 22px 0 2px;
                 border-top: 1px solid var(--bord); padding-top: 18px; }
.large-form h2:first-of-type { border-top: none; padding-top: 0; }
.aide { color: var(--sourd); font-size: 12px; margin: 3px 0 0; }
a { color: var(--accent); }

/* --- tableau de bord : cartes KPI --- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 14px; margin: 24px 0; }
.kpi { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px;
       padding: 16px 18px; }
.kpi .valeur { font-family: var(--titres); font-size: 22px; font-weight: 400;
               color: var(--accent); }
.kpi .libelle { color: var(--sourd); font-size: 13px; margin-top: 4px; }

/* --- explorateur de collection --- */
.outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 20px 0 14px; }
#recherche { flex: 1 1 240px; max-width: 340px; background: var(--carte); color: var(--texte);
             border: 1px solid var(--bord); border-radius: 8px; padding: 8px 12px; font-size: 14px;
             margin: 0; }
.chip { background: var(--carte); border: 1px solid var(--bord); color: var(--sourd);
        border-radius: 20px; padding: 5px 14px; font-size: 13px; cursor: pointer; }
.chip:hover { border-color: var(--accent); color: var(--texte); }
.chip.actif { background: #3a2417; border-color: var(--accent); color: var(--accent); }
table.explorateur { width: 100%; border-collapse: collapse; background: var(--carte);
                    border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; }
.explorateur th, .explorateur td { padding: 8px 12px; text-align: left;
                                   border-bottom: 1px solid var(--bord); }
.explorateur th { background: #2a231d; color: var(--sourd); font-size: 12px;
                  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.explorateur th.triable { cursor: pointer; user-select: none; }
.explorateur th.triable:hover { color: var(--accent); }
.explorateur tbody tr:hover td { background: #2a231d; }
.explorateur .disque { max-width: 320px; overflow: hidden; text-overflow: ellipsis;
                       white-space: nowrap; }
.explorateur .disque a { color: var(--texte); text-decoration: none; }
.explorateur .disque a:hover { color: var(--accent); text-decoration: underline; }
.explorateur .format { max-width: 120px; overflow: hidden; text-overflow: ellipsis;
                       white-space: nowrap; color: var(--sourd); font-size: 13px; }
.explorateur .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.explorateur .vert { color: var(--vert); }
.etiquette { display: inline-block; border: 1px solid var(--bord); color: var(--sourd);
             border-radius: 20px; padding: 0 9px; font-size: 11.5px; white-space: nowrap; }
.etiquette.vendu { opacity: .6; }
.canal { display: inline-block; border: 1px solid var(--bord); color: var(--sourd);
         border-radius: 6px; padding: 0 7px; font-size: 11.5px; white-space: nowrap; }
.explorateur .num.manquant { color: var(--rouge); }
.explorateur .num.manquant::after { content: " !"; }
.explorateur td.editable { cursor: pointer; }
.explorateur td.editable:hover { text-decoration: underline dotted var(--accent); }
input.edition-prix { width: 86px; background: var(--fond); color: var(--texte);
                     border: 1px solid var(--accent); border-radius: 6px;
                     padding: 3px 6px; font-size: 13px; text-align: right; }
input.edition-prix:focus { outline: none; }
.icone-notes { margin-left: 6px; cursor: help; font-size: 12px; }
a.editer { text-decoration: none; font-size: 15px; opacity: .6; }
a.editer:hover { opacity: 1; }
.ligne-champs { display: flex; gap: 12px; }
.ligne-champs label { flex: 1; }
form textarea { width: 100%; background: var(--fond); color: var(--texte);
                border: 1px solid var(--bord); border-radius: 8px; padding: 9px 12px;
                font-size: 14px; font-family: inherit; margin-top: 4px; resize: vertical; }
form textarea:focus { outline: none; border-color: var(--accent); }
.badge-champ { font-family: system-ui, sans-serif; font-size: 11px; font-weight: 400;
               color: var(--sourd); border: 1px solid var(--bord); border-radius: 20px;
               padding: 1px 8px; margin-left: 8px; letter-spacing: 0; text-transform: none; }
.actions-form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.actions-form .bouton { width: auto; margin-top: 0; flex: 1; }

/* --- pictogrammes de condition : rond = média, carré = pochette --- */
.conditions { white-space: nowrap; }
.picto { display: inline-flex; align-items: center; justify-content: center;
         min-width: 26px; height: 18px; padding: 0 4px; margin-right: 4px;
         font-size: 10px; font-weight: 700; color: #16120f; vertical-align: middle; }
.picto.rond { border-radius: 10px; }
.picto.carre { border-radius: 3px; }

/* --- étiquettes (tags) --- */
.tag { display: inline-flex; align-items: center; gap: 4px; border: 1px solid;
       border-radius: 20px; padding: 1px 9px; font-size: 11.5px; margin: 2px 4px 2px 0;
       white-space: nowrap; }
.tags-ligne { margin-top: 4px; }
.tags-assignes { margin: 8px 0 14px; min-height: 24px; }
.tag-retirer { background: none; border: none; color: inherit; cursor: pointer;
               font-size: 14px; line-height: 1; padding: 0; margin: 0; width: auto; }
.ajout-tag { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.ajout-tag select { width: auto; margin: 0; }
.ajout-tag input { flex: 1; min-width: 160px; margin: 0; }
.ajout-tag .bouton { width: auto; margin: 0; white-space: nowrap; }
/* une liste déroulante stricte par catégorie d'étiquette */
.ligne-tag-cat { display: flex; gap: 8px; align-items: center; margin: 7px 0; flex-wrap: wrap; }
.ligne-tag-cat .cat-nom { flex: 0 0 64px; font-size: 11px; text-transform: uppercase;
                          letter-spacing: .05em; font-weight: 700; }
.ligne-tag-cat select { flex: 1; min-width: 150px; margin: 0; }
.ligne-tag-cat .nom-libre { flex: 1; min-width: 130px; margin: 0; }
.ligne-tag-cat .bouton { width: auto; margin: 0; padding: 7px 14px; font-size: 13px; }
.tag-cat-label { color: var(--sourd); font-size: 11px; text-transform: uppercase;
                 letter-spacing: .05em; margin: 0 2px 0 10px; align-self: center; }
.tag-cat-label:first-child { margin-left: 0; }
.barre-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.barre-tags:empty { display: none; }
.tag-filtre { background: var(--carte); border: 1px solid var(--bord); color: var(--sourd);
              border-radius: 20px; padding: 4px 13px; font-size: 13px; cursor: pointer; }
.tag-filtre:hover { border-color: var(--tc); color: var(--texte); }
.tag-filtre.actif { background: var(--tc); border-color: var(--tc); color: #16120f; font-weight: 700; }

/* --- liste des alertes du moniteur --- */
.liste-alertes { list-style: none; margin: 10px 0 0; padding: 0; }
.alerte { display: flex; align-items: baseline; gap: 8px; padding: 7px 0;
          border-bottom: 1px solid var(--bord); font-size: 14px; }
.alerte:last-child { border-bottom: none; }
.alerte-icone { flex: none; }
.alerte a { color: var(--texte); text-decoration: none; }
.alerte a:hover { color: var(--accent); }
.alerte-detail { color: var(--sourd); flex: 1; }
.alerte-date { color: var(--sourd); font-size: 12px; flex: none; }