/* ══════════════════════════════════════════════════════════════════════════
   assets/oac_lecteur.css — Habillage du lecteur de documents.

   Une page de lecture, et rien d'autre : un bandeau mince qui ne bouge pas,
   et les feuillets sur un fond sombre, comme des pages posées sur un pupitre.
   Les couleurs et la police sont celles du site, reprises de style.css par
   ses variables ; les valeurs de repli permettent au lecteur de rester
   présentable si la feuille principale venait à manquer.
   ══════════════════════════════════════════════════════════════════════════ */

.lecteur-corps {
    margin     : 0;
    background : var(--n-2a2b2e-f, #2a2b2e);
    color      : var(--couleur-texte, var(--n-23252b-e, #23252b));
    font-family: var(--police-principale, Georgia, "Times New Roman", serif);
}

/* ── LE BANDEAU ──────────────────────────────────────────────────────────
   « sticky » et non « fixed » : il garde sa place dans le flux, donc rien
   n'est recouvert et aucune marge compensatoire n'est à calculer. */

.lecteur-barre {
    position     : sticky;
    top          : 0;
    z-index      : 20;
    display      : flex;
    flex-direction: column;
    gap          : .45rem;
    background   : var(--couleur-primaire, var(--n-2c3e6b-f, #2c3e6b));
    color        : var(--n-ffffff-e, #fff);
    padding      : .6rem 1rem;
    padding-top  : calc(.6rem + env(safe-area-inset-top, 0px));
    box-shadow   : 0 2px 8px var(--n-rgb-000000-35-o, rgba(0, 0, 0, .35));
}

/* Deux rangs plutôt qu'un seul qui se replie : sur téléphone, l'ordre des
   éléments reste alors celui qu'on a voulu, et non celui que le repli décide.
   Rang du haut : le retour et les commandes. Rang du bas : le titre et le
   téléchargement. */
.lecteur-rang {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : .75rem;
    min-width      : 0;
}

.lecteur-retour {
    flex          : 0 0 auto;
    display       : inline-flex;
    align-items   : center;
    /* Aucun écart : l'espace fine insécable du libellé suffit, et l'écart de
       la boîte s'ajoutait à elle en un blanc disgracieux. */
    gap           : 0;
    color         : var(--n-ffffff-e, #fff);
    text-decoration: none;
    font-size     : .9rem;
    font-weight   : 600;
    border        : 1px solid var(--n-rgb-ffffff-45-b, rgba(255, 255, 255, .45));
    border-radius : 4px;
    padding       : .35rem .7rem;
    white-space   : nowrap;
}

.lecteur-retour:hover,
.lecteur-retour:focus {
    background  : var(--n-rgb-ffffff-15-f, rgba(255, 255, 255, .15));
    border-color: var(--n-ffffff-b, #fff);
}

.lecteur-titre {
    flex        : 1 1 auto;
    margin      : 0;
    font-size   : 1rem;
    font-weight : 600;
    line-height : calc(1.3 * var(--compacite, 1));
    min-width   : 0;
    overflow    : hidden;
    text-overflow: ellipsis;
    white-space : nowrap;
}

/* Le nom de l'auteur suit le titre, d'une encre plus discrete : il precise,
   il ne concurrence pas. */
.lecteur-auteur {
    font-weight: 400;
    opacity    : .8;
}

.lecteur-outils {
    flex       : 0 0 auto;
    display    : flex;
    align-items: center;
    gap        : .4rem;
    font-size  : .85rem;
}

/* La loupe du bouton de recherche est dessinée, non écrite : aucun caractère
   de loupe n'est rendu de la même façon d'un appareil à l'autre, et plusieurs
   ne sont pas des loupes du tout. */
.lecteur-outils button svg {
    display       : block;
    width         : 1.05em;
    height        : 1.05em;
    stroke        : currentColor;
    stroke-width  : 2;
    fill          : none;
    stroke-linecap: round;
}

.lecteur-outils button {
    font        : inherit;
    font-weight : 700;
    line-height : calc(1 * var(--compacite, 1));
    color       : var(--n-ffffff-e, #fff);
    background  : var(--n-rgb-ffffff-12-f, rgba(255, 255, 255, .12));
    border      : 1px solid var(--n-rgb-ffffff-35-b, rgba(255, 255, 255, .35));
    border-radius: 4px;
    padding     : .35rem .6rem;
    cursor      : pointer;
    min-width   : 2.2rem;
}

.lecteur-outils button:hover,
.lecteur-outils button:focus {
    background: var(--n-rgb-ffffff-28-f, rgba(255, 255, 255, .28));
}

.lecteur-compteur,
.lecteur-zoom-valeur {
    font-variant-numeric: tabular-nums;
    opacity   : .9;
    min-width : 3.6rem;
    text-align: center;
}

.lecteur-telecharger {
    color          : var(--n-ffffff-e, #fff);
    text-decoration: underline;
    font-size      : .85rem;
    white-space    : nowrap;
}

/* ── LES FEUILLETS ────────────────────────────────────────────────────── */

.lecteur-pages {
    display       : block;
    overflow-x    : auto;
    padding       : 1rem .5rem calc(2rem + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
}

.lecteur-feuillet {
    position     : relative;
    margin       : 0 auto 1rem;
    background   : var(--n-ffffff-f, #fff);
    box-shadow   : 0 2px 10px var(--n-rgb-000000-45-o, rgba(0, 0, 0, .45));
    overflow     : hidden;
}

/* Tant qu'un feuillet n'est pas dessiné, il reste blanc : une page qui
   attend, et non un trou. */
.lecteur-feuillet canvas {
    display: block;
    width  : 100%;
    height : 100%;
}

.lecteur-message {
    margin    : 2rem auto;
    max-width : 32rem;
    padding   : 1rem 1.2rem;
    background: var(--n-fbf3e2-f, #fbf3e2);
    border    : 1px solid var(--n-ddc98f-b, #ddc98f);
    border-radius: 4px;
    color     : var(--n-5c4a16-e, #5c4a16);
    font-size : .95rem;
    line-height: calc(1.5 * var(--compacite, 1));
    text-align: center;
}

@media (max-width: 30rem) {

    /* Sur les écrans les plus étroits, le bouton de retour se réduit au seul
       mot qui compte : la flèche et « Retour » disent déjà où l'on va. */
    .lecteur-retour__suite { display: none; }

    .lecteur-titre        { font-size: .88rem; }
    .lecteur-outils       { gap: .3rem; font-size: .8rem; }
    .lecteur-outils button { padding: .3rem .5rem; min-width: 2rem; }
    .lecteur-compteur,
    .lecteur-zoom-valeur  { min-width: 3rem; }
}

/* ── LA RECHERCHE PAR MOT ────────────────────────────────────────────────
   Le troisième rang du bandeau, replié tant qu'on ne cherche rien : le
   lecteur qui vient lire n'a pas à voir l'outil de celui qui vient chercher. */

.lecteur-rang--recherche {
    gap: .5rem;
}

/* SANS CETTE LIGNE, LE TIROIR NE SE REPLIE PAS : la règle « display: flex »
   de .lecteur-rang l'emporte sur le « display: none » que le navigateur
   attache à l'attribut « hidden ». Le défaut est classique, et invisible à la
   lecture du gabarit, où l'attribut est pourtant bien posé. */
.lecteur-rang[hidden] {
    display: none;
}

.lecteur-forme {
    display: flex;
    gap    : .4rem;
    flex   : 1 1 auto;
    min-width: 0;
}

.lecteur-forme input[type="search"] {
    flex         : 1 1 auto;
    min-width    : 0;
    font         : inherit;
    font-size    : .9rem;
    color        : var(--n-23252b-e, #23252b);
    background   : var(--n-ffffff-f, #fff);
    border       : 1px solid var(--n-rgb-ffffff-5-b, rgba(255, 255, 255, .5));
    border-radius: 4px;
    padding      : .35rem .6rem;
}

.lecteur-forme__valider {
    font         : inherit;
    font-size    : .85rem;
    font-weight  : 600;
    color        : var(--n-ffffff-e, #fff);
    background   : var(--n-rgb-ffffff-12-f, rgba(255, 255, 255, .12));
    border       : 1px solid var(--n-rgb-ffffff-35-b, rgba(255, 255, 255, .35));
    border-radius: 4px;
    padding      : .35rem .7rem;
    cursor       : pointer;
    white-space  : nowrap;
}

.lecteur-forme__valider:hover,
.lecteur-forme__valider:focus { background: var(--n-rgb-ffffff-28-f, rgba(255, 255, 255, .28)); }

/* « Effacer » est du même dessin que « Chercher », d'une encre plus discrète :
   c'est un geste de retrait, il n'a pas à réclamer l'œil autant que celui qui
   lance la recherche. */
.lecteur-forme__effacer {
    font-weight: 400;
    opacity    : .85;
}

.lecteur-resultat {
    font-size : .82rem;
    opacity   : .9;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.lecteur-parcours {
    display: flex;
    gap    : .3rem;
    flex   : 0 0 auto;
}

.lecteur-parcours button {
    font         : inherit;
    font-weight  : 700;
    line-height  : calc(1 * var(--compacite, 1));
    color        : var(--n-ffffff-e, #fff);
    background   : var(--n-rgb-ffffff-12-f, rgba(255, 255, 255, .12));
    border       : 1px solid var(--n-rgb-ffffff-35-b, rgba(255, 255, 255, .35));
    border-radius: 4px;
    padding      : .35rem .55rem;
    cursor       : pointer;
}

.lecteur-parcours button:hover,
.lecteur-parcours button:focus { background: var(--n-rgb-ffffff-28-f, rgba(255, 255, 255, .28)); }

/* ── LE VOILE ET SES TACHES ──────────────────────────────────────────────
   Le voile couvre exactement le feuillet ; les taches y sont posées en
   pourcentages, et suivent donc le zoom sans être recalculées. Le mélange
   « multiply » laisse le texte lisible sous la couleur, au lieu de le
   recouvrir. */

.lecteur-voile {
    position      : absolute;
    inset         : 0;
    pointer-events: none;
}

/* ── LA COUCHE DE TEXTE SÉLECTIONNABLE ──────────────────────────────────
   Posée par assets/oac_lecteur.js sur les seuls documents téléchargeables,
   pour que le dictionnaire de lecture et la copie vers le Bloc-notes
   trouvent un mot à saisir. Le texte y est transparent, exactement à
   l'aplomb des lettres peintes sur la toile : on ne voit que la page, et
   l'on sélectionne pourtant du texte.

   Ces règles reprennent celles de la visionneuse de PDF.js (pdf_viewer.css),
   que l'outil TextLayer attend : il pose sur chaque morceau sa hauteur de
   police (--font-height), son étirement (--scale-x) et sa rotation
   (--rotate), et sur la couche l'échelle de la page (--total-scale-factor)
   et la plus petite taille de police que le navigateur accepte
   (--min-font-size). La largeur et la hauteur de la couche sont forcées à
   celles du feuillet : le calcul que PDF.js inscrit de son côté demande une
   fonction de style récente, que tous les navigateurs ne connaissent pas. */
.lecteur-texte {
    position     : absolute;
    inset        : 0;
    width        : 100% !important;
    height       : 100% !important;
    overflow     : clip;
    opacity      : 1;
    line-height  : 1;
    text-align   : initial;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    forced-color-adjust: none;
    transform-origin: 0 0;
    caret-color  : transparent;
    z-index      : 0;
    --min-font-size    : 1;
    --text-scale-factor: calc(var(--total-scale-factor, 1) * var(--min-font-size));
    --min-font-size-inv: calc(1 / var(--min-font-size));
}

.lecteur-texte span,
.lecteur-texte br {
    color           : transparent;
    position        : absolute;
    white-space     : pre;
    cursor          : text;
    transform-origin: 0% 0%;
}

.lecteur-texte > :not(.markedContent),
.lecteur-texte .markedContent span:not(.markedContent) {
    z-index    : 1;
    --font-height: 0;
    font-size  : calc(var(--text-scale-factor) * var(--font-height));
    --scale-x  : 1;
    --rotate   : 0deg;
    transform  : rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}

.lecteur-texte .markedContent {
    display: contents;
}

.lecteur-texte span[role="img"] {
    user-select: none;
    cursor     : default;
}

/* La sélection : le bleu de la charte, assez léger pour qu'on lise les
   lettres peintes au travers. */
.lecteur-texte ::selection {
    background: rgba(44, 62, 107, .30);
}

.lecteur-texte br::selection {
    background: transparent;
}

.lecteur-texte .endOfContent {
    display    : block;
    position   : absolute;
    inset      : 100% 0 0;
    z-index    : 0;
    cursor     : default;
    user-select: none;
}

.lecteur-texte.selecting .endOfContent {
    top: 0;
}

/* LA TACHE EST TRANSLUCIDE, ET NON MÉLANGÉE. La première version employait
   « mix-blend-mode: multiply », qui laisse voir le texte sous la couleur.
   Chrome l'applique, SAFARI L'IGNORE au-dessus d'une toile, et la tache y
   devenait opaque : le mot cherché disparaissait sous son propre surlignage.
   Constaté par Athanase Cléron de Sélène sur iPhone le 9 septembre 2026. Une couleur simplement
   translucide ne dépend d'aucune subtilité de navigateur et donne le même
   résultat partout. */
.lecteur-tache {
    position     : absolute;
    background   : var(--n-rgb-ffd633-42-f, rgba(255, 214, 51, .42));
    border-radius: 2px;
}

.lecteur-tache--courante {
    background: var(--n-rgb-ff8a00-40-f, rgba(255, 138, 0, .40));
    outline   : 1px solid var(--n-rgb-c26a12-85-b, rgba(194, 106, 18, .85));
}

/* ── ÉCRAN ÉTROIT, SUITE ─────────────────────────────────────────────────
   CE BLOC EST EN FIN DE FEUILLE, ET IL DOIT Y RESTER. Les règles de la
   recherche sont écrites plus haut... non : plus haut se trouve le premier
   bloc « écran étroit », et les règles de la recherche viennent APRÈS lui.
   Une requête de média n'ajoute aucune spécificité : placées dans le premier
   bloc, ces trois lignes étaient donc écrasées par les règles générales de la
   recherche, et n'avaient aucun effet. Défaut trouvé et corrigé le 9 septembre
   2026, avant livraison. */
@media (max-width: 30rem) {

    .lecteur-forme           { gap: .3rem; }
    .lecteur-forme__valider  { padding: .35rem .5rem; font-size: .8rem; }
    .lecteur-rang--recherche { gap: .35rem; }
}


/* ── LE SOMMAIRE ───────────────────────────────────────────────────────
   Ajouté le 21 septembre 2026. Même rang du bandeau que la recherche, même
   repli, et les deux ne s'ouvrent jamais ensemble : sur un téléphone, deux
   rangs dépliés mangeraient la moitié de l'écran.

   IL DOIT POUVOIR ÊTRE LONG. Le rituel des Loges de Perfection porte
   cinquante et une entrées, celui du premier degré dix-sept. La liste défile
   donc dans sa propre hauteur, bornée à la moitié de l'écran, et le document
   reste visible derrière : on choisit en voyant où l'on est. */

/* MÊME PIÈGE QUE POUR LE TIROIR DE RECHERCHE, ET IL A DÉJÀ COÛTÉ UNE FOIS :
   le bouton du sommaire naît caché, et le resterait si une règle de la barre
   lui posait un affichage. Aucune ne le fait aujourd'hui ; cette ligne le
   garantit pour demain. */
.lecteur-outils button[hidden] {
    display: none;
}

.lecteur-rang--plan {
    gap          : 0;
    flex-direction: column;
    align-items  : stretch;
}

.lecteur-plan {
    display      : flex;
    flex-direction: column;
    width        : 100%;
    max-height   : 50vh;
    overflow-y   : auto;
    overscroll-behavior: contain;
    border-top   : 1px solid var(--n-rgb-ffffff-35-b, rgba(255, 255, 255, .35));
    padding-top  : .3rem;
}

.lecteur-plan__entree {
    display      : flex;
    align-items  : baseline;
    gap          : .5rem;
    width        : 100%;
    text-align   : left;
    font         : inherit;
    font-size    : .86rem;
    color        : var(--n-ffffff-e, #fff);
    background   : transparent;
    border       : 0;
    border-radius: 4px;
    padding      : .32rem .5rem;
    cursor       : pointer;
}

.lecteur-plan__entree:hover,
.lecteur-plan__entree:focus {
    background: var(--n-rgb-ffffff-12-f, rgba(255, 255, 255, .12));
}

/* Le retrait dit la profondeur, et rien d'autre : ni puce, ni numérotation.
   Une sous-entrée est d'une encre légèrement retenue, pour que l'œil saisisse
   l'articulation du rituel avant d'en lire le détail. */
.lecteur-plan__entree--sous {
    padding-left: 1.6rem;
    font-size   : .81rem;
    opacity     : .88;
}

.lecteur-plan__titre {
    flex: 1 1 auto;
}

/* Le numéro de feuillet, en chiffres de même chasse pour que la colonne
   s'aligne d'elle-même. */
.lecteur-plan__page {
    flex     : 0 0 auto;
    font-size: .78rem;
    opacity  : .7;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 30rem) {
    .lecteur-plan          { max-height: 60vh; }
    .lecteur-plan__entree  { font-size: .82rem; padding: .3rem .4rem; }
    .lecteur-plan__entree--sous { padding-left: 1.2rem; }
}

/* ── LE VOILE D'ATTENTE ──────────────────────────────────────────────────
   Posé le 22 septembre 2026. Un document de dix méga-octets met plusieurs
   secondes à venir ; jusque-là, le pupitre restait vide et le lecteur
   pouvait croire que son clic s'était perdu. Le voile occupe donc le
   pupitre, avec le triangle du site et le mot « Chargement… », et il se
   retire quand le premier feuillet est DESSINÉ, non quand le document est
   reçu : un cadre blanc n'est pas une page.

   IL NE COUVRE PAS LE BANDEAU. Son z-index est de 10, celui du bandeau de
   20 : le bouton « Retour » demeure visible et cliquable tout le temps de
   l'attente, ce qui est la première chose dont a besoin celui qui s'est
   trompé de document.

   IL EST OPAQUE, ET DE LA COULEUR EXACTE DU PUPITRE. Il ne se voit donc
   pas comme un panneau posé par-dessus la page, mais comme le pupitre
   lui-même, encore vide. Le jeton est celui de .lecteur-corps : le voile
   suit le mode nuit sans qu'une ligne soit à ajouter ailleurs.

   Le triangle, son animation et l'exception qu'il fait au réglage
   « animations réduites » viennent de assets/style.css : ce bloc ne fait
   qu'accorder ses deux couleurs à un fond sombre, où le bleu pâle et l'or
   discret du fond clair ne se verraient pas. */

.lecteur-attente {
    position       : fixed;
    inset          : 0;
    z-index        : 10;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : .9rem;
    padding        : 1rem;
    background     : var(--n-2a2b2e-f, #2a2b2e);
    color          : var(--n-ffffff-e, #fff);
    font-family    : var(--police-principale, Georgia, "Times New Roman", serif);
    font-size      : 1.25rem;
    font-weight    : 700;
    text-align     : center;
}

.lecteur-attente .voile-delta {
    width : 4rem;
    height: 4rem;
}

/* Sur le fond sombre du pupitre, le contour dormant se dit en blanc très
   atténué, et l'arc en or clair. Cet or-ci ne reçoit pas de jeton de nuit :
   le fond sur lequel il se pose est déjà sombre de jour comme de nuit, il
   n'a donc aucune raison de changer. */
.lecteur-attente .voile-delta-fond {
    stroke        : var(--n-ffffff-e, #fff);
    stroke-opacity: .22;
}
.lecteur-attente .voile-delta-arc {
    stroke: #d8b75f;
}

/* UN POURCENTAGE ET UNE BARRE ONT ÉTÉ ESSAYÉS ICI LE 22 SEPTEMBRE 2026, ET
   RETIRÉS LE MÊME JOUR : voir le commentaire d'assets/oac_lecteur.js, à
   l'endroit où le voile est bâti, pour la raison. Le triangle qui tourne
   reste le seul repère de l'attente. */