/* =============================================================
   nutri-zoom.css
   Zoom / lightbox universel pour TOUTES les cartes du site.
   (même rendu que la lightbox "Six assets build the moat" de
    intelligence.html, mais partagé par les 12 pages HTML)

   Le bouton loupe est injecté par assets/nutri-zoom.js.
   ============================================================= */

/* Hôte du bouton loupe (posé par le JS uniquement quand l'élément
   est en position:static et qu'aucun enfant absolu n'en dépend). */
[data-nzoom-host] {
    position: relative !important;
}

/* ---------- Bouton loupe sur la carte ---------- */

.nzoom-btn {
    display: none !important;
}

[data-nzoom-card]:hover>.nzoom-btn,
[data-nzoom-card]:hover .nzoom-btn,
.nzoom-btn:hover,
.nzoom-btn:focus-visible {
    opacity: 1;
}

.nzoom-btn:hover,
.nzoom-btn:focus-visible {
    background: #29cf70;
    color: #042414;
    border-color: #29cf70;
    transform: scale(1.12);
    outline: none;
}

.nzoom-btn svg {
    width: 15px;
    height: 15px;
    display: block;
    pointer-events: none;
}

/* Ne jamais gêner l'éditeur « Fond des cartes » (nutri4k) */
html.n4k-cbmode .nzoom-btn,
html.n4k-cbmode [data-nzoom-host] {
    pointer-events: none !important;
}

html.n4k-cbmode .nzoom-btn {
    display: none !important;
}

/* ---------- Lightbox ---------- */
.nzoom-modal {
    /* Carte de zoom TRANSPARENTE : la lightbox n'a plus de fond blanc,
       elle laisse voir le voile sombre de la page. Tout ce qui doit rester
       lisible (titres, description, boutons) passe donc en clair / en verre.
       Les variables ci-dessous centralisent ce thème « verre ». */
    /* Fond de la carte de zoom : transparent par défaut.
       Pour un effet « verre fumé » il suffit de mettre par ex.
       --nz-card-bg: rgba(6, 27, 19, .45);  (ou rgba(255,255,255,.06)) */
    --nz-card-bg: transparent;
    --nz-glass: rgba(255, 255, 255, .10);
    --nz-glass-hover: #29cf70;
    --nz-line: rgba(255, 255, 255, .16);
    --nz-edge: rgba(255, 255, 255, .10);
    --nz-ink: #f2f7f4;
    --nz-ink-soft: #c3d3ca;
    --nz-ink-dim: rgba(233, 242, 237, .55);
    --nz-green: #29cf70;

    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(3, 18, 11, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: none;
    place-items: center;
    padding: 24px;
    opacity: 0;
    transition: opacity .3s cubic-bezier(.16, 1, .3, 1);
}

.nzoom-modal.active {
    display: grid;
    opacity: 1;
}

.nzoom-card {
    /* Fond transparent (var(--nz-card-bg), voir .nzoom-modal) : la carte
       blanche disparaît, l'image flotte sur le voile sombre de la page.
       Seule une fine bordure lumineuse (box-shadow 1px) délimite la zone,
       et l'ombre noire massive d'origine est supprimée. */
    background: var(--nz-card-bg);
    border-radius: 24px;
    max-width: 1040px;
    width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--nz-edge);
    transform: scale(0.95);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.nzoom-modal.active .nzoom-card {
    transform: scale(1);
}

.nzoom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--nz-line);
    background: transparent;
}

.nzoom-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.nzoom-badge {
    background: rgba(41, 207, 112, .14);
    color: var(--nz-green);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 99px;
    border: 1px solid rgba(41, 207, 112, 0.35);
    white-space: nowrap;
}

.nzoom-badge:empty {
    display: none;
}

.nzoom-title {
    font-size: 17px;
    font-weight: 900;
    color: var(--nz-ink);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nzoom-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.nzoom-open {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--nz-line);
    background: var(--nz-glass);
    color: var(--nz-ink-soft);
    text-decoration: none;
    font-size: 15px;
    line-height: 1;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all .2s ease;
}

.nzoom-open:hover {
    background: var(--nz-glass-hover);
    color: #042414;
    border-color: var(--nz-glass-hover);
    transform: scale(1.06);
}

.nzoom-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--nz-line);
    background: var(--nz-glass);
    color: var(--nz-ink-soft);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 19px;
    line-height: 1;
    padding: 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all .2s ease;
}

.nzoom-close:hover {
    background: var(--nz-glass-hover);
    color: #042414;
    border-color: var(--nz-glass-hover);
    transform: scale(1.06);
}

.nzoom-imgwrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overscroll-behavior: contain;
}

.nzoom-imgwrap.zoomed {
    cursor: grab;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
}

.nzoom-imgwrap.dragging {
    cursor: grabbing;
}

.nzoom-img {
    margin: auto;
    max-width: 100%;
    max-height: 68vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .65);
    /* fond transparent : une image avec des zones transparentes (logo PNG…)
       laisse désormais voir le voile de la lightbox au lieu d'un blanc. */
    background: transparent;
    transition: width .18s ease, height .18s ease;
    -webkit-user-drag: none;
    user-select: none;
}

.nzoom-imgwrap.zoomed .nzoom-img {
    border-radius: 0;
    box-shadow: none;
    cursor: zoom-out;
    transition: none;
}

.nzoom-imgwrap:not(.zoomed) .nzoom-img {
    cursor: zoom-in;
}

.nzoom-footer {
    padding: 14px 22px;
    background: transparent;
    border-top: 1px solid var(--nz-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nzoom-desc {
    font-size: 13.5px;
    color: var(--nz-ink-soft);
    margin: 0;
    font-weight: 550;
    min-width: 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}

.nzoom-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.nzoom-tool {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 9px;
    border: 1px solid var(--nz-line);
    background: var(--nz-glass);
    color: var(--nz-ink-soft);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all .2s ease;
}

.nzoom-tool:hover {
    background: var(--nz-glass-hover);
    color: #042414;
    border-color: var(--nz-glass-hover);
}

.nzoom-level {
    font-size: 11px;
    font-weight: 900;
    color: var(--nz-ink-soft);
    min-width: 46px;
    text-align: center;
    letter-spacing: .02em;
}

.nzoom-hint {
    font-size: 11px;
    color: var(--nz-ink-dim);
    letter-spacing: .02em;
    white-space: nowrap;
}

.nzoom-cat {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nz-green);
}

.nzoom-cat:empty {
    display: none;
}

@media(max-width: 640px) {
    .nzoom-modal {
        padding: 12px;
    }

    .nzoom-card {
        max-height: 96vh;
    }

    .nzoom-imgwrap {
        padding: 12px;
    }

    .nzoom-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .nzoom-title {
        white-space: normal;
        font-size: 15px;
    }
}

/* Masquer le bouton « ouvrir dans un nouvel onglet », le compteur et les contrôles +/-. */
.nzoom-open,
.nzoom-tool,
.nzoom-level {
    display: none !important;
}