/* ── Neutralise le flex Webflow autour de .lf-page ── */
.main-wrapper-2,
.main-container,
.main-wrapper-2 > *,
.main-container > * {
  width: 100% !important;
  max-width: 100%;
  min-width: 0 !important;
  flex-shrink: 1 !important;
  box-sizing: border-box !important;
}

:root {
  --lf-mint: #8EB69B;
}

.lf-page {
  padding: 0 20px 100px !important;
  max-width: 1200px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  flex: 1 1 100% !important;
}

@keyframes lf-scale-in {
  from { opacity: 0; transform: scale(.95) translateY(14px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
@keyframes lf-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lf-ripple {
  to { transform: scale(3); opacity: 0; }
}

/* ── HEADER ── */
.lf-header {
  display: flex; align-items: flex-end;
  justify-content: space-between; flex-wrap: wrap;
  gap: 14px; padding: 20px 0 22px;
  animation: lf-fade-up .4s ease both;
}
.lf-header-lbl {
  font-size: 9px; text-transform: uppercase;
  letter-spacing: .18em; color: var(--lf-mint);
  display: block; margin-bottom: 5px; opacity: .85;
}
.lf-header-title {
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 500; color: #e8eaed; margin: 0 0 5px;
}
body.light-mode .lf-header-title { color: #0f2014; }
.lf-header-count { font-size: 12px; color: rgba(232,234,237,.42); }
body.light-mode .lf-header-count { color: rgba(15,32,20,.42); }

.lf-header-actions { display: flex; gap: 8px; }
.lf-action-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px; border-radius: 22px;
  font-size: 12px; font-weight: 500; text-decoration: none;
  color: rgba(232,234,237,.78);
  background: rgba(255,255,255,.09);
  border: 0.5px solid rgba(255,255,255,.14);
  transition: background .14s; cursor: pointer;
}
.lf-action-btn:hover { background: rgba(255,255,255,.16); color: #e8eaed; }
.lf-action-btn--mint {
  background: rgba(142,182,155,.18);
  border-color: rgba(142,182,155,.32);
  color: var(--lf-mint);
}
.lf-action-btn--mint:hover { background: rgba(142,182,155,.28); }
body.light-mode .lf-action-btn { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.14); color: rgba(15,32,20,.75); }
body.light-mode .lf-action-btn--mint { background: rgba(45,102,69,.12); border-color: rgba(45,102,69,.28); color: #2d6645; }

/* ════════════════════════════════════════
   TOGGLE VUE — utilise .pl-view-btn de app.css
════════════════════════════════════════ */
.lf-view-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ════════════════════════════════════════
   GRILLE — vue par défaut : petites cartes
════════════════════════════════════════ */
#lf-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
}
/* Masque grandes cartes par défaut — sans !important pour que le JS inline l'écrase */
#lf-grid .lf-item-large { display: none; }

/* ── Vue grandes cartes ── */
#lf-grid.lf-grid--large {
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}
@media (min-width: 640px)  { #lf-grid.lf-grid--large { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1100px) { #lf-grid.lf-grid--large { grid-template-columns: repeat(3, 1fr) !important; } }

/* ════════════════════════════════════════
   CARTE — modèle bl-card exact
════════════════════════════════════════ */
.lf-card {
  width: 100% !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  position: relative !important;
  display: block;
  text-decoration: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  opacity: 0;
  animation: lf-scale-in .44s cubic-bezier(.22,.68,0,1.15) both;
  animation-delay: calc(var(--delay,0) * 65ms + 55ms);
  transition: transform .22s;
}
.lf-card:hover { transform: translateY(-5px); }

/* ── Image / fond ── */
.lf-img {
  width: 100%;
  height: 380px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.22,.68,0,1.1);
}
.lf-card:hover .lf-img { transform: scale(1.03); }



@media (min-width: 640px) {
  .lf-img { height: 320px !important; }
}

/* Overlay dégradé bas */
.lf-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    transparent 30%,
    rgba(10,24,14,.6) 60%,
    rgba(8,20,12,.92) 100%);
}

.lf-img-ico {
  display: flex; align-items: center; justify-content: center;
  color: rgba(142,182,155,.2);
}

/* Badge type */
.lf-type {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: 9px; text-transform: uppercase; letter-spacing: .1em;
  background: rgba(0,0,0,.3); color: rgba(255,255,255,.85);
  padding: 4px 10px; border-radius: 20px;
}

/* Signet */
.lf-bk {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 32px; height: 32px; border-radius: 10px;
  /* background: rgba(255,255,255,.18); */
  background: rgba(0, 0, 0, .3);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.8);
  border: none; cursor: pointer;
  transition: background .14s, color .14s;
}
.lf-bk:hover,
.lf-bk.active { background: rgba(0, 0, 0, .3); color: var(--lf-mint); }

