body {
    font-family: Calibri;
    background-image: var(--backgroundBody);
    background-size: 25px 25px;
    /* margin: 0 auto; */
}

#tableContainer {
    width: 100%;
    /* Le tableau s'étend sur toute la largeur de la fenêtre */
    overflow: hidden;
    /* Empêche le défilement horizontal et permet d'afficher les ombres et le double page de fond*/
    display: flex;
    justify-content: center;
    /* Centre le tableau dans le conteneur */
    background-color: var(--surface-container-lowest);
    max-width: 650px;
    padding-block: 20px;
    position: relative;
    align-items: center;
    flex-direction: column;
    /*pour aligner les éléments en colonne avec le tableau.*/
    
    /* 1. Isole le calcul du layout à cette div */
    contain: content; 
    
    /* 2. (Bonus) Si cette div a une taille fixe ou scrollable, 
       cela aide le navigateur à ne pas dessiner ce qui est hors écran */
    content-visibility: auto;
}

/* Styles de base pour forcer le tableau à 100% */
#pageQourane {
    border-collapse: collapse;
    width: 90%;
    max-width: var(--largeurTableau_max, 500px);
    overflow-x: clip;   /* LOT 36 (T202) : « hidden » rendait l'axe vertical défilant (overflow-y calculé à auto) */
    /* Couleur et épaisseur de la bordure externe */
    /* Espace entre les deux bordures */
    /*box-shadow: 0 0 0 2px #dddddd,                 0 0 0 7px white,                   0 0 0 10px #dddddd; */
    border: double 3px tan;

    margin: auto;
    position: relative;
    padding: 15px;
    background-color: var(--surface-container-lowest);
    table-layout: fixed;
    /* Force la largeur égale des colonnes */
    min-height: var(--hauteurTableau_max);
    /* sur grand écran */
}

/* Style pour les pages impaires (gauche) */
/* ombre */
.table-pair::before {
    /* right: -5.1vw; */
    right:  -8%;
    /* box-shadow: inset -10px 0px 8px rgba(0, 0, 0, 0.3), inset -3px 0px 2px rgba(0, 0, 0, 0.5); */
   box-shadow: -5px 0px 10px 2px rgba(0, 0, 0, 0.3), 0px 0px 1px 1px rgba(0, 0, 0, 0.7);
}

/* double page */
.table-pair::after {

    
    /* margin-left: 0.3vw; */
   left: 1.8em;
    /* box-shadow: -18px 0px 0 3px var(--surface-container-lowest), -21px 0px 0 2px #dddddd, -24px -1px 0 3px var(--surface-container-lowest), -27px 0px 0 2px #dddddd; */
    box-shadow: -21px 0 0 1px var(--surface-container-lowest), -21px 0 0 2px #DDD, -30px 0 0 4px var(--surface-container-lowest), -29px 0 0 4px #bbb, -30px 0 0 10px var(--surface-container-lowest), -30px 0 0 10px #CCC;
}

/* Style pour les pages paires (droite) */
/* ombre */
.table-impair::before {
        /* box-shadow: inset 10px 0px 8px rgba(0, 0, 0, 0.3), inset 3px 0px 2px rgba(0, 0, 0, 0.5); */
    /* left: -5.1vw; */
    left: -8%;
       box-shadow: 5px 0px 10px 2px rgba(0, 0, 0, 0.3), 0px 0px 1px 1px rgba(0, 0, 0, 0.7);
}

/* double page */
.table-impair::after {
    /* box-shadow: 18px 0px 0 3px var(--surface-container-lowest), 21px 0px 0 2px #dddddd, 24px -1px 0 3px var(--surface-container-lowest), 27px 0px 0 2px #dddddd; */
    /* box-shadow:  21px 0 0 1px var(--surface-container-lowest),   22px 0 0 3px #DDD,   30px 0 0 3px var(--surface-container-lowest),   24px 0 0 5px #bbb,   25px 0 0 8px var(--surface-container-lowest),   25px 0 0 9px #CCC; */
    box-shadow: 21px 0 0 1px var(--surface-container-lowest), 21px 0 0 2px #DDD, 30px 0 0 4px var(--surface-container-lowest), 29px 0 0 4px #bbb, 30px 0 0 10px var(--surface-container-lowest), 30px 0 0 10px #CCC;
    right: 1.8em;
}


