/* ==========================================================================
   LIGHTBOX PARTAGÉ — fiches doc (single-doc.php) + démo (single-demo.php)
   + produit (single-inar_product.php, 08/10/2026)
   Amélioration progressive : sans JS, les images restent simplement visibles.
   ========================================================================== */

/* Images cliquables (JS ajoute .inar-zoomable aux candidates). */
.doc-single-article img.inar-zoomable,
.demo-single-body img.inar-zoomable,
.inar-product-single img.inar-zoomable {
    cursor: zoom-in;
}
.doc-single-article img.inar-zoomable:focus-visible,
.demo-single-body img.inar-zoomable:focus-visible,
.inar-product-single img.inar-zoomable:focus-visible {
    outline: 3px solid #4f46e5;
    outline-offset: 3px;
    border-radius: 0.5rem;
}

/* Overlay */
.inar-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.8);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.inar-lightbox[hidden] {
    display: none;
}

/* Dialogue : margin:auto = centrage "scroll-safe" (sans lui, un dialogue
   plus haut que la zone visible déborde par le haut en flex centré et le
   haut devient inatteignable sur mobile). */
.inar-lightbox-dialog {
    position: relative;
    margin: auto;
    flex: none;
    width: 100%;
    max-width: min(1280px, 96vw);
    max-height: 90vh;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    padding: 1rem 1rem 0.9rem;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.55);
}
/* Zone image ajustée à l'image (pas au dialogue) : les flèches sont
   posées SUR l'image, centrées sur elle quelle que soit la légende. */
.inar-lightbox-stage {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    overflow: hidden;
    border-radius: 0.75rem;
}
.inar-lightbox-stage img {
    display: block;
    max-width: 100%;
    max-height: 82vh;
    max-height: 82dvh;
    width: auto;
    height: auto;
    border-radius: 0.75rem;
    background: #fff;
    transition: transform .2s ease;
}
/* Image zoomée : déplacement à la souris / au doigt. */
.inar-lightbox-stage img.is-zoomed {
    cursor: grab;
    touch-action: none;
}
.inar-lightbox-stage img.is-panning {
    cursor: grabbing;
    transition: none;
}
/* Zoom flottant, centré en bas SUR l'image : 3 pastilles compactes
   sans fond conteneur, ne touche jamais à la ligne de légende. */
.inar-lightbox-tools {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    z-index: 6;
    line-height: 1;
}
button.inar-lightbox-btn.inar-lightbox-zoom {
    position: static;
    transform: none;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.65);
    color: #fff;
}
button.inar-lightbox-btn.inar-lightbox-zoom:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}
button.inar-lightbox-btn.inar-lightbox-zoom svg {
    width: 1.05rem;
    height: 1.05rem;
}
.inar-lightbox-stage img {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
/* Pied fixe : légende pleine ligne + compteur à droite. */
.inar-lightbox-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 1.75rem;
}
.inar-lightbox-cap {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #cbd5e1;
    /* Légende clampée à 2 lignes : le compteur garde une position fixe. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.inar-lightbox-count {
    flex: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
    color: #94a3b8;
}

/* Boutons (jamais de <button> nu : spécificité 0,1,1+).
   Flèches posées SUR l'image (dans .inar-lightbox-stage) : fond
   semi-opaque + flou pour rester lisibles, sans jamais déborder. */
button.inar-lightbox-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.6);
    /* Toujours cliquables : au-dessus de l'image et du dialogue. */
    z-index: 5;
}
button.inar-lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
button.inar-lightbox-btn:focus-visible {
    outline: 3px solid #a5b4fc;
    outline-offset: 2px;
}
button.inar-lightbox-close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
}
button.inar-lightbox-prev,
button.inar-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
button.inar-lightbox-prev {
    left: 0.75rem;
}
button.inar-lightbox-next {
    right: 0.75rem;
}

@media (max-width: 640px) {
    .inar-lightbox {
        padding: 0.75rem;
        /* Sur mobile (barre d'URL dynamique), le dialogue restait plaqué
           en bas et coupé : on réserve la place du pied + pastilles. */
        align-items: center;
    }
    .inar-lightbox-dialog {
        padding: 0.75rem 0.75rem 0.7rem;
        max-height: 92vh;
        max-height: 92dvh;
    }
    .inar-lightbox-stage img {
        max-height: 62vh;
        max-height: 62dvh;
    }
    button.inar-lightbox-btn {
        width: 2.25rem;
        height: 2.25rem;
    }
    button.inar-lightbox-prev {
        left: 0.5rem;
    }
    button.inar-lightbox-next {
        right: 0.5rem;
    }
    .inar-lightbox-tools {
        bottom: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .inar-lightbox,
    .inar-lightbox-dialog,
    .inar-lightbox-stage img,
    button.inar-lightbox-btn {
        transition: none;
    }
}