/* Infos bas de carte */
.lf-info {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 0 18px 20px;
}
.lf-name {
  font-size: 17px; font-weight: 500; color: #fff;
  margin-bottom: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lf-desc {
  font-size: 12px; color: rgba(255,255,255,.6);
  line-height: 1.5; margin-bottom: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lf-foot {
  display: flex; align-items: center; justify-content: space-between;
}
.lf-stats { display: flex; gap: 12px; }
.lf-stat {
  font-size: 11px; color: rgba(255,255,255,.55);
  display: flex; align-items: center; gap: 4px;
}
.lf-stat-n { font-weight: 500; color: rgba(255,255,255,.55); }

.lf-btn {
  padding: 7px 16px; border-radius: 20px;
  background: rgba(255,255,255,.15);
  border: 0.5px solid rgba(255,255,255,.25);
  color: #fff; font-size: 12px; font-weight: 500;
  cursor: pointer; transition: background .14s;
}
.lf-card:hover .lf-btn { background: rgba(255,255,255,.25); }
.lf-btn--mint {
  background: rgba(142,182,155,.2);
  border-color: rgba(142,182,155,.35);
  color: #8EB69B;
}
.lf-card:hover .lf-btn--mint { background: rgba(142,182,155,.32); }

/* Ripple */
.lf-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  width: 60px; height: 60px; z-index: 10;
  background: rgba(255,255,255,.1);
  transform: scale(0);
  animation: lf-ripple .5s ease-out forwards;
}

/* ── EMPTY STATE ── */
.lf-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 64px 24px 40px; text-align: center; gap: 12px;
  animation: lf-fade-in .5s ease both .1s;
}
.lf-empty-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(142,182,155,.1);
  border: 0.5px solid rgba(142,182,155,.22);
  display: flex; align-items: center; justify-content: center;
  color: var(--lf-mint); margin-bottom: 8px;
}
.lf-empty-title { font-size: 16px; font-weight: 500; color: #e8eaed; margin: 0; }
.lf-empty-sub   { font-size: 13px; color: rgba(232,234,237,.42); margin: 0; line-height: 1.7; }
.lf-empty-link  { color: var(--lf-mint); text-decoration: none; border-bottom: 1px solid rgba(142,182,155,.3); }
.lf-empty-link:hover { border-color: var(--lf-mint); }
body.light-mode .lf-empty-title { color: #0f2014; }
body.light-mode .lf-empty-sub   { color: rgba(15,32,20,.45); }

/* ── Barre de navigation PDF / Audio ── */
.lf-type-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 18px;
  justify-content: space-between;;
  overflow-x: auto;
  scrollbar-width: none
}

.lf-type-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none !important;
  border: 1px solid rgba(142,182,155,.14);
  color: rgba(240,237,232,.45);
  background: transparent;
  transition: all .18s;
  cursor: pointer;
  white-space: nowrap;
}
.lf-type-tab svg { opacity: .55; transition: opacity .18s; }

.lf-type-tab:hover {
  background: rgba(142,182,155,.08);
  border-color: rgba(142,182,155,.22);
  color: rgba(240,237,232,.8);
}
.lf-type-tab:hover svg { opacity: .85; }

.lf-type-tab.active {
  background: rgba(142,182,155,.14);
  border-color: rgba(142,182,155,.28);
  color: #ffff;
}
.lf-type-tab.active svg { opacity: 1; color: #8EB69B; }

.lf-type-tab-count {
  background: rgba(142,182,155,.2);
  border: 1px solid rgba(142,182,155,.3);
  color: #ffff;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  line-height: 1.6;
}

/* Light mode */
body.light-mode .lf-type-tab {
  color: rgba(10,28,16,.45);
  border-color: rgba(22,66,40,.12);
}
body.light-mode .lf-type-tab:hover {
  background: rgba(22,66,40,.06);
  color: rgba(10,28,16,.8);
}
body.light-mode .lf-type-tab.active {
  background: rgba(22,66,40,.1);
  border-color: rgba(22,66,40,.22);
  color: #ffff;
}
body.light-mode .lf-type-tab-count {
  background: rgba(22,66,40,.1);
  border-color: rgba(22,66,40,.2);
  color: #164228;
}

.lf-page {
    overflow: visible !important;
}

.lf-header {
    overflow: visible !important;
    position: relative;
    z-index: 200;
}

.lf-header-actions {
    overflow: visible !important;
    position: relative;
    z-index: 200;
}

#lf-dd-wrap {
    position: relative;
    z-index: 200;
}

#lf-dd-menu {
    position: fixed !important;
    z-index: 99999 !important;
    background: var(--nt-g800, #0c2018);
    border: 1px solid rgba(142,182,155,.22);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
    min-width: 180px;
    display: none;
}

#lf-dd-menu.open {
    display: block;
}

/* Titres et choix du menu combiné Classification / Tri. */
#lf-dd-menu {
  min-width: 235px;
  max-width: min(320px, calc(100vw - 24px));
  max-height: min(70vh, 440px);
  padding: 6px 0 8px;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#lf-dd-menu .pl-dd-section-label {
  display: block;
  padding: 12px 18px 7px;
  color: #ffffff !important;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .92;
  cursor: default;
  pointer-events: none;
  user-select: none;
}

#lf-dd-menu [data-filter-section] + .pl-dd-section-label {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
}

#lf-dd-menu .pl-dd-item {
  min-height: 43px;
  padding: 11px 18px;
  color: rgba(255,255,255,.78) !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
}

#lf-dd-menu .pl-dd-item:hover,
#lf-dd-menu .pl-dd-item:focus-visible {
  background: rgba(255,255,255,.07) !important;
  color: #ffffff !important;
}

#lf-dd-menu .pl-dd-item.active {
  background: rgba(142,182,155,.08);
  color: #b9dfc5 !important;
  font-weight: 600;
}

#lf-dd-menu .pl-dd-check {
  color: #b9dfc5 !important;
  font-weight: 700;
}

#lf-dd-menu .pl-dd-item.is-disabled,
#lf-dd-menu .pl-dd-item[aria-disabled="true"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255,255,255,.38) !important;
  opacity: .72;
  filter: blur(.22px);
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
}

#lf-dd-menu .pl-dd-soon {
  margin-left: 18px;
  color: rgba(185,223,197,.62);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}