/**
 * mam.css — Sprint 2 · Styles du mode Mot-à-Mot (MaM)
 *
 * Intègre les variables de variables.css (--primary, --surface, etc.)
 * et les tokens de la police indopak existante.
 *
 * Conventions :
 *   .page-mam           Conteneur de page
 *   .ligne-mam          Conteneur de ligne (flex RTL)
 *   .mot-wrapper        Colonne : annot-top / mot / annot-bot
 *   .mot-mam            Texte arabe du mot
 *   .ayah-marker        Numéro de verset (non interactif)
 *   .mot-annot-bot      Zone annotation sous le mot
 *   .ligne-surah-name   Ligne de nom de sourate
 *   .ligne-bismillah    Ligne de Basmala
 */

/* LOT 52 (T322) : SOURCE UNIQUE des couleurs des bulles (infobulle du mot, bulle de l'écoute) et du
   surlignage d'écoute, construite sur les couleurs de thème BeerCSS : suit le thème clair / sombre.
   Déclarées aussi sur body : BeerCSS y pose le thème sombre (body.dark), les var() y sont donc réévaluées. */
:root, body {
  --bulle-fond: var(--inverse-surface);
  --bulle-texte: var(--inverse-on-surface);
  --bulle-bord: color-mix(in srgb, var(--inverse-on-surface) 18%, transparent);
  --bulle-ombre: 0 4px 14px rgb(0 0 0 / 0.35);
  --surlignage-verset: color-mix(in srgb, var(--primary) 8%, transparent);
  --surlignage-mot: color-mix(in srgb, var(--primary) 20%, transparent);
}
/* Sur fond sombre, la même teinte se voit moins : un peu plus marquée (toujours légère) */
body.dark {
  --surlignage-verset: color-mix(in srgb, var(--primary) 14%, transparent);
  --surlignage-mot: color-mix(in srgb, var(--primary) 30%, transparent);
}

/* ── VARIABLES LOCALES MaM ─────────────────────────────────────────────────── */
/* `body` en plus de `:root` : les couleurs de thème BeerCSS sont (re)définies sur body.light / body.dark ;
   calculées sur :root seul, les --mam-* restaient figées sur une palette (traduction des annotations en
   gris clair rgb(195,199,207) sur fond blanc en thème clair : contraste 1,7:1). */
:root, body {
  --mam-font-size:        1.7em;    /* Taille de base du texte indopak */
  --mam-font-size-mobile: 1.35em;
  --mam-line-height:      2.2;
  --mam-word-gap:         0.12em;   /* Espace horizontal entre mots */
  --mam-annot-size:       0.42em;   /* Taille des annotations sous les mots */
  --mam-annot-gap:        2px;      /* Espace entre chips d'annotation */
  --mam-surah-name-size:  2em;      /* aligné sur le titre de sourate du mode verset */
  --mam-bismillah-size:   1.4em;
  --mam-marker-size:      1.45;     /* × taille du texte (LOT 24 : 1,1 → LOT 29 : chiffres ~5 px illisibles sur mobile) */
  --mam-border-color:     var(--outline-variant);
  --mam-bg:               var(--surface-container-lowest);
  --mam-hover-color:      var(--primary);
  --mam-annot-color:      var(--outline);
  --mam-annot-trad-color: var(--on-surface-variant);
  --mam-annot-root-color: var(--tertiary);
  --mam-annot-pos-color:  var(--secondary);
  --mam-qiraat-bg:        var(--tertiary-container);
  --mam-qiraat-color:     var(--on-tertiary-container);
  --mam-marker-color:     #a27400;   /* doré, comme .rondAyat du mode verset */
  --mam-transition:       0.12s ease;
}

/* ── CONTENEUR DE PAGE ─────────────────────────────────────────────────────── */

#tableContainer:has(#pageMam) {
  /* Le conteneur parent adapte son comportement si MaM est actif */
  padding-block: 10px;
}

#pageMam {
  direction: rtl;
  font-family: var(--font_family_versets, 'Al Quran Indopak Compressed', serif);
  width: 90%;
  max-width: var(--largeurTableau_max, 500px);
  margin: 0 auto;
  background-color: var(--surface-container-lowest, #ffffff);
  border: double 3px tan;
  padding: 15px 18px;
  box-sizing: border-box;
  position: relative;
  /* contain: content retiré car il inclut paint, ce qui coupe les tooltips qui dépassent */
  contain: layout;
  /* LOT C : plus de min-height fixe ni d'overflow-x (format de page : voir fin du fichier) */
  /* Retiré overflow-y: hidden pour ne pas couper les tooltips */
}

/* Couleur du texte dynamique selon le thème clair / sombre */
#pageMam .mot-mam {
  color: var(--on-background, #1a1c1e);
}

