/* ============================================================
   Champ at_image (lot I1) — la boîte et l'image. Le cadrage arrive en variables, posées par la règle scopée du champ
   (Style_Collector) : --atgf-img-ratio, -fit, -pos, -zoom (par point, au survol). Arrondi, bordure, ombre et
   dimensions : outils du bloc ; la boîte suit son arrondi (inherit) et rogne l'image.
   Spécificité minimale (:where) : un thème, un utilitaire ou les outils du bloc l'emportent sans effort.
   ============================================================ */

:where(.atgf-img) {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    border-radius: inherit;
}

:where(.atgf-img__box) {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: var(--atgf-img-ratio, auto);
    border-radius: inherit;
    color: inherit;
}

:where(.atgf-img__box) > picture {
    display: contents;
}

:where(.atgf-img__img) {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Dans une boîte : l'image remplit la boîte quand un ratio la dessine (variables posées par le ratio), garde sa taille
   naturelle sinon. Point focal et remplissage s'appliquent dans tous les cas. */
:where(.atgf-img__box) :where(.atgf-img__img) {
    width: var(--atgf-img-w, auto);
    height: var(--atgf-img-h, auto);
    object-fit: var(--atgf-img-fit, cover);
    object-position: var(--atgf-img-pos, 50% 50%);
}

/* Effets (lot I3) : variables de la règle scopée — zoom, rotation, filtres (duotone puis liste), opacité, fusion,
   Ken Burns. Variable vide des deux côtés = déclaration invalide = valeur initiale (`filter: none`). */
:where(.atgf-img__box) :where(.atgf-img__img),
:where(.atgf-img--bare) {
    transform: scale(var(--atgf-img-zoom, 1)) rotate(var(--atgf-img-rotate, 0deg));
    opacity: var(--atgf-img-opacity, 1);
    mix-blend-mode: var(--atgf-img-blend, normal);
    animation: var(--atgf-img-anim, none) 24s ease-in-out infinite alternate;
    transition: transform var(--atgf-img-dur, .35s) var(--atgf-img-ease, ease), filter var(--atgf-img-dur, .35s) var(--atgf-img-ease, ease), opacity var(--atgf-img-dur, .35s) var(--atgf-img-ease, ease), object-position var(--atgf-img-dur, .35s) var(--atgf-img-ease, ease);
}

/* Filtres : seulement quand l'image en a (classe posée par le rendu), et assez forts pour passer devant ceux d'un
   thème ou du mode sombre — sans filtre réglé, ceux-ci gardent la main. */
.atgf-img--filter .atgf-img__img,
.atgf-img--bare.atgf-img--filter {
    filter: var(--atgf-img-duo, ) var(--atgf-img-filter, );
}

@keyframes atgf-img-kb {
    from { transform: scale(var(--atgf-img-zoom, 1)) rotate(var(--atgf-img-rotate, 0deg)); }
    to { transform: scale(calc(var(--atgf-img-zoom, 1) * 1.12)) translate(-2%, -1.5%) rotate(var(--atgf-img-rotate, 0deg)); }
}

/* Masque : forme simple (clip-path) ou organique (image SVG étirée à la boîte). */
:where(.atgf-img__box) {
    clip-path: var(--atgf-img-clip, none);
    -webkit-mask-image: var(--atgf-img-mask, none);
    mask-image: var(--atgf-img-mask, none);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Voile au-dessus de l'image (couleur ou dégradé), intensité réglable par état. */
:where(.atgf-img__veil) {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--atgf-img-veil, transparent);
    opacity: var(--atgf-img-veil-op, 1);
    pointer-events: none;
    transition: opacity var(--atgf-img-dur, .35s) var(--atgf-img-ease, ease);
}

/* Icône (valeur at_icon) au centre : au survol sur un appareil qui survole, toujours visible au toucher. */
:where(.atgf-img__icon) {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    pointer-events: none;
    transition: opacity var(--atgf-img-dur, .35s) var(--atgf-img-ease, ease);
}

:where(.atgf-img__icon-in) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    line-height: 1;
    background: rgb(0 0 0 / .4);
    border-radius: 50%;
}

