/* ==========================================================================
   ZELLIGE DE FÈS — couche d'ornementation d'al-quran.fr (v1, 23/10/2026)
   Feuille chargée EN DERNIER, après charte.css et nav.css. Elle n'ajoute que
   de l'ornement (coins, liserés, séparateurs, médaillons, puces) par-dessus la
   charte ; elle ne change ni la typographie ni la mise en page du texte.
   Ornements : img/zellige/zl_*.svg, générés géométriquement (étoiles à 8 et
   à 12 branches, khatem entrelacé, rubans à double filet) — palette de la
   charte seule : carmin, or, vert, cobalt, ivoire. Aucun fond derrière le
   texte ; ornements allégés sous 720 px ; retirés à l'impression.
   ========================================================================== */

:root {
  --zl-puce:        url("../img/zellige/zl_puce8.svg");
  --zl-puce-vert:   url("../img/zellige/zl_puce8_vert.svg");
  --zl-puce-cobalt: url("../img/zellige/zl_puce8_cobalt.svg");
  --zl-khatem:      url("../img/zellige/zl_khatem.svg");
  --zl-etoile12:    url("../img/zellige/zl_etoile12.svg");
  --zl-coin:        url("../img/zellige/zl_coin.svg");
  --zl-sep:         url("../img/zellige/zl_separateur.svg");
  --zl-filet:       url("../img/zellige/zl_filet.svg");
  --zl-filet-v:     url("../img/zellige/zl_filet_v.svg");
  --zl-entrelacs:   url("../img/zellige/zl_entrelacs.svg");
  --zl-cadre:       url("../img/zellige/zl_cadre.svg");
  --zl-coin-t: 84px;          /* taille des coins du feuillet */
}

/* ==========================================================================
   1. Le feuillet : liseré de khatems entre les deux filets, coins entrelacés
   ========================================================================== */
.frame-outer { inset: 7px; }
.frame-inner { inset: 20px; }
/* Liseré : chaîne d'étoiles à 8 et de losanges, dans l'entre-deux-filets */
.page::before {
  content: ""; position: absolute; inset: 11px; z-index: 0; pointer-events: none;
  border: 8px solid transparent;
  border-image: var(--zl-cadre) 10 / 8px round;
  opacity: .9;
}
/* Coins : khatem au sommet de l'angle, deux bras de ruban le long des filets.
   frame-outer porte les coins hauts, frame-inner les coins bas. */
.frame-outer::before, .frame-outer::after,
.frame-inner::before, .frame-inner::after {
  content: ""; position: absolute; z-index: 1;
  width: var(--zl-coin-t); height: var(--zl-coin-t);
  background: var(--zl-coin) left top / contain no-repeat;
  top: auto; right: auto; bottom: auto; left: auto;
}
.frame-outer::before { top: -6px; left: -6px; }
.frame-outer::after  { top: -6px; right: -6px; transform: scaleX(-1); }
.frame-inner::before { bottom: -17px; left: -17px; transform: scaleY(-1); }
.frame-inner::after  { bottom: -17px; right: -17px; transform: scale(-1, -1); }

/* ==========================================================================
   2. Frise de zellige (bandeau sous le titre de chaque page) :
      médaillons à 12 branches en bout de frise
   ========================================================================== */
.zellij-band { position: relative; overflow: visible; }
.zellij-band::before, .zellij-band::after {
  content: ""; position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px;
  background: var(--zl-etoile12) center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(35,28,20,.25));
}
.zellij-band::before { left: -23px; }
.zellij-band::after  { right: -23px; }

/* Sous-titre de page (cartouche carmin) : deux petites étoiles d'or */
.page-subtitle { position: relative; }
.page-subtitle::before, .page-subtitle::after {
  content: ""; display: inline-block; width: 9px; height: 9px; vertical-align: 1px;
  background: var(--zl-puce) center / contain no-repeat;
}
.page-subtitle::before { margin-inline-end: 12px; }
.page-subtitle::after  { margin-inline-start: 12px; }

/* ==========================================================================
   3. Séparateurs : étoile à 12 au centre, khatems, filets effilés
   ========================================================================== */