/* ── LIGNE GÉNÉRIQUE ───────────────────────────────────────────────────────── */

.ligne-mam {
  display: flex;
  flex-wrap: nowrap;        /* DO NOT WRAP: preserves exact 13-line Mushaf formatting */
  justify-content: space-between; /* Justification bord à bord comme mushaf imprimé */
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}

/* ── TYPES DE LIGNES ───────────────────────────────────────────────────────── */

.ligne-surah-name {
  /* Même bandeau que le mode verset (css/sourate-sipara-basmallah.css .sourate) : le nom en 0,9em (≈12 px)
     était quasi illisible à côté d'un texte à 27 px */
  justify-content: center;
  align-items: center;
  margin-block: 6px;
  padding-block: 0.15em 0.3em;
  background-image: url(../images/motif_sourate.png);
  background-repeat: round;
  font-family: 'Thuluth', 'surah-name-v4', var(--font_family_versets), serif;
  font-size: var(--mam-surah-name-size);
  color: var(--on-tertiary-container);
  word-spacing: 0.3rem;
  direction: rtl;
}

.ligne-bismillah {
  justify-content: center;
  margin-block: 4px 8px;
  font-size: var(--mam-bismillah-size);
}

.ligne-quran {
  /* ligne standard — hérite de .ligne-mam */
}

/* ── WRAPPER DE MOT (flex-column) ──────────────────────────────────────────── */

.mot-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  flex: 1 0 auto;           /* Flexible pour la justification, 0 empêche le chevauchement (overlap) */
  min-width: min-content;
  position: relative;
  cursor: pointer;
  padding-inline: var(--mam-word-gap);
  /* Micro-animation au hover */
  transition: transform var(--mam-transition);
}

/* Non interactif : marqueur et nom de sourate */
.mot-wrapper.ayah-marker,
.mot-wrapper.no-interact {
  cursor: default;
  pointer-events: none;
}

/* ── TEXTE ARABE DU MOT ────────────────────────────────────────────────────── */

.mot-mam {
  /* --mam-ajust (≤ 1) : réduction automatique si une ligne dépasse (js/ajustement-police.js) */
  font-size: calc(var(--mam-font-size) * var(--mam-ajust, 1));
  line-height: var(--mam-line-height);
  color: var(--on-background);
  direction: rtl;
  unicode-bidi: isolate;
  user-select: none;       /* Évite la sélection accidentelle au long-press */
  transition: color var(--mam-transition);
  display: block;
  text-align: center;
}

/* Hover sur desktop */
@media (hover: hover) {
  .mot-wrapper:not(.ayah-marker):hover .mot-mam {
    color: var(--mam-hover-color);
    transform: translateY(-1px);
  }

  .mot-wrapper:not(.ayah-marker):hover {
    transform: translateY(-1px);
  }
}

/* État actif (pressed) */
.mot-wrapper:not(.ayah-marker):active .mot-mam {
  color: var(--primary);
  opacity: 0.7;
}

/* ── ÉTAT FOCUS AUDIO (synchronisation avec StateManager) ──────────────────── */

/* LOT 52 (T323) : pendant l'écoute, fond LÉGER sur le verset entier (posé sur le mot-wrapper, pas sur le texte :
   pas de pastille par mot) ; le mot récité prend la couleur du thème et un fond léger, sans contour.
   Teintes tirées de --primary (BeerCSS) : elles suivent le thème clair / sombre. */
.mot-wrapper.activeAudio {
  background-color: var(--surlignage-verset);
}

/* T117 : mot en cours de récitation (minutage quran.com, js/gestion_audio.js) ; placé après .activeAudio. */
.mot-wrapper.motAudio .mot-mam {
  color: var(--primary);
  background-color: var(--surlignage-mot);
  border-radius: 4px;
  padding-inline: 2px;
}

