/* ==========================================================================
   e-viewer.css
   Superposition (overlay) generique pour la visionneuse de catalogues.
   Reutilisable sur toutes les pages produits (chaque page ne fournit que
   ses propres images, via des attributs data-e-viewer-*).

   Couleurs alignees sur la charte Starview (assets/css/base-style.css) :
   - bleu marine fonce  #001022  (fond)
   - bleu marine profond #11386C (relief / bordures)
   - bleu accent        #3A76BB  (interactions / hover)
   ========================================================================== */

.e-viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5vh 1.5vw;
    background: rgba(0, 16, 34, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    box-sizing: border-box;
}

.e-viewer-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

body.e-viewer-lock {
    overflow: hidden;
}

/* Cadre autour de la visionneuse : marge reduite + ombre portee derriere */
.e-viewer-frame {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1500px;
    max-height: 96vh;
    margin: auto;
    padding: 12px;
    background: #001022;
    border-radius: 10px;
    box-shadow: 0 25px 70px rgba(0, 8, 20, 0.7), 0 0 0 1px rgba(58, 118, 187, 0.35);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    box-sizing: border-box;
    transform: translateY(8px) scale(0.98);
    transition: transform 0.28s ease;
}

.e-viewer-overlay.is-open .e-viewer-frame {
    transform: translateY(0) scale(1);
}

.e-viewer-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    cursor: zoom-in;
    touch-action: none;
}

.e-viewer-stage.is-zoomed {
    cursor: grab;
}

.e-viewer-stage.is-panning {
    cursor: grabbing;
}

.e-viewer-book {
    width: 100%;
    height: 100%;
    transform-origin: center center;
    will-change: transform;
}

.e-viewer-stage:not(.is-panning) .e-viewer-book {
    transition: transform 0.15s ease-out;
}

.e-viewer-book canvas {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Pages en mode HTML (utilise quand la page a des zones cliquables).
   IMPORTANT : .e-viewer-page est l'element que le moteur repositionne en
   remplacant tout son style inline a chaque rendu -> l'image de fond ne
   doit JAMAIS etre mise dessus, seulement sur l'enfant .e-viewer-page-bg. */
.e-viewer-page-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: #fff;
    pointer-events: none;
}

.e-viewer-hotspot {
    position: absolute;
    display: block;
    cursor: pointer;
}

/* Barre de pagination integree en bas du cadre (gagne de la place vs. hors-cadre) */
.e-viewer-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    margin-top: 6px;
}

.e-viewer-page-count {
    color: #cfe0f2;
    font-size: 13px;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

/* Titre discret en haut du cadre */
.e-viewer-title {
    position: absolute;
    top: -30px;
    left: 4px;
    color: #f2f2f2;
    font-size: 14px;
    letter-spacing: 0.03em;
    opacity: 0.85;
}

/* Bouton fermer */
.e-viewer-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    color: #11386C;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 8, 20, 0.5);
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
    z-index: 2;
}

.e-viewer-close:hover {
    transform: scale(1.08);
    background: #3A76BB;
    color: #ffffff;
}

/* Fleches precedent / suivant */
.e-viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: #11386C;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 8, 20, 0.45);
    z-index: 2;
    transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.e-viewer-nav:hover {
    background: #3A76BB;
    color: #ffffff;
    transform: translateY(-50%) scale(1.06);
}

.e-viewer-prev { left: -20px; }
.e-viewer-next { right: -20px; }

.e-viewer-nav[disabled] {
    opacity: 0.35;
    cursor: default;
}

/* Indicateur de chargement pendant l'init du moteur */
.e-viewer-loading {
    position: absolute;
    color: #f2f2f2;
    font-size: 14px;
    letter-spacing: 0.04em;
    opacity: 0.8;
}

