/* Styles spécifiques à la page Bibliothèque.
   :root vars, *, .hidden, .back-button, .top, .search*, .auth* → common-styles.css */

/* --- Optimisations Mobile --- */

/* Améliorer les interactions tactiles */
@media (hover: none) and (pointer: coarse) and (max-width: 768px) {

  /* Désactiver les effets hover sur mobile uniquement */
  .icon:hover {
    transform: none;
    /*background: transparent;*/
    color: var(--muted);
  }

  .filter-btn:hover {
    transform: none;
    opacity: 1;
  }

  /* Améliorer la taille des zones tactiles — min-width/height seuls : le
     seul élément avec class="icon" pur ici est l'icône du menu du bas
     (bottom nav, common-layout.js), déjà ≥44px sur toutes les tailles
     d'écran. padding:8px la rétrécissait (box-sizing:border-box) sous la
     taille de son image interne (40px) en paysage (icône 46×44px), cassant
     le centrage margin:auto de l'image — décalage visible du logo dans le
     bouton. */
  .icon {
    min-width: 44px;
    min-height: 44px;
  }

  .filter-btn {
    min-height: 44px;
    padding: 12px 16px;
  }

  .arrow {
    min-width: 48px;
    min-height: 48px;
  }

  .book {
    min-width: 120px;
    min-height: 180px;
  }
}

/* Navigation mobile — layout global déplacé dans common-mobile.css */
@media (max-width: 768px) {

  .category-filters {
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .filter-btn {
    text-align: center;
    padding: 6px 12px;
    font-size: 12px;
  }

  .hero-left {
    min-height: auto;
    padding-top: 0;
    flex: 1;
  }

  h1 {
    font-size: 32px;
    text-align: center;
    margin-bottom: 16px;
  }

  p.lead {
    text-align: center;
    font-size: 16px;
    margin-bottom: 24px;
  }

  .btn-primary {
    display: block;
    margin: 0 auto 24px auto;
    width: fit-content;
    padding: 12px 24px;
    font-size: 16px;
  }

  .carousel-wrap {
    margin-top: 20px;
    position: relative;
  }

  .carousel {
    padding-top: 0;
    padding-left: 0;
    gap: 20px;
    padding-bottom: 20px;
  }

  .book {
    width: 120px;
    flex-shrink: 0;
  }

  .book img {
    box-shadow: -8px 8px 15px rgba(0, 0, 0, 0.3);
  }

  .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }

  .arrow.left {
    left: 8px;
  }

  .arrow.right {
    right: 8px;
  }

  .book-detail {
    flex-direction: column;
    text-align: center;
    margin: 16px 0;
    padding: 16px;
  }

  .book-detail img {
    width: 120px;
    margin: 0 auto 16px auto;
  }

  .book-detail .buttons {
    justify-content: center;
    flex-wrap: wrap;
  }

  .book-detail .btn {
    flex: 1;
    min-width: 120px;
    margin: 4px;
  }

}

/* Améliorations pour les très petits écrans mobiles */
@media (max-width: 480px) {
  .wrap {
    margin: 4px;
    padding: 12px;
  }

  h1 {
    font-size: 28px;
  }

  .book {
    width: 100px;
  }

  .filter-btn {
    font-size: 12px;
    padding: 8px 12px;
  }

  .search {
    height: 44px;
  }

  .carousel {
    gap: 16px;
  }
}

/* --- Responsive et résilience au zoom --- */

/* Très petits écrans — garder uniquement les règles page-spécifiques */
@media (max-width: 400px),
(max-height: 400px) {
  /* Layout .wrap/.sidebar/.icon géré par common-mobile.css */

  h1 {
    font-size: 24px;
    line-height: 1.1;
  }

  .book {
    width: 100px;
  }

  .filter-btn {
    padding: 4px 8px;
    font-size: 12px;
  }

  .carousel {
    padding-top: 80px;
    padding-left: 60px;
    gap: 30px;
  }
}

/* Zoom élevé (écran moyen avec zoom) */
@media (max-width: 980px) {
  /* Layout .wrap/.sidebar/.icon géré par common-mobile.css */

  h1 {
    font-size: 36px;
  }

  .book {
    width: 130px;
  }

  .carousel {
    padding-top: 90px;
    padding-left: 70px;
    gap: 40px;
  }
}

/* Zoom très élevé (très petit écran) */
@media (max-width: 520px) {
  h1 {
    font-size: 28px;
  }

  .book {
    width: 120px;
  }

  .filter-btn {
    padding: 5px 10px;
    font-size: 11px;
  }
}

