/* ==========================================================================
   THÈME SOBRE — tout le site, au ton de la table des sourates
   En-têtes de page sans cartouche ni frise : petit intitulé, titre, sous-titre
   en italique, filet de zellige. Onglets en simples liens. Le texte coranique
   garde son cadre, allégé. Chargé en dernier (css_apres).
   ========================================================================== */
:root { --sb-carmin: #7a0a0a; --sb-or: #b8902c; --sb-sepia: #6b5a3e; --sb-encre: #2b1e0e; --sb-papier: #fffdf7; }

/* --- En-tête de page (ui_masthead et en-têtes écrits à la main) ------------ */
.page-masthead { margin: 8px 0 18px; }
.badge-imp { display: inline-block; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
  font-family: 'Cinzel', serif; font-size: 11.5px; letter-spacing: .2em; color: #8a6a1e !important; text-transform: uppercase; }
.title-flourish { display: none !important; }
.title-main { font-family: 'Cinzel', serif; font-weight: 700; color: var(--sb-carmin); font-size: clamp(22px, 3vw, 30px);
  letter-spacing: .1em; margin: 6px 0 0; text-shadow: none; text-transform: none; }
.page-subtitle { display: block; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
  font-family: 'Lora', serif !important; font-style: italic; letter-spacing: 0 !important; color: var(--sb-sepia) !important; font-size: 16px; margin: 8px auto 0; max-width: 680px; }
.page-subtitle::before, .page-subtitle::after { display: none !important; }
[dir="rtl"] .page-subtitle { font-family: 'Amiri', serif !important; font-style: normal; font-size: 19px; }
.zellij-band { height: 16px !important; max-width: 520px !important; margin: 14px auto 18px !important; border: 0 !important; box-shadow: none !important;
  background: var(--zl-filet, none) center / auto 16px repeat-x !important; opacity: .9; }
.zellij-band::before, .zellij-band::after { display: none !important; }

/* --- Onglets : de simples liens séparés par un point ---------------------- */
.lect-subnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 6px auto 14px; }
.lect-subnav-btn { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  font-family: 'Lora', serif; font-size: 14px; letter-spacing: .01em; color: #8a6a1e; padding: 2px 10px; text-decoration: none; cursor: pointer; }
.lect-subnav-btn + .lect-subnav-btn::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(184,144,44,.75); vertical-align: middle; margin-inline: -11.5px 10px; }
.lect-subnav-btn:hover, .lect-subnav-btn:focus-visible { color: var(--sb-carmin); background: none !important; text-decoration: none; }
.lect-subnav-btn.active { color: var(--sb-carmin) !important; font-weight: 600; background: none !important; }
[dir="rtl"] .lect-subnav-btn, .lect-subnav-btn:lang(ar) { font-family: 'Amiri', serif; font-size: 16.5px; }

/* --- Page de lecture d'une sourate : en-tête ------------------------------ */
.ui-sura-page .sl-head { text-align: center; margin: 10px auto 10px; max-width: 760px; }
.ui-sura-page .sl-ar { font-family: 'Amiri', serif; font-size: 34px; line-height: 1.3; color: #4a0606; margin: 0; }
.ui-sura-page .sl-title { font-family: 'Cinzel', serif; font-weight: 700; color: var(--sb-carmin); font-size: 28px; letter-spacing: .12em; margin: 4px 0 0; }
.ui-sura-page .sl-rd { font-family: 'Lora', serif; font-style: italic; color: var(--sb-sepia); font-size: 16px; margin: 8px 0 0; }
.ui-sura-page .sl-meta { font-family: 'Lora', serif; font-size: 12.5px; letter-spacing: .04em; color: #8a7650; margin: 0; }
.ui-sura-page .sl-meta::before { content: ""; display: block; height: 16px; margin: 14px auto 10px; max-width: 520px;
  background: var(--zl-filet, none) center / auto 16px repeat-x; opacity: .9; }
.ui-sura-page[dir="rtl"] .sl-rd, .ui-sura-page[dir="rtl"] .sl-meta { font-family: 'Amiri', serif; font-style: normal; }
.ui-sura-page[dir="rtl"] .sl-rd { font-size: 19px; }
.ui-sura-page[dir="rtl"] .sl-title { font-family: 'Amiri', serif; letter-spacing: 0; font-size: 36px; }

/* --- Le cadre du texte coranique : gardé, allégé ----------------------------
   Un filet d'or, un second filet intérieur, les quatre coins ; le double
   liseré carmin devient un liseré d'or pâle, l'ombre se fait plus douce. */
.tx-frame { border: 1px solid rgba(184,144,44,.75);
  box-shadow: 0 0 0 5px var(--tx-papier, #fbf6ea), 0 0 0 6px rgba(184,144,44,.38), 0 12px 30px rgba(80,55,20,.09); }
.tx-frame::before { border-color: rgba(184,144,44,.30); }
.ui-sura-page .tx { margin: 20px 0 8px; }
.ui-sura-page .tx .tx-tools .gr-note-btn, .ui-sura-page .tx .tx-tools .gr-qr-btn { opacity: .55; }
.ui-sura-page .tx-row:hover .tx-tools .gr-note-btn, .ui-sura-page .tx-row:hover .tx-tools .gr-qr-btn { opacity: .9; }

/* --- Le cadre, conteneur par défaut des pages (ui_cadre_debut / ui_cadre_fin) --- */
.cadre { position: relative; background: linear-gradient(180deg, var(--tx-papier, #fffcf4) 0%, #fdf7e8 100%);
  border: 1px solid rgba(184,144,44,.75); padding: 40px 46px 44px; margin: 14px 6px 10px;
  box-shadow: 0 0 0 5px var(--tx-papier, #fbf6ea), 0 0 0 6px rgba(184,144,44,.38), 0 12px 30px rgba(80,55,20,.09); }
.cadre::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(184,144,44,.30); pointer-events: none; }
.cadre > .page-masthead:first-of-type { margin-top: 0; }
@media (max-width: 760px) { .cadre { padding: 28px 18px 30px; } }
@media (max-width: 560px) { .cadre { padding: 22px 12px 24px; margin: 10px 3px; } .cadre > .tx-corner { width: 32px; height: 32px; } }
@media print { .cadre { box-shadow: none; } }

/* --- Dictionnaire : index des trois familles, puis lettres -------------- */
.dx-ix-intro { text-align: center; font-style: italic; color: var(--sb-sepia); margin: 0 auto 22px; max-width: 640px; }
.dx-ix { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto 10px; }
.dx-ix-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 26px 20px 22px; background: var(--sb-papier); color: var(--sb-encre); text-decoration: none !important; isolation: isolate; overflow: hidden;
  border: 1px solid rgba(184,144,44,.38); border-top: 2px solid rgba(184,144,44,.7); border-radius: 3px;
  box-shadow: inset 0 0 0 4px var(--sb-papier), inset 0 0 0 5px rgba(184,144,44,.22); transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease; }
.dx-ix-card:nth-child(2) { border-top-color: rgba(31,107,79,.5); }
.dx-ix-card:nth-child(3) { border-top-color: rgba(29,78,137,.45); }
.dx-ix-card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .25s ease;
  background: url("../img/zellige/fes_pale.svg") center / 180px auto repeat; }
.dx-ix-card::after { content: ""; width: 44px; height: 44px; order: -1; margin-bottom: 4px; background: url("../img/zellige/zl_medaille8.svg") center / contain no-repeat; transition: transform .45s ease; }
.dx-ix-card:hover, .dx-ix-card:focus-visible { transform: translateY(-2px); border-color: var(--sb-carmin);
  box-shadow: inset 0 0 0 4px var(--sb-papier), inset 0 0 0 5px rgba(122,10,10,.28), 0 8px 18px rgba(90,40,10,.12); }
.dx-ix-card:hover::before { opacity: .22; } .dx-ix-card:hover::after { transform: rotate(22.5deg); }
.dx-ix-ar { font-family: 'Amiri', serif; font-size: 30px; line-height: 1.3; color: #4a0606; }
.dx-ix-t { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #8a6a1e; }
.dx-ix-d { font-family: 'Lora', serif; font-style: italic; font-size: 15px; line-height: 1.5; color: #3d2f14; margin-top: 4px; }
.dx-ix-n { font-family: 'Lora', serif; font-size: 12.5px; color: #8a7650; margin-top: 6px; }
.dx-ix-n bdi { font-family: 'Amiri', serif; font-size: 15px; }
[dir="rtl"] .dx-ix-d, [dir="rtl"] .dx-ix-intro, [dir="rtl"] .dx-ix-n { font-family: 'Amiri', serif; font-style: normal; font-size: 17px; }
.dx-up { text-align: center; margin: -6px 0 12px; }
.dx-search { max-width: 520px; margin: 0 auto 14px; }
.dx-letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 820px; margin: 0 auto 22px; }
.dx-letter { min-width: 38px; height: 38px; display: inline-grid; place-items: center; font-family: 'Amiri', serif; font-size: 21px; line-height: 1;
  color: #4a0606; text-decoration: none !important; background: var(--sb-papier); border: 1px solid rgba(184,144,44,.35); border-radius: 50%; transition: background-color .15s, color .15s, border-color .15s; }
.dx-letter:hover { border-color: var(--sb-carmin); }
.dx-letter.active { background: var(--sb-carmin); color: #f6e6b8; border-color: var(--sb-carmin); }

@media (max-width: 560px) {
  .ui-sura-page .sl-ar { font-size: 28px; }
  .ui-sura-page .sl-title { font-size: 22px; }
  .lect-subnav-btn { font-size: 12.5px; padding: 2px 8px; }
}
@media print { .zellij-band, .ui-sura-page .sl-meta::before, .lect-subnav { display: none !important; } }