/** les ombres */
.table-impair::before,
.table-pair::before {
    width: 8%;
}

/* Pages arrière pour l’effet de livre */
.table-pair::before,
.table-pair::after,
.table-impair::before,
.table-impair::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    /* background-color: #f9f9f9; */
    z-index: 1;
}

#pageQourane.table-pair .debQuart {
    border-right: blue double medium;
}

#tableContainer.table-impair .debQuart {
    border-left: blue double medium;
}

#pageQourane.table-pair .roukou {
    border-right: green double medium;
}

#tableContainer.table-impair .roukou {
    border-left: green double medium;
}


.tabloQuirate td {
    direction: rtl;
    font-family: 'Amiri';
    line-height: inherit;
    /* word-spacing: 0.15em; */
    font-size: large;
}

/* CORRECTION ICI : th:first-child au lieu de th:(first-child) */
.tabloQuirate th:first-child {
    min-width: 7rem;
}

.tabloQuirate .motVariante {
    font-family: Amiri Colored;
        word-spacing: normal;
}

.tabloQuirate th {
       text-align: right;
    font-family: 'nastaleeq';
    font-size: x-large;
    font-weight: normal;
    letter-spacing: normal;
}


#tableContainer .table-header,
td {
    transition: font-size 0.2s ease-out;
}

#tableContainer .table-footer {
    margin-top: 0.2em;
}

#tableContainer .table-header {
    margin-bottom: 0.2em;
    line-height: normal;
    /* si plusieurs sourate */
    line-break: anywhere;
    /* si plusieurs sourate */

    font-size: medium;
    /* large = trop gros sur tel */
    width: 90%;
    border: none;
    display: inline;

}

#tableContainer .table-footer {
    font-size: large;
    /* large = trop gros sur tel */
    align-items: center;
    display: flex;
    width: 90%;
    justify-content: space-between;
    border: none;

}

#tableContainer .table-header span:first-child,
#tableContainer .table-footer span:first-child {
    text-align: left;
}

#tableContainer .table-header span:first-child {
    float: inline-start;
    font-family: 'Amiri Colored';
    line-height: 1;
}

#tableContainer .table-header span:last-child {
    float: inline-end;
}

#tableContainer .table-header span:last-child,
#tableContainer .table-footer span:last-child {
    text-align: right;
}

#tableContainer .table-header span,
#tableContainer .table-footer span {
    flex: 1;
    /* Chaque <span> prendra autant d'espace que nécessaire */
    text-align: center;
}

#tableContainer .table-footer span:first-child {
    font-family: var(--font_family_versets);   /* LOT 45 : glyphes du texte QUL */
    letter-spacing: normal;
    word-spacing: 0.2rem;

    padding-left: 2px;
    color: darkgreen;
}

#pageQourane td {
    vertical-align: middle;
    /* Aligner verticalement */
    white-space: nowrap;
    /* Empêche le texte de passer à la ligne */
    /* PROBLEME pour tooltip */
    /* overflow: hidden;  */
    /* cache ou affiche le texte en surplus */

    /* pour le tooltip il faut faire ceci */
    /* overflow-y: visible; */
    /* overflow-x: clip; */
    /* --------------------------------- */

    /* text-overflow: ellipsis; /* Ajoute "..." si le texte est tronqué */
    font-family: var(--font_family_versets);

    display: flex;
    /* align-items: center;*/
    max-width: 100%;
    /* Empêche la cellule de dépasser la largeur disponible */
    border-block: 0.5px dotted #dddddd;
    padding-inline: 0; /* car bCSS en rajoute */
    padding-block: var(--hauteurLignes);

}



