{% for valeur in valeurs %}
	<div id="{{ valeur.titre|slug }}" class="card">
		<span class="card_content">
			<header>
				<picture class="avatar">
					{# Source WebP prioritaire #}
					<source
						type="image/webp"
						srcset="
							{{ asset('images/valeurs/' ~ valeur.image) | imagine_filter('s_400_webp') }} 400w,
							{{ asset('images/valeurs/' ~ valeur.image) | imagine_filter('m_600_webp') }} 600w,
							{{ asset('images/valeurs/' ~ valeur.image) | imagine_filter('l_1024_webp') }} 1024w
						"
						sizes="(max-width: 600px) 100vw, 560px" />
				
					{# Fallback JPEG/PNG #}
					<img
						src="{{ asset('images/valeurs/' ~ valeur.image) | imagine_filter('m_600') }}"
						srcset="
							{{ asset('images/valeurs/' ~ valeur.image) | imagine_filter('s_400') }} 400w,
							{{ asset('images/valeurs/' ~ valeur.image) | imagine_filter('m_600') }} 600w,
							{{ asset('images/valeurs/' ~ valeur.image) | imagine_filter('l_1024') }} 1024w
						"
						sizes="(max-width: 600px) 100vw, 560px"
						alt="Sensipode - {{ valeur.titre }}"
						loading="lazy"
						decoding="async"
					/>
				</picture>
				<h4>{{ valeur.titre }}</h4>
			</header>
		</span>
	</div>
{% endfor %}