/* Ce qui est propre à « Comprendre le Coran », par-dessus socle.css : les versets en grand, leur sens juste dessous, le mot à mot,
   et les liens dans le texte. L'arabe en Noto Naskh Arabic, toujours avec lang="ar". */

/* un verset (ou un mot seul) en grand, centré */
#comprendre .verset { margin:8px 0 22px; text-align:center; font:400 40px/1.9 'Noto Naskh Arabic',serif; color:#211c1a; }
/* le sens d'un verset : on le colle à l'arabe qui le précède (marge du haut négative) */
#comprendre .verset-sens { margin:-14px 0 28px; text-align:center; font-size:17px; line-height:1.5; font-style:italic; color:var(--sourd); }

/* le mot à mot : chaque mot arabe dans une case, son sens dessous. La liste porte dir="rtl" : les cases se rangent de droite à
   gauche, dans l'ordre de lecture du verset. */
#comprendre .mot-a-mot { list-style:none; margin:6px 0 26px; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
#comprendre .mot-a-mot li { display:flex; flex-direction:column; align-items:center; min-width:96px; padding:8px 14px 12px;
  background:var(--carte); border:1.5px solid var(--bord); border-radius:14px; }
#comprendre .mot-a-mot .ar { font-size:30px; line-height:1.7; color:#211c1a; }
#comprendre .mot-a-mot .sens { font-size:15px; line-height:1.35; color:var(--sourd); text-align:center; }

/* les liens dans le texte (vers l'Alphabet, vers Apprendre à lire) : la couleur des titres, soulignés d'or */
#comprendre .corps p a { color:var(--titre); text-decoration:underline; text-decoration-color:var(--or); text-decoration-thickness:1.5px; text-underline-offset:4px; }
#comprendre .corps p a:hover { color:var(--or-fonce); }

@media (max-width:700px) {
  #comprendre .verset { font-size:32px; }
  #comprendre .mot-a-mot li { min-width:0; padding:6px 12px 10px; }
  #comprendre .mot-a-mot .ar { font-size:26px; }
}