/* ============================================================
   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. Taille et remplissage en 0-1-0 (et non
   :where) : le `img { height: auto }` des thèmes (0-0-1) annulait la hauteur, l'image ne couvrait plus sa boîte ;
   une classe utilitaire ou le CSS perso d'un bloc (#id) gardent la main. */
:where(.atgf-img__box) .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%);
}

/* Remplir la case (ratio « fill », audit 02/10 E4) : l'image prend toute la place de son conteneur (case de grille,
   colonne étirée) SANS en dicter la hauteur — sortie du calcul des tailles, elle ne fait plus grandir la rangée. */
.atgf-img--fill {
    width: 100%;
    height: 100%;
    min-height: var(--atgf-img-fill-min, 120px);
}

.atgf-img--fill > .atgf-img__box {
    position: absolute;
    inset: 0;
}

/* 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;
    }
}