/* Lora + Amiri — auto-heberges (public/fonts-local.css + public/fonts/*.woff2)
   Remplace les @import Google Fonts : pas de DNS/TLS externe, disponible hors-ligne */
@import url('fonts-local.css');

/* INTER — poids 300 à  600 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
}

/* Playfair Display supprimé — remplacé par Lora dans toute la charte */

/* --- Variables CSS globales --- */
:root {

  /* Backgrounds - Palette "L'Encre et l'écran" */
  --bg: #FBF8F1;
  /* Fond principal (Parchemin) */
  --panel: #F5F2EB;
  /* Fond secondaire (Parchemin Dark) */
  --panel-light: #FAF9F6;
  /* Lighter panel variant */

  /* Accent colors */
  --accent: #1A5238;
  /* Accent Primaire — Vert Reliure / Savoir (unifié) */
  --brand-green: var(--accent);
  /* Alias utilisé par color-modal.js et les popups de notes */
  --hover-bg: var(--panel, #F5F2EB);
  /* Fond hover léger (utilisé dans les suggestions / aperçus) */
  --border-color: var(--border, rgba(0,0,0,0.12));
  /* Alias border pour color-modal.js */
  --accent-dark: #14412b;
  /* Vert plus sombre pour hover boutons primaires */
  --accent-light: #3d614f;
  /* Vert plus clair */
  --accent-gold: #b89e14;
  /* Accent Or / Enluminure — auteurs, hôver, badges */
  /* Or des cartes — hover partagé auteurs + notes */
  --accent-gold-light: #d4af5f;
  /* Or clair */
  --accent-secondary: #C89B3C;
  /* Alias pour passages existants */
  --quiz-mode-highlight: rgb(74, 222, 128);
  /* Vert vif — utilisé uniquement par la sélection des modes de jeu
     (quiz-style.css). La mise en valeur "nouveauté" (Bibliothèque/Accueil/
     book-detail) utilise directement --accent, pas cette variable. */

  /* Category colors */
  --cat-biographies:   #66300F;  /* marron/orange foncé mat */
  --cat-comportement:  #11412B;  /* vert foncé mat          */
  --cat-dogme:         #2C1540;  /* violet foncé mat        */
  --cat-jurisprudence: #403F42;  /* gris foncé mat          */
  --cat-coran:         #163C60;  /* azur foncé mat          */
  --cat-hadith:        #5C4434;  /* marron grisé foncé mat  */
  --cat-autre:         #38332E;  /* brun-charbon            */

  /* Status colors */
  --success-bg: #f0fdf4;
  --success-text: #166534;
  --success-border: #bbf7d0;
  --error-bg: #fef2f2;
  --error-text: #991b1b;
  --error-border: #fecaca;
  --warning-bg: #fffbeb;
  --warning-text: #92400e;
  --warning-border: #fde68a;
  --info-bg: #eff6ff;
  --info-text: #1e40af;
  --info-border: #bfdbfe;
  --danger: #dc3545;
  --danger-hover: #c82333;

  /* Tag colors */
  --tag-bg: #e3f2fd;
  --tag-text: #1976d2;
  --tag-hover: #d0e7fb;
  --tag-create-bg: #fff3e0;
  --tag-create-text: #f57c00;

  /* Text colors */
  --text-primary: #2C3539;
  /* Texte principal — Encre */
  --text-secondary: #4A5568;
  /* Texte secondaire */
  --muted: #9ca3af;
  /* Texte désactivé */

  /* Fonts */
  --font-serif: 'Lora', serif;
  --font-arabic: 'Amiri', serif;
  --font-sans: 'Inter', sans-serif;

  /* UI Elements */
  --card-radius: 8px;
  /* Rayon dédié aux couvertures de livre — distinct de --card-radius (cartes/
     panneaux en général) : jusque-là chaque contexte (carrousel, admin,
     fiche livre, historique...) fixait sa propre valeur en dur (4/5/6/8/10px
     selon l'endroit), sans rapport entre elles. Une seule variable partagée
     garantit que tout point d'affichage d'une couverture reste aligné. */
  --cover-radius: 4px;
  /* Bordure standard de la charte */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(44, 53, 57, 0.05);
  --shadow-hover: 0 10px 25px rgba(44, 53, 57, 0.1);
  --shadow-lg: 0 8px 24px rgba(44, 53, 57, 0.08);

  /* Search bar */
  --search-bg: #E6D7B7;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Les thêmes globaux (blanc / beige / noir) sont dans common-styles-themes.css */

/* ── Badge de tag — définition canonique partagée ── */
.ikt-tag,
.note-tag,
.profil-note-tag {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid;
    background: color-mix(in srgb, var(--accent, #1A5238) 10%, transparent);
    color: var(--accent, #1A5238);
    border-color: color-mix(in srgb, var(--accent, #1A5238) 28%, transparent);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Bouton retour */
.back-button {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10004;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  background: rgba(245, 242, 235, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--card-radius);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 1 !important;
}

.back-button:hover {
  background: var(--panel-light);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  color: var(--accent);
}

/* XMind-style back button (shared) */
/* XMind-style back button — positionnement seulement, visuel via .btn-back-icon */
.back-button-xmind {
  position: fixed;
  top: 20px;
  left: 90px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.back-button-xmind:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#backBtnSlot {
  display: none;
}

/* Back button in .wrap-left column, above the sticky sidebar */
.back-btn-wrap-left {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  background: transparent;
  border: none;
  flex-shrink: 0;
  margin-bottom: 8px;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.back-btn-wrap-left:hover {
  background: var(--panel-light);
  color: var(--accent);
}

.back-btn-wrap-left svg {
  width: 26px;
  height: 26px;
}

/* Back button injected into document.body — fixed to top-left of viewport */
.back-btn-pre-title {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
}

.back-btn-pre-title:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* --- Bouton retour icône partagé — factorisation book-detail + shared-back-button --- */
.btn-back-icon {
  background: var(--panel-light);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--card-radius);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-normal, all 0.3s ease);
  flex-shrink: 0;
}

.btn-back-icon:hover {
  background: var(--panel);
  color: var(--accent);
}

.btn-back-icon:not(.back-button) svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* Taille réduite pour le bouton retour fixed (xmind, lecture, pdf, quiz) */
.btn-back-icon.back-button-xmind {
  width: 44px;
  height: 44px;
  padding: 0;
}
.btn-back-icon.back-button-xmind svg {
  width: 20px;
  height: 20px;
}

/* Box sizing pour tous les éléments */
* {
  box-sizing: border-box
}

.hidden {
  opacity: 0;
}

/* Classe portée directement sur les h1 "nus" (Bibliothêque, Mes Notes, Auteurs)
   pour conserver la typographie quand l'élément est déplacé via JS (mobile-header) */
.page-title-serif {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}

/* Barre dorée sous le titre — présente sur toutes les pages utilisant .page-title-serif */
.page-title-serif::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--accent-gold, #b89e14);
  border-radius: 2px;
  margin-top: 10px;
}

/* Résilience au zoom - améliorations globales */
html {
  /* Empêcher le zoom horizontal sur mobile */
  overflow-x: hidden;
  /* Améliorer le rendu des polices lors du zoom */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* height: 100% retiré — à§a bloquait le scroll body et cachait la marge basse du wrap */
}

/* Améliorer la lisibilité lors du zoom */
html {
  /* Par défaut : visible (pas de scroll container, position:fixed préservé).
     overflow-x:clip est préférable mais n’est supporté qu’à partir de
     Safari 15.4 / iOS 15.4. Sur les versions antérieures, le navigateur
     l’ignorait ou le traitait partiellement comme ‘hidden’, ce qui créait
     un scroll container sur <html> et décalait tous les position:fixed
     (barres mobiles, FAB) vers le milieu de l’écran lors du scroll-up. */
  overflow-x: visible;
}

@supports (overflow: clip) {
  html {
    /* Clip coupe le débordement horizontal SANS créer de scroll container
       → préserve le viewport comme containing block pour position:fixed */
    overflow-x: clip;
  }
}

body {
  /* Améliorer le rendu des polices */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Styles du body --- */
body {
  margin: 0;
  font-family: var(--font-sans);

  /* Couleur de base du parchemin (blanc cassé chaleureux) */
  background-color: #F4F1EA;

  -webkit-font-smoothing: antialiased;
  width: 100%;
  padding: 20px 0; /* Marges haute et basse égales et garanties */
}

/* --- Chrome global masqué en plein écran (Lecture / PDF / Cartes mentales) ---
   body.site-fullscreen est posé par js/lecture-ui.js, pdf-script.js, xmind.js,
   mindmap-core.js et js/mes-notes-mindmap-view.js, aussi bien pour le vrai
   plein écran natif (Fullscreen API) que pour son repli CSS (certains
   navigateurs tablette ne supportent pas ou refusent requestFullscreen()).
   Volontairement SANS media query : contrairement à l'ancienne règle limitée
   au breakpoint "téléphone" (cf. common-mobile.css), celle-ci s'applique à
   toutes les tailles d'écran, y compris les tablettes (500-1024px et plus). */
body.site-fullscreen .sidebar,
body.site-fullscreen .wrap-top-row,
body.site-fullscreen .mobile-header,
body.site-fullscreen #backBtn,
body.site-fullscreen .mentions-legales-sidebar,
body.site-fullscreen .slogan {
  display: none !important;
}

/* --- Fix iOS Safari (tablette incluse) : plein écran natif qui se referme
   tout seul en scrollant, bandeau vide en bas ---
   Même correctif que body.mindmap-fullscreen (common-mobile.css), qui
   n'était appliqué qu'au breakpoint téléphone — WebKit a le même
   comportement sur tablette (iPad), donc sans media query ici aussi.
   Cause : si la page reste "scrollable" en arrière-plan pendant le plein
   écran, un geste de scroll (même un simple rebond en haut de page) peut
   faire sortir Safari du plein écran natif ; et le calque position:fixed
   du conteneur plein écran peut être clippé à la hauteur d'un ancêtre au
   lieu du plein viewport. */
html:has(body.site-fullscreen) {
  min-height: calc(100dvh + 1px) !important;
  /* Équivalent horizontal du +1px vertical ci-dessus : sans lui, le document
     reste exactement aussi large que le viewport (scrollWidth === innerWidth),
     donc "non-scrollable" sur l'axe X aussi — même condition que sur l'axe Y,
     qui déclenche le clippage GPU iOS Safari 18.7+ des position:fixed proches
     du bord droit (rognage carte mentale iPad paysage + bouton de signalement
     bug, tous les deux position:fixed sous <body>, confirmé par les logs
     documentNonScrollableX:true malgré documentNonScrollable:false). */
  min-width: calc(100vw + 1px) !important;
  overscroll-behavior: none;
}
body.site-fullscreen {
  overflow-y: hidden;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
}
/* Correctif iOS Safari 18.7+ (régression connue) : un élément position:fixed
   à l'intérieur d'un ancêtre dont l'overflow calculé n'est pas "visible" sur
   les DEUX axes (auto/hidden sur x OU y — la spec CSS convertit l'autre axe
   en "auto" dès qu'un seul des deux n'est pas "visible", donc impossible
   d'isoler un seul axe) se retrouve rogné/décalé. Plutôt que de se battre
   avec ces règles overflow (source d'un décalage horizontal après zoom lors
   d'une tentative précédente), le PDF et désormais les cartes mentales (cf.
   xmind.js _xmindReparentForFullscreen) sortent complètement de cette chaîne
   d'ancêtres en se réattachant à <body> pendant le plein écran — cette règle
   ne reste qu'un filet de sécurité pour le bref instant avant le reparenting
   (ou si celui-ci échoue).
   body.site-fullscreen (Lecture.html, cf. lecture-ui.js::toggleFullscreen) ne
   fait PAS ce reparenting — sans cette règle, .hero-left/main#app rognaient
   .reader-notes-container.fullscreen à leur propre hauteur visible (repro
   iPad : conteneurs internes correctement dimensionnés/positionnés par le JS,
   mais coupés/masqués en partie par ces ancêtres). */
body.mindmap-fullscreen .hero-left,
body.mindmap-fullscreen main#app,
body.site-fullscreen .hero-left,
body.site-fullscreen main#app {
  overflow: visible !important;
  min-height: 100dvh !important;
}

/* --- Container principal --- */
.wrap {
  width: calc(100% - 40px);
  min-height: calc(100vh - 40px);
  /* iOS Safari : 100vh est calculé sur la hauteur MIN du viewport (barre
     d'adresse visible) ; dvh suit la hauteur réellement visible, qui
     s'agrandit quand la barre se rétracte au scroll. Sans ça, un contenu
     court (ex. sections repliées sur la page Auteurs) laisse apparaître le
     fond de la page (body) sous .wrap une fois la barre rétractée — le fond
     de .wrap ne va plus jusqu'en bas. Les navigateurs sans support dvh
     ignorent cette ligne et gardent 100vh (repli). */
  min-height: calc(100dvh - 40px);
  height: auto;
  margin: 0 auto; /* Marges verticales gérées par le padding du body */
  z-index: 1;

  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: var(--shadow-lg);
  align-items: stretch;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Supprimé le cadre externe pour un look plus clean */
.wrap::after {
  display: none;
}

/* Ligne de séparation supprimée pour avoir une couleur unie */
.wrap::before {
  display: none;
}

main {
  padding: 0 10px 60px;
  overflow-y: auto;
  overflow-x: clip; /* clip évite le BFC de hidden qui coupe box-shadow/transform des cartes */

  box-sizing: border-box;
  width: 100%;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;

  /* Scrollbar Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;

  z-index: 1;
}

/* Chrome / Edge / Safari */
main::-webkit-scrollbar {
  width: 5px; /* légèrement plus visible mais toujours fin */
}

main::-webkit-scrollbar-track {
  background: transparent;
}

main::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  border-radius: 999px;

  /* effet moderne "inset" léger */
  border: 1.5px solid transparent;
  background-clip: content-box;

  transition: background-color 0.2s ease;
}

main::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--accent), black 20%);
}

/* Scrollbar fine — verte par défaut (thèmes blanc et beige), dorée en thème sombre */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  border-radius: 999px;
  border: 1.5px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s ease;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--accent), black 20%);
}

*::-webkit-scrollbar-button {
  display: none;
}

/* Thème sombre : scrollbar dorée */
body.theme-noir * {
  scrollbar-color: var(--accent-gold) transparent;
}

body.theme-noir *::-webkit-scrollbar-thumb {
  background-color: var(--accent-gold);
}

body.theme-noir *::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--accent-gold), black 25%);
}