/* Conteneur de texte */
#pageQourane td div {

    flex-grow: 1;


    /* max-width: 100%; */
    /* font-size:150%; */
    /* font-size: 1rem;  */
    /* Taille par défaut */
}

select {
    direction: ltr;
}



#pageQourane .contient-verset:not(.dernierVerset) {
    text-align: justify;
    text-align-last: justify;
    /* le texte prends toute la largeur en ajustant les espaces */
}


input#pageNum {
    flex: 0;
    /* Maintenir la taille naturelle de l'input */
    /* width: 3.5em; /* Déjà défini pour contrôler la largeur */
    text-align: center;
    /* margin: 0 10px; /* Ajouter un espace entre l'input et les spans */
    border: none;
    /* padding: 5px; */
    font-size: large;
    font-weight: bold;
    /* background-color: #9bf3ff2e; */
}

header#topNavBar,
#reglagesNavBar {
    background: var(--backgroundDrawer);
    background-blend-mode: luminosity;
}

#reglagesNavBar.dialogOpen {
    padding-top: var(--marginDialogOpen);
}

#reglagesNavBar {
    box-shadow: 0px -1px 2px var(--inverse-surface);
    block-size:90px;
}

#dialogTrad {
    
        letter-spacing: auto;
}

/* --- Animation Chips Texte Dynamique --- */

/* 1. État par défaut (Inactif) : Texte caché */
#choixMode .chip span {
    max-width: 0;           /* Largeur nulle */
    opacity: 0;             /* Invisible */
    overflow: hidden;       /* Cache ce qui dépasse */
    white-space: nowrap;    /* Empêche le texte de passer à la ligne */
    transition: max-width 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); /* Animation fluide (J5 : propriétés ciblées) */
    margin: 0;              /* Pas de marge */
}

#choixMode .chip:not(.active) i {
margin-right: -0.5rem;
}
/* 2. État Actif (ajouté par ton JS existant) : Texte visible */
#choixMode .chip.active span {
    max-width: 120px;       /* Largeur suffisante pour le texte */
    opacity: 1;             /* Visible */
    /* margin-left: 8px;    */   /* Espace entre l'icône et le texte */ 
}

/* 3. Bouton de réglage séparé mais groupé */
#tabModeMemo:not(.active) {
    border-radius: 9999px !important;
}
#tabModeMemo:not(.active) + #btnSettingsMemo {
    display: none;
}
#btnSettingsMemo {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    background-color: var(--secondary-container);
    color: var(--on-secondary-container);
}

.hauteurMin {      min-block-size: fit-content;    } /* notemment pour li des menus */

/* Réglage dynamique de la taille de police */
@media only screen and (min-width: 1024px) {
    #pageQourane .contient-verset {
        font-size: var(--fontSize_contientVerset_max);
    }

    #pageQourane .contient-verset {
        /* padding-inline: 0.2rem; */
        /* avant em */
    }

    #tableContainer {
        width: var(--largeurTableau_max);
    }

    #pageQourane td {
        line-height: var(--lineHeight_max);
    }

    .table-impair::before {
        /* right: -24px; */
    }

    .table-pair::before {
        /* left: -24px; */
    }

    /* main.dialogOpen{     margin-right: 15em;} */
    /* footer.dialogOpen{     margin-right: 15em;} */
    /* .navigation.dialogOpen  {              right: 15em;        width: 500px;    } */

    #tableContainer>.table-header>span {
        font-size: smaller;
    }

    #dialogShareLink {
        padding-inline: 25%;
    }

}

