/* ==========================================================
   Bibliothèque arabe : style personnalisé pour Helix Ultimate
   (Joomla 6). Polices : Amiri (titres et lecture) + Tajawal
   (menu, boutons, interface). Fonctionne de droite à gauche.
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Tajawal:wght@400;500;700&display=swap");

:root {
  --bib-encre: #1E2B33;       /* texte */
  --bib-teal: #1D5B63;        /* couleur principale */
  --bib-teal-fonce: #134149;  /* survol et pied de page */
  --bib-papier: #F5F7F6;      /* fond de page */
  --bib-or: #B58A3C;          /* filets et détails */
  --bib-trait: #DDE3E1;       /* bordures fines */
}

/* ---------- Texte général ---------- */
body {
  background: var(--bib-papier);
  color: var(--bib-encre);
  font-family: "Amiri", "Noto Naskh Arabic", serif; /* Amiri affiche bien le tashkil */
  font-size: 1.15rem;
  line-height: 1.95;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Amiri", "Noto Naskh Arabic", serif;
  font-weight: 700;
  line-height: 1.5;
  color: var(--bib-encre);
}

/* Titre de page : double filet doré (seul élément décoratif) */
.page-header h1,
.page-header h2,
#sp-title h1 {
  display: inline-block;
  padding-block-end: 0.6rem;
  border-block-end: 3px double var(--bib-or);
}

a {
  color: var(--bib-teal);
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--bib-teal-fonce); }

a:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--bib-or);
  outline-offset: 2px;
}

/* ---------- Interface : police Tajawal ---------- */
.sp-megamenu-parent > li > a,
.btn,
.breadcrumb,
.pagination,
.form-control,
.form-select,
label,
.badge,
#sp-footer {
  font-family: "Tajawal", sans-serif;
}

/* ---------- En-tête et menu ---------- */
#sp-header {
  background: #fff;
  border-block-end: 1px solid var(--bib-trait);
  box-shadow: none;
}
.sp-megamenu-parent > li > a {
  font-weight: 500;
  font-size: 1rem;
  color: var(--bib-encre);
}
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li > a:hover {
  color: var(--bib-teal);
}

/* ---------- Livres et catégories (jDownloads) ---------- */
body[class*="jdownloads"] #sp-component .card {
  background: #fff;
  border: 1px solid var(--bib-trait);
  border-radius: 0.6rem;
  box-shadow: none;
}
body[class*="jdownloads"] #sp-component .card:hover {
  border-color: var(--bib-or);
}
body[class*="jdownloads"] #sp-component .card-title,
body[class*="jdownloads"] #sp-component .card-title a {
  font-family: "Amiri", serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--bib-encre);
  text-decoration: none;
}
body[class*="jdownloads"] #sp-component table th,
body[class*="jdownloads"] #sp-component table td {
  border-color: var(--bib-trait);
}

/* ---------- Bouton de téléchargement ---------- */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bib-teal);
  --bs-btn-border-color: var(--bib-teal);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bib-teal-fonce);
  --bs-btn-hover-border-color: var(--bib-teal-fonce);
  --bs-btn-active-bg: var(--bib-teal-fonce);
  --bs-btn-active-border-color: var(--bib-teal-fonce);
  border-radius: 0.5rem;
  font-weight: 500;
  padding-inline: 1.2rem;
}

/* ---------- Pied de page ---------- */
#sp-footer {
  background: var(--bib-teal-fonce);
  color: #E6EEEE;
}
#sp-footer a { color: #fff; }

/* ---------- Téléphone ---------- */
@media (max-width: 575px) {
  body { font-size: 1.05rem; line-height: 1.85; }
}