/* ==========================================================================
   css/text.css — Présentation du texte en page impériale (inc/text_lib.php).
   Une page parchemin encadrée d'un double filet or et bordeaux, coins ornés ;
   Basmala en tête ; texte justifié ; rosaces de fin de verset ; notes et
   lectures en signes discrets. Chargé après notes.css.
   ========================================================================== */

/* Polices arabes servies par le site (licence SIL OFL) */
@font-face { font-family: 'Amiri Quran'; src: url('../fonts/AmiriQuran.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Amiri'; src: url('../fonts/Amiri-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Amiri'; src: url('../fonts/Amiri-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --tx-encre:     #2a2117;   /* encre de la traduction */
  --tx-encre-ar:  #1f1a14;   /* encre de l'arabe seul */
  --tx-encre-ar2: #54463a;   /* arabe sous la traduction */
  --tx-or-fonce:  #a8842a;
  --tx-papier:    #fffcf4;
  --tx-rosace: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23fff8e6' stroke='%23b8922e' stroke-width='1.3'%3E%3Crect x='8.5' y='8.5' width='23' height='23'/%3E%3Crect x='8.5' y='8.5' width='23' height='23' transform='rotate(45 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='9.2' fill='%23fffdf6' stroke='%238B0000' stroke-width='.9'/%3E%3C/svg%3E");
  --tx-coin: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23b8922e' stroke-width='1.2'%3E%3Cpath d='M2 30 Q2 2 30 2'/%3E%3Cpath d='M8 30 Q8 8 30 8'/%3E%3Cpath d='M2 2 L18 18'/%3E%3C/g%3E%3Cg fill='%238B0000'%3E%3Ccircle cx='18' cy='18' r='2.6'/%3E%3C/g%3E%3Cg fill='%23d4af37'%3E%3Cpath d='M18 6 l2.2 4.6 -2.2 1.8 -2.2 -1.8z'/%3E%3Cpath d='M6 18 l4.6 2.2 1.8 -2.2 -1.8 -2.2z'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- La page ---------------------------------------------------------- */
.tx { margin: 26px 0 8px; }
.tx-frame {
  position: relative;
  background: linear-gradient(180deg, var(--tx-papier) 0%, #fdf7e8 100%);
  border: 1px solid var(--or);
  box-shadow: 0 0 0 5px var(--tx-papier), 0 0 0 6px var(--rouge), 0 14px 34px rgba(80, 55, 20, .14);
  padding: 46px 58px 50px;
  margin: 6px;
}
.tx-frame::before {          /* filet intérieur */
  content: ""; position: absolute; inset: 10px; border: 1px solid var(--or-fade); pointer-events: none;
}
.tx-corner { position: absolute; width: 46px; height: 46px; background: var(--tx-coin) no-repeat center / contain; pointer-events: none; }
.tx-c1 { top: 4px; left: 4px; }
.tx-c2 { top: 4px; right: 4px; transform: scaleX(-1); }
.tx-c3 { bottom: 4px; left: 4px; transform: scaleY(-1); }
.tx-c4 { bottom: 4px; right: 4px; transform: scale(-1, -1); }

/* --- Basmala ----------------------------------------------------------- */
.tx-basmala { text-align: center; margin: 0 0 22px; }
.tx p.tx-basmala-ar {
  font-family: 'Amiri Quran', 'Amiri', serif; font-size: 54px; line-height: 2.25;
  color: var(--rouge); margin: 0;
}
.tx.tx-ar p.tx-basmala-ar { font-size: 58px; }
.tx p.tx-basmala-tr {
  font-family: 'Lora', serif; font-style: italic; font-size: 15px; letter-spacing: .02em;
  color: #7a6448; margin: 14px 0 0; line-height: 1.5;
}
.tx-rule, .tx-sep {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  color: var(--tx-or-fonce); margin: 14px auto 0; max-width: 420px;
}
.tx-rule::before, .tx-rule::after, .tx-sep::before, .tx-sep::after {
  content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--or), transparent);
}
.tx-rule span { font-size: 20px; line-height: 1; }
.tx-sep { margin: 26px auto; max-width: 260px; }
.tx-sep span { font-size: 14px; line-height: 1; }

/* --- Traduction (en haut, en grand) ------------------------------------ */
.tx p.tx-tr {
  font-family: 'Lora', serif; font-size: 21px; line-height: 1.9; color: var(--tx-encre);
  text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto;
  margin: 0; overflow-wrap: break-word;
}
.tx p.tx-tr.tx-first::first-letter {
  float: left; font-family: 'Cinzel', serif; font-weight: 700; font-size: 3.15em; line-height: .86;
  color: var(--rouge); margin: 6px 10px 0 0; padding: 0 2px;
  text-shadow: 1px 1px 0 var(--or-clair);
}

/* --- Arabe sous la traduction (plus petit) ----------------------------- */
.tx p.tx-ar {
  font-family: 'Amiri Quran', 'Amiri', serif; font-size: 28px; line-height: 2.2; color: var(--tx-encre-ar2);
  text-align: justify; margin: 16px 0 0; padding-top: 12px;
  background: linear-gradient(90deg, transparent, var(--or-fade), transparent) top / 100% 1px no-repeat;
}
body.gr-hide-arabic .tx p.tx-ar { display: none; }

/* --- Une phrase par ligne : traduction, puis arabe ---------------------- */
.tx-rows { margin: 0; }
.tx-row {
  position: relative; padding: 14px 4px 16px; scroll-margin-top: 140px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.32), transparent) bottom / 70% 1px no-repeat;
  transition: background-color .18s ease;
}
.tx-row:first-child { padding-top: 4px; }
.tx-row-end {
  background: linear-gradient(90deg, transparent, var(--or), transparent) bottom / 100% 1px no-repeat;
  padding-bottom: 18px; margin-bottom: 2px;
}
.tx-row:last-child { background: none; }
.tx-row:hover { background-color: rgba(212,175,55,.06); }
.tx .tx-row p.tx-tr { font-size: 22px; line-height: 1.7; text-align: justify; text-align-last: start; hyphens: auto; -webkit-hyphens: auto; }
.tx .tx-row p.tx-ar { font-size: 23px; line-height: 2; color: var(--tx-encre-ar2); text-align: justify; text-align-last: start; margin: 4px 0 0; padding-top: 0; background: none; }
.tx-row.tx-hit { background-color: rgba(139, 0, 0, .05); box-shadow: inset 3px 0 0 rgba(139, 0, 0, .45); }
.tx-row.is-flash { animation: tx-flash 1.6s ease; }
/* Référence discrète en tête de phrase (ancien système) */
.tx-row { display: block; }
.tx-row-head { line-height: 1; margin: 0 0 6px; text-align: start; }
.tx a.tx-ref {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 12.5px; letter-spacing: .06em;
  color: var(--rouge); text-decoration: none; border-bottom: 1px dotted var(--rouge); opacity: .85;
}
.tx a.tx-ref:hover { opacity: 1; background: rgba(139,0,0,.06); }
/* Boutons Note / Lectures, discrets, à côté de la référence (fenêtres js/notes.js, js/qiraat.js) */
.tx-row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tx-tools { display: inline-flex; align-items: center; gap: 6px; }
.tx .tx-tools .gr-note-btn, .tx .tx-tools .gr-qr-btn {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 10px;
  font-family: 'Lora', serif; font-size: 11.5px; line-height: 1; letter-spacing: .02em;
  border: 1px solid transparent; opacity: .75; transition: opacity .15s, background-color .15s, color .15s, border-color .15s;
}
.tx .tx-tools .gr-note-btn { color: #2f5d57; border-color: rgba(47,93,87,.35); }
.tx .tx-tools .gr-qr-btn { color: #8a6416; border-color: rgba(168,132,42,.45); }
.tx .tx-tools .gr-note-btn span, .tx .tx-tools .gr-qr-btn span { display: inline; }
.tx .tx-tools svg { width: 11px; height: 11px; flex: none; }
.tx .tx-tools .gr-note-count { min-width: 0; padding: 0 3px; font-size: 10px; margin-left: 1px; border-radius: 6px; }
.tx .tx-tools .gr-qr-btn .gr-note-count { background: #a8842a; color: #fff; }
.tx .tx-tools .gr-note-btn:hover, .tx .tx-tools .gr-note-btn:focus-visible { opacity: 1; background: #2f5d57; color: var(--parchemin); border-color: #2f5d57; }
.tx .tx-tools .gr-qr-btn:hover, .tx .tx-tools .gr-qr-btn:focus-visible { opacity: 1; background: var(--or); color: #2b2118; border-color: var(--or); }
.tx .tx-tools .gr-note-btn:hover .gr-note-count { background: var(--parchemin); color: #2f5d57; }
.tx-row:hover .tx-tools .gr-note-btn, .tx-row:hover .tx-tools .gr-qr-btn { opacity: 1; }
.tx-row.tx-hit a.tx-ref { background: var(--rouge); color: #fff; border-bottom: 0; padding: 1px 6px; border-radius: 3px; opacity: 1; }
/* Arabe seul */
.tx .tx-row p.tx-ar.tx-ar-only { font-size: 30px; line-height: 2.15; color: var(--tx-encre-ar); margin: 0; }

/* --- Arabe seul : un bloc continu -------------------------------------- */
.tx-ar-flow {
  font-family: 'Amiri Quran', 'Amiri', serif; font-size: 31px; line-height: 2.4; color: var(--tx-encre-ar);
  text-align: justify; margin: 0;
}

/* --- Rosaces de fin de verset ------------------------------------------ */
.tx-num {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 1.5em; height: 1.5em; margin: 0 .12em; background: var(--tx-rosace) no-repeat center / contain;
  text-decoration: none; position: relative; top: -.06em;
}
.tx-num span {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: .44em; line-height: 1; color: var(--rouge);
  direction: ltr; unicode-bidi: isolate; letter-spacing: -.02em;
}
.tx-num-tr { width: 1.42em; height: 1.42em; opacity: .88; top: -.1em; }
.tx-num-wide {
  width: auto; min-width: 2.6em; height: 1.4em; padding: 0 .5em; background: #fff8e6;
  border: 1px solid #b8922e; border-radius: 1em; box-shadow: inset 0 0 0 2px #fff8e6, inset 0 0 0 2.6px rgba(139,0,0,.45);
}
.tx-num-wide span, .tx-num-tr.tx-num-wide span { font-size: .5em; letter-spacing: 0; }
.tx-num-tr.tx-num-wide { height: 1.3em; min-width: 2.5em; }
.tx-num-ar.tx-num-wide { height: 1.15em; min-width: 2.2em; padding: 0 .4em; }
.tx-num-ar.tx-num-wide span { font-size: .4em; }
.tx-num:hover, .tx-num:focus-visible { filter: drop-shadow(0 0 3px rgba(212,175,55,.8)); outline: none; text-decoration: none; }

/* --- Phrases : correspondance au survol, phrase recherchée ------------- */
.tx-ph, .tx-ph-ar { border-radius: 3px; transition: background-color .18s ease, box-shadow .18s ease; scroll-margin-top: 140px; }
.tx-ph.is-on, .tx-ph-ar.is-on { background: rgba(212, 175, 55, .16); box-shadow: 0 0 0 2px rgba(212, 175, 55, .16); }
.tx-hit, .tx-ph.tx-hit, .tx-ph-ar.tx-hit { background: rgba(139, 0, 0, .07); box-shadow: inset 0 -2px 0 rgba(139, 0, 0, .35); }

/* --- Notes et lectures : signes discrets en exposant -------------------- */
.tx-marks { display: inline; white-space: nowrap; }
.tx-nw { white-space: nowrap; }
.tx .gr-note-btn, .tx .gr-qr-btn {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; vertical-align: super;
  width: 17px; height: 17px; margin: 0 1px; border-radius: 50%;
  color: var(--tx-or-fonce); opacity: .8; transition: opacity .15s, color .15s, background-color .15s;
}
.tx .gr-note-btn span, .tx .gr-qr-btn span { display: none; }
.tx .gr-note-btn svg, .tx .gr-qr-btn svg { width: 12px; height: 12px; }
.tx .gr-note-btn:hover, .tx .gr-note-btn:focus-visible { opacity: 1; color: var(--parchemin); background: #2f6b5e; }
.tx .gr-qr-btn:hover, .tx .gr-qr-btn:focus-visible { opacity: 1; color: #2b2118; background: var(--or); }
.tx-ar-flow .gr-qr-btn, .tx-ar .gr-qr-btn { vertical-align: top; }

/* --- Appels de note à la manière des livres ---------------------------- */
.tx .gr-note-btn.tx-call, .tx .gr-qr-btn.tx-call {
  width: auto; height: auto; min-width: 0; padding: 0 1px; margin: 0 1px 0 0; border-radius: 3px;
  vertical-align: super; line-height: 1; opacity: 1;
}
.tx .tx-call svg, .tx .tx-call > span { display: none; }
.tx .tx-call-l { font-style: normal; font-family: 'Lora', Georgia, serif; font-size: .68em; font-weight: 700; letter-spacing: .01em; }
.tx .tx-call-n { color: #2f6b5e; }
.tx .tx-call-q { color: #9a6b12; }
.tx .tx-call-q .tx-call-l { font-style: italic; }
.tx-ar-flow .tx-call-q .tx-call-l, .tx-ar .tx-call-q .tx-call-l { font-family: 'Amiri', serif; font-style: normal; font-weight: 700; font-size: .72em; }
.tx-app[dir="rtl"] .tx-app-item summary { font-family: 'Amiri', serif; font-size: 18px; }
.tx-ar-flow .gr-qr-btn.tx-call, .tx-ar .gr-qr-btn.tx-call { vertical-align: super; }
.tx .tx-call-n:hover, .tx .tx-call-n:focus-visible { color: var(--parchemin); background: #2f6b5e; }
.tx .tx-call-q:hover, .tx .tx-call-q:focus-visible { color: #2b2118; background: var(--or); }
.tx .tx-call:focus-visible { outline: 2px solid var(--or); outline-offset: 1px; }

/* --- Bas de page : notes et lectures ----------------------------------- */
.tx-app { margin-top: 34px; }
.tx-app .tx-rule { margin-bottom: 18px; }
.tx-app-h { margin: 22px 0 10px; font-family: 'Cinzel', serif; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tx-or-fonce); text-align: center; }
.tx-app-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(212,175,55,.35); }
.tx-app-item { border-bottom: 1px solid rgba(212,175,55,.25); scroll-margin-top: 140px; border-radius: 3px; }
.tx-app-item.is-flash, .tx-ph.is-flash, .tx-ph-ar.is-flash { animation: tx-flash 1.6s ease; }
@keyframes tx-flash { 0%, 30% { background: rgba(212,175,55,.28); } 100% { background: transparent; } }
.tx-app-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 4px; font-family: 'Lora', serif; font-size: 15px; line-height: 1.5; color: var(--texte, #2b2118);
}
.tx-app-item summary::-webkit-details-marker { display: none; }
.tx-app-item summary::after { content: '+'; margin-inline-start: auto; font-family: 'Cinzel', serif; color: var(--tx-or-fonce); }
.tx-app-item details[open] > summary::after { content: '−'; }
.tx-app-item summary:hover { background: rgba(212,175,55,.08); }
.tx-app-back { flex: none; min-width: 2.2em; font-weight: 700; text-decoration: none; }
.tx-app-n .tx-app-back { color: #2f6b5e; }
.tx-app-q .tx-app-back { color: #9a6b12; font-style: italic; }
.tx-app-back:hover { text-decoration: underline; }
.tx-app-ref { flex: none; font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .06em; color: #8a6a2f; }
.tx-app-head { flex: 1 1 260px; }
.tx-app-mot { font-family: 'Amiri', serif; font-size: 20px; color: var(--rouge, #8b0000); }
.tx-app-rendu { font-style: italic; }
.tx-app-dot { color: #b8a06a; }
.tx-app-rd { font-size: 14px; color: #6b5a3e; }
.tx-app-body { padding: 4px 4px 18px calc(2.2em + 14px); display: flex; flex-direction: column; gap: 14px; text-align: start; }
.tx-app[dir="rtl"] .tx-app-body { padding: 4px calc(2.2em + 14px) 18px 4px; }
.tx-app-body .gr-note-sec h4 { margin: 0 0 6px; font-family: 'Cinzel', serif; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #2f6b5e; }
.tx-app-body .gr-note-txt p { text-align: justify; }
.tx-app-body .gr-qr-ms img { max-width: 100%; height: auto; border: 1px solid rgba(212,175,55,.4); }

/* --- Petits écrans ------------------------------------------------------ */
@media (max-width: 760px) {
  .tx-frame { padding: 34px 26px 36px; }
  .tx p.tx-tr { font-size: 19px; line-height: 1.8; }
  .tx p.tx-ar { font-size: 24px; }
  .tx-ar-flow { font-size: 26px; line-height: 2.3; }
  .tx .tx-row p.tx-ar.tx-ar-only { font-size: 26px; }
  .tx .tx-row p.tx-tr { font-size: 19px; }
  .tx .tx-row p.tx-ar { font-size: 21px; }
  .tx p.tx-basmala-ar { font-size: 42px; }
}
@media (max-width: 480px) {
  .tx .tx-row p.tx-tr, .tx .tx-row p.tx-ar { text-align: start; }
  .tx { margin-left: -6px; margin-right: -6px; }
  .tx-frame { padding: 28px 16px 30px; margin: 5px; }
  .tx-corner { width: 32px; height: 32px; }
  .tx p.tx-tr { font-size: 18px; }
  .tx p.tx-ar { font-size: 23px; }
  .tx-ar-flow { font-size: 24px; }
  .tx .gr-note-btn, .tx .gr-qr-btn { width: 22px; height: 22px; }
  .tx .gr-note-btn.tx-call, .tx .gr-qr-btn.tx-call { width: auto; height: auto; padding: 0 3px; }
  .tx-app-body { padding: 4px 2px 16px; }
  .tx-app[dir="rtl"] .tx-app-body { padding: 4px 2px 16px; }
}

@media print {
  .tx-frame { box-shadow: none; }
  .tx-marks { display: none; }
  .tx-app { display: none; }
}

/* ==========================================================================
   Page de dédicace (dedicace.php) — même cadre que la page du texte
   ========================================================================== */
.dd { margin: 26px 0 8px; }
.dd-frame { padding: 52px 64px 56px; text-align: center; }
.dd-aya { margin: 0 auto; max-width: 760px; }
.dd blockquote.dd-aya-ar {
  font-family: 'Amiri Quran', 'Amiri', serif; font-size: 34px; line-height: 2.2; color: var(--rouge);
  margin: 0; padding: 0; border: 0; text-align: center; background: none;
}
.dd p.dd-aya-tr {
  font-family: 'Lora', serif; font-style: italic; font-size: 19px; line-height: 1.7; color: #5a4632;
  margin: 12px auto 0; max-width: 640px; text-align: center;
}
.dd-aya-ref { margin-top: 10px; font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.dd-aya-ref a { color: var(--tx-or-fonce); text-decoration: none; }
.dd-aya-ref a:hover { color: var(--rouge); }
.dd-dedicace { margin: 30px 0 6px; }
.dd p.dd-kicker { font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: #7a6448; margin: 0 0 10px; text-align: center; }
.dd[dir="rtl"] p.dd-kicker { font-family: 'Amiri', serif; font-size: 22px; letter-spacing: 0; text-transform: none; }
.dd p.dd-name { font-family: 'Amiri', serif; font-weight: 700; font-size: 44px; line-height: 1.6; color: var(--rouge); margin: 0; text-align: center; }
.dd p.dd-name-lat { font-family: 'Lora', serif; font-style: italic; font-size: 18px; color: #5a4632; margin: 2px 0 0; text-align: center; }
.dd-mot { max-width: 680px; margin: 0 auto; }
.dd-mot p { font-family: 'Lora', serif; font-size: 19px; line-height: 1.85; color: var(--tx-encre); text-align: justify; hyphens: auto; margin: 0 0 16px; }
.dd[dir="rtl"] .dd-mot p { font-family: 'Amiri', serif; font-size: 23px; line-height: 2; }
.dd .dd-mot p.dd-last { text-align: center; font-style: italic; color: var(--rouge); margin-top: 22px; }
.dd .dd-mot p.dd-sign { text-align: center; font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .14em; color: var(--tx-or-fonce); margin-top: 26px; }
@media (max-width: 760px) {
  .dd-frame { padding: 36px 24px 40px; }
  .dd blockquote.dd-aya-ar { font-size: 27px; }
  .dd p.dd-name { font-size: 34px; }
}
@media (max-width: 480px) {
  .dd-frame { padding: 30px 16px 32px; }
  .dd-mot p { font-size: 17.5px; }
}
.dd[dir="rtl"] .dd-mot p.dd-last { font-style: normal; }
.dd p.dd-rahimahu { font-family: 'Amiri', serif; font-size: 22px; line-height: 1.4; color: var(--tx-or-fonce); margin: -4px 0 4px; text-align: center; }
.dd-mot span[lang="ar"] { font-family: 'Amiri', serif; font-size: 1.1em; }
.dd-aya-end { margin-top: 10px; }
.tx a.tx-ref { direction: ltr; unicode-bidi: isolate; }