/* ==========================================================================================================================================
   HUD des readers : panneau de reglages superpose + interface de lecture tactile.
   Charge par TOUS les readers (site, preview PSD admin / publique, lecteur local) apres reader.css, mc-shared.css et psd-reader.css.
   Ne contient que de la presentation : les reglages (valeurs, limites, memorisation, evenements) restent ceux de Read.vue / psd-reader.js.
   Comportement (gestes, etat, accessibilite) : public/js/mc-reader-theme.js.

   Sommaire
     1. Variables du HUD
     2. Coque du panneau (superposition, ouverture / fermeture, bouton croix / languette)
     3. Indicateurs flottants et barre de pages (bureau)
     4. Interface de lecture tactile (telephone / tablette) : deux niveaux, barre superieure, progression, feuille de commentaires
     5. Panneau : composants (titre, chapitres, actions, reglages : modes, interrupteur, curseurs, sens, reinitialisation, calques PSD)
     6. Tactile : champs a 16 px, cibles plus larges
     7. Verrou du defilement en double page (html[data-mc-lock], pose par mc-reader-theme.js)
   « #reader#reader » double l'identifiant : uniquement pour l'emporter sur les regles equivalentes de reader.css, Read.vue et psd-reader.css.
   « html[data-mc-input="touch"] » : appareil tactile sans souris (voir mc-reader-theme.js) ; la media query (hover:none)+(pointer:coarse) couvre le chargement
   avant le script pour la seule languette.
   ========================================================================================================================================== */

