/**
 * Visionneuse PDF Ad'on.
 *
 * Cette feuille porte la structure : positionnement, dimensions, empilement.
 * Les couleurs passent par des variables propres au plugin, dont la valeur par
 * defaut retombe sur les variables de la charte Dungeon Styler quand elles
 * existent. Un site peut donc reteinter la visionneuse sans toucher a ce
 * fichier, en redefinissant --adon-vis-* dans sa feuille SCSS.
 *
 * @package Adon Visionneuse
 * @since   1.0.0
 */

:root {
    --adon-vis-fond: var(--fonce, #181b24);
    --adon-vis-barre: var(--fonce, #181b24);
    --adon-vis-texte: var(--blanc, #ffffff);
    --adon-vis-accent: var(--accent1, #008996);
    --adon-vis-accent-survol: var(--accent1hover, #10b1c0);
    --adon-vis-page: #ffffff;
    --adon-vis-police: var(--fonttextes, sans-serif);
    --adon-vis-rayon: 4px;
    --adon-vis-z: 100000;
}

/* Le defilement de la page derriere la modale donne l'impression que le
   document glisse : on le fige tant qu'elle est ouverte. */
html.adon-visionneuse-ouverte,
html.adon-visionneuse-ouverte body {
    overflow: hidden;
}

.adon-visionneuse {
    position: fixed;
    inset: 0;
    z-index: var(--adon-vis-z);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vmin;
    background: var(--adon-vis-fond);
    font-family: var(--adon-vis-police);
}

.adon-visionneuse[hidden] {
    display: none;
}

.adon-visionneuse__dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1100px;
    height: 100%;
    overflow: hidden;
    background: var(--adon-vis-fond);
    border-radius: var(--adon-vis-rayon);
}

/* Le feuilletage prend toute la largeur : une double page bridee a la largeur
   de lecture confortable d'un texte donnerait un livre minuscule au milieu
   d'un grand vide. C'est un livre, pas une colonne. */
.adon-visionneuse--flip {
    padding: 0;
}

.adon-visionneuse--flip .adon-visionneuse__dialog {
    max-width: none;
    border-radius: 0;
}

/*
 * En feuilletage, la zone de lecture perd son rembourrage et son defilement.
 *
 * Ce n'est pas cosmetique : StPageFlip choisit entre double page et page
 * simple en comparant la largeur de son conteneur au double de la largeur de
 * page. Un rembourrage de 16 px de chaque cote, ou une barre de defilement,
 * suffisent a le faire basculer en page simple sur un ecran pourtant large.
 * Le livre est dimensionne pour tenir entierement : il n'y a rien a faire
 * defiler.
 */
.adon-visionneuse--flip .adon-visionneuse__viewport {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
}

/* ---------------------------------------------------------------- en-tete */

.adon-visionneuse__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--adon-vis-barre);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.adon-visionneuse__title {
    flex: 1 1 12rem;
    margin: 0;
    color: var(--adon-vis-texte);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adon-visionneuse__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
}

.adon-visionneuse__group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.adon-visionneuse__counter {
    min-width: 8ch;
    color: var(--adon-vis-texte);
    font-size: 0.8125rem;
    text-align: center;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- boutons */

.adon-visionneuse__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50px;
    color: var(--adon-vis-texte);
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.adon-visionneuse__btn:hover,
.adon-visionneuse__btn:focus-visible {
    background: var(--adon-vis-accent);
    border-color: var(--adon-vis-accent);
    color: var(--adon-vis-texte);
}

.adon-visionneuse__btn:focus-visible {
    outline: 3px solid var(--adon-vis-accent-survol);
    outline-offset: 2px;
}

.adon-visionneuse__btn[disabled] {
    opacity: 0.35;
    cursor: default;
}

.adon-visionneuse__btn[hidden] {
    display: none;
}

.adon-visionneuse__btn--close {
    border-color: rgba(255, 255, 255, 0.6);
}

/* -------------------------------------------------------------- lecture */

/* Vide, la zone de message ne doit rien occuper — mais elle reste dans le flux
   et dans l'arbre d'accessibilite : une region live masquee n'annonce pas ses
   mises a jour. */
.adon-visionneuse__status {
    margin: 0;
    padding: 0.75rem;
    color: var(--adon-vis-texte);
    font-size: 0.9375rem;
    text-align: center;
}

.adon-visionneuse__status:empty {
    padding: 0;
}

/* position: relative n'est pas cosmetique : c'est ce qui fait de la zone de
   lecture l'ancetre positionne des pages, donc ce qui rend leur offsetTop
   utilisable pour le defilement programme. */
.adon-visionneuse__viewport {
    position: relative;
    flex: 1 1 auto;
    overflow: auto;
    padding: 1rem;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
}

.adon-visionneuse__viewport:focus-visible {
    outline: 3px solid var(--adon-vis-accent-survol);
    outline-offset: -3px;
}

/* En echec, la zone de lecture n'a plus rien a montrer : on la retire pour ne
   pas laisser un grand rectangle vide sous le message d'erreur. */
.adon-visionneuse--echec .adon-visionneuse__viewport {
    display: none;
}

/* ----------------------------------------------- defilement continu */

/*
 * Les pages sont empilees et defilent : pas de bouton a presser pour avancer.
 * Seules celles proches de l'ecran portent un canvas ; les autres gardent
 * leurs dimensions et restent vides. La barre de defilement a donc sa hauteur
 * reelle des le depart, sans que rien ne soit dessine.
 */
.adon-visionneuse__pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.adon-visionneuse__pages[hidden] {
    display: none;
}

.adon-visionneuse__page {
    position: relative;
    background: var(--adon-vis-page);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.adon-visionneuse__canvas {
    display: block;
    max-width: 100%;
}

/* ----------------------------------------------------------- feuilletage */

/*
 * Le livre est dimensionne par le script, pas ici : StPageFlip a besoin de
 * dimensions en pixels pour calculer ses plis. Cette feuille ne fait que le
 * centrer et habiller les feuillets.
 *
 * La feuille de la librairie (stPageFlip.css) est chargee a la demande par le
 * script, au premier passage en feuilletage. Elle porte le positionnement des
 * classes stf__* et n'est pas optionnelle.
 */
.adon-visionneuse__book {
    margin: 0 auto;
}

.adon-visionneuse__book[hidden] {
    display: none;
}

/* Le feuillet a une taille fixe — un livre a des pages de format constant —
   mais la page qu'il recoit peut avoir un autre ratio : couverture portrait,
   double page centrale paysage. Elle est donc centree a l'interieur, avec au
   pire une bande blanche, plutot que rognee. */
.adon-visionneuse__leaf {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--adon-vis-page);
}

.adon-visionneuse__leaf-canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/*
 * Ombre de reliure sur les deux bords verticaux, qui donne l'epaisseur au
 * papier. Symetrique a dessein : distinguer la page de gauche de celle de
 * droite supposerait de s'accrocher aux classes internes de StPageFlip, qui
 * ne sont pas une API et changent d'une version a l'autre.
 */
.adon-visionneuse__leaf::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0) 5%),
        linear-gradient(to left, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0) 5%);
}

