@font-face {
  font-family: "PIX Dot";
  src: url("/static/fonts/PIX-DOT-1-100.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "PIX Dot 140";
  src: url("/static/fonts/PIX-DOT-1-140.ttf") format("truetype");
  font-display: swap;
}
:root {
  --fond: #16120f; --carte: #221c17; --bord: #37302a;
  --texte: #ede4d8; --sourd: #a89b8a; --accent: #f2ecdf;  /* blanc cassé */
  --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 {
  padding: 12px 24px; border-bottom: 1px solid var(--bord);
  position: sticky; top: 0; z-index: 300; background: var(--fond);
}
.entete-ligne { display: flex; justify-content: space-between; align-items: center; }
.entete-gauche { display: flex; align-items: center; gap: 14px; }
/* pictogrammes d'en-tête (collection, sortie) : mobiles uniquement */
.ico-entete { display: none; }
a.ico-collection { color: var(--sourd); line-height: 0; }
a.ico-collection:hover { color: var(--accent); }
.ico-entete svg, svg.ico-sortie { width: 20px; height: 20px; }
.entete-titres { padding-top: 7px; font-size: 13px; white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; }
#et-titre { font-family: var(--titres); color: var(--accent); }
.entete .deconnexion { color: var(--sourd); font-size: 12px;
                       text-transform: uppercase; letter-spacing: .04em;
                       text-decoration: none; }
.entete .deconnexion:hover { color: var(--texte); }
body.defile .entete .deconnexion { display: none; }
.logo { font-family: "PIX Dot 140", var(--titres); font-size: 17px;
        font-weight: 400; color: var(--texte); text-decoration: none;
        letter-spacing: .01em; }
.nav-droite { display: flex; align-items: center; gap: 14px; }
select.selecteur-langue {
  background: var(--carte); color: var(--texte); border: 1px solid var(--bord);
  border-radius: 8px; padding: 5px 8px; font-size: 12px; cursor: pointer;
}
select.selecteur-langue:focus { outline: none; border-color: var(--accent); }
.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; }
.bouton.danger { background: var(--rouge); color: #16120f; }

.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; }
.tri-cascade { display: flex; gap: 8px; }
.tri-cascade select { flex: 1; min-width: 0; }
.point-couleur { display: inline-block; width: 16px; height: 16px;
                 border-radius: 50%; border: 1px solid var(--bord);
                 vertical-align: middle; }
.col-couleur { text-align: center; }

/* --- mur de pochettes par couleur --- */
.mur { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px;
       margin: 18px 0 40px; }
.mur-case { text-decoration: none; color: var(--sourd); min-width: 0; }
.mur-case img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
                border-radius: 4px; }
.mur-case:hover img { outline: 2px solid var(--accent); }
.mur-titre { display: block; font-size: 10px; line-height: 1.35; margin-top: 3px;
             overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
             -webkit-box-orient: vertical; }
.mur-case:hover .mur-titre { color: var(--texte); }
@media (max-width: 900px) {
  .mur { grid-template-columns: repeat(4, 1fr); }
}

/* --- sets DJ : liste des sets et constructeur --- */
.ligne-nouveau-set { display: flex; gap: 10px; max-width: 460px; margin: 16px 0; }
.ligne-nouveau-set input { flex: 1; background: var(--fond); color: var(--texte);
  border: 1px solid var(--bord); border-radius: 8px; padding: 9px 12px; }
.ligne-nouveau-set .bouton { width: auto; margin: 0; white-space: nowrap; }
.liste-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
              gap: 14px; margin: 20px 0; }
.carte-set { display: flex; flex-direction: column; gap: 6px; background: var(--carte);
             border: 1px solid var(--bord); border-radius: 12px; padding: 16px 18px;
             text-decoration: none; color: var(--texte); }
.carte-set:hover { border-color: var(--accent); }
.carte-set-nom { font-family: var(--titres); font-size: 16px; }
.carte-set-notes { font-size: 12px; white-space: nowrap; overflow: hidden;
                   text-overflow: ellipsis; }
.entete-set { display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
              align-items: center; max-width: 780px; margin: 14px 0; }
.set-nom { font-family: var(--titres); font-size: 18px; background: var(--fond);
           color: var(--texte); border: 1px solid var(--bord); border-radius: 8px;
           padding: 8px 12px; min-width: 0; }
.entete-set .bouton { width: auto; margin: 0; }
.set-notes { grid-column: 1 / -1; background: var(--fond); color: var(--texte);
             border: 1px solid var(--bord); border-radius: 8px; padding: 8px 12px;
             font: 13px/1.5 inherit; resize: vertical; }
.set-nom:focus, .set-notes:focus { outline: none; border-color: var(--accent); }
#set-liste { margin: 10px 0; max-width: 840px; }
.set-ligne { display: flex; align-items: center; gap: 12px; padding: 7px 12px;
             border: 1px solid var(--bord); border-radius: 10px; margin-bottom: 6px;
             background: var(--carte); cursor: grab; }
.set-ligne.survole { border-color: var(--accent); }
.set-pos { width: 26px; text-align: right; color: var(--sourd); flex: none;
           font-variant-numeric: tabular-nums; }
.set-ligne img, .set-mini-vide { width: 40px; height: 40px; object-fit: cover;
                                 border-radius: 5px; background: var(--fond); flex: none; }
