/* ==========================================================================
   TABLE DES SOURATES — page d'accueil (soura.php), thème zellige de Fès
   Chaque sourate est un carreau : médaillon à huit pointes, nom arabe,
   translittération, nom de lecture, nombre de versets. Palette de la charte :
   carmin, or, vert, cobalt, ivoire. Ornements : img/zellige/.
   ========================================================================== */
.lect-page.lect-sour { padding-top: 26px; }
.sx { --sx-carmin: #7a0a0a; --sx-or: #b8902c; --sx-or-clair: #d9b75a; --sx-vert: #1f6b4f; --sx-cobalt: #1d4e89;
      --sx-ivoire: #fbf7ee; --sx-encre: #2b1e0e; --sx-sepia: #6b5a3e; }

/* --- En-tête : titre, filet de zellige, recherche ------------------------- */
.sx-head { text-align: center; margin: 0 auto 22px; max-width: 760px; }
.sx-title { font-family: 'Cinzel', serif; font-weight: 700; color: var(--sx-carmin); font-size: 32px; letter-spacing: .12em; margin: 0; }
.sx-sub { font-family: 'Lora', serif; font-style: italic; color: var(--sx-sepia); margin: 6px 0 14px; font-size: 15px; }
.sx-sub::after { content: ""; display: block; height: 16px; margin: 14px auto 0; max-width: 560px;
  background: var(--zl-filet, none) center / auto 16px repeat-x; opacity: .9; }
.sx-search { margin: 16px auto 0; max-width: 520px; position: relative; }
.sx-input { width: 100%; box-sizing: border-box; padding: 11px 18px 11px 42px; border-radius: 999px; font: 15px 'Lora', serif;
  color: var(--sx-encre); background: #fffdf7; border: 1px solid rgba(184,144,44,.55); outline: none;
  box-shadow: inset 0 0 0 3px #fffdf7, inset 0 0 0 4px rgba(184,144,44,.18); }
.sx-input:focus { border-color: var(--sx-carmin); box-shadow: inset 0 0 0 3px #fffdf7, inset 0 0 0 4px rgba(122,10,10,.25); }
.sx-search::before { content: ""; position: absolute; left: 15px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background: var(--zl-puce, none) center / contain no-repeat; }
[dir="rtl"] .sx-input { padding: 11px 42px 11px 18px; }
[dir="rtl"] .sx-search::before { left: auto; right: 15px; }

/* --- La mosaïque --------------------------------------------------------- */
.sx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.sx-card { position: relative; display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 14px;
  padding: 14px 16px 14px 12px; text-decoration: none !important; color: var(--sx-encre); background: #fffdf7;
  border: 1px solid rgba(184,144,44,.38); border-radius: 3px; overflow: hidden; isolation: isolate;
  box-shadow: inset 0 0 0 4px #fffdf7, inset 0 0 0 5px rgba(184,144,44,.22);
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease; }
.sx-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; }
.sx-card::after { content: ""; position: absolute; top: 7px; right: 7px; width: 10px; height: 10px; opacity: .8;
  background: var(--zl-puce, none) center / contain no-repeat; }
[dir="rtl"] .sx-card::after { right: auto; left: 7px; }
.sx-card:hover, .sx-card:focus-visible { transform: translateY(-2px); border-color: var(--sx-carmin);
  box-shadow: inset 0 0 0 4px #fffdf7, inset 0 0 0 5px rgba(122,10,10,.28), 0 8px 18px rgba(90,40,10,.12); }
.sx-card:hover::before, .sx-card:focus-visible::before { opacity: .22; }
.sx-card[hidden] { display: none; }

.sx-med { position: relative; width: 58px; height: 58px; display: grid; place-items: center; }
.sx-med::before { content: ""; position: absolute; inset: 0; background: url("../img/zellige/zl_medaille8.svg") center / contain no-repeat;
  transition: transform .45s ease; }
.sx-card:hover .sx-med::before { transform: rotate(22.5deg); }
.sx-med span { position: relative; font-family: 'Cinzel', serif; font-weight: 700; font-size: 16px; color: var(--sx-carmin); line-height: 1; }

.sx-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sx-ar { font-family: 'Amiri', serif; font-size: 25px; line-height: 1.25; color: #4a0606; }
.sx-tr { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8a6a1e; }
.sx-rd { font-family: 'Lora', serif; font-style: italic; font-size: 14.5px; line-height: 1.4; color: #3d2f14; margin-top: 3px; }
.sx-nv { font-family: 'Lora', serif; font-size: 11.5px; color: #8a7650; margin-top: 4px; }
.sx[dir="ltr"] .sx-ar { text-align: left; }
.sx[dir="rtl"] .sx-rd, .sx[dir="rtl"] .sx-nv, .sx[dir="rtl"] .sx-sub, .sx[dir="rtl"] .sx-input { font-family: 'Amiri', serif; font-style: normal; }
.sx[dir="rtl"] .sx-rd { font-size: 17px; }
.sx[dir="rtl"] .sx-title { font-family: 'Amiri', serif; letter-spacing: 0; font-size: 36px; }
.sx-none { text-align: center; font-style: italic; color: var(--sx-sepia); margin: 18px 0; }

/* Les carreaux alternent discrètement leur liseré : or, vert, cobalt, comme un panneau de zellige */
.sx-card:nth-child(3n+2) { border-top: 2px solid rgba(31,107,79,.45); }
.sx-card:nth-child(3n+3) { border-top: 2px solid rgba(29,78,137,.40); }
.sx-card:nth-child(3n+1) { border-top: 2px solid rgba(184,144,44,.70); }

@media (max-width: 560px) {
  .sx-title { font-size: 26px; }
  .sx-grid { grid-template-columns: 1fr; gap: 10px; }
  .sx-card { grid-template-columns: 52px 1fr; padding: 12px 14px 12px 10px; }
  .sx-med { width: 50px; height: 50px; }
  .sx-ar { font-size: 22px; }
}
@media print { .sx-card::before, .sx-card::after, .sx-sub::after, .sx-search { display: none; } .sx-card { box-shadow: none; } }