:root {
  --fond: #ffffff;
  --panneau: #f3f4f6;
  --texte: #1a1a1a;
  --sourd: #6b7280;
  --accent: #0f766e;
  --marque: #fde68a;
  --bord: #e5e7eb;
  --ar: "Noto Naskh Arabic", "Amiri", "Scheherazade New", "Geeza Pro", serif;
}
* { box-sizing: border-box; }
html { background: var(--fond); }
body {
  margin: 0; color: var(--texte); background: var(--fond);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 820px; margin: 0 auto; padding: 0 16px 60px; }
.haut {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 820px; margin: 0 auto; padding: 12px 16px;
}
.haut .marque { font-family: var(--ar); font-size: 1.6rem; text-decoration: none; color: var(--accent); font-weight: 700; }
.haut nav a { margin-left: 14px; color: var(--sourd); text-decoration: none; font-size: .95rem; }
.haut nav a:hover { color: var(--texte); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; margin-top: .4em; }
h3 { font-size: 1rem; color: var(--sourd); margin-top: 1.4em; }
.carte { background: var(--panneau); border-radius: 14px; padding: 20px; margin: 16px 0; }
.carte.etroite { max-width: 420px; margin: 60px auto; }
.entete { padding: 8px 0 0; }
.entete .fil { display: flex; justify-content: space-between; gap: 12px; color: var(--sourd); font-size: .9rem; }
.entete .fil a { color: var(--accent); text-decoration: none; }
.entete audio { width: 100%; margin-top: 8px; }
.note { color: var(--sourd); font-size: .9rem; }
.erreur { color: #b91c1c; }
.ar { font-family: var(--ar); direction: rtl; }
h1.ar { font-size: 2rem; text-align: right; margin: 8px 0; }

/* le texte à cliquer */
.outils { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.texte { direction: rtl; font-family: var(--ar); font-size: 1.75rem; line-height: 2.3; text-align: right; }
.texte p { margin: 0 0 1em; }
.texte .m { cursor: pointer; border-radius: 4px; padding: 0 2px; transition: background .12s; -webkit-user-select: none; user-select: none; }
.texte .m:hover { background: #e5e7eb; }
.texte .m.marque { background: var(--marque); }
.texte .n, body.sans-voyelles .texte .v { display: none; }
body.sans-voyelles .texte .n { display: inline; }
.marques { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 18px; }
.marques li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; border-bottom: 1px solid var(--bord); padding: 4px 0; }
.marques .ar { font-size: 1.3rem; }
.marques .trad { color: var(--sourd); font-size: .92rem; text-align: left; }

.prose { line-height: 1.6; }
.prose p, .prose li { margin: .4em 0; }
.prose h1, .prose h2, .prose h3 { font-size: 1rem; margin-top: 1.2em; }
.prose code { font-family: var(--ar); font-size: 1.15em; background: #fff; padding: 0 4px; border-radius: 3px; }
.questions { font-size: 1.4rem; line-height: 2; padding-right: 1.4em; }
.questions details { font-size: 1.1rem; color: var(--sourd); }
.questions summary { cursor: pointer; color: var(--accent); }

button, .bouton {
  display: inline-block; background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: 9px 16px; font-size: .95rem; cursor: pointer; text-decoration: none;
}
button:hover, .bouton:hover { filter: brightness(1.1); }
#voyelles { background: #fff; color: var(--texte); border: 1px solid var(--bord); }
label { display: block; margin: 10px 0; font-size: .92rem; color: var(--sourd); }
input[type=text], input[type=password], textarea {
  display: block; width: 100%; margin-top: 4px; padding: 10px; font: inherit; color: var(--texte);
  border: 1px solid var(--bord); border-radius: 8px; background: #fff;
}
textarea.ar { font-size: 1.4rem; line-height: 1.9; }
form button { margin-top: 10px; }

.liste { list-style: none; padding: 0; margin: 0; }
.liste li { padding: 10px 0; border-bottom: 1px solid var(--bord); }
.liste a { text-decoration: none; color: var(--texte); font-size: 1.2rem; }
.liste .num { color: var(--accent); font-weight: 600; margin-right: 8px; }
.liste .note { display: block; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--bord); font-size: .95rem; }
td.ar { font-size: 1.3rem; text-align: right; }

@media (max-width: 600px) {
  .texte { font-size: 1.55rem; line-height: 2.2; }
  .carte { padding: 16px; border-radius: 12px; }
  h1.ar { font-size: 1.7rem; }
}