/* =====================================================================
 * VISIONNEUSE DE DOCUMENTS — fenetre au format du document + plein ecran
 *
 * Habille le gabarit pose par js/visionneuse-doc.js sur les popups
 * Magnific en mode iframe (PDF, photos, videos des grilles documents).
 * La LARGEUR et la HAUTEUR de la fenetre sont calculees par le script
 * d'apres le format du document ; les valeurs ci-dessous ne servent
 * qu'avant ce calcul. Barre (48 px), marge (12 px) et bordures sont
 * reprises dans le script : les modifier des deux cotes.
 *
 * Remplace, pour ce mode seulement, les regles de css/plugins.css :
 *   .mfp-iframe-holder .mfp-content { max-width: 900px }
 *   .mfp-iframe-scaler { padding-top: 56.25% }   (ratio video 16/9)
 * Les popups d'images (lightbox-image) ne sont pas concernees.
 *
 * Couleurs : jetons du theme V3 (--t3-*), qui suivent le mode sombre ;
 * valeurs de secours pour les pages sans theme.
 * ===================================================================== */

/* --- La fenetre, centree ------------------------------------------------ */
.mfp-iframe-holder {
    padding-top: 0;
    padding-bottom: 0;
}
.mfp-iframe-holder .mfp-content {
    width: 640px;
    max-width: 94vw;
    height: 90vh;
    transition: width .18s ease, height .18s ease;
}

/* --- Le cadre ------------------------------------------------------------ */
.mfp-iframe-holder .mfp-iframe-scaler {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 12px 12px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid var(--t3-border-sub, rgba(19, 26, 46, .08));
    border-radius: var(--t3-radius-lg, 14px);
    background: var(--t3-solid, #ffffff);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
/* Le document, avec son propre liseré */
.mfp-iframe-holder .mfp-iframe-scaler iframe {
    position: static;
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--t3-text, #131a2e) 16%, transparent);
    border-radius: var(--t3-radius-sm, 6px);
    background: var(--t3-solid-alt, #f5f8fd);
    box-shadow: none;
}

/* Photo : une <img> ajustee au cadre remplace l'iframe, ou Chrome
   afficherait l'image en taille reelle, rognee. */
.vd-photo {
    display: none;
}
.vd-est-photo .vd-photo {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--t3-text, #131a2e) 16%, transparent);
    border-radius: var(--t3-radius-sm, 6px);
    background: var(--t3-solid-alt, #f5f8fd);
}
.vd-photo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.mfp-iframe-holder .vd-est-photo iframe {
    display: none;
}

/* Les grosses fleches de Magnific chevaucheraient un document paysage :
   la navigation passe par la barre. */
.mfp-iframe-holder .mfp-arrow {
    display: none;
}

/* --- Barre du haut ----------------------------------------------------- */
.vd-barre {
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 48px;
    padding: 0 0 0 4px;
    color: var(--t3-text, #131a2e);
    font-size: 14px;
    line-height: normal;
    user-select: none;
}
.vd-icone {
    font-size: 18px;
    color: var(--t3-accent, #2563eb);
}
.vd-titre {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
}
.vd-nav {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin-right: 6px;
}
.vd-sans-nav .vd-nav,
.vd-barre.vd-sans-plein-ecran .vd-plein-ecran {
    display: none;
}
.vd-compteur {
    min-width: 42px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--t3-text-2, #4c5670);
}
.vd-barre .vd-btn,
.mfp-iframe-holder .vd-barre .mfp-close {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--t3-radius-sm, 6px);
    background: transparent;
    color: var(--t3-text-2, #4c5670);
    font-size: 19px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    opacity: 1;
    cursor: pointer;
}
.mfp-iframe-holder .vd-barre .mfp-close {
    font-size: 26px;
    font-family: Arial, sans-serif;
}
.vd-barre .vd-btn:hover,
.vd-barre .vd-btn:focus,
.mfp-iframe-holder .vd-barre .mfp-close:hover,
.mfp-iframe-holder .vd-barre .mfp-close:focus {
    background: color-mix(in srgb, var(--t3-text, #131a2e) 8%, transparent);
    color: var(--t3-text, #131a2e);
    outline: none;
}
.mfp-iframe-holder .vd-barre .mfp-close:active {
    top: auto;
}

/* --- Plein ecran (classe posee par le script sur la .mfp-wrap) -------- */
.mfp-wrap.vd-en-plein-ecran {
    background: #000;
}
.vd-en-plein-ecran .mfp-container.mfp-iframe-holder {
    padding: 0;
}
.vd-en-plein-ecran .mfp-iframe-holder .mfp-content {
    width: 100%;
    max-width: none;
    height: 100vh;
    transition: none;
}
.vd-en-plein-ecran .mfp-iframe-holder .mfp-iframe-scaler {
    border: 0;
    border-radius: 0;
}

/* --- Petits ecrans ------------------------------------------------------ */
@media (max-width: 600px) {
    .vd-barre .vd-icone,
    .vd-barre .vd-onglet {
        display: none;
    }
}