.set-txt { flex: 1; min-width: 0; }
.set-titre { display: block; white-space: nowrap; overflow: hidden;
             text-overflow: ellipsis; font-size: 14px; }
.set-meta { display: block; font-size: 12px; }
.set-piste { display: block; width: 100%; margin-top: 4px; background: var(--fond);
             color: var(--sourd); border: 1px solid var(--bord); border-radius: 6px;
             padding: 3px 8px; font-size: 12px; }
.set-piste.choisie { color: var(--texte); border-color: var(--accent); }
.set-ligne .apercu-btn { position: static; width: 28px; height: 28px; flex: none; }
.set-actions { display: flex; gap: 4px; flex: none; }
.set-btn { background: none; border: 1px solid var(--bord); border-radius: 6px;
           color: var(--sourd); cursor: pointer; width: 26px; height: 26px;
           font-size: 11px; }
.set-btn:hover { border-color: var(--accent); color: var(--accent); }
.set-btn:disabled { opacity: .3; cursor: default; }
.set-btn.retirer:hover { border-color: var(--rouge); color: var(--rouge); }
#set-recherche { width: 100%; max-width: 460px; background: var(--fond);
                 color: var(--texte); border: 1px solid var(--bord);
                 border-radius: 8px; padding: 9px 12px; margin: 6px 0 10px; }
#set-recherche:focus { outline: none; border-color: var(--accent); }
#set-catalogue { max-width: 840px; max-height: 430px; overflow-y: auto;
                 border: 1px solid var(--bord); border-radius: 10px;
                 background: var(--carte); }
.cat-ligne { display: flex; align-items: center; gap: 12px; padding: 6px 12px;
             border-bottom: 1px solid var(--bord); cursor: pointer; }
.cat-ligne:last-child { border-bottom: none; }
.cat-ligne:hover { background: #2a231d; }
.cat-ligne img { width: 34px; height: 34px; object-fit: cover; border-radius: 4px;
                 flex: none; }
.cat-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
           text-overflow: ellipsis; font-size: 13px; }
.cat-meta { color: var(--sourd); font-size: 12px; flex: none; }
.cat-badge { flex: none; color: var(--sourd); font-size: 12px;
             border: 1px solid var(--bord); border-radius: 999px; padding: 2px 9px; }
.cat-ligne.dans-set { opacity: .6; }
.cat-ligne.dans-set .cat-badge { border-color: var(--vert); color: var(--vert); }
.pied-set { margin: 26px 0; }
.pied-set .bouton { width: auto; }

/* --- aperçu audio multisource (boutique + feuilletage) --- */
.apercu-btn { width: 34px; height: 34px; border-radius: 50%;
              border: 1px solid var(--bord); background: rgba(34, 28, 23, .85);
              color: var(--texte); cursor: pointer; font-size: 12px; }
.apercu-btn:hover { border-color: var(--accent); color: var(--accent); }
.apercu-btn.joue { border-color: var(--accent); color: var(--accent); }
.article { position: relative; }
.article .apercu-btn { position: absolute; top: 8px; right: 8px; z-index: 5; }
#fl-detail > .apercu-btn { position: absolute; top: -4px; right: 26px; }
/* le lecteur vit DANS la barre d'en-tête, à gauche de la déconnexion —
   même forme sur bureau et mobile (le titre s'efface sur petit écran) */
#cw-lecteur { position: relative; display: flex; align-items: center; gap: 8px;
              max-width: min(380px, 42vw);
              background: var(--carte); border: 1px solid var(--bord);
              border-radius: 999px; padding: 4px 12px; font-size: 12.5px; }
#cw-lecteur .lect-mute { flex: none; background: none; border: none;
                         cursor: pointer; padding: 0; line-height: 0;
                         color: var(--sourd); }
#cw-lecteur .lect-mute:hover { color: var(--accent); }
#cw-lecteur .lect-mute svg { width: 15px; height: 15px; }
#cw-lecteur .lect-source { flex: none; color: var(--sourd); font-size: 11px;
                           border: 1px solid var(--bord); padding: 1px 7px;
                           border-radius: 999px; }
#cw-lecteur .lect-titre { min-width: 0; overflow: hidden;
                          text-overflow: ellipsis; white-space: nowrap; }
#cw-lecteur .lect-fermer { flex: none; background: none; border: none;
                           color: var(--sourd); cursor: pointer; font-size: 14px; }
#cw-lecteur .lect-fermer:hover { color: var(--rouge); }
/* navigation entre pistes (albums Bandcamp) : ‹ › + « n/N ▾ » déplie la
   liste — minimal et discret, la liste s'ouvre AU-DESSUS de la barre */
#cw-lecteur .lect-nav { flex: none; background: none; border: none;
                        color: var(--sourd); cursor: pointer; font-size: 17px;
                        padding: 0 2px; line-height: 1; }
#cw-lecteur .lect-nav:hover { color: var(--accent); }
#cw-lecteur .lect-liste-btn { flex: none; background: none;
                              border: 1px solid var(--bord); border-radius: 999px;
                              color: var(--sourd); cursor: pointer;
                              font-size: 11px; padding: 2px 8px; }
#cw-lecteur .lect-liste-btn:hover { border-color: var(--accent);
                                    color: var(--accent); }