/* Zoom extrême - layout vertical */
@media (max-width: 320px) {
  /* Layout .wrap/.sidebar/.icon géré par common-mobile.css */

  .carousel {
    padding-top: 20px;
    padding-left: 0;
  }

  .book {
    width: 90px;
  }
}

/* Zoom très élevé - ajustements pour les très petits écrans */
@media (max-width: 280px) {
  h1 {
    font-size: 20px;
  }

  .book {
    width: 80px;
  }

  .filter-btn {
    padding: 3px 6px;
    font-size: 10px;
  }
}

/* ======================================
   STYLES POUR LES RÉSUMÉS
   ====================================== */

/* Modal des résumés */
.resumes-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.resumes-modal.active {
  opacity: 1;
}

.resumes-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.resumes-modal-content {
  position: relative;
  background: rgba(245, 242, 235, 0.82);
  backdrop-filter: blur(12px);
  border-radius: var(--card-radius);
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.resumes-modal-header {
  padding: 24px 30px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #F5F2EB 0%, #FAF8F3 100%);
}

.resumes-modal-header h2 {
  margin: 0;
  font-size: 24px;
  color: #2d3748;
  font-family: var(--font-serif);
}

.resumes-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #718096;
  cursor: pointer;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s;
}

.resumes-modal-close:hover {
  background: #f7fafc;
  color: #2d3748;
  transform: rotate(90deg);
}

.resumes-modal-book-info {
  padding: 20px 30px;
  display: flex;
  gap: 15px;
  background: #f8f9fa;
  border-bottom: 1px solid #e2e8f0;
}

