/*


Annule certaines propriétées de bearCSS


*/
/* BeerCSS n'est plus importé ici (CDN @latest) : il est lié en local et épinglé dans index.html
   (vendor/beercss-5.0.3/beer.min.css), AVANT ce fichier pour que ces surcharges s'appliquent. */




/* Défaut : petits écrans (mobile) */
.offset-s1 { margin-left: var(--offset-1); }
.offset-s2 { margin-left: var(--offset-2); }
.offset-s3 { margin-left: var(--offset-3); }
.offset-s4 { margin-left: var(--offset-4); }
.offset-s5 { margin-left: var(--offset-5); }
.offset-s6 { margin-left: var(--offset-6); }
.offset-s7 { margin-left: var(--offset-7); }
.offset-s8 { margin-left: var(--offset-8); }
.offset-s9 { margin-left: var(--offset-9); }
.offset-s10 { margin-left: var(--offset-10); }
.offset-s11 { margin-left: var(--offset-11); }

/* Écrans moyens (tablettes) */
@media (min-width: 601px) {
  .offset-m1 { margin-left: var(--offset-1); }
  .offset-m2 { margin-left: var(--offset-2); }
  .offset-m3 { margin-left: var(--offset-3); }
  .offset-m4 { margin-left: var(--offset-4); }
  .offset-m5 { margin-left: var(--offset-5); }
  .offset-m6 { margin-left: var(--offset-6); }
  .offset-m7 { margin-left: var(--offset-7); }
  .offset-m8 { margin-left: var(--offset-8); }
  .offset-m9 { margin-left: var(--offset-9); }
  .offset-m10 { margin-left: var(--offset-10); }
  .offset-m11 { margin-left: var(--offset-11); }
  
  
  .offset-both-m2 { margin-inline: var(--offset-2); }
}

/* Écrans larges (desktop) */
@media (min-width: 993px) {
  .offset-l1 { margin-left: var(--offset-1); }
  .offset-l2 { margin-left: var(--offset-2); }
  .offset-l3 { margin-left: var(--offset-3); }
  .offset-l4 { margin-left: var(--offset-4); }
  .offset-l5 { margin-left: var(--offset-5); }
  .offset-l6 { margin-left: var(--offset-6); }
  .offset-l7 { margin-left: var(--offset-7); }
  .offset-l8 { margin-left: var(--offset-8); }
  .offset-l9 { margin-left: var(--offset-9); }
  .offset-l10 { margin-left: var(--offset-10); }
  .offset-l11 { margin-left: var(--offset-11); }
  
  
  .offset-both-l3 { margin-inline: var(--offset-3); }
}

 
 .chip.active{
    background-color: var(--secondary-container) !important; 
    border: none; font-weight: bold; /* Facultatif : rendre le texte plus visible */
 }

/* Redéfinissez les propriétés spécifiques */
span.ayah {
   letter-spacing: normal;   /* LOT 24 : jamais d'espacement de lettres sur de l'arabe (ligatures lam+alif) */
   word-spacing: var(--espaceMot);
}
* { 

/* margin: revert;	 */

}

/* les labels au dessus de select , couleur */
.field.label>:is(label.active,:focus+label,[placeholder]:not(:placeholder-shown)+label,select+label) {
    color: var(--secondary-container);
    z-index: 1;
    margin-left: -0.5rem;
    /* line-height: 0; */
    block-size: 1.5rem; /* réduction de la taille pour que je puisse cliqué sur l'option, sinon le block valeur est 'au dessus' a cause de zindex 1 */
}

/* les petitsm aterial icons sur les select, couleur */
 .index1 {    z-index: 1 !important;   }

  .field>select {    cursor: pointer;   }   /* Rajout pour avoir la petite main */

/* plus de fond grisé lors de modal */
.overlay.off.active {	opacity: 0; visibility:hidden;}

/* le menu SELECT FONT de bas en haut */
menu.bottom2top	{	
    inset-inline-start: auto;
    bottom: 37em;
      max-block-size: 32em;
    border-radius: 1em;
}
menu.bottom2top li	{	
    min-block-size: min-content;
}