#cw-lecteur .lect-pistes { position: absolute; top: calc(100% + 10px);
                           right: 0; min-width: 240px; max-width: 320px;
                           max-height: 46vh; overflow-y: auto; z-index: 320;
                           background: var(--carte); border: 1px solid var(--bord);
                           border-radius: 12px; padding: 6px;
                           box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#cw-lecteur .lect-piste { display: block; width: 100%; text-align: left;
                          background: none; border: none; color: var(--texte);
                          cursor: pointer; font-size: 12.5px; padding: 5px 8px;
                          border-radius: 8px; white-space: nowrap;
                          overflow: hidden; text-overflow: ellipsis; }
#cw-lecteur .lect-piste:hover { background: #2a231d; }
#cw-lecteur .lect-piste.actif { color: var(--accent); }

.ligne-clip { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.ligne-clip input[type="file"] { flex: 1; min-width: 0; }
.ligne-clip .bouton { width: auto; margin: 0; white-space: nowrap; }

/* --- historique des ventes Discogs --- */
tr.annulee td { color: var(--sourd); text-decoration: line-through; }
tr.annulee td a { color: var(--sourd); }

/* --- boutique : bloc de confiance vendeur (profil Discogs) --- */
.profil-vendeur { font-size: 13px; margin: -4px 0 16px; }
.profil-vendeur .profil-note { color: var(--vert); font-weight: 700; }
.profil-vendeur .attribution { font-size: 11px; }

/* --- boutique : choix de la vue par le visiteur --- */
.vues-boutique { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
a.fl-chip { text-decoration: none; }

/* --- boutique « magazine » : groupes par artiste/label avec description --- */
.groupe-boutique { margin: 34px 0 6px; }
.groupe-boutique h2 { font-family: var(--titres); font-weight: 400;
                      font-size: 24px; margin: 0 0 6px; letter-spacing: .03em;
                      border-top: 1px solid var(--bord); padding-top: 22px; }
.groupe-desc { max-width: 640px; color: var(--sourd); font-size: 14px;
               line-height: 1.6; margin: 0 0 14px; }
.grille-descriptions { display: grid;
                       grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                       gap: 14px; margin: 14px 0; }
.desc-groupe { margin: 0; max-width: none; padding: 16px 18px; }
.desc-groupe h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.desc-groupe textarea { width: 100%; background: var(--fond); color: var(--texte);
                        border: 1px solid var(--bord); border-radius: 8px;
                        padding: 8px 10px; font: 13px/1.5 inherit; resize: vertical; }
.desc-groupe textarea:focus { outline: none; border-color: var(--accent); }
.desc-groupe .bouton { margin-top: 8px; width: auto; padding: 6px 14px; font-size: 12px; }

/* --- boutique : galerie recto/verso et panier --- */
.article-vues { display: flex; gap: 6px; margin: 8px 0 0; }
.article-vues img { width: 44px; height: 44px; object-fit: cover; cursor: pointer;
                    border-radius: 6px; border: 1px solid var(--bord); opacity: .7; }
.article-vues img:hover { opacity: 1; }
.article-vues img.active { border-color: var(--accent); opacity: 1; }
#panier-bouton { position: fixed; top: 84px; right: 20px; z-index: 60;
                 background: var(--accent); color: #16120f; border: none;
                 border-radius: 999px; padding: 9px 16px; font-size: 15px;
                 font-weight: 700; cursor: pointer;
                 box-shadow: 0 6px 18px rgba(0,0,0,.45); }
#panier-panneau { position: fixed; top: 134px; right: 20px; z-index: 60;
                  width: min(360px, calc(100vw - 40px));
                  max-height: calc(100vh - 90px); overflow-y: auto;
                  background: var(--carte); border: 1px solid var(--bord);
                  border-radius: 14px; padding: 18px 20px;
                  box-shadow: 0 14px 40px rgba(0,0,0,.55); }
#panier-panneau h2 { margin: 0 0 10px; font-size: 17px; }
.panier-ligne { display: flex; align-items: center; gap: 10px; padding: 7px 0;
                border-bottom: 1px solid var(--bord); }
.panier-ligne img { width: 38px; height: 38px; object-fit: cover; border-radius: 5px; }
.panier-ligne-titre { flex: 1; min-width: 0; font-size: 13px;
                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panier-ligne-prix { font-size: 13px; white-space: nowrap; }
.panier-ligne-retirer { background: none; border: none; color: var(--sourd);
                        cursor: pointer; font-size: 14px; }
.panier-ligne-retirer:hover { color: var(--rouge); }
#panier-total-ligne { display: flex; justify-content: space-between;
                      margin: 12px 0 6px; font-size: 15px; }
/* destination + port estimé (grille zone × gabarit du vendeur) */
#panier-destination-ligne, #panier-port-ligne, #panier-total-port-ligne {
  display: flex; justify-content: space-between; align-items: center;
  margin: 4px 0; font-size: 13.5px; }
#panier-total-port-ligne { font-size: 15px; border-top: 1px solid var(--bord);
                           padding-top: 6px; margin-top: 8px; }
#panier-destination select { background: var(--carte); color: var(--texte);
  border: 1px solid var(--bord); border-radius: 8px; padding: 4px 8px; }
select#panier-destination { background: var(--carte); color: var(--texte);
  border: 1px solid var(--bord); border-radius: 8px; padding: 4px 8px;
  font-size: 12.5px; max-width: 60%; }
