/* =============================================
   BIBLIOTHÈQUE DU TRÉSOR — FRONT CSS
   ============================================= */

/* Variables par défaut (overridées par PHP) */
.bt-library {
  --bt-gold:      #B8963E;
  --bt-gold-pale: rgba(184,150,62,0.12);
  --bt-navy:      #1A1C1E;
  --bt-font:      inherit;
  --bt-ft:        14px;
  --bt-fb:        13px;
  --bt-fm:        11px;
  --bt-fw:        500;
  --bt-border:    rgba(0,0,0,0.08);
  --bt-bg:        #ffffff;
  --bt-bg2:       #f8f8f8;
  --bt-text:      #333333;
  --bt-text2:     #666666;
  --bt-text3:     #999999;
  --bt-radius:    6px;
  font-family:    var(--bt-font);
  color:          var(--bt-text);
}

*, *::before, *::after { box-sizing: border-box; }

/* ── STATS ROW ── */
.bt-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.bt-stat-pill {
  background: var(--bt-bg2);
  border: 0.5px solid var(--bt-border);
  border-radius: var(--bt-radius);
  padding: 12px 14px;
  text-align: center;
}
.bt-snum {
  display: block;
  font-size: 22px;
  font-weight: var(--bt-fw);
  color: var(--bt-gold);
  line-height: 1;
  margin-bottom: 4px;
}
.bt-slbl { font-size: var(--bt-fm); color: var(--bt-text3); }

/* ── TOPBAR ── */
.bt-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.bt-search-wrap {
  flex: 1;
  min-width: 200px;
  position: relative;
}
.bt-search-ico {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--bt-text3);
  pointer-events: none;
}
.bt-search-input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 0.5px solid var(--bt-border);
  border-radius: var(--bt-radius);
  font-size: var(--bt-fb);
  font-family: var(--bt-font);
  color: var(--bt-text);
  background: var(--bt-bg);
  outline: none;
  transition: border-color .15s;
}
.bt-search-input:focus { border-color: var(--bt-gold); }
.bt-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bt-filter-select {
  padding: 7px 28px 7px 10px;
  border: 0.5px solid var(--bt-border);
  border-radius: var(--bt-radius);
  font-size: var(--bt-fm);
  font-family: var(--bt-font);
  color: var(--bt-text2);
  background: var(--bt-bg);
  cursor: pointer;
  outline: none;
  min-width: 140px;
  max-width: 200px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
}
.bt-filter-select:focus { border-color: var(--bt-gold); }
.bt-view-toggle { display: flex; border: 0.5px solid var(--bt-border); border-radius: var(--bt-radius); overflow: hidden; }
.bt-view-btn {
  padding: 7px 10px;
  background: var(--bt-bg);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--bt-text3);
}
.bt-view-btn svg { width: 15px; height: 15px; }
.bt-view-btn.active { background: var(--bt-navy); color: #fff; }
.bt-view-btn.active svg { stroke: #fff; }

/* ── BODY LAYOUT ── */
.bt-body { display: block; }
.bt-body.has-sidebar {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 20px;
  align-items: start;
}

/* ── SIDEBAR ── */
.bt-sidebar { position: sticky; top: 80px; }
.bt-sb-section {
  background: var(--bt-bg);
  border: 0.5px solid var(--bt-border);
  border-radius: var(--bt-radius);
  overflow: hidden;
  margin-bottom: 14px;
}
.bt-sb-head {
  background: var(--bt-navy);
  padding: 10px 14px;
  font-size: var(--bt-fm);
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bt-sb-nav { list-style: none; padding: 0; margin: 0; padding-left: 0; margin-left: 0; }
.bt-sb-nav li { border-bottom: 0.5px solid var(--bt-border); }
.bt-sb-nav li:last-child { border-bottom: none; }
.bt-sb-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: var(--bt-fb);
  color: var(--bt-text2);
  text-decoration: none;
  transition: background .15s;
}
.bt-sb-link svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--bt-gold); }
.bt-sb-link:hover { background: var(--bt-bg2); color: var(--bt-text); }
.bt-sb-link.active {
  background: var(--bt-gold-pale);
  color: var(--bt-gold);
  font-weight: var(--bt-fw);
  border-left: 2.5px solid var(--bt-gold);
  padding-left: 9.5px;
}
.bt-sb-link.active svg { color: var(--bt-gold); }
.bt-sb-count {
  margin-left: auto;
  font-size: 10px;
  padding: 1px 6px;
  background: var(--bt-bg2);
  border-radius: 20px;
  color: var(--bt-text3);
  flex-shrink: 0;
}
.bt-sb-link.active .bt-sb-count {
  background: rgba(184,150,62,0.15);
  color: var(--bt-gold);
}
.bt-sb-services { padding: 0; }
.bt-service-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--bt-navy);
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: var(--bt-fm);
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
  transition: background .15s;
}
.bt-service-link svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--bt-gold); }
.bt-service-link:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* ── RESULTS HEADER ── */
.bt-results-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  min-height: 24px;
}
.bt-results-count { font-size: var(--bt-fm); color: var(--bt-text3); }
.bt-active-cat {
  font-size: var(--bt-fm);
  padding: 2px 10px;
  border-radius: 20px;
  background: var(--bt-gold-pale);
  color: var(--bt-gold);
  font-weight: 500;
  display: none;
}
.bt-active-cat.visible { display: inline-block; }