@media only screen and (max-width: 1023px) {
    #tableContainer>.table-header>span {
        font-size: inherit;
    }

    .table-impair::before {
        /* right: -32px; */
    }

    .table-pair::before {
        /* left: -32px; */
    }

    .table-impair::after {
        /* left: -10px; */
    }

    .table-pair::after {
        /* right: -10px; */
    }

    #pageQourane .contient-verset {
        /* padding-inline: 0.3em; */
        font-size: var(--fontSize_contientVerset_1024);
    }

    #pageQourane td {
        line-height: var(--lineHeight_1024);
    }
    
    #tableContainer { max-width: 580px; }
}

@media only screen and (max-width: 768px) {
    
    .table-impair::after {
        /* left: -8px; */
    }

    .table-pair::after {
        /* right: -8px; */
    }
    

    
}

/* TAILLE DU TABLEAU MAXIMALE */
@media only screen and (max-width: 669px) {

    #pageQourane td {
        line-height: var(--lineHeight_768); /* 3em*/
    }

    #pageQourane .contient-verset {
        /* padding-inline: 0.2em; */
        font-size: var(--fontSize_contientVerset_768);
    }
    
        .table-impair::after {
        /* left: -4px; */
    }

    .table-pair::after {
        /* right: -4px; */
    }
    
          .table-impair::before {
        /* right: -28px; */
    }

    .table-pair::before {
        /* left: -28px; */
    }
    
     #tableContainer { max-width: 520px; }

}


@media only screen and (max-width: 480px) {

    #pageQourane .contient-verset:not(.juz30) {
        /* font-size: calc(2vw + 2.5vh); */
        font-size: var(--fontSize_contientVerset_480);
    }

    #pageQourane .contient-verset {
        /* padding-inline: 0.5rem; /* avant 1rem, puis .5 em */
        margin-block: -2.5px;
    }

    .juz30 {
        /* Styles appliqués uniquement aux éléments ayant les deux classes */
        font-size: calc(var(--fontSize_contientVerset_480) - 3px);
    }

    #pageQourane td:not(.pagesDebut) {
        padding-block: var(--hauteurLignes_Mobile);
        line-height: var(--lineHeight_480);
        /** Moins dynamique que padding  2.5em*/
    }

    #pageQourane td {
        /* padding-inline: 0.35em; */
    }


    .table-pair::before {
        /* left: -22px; */
    }

    .table-impair::before {
        /* right: -22px; */
    }

    .table-pair::after {
        /* right: 6px; */
    }

    .table-impair::after {
        /* left: 6px; */
    }
    


}

/* IMPORTANT pour certains tels */
@media only screen and (max-width: 400px) {
    footer button {
    padding-inline: 1em;
    }
    
        #pageQourane .contient-verset:not(.juz30) {
        /* font-size: calc(2vw + 2.5vh); */
        font-size: var(--fontSize_contientVerset_400);
    }
    
        .juz30 {
        /* Styles appliqués uniquement aux éléments ayant les deux classes */
        font-size: calc(var(--fontSize_contientVerset_400) - 3px);
    }
    
        #pageQourane td:not(.pagesDebut) {
        padding-block: var(--hauteurLignes_Mobile);
        line-height: var(--lineHeight_400);
        /** Moins dynamique que padding  2.5em*/
    }

    #pageQourane td {
        /* padding-inline: 0.4em; */
    }

        .table-pair::before {
        /* left: -20px; */
    }

    .table-impair::before {
        /* right: -20px; */
    }
    
}

@media only screen and (max-width: 360px) {
    footer button {
    padding-inline: 0.8em;
    }
}



/* button {    padding: 5px 10px; background-color:transparent; border-width:thin;}    button:active { background-color:white; border-width:medium;} */

/* Styles pour les boutons de navigation */


.navigation {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 600px;
    margin: auto;
    margin-top: 4px;   /* LOT 38 (P6) : -0,5 em faisait passer le bas de la page (cadre, n° de page) sous les boutons */
}

.navigation button {
    /* padding-block: 3px; */
    /* font-size: 1rem; */
    cursor: pointer;
    border-radius: 15px;
    border: none;
    color: blueviolet;
    background-color: var(--surface-bright);
    /* z-index: 5; */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Légère ombre */

    transition: box-shadow 0.3s ease, transform 0.2s ease;
    /* Animation douce */

}

