/* ============================================================
   QUATUOR — feuille de style
   Palette « papier et encre » : sobre, lisible longtemps,
   pensée pour la lecture de partitions et la scène.
   ============================================================ */

:root{
  --papier:#faf8f4;      --papier-2:#f2eee6;     --papier-3:#e8e2d6;
  --encre:#1c1b18;       --encre-2:#4a4740;      --encre-3:#7d786d;
  --trait:#ddd6c8;       --trait-fort:#c5bca9;
  --rouge:#96331f;       --rouge-clair:#c25a3f;  --rouge-fond:#f6e6df;
  --bleu:#2b5560;        --bleu-clair:#417d8b;   --bleu-fond:#e2edef;
  --or:#8a6a1f;          --or-fond:#f5ecd6;
  --vert:#3d5c34;        --vert-fond:#e6eee0;
  --ombre:0 1px 2px rgba(28,27,24,.06), 0 4px 14px rgba(28,27,24,.05);
  --ombre-fort:0 2px 6px rgba(28,27,24,.10), 0 16px 40px rgba(28,27,24,.13);
  --r:9px; --r-l:14px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]){
    --papier:#14151a;    --papier-2:#1c1e24;     --papier-3:#252830;
    --encre:#e9e5dc;     --encre-2:#b3ada0;      --encre-3:#878175;
    --trait:#2f333c;     --trait-fort:#434955;
    --rouge:#e08163;     --rouge-clair:#ea9a80;  --rouge-fond:#2e1d18;
    --bleu:#79b6c4;      --bleu-clair:#93c9d5;   --bleu-fond:#16262b;
    --or:#d6ad5c;        --or-fond:#2a2313;
    --vert:#8fb884;      --vert-fond:#1a2417;
    --ombre:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
    --ombre-fort:0 2px 6px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.45);
  }
}
:root[data-theme="sombre"]{
  --papier:#14151a;      --papier-2:#1c1e24;     --papier-3:#252830;
  --encre:#e9e5dc;       --encre-2:#b3ada0;      --encre-3:#878175;
  --trait:#2f333c;       --trait-fort:#434955;
  --rouge:#e08163;       --rouge-clair:#ea9a80;  --rouge-fond:#2e1d18;
  --bleu:#79b6c4;        --bleu-clair:#93c9d5;   --bleu-fond:#16262b;
  --or:#d6ad5c;          --or-fond:#2a2313;
  --vert:#8fb884;        --vert-fond:#1a2417;
  --ombre:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  --ombre-fort:0 2px 6px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.45);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--papier); color:var(--encre);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:var(--bleu);text-decoration-color:color-mix(in srgb,var(--bleu) 35%,transparent);text-underline-offset:2px}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--trait-fort);border-radius:6px;border:3px solid var(--papier)}
:focus-visible{outline:2px solid var(--bleu);outline-offset:2px;border-radius:4px}

/* ---------- ossature ---------- */
#app{display:flex;flex-direction:column;height:100vh;height:100dvh}

header.barre{
  display:flex;align-items:center;gap:14px;padding:0 16px;height:56px;flex:0 0 auto;
  background:var(--papier-2);border-bottom:1px solid var(--trait);z-index:40;
}
.marque{display:flex;align-items:baseline;gap:9px;margin-right:4px;flex:0 0 auto}
.marque b{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.01em}
.marque span{font-size:11px;color:var(--encre-3);letter-spacing:.10em;text-transform:uppercase}

