/* Wrapper autour de l'image */
.ptt-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

/* L’icône 📷 en bas à gauche */
.ptt-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    background: rgba(0,0,0,.75);
    padding: 4px;
    z-index: 2;
    pointer-events: none; /* on ne gêne pas les liens sur l'image */
}
.ptt-badge svg {
    width: 16px; height: 16px;
    display: block;
    fill: #ffffff; /* vert doux, modifie si besoin */
}

/* Infobulle (cachée par défaut) */
.ptt-tooltip {
    position: absolute;
    left: 34px;
    bottom: 8px;
    max-width: min(380px, 80vw);
    background: rgba(0,0,0,.75);
    color: #fff;
    height: 22px;
    font: 500 12px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    padding: 2px 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: none;
    z-index: 3;
    white-space: normal;
    word-break: break-word;
}

/* Affichage au survol de l'image */
.ptt-wrap:hover .ptt-tooltip {
    opacity: 1;
    transform: translateY(0);
}

/* Accessibilité clavier sur images focusables (liens) */
.ptt-wrap:focus-within .ptt-tooltip {
    opacity: 1;
    transform: translateY(0);
}