/* /quran/css/style.css */
/* classe de base */
.font-arabic{
  font-size:1.75rem; line-height:2.5rem;
  direction:rtl; text-align:right;
}

/* Verset en cours */
.aya.highlight{
  background: #fff7cc;              /* clair */
  box-shadow: inset 0 0 0 2px #f59e0b66;
  border-radius: .5rem;
  padding:15px;
}
.dark .aya.highlight{
  background: #1c191733;            /* sombre */
  box-shadow: inset 0 0 0 2px #f59e0b66;
}
.aya{ transition: background-color .25s ease, box-shadow .25s ease; }
.aya .aya-num{ opacity:.8; }
.aya.highlight .aya-num{ opacity:1; font-weight:700; }

@font-face {
  font-family: 'MeQuran';
  src: url('/quran/fonts/me_quran.ttf') format('truetype');
  font-display: swap;
}

.font-mequran {
  font-family: 'MeQuran', serif;
}

@font-face {
  font-family: 'Uthman';
  src: url('/quran/fonts/uthman.ttf') format('truetype');
  font-display: swap;
}

.font-uthman {
  font-family: 'Uthman', serif;
}

.font-amiri         {font-family:'Amiri',serif;}
.font-scheherazade  {font-family:'Scheherazade New',serif;}
.font-lateef        {font-family:'Lateef',serif;}
.font-noto-naskh    {font-family:'Noto Naskh Arabic',serif;}
.font-noto-nastaliq {font-family:'Noto Nastaliq Urdu',serif;}



/* Styles généraux */
body {
  background: #f9fafb;
  color: #111827;
  transition: background 0.3s, color 0.3s;
}
.dark body {
  background: #1f2937;
  color: #f3f4f6;
}
.font-arabic {
  font-size: 1.75rem;
  line-height: 2em;
  direction: rtl;
  text-align: right;
}
.ayah-num {
  font-size: 0.9rem;
  color: #6b7280;
  margin-right: 8px;
}
.font-fr {
  font-size: 0.95rem;
  color: #4b5563;
  margin-top: 4px;
}
.audio-btn {
  background: #f3f4f6;
  color: #111827;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
}
.dark .audio-btn {
  background: #374151;
  color: #f9fafb;
}
select {
  padding: 4px;
  margin-top: 4px;
}
.quran-page {
  position: relative;
  background: #fffdf6;               /* couleur crème papier */
  padding: 2rem;                     /* espace intérieur généreux */
  border-radius: 1rem;               /* coins arrondis */
  box-shadow: 0 0 15px rgba(0,0,0,0.1); /* légère ombre externe */

  /* ===== Border-image avec SVG inline ===== */
  border: 16px solid transparent;
  border-image-source: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'>\
      <defs>\
        <pattern id='p' width='40' height='40' patternUnits='userSpaceOnUse'>\
          <path d='M0,20 L20,0 L40,20 L20,40 Z' fill='none' stroke='%236a4e2e' stroke-width='2'/>\
          <circle cx='20' cy='20' r='4' fill='%23c49b5e'/>\
        </pattern>\
      </defs>\
      <rect x='0' y='0' width='100%' height='100%' fill='url(%23p)'/>\
    </svg>");
  border-image-slice: 13;             /* découpe le SVG sur tout le pourtour */
  border-image-repeat: round;         /* répète/répète partiellement */
  border-image-width: 7px;           /* épaisseur de la bordure */
}


.quran-nav {
  /* un léger fond ivoire */
  background-color: #fff9f0;
  /* bordure supérieure et inférieure fine dorée */
  border-top:   2px solid #d4af37;
  border-bottom:2px solid #d4af37;
  /* arrondi doux */
  border-radius: 6px;
  /* petite ombre portée pour détacher du fond */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  /* padding pour respirer */
  padding: 0.75rem 1rem;
}

/* style des boutons / selects pour les homogénéiser */
.quran-nav button,
.quran-nav select,
.quran-nav input[type="checkbox"] + span {
  /* un fond un peu plus chaud */
  background-color: #faf5eb;
  border: 1px solid #e5d4b0;
  border-radius: 4px;
  color: #4b3b2b;
  transition: background-color 0.2s, color 0.2s;
}

/* hover + focus */
.quran-nav button:hover,
.quran-nav select:hover {
  background-color: #f3e9d9;
}
.quran-nav select:focus,
.quran-nav button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.4);
}

/* liens “Précédent / Suivant” plus visibles */
.quran-nav a {
  color: #b07d22;
  font-weight: 500;
  text-decoration: none;
}
.quran-nav a:hover {
  text-decoration: underline;
}



/* Enlève le padding sur mobile */
@media (max-width: 640px) {
  .quran-page {
    padding: 0 !important;
  }
}

.qnav-collapsed { /* mini bandeau */
  backdrop-filter: saturate(1.1) blur(6px);
}