.navigation button:active {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    /* Réduction de l'ombre au clic */

    transform: scale(0.9);
    /* Légère réduction pour simuler un clic */

}

.navigation button:hover {
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); */
    /* Accentuation de l'ombre au survol */
    filter: drop-shadow(0px 3px 4px grey);


}

/* Appliquer à tout le site */
*,
*::before,
*::after {
    /* La largeur inclut le padding et les bordures */
    /* Empêche qu'un bloc de 100% + 20px de padding dépasse */
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    /* Largeur max = écran */
    overflow-x: clip;   /* LOT 36 (T202) : clip, pas hidden (hidden fait de body un conteneur défilant) */
    /* Coupe tout ce qui dépasse à l'horizontale */
}

/* Classe appliquée temporairement par JS */
.btn-start-attention {
    /* LOT 55 : halo arrondi seul (avant : « border: solid » → cadre carré blanc autour de « Jouer » en Mémo) */
    animation: btn-start-glow 0.6s ease-in-out 10;
    border-radius: 1rem;
    font-weight: bold;
    /* 0.6s × 5 ≈ 6s */
}

/* Animation : halo + léger zoom, basé sur la couleur primaire BeerCSS */
@keyframes btn-start-glow {
    0% {
        box-shadow: 0 0 0 0 var(--primary);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 16px 0 var(--primary);
        transform: scale(1.1);
    }

    100% {
        box-shadow: 0 0 0 0 var(--primary);
        transform: scale(1);
    }
}
/* ─── H2 — Ajustement automatique de la police du mode verset ────────────────────
   --ajustPolice (≤ 1) est calculé par js/ajustement-police.js pour qu'aucune ligne ne déborde
   du tableau (largeur d'écran, zoom, police). Mêmes points de rupture que plus haut. */
@media only screen and (min-width: 1024px) {
    #pageQourane .contient-verset { font-size: calc(var(--fontSize_contientVerset_max) * var(--ajustPolice, 1)); }
}
@media only screen and (max-width: 1023px) {
    #pageQourane .contient-verset { font-size: calc(var(--fontSize_contientVerset_1024) * var(--ajustPolice, 1)); }
}
@media only screen and (max-width: 669px) {
    #pageQourane .contient-verset { font-size: calc(var(--fontSize_contientVerset_768) * var(--ajustPolice, 1)); }
}
@media only screen and (max-width: 480px) {
    #pageQourane .contient-verset:not(.juz30) { font-size: calc(var(--fontSize_contientVerset_480) * var(--ajustPolice, 1)); }
}
@media only screen and (max-width: 400px) {
    #pageQourane .contient-verset:not(.juz30) { font-size: calc(var(--fontSize_contientVerset_400) * var(--ajustPolice, 1)); }
}
/* Pendant la mesure de js/ajustement-police.js : pas d'animation de taille de police */
#pageQourane.ajust-police-mesure,
#pageQourane.ajust-police-mesure * { transition: none !important; }

/* AUD-018 : à 360px et en dessous, la barre de nav du haut (#topNavBar nav.tiny-space)
   déborde de 9px (mesuré à 360x640 et 320x568) car ses boutons circulaires refusent de
   se contracter. On réduit l'espacement de la barre et on autorise ses enfants directs
   à rétrécir, sans rien changer au-dessus de 399px (LOT 59-iOS : 374 → 399, iPhone SE / mini 375 px, iPhone 12-16 390 px). */
@media (max-width: 399px) {
    #topNavBar nav.tiny-space {
        gap: 0;
        padding-inline: 0;
    }
    #topNavBar nav.tiny-space > * {
        min-width: 0;
        flex-shrink: 1;
    }
}