/* ── LOADING ── */
.bt-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  gap: 12px;
  color: var(--bt-text3);
  font-size: var(--bt-fm);
}
.bt-spinner {
  width: 28px; height: 28px;
  border: 2.5px solid var(--bt-border);
  border-top-color: var(--bt-gold);
  border-radius: 50%;
  animation: bt-spin .8s linear infinite;
}
@keyframes bt-spin { to { transform: rotate(360deg); } }

/* ── VUE GRILLE ── */
.bt-view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}
.bt-card {
  background: var(--bt-bg);
  border: 0.5px solid var(--bt-border);
  border-radius: var(--bt-radius);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
  cursor: pointer;
}
.bt-card:hover {
  border-color: var(--bt-gold);
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
.bt-card-cover {
  width: 100%;
  aspect-ratio: 1/1;
  background: var(--bt-bg2);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bt-card-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bt-card-cover-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
}
.bt-card-cover-placeholder svg { width: 32px; height: 32px; color: var(--bt-text3); }
.bt-type-badge {
  position: absolute;
  top: 7px; left: 7px;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bt-featured-star {
  position: absolute;
  top: 7px; right: 7px;
  font-size: 13px;
}
.bt-card-body { padding: 10px 11px 6px; }
.bt-card-title {
  font-size: var(--bt-ft);
  font-weight: var(--bt-fw);
  color: var(--bt-text);
  line-height: 1.4;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bt-card-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: var(--bt-fm);
  color: var(--bt-text3);
}
.bt-card-meta svg { width: 12px; height: 12px; flex-shrink: 0; }
.bt-card-footer {
  padding: 7px 11px;
  border-top: 0.5px solid var(--bt-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.bt-dl-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--bt-fm);
  font-weight: 500;
  color: var(--bt-gold);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--bt-font);
}
.bt-dl-btn svg { width: 14px; height: 14px; }
.bt-dl-btn:hover { opacity: 0.75; }
.bt-file-info { font-size: 10px; color: var(--bt-text3); }
.bt-dl-count { font-size: 10px; color: var(--bt-text3); }

/* ── VUE LISTE ── */
.bt-view-list { display: flex; flex-direction: column; gap: 8px; }
.bt-list-item {
  background: var(--bt-bg);
  border: 0.5px solid var(--bt-border);
  border-radius: var(--bt-radius);
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  transition: border-color .15s;
}
.bt-list-item:hover { border-color: var(--bt-gold); }
.bt-list-thumb {
  width: 44px; height: 56px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bt-bg2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bt-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bt-list-thumb svg { width: 20px; height: 20px; color: var(--bt-text3); }
.bt-list-info { flex: 1; min-width: 0; }
.bt-list-title {
  font-size: var(--bt-ft);
  font-weight: var(--bt-fw);
  color: var(--bt-text);
  line-height: 1.4;
  margin-bottom: 5px;
}
.bt-list-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--bt-fm);
  color: var(--bt-text3);
}
.bt-list-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bt-icon-btn {
  width: 30px; height: 30px;
  border-radius: 4px;
  border: 0.5px solid var(--bt-border);
  background: var(--bt-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--bt-text2);
}
.bt-icon-btn svg { width: 14px; height: 14px; }
.bt-icon-btn:hover {
  border-color: var(--bt-gold);
  color: var(--bt-gold);
  background: var(--bt-gold-pale);
}

