{% for projet in projets %}
	
	<span class="project_wrapper flexContainer">
		
		<article class="card_project {{ projet.pole ? projet.pole.slug : 'no-pole' }}">
			
			<a class="card_content" 
			href="{{ projet.slug ? path('app_projet_show', { 'slug': projet.slug }) : '#' }}" 
			title="{{ projet.slug ? '' : 'Slug manquant' }}">
							
				<header>
					
					<!-- Avatar -->
					{% for image in projet.images %}
						{% if loop.first  %}
							<picture class="avatar">
								{# Source WebP prioritaire #}
								<source
									type="image/webp"
									srcset="
										{{ asset('images/projets/' ~ image.imageName) | imagine_filter('s_400_webp') }} 400w,
										{{ asset('images/projets/' ~ image.imageName) | imagine_filter('m_600_webp') }} 600w,
										{{ asset('images/projets/' ~ image.imageName) | imagine_filter('l_1024_webp') }} 1024w
									"
									sizes="(max-width: 600px) 100vw, 512px" />
							
								{# Fallback JPEG/PNG #}
								<img
									src="{{ asset('images/projets/' ~ image.imageName) | imagine_filter('m_600') }}"
									srcset="
										{{ asset('images/projets/' ~ image.imageName) | imagine_filter('s_400') }} 400w,
										{{ asset('images/projets/' ~ image.imageName) | imagine_filter('m_600') }} 600w,
										{{ asset('images/projets/' ~ image.imageName) | imagine_filter('l_1024') }} 1024w
									"
									sizes="(max-width: 600px) 100vw, 512px"
									width="600"
									height="400"
									alt="Sensipode - {{projet.titre}}"
									loading="lazy"
									decoding="async"
								/>
							</picture>
						{% endif %}
					{% endfor %}
					
					<!-- Client / Date -->
					<span class="client flexContainer">
					{% for client in projet.clients %}
						{% if loop.first  %}
							{{ client }}
						{% endif %}
					{% endfor %}
					 / 
					{{ projet.annee }}
					</span>
					
					<!-- Titre -->
					<h4>{{projet.titre}}</h4>
					
				</header>
				
				<div class="content">
					
					<ul class="tags">

					    {# 1️⃣ Pôle #}
					    {% if projet.pole %}
					        <li class="tag">{{ projet.pole.titre }}</li>
					    {% endif %}
					
					    {# 2️⃣ Offres liées #}
					    {% for offre in projet.offres|filter(o => o.published) %}
					        <li class="tag offre">{{ offre.titre }}</li>
					    {% endfor %}
					
					    {# 3️⃣ Tags classiques sauf Secteur #}
					    {% for tag in projet.tags %}
					        {% if tag.parent and tag.parent.nom != 'Secteur' %}
					            <li class="tag {{ tag.parent.nom }}">{{ tag.nom }}</li>
					        {% endif %}
					    {% endfor %}
					
					</ul>
					
				</div>
				
				<footer>
					<button class="tertiaryButton">{{ material_icon('add', 'flexContainer') }}En savoir plus</button>
				</footer>
				
			</a>
			
		</article>
		
	</span>
	
{% endfor %}