@media (max-width: 760px) {
    .e-viewer-overlay { padding: 1vh 1vw; }
    .e-viewer-frame { padding: 8px; border-radius: 8px; }
    .e-viewer-close { top: -14px; right: -6px; width: 36px; height: 36px; font-size: 18px; }
    .e-viewer-prev { left: -6px; }
    .e-viewer-next { right: -6px; }
    .e-viewer-nav { width: 38px; height: 38px; font-size: 16px; }
    .e-viewer-title { top: -26px; font-size: 12px; }
    .e-viewer-footer { height: 22px; }
    .e-viewer-page-count { font-size: 12px; }
}

/* ==========================================================================
   Pop-up video (partage entre la visionneuse et les icones de la page)
   ========================================================================== */
.e-video-overlay {
    position: fixed;
    inset: 0;
    z-index: 100010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
    background: rgba(0, 16, 34, 0.72);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    box-sizing: border-box;
}

.e-video-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.e-video-frame {
    position: relative;
    width: 100%;
    max-width: 960px;
    background: #001022;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 25px 70px rgba(0, 8, 20, 0.7), 0 0 0 1px rgba(58, 118, 187, 0.35);
    box-sizing: border-box;
}

.e-video-body {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* ratio 16:9 */
}

.e-video-body iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 4px;
}

.e-video-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    color: #11386C;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 8, 20, 0.5);
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
    z-index: 2;
}

.e-video-close:hover {
    transform: scale(1.08);
    background: #3A76BB;
    color: #ffffff;
}

@media (max-width: 760px) {
    .e-video-overlay { padding: 2vh 2vw; }
    .e-video-frame { padding: 8px; }
    .e-video-close { top: -14px; right: -6px; width: 36px; height: 36px; font-size: 18px; }
}

/* ==========================================================================
   Rangee d'icones (e-catalog / pdf / youtube / rfq).
   Fichier partage (charge depuis la racine ET depuis /fr/ via chemin relatif)
   pour que les deux versions linguistiques restent identiques.

   Sur bureau (>= 992px) : les anciennes classes de grille (col-md-3-F /
   col-md-push-9-icon) positionnent la rangee comme sur blister-sealers.html,
   mais celle-ci a 4 icones (e-catalog + pdf + youtube + rfq) au lieu des 3
   habituelles -> on elargit juste la largeur/position pour lui faire de la
   place, sans toucher au reste du positionnement.

   Sous 992px, ces classes de grille bootstrap ne s'appliquent plus : on
   centre alors explicitement la rangee pour un affichage mobile propre,
   et on masque les icones youtube/rfq (.icon-hide-narrow) pour ne garder
   que e-catalog + pdf.
   ========================================================================== */
@media (min-width: 992px) {
    #apb-family-icons {
        width: 27% !important;
        left: 74.5% !important;
    }
}

@media screen and (max-width: 991px) {
    /* display:none (pas juste visibility/height/width a 0) pour que l'element
       soit retire du flux flex : sinon le "gap" du conteneur flex compte quand
       meme cet item invisible et decale le centrage des icones visibles. */
    .icon-hide-narrow {
        display: none !important;
    }

    /* display:flex directement sur la table, et tbody/tr rendus "transparents"
       (display:contents) pour que les <td> deviennent des enfants flex directs.
       Evite le melange table/block/flex sur plusieurs niveaux imbriques, qui
       peut generer des boites anonymes et empecher le centrage selon le
       navigateur. */
    #apb-family-icons {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center !important;
        align-items: center !important;
        gap: 16px;
        position: static !important;
        float: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 480px !important;
        margin: 15px auto !important;
    }

    #apb-family-icons tbody,
    #apb-family-icons tr {
        display: contents;
    }

    #apb-family-icons td {
        display: inline-flex !important;
        float: none !important;
        position: static !important;
        width: auto !important;
    }

    /* Specificite : "#apb-family-icons td" (ID) bat ".icon-hide-narrow" (classe)
       meme avec !important des deux cotes -> il faut une regle au moins aussi
       specifique (ID + classe) pour que le masquage youtube/rfq l'emporte. */
    #apb-family-icons td.icon-hide-narrow {
        display: none !important;
    }
}