/* Style de base pour les segments .ayah */
.ayah {
    cursor: pointer;
    /* padding: 2px 0px; */       /*4px la deuxieme portion */
    /* border-radius: 10px; */
    transition: background-color 0.5s, color 0.3s;
    color: var(--on-background);
    position: relative;
    /* pour before */
    z-index: 3;
    vertical-align: text-bottom;
    /* font-size-adjust: from-font; */ /* créé un décalage je trouve depuis le vertical-align:middle; */
    /* les marques de stops ne sont plus en haut mais plutôt centrés */
}

/* Marge droite-gauche entre verset et bordure de page */
.contient-verset > .ayah:first-of-type {
  padding-inline-start: .8rem; /* première ayah */
}

.contient-verset > .ayah:last-of-type {
  padding-inline-end: .8rem;   /* dernière ayah */
}

.contient-verset  {
        direction: rtl;
}


/* Effet de sélection lorsque le segment est cliqué */
.contient-verset>.ayah.ouloumHighlight {
    /* background-color: #2ad9ff12;  */
    /* box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3); /* Léger effet d’ombre */
    color: var(--on-background);
}

/* Pseudo-éléments pour un effet de surbrillance élargi */
.contient-verset>.ayah.ouloumHighlight::before {

    /* top: -3px; */
    /* Dépasse légèrement le haut */
    /* bottom: -3px; */
    /* Dépasse légèrement le bas */
    /* left: 0px; */
    /* Dépasse légèrement la gauche */
    /* right: 0px; */
    /* Dépasse légèrement la droite */
    background-color: var(--hoverOuloum);

    /* box-shadow: 0px 0px 4px 1px rgb(0 0 0 / 40%);*/     /* Effet d'ombre */

    pointer-events: none;     /* Ne capte pas les événements de la souris */

}

.contient-verset>.ayah.ouloumHighlight:not(.debVerset):not(.finVerset)::before {
    margin-inline: -0.45em;
}


.contient-verset .ayah.ouloumHighlight.debVerset::before {
    border-right: solid thick grey;
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
    right: -1rem;
}

.contient-verset .ayah.ouloumHighlight.debVerset:not(.finVerset)::before {
    left: -0.45em;
    right: -12px;
}

.contient-verset>.ayah.ouloumHighlight.finVerset::before {
    border-left: solid thick grey;
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
    /* left:-4px;  */
}

.contient-verset>.ayah.ouloumHighlight.finVerset:not(.debVerset)::before {
    right: -0.45em;
}

.contient-verset>.ayah.ouloumHighlight.finVerset:last-of-type::before {
    left: 5px;
}


/* tous */
.contient-verset>.ayah.ouloumHighlight::before,
.contient-verset>.ayah.activeAudio::before,
.contient-verset>.ayah.memoHighlight::before,
.contient-verset>.ayah.defautHighlight::before,
.contient-verset>.ayah.hoveredAudio::before {
    /* top: 4px; */
    top: 0;
    /* bottom: 4px; */
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
    position: absolute;
    z-index: -1;
}
@media only screen and (max-width: 400px) {
        .contient-verset>.ayah.ouloumHighlight::before,
        .contient-verset>.ayah.activeAudio::before,
        .contient-verset>.ayah.memoHighlight::before,
        .contient-verset>.ayah.defautHighlight::before,
        .contient-verset>.ayah.hoveredAudio::before {
            top: 4px;    bottom: 4px;
        }

        .contient-verset>.ayah.ouloumHighlight.finVerset:not(.debVerset)::before,
        .contient-verset>.ayah.ouloumHighlight.finVerset:last-of-type::before,
        .contient-verset .ayah.ouloumHighlight.debVerset:not(.finVerset)::before
        {
            left:0; right:0;
        }

}

/* Ce bloc est indispensable pour voir la couleur de lecture */
.contient-verset>.ayah.activeAudio::before {

    /* left: -10px; */
    /* right: -10px; */

    /* pour tooltip */
    /* clip-path: inset(0px round 20px);  */
    /* Une couleur différente de la sélection (ex: Orange vs Vert) */
    background-color: var(--activeAudio);
    /* palegreen */
}

.contient-verset .ayah.activeAudio.debVerset::before {
    border-right: solid thick var(--tertiary);
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.contient-verset>.ayah.activeAudio.finVerset::before {
    border-left: solid thick var(--tertiary);
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    left: 1px;
}



/* Animation douce quand un verset devient en focus (défaut / tafsir / audio / mémo) */

.contient-verset>.ayah.defautHighlight::before,
.contient-verset>.ayah.ouloumHighlight::before,
.contient-verset>.ayah.memoHighlight::before,
.contient-verset>.ayah.activeAudio::before {
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.18s ease;
    animation: focusSoft 0.18s ease-out;
}

@keyframes focusSoft {
    from {
        transform: scale(0.98);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.0);
    }
    to {
        transform: scale(1);
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.22);
    }
}