.ch-sep {
  height: 40px; margin: var(--ch-6) auto; max-width: 480px;
  background: var(--zl-sep) center / contain no-repeat;
}
.ch-sep::before, .ch-sep::after, .ch-sep > span { display: none; }

.tx-rule, .tx-sep {
  height: 34px; max-width: 400px;
  background: var(--zl-sep) center / contain no-repeat;
}
.tx-rule::before, .tx-rule::after, .tx-sep::before, .tx-sep::after { display: none; }
.tx-rule span, .tx-sep span { visibility: hidden; }
.tx-sep { max-width: 300px; height: 26px; }

.page-content hr {
  border: 0; height: 32px; max-width: 420px; margin: var(--ch-6) auto;
  background: var(--zl-sep) center / contain no-repeat; opacity: 1;
}

/* En-tête d'une fiche, d'un billet, d'une étude : séparateur sous le titre */
.page-content .lect-read-head .lect-read-meta { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.lect-read-head::after {
  content: ""; display: block; height: 32px; max-width: 420px; margin: var(--ch-4) auto 0;
  background: var(--zl-sep) center / contain no-repeat;
}

/* ==========================================================================
   4. Titres
   ========================================================================== */
/* h2 de section : la ligne d'or devient une chaîne de khatems qui s'efface */
/* (préfixe .page-content : lecture.css est rechargé après cette feuille sur les pages de l'Atelier) */
.page-content .lect-sec-h::after, .page-content .ch-h2::after, .page-content .ac-doors-title::after {
  height: 9px;
  background: var(--zl-filet) left center / auto 9px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, #000 35%, transparent);
          mask-image: linear-gradient(90deg, #000 35%, transparent);
}
[dir="rtl"] .page-content .lect-sec-h::after, .page-content [dir="rtl"] .lect-sec-h::after,
[dir="rtl"] .page-content .ch-h2::after, .page-content [dir="rtl"] .ch-h2::after,
[dir="rtl"] .page-content .ac-doors-title::after, .page-content [dir="rtl"] .ac-doors-title::after {
  background: var(--zl-filet) right center / auto 9px repeat-x;
  -webkit-mask-image: linear-gradient(270deg, #000 35%, transparent);
          mask-image: linear-gradient(270deg, #000 35%, transparent);
}
.lect-sec-h::before, .ch-h2::before, .ac-doors-title::before { background-image: var(--zl-khatem); }

/* h2 des billets : le signe ۞ cède la place à l'étoile à 8 */
.ui-post .blog-post-body h2::before, .ui-post .blog-post-body h2::after {
  content: ""; display: inline-block; width: 11px; height: 11px; vertical-align: 1px;
  background: var(--zl-puce) center / contain no-repeat;
}

/* h3 et sous-titres : petite étoile en tête */
.blog-post-body h3::before, .lect-fiche-body h3::before, .et-body h3::before,
.dx-h::before, .ui-dv-sub::before {
  content: ""; display: inline-block; width: 10px; height: 10px; vertical-align: 1px;
  margin-inline-end: 8px; background: var(--zl-puce) center / contain no-repeat;
}

/* ==========================================================================
   5. Numéros de verset et de sourate
   ========================================================================== */
/* Tête de phrase (page de sourate) : étoile à 8 avant la référence */
.tx-row-head::before {
  content: ""; flex: 0 0 9px; width: 9px; height: 9px; margin-inline-end: -4px;
  background: var(--zl-puce) center / contain no-repeat;
}
/* Références de verset (recherche, diwan) : étoile à 8, soulignement en pointillé conservé */
a.ui-verse-ref {
  border-bottom: 0; text-decoration: underline dotted var(--ch-carmin);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
a.ui-verse-ref::before {
  content: ""; display: inline-block; width: 9px; height: 9px; vertical-align: 0;
  margin-inline-end: 6px; background: var(--zl-puce) center / contain no-repeat;
}
/* Médaillon de sourate : couronne d'étoile à 12 autour du disque carmin
   (masque circulaire : le numéro reste sur fond plein) */
.sura-medallion { position: relative; flex-shrink: 0; }
.sura-medallion::before {
  content: ""; position: absolute; inset: -11px; pointer-events: none;
  background: var(--zl-etoile12) center / contain no-repeat;
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 82%, #000 83%);
          mask-image: radial-gradient(circle closest-side, transparent 82%, #000 83%);
}
.lect-sc-top { overflow: visible; }

/* ==========================================================================
   6. Cartes et encarts : médaillon d'étoile posé sur le filet du haut
   ========================================================================== */
.lect-rc, .lect-sc, .ch-card, .sura-card, .ac-card, .mt-principe, .lect-read-nav { position: relative; }
.lect-rc::after, .ch-card::after, .ac-card::after, .mt-principe::after {
  content: ""; position: absolute; top: -12px; left: 50%; width: 22px; height: 22px; margin-left: -11px;
  background: var(--zl-khatem) center / contain no-repeat; pointer-events: none; z-index: 2;
}
.ac-card::after { top: -11px; }
.lect-sc:not(.lect-rc)::after, .sura-card::after {
  content: ""; position: absolute; top: -7px; left: 50%; width: 13px; height: 13px; margin-left: -6.5px;
  background: var(--zl-puce) center / contain no-repeat; pointer-events: none;
}
/* Cartes à filet latéral (recherche, diwan) : étoile en tête du filet */
.list-group-item.ui-verse, .ui-dv-card { position: relative; }
.list-group-item.ui-verse::after, .ui-dv-card::after {
  content: ""; position: absolute; top: 12px; inset-inline-start: -8.5px; width: 13px; height: 13px;
  background: var(--zl-puce) center / contain no-repeat; pointer-events: none;
}

/* Encadrés (verdicts, postulats, conclusions, citations) : khatem à l'angle du filet */
.lect-verdict, .imp-postulat-box, .imp-verse-box, .imp-conclusion-box, .imp-verify-box,
.ui-dv-concl, .ui-dv-transmission, .mt-regard,
.page-content blockquote:not(.dd-aya-ar) { position: relative; }
.lect-verdict::after, .imp-postulat-box::after, .imp-verse-box::after, .imp-conclusion-box::after,
.imp-verify-box::after, .ui-dv-concl::after, .ui-dv-transmission::after, .mt-regard::after,
.page-content blockquote:not(.dd-aya-ar)::after {
  content: ""; position: absolute; top: -9px; inset-inline-start: -11px; width: 18px; height: 18px;
  background: var(--zl-khatem) center / contain no-repeat; pointer-events: none;
}
/* Citations libres : filet de chaîne verticale côté début de ligne */
.page-content blockquote:not([class]) {
  border: 0; border-inline-start: 0; margin-inline-start: 0;
  padding-inline-start: 26px;
  background: var(--zl-filet-v) left top / 10px auto repeat-y;
}
[dir="rtl"] .page-content blockquote:not([class]) { background-position: right top; }

/* Tableaux de la charte : double filet or */
.ch-table, .stats-table, .ui-dv-table {
  box-shadow: 0 0 0 3px var(--ch-ivoire), 0 0 0 4px var(--ch-or);
  margin-top: 6px; margin-bottom: 6px;
}
.ui-dv-table-wrap { padding: 5px; }

/* ==========================================================================
   7. Listes : puces en étoile à 8 (or, puis vert, puis cobalt)
   ========================================================================== */
.page-content ul:not([class]) > li,
.page-content ul.ui-dl-list > li,
.page-content ul.dx-dist > li { list-style-image: var(--zl-puce); }
.page-content ul ul:not([class]) > li { list-style-image: var(--zl-puce-vert); }
.page-content ul ul ul:not([class]) > li { list-style-image: var(--zl-puce-cobalt); }
.page-content ol:not([class]) > li::marker,
.page-content ol.dx-emplois > li::marker {
  color: var(--ch-carmin); font-family: var(--ch-titre); font-weight: 700;
}
/* Méthode de l'Atelier (ol.lect-method) et couches de la méthode : inchangées */

/* ==========================================================================
   8. Page d'accueil : bandeau
   ========================================================================== */
/* La basmala d'ouverture est tenue entre deux étoiles à 8 */
.ac-basmala::before, .ac-basmala::after {
  content: ""; display: inline-block; width: 10px; height: 10px; vertical-align: middle;
  background: var(--zl-puce-vert) center / contain no-repeat; margin: 0 12px;
}
/* Sous la recherche rapide : ruban entrelacé effilé, qui annonce les portes */
.ac-quick::after {
  content: ""; flex: 1 0 100%; height: 20px; margin-top: var(--ch-5);
  background: var(--zl-entrelacs) center / auto 20px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}

/* ==========================================================================
   9. Mobile : ornements allégés
   ========================================================================== */
@media (max-width: 720px) {
  :root { --zl-coin-t: 50px; }
  .frame-outer { inset: 5px; }
  .frame-inner { inset: 11px; }
  .page::before { display: none; }                 /* pas de liseré : trop fin à 390 px */
  .frame-outer::before { top: -6px; left: -6px; }
  .frame-outer::after  { top: -6px; right: -6px; }
  .frame-inner::before { bottom: -10px; left: -10px; }
  .frame-inner::after  { bottom: -10px; right: -10px; }
  .zellij-band::before, .zellij-band::after { width: 30px; height: 30px; margin-top: -15px; }
  .zellij-band::before { left: -10px; }
  .zellij-band::after  { right: -10px; }
  .page-subtitle::before, .page-subtitle::after { display: none; }
  .ch-sep { height: 30px; max-width: 300px; margin: var(--ch-5) auto; }
  .tx-rule { height: 26px; max-width: 280px; }
  .page-content hr, .lect-read-head::after { height: 24px; max-width: 300px; }
  .lect-rc::after, .ch-card::after, .ac-card::after, .mt-principe::after { width: 18px; height: 18px; margin-left: -9px; top: -10px; }
  .sura-medallion::before { inset: -9px; }
  .ac-basmala::before, .ac-basmala::after { margin: 0 8px; }
  .ac-quick::after { height: 16px; background-size: auto 16px; }
}

/* ==========================================================================
   10. Impression : ornements retirés, filets simples conservés
   ========================================================================== */
@media print {
  .page::before,
  .frame-outer::before, .frame-outer::after, .frame-inner::before, .frame-inner::after,
  .zellij-band::before, .zellij-band::after,
  .page-subtitle::before, .page-subtitle::after,
  .lect-read-head::after, .tx-row-head::before, a.ui-verse-ref::before,
  .sura-medallion::before,
  .lect-rc::after, .lect-sc::after, .ch-card::after, .sura-card::after, .ac-card::after, .mt-principe::after,
  .list-group-item.ui-verse::after, .ui-dv-card::after,
  .lect-verdict::after, .imp-postulat-box::after, .imp-verse-box::after, .imp-conclusion-box::after,
  .imp-verify-box::after, .ui-dv-concl::after, .ui-dv-transmission::after, .mt-regard::after,
  .page-content blockquote::after,
  .ac-basmala::before, .ac-basmala::after, .ac-quick::after,
  .blog-post-body h3::before, .lect-fiche-body h3::before, .et-body h3::before, .dx-h::before, .ui-dv-sub::before {
    display: none !important;
  }
  .ch-sep, .tx-rule, .tx-sep, .page-content hr {
    background: linear-gradient(90deg, transparent, #999, transparent) center / 100% 1px no-repeat;
  }
  .page-content .lect-sec-h::after, .page-content .ch-h2::after, .page-content .ac-doors-title::after,
  .page-content [dir="rtl"] .lect-sec-h::after, [dir="rtl"] .page-content .lect-sec-h::after {
    background: #999; height: 1px; -webkit-mask-image: none; mask-image: none;
  }
  .page-content blockquote:not([class]) { background: none; border-inline-start: 2px solid #999; }
  .page-content ul:not([class]) > li, .page-content ul.ui-dl-list > li, .page-content ul.dx-dist > li { list-style-image: none; }
  .ch-table, .stats-table, .ui-dv-table { box-shadow: none; }
}