/* hero-left masqué jusqu'à  l'injection du layout (révélé dans initCommonLayout) */
.hero-left {
  opacity: 0;
  z-index: 1;
  align-self: flex-start;
  /* Aligné en haut au lieu de s'étirer */
  width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;
  background: transparent;
  /* Démarrer sans background */
  transition: background 0.8s ease;
  /* Transition progressive du background */
}

/* Masquer scrollbar pour Chrome/Safari */
.hero-left::-webkit-scrollbar {
  display: none;
}

/* Gradients for each category - désactivés */

/* --- Slogan en bas à  gauche --- */
.slogan {
  position: absolute;
  bottom: 16px;
  left: 16px;

  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.5px;

  display: inline-flex;
  align-items: center;

  width: max-content;
  max-width: 100%;

  background: rgba(245, 242, 235, 0.95);
  padding: 8px 18px;
  height: 44px;

  /*overflow: visible;*/
  border-radius: var(--card-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  white-space: nowrap;

  z-index: 10050;
  pointer-events: auto;
}

.slogan-text {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.5px;
  display: inline-block;
  white-space: nowrap;
  width: auto;
  flex: 0 0 auto;
  /* Empêcher le retour à  la ligne du texte */
}

/* Wrapper du logo du slogan */
.slogan .slogan-logo-wrap {
  display: inline-flex;
  align-items: center;
  flex: none;
  cursor: pointer;
  margin-right: 12px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.slogan .slogan-logo-wrap:hover {
  opacity: 0.85;
}

/* ── Paillettes du logo slogan ── */
.slogan-sparkle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  animation: slogan-sparkle-anim var(--dur, 0.9s) ease-out forwards;
  z-index: 10;
}

.slogan-sparkle.star {
  border-radius: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

@keyframes slogan-sparkle-anim {
  0%   { opacity: 1;  transform: translate(-50%, -50%) scale(1) rotate(0deg);    }
  60%  { opacity: 0.8; }
  100% { opacity: 0;  transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0) rotate(var(--rot, 180deg)); }
}

/* Logo dans le slogan */
.slogan .slogan-logo {
  width: 33px;
  height: 33px;
  object-fit: contain;
  display: block;
  flex: none;
}

/* Logo placé dans le wrap, en haut (à  l'intérieur de wrap-top-row) */
.wrap-top-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 22px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  padding-left: 25px;
}

.wrap-top-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  overflow-x: visible;
  align-self: flex-start; /* reste en haut quand les chips agrandissent la barre */
}

.wrap-top-logo img {
  width: 140px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Conteneur horizontal sidebar + main */
.wrap-body {
  display: flex;
  flex-direction: row;
  gap: 20px;
  flex: 1;
  align-items: stretch;
  min-height: 0;
}

/* Groupe sidebar + bouton install — reste solidaire quel que soit la hauteur de page */
.sidebar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Colonne gauche : sidebar + mentions légales */
.wrap-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 64px;
  margin-bottom: 60px;
}

/* Ne plus forcer overflow-x visible sur .wrap pour la performance */

/* (main-left-logo removed — logo placé uniquement au-dessus de la sidebar) */

/* --- Sidebar vertical --- */
.sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 0;
  left: 0;
  width: 64px;
  height: auto;
  padding: 24px 0;
  z-index: 10003;

  /* Container glassmorphism allégé pour la performance */
  background: rgba(245, 242, 235, 0.85);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 10px 15px -3px rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3);

  /* Transition limitée pour éviter les sauts visuels au chargement */
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  align-items: center;
}

/* Mini sidebar mentions légales — dans .wrap-left, en bas de colonne */
.mentions-legales-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
  padding: 8px 0;
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
  transition: all 0.3s ease;
  position: relative;
  z-index: 10003;
}

/* Style discret pour l'icône mentions légales — plus petit que les icônes nav */
.mentions-legales-sidebar .nav-item-wrap {
  width: 28px;
  height: 28px;
}

/* === Sidebar → barre de navigation basse (desktop réduit, souris) ===
   Même principe que la bottom-nav mobile (.sidebar en pilule flottante, voir
   public/common-mobile.css) mais avec les tailles d'icônes desktop (42px, pas
   60px tactile). Gated pointer:fine pour ne jamais empiéter sur le
   pointer:coarse du mobile tactile — les deux règles sont mutuellement
   exclusives, pas de conflit de cascade possible. Seuil 768px aligné sur
   celui de la page Lecture (colonne notes → empilée sous le texte). */