.panier-note { font-size: 12px; margin: 6px 0; }
/* grille de saisie des frais de port (page paramètres) */
.grille-expedition { border-collapse: collapse; margin: 4px 0 16px; }
.grille-expedition th, .grille-expedition td { padding: 5px 8px;
  font-size: 12.5px; text-align: left; border: none; }
.grille-expedition thead th { color: var(--sourd); font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; }
.grille-expedition tbody th { color: var(--sourd); font-weight: 400; }
.grille-expedition input { width: 84px; }
#panier-panneau .bouton { width: 100%; margin-top: 8px; text-align: center; }
a { color: var(--accent); }

/* --- tableau de bord : cartes KPI --- */
.actions-dash { justify-content: flex-start; margin: 18px 0 8px; }
.ligne-sync { display: flex; align-items: center; gap: 12px; font-size: 13px;
              margin: 0 0 6px; }
.ligne-sync form { margin: 0; }
.ligne-sync .bouton { width: auto; margin: 0; padding: 5px 12px; font-size: 12px; }
.titre-section { font-size: 16px; color: var(--accent); margin: 26px 0 4px;
                 border-top: 1px solid var(--bord); padding-top: 16px; }
.ligne-boutique { font-size: 14px; margin: 4px 2px 0; }
.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); }
select.filtre-auto { background: var(--carte); color: var(--sourd); border: 1px solid var(--bord);
                     border-radius: 20px; padding: 5px 10px; font-size: 13px; max-width: 190px; }
select.filtre-auto:focus { outline: none; border-color: var(--accent); color: var(--texte); }
/* PAS d'overflow:hidden ici : il casserait les en-têtes collants (sticky) —
   les coins arrondis sont posés sur les cellules d'angle à la place. */
table.explorateur { width: 100%; border-collapse: collapse; background: var(--carte);
                    border: 1px solid var(--bord); border-radius: 12px; }
.explorateur thead th:first-child { border-top-left-radius: 12px; }
.explorateur thead th:last-child { border-top-right-radius: 12px; }
.explorateur tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.explorateur tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; }
.explorateur th, .explorateur td { padding: 8px 12px; text-align: left;
                                   border-bottom: 1px solid var(--bord); }
/* En-têtes de colonnes FIGÉS au défilement, juste sous l'en-tête du site
   (hauteur variable exposée en --entete-h par le script de base.html). */
.explorateur thead th { position: sticky; top: var(--entete-h, 60px);
                        z-index: 5; box-shadow: 0 1px 0 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; }
/* Étiquettes de pressage/format (version, format) : chip PLEINE et carrée,
   pour se distinguer au premier coup d'œil des genres/styles en contour. */
.tag-presse { color: #16120f; font-weight: 700; border-radius: 4px;
              text-transform: uppercase; letter-spacing: .03em; font-size: 10.5px; }
.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, .barre-tags[hidden] { 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; }

/* --- feuilletage vertical : pochettes à gauche, fiche détaillée à droite ---
   Page « pleine fenêtre » : tout tient dans l'écran, sans défilement de page,
   et la taille des pochettes suit la fenêtre (vh/vw). */
body.plein { height: 100vh; overflow: hidden;
             display: flex; flex-direction: column; }
body.plein .conteneur { max-width: 1500px; flex: 1 1 auto; min-height: 0;
                        width: 100%; padding: 8px 24px 10px; display: flex;
                        flex-direction: column; overflow: hidden; }
#fl-entete { display: flex; align-items: baseline; gap: 14px; flex: none; }
#fl-entete h1 { font-size: 20px; margin: 0; }
#fl-entete a { text-decoration: none; font-size: 13px; }

#fl-formats { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px;
              flex: none; }
.fl-chip { background: var(--carte); border: 1px solid var(--bord); color: var(--sourd);
           border-radius: 999px; padding: 5px 14px; font-size: 13px; cursor: pointer; }
.fl-chip:hover { border-color: var(--accent); color: var(--texte); }
.fl-chip.actif { background: var(--accent); border-color: var(--accent);
                 color: #16120f; font-weight: 700; }

#fl-split { display: flex; gap: 24px; margin: 0; align-items: stretch;
            flex: 1 1 auto; min-height: 0; }
#fl-gauche { flex: 0 0 48%; position: relative; overflow: hidden;
             user-select: none; }
#fl-scene { position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            overflow: hidden; }
.fl-pochette { position: absolute; width: min(62vh, 40vw, 640px);
               height: min(62vh, 40vw, 640px);
               transition: transform .4s cubic-bezier(.22, .61, .36, 1),
                           opacity .4s cubic-bezier(.22, .61, .36, 1),
                           filter .4s cubic-bezier(.22, .61, .36, 1);
               cursor: grab; box-shadow: 0 12px 34px rgba(0,0,0,.55);
               background: var(--carte); border: 1px solid var(--bord); }
/* les disques d'avant et d'après sont COMPLÈTEMENT flous (pas seulement
   sous les bandes) ; seul le disque central est net */