/* ----------------------- */
@media only screen and (min-width: 480px) {
    .ayah {
        padding: 0;
    }

/*
    .contient-verset>.ayah.ouloumHighlight::before,
    .contient-verset>.ayah.activeAudio::before,
    .contient-verset>.ayah.memoHighlight::before,
    .contient-verset>.ayah.defautHighlight::before,
    .contient-verset>.ayah.hoveredAudio::before {
        top: 0px;
        bottom: 0px;
    }
*/
}


@media only screen and (min-width: 669px) {

    .contient-verset>.ayah.ouloumHighlight::before,
    .contient-verset>.ayah.activeAudio::before,
    .contient-verset>.ayah.memoHighlight::before,
    .contient-verset>.ayah.defautHighlight::before,
    .contient-verset>.ayah.hoveredAudio::before {
        /* top: 1.5px; */
        /* bottom: 1.5px; */
    }
}

@media only screen and (min-width: 768px) {}

@media only screen and (min-width: 1024px) {

    .contient-verset>.ayah.ouloumHighlight::before,
    .contient-verset>.ayah.activeAudio::before,
    .contient-verset>.ayah.memoHighlight::before,
    .contient-verset>.ayah.defautHighlight::before,
    .contient-verset>.ayah.hoveredAudio::before {
        /* top: -3px; */
        /* bottom: -3px; */
        /* left: -12px; */
        /* right: -12px; */
    }

    .contient-verset>.ayah.ouloumHighlight:not(.debVerset):not(.finVerset)::before {
        margin-inline: 0;
    }
}

/* @media only screen and (min-width: 1024px) {   */
/* .contient-verset > .ayah.ouloumHighlight::before, .contient-verset > .ayah.activeAudio::before, .contient-verset > .ayah.memoHighlight::before, .contient-verset > .ayah.defautHighlight::before, .contient-verset > .ayah.hoveredAudio::before { */
/* top: -2px; */
/* bottom: -2px; */
/* } */
/* } */

/* ----------------------- */

/* Exemple pour data-aayah="1" */
/* les ayaas sont dans le scss ou créé dynamiquement en js*/

/* Optionnel : Style spécifique pour l'élément survolé */
#tableContainer:has(.ayah:hover) .ayah:hover {
    /* Styles additionnels pour l'élément spécifique survolé */
    /* Par exemple, une bordure plus épaisse */
    /* border-bottom: solid grey medium; */
}


/* ------------------------- */

.contient-verset>.ayah.hovered {

    /* background-color: #31fff40f;*/
    
    /* Couleur de fond du surlignage */
    border-bottom: dotted thin cadetblue;
    
        text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-position: under;
    
    
    /* Bordure bleue autour */
    /* bottom: 1px;     */
    /* padding-bottom: 0;  */
    /* pour etre sûr que le border bottom s'affiche */
    /* border-radius: 15px; */
    color: var(--ayahHover);


}

.contient-verset>.ayah.hoveredAudio::before {
    background-color: var(--hoverAudio);
    /* Couleur de fond du surlignage */
}

/* #linemax {  visibility:hidden;  } */

/* Mode Ouloum (Sciences) - Exemple Bleu */
.contient-verset>.ayah.defautHighlight::before {
    background-color: var(--hoverDefaut);
    border-bottom: 1px solid #3498db;
}

/* Mode Mémorisation (Futur) - Exemple Jaune */
.contient-verset>.ayah.memoHighlight::before {
    background-color: #96fff433;
    border: 1px dashed #f1c40f;
}

@keyframes fadeInTyping {
    0% {
        opacity: 0.5;
        /* Commence transparent */
        filter: blur(1px);
        transform: translateY(-5px);
        /* Monte légèrement */
    }

    50% {
        opacity: 0.7;
        /* Semi-transparent */
        filter: blur(0.5px);
        transform: translateY(0);
        /* Retourne à la position normale */
    }

    100% {
        opacity: 1;
        /* Complètement visible */
        filter: blur(0px);
        transform: translateY(0);
        /* Position finale */
    }
}

span.ayah {
    animation: fadeInTyping 0.5s ease-in-out;
    /* Animation automatique */
}


.pagesDebut span.ayah {
    line-height: normal;
    font-size: larger;
}

.contient-verset.dernierVerset {
    text-align-last: center;
}

/* -------------------------------------------------------------------- */


#tableContainer .ayah>.tooltip, #tableContainer .contient-verset > .tooltip {

    background-color: var(--tertiary);
    font-size: 0.7em;
    font-weight: bold;
    font-family: Calibri;
   letter-spacing:     -0.03rem;
     
   /* position: absolute; */
   /* inset-inline: 0;        /* left:0; right:0 en logique CSS */
  /*  top: 0;                 /* ou bottom: 100% selon où tu le veux */
   /*  transform: translateX(-100%) ;*/ /* ca sert pour l'effet */
  /*  width: fit-content;            /* prend toute la largeur du conteneur */
  
    width: 110%;            /* prend toute la largeur du conteneur */

  /*  z-index: 20;    */         /* au-dessus du tableau
 /*   text-align: justify;      /* ou right si tu veux commencer par la droite */ 
    pointer-events: none;   /* ne bloque pas les clics sur le tableau */
    
    /* inset-inline: -50%; */
    text-wrap: auto;
    direction: ltr ;
    text-align-last: auto;
    /* word-spacing: normal; */
    padding-inline: 1.5rem;
  /*      vertical-align: top; /* pour signeWaqf + mobile */

}