@media (max-width: 768px) and (pointer: fine) {
  .wrap-body {
    gap: 0;
  }

  .wrap-left {
    width: 0;
    min-width: 0;
    margin-bottom: 0;
  }

  .sidebar {
    position: fixed;
    top: auto;
    left: 50%;
    bottom: 12px;
    width: auto;
    max-width: calc(100vw - 24px);
    height: auto;
    flex-direction: row;
    padding: 6px 10px;
    transform: translateX(-50%);
    z-index: 10060; /* au-dessus du .slogan (z-index:10050) : passe au premier plan */
    border-radius: 14px;
    background: rgba(250, 248, 243, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .sidebar-inner {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    width: auto;
  }

  .nav-item-wrap {
    width: 42px;
    height: 42px;
  }

  .sidebar-inner .label {
    display: none;
  }

  /* .wrap-left (qui la contient normalement) est réduit à width:0 ci-dessus :
     la faire sortir en position:absolute (même bloc conteneur que .slogan :
     .wrap, plus haut, est le premier ancêtre position:relative) pour qu'elle
     reste visible, au-dessus du slogan plutôt que masquée. */
  .mentions-legales-sidebar {
    position: absolute;
    bottom: 68px;
    left: 16px;
    z-index: 10050;
  }

  /* La sidebar passe en position:fixed : la masquer pendant le plein écran
     mindmap pour ne pas flotter par-dessus le canvas (même raison que sur
     mobile, voir public/common-mobile.css). */
  body.mindmap-fullscreen .sidebar,
  body.mindmap-fullscreen .mentions-legales-sidebar {
    display: none !important;
  }

  /* Réserver l'espace de la pilule flottante en bas (superposée devant le
     slogan) pour ne pas masquer la fin du contenu scrollable. */
  main {
    padding-bottom: 90px;
  }
}

.mentions-legales-sidebar .icon {
  opacity: 0.5;
  transform: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 50%;
  overflow: hidden;
}

.mentions-legales-sidebar .icon:focus,
.mentions-legales-sidebar .icon:focus-visible {
  outline: none;
  box-shadow: none;
}

.mentions-legales-sidebar .icon:hover {
  opacity: 0.85;
  background: transparent;
  box-shadow: none;
  transform: none;
}

/* App Logo in Sidebar (optional if moved inside) */
/* .sidebar-logo { ... } */

/* Icônes de la sidebar */
.nav-item-wrap {
  position: relative;
  width: 42px;
  height: 42px;
}

.icon {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  background: transparent;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
}

.icon svg, .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  fill: currentColor;
  stroke: none;
  transition: transform 0.2s ease;
}

/* Images dans la sidebar (jpeg/png/svg loaded via <img>) */
.sidebar .icon img {
  display: block;
  margin: 0 auto;
  /* Simule la transparence pour les JPEG sur fond clair */
  mix-blend-mode: multiply;
}

/* Nouvelles icônes personnalisées — couleurs naturelles préservées (multi-couches) */
.sidebar .icon img.ikt-nav-icon {
  mix-blend-mode: normal;
  width: 30px;
  height: 30px;
  transition: opacity 0.25s ease, filter 0.25s ease;
  /* Inactif : opacité réduite, couleurs naturelles visibles */
  opacity: 0.5;
}
.sidebar .icon:not(.active):hover img.ikt-nav-icon {
  opacity: 1;
}
.sidebar .icon.active img.ikt-nav-icon {
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* Bibliothèque : légèrement plus grande pour s'aligner avec l'icône Accueil */
.sidebar .icon img.ikt-nav-icon[src*="libraryclique.svg"] {
  transform: scale(1.15);
}

/* Accueil : zoomer l'icône qui a une grande viewBox */
.sidebar .icon img.ikt-nav-icon[src*="accueil.svg"] {
  transform: scale(1.7);
}

/* --- Mode Popup (Glossaire en iframe) --- */
/* Masquer la chrome de la page : sidebar, top bar, slogan, bouton tutoriel */
.is-popup .sidebar,
.is-popup .wrap-top-row,
.is-popup .mentions-legales-sidebar,
.is-popup .slogan,
.is-popup .btn-tutorial-trigger {
  display: none !important;
}

.is-popup body {
  background: var(--panel-light) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.is-popup .wrap-body {
  margin-left: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

.is-popup .wrap-left {
  display: none !important;
}

/* La page ne doit plus ressembler à une carte : pas de fond, pas de bordure, pas d'ombre */
.is-popup .container,
.is-popup .wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important; /* iOS : suit la hauteur réellement visible */
  margin: 0 !important;
  padding: 20px 28px !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  background-color: transparent !important;
}

.is-popup main {
  padding: 0 !important;
}

/* --- Glossaire Modal + Références Modal (même structure, même chrome) --- */
/* Reset des styles navigateur pour l'élément <dialog> */
dialog.glossaire-modal-overlay,
dialog.refs-modal-overlay {
  padding: 0;
  margin: 0;
  border: none;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  color: inherit;
  outline: none;
  overflow: visible;
}
/* Le ::backdrop natif du <dialog> est désactivé : on utilise notre propre fond */
dialog.glossaire-modal-overlay::backdrop,
dialog.refs-modal-overlay::backdrop {
  display: none;
}

.glossaire-modal-overlay,
.refs-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  z-index: 400000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.glossaire-modal-overlay.visible,
.refs-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.glossaire-modal {
  width: 90%;
  max-width: 1000px;
  height: 85vh;
  background: var(--panel-light);
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.glossaire-modal-overlay.visible .glossaire-modal,
.refs-modal-overlay.visible .glossaire-modal {
  transform: scale(1);
}

.glossaire-modal-header {
  padding: 20px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  background: var(--panel-light);
}

.glossaire-modal-title {
  display: flex;
  align-items: center;
  gap: 15px;
}

.glossaire-modal-title svg {
  color: var(--accent);
  flex-shrink: 0;
}

.glossaire-modal-title h2 {
  margin: 0;
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  .glossaire-modal-header {
    padding: 12px 16px;
  }
  .glossaire-modal-title {
    gap: 8px;
  }
  .glossaire-modal-title svg {
    width: 20px;
    height: 20px;
  }
  .glossaire-modal-title h2,
  .glossaire-modal-title .page-title-serif {
    font-size: 1rem;
    max-width: none;
  }
  .glossaire-modal-kbd {
    display: none; /* cache le badge Ctrl+G/R sur mobile, trop peu de place */
  }
}

.glossaire-modal-close {
  background: var(--hover-bg);
  border: 1px solid var(--border-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.glossaire-modal-close:hover {
  background: var(--danger);
  color: white;
}

.glossaire-modal-body {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.glossaire-iframe {
  width: 100%;
  height: 100%;
  border: none;
  transition: opacity 0.2s ease;
}

.auteur-modal-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-height: unset;
  background: var(--panel-light, #f8f6f1);
}

.auteur-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auteur-modal-openpage-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--hover-bg, rgba(0, 0, 0, 0.06));
  border-radius: 50%;
  color: var(--text-secondary, #555);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auteur-modal-openpage-btn:hover {
  background: var(--border-color, #e0e0e0);
  color: var(--text-primary, #333);
}

/* Active State - Modern Pill */
.icon.active {
  background: var(--accent);
  /* Solid accent color */
  color: #F3E5CA;
  box-shadow:
    0 4px 12px rgba(26, 82, 56, 0.4),
    /* Match accent color shadow */
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.icon.active svg {
  color: #F3E5CA;
}

/* Hover State */
.icon:not(.active):hover {
  background: rgba(245, 242, 235, 0.9);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Icônes désactivées */
.icon[data-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.icon[data-disabled="true"]:hover {
  background: transparent;
  color: var(--muted);
  transform: scale(1);
  box-shadow: none;
  border-left: none;
}

.icon[data-disabled="true"] .label::after {
  content: " 🔒";
}

.label {
  position: absolute;
  left: 100%;
  /* Positionne juste à  droite du container */
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--text-primary);
  color: var(--panel-light);
  padding: 6px 10px;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease 0.1s, visibility 0s linear 0.3s, transform 0.2s ease 0.1s;
  margin-left: 8px;
  z-index: 10002;
  /* Au-dessus des boutons de la carte mentale et des résultats de recherche */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Afficher uniquement le label de l'icône survolée */
.icon:hover .label {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transform: translateY(-50%) translateX(0);
  transition: opacity 0.2s ease 0.1s, visibility 0s linear 0s, transform 0.2s ease 0.1s;
}

/* --- Barre de recherche --- */
.top {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  box-sizing: border-box;
  position: relative;
  z-index: 100;
}

.search-filters {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative; /* Nécessaire pour positionner le filter-drawer en absolu */
}

.search {
  width: 100%;
  max-width: 480px; /* limité ici pour que les chips s'étendent au-delà */
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--search-bg);
  padding: 4px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  position: relative; /* Pour que les résultats se positionnent par rapport à  la barre */
}

.search input {
  border: 0;
  outline: 0;
  font-size: 14px;
  font-family: Inter, sans-serif;
  width: 100%;
  background: transparent;
  color: var(--text-primary);
}

.search input::placeholder {
  color: var(--muted);
}

/* Icône loupe — couleur adaptée au thême */
.search-icon path {
  fill: var(--muted);
}

/* Neutralise le fond bleu/blanc de l'autocompletion navigateur */
.search input:-webkit-autofill,
.search input:-webkit-autofill:hover,
.search input:-webkit-autofill:focus,
.search input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--search-bg) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
  transition: background-color 600000s linear;
}

/* Conteneur des résultats de recherche - aligné avec la barre de recherche */
.search-results-container {
  position: absolute;
  top: calc(100% + 8px);
  left: 10px; /* aligne avec .search qui a margin-left: 10px */
  right: 0;
  min-width: 300px; /* ne suit pas le rétrécissement de la barre de recherche */
  z-index: 10000;
  /* Três haut pour être au-dessus de tout (cartes mentales, boutons, etc.) */
  background: var(--panel-light);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-height: calc(100vh - 220px);
  max-height: calc(100dvh - 220px); /* iOS : suit la hauteur réellement visible */
  height: auto;
  overflow-y: auto;
  display: none;
  /* Caché par défaut */
}

.search-results-container.visible {
  display: block;
  /* Visible quand la classe est ajoutée */
}

.search-results-container:empty {
  display: none;
}

/* Barre de recherche locale partagée (Bibliothêque, Mes Notes, Liste-auteurs) */
.library-search-box {
  position: relative;
  flex: 1;
  max-width: 340px;
}

.library-search-box input {
  width: 100%;
  padding: 0.8rem 1rem 0.8rem 2.5rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--panel-light);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.library-search-box input:focus {
  outline: none;
  border-color: var(--accent, #3c8c6c);
  box-shadow: 0 2px 8px rgba(60, 140, 108, 0.18);
}

.library-search-box > svg,
.library-search-box input ~ svg {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted, #888);
  pointer-events: none;
}

/* Bouton d'ordre de tri (partagé : Bibliothêque, Mes Notes, Liste-auteurs) */
.sort-order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--panel-light);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary, #666);
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.sort-order-btn:hover {
  border-color: var(--accent, #3c8c6c);
  color: var(--accent, #3c8c6c);
}

.sort-order-btn svg {
  transition: transform 0.3s ease;
}

.sort-order-btn.desc svg {
  transform: rotate(180deg);
}

/* ===== Pagination partagée (bibliothèque, mes-notes, auteurs) ===== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.page-btn,
.page-number {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.page-btn:hover:not(:disabled),
.page-number:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.page-btn.active,
.page-number.active {
  background: var(--accent-gold);
  color: #111;
  border-color: var(--accent-gold);
  font-weight: 600;
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  gap: 8px;
}

@media (max-width: 768px) {
  .pagination { flex-wrap: wrap; gap: 6px; }
  .page-btn,
  .page-number { min-width: 32px; height: 32px; font-size: 0.85rem; }
  .page-numbers { gap: 4px; }
}

/* Séparateur ellipsis dans la pagination (partagé avec js/shared-pagination.js) */
.page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 36px;
  color: var(--text-secondary, #888);
  font-size: 1rem;
  user-select: none;
  pointer-events: none;
}

.results-section {
  background: var(--panel-light);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 5px;
}

.results-section:first-child {
  border-radius: 12px 12px 0 0;
}

.results-section:last-child {
  border-radius: 0 0 12px 12px;
  margin-bottom: 0;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--panel);
}

.section-icon {
  width: 18px;
  height: 18px;
  color: #667eea;
  flex-shrink: 0;
  margin-right: 6px;
}

.section-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.results-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.result-item {
  display: flex;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  background: var(--hover-bg);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 6px;
  /* stretch (pas flex-start) : la couverture occupe toute la hauteur de la
     ligne, quelle que soit sa hauteur réelle (titre seul vs titre+auteur+
     badges+extrait) — voir .result-cover ci-dessous. */
  align-items: stretch;
}

.result-item:hover {
  background: #e9ecef;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.result-cover {
  width: 44px;
  min-height: 56px;
  align-self: stretch;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.result-icon-placeholder {
  width: 44px;
  min-height: 56px;
  align-self: stretch;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.result-icon-placeholder svg {
  width: 24px;
  height: 24px;
}

.result-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.result-top-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.result-text-group {
  flex: 1;
  min-width: 0;
}

/* ── Toast notifications ── */
#ikt-toast-container {
  position: fixed;
  bottom: 60px;
  /* Centré sur la zone de contenu (viewport - sidebar) */
  left: 50%; /* affiné dynamiquement par _getToastContainer() via main.getBoundingClientRect() */
  transform: translateX(-50%);
  z-index: 1000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: max-content;
  max-width: min(400px, calc(100vw - 32px));
}
.ikt-toast {
  --toast-accent: #718096;
  --toast-icon-bg: rgba(113, 128, 150, 0.10);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px 11px 10px;
  border-radius: 12px;
  background: var(--panel-light, #fff);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-left: 3px solid var(--toast-accent);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.05);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary, #333);
  pointer-events: auto;
  cursor: pointer;
  width: fit-content;
  max-width: 100%;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.ikt-toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.ikt-toast-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--toast-icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--toast-accent);
}
.ikt-toast-icon svg { width: 14px; height: 14px; display: block; }
.ikt-toast-text { line-height: 1.35; }
.ikt-toast--success { --toast-accent: #1A5238; --toast-icon-bg: rgba(26, 82, 56, 0.10); }
.ikt-toast--error   { --toast-accent: #D94F4F; --toast-icon-bg: rgba(217, 79, 79, 0.10); }
.ikt-toast--warning { --toast-accent: #E8973C; --toast-icon-bg: rgba(232, 151, 60, 0.10); }
.ikt-toast--info    { --toast-accent: #718096; --toast-icon-bg: rgba(113, 128, 150, 0.10); }

/* ── Base commune des popups (chargée globalement pour note-edit-modal + filtres) ── */
.popup-content {
  background: var(--panel-light);
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}
.popup-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
}

/* ── Confirmation dialog (note auto-save) ── */
dialog.nem-confirm-dialog {
  padding: 0; border: none; border-radius: 14px; outline: none;
  max-width: min(420px, calc(100vw - 32px));
  background: var(--card-bg, var(--bg, #fff));
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  color: inherit;
}
dialog.nem-confirm-dialog::backdrop {
  background: rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
dialog.nem-confirm-dialog .popup-content {
  padding: 20px; display: flex; flex-direction: column; gap: 16px; width: 100%;
}
dialog.nem-confirm-dialog .nem-confirm-text {
  font-size: 14px; line-height: 1.55; color: var(--text-primary); margin: 0;
}
dialog.nem-confirm-dialog .nem-confirm-actions {
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}

/* ── Note Edit Modal (dialog) ── */
dialog.nem-dialog {
  padding: 0; margin: 0; border: none;
  max-width: none; max-height: none;
  width: 100%; height: 100%;
  color: inherit; outline: none; overflow: visible;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
dialog.nem-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
dialog.nem-dialog.nem-dialog--anchored {
  width: auto;
  height: auto;
  max-width: min(340px, calc(100vw - 24px));
  align-items: flex-start;
  justify-content: flex-start;
}
dialog.nem-dialog.nem-dialog--anchored::backdrop {
  display: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}
dialog.nem-dialog.nem-dialog--anchored > .popup-content {
  width: 100%; max-width: 100%;
  max-height: none;
  min-width: 240px; min-height: 180px;
  resize: both; overflow: hidden;
}
dialog.nem-dialog.nem-dialog--anchored .nem-drag-handle {
  cursor: grab;
  user-select: none;
}
dialog.nem-dialog.nem-dialog--anchored .nem-drag-handle:active {
  cursor: grabbing;
}
dialog.color-modal-dialog {
  padding: 0; margin: 0; border: none; outline: none;
  max-width: none; max-height: none;
  width: 100%; height: 100%;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
dialog.color-modal-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* Surcharges pour la note modal (dialog = pas de padding global, layout flex) */
dialog.nem-dialog > .popup-content {
  padding: 0; max-height: 88vh; max-width: 560px;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  display: flex; flex-direction: column; overflow: hidden;
}
dialog.nem-dialog .nem-header {
  padding: 8px 12px; margin-bottom: 0; flex-shrink: 0;
}
dialog.nem-dialog .nem-header .popup-title { font-size: 0.95rem; }
dialog.nem-dialog .nem-header .popup-close-btn {
  width: 26px; height: 26px; flex-shrink: 0;
}
dialog.nem-dialog .nem-header .popup-close-btn svg { width: 12px; height: 12px; }
/* Zone tactile agrandie sur pointeur tactile (26px est bien en dessous des
   44px recommandés — signalement "croix pour fermer la popup d'édition de
   note trop petite" sur iPad). L'icône suit proportionnellement (12px sur un
   bouton de 44px paraissait perdue/trop petite — retour utilisateur). */
@media (pointer: coarse) {
  dialog.nem-dialog .nem-header .popup-close-btn {
    width: 44px; height: 44px;
  }
  dialog.nem-dialog .nem-header .popup-close-btn svg {
    width: 18px; height: 18px;
  }
}
.nem-body {
  padding: 12px 16px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.nem-excerpt {
  background: var(--panel, #F5F2EB);
  padding: 6px 10px; border-radius: 8px;
  font-style: italic; color: var(--text-secondary);
  font-size: 12px; line-height: 1.4;
}
.nem-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-secondary); margin-bottom: 4px;
}
.nem-colors-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.nem-color-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.nem-color-btn {
  width: 28px; height: 28px; border-radius: 6px; cursor: pointer; flex-shrink: 0;
  border: 2px solid var(--border-color, rgba(0,0,0,0.15));
  transition: transform 0.15s;
}
.nem-color-del-btn {
  position: absolute; top: -5px; right: -5px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #555; color: #fff; border: none; cursor: pointer;
  font-size: 10px; line-height: 14px; text-align: center; padding: 0;
  opacity: 0; transition: opacity 0.15s; z-index: 1;
}
.nem-color-wrap:hover .nem-color-del-btn { opacity: 1; }
/* Sur pointeur tactile, :hover ne se déclenche pas de façon fiable — ce
   bouton restait donc invisible ET minuscule (14px) en plus d'être
   inatteignable. Toujours visible + agrandi. Les carrés de couleur eux-mêmes
   grandissent aussi (28px -> 38px, retour utilisateur) — gap de la ligne
   élargi en conséquence pour garder de la place à la croix agrandie. */
@media (pointer: coarse) {
  .nem-colors-row { gap: 12px; }
  .nem-color-btn {
    width: 38px; height: 38px;
  }
  .nem-color-del-btn {
    opacity: 1;
    width: 20px; height: 20px;
    font-size: 12px; line-height: 20px;
    top: -7px; right: -7px;
  }
}
.nem-color-btn.selected {
  border-color: var(--text-primary, #333) !important;
  box-shadow: 0 0 0 1px var(--text-primary, #333);
  transform: scale(1.1);
}
.nem-add-color-btn {
  position: relative; overflow: hidden;
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; padding: 0;
  border: 2px dashed var(--border-color, rgba(0,0,0,0.2));
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); transition: all 0.2s;
}
@media (pointer: coarse) {
  .nem-add-color-btn { width: 38px; height: 38px; }
}
/* Un <input type="color"> réel superposé (transparent) sur les boutons
   déclencheurs : cliqué directement (pas via .click() synthétique sur un
   input caché), le picker natif du navigateur s'ancre correctement sur sa
   position plutôt que de retomber sur un coin par défaut du viewport.
   opacity:0 seul suffit sur desktop mais pas sur certains Chromium Android
   (le swatch natif reste visible, "carré coloré" par-dessus l'icône) : on
   neutralise en plus explicitement les pseudo-éléments internes du swatch. */
.nem-color-input-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.nem-color-input-overlay::-webkit-color-swatch-wrapper {
  padding: 0;
}
.nem-color-input-overlay::-webkit-color-swatch {
  border: none;
  background: transparent;
}
.nem-add-color-btn:hover { border-color: var(--accent, #1A5238); color: var(--accent, #1A5238); }
/* Croix "retirer ce tag" (js/note-edit-modal.js, renderTags) — anciennement
   en style inline, extrait ici pour pouvoir l'agrandir sur pointeur tactile. */
/* padding-top (plutôt que padding symétrique) car le glyphe "×" a son encre
   optiquement plus haute que le centre géométrique de sa boîte — un centrage
   flex strictement symétrique le laisse paraître collé en haut (retour
   utilisateur : "centre verticalement"). */
._nemrm {
  background: none; border: none; color: inherit; cursor: pointer;
  font-weight: bold; padding: 1px 0 0; width: 16px; height: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
@media (pointer: coarse) {
  ._nemrm {
    width: 24px; height: 24px;
    font-size: 16px;
    padding-top: 2px;
  }
}
.nem-color-name-row { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.nem-swatch {
  width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.12); transition: background 0.2s;
}
.nem-text-input {
  flex: 1; min-width: 0; padding: 5px 8px;
  border: 1px solid var(--border-color, rgba(0,0,0,0.15)); border-radius: 5px;
  font-family: inherit; font-size: 13px;
  background: var(--panel, #F5F2EB); color: var(--text-primary);
  outline: none; transition: border-color 0.2s;
}
.nem-text-input:focus { border-color: var(--accent, #1A5238); }
.nem-icon-btn {
  position: relative; overflow: hidden;
  width: 26px; height: 26px; flex-shrink: 0; padding: 0; border-radius: 6px;
  border: 1px solid var(--border-color, rgba(0,0,0,0.15));
  background: transparent; color: var(--text-secondary);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.nem-icon-btn:hover { background: var(--hover-bg); color: var(--text-primary); }
.nem-confirm-msg {
  display: none; margin-top: 6px; padding: 4px 8px; border-radius: 4px; font-size: 12px;
  background: rgba(26, 82, 56, 0.08); color: var(--accent, #1A5238);
  border: 1px solid rgba(26, 82, 56, 0.2);
}
.nem-tags-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.nem-tags-header .nem-label { margin-bottom: 0; }
#_nem-tags { display: flex; gap: 6px; flex-wrap: wrap; min-height: 24px; }
.nem-tag-wrap { position: relative; }
.nem-tag-input {
  width: 100%; padding: 8px 12px; box-sizing: border-box;
  border: 1.5px solid var(--border-color, rgba(0,0,0,0.15)); border-radius: 6px;
  font-family: inherit; font-size: 14px;
  background: var(--panel, #F5F2EB); color: var(--text-primary);
  outline: none; transition: border-color 0.2s;
}
.nem-tag-input:focus { border-color: var(--accent, #1A5238); }
.nem-tag-sug {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--panel-light, #fff);
  border: 1px solid var(--border-color, rgba(0,0,0,0.1));
  border-radius: 6px; margin-top: 4px; max-height: 150px; overflow-y: auto;
  display: none; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.nem-sug-item {
  padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--text-primary);
  border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.06));
  transition: background 0.12s;
}
.nem-sug-item:last-child { border-bottom: none; }
.nem-sug-item:hover, .nem-sug-item.highlighted, .nem-sug-item--create { background: var(--panel, #F5F2EB); }
.nem-sug-warn {
  padding: 8px 12px; font-size: 13px;
  color: #f57c00; background: #fff3e0; border-left: 3px solid #f57c00;
}
.nem-textarea {
  width: 100%; min-height: 80px; padding: 8px 10px; box-sizing: border-box; resize: vertical;
  border: 1.5px solid var(--border-color, rgba(0,0,0,0.15)); border-radius: 6px;
  font-family: inherit; font-size: 14px;
  background: var(--panel, #F5F2EB); color: var(--text-primary);
  outline: none; transition: border-color 0.2s;
}
.nem-textarea:focus { border-color: var(--accent, #1A5238); }
.nem-actions { display: flex; justify-content: flex-end; }
.nem-save-btn {
  padding: 9px 24px; border: none; border-radius: 8px;
  background: var(--accent, #1A5238); color: white;
  font-weight: 600; font-family: inherit; font-size: 14px;
  cursor: pointer; transition: all 0.2s;
}
.nem-save-btn:hover:not(:disabled) { background: var(--accent-dark, #14412b); transform: translateY(-1px); }
.nem-save-btn:disabled { opacity: 0.6; cursor: default; transform: none; }

.result-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 2px 0;
  line-height: 1.3;
}

.result-author {
  font-size: 0.75rem;
  font-style: italic;
  color: #718096;
  margin: 2px 0 4px 0;
}

.result-meta {
  font-size: 0.75rem;
  color: #718096;
  margin: 2px 0;
}

.result-excerpt-label {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 3px;
  padding: 1px 5px;
  margin-right: 4px;
  vertical-align: middle;
  white-space: nowrap;
  flex-shrink: 0;
}

.result-excerpt {
  font-size: 0.8rem;
  color: #4a5568;
  line-height: 1.3;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.highlight {
  background-color: #fef08a;
  font-weight: 600;
  border-radius: 2px;
}

.badges-container {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-shrink: 0;
}

.category-badge,
.level-badge {
  padding: 3px 10px;
  border-radius: var(--card-radius);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.category-badge {
  background: #e2e8f0;
  color: #4a5568;
}

.level-badge {
  background: var(--accent-gold, #C89B3C);
  color: #1a1a1a;
}

/* Couleurs par catégorie pour les badges (utilisé par plusieurs pages) */
.category-badge[data-category="Biographies"]   { background-color: var(--cat-biographies);  color: #fff; }
.category-badge[data-category="Comportement"]  { background-color: var(--cat-comportement); color: #fff; }
.category-badge[data-category="Dogme"]         { background-color: var(--cat-dogme);        color: #fff; }
.category-badge[data-category="Jurisprudence"] { background-color: var(--cat-jurisprudence);color: #fff; }
.category-badge[data-category="Coran"]         { background-color: var(--cat-coran);        color: #fff; }
.category-badge[data-category="Hadith"]        { background-color: var(--cat-hadith);       color: #fff; }
.category-badge[data-category="Autre"]         { background-color: var(--cat-autre);        color: #fff; }

.no-results {
  text-align: center;
  padding: 40px 20px;
  color: #718096;
}

.no-results-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  color: #cbd5e0;
}

.no-results-icon svg {
  width: 100%;
  height: 100%;
}

.no-results-text {
  font-size: 1.1rem;
  color: #4a5568;
}

/* Loading state — scop\u00e9 pour les conteneurs div uniquement, pas les images */
div.loading {
  text-align: center;
  padding: 40px 20px;
  color: #667eea;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

div.loading svg {
  width: 48px;
  height: 48px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Boutons de filtre - SUPPRIMéS, mais gardés pour éviter les erreurs */
.category-filters {
  display: none;
}

.filter-btn {
  padding: 6px 14px;
  border: none;
  border-radius: var(--card-radius);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-secondary);
  /* texte noir par défaut */
  background-color: var(--panel-light);
  /* fond beige par défaut */
  border: 1px solid var(--border-color);
  /* bordure subtile */
  opacity: 1;
}

/* Couleurs uniquement quand actifs */
.filter-btn.active[data-category="Biographies"] {
  background-color: #de8431;
  /* RGB(222, 132, 49) */
  color: white;
  border-color: #de8431;
}

.filter-btn.active[data-category="Adab"] {
  background-color: #ba5de5;
  /* RGB(186, 93, 229) */
  color: white;
  border-color: #ba5de5;
}

.filter-btn.active[data-category="Aquida"] {
  background-color: #3cc583;
  /* RGB(60, 197, 131) */
  color: white;
  border-color: #3cc583;
}

.filter-btn.active[data-category="Fiqu"] {
  background-color: #5088e7;
  /* RGB(78, 136, 231) */
  color: white;
  border-color: #5088e7;
}

.filter-btn.active[data-category="Qur'an"] {
  background-color: #e0cb15;
  /* RGB(224, 203, 21) */
  color: white;
  border-color: #e0cb15;
}

.filter-btn.active[data-category="Hadith"] {
  background-color: #2878b3;
  /* déjà  en hexadécimal */
  color: white;
  border-color: #2878b3;
}

.filter-btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.filter-btn.active {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px) scale(1.05);
  outline: none;
}

/* --- Bouton de connexion --- */
.auth {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

/* Avatar utilisateur dans le menu déroulant */
.auth-dropdown-trigger img#userAvatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: contain;
  background: var(--panel, #FDF9F1);
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
  flex-shrink: 0;
}

.auth-dropdown-trigger:hover img#userAvatar {
  border-color: var(--accent, #1A5238);
}

/* Email utilisateur dans le menu déroulant */
.auth-dropdown-trigger span#userEmail {
  font-family: Inter, sans-serif;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Rôle utilisateur dans le menu déroulant */
.auth-dropdown-trigger span#userRole {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
  font-style: italic;
}

/* Bouton de connexion / déconnexion */
.auth button#authBtn {
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--panel-light);
  color: var(--text-primary);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}

.auth button#authBtn:hover {
  background-color: var(--hover-bg);
  border-color: var(--muted);
}

/* Quand utilisateur connecté - masquer le bouton et le menu invité */
.auth.connected button#authBtn {
  display: none;
}

.auth.connected .auth-dropdown-guest {
  display: none;
}

/* ---- Menu déroulant pour utilisateur NON connecté (invité) ---- */
.auth-dropdown-guest {
  position: relative;
}

.auth-dropdown-trigger-guest {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: var(--text-secondary, #555);
}

.auth-dropdown-trigger-guest:hover {
  background-color: var(--hover-bg, rgba(0,0,0,0.05));
}

.auth-dropdown-menu-guest {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--panel-light, #fff);
  border: 1px solid var(--border-color, #ddd);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 10010;
}

.auth-dropdown-guest:hover .auth-dropdown-menu-guest {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.auth-dropdown-menu-guest .auth-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Menu déroulant pour utilisateur connecté */
.auth-dropdown {
  position: relative;
  display: none;
}

.auth.connected .auth-dropdown {
  display: block;
}

.auth-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Conteneur pour email et rôle empilés verticalement */
.auth-user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.auth-dropdown-trigger:hover {
  background-color: var(--panel);
}

.auth-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--panel-light);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 150px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 10010;
}

.auth-dropdown:hover .auth-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.auth-dropdown.dropdown-closed .auth-dropdown-menu,
.auth-dropdown-guest.dropdown-closed .auth-dropdown-menu-guest {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Desktop réduit : masquer le pseudo/rôle, garder l'avatar seul */
@media (max-width: 768px) {
  .wrap-top-row {
    padding-left: 0;
    gap: 0;
  }

  .wrap-top-logo img {
    width: 100px;
  }

  .auth-dropdown-trigger {
    gap: 0;
    padding: 6px;
  }

  .auth-dropdown-trigger .auth-user-info {
    display: none;
  }
}

.auth-dropdown-item {
  display: block;
  padding: 10px 16px;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--panel);
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.auth-dropdown-item svg {
  vertical-align: middle;
  display: inline-block;
}

.auth-dropdown-item:last-child {
  border-bottom: none;
}

.auth-dropdown-item:hover {
  background-color: var(--hover-bg);
}

/* Liens Glossaire / Références : uniquement dans le menu auth mobile
   (.mobile-header-auth n'est injecté par common-layout.js que sur mobile,
   cf. isMobileDevice() — pas de doublon en desktop/tablette).
   Sélecteurs à 3 classes pour battre, quel que soit l'ordre dans la feuille,
   la spécificité de ".auth-dropdown-menu-guest .auth-dropdown-item { display: flex }" ci-dessus. */
.auth-dropdown-menu-guest .auth-dropdown-item.auth-dropdown-item--mobile-only,
.auth-dropdown-menu .auth-dropdown-item.auth-dropdown-item--mobile-only {
  display: none;
}

.mobile-header-auth .auth-dropdown-item.auth-dropdown-item--mobile-only {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Styles du sélecteur de thême, pseudo modal et surcharges thêmes → voir common-styles-themes.css */

/* Bouton clochette séparé */
.auth-bell-btn {
  position: relative;
  padding: 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 8px;
}

.auth-bell-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.auth-bell {
  width: 25px;
  height: 25px;
  transition: stroke 0.2s ease;
}

/* Badge de comptage sur la clochette (même langage visuel que #br-fab-badge
   de bug-reporter.js, pour rester cohérent entre les deux badges visibles) */
.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #e74c3c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  display: none;
  align-items: center;
  justify-content: center;
}

/* Panneau de notifications de la cloche */
.notif-dropdown-panel {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 320px;
  max-width: 380px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--panel-light);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10010;
}

.notif-dropdown-header {
  padding: 10px 16px;
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid var(--panel);
  color: var(--text-primary);
}

.notif-card {
  padding: 10px 16px;
  border-bottom: 1px solid var(--panel);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.notif-card:last-child {
  border-bottom: none;
}

.notif-card:hover {
  background-color: var(--hover-bg);
}

.notif-card-unread {
  border-left: 3px solid var(--brand-green, #1A5238);
}

.notif-card-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}

.notif-card-msg {
  font-size: 13px;
  color: var(--text-primary);
  margin-top: 2px;
}

.notif-card-time {
  font-size: 11px;
  color: var(--muted, #999);
  margin-top: 4px;
}

.notif-card-empty {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--muted, #999);
}

.notif-card-deletable {
  position: relative;
  padding-right: 34px;
}

.notif-card-delete {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted, #999);
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  font-family: inherit;
}

.notif-card-delete:hover {
  color: var(--text-primary);
}

/* Boîte de dialogue de diffusion (js/modules/notify-broadcast.js) */
dialog.nb-dialog {
  border: none;
  border-radius: 14px;
  padding: 0;
  margin: auto;
  max-width: min(480px, calc(100vw - 32px));
  width: 100%;
  background: transparent;
  outline: none;
  color: inherit;
}

dialog.nb-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

dialog.nb-dialog .popup-content {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.nb-body {
  padding-top: 4px;
}

.nb-summary {
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.nb-label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary, var(--muted, #999));
  margin-bottom: 6px;
}

.nb-textarea {
  width: 100%;
  min-height: 90px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  box-sizing: border-box;
}

.nb-target {
  margin-top: 14px;
}

.nb-target-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 8px;
}

.nb-target-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-primary);
  font-weight: normal;
  cursor: pointer;
}

.nb-target-role,
.nb-target-pseudo {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
  background: var(--panel);
  color: var(--text-primary);
}

.nb-target-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nb-target-user .nb-target-pseudo {
  flex: 1;
}

.nb-target-feedback {
  font-size: 13px;
  color: var(--text-secondary, var(--muted, #999));
  white-space: nowrap;
}

.nb-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

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

.nb-btn--send {
  background: var(--brand-green, #1A5238);
  color: #fff;
  border-color: var(--brand-green, #1A5238);
}

.nb-btn--send:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Choix du type de nouveauté à annoncer (admin-script.js, ajout/édition livre) */
.nb-choice-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 6px;
  margin-bottom: 14px;
}

.nb-choice-btn {
  padding: 9px 8px;
  border-radius: 8px;
  border: 1.5px solid var(--brand-green, #1A5238);
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nb-choice-btn:hover {
  background-color: var(--brand-green, #1A5238);
  color: #fff;
}

.nb-choice-btn.active {
  background-color: var(--brand-green, #1A5238);
  color: #fff;
}

/* --- Hero / section principale --- */
.hero {
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: auto;
  padding-right: 0px;
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
}

/* Inline confirmation panel used by color-delete flows */
.inline-confirm {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--muted);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  font-size: 13px;
  width: 100%;
  max-width: 520px;
}

.inline-confirm .confirm-msg {
  white-space: pre-wrap;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.inline-confirm .confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.inline-confirm .btn-cancel {
  padding: 8px 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--panel-light);
  border-radius: 8px;
  cursor: pointer;
}

.inline-confirm .btn-confirm {
  padding: 8px 14px;
  border: none;
  background: var(--accent);
  color: white;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

/* Variante popover (attachée à  un bouton) */
.inline-confirm.popover {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  margin-top: 6px;
  width: 220px;
}

/* ======================================
   SYSTEME DE FILTRES AVANCES
   ====================================== */

/* Bouton icône filtres dans la barre de recherche */
.filter-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: 1px solid var(--border-color, rgba(0,0,0,0.12));
  background: var(--panel-light, #f8f8f8);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--accent);
  margin-left: 4px;
  flex-shrink: 0;
}

.filter-toggle-btn:hover {
  background: var(--panel);
  color: var(--accent);
}

.filter-toggle-btn.active {
  background: var(--accent);
  color: white;
}

.filter-toggle-btn svg {
  width: 16px;
  height: 16px;
}

/* Conteneur des chips de filtres (en dessous de la barre) */
.filter-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 0;
  min-height: 0;
}

.filter-chips-container:empty {
  display: none;
}

.filter-chips-container:not(:empty) {
  margin-top: 6px;
  margin-bottom: 2px;
  margin-left: 10px; /* aligne avec la barre de recherche */
}

/* Chips de filtres individuels */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 12px;
  background: var(--hover-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--text-primary);
  transition: all 0.15s ease;
}

.filter-chip:hover {
  background: var(--panel);
  border-color: var(--muted);
}

.filter-chip-operator {
  color: white;
  background: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-right: 4px;
}

.filter-chip-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.filter-chip-label::after {
  content: ':';
}

.filter-chip-condition {
  color: var(--muted);
  font-size: 0.75rem;
  font-style: italic;
  margin-right: 2px;
}

.filter-chip-value {
  color: var(--text-primary);
  font-weight: 600;
}

.filter-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.15s ease;
  padding: 0;
  margin-left: 4px;
}

.filter-chip-remove:hover {
  background: #dc3545;
  color: white;
}

/* Panneau tiroir de filtres */
.filter-drawer {
  position: absolute;
  top: calc(100% + 8px);
  left: 10px; /* aligne avec .search qui a margin-left: 10px */
  right: 0;
  min-width: 300px; /* ne suit pas le rétrécissement de la barre de recherche */
  max-width: 800px;
  background: var(--panel-light);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--border-color);
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  overflow: hidden;
  container-type: inline-size;
  container-name: ikt-filter-drawer;
}

/* Sous 480px de large, le raccourci clavier (kbd) fait déborder les boutons
   Glossaire/Références (côte à côte à 50%) — le masquer, le clic reste actif. */
@container ikt-filter-drawer (max-width: 480px) {
  .filter-glossaire-kbd {
    display: none !important;
  }
}

.filter-drawer.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.filter-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--hover-bg);
  border-bottom: 1px solid var(--border-color);
}

.filter-drawer-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.filter-drawer-content {
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Glossaire et Références côte à côte (50/50) */
#filterGlossaireBtn,
#filterRefsBtn {
  flex: 1;
  width: calc(50% - 8px);
  margin-bottom: 0;
}

/* Bouton Glossaire dans le filter drawer (remplace l'item du menu auth) */
.filter-glossaire-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: var(--panel);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, color 0.15s;
}
.filter-glossaire-btn > span {
  flex: 1;
  text-align: left;
}
.filter-glossaire-btn:hover {
  background: var(--hover-bg, var(--panel-light));
  border-color: var(--brand-green, #1A5238);
  color: var(--brand-green, #1A5238);
}
.filter-glossaire-btn:active {
  transform: scale(0.98);
}
/* En thème sombre, le vert n'est pas assez visible → couleur dorée plus contrastée */
body.theme-noir .filter-glossaire-btn:hover {
  border-color: #d4af5f;
  color: #d4af5f;
}

/* Badge raccourci clavier (Ctrl+G) — dans le bouton ET dans la popup glossaire */
.filter-glossaire-kbd,
.glossaire-modal-kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: var(--panel-light);
  border: 1px solid var(--border-color);
  border-bottom-width: 2px;
  border-radius: 5px;
  white-space: nowrap;
  line-height: 1.4;
}
.glossaire-modal-kbd {
  margin-left: 12px;
  vertical-align: middle;
  font-size: 0.78rem;
}

/* Masquer les raccourcis clavier (Ctrl+G / Ctrl+R) sur mobile — inutiles tactiles */
@media (max-width: 768px) {
  .glossaire-modal-kbd { display: none !important; }
  .filter-glossaire-kbd { display: none !important; }
}

body.theme-noir .filter-glossaire-kbd,
body.theme-noir .glossaire-modal-kbd {
  background: #2a3a3d;
  color: #d4af5f;
  border-color: rgba(212, 175, 95, 0.3);
}

/* Groupe de champs de filtres */
.filter-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.filter-field-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-field-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  background: var(--panel-light);
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-field-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filter-field-btn.selected {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}

.filter-field-btn.selected:hover {
  background: var(--accent-dark, var(--accent));
  border-color: var(--accent-dark, var(--accent));
  color: white;
}

.filter-field-btn svg {
  width: 14px;
  height: 14px;
}

/* Ligne d'entrée opérateur + valeur */
.filter-input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.filter-operator-wrap {
  flex: 0 0 80px;
}

.filter-value-wrap {
  flex: 1;
}

.filter-select,
.filter-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.15s ease;
  background: var(--panel-light);
}

.filter-select:focus,
.filter-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Bouton appliquer */
.filter-apply-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: none;
  background: var(--accent);
  color: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-apply-btn:hover {
  opacity: 0.9;
}

.filter-apply-btn svg {
  width: 16px;
  height: 16px;
}

/* Label row : "Chercher par" + bouton ? alignés */
.filter-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.filter-label-row .filter-label {
  margin-bottom: 0;
}

/* Bouton discret "?" pour l'aide syntaxe */
.filter-syntax-help-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.filter-syntax-help-btn:hover,
.filter-syntax-help-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* Info opérateurs — cachée par défaut, visible sur toggle */
.filter-operators-info {
  display: none;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: var(--hover-bg);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}

.filter-operators-info.visible {
  display: block;
}

.filter-operators-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.filter-operators-list li {
  margin-bottom: 4px;
  padding-left: 0;
}

.filter-operators-list code {
  background: #e9ecef;
  padding: 2px 5px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  color: #d63384;
  font-size: 0.7rem;
}

/* Auto-complétion personnalisée (suggestions) */
.filter-value-wrap {
  position: relative;
}

.autocomplete-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  background: var(--panel-light);
  border: 1px solid #e0e0e0;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10002;
  margin-bottom: -1px;
  display: none;
}

.autocomplete-suggestions.visible {
  display: block;
}

.autocomplete-suggestion {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-primary);
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--hover-bg);
}

.autocomplete-suggestion:last-child {
  border-bottom: none;
}

.autocomplete-suggestion:hover,
.autocomplete-suggestion.highlighted {
  background: #f8f9fa;
  color: var(--accent);
}

.autocomplete-suggestion strong {
  color: var(--accent);
  font-weight: 600;
}

.autocomplete-suggestion .suggestion-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
  opacity: 0.6;
}

.autocomplete-no-results {
  padding: 12px 14px;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}

/* Scrollbar pour suggestions */
.autocomplete-suggestions::-webkit-scrollbar {
  width: 6px;
}

.autocomplete-suggestions::-webkit-scrollbar-track {
  background: var(--hover-bg);
  border-radius: 0 0 8px 0;
}

.autocomplete-suggestions::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.autocomplete-suggestions::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* Lien "Voir plus" discret dans les résultats de recherche */
.show-more-link {
  display: inline-block;
  margin-top: 8px;
  margin-left: 8px;
  font-size: 0.85rem;
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  /* Reset bouton */
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.show-more-link:hover {
  color: #764ba2;
  text-decoration: underline;
}

/* Popup pour afficher tous les résultats */
.results-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.results-popup {
  background: var(--panel-light);
  border-radius: var(--card-radius);
  max-width: 800px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

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

.results-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}

.results-popup-header h3 {
  margin: 0;
  font-size: 1.3rem;
  color: var(--text-primary);
  font-weight: 600;
}

.results-popup-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--hover-bg);
  border-radius: 50%;
  font-size: 24px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  line-height: 1;
  padding: 0;
}

.results-popup-close:hover {
  background: var(--border-color, #e0e0e0);
  color: var(--text-primary);
}

.results-popup-content {
  overflow-y: auto;
  padding: 16px 24px;
  flex: 1;
}

.popup-result-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  align-items: center;
}

.popup-result-item:hover {
  background: #f8f9fa;
  border-color: #667eea;
}

.popup-result-cover {
  width: 40px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--cover-radius, 4px);
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.popup-result-content {
  flex: 1;
  min-width: 0;
}

.popup-result-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popup-result-author {
  font-size: 0.85rem;
  color: #667eea;
}

.popup-result-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 8px;
}

.popup-result-badge {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 12px;
  background: #f0f0f0;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Responsive pour les filtres */
@media (max-width: 640px) {
  .filter-input-row {
    flex-wrap: wrap;
  }

  .filter-operator-wrap {
    flex: 0 0 100%;
  }

  .filter-value-wrap {
    flex: 1;
  }

  .filter-apply-btn {
    flex: 0 0 40px;
  }
}

/* ============================================================
   CUSTOM SELECT — remplace <select> natif pour éviter que la
   popup native couvre le menu d'authentification (z-index top-layer)
   ============================================================ */

.custom-select-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.sort-row .custom-select-wrapper {
  flex: 1;
}

.custom-select-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary, #333);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  justify-content: space-between;
  min-width: 110px;
  width: 100%;
  text-align: left;
  transition: border-color 0.2s ease;
}

.custom-select-btn:hover,
.custom-select-btn:focus {
  outline: none;
  border-color: var(--accent, #3c8c6c);
}

.custom-select-btn .chevron {
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.custom-select-wrapper.open .custom-select-btn .chevron {
  transform: rotate(180deg);
}

.custom-select-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  min-width: 100%;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: var(--panel-light, #faf9f6);
  border: 1px solid var(--border-color, #ddd);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: none;
}

.custom-select-wrapper.open .custom-select-list {
  display: block;
}

.custom-select-item {
  padding: 8px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text-primary, #333);
  cursor: pointer;
  transition: background 0.15s ease;
  list-style: none;
}

.custom-select-item:hover,
.custom-select-item.selected {
  background: rgba(26, 82, 56, 0.08);
  color: var(--accent, #3c8c6c);
}

.custom-select-item.selected {
  font-weight: 500;
}

/* ================================================
   Shared Search Popup (PDF + Lecture)
   ================================================ */
.search-popup {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: white;
  border: 2px solid #1A5238;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 20030;
  min-width: 320px;
  max-width: 90vw;
}

.search-popup input {
  flex: 1;
  padding: 10px 12px;
  border: 2px solid var(--border-color, #ddd);
  border-radius: 6px;
  font-size: 14px;
  outline: none;
}

.search-popup input:focus {
  border-color: #1A5238;
}

.search-popup-close {
  background: #d9534f;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
}

.search-popup-close:hover {
  background: var(--danger-hover);
}

.search-popup-nav {
  padding: 8px;
  background: #1A5238;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.search-popup-nav:hover:not(:disabled) {
  background: #134229;
}

.search-popup-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.search-popup-nav-sm {
  padding: 5px;
  border-radius: 5px;
}

.search-popup-nav svg {
  display: block;
}

/* ================================================
   Iktisar Story Popup
   ================================================ */

.iktisar-story-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 10200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.iktisar-story-overlay.iktisar-story-visible {
  opacity: 1;
}

.iktisar-story-overlay.iktisar-story-closing {
  animation: iktisar-story-fade-out 0.25s ease forwards;
}

@keyframes iktisar-story-fade-out {
  to { opacity: 0; }
}

.iktisar-story-popup {
  background: var(--panel-light, #F3E5CA);
  border-radius: 20px;
  max-width: 960px;
  width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  transform: translateY(24px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  border: 1px solid var(--border-color, rgba(26, 82, 56, 0.15));
}

.iktisar-story-overlay.iktisar-story-visible .iktisar-story-popup {
  transform: translateY(0);
}

/* Header */
.iktisar-story-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border-color, rgba(26, 82, 56, 0.12));
  flex-shrink: 0;
}

.iktisar-story-logo-wrap {
  flex-shrink: 0;
}

.iktisar-story-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
}

.iktisar-story-title-block {
  flex: 1;
  min-width: 0;
}

.iktisar-story-title {
  margin: 0 0 4px 0;
  font-family: var(--font-serif, 'Lora', Georgia, serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent, #1A5238);
  line-height: 1.2;
}

.iktisar-story-subtitle {
  margin: 0;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 0.9rem;
  color: var(--muted, #7A6548);
  letter-spacing: 0.3px;
}

/* Bouton de fermeture commun à toutes les popups du site (croix ronde —
   modèle repris de la popup "Histoire d'Iktisar"). Voir js/popup-helpers.js
   pour le générer de façon cohérente plutôt que de dupliquer ce balisage. */
.popup-close-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--hover-bg, rgba(0, 0, 0, 0.06));
  border-radius: 50%;
  color: var(--text-secondary, #555);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.popup-close-btn svg {
  width: 18px;
  height: 18px;
}

.popup-close-btn:hover {
  background: var(--border-color, #e0e0e0);
  color: var(--text-primary, #333);
}

/* Scroll area */
.iktisar-story-scroll-area {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 32px 40px 40px;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
}

/* Content */
.iktisar-story-content {
  max-width: 700px;
  margin: 0 auto;
}

.iktisar-story-chapter {
  margin-bottom: 36px;
}

.iktisar-story-chapter h3 {
  font-family: var(--font-serif, 'Lora', Georgia, serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent, #1A5238);
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent, #1A5238);
  display: inline-block;
}

.iktisar-story-chapter p {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-secondary, #5C4A32);
  margin: 0 0 14px 0;
}

.iktisar-story-chapter ul {
  margin: 10px 0 14px 0;
  padding-left: 24px;
}

.iktisar-story-chapter ul li {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary, #5C4A32);
  margin-bottom: 6px;
}

.iktisar-story-arabic {
  font-family: 'Amiri', serif;
  font-size: 1.3rem;
  color: var(--accent, #1A5238);
  font-weight: 700;
  direction: rtl;
  display: inline-block;
}

.iktisar-story-quote {
  font-family: var(--font-serif, 'Lora', Georgia, serif) !important;
  font-style: italic;
  font-size: 1.1rem !important;
  color: var(--accent, #1A5238) !important;
  border-left: 3px solid var(--accent, #1A5238);
  padding-left: 16px;
  margin: 20px 0 !important;
}

.iktisar-story-dua {
  font-family: 'Amiri', serif !important;
  font-size: 1.25rem !important;
  color: var(--accent, #1A5238) !important;
  text-align: center;
  margin-top: 24px !important;
  opacity: 0.85;
}

/* Scrollbar styling */
.iktisar-story-scroll-area::-webkit-scrollbar {
  width: 6px;
}

.iktisar-story-scroll-area::-webkit-scrollbar-track {
  background: transparent;
}

.iktisar-story-scroll-area::-webkit-scrollbar-thumb {
  background: var(--border-color, rgba(26, 82, 56, 0.25));
  border-radius: 3px;
}

/* (Le modal auteur réutilise .glossaire-modal-overlay — voir auteur-popup.js) */

/* ================================================================
   MODAL CONNEXION REQUISE — login-required-modal.js
   ================================================================ */
.login-required-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.login-required-box {
  background: var(--panel);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
  border-radius: 14px;
  padding: 28px 32px;
  max-width: 380px;
  width: 90%;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.login-required-title {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.login-required-message {
  margin: 0 0 20px;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.6;
}

.login-required-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.login-required-btn-close {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.15));
  background: transparent;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--text-secondary);
  transition: background 0.15s;
}
.login-required-btn-close:hover { background: var(--panel-light); }

.login-required-btn-connect {
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  background: var(--accent, #1A5238);
  color: #fff;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  transition: opacity 0.15s;
}
.login-required-btn-connect:hover { opacity: 0.88; }

/* ─── PWA : bannière offline ─────────────────────────────────────── */
#pwa-offline-banner {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #b91c1c;
  color: #fff;
  text-align: center;
  padding: .55rem 1rem;
  font-size: .82rem;
  z-index: 9999;
  line-height: 1.4;
}
#pwa-offline-banner.pwa-offline-banner--visible { display: block; }

.search-offline-notice {
  padding: .45rem .9rem;
  font-size: .75rem;
  color: #92400e;
  background: #fef3c7;
  border-top: 1px solid #fde68a;
  border-radius: 0 0 8px 8px;
  text-align: center;
}

.accueil-offline-notice {
  margin: .5rem 0 0;
  padding: .35rem .75rem;
  font-size: .75rem;
  color: #92400e;
  background: #fef3c7;
  border-radius: 6px;
  text-align: center;
}

/* ── Bandeau hors-ligne : décale au-dessus de la zone sécurisée iPhone ──── */
#pwa-offline-banner {
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
}

/* ── Tooltip "Ajouter à l'écran d'accueil" (iOS + fallback Android/desktop) ── */
.pwa-install-tooltip {
  position: absolute;
  z-index: 9999;
  width: 240px;
  padding: 14px 16px 16px;
  background: var(--panel-light, #FAF9F6);
  color: var(--text-primary, #2C3539);
  border: 1px solid var(--border-color, #e0ddd5);
  border-radius: var(--card-radius, 8px);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(44,53,57,.08));
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: .82rem;
  line-height: 1.5;
}
.pwa-install-tooltip__close {
  position: absolute;
  top: 8px;
  right: 10px;
}
.pwa-install-tooltip__text {
  margin: 0 0 8px;
  font-weight: 600;
  color: var(--text-primary, #2C3539);
}
.pwa-install-tooltip__steps {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary, #4A5568);
}
.pwa-install-tooltip__steps li {
  margin-bottom: 4px;
}
.pwa-install-tooltip__arrow {
  position: absolute;
  left: -8px;
  top: 18px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid var(--panel-light, #FAF9F6);
  filter: drop-shadow(-2px 0 1px rgba(44,53,57,.06));
}
body.theme-noir .pwa-install-tooltip {
  background: var(--panel, #1a2628);
  color: var(--text-primary, #e8e8e8);
  border-color: var(--border-color, rgba(255,255,255,.1));
}
body.theme-noir .pwa-install-tooltip__arrow {
  border-right-color: var(--panel, #1a2628);
}
body.theme-noir .pwa-install-tooltip__text {
  color: var(--accent-gold, #b89e14);
}
body.theme-noir .pwa-install-tooltip__steps strong {
  color: var(--accent-gold, #b89e14);
}
body.theme-noir .pwa-install-tooltip__close:hover {
  color: var(--accent-gold, #b89e14);
}

/* ── Popup « code compagnon » (nom du narrateur d'un hadith) ── */
.compagnon-popup {
  position: fixed;
  z-index: 100000;
  max-width: 260px;
  padding: 10px 16px;
  background: var(--panel-light, #FAF9F6);
  color: var(--text-primary, #2C3539);
  border: 1px solid var(--border-color, rgba(184, 134, 11, 0.25));
  border-radius: var(--card-radius, 8px);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(44,53,57,.12));
  font-family: var(--font-sans, 'Inter', sans-serif);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: auto;
}
.compagnon-popup.visible {
  opacity: 1;
  transform: translateY(0);
}
.compagnon-popup.below {
  transform: translateY(-6px);
}
.compagnon-popup.below.visible {
  transform: translateY(0);
}
.compagnon-popup::before {
  content: '';
  position: absolute;
  bottom: -8px;
  /* À droite (pas centré) : la popup elle-même est ancrée sur le bord droit
     du badge (cf. position() dans companion-popup.js), pas centrée dessus. */
  right: 12px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--panel-light, #FAF9F6);
}
.compagnon-popup.below::before {
  bottom: auto;
  top: -8px;
  border-top: none;
  border-bottom: 8px solid var(--panel-light, #FAF9F6);
}
.compagnon-popup-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--accent-gold, #b89e14);
  margin-bottom: 2px;
}
.compagnon-popup-doua {
  font-family: 'Amiri', 'Noto Naskh Arabic', serif;
  font-size: 0.95rem;
  color: var(--text-secondary, #4A5568);
  text-align: right;
}
body.theme-noir .compagnon-popup {
  background: var(--panel, #1a2628);
  color: var(--text-primary, #e8e8e8);
}
body.theme-noir .compagnon-popup::before {
  border-top-color: var(--panel, #1a2628);
}
body.theme-noir .compagnon-popup.below::before {
  border-bottom-color: var(--panel, #1a2628);
}
@media (max-width: 768px), (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
  .compagnon-popup.mobile {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
    text-align: center;
  }
  .compagnon-popup.mobile::before {
    display: none;
  }
  .compagnon-popup.mobile .compagnon-popup-doua {
    text-align: center;
  }
}

/* ===== Tri partagé — desktop + popup mobile ===== */
.sort-row {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.sort-row label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.sort-row select {
  flex: 1;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  cursor: pointer;
}

/* ================================================================
 * HOVER OVERLAY LIVRE — description sur la couverture (desktop)
 * Base partagée entre Accueil, Bibliothèque et sidebar auteur.
 * Chaque contexte fournit son propre trigger :
 *   Accueil    : .carousel-wrap .book:hover .book-hover-overlay
 *   Biblio     : .book-card:hover .book-hover-overlay
 *   Sidebar    : .asb-book-card:hover .book-hover-overlay
 * ================================================================ */
.book-hover-overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius, 8px);
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 11px;
  line-height: 1.5;
  padding: 12px 10px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  display: -webkit-box;
  -webkit-line-clamp: 12;
  -webkit-box-orient: vertical;
  text-align: left;
  font-family: var(--font-sans, 'Inter', sans-serif);
}

@media (max-width: 768px) {
  .book-hover-overlay { display: none; }
}

/* Styles des panneaux latéraux glossaire/références → public/ikt-panel.css */

/* =========================================================================
   Sécurité : community-stats-widget doit être invisible en dehors d'accueil
   (protection contre les fuites de contenu lors des navigations rapides)
   ========================================================================= */
#community-stats-widget {
  display: none !important;
}
body.page-accueil #community-stats-widget {
  display: block !important;
}

/* =========================================================================
   Couvertures de livres redimensionnées côté serveur (supabaseImg / wsrv.nl)
   Classe utilitaire partagée pour éviter de dupliquer ce bloc dans chaque
   feuille de style par page. Additive : à ajouter en plus de la classe
   existante de l'élément, jamais à la place.
   ========================================================================= */
.gpu-cover-boost {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Fondu à l'apparition pour les couvertures chargées de façon asynchrone.
   N'appliquer cette classe qu'aux <img> dont le code JS garantit l'ajout de
   .cover-loaded sur TOUS les chemins (succès, échec final, cas sans URL) —
   sinon l'image reste invisible indéfiniment. Voir loadCoverWithRetry()
   dans pages/accueil.js pour l'implémentation de référence. */
.cover-fade-in {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cover-fade-in.cover-loaded {
  opacity: 1;
}

/* Translitération savante : lettre soulignée (h̲, t̲, d̲...) simulée en CSS.
   Chromium tronque la hampe de lettres comme "h" quand le diacritique combinant
   souscrit (U+0331/U+0332) est suivi d'autres caractères dans le même mot, quelle
   que soit la police — on évite donc le glyphe combinant et on dessine le trait
   nous-mêmes (cf. renderTranslitUnderlines() dans security-helpers.js). Règle de
   base ici (chargée sur toutes les pages) ; les couleurs par contexte/thème
   (survol, popup, sidebar glossaire...) restent définies dans les feuilles de
   style de chaque page. */
.translit-underline {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Croix "effacer" des <input type="search"> du glossaire, des références et
   de la carte mentale (xmind) : remplace l'icône grise par défaut du
   navigateur (Chromium/WebKit) par une croix fine dans le même ton que la
   loupe voisine (var(--muted), cf. .gl-search-icon/.rf-search-icon/
   .search-icon) plutôt que la couleur système fixe. Firefox n'a pas de
   bouton natif ici, donc pas de repli nécessaire. */
#glossaireSearch::-webkit-search-cancel-button,
.gl-search::-webkit-search-cancel-button,
#refsSearch::-webkit-search-cancel-button,
.rf-search::-webkit-search-cancel-button,
#searchInput::-webkit-search-cancel-button,
#searchInputMobile::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  cursor: pointer;
  opacity: 0.55;
  background-color: var(--muted, #888);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
#glossaireSearch::-webkit-search-cancel-button:hover,
.gl-search::-webkit-search-cancel-button:hover,
#refsSearch::-webkit-search-cancel-button:hover,
.rf-search::-webkit-search-cancel-button:hover,
#searchInput::-webkit-search-cancel-button:hover,
#searchInputMobile::-webkit-search-cancel-button:hover {
  opacity: 1;
}