.fl-pochette:not(.centrale) { filter: blur(9px); }
#fl-scene.glisse .fl-pochette { cursor: grabbing; transition: none; }
.fl-pochette.immediat { transition: none; }
.fl-pochette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-pochette.centrale { cursor: default; }
.fl-vinyle { width: 100%; height: 100%; border-radius: 50%;
             background: radial-gradient(circle at 50% 50%,
               #221c17 0%, #221c17 18%, #0c0a08 19%, #17130f 36%,
               #0c0a08 37%, #1a1512 58%, #0c0a08 59%, #131007 100%);
             display: flex; align-items: center; justify-content: center; }
.fl-vinyle span { font-family: var(--titres); font-size: 40px; color: var(--accent);
                  background: #16120f; border-radius: 50%; width: 34%; height: 34%;
                  display: flex; align-items: center; justify-content: center; }
.fl-nav { position: absolute; left: 50%; transform: translateX(-50%); z-index: 120;
          width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--bord);
          background: rgba(34, 28, 23, .85); color: var(--texte);
          font-size: 15px; cursor: pointer; }
.fl-nav:hover { border-color: var(--accent); color: var(--accent); }
#fl-prec { top: 6px; }
#fl-suiv { bottom: 6px; }
#fl-compteur { position: absolute; right: 10px; bottom: 8px; z-index: 120;
               margin: 0; font-size: 13px; }

#fl-droite { flex: 1; min-width: 0; display: flex; flex-direction: column;
             justify-content: center; padding: 0; overflow: hidden; }
/* La fiche est une colonne flex : quand la fenêtre manque de hauteur, seule la
   liste des morceaux (#fd-pistes) se comprime — jusqu'à son min-height — au
   lieu de faire apparaître une DEUXIÈME barre de défilement sur la fiche.
   Le défilement de la fiche entière ne reste qu'en dernier recours. */
#fl-detail { width: 100%; min-height: 340px; max-height: 100%;
             overflow-y: auto; position: relative;
             display: flex; flex-direction: column; }
#fl-detail > * { flex: none; }
#fl-detail > #fd-pistes { flex: 0 1 auto; }
#fl-detail > .editer { position: absolute; top: 4px; right: 2px;
                       font-size: 16px; text-decoration: none; }
#fd-titre { font-family: var(--titres); font-weight: 400; font-size: 21px;
            margin: 0 0 6px; line-height: 1.35; min-height: 57px;
            padding-right: 26px; display: -webkit-box; -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden; }
#fd-titre a { color: var(--texte); text-decoration: none; }
#fd-titre a:hover { color: var(--accent); }
#fd-sous { margin: 0 0 16px; font-size: 14px; min-height: 22px; }
#fd-sous .picto { margin-left: 6px; }
.fd-grille { display: grid; grid-template-columns: 120px 1fr; gap: 7px 22px;
             margin: 0 0 12px; align-items: baseline; }
/* les deux groupes (Discogs puis CrucialWax) ne portent plus d'intitulé :
   un simple espace les sépare */
.fd-grille-cw { margin-top: 6px; }
.fd-l { color: var(--sourd); font-size: 11px; text-transform: uppercase;
        letter-spacing: .05em; }
.fd-v { font-size: 14px; min-width: 0; overflow-wrap: anywhere;
        font-variant-numeric: tabular-nums; }
.fd-editable { cursor: pointer; }
.fd-editable:hover { text-decoration: underline dotted var(--accent); }
#fd-fermer { display: none; }  /* visible seulement en fiche mobile dépliée */
/* case de vérification des éditions Net Cost / Net Price : « ancien → nouveau »,
   il faut cocher pour enregistrer (anti fausse manip) */
.confirme-edition { display: inline-flex; align-items: center; gap: 6px;
                    white-space: nowrap; cursor: pointer; font-size: 13px; }
.confirme-edition input { width: 15px; height: 15px; margin: 0;
                          accent-color: var(--accent); cursor: pointer; }
.confirme-edition s { color: var(--sourd); }
.confirme-edition b { color: var(--accent); font-weight: 700; }
#fd-statut { min-height: 20px; margin: 8px 2px 0; font-size: 13px; }
#fd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px;
           min-height: 50px; align-content: flex-start; }
#fd-pistes { min-height: 54px; max-height: 128px; overflow-y: auto;
             margin: 0 0 12px; font-size: 12px; line-height: 1.5; }
.fd-piste { display: block; white-space: nowrap; overflow: hidden;
            text-overflow: ellipsis; }
.fd-piste-rep { display: inline-block; min-width: 30px; color: var(--sourd); }
#fd-notes { font-size: 13px; margin: 0; min-height: 39px;
            display: -webkit-box; -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden; }
/* Fenêtre BASSE (pochettes grandes par rapport à la hauteur disponible) : la
   fiche se compacte — titre et notes sur 1 ligne, interlignes réduits — pour
   tenir sans barre de défilement ; #fd-pistes reste la seule zone qui défile. */
@media (max-height: 760px) {
  #fl-detail { min-height: 0; }
  #fd-titre { font-size: 18px; min-height: 25px; -webkit-line-clamp: 1;
              margin-bottom: 4px; }
  #fd-sous { margin-bottom: 8px; }
  .fd-grille { gap: 3px 18px; margin-bottom: 8px; }
  .fd-v { font-size: 13px; }
  #fd-tags { min-height: 26px; margin-bottom: 8px; }
  #fd-pistes { margin-bottom: 8px; }
  #fd-notes { min-height: 19px; -webkit-line-clamp: 1; }
}
/* Fenêtre TRÈS basse : la fiche défile de toute façon — la liste des morceaux
   s'affiche alors en entier pour qu'il n'y ait qu'UNE seule barre (la fiche),
   jamais deux imbriquées. */