.resumes-modal-book-info img {
  width: 60px;
  /* 90px = 60 * 3/2, ratio 2:3 exact — même règle dupliquée dans Accueil-style.css */
  height: 90px;
  object-fit: cover;
  border-radius: var(--cover-radius, 4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.resumes-modal-book-info h3 {
  margin: 0 0 5px 0;
  font-size: 16px;
  color: #2d3748;
}

.resumes-modal-book-info p {
  margin: 0;
  font-size: 14px;
  color: #718096;
}

.resumes-list {
  flex: 1;
  overflow-y: auto;
  padding: 20px 30px;
}

.resume-item {
  display: flex;
  gap: 15px;
  padding: 20px;
  background: var(--panel-light);
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 15px;
  /* "all" animait aussi padding/background/border-radius à la création de
     l'item (liste "reprendre la lecture") — :hover ne change que
     border-color/box-shadow/transform. */
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.resume-item:hover {
  border-color: var(--accent, #3c8c6c);
  box-shadow: 0 4px 12px rgba(60, 140, 108, 0.1);
  transform: translateY(-2px);
}

.resume-number {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--accent, #3c8c6c) 0%, #2d6b52 100%);
  color: white;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.resume-content {
  flex: 1;
}

.resume-content h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: var(--text-primary);
  font-weight: 600;
}

.resume-description {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.resume-date {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.resume-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.resume-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.resume-btn-read {
  background: var(--accent, #3c8c6c);
  color: white;
}

.resume-btn-read:hover {
  background: #2d6b52;
  transform: translateX(-2px);
}

.resume-btn-download {
  background: #4299e1;
  color: white;
}

.resume-btn-download:hover {
  background: #3182ce;
  transform: translateX(-2px);
}

.resumes-modal-footer {
  padding: 20px 30px;
  border-top: 1px solid #e2e8f0;
  text-align: right;
  background: #f8f9fa;
}

.resumes-modal-close-btn {
  padding: 10px 24px;
  background: #e2e8f0;
  color: #2d3748;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.resumes-modal-close-btn:hover {
  background: #cbd5e0;
}

.btn.resume {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn.resume:hover {
  background: linear-gradient(135deg, #5568d3 0%, #64398b 100%);
}

@media (max-width: 768px) {
  .resumes-modal-content {
    width: 95%;
    max-height: 90vh;
  }

  .resumes-modal-header {
    padding: 20px;
  }

  .resumes-modal-book-info {
    padding: 15px 20px;
  }

  .resumes-list {
    padding: 15px 20px;
  }

  .resume-item {
    flex-direction: column;
    gap: 12px;
  }

  .resume-number {
    width: 35px;
    height: 35px;
    font-size: 16px;
  }

  .resume-actions {
    flex-direction: row;
    width: 100%;
    justify-content: flex-start;
  }

  .resume-btn {
    flex: 1;
    justify-content: center;
  }

  .resumes-modal-footer {
    padding: 15px 20px;
  }
}

.resumes-list::-webkit-scrollbar {
  width: 8px;
}

.resumes-list::-webkit-scrollbar-track {
  background: var(--panel);
  border-radius: 4px;
}

.resumes-list::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 4px;
}

.resumes-list::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

/* ============================
   STYLES POUR LA PAGE BIBLIOTHÈQUE
   ============================ */

/* Hero section de la Bibliothèque (style mes-notes) */
.library-hero {
  opacity: 0;
  margin-right: 20px;
}

/* .library-hero h1 — taille et marges communes avec Mes Notes et Auteurs,
   voir .page-title-serif dans public/common-styles.css */

/* .library-tabs / .library-tab — style commun avec le sélecteur de vue
   de Mes Notes et les dispositions d'Auteurs, voir public/toolbar-shared.css */

/* Conteneur de la vue mindmap */
.mindmap-view-container {
  width: 100%;
  height: calc(100vh - 120px);
  height: calc(100dvh - 120px); /* iOS : suit la hauteur réellement visible */
  min-height: 700px;
  position: relative;
  padding-bottom: 0;
  background: var(--panel-light, #FAF9F6);
  border-radius: var(--card-radius, 14px);
}

.mindmap-view-container .xmind-container {
  width: 100%;
  height: 100% !important;
  min-height: 600px;
  position: relative;
  overflow: hidden;
  background: var(--panel-light);
  border-radius: var(--card-radius, 14px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

body.theme-noir .mindmap-view-container .xmind-container {
  background: var(--panel-light, #2a3a3d);
}

/* Contrôles partagés avec mes-notes (search + view-controls) */
.library-controls {
  margin-bottom: 1.5rem;
}

/* Ligne 1 : recherche + (filtres) + onglets + tri + compteur — voir .page-toolbar dans toolbar-shared.css.
   margin-bottom aligné sur .library-controls (Mes Notes) et .authors-toolbar-premium (Auteurs) pour une
   barre d'outils visuellement identique sur les 3 pages. */
.library-row-1 {
  margin-bottom: 1.5rem;
}

/* Ligne 2 : filtres catégories */
.library-row-2 {
  display: flex;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

/* Cacher le tri sur l'onglet carte mentale sans modifier le layout (les onglets gardent leur position) */
.library-hero.is-mindmap .library-sort-controls {
  visibility: hidden;
  pointer-events: none;
}

/* .library-search-box (conteneur, input, focus, icône) — style commun avec
   Mes Notes et Auteurs, voir la définition de base dans public/common-styles.css
   (et .page-toolbar .library-search-box dans public/toolbar-shared.css pour le
   comportement flex dans la barre d'outils) */

/* .library-stats — style commun avec le compteur d'Auteurs et de Mes Notes,
   voir public/toolbar-shared.css */

@media (max-width: 720px) and (pointer: coarse) {
  .library-row-1 {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .library-search-box {
    max-width: 100%;
  }

  .library-sort-controls {
    width: 100%;
  }

  .library-sort-controls select {
    flex: 1;
  }
}

/* Vue grille (par défaut) */
.grid-view-container {
  display: block;
}

/* Animations de transition entre vues */
.view-fade-out {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.view-fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* (ancien .library-title supprimé — style déplacé vers .library-hero h1) */

/* Filtres de catégories */
.category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.filter-btn {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--panel-light, #ffffff);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: var(--card-radius);
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

/* Boutons icône-seule (Tous, Favoris) dans la rangée de catégories */
.filter-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--muted);
}

.filter-btn-icon svg {
  flex-shrink: 0;
}

.filter-btn-icon .bk-filled { display: none; }
.filter-btn-icon.active .bk-outline { display: none; }
.filter-btn-icon.active .bk-filled { display: block; }

.filter-btn.active[data-category="all"] {
  background-color: #2E4A40;
  color: white;
  border-color: #2E4A40;
}

.filter-btn.active[data-category="all"]:hover {
  background-color: #2E4A40;
  color: white;
  border-color: #2E4A40;
}

.filter-btn.active[data-category="favorites"] {
  background-color: #c5983b;
  color: white;
  border-color: #c5983b;
}

.filter-btn.active[data-category="favorites"]:hover {
  background-color: #c5983b;
  color: white;
  border-color: #c5983b;
}

/* Mise en valeur "nouveauté" (livre/élément pas encore visité, cf.
   js/novelty.js) — bordure fixe (toujours visible, jamais rognée par .wrap,
   overflow:hidden sur toutes les pages) + anneau scintillant animé qui se
   détache VERS L'EXTÉRIEUR (outline, pas de la bordure : une bordure qui
   grossit reste confinée à l'intérieur de la boîte avec box-sizing:
   border-box, ce qui donnait une impression d'animation "vers l'intérieur"
   plutôt qu'un scintillement autour de la carte). L'outline ne déborde que
   de 8px maximum : risque de rognage par .wrap négligeable en pratique
   (gouttières de grille 20-24px), contrairement à un halo flou plus large.
   Vert du site (--accent, cf. common-styles.css), donc varie selon le
   thème actif — distinct du vert vif de la sélection des modes de jeu du
   hub quiz — --novelty-color indirection pour ne définir la keyframe qu'une
   fois. */
.book-card.book-card-novelty {
  --novelty-color: var(--accent);
  border: 2px solid var(--novelty-color);
  animation: noveltyPulse 1.4s ease-out infinite;
}
/* .books-grid.books-initialized .book-card { animation: none; } (plus haut)
   a une spécificité supérieure (3 classes) à la règle ci-dessus (2 classes)
   et tue l'animation dès que la grille passe en "initialized" (juste après
   le tout premier rendu) — sélecteur plus spécifique pour regagner la main. */
.books-grid.books-initialized .book-card.book-card-novelty {
  animation: noveltyPulse 1.4s ease-out infinite;
}
/* Livre entièrement nouveau (kind book_added, cf. js/novelty.js) : doré au
   lieu du vert vif, dans tous les thèmes — spécificité (3 classes) l'emporte
   sur .book-card-novelty seule (2 classes). */
.book-card.book-card-novelty.book-card-novelty-gold {
  --novelty-color: var(--accent-gold, #b89e14);
}
@keyframes noveltyPulse {
  0% { outline: 2px solid color-mix(in srgb, var(--novelty-color) 75%, transparent); outline-offset: 0; }
  100% { outline: 2px solid color-mix(in srgb, var(--novelty-color) 0%, transparent); outline-offset: 8px; }
}

/* Badge cœur favori sur la couverture du livre */
.book-card-fav-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  z-index: 5;
  pointer-events: none;
}

/* Badge référence — visible seulement quand le tri par référence est actif
   (cf. createBookCard, Bibliotheque-script.js), coin opposé au badge favori.
   Fond clair (comme le badge favori ♥, toujours visible quelle que soit la
   couverture) mais TEINTÉ de la couleur catégorie (color-mix, ~22% dans du
   blanc) plutôt que blanc pur : les couleurs --cat-* sont sombres (pensées
   pour du texte blanc dessus, cf. .category-badge dans common-styles.css) et
   resteraient illisibles en remplissage plein sur une couverture déjà
   sombre — un fond clair teinté garde la lisibilité tout en montrant
   vraiment la couleur. */
.book-card-ref-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--accent, #1A5238);
  border: 1.5px solid transparent;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  z-index: 5;
  pointer-events: none;
}

.book-card-ref-badge[data-category="Biographies"]   { background: color-mix(in srgb, var(--cat-biographies) 22%, white);   color: var(--cat-biographies);   border-color: color-mix(in srgb, var(--cat-biographies) 50%, transparent); }
.book-card-ref-badge[data-category="Comportement"]  { background: color-mix(in srgb, var(--cat-comportement) 22%, white);  color: var(--cat-comportement);  border-color: color-mix(in srgb, var(--cat-comportement) 50%, transparent); }
.book-card-ref-badge[data-category="Dogme"]         { background: color-mix(in srgb, var(--cat-dogme) 22%, white);        color: var(--cat-dogme);         border-color: color-mix(in srgb, var(--cat-dogme) 50%, transparent); }
.book-card-ref-badge[data-category="Jurisprudence"] { background: color-mix(in srgb, var(--cat-jurisprudence) 22%, white); color: var(--cat-jurisprudence); border-color: color-mix(in srgb, var(--cat-jurisprudence) 50%, transparent); }
.book-card-ref-badge[data-category="Coran"]         { background: color-mix(in srgb, var(--cat-coran) 22%, white);        color: var(--cat-coran);         border-color: color-mix(in srgb, var(--cat-coran) 50%, transparent); }
.book-card-ref-badge[data-category="Hadith"]        { background: color-mix(in srgb, var(--cat-hadith) 22%, white);       color: var(--cat-hadith);        border-color: color-mix(in srgb, var(--cat-hadith) 50%, transparent); }
.book-card-ref-badge[data-category="Autre"]         { background: color-mix(in srgb, var(--cat-autre) 22%, white);       color: var(--cat-autre);         border-color: color-mix(in srgb, var(--cat-autre) 50%, transparent); }

.filter-btn:hover {
  background: var(--hover-bg, #f5f5f5);
  transform: translateY(-1px);
}

/* Couleurs des filtres actifs - Palette harmonisée (variables centralisées) */
.filter-btn.active {
  background-color: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(200, 155, 60, 0.2);
  transform: translateY(-1px);
}

/* Garder la couleur active même au hover */
.filter-btn.active:hover {
  background-color: var(--accent);
  color: white;
  border-color: var(--accent);
}

.filter-btn.active[data-category="Biographies"] {
  background-color: var(--cat-biographies);
  color: #ffffff;
  border-color: var(--cat-biographies);
}

.filter-btn.active[data-category="Biographies"]:hover {
  background-color: var(--cat-biographies);
  color: #ffffff;
  border-color: var(--cat-biographies);
}

.filter-btn.active[data-category="Comportement"] {
  background-color: var(--cat-comportement);
  color: #ffffff;
  border-color: var(--cat-comportement);
}

.filter-btn.active[data-category="Comportement"]:hover {
  background-color: var(--cat-comportement);
  color: #ffffff;
  border-color: var(--cat-comportement);
}

.filter-btn.active[data-category="Dogme"] {
  background-color: var(--cat-dogme);
  color: #ffffff;
  border-color: var(--cat-dogme);
}

.filter-btn.active[data-category="Dogme"]:hover {
  background-color: var(--cat-dogme);
  color: #ffffff;
  border-color: var(--cat-dogme);
}

.filter-btn.active[data-category="Jurisprudence"] {
  background-color: var(--cat-jurisprudence);
  color: #ffffff;
  border-color: var(--cat-jurisprudence);
}

.filter-btn.active[data-category="Jurisprudence"]:hover {
  background-color: var(--cat-jurisprudence);
  color: #ffffff;
  border-color: var(--cat-jurisprudence);
}

.filter-btn.active[data-category="Coran"] {
  background-color: var(--cat-coran);
  color: #ffffff;
  border-color: var(--cat-coran);
}

.filter-btn.active[data-category="Coran"]:hover {
  background-color: var(--cat-coran);
  color: #ffffff;
  border-color: var(--cat-coran);
}

.filter-btn.active[data-category="Hadith"] {
  background-color: var(--cat-hadith);
  color: #ffffff;
  border-color: var(--cat-hadith);
}

.filter-btn.active[data-category="Hadith"]:hover {
  background-color: var(--cat-hadith);
  color: #ffffff;
  border-color: var(--cat-hadith);
}

/* Grille de livres — max 6 par ligne. La formule (100% - 100px)/6 garantit
   exactement 6 colonnes (auto-fill compte sur le minimum, pas le maximum) ;
   max-width plafonne ce que "100%" peut valoir, donc les cartes ne dépassent
   jamais ~200px — le surplus devient une marge centrée. */
.books-grid {
  display: grid;
  padding-top: 0;
  grid-template-columns: repeat(auto-fill, minmax(max(165px, (100% - 100px) / 6), 1fr));
  gap: 24px 20px;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto 60px;
  padding: 0 20px 20px;
  align-items: start;
}

@keyframes bookCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.book-card {
  display: flex;
  flex-direction: column;
  /* Sans ça, un item de grille garde min-width:auto — sa largeur minimale se
     cale alors sur le contenu (titre/auteur le plus large de TOUTE la liste,
     pas juste cette carte), et comme les colonnes 1fr sont calculées une
     seule fois pour toute la grille, une seule carte au contenu large rend
     sa colonne plus large sur TOUTES les lignes → couvertures de hauteurs
     visiblement différentes sur mobile (aspect-ratio suit la largeur). */
  min-width: 0;
  background: rgba(255, 255, 255, 0.92);
  padding: 8px;
  border-radius: var(--card-radius);
  box-shadow: 0 4px 15px rgba(44, 53, 57, 0.05);
  /* "all" animait aussi la toute première application du style (background,
     padding, border-radius) à chaque création de carte — flash "texte brut
     sans conteneur" pendant ~300ms. .book-card:hover ne change que
     transform/box-shadow/border-color : c'est tout ce qui doit s'animer. */
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.03);
  animation: bookCardIn 0.25s ease-out both;
}

.books-grid.books-initialized .book-card {
  animation: none;
}

.book-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(44, 53, 57, 0.1);
  border-color: rgba(200, 155, 60, 0.2);
}

/* Wrapper couverture — l'overlay y est cantonné */
.book-card-cover-wrap {
  position: relative;
  display: block;
  margin-bottom: 12px; /* reprend le margin-bottom de l'ancienne cover */
  border-radius: var(--cover-radius, 4px);
  overflow: hidden; /* clip propre au bord de la couverture */
}

/* Trigger hover overlay — couvre uniquement .book-card-cover-wrap */
.book-card:hover .book-hover-overlay {
  opacity: 1;
}

.book-card-cover {
  width: 100%;
  aspect-ratio: 2/3;
  height: auto;
  object-fit: cover;
  border-radius: var(--cover-radius, 4px);
  display: block;        /* évite l'espace inline sous l'image */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.book-card:hover .book-card-cover {
  transform: scale(1.02);
  will-change: transform;
}

.book-card-cover.loading {
  background: var(--border-color, #eee);
}

.book-card-cover.loaded {
  opacity: 1;
}

.book-card-title {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.4;
  margin-bottom: 4px;
  /* Toujours 2 lignes pile réservées (cartes de même hauteur) : un titre
     d'une seule ligne est donc centré dans cet espace plutôt que plaqué en
     haut ou en bas (signalé : plaqué en bas coupait le lien visuel avec la
     couverture juste au-dessus). */
  height: 2.8em;
  display: flex;
  align-items: center;
}

.book-card-title-text {
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.book-card:hover .book-card-title {
  color: var(--accent);
}

.book-card-author {
  font-family: var(--font-serif);
  font-size: 11px;
  font-style: italic;
  color: var(--text-secondary);
  text-align: center;
  opacity: 0.8;
  /* Toujours 1 ligne (nowrap réserve déjà une hauteur constante à elle
     seule, contrairement au titre qui peut tenir sur 1 ou 2 lignes). */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-card:hover .book-card-author {
  color: var(--accent);
  opacity: 1;
}

/* Pagination — styles de base dans common-styles.css */
.pagination#paginationTop,
.pagination#historyPaginationTop {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

/* Responsive */
@media (max-width: 768px) {
  .library-hero h1 {
    font-size: 1.8rem;
  }

  .library-hero {
    padding: 0 10px;
  }

  .books-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px 15px;
    padding: 0 10px;
  }


}

/* ============================================ */
/* STYLES CARTE MENTALE LIVRES (ex mindmap-livres.css) */
/* ============================================ */

/* Le wrapper doit avoir une taille minimale fixe */
#mindmap-wrapper {
  min-width: 2400px !important;
  min-height: 2400px !important;
  flex: none !important;
}

/* Le contenu a une taille fixe */
#mindmap-content {
  display: block !important;
  align-items: unset !important;
  justify-content: unset !important;
  min-width: 2400px;
  min-height: 2400px;
  position: relative !important;
  padding: 0 !important;
}

/* Éléments positionnés en absolu */
#mindmap-content .category-cluster,
#mindmap-content .node.root-node,
#mindmap-content .node.category-node,
#mindmap-content .node.book-node {
  position: absolute !important;
}

/* Category Cluster */
.category-cluster {
  position: absolute;
  width: 400px;
  height: 400px;
  animation: fadeInCluster 0.6s ease-out forwards;
}

@keyframes fadeInCluster {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Cercle de fond coloré transparent */
.category-background-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  height: 380px;
  border-radius: 50%;
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

/* Category Nodes */
.node.category-node {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 0.95em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border: 3px solid rgba(255, 255, 255, 0.8);
  padding: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  line-height: 1.2;
}

.node.category-node:hover {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  z-index: 15;
}

/* .node-content force color: var(--text-primary) (texte sombre) pour les
   nœuds livre/racine sur fond clair — ça écrase le "color: white" voulu
   ici puisque .node-content est un enfant avec sa propre règle color. */
.node.category-node .node-content {
  color: white;
}

/* Book Nodes */
.node.book-node {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  width: 70px;
  height: auto;
  overflow: visible;
  border-radius: 4px;
}

.node.book-node .node-content {
  padding: 0;
}

.book-cover-img {
  width: 70px;
  height: 105px;
  object-fit: cover;
  border-radius: var(--cover-radius, 4px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.book-cover-img:hover {
  transform: scale(1.2);
  z-index: 25;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* Root Node */
.node.root-node {
  background: linear-gradient(135deg, #1A5238 0%, #2d8a5f 100%);
  color: white;
  font-size: 1.8em;
  padding: 25px 40px;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 8px 24px rgba(26, 82, 56, 0.3);
  border: 4px solid rgba(255, 255, 255, 0.9);
  font-weight: 700;
  z-index: 20;
}

.node.root-node:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

/* SVG Connexions */
#mindmap-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  transition: opacity 0.15s ease;
}

#mindmap-svg.animating {
  opacity: 0;
}

#mindmap-svg line {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

/* Book Detail Panel (modal) */
.book-modal {
  display: none;
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 10000;
  background: var(--panel-light, #fafafa);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  width: 320px;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-color, #e0e0e0);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.book-modal.active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 60;
}

.modal-book-info {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.modal-book-cover {
  width: 60px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--cover-radius, 4px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.modal-book-details {
  flex: 1;
  min-width: 0;
}

.modal-book-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.4rem 0;
  color: var(--text-primary, #333);
  line-height: 1.3;
  padding-right: 40px;
  word-break: break-word;
}

.modal-book-meta {
  font-size: 0.8rem;
  color: var(--text-secondary, #666);
  margin: 0.3rem 0;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.modal-book-category {
  display: inline-block;
  background: var(--hover-bg, #e8e8e8);
  color: var(--text-secondary, #555);
  padding: 0.15rem 0.5rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.7rem;
}

.modal-book-description {
  font-size: 0.8rem;
  color: var(--text-secondary, #555);
  margin: 0.4rem 0 0 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.modal-book-author {
  color: #5a7bbf;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.modal-book-author:hover {
  color: #3d5a8a;
  text-decoration: underline;
}

.book-modal .modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.75rem;
}

/* ── Boutons modaux livre (carte mentale biblio) : icônes uniquement ──
   Pas de --btn-color par défaut ici : chaque bouton porte sa propre classe
   (.mm-btn-read, etc. plus bas) qui le définit. Une valeur ici serait plus
   spécifique que ces classes et écraserait toujours leur couleur. */
.book-modal .modal-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--btn-color) 30%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--btn-color) 14%, transparent);
  color: var(--btn-color);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.book-modal .modal-actions .btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: currentColor;
  stroke: none;
}

.book-modal .modal-actions .btn:hover {
  background: color-mix(in srgb, var(--btn-color) 22%, transparent);
  border-color: color-mix(in srgb, var(--btn-color) 50%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--btn-color) 22%, transparent);
  filter: none;
}

.book-modal .modal-actions .btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--btn-color) 25%, transparent);
}

.book-modal .modal-actions .btn:focus-visible {
  outline: 2px solid var(--btn-color);
  outline-offset: 2px;
}

/* Couleurs des boutons (variable consommée par la règle générique ci-dessus) :
   alignées sur la charte du site (vert --accent, doré --accent-gold en thème noir,
   cf. .icon.active / body.theme-noir .sidebar .icon.active). */
.book-modal .mm-btn-read,
.book-modal .mm-btn-xmind,
.book-modal .btn-view-pdf,
.book-modal .btn-quiz,
.book-modal .btn-download { --btn-color: var(--accent, #1A5238); }

body.theme-noir .book-modal .mm-btn-read,
body.theme-noir .book-modal .mm-btn-xmind,
body.theme-noir .book-modal .btn-view-pdf,
body.theme-noir .book-modal .btn-quiz,
body.theme-noir .book-modal .btn-download { --btn-color: var(--accent-gold, #b89e14); }

/* Focus state */
.book-node.focused {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.3);
  z-index: 1000;
}

/* Boutons de contrôle mindmap — style glass */
.reset-btn {
  padding: 6px 12px;
  background: var(--mm-btn-bg, rgba(0,0,0,0.04));
  color: var(--mm-btn-color, #666);
  border: 1px solid var(--mm-btn-border, rgba(0,0,0,0.10));
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  transition: all 0.2s;
}

.reset-btn:hover {
  background: var(--mm-btn-hover-bg, rgba(0,0,0,0.08));
  color: var(--mm-btn-hover-color, #333);
  border-color: var(--mm-btn-hover-border, rgba(0,0,0,0.18));
}

.control-btn {
  padding: 6px 12px;
  background: var(--mm-btn-bg, rgba(0,0,0,0.04));
  color: var(--mm-btn-color, #666);
  border: 1px solid var(--mm-btn-border, rgba(0,0,0,0.10));
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  transition: all 0.2s;
  margin-left: 4px;
}

.control-btn:hover {
  background: var(--mm-btn-hover-bg, rgba(0,0,0,0.08));
  color: var(--mm-btn-hover-color, #333);
  border-color: var(--mm-btn-hover-border, rgba(0,0,0,0.18));
}

/* Curseur grabbing pendant le drag */
#mindmap-wrapper.grabbing {
  cursor: grabbing !important;
}

#mindmap-wrapper.grabbing * {
  cursor: grabbing !important;
}

/* ====================================== */
/* TOOLTIP SURVOL LIVRE MINDMAP */
/* ====================================== */
.mm-book-tooltip {
  position: absolute;
  z-index: 10001;
  background: var(--panel-light, #fafafa);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  max-width: 260px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  font-family: 'Inter', sans-serif;
  animation: mmTooltipFadeIn 0.15s ease;
}

@keyframes mmTooltipFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.mm-tooltip-header {
  margin-bottom: 0.3rem;
}

.mm-tooltip-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary, #333);
  line-height: 1.3;
  display: block;
}

.mm-tooltip-meta {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.mm-tooltip-category {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 500;
}

/* ====================================== */
/* BOUTON HISTORIQUE (style similaire à Favoris) */
/* ====================================== */
#historyFilter {
  background-color: var(--panel-light);
  color: var(--text-secondary, #666);
  border: 2px solid var(--border-color, #ddd);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--card-radius);
  transition: all 0.3s ease;
}

#historyFilter:hover {
  border-color: var(--muted, #bbb);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#historyFilter.active {
  background-color: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(60, 140, 108, 0.3);
  transform: translateY(-2px) scale(1.05);
}

/* ====================================== */
/* VUE HISTORIQUE DE LECTURE */
/* ====================================== */
.history-view {
  width: 100%;
  padding: 0;
}

/* (Anciens styles .history-view-title, .history-controls, .history-search-box, .history-sort-controls, .history-stats supprimés — contrôles unifiés dans .library-controls) */

.history-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 16px;
}

/* --- Carte historique individuelle --- */
.history-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: rgba(245, 242, 235, 0.95);
  border-radius: var(--card-radius);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.history-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* Couverture du livre — agrandie : la carte occupe désormais plus de
   hauteur et moins de largeur (grille responsive ci-dessus) plutôt qu'une
   ligne pleine largeur, donc plus de place pour une couverture plus grande.
   Ratio 2:3 (130x195) aligné sur COVER_MEDIUM (300x450, imgTransform.js) —
   un ratio de boîte différent du ratio déjà recadré côté serveur (wsrv.nl)
   forçait object-fit:cover à recadrer une SECONDE fois, perdant une partie
   de l'image (le bas, le plus souvent, selon le contenu de la couverture). */
.history-card-cover {
  width: 130px;
  height: 195px;
  object-fit: cover;
  border-radius: var(--cover-radius, 4px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

/* Infos du livre */
.history-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-serif);
}

.history-card-author {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, #555);
}

.history-card-chapter {
  font-size: 13px;
  color: var(--muted, #888);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

/* Barre de progression */
.history-progress-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.history-progress-track {
  flex: 1;
  height: 6px;
  background: #e0ddd7;
  border-radius: 3px;
  overflow: hidden;
  max-width: 180px;
}

.history-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.history-progress-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #555);
  min-width: 35px;
}

/* Actions (Reprendre + "Lu à...") — enfant de .history-card-info (pas de
   .history-card), donc naturellement en dessous de la barre de progression,
   alignées avec le texte plutôt qu'étalées sous toute la carte (couverture
   comprise). */
.history-card-actions {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 12px;
  margin-top: 4px;
}

.history-resume-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--card-radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(60, 140, 108, 0.3);
}

.history-resume-btn:hover {
  background: #2d7055;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(58, 134, 104, 0.4);
}

.history-resume-btn:active {
  transform: translateY(0);
}

.history-time-ago {
  font-size: 12px;
  color: var(--muted, #aaa);
  white-space: nowrap;
}

/* État vide */
.history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--muted, #999);
  text-align: center;
  gap: 12px;
}

.history-empty p {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary, #888);
  margin: 0;
}

.history-empty-sub {
  font-size: 13px !important;
  color: var(--muted, #aaa) !important;
  font-weight: 400 !important;
}

/* --- Responsive historique --- */
@media (max-width: 768px) {
  /* Une seule carte par ligne en dessous de 768px : au-delà, la grille
     auto-fill de .history-cards gère elle-même le nombre de colonnes. */
  .history-cards {
    grid-template-columns: 1fr;
  }

  .history-card {
    padding: 16px;
    gap: 14px;
  }

  .history-card-cover {
    width: 92px;
    height: 138px;
  }

  .history-card-title {
    font-size: 15px;
  }

  .history-card-info {
    flex: 1;
    min-width: 120px;
  }

  .history-progress-track {
    max-width: 120px;
  }

  .history-resume-btn {
    padding: 8px 16px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .history-card {
    padding: 12px;
    gap: 10px;
  }

  .history-card-cover {
    width: 76px;
    height: 114px;
  }

  .history-card-title {
    font-size: 14px;
  }

  .history-card-author {
    font-size: 12px;
  }

  .history-card-chapter {
    font-size: 11px;
  }
}

/* ===== Popup mobile (tri + filtres + compteur) ===== */
/* Base commune des popups de filtres/tri (.filter-modal-overlay/-content/
   -header/-title/-section/-section-title, .popup-stats-section .popup-stats)
   -> voir public/popup-shared.css, chargé sur cette page via cssPaths */

/* Filtres catégories dans la popup : layout flex-wrap */
.popup-category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.btn-secondary {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--panel-light);
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.2s;
}