nav.onglets{display:flex;gap:2px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
nav.onglets::-webkit-scrollbar{display:none}
nav.onglets button{
  padding:8px 15px;border-radius:var(--r);font-size:14px;font-weight:500;color:var(--encre-2);
  white-space:nowrap;transition:background .13s,color .13s;
}
nav.onglets button:hover{background:var(--papier-3)}
nav.onglets button[aria-selected="true"]{background:var(--encre);color:var(--papier)}

.pupitre-choix{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.pupitre-choix label{font-size:11px;color:var(--encre-3);letter-spacing:.07em;text-transform:uppercase}
select.pupitre{
  background:var(--papier);border:1px solid var(--trait-fort);border-radius:var(--r);
  padding:6px 10px;font-size:13.5px;font-weight:600;cursor:pointer;max-width:150px;
}
.ico-btn{
  width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;
  color:var(--encre-2);transition:background .13s;flex:0 0 auto;
}
.ico-btn:hover{background:var(--papier-3);color:var(--encre)}
.ico-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

main{flex:1 1 auto;min-height:0;position:relative}
.vue{position:absolute;inset:0;display:none;overflow:hidden}
.vue.active{display:flex}

/* ---------- panneau latéral de filtres ---------- */
.filtres{
  width:268px;flex:0 0 auto;border-right:1px solid var(--trait);background:var(--papier-2);
  overflow-y:auto;padding:16px 15px 40px;
}
.filtres h3{
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--encre-3);
  margin:20px 0 8px;font-weight:600;
}
.filtres h3:first-child{margin-top:0}
.champ-rech{position:relative;margin-bottom:4px}
.champ-rech input{
  width:100%;padding:9px 11px 9px 32px;border:1px solid var(--trait-fort);border-radius:var(--r);
  background:var(--papier);font-size:14px;
}
.champ-rech svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  stroke:var(--encre-3);fill:none;stroke-width:1.8;pointer-events:none}
.puces{display:flex;flex-wrap:wrap;gap:5px}
.puce{
  padding:4.5px 10px;border-radius:100px;border:1px solid var(--trait-fort);background:var(--papier);
  font-size:12.5px;color:var(--encre-2);transition:all .12s;
}
.puce:hover{border-color:var(--encre-3)}
.puce[aria-pressed="true"]{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.curseur-ligne{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--encre-2)}
.curseur-ligne input[type=range]{flex:1;accent-color:var(--rouge)}
.curseur-ligne b{font-variant-numeric:tabular-nums;min-width:52px;text-align:right;color:var(--encre)}
.filtres select{
  width:100%;padding:8px 10px;border:1px solid var(--trait-fort);border-radius:var(--r);
  background:var(--papier);font-size:13.5px;
}
.raz{
  width:100%;margin-top:22px;padding:8px;border:1px solid var(--trait-fort);border-radius:var(--r);
  font-size:13px;color:var(--encre-2);
}
.raz:hover{background:var(--papier-3);color:var(--encre)}

/* ---------- listes ---------- */
.colonne{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.entete-liste{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:13px 20px;border-bottom:1px solid var(--trait);flex:0 0 auto;background:var(--papier);
}
.compte{font-size:13.5px;color:var(--encre-2)}
.compte b{color:var(--encre);font-variant-numeric:tabular-nums}
.liste{flex:1 1 auto;overflow-y:auto;padding:8px 12px 60px}

.carte{
  display:block;width:100%;text-align:left;padding:12px 14px;border-radius:var(--r-l);
  border:1px solid transparent;transition:background .12s,border-color .12s;margin-bottom:1px;
}
.carte:hover{background:var(--papier-2)}
.carte[aria-selected="true"]{background:var(--papier-2);border-color:var(--trait-fort)}
.carte .h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.carte .comp{font-size:13px;font-weight:650;color:var(--rouge);letter-spacing:.005em}
.carte .tit{font-family:var(--serif);font-size:16px;line-height:1.3;margin:1px 0 5px}
.carte .meta{display:flex;gap:7px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--encre-3)}
.sep-pt::before{content:"·";margin-right:7px}

.etiq{
  display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:5px;
  font-size:11px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
}
.etiq.dur{background:var(--papier-3);color:var(--encre-2)}
.etiq.ep{background:var(--bleu-fond);color:var(--bleu)}
.etiq.form{background:var(--or-fond);color:var(--or)}
.etiq.dispo{background:var(--vert-fond);color:var(--vert)}
.etiq.manque{background:var(--papier-3);color:var(--encre-3)}
.etiq.diff{background:var(--rouge-fond);color:var(--rouge)}