/* ---- 1. Variables du HUD ------------------------------------------------------------------------------------------------------------- */
#reader#reader{--mc-pw:clamp(272px,14vw,300px);--mc-dock:var(--mc-pw)}
#reader#reader.hide-sidebar{--mc-dock:0px}
@media(max-width:991.98px){#reader#reader{--mc-pw:min(340px,calc(100vw - 48px))}}
html[data-mc-input="touch"] #reader#reader{--mc-pw:min(340px,78vw)}

/* ---- 2. Coque du panneau ------------------------------------------------------------------------------------------------------------- */
/* Les pages ne laissent plus de place au menu : le panneau se superpose, il ne reserve aucune colonne. */
#reader#reader.layout-horizontal #reader-main,#reader#reader.layout-horizontal #reader-images,#reader#reader.layout-horizontal #banner_top,#reader#reader.layout-horizontal #banner_bottom{padding-right:0!important}
/* Couche fixe et transparente : seuls le panneau ouvert et le bouton recoivent les gestes. */
#reader#reader #reader-controls-wrapper{position:fixed!important;inset:var(--mc-reader-header-height,0px) 0 0 auto!important;width:var(--mc-pw)!important;max-width:100vw;height:auto;z-index:1010;display:flex;flex-wrap:nowrap;margin:0;padding:0;background:transparent!important;border:0;overflow:visible!important;pointer-events:none;transition:none!important}
#reader#reader #reader-controls{pointer-events:auto;flex:1 1 100%!important;width:100%;max-width:100%;min-width:0;height:100%;min-height:0;box-sizing:border-box;margin:0;padding:52px env(safe-area-inset-right,0px) calc(16px + env(safe-area-inset-bottom,0px)) 0;background:var(--mc-surface,#fff);color:var(--mc-ink,inherit);border-left:1px solid var(--mc-line,rgba(128,128,128,.35));box-shadow:-16px 0 40px rgba(0,0,0,.26);overflow-x:hidden;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;visibility:visible;opacity:1;transform:none;transition:transform .22s cubic-bezier(.22,.61,.36,1),opacity .18s ease,visibility 0s}
#reader#reader #reader-controls>*{flex-shrink:0}
/* Ferme : hors ecran, invisible, ni cliquable ni focusable (visibility). */
#reader#reader.hide-sidebar #reader-controls{visibility:hidden;opacity:0;transform:translateX(100%);pointer-events:none;overflow:hidden!important;transition:transform .22s cubic-bezier(.22,.61,.36,1),opacity .18s ease,visibility 0s .22s}
/* Petits ecrans : tous les reglages restent dans le panneau (qui defile), le bouton « Reglages » n'a plus d'objet. */
@media(max-width:991.98px){
    #reader#reader #reader-controls-mode{display:flex!important}
    #reader#reader #settings-button{display:none!important}
}
/* Panneau plus etroit : boutons d'action sur deux colonnes (le libelle ne se coupe plus). */
#reader#reader #reader-controls-actions>.row{flex-wrap:wrap}
#reader#reader #reader-controls-actions .btn{flex:1 1 calc(50% - 8px)!important;min-width:0!important;width:auto!important;min-height:38px}
/* Bouton : croix en haut a gauche du panneau ouvert ; onglet « reglages » au bord droit quand il est ferme (bureau). */
#reader#reader #reader-controls-collapser{position:absolute;z-index:3;top:6px;left:8px;display:flex!important;align-items:center;justify-content:center;flex:none;box-sizing:border-box;width:40px;height:40px;min-width:0;margin:0;padding:0;border:0!important;border-radius:50%;background:var(--mc-surface,#fff);color:var(--mc-ink,inherit);box-shadow:inset 0 0 0 1px var(--mc-line,rgba(128,128,128,.35));cursor:pointer;pointer-events:auto;transition:background .15s,opacity .15s}
#reader#reader #reader-controls-collapser:hover{background:var(--mc-soft,rgba(128,128,128,.16))}
#reader#reader #reader-controls-collapser:focus-visible{outline:2px solid var(--mc-accent,#9c8cda);outline-offset:2px}
#reader#reader #reader-controls-collapser .fa-caret-right{transform:none!important;font-size:17px;line-height:1}
#reader#reader #reader-controls-collapser .fa-caret-right::before{content:"\f00d"}
#reader#reader.hide-sidebar #reader-controls-collapser{top:50%;left:auto;right:env(safe-area-inset-right,0px);width:34px;height:64px;border-radius:14px 0 0 14px;transform:translateY(-50%);opacity:.8;box-shadow:inset 0 0 0 1px var(--mc-line,rgba(128,128,128,.35)),-6px 0 18px rgba(0,0,0,.24)}
#reader#reader.hide-sidebar #reader-controls-collapser:hover,#reader#reader.hide-sidebar #reader-controls-collapser:focus-visible{opacity:1}
#reader#reader.hide-sidebar #reader-controls-collapser .fa-caret-right::before{content:"\f1de"}
@media(pointer:coarse){
    #reader#reader #reader-controls-collapser{width:44px;height:44px}
    #reader#reader.hide-sidebar #reader-controls-collapser{width:40px;height:72px}
}
/* Appareil tactile sans souris : la languette du panneau ferme est masquee (elle recouvrait la lecture). Le bouton reste dans l'arbre
   d'accessibilite (clavier, lecteur d'ecran) mais n'a plus de surface tactile (1 px, transparent, sans pointer-events) et n'apparait que pendant un
   focus clavier. La croix du panneau ouvert n'est pas concernee (meme element, regles limitees a l'etat ferme). */
@media(hover:none) and (pointer:coarse){
    html:not([data-mc-input="mouse"]) #reader#reader.hide-sidebar #reader-controls-collapser:not(:focus-visible){position:absolute!important;top:auto!important;left:auto!important;right:0!important;bottom:0!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;opacity:0!important;box-shadow:none!important;transform:none!important;pointer-events:none!important}
}
html[data-mc-input="touch"] #reader#reader.hide-sidebar #reader-controls-collapser:not(:focus-visible){position:absolute!important;top:auto!important;left:auto!important;right:0!important;bottom:0!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;opacity:0!important;box-shadow:none!important;transform:none!important;pointer-events:none!important}
/* Bureau : la meme poignee accompagne le bord externe du panneau, sans changer de hauteur.
   Le transform utilise sa largeur reelle et la meme courbe que #reader-controls.
   Le mode tactile conserve la croix en haut et la languette fermee masquee. */
@media(hover:hover) and (pointer:fine){
    html:not([data-mc-input="touch"]) #reader#reader #reader-controls-collapser{top:50%;left:-34px;right:auto;width:34px;height:64px;border-radius:14px 0 0 14px;transform:translate(0,-50%);opacity:1;box-shadow:inset 0 0 0 1px var(--mc-line,rgba(128,128,128,.35)),-6px 0 18px rgba(0,0,0,.24);transition:transform .22s cubic-bezier(.22,.61,.36,1),background .15s}
    html:not([data-mc-input="touch"]) #reader#reader.hide-sidebar #reader-controls-collapser{transform:translate(var(--mc-pw),-50%)}
    html:not([data-mc-input="touch"]) #reader#reader #reader-controls-collapser .fa-caret-right::before{content:"\f1de"}
}
/* Une souris connectee a un appareil hybride active explicitement ce meme comportement. */
html[data-mc-input="mouse"] #reader#reader #reader-controls-collapser{top:50%;left:-34px;right:auto;width:34px;height:64px;border-radius:14px 0 0 14px;transform:translate(0,-50%);opacity:1;box-shadow:inset 0 0 0 1px var(--mc-line,rgba(128,128,128,.35)),-6px 0 18px rgba(0,0,0,.24);transition:transform .22s cubic-bezier(.22,.61,.36,1),background .15s}
html[data-mc-input="mouse"] #reader#reader.hide-sidebar #reader-controls-collapser{transform:translate(var(--mc-pw),-50%)}
html[data-mc-input="mouse"] #reader#reader #reader-controls-collapser .fa-caret-right::before{content:"\f1de"}
@media(prefers-reduced-motion:reduce){#reader#reader #reader-controls,#reader#reader #reader-controls-collapser{transition:none!important}}

/* ---- 3. Indicateurs flottants et barre de pages (bureau) --------------------------------------------------------------------------------- */
/* Ils se decalent a gauche du panneau ouvert (ce ne sont pas des pages). */
@media(min-width:992px){
    #reader#reader #reader-page-counter,#reader#reader #comments-fab,#reader#reader #report-fab{right:calc(var(--mc-dock) + 18px)}
    #reader#reader.layout-horizontal #reader-page-bar{left:0;right:var(--mc-dock)}
    #reader#reader.layout-horizontal .reader-load-icon{left:calc(50% - 50px)}
}

/* ---- 4. Interface de lecture tactile ------------------------------------------------------------------------------------------------------ */
/* Niveau 0 « degage » : fine ligne de progression. Niveau 1 « commandes » (html[data-mc-ui="on"]) : barre superieure + progression segmentee.
   Tout est en position: fixed et sous le panneau (z-index 1010) : la page ne bouge pas, le panneau recouvre la barre comme dans la reference. */
#mc-touch-ui{display:none;--mc-hud-accent:var(--mc-accent,#8170c3);--mc-hud-accent-soft:rgba(129,112,195,.5);--mc-hud-bg:var(--mc-surface,#fff)}
html[data-mc-input="touch"] #mc-touch-ui:not([hidden]){display:block}
/* Aucun bouton / indicateur flottant permanent sur tactile : les commandes passent par la barre, le panneau et la feuille de commentaires. */
html[data-mc-input="touch"] #reader-page-counter,html[data-mc-input="touch"] #comments-fab,html[data-mc-input="touch"] #report-fab,html[data-mc-input="touch"] #reader-page-bar,html[data-mc-input="touch"] #pagebar-button{display:none!important}
.mc-touch-only{display:none!important}
html[data-mc-input="touch"] .mc-touch-only{display:flex!important}
/* Le selecteur de page (<992 px sur le site) reste disponible quelle que soit la largeur de l'appareil tactile. */
html[data-mc-input="touch"] #reader-controls-chapters .d-lg-none{display:flex!important}

#mc-tbar{position:fixed;z-index:1005;top:var(--mc-reader-header-height,0px);left:0;right:0;box-sizing:border-box;display:flex;align-items:center;gap:0;min-height:56px;padding:6px max(6px,env(safe-area-inset-right,0px)) 6px max(6px,env(safe-area-inset-left,0px));background:var(--mc-hud-bg);background:color-mix(in srgb,var(--mc-hud-bg) 93%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--mc-line,rgba(128,128,128,.3));color:var(--mc-ink,inherit);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .18s ease,transform .2s ease,visibility 0s .2s}
html[data-mc-ui="on"] #mc-tbar{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .2s ease,visibility 0s}
.mc-tb-btn{position:relative;flex:0 0 40px;width:40px;height:44px;min-width:40px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;border-radius:12px;background:transparent;color:inherit;font-size:18px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mc-tb-btn[hidden]{display:none}
/* Boutons secondaires de la barre : un peu plus etroits (36 px) pour laisser la place au titre. */
#mc-tb-file,#mc-tb-report,#mc-tb-fs,#mc-tb-pagebar,#mc-tb-comments{flex-basis:36px;width:36px;min-width:36px}
#mc-tb-pagebar[aria-pressed="false"]{opacity:.55}
.mc-tb-btn:active{background:var(--mc-soft,rgba(128,128,128,.18))}
.mc-tb-btn:focus-visible{outline:2px solid var(--mc-hud-accent);outline-offset:-2px}
#mc-tb-badge{position:absolute;top:3px;right:2px;min-width:18px;height:18px;box-sizing:border-box;padding:0 5px;border-radius:9px;background:var(--mc-hud-accent);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
#mc-tb-badge[hidden]{display:none}
#mc-tb-title{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:0 6px}
#mc-tb-t1,#mc-tb-t2{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}
#mc-tb-t1{color:var(--mc-hud-accent);font-size:14px;font-weight:800}
#mc-tb-t2{font-size:13px;font-weight:600;opacity:.82}

#mc-pbar{position:fixed;z-index:1005;left:0;right:0;bottom:0;box-sizing:border-box;display:flex;align-items:center;gap:12px;height:3px;padding:0;color:var(--mc-ink,inherit);pointer-events:none;transition:height .2s ease,padding .2s ease}
html[data-mc-ui="on"] #mc-pbar{height:calc(48px + env(safe-area-inset-bottom,0px));padding:0 max(14px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(14px,env(safe-area-inset-left,0px));background:var(--mc-hud-bg);background:color-mix(in srgb,var(--mc-hud-bg) 93%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--mc-line,rgba(128,128,128,.3));pointer-events:auto}
#mc-pb-cur,#mc-pb-total{flex:0 0 auto;min-width:2ch;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}
html:not([data-mc-ui="on"]) #mc-pb-cur,html:not([data-mc-ui="on"]) #mc-pb-total{display:none}
/* Reglage « barre de pages » (body.mc-hide-pagebar, deja utilise par la barre du bureau) : la progression du bas est retiree, fine ligne comprise. */
body.mc-hide-pagebar #mc-pbar{display:none}
/* Piste : une seule zone tactile (32 px) dessinee en segments par un degrade repete ; --cnt = nombre de pages, --p0/--p1 = page(s) courante(s). */
#mc-pb-track{--cnt:1;--p0:0%;--p1:0%;--n:1;--gap:0px;--sh:3px;--seg:var(--mc-line,rgba(128,128,128,.4));position:relative;flex:1 1 auto;min-width:0;height:3px;outline:0;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;background:linear-gradient(90deg,var(--seg) 0 calc(100% - var(--gap)),transparent 0) 0 50%/calc(100%/var(--n)) var(--sh) repeat-x}
html[data-mc-ui="on"] #mc-pb-track{--n:var(--cnt);--gap:2px;--sh:10px;--seg:rgba(128,128,128,.32);height:32px}
#mc-pb-fill,#mc-pb-thumb{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--c) 0 calc(100% - var(--gap)),transparent 0) 0 50%/calc(100%/var(--n)) var(--sh) repeat-x}
#mc-pb-fill{--c:var(--mc-hud-accent);clip-path:inset(0 calc(100% - var(--p1)) 0 0)}
html[data-mc-ui="on"] #mc-pb-fill{--c:var(--mc-hud-accent-soft)}
#mc-pb-thumb{--c:var(--mc-hud-accent);clip-path:inset(0 calc(100% - var(--p1)) 0 var(--p0))}
html:not([data-mc-ui="on"]) #mc-pb-thumb{display:none}
#mc-pb-track:focus-visible{outline:2px solid var(--mc-hud-accent);outline-offset:2px;border-radius:4px}
#mc-touch-ui[data-dir="rtl"] #mc-pbar{flex-direction:row-reverse}
#mc-touch-ui[data-dir="rtl"] #mc-pb-track{transform:scaleX(-1)}
/* Bouton d'acces clavier / lecteur d'ecran : equivalent de l'appui au centre. Invisible (1 px) sauf pendant un focus clavier. */
#mc-ui-toggle{position:fixed;z-index:1006;top:calc(var(--mc-reader-header-height,0px) + 8px);left:8px;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none;white-space:nowrap}
#mc-ui-toggle:focus-visible{width:auto;height:40px;padding:0 16px;clip-path:none;opacity:1;pointer-events:auto;border-radius:20px;background:var(--mc-hud-bg);color:var(--mc-ink,inherit);box-shadow:inset 0 0 0 2px var(--mc-hud-accent),0 6px 18px rgba(0,0,0,.3);font-size:14px;font-weight:700}

/* Feuille de commentaires (fonction existante du reader du site) : feuille depuis le bas, croix, arriere-plan assombri, defilement interne. */
html[data-mc-input="touch"] #reader-comments{top:auto;left:0;right:0;bottom:0;width:auto;max-width:none;height:auto;min-height:44vh;max-height:calc(100% - var(--mc-reader-header-height,0px) - 56px);box-sizing:border-box;border-left:0;border-top:1px solid var(--bs-border-color,var(--mc-line,rgba(128,128,128,.3)));border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -14px 44px rgba(0,0,0,.4),0 0 0 100vmax rgba(0,0,0,.52);animation:mc-sheet-in .26s cubic-bezier(.22,.61,.36,1)}
html[data-mc-input="touch"] #reader-comments .rc-body{min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
html[data-mc-input="touch"] #reader-comments .rc-close{min-width:44px;min-height:44px}
@keyframes mc-sheet-in{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){
    #mc-tbar,#mc-pbar,.mc-tb-btn{transition:none!important}
    html[data-mc-input="touch"] #reader-comments{animation:none!important}
}

/* ---- 5. Panneau : composants ------------------------------------------------------------------------------------------------------------- */
/* Une seule grammaire visuelle pour tout le panneau (site, preview PSD admin / publique, lecteur local) :
   - rythme : 16 px de marge laterale, 12 a 16 px entre blocs, separateurs d'1 px ;
   - controles : hauteur mini 2,75 rem (44 px), rayon 12 px, fond gris translucide (valable en clair comme en sombre), contour d'1 px ;
   - groupe icone + libelle CENTRE ensemble (flex), libelles qui passent a la ligne sans rognage ; tailles en rem (zoom du texte) ;
   - colonnes : grilles « auto-fit » / flex-wrap sur la largeur DU PANNEAU (pas celle de la fenetre) ;
   - aucune hauteur fixe sur les textes ; tout reste dans le defilement interne du panneau (section 2).
   Le balisage et les reglages sont inchanges (Read.vue / psd-reader.js) : seule la presentation change. */
#reader #reader-controls{--hud-line:var(--mc-line,rgba(128,128,128,.32));--hud-accent:var(--mc-accent,#8170c3);--hud-accent-soft:var(--mc-soft,rgba(129,112,195,.16));--hud-field:rgba(128,128,128,.1);--hud-hover:rgba(128,128,128,.18);--hud-r:12px;--hud-ctl:2.75rem;--hud-ico:min(2.75rem,48px);font-size:.9375rem;line-height:1.4;-webkit-tap-highlight-color:transparent}
#reader #reader-controls :is(a,button,label,[role="button"]){-webkit-tap-highlight-color:transparent}
#reader #reader-controls :is(a,button,input,select,[role="button"]):focus-visible{outline:2px solid var(--hud-accent);outline-offset:2px}
body.body-reader #reader .bg-reader-controls{background:var(--mc-surface)!important;color:var(--mc-ink)}
body.body-reader #reader #reader-controls-mode{background:var(--mc-surface);color:var(--mc-ink)}
body.body-reader #reader .form-select{background-color:var(--mc-bg)!important;color:var(--mc-ink);border-color:var(--mc-line)}

/* Retour a l'oeuvre */
#reader #reader-controls #reader-controls-title{padding:4px 16px 8px;text-align:left}
#reader #reader-controls #reader-controls-title .comic-title{display:flex;align-items:center;gap:.625rem;min-height:var(--hud-ctl);margin:0 -8px;padding:.375rem .5rem;border-radius:var(--hud-r);font-size:1rem;font-weight:700;line-height:1.3;overflow-wrap:anywhere;color:var(--hud-accent);text-decoration:none}
#reader #reader-controls #reader-controls-title .comic-title:hover{background:var(--hud-hover)}
#reader #reader-controls #reader-controls-title .comic-title .fa-arrow-left{flex:0 0 auto}

/* Chapitre precedent / liste des chapitres / suivant, puis selecteur de page : grille de 3 colonnes, la page sur sa propre ligne. */
#reader #reader-controls #reader-controls-chapters{display:grid;grid-template-columns:var(--hud-ico) minmax(0,1fr) var(--hud-ico);align-items:center;gap:8px 6px;margin:0;padding:8px 16px}
#reader #reader-controls #reader-controls-chapters>*{width:auto;max-width:none;min-width:0;margin:0;padding:0}
#reader #reader-controls .arrow-link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--hud-ico);min-width:var(--hud-ico);border-radius:var(--hud-r);font-size:1.375rem;line-height:1;color:var(--hud-accent);text-decoration:none}
#reader #reader-controls .arrow-link:hover{background:var(--hud-hover)}
#reader #reader-controls #reader-controls-chapters>.d-lg-none{grid-column:1/-1;display:flex;align-items:center;gap:.75rem}
#reader #reader-controls #reader-controls-chapters>.d-lg-none::before{content:"Page";flex:0 0 auto;font-size:.8125rem;font-weight:700;opacity:.7}
#reader #reader-controls .form-select{display:block;width:100%;min-width:0;height:auto;min-height:var(--hud-ctl);padding:.5rem 2.25rem .5rem .75rem;border-radius:var(--hud-r);font-size:.9375rem;line-height:1.3;text-overflow:ellipsis}

/* Titre du chapitre, telechargements, note */
#reader #reader-controls #reader-controls-groups{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 6px;margin:0;padding:12px 16px;text-align:center}
#reader #reader-controls #reader-controls-groups>p,#reader #reader-controls #reader-controls-groups>small{flex:0 0 100%;margin:0 0 4px;overflow-wrap:anywhere}
#reader #reader-controls #reader-controls-groups>p{font-size:1.0625rem;font-weight:800;line-height:1.3}
#reader #reader-controls #reader-controls-groups>small{font-size:.8125rem;font-weight:400;opacity:.7}
#reader #reader-controls #reader-controls-groups>a:not(.btn),#reader #reader-controls #reader-controls-groups>span.fa,#reader #reader-controls #reader-controls-groups>span.fas{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:10px;font-size:1.05rem;text-decoration:none}
#reader #reader-controls #reader-controls-groups>a:not(.btn):hover{background:var(--hud-hover)}
#reader #reader-controls #reader-controls-groups>span.text-secondary{opacity:.45}
#reader #reader-controls #reader-controls-groups>.btn{flex:0 0 100%;margin:6px 0}
#reader #reader-controls .mc-rating{display:flex;flex:0 0 100%;flex-direction:column;align-items:center;gap:4px;margin-top:6px}
/* Les 5 etoiles se partagent la largeur disponible (jamais de debordement, meme avec un texte tres agrandi). */
#reader #reader-controls .mc-stars{display:grid;grid-template-columns:repeat(5,minmax(0,2.75rem));justify-content:center;gap:2px;width:100%}
#reader #reader-controls .mc-star{width:100%;height:auto;min-height:2.5rem;aspect-ratio:1/1;font-size:1.35rem;border-radius:10px}
#reader #reader-controls .mc-rating-text{font-size:.8125rem;line-height:1.35;text-align:center}
#reader #reader-controls .mc-rating-text strong{font-size:.875rem}

/* Boutons d'action : 2 colonnes quand la largeur le permet, le dernier occupe toute la ligne s'il est seul. */
#reader #reader-controls #reader-controls-actions{margin:0;padding:8px 16px}
#reader #reader-controls #reader-controls-actions>.row{display:flex;flex-wrap:wrap;gap:8px;width:100%;max-width:none;margin:0;padding:0}
#reader #reader-controls #reader-controls-actions .btn{display:inline-flex;flex:1 1 6.5rem!important;align-items:center;justify-content:center;gap:.5rem;width:auto!important;min-width:0!important;min-height:var(--hud-ctl);margin:0!important;padding:.5rem .75rem;border:1px solid var(--hud-line);border-radius:var(--hud-r);background:var(--hud-field);color:inherit;box-shadow:none;font-size:.875rem;font-weight:600;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;opacity:1}
#reader #reader-controls #reader-controls-actions .btn:hover,#reader #reader-controls #reader-controls-actions .btn:active,#reader #reader-controls #reader-controls-actions .btn.active{background:var(--hud-hover);color:inherit;border-color:var(--hud-line)}
#reader #reader-controls #reader-controls-actions #pagebar-button[aria-pressed="false"]{opacity:.7}
#reader #reader-controls #reader-controls-actions .btn>.fa-fw,#reader #reader-controls #reader-controls-actions .btn>.fas,#reader #reader-controls #reader-controls-actions .btn>.far{flex:0 0 auto;margin:0;line-height:1}
#reader #reader-controls #reader-controls-actions .btn>.d-lg-inline,#reader #reader-controls #reader-controls-actions .btn>.mc-act-label{display:inline!important;min-width:0;text-wrap:balance;overflow-wrap:anywhere}

/* Reglages de lecture */
#reader #reader-controls #reader-controls-mode.rs-panel{width:100%;padding:0;gap:0}
#reader #reader-controls .rs-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:16px 16px 4px;font-size:1.0625rem;font-weight:800;line-height:1.3}
#reader #reader-controls .rs-heading .fas{flex:0 0 auto;font-size:1rem;opacity:.55}
/* Le filet de separation est un ombrage interne (une bordure haute serait traversee par la legende du fieldset). */
#reader #reader-controls .rs-section{position:relative;min-width:0;margin:0;padding:16px;border:0;box-shadow:inset 0 1px 0 var(--hud-line)}
#reader #reader-controls .rs-heading+.rs-section{box-shadow:none}
/* Legende flottante (comme Bootstrap) : elle reste dans le flux au lieu de chevaucher le bord haut du fieldset. */
#reader #reader-controls .rs-section>legend{float:left;width:100%;margin:0 0 12px;padding:0;font-size:.8rem;font-weight:800;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;opacity:.65}
/* Zoom / luminosite : le libelle de la ligne fait deja office de titre (la legende reste pour les lecteurs d'ecran). */
#reader #reader-controls .rs-section>legend~*{clear:left}
#reader #reader-controls .rs-section.reader-zoom-control>legend,#reader #reader-controls .rs-section.reader-brightness-control>legend{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#reader #reader-controls .rs-section>p{margin:0;font-size:.9375rem}

/* Mode d'affichage : cartes icone au-dessus du libelle ; 3 colonnes tant que la largeur du panneau le permet. */
#reader #reader-controls .rs-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(3.75rem,1fr));gap:8px}
#reader #reader-controls .rs-mode{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;min-width:0;min-height:4.25rem;margin:0;padding:.625rem .25rem;border:1px solid var(--hud-line);border-radius:var(--hud-r);background:var(--hud-field);color:inherit;font-size:.8125rem;font-weight:600;line-height:1.2;text-align:center;overflow-wrap:anywhere;cursor:pointer;transition:background .15s,border-color .15s}
#reader #reader-controls .rs-mode>.fas{font-size:1.1rem;line-height:1;opacity:.8}
#reader #reader-controls .rs-mode:hover{background:var(--hud-hover)}
body.body-reader #reader .rs-mode.is-selected,body.body-reader #reader .rs-direction .is-selected{background:var(--mc-soft,rgba(129,112,195,.16));border-color:var(--mc-accent,#8170c3);color:var(--mc-ink)}
#reader #reader-controls .rs-mode.is-selected{box-shadow:inset 0 0 0 1px var(--hud-accent)}
#reader #reader-controls .rs-mode input,#reader #reader-controls .rs-direction input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
#reader #reader-controls .rs-mode:focus-within,#reader #reader-controls .rs-direction label:focus-within{outline:2px solid var(--hud-accent);outline-offset:2px}

/* Interrupteur « Decaler les pages » */
#reader #reader-controls .rs-offset{margin-top:14px;padding-top:14px;border-top:1px dashed var(--hud-line)}
#reader #reader-controls .rs-switch-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--hud-ctl);margin:0;font-size:.9375rem;font-weight:600;cursor:pointer}
#reader #reader-controls .rs-switch-row>span:first-child{flex:1 1 auto;min-width:0}
#reader #reader-controls .rs-switch-row.is-disabled{opacity:.55;cursor:not-allowed}
#reader #reader-controls .rs-switch-row input{position:absolute;right:0;top:50%;width:2.75rem;height:1.625rem;margin:0;opacity:0;transform:translateY(-50%);cursor:inherit}
#reader #reader-controls .rs-switch{position:relative;flex:0 0 auto;width:2.75rem;height:1.625rem;border:1px solid var(--hud-line);border-radius:999px;background:rgba(128,128,128,.28);transition:background .15s}
#reader #reader-controls .rs-switch::after{content:"";position:absolute;left:3px;top:50%;width:1.125rem;height:1.125rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transform:translateY(-50%);transition:transform .15s}
#reader #reader-controls .rs-switch-row input:checked+.rs-switch{background:var(--hud-accent);border-color:var(--hud-accent)}
#reader #reader-controls .rs-switch-row input:checked+.rs-switch::after{transform:translate(1.125rem,-50%)}
#reader #reader-controls .rs-switch-row input:focus-visible+.rs-switch{outline:2px solid var(--hud-accent);outline-offset:3px}
#reader #reader-controls .rs-offset p{margin:8px 0 0;font-size:.8125rem;line-height:1.45;opacity:.7}

/* Zoom et luminosite : libelle + valeur, puis [-] curseur [+], puis retour a 100 %. */
#reader #reader-controls .rs-zoom-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;font-size:.9375rem;font-weight:700}
#reader #reader-controls .rs-zoom-heading label{flex:1 1 auto;min-width:0;margin:0;overflow-wrap:anywhere}
#reader #reader-controls .rs-zoom-heading output{flex:0 0 auto;min-width:3.5rem;padding:.2rem .6rem;border:1px solid var(--hud-line);border-radius:999px;background:var(--hud-field);font-size:.8125rem;font-weight:700;font-variant-numeric:tabular-nums;text-align:center}
#reader #reader-controls .rs-zoom-track{display:grid;grid-template-columns:var(--hud-ico) minmax(0,1fr) var(--hud-ico);align-items:center;gap:8px}
#reader #reader-controls .rs-zoom-track button{display:inline-flex;align-items:center;justify-content:center;width:var(--hud-ico);height:var(--hud-ico);padding:0;border:1px solid var(--hud-line);border-radius:var(--hud-r);background:var(--hud-field);color:inherit;font-size:1.375rem;line-height:1;cursor:pointer}
#reader #reader-controls .rs-zoom-track input[type="range"]{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;height:var(--hud-ico);margin:0;padding:0;background:transparent;cursor:pointer;accent-color:var(--hud-accent)}
#reader #reader-controls input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:rgba(128,128,128,.38)}
#reader #reader-controls input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1.5rem;height:1.5rem;margin-top:calc((6px - 1.5rem)/2);border:3px solid var(--mc-surface,#fff);border-radius:50%;background:var(--hud-accent);box-shadow:0 1px 4px rgba(0,0,0,.35)}
#reader #reader-controls input[type="range"]::-moz-range-track{height:6px;border:0;border-radius:999px;background:rgba(128,128,128,.38)}
#reader #reader-controls input[type="range"]::-moz-range-thumb{width:1.5rem;height:1.5rem;box-sizing:border-box;border:3px solid var(--mc-surface,#fff);border-radius:50%;background:var(--hud-accent);box-shadow:0 1px 4px rgba(0,0,0,.35)}
#reader #reader-controls .rs-text-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:2.5rem;margin:6px 0 0;padding:.4rem .75rem;border:0;border-radius:var(--hud-r);background:transparent;color:inherit;font-size:.8125rem;font-weight:600;text-align:center;opacity:.75;cursor:pointer}
#reader #reader-controls .rs-text-button:hover:not(:disabled){background:var(--hud-hover);opacity:1}

/* Sens de lecture : deux cartes cote a cote, ou empilees quand le panneau est etroit. */
#reader #reader-controls .rs-direction{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.25rem,1fr));gap:8px}
#reader #reader-controls .rs-direction label{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.5rem;min-width:0;min-height:var(--hud-ctl);margin:0;padding:.5rem .75rem;border:1px solid var(--hud-line);border-radius:var(--hud-r);background:var(--hud-field);color:inherit;font-size:.8125rem;font-weight:600;line-height:1.25;text-align:center;overflow-wrap:anywhere;cursor:pointer}
#reader #reader-controls .rs-direction label:hover{background:var(--hud-hover)}
#reader #reader-controls .rs-direction label>.fas{flex:0 0 auto;line-height:1}
#reader #reader-controls .rs-direction label.is-selected{box-shadow:inset 0 0 0 1px var(--hud-accent)}

/* Reinitialiser */
#reader #reader-controls .rs-reset{display:flex;align-items:center;justify-content:center;gap:.5rem;width:calc(100% - 32px);min-height:var(--hud-ctl);margin:4px 16px 8px;padding:.5rem .75rem;border:1px solid var(--hud-line);border-radius:var(--hud-r);background:transparent;color:inherit;font-size:.875rem;font-weight:600;line-height:1.25;text-align:center;cursor:pointer}
#reader #reader-controls .rs-reset .fas{flex:0 0 auto;margin:0;line-height:1}
#reader #reader-controls .rs-reset:hover{background:var(--hud-hover)}
/* Etats desactives : meme lisibilite partout. */
#reader #reader-controls :is(button,input,select):disabled{opacity:.45;cursor:not-allowed}

/* Calques (reader PSD) */
#reader #reader-controls .psd-layer-tools{display:flex;gap:8px;margin:0 0 10px}
#reader #reader-controls .psd-layer-tools button{flex:1 1 0;min-width:0;min-height:2.5rem;padding:.4rem .5rem;border:1px solid var(--hud-line);border-radius:10px;background:var(--hud-field);color:inherit;font-size:.8125rem;font-weight:600;line-height:1.25;text-align:center}
#reader #reader-controls .psd-layer-tools button:hover{background:var(--hud-hover)}
#reader #reader-controls #psd-layers{font-size:.84375rem}
/* Pas de defilement imbrique sur tactile : l'arbre des calques suit le defilement du panneau. */
html[data-mc-input="touch"] #reader #reader-controls #psd-layers{max-height:none;overflow:visible}
@media(pointer:coarse){#reader #reader-controls #psd-layers{max-height:none;overflow:visible}}
#reader #reader-controls #psd-layers li>label{min-height:2.25rem;padding:.25rem .375rem}
#reader #reader-controls .rs-hint{margin:8px 0 0;font-size:.75rem;line-height:1.45;opacity:.7}
#reader #reader-controls #psd-make-chapter{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--hud-ctl);border-radius:var(--hud-r)}

/* Navigation de pages et pied (>= 992 px) */
#reader #reader-controls #reader-controls-pages{padding:8px 16px}
#reader #reader-controls #reader-controls-page-text{font-size:.9375rem;font-weight:700;font-variant-numeric:tabular-nums}
#reader #reader-controls #reader-controls-footer{padding:8px 16px;font-size:.8125rem}

/* Pointeur precis (souris) : fleches et boutons +/- plus compacts, listes en 14 px, pour que le nom du chapitre tienne dans le panneau. */
@media(pointer:fine){
    #reader #reader-controls{--hud-ico:2.25rem}
    #reader #reader-controls .form-select{padding:.5rem 2rem .5rem .625rem;font-size:.875rem}
}

/* ---- 6. Tactile : champs a 16 px minimum (iOS zoomerait la page au focus), cibles plus larges -------------------------------------------- */
html[data-mc-input="touch"] #reader #reader-controls :is(select,.form-select){font-size:max(16px,1rem)}
html[data-mc-input="touch"] #reader-comments :is(.rc-input,.rc-textarea),html[data-mc-input="touch"] #reader-report .rr-input{font-size:max(16px,1rem)}
@media(pointer:coarse){
    #reader #reader-controls .rs-mode{min-height:4.5rem}
}
@media(pointer:coarse){#reader #reader-controls{--hud-ico:min(3rem,52px)}}
html[data-mc-input="touch"] #reader #reader-controls{--hud-ico:min(3rem,52px)}
html[data-mc-input="touch"] #reader #reader-controls .form-select{padding:.5rem 2.25rem .5rem .75rem}
@media(prefers-reduced-motion:reduce){#reader #reader-controls :is(.rs-mode,.rs-switch,.rs-switch::after){transition:none!important}}

/* ---- 7. Verrou du defilement en double page ---------------------------------------------------------------------------------------------- */
/* html[data-mc-lock] n'existe que lorsque la paire de pages est dimensionnee ET tient dans la fenetre (mesure faite par mc-reader-theme.js) : il n'y a alors rien a defiler,
   on retire donc le defilement du document (doigt, molette, barre d'espace, rebond, tirer pour actualiser). Le panneau de reglages, les commentaires et les listes gardent leur
   defilement propre (conteneurs distincts). Pas de touch-action : le pincement-zoom natif reste possible. */
html[data-mc-lock],html[data-mc-lock] body{overflow:hidden;overscroll-behavior-y:none}
/* Axe horizontal : « none » desactive aussi le glisser-deux-doigts « page precedente / suivante » de l'historique sur trackpad (Chrome, Edge) ; on ne le coupe donc qu'au doigt. */
html[data-mc-lock][data-mc-input="touch"],html[data-mc-lock][data-mc-input="touch"] body{overscroll-behavior-x:none}
/* Sur telephone / tablette, 100vh = fenetre avec barres repliees, plus grande que la zone visible : le document debordait de quelques dizaines de pixels (c'est ce que le doigt
   faisait glisser) et la paire, centree dans ce bloc trop haut, pouvait descendre sous le bord visible. Sous verrou, la hauteur de reference est celle de la fenetre visible. */
@supports (height:100dvh){
    html[data-mc-lock] body.body-reader{min-height:100dvh}
    html[data-mc-lock] body.body-reader #reader #reader-main{min-height:calc(100dvh - var(--mc-reader-header-height,0px))}
    html[data-mc-lock] #app{min-height:0}
}