/* ===================================================================
   Visionneuse de document — #dlg-file-viewer (Views/Visa/Shared/_Modals.cshtml, modale
   statique comme les autres dlg-*, rendue une fois par le layout). La page appelante pose
   juste le src de #dlg-file-viewer-embed et le titre de #dlg-file-viewer-title avant
   d'appeler ModalManager.show('dlg-file-viewer') — cf. Exchange/myExchange
   (Scripts/Visa/pages/my-exchange.js).

   Reprise du panneau docké à gauche/droite de l'écran de l'ancien _FileView.cshtml
   (#pdf_content / #moveLeft / #moveRight, jQuery, retiré lors de la refonte) plutôt qu'une
   modale centrée classique : le panneau (max 1280px) se cale contre un bord de l'écran,
   laissant voir le reste de la page de l'autre côté ; deux flèches (.file-viewer__nav)
   permettent de le faire glisser d'un bord à l'autre. data-dock="left"|"right" sur la racine
   (posé par Scripts/Visa/pages/my-exchange.js, initFileViewerDock) pilote à la fois la
   position du panneau, le bouton Fermer (toujours au bord qui fait face à l'espace libre,
   comme avant) et la flèche visible (celle qui pointe vers l'espace libre ; l'autre est
   masquée via [hidden], inutile puisqu'il n'y a nulle part où aller de ce côté). Un seul
   mécanisme (transform + transition) sert à la fois pour l'ouverture et pour le glissement
   gauche/droite — remplace le slideDown générique de modal.css (animation: none ci-dessous).

   ⚠️ Ouverture = animation (@keyframes), pas seulement une transition : Modal.show() (modal.js)
   ajoute .show au même tick que le display:none → flex (modal.css, .modal.show) ; une
   transition n'a alors aucune frame "avant" sur laquelle s'appuyer et saute directement à
   l'état final (c'est d'ailleurs pourquoi le slideDown générique utilise déjà @keyframes).
   Un seul @keyframes (fileViewerOpen), piloté par deux custom properties (--file-viewer-*-x)
   plutôt que deux animations nommées différemment selon data-dock : changer le NOM d'une
   animation (animation-name) la rejoue depuis son "from", ce qui aurait rejoué l'ouverture à
   chaque clic sur une flèche (data-dock change alors que .show est déjà posé depuis longtemps).
   En gardant le même nom et en ne faisant varier que les custom properties qu'il référence,
   seule l'ouverture initiale est animée par @keyframes ; une fois l'animation terminée
   (fill-mode none, ~300ms après l'ouverture), c'est la transition ci-dessous qui prend le
   relais pour le glissement gauche/droite — la valeur cascade (transform) suit alors
   normalement les custom properties, qui ont elles bien changé.
   =================================================================== */

#dlg-file-viewer {
    /* --file-viewer-*-x : position ouverte/fermée du panneau, selon le bord docké — voir
       commentaire ci-dessus sur l'intérêt des custom properties plutôt que deux animations. */
    --file-viewer-open-x: 0px;
    --file-viewer-closed-x: -100%;

    /* Docké à droite : gap = largeur dispo au-delà de 1280px (0 si l'écran est plus étroit —
       le panneau colle alors à l'écran quel que soit le bord « choisi », ce qui neutralise de
       fait le glissement sur petit écran). */
    &[data-dock="right"] {
        --file-viewer-open-x: max(0px, 100vw - 80rem);
        --file-viewer-closed-x: calc(100% + max(0px, 100vw - 80rem));
    }

    /* Panneau plein hauteur ancré à gauche (left:0 — le déplacement entre les deux bords se
       fait uniquement via transform, cf. custom properties ci-dessus), jamais recentré par le
       flex du .modal.show générique (modal.css) : position:fixed sort l'élément du flux flex,
       donc justify-content/align-items du parent n'ont plus d'effet — inutile de les neutraliser. */
    & .modal-dialog {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: auto;
        width: min(100%, 80rem); /* 1280px (1rem = 16px) */
        max-width: none;
        height: 100%;
        margin: 0;
        transform: translateX(var(--file-viewer-closed-x));
        transition: transform var(--modal-anim-duration) ease-out;
        animation: none; /* neutralise le slideDown générique (modal.css, & .modal-dialog) */
    }

    &.show .modal-dialog {
        transform: translateX(var(--file-viewer-open-x));
        animation: fileViewerOpen var(--modal-anim-duration) ease-out;
    }

    & .modal-content {
        height: 100%;
        max-height: none;
        border-radius: 0; /* panneau accolé à un bord d'écran — pas d'arrondi qui mordrait dans le bord */
    }

    & .modal-header {
        /* Espace réservé aux deux côtés pour le bouton Fermer flottant (.file-viewer__close,
           ~8rem) quel que soit le bord où il se trouve actuellement (data-dock). */
        padding: var(--spacing-md3) 9rem;
    }

    & .modal-title {
        text-align: center;
        color: var(--color-primary);
        font-weight: var(--font-weight-bold);
    }

    /* Bouton Fermer : toujours au bord qui fait face à l'espace libre (même comportement que
       l'ancien #close qui suivait le panneau), pas dans le flux du header — superposé en haut,
       comme les flèches de navigation ci-dessous. pointer-events:auto nécessaire : .modal-dialog
       (modal.css, générique) pose pointer-events:none, et ce bouton est un enfant direct de
       .modal-dialog (pas de .modal-content, qui remet pointer-events:auto pour lui-même) — sans
       ça il reste visible mais ne reçoit plus aucun clic. */
    & .file-viewer__close {
        position: absolute;
        top: var(--spacing-xs);
        z-index: 1;
        pointer-events: auto;
    }

    &[data-dock="left"] .file-viewer__close {
        right: var(--spacing-md2);
        left: auto;
    }

    &[data-dock="right"] .file-viewer__close {
        left: var(--spacing-md2);
        right: auto;
    }
}