/* pastilles de disponibilité des pupitres */
.pastilles{display:inline-flex;gap:2.5px;vertical-align:middle}
.pastille{
  width:15px;height:15px;border-radius:4px;display:grid;place-items:center;
  font-size:8.5px;font-weight:700;background:var(--papier-3);color:var(--encre-3);
  border:1px solid transparent;
}
.pastille.ok{background:var(--vert-fond);color:var(--vert);border-color:color-mix(in srgb,var(--vert) 30%,transparent)}
.pastille.actif{outline:1.5px solid var(--rouge);outline-offset:1px}

/* ---------- panneau de détail ---------- */
.detail{
  width:min(460px,42vw);flex:0 0 auto;border-left:1px solid var(--trait);background:var(--papier-2);
  overflow-y:auto;display:flex;flex-direction:column;
}
.detail.vide{display:grid;place-items:center;padding:40px}
.detail-vide-txt{text-align:center;color:var(--encre-3);font-size:14px;max-width:230px;line-height:1.6}
.detail-vide-txt svg{width:34px;height:34px;stroke:var(--trait-fort);fill:none;stroke-width:1.3;margin-bottom:12px}
.detail-corps{padding:22px 24px 44px}
.detail h2{font-family:var(--serif);font-size:24px;line-height:1.22;font-weight:600;margin:4px 0 6px}
.detail .surtitre{font-size:13px;font-weight:650;color:var(--rouge);letter-spacing:.01em}
.detail .soustitre{font-size:14.5px;color:var(--encre-2);font-style:italic;margin-bottom:12px}
.bloc{margin-top:22px}
.bloc > h4{
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--encre-3);
  margin-bottom:9px;font-weight:600;
}
.tableau-inf{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:13.5px}
.tableau-inf dt{color:var(--encre-3)}
.tableau-inf dd{color:var(--encre)}
ol.mvts{list-style:none;counter-reset:m}
ol.mvts li{
  counter-increment:m;padding:6px 0 6px 30px;position:relative;font-size:13.5px;
  border-bottom:1px solid var(--trait);
}
ol.mvts li:last-child{border-bottom:0}
ol.mvts li::before{
  content:counter(m,upper-roman)".";position:absolute;left:0;top:6px;
  font-size:11.5px;color:var(--encre-3);font-variant-numeric:tabular-nums;
}
.note-intention{
  font-family:var(--serif);font-size:15.5px;line-height:1.68;color:var(--encre);
  padding:16px 18px;background:var(--papier);border-radius:var(--r-l);
  border-left:3px solid var(--rouge);
}
.oeuvre-prog{
  display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:11px 12px;
  border-radius:var(--r);transition:background .12s;
}
.oeuvre-prog:hover{background:var(--papier)}
.oeuvre-prog .rang{
  flex:0 0 auto;width:23px;height:23px;border-radius:50%;background:var(--encre);color:var(--papier);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;margin-top:2px;
}
.oeuvre-prog .txt{flex:1;min-width:0}
.oeuvre-prog .txt b{display:block;font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.28}
.oeuvre-prog .txt small{display:block;font-size:12.5px;color:var(--encre-3);margin-top:2px}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;
  border-radius:var(--r);font-size:13.5px;font-weight:600;transition:all .13s;
  border:1px solid transparent;white-space:nowrap;
}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.btn.plein{background:var(--encre);color:var(--papier)}
.btn.plein:hover{background:var(--encre-2)}
.btn.rouge{background:var(--rouge);color:#fff}
.btn.rouge:hover{filter:brightness(1.1)}
.btn.creux{border-color:var(--trait-fort);color:var(--encre-2);background:var(--papier)}
.btn.creux:hover{border-color:var(--encre-3);color:var(--encre)}
.btn.fantome{color:var(--encre-2)}
.btn.fantome:hover{background:var(--papier-3);color:var(--encre)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn.large{width:100%}
.rangee-btn{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ---------- lecteur PDF ---------- */
.lecteur{display:flex;width:100%;height:100%}
.outils{
  width:60px;flex:0 0 auto;background:var(--papier-2);border-right:1px solid var(--trait);
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0;overflow-y:auto;
}
.outil{
  width:42px;height:42px;border-radius:var(--r);display:grid;place-items:center;color:var(--encre-2);
  transition:all .12s;position:relative;flex:0 0 auto;
}
.outil:hover{background:var(--papier-3);color:var(--encre)}
.outil[aria-pressed="true"]{background:var(--rouge);color:#fff}
.outil svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.outil .glyphe{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1}
.outils hr{width:26px;border:0;border-top:1px solid var(--trait);margin:6px 0}
.info-bulle{
  position:absolute;left:52px;top:50%;transform:translateY(-50%);background:var(--encre);color:var(--papier);
  padding:5px 9px;border-radius:6px;font-size:12px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .12s;z-index:60;
}
.outil:hover .info-bulle{opacity:1}

.zone-pdf{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--papier-3)}
.barre-pdf{
  display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--papier-2);
  border-bottom:1px solid var(--trait);flex-wrap:wrap;flex:0 0 auto;
}
.barre-pdf .titre-doc{
  font-size:13.5px;font-weight:600;flex:1;min-width:120px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.nav-page{display:flex;align-items:center;gap:5px;font-size:13px}
.nav-page input{
  width:46px;text-align:center;padding:4px;border:1px solid var(--trait-fort);border-radius:6px;
  background:var(--papier);font-variant-numeric:tabular-nums;
}
.pages{flex:1;overflow:auto;padding:22px;display:flex;flex-direction:column;align-items:center;gap:22px}
.page-enveloppe{position:relative;box-shadow:var(--ombre-fort);background:#fff;line-height:0;flex:0 0 auto}
.page-enveloppe canvas{display:block;border-radius:2px}
.page-enveloppe canvas.calque{position:absolute;inset:0;touch-action:none;cursor:crosshair}
.num-page{
  position:absolute;bottom:-19px;right:0;font-size:11px;color:var(--encre-3);
  font-variant-numeric:tabular-nums;line-height:1;
}
.accueil-lecteur{
  flex:1;display:grid;place-items:center;padding:36px;text-align:center;
}
.accueil-lecteur .dedans{max-width:420px}
.accueil-lecteur svg.grand{width:46px;height:46px;stroke:var(--trait-fort);fill:none;stroke-width:1.2;margin-bottom:16px}
.accueil-lecteur h3{font-family:var(--serif);font-size:21px;font-weight:600;margin-bottom:8px}
.accueil-lecteur p{font-size:14px;color:var(--encre-2);line-height:1.62;margin-bottom:18px}
.depot{
  border:2px dashed var(--trait-fort);border-radius:var(--r-l);padding:26px;
  transition:all .15s;margin-top:6px;
}
.depot.survol{border-color:var(--rouge);background:var(--rouge-fond)}

/* ---------- métronome ---------- */
.metro{
  width:100%;height:100%;overflow-y:auto;display:flex;justify-content:center;
  padding:28px 20px 60px;
}
.metro-carte{width:100%;max-width:620px}
.tempo-affiche{text-align:center;margin-bottom:22px}
.tempo-nombre{
  font-family:var(--serif);font-size:88px;line-height:.95;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.tempo-terme{font-size:15px;color:var(--encre-3);font-style:italic;margin-top:4px;min-height:23px}
.pendule{
  display:flex;justify-content:center;align-items:flex-end;gap:9px;height:74px;margin:22px 0;
}
.temps{
  width:32px;border-radius:8px;background:var(--papier-3);transition:height .07s,background .07s;
  height:24px;display:grid;place-items:end center;padding-bottom:5px;font-size:11px;
  font-weight:700;color:var(--encre-3);cursor:pointer;
}
.temps.fort{background:var(--papier-3)}
.temps.actif{background:var(--rouge);color:#fff;height:64px}
.temps.actif.fort{background:var(--encre);color:var(--papier);height:74px}
.reglage{
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--trait);
}
.reglage:last-child{border-bottom:0}
.reglage > label{font-size:13.5px;color:var(--encre-2);flex:0 0 auto}
.reglage .val{font-size:13px;color:var(--encre-3);font-variant-numeric:tabular-nums;min-width:44px;text-align:right}
input[type=range]{accent-color:var(--rouge);flex:1;min-width:80px}
.grille-mesure{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- bibliothèque de fichiers ---------- */
.fichiers{width:100%;height:100%;overflow-y:auto;padding:26px 24px 70px}
.fichiers-dedans{max-width:900px;margin:0 auto}
.encart{
  background:var(--papier-2);border:1px solid var(--trait);border-radius:var(--r-l);
  padding:20px 22px;margin-bottom:16px;
}
.encart h3{font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:7px}
.encart p{font-size:14px;color:var(--encre-2);line-height:1.62;margin-bottom:14px}
.encart p:last-child{margin-bottom:0}
.encart.accent{border-left:3px solid var(--rouge)}
code,kbd{
  font-family:var(--mono);font-size:.88em;background:var(--papier-3);padding:1.5px 5px;
  border-radius:4px;color:var(--encre);
}
pre{
  font-family:var(--mono);font-size:12.5px;background:var(--papier-3);padding:12px 14px;
  border-radius:var(--r);overflow-x:auto;line-height:1.5;
}
pre code{background:none;padding:0}
.arbre{font-family:var(--mono);font-size:12.5px;color:var(--encre-2);line-height:1.75}
.arbre b{color:var(--encre)}

table.assoc{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:10px}
table.assoc th{
  text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3);
  padding:7px 9px;border-bottom:1px solid var(--trait-fort);font-weight:600;
}
table.assoc td{padding:8px 9px;border-bottom:1px solid var(--trait);vertical-align:middle}
table.assoc tr:hover td{background:var(--papier)}

/* ---------- fenêtre modale ---------- */
.voile{
  position:fixed;inset:0;background:rgba(20,19,17,.5);backdrop-filter:blur(3px);
  display:none;place-items:center;z-index:90;padding:20px;
}
.voile.ouvert{display:grid}
.modale{
  background:var(--papier);border-radius:var(--r-l);box-shadow:var(--ombre-fort);
  width:min(600px,100%);max-height:88vh;overflow-y:auto;padding:26px 28px;
}
.modale h3{font-family:var(--serif);font-size:22px;font-weight:600;margin-bottom:6px}
.modale > p{font-size:14px;color:var(--encre-2);line-height:1.6;margin-bottom:18px}
.progression{height:6px;background:var(--papier-3);border-radius:3px;overflow:hidden;margin:14px 0 8px}
.progression i{display:block;height:100%;background:var(--rouge);transition:width .25s;border-radius:3px}
.etat-txt{font-size:13px;color:var(--encre-2);min-height:20px}

/* ---------- lecture vocale ---------- */
.voix-barre{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 13px;background:var(--papier);
  border-radius:var(--r);border:1px solid var(--trait);margin-top:11px;
}
.voix-barre select{
  flex:1;min-width:120px;padding:6px 9px;border:1px solid var(--trait-fort);
  border-radius:6px;background:var(--papier-2);font-size:13px;
}

/* ---------- messages ---------- */
.toast-zone{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:100;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  background:var(--encre);color:var(--papier);padding:11px 18px;border-radius:100px;
  font-size:13.5px;font-weight:500;box-shadow:var(--ombre-fort);
  animation:monte .25s ease-out;max-width:min(520px,90vw);
}
.toast.err{background:var(--rouge);color:#fff}
@keyframes monte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.vide-msg{padding:50px 20px;text-align:center;color:var(--encre-3);font-size:14px}

/* ---------- adaptation écrans étroits ---------- */
@media (max-width:1000px){
  .detail{position:absolute;right:0;top:0;bottom:0;width:min(430px,92vw);z-index:30;box-shadow:var(--ombre-fort)}
  .detail:not(.ouvert){display:none}
}
@media (max-width:760px){
  header.barre{height:auto;flex-wrap:wrap;padding:8px 12px;gap:8px}
  .marque{width:100%}
  .filtres{position:absolute;left:0;top:0;bottom:0;z-index:31;box-shadow:var(--ombre-fort);
           width:min(340px,88vw);overflow-y:auto;
           padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  .filtres:not(.ouvert){display:none}
  .detail{width:100vw}
  .outils{width:48px}
  .outil{width:38px;height:38px}
  .tempo-nombre{font-size:68px}
  /* Le bouton n'existe que là où la colonne de filtres se cache. */
  .btn-filtres{display:inline-flex !important}
  .voile-filtres.ouvert{display:block}
  /* Une classe de plus que la règle de base, qui est écrite plus bas :
     à spécificité égale c'est la dernière qui gagne, et elle cache. */
  .filtres .filtres-fin{display:flex}
}

/* --- les filtres au doigt, sur téléphone ---------------------------------
   La colonne de filtres devient un panneau qui glisse. Trois choses le
   rendent utilisable d'une main : un bouton qui dit combien de filtres sont
   actifs, un voile qu'on touche pour refermer, et surtout un bouton de
   validation collé en bas — à portée du pouce — qui annonce le résultat
   avant qu'on referme. */
.btn-filtres{display:none;align-items:center;gap:7px}
.btn-filtres .compte-actifs{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--accent);color:#fff;font-size:11.5px;font-weight:600}
.btn-filtres .compte-actifs:empty{display:none}
.voile-filtres{display:none;position:absolute;inset:0;z-index:30;
  background:color-mix(in srgb,var(--encre) 34%,transparent);backdrop-filter:blur(1.5px)}
.filtres-fin{
  display:none;position:sticky;bottom:0;margin:14px -16px -16px;padding:12px 16px;
  gap:10px;border-top:1px solid var(--trait);
  background:color-mix(in srgb,var(--papier-2) 94%,transparent);backdrop-filter:blur(8px)}
.filtres-fin .btn{flex:1;justify-content:center}
.masque{display:none !important}










/* ### onglet mon disque : css début ### */
.dq-carte{border:1px solid var(--trait);border-radius:var(--r);padding:10px 12px;margin:6px 0;background:var(--papier-2)}
.dq-titre{font-weight:600;line-height:1.3}
.dq-meta{color:var(--encre-3);font-size:12.5px;margin-top:2px}
.dq-pup{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.dq-pup button{font:inherit;font-size:12px;border:1px solid var(--trait);border-radius:6px;
  padding:2px 8px;background:transparent;color:var(--encre-3);cursor:default}
.dq-pup button.la{border-color:var(--vert);color:var(--vert);cursor:pointer;background:var(--vert-fond)}
.dq-pup button.la:hover{border-color:var(--vert);filter:brightness(.97)}
.dq-etat{float:right;font-size:11.5px;padding:1px 7px;border-radius:999px;border:1px solid var(--trait)}
.dq-etat.ok{border-color:var(--vert);color:var(--vert);background:var(--vert-fond)}
.dq-etat.partiel{border-color:var(--or);color:var(--or);background:var(--or-fond)}
.dq-vide{padding:28px 12px;color:var(--encre-3);line-height:1.6}
/* ### onglet mon disque : css fin ### */

/* ### interface sobre : css début ### */
details.ailleurs{margin-top:14px;border-top:1px solid var(--trait);padding-top:10px}
details.ailleurs > summary{cursor:pointer;list-style:none;font-size:12.5px;
  color:var(--encre-3);padding:2px 0;user-select:none}
details.ailleurs > summary::-webkit-details-marker{display:none}
details.ailleurs > summary::before{content:'▸ ';font-size:11px}
details.ailleurs[open] > summary::before{content:'▾ '}
details.ailleurs > summary:hover{color:var(--encre-2)}
details.ailleurs .rangee-btn{margin-top:8px}
details.ailleurs .btn{font-size:12px;padding:4px 9px}
details.ailleurs .btn.plein{background:transparent;color:var(--rouge);
  border:1px solid var(--trait)}
/* ### interface sobre : css fin ### */
/* ### retour lecteur : css début ### */
#btnRetourLecteur{display:none;align-items:center;gap:6px;flex:0 0 auto;
  border:1px solid var(--trait-fort);background:var(--papier-2);color:var(--encre);
  border-radius:var(--r);padding:6px 12px;font:inherit;font-size:13px;
  font-weight:600;cursor:pointer;white-space:nowrap}
#btnRetourLecteur:hover{background:var(--papier-3);border-color:var(--encre-3)}
#btnRetourLecteur svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#btnRetourLecteur.visible{display:inline-flex}
/* ### retour lecteur : css fin ### */
/* ### affichage du lecteur : css début ### */
#pages.deux-pages{flex-flow:row wrap;align-content:flex-start;
  justify-content:center;gap:14px}
#pages.deux-pages .page-enveloppe{margin:0}

/* --- plein écran : la partition, et rien d'autre ---------------------------
   Sur un pupitre, tout ce qui n'est pas la musique est du bruit. On retire la
   barre du haut et la colonne d'outils, on réduit la marge autour des pages,
   et on ne laisse qu'un bandeau flottant en bas — à portée du pouce sur un
   téléphone, hors du champ de lecture sur un écran. */
#vue-lecteur.plein-ecran{background:var(--papier)}
#vue-lecteur.plein-ecran #barrePdf,
#vue-lecteur.plein-ecran #outils{display:none}
#vue-lecteur.plein-ecran #pages{padding:6px 6px 74px}
#vue-lecteur.plein-ecran .page-enveloppe{box-shadow:none}

.bandeau-plein{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));
  display:none;align-items:center;gap:4px;z-index:60;
  padding:6px 8px;border-radius:999px;border:1px solid var(--trait);
  background:color-mix(in srgb,var(--papier-2) 92%,transparent);
  box-shadow:var(--ombre-fort);backdrop-filter:blur(9px);
  transition:opacity .25s;max-width:calc(100vw - 20px);overflow-x:auto
}
#vue-lecteur.plein-ecran .bandeau-plein{display:flex}
.bandeau-plein.discret{opacity:.22}
.bandeau-plein .ico-btn{width:38px;height:38px;flex:0 0 auto}
.bandeau-plein .sep{width:1px;height:22px;background:var(--trait);margin:0 3px;flex:0 0 auto}
.bandeau-plein .pos{font-size:13px;color:var(--encre-2);min-width:62px;text-align:center;
  white-space:nowrap;flex:0 0 auto}
.bandeau-plein button.actif{background:var(--accent);color:#fff}
@media (max-width:600px){
  .bandeau-plein .ico-btn{width:34px;height:34px}
  .bandeau-plein .pos{min-width:54px;font-size:12px}
}
.choix-affichage{display:inline-flex;border:1px solid var(--trait);
  border-radius:var(--r);overflow:hidden;flex:0 0 auto}
.choix-affichage button{font:inherit;font-size:12.5px;padding:5px 10px;border:0;
  background:transparent;color:var(--encre-2);cursor:pointer;white-space:nowrap}
.choix-affichage button + button{border-left:1px solid var(--trait)}
.choix-affichage button.actif{background:var(--encre);color:var(--papier)}
.choix-affichage button:hover:not(.actif){background:var(--papier-3)}
@media (max-width:820px){ .choix-affichage button{padding:5px 8px;font-size:12px} }

/* --- le tirage au sort, depuis le lecteur -------------------------------
   Déchiffrer suppose de ne pas choisir. Une catégorie, un bouton, et la
   partie de son propre pupitre s'ouvre. */
.tirage-lecteur{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto}
.tirage-lecteur select{
  font:inherit;font-size:12.5px;padding:5px 7px;max-width:150px;
  border:1px solid var(--trait);border-radius:var(--r);
  background:var(--papier-2);color:var(--encre-2)}
.tirage-accueil{margin-top:22px;padding-top:20px;border-top:1px solid var(--trait)}
.tirage-accueil p{font-size:14px;color:var(--encre-2);margin:0 0 12px}
.tirage-accueil .rangee{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.tirage-accueil select{
  font:inherit;font-size:14px;padding:8px 11px;
  border:1px solid var(--trait);border-radius:var(--r);
  background:var(--papier-2);color:var(--encre)}
@media (max-width:600px){
  .tirage-lecteur select{max-width:104px;font-size:12px}
}
/* ### affichage du lecteur : css fin ### */
/* ### favoris youtube : css début ### */
.coeur{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;border:0;background:transparent;color:var(--encre-3);cursor:pointer;
  flex:0 0 auto;padding:0;font:inherit;transition:transform .12s,background .13s,color .13s;
  vertical-align:middle}
.coeur svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linejoin:round;stroke-linecap:round;pointer-events:none}
.coeur:hover{color:var(--rouge);background:var(--rouge-fond)}
.coeur:focus-visible{outline:2px solid var(--rouge);outline-offset:1px}
.coeur.aime{color:var(--rouge)}
.coeur.aime svg{fill:currentColor}
.coeur:active{transform:scale(.82)}
.carte .h .coeur{margin-left:auto;width:24px;height:24px;align-self:center}
.carte .h .coeur svg{width:15px;height:15px}
.oeuvre-prog .coeur{margin-top:1px;flex:0 0 auto}
.dq-carte .coeur{float:right;margin:-3px 0 0 6px}
.detail-corps h2 .coeur{margin-left:6px;width:32px;height:32px;position:relative;top:-2px}
.detail-corps h2 .coeur svg{width:20px;height:20px}
.barre-pdf .coeur,.barre-pdf .ico-btn.ecoute{border:1px solid var(--trait);border-radius:var(--r);
  width:34px;height:34px}
.barre-pdf .coeur.aime{border-color:color-mix(in srgb,var(--rouge) 40%,transparent);background:var(--rouge-fond)}
.ico-btn.ecoute svg{width:17px;height:17px}
.bandeau-plein .coeur{width:38px;height:38px;border-radius:var(--r);color:var(--encre-2)}
.bandeau-plein .coeur.aime{color:var(--rouge)}
.bandeau-plein .coeur svg{width:19px;height:19px}
.yt-trouve{font-size:12.5px;color:var(--encre-3);margin-top:9px;line-height:1.55}
.yt-trouve b{color:var(--encre-2);font-weight:600}
.etiq.averifier{background:var(--or-fond);color:var(--or)}
.btn svg.pl{fill:currentColor;stroke:none}
/* le cadre d'écoute : fixe, en bas à droite, par-dessus tout sauf les fenêtres */
#lecteurAudio{position:fixed;right:18px;bottom:18px;width:min(440px,calc(100vw - 36px));
  background:var(--papier);border:1px solid var(--trait-fort);border-radius:var(--r-l);
  box-shadow:var(--ombre-fort);z-index:95;overflow:hidden}
#lecteurAudio .tete{display:flex;align-items:center;gap:6px;padding:7px 8px 7px 14px;
  border-bottom:1px solid var(--trait);font-size:13px}
#lecteurAudio .tete b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600}
#lecteurAudio .tete .ico-btn{width:30px;height:30px}
#lecteurAudio iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
#lecteurAudio.replie iframe{height:1px;aspect-ratio:auto;opacity:0}
#lecteurAudio .liens{display:flex;gap:6px;padding:8px 10px;flex-wrap:wrap;align-items:center}
#lecteurAudio .liens .btn{padding:5px 10px;font-size:12.5px}
#lecteurAudio .liens small{color:var(--encre-3);font-size:12px;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
#lecteurAudio.replie .liens{display:none}
#resumeFavoris .puces{margin-top:8px}
#resumeFavoris .puce{cursor:pointer}
@media (max-width:700px){#lecteurAudio{right:8px;bottom:8px;width:calc(100vw - 16px)}}
/* ### favoris youtube : css fin ### */