{% extends 'base.html.twig' %}

{% block title %}Artisan coutelier et affûteur à Clermont-Ferrand
{% endblock %}
{% block metaDesc %}Vulcan' Affûtage, artisan coutelier et affûteur à Clermont-Ferrand depuis 1981. Affûtage de précision, création de couteaux artisanaux uniques et de qualité.
{% endblock %}
{% block canonical %}{% endblock %}
{% block headerHome %}
	gColor
{% endblock %}

{% block body %}

	{# ----------------- HEADER IDENTIQUE ----------------- #}
	<div class="header-image max-w-100-p h-100-vh dp-f j-c-c a-i-c p-r h-80-vh-r600 h-75-vh-r500 h-65-vh-r400">
		<img class="p-a max-h-65-p max-w-90-p b-60" src="assets/logo-sf2.webp" alt="Logo Vulcan'Affûtage, atelier d'affûtage et coutellerie à Clermont-Ferrand et alentours">
	</div>
	<div class="bottom-header-color"></div>


	{# --------------------------------------------------------------------- #}
	{#                  1) SECTION : PRODUITS MIS EN AVANT                  #}
	{# --------------------------------------------------------------------- #}

	{% if products is not empty %}
		<div class="page-container pad-t-0">
			<section class="page-section gp-15">
				<div class="dp-f-r gp-25 a-i-c">
					<div class="separator-l w-10-p dgBgColor dp-n-r800"></div>
					<h2 class="ft-s-45 ft-f-chomsky dg2Color ft-s-40-r1000 ft-s-30-r600">
						Nos pièces disponibles
					</h2>
					<div class="separator-l f-1 dgBgColor dp-n-r800"></div>
				</div>
				<p class="ft-w-n ft-s-16 t-a-c dg2Color" style="letter-spacing:0.5px;">
					Pièces uniques, forgées et assemblées à la main dans notre atelier
				</p>
			</section>

			<section class="swiper-container-product-home swiper p-r dp-f-r j-c-c gp-10 mar-t-20 ovf-h">
				<div class="swiper-wrapper">
				{% for product in products %}
					<article class="swiper-slide productBox f-s-0 dp-f-c b-s-b-b b-r-8 ovf-h" style="border:1px solid #0e812a30; transition: box-shadow 0.3s ease, transform 0.2s ease;">
						<a href="{{ path('app_produit', { id: product.id }) }}" class="product-img-wrapper p-r dp-f a-i-c j-c-c b-s-b-b w-100-p {% if product.typeProduit.value == 'cravates_western' %}h-280{% else %}h-200{% endif %}" style="background:#fafaf8;">
							<img src="/assets/product/{{ product.id }}-1.jpg" alt="{{ product.libelle }}" loading="lazy" class="max-w-100-p max-h-100-p" style="object-fit:contain; padding:10px;">
						</a>
						<div class="dp-f-c gp-10 b-s-b-b pad-15 j-c-s-b" style="flex:1;">
							<a href="{{ path('app_produit', { id: product.id }) }}" class="truncate-1-line ft-w-6 ft-s-17 gColor-h ovf-h" title="{{ product.libelle }}" style="line-height:1.3;">
								{{ product.libelle }}
							</a>
							{% if product.model %}
								<p class="ft-s-13 dg2Color" style="opacity:0.7;">
									{{ product.model.getLibelle }}
								</p>
							{% endif %}
							<div class="dp-f-r gp-5 j-c-s-b a-i-c" style="margin-top:auto;">
								{% if product.statusBoutique.value == 'vente' %}
									<p class="ft-s-24">
										<b>{{ product.prixVente }}<span class="gColor ft-s-16">€</span></b>
									</p>
									<button onclick="addToCartAjax({{ product.id }})" class="button-rounded ft-s-12 pad-y-5 pad-x-12" style="white-space:nowrap;">
										Ajouter
									</button>
								{% elseif product.statusBoutique.value == 'vendu' %}
									<p class="ft-s-20" style="text-decoration: line-through; opacity:0.5;">
										<b>{{ product.prixVente }}<span class="gColor">€</span></b>
									</p>
									<span class="ft-s-12 ft-w-6" style="color:var(--blue);">Vendu</span>
								{% endif %}
							</div>
						</div>
					</article>
				{% endfor %}
				</div>
				<div class="swiper-button-prev"></div>
				<div class="swiper-button-next"></div>
			</section>

			<div class="swiper-pagination w-100-p j-c-c mar-t-15" style="position:unset;"></div>

			<div class="dp-f-r j-c-c mar-t-25 mar-b-20">
				<a class="button" href="{{ path('app_produits') }}">Voir tous les produits</a>
			</div>
		{% endif %}
		</div>


		{# --------------------------------------------------------------------- #}
		{#                   BANDEAU : NOTE GOOGLE                               #}
		{# --------------------------------------------------------------------- #}

		<article class="dp-f-r gp-30 gBgColor b-s-b-b pad-y-20 pad-x-40 cwColor a-i-c j-c-c f-w-w" style="min-height:80px;">
			<div class="dp-f-r a-i-c gp-12">
				<div class="dp-f-r gp-3">
					{% for i in 1..5 %}
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22" class="gldColor" fill="currentColor">
							<path d="M1.327,12.4,4.887,15,3.535,19.187A3.178,3.178,0,0,0,4.719,22.8a3.177,3.177,0,0,0,3.8-.019L12,20.219l3.482,2.559a3.227,3.227,0,0,0,4.983-3.591L19.113,15l3.56-2.6a3.227,3.227,0,0,0-1.9-5.832H16.4L15.073,2.432a3.227,3.227,0,0,0-6.146,0L7.6,6.568H3.231a3.227,3.227,0,0,0-1.9,5.832Z"/>
						</svg>
					{% endfor %}
				</div>
				<p class="ft-s-22 cwColor">
					<b>4,9 / 5</b>
				</p>
			</div>
			<div class="separator-vtcl dg2BgColor" style="height:35px; opacity:0.4;"></div>
			<p class="ft-s-16 cwColor t-a-c" style="letter-spacing:0.3px;">
				Noté par nos clients sur <b class="ft-f-chomsky ft-s-22">Google</b>
			</p>
		</article>


		{# --------------------------------------------------------------------- #}
		{#                   2) SECTION : PRÉSENTATION ARTISAN                    #}
		{# --------------------------------------------------------------------- #}

		<div class="page-container">
			<section class="page-section">
				<div class="dp-f-r gp-25 a-i-c">
					<div class="separator-l f-1 dgBgColor dp-n-r800"></div>
					<h1 class="ft-s-45 ft-f-chomsky dg2Color ft-s-40-r1000 ft-s-30-r600">Artisan affûteur et coutellier - Atelier fondé en 1981</h1>
					<div class="separator-l f-1 dgBgColor dp-n-r800"></div>
				</div>
				<div class="p-r mar-t-60 b-r-5 bg-c-transparent mar-t-u-r1000">
					<div class="dp-f-c gp-15 p-r b-s-b-b pad-25 b-r-8 bg-va-transparent">
						<div class="dp-f-c gp-15 p-r w-57-p w-u-r1000">
							<div class="dp-b-r1000 home-image"></div>
							<p class="ft-s-18 l-h-1-5">
								<span class="ft-f-chomsky ft-s-45 dg2Color">S</span>itué au cœur du Puy-de-Dôme à Clermont-Ferrand, Vulcan'affutage, Artisan affûteur et créateur coutelier depuis 1981, spécialisé dans l'affûtage pour professionnels et particuliers avec plus de 40 ans d'expérience dans le domaine, vous accompagne dans une prestation adaptée à vos exigences et vos besoins pour tout outil tranchant et coupant.
							</p>
							<p class="ft-s-18 l-h-1-5">
								<span class="ft-f-chomsky ft-s-45 dg2Color">N</span>otre passion pour ce métier nous pousse à offrir un service personnalisé et des conseils avisés à chacun de nos clients.
							</p>
							<p class="ft-s-18 l-h-1-5">
								<span class="ft-f-chomsky ft-s-45 dg2Color">D</span>ans notre boutique, nous cultivons les valeurs d'authenticité et de savoir-faire qui font la fierté de l'artisanat français.
							</p>
						</div>
						<div class="p-a dp-f j-c-c h-125-p w-40-p min-w-315 ovf-h t-50-p r-0 b-r-8 center-y-absolute dp-n-r1000">
							<img class="h-100-p b-r-8" src="/assets/header_home_presentation.webp" alt="Illustration Coutelier">
						</div>
					</div>
				</div>
				<div class="box-c">
					<a class="button mar-b-15 mar-t-50 mar-t-u-r1000" href="{{ path('app_presentation') }}" aria-label="Accéder à la page de présentation" title="Accéder à la page présentation">
						En voir +
					</a>
				</div>
			</section>

			{# --------------------------------------------------------------------- #}
			{#                   3) SECTION : AFFÛTAGE                                #}
			{# --------------------------------------------------------------------- #}

			<div class="page-container pad-t-0">
				<section class="page-section">
					<div class="dp-f-r gp-25 a-i-c">
						<div class="separator-l w-10-p dgBgColor dp-n-r800"></div>
						<h2 class="ft-s-45 ft-f-chomsky dg2Color ft-s-40-r1000 ft-s-30-r600">Affûtage de précision : Redonnez vie à vos outils</h2>
						<div class="separator-l f-1 dgBgColor dp-n-r800"></div>
					</div>
				</section>
			</div>

			<div class="dp-f-r j-c-s-b b-s-b-b w-100-p a-i-c f-c-r-r900 pad-x-30-r900 pad-x-15-r400">
				<p class="mar-l-50 pad-r-30 pad-y-25 pad-l-25 b-s-b-b bg-va-transparent t-a-j-r1000 pad-25-r900 b-r-b-5-r900 mar-u-r900 new-border-r900 b-rig-n l-h-1-5" style="border-radius:5px 0px 0px 5px;">
					Confiez vos lames à un artisan passionné, dévoué à leur redonner toute leur efficacité et leur éclat. Que ce soit pour vos couteaux de cuisine, vos ciseaux, vos outils de jardinage ou encore vos instruments professionnels, notre service d'affûtage garantit un résultat irréprochable. Chaque lame est soigneusement traitée en respectant sa spécificité, pour un tranchant optimal et durable.
					<br><br>
					Grâce à des techniques artisanales combinées à des équipements adaptés, nous prolongeons la durée de vie de vos outils tout en améliorant leur performance. Ne laissez pas vos lames perdre en efficacité : un outil bien affûté, c'est un geste sûr, précis et sans effort. Faites confiance à notre expertise pour redonner vie à vos outils du quotidien.
				</p>
				<article class="gBgColor b-s-b-b pad-y-5 pad-l-5 b-r-t-5-r900 w-100-p-r900 pad-5-r900">
					<div class="dp-f b-c-dom-dg2 b-w-2 b-s-b-b new-dg2-border-r900 b-r-5-r900 ovf-h">
						<img class="w-250 w-100-p-r900" src="/assets/home_affutage.webp" alt="Illustration Affûtage">
					</div>
				</article>
			</div>
		</div>


		{# --------------------------------------------------------------------- #}
		{#                   4) SECTION : CONTACT                                 #}
		{# --------------------------------------------------------------------- #}

		<div class="page-container dp-f-c gp-30">
			<div class="dp-f-c gp-8">
				<div class="dp-f-r gp-25 a-i-c">
					<div class="separator-l w-10-p dgBgColor dp-n-r800"></div>
					<h2 class="ft-s-45 ft-f-chomsky dg2Color ft-s-40-r1000 ft-s-30-r600">
						Une question ? Contactez-nous
					</h2>
					<div class="separator-l f-1 dgBgColor dp-n-r800"></div>
				</div>
				<p class="ft-w-n ft-s-15 ft-s-12-r600 t-a-c dg2Color" style="max-width:700px; margin:0 auto; line-height:1.5;">
					Pour toute demande d'information ou question sur nos articles, n'hésitez pas à nous contacter par téléphone, par mail ou venir dans notre boutique rue Saint-Dominique à Clermont-Ferrand.
				</p>
			</div>
			<div class="dp-f-c gp-15">
				{% if app.request.cookies.get('va_consent') == 'accepted' %}
					<iframe class="w-100-p h-300 b-r-8" style="border:1px solid var(--dgreen2);" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d264.5094934602022!2d3.080066398326057!3d45.7783977114082!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47f71bdc964b4f6b%3A0xe4f4310113eeb1a8!2sVULCAN&#39;%20AFF%C3%9BTAGE!5e0!3m2!1sfr!2sfr!4v1738073167668!5m2!1sfr!2sfr&layer=0" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
				{% else %}
					<div class="w-100-p h-300 b-r-8 dp-f-c j-c-c a-i-c gp-25 pad-25 b-s-b-b" style="border:1px solid var(--dgreen2); background:#fafaf8;">
						<p class="t-a-c ft-s-16">Cette carte utilise des cookies pour fonctionner.</p>
						<button onclick="acceptCookies()" class="button t-a-c dp-f-r gp-8 a-i-c">
							<p>Accepter les cookies et afficher la carte</p>
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="15" height="15" class="cwColor" fill="currentColor">
								<path d="M12,2a10.032,10.032,0,0,1,7.122,3H16a1,1,0,0,0-1,1h0a1,1,0,0,0,1,1h4.143A1.858,1.858,0,0,0,22,5.143V1a1,1,0,0,0-1-1h0a1,1,0,0,0-1,1V3.078A11.981,11.981,0,0,0,.05,10.9a1.007,1.007,0,0,0,1,1.1h0a.982.982,0,0,0,.989-.878A10.014,10.014,0,0,1,12,2Z"/>
								<path d="M22.951,12a.982.982,0,0,0-.989.878A9.986,9.986,0,0,1,4.878,19H8a1,1,0,0,0,1-1H9a1,1,0,0,0-1-1H3.857A1.856,1.856,0,0,0,2,18.857V23a1,1,0,0,0,1,1H3a1,1,0,0,0,1-1V20.922A11.981,11.981,0,0,0,23.95,13.1a1.007,1.007,0,0,0-1-1.1Z"/>
							</svg>
						</button>
					</div>
				{% endif %}
				<a href="{{ path('app_contact') }}" class="button t-a-c">Nous contacter</a>
			</div>
		</div>

		{{ parent() }}

				{% endblock %}