{# MOBILE VERSION #}
<div class="lg:hidden relative overflow-x-hidden">
{% if (isArticle != true) %}
<img data-aos="fade-left" data-aos-delay="100" class="absolute z-10 w-48 right-0 top-44"
src="{{ asset('build/images/graphic/headers/grid-cut-1.png') }}" alt="black grib">
<img data-aos="fade-right" data-aos-delay="200" class="absolute z-10 w-10 left-0 top-72 md:top-96 md:w-20"
src="{{ asset('build/images/graphic/headers/grid-cut-2.png') }}" alt="black grib">
{% endif %}
{% if (tablet != null) %}
<div style="background-color: {{ ctaColor }}"
class="pl-3 py-1 pr-6 rounded-sm w-fit max-w-[12rem] absolute right-[-14px] top-14 rotate-12">
<p class="font-allerBold uppercase text-lg text-center leading-6">{{ tablet }}</p>
</div>
{% endif %}
{#<div class="px-10 {% if (isArticle) %} py-14 bg-gradient-to-b from-white to-[#F4EFEE] {% else %} pt-14 bg-grey-300 {% endif %}">
<div class="flex flex-col gap-8 md:w-1/2 {% if (isArticle != true) %} min-h-[17rem] {% endif %}">
<p data-aos="fade-right" data-aos-delay="0"
class="font-allerDisplay {% if (isArticle != true) %} text-white {% endif %} uppercase text-3xl relative z-20 pr-10">{{ title }}<p>
{% if (isArticle) %}
<div data-aos="fade-right" data-aos-delay="100" class="flex flex-wrap gap-4">
<div class="px-3 py-1.5 bg-pink-500 rounded-lg ">
<p class="font-allerRegular text-sm text-white">Petite enfance</p>
</div>
<div class="flex flex-row gap-3 items-center">
<div>
<p class="font-allerLight text-sm text-grey-200 whitespace-nowrap">09. avril</p>
</div>
#}{# <p class="font-allerLight text-sm text-grey-200">|</p>
<div class="flex flex-row gap-3">
<div class="flex flex-row items-center gap-1 items-center">
<i class="fa-solid fa-thumbs-up text-grey-200"></i>
<p class="font-allerRegular text-sm text-grey-200">6</p>
</div>
<div class="flex flex-row items-center gap-1 items-center">
<i class="fa-solid fa-comment text-grey-200"></i>
<p class="font-allerRegular text-sm text-grey-200">6</p>
</div>
<div class="flex flex-row items-center gap-1 items-center">
<i class="fa-solid fa-share-nodes text-grey-200"></i>
<p class="font-allerRegular text-sm text-grey-200">6</p>
</div>
</div> #}{#
</div>
</div>
{% endif %}
{% if (shortSubtitle != null) %}
<p data-aos="fade-right" data-aos-delay="100"
class="font-allerRegular text-white text-base relative z-20">{{ shortSubtitle }}</p>
{% endif %}
<!-- SMALL BLUE CTA -->
{% if (btn != null) %}
<div data-aos="fade-right" data-aos-delay="200" class="flex justify-start w-auto relative z-30">
<a href="{{ ctaLink }}" class="cta small-cta cta-blue">{{ btn }}</a>
</div>
{% endif %}
</div>
</div>
{% if (isArticle) %}
<div class="w-full bg-white relative z-20">
 
</div>
{% endif %}
<div class="relative bg-grey-300 bottom-0">
<img data-aos="fade-up" data-aos-delay="0" class="w-full relative z-20"
src="{{ asset('build/images/headers/mobile/' ~ url) }}" alt="homepage small header">
</div>#}
<div class="px-10 {% if (isArticle) %} py-14 bg-gradient-to-b from-white to-[#F4EFEE] {% elseif(bgColor is defined and bgColor is not null) %}bg-[{{ bgColor}}]{% else %}pt-14 bg-grey-300{% endif %}">
<div class="flex flex-col gap-8 md:w-1/2 {% if (isArticle != true) %} min-h-[17rem] {% endif %}">
{% set current_path = app.request.get('_route') %}
<p data-aos="fade-right" data-aos-delay="0" class="font-allerDisplay {% if (isArticle != true) %} text-white {% endif %} uppercase text-3xl relative z-20
{% if current_path == 'single_training' %} pr-24
{% else %} pr-10
{% endif %}">{{ title }}</p>
{% if (isArticle) %}
<div data-aos="fade-right" class="flex flex-wrap gap-4">
<div class="px-3 py-1.5 bg-pink-500 rounded-lg ">
<p class="font-allerRegular text-sm text-white">Petite enfance</p>
</div>
<div class="flex flex-row gap-3 items-center">
<div>
<p class="font-allerLight text-sm text-grey-200 whitespace-nowrap">09. avril</p>
</div>
{#<p class="font-allerLight text-sm text-grey-200">|</p>
<div class="flex flex-row gap-3">
<div class="flex flex-row items-center gap-1 items-center">
<i class="fa-solid fa-thumbs-up text-grey-200"></i>
<p class="font-allerRegular text-sm text-grey-200">6</p>
</div>
<div class="flex flex-row items-center gap-1 items-center">
<i class="fa-solid fa-comment text-grey-200"></i>
<p class="font-allerRegular text-sm text-grey-200">6</p>
</div>
<div class="flex flex-row items-center gap-1 items-center">
<i class="fa-solid fa-share-nodes text-grey-200"></i>
<p class="font-allerRegular text-sm text-grey-200">6</p>
</div>
</div>#}
</div>
</div>
{% endif %}
{% if (shortSubtitle != null) %}
<p data-aos="fade-right" class="font-allerRegular text-white text-base relative z-20">{{ shortSubtitle }}</p>
{% endif %}
<!-- SMALL BLUE CTA -->
{% if (btn != null) %}
<div data-aos="fade-right" class="flex justify-start w-auto relative z-30">
<a href="{{ ctaLink }}" class="cta small-cta cta-blue">{{ btn }}</a>
</div>
{% endif %}
</div>
</div>
{% if (isArticle) %}
<div class="w-full bg-white relative z-20">
 
</div>
{% endif %}
{% if headerMobileUrl != null %}
{% set current_path = app.request.get('_route') %}
<div class="relative bg-grey-300 bottom-0">
<img class="w-full relative z-20" {% if current_path == 'single_training' %} style="clip-path: polygon(0 47%, 100% 0%, 100% 100%, 0% 100%);"{% endif %} src="{{ asset('upload/images/training/header/' ~ headerMobileUrl) | imagine_filter('mobile_header') }}"
alt="homepage small header" fetchpriority="high">
</div>
{% elseif article != null %}
{% set current_path = app.request.get('_route') %}
<div class="relative bg-grey-300 bottom-0">
<img class="w-full relative z-20" {% if current_path == 'single_training' %} style="clip-path: polygon(0 47%, 100% 0%, 100% 100%, 0% 100%);"{% endif %} src="{{ asset('upload/images/article/' ~ article.imageName) | imagine_filter('mobile_header') }}"
alt="homepage small header" fetchpriority="high">
</div>
{% else %}
{% set current_path = app.request.get('_route') %}
<div class="relative bg-grey-300 bottom-0">
<img class="w-full relative z-20" {% if current_path == 'single_training' %} style="clip-path: polygon(0 47%, 100% 0%, 100% 100%, 0% 100%);"{% endif %} src="{{ asset('build/images/headers/mobile/' ~ url) | imagine_filter('mobile_header') }}"
alt="homepage small header" fetchpriority="high">
</div>
{% endif %}
</div>
{# DESKTOP VERSION #}
<div class="hidden lg:flex flex-row {% if (isArticle) %} bg-gradient-to-b from-white to-[#F4EFEE] {% elseif(bgColor is defined and bgColor is not null) %}bg-[{{ bgColor}}]{% else %}bg-grey-300{% endif %} items-center lg:h-[16rem] xl:h-[20rem] 2xl:h-[25rem] relative overflow-x-hidden">
{% if headerDesktopUrl != null %}
<img class="h-full" style="clip-path: polygon(0 0, 100% 0%, 70% 100%, 0% 100%);"
src="{{ asset('upload/images/training/header/' ~ headerDesktopUrl) | imagine_filter('desktop_header') }}"
alt="homepage small header" fetchpriority="high">
{% elseif article != null %}
<img class="h-full" style="clip-path: polygon(0 0, 100% 0%, 70% 100%, 0% 100%);"
src="{{ asset('upload/images/article/' ~ article.imageName) | imagine_filter('desktop_header') }}"
alt="homepage small header" fetchpriority="high">
{% else %}
<img class="h-full" style="clip-path: polygon(0 0, 100% 0%, 70% 100%, 0% 100%);"
src="{{ asset('build/images/headers/desktop/' ~ url) | imagine_filter('desktop_header') }}"
alt="homepage small header" fetchpriority="high">
{% endif %}
{% if (tablet != null) %}
<div style="background-color: {{ ctaColor }}"
class="px-3 py-1 pr-6 rounded-sm w-fit max-w-[12rem] absolute right-[-14px] top-14 rotate-12">
<p class="font-allerBold uppercase text-lg text-center leading-6">{{ tablet }}</p>
</div>
{% endif %}
<div class="absolute right-0 w-[55vw] pl-6 flex flex-col gap-4 xl:gap-6 pr-horizontal ">
<p data-aos="fade-left" class="pl-24 xl:pl-38 font-allerDisplay text-right {% if (isArticle != true) %} text-white {% endif %} uppercase text-2xl xl:text-3xl">{{ title }}</p>
{% if (isArticle) %}
<div data-aos="fade-left" class="flex flex-wrap gap-4 justify-end">
<div class="px-3 py-1.5 bg-pink-500 rounded-lg ">
<p class="font-allerRegular text-sm text-white">{{ article.category.name }}</p>
</div>
<div class="flex flex-row gap-3 items-center">
<div>
<p class="font-allerLight text-sm text-grey-200 whitespace-nowrap">{{ article.createdAt|date('d/m/Y') }}</p>
</div>
{#<p class="font-allerLight text-sm text-grey-200">|</p>
<div class="flex flex-row gap-3">
<div class="flex flex-row items-center gap-1 items-center">
<i class="fa-solid fa-thumbs-up text-grey-200"></i>
<p class="font-allerRegular text-sm text-grey-200">6</p>
</div>
<div class="flex flex-row items-center gap-1 items-center">
<i class="fa-solid fa-comment text-grey-200"></i>
<p class="font-allerRegular text-sm text-grey-200">6</p>
</div>
<div class="flex flex-row items-center gap-1 items-center">
<i class="fa-solid fa-share-nodes text-grey-200"></i>
<p class="font-allerRegular text-sm text-grey-200">6</p>
</div>
</div>#}
</div>
</div>
{% endif %}
{% if (shortSubtitle != null) %}
<p data-aos="fade-left" class="pl-12 xl:pl-28 3xl:hidden font-allerRegular text-right text-white text-sm">{{ shortSubtitle }}</p>
{% endif %}
{% if (longSubtitle != null) %}
<p data-aos="fade-left" class="pl-12 xl:pl-28 hidden 3xl:block font-allerRegular text-right text-white text-sm">{{ longSubtitle }}</p>
{% endif %}
{% if (btn != null) %}
<!-- SMALL BLUE CTA -->
<div data-aos="fade-left" class="flex justify-end w-auto">
<a {% if ctaColor != null %} style="color: white ;background-color: {{ ctaColor }}"
{% endif %}href="{{ ctaLink }}"
class="cta small-cta {% if ctaColor == null %}cta-blue{% endif %} lg:text-sm xl:text-base">{{ btn }}</a>
</div>
{% endif %}
</div>
</div>