/* Plage de lecture audio (StateManager : hoveredAudio) */
.mot-wrapper.hoveredAudio .mot-mam {
  background-color: var(--hoverAudio, #edff5f42);
  border-radius: 2px;
}

/* ── MARQUEUR DE FIN DE VERSET ─────────────────────────────────────────────── */

/* Le marqueur (0,55em) avait une ligne bien plus basse que les mots : aligné en haut, il « flottait » au-dessus
   de la ligne. Sa colonne prend la hauteur de la rangée des mots et le centre verticalement. */
.mot-wrapper.ayah-marker {
  height: calc(var(--mam-font-size) * var(--mam-ajust, 1) * var(--mam-line-height));
  justify-content: center;
}
.ayah-marker .mot-mam {
  line-height: 1;
  /* LOT 24 : même police et couleur que le mode verset (.rondAyat) ; « Hafs » n'existe pas dans le projet :
     le repli sur la police indopak dessinait ﴿۴۷﴾ en ornement minuscule, sans chiffre lisible */
  font-family: 'Al_Mushaf', var(--font_family_versets), serif;
  font-size: calc(1em * var(--mam-marker-size));
  color: var(--mam-marker-color);
  cursor: default;
  flex: 0 0 auto;      /* Taille fixe — ne s'étire pas */
  padding-inline: 2px;
}

/* ── ZONE D'ANNOTATION (au-dessus / en-dessous du mot) ─────────────────────── */

.mot-annot-top,
.mot-annot-bot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mam-annot-gap);
  justify-content: center;    /* Défaut : centré */
  min-height: 0;              /* Collapse si vide */
  /* Largeur intrinsèque nulle : l'annotation prend la largeur du MOT au lieu de l'élargir
     (sinon toute la ligne débordait et la police était réduite, jusqu'à 13 px sur mobile) */
  width: 0;
  min-width: 100%;
  font-size: max(var(--mam-annot-size), 10px);   /* 0,42em seul ≈ 6 px sur mobile : illisible */
  line-height: 1.3;
}

/* Ordre fixe quel que soit l'ordre d'activation : traduction sur sa propre ligne, puis racine et morphologie
   (avant : « Stem dans », « ف ي Stem »… mélangés sur une même ligne selon la largeur du mot) */
.mot-annot-bot > .annot-trad { order: 0; flex-basis: 100%; }
.mot-annot-bot > .annot-root { order: 1; }
.mot-annot-bot > .annot-pos { order: 2; }
.mot-annot-bot > .annot-qiraat { order: 3; }

/* Alignment horizontal configurable (attribut data-annot-align sur #pageMam) */
#pageMam[data-annot-align="left"]   .mot-annot-bot { justify-content: flex-end; }   /* RTL : flex-end = gauche visuelle */
#pageMam[data-annot-align="center"] .mot-annot-bot { justify-content: center; }
#pageMam[data-annot-align="right"]  .mot-annot-bot { justify-content: flex-start; } /* RTL : flex-start = droite visuelle */

/* Traduction mot-à-mot (une seule langue affichée à la fois, voir getAnnotTradLangue()) — LOT 16/17 :
   remplace .annot-fr/.annot-en, une classe par langue n'aurait pas tenu à l'échelle. La direction suit
   l'attribut dir posé en JS (ltr pour fr/en, rtl pour ur) plutôt qu'être fixée en dur. */
.annot-trad {
  color: var(--mam-annot-trad-color);
  font-size: 0.95em;
  /* Traduction complète, renvoyée à la ligne sous le mot (avant : tronquée à 5em avec « … ») */
  white-space: normal;
  /* LOT 36 (T208) : jamais de coupure au milieu d'un mot (« quic / onqu / e ») ; la colonne s'élargit au besoin */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  text-align: center;
  max-width: 100%;
}
.annot-trad[dir="ltr"] { font-family: Calibri, sans-serif; }
.annot-trad[dir="rtl"] { font-family: var(--font_family_versets), serif; font-size: 1.1em; line-height: 1.5; }   /* ourdou : l'écriture arabe paraît plus petite que le latin à taille égale */

/* Racine arabe */
.annot-root {
  direction: rtl;
  color: var(--mam-annot-root-color);
  font-family: var(--font_family_versets), serif;
  letter-spacing: 0.05em;
}

/* POS (morphologie abrégée) */
.annot-pos {
  /* LOT 28 : libellés lisibles (verbe, nom, حرف…) au lieu des étiquettes brutes Stem/Prefix : plus de monospace,
     sens donné par dir="auto" (js/gestion_pageMam.js) */
  color: var(--mam-annot-pos-color);
  font-family: Calibri, sans-serif;
  font-style: italic;
  font-size: max(0.85em, 9px);   /* 0,85 × 10 px = 8,5 px : sous le seuil de lisibilité */
}

/* ── CHIPS QIRA'AT ─────────────────────────────────────────────────────────── */

.annot-qiraat {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: inherit;
}

.annot-qiraat-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background-color: var(--mam-qiraat-bg);
  color: var(--mam-qiraat-color);
  font-family: 'MUHAMMADI QURANIC', var(--font_family_versets), serif;
  font-size: 0.9em;
  direction: rtl;
  cursor: help;
  border: 1px solid var(--outline-variant);
  transition: background-color var(--mam-transition), transform var(--mam-transition);
}

@media (hover: hover) {
  .annot-qiraat-chip:hover {
    background-color: var(--tertiary);
    color: var(--on-tertiary);
    transform: scale(1.2);
  }
}

/* ── TOOLTIP BeerCSS POUR LES MOTS ─────────────────────────────────────────── */