/* AUD-021 / décision D8 : en paysage sur téléphone (≈ 375 px de haut), l'empilement
   barre (64 px) + rangée des modes (72 px) + marges (35 px) repoussait le texte du Coran à 290 px,
   ne laissant qu'un quart de l'écran. L'en-tête n'est pas fixe (il défile avec la page), l'impact
   est donc limité au premier écran ; on le compacte tout de même, l'application autorisant
   désormais le paysage en natif (décision D2). Rien ne change hors écrans bas en paysage. */
@media (orientation: landscape) and (max-height: 500px) {
    #choixMode { padding-block: 0; margin-block: 0; }
    #choixMode .chip { min-height: 32px; height: 32px; margin-block: 2px; }
    #tableContainer { padding-top: 6px; }
    #pageQourane    { padding-top: 4px; }
}

/* ─── LOT B / LOT C — Format de page et réglages typographiques communs ───────────────────────
   --lPage / --hPage : format de la page calculé par js/ajustement-police.js (la page tient dans la
   fenêtre). La police suit la largeur de la page ; --ajustPolice (≤ 1) évite tout débordement ;
   --echelleUtil = réglage « taille » de l'utilisateur (0,9 × multiplicateur, plafonné à 1 : au-delà,
   les 13 lignes ne tiendraient plus). --hauteurLignes agrandit la page au lieu de réduire la police. */
:root {
    --lPage: min(calc(100vw - 38px), 450px);
    --hPage: calc(var(--lPage) * 1.45);
    /* LOT 29 : par défaut (réglage 1) la police est la plus grande qui tient sans défilement ; « − » la réduit.
       (Avant : 0,9 × réglage, soit 10 % sous le maximum par défaut.) */
    --echelleUtil: min(1, var(--taillePoliceUtil, 1));
    --kPoliceVerset: 0.09;
}
#tableContainer {
    width: min(100%, calc(var(--lPage) + 38px));
    max-width: none;
    padding-block: 6px;
}
#tableContainer .table-header,
#tableContainer .table-footer { width: var(--lPage); }
#pageQourane {
    display: flex;
    flex-direction: column;
    width: var(--lPage);
    max-width: 100%;
    min-height: calc(var(--hPage) + 26 * var(--hauteurLignes, 0px));
    padding: 0;
}
#pageQourane > tbody {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    justify-content: center;
}
#pageQourane > tbody > tr { display: flex; flex: 1 1 auto; }
#pageQourane > tbody > tr > td { flex: 1 1 0; min-width: 0; align-items: center; }
/* Pages courtes : lignes de la hauteur d'une page pleine, bloc centré verticalement */
#pageQourane.page-courte > tbody > tr { flex: 0 0 auto; min-height: calc(var(--hPage) / 13); }
/* Mesure de js/ajustement-police.js : hauteur naturelle, sans réglage « taille » ni hauteur de ligne */
#pageQourane.ajust-naturel { min-height: 0 !important; --echelleUtil: 1; --hauteurLignes: 0px; --hauteurLignes_Mobile: 0px; }
#pageQourane.ajust-naturel > tbody > tr { flex: 0 0 auto !important; min-height: 0 !important; }
#pageQourane .contient-verset,
#pageQourane .contient-verset:not(.juz30) {
    font-size: calc(var(--lPage) * var(--kPoliceVerset) * var(--ajustPolice, 1) * var(--echelleUtil, 1));
}
#pageQourane .contient-verset.juz30 {
    font-size: calc(var(--lPage) * var(--kPoliceVerset) * 0.92 * var(--ajustPolice, 1) * var(--echelleUtil, 1));
}
/* LOT 29 : resserrement des lignes chargées (js/ajustement-police.js:serrerLignesVerset). La variable est lue
   par la ligne ET par span.ayah, qui redéfinit son propre word-spacing (css/majbear.css). Pendant la mesure
   (.ajust-serre), toutes les lignes sont au resserrement quasi maximal. */
