/* شبكة الفرقان السلفية — thème « parchemin » */
@font-face { font-family: 'Noto Naskh Arabic'; font-weight: 400; font-display: swap; src: url('../vendor/fonts/noto-naskh-arabic-arabic-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Noto Naskh Arabic'; font-weight: 600; font-display: swap; src: url('../vendor/fonts/noto-naskh-arabic-arabic-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Noto Naskh Arabic'; font-weight: 700; font-display: swap; src: url('../vendor/fonts/noto-naskh-arabic-arabic-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Amiri'; font-weight: 400; font-display: swap; src: url('../vendor/fonts/amiri-arabic-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Amiri'; font-weight: 700; font-display: swap; src: url('../vendor/fonts/amiri-arabic-700-normal.woff2') format('woff2'); }

:root {
  --paper: #f7f2e7;
  --paper-2: #efe6d3;
  --card: #fffdf8;
  --ink: #2a2118;
  --ink-soft: #6b5b4a;
  --line: #e2d6bf;
  --green: #2f5d50;
  --green-dark: #23463c;
  --brown: #8a5a2b;
  --gold: #b48a4a;
  --bs-body-font-family: 'Noto Naskh Arabic', 'Traditional Arabic', Tahoma, sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-link-color: var(--green);
  --bs-link-color-rgb: 47, 93, 80;
  --bs-link-hover-color: var(--brown);
  --bs-link-hover-color-rgb: 138, 90, 43;
  --bs-border-color: var(--line);
}

body { font-size: 1.08rem; line-height: 1.95; background: var(--paper); }
h1, h2, h3, h4, .display-font { font-family: 'Amiri', 'Noto Naskh Arabic', serif; font-weight: 700; line-height: 1.5; }
a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
::selection { background: #d8c79f; }

/* En-tête */
.site-header { background: linear-gradient(180deg, #fbf7ee 0%, var(--paper-2) 100%); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: .9rem; color: var(--ink); }
.brand:hover { text-decoration: none; color: var(--ink); }
.brand-mark { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #f3e9cf; font-family: 'Amiri', serif; font-size: 1.7rem; font-weight: 700; box-shadow: inset 0 0 0 3px #f3e9cf, 0 0 0 1px var(--green); }
.brand-name { font-family: 'Amiri', serif; font-size: 1.9rem; font-weight: 700; line-height: 1.2; }
.brand-slogan { color: var(--ink-soft); font-size: .95rem; }
.main-nav { background: var(--green); }
.main-nav .nav-link { color: #eef3ee; padding: .7rem 1rem; font-weight: 600; }
.main-nav .nav-link:hover, .main-nav .nav-link.active { color: #fff; background: var(--green-dark); text-decoration: none; }
.main-nav .search-mini input { background: #fffdf8; border: 0; min-width: 220px; }

/* Cartes et listes */
.card { background: var(--card); border-color: var(--line); border-radius: .6rem; }
.card-header { background: transparent; border-bottom: 1px solid var(--line); font-family: 'Amiri', serif; font-weight: 700; font-size: 1.25rem; color: var(--green-dark); }
.section-title { font-size: 1.6rem; color: var(--green-dark); border-bottom: 2px solid var(--gold); display: inline-block; padding-bottom: .15rem; margin-bottom: 1rem; }
.item-list { list-style: none; padding: 0; margin: 0; }
.item-list > li { padding: .8rem 0; border-bottom: 1px dashed var(--line); }
.item-list > li:last-child { border-bottom: 0; }
.item-title { font-weight: 700; color: var(--ink); font-size: 1.1rem; }
.item-title:hover { color: var(--green); }
.meta { color: var(--ink-soft); font-size: .9rem; }
.meta a { color: var(--brown); }
.excerpt { color: #4b3f33; margin: .25rem 0 0; }
.badge-soft { background: var(--paper-2); color: var(--brown); border: 1px solid var(--line); font-weight: 600; }

/* Contenu de lecture */
.reading { font-size: 1.22rem; line-height: 2.15; }
.reading p { margin-bottom: 1rem; }
.reading table { max-width: 100%; }
.reading img { max-width: 100%; height: auto; }
.question-box { background: #f3ecdc; border-inline-start: 4px solid var(--gold); padding: 1rem 1.25rem; border-radius: .4rem; font-weight: 600; }
.answer-label { font-family: 'Amiri', serif; color: var(--green-dark); font-weight: 700; font-size: 1.3rem; }
.review-flag { background: #fff3cd; border: 1px solid #f0d58a; color: #6b5310; border-radius: .4rem; padding: .6rem 1rem; font-size: .95rem; }

/* Audio */
.player-card { background: var(--green); color: #f3efe2; border-radius: .7rem; padding: 1.25rem; }
.player-card audio { width: 100%; }
.player-card a { color: #f3e2b5; }
.lesson-row { display: flex; gap: .75rem; align-items: baseline; }
.lesson-num { min-width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--paper-2); color: var(--brown); display: inline-grid; place-items: center; font-weight: 700; font-size: .9rem; flex-shrink: 0; }
.fmt { font-size: .75rem; padding: .05rem .4rem; border-radius: .25rem; background: #eee6d4; color: #7a6650; font-family: monospace; }
.fmt-legacy { background: #f6e3d6; color: #8a4b2b; }

/* Grilles cheikhs / recueils */
.tile { display: block; height: 100%; padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: .6rem; color: var(--ink); transition: border-color .15s, transform .15s; }
.tile:hover { text-decoration: none; border-color: var(--gold); transform: translateY(-2px); color: var(--ink); }
.tile-title { font-family: 'Amiri', serif; font-weight: 700; font-size: 1.2rem; color: var(--green-dark); }
.tile img { max-height: 60px; }

/* Blocs HTML importés */
.block-content table { margin-inline: auto; }
.block-content img { max-width: 100%; height: auto; }

/* Pagination */
.pagination { --bs-pagination-color: var(--green); --bs-pagination-active-bg: var(--green); --bs-pagination-active-border-color: var(--green); --bs-pagination-border-color: var(--line); --bs-pagination-bg: var(--card); }

/* Pied de page */
.site-footer { background: var(--ink); color: #d9cdb6; margin-top: 3rem; }
.site-footer a { color: #f0dfb6; }

.breadcrumb { --bs-breadcrumb-divider: '‹'; font-size: .95rem; }
mark { background: #f5e3a8; padding: 0 .1em; }
.player-card .btn-light, .player-card .btn-light:hover { color: var(--green-dark); text-decoration: none; }