/* BeerCSS 5 n'affiche une infobulle qu'au survol (`:hover > .tooltip`) : la classe .active posée par
   js/gestion_pageMam.js (appui court, clavier) ne la rendait pas visible, et en tactile elle ne tenait qu'au
   « survol collant » du navigateur (ni fermeture après 3 s, ni appui ailleurs). Comme en mode verset
   (css/ligne-verset.css), seule la classe .active compte ; le survol souris la pose via js/interaction_mam.js. */
.mot-wrapper > .tooltip:not(.active) { visibility: hidden !important; opacity: 0 !important; }
.mot-wrapper > .tooltip.active { visibility: visible; opacity: 1; transform: translate(-50%, -100%) scale(1); }
.mot-wrapper > .tooltip.bottom.active { transform: translate(-50%, 100%) scale(1); }
/* LOT 36 (T196) : le transform du survol crée un contexte d'empilement ; sans cela l'infobulle restait
   enfermée dans son mot et les mots / lignes suivants (et leurs annotations) se dessinaient par-dessus. */
.mot-wrapper:has(> .tooltip.active) { z-index: 1000; transform: none !important; }
.ligne-quran:has(.tooltip.active), .ligne-mam:has(.tooltip.active) { position: relative; z-index: 1000; }

.mot-wrapper .tooltip {
  /* BeerCSS affiche .tooltip en flex horizontal : mot, traduction et racine se chevauchaient */
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 120px;
  max-width: 250px;
  text-align: center;
  direction: ltr;
  white-space: normal;
  font-size: 0.95rem;      /* Agrandir le texte pour meilleure lisibilité */
  font-family: Calibri, sans-serif;
  z-index: 1000;
  /* LOT 36 (T196) : fond opaque et ombre, lisible au-dessus du texte coranique ; LOT 52 : jetons communs */
  color: var(--bulle-texte);
  background-color: var(--bulle-fond) !important;
  opacity: 1;
  backdrop-filter: none;
  box-shadow: var(--bulle-ombre);
  border: 1px solid var(--bulle-bord);
}

/* LOT 52 (T321) : bulle de la traduction du mot récité (réglage « audioBulle », js/gestion_audio.js).
   Traduction seule ; mêmes jetons que l'infobulle du mot. Ne capte aucun appui. */
.bulle-audio {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 900;
  max-width: min(260px, calc(100vw - 16px));
  padding: 4px 10px;
  border-radius: 8px;
  font: 0.95rem/1.3 Calibri, sans-serif;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  color: var(--bulle-texte);
  background-color: var(--bulle-fond);
  border: 1px solid var(--bulle-bord);
  box-shadow: var(--bulle-ombre);
}
.bulle-audio[hidden] { display: none; }

.mot-wrapper .tooltip .tt-ar {
  display: block;
  direction: rtl;
  font-family: var(--font_family_versets), serif;
  font-size: 1.6em;
  line-height: 1.9;          /* voyelles et signes au-dessus/au-dessous non rognés */
  margin-bottom: 2px;
  color: var(--inverse-on-surface);
}

.mot-wrapper .tooltip .tt-fr {
  display: block;
  /* Supprimé: color: var(--on-surface-variant) car illisible sur tooltip sombre */
}

.mot-wrapper .tooltip .tt-root {
  display: flex;                   /* ligne distincte : étiquette + lettres */
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
  padding-top: 3px;
  border-top: 1px solid color-mix(in srgb, var(--inverse-on-surface) 25%, transparent);
  color: var(--inverse-primary);   /* --tertiary manquait de contraste sur le fond sombre du tooltip */
}
.mot-wrapper .tooltip .tt-root-label {
  font-size: 0.75em;
  opacity: 0.85;
}
.mot-wrapper .tooltip .tt-root-lettres {
  direction: rtl;
  font-family: var(--font_family_versets), serif;
  font-size: 1.15em;
  font-weight: bold;
  word-spacing: 0.25em;
}

/* ── PAGE MASQUÉE (mode mémorisation) ──────────────────────────────────────── */

.page-mam--masquee .mot-wrapper:not(.memo-visible) .mot-mam {
  color: transparent !important;
  background-color: var(--outline-variant);
  border-radius: 3px;
  user-select: none;
  pointer-events: none;
}

.page-mam--masquee .ayah-marker .mot-mam {
  color: var(--mam-marker-color) !important;
  background: none;
}

/* Compatibilité Masquage pour le mode Verset */
body.memo-active #reglagesNavBar,
body.memo-active #navDefault {
    display: none !important;
}

.page-mam--masquee .ayah:not(.memo-visible) {
  color: transparent !important;
  background-color: var(--outline-variant);
  border-radius: 5px;
  user-select: none;
  cursor: pointer;
}