menu#fontSelect > a, menu#reciterSelect > a {
      margin-block-start: 0;
}
/* // LE CHECK SUR LES ITEMS DES MENU */
menu#fontSelect > a > i,  menu#reciterSelect > a > i {  color: mediumseagreen;  }

/* CSS pour masquer et animer le drawer */
#menu {  background: var(--backgroundDrawer);}

header.primary {   z-index:20; }

/* Style BeerCSS pour le menu déroulant haut-droite (3 points) et l'option Zoom côte à côte */
#topNavBar menu {
  z-index: 100;
}





@media (max-width: 600px) {
    
    /* Pas de marge latérales du tableau sur mobile */
    main.responsive.max {
        padding-inline: 0;
    }
}

/* ─── Audit UX/UI « mise en page » (2026-09-26) — détail : audit/AUDIT_UX_UI_mise_en_page.md ───────────── */
/* Barre du bas : hauteur M3 d'une bottom app bar (80 dp) au lieu de 90 px ; son contenu mesure 62 px au plus.
   js/ajustement-police.js relit sa hauteur : la place gagnée revient à la page. */
#reglagesNavBar { block-size: 5rem; }

/* Barre du haut : titre en « title large » M3 (22 px) dès que la place le permet */
@media (min-width: 600px) { #topNavBar h6 { font-size: 1.375rem; } }
/* ≤ 399 px : à 320 px la barre dépassait de 5 px (bouton « ⋮ » rogné) → marges M3 de 8 px, bouton Sommaire resserré.
   LOT 59-iOS : 374 → 399 px — le « ⋮ » sortait de l’écran à 375 px (iPhone SE, mini : 18 px) et 390 px (iPhone 12 à 16 : 3 px) */
@media (max-width: 399px) {
    #topNavBar { padding-inline: 0.5rem; }
    #topNavBar > nav { min-inline-size: 0; }
    #topNavBar h6 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Rangée des modes : icône des puces repliées centrée aussi en RTL (page.css compense l'écart par margin-right, physique) */
#choixMode .chip:not(.active) i { margin-right: 0; margin-inline-end: -0.5rem; }

/* Précédent / Suivant : cibles tactiles de 48 px (M3) ; le champ de page prend la même hauteur */
#reglPageNum input#pageNum { block-size: 3rem; }
@media (orientation: portrait) and (max-width: 600px) {
    #navDefault > #pageSuiv, #navDefault > #pagePrec { block-size: 3rem; }
}

/* RTL (ourdou) : seule l'interface passe en miroir, pas le moushaf. Page suivante à gauche, mot de réclame en bas
   à gauche, double page « 50 | 49 » dans l'ordre du livre, comme en français (le balayage, js/balayage.js,
   ne dépend pas du sens). Avant : flèches, en-tête/pied de page et pages de la double page inversés. */
[dir="rtl"] #navDefault,
[dir="rtl"] :is(#tableContainer, #tableContainerBis) > :is(.table-header, .table-footer) { direction: ltr; }
[dir="rtl"] #doublePage { flex-direction: row; }

/* Thème sombre : mot de réclame vert foncé (#006400) à 2,3:1 sur le fond → vert 300 Material (≈ 9:1) */
body.dark :is(#tableContainer, #tableContainerBis) > .table-footer > span:first-child { color: #81c784; }

/* Tiroir : un libellé long passe à la ligne au lieu de décaler son interrupteur ; chevrons en miroir en RTL */
#menu .list > li > .max { white-space: normal; min-inline-size: 0; }
[dir="rtl"] #menu .list > li > .max + i,
[dir="rtl"] #dialogReglages .regl-liste > li > .max + i { transform: scaleX(-1); }

/* LOT 36 (T200, T203) — barre du haut */
#topNavBar .bouton-double-page { cursor: pointer; }
/* LOT 55 : visible sur tous les écrans ; double page = fond marqué, page simple = bouton neutre (icône d'état, js/double-page.js) */
#topNavBar .bouton-double-page.actif { background-color: color-mix(in srgb, var(--on-primary) 22%, transparent); }
#topNavBar .bouton-bascule-mode { font-weight: 600; gap: 6px; padding-inline: 14px 16px; block-size: 2.5rem; }
#topNavBar .bouton-bascule-mode > i { font-size: 1.3rem; }
@media (max-width: 360px) { #topNavBar .bouton-bascule-mode .libelle-bascule { display: none; } #topNavBar .bouton-bascule-mode { padding-inline: 10px; } }

/* LOT 36 (T206, T201) — groupes pliants du menu de gauche et du panneau de réglages */
details.groupe-menu > summary { display: flex; align-items: center; gap: 12px; padding: 8px 4px; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--on-surface); border-radius: 8px; }
details.groupe-menu > summary > .max { flex: 1 1 auto; }
details.groupe-menu > summary > i:first-child { color: var(--primary); }
details.groupe-menu > summary::-webkit-details-marker { display: none; }
details.groupe-menu > summary:hover { background-color: color-mix(in srgb, var(--primary) 8%, transparent); }
details.groupe-menu > summary > .chevron { transition: transform var(--speed2, .2s); }
details.groupe-menu[open] > summary > .chevron { transform: rotate(180deg); }
details.groupe-menu > .list { margin-block: 0 4px; }
details.groupe-menu .groupe-contenu { display: flex; flex-direction: column; gap: 8px; padding: 4px 4px 12px; }
#dialogReglages { inline-size: min(26rem, 100vw); }
#dialogReglages .group > button { flex: 1 1 0; }
#dialogReglages .chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* LOT 38 (P5) : écrans tactiles — BeerCSS affiche l'infobulle d'un bouton au :hover, qui reste « collé » après un appui
   (« Mémo », « Partager.. », « Groupement de versets » restaient affichés sur l'en-tête). Les boutons portent un libellé
   ou un aria-label ; les infobulles des mots et versets (classe .active, posée en JS) ne sont pas concernées. */
@media (hover: none) {
  :is(button, .button, a, .chip, label, li, nav > div) > .tooltip:not(.active) { display: none !important; }
}

/* LOT 38 (P27) : notes personnelles — versets et mots annotés soulignés en pointillés */
#pageQourane .ayah.a-note, #pageQouraneBis .ayah.a-note { text-decoration: underline dotted var(--primary); text-underline-offset: 0.35em; text-decoration-thickness: 2px; }
.mot-wrapper.a-note > .mot-mam { text-decoration: underline dotted var(--primary); text-underline-offset: 0.3em; text-decoration-thickness: 2px; }
#dialogNote { inline-size: min(34rem, 94vw); }
#dialogNote textarea { min-block-size: 10rem; font-size: 1rem; line-height: 1.5; }
#listeNotes .note-extrait { opacity: 0.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }

/* LOT 38 (P28) : vocabulaire */
#listeVocab .vocab-ligne { gap: 12px; align-items: center; border-bottom: 1px solid var(--outline-variant); }
#listeVocab .vocab-ar, #revisionVocab .vocab-carte-ar { font-family: var(--font_family_versets), serif; }
#listeVocab .vocab-ar { font-size: 1.7rem; min-inline-size: 4.5rem; text-align: center; }
#listeVocab .vocab-meta { opacity: 0.75; }
#revisionVocab .vocab-carte-ar { font-size: 3.2rem; line-height: 2; text-align: center; margin-block: 12px; }
#revisionVocab .vocab-reponse { margin-block: 8px 16px; display: flex; flex-direction: column; gap: 4px; }
#revisionVocab nav { gap: 8px; flex-wrap: wrap; }
#compteurVocab { position: static; transform: none; }

/* LOT 38 : l'attribut hidden doit toujours masquer — BeerCSS donne display: inline-flex aux boutons, ce qui l'emportait
   (bouton « Voir la réponse » ou « Supprimer » affichés alors que masqués). */
[hidden] { display: none !important; }

/* LOT 38 (P29) : recherche */
#topNavBar .bouton-recherche { display: none; }
@media (min-width: 600px) { #topNavBar .bouton-recherche { display: inline-flex; } }
#dialogRecherche { inline-size: min(44rem, 100vw); max-block-size: 90vh; display: flex; flex-direction: column; }
#dialogRecherche[open] { display: flex; }
#dialogRecherche .field { margin-block: 4px 8px; }
#dialogRecherche #champRecherche { font-size: 1.2rem; }
#dialogRecherche .choix-recherche { justify-content: flex-start; margin-block: 0 4px; }
#dialogRecherche article { flex: 1 1 auto; min-block-size: 0; max-block-size: 65vh; }
#resultatsRecherche .resultat-ligne { gap: 10px; align-items: center; border-bottom: 1px solid var(--outline-variant); }
#resultatsRecherche .resultat-ref { min-inline-size: 6.5rem; font-weight: 600; color: var(--primary); }
#resultatsRecherche .resultat-ar { font-family: var(--font_family_versets), serif; font-size: 1.45rem; line-height: 1.8; }
#resultatsRecherche mark { background: color-mix(in srgb, var(--primary) 25%, transparent); color: inherit; border-radius: 3px; padding-inline: 1px; }

/* LOT 38 (P30) : tafsir */
#dialogTafsir .tafsir-texte { line-height: 1.7; }
#dialogTafsir .tafsir-texte p[dir="rtl"], #dialogTafsir .tafsir-texte h6[dir="rtl"] { font-family: var(--font_family_versets), 'Amiri', serif; font-size: 1.15rem; line-height: 2; }
#dialogTafsir .tafsir-titre { margin: 12px 0 4px; color: var(--primary); }
#dialogTafsir .tafsir-source, #dialogTafsir .tafsir-note { opacity: 0.75; }

/* LOT 38 (P31) : suivi de mémorisation */
#contenuProgression .hifz-resume { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
#contenuProgression .hifz-barre { inline-size: 100%; }
#contenuProgression .hifz-page-courante { padding: 10px 12px; border-radius: 12px; background: var(--surface-container); margin-bottom: 8px; }
#contenuProgression .hifz-page-courante nav { gap: 6px; margin-top: 6px; }
#contenuProgression .hifz-dues { display: flex; flex-wrap: wrap; gap: 6px; }
#contenuProgression .hifz-djouz { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
#contenuProgression .hifz-juz { position: relative; block-size: 2rem; border-radius: 6px; overflow: hidden; background: var(--surface-container-high);
    display: grid; place-items: center; font-size: 0.8rem; }
#contenuProgression .hifz-juz::before { content: ''; position: absolute; inset: auto 0 0 0; block-size: calc(var(--r, 0) * 100%); background: color-mix(in srgb, var(--primary) 45%, transparent); }
#contenuProgression .hifz-juz span { position: relative; }
#contenuProgression .hifz-juz.complet { outline: 2px solid var(--primary); }
#compteurHifz { position: static; transform: none; }

/* LOT 38 (P33) : signets nommés, reprise */
#listeSignets .signet-nom { inline-size: 100%; font-size: 1rem; padding: 4px 8px; border: 1px solid var(--outline); border-radius: 8px; background: var(--surface); color: var(--on-surface); }
#listeSignets .reprise-ligne { border-bottom: 1px solid var(--outline-variant); font-weight: 600; }

/* LOT 38 (P34) : écran d'accueil */
/* LOT 41 : plein écran (dialog.max BeerCSS), contenu centré et limité en largeur pour rester lisible sur PC */
#contenuAccueil { max-inline-size: 60rem; margin-inline: auto; }
#contenuAccueil .accueil-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9rem, 42vw), 1fr)); gap: 8px; }
#contenuAccueil .accueil-tuile { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; block-size: auto; min-block-size: 3.5rem; padding: 8px 10px;
    border-radius: 14px; background: var(--surface-container); color: var(--on-surface); text-align: start; position: relative; margin: 0; }
#contenuAccueil .accueil-tuile:hover { background: var(--surface-container-high); }
#contenuAccueil .accueil-tuile > i { flex: none; }
#contenuAccueil .accueil-tuile-txt { flex: 1 1 auto; align-items: flex-start; display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; white-space: normal; line-height: 1.25; }
#contenuAccueil .accueil-badge { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; transform: none; }
#contenuAccueil .accueil-verset { margin-top: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--outline-variant); }
#contenuAccueil .accueil-verset .row { gap: 8px; align-items: center; }
#contenuAccueil .accueil-verset-ar { font-family: var(--font_family_versets), serif; font-size: 1.6rem; line-height: 2.1; text-align: center; margin: 8px 0 4px; }
#contenuAccueil .accueil-verset-tr { margin: 0; opacity: 0.85; }
#contenuAccueil .accueil-choix { margin-top: 12px; }
@media (max-width: 600px) {
  /* LOT 41 : une carte par ligne, icône à gauche et texte à droite (avant : 2 colonnes, icône au-dessus) */
  #contenuAccueil .accueil-grille { grid-template-columns: 1fr; gap: 8px; }
  #dialogAccueil header h5 { font-size: 1.4rem; }
}

/* LOT 41 : tiroir #menu adapté au mode (body[data-affichage], js/modeManager.js:majBoutonMode) :
   sous-titres = mode verset ; annotations et sélection du texte = mot-à-mot */
body:not([data-affichage="mam"]) #menu .seul-mam,
body[data-affichage="mam"] #menu .seul-verset { display: none !important; }

/* ─── LOT 60-UX — étape 1 : en-tête, tiroir, réglages, tablettes ─────────────────────────────────────────────────── */
/* U02 : sous 600 px, « Partager » quitte la barre (encombrée) pour le menu ⋮ ; au-delà, l'entrée du menu disparaît */
@media (max-width: 599px) { #topNavBar .bouton-partager { display: none; } }
@media (min-width: 600px) { #topNavBar .entree-partager { display: none; } }
/* U03 : en-tête du tiroir compact (une ligne : logo, nom, replier) ; l'icône « replier » suit le côté du tiroir en RTL */
#menu > .tete-tiroir { padding: 0; margin: 0 0 4px; min-block-size: 0; }
#menu > .tete-tiroir > nav { gap: 12px; min-block-size: 3.5rem; }
#menu > .tete-tiroir h6 { margin: 0; }
[dir="rtl"] #menu .bouton-replier > i { transform: scaleX(-1); }
/* U06 : aides des réglages — interligne serré (classe BeerCSS tiny-line), ton atténué ; un libellé long passe à la
   ligne au lieu de pousser son interrupteur hors du panneau (« Indice : première lettre… » était coupé) */
.aide-reglage { color: var(--on-surface-variant); }
#dialogReglages .list > li > .max { white-space: normal; min-inline-size: 0; }
#dialogReglages .list > li > .switch { flex: none; }
/* U05 : tablettes et grands écrans hors paysage compact (≥ 600 px) — précédent / suivant aux bords de l'écran, n° de
   page au centre ; barre du bas : actions réparties comme la barre de navigation BeerCSS des mobiles
   (nav.bottom : justify-content space-around), sur une largeur lisible */
@media (min-width: 600px) {
    #navDefault { justify-content: space-between; margin-inline: 0; padding-inline: 12px; inline-size: 100%; max-inline-size: none; }
    #navDefault > #pageSuiv, #navDefault > #pagePrec { flex: 0 0 auto; inline-size: 7rem; margin: 0; }
    #reglagesNavBar > nav > .page.active { display: flex; flex: 1 1 auto; max-inline-size: 44rem; justify-content: space-around; align-items: center; }
}

/* ─── LOT 60-UX — étape 2 : tiroir « Réglages » du mode actif (js/reglages.js) ──────────────────────────────────── */
#dialogReglages > header { padding-inline: 0; background: inherit; z-index: 2; }
#dialogReglages > header > nav { min-block-size: 3.5rem; gap: 8px; }
#dialogReglages > header h5 { margin: 0; font-size: 1.25rem; }
/* Onglets = modes de la rangée des modes : icône au-dessus du libellé, quatre onglets égaux */
#dialogReglages .onglets-reglages { justify-content: stretch; margin-inline: -1rem; }
#dialogReglages .onglets-reglages > a { flex: 1 1 0; flex-direction: column; gap: 2px; padding-block: 6px; min-inline-size: 0; font-size: 0.8rem; }
#dialogReglages .onglets-reglages > a > i { margin: 0; }
#dialogReglages .onglets-reglages > a > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 100%; }
/* Sous-titres de section (M3 « list subheader ») et lignes : icône · libellé + aide · contrôle */
:is(#dialogReglages, #menu) .regl-titre { display: flex; align-items: center; gap: 6px; margin: 16px 0 2px; font-size: 0.8rem; font-weight: 700;
    letter-spacing: .02em; text-transform: uppercase; color: var(--primary); }
:is(#dialogReglages, #menu) .regl-titre > i { font-size: 1rem; }
:is(#dialogReglages, #menu) .regl-note { margin: 12px 0 0; }
:is(#dialogReglages, #menu) .regl-liste { margin: 0; }
:is(#dialogReglages, #menu) .regl-liste > li { min-block-size: 3.25rem; padding-block: 6px; gap: 12px; align-items: center; font-size: .9375rem; }
:is(#dialogReglages, #menu) .regl-liste label:not(.switch, .slider) { font-size: inherit; color: inherit; }
:is(#dialogReglages, #menu) .regl-liste > li > .max { white-space: normal; min-inline-size: 0; }
:is(#dialogReglages, #menu) .regl-liste > li > .switch, :is(#dialogReglages, #menu) .regl-liste > li > nav.group { flex: none; }
:is(#dialogReglages, #menu) .regl-liste > li > i:first-child { color: var(--on-surface-variant); align-self: center; }
:is(#dialogReglages, #menu) .regl-liste > li.regl-choix > i:first-child, :is(#dialogReglages, #menu) .regl-liste > li.regl-curseur > i:first-child { align-self: flex-start; margin-block-start: 6px; }
:is(#dialogReglages, #menu) .regl-choix > .max { display: flex; flex-direction: column; gap: 6px; }
:is(#dialogReglages, #menu) .regl-entete { display: flex; align-items: center; gap: 8px; min-block-size: 2rem; }
:is(#dialogReglages, #menu) .regl-entete > .max { flex: 1 1 auto; }
:is(#dialogReglages, #menu) .regl-entete output { font-weight: 700; color: var(--primary); min-inline-size: 2.5rem; text-align: end; }
:is(#dialogReglages, #menu) .regl-curseur .slider { margin: 0; inline-size: 100%; }
:is(#dialogReglages, #menu) .regl-champ > .field { margin: 0; }
#dialogReglages .group > button { flex: 1 1 0; min-inline-size: 0; }
:is(#dialogReglages, #menu) .regl-choix .group { inline-size: 100%; }
:is(#dialogReglages, #menu) .regl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
/* Contenu propre au mode d'affichage (body[data-affichage], js/modeManager.js) */
body:not([data-affichage="mam"]) #dialogReglages .seul-mam,
body[data-affichage="mam"] #dialogReglages .seul-verset { display: none !important; }
/* Tiroir gauche : thème en tête du groupe Affichage */
#menu .choix-theme { margin: 4px 0 8px; }
#menu .choix-theme > button { flex: 1 1 0; min-inline-size: 0; }

/* U10 : pastille « réglages » accolée au mode actif (même dessin que l'ancien bouton réglages de Mémo) */
#choixMode .groupe-mode { display: inline-flex; }
#choixMode .groupe-mode > .chip-mode:not(.active) { border-radius: 9999px !important; }
#choixMode .groupe-mode > .chip-mode:not(.active) + .chip-reglages { display: none; }
#choixMode .chip-reglages { padding-inline: .5rem; background-color: var(--secondary-container); color: var(--on-secondary-container); }
/* En-tête : le bouton double page n'a d'effet qu'à partir de 1100 px (js/double-page.js) : en dessous, il laisse sa place */
@media (max-width: 1099px) { #topNavBar .bouton-double-page { display: none; } }

/* U16 : ≥ 1100 px, tiroir ancré à droite — pas de voile, la page reste utilisable et se recentre dans la place restante */
@media (min-width: 1100px) {
    body.reglages-ancre #dialogReglages { inline-size: 24rem; box-shadow: none; border-inline-start: 1px solid var(--outline-variant); border-radius: 0; }
    body.reglages-ancre .overlay:has(+ #dialogReglages) { display: none !important; }
    body.reglages-ancre > main, body.reglages-ancre > #reglagesNavBar, body.reglages-ancre > #topNavBar { margin-inline-end: 24rem; }
    /* Navigation flottante du paysage PC (page.css, LOT 41) : la flèche de droite reste à gauche du tiroir */
    body.reglages-ancre #navDefault > #pagePrec { right: calc(24rem + 12px); }
    /* RTL : BeerCSS ouvre dialog.right à gauche → les flèches se décalent de l'autre côté */
    [dir="rtl"] body.reglages-ancre #navDefault > #pagePrec { right: 12px; }
    [dir="rtl"] body.reglages-ancre #navDefault > #pageSuiv { left: calc(24rem + 12px); }
}

/* ─── LOT 60-UX — étape 3 : tiroir gauche « Navigation et affichage », menu ⋮ allégé ───────────────────────────── */
@media (min-width: 600px) { #topNavBar .entree-recherche { display: none; } }
@media (max-width: 1099px) { #menu .seul-grand-ecran { display: none !important; } }
#menu .groupe-contenu > nav.group { inline-size: 100%; margin: 0; }
#menu .groupe-contenu > nav.group > button { flex: 1 1 0; min-inline-size: 0; }
#menu .langue-interface { margin: 8px 0 12px; }
#menu .regl-liste > li > label.max { white-space: normal; }
/* LOT 60-UX : boutons segmentés des tiroirs — non choisis en « on-surface » (M3) : en thème sombre, le bleu primaire
   hérité donnait ≈ 2,3:1 sur le fond du tiroir ; le choix courant garde le remplissage secondary-container (.fill) */
:is(#menu, #dialogReglages) nav.group > button:not(.fill) { color: var(--on-surface); }
:is(#menu, #dialogReglages) nav.group > button:not(.fill) > i { color: var(--on-surface-variant); }
/* ─── LOT 60-UX — étape 5 : audit UX/UI (skill oiloil-ui-ux-guide) ─────────────────────────────────────────────── */
/* Raccourcis Accueil / Réglages du tiroir : ≈ 2:1 en thème sombre (bleu primaire foncé) → texte on-surface */
#menu .menu-raccourcis > button { color: var(--on-surface); }
#menu .menu-raccourcis > button > i { color: var(--primary); }
/* Séparateurs du tiroir homogènes (le premier était un trait quasi noir) */
#menu hr { border-color: var(--outline-variant); }
/* Choix segmentés à libellés longs (« Décor historique », agencements) : retour à la ligne, hauteurs égales */
:is(#menu, #dialogReglages) nav.group > button { white-space: normal; min-block-size: 2.75rem; block-size: auto; line-height: 1.2; padding-block: 6px; }
/* Rangée des modes sous 400 px : marges resserrées (la puce Mémo touchait le bord à 375 px) */
@media (max-width: 399px) {
    #choixMode > nav.chips { gap: 4px; }
    #choixMode .chip-mode { padding-inline: .6rem; }
}
/* RTL (ourdou, persan, pachto) : la flèche des listes passe à gauche ; le texte de la valeur ne doit pas passer dessous */
[dir="rtl"] :is(#dialogReglages, #menu) .field.suffix > select { padding-left: 3rem; padding-right: 1rem; }