#tableContainer .ayah>.tooltip:not(.active), #tableContainer .contient-verset > .tooltip:not(.active)
{
        
/* État par défaut : tooltip caché (on ignore le :hover BeerCSS) */
    visibility: hidden !important;
    opacity: 0 !important;
}

/* On neutralise explicitement les effets hover/focus de BeerCSS pour ces tooltips */
/*
#tableContainer .contient-verset:hover > .tooltip, #tableContainer .ayah:hover > .tooltip,
#tableContainer .contient-verset:focus-within > .tooltip, #tableContainer .ayah:focus-within > .tooltip   {
    visibility: hidden !important;
    opacity: 0 !important;
}
*/

/* NECESSAIRE */
#tableContainer .ayah>.tooltip.active, #tableContainer .contient-verset > .tooltip.active {
    visibility: visible; /* !important;*/
    opacity: 1; /* !important; */
/*    transform: translate(-50%, -100%) scale(1); /* devrait eviter les zooms intempestifs */
    scale: 1;
}



/* -------------------------------- */
.rondAyat {
    font-family: 'Al_Mushaf';
    color: #a27400; 
    line-height: 0; /* pour éviter que trop gros et fait grossir la ligne */
    font-size-adjust: from-font;
    /* LOT 29 : l'ornement Al_Mushaf est dessiné petit (13 px de large pour un texte de 18 px, chiffres ≈ 5 px) :
       même agrandissement qu'en mot-à-mot (--mam-marker-size) ; la largeur en plus est absorbée par le
       resserrement ligne par ligne (js/ajustement-police.js) */
    font-size: 1.45em;
}

.signesWaqf {
    color: var(--primary); /* blueviolet */
    font-size: 1em;   /* LOT 38 (P4) : 1,5 em (41 px pour un texte à 23 px) → signes géants sur la ligne du dessus (pages 2-3) */
/*     font-size: initial;  */   /* smaller  - medium */
    vertical-align: -webkit-baseline-middle; /* ou bien bottom/middle */
    font-family: 'Al_Mushaf' ; /* noor_e_hura_r */
        line-height: 0;
        /* top: 0lh; */ /*0.1em */
    /* padding-inline-start: 0.2rem; */
    /* new */
    
    /* margin-inline-start: -5rem; */
    /* margin-inline-end: 5-rem; */
}

/* Quand la classe est présente, on cache tout ce qui concerne la trad */
body.hide-traductions .lazy-trad,
body.hide-traductions .trad-loaded {
    display: none !important;
}

/* -------------------------------------------------------------------- */

/* ── Signes de pause (waqf) en couleur (mode verset, double page comprise) ─────────────────────────────────
   Spans posés par js/gestion_pageMoushaf.js:signesWaqf : .signesWaqf (police et taille historiques, inchangées)
   et .waqf (même police que le texte). Seulement la couleur et un contour de la même couleur, peint sous le
   remplissage : aucun effet sur la mise en page, donc largeur des lignes identique. Le contour suit currentColor,
   si bien que les masquages de la mémorisation (color: transparent) le masquent aussi. */
.contient-verset .waqf {
    color: var(--waqf-couleur, #8e24aa);
    -webkit-text-stroke: 0.045em currentColor;
    paint-order: stroke fill;
}
body.waqf-sans-couleur .contient-verset .waqf { color: inherit; -webkit-text-stroke-width: 0; }
.quiz-masked .waqf { color: transparent !important; }

/* ── LOT 45 : texte QUL (js/source-qul.js) ──────────────────────────────────────────────────────────────────
   Polices ★ (famille QuranWBW, body.texte-nastaleeq) : le marqueur de fin de verset est un glyphe de la police
   du texte (numéro, pause de fin de verset, sajda, ruku…) — pas d'Al_Mushaf, qui n'a pas ces glyphes.
   Polices ✓ (Al Qalam, body.texte-indopak) : ﴿n﴾ en Al_Mushaf, comme .rondAyat ci-dessus. */
body.texte-nastaleeq .rondAyat { font-family: inherit; font-size: 1em; line-height: inherit; }
/* Titres au style QUL : ligature « surahNNN » de la police surah-name-v4 (réglage « Titres ») */
#pageQourane .sourate .titre-qul, .titre-qul { font-family: 'surah-name-v4'; font-size: 1.35em; line-height: 1; word-spacing: normal; }
/* Basmala écrite dans la police du texte */
#pageQourane .basmallah .basmala-qul { font-family: var(--font_family_versets); color: var(--on-surface); font-size: 1.3em; }