#pageQourane .contient-verset,
#pageQourane .contient-verset span.ayah { word-spacing: calc(var(--espaceMot, 0rem) + var(--serrage, 0px)); }
#pageQourane.ajust-serre .contient-verset { --serrage: -0.17em; }
/* Hauteur de ligne compacte : les lignes sont de toute façon réparties sur la hauteur de la page */
#pageQourane > tbody > tr > td:not(.sourate):not(.basmallah) { line-height: 1.45; }
#tableContainer { touch-action: pan-y pinch-zoom; }
/* Titres de sourate et basmala : suivent aussi la taille de la page (sinon, en px fixes, ils prenaient
   presque toute la hauteur des pages qui en comptent plusieurs, p. ex. 848) */
#pageQourane > tbody > tr > td.sourate,
#pageQourane > tbody > tr > td.basmallah {
    font-size: calc(var(--lPage) * 0.055 * var(--ajustPolice, 1) * var(--echelleUtil, 1));
    line-height: 1.5;
}
#pageQourane > tbody > tr > td.basmallah div { font-size: 1.3em; }

.nav-cible { display: none; }
/* LOT 24 : champ de page + icône du clavier arabe sur une même ligne, centrés entre Précédent et Suivant */
#navDefault { align-items: center; gap: 8px; }
/* LOT 55 : boutons moins larges (avant : flex 1, chacun prenait la moitié restante de la ligne) */
#navDefault { justify-content: center; }
#navDefault > #pageSuiv, #navDefault > #pagePrec { flex: 0 1 6.5rem; min-width: 0; }
#reglPageNum {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 0 0 auto;
    width: auto;
}
#reglPageNum > button { margin: 0; }
#reglPageNum input#pageNum { width: 3.2em; padding-inline: 0; }
/* Portrait mobile : boutons plus compacts, la ligne reste sur une seule rangée */
@media (orientation: portrait) and (max-width: 600px) {
    #navDefault { gap: 4px; margin-inline: 3px; width: auto; }
    #navDefault > #pageSuiv, #navDefault > #pagePrec {
        margin: 0;
        block-size: 2.75rem;
        padding-inline: 8px;
    }
}

/* LOT 36 (T199) : trait entre les lignes, comme un moushaf imprimé (couleur du cadre doré, atténuée) */
:root { --ligne-sep: color-mix(in srgb, tan 70%, transparent); }
#pageQourane > tbody > tr + tr > td,
#pageQouraneBis > tbody > tr + tr > td { border-top: 1px solid var(--ligne-sep); }

/* LOT 38 (P13) : PC / tablette en paysage peu haut (≥ 1100 px de large, ≤ 920 px de haut) — les barres prenaient
   ~330 px sur 768 : pages de 304 px et police à 18 px. En-tête, rangée des modes et barre du bas compacts ; la
   navigation (précédent / n° de page / suivant) flotte dans le coin inférieur droit, vide sur ces écrans. Le format
   de page (js/ajustement-police.js) ignore les éléments en position fixe : la page récupère la hauteur libérée. */