@media (max-height: 620px) {
  #fl-detail > #fd-pistes { max-height: none; min-height: 0;
                            overflow: visible; flex: none; }
}
/* BUREAU (retour du 13/07) : la pochette centrale remplit la colonne en
   carré ; les disques d'avant/après dépassent UN PEU en haut et en bas,
   sous un REFLET FLOUTÉ (bande --bande, calée par le JS) qui garde l'effet
   de défilement ; la fiche s'aligne sur le carré — titre en haut, limite
   basse des informations à la même marge (padding posé par le JS). */
@media (min-width: 901px) {
  .fl-pochette { width: min(100vh - 280px, 44vw, 800px);
                 height: min(100vh - 280px, 44vw, 800px); }
  #fl-gauche::before, #fl-gauche::after {
    content: ""; position: absolute; left: 0; right: 0;
    height: var(--bande, 64px); z-index: 110; pointer-events: none;
    backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  }
  #fl-gauche::before { top: 0;
    background: linear-gradient(to bottom, rgba(20, 16, 12, .5), rgba(20, 16, 12, 0));
    -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent);
    mask-image: linear-gradient(to bottom, #000 35%, transparent); }
  #fl-gauche::after { bottom: 0;
    background: linear-gradient(to top, rgba(20, 16, 12, .5), rgba(20, 16, 12, 0));
    -webkit-mask-image: linear-gradient(to top, #000 35%, transparent);
    mask-image: linear-gradient(to top, #000 35%, transparent); }
  #fl-droite { justify-content: flex-start; }
  /* la fiche occupe EXACTEMENT la hauteur du carré : la tracklist absorbe
     l'espace libre pour que la dernière ligne tombe sur la limite basse ;
     la ligne d'état (confirmations d'édition) vit dans la bande basse */
  #fl-detail { height: 100%; max-height: none; }
  #fl-detail > #fd-pistes { flex: 1 1 auto; max-height: none; }
  #fl-droite { position: relative; }
  #fd-statut { position: absolute; left: 0; right: 0; margin: 0;
               bottom: calc(var(--bande, 64px) / 2 - 10px); }
}

/* aucune barre de défilement visible dans la fiche (la molette et le doigt
   continuent de défiler) */
#fl-detail, #fd-pistes { scrollbar-width: none; }
#fl-detail::-webkit-scrollbar, #fd-pistes::-webkit-scrollbar { display: none; }

/* Mobile / écrans étroits (retour iPhone SE du 13/07) : la POCHETTE occupe
   quasiment tout l'écran ; la fiche passe PAR-DESSUS, ancrée en bas, sur un
   voile FLOUTÉ de plus en plus net vers le bas qui laisse lire les textes ;
   UN SEUL défilement : celui du texte de la fiche (la tracklist s'y affiche
   en entier, jamais de barre imbriquée). */
@media (max-width: 900px) {
  /* en-tête : pictogrammes (bac de disques → /collection, porte → sortie) */
  .ico-entete, a.ico-collection { display: inline-flex; }
  .deconnexion-texte { display: none; }
  /* lecteur d'en-tête compact : le titre s'efface, la liste des pistes le
     garde ; restent ♪ ‹ › n/N ▾ ✕ */
  #cw-lecteur { max-width: 46vw; gap: 6px; padding: 3px 9px; }
  #cw-lecteur .lect-titre { display: none; }
  body.plein .conteneur { padding: 6px 12px 0; }
  /* le titre de page (« Feuilleter… ») et le lien retour disparaissent :
     l'icône collection de l'en-tête les remplace */
  #fl-entete { display: none; }
  #fl-formats { margin: 6px 0 8px; gap: 6px; }
  .fl-chip { padding: 4px 10px; font-size: 12px; }
  #fl-split { display: block; position: relative; }
  #fl-gauche { position: absolute; inset: 0; }
  /* pochette limite plein écran, posée dans la partie haute : le bas de la
     scène est réservé au voile replié (padding % = % de la largeur en CSS) */
  #fl-scene { padding-bottom: 18%; box-sizing: border-box; }
  .fl-pochette { width: min(88vw, 58vh); height: min(88vw, 58vh); }
  /* flèches et compteur sur le bord droit, au-dessus du voile */
  .fl-nav { left: auto; right: 8px; transform: none; }
  #fl-prec { top: 10%; }
  #fl-suiv { top: calc(10% + 50px); bottom: auto; }
  #fl-compteur { right: 12px; top: calc(10% + 102px); bottom: auto; }
  /* voile REPLIÉ par défaut : seulement titre + format · année · pays,
     fondu FIN (16px) entre l'image et le texte ; z-index > pochettes (100)
     et > flèches (120) pour couvrir la pile */
  #fl-droite { position: absolute; left: 0; right: 0; bottom: 0; z-index: 150;
               justify-content: flex-end;
               padding: 20px 10px calc(8px + env(safe-area-inset-bottom));
               background: linear-gradient(to bottom, rgba(20, 16, 12, 0) 0,
                           rgba(20, 16, 12, .86) 16px, rgba(20, 16, 12, .94) 100%);
               backdrop-filter: blur(12px);
               -webkit-backdrop-filter: blur(12px);
               -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 15px);
               mask-image: linear-gradient(to bottom, transparent 0, #000 15px);
               overflow: hidden; }
  /* plein écran : la rangée de filtres du haut s'efface aussi — seules les
     étiquettes DU DISQUE restent, en bas de la fiche */
  body.fiche-pleine #fl-formats { display: none; }
  /* replié : tout est caché sauf le titre et la sous-ligne (toucher le
     texte déplie) */
  #fl-droite:not(.etendu) .fd-cat, #fl-droite:not(.etendu) .fd-grille,
  #fl-droite:not(.etendu) #fd-pistes, #fl-droite:not(.etendu) #fd-tags,
  #fl-droite:not(.etendu) #fd-notes, #fl-droite:not(.etendu) .editer,
  #fl-droite:not(.etendu) .apercu-btn, #fl-droite:not(.etendu) #fd-statut {
    display: none; }
  #fl-droite:not(.etendu) #fd-sous { margin-bottom: 0; }
  /* déplié : les informations REMPLISSENT l'écran, l'image légèrement
     floutée derrière ; retour au défilement par le carré vide en haut à
     droite */
  #fl-droite.etendu { top: 0; max-height: none;
                      padding-top: 14px;
                      background: rgba(20, 16, 12, .93);
                      -webkit-mask-image: none; mask-image: none; }
  #fl-droite.etendu #fd-titre { -webkit-line-clamp: 2; }
  /* carré parfait VIDE (bordure seule) = fermer */
  #fl-droite.etendu #fd-fermer { display: block; position: absolute;
    top: 12px; right: 12px; z-index: 10; width: 24px; height: 24px;
    background: transparent; border: 2px solid var(--texte);
    border-radius: 2px; padding: 0; cursor: pointer; }
  /* le crayon et l'aperçu s'écartent du carré de fermeture */
  #fl-droite.etendu #fl-detail > .editer { right: 42px; }
  #fl-droite.etendu #fl-detail > .apercu-btn { right: 68px; }
  #fl-droite.etendu #fd-titre { padding-right: 64px; }
  #fl-detail { min-height: 0; }
  #fl-detail > #fd-pistes { max-height: none; min-height: 0;
                            overflow: visible; flex: none; }
  #fd-titre { font-size: 17px; min-height: 24px; -webkit-line-clamp: 1;
              cursor: pointer; }
  #fd-sous { cursor: pointer; }
  .fd-grille { gap: 4px 14px; grid-template-columns: 96px 1fr; }
  #fd-tags { min-height: 26px; }
  #fd-statut { margin: 4px 2px 0; }
}

