/* Ouverture des documents RYM
   =============================================================================
   Pourquoi elle existe. Les supports de formation s'affichaient dans un cadre
   de trois cents pixels de haut, a 86 pour cent, avec la barre d'outils du
   navigateur qui mangeait le tiers de la place. Une fiche de cinq pages y etait
   deja penible ; un document de cent quatre-vingts pages y etait illisible. Et
   sur un telephone, ou travaillent la plupart des apporteurs, le cadre
   n'affichait souvent que la premiere page, sans defilement.

   Ce que fait cette feuille. Elle habille deux choses : la vignette qui
   remplace le cadre dans la page, et le plein ecran qui s'ouvre par-dessus.
   Tout est pense pour le pouce d'abord : cibles de quarante-quatre pixels,
   barre d'outils en bas de l'ecran la ou la main se trouve, et hauteur en
   dvh pour que la barre d'adresse du telephone ne rogne pas le document.

   Elle ne reprend rien au design system : elle ne cible que ses propres
   classes, toutes prefixees rym-vis. */

:root {
    --rym-vis-marine: #0a1f44;
    --rym-vis-orange: #ff9934;
    --rym-vis-ardoise: #5b6b82;
    --rym-vis-brume: #f4f6fa;
    --rym-vis-trait: #dde3ec;
}

/* --- La vignette posee dans la page --------------------------------------- */

.rym-vis-carte {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--rym-vis-trait);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.rym-vis-apercu {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--rym-vis-brume);
    cursor: pointer;
    line-height: 0;
    min-height: 180px;
}

.rym-vis-apercu canvas,
.rym-vis-apercu img {
    display: block;
    width: 100%;
    height: auto;
    /* Une fiche est un document, pas une image de fond : on montre le haut de
       la premiere page, la ou se trouve le titre, plutot que de la deformer. */
    object-fit: cover;
    object-position: top center;
    max-height: 340px;
}

.rym-vis-apercu-attente {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    color: var(--rym-vis-ardoise);
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    padding: 24px 16px;
}

/* Le voile ne s'affiche qu'au survol sur grand ecran : au doigt, il n'y a pas
   de survol, et un voile permanent cacherait la page qu'on veut donner a voir. */
.rym-vis-voile {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 14px;
    background: linear-gradient(to top, rgba(10, 31, 68, .55), rgba(10, 31, 68, 0) 55%);
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}

.rym-vis-apercu:hover .rym-vis-voile,
.rym-vis-apercu:focus-visible .rym-vis-voile {
    opacity: 1;
}

.rym-vis-barre {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--rym-vis-trait);
    background: #fff;
}

.rym-vis-pages {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: var(--rym-vis-ardoise);
    /* Un nom de fichier long ne doit pas pousser les boutons hors de l'ecran. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rym-vis-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--rym-vis-marine);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.rym-vis-bouton:hover,
.rym-vis-bouton:focus {
    background: #143061;
    color: #fff;
    text-decoration: none;
}

.rym-vis-bouton-discret {
    background: transparent;
    color: var(--rym-vis-marine);
    border: 1px solid var(--rym-vis-trait);
    min-width: 44px;
    padding: 0 12px;
}

.rym-vis-bouton-discret:hover,
.rym-vis-bouton-discret:focus {
    background: var(--rym-vis-brume);
    color: var(--rym-vis-marine);
}


/* --- La pastille est un LIEN, pas un bouton --------------------------------
   Ben, 13/08/2026 : « le bouton ouvrir en grand ne fonctionne pas ». Il
   reposait sur une bibliotheque chargee depuis un service exterieur, que son
   reseau n'atteint pas. C'est desormais un lien ordinaire vers le document :
   le navigateur sait l'ouvrir, et un lien marche meme si tout le code echoue. */

a.rym-vis-apercu {
    display: block;
    text-decoration: none;
}

a.rym-vis-apercu:hover .rym-vis-apercu-attente,
a.rym-vis-apercu:focus .rym-vis-apercu-attente {
    color: var(--rym-vis-marine);
    text-decoration: underline;
}

/* La zone d'appel est genereuse : c'est elle qu'on vise au doigt, pas le
   bouton de la barre. */
.rym-vis-apercu-attente {
    min-height: 150px;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .rym-vis-apercu-attente {
        min-height: 120px;
        font-size: 13.5px;
    }
}

/* --- La miniature, fabriquee a l'avance ------------------------------------
   C'est une image ordinaire de quarante kilo-octets, chargee paresseusement
   par le navigateur. Elle remplace le dessin fait dans la page, qui obligeait
   a telecharger le document entier et une bibliotheque exterieure. */

.rym-vis-apercu img {
    display: block;
    width: 100%;
    height: auto;
    /* On montre le HAUT de la premiere page, la ou se trouve le titre. */
    object-fit: cover;
    object-position: top center;
    max-height: 320px;
}

@media (max-width: 767.98px) {
    .rym-vis-apercu img {
        max-height: 260px;
    }
}

/* Le voile ne s'affiche qu'au survol : au doigt il n'y a pas de survol, et un
   voile permanent cacherait la page qu'on veut donner a voir. */
a.rym-vis-apercu:hover .rym-vis-voile,
a.rym-vis-apercu:focus-visible .rym-vis-voile {
    opacity: 1;
}