@media (min-width: 1100px) and (max-height: 920px) and (orientation: landscape) {
    #topNavBar { min-block-size: 3rem; block-size: 3rem; padding-block: 0; }
    #topNavBar > nav { min-block-size: 3rem; }
    #choixMode > nav.chips { padding-block: 2px; }
    #choixMode .chip.medium { block-size: 2.125rem; }
    #reglagesNavBar { min-block-size: 0; padding-block: 2px; }
    #reglagesNavBar button.large, #reglagesNavBar .button.large { block-size: 3.25rem; }
    #reglagesNavBar button.extra { block-size: 3.25rem; inline-size: 3.25rem; }
    #reglagesNavBar i.large { font-size: 1.5rem; }
    #reglagesNavBar i.extra { font-size: 1.75rem; }
    #reglagesNavBar, #reglagesNavBar > nav { min-block-size: 0 !important; block-size: auto !important; }
    #reglagesNavBar button.vertical { block-size: 3.25rem; padding-block: 0; gap: 0; }
    /* LOT 41 : deux blocs, un de chaque côté de la page (flèche gauche à gauche, flèche droite à droite), chacun
       montrant sous la flèche la page à laquelle il mène ; le champ n° de page est masqué (menu › Page). */
    #navDefault { display: contents; }
    #navDefault > #reglPageNum { display: none; }
    #navDefault > #pageSuiv, #navDefault > #pagePrec {
        position: fixed; top: 50%; transform: translateY(-50%); z-index: 5; margin: 0;
        flex-direction: column; gap: 6px; inline-size: 4.5rem; block-size: auto; padding: 8px 6px;
    }
    #navDefault > #pageSuiv { left: 12px; }
    #navDefault > #pagePrec { right: 12px; }
    #navDefault .nav-cible:not(:empty) {
        display: block; min-inline-size: 3rem; padding: 4px 6px; border-radius: 8px;
        background: var(--surface); color: var(--on-surface); font-weight: 700; font-size: 1rem; line-height: 1.4;
    }
    #navDefault > button:disabled { opacity: .4; }
}

/* LOT 38 (P15) : libellés des modes toujours visibles (en petit) quand la largeur le permet — l'icône seule
   (livre, cerveau) ne disait pas ce qu'était « Sciences » ou « Mémo ». Écrans < 370 px : icônes seules. */
@media (min-width: 370px) {
    #choixMode .chip:not(.active) span { max-width: 120px; opacity: 0.85; font-size: 0.8rem; }
    #choixMode .chip:not(.active) i { margin-right: 0; margin-inline-end: 0; }
}
/* Aide de première ouverture (js/13l_app.js : afficherAideDemarrage) */
#aideDemarrage { position: fixed; z-index: 150; inset-inline: 12px; top: 64px; margin-inline: auto; max-inline-size: 420px;
    padding: 14px 16px 10px; border-radius: 16px; background: var(--inverse-surface); color: var(--inverse-on-surface);
    box-shadow: var(--elevate3); }
#aideDemarrage h6 { margin: 0 0 6px; font-size: 1rem; }
#aideDemarrage ul { margin: 0; padding-inline-start: 1.2em; font-size: 0.9rem; line-height: 1.45; }
#aideDemarrage nav { justify-content: flex-end; margin-top: 6px; }
#aideDemarrage button { color: var(--inverse-primary); }

/* LOT 55 : barre Mémo — plus de cadre carré blanc autour de « Jouer » après un appui (focus posé par l'ouverture
   du menu) : fond arrondi léger au clavier seulement. */
#navMemo > a:focus { outline: none; }
#navMemo > a:focus-visible { outline: none; background-color: color-mix(in srgb, var(--primary) 14%, transparent); border-radius: 1rem; }
/* LOT 55 : menu « Jouer » (Mémo) — liste large au-dessus du bouton, une option par ligne (icône + libellé côte à côte ;
   avant : styles de la barre du bas hérités, icônes empilées au-dessus du texte, menu étroit collé au bord). */
#navMemo #menuMemoPlay {
    min-inline-size: 15rem; padding: 6px; border-radius: 1rem;
    inset-inline-start: 50%; inset-block-end: calc(100% + 8px); inset-block-start: auto; transform: translateX(-50%);
}
#navMemo #menuMemoPlay > a {
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px;
    inline-size: 100%; min-block-size: 3rem; padding: 0 16px; margin: 0; border-radius: .75rem;
    font-size: 1rem; text-align: start; white-space: nowrap;
}
#navMemo #menuMemoPlay > a > i { margin: 0; font-size: 1.4rem; }
#navMemo #menuMemoPlay > a > span { font-size: 1rem; }
#navMemo #menuMemoPlay > a:hover, #navMemo #menuMemoPlay > a:focus-visible { background-color: color-mix(in srgb, var(--primary) 12%, transparent); }