.page-mam--masquee .ayah:not(.memo-visible) * {
  color: transparent !important;
}

.page-mam--masquee .ayah:not(.memo-visible) .rondAyat,
.page-mam--masquee .ayah:not(.memo-visible) .rondAyat * {
  color: var(--on-surface) !important;
  background: none;
  visibility: visible;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .mot-wrapper.ayah-marker {
    height: calc(var(--mam-font-size-mobile) * var(--mam-ajust, 1) * var(--mam-line-height));
  }
  .mot-mam {
    font-size: calc(var(--mam-font-size-mobile) * var(--mam-ajust, 1));
  }
  #pageMam {
    width: 98%;
    padding: 8px 10px;
  }
}

@media (min-width: 769px) {
  .mot-wrapper.ayah-marker {
    height: calc(var(--mam-font-size) * 1.15 * var(--mam-ajust, 1) * var(--mam-line-height));
  }
  .mot-mam {
    font-size: calc(var(--mam-font-size) * 1.15 * var(--mam-ajust, 1));
  }
}

/* ── TOGGLE MODE BUTTON ─────────────────────────────────────────────────────── */

#btnToggleMode {
  transition: background-color var(--mam-transition), color var(--mam-transition);   /* J5 : propriétés ciblées */
}

#btnToggleMode[data-mode="mam"] {
  background-color: var(--primary-container);
  color: var(--on-primary-container);
}

/* ── ANIMATION D'ENTRÉE DE PAGE ─────────────────────────────────────────────── */

@keyframes pageMamFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

#pageMam {
  animation: pageMamFadeIn 0.18s ease-out;
}
.memo-active-width {
  width: 90% !important;
  margin: 0 auto;
  transition: width 0.3s ease;
}

/* ── INTERACTION : PAS DE SÉLECTION NI DE MENU NATIF SUR LES MOTS ──────────────
   Réactivable par le mode « sélection du texte » (classe .mam-selection sur #pageMam). */
#pageMam:not(.mam-selection) .mot-wrapper,
#pageMam:not(.mam-selection) .mot-wrapper * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#pageMam .mot-wrapper { touch-action: manipulation; }
#pageMam.mam-selection .mot-wrapper,
#pageMam.mam-selection .mot-wrapper .mot-mam {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}
#pageMam .mot-wrapper:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── DIALOGUE DU MOT (#dialogMamMot) ───────────────────────────────────────── */
#dialogMamMot nav.top-padding { gap: 8px; align-items: center; }
#dialogMamMot #dlgMamMot_ref { margin: 0 4px; }
#dialogMamMot .dlg-mot-sourate { font-family: 'Amiri Colored', var(--font_family_versets), serif; }
#dialogMamMot article { padding: 0 16px 8px; }
/* Petit écran : feuille du bas BeerCSS (classe posée par js/interaction_mam.js) — hauteur selon le contenu,
   plafonnée pour laisser voir la page ; marge basse pour la barre de geste (no-padding l'annulait) */
#dialogMamMot.bottom { max-block-size: 85dvh; padding-block-end: var(--bottom, 0) !important; }
/* Grand écran : `medium` (50 % × 50 %) donnait 683 × 384 px à 1366 × 768 avec défilement interne et 300 px
   vides dessous, 960 px de large en 1920 : largeur d'une fiche, hauteur selon le contenu (max 80 %, BeerCSS) */