/* ── TYPE BADGES COULEURS ── */
.bt-badge-rapport     { background: #FAC775; color: #633806; }
.bt-badge-bulletin    { background: #B5D4F4; color: #0C447C; }
.bt-badge-decret      { background: #1A1C1E; color: #B8963E; }
.bt-badge-directive   { background: #FAEEDA; color: #854F0B; }
.bt-badge-instruction { background: #FAEEDA; color: #854F0B; }
.bt-badge-code        { background: #EEEDFE; color: #534AB7; }
.bt-badge-strategie   { background: #EAF3DE; color: #3B6D11; }
.bt-badge-loi         { background: #F1EFE8; color: #5F5E5A; }
.bt-badge-autre       { background: #f0f0f0; color: #666; }

/* ── VIDE ── */
.bt-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--bt-text3);
}
.bt-empty svg { width: 40px; height: 40px; margin: 0 auto 12px; display: block; opacity: 0.4; }
.bt-empty p { font-size: var(--bt-fb); }

/* ── PAGINATION ── */
.bt-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.bt-page-btn {
  min-width: 32px; height: 32px;
  padding: 0 8px;
  border-radius: var(--bt-radius);
  border: 0.5px solid var(--bt-border);
  background: var(--bt-bg);
  font-size: var(--bt-fm);
  font-weight: 500;
  color: var(--bt-text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
  font-family: var(--bt-font);
}
.bt-page-btn.active { background: var(--bt-navy); border-color: var(--bt-navy); color: #fff; }
.bt-page-btn:hover:not(.active) { border-color: var(--bt-gold); color: var(--bt-gold); }
.bt-page-btn svg { width: 13px; height: 13px; }

/* ── TOAST ── */
.bt-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--bt-navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--bt-radius);
  font-size: var(--bt-fb);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: bt-slidein .3s ease;
  border-left: 3px solid var(--bt-gold);
}
@keyframes bt-slidein { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .bt-body.has-sidebar { grid-template-columns: 1fr; }
  .bt-sidebar { position: static; }
  .bt-stats-row { grid-template-columns: repeat(2,1fr); }
  .bt-view-grid { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); }
  .bt-topbar { flex-direction: column; align-items: stretch; }
  .bt-toolbar { justify-content: flex-end; }
}
@media (max-width: 480px) {
  .bt-view-grid { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════
   MISES À JOUR v1.1
   ══════════════════════════════════════════════ */

/* ── GRILLE : colonnes dynamiques (backend) ── */
.bt-view-grid {
  grid-template-columns: repeat(var(--bt-grid-cols, 4), 1fr);
}

/* ── BARRE DE RECHERCHE — même hauteur que les selects ── */
.bt-search-input {
  padding-top:    0;
  padding-bottom: 0;
  height:         36px;
  line-height:    36px;
}
.bt-filter-select {
  height:      36px;
  line-height: 36px;
}
.bt-view-btn {
  height: 36px;
}
.bt-search-ico {
  top: 50%;
}

/* ── SIDEBAR — typographie & espacement via CSS vars ── */
.bt-sb-link {
  font-family:     var(--bt-sb-font, inherit);
  font-size:       var(--bt-sb-fsize, 13px);
  font-weight:     var(--bt-sb-fw, 400);
  color:           var(--bt-sb-color, #444);
  padding:         var(--bt-sb-pad-v, 9px) var(--bt-sb-pad-h, 12px);
  line-height:     var(--bt-sb-lh, 1.4);
  letter-spacing:  var(--bt-sb-ls, 0em);
}
.bt-sb-nav li {
  margin-bottom: var(--bt-sb-gap, 0px);
}

/* ── ICÔNE DE CATÉGORIE dans la sidebar ── */
.bt-cat-icon-wrap {
  display:    inline-flex;
  align-items: center;
  width:       16px;
  height:      16px;
  flex-shrink: 0;
  color:       var(--bt-gold);
}
.bt-cat-icon-wrap svg {
  width:  100%;
  height: 100%;
}

/* ── SIDEBAR — look moderne, plus aéré ── */
.bt-sb-section {
  border-radius: 10px;
  border:        1px solid var(--bt-border);
  box-shadow:    0 1px 4px rgba(0,0,0,0.04);
  overflow:      hidden;
}
.bt-sb-head {
  background:     var(--bt-navy);
  padding:        12px 16px 11px;
  font-size:      10px;
  font-weight:    700;
  color:          rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display:        flex;
  align-items:    center;
  gap:            7px;
}
.bt-sb-head::before {
  content:    '';
  display:    inline-block;
  width:      14px;
  height:     2px;
  background: var(--bt-gold);
  border-radius: 2px;
  flex-shrink: 0;
}
.bt-sb-nav li {
  border-bottom: 1px solid var(--bt-border);
}
.bt-sb-nav li:last-child {
  border-bottom: none;
}
.bt-sb-link {
  gap:        10px;
  transition: background .15s, color .15s, padding-left .1s;
}
.bt-sb-link:hover {
  background:  var(--bt-bg2);
  color:       var(--bt-text);
  padding-left: calc(var(--bt-sb-pad-h, 12px) + 4px);
}
.bt-sb-link.active {
  border-left:  3px solid var(--bt-gold);
  padding-left: calc(var(--bt-sb-pad-h, 12px) - 3px);
}
.bt-sb-count {
  border-radius: 20px;
  padding:       2px 7px;
  font-size:     10px;
  font-weight:   500;
}

/* Responsive — réduire les colonnes sur mobile */
@media (max-width: 768px) {
  .bt-view-grid {
    grid-template-columns: repeat(min(var(--bt-grid-cols, 4), 2), 1fr) !important;
  }
}
@media (max-width: 480px) {
  .bt-view-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ══════════════════════════════════════════════
   VISIONNEUSE PDF — MODAL
   ══════════════════════════════════════════════ */
.bt-pdf-modal {
  display:    none;
  position:   fixed;
  inset:      0;
  z-index:    99999;
}
.bt-pdf-modal.bt-modal-open { display: flex; align-items: center; justify-content: center; }

.bt-pdf-modal-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(10,10,20,0.72);
  backdrop-filter: blur(3px);
  cursor:     pointer;
}
.bt-pdf-modal-box {
  position:     relative;
  z-index:      1;
  width:        90vw;
  max-width:    1100px;
  height:       90vh;
  background:   #fff;
  border-radius: 10px;
  box-shadow:   0 24px 80px rgba(0,0,0,0.35);
  display:      flex;
  flex-direction: column;
  overflow:     hidden;
  animation:    bt-modal-in .22s cubic-bezier(.4,0,.2,1);
}
@keyframes bt-modal-in {
  from { opacity:0; transform: scale(.96) translateY(12px); }
  to   { opacity:1; transform: scale(1)   translateY(0); }
}
.bt-pdf-modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         12px 16px;
  background:      #1A1C1E;
  gap:             12px;
  flex-shrink:     0;
}
.bt-pdf-modal-title {
  font-size:   14px;
  font-weight: 600;
  color:       #fff;
  flex:        1;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bt-pdf-modal-actions {
  display:    flex;
  align-items: center;
  gap:        8px;
  flex-shrink: 0;
}
.bt-pdf-dl-link {
  display:    inline-flex;
  align-items: center;
  gap:        5px;
  font-size:  12px !important;
  padding:    5px 12px !important;
  background: #B8963E !important;
  border:     none !important;
  color:      #fff !important;
  border-radius: 5px !important;
  text-decoration: none;
  line-height: 1 !important;
  height:     30px;
}
.bt-pdf-dl-link:hover { opacity: .88; color: #fff !important; }
.bt-pdf-modal-close {
  width:      32px;
  height:     32px;
  border:     none;
  background: rgba(255,255,255,0.12);
  border-radius: 6px;
  cursor:     pointer;
  display:    flex;
  align-items: center;
  justify-content: center;
  color:      #fff;
  flex-shrink: 0;
  transition: background .15s;
}
.bt-pdf-modal-close:hover { background: rgba(255,255,255,0.22); }
.bt-pdf-modal-body {
  flex:     1;
  position: relative;
  min-height: 0;
}
.bt-pdf-iframe {
  width:  100%;
  height: 100%;
  border: none;
  display: block;
}
.bt-pdf-modal-loading {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  background:      #f8f8f8;
  color:           #888;
  font-size:       13px;
  pointer-events:  none;
  transition:      opacity .3s;
}
.bt-pdf-modal-loading.bt-loaded { opacity: 0; }

/* Bouton "Voir" dans les cards */
.bt-view-btn-card {
  display:    inline-flex;
  align-items: center;
  gap:        4px;
  font-size:  var(--bt-fm);
  font-weight: 500;
  color:      var(--bt-text2);
  cursor:     pointer;
  background: none;
  border:     none;
  padding:    0;
  font-family: var(--bt-font);
  transition: color .15s;
}
.bt-view-btn-card svg { width: 13px; height: 13px; }
.bt-view-btn-card:hover { color: var(--bt-gold); }

@media (max-width: 600px) {
  .bt-pdf-modal-box {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    max-width: none;
  }
}

/* Bloquer le scroll quand le modal est ouvert */
body.bt-modal-active { overflow: hidden; }

/* Boutons dans le footer de la card : layout flex */
.bt-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.bt-view-btn-card {
  flex: 0;
}