@media (prefers-reduced-motion: reduce) {

    .adon-visionneuse__leaf::after {
        content: none;
    }
}

/* --------------------------------------------------------- couche texte */

/*
 * Positionnement attendu par PDF.js. La variable --scale-factor est posee par
 * le script sur la couche a chaque rendu : sans elle, le texte se superpose de
 * travers sur l'image de la page.
 */
.adon-visionneuse__text-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.25;
    line-height: 1;
    text-align: initial;
    forced-color-adjust: none;
    transform-origin: 0 0;
}

.adon-visionneuse__text-layer span,
.adon-visionneuse__text-layer br {
    position: absolute;
    color: transparent;
    white-space: pre;
    cursor: text;
    transform-origin: 0 0;
}

.adon-visionneuse__text-layer ::selection {
    background: var(--adon-vis-accent);
}

/* ------------------------------------------------------------- mobile */

@media (max-width: 767px) {

    .adon-visionneuse {
        padding: 0;
    }

    .adon-visionneuse__dialog {
        max-width: none;
        border-radius: 0;
    }

    .adon-visionneuse__title {
        flex-basis: 100%;
        font-size: 0.9375rem;
    }

    .adon-visionneuse__toolbar {
        width: 100%;
        justify-content: space-between;
    }

    .adon-visionneuse__viewport {
        padding: 0.5rem;
    }

    /* Le plein ecran natif n'apporte rien sur un telephone, ou la modale
       occupe deja tout l'ecran, et son bouton encombre une barre serree. */
    .adon-visionneuse__btn--full {
        display: none;
    }
}

/* ------------------------------------------------- confort et accessibilite */

@media (prefers-reduced-motion: reduce) {

    .adon-visionneuse * {
        transition: none !important;
        animation: none !important;
    }
}

/* Version accessible du socle : contrastes maximaux, focus tres visible. */
body.contraste-eleve .adon-visionneuse {
    --adon-vis-fond: #000000;
    --adon-vis-barre: #000000;
    --adon-vis-texte: #ffffff;
    --adon-vis-accent: #000000;
    --adon-vis-accent-survol: #ffff00;
}

body.contraste-eleve .adon-visionneuse__btn {
    border-color: #ffffff;
}

body.contraste-eleve .adon-visionneuse__btn:focus-visible,
body.contraste-eleve .adon-visionneuse__viewport:focus-visible {
    outline: 3px solid #ff0;
    outline-offset: 2px;
}

body.contraste-eleve .adon-visionneuse__text-layer ::selection {
    background: #ff0;
}

/* --------------------------------------------------- lien declencheur */

/*
 * Indice visuel discret sur les liens qui ouvrent la visionneuse plutot que de
 * telecharger. Sans lui, deux liens d'apparence identique se comportent
 * differemment, ce qui est exactement ce qu'un utilisateur ne doit pas avoir a
 * deviner.
 *
 * La classe est ecrite en dur ici, alors que adon_visionneuse/trigger_class
 * permet de la changer : une feuille de style ne se parametre pas depuis PHP.
 * Un projet qui filtre la classe doit donc reprendre ce selecteur dans
 * Dungeon Styler.
 */
.doc-visionneuse::after,
.doc-flipbook::after,
a[data-adon-pdf="1"]::after {
    content: "";
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-left: 0.35em;
    vertical-align: -0.08em;
    background-color: currentColor;
    -webkit-mask: var(--adon-vis-icone) no-repeat center / contain;
    mask: var(--adon-vis-icone) no-repeat center / contain;
}

:root {
    --adon-vis-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-5 0-9 4.5-10 7 1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E");
    --adon-vis-icone-livre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.5C10.3 4.4 8.2 4 6 4H2v14h4c2.2 0 4.3.4 6 1.5 1.7-1.1 3.8-1.5 6-1.5h4V4h-4c-2.2 0-4.3.4-6 1.5zm-1 11.9c-1.5-.7-3.2-1-5-1H4V6h2c1.8 0 3.5.3 5 1v10.4zm9-1h-2c-1.8 0-3.5.3-5 1V7c1.5-.7 3.2-1 5-1h2v10.4z'/%3E%3C/svg%3E");
}

/* Le feuilletage merite son propre indice : un livre ouvert, et non un oeil.
   Deux comportements distincts, deux pictogrammes distincts. */
.doc-flipbook::after {
    -webkit-mask-image: var(--adon-vis-icone-livre);
    mask-image: var(--adon-vis-icone-livre);
}