/* --- vues de la collection : rangée d'icônes façon iOS --- */
.vues-icones { display: inline-flex; gap: 6px; vertical-align: middle; }
.vues-icones a { display: inline-flex; align-items: center; justify-content: center;
                 width: 32px; height: 32px; border-radius: 9px;
                 border: 1px solid var(--bord); color: var(--sourd); }
.vues-icones a:hover { color: var(--texte); border-color: var(--accent); }
.vues-icones a.actif { color: var(--accent); border-color: var(--accent); }
.vues-icones svg { width: 16px; height: 16px; }
.vues-sep { width: 1px; height: 20px; background: var(--bord);
            align-self: center; margin: 0 2px; }
/* tableau de bord à DEUX portes : tuiles larges */
.dash-deux { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
             max-width: 640px; }
.dash-deux .tuile { padding: 26px 22px 20px; font-size: 17px; }

/* --- tableau de bord minimaliste (13/07) --- */
.dash-vie { font-size: 13.5px; margin: 2px 0 0; }
.dash-vie strong { color: var(--texte); font-weight: 600; }
.dash-tuiles { display: grid; gap: 10px; margin: 16px 0 22px;
               grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.tuile { display: block; background: var(--carte); border: 1px solid var(--bord);
         border-radius: 12px; padding: 18px 16px 14px; color: var(--texte);
         text-decoration: none; font-family: var(--titres); font-size: 15px;
         letter-spacing: .02em; }
.tuile:hover { border-color: var(--accent); }
.tuile-note { display: block; margin-top: 5px; color: var(--sourd);
              font-family: system-ui, sans-serif; font-size: 11.5px;
              letter-spacing: 0; }

/* --- la chambre d'écoute (PLAN §11, prototype) --- */
.chambre-scene { margin: 12px auto 0; max-width: 900px; }
.chambre-scene svg { width: 100%; height: auto; display: block; }
.chambre-platine { display: flex; align-items: center; gap: 10px;
                   justify-content: center; margin: 16px 0 0; font-size: 14px;
                   color: var(--sourd); }
.chambre-platine .apercu-btn { position: static; flex: none; }

/* --- collection Bandcamp (PLAN §12) --- */
.bc-actions { display: flex; align-items: center; gap: 14px; margin: 10px 0 18px; }
.bc-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
             gap: 14px; }
.bc-carte { background: var(--carte); border: 1px solid var(--bord);
            border-radius: 12px; overflow: hidden; display: flex;
            flex-direction: column; position: relative; }
.bc-image { position: relative; display: block; aspect-ratio: 1; }
.bc-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ▶ : lecture immédiate dans le lecteur CrucialWax (un seul clic) */
.bc-jouer { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px;
            border-radius: 50%; background: rgba(22, 18, 15, .85);
            border: 1px solid var(--bord); color: var(--texte);
            font-size: 13px; cursor: pointer; }
