{% extends 'base.html.twig' %}
{% block title %}{{ setting.siteName }} : {{ expert.firstname }} {{ expert.lastname }}{% endblock %}
{% block body %}
<section class="container pt-5 pb-3">
<div class="row pt-3">
<div class="col">
{# Breadcrumbs #}
<div class="row">
<div class="col small">
<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E");"
aria-label="breadcrumb">
<ol class="breadcrumb small">
<li class="breadcrumb-item"><a href="{{ path('app_home') }}"
class="text-decoration-none text-dark">Accueil</a></li>
<li class="breadcrumb-item active" aria-current="page">
<a href="{{ path('app_expert_index') }}" class="text-decoration-none text-dark">
Nos experts
</a>
</li>
<li class="breadcrumb-item">{{ expert.firstname }} {{ expert.lastname }}</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</section>
<div style="position: relative; background-color: #0a3962; border-bottom: solid 1px #007caf;">
{# <div class="py-5 mobile-expert-bg" data-aos="fade-right" data-aos-duration="2500" style="position: absolute; height: 100%; width: 100%; background-size: contain; background-repeat: no-repeat; background-position: left; background-image: linear-gradient(to right bottom, #0b3962c0, #0b3a62c0), url('{{ asset('assets/img/experts/bg/' ~ expert.background ) }}')"></div> #}
<div class="py-5 mobile-expert-bg" data-aos="fade-right" data-aos-duration="2500" style="position: absolute; height: 100%; width: 100%; background-size: contain; background-repeat: no-repeat; background-position: left; background-image: url('{{ asset('assets/img/experts/bg/' ~ expert.backgroundBleu ) }}')"></div>
<section class="container pt-5 position-relative">
<div class="row pt-5">
<div class="col text-center">
<h1 class="text-uppercase color2 fw-700" data-aos="fade-down" data-aos-duration="2000">{{ expert.firstname }} {{ expert.lastname }}</h1>
<h1 class="text-uppercase text-white cera" data-aos="fade-down" data-aos-duration="2500">{{ expert.fonction }}</h1>
</div>
</div>
<div class="row d-flex justify-content-center pt-3">
<div class="col">
<p class="lead text-center">
<span class="text-white me-3 fw-700">
{# <i class="bi bi-telephone-fill color2 me-2"></i>{{ expert.telephone }} #}
<svg fill="#21afe6" width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960"><path d="M499.58,808.37h-38.48c-12.24-1.65-24.56-2.86-36.71-5.03-87.85-15.69-159.09-59.28-210.37-132.01-67.34-95.5-80.12-199.78-39.85-309.38,44.39-120.81,163.91-205.88,292.35-210.11,69.9-2.3,134.82,14.51,193.15,53.29,78.84,52.42,126.92,125.68,143.96,218.98,2.21,12.12,3.39,24.43,5.04,36.65v38.48c-1.03,8.44-1.88,16.9-3.1,25.31-11.34,77.61-45.32,143.51-102.89,196.85-47.25,43.78-102.86,71.1-166.41,81.97-12.16,2.08-24.46,3.36-36.69,5.01Zm-192.19-415.62c-.56,18.48,6,35.21,13.05,51.71,18.02,42.2,44.39,78.78,76.64,111.13,42.07,42.19,89.98,75.2,147.88,92.06,22.07,6.43,43.38,4.59,64.13-5.34,15.03-7.2,25.94-19.29,37.45-30.69,8.93-8.85,8.97-15.86,.16-24.72-18.83-18.94-37.7-37.85-56.61-56.71-8.78-8.76-16.01-8.72-24.76,.09-10.39,10.46-20.62,21.08-31.08,31.47-12.22,12.13-27.12,13.21-41.15,3.19-36.81-26.27-68.74-57.52-95.8-93.76-11.58-15.5-10.67-29.88,2.89-43.56,10.68-10.77,21.51-21.4,32.15-32.21,7.74-7.86,7.9-15.19,.25-22.93-19.39-19.59-38.89-39.08-58.47-58.48-7.68-7.61-14.99-7.45-22.92,.21-5.84,5.64-11.54,11.43-17.23,17.22-16.75,17.01-25.8,37.38-26.59,61.32Z"/></svg>
{{ expert.telephone }}
</span>
<br>
<span class="text-white me-3 fw-700">
{# <i class="bi bi-envelope color2 me-2"></i> #}
<svg fill="#21afe6" width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960"><path d="M459.46,151.33c13.69,0,27.39,0,41.08,0,11.19,1.46,22.45,2.54,33.57,4.44,61.73,10.55,116.35,36.35,163.13,77.97,57.19,50.89,92.95,114.09,106.39,189.63,2.13,11.95,3.39,24.05,5.05,36.09v41.08c-1,8.03-1.86,16.07-3.01,24.08-9.37,65.65-35.76,123.61-79.88,173.1-50.64,56.8-113.56,92.27-188.56,105.83-12.14,2.2-24.45,3.43-36.68,5.11h-41.08c-8.02-.99-16.06-1.85-24.05-3-65.41-9.37-123.21-35.56-172.61-79.45-57.07-50.7-92.71-113.74-106.34-188.96-2.2-12.15-3.44-24.47-5.12-36.72,0-13.69,0-27.39,0-41.08,1.44-10.98,2.51-22.03,4.37-32.94,11.62-68.37,41.62-127.53,90.32-176.89,49.16-49.83,108.32-81.11,177.38-93.25,11.95-2.1,24.04-3.39,36.07-5.05Zm20.58,478.03c55.62,0,111.23,.03,166.85-.01,27.84-.02,44.91-17,44.92-44.63,.02-69.95,.03-139.9,0-209.85-.01-26.94-17.13-44.19-44.03-44.2-111.88-.05-223.75-.03-335.63,.03-4.24,0-8.62,.24-12.69,1.28-19.34,4.96-31.23,20.89-31.25,41.69-.05,69.95,.48,139.9-.28,209.84-.28,25.63,17.82,46.52,45.91,46.09,55.39-.84,110.8-.25,166.21-.25Z"/><path d="M302.58,382.09c13.21,10.47,25.4,20.11,37.57,29.77,42.37,33.65,84.74,67.31,127.11,100.96,9.16,7.27,16.26,7.34,25.42,.07,51.94-41.21,103.85-82.45,155.77-123.68,2.63-2.09,5.28-4.16,8.86-6.98,.2,3.1,.45,5.1,.45,7.09,.02,64.61,.02,129.22,.01,193.83,0,10.78-1.58,12.35-12.19,12.35-110.6,0-221.21,0-331.81,0-9.51,0-11.53-1.87-11.54-11.06-.03-65.46-.02-130.93,0-196.39,0-1.47,.16-2.95,.34-5.96Z"/><path d="M336.31,364.81h287.5c-1.72,1.63-2.66,2.66-3.73,3.52-45.22,35.92-90.46,71.81-135.65,107.77-2.73,2.17-4.65,3.42-8.15,.62-45.79-36.58-91.73-72.97-137.61-109.42-.62-.5-1.11-1.16-2.36-2.48Z"/></svg>
{{ expert.email }}
</span>
<br>
<span class="text-white me-3 fw-700">
<a href="{{ expert.linkedin }}" target="_blank">
<svg fill="#21afe6" width="25" height="25" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 .4C4.698.4.4 4.698.4 10s4.298 9.6 9.6 9.6s9.6-4.298 9.6-9.6S15.302.4 10 .4zM7.65 13.979H5.706V7.723H7.65v6.256zm-.984-7.024c-.614 0-1.011-.435-1.011-.973c0-.549.409-.971 1.036-.971s1.011.422 1.023.971c0 .538-.396.973-1.048.973zm8.084 7.024h-1.944v-3.467c0-.807-.282-1.355-.985-1.355c-.537 0-.856.371-.997.728c-.052.127-.065.307-.065.486v3.607H8.814v-4.26c0-.781-.025-1.434-.051-1.996h1.689l.089.869h.039c.256-.408.883-1.01 1.932-1.01c1.279 0 2.238.857 2.238 2.699v3.699z"></path></svg>
</a>
</span>
</p>
</div>
</div>
{% if expert.certification != null %}
<div class="row">
<div class="col">
<p class="text-center">
<span class="color2 text-uppercase lead fw-bold">Certifications de spécialisation :</span>
<br>
<span class="text-white text-uppercase lead">{{ expert.certification }}</span>
</p>
</div>
</div>
{% endif %}
</section>
<section class="container pb-5 position-relative mobile-expert-textcontent" style="height: 495px;">
<div class="row d-flex justify-content-center pt-2 pb-5">
<div class="col-lg-8 col-sm-12 text-white small">
{{ expert.presentation|replace({
'<div>': '<span>',
'</div>': '</span>',
})|raw }}
</div>
</div>
</section>
</div>
{% endblock %}