#dialogMamMot.medium { inline-size: min(36rem, 92vw); block-size: auto; }
#dialogMamMot .dlg-mot-ar {
  font-family: var(--font_family_versets), serif;
  font-size: 2.6rem;
  line-height: 1.8;
  text-align: center;
  color: var(--on-background);
}
#dialogMamMot .dlg-mot-fiche { padding: 8px 0; border-top: 1px solid var(--outline-variant); }
#dialogMamMot .dlg-mot-fiche-entete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
#dialogMamMot .dlg-mot-fiche-ref { font-size: 0.85rem; color: var(--outline); }
#dialogMamMot .dlg-mot-fiche-ar { font-family: var(--font_family_versets), serif; font-size: 1.5rem; }
#dialogMamMot .dlg-mot-trads { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
#dialogMamMot .dlg-mot-trad { display: flex; align-items: baseline; gap: 8px; color: var(--on-surface-variant); }
#dialogMamMot .dlg-mot-trad.principale { font-size: 1.25rem; color: var(--on-background); font-weight: 500; }
/* L'ourdou (écriture arabe) paraît deux fois plus petit que le latin à taille égale */
#dialogMamMot .dlg-mot-trad [dir="rtl"], #dialogMamMot .dlg-mot-trad[dir="rtl"] { font-family: var(--font_family_versets), serif; font-size: 1.35em; line-height: 1.6; }
#dialogMamMot .dlg-mot-trad-langue {
  flex: none; min-width: 2.6em; text-align: center;
  font-size: 0.7rem; padding: 1px 6px; border-radius: 8px;
  background: var(--secondary-container); color: var(--on-secondary-container);
}
#dialogMamMot .dlg-mot-ligne { display: flex; align-items: center; gap: 10px; margin: 6px 0; flex-wrap: wrap; }
#dialogMamMot .dlg-mot-label { min-width: 5.5em; font-size: 0.85rem; color: var(--outline); }
#dialogMamMot .dlg-mot-racine {
  display: inline-flex; align-items: center; gap: 6px; direction: rtl; text-decoration: none;
  color: var(--primary);
}
#dialogMamMot .dlg-racine-lettre {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.2rem; height: 2.4rem; padding: 0 4px;
  font-family: var(--font_family_versets), serif; font-size: 1.5rem; font-weight: bold;
  border-radius: 8px; background: var(--primary-container); color: var(--on-primary-container);
}
#dialogMamMot a.dlg-mot-racine:hover .dlg-racine-lettre,
#dialogMamMot a.dlg-mot-racine:focus-visible .dlg-racine-lettre { background: var(--primary); color: var(--on-primary); }
#dialogMamMot .dlg-mot-racine.sans-lien .dlg-racine-lettre { background: var(--surface-variant); color: var(--on-surface-variant); }
#dialogMamMot .dlg-mot-radical { font-family: var(--font_family_versets), serif; font-size: 1.3rem; }
#dialogMamMot .dlg-mot-titre { margin: 12px 0 4px; }
#dialogMamMot .dlg-mot-var-liste { margin: 0; padding-inline-start: 1.2em; font-family: var(--font_family_versets), serif; line-height: 1.8; }
#dialogMamMot .dlg-mot-vide, #dialogMamMot .dlg-mot-var-verset { color: var(--outline); margin: 4px 0; }
/* LOT 29 : i'rab au mot (js/interaction_mam.js, _irabMot) */
#dialogMamMot .dlg-mot-irab { margin: 8px 0 2px; }
#dialogMamMot .dlg-mot-irab-liste { list-style: none; margin: 2px 0 0; padding: 0; font-family: var(--font_family_versets), serif; font-size: 1.05rem; line-height: 1.9; }
#dialogMamMot .dlg-irab-seg { font-weight: 700; }
#dialogMamMot .dlg-irab-fn { color: var(--primary); }
#dialogMamMot .dlg-mot-irab-source { margin: 2px 0 0; font-size: 0.75rem; color: var(--outline); }

/* ─── LOT B / LOT C — Format de page commun et réglages typographiques ──────────────────────
   Même format que le mode verset (--lPage / --hPage, js/ajustement-police.js) et mêmes réglages
   utilisateur (css/variables.css) : taille (--echelleUtil), lettres (--largeurLettre), mots
   (--espaceMot), hauteur de ligne (--hauteurLignes). */
#pageMam {
  --mam-taille: calc(var(--lPage) * var(--kPoliceMam, 0.085) * var(--mam-ajust, 1) * var(--echelleUtil, 1));
  /* LOT 29 : 1,75 → 1,6 (encre mesurée : ~1,5 em par ligne en indopak) — lignes plus proches, police plus grande */
  --mam-line-height: 1.6;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: var(--lPage);
  max-width: 100%;
  min-height: calc(var(--hPage) + 26 * var(--hauteurLignes, 0px));
  padding: 8px 10px;
  overflow: visible;
}
#pageMam.page-courte { justify-content: center; }
#pageMam.page-courte > .ligne-mam { min-height: calc(var(--hPage) / 14); align-items: center; }
#pageMam .ligne-mam { padding-block: var(--hauteurLignes, 0px); }
#pageMam .mot-mam { font-size: var(--mam-taille); letter-spacing: normal; }   /* LOT 24 : ligatures arabes */
#pageMam .mot-wrapper { margin-inline: calc(var(--espaceMot, 0rem) / 2); }
#pageMam .mot-wrapper.ayah-marker { height: calc(var(--mam-taille) * var(--mam-line-height)); }
#pageMam .ayah-marker .mot-mam { font-size: calc(var(--mam-taille) * var(--mam-marker-size)); letter-spacing: normal; color: var(--mam-marker-color); }   /* relatif au texte, comme .rondAyat */
#pageMam.ajust-naturel { min-height: 0 !important; justify-content: flex-start; --echelleUtil: 1; --hauteurLignes: 0px; }
#pageMam.ajust-naturel > .ligne-mam { min-height: 0 !important; }
/* LOT 29 : mesure de la largeur avec les espaces entre les mots au minimum (serrage ligne par ligne ensuite) */
#pageMam.ajust-serre .mot-wrapper { padding-inline: 0.3px !important; }

/* ── Signes de pause (waqf) en couleur (mot-à-mot, double page comprise) ───────────────────────────────────
   Posés par js/gestion_pageMoushaf.js:remplirTexteAvecWaqf, sans autre police / graisse / taille (cela casserait
   le façonnage) et sans effet sur la largeur des mots :
   1. signe seul (jeton sans lettre) : <span class="waqf">, couleur + contour de la même couleur sous le remplissage ;
   2. signe collé à une lettre (Chromium le peindrait avec le style de la lettre) : deux calques superposés au texte
      réel, qui reste inchangé dessous. ::before = mot entier en couleur waqf, fusion lighten (clair) / darken
      (sombre) : seuls les pixels déjà encrés changent de couleur, le fond ne bouge pas ; ::after = mot sans les
      signes, dans la couleur courante du mot (survol, audio, masquage), par-dessus → seuls les signes restent colorés.
      La boîte .mot-mam a la largeur du mot : les calques, alignés à droite (début en rtl), coïncident avec lui. */
.mot-mam .waqf {
    color: var(--waqf-couleur, #8e24aa);
    -webkit-text-stroke: 0.045em currentColor;
    paint-order: stroke fill;
}
.mot-mam.mot-waqf { position: relative; }
.mot-mam.mot-waqf::before,
.mot-mam.mot-waqf::after {
    position: absolute;
    inset: 0;
    padding: inherit;
    text-align: right;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}
.mot-mam.mot-waqf::before {
    content: attr(data-waqf-avec);
    color: var(--waqf-couleur, #8e24aa);
    mix-blend-mode: var(--waqf-fusion, lighten);
}
.mot-mam.mot-waqf::after {
    content: attr(data-waqf-calque);   /* mot sans les signes (U+0616 gardé si la police en dépend) */
    clip-path: var(--waqf-trou, none);   /* trou éventuel là où ce U+0616 retombe (js : calqueWaqf) */
    transform: translateX(calc(-1 * var(--waqf-decal, 0em)));   /* LOT 59-iOS : WebKit (js : calerCalqueWaqf) */
}
body.waqf-sans-couleur .mot-mam .waqf { color: inherit; -webkit-text-stroke-width: 0; }
body.waqf-sans-couleur .mot-mam.mot-waqf::before,
body.waqf-sans-couleur .mot-mam.mot-waqf::after,
.page-mam--masquee .mot-wrapper:not(.memo-visible) .mot-mam.mot-waqf::before,
.page-mam--masquee .mot-wrapper:not(.memo-visible) .mot-mam.mot-waqf::after,
.quiz-masked .mot-mam.mot-waqf::before,
.quiz-masked .mot-mam.mot-waqf::after { content: none; }
.page-mam--masquee .mot-wrapper:not(.memo-visible) .waqf,
.quiz-masked .waqf { color: transparent !important; }

/* LOT 36 (T199) : trait entre les lignes (mêmes couleur et épaisseur que le mode verset, css/page.css) */
#pageMam > .ligne-mam + .ligne-mam,
#pageMamBis > .ligne-mam + .ligne-mam { border-top: 1px solid var(--ligne-sep, color-mix(in srgb, tan 70%, transparent)); }

/* LOT 36 (T208) : traduction mot-à-mot compacte. La zone d'annotation prend au moins la largeur du mot le plus
   long de la traduction (min-content) : la ligne s'élargit un peu (la police s'ajuste en largeur, js/ajustement-police.js)
   au lieu d'empiler 4 à 6 lignes de fragments sous chaque mot. Interligne resserré quand la page est annotée. */
.mot-annot-bot:has(> .annot-trad) {
  width: min-content; min-width: 100%; line-height: 1.12;
  /* taille liée à l'arabe (--mam-taille contient --mam-ajust) : l'ajustement en largeur réduit aussi la traduction */
  font-size: clamp(8px, calc(var(--mam-taille, 24px) * 0.36), 15px);
}
.annot-trad { max-width: 11em; }
#pageMam:has(.annot-trad), #pageMamBis:has(.annot-trad) { --mam-line-height: 1.4; }
#pageMam:has(.annot-trad) .ligne-mam, #pageMamBis:has(.annot-trad) .ligne-mam { padding-block: 1px; }

/* LOT 36 (T207) : chips du dialogue du mot */
#dialogMamMot .dlg-mot-sections { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
#dialogMamMot .dlg-mot-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
#dialogMamMot .dlg-mot-chips > .chip { margin: 0; }
#dialogMamMot .dlg-mot-chips-langues > .chip { min-inline-size: 3rem; }
#dialogMamMot [hidden] { display: none !important; }
/* LOT 36 (T209) : racine toujours sur une seule ligne sous le mot, lettres en gras */
.annot-root { white-space: nowrap; font-weight: 700; word-spacing: 0.3em; }   /* P17 : lettres bien séparées */
.mot-annot-bot > .annot-root { flex-basis: 100%; text-align: center; }
.mot-annot-bot:has(> .annot-root) { width: min-content; min-width: 100%; }   /* la racine élargit le mot au lieu de déborder sur ses voisins */

/* LOT 38 (P14) : fiche du mot compacte sur téléphone — les 7 chips (sections + langues) prenaient 3 lignes avant le
   contenu : une seule ligne défilante, libellés courts, sans coche (l'état se lit à la couleur). */
#dialogMamMot .lib-court { display: none; }
@media (max-width: 600px) {
  #dialogMamMot .dlg-mot-sections { flex-direction: row; overflow-x: auto; gap: 4px; margin: 2px 0 6px; scrollbar-width: none; }
  #dialogMamMot .dlg-mot-sections::-webkit-scrollbar { display: none; }
  #dialogMamMot .dlg-mot-chips { flex-wrap: nowrap; flex: 0 0 auto; }
  #dialogMamMot .dlg-mot-chips-langues { border-inline-start: 1px solid var(--outline-variant); padding-inline-start: 4px; }
  #dialogMamMot .dlg-mot-chips > .chip { block-size: 2rem; padding-inline: 10px; white-space: nowrap; }
  #dialogMamMot .dlg-mot-chips > .chip > i { display: none; }
  #dialogMamMot .dlg-mot-chips > .chip.fill { background-color: var(--secondary-container); color: var(--on-secondary-container); }
  #dialogMamMot .dlg-mot-chips > .chip:not(.fill) { background: transparent; border: 1px solid var(--outline-variant); color: var(--outline); text-decoration: line-through; }
  #dialogMamMot .dlg-mot-chips > .chip:has(.lib-court) > .lib-long { display: none; }
  #dialogMamMot .dlg-mot-chips > .chip > .lib-court { display: inline; }
  #dialogMamMot .dlg-mot-ar { font-size: 2.2rem; line-height: 1.6; }
}

/* LOT 38 (P32) : outils de hafiz (js/hafiz.js) */
.mot-wrapper.hafiz-cache > .mot-mam { color: transparent !important; background: var(--outline-variant); border-radius: 4px; }
.mot-wrapper.hafiz-cache > .mot-mam.mot-waqf::before, .mot-wrapper.hafiz-cache > .mot-mam.mot-waqf::after { content: none; }
.mot-wrapper.hafiz-cache .mot-annot-bot { visibility: hidden; }
.hafiz-lettre .mot-wrapper[data-location]:not(.hafiz-revele) > .mot-mam { color: var(--primary); }
.hafiz-lettre .mot-mam.mot-waqf::before, .hafiz-lettre .mot-mam.mot-waqf::after { content: none; }
.hafiz-lettre .mot-wrapper:not(.hafiz-revele) .mot-annot-bot { visibility: hidden; }

/* ── LOT 45 : texte QUL (js/source-qul.js) ──────────────────────────────────────────────────────────────────
   Ligne centrée de la mise en page QUL (fin de sourate courte) : mots groupés au centre, pas étirés. */
#pageMam .ligne-mam.ligne-centree { justify-content: center; }
#pageMam .ligne-mam.ligne-centree .mot-wrapper { flex: 0 0 auto; }
/* Polices ★ : marqueur = glyphe de la police du texte, à la taille du texte */
body.texte-nastaleeq #pageMam .ayah-marker .mot-mam { font-family: var(--font_family_versets); font-size: var(--mam-taille); }
/* Titres au style QUL (surah-name-v4) et basmala dans la police du texte */
.ligne-surah-name .titre-qul { font-family: 'surah-name-v4'; font-size: 1.35em; line-height: 1; word-spacing: normal; }
#pageMam .ligne-bismillah .basmala-qul { flex: 0 0 auto; }
#pageMam .ligne-bismillah .basmala-qul .mot-mam { font-size: calc(var(--mam-taille) * 1.1); }

/* LOT 63-RECIT : suivi de récitation au micro (expérimental) — fonds doux, lisibles en thème clair et sombre */
.mot-wrapper.recit-lu, .mot-wrapper.recit-saute { border-radius: 6px; transition: background-color .15s ease; }
.mot-wrapper.recit-lu { background-color: rgba(46, 160, 67, .28); }
.mot-wrapper.recit-saute { background-color: rgba(220, 53, 69, .28); }
body.dark .mot-wrapper.recit-lu { background-color: rgba(70, 190, 95, .32); }
body.dark .mot-wrapper.recit-saute { background-color: rgba(255, 105, 115, .32); }