:where(.atgf-img__icon-in) :is(svg, img, .dashicons, i) {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.5rem;
}

@media (hover: hover) {
    :where(.atgf-img__icon) { opacity: 0; }
    :where(.atgf-img):is(:hover, :focus-within) .atgf-img__icon,
    :where(a, button, [data-atgf-hover]):hover .atgf-img__icon { opacity: 1; }
}

/* Autre image : posée sur la première, révélée au survol (de l'image, ou du parent). */
.atgf-img__swap {
    position: absolute;
    inset: 0;
    opacity: 0;
}

@media (hover: hover) {
    .atgf-img--swap:not(.atgf-img--swap-parent):hover .atgf-img__swap,
    .atgf-img--swap-parent:hover .atgf-img__swap,
    :where(a, button, [data-atgf-hover]):hover .atgf-img--swap-parent .atgf-img__swap {
        opacity: var(--atgf-img-opacity, 1);
    }
}

/* Parallaxe : l'image glisse dans une boîte au ratio fixe (le sien, à défaut d'un ratio réglé). */
:where(.atgf-img__box--px) {
    aspect-ratio: var(--atgf-img-ratio, var(--atgf-img-nat, 3 / 2));
}

:where(.atgf-img__px) {
    position: absolute;
    inset: 0;
    display: block;
}

:where(.atgf-img__defs) {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

:where(.atgf-img__box) svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Image nue (balise « aucune ») : le cadrage sur l'image elle-même. */
:where(.atgf-img--bare) {
    width: auto;
    max-width: 100%;
    height: auto;
    aspect-ratio: var(--atgf-img-ratio, auto);
    object-fit: var(--atgf-img-fit, cover);
    object-position: var(--atgf-img-pos, 50% 50%);
}

:where(.atgf-img__box--zoom) {
    cursor: zoom-in;
}

:where(.atgf-img__box):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Légende sous l'image. */
:where(.atgf-img__cap) {
    margin-top: .5em;
    font-size: .875em;
    line-height: 1.45;
    opacity: .85;
}

/* Légende sur l'image : 9 places, lisible sur une photo. */
:where(.atgf-img--cap-over) > .atgf-img__cap {
    position: absolute;
    z-index: 3;
    max-width: calc(100% - 2rem);
    margin: 0;
    padding: .5rem .75rem;
    color: #fff;
    opacity: 1;
    text-shadow: 0 1px 3px rgb(0 0 0 / .45);
    pointer-events: none;
}

:where(.atgf-img--cap-tl, .atgf-img--cap-tc, .atgf-img--cap-tr) > .atgf-img__cap { top: .5rem; }
:where(.atgf-img--cap-ml, .atgf-img--cap-mc, .atgf-img--cap-mr) > .atgf-img__cap { top: 50%; translate: 0 -50%; }
:where(.atgf-img--cap-bl, .atgf-img--cap-bc, .atgf-img--cap-br) > .atgf-img__cap { bottom: .5rem; }
:where(.atgf-img--cap-tl, .atgf-img--cap-ml, .atgf-img--cap-bl) > .atgf-img__cap { left: .5rem; }
:where(.atgf-img--cap-tr, .atgf-img--cap-mr, .atgf-img--cap-br) > .atgf-img__cap { right: .5rem; text-align: end; }
:where(.atgf-img--cap-tc, .atgf-img--cap-mc, .atgf-img--cap-bc) > .atgf-img__cap { left: 50%; translate: -50% 0; text-align: center; }
:where(.atgf-img--cap-mc) > .atgf-img__cap { translate: -50% -50%; }

/* Apparition au survol : seulement sur un appareil qui survole vraiment (sinon toujours visible). */
@media (hover: hover) {
    :where(.atgf-img--reveal) > .atgf-img__cap {
        opacity: 0;
        transition: opacity .25s ease;
    }

    :where(.atgf-img--reveal):is(:hover, :focus-within) > .atgf-img__cap {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.atgf-img__img, .atgf-img__cap, .atgf-img__veil, .atgf-img__icon) {
        transition: none;
        animation: none;
    }
}