/* Filigrane : le logo, en calque CSS par-dessus la photo (jamais dans le fichier image).
   Variables : --wm-size et --wm-margin (en % de la largeur de la photo), --wm-opacity (en %), --wm-image (le logo),
   --wm-small (1 = taille calculée sur le petit côté de la photo). La position vient de [data-wm-position].
   Elles viennent des réglages du site (page Paramètres, voir base.html.twig) ; la page Filigrane du back-office
   les change en direct pour l'aperçu. */
.photo {
    --wm-k: min(1, 1 / var(--ratio, 1)); /* 1 en portrait ; plus petit en paysage (petit côté / largeur) */
}
.watermark {
    position: absolute;
    z-index: 1;
    width: calc(var(--wm-size) * 1cqw * (1 - var(--wm-small, 0) * (1 - var(--wm-k, 1))));
    aspect-ratio: 1;
    background: var(--wm-image) center / contain no-repeat;
    opacity: calc(var(--wm-opacity) / 100);
    pointer-events: none;
    right: calc(var(--wm-margin) * 1cqw);
    bottom: calc(var(--wm-margin) * 1cqw);
}
[data-wm-position="bottom-left"] .watermark {
    right: auto;
    left: calc(var(--wm-margin) * 1cqw);
}
[data-wm-position="top-right"] .watermark {
    bottom: auto;
    top: calc(var(--wm-margin) * 1cqw);
}
[data-wm-position="top-left"] .watermark {
    right: auto;
    bottom: auto;
    top: calc(var(--wm-margin) * 1cqw);
    left: calc(var(--wm-margin) * 1cqw);
}
/* Où l'appliquer (réglages « photo ouverte » et « grilles ») */
[data-wm-open="off"] .photo-detail .watermark,
[data-wm-grid="off"] .photo-item .watermark {
    display: none;
}