.bc-jouer:hover { border-color: var(--accent); color: var(--accent); }
.bc-ecoute { font-size: 12px; }
/* la date d'achat et le vendeur sont des champs LIBRES (parfois une phrase
   entière) : colonnes plafonnées, texte complet en infobulle */
.explorateur td.date-achat { max-width: 108px; white-space: nowrap;
                             overflow: hidden; text-overflow: ellipsis; }
.explorateur td.vendeur { max-width: 140px; white-space: nowrap;
                          overflow: hidden; text-overflow: ellipsis; }
/* ▶ discret dans les lignes du tableau de la collection */
.explorateur .apercu-btn { position: static; width: 22px; height: 22px;
                           font-size: 9px; padding: 0; margin-left: 6px;
                           vertical-align: middle; }
.bc-infos { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px;
            font-size: 13.5px; }
.bc-infos a { color: var(--texte); text-decoration: none; }
.bc-infos a:hover { color: var(--accent); }
.bc-vinyle { color: var(--accent); }
.bc-lecteur { margin: 0; }
.bc-lecteur iframe { display: block; }

/* --- boutique publique --- */
.grille-boutique { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                   gap: 16px; margin: 24px 0; }
.article { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px;
           padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.article-image { display: block; margin: -16px -18px 4px; }
.article-image img { width: 100%; aspect-ratio: 1; object-fit: cover;
                     border-radius: 12px 12px 0 0; display: block; }
.article-vinyle { display: flex; align-items: center; justify-content: center;
                  width: 100%; aspect-ratio: 1; border-radius: 12px 12px 0 0;
                  background: radial-gradient(circle at 50% 50%,
                    #221c17 0%, #221c17 18%, #0c0a08 19%, #17130f 36%,
                    #0c0a08 37%, #1a1512 58%, #0c0a08 59%, #131007 100%); }
.article-vinyle span { font-family: var(--titres); font-size: 34px; color: var(--accent);
                       background: #16120f; border-radius: 50%; width: 30%; aspect-ratio: 1;
                       display: flex; align-items: center; justify-content: center; }
.article-titre a { color: var(--texte); text-decoration: none; font-weight: 700; }
.article-titre a:hover { color: var(--accent); }
.article-meta { color: var(--sourd); font-size: 13px; }
.article-prix { display: flex; align-items: baseline; gap: 10px; margin-top: auto; }
.prix-site { font-family: var(--titres); font-size: 22px; color: var(--accent); }
.prix-barre { color: var(--sourd); text-decoration: line-through; font-size: 13px; }
.article .bouton { text-align: center; }
label.case { display: flex; align-items: center; gap: 8px; color: var(--texte);
             font-size: 14px; margin-top: 16px; }
label.case input { width: auto; margin: 0; }

/* --- 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; }

/* --- statistiques (courbes SVG serveur) --- */
.stat-bloc { margin: 20px 0 30px; }
.stat-bloc h2 { font-size: 16px; margin: 0 0 8px; }
.stat-bloc .graphe { width: 100%; height: auto; display: block; }
.stat-bloc .aide { margin-top: 6px; }

/* --- nettoyage des donnees (fusion de vendeurs + historique) --- */
.liste-fusions { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 26px; }
.carte-fusion { display: flex; align-items: center; justify-content: space-between;
                gap: 14px; flex-wrap: wrap; padding: 10px 14px;
                border: 1px solid var(--bord); border-radius: 10px; }
.fusion-variantes { display: flex; gap: 12px; flex-wrap: wrap; }
.fusion-variante { white-space: nowrap; }
.fusion-action { display: flex; gap: 8px; align-items: center; }
.fusion-action select { margin: 0; width: auto; }
.sync-oui { color: #7ac074; }
.sync-non { color: var(--sourd); }
.manip-detail { margin-top: 4px; }
.manip-detail summary { cursor: pointer; font-size: 12px; }
.manip-detail ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.manip-annulee td { opacity: 0.55; }

/* --- rapport de collection (une page, imprimable) --- */
.page-rapport { max-width: 720px; }
.page-rapport p { margin: 14px 0; font-size: 15px; line-height: 1.6; }
.stat-rapport { margin: 30px 0; text-align: center; }
.dash-vie .fiab { color: var(--sourd); text-decoration: none; }
.dash-vie .fiab:hover { color: var(--accent); }
@media print {
  .entete, .sans-impression { display: none !important; }
  body { background: #fff; color: #111; }
  .page-rapport p { color: #111; }
  .page-rapport .sourd { color: #555; }
}

/* --- pied de page + page a-propos --- */
footer.pied { max-width: 1200px; margin: 40px auto 18px; padding: 0 24px;
              text-align: center; }
footer.pied a { color: var(--sourd); font-size: 12px; text-decoration: none; }
footer.pied a:hover { color: var(--accent); }
.apropos-carte { display: flex; gap: 34px; align-items: flex-start;
                 flex-wrap: wrap; margin-top: 22px; }
.apropos-camembert { flex: none; }
.apropos-version { font-family: var(--titres); font-size: 20px; margin: 0 0 4px; }
.jalons { list-style: none; margin: 12px 0 0; padding: 0; font-size: 14px; }
.jalons li { padding: 3px 0; color: var(--sourd); }
.jalons li.fait { color: var(--texte); }
.jalons .jalon-etat { display: inline-block; width: 18px; color: var(--accent); }