/* Icône "X" cachée par défaut (bouton Fermer en pleine largeur, libellé visible) — bascule en
   mobile ci-dessous (icône seule, libellé toujours présent pour les lecteurs d'écran). */
.file-viewer__close-icon {
    display: none;
    width: 1.125rem;
    height: 1.125rem;
}

@keyframes fileViewerOpen {
    from { transform: translateX(var(--file-viewer-closed-x)); }
    to   { transform: translateX(var(--file-viewer-open-x)); }
}

/* ===== Flèches de glissement gauche/droite =====
   Enfants directs de #dlg-file-viewer (pas de .modal-dialog) : positionnées par rapport à
   tout l'écran (#dlg-file-viewer est position:fixed plein écran, modal.css), dans la zone
   grisée au-delà du panneau — jamais par-dessus #dlg-file-viewer-embed (_Modals.cshtml), qui
   capterait sinon le survol/clic même si la flèche est peinte visuellement au-dessus. */

.file-viewer__nav {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    background: var(--color-white);
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow-card-subtle);
    color: var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-fast);

    & svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    &:hover { background-color: var(--color-bg-hover-light); }
}

/* À côté du bord du panneau, sans le chevaucher (pas collé au bord de l'écran) : .modal-dialog
   et ces flèches partagent le même référentiel de pourcentage (#dlg-file-viewer, position:fixed
   plein écran) — la largeur du panneau (min(100%, 80rem), même formule que .modal-dialog) donne
   directement la position de son bord droit ; le complément (max(0px, 100vw - 80rem)) donne
   celle de son bord gauche quand il est docké à droite. Le transform pousse le rond entièrement
   de l'autre côté de ce bord (avec un petit espace, 0.8rem) plutôt que de le centrer dessus. */
.file-viewer__nav--left {
    left: max(0px, 100vw - 80rem); /* bord gauche du panneau docké à droite */
    transform: translate(calc(-100% - 0.8rem), -50%);
}

.file-viewer__nav--right {
    left: min(100%, 80rem); /* bord droit du panneau docké à gauche */
    transform: translate(0.8rem, -50%);
}

/* .file-viewer__nav pose display:flex : règle auteur qui écrase silencieusement [hidden]
   (règle UA, display:none) malgré une spécificité comparable — même piège que .btn[hidden]
   documenté dans modal.css. Sans ceci, la flèche masquée (bord déjà docké) resterait visible
   ET cliquable. */
.file-viewer__nav[hidden] {
    display: none;
}

/* Au-delà de 1280px (largeur du panneau) seulement : en dessous, le panneau occupe tout
   l'écran quel que soit le bord, glisser n'aurait aucun effet visible. */
@media (max-width: 80rem) {
    .file-viewer__nav {
        display: none;
    }
}

.file-viewer__body {
    display: flex;
    padding: 0;
}

.file-viewer__embed {
    width: 100%;
    height: 100%;
    border: none;
}

/* ===== Mobile : bouton Fermer réduit à une icône =====
   Le header réserve 9rem de chaque côté pour la pastille "Fermer" en texte (desktop) — bien
   trop sur un petit écran. Padding asymétrique (le bouton Fermer n'est que d'un seul côté sur
   mobile, les flèches de dock étant déjà masquées en dessous de 1280px — cf. @media plus haut).
   Le libellé reste dans le DOM (nom accessible du bouton pour les lecteurs d'écran) mais masqué
   visuellement via la même technique que .visually-hidden (utilities.css) plutôt que
   display:none (qui retirerait le texte du nom accessible). Style repris de .modal-close
   générique (modal.css, ex. #dlg-cookie-politic) — pas de pastille bleue .btn--primary ici,
   override scopé par #dlg-file-viewer (ID) pour primer sur .btn--primary (4 classes dont 2
   :not(), donc plus spécifique qu'une simple classe mais pas qu'un ID). */
@media (max-width: 38.75em) {
    #dlg-file-viewer .modal-header {
        padding: var(--spacing-md) 4.5rem;
    }

    #dlg-file-viewer .file-viewer__close {
        width: 2.3rem;
        height: 2.3rem;
        padding: 0;
        background: none;
        border: none;
        border-radius: var(--border-radius-sm);
        color: var(--color-text-secondary);
    }

    #dlg-file-viewer .file-viewer__close:hover {
        background-color: var(--color-bg-hover-light);
        color: var(--color-text-primary);
    }

    .file-viewer__close-icon {
        display: block;
    }

    .file-viewer__close-label {
        position: absolute;
        width: 0.1rem;
        height: 0.1rem;
        margin: -0.1rem;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}