/* 🧊 Plugin Fichiers — fonctionne dans le thème du site et dans la gestion. */
.fi { --fi-ligne: color-mix(in srgb, currentColor 14%, transparent); --fi-accent: var(--accent, #c8553d); font-size: 1rem; }
.fi a { text-decoration: none; }
.fi-fil { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .5rem 0 1rem; font-weight: 600; }
.fi-fil span { opacity: .45; }
.fi-barre { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; margin-bottom: 1rem; }
.fi-btn {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font: inherit; font-weight: 600; font-size: .92rem;
  padding: .5rem .9rem; border-radius: 9px; border: 1.5px solid var(--fi-ligne); background: transparent; color: inherit; list-style: none;
}
.fi-btn::-webkit-details-marker { display: none; }
.fi-btn:hover { border-color: var(--fi-accent); }
.fi-btn-plein { background: var(--fi-accent); border-color: var(--fi-accent); color: var(--accent-encre, #fff); }
.fi-danger { color: #a3271a; border-color: #f0b9ad; }
.fi-nouveau { position: relative; }
.fi-nouveau form { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; display: flex; gap: .4rem; padding: .6rem; border-radius: 12px; background: var(--fond, #fff); box-shadow: 0 8px 26px #0003; }
.fi-nouveau input, .fi-renommer input, .fi-act select, .fi-droits select {
  font: inherit; font-size: .92rem; padding: .4rem .6rem; border: 1px solid var(--fi-ligne); border-radius: 8px; background: #fff; color: #222; min-width: 0;
}
.fi-zone { border: 2px dashed var(--fi-ligne); border-radius: 14px; padding: 1rem; text-align: center; font-size: .9rem; opacity: .75; margin-bottom: 1rem; transition: background .15s, border-color .15s; }
.fi-zone.fi-survol { border-color: var(--fi-accent); background: color-mix(in srgb, var(--fi-accent) 10%, transparent); opacity: 1; }
.fi-envois { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .3rem; }
.fi-envois li { display: grid; grid-template-columns: minmax(0, 1fr) 140px 90px; gap: .6rem; align-items: center; font-size: .9rem; }
.fi-envois li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-envois progress { width: 100%; accent-color: var(--fi-accent); }
.fi-liste { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--fi-ligne); }
.fi-el { display: flex; align-items: center; gap: .8rem; padding: .7rem .3rem; border-bottom: 1px solid var(--fi-ligne); }
.fi-el.fi-joue { background: color-mix(in srgb, var(--fi-accent) 9%, transparent); }
.fi-ic { font-size: 1.4rem; width: 1.8rem; text-align: center; flex: none; }
.fi-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fi-nom, .fi-txt b { font-weight: 600; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-dossier .fi-nom { color: var(--fi-accent); }
.fi-txt small { font-size: .8rem; opacity: .65; }
.fi-act { display: flex; gap: .2rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.fi-act > button:not(.fi-btn), .fi-act > a { all: unset; cursor: pointer; width: 2.1rem; height: 2.1rem; border-radius: 8px; display: grid; place-items: center; font-size: 1rem; color: inherit; }
.fi-act > button:not(.fi-btn):hover, .fi-act > a:hover { background: var(--fi-ligne); }
.fi-act > button:focus-visible, .fi-act > a:focus-visible { outline: 2px solid var(--fi-accent); }
.fi-renommer { display: flex; gap: .4rem; }
.fi-vide { padding: 2rem 1rem; text-align: center; opacity: .7; }
.fi-doux { font-size: .85rem; opacity: .7; margin: .3rem 0; }
.fi-droits { margin: 0 0 1rem; padding: .7rem 1rem; border: 1px solid var(--fi-ligne); border-radius: 12px; }
.fi-droits summary { cursor: pointer; font-weight: 600; }
.fi-droits summary span { font-weight: 400; opacity: .8; }
.fi-droits-form { display: grid; gap: .8rem; margin-top: .8rem; }
.fi-droits-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.fi-droits-grille label { display: grid; gap: .25rem; font-weight: 600; font-size: .9rem; }
.fi-grise { opacity: .4; pointer-events: none; }
.fi-case { display: flex; gap: .5rem; align-items: center; font-size: .92rem; }
.fi-droits-form button { justify-self: start; }
@media (max-width: 600px) { .fi-envois li { grid-template-columns: 1fr 70px; } .fi-envois li small { display: none; } }

/* Lecteur audio */
#fi-lecteur {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 45; width: min(640px, calc(100vw - 24px));
  display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border-radius: 16px;
  background: #1d1916; color: #f6efe6; box-shadow: 0 12px 34px #0006; font: 600 14px system-ui, sans-serif;
}
#fi-lecteur button { all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; }
#fi-lecteur button:hover { background: #ffffff1c; }
.fi-l-titre { flex: 1; min-width: 0; display: grid; gap: 4px; }
.fi-l-titre b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-l-titre audio { width: 100%; height: 34px; }
.fi-avec-lecteur { padding-bottom: 100px; }
#fi-msg { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); z-index: 70; padding: 10px 18px; border-radius: 12px; background: #1d1916; color: #fff; font: 600 14px system-ui, sans-serif; opacity: 0; pointer-events: none; transition: opacity .25s; max-width: 90vw; text-align: center; }
#fi-msg.fi-on { opacity: 1; }