/* Variables CSS */
:root {
            --fontSize_contientVerset_400 : 22px; 
            --fontSize_contientVerset_480 : 24px; /* Dépend pas mal de la police */
            --fontSize_contientVerset_768:    32px;           /*  calc(3vw + 3vh) */
            --fontSize_contientVerset_1024: 42px; /*  calc(2vw + 5vh) */
            --fontSize_contientVerset_max: 23px;
            --font_family_versets: 'Al Quran Indopak Compressed'; /* Al_Mushaf */
            --largeurTableau_max:  500px; /* old: 445px */
            --hauteurTableau_max:  450px; /* old: 550px */
            --offset-1:  8.33333%; 
            --offset-2 : 16.66667%; 
            --offset-3  :25%; 
            --offset-4  :33.33333%; 
            --offset-5  :41.66667%; 
            --offset-6  :50%; 
            --offset-7  :58.33333%; 
            --offset-8  :66.66667%; 
            --offset-9  :75%; 
            --offset-10  :83.33333%; 
            --offset-11  :91.66667%; 
            --largeurLettre : 0px;
            --espaceMot : 0rem;
            --taillePoliceUtil : 1;
            /* --hauteurLignes : 8px; */
            --hauteurLignes : 0px;
            --hauteurLignes_Mobile : 0px;
            /* --lineHeight_400 : 2.8em; */
            /* --lineHeight_480 : 3.1em; */
            /* --lineHeight_768 : 3.6em; */
            /* --lineHeight_1024 : 4em; */
            /* --lineHeight_max : 2em; */
            --lineHeight_400 : 1.7; /* un peu plus bas */
            --lineHeight_480 : normal;
            --lineHeight_768 : normal;
            --lineHeight_1024 : normal;
            --lineHeight_max : normal;
            --marginDialogOpen : 240px;
}

:root, body.light {
--primary:#0061a4;
--on-primary:#ffffff;
--primary-container:#d1e4ff;
--on-primary-container:#001d36;
--secondary:#535f70;
--on-secondary:#ffffff;
--secondary-container:#d7e3f7;
--on-secondary-container:#101c2b;
--tertiary:#4a6a58;
--on-tertiary:#ffffff;
--tertiary-container:#f4c571;
--on-tertiary-container:#251431;
--error:#ba1a1a;
--on-error:#ffffff;
--error-container:#ffdad6;
--on-error-container:#410002;
--background:#fdfcff;
--on-background:#1a1c1e;
--surface:#faf9fc;
--on-surface:#1a1c1e;
--surface-variant:#dfe2eb;
--on-surface-variant:#43474e;
--outline:#73777f;
--outline-variant:#c3c7cf;
--shadow:#000000;
--scrim:#000000;
--inverse-surface:#2f3033;
--inverse-on-surface:#f1f0f4;
--inverse-primary:#9ecaff;
--surface-dim:#dadadd;
--surface-bright:#faf9fc;
--surface-container-lowest:#ffffff;
--surface-container-low:#f4f3f7;
--surface-container:#eeedf1;
--surface-container-high:#e8e8eb;
--surface-container-highest:#e2e2e6;
--backgroundDrawer : linear-gradient(99deg, rgba(165, 165, 165, 0.03) 0%, rgba(165, 165, 165, 0.03) 8%, rgba(235, 235, 235, 0.03) 8%, rgba(235, 235, 235, 0.03) 9%, rgba(194, 194, 194, 0.03) 9%, rgba(194, 194, 194, 0.03) 14%, rgba(212, 212, 212, 0.03) 14%, rgba(212, 212, 212, 0.03) 17%, rgba(219, 219, 219, 0.03) 17%, rgba(219, 219, 219, 0.03) 95%, rgba(86, 86, 86, 0.03) 95%, rgba(86, 86, 86, 0.03) 100%), linear-gradient(67.5deg, rgba(80, 80, 80, 0.03) 0%, rgba(80, 80, 80, 0.03) 11%, rgba(138, 138, 138, 0.03) 11%, rgba(138, 138, 138, 0.03) 17%, rgba(122, 122, 122, 0.03) 17%, rgba(122, 122, 122, 0.03) 24%, rgba(166, 166, 166, 0.03) 24%, rgba(166, 166, 166, 0.03) 27%, rgba(245, 245, 245, 0.03) 27%, rgba(245, 245, 245, 0.03) 89%, rgba(88, 88, 88, 0.03) 89%, rgba(88, 88, 88, 0.03) 100%), linear-gradient(67.5deg, rgba(244, 244, 244, 0.03) 0%, rgba(244, 244, 244, 0.03) 4%, rgba(16, 16, 16, 0.03) 4%, rgba(16, 16, 16, 0.03) 10%, rgba(157, 157, 157, 0.03) 10%, rgba(157, 157, 157, 0.03) 20%, rgba(212, 212, 212, 0.03) 20%, rgba(212, 212, 212, 0.03) 83%, rgba(5, 5, 5, 0.03) 83%, rgba(5, 5, 5, 0.03) 84%, rgba(237, 237, 237, 0.03) 84%, rgba(237, 237, 237, 0.03) 100%); /* , linear-gradient(99deg, #ffffff, #ffffff) */
--backgroundBody : repeating-radial-gradient(circle at center center, transparent 0px, transparent 2px,rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 3px,transparent 3px, transparent 5px,rgba(0,0,0,0.03) 5px, rgba(0,0,0,0.03) 7px),repeating-radial-gradient(circle at center center, rgb(251,251,251) 0px, rgb(251,251,251) 9px,rgb(251,251,251) 9px, rgb(251,251,251) 21px,rgb(251,251,251) 21px, rgb(251,251,251) 31px,rgb(251,251,251) 31px, rgb(251,251,251) 40px);
             --ligne-juz: #ebda88;
            --hoverOuloum: beige;
            --ayahHover : mediumblue;
            --hoverAudio: #edff5f42;
            --activeAudio: #98fb986b;
            --hoverDefaut: #96fff433;

}

:root, body.dark {
--primary: #1f517f;
--on-primary: #c3d1db;
--primary-container:#00497d;
--on-primary-container:#d1e4ff;
--secondary:#bbc7db;
--on-secondary:#253140;
--secondary-container:#3b4858;
--on-secondary-container:#d7e3f7;
--tertiary:#73a78a;
--on-tertiary:#3b2948;
--tertiary-container:#523f5f;
--on-tertiary-container:#f2daff;
--error:#ffb4ab;
--on-error:#690005;
--error-container:#93000a;
--on-error-container:#ffb4ab;
--background:#1a1c1e;
--on-background:antiquewhite; /*#e2e2e6 */ 
--surface:#121316;
--on-surface:#e2e2e6;
--surface-variant:#43474e;
--on-surface-variant:#c3c7cf;
--outline:#8d9199;
--outline-variant:#43474e;
--shadow:#000000;
--scrim:#000000;
--inverse-surface:#e2e2e6;
--inverse-on-surface:#2f3033;
--inverse-primary:#0061a4;
--surface-dim:#121316;
--surface-bright:#38393c;
--surface-container-lowest:#1a1a1a; /* :#0d0e11 */
--surface-container-low:#1a1c1e;
--surface-container:#1e2022;
--surface-container-high:#282a2d;
--surface-container-highest:#333538;
   --backgroundDrawer : linear-gradient(216deg, rgba(77, 77, 77, 0.05) 0%, rgba(77, 77, 77, 0.05) 25%, rgba(42, 42, 42, 0.05) 25%, rgba(42, 42, 42, 0.05) 38%, rgba(223, 223, 223, 0.05) 38%, rgba(223, 223, 223, 0.05) 75%, rgba(36, 36, 36, 0.05) 75%, rgba(36, 36, 36, 0.05) 100%), linear-gradient(44deg, rgba(128, 128, 128, 0.05) 0%, rgba(128, 128, 128, 0.05) 34%, rgba(212, 212, 212, 0.05) 34%, rgba(212, 212, 212, 0.05) 57%, rgba(25, 25, 25, 0.05) 57%, rgba(25, 25, 25, 0.05) 89%, rgba(135, 135, 135, 0.05) 89%, rgba(135, 135, 135, 0.05) 100%), linear-gradient(241deg, rgba(55, 55, 55, 0.05) 0%, rgba(55, 55, 55, 0.05) 14%, rgba(209, 209, 209, 0.05) 14%, rgba(209, 209, 209, 0.05) 60%, rgba(245, 245, 245, 0.05) 60%, rgba(245, 245, 245, 0.05) 69%, rgba(164, 164, 164, 0.05) 69%, rgba(164, 164, 164, 0.05) 100%), linear-gradient(249deg, rgba(248, 248, 248, 0.05) 0%, rgba(248, 248, 248, 0.05) 32%, rgba(148, 148, 148, 0.05) 32%, rgba(148, 148, 148, 0.05) 35%, rgba(202, 202, 202, 0.05) 35%, rgba(202, 202, 202, 0.05) 51%, rgba(181, 181, 181, 0.05) 51%, rgba(181, 181, 181, 0.05) 100%), linear-gradient(92deg, hsl(214, 0%, 11%), hsl(214, 0%, 11%));
   --backgroundBody:repeating-radial-gradient(circle at center center, transparent 0px, transparent 2px, rgba(0,0,0,0.6) 2px, rgba(0,0,0,0.6) 3px, transparent 3px, transparent 5px, rgba(0,0,0,0.6) 5px, rgba(0,0,0,0.6) 7px),repeating-radial-gradient(circle at center center, rgb(10,10,10) 0px, rgb(10,10,10) 5px, rgb(30,30,30) 5px, rgb(30,30,30) 10px, rgb(20,20,20) 10px, rgb(30,30,30) 15px, rgb(70,70,70) 15px, rgb(70,70,70) 20px);
            --ligne-juz: #574d1c;
            --hoverOuloum: #28231c;
            --ayahHover : deepskyblue;
            --hoverAudio: #471c4342;
            --activeAudio: #0740076b;
            --hoverDefaut: #195c5861;




}



/* ── Signes de pause (waqf) en couleur — règles en fin de css/ligne-verset.css et css/mam.css ──────────────
   Mauve (LOT 36 ; rouge avant), distinct de l'or des numéros de verset (#a27400) et des surlignages audio (vert / bleus BeerCSS).
   Contraste mesuré (WCAG) : clair #c62828 ≥ 5,0 sur les fonds de page, ≥ 4,3 sur les surlignages audio ;
   sombre #ff8a80 ≥ 7,1 sur les fonds de page, ≥ 4,0 sur les surlignages audio. */
/* LOT 36 (T205) : mauve à la demande de l'utilisateur (rouge avant). Clair #8e24aa ≈ 7,6:1 sur blanc ; sombre #cf6ff0 ≈ 5,8:1 (assez saturé pour se distinguer du texte clair). */
:root, body.light { --waqf-couleur: #8e24aa; --waqf-fusion: lighten; }
body.dark { --waqf-couleur: #cf6ff0; --waqf-fusion: darken; }