Symfony Profiler

<div class="d-flex flex-column flex-root">
<div class="page d-flex flex-row flex-column-fluid">
<div id="kt_aside" class="aside aside-modern" data-kt-drawer="true" data-kt-drawer-name="aside" data-kt-drawer-activate="{default: true, lg: false}" data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'280px', '300px': '300px'}" data-kt-drawer-direction="start" data-kt-drawer-toggle="#kt_aside_mobile_toggle">

<div class="aside-logo-modern" id="kt_aside_logo">
<a href="/dashboard" class="logo-container-modern">
<span class="brand-text">MAZEGO</span>
</a>
<div id="kt_aside_toggle" class="btn-toggle-modern" data-kt-toggle="true" data-kt-toggle-state="active" data-kt-toggle-target="body" data-kt-toggle-name="aside-minimize">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m15 18-6-6 6-6"/>
</svg>
</div>
</div>

<div class="aside-menu-modern">
<div class="menu-scroll-modern" id="kt_aside_menu_wrapper" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-height="auto" data-kt-scroll-dependencies="#kt_aside_logo, #kt_aside_footer" data-kt-scroll-wrappers="#kt_aside_menu" data-kt-scroll-offset="0">
<div class="menu-modern" id="kt_aside_menu" data-kt-menu="true">

{# <div class="menu-section-modern">
<div class="menu-section-header-modern" data-section="facture-electronique">
<div class="menu-section-title-modern">
<span class="section-title-text">FACTURE ÉLECTRONIQUE</span>
<div class="menu-badge-modern">
<span class="badge-new-modern">NEW</span>
</div>
</div>
<div class="menu-section-arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6"/>
</svg>
</div>
</div>
<div class="menu-section-content" id="section-facture-electronique">
{% set hasCertificate = user_certificate is defined and user_certificate != null %}
{% set hasTTNConfig = user_ttn_config is defined and user_ttn_config|length > 0 %}
{% set isActivated = user_activation is defined and user_activation != null %}
{% if not isActivated %}

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('facture_electronique_step1') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
<line x1="8" y1="21" x2="16" y2="21"/>
<line x1="12" y1="17" x2="12" y2="21"/>
<path d="M12 7v6"/>
<path d="M9 10h6"/>
<circle cx="12" cy="10" r="2"/>
</svg>
</div>
<span class="menu-title-modern">Activer la facture électronique</span>
<div class="menu-badge-modern">
<span class="badge-new-modern">NEW</span>
</div>
</a>
</div>
{% else %}

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('dashboard_facture_electronique') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
<line x1="8" y1="21" x2="16" y2="21"/>
<line x1="12" y1="17" x2="12" y2="21"/>
<path d="M12 11v-4"/>
<circle cx="12" cy="9" r="1" fill="currentColor"/>
</svg>
</div>
<span class="menu-title-modern">Tableau de bord</span>
</a>
</div>
{% endif %}
{% if isActivated or (hasCertificate and not hasTTNConfig) %}
<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('facture_electronique_step2') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<path d="M12 16v-4"/>
<circle cx="12" cy="8" r="1" fill="currentColor"/>
</svg>
</div>
<span class="menu-title-modern">Configuration TTN</span>
{% if not hasTTNConfig %}
<div class="menu-badge-modern">
<span class="badge-dot-modern"></span>
</div>
{% endif %}
</a>
</div>
{% endif %}
<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('facture_electronique_certificate') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
<circle cx="12" cy="12" r="2"/>
<path d="M12 6v2"/>
<path d="M12 16v2"/>
<path d="M6 12h2"/>
<path d="M16 12h2"/>
</svg>
</div>
<span class="menu-title-modern">Certificat de signature</span>
<span class="badge-new-modern">NEW</span>
{% if hasCertificate %}
<div class="menu-badge-modern">
<span class="badge bg-success rounded-pill px-2 py-1" style="font-size: 0.7rem;">ACTIF</span>
</div>
{% endif %}
</a>
</div>
{% if isActivated %}
<div class="menu-item-modern">
<div class="menu-link-modern" style="cursor: default;">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 7h16"/>
<path d="M7 7v10"/>
<path d="M17 7v10"/>
<rect x="4" y="4" width="16" height="16" rx="2"/>
<path d="M9 11h6"/>
<path d="M12 14v-3"/>
</svg>
</div>
<span class="menu-title-modern">Signatures restantes</span>
<div class="menu-badge-modern">
<span class="badge bg-info rounded-pill px-2 py-1" style="font-size: 0.75rem; font-weight: 600;">
{{ user_signatures_remaining ?? 300 }} / {{ user_signatures_total ?? 300 }}
</span>
</div>
</div>
</div>
{% endif %}
{% if isActivated %}
<div class="menu-accordion-modern" data-kt-menu-trigger="click">
<div class="menu-link-modern menu-accordion-trigger">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14,2 14,8 20,8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
<path d="M10 9h4"/>
<path d="M8 9h.01"/>
<path d="M16 21v-4"/>
</svg>
</div>
<span class="menu-title-modern">Historique</span>
<div class="menu-arrow-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m9 18 6-6-6-6"/>
</svg>
</div>
</div>
<div class="menu-sub-modern">
<div class="menu-sub-item-modern">
<a href="{{ path('facture_electronique_historique_factures') }}" class="menu-sub-link-modern">
<span class="menu-bullet-modern"></span>
<span>Factures émises</span>
</a>
</div>
<div class="menu-sub-item-modern">
<a href="{{ path('facture_electronique_historique_paiements') }}" class="menu-sub-link-modern">
<span class="menu-bullet-modern"></span>
<span>Paiements</span>
</a>
</div>
<div class="menu-sub-item-modern">
<a href="{{ path('facture_electronique_rapports') }}" class="menu-sub-link-modern">
<span class="menu-bullet-modern"></span>
<span>Rapports</span>
</a>
</div>
</div>
</div>
{% endif %}
</div>
</div> #}

<div class="menu-section-modern">
<div class="menu-section-header-modern" data-section="facture-electronique">
<div class="menu-section-title-modern">
<span class="section-title-text">FACTURE ÉLECTRONIQUE</span>
<div class="menu-badge-modern">
<span class="badge-new-modern">NEW</span>
</div>
</div>
<div class="menu-section-arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6"/>
</svg>
</div>
</div>
<div class="menu-section-content" id="section-facture-electronique">
{# État du service - À définir dans votre contrôleur #}
{% set hasCertificate = user_certificate is defined and user_certificate != null %}
{% set hasDigiGoEmail = digigo_email is defined and digigo_email is not empty %}
{% set hasTTNConfig = user_ttn_config is defined and user_ttn_config|length > 0 %}
{% set isActivated = user_activation is defined and user_activation != null %}
{% set signatures_remaining = user_signatures_remaining is defined ? user_signatures_remaining : 300 %}
{% set signatures_total = user_signatures_total is defined ? user_signatures_total : 300 %}
{% set has_factures = donnees_electroniques is defined and donnees_electroniques|length > 0 %}
{# ===== ÉTAPE 1 : CONFIGURATION DIGIGO ===== #}

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('facture_electronique_setup') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="4" width="20" height="16" rx="2"/>
<path d="m22 7-10 7L2 7"/>
<circle cx="12" cy="15" r="2"/>
<path d="M12 15v-4"/>
<path d="M9 11h6"/>
</svg>
</div>
<span class="menu-title-modern">1. Configuration DigiGo</span>
{% if hasDigiGoEmail %}
<div class="menu-badge-modern">
<span class="badge bg-success rounded-pill px-2 py-1" style="font-size: 0.7rem;">✓
{# {{ digigo_email }} #}
</span>
</div>
{% else %}
{# <div class="menu-badge-modern">
<span class="badge-dot-modern"></span>
</div> #}
{# <div class="menu-badge-modern">
<span class="badge-new-modern">*</span>
</div> #}
{% endif %}
</a>
</div>
{# ===== ÉTAPE 2 : CERTIFICAT DE SIGNATURE ===== #}

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('facture_electronique_step1') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
<circle cx="12" cy="12" r="2"/>
<path d="M12 6v2"/>
<path d="M12 16v2"/>
<path d="M6 12h2"/>
<path d="M16 12h2"/>
</svg>
</div>
<span class="menu-title-modern">2. Certificat de signature</span>
{% if hasCertificate %}
<div class="menu-badge-modern">
<span class="badge bg-success rounded-pill px-2 py-1" style="font-size: 0.7rem;">ACTIF</span>
</div>
{% else %}
<div class="menu-badge-modern">
<span class="badge-dot-modern"></span>
</div>
{% endif %}
</a>
</div>
{# ===== ÉTAPE 3 : CONFIGURATION TTN ===== #}

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('facture_electronique_step2') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<path d="M12 16v-4"/>
<circle cx="12" cy="8" r="1" fill="currentColor"/>
<path d="M8 12h8"/>
</svg>
</div>
<span class="menu-title-modern">3. Configuration TTN</span>
{% if hasTTNConfig %}
<div class="menu-badge-modern">
<span class="badge bg-success rounded-pill px-2 py-1" style="font-size: 0.7rem;">ACTIF</span>
</div>
{% else %}
<div class="menu-badge-modern">
<span class="badge-dot-modern"></span>
</div>
{% endif %}
</a>
</div>
{# ===== ÉTAPE 4 : ACTIVATION & PAIEMENT ===== #}

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('facture_electronique_step3') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="5" width="20" height="14" rx="2"/>
<line x1="2" y1="10" x2="22" y2="10"/>
<circle cx="12" cy="15" r="2"/>
<path d="M12 15v-3"/>
<path d="M9 12h6"/>
</svg>
</div>
<span class="menu-title-modern">4. Activation & paiement</span>
{% if isActivated %}
<div class="menu-badge-modern">
<span class="badge bg-success rounded-pill px-2 py-1" style="font-size: 0.7rem;">ACTIVÉ</span>
</div>
{% endif %}
</a>
</div>
{# ===== SÉPARATEUR ===== #}
<div style="height: 1px; background: linear-gradient(90deg, transparent, #e2e8f0, transparent); margin: 0.5rem 1rem;"></div>
{# ===== LIEN RAPIDE VERS LE CERTIFICAT ===== #}

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('facture_electronique_certificate') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 7h16"/>
<path d="M7 7v10"/>
<path d="M17 7v10"/>
<rect x="4" y="4" width="16" height="16" rx="2"/>
</svg>
</div>
<span class="menu-title-modern">Gestion des certificats</span>
{% if hasCertificate %}
<div class="menu-badge-modern">
<span class="badge bg-success rounded-pill px-2 py-1" style="font-size: 0.7rem;">ACTIF</span>
</div>
{% endif %}
</a>
</div>
{# ===== NOUVEAU : LISTE DES FACTURES ÉLECTRONIQUES ===== #}

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('facture_electronique_liste') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14 2 14 8 20 8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
<path d="M10 9h4"/>
<path d="M8 9h.01"/>
</svg>
</div>
<span class="menu-title-modern">factures électroniques</span>
{% if has_factures %}
<div class="menu-badge-modern">
<span class="badge bg-primary rounded-pill px-2 py-1" style="font-size: 0.7rem;">
{{ donnees_electroniques|length }}
</span>
</div>
{% endif %}
</a>
</div>
{# ===== SI SERVICE ACTIVÉ ===== #}
{% if isActivated %}

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('dashboard_facture_electronique') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
<line x1="8" y1="21" x2="16" y2="21"/>
<line x1="12" y1="17" x2="12" y2="21"/>
<path d="M12 11v-4"/>
<circle cx="12" cy="9" r="1" fill="currentColor"/>
</svg>
</div>
<span class="menu-title-modern">Tableau de bord</span>
</a>
</div>

<div class="menu-item-modern">
<div class="menu-link-modern" style="cursor: default;">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 7h16"/>
<path d="M7 7v10"/>
<path d="M17 7v10"/>
<rect x="4" y="4" width="16" height="16" rx="2"/>
<path d="M9 11h6"/>
<path d="M12 14v-3"/>
</svg>
</div>
<span class="menu-title-modern">Signatures restantes</span>
<div class="menu-badge-modern">
<span class="badge bg-info rounded-pill px-2 py-1" style="font-size: 0.75rem; font-weight: 600;">
{{ signatures_remaining }} / {{ signatures_total }}
</span>
</div>
</div>
</div>

<div class="menu-accordion-modern" data-kt-menu-trigger="click">
<div class="menu-link-modern menu-accordion-trigger">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14 2 14 8 20 8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
<path d="M10 9h4"/>
<path d="M16 21v-4"/>
</svg>
</div>
<span class="menu-title-modern">Historique & rapports</span>
<div class="menu-arrow-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m9 18 6-6-6-6"/>
</svg>
</div>
</div>
<div class="menu-sub-modern">
<div class="menu-sub-item-modern">
<a href="{{ path('facture_electronique_historique_factures') }}" class="menu-sub-link-modern">
<span class="menu-bullet-modern"></span>
<span>Factures émises</span>
</a>
</div>
<div class="menu-sub-item-modern">
<a href="{{ path('facture_electronique_historique_paiements') }}" class="menu-sub-link-modern">
<span class="menu-bullet-modern"></span>
<span>Paiements</span>
</a>
</div>
<div class="menu-sub-item-modern">
<a href="{{ path('facture_electronique_rapports') }}" class="menu-sub-link-modern">
<span class="menu-bullet-modern"></span>
<span>Rapports mensuels</span>
</a>
</div>
</div>
</div>
{% endif %}
{# ===== LIEN D'AIDE ===== #}
<div class="menu-item-modern">
<a class="menu-link-modern" href="#" onclick="openSupportModal(); return false;">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<path d="M12 16v-4"/>
<circle cx="12" cy="8" r="1" fill="currentColor"/>
</svg>
</div>
<span class="menu-title-modern">Aide & support</span>
</a>
</div>
</div>
</div>

<div class="menu-section-modern">
<div class="menu-section-header-modern" data-section="dashboard">
<div class="menu-section-title-modern">
<span class="section-title-text">TABLEAU DE BORD</span>
</div>
<div class="menu-section-arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6"/>
</svg>
</div>
</div>
<div class="menu-section-content" id="section-dashboard">
<div class="menu-item-modern">
<a class="menu-link-modern active" href="/dashboard">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="7" height="7"/>
<rect x="14" y="3" width="7" height="7"/>
<rect x="14" y="14" width="7" height="7"/>
<rect x="3" y="14" width="7" height="7"/>
</svg>
</div>
<span class="menu-title-modern">Tableau de Bord</span>
</a>
</div>
</div>
</div>
{# 
<div class="menu-section-modern">
<div class="menu-section-header-modern" data-section="ventes">
<div class="menu-section-title-modern">
<span class="section-title-text">VENTES (CLIENTS)</span>
</div>
<div class="menu-section-arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6"/>
</svg>
</div>
</div>
<div class="menu-section-content" id="section-ventes">

<div class="menu-item-modern">
<a class="menu-link-modern" href="/devis/">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14,2 14,8 20,8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
<path d="M10 9h4"/>
</svg>
</div>
<span class="menu-title-modern">Devis & Propositions</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('devis_index_bon_livraison') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2v8l4-4"/>
<path d="M20 12a8 8 0 1 1-16 0 8 8 0 0 1 16 0z"/>
<path d="M16 12l-4 4-4-4"/>
<path d="M12 16V8"/>
</svg>
</div>
<span class="menu-title-modern">Bons de Livraison</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('reparation_index') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
</svg>
</div>
<span class="menu-title-modern">Bons de Réparation</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="/facture/">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14,2 14,8 20,8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
<path d="M10 9h4"/>
<path d="M12 21v-4"/>
</svg>
</div>
<span class="menu-title-modern">Factures Clients</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="/caisse/">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
<line x1="8" y1="21" x2="16" y2="21"/>
<line x1="12" y1="17" x2="12" y2="21"/>
<circle cx="12" cy="10" r="2"/>
<path d="M12 14v-4"/>
<path d="M16 10h4"/>
</svg>
</div>
<span class="menu-title-modern">Point de Vente PRO</span>
<div class="menu-badge-modern">
<span class="badge-new-modern">PRO</span>
</div>
</a>
</div>
</div>
</div> #}

<div class="menu-section-modern">
<div class="menu-section-header-modern" data-section="ventes">
<div class="menu-section-title-modern">
<span class="section-title-text">VENTES (CLIENTS)</span>
</div>
<div class="menu-section-arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6"/>
</svg>
</div>
</div>
<div class="menu-section-content" id="section-ventes">

<div class="menu-item-modern">
<a class="menu-link-modern" href="/devis/">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14,2 14,8 20,8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
<path d="M10 9h4"/>
</svg>
</div>
<span class="menu-title-modern">Devis & Propositions</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('devis_index_bon_livraison') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2v8l4-4"/>
<path d="M20 12a8 8 0 1 1-16 0 8 8 0 0 1 16 0z"/>
<path d="M16 12l-4 4-4-4"/>
<path d="M12 16V8"/>
</svg>
</div>
<span class="menu-title-modern">Bons de Livraison</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('reparation_index') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
</svg>
</div>
<span class="menu-title-modern">Bons de Réparation</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="/facture/">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14,2 14,8 20,8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
<path d="M10 9h4"/>
<path d="M12 21v-4"/>
</svg>
</div>
<span class="menu-title-modern">Factures Clients</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('retour_client_index') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m3 3 3 9h12l3-9H3z"/>
<path d="M6 12h12"/>
<path d="M12 3v18"/>
<path d="M15 6l-3 3 3 3"/>
<path d="M9 6l3-3-3-3"/>
</svg>
</div>
<span class="menu-title-modern">Retours Clients</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="/caisse/">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
<line x1="8" y1="21" x2="16" y2="21"/>
<line x1="12" y1="17" x2="12" y2="21"/>
<circle cx="12" cy="10" r="2"/>
<path d="M12 14v-4"/>
<path d="M16 10h4"/>
</svg>
</div>
<span class="menu-title-modern">Point de Vente PRO</span>
<div class="menu-badge-modern">
<span class="badge-new-modern">PRO</span>
</div>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('caisse_rapports_vendeurs') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 3v18h18"/>
<path d="M18 17V9"/>
<path d="M13 17V5"/>
<path d="M8 17v-3"/>
</svg>
</div>
<span class="menu-title-modern">Rapports de vente</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('caisse_cloture_index') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="10" rx="2"/>
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
</svg>
</div>
<span class="menu-title-modern">Clôtures de caisse</span>
</a>
</div>
</div>
</div>
{#

<div class="menu-section-modern">
<div class="menu-section-header-modern" data-section="achats">
<div class="menu-section-title-modern">
<span class="section-title-text">ACHATS (FOURNISSEURS)</span>
</div>
<div class="menu-section-arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6"/>
</svg>
</div>
</div>
<div class="menu-section-content" id="section-achats">

<div class="menu-item-modern">
<a class="menu-link-modern" href="/fournisseur/">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
</div>
<span class="menu-title-modern">Fournisseurs</span>
</a>
</div>


<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('devis_index_bon_commande') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="7" width="20" height="14" rx="2"/>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
<path d="M8 11h8"/>
<path d="M8 15h8"/>
<circle cx="12" cy="4" r="1"/>
</svg>
</div>
<span class="menu-title-modern">Bons de Commande Achat</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="/entrees/">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"/>
<path d="M12 5v14"/>
<rect x="3" y="3" width="18" height="18" rx="2"/>
<path d="M8 8h8v8H8z"/>
</svg>
</div>
<span class="menu-title-modern">Réceptions (Entrées Stock)</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
<path d="m9 12 3-3 3 3"/>
<path d="M12 16v-4"/>
</svg>
</div>
<span class="menu-title-modern">Retours Fournisseurs</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14,2 14,8 20,8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
<path d="M8 9h8"/>
<path d="M12 21v-4"/>
</svg>
</div>
<span class="menu-title-modern">Factures Fournisseurs</span>
<div class="menu-badge-modern">
<span class="badge-dev-modern">À DÉV</span>
</div>
</a>
</div>
</div>
</div> #}

<div class="menu-section-modern">
<div class="menu-section-header-modern" data-section="achats">
<div class="menu-section-title-modern">
<span class="section-title-text">ACHATS (FOURNISSEURS)</span>
</div>
<div class="menu-section-arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6"/>
</svg>
</div>
</div>
<div class="menu-section-content" id="section-achats">

<div class="menu-item-modern">
<a class="menu-link-modern" href="/fournisseur/">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
</div>
<span class="menu-title-modern">Fournisseurs</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('devis_index_bon_commande') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="7" width="20" height="14" rx="2"/>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
<path d="M8 11h8"/>
<path d="M8 15h8"/>
<circle cx="12" cy="4" r="1"/>
</svg>
</div>
<span class="menu-title-modern">Bons de Commande Achat</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="/entrees/">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"/>
<path d="M12 5v14"/>
<rect x="3" y="3" width="18" height="18" rx="2"/>
<path d="M8 8h8v8H8z"/>
</svg>
</div>
<span class="menu-title-modern">Réceptions (Entrées Stock)</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('retour_fournisseur_index') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
<path d="m9 12 3-3 3 3"/>
<path d="M12 16v-4"/>
</svg>
</div>
<span class="menu-title-modern">Retours Fournisseurs</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('facture_fournisseur_index') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14,2 14,8 20,8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
<path d="M8 9h8"/>
<path d="M12 21v-4"/>
</svg>
</div>
<span class="menu-title-modern">Factures Fournisseurs</span>
</a>
</div>
</div>
</div>

<div class="menu-section-modern">
<div class="menu-section-header-modern" data-section="stock">
<div class="menu-section-title-modern">
<span class="section-title-text">STOCK & LOGISTIQUE</span>
</div>
<div class="menu-section-arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6"/>
</svg>
</div>
</div>
<div class="menu-section-content" id="section-stock">

<div class="menu-item-modern">
<a class="menu-link-modern" href="/stock/">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z"/>
<path d="m3 9 2.45-4.9A2 2 0 0 1 7.24 3h9.52a2 2 0 0 1 1.8 1.1L21 9"/>
<path d="M12 3v6"/>
<path d="M9 12l3 3 3-3"/>
<path d="M12 15v6"/>
</svg>
</div>
<span class="menu-title-modern">Stock Global</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="/sorties/">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"/>
<path d="M12 5l7 7-7 7"/>
<rect x="3" y="3" width="18" height="18" rx="2"/>
<path d="M8 8h8v8H8z"/>
</svg>
</div>
<span class="menu-title-modern">Expéditions (Sorties)</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="/entrees/">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"/>
<path d="M12 5v14"/>
<rect x="3" y="3" width="18" height="18" rx="2"/>
<path d="M8 8h8v8H8z"/>
</svg>
</div>
<span class="menu-title-modern">Réceptions (Entrées)</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('inventaire_index') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2"/>
<path d="M3 9h18"/>
<path d="M9 21V9"/>
<path d="M15 21V9"/>
<path d="M12 9v12"/>
</svg>
</div>
<span class="menu-title-modern">Inventaire</span>
</a>
</div>
</div>
</div>

<div class="menu-section-modern">
<div class="menu-section-header-modern" data-section="contacts">
<div class="menu-section-title-modern">
<span class="section-title-text">CONTACTS & DONNÉES</span>
</div>
<div class="menu-section-arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6"/>
</svg>
</div>
</div>
<div class="menu-section-content" id="section-contacts">

<div class="menu-item-modern">
<a class="menu-link-modern" href="/client/">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
<path d="M16 21v-2a4 4 0 0 0-4-4H8"/>
</svg>
</div>
<span class="menu-title-modern">Clients</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="/fournisseur/">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
</div>
<span class="menu-title-modern">Fournisseurs</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="/produit/">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m7.5 4.27 9 5.15"/>
<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/>
<path d="m3.3 7 8.7 5 8.7-5"/>
<path d="M12 22V12"/>
<circle cx="12" cy="12" r="2"/>
</svg>
</div>
<span class="menu-title-modern">Produits & Services</span>
</a>
</div>
</div>
</div>

<div class="menu-section-modern">
<div class="menu-section-header-modern" data-section="marketing">
<div class="menu-section-title-modern">
<span class="section-title-text">MARKETING (PRO)</span>
</div>
<div class="menu-section-arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6"/>
</svg>
</div>
</div>
<div class="menu-section-content" id="section-marketing">

<div class="menu-item-modern">
<a class="menu-link-modern" href="/prospect/email">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
<polyline points="22,6 12,13 2,6"/>
<path d="M12 13l10-7"/>
<path d="M2 6l10 7 10-7"/>
</svg>
</div>
<span class="menu-title-modern">Prospection Email PRO</span>
<div class="menu-badge-modern">
<span class="badge-new-modern">PRO</span>
</div>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="/prospect/centres">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
<path d="M12 2.5v19"/>
<path d="M2 8l10 6 10-6"/>
<path d="M12 22V12"/>
<circle cx="12" cy="12" r="2"/>
</svg>
</div>
<span class="menu-title-modern">Prospection IA PRO</span>
<div class="menu-badge-modern">
<span class="badge-new-modern">PRO</span>
</div>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="/dashboard-prospect">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="20" x2="12" y2="10"/>
<line x1="18" y1="20" x2="18" y2="4"/>
<line x1="6" y1="20" x2="6" y2="16"/>
<circle cx="12" cy="10" r="2"/>
<circle cx="18" cy="4" r="2"/>
<circle cx="6" cy="16" r="2"/>
<path d="M12 10v10"/>
<path d="M18 4v16"/>
<path d="M6 16v4"/>
</svg>
</div>
<span class="menu-title-modern">Dashboard Prospect PRO</span>
<div class="menu-badge-modern">
<span class="badge-new-modern">PRO</span>
</div>
</a>
</div>

<div class="menu-accordion-modern" data-kt-menu-trigger="click">
<div class="menu-link-modern menu-accordion-trigger">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<path d="m4.93 4.93 4.24 4.24"/>
<path d="m14.83 9.17 4.24-4.24"/>
<path d="m14.83 14.83 4.24 4.24"/>
<path d="m9.17 14.83-4.24 4.24"/>
<path d="M12 2v20"/>
<path d="M2 12h20"/>
</svg>
</div>
<span class="menu-title-modern">Site Web Pro</span>
<div class="menu-arrow-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m9 18 6-6-6-6"/>
</svg>
</div>
</div>
<div class="menu-sub-modern">
<div class="menu-sub-item-modern">
<a href="/frontend" class="menu-sub-link-modern">
<span class="menu-bullet-modern"></span>
<span>Créer Mon Site</span>
</a>
</div>
<div class="menu-sub-item-modern">
<a href="/voir-mon-site" class="menu-sub-link-modern">
<span class="menu-bullet-modern"></span>
<span>Voir Mon Site</span>
</a>
</div>
</div>
</div>
</div>
</div>

<div class="menu-section-modern">
<div class="menu-section-header-modern" data-section="parametres">
<div class="menu-section-title-modern">
<span class="section-title-text">PARAMÈTRES</span>
</div>
<div class="menu-section-arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6"/>
</svg>
</div>
</div>
<div class="menu-section-content" id="section-parametres">

<div class="menu-item-modern">
<a class="menu-link-modern" href="/entreprise/">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 21h18"/>
<path d="M5 21V7l8-4v18"/>
<path d="M19 21V11l-6-4"/>
<path d="M9 9h6"/>
<path d="M9 13h6"/>
<path d="M9 17h6"/>
</svg>
</div>
<span class="menu-title-modern">Mon Entreprise</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('salarie_index') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
</div>
<span class="menu-title-modern">Salariés</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
<path d="M12 12v4"/>
</svg>
</div>
<span class="menu-title-modern">Mon Compte</span>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2v8l4-4"/>
<path d="M20 12a8 8 0 1 1-16 0 8 8 0 0 1 16 0z"/>
<path d="M8 12h8"/>
<path d="m12 16 4-4-4-4"/>
<circle cx="12" cy="12" r="2"/>
</svg>
</div>
<span class="menu-title-modern">Intégrations</span>
</a>
</div>

{% if is_granted('ROLE_ADMIN') %}
<div class="menu-item-modern">
<a class="menu-link-modern" href="/utilisateurs/">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="m22 21-3-3m0 0a5.5 5.5 0 1 0-7.78-7.78 5.5 5.5 0 0 0 7.78 7.78Z"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
</div>
<span class="menu-title-modern">Équipe & Utilisateurs</span>
<div class="menu-badge-modern">
<span class="badge-admin-modern">ADMIN</span>
</div>
</a>
</div>
{% endif %}
</div>
</div>

<div class="menu-section-modern">
<div class="menu-section-header-modern" data-section="tickets">
<div class="menu-section-title-modern">
<span class="section-title-text">TICKETS & SUPPORT</span>
<div class="menu-badge-modern">
<span class="badge-new-modern">NEW</span>
</div>
</div>
<div class="menu-section-arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6"/>
</svg>
</div>
</div>
<div class="menu-section-content" id="section-tickets">

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('ticket_index') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
<path d="M8 10h.01"/>
<path d="M12 10h.01"/>
<path d="M16 10h.01"/>
</svg>
</div>
<span class="menu-title-modern">
{% if is_granted('ROLE_ADMIN') %}
Gestion des tickets
{% else %}
Mes tickets
{% endif %}
</span>

<div class="menu-badge-modern">
{% set ticket_count = tickets_count ?? 0 %}
{% if ticket_count > 0 %}
<span class="badge bg-{% if is_granted('ROLE_ADMIN') %}primary{% else %}info{% endif %} rounded-pill px-2 py-1"
style="font-size: 0.7rem; background: {% if is_granted('ROLE_ADMIN') %}#3b82f6{% else %}#0ea5e9{% endif %}; color: white;">
{{ ticket_count }}
</span>
{% else %}
<span class="badge-dot-modern"></span>
{% endif %}
</div>
</a>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="#" onclick="openTicketModal(); return false;">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
<line x1="9" y1="10" x2="15" y2="10"/>
<line x1="12" y1="7" x2="12" y2="13"/>
</svg>
</div>
<span class="menu-title-modern">Nouveau ticket</span>
<div class="menu-badge-modern">
<span class="badge-new-modern" style="background: #10b981;">+</span>
</div>
</a>
</div>
</div>
</div>

<div class="menu-section-modern">
<div class="menu-section-header-modern" data-section="formation">
<div class="menu-section-title-modern">
<span class="section-title-text">FORMATION & TUTORIELS</span>
<div class="menu-badge-modern">
<span class="badge-new-modern">NEW</span>
</div>
</div>
<div class="menu-section-arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6"/>
</svg>
</div>
</div>
<div class="menu-section-content" id="section-formation">

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('formation_index') }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
<line x1="12" y1="22.08" x2="12" y2="12"/>
<circle cx="12" cy="12" r="2"/>
</svg>
</div>
<span class="menu-title-modern">Centre de formation</span>
<div class="menu-badge-modern">
<span class="badge bg-primary rounded-pill px-2 py-1" style="font-size: 0.7rem;">
6
</span>
</div>
</a>
</div>

<div style="height: 1px; background: linear-gradient(90deg, transparent, #e2e8f0, transparent); margin: 0.5rem 1rem;"></div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="{{ path('formation_video', {id: 1}) }}">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="5 3 19 12 5 21 5 3"/>
<circle cx="12" cy="12" r="10"/>
</svg>
</div>
<span class="menu-title-modern">Démo Mazego complète</span>
<div class="menu-badge-modern">
<span class="badge bg-success rounded-pill px-2 py-1" style="font-size: 0.65rem;">15 min</span>
</div>
</a>
</div>

<div class="menu-accordion-modern" data-kt-menu-trigger="click">
<div class="menu-link-modern menu-accordion-trigger">
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
<line x1="9" y1="9" x2="15" y2="9"/>
<line x1="9" y1="13" x2="15" y2="13"/>
<line x1="9" y1="17" x2="15" y2="17"/>
<circle cx="6" cy="9" r="1"/>
<circle cx="6" cy="13" r="1"/>
<circle cx="6" cy="17" r="1"/>
</svg>
</div>
<span class="menu-title-modern">Tutoriels par module</span>
<div class="menu-arrow-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m9 18 6-6-6-6"/>
</svg>
</div>
</div>
<div class="menu-sub-modern">
<div class="menu-sub-item-modern">
<a href="{{ path('formation_video', {id: 2}) }}" class="menu-sub-link-modern">
<span class="menu-bullet-modern"></span>
<span>Créer un devis</span>
</a>
</div>
<div class="menu-sub-item-modern">
<a href="{{ path('formation_video', {id: 3}) }}" class="menu-sub-link-modern">
<span class="menu-bullet-modern"></span>
<span>Créer une facture</span>
</a>
</div>
<div class="menu-sub-item-modern">
<a href="{{ path('formation_video', {id: 4}) }}" class="menu-sub-link-modern">
<span class="menu-bullet-modern"></span>
<span>Bon de commande</span>
</a>
</div>
<div class="menu-sub-item-modern">
<a href="{{ path('formation_video', {id: 5}) }}" class="menu-sub-link-modern">
<span class="menu-bullet-modern"></span>
<span>Bon de livraison</span>
</a>
</div>
<div class="menu-sub-item-modern">
<a href="{{ path('formation_video', {id: 6}) }}" class="menu-sub-link-modern">
<span class="menu-bullet-modern"></span>
<span>Prospection BtoB</span>
</a>
</div>
</div>
</div>

<div class="menu-item-modern">
<a class="menu-link-modern" href="https://www.canva.com/design/DAGsM4IzHX4/-xVezdK8KNcDQowJgMm6Xw/view?utm_content=DAGsM4IzHX4&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=hab518c912f" >
<div class="menu-icon-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
<path d="M8 7h8"/>
<path d="M8 11h8"/>
<path d="M8 15h6"/>
</svg>
</div>
<span class="menu-title-modern">Documentation</span>
<div class="menu-badge-modern">
<span class="badge-dev-modern">SOON</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="aside-footer-modern" id="kt_aside_footer">

<div class="support-actions-modern">

<button class="support-btn-modern ticket-btn" onclick="openTicketModal()">
<div class="support-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
<path d="M8 10h.01"/>
<path d="M12 10h.01"/>
<path d="M16 10h.01"/>
</svg>
</div>
<span class="support-text">Créer un ticket</span>
<span class="badge-new-ticket">NEW</span>
</button>

<button class="support-btn-modern" onclick="openSupportModal()">
<div class="support-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
<line x1="12" y1="17" x2="12.01" y2="17"/>
</svg>
</div>
<span class="support-text">Support</span>
</button>

{# <div class="facture-electronique-status-modern mt-3" id="facture-electronique-status">
{% set hasCertificate = user_certificate is defined and user_certificate != null %}
{% set hasTTNConfig = user_ttn_config is defined and user_ttn_config|length > 0 %}
{% set isActivated = user_activation is defined and user_activation != null %}
{% if not isActivated %}
<div class="alert alert-warning mb-0 p-2" style="border-radius: 10px; background: #fffbeb; border: 1px solid #fcd34d;">
<div class="d-flex align-items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<line x1="12" y1="8" x2="12" y2="12"/>
<line x1="12" y1="16" x2="12.01" y2="16"/>
</svg>
<span style="font-size: 0.75rem; color: #92400e;">
<strong>Facture électronique</strong><br>
<a href="{{ path('facture_electronique_step1') }}" style="color: #b45309; text-decoration: underline;">
Activer maintenant
</a>
</span>
</div>
</div>
{% elseif not hasTTNConfig %}
<div class="alert alert-info mb-0 p-2" style="border-radius: 10px; background: #e0f2fe; border: 1px solid #7dd3fc;">
<div class="d-flex align-items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0284c7" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<path d="M12 16v-4"/>
<circle cx="12" cy="8" r="1" fill="#0284c7"/>
</svg>
<span style="font-size: 0.75rem; color: #075985;">
<strong>Configuration TTN requise</strong><br>
<a href="{{ path('facture_electronique_step2') }}" style="color: #0369a1; text-decoration: underline;">
Configurer maintenant
</a>
</span>
</div>
</div>
{% endif %}
</div> #}
</div>

<div class="user-panel-modern">
<div class="user-avatar-modern">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>
</div>
<div class="user-info-modern">
<div class="user-name-modern">
{% if app.user and app.user.firstname is defined %}
{{ app.user.firstname ~ ' ' ~ app.user.lastname }}
{% elseif app.user and app.user.nomComplet is defined %}
{{ app.user.nomComplet }}
{% else %}
Utilisateur
{% endif %}
</div>
<div class="user-role-modern">{{ is_granted('ROLE_ADMIN') ? 'Administrateur' : (is_granted('ROLE_SALARIE') ? 'Salarié' : 'Utilisateur') }}</div>
</div>
<a href="/deconnexion" class="logout-btn-modern" title="Déconnexion">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
<polyline points="16,17 21,12 16,7"/>
<line x1="21" y1="12" x2="9" y2="12"/>
</svg>
</a>
</div>
{% if is_granted('ROLE_PREVIOUS_ADMIN') %}
<div class="alert alert-warning text-center mt-2">
Vous êtes connecté en tant que {{ app.user.email }}
<a href="{{ path('user_index', {'_switch_user': '_exit'}) }}" class="btn btn-sm btn-danger ms-3">
<i class="fas fa-sign-out-alt"></i> Revenir
</a>
</div>
{% endif %}
</div>
</div>

<div id="ticketModal" class="modal-modern" style="display: none;">
<div class="modal-overlay" onclick="closeTicketModal()"></div>
<div class="modal-container">
<div class="modal-header">
<div class="modal-title">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
</svg>
<span>Créer un nouveau ticket</span>
</div>
<button class="modal-close" onclick="closeTicketModal()">×</button>
</div>
<div class="modal-body">
<form id="ticketForm" action="{{ path('ticket_create') }}" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label class="form-label">Sujet</label>
<input type="text" name="subject" class="form-control" placeholder="Ex: Problème d'impression de facture" required>
</div>
<div class="form-group">
<label class="form-label">Message</label>
<textarea name="message" class="form-control" rows="5" placeholder="Décrivez votre problème en détail..." required></textarea>
</div>
<div class="form-group">
<label class="form-label">Pièces jointes</label>
<div class="file-upload-area">
<input type="file" name="attachments[]" id="fileInput" multiple style="display: none;">
<button type="button" class="file-upload-btn" onclick="document.getElementById('fileInput').click()">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
</svg>
Ajouter des fichiers
</button>
<span class="file-hint">PNG, JPG, PDF (max 10MB)</span>
</div>
<div id="fileList" class="file-list"></div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn-secondary" onclick="closeTicketModal()">Annuler</button>
<button type="submit" form="ticketForm" class="btn-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20 6L9 17l-5-5"/>
</svg>
Valider
</button>
</div>
</div>
</div>

<div id="supportModal" class="modal-modern" style="display: none;">
<div class="modal-overlay" onclick="closeSupportModal()"></div>
<div class="modal-container support-modal">
<div class="modal-header">
<div class="modal-title">
<div class="support-logo">
<span class="brand-text-modal">MAZEGO</span>
</div>
</div>
<button class="modal-close" onclick="closeSupportModal()">×</button>
</div>
<div class="modal-body text-center">
<div class="support-avatar">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="1.5">
<circle cx="12" cy="12" r="10"/>
<path d="M12 16v-4"/>
<circle cx="12" cy="8" r="1" fill="#3b82f6"/>
</svg>
</div>
<h3 class="support-title">Équipe de support</h3>
<div class="support-info-list">
<div class="support-info-item">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#64748b">
<rect x="2" y="4" width="20" height="16" rx="2"/>
<path d="m22 7-10 7L2 7"/>
</svg>
<span>support@mazego.fr</span>
</div>
<div class="support-info-item">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#64748b">
<rect x="5" y="2" width="14" height="20" rx="2"/>
<line x1="12" y1="18" x2="12.01" y2="18"/>
</svg>
{# <span>+216 51 950 201 / +33605669926</span> #}
<span>+33605669926</span>
</div>
<div class="support-info-item">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#64748b">
<circle cx="12" cy="12" r="10"/>
<polyline points="12 6 12 12 16 14"/>
</svg>
<span>Lun-Ven: 8h30 - 18h00</span>
</div>
<div class="support-info-item summer-schedule">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f59e0b">
<circle cx="12" cy="12" r="5"/>
<line x1="12" y1="1" x2="12" y2="3"/>
<line x1="12" y1="21" x2="12" y2="23"/>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
<line x1="1" y1="12" x2="3" y2="12"/>
<line x1="21" y1="12" x2="23" y2="12"/>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
</svg>
<span>Horaires été: 8h00 - 17h00</span>
</div>
</div>
<div class="support-response-time">
<div class="response-badge">
⚡ Temps de réponse moyen: 2h
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn-primary" onclick="closeSupportModal()">Fermer</button>
</div>
</div>
</div>

<button id="demoButton" class="demo-floating-btn" onclick="openDemoScheduler()">
<div class="demo-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
<line x1="16" y1="2" x2="16" y2="6"/>
<line x1="8" y1="2" x2="8" y2="6"/>
<line x1="3" y1="10" x2="21" y2="10"/>
<path d="M8 14h.01"/>
<path d="M12 14h.01"/>
<path d="M16 14h.01"/>
<path d="M8 18h.01"/>
<path d="M12 18h.01"/>
<path d="M16 18h.01"/>
</svg>
</div>
<span class="demo-text">Demander une démo</span>
<span class="demo-pulse"></span>
</button>

<div id="demoModal" class="modal-modern" style="display: none; ">
<div class="modal-overlay" onclick="closeDemoModal()"></div>
<div class="modal-container demo-modal-container">
<div class="modal-header">
<div class="modal-title">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>
<span>Programmer une démo personnalisée</span>
</div>
<button class="modal-close" onclick="closeDemoModal()">×</button>
</div>
<div class="modal-body p-0">


<iframe
id="koalendarIframe"
src="https://koalendar.com/e/demo-mazego"
width="100%"
height="600px"
frameborder="0"
allowfullscreen>
</iframe>

<div class="demo-info-bar">
<span class="demo-duration">⏱️ 45 minutes</span>
<span class="demo-spots">🎯 3 places restantes aujourd'hui</span>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const demoButton = document.getElementById('demoButton');
demoButton.addEventListener('click', function() {
// Attendre que la modal soit chargée
setTimeout(function() {
const modal = document.getElementById('demoModal');
if (modal && !document.getElementById('koalendar-overlay')) {
// Créer un div overlay pour masquer le branding
const overlay = document.createElement('div');
overlay.id = 'koalendar-overlay';
overlay.style.cssText = `
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background: white;
z-index: 10000;
pointer-events: none;
`;
modal.querySelector('.modal-body').style.position = 'relative';
modal.querySelector('.modal-body').appendChild(overlay);
}
}, 500);
});
});
</script>
<style>
#demoModal .modal-body {
max-height: 680px;
overflow: hidden !important;
}
#koalendarIframe {
height: 700px !important;
}
/* ========== SUPPORT & TICKET BUTTONS ========== */
.support-actions-modern {
display: flex;
gap: 8px;
margin-bottom: 16px;
padding: 0 8px;
}
.support-btn-modern {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 12px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 12px;
color: #475569;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.2s ease;
cursor: pointer;
position: relative;
}
.support-btn-modern:hover {
background: #f1f5f9;
border-color: #3b82f6;
color: #1e40af;
transform: translateY(-1px);
}
.support-btn-modern .support-icon {
display: flex;
align-items: center;
color: #64748b;
}
.support-btn-modern:hover .support-icon {
color: #3b82f6;
}
.ticket-btn {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
border-color: transparent;
color: white;
}
.ticket-btn .support-icon {
color: white;
}
.ticket-btn:hover {
background: linear-gradient(135deg, #2563eb, #1e40af);
color: white;
}
.ticket-btn:hover .support-icon {
color: white;
}
.badge-new-ticket {
position: absolute;
top: -6px;
right: -6px;
background: #ef4444;
color: white;
font-size: 0.65rem;
font-weight: 700;
padding: 2px 6px;
border-radius: 12px;
letter-spacing: 0.05em;
box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* ========== MODALS MODERNES ========== */
.modal-modern {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
.modal-container {
position: relative;
width: 90%;
max-width: 500px;
background: white;
border-radius: 20px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
z-index: 10000;
animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.support-modal {
max-width: 450px;
}
.demo-modal-container {
max-width: 900px;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid #e2e8f0;
}
.modal-title {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.1rem;
font-weight: 600;
color: #1e293b;
}
.modal-close {
background: none;
border: none;
font-size: 28px;
line-height: 1;
color: #94a3b8;
cursor: pointer;
transition: all 0.2s ease;
padding: 4px 12px;
border-radius: 8px;
}
.modal-close:hover {
background: #f1f5f9;
color: #475569;
}
.modal-body {
padding: 24px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 20px 24px;
border-top: 1px solid #e2e8f0;
}
/* ========== FORMULAIRES ========== */
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
margin-bottom: 8px;
font-weight: 500;
font-size: 0.9rem;
color: #475569;
}
.form-control {
width: 100%;
padding: 12px 16px;
border: 1px solid #e2e8f0;
border-radius: 12px;
font-size: 0.95rem;
transition: all 0.2s ease;
background: #f8fafc;
}
.form-control:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
background: white;
}
textarea.form-control {
resize: vertical;
min-height: 120px;
}
.file-upload-area {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.file-upload-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: #f1f5f9;
border: 1px dashed #94a3b8;
border-radius: 10px;
color: #475569;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
}
.file-upload-btn:hover {
background: #e2e8f0;
border-color: #3b82f6;
color: #1e40af;
}
.file-hint {
font-size: 0.8rem;
color: #94a3b8;
}
.file-list {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
/* ========== BOUTONS ========== */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
background: linear-gradient(135deg, #3b82f6, #2563eb);
border: none;
border-radius: 12px;
color: white;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-primary:hover {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 12px;
color: #475569;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-secondary:hover {
background: #e2e8f0;
color: #1e293b;
}
/* ========== MODAL SUPPORT ========== */
.support-logo {
display: flex;
align-items: center;
gap: 8px;
}
.brand-text-modal {
font-size: 1.4rem;
font-weight: 700;
color: #1e293b;
letter-spacing: -0.02em;
}
.support-avatar {
display: flex;
justify-content: center;
margin-bottom: 16px;
}
.support-title {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 24px;
}
.support-info-list {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
.support-info-item {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
color: #475569;
font-size: 1rem;
}
.summer-schedule {
color: #f59e0b;
font-weight: 500;
}
.support-response-time {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #e2e8f0;
}
.response-badge {
display: inline-flex;
align-items: center;
padding: 8px 16px;
background: #e0f2fe;
color: #0284c7;
border-radius: 30px;
font-size: 0.9rem;
font-weight: 500;
}
/* ========== BOUTON FLOATING DÉMO ========== */
.demo-floating-btn {
position: fixed;
/* bottom: 30px; */
top: 12px;
right: 30px;
display: flex;
align-items: center;
gap: 12px;
padding: 16px 28px;
background: linear-gradient(135deg, #8b5cf6, #6d28d9);
border: none;
border-radius: 50px;
color: white;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
box-shadow: 0 10px 25px rgba(109, 40, 217, 0.4);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 9998;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.demo-floating-btn:hover {
transform: scale(1.05);
box-shadow: 0 20px 35px rgba(109, 40, 217, 0.5);
background: linear-gradient(135deg, #7c3aed, #5b21b6);
}
.demo-icon {
display: flex;
align-items: center;
}
.demo-pulse {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50px;
box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.5);
animation: pulse-demo 2s infinite;
}
@keyframes pulse-demo {
0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.5); }
70% { box-shadow: 0 0 0 15px rgba(139, 92, 246, 0); }
100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}
/* Mode réduit - adaptations */
body[data-kt-aside-minimize="on"] .support-actions-modern {
flex-direction: column;
padding: 0 4px;
}
body[data-kt-aside-minimize="on"] .support-text {
display: none;
}
body[data-kt-aside-minimize="on"] .support-btn-modern {
padding: 12px;
}
body[data-kt-aside-minimize="on"] .support-icon {
margin: 0;
}
body[data-kt-aside-minimize="on"] .badge-new-ticket {
top: -3px;
right: -3px;
}
/* ========== DEMO INFO BAR ========== */
.demo-info-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
font-size: 0.9rem;
color: #475569;
}
.demo-duration {
display: flex;
align-items: center;
gap: 6px;
}
.demo-spots {
display: flex;
align-items: center;
gap: 6px;
color: #10b981;
font-weight: 500;
}
/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
.demo-floating-btn {
bottom: 20px;
right: 20px;
padding: 14px 20px;
font-size: 0.9rem;
}
.demo-floating-btn .demo-text {
display: none;
}
.demo-floating-btn {
padding: 16px;
border-radius: 50%;
}
.demo-floating-btn:hover {
transform: scale(1.1);
}
.modal-container {
width: 95%;
max-height: 90vh;
overflow-y: auto;
}
.demo-info-bar {
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
}
/* Sidebar Moderne - Design épuré et contemporain */
.aside-modern {
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
border-right: 1px solid #e2e8f0;
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
width: 280px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Logo Section */
.aside-logo-modern {
padding: 2rem 1.5rem 1.5rem;
border-bottom: 1px solid #f1f5f9;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
}
.logo-container-modern {
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.2s ease;
}
.logo-container-modern:hover {
transform: scale(1.02);
}
.brand-text {
font-size: 1.25rem;
font-weight: 700;
color: #1e293b;
letter-spacing: -0.02em;
}
.btn-toggle-modern {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 8px;
color: #64748b;
transition: all 0.2s ease;
cursor: pointer;
}
.btn-toggle-modern:hover {
background: #e2e8f0;
color: #475569;
transform: scale(1.05);
}
/* Menu Principal */
.aside-menu-modern {
padding: 1rem 0;
height: calc(100vh - 200px);
overflow: hidden;
}
.menu-scroll-modern {
height: 100%;
overflow-y: auto;
padding: 0 1rem;
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
}
.menu-scroll-modern::-webkit-scrollbar {
width: 4px;
}
.menu-scroll-modern::-webkit-scrollbar-track {
background: transparent;
}
.menu-scroll-modern::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 2px;
}
.menu-scroll-modern::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* Sections du Menu - STYLE ORIGINAL AMÉLIORÉ */
.menu-section-modern {
margin-bottom: 2rem;
}
/* En-tête de section cliquable */
.menu-section-header-modern {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
margin: 0 0.25rem 0.5rem;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid transparent;
background: #f8fafc;
}
.menu-section-header-modern:hover {
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
border-color: #e2e8f0;
}
.menu-section-header-modern.active {
/*background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); */
color: white;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.menu-section-title-modern {
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.section-title-text {
color: #475569;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
}
{# .menu-section-header-modern.active .section-title-text {
color: white;
} #}
.menu-section-arrow {
color: #94a3b8;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
{# .menu-section-header-modern.active .menu-section-arrow {
color: white;
transform: rotate(180deg);
} #}
/* Contenu des sections */
.menu-section-content {
max-height: 1000px;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-section-modern.collapsed .menu-section-content {
max-height: 0;
}
/* Items du Menu - STYLE ORIGINAL */
.menu-item-modern {
margin-bottom: 0.25rem;
}
.menu-link-modern {
display: flex;
align-items: center;
padding: 0.875rem 1rem;
border-radius: 12px;
text-decoration: none;
color: #475569;
font-weight: 500;
font-size: 0.95rem;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
margin: 0 0.25rem;
}
.menu-link-modern:hover {
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
color: #334155;
text-decoration: none;
transform: translateX(4px);
}
.menu-link-modern.active {
/* background: linear-gradient(135deg, #e4e4f7 0%, #e4e5f7 100%); */
color: #6b7787;
/* box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); */
font-weight: 600;
}
.menu-link-modern.active:hover {
transform: translateX(0);
}
/* Icônes */
.menu-icon-modern {
width: 22px;
height: 22px;
margin-right: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #64748b;
transition: all 0.2s ease;
}
.menu-link-modern:hover .menu-icon-modern {
color: #475569;
transform: scale(1.1);
}
.menu-link-modern.active .menu-icon-modern {
color: white;
}
/* Titres */
.menu-title-modern {
flex: 1;
font-size: 0.95rem;
line-height: 1.4;
}
/* Badges - STYLE ORIGINAL AMÉLIORÉ */
.menu-badge-modern {
margin-left: auto;
display: flex;
align-items: center;
}
.badge-dot-modern {
width: 6px;
height: 6px;
background: #10b981;
border-radius: 50%;
animation: pulse 2s infinite;
}
.badge-new-modern {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: white;
font-size: 0.7rem;
font-weight: 600;
padding: 2px 6px;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.badge-dev-modern {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: white;
font-size: 0.65rem;
font-weight: 600;
padding: 2px 6px;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.badge-admin-modern {
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
color: white;
font-size: 0.65rem;
font-weight: 600;
padding: 2px 6px;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* Accordéons */
.menu-accordion-modern {
margin-bottom: 0.25rem;
}
.menu-accordion-trigger {
cursor: pointer;
}
.menu-arrow-modern {
margin-left: auto;
color: #94a3b8;
transition: transform 0.2s ease;
}
.menu-accordion-modern.show .menu-arrow-modern {
transform: rotate(90deg);
}
/* Sous-menus */
.menu-sub-modern {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin: 0.5rem 0 0 0;
background: rgba(248, 250, 252, 0.5);
border-radius: 8px;
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.menu-accordion-modern.show .menu-sub-modern {
max-height: 300px;
padding: 0.5rem 0;
}
.menu-sub-item-modern {
margin-bottom: 0.125rem;
}
.menu-sub-link-modern {
display: flex;
align-items: center;
padding: 0.625rem 1rem 0.625rem 2.5rem;
color: #64748b;
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
border-radius: 8px;
transition: all 0.2s ease;
margin: 0 0.5rem;
}
.menu-sub-link-modern:hover {
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
text-decoration: none;
transform: translateX(4px);
}
.menu-bullet-modern {
width: 6px;
height: 6px;
background: #cbd5e1;
border-radius: 50%;
margin-right: 0.75rem;
transition: all 0.2s ease;
}
.menu-sub-link-modern:hover .menu-bullet-modern {
background: #3b82f6;
transform: scale(1.2);
}
/* Footer */
.aside-footer-modern {
padding: 1.5rem;
border-top: 1px solid #f1f5f9;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
}
.user-panel-modern {
display: flex;
align-items: center;
background: #f8fafc;
padding: 1rem;
border-radius: 12px;
border: 1px solid #e2e8f0;
transition: all 0.2s ease;
}
.user-panel-modern:hover {
background: #f1f5f9;
border-color: #cbd5e1;
}
.user-avatar-modern {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 0.75rem;
color: white;
}
.user-info-modern {
flex: 1;
}
.user-name-modern {
font-weight: 600;
font-size: 0.9rem;
color: #1e293b;
line-height: 1.2;
}
.user-role-modern {
font-size: 0.8rem;
color: #64748b;
margin-top: 0.125rem;
}
.logout-btn-modern {
background: #fee2e2;
color: #dc2626;
padding: 8px;
border-radius: 8px;
text-decoration: none;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.logout-btn-modern:hover {
background: #fecaca;
color: #b91c1c;
text-decoration: none;
transform: scale(1.05);
}
/* Responsive */
@media (max-width: 1024px) {
.aside-modern {
transform: translateX(-100%);
}
.aside-modern.drawer-on {
transform: translateX(0);
}
}
/* États actifs pour les liens */
.menu-link-modern.active::before {
content: '';
position: absolute;
left: -0.25rem;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 20px;
background: #3b82f6;
border-radius: 0 2px 2px 0;
}
/* Animation d'entrée */
.menu-item-modern {
animation: slideInLeft 0.3s ease-out;
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Amélioration des focus pour l'accessibilité */
.menu-link-modern:focus,
.menu-sub-link-modern:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
/* Mode réduit */
body[data-kt-aside-minimize="on"] .aside-modern {
width: 80px;
transition: all 0.3s ease;
}
body[data-kt-aside-minimize="on"] .brand-text,
body[data-kt-aside-minimize="on"] .menu-title-modern,
body[data-kt-aside-minimize="on"] .menu-arrow-modern,
body[data-kt-aside-minimize="on"] .menu-section-title-modern,
body[data-kt-aside-minimize="on"] .section-title-text,
body[data-kt-aside-minimize="on"] .user-name-modern,
body[data-kt-aside-minimize="on"] .user-role-modern {
display: none;
}
body[data-kt-aside-minimize="on"] .aside-logo-modern {
justify-content: center;
padding: 1.5rem 0.5rem;
}
body[data-kt-aside-minimize="on"] .btn-toggle-modern {
transform: rotate(180deg);
margin: 0 auto;
}
body[data-kt-aside-minimize="on"] .menu-link-modern {
justify-content: center;
padding: 0.875rem 0.5rem;
margin: 0 0.25rem;
}
body[data-kt-aside-minimize="on"] .menu-icon-modern {
margin-right: 0;
transform: scale(1.2);
}
body[data-kt-aside-minimize="on"] .menu-section-header-modern {
padding: 0.5rem;
justify-content: center;
}
body[data-kt-aside-minimize="on"] .menu-section-arrow {
display: none;
}
body[data-kt-aside-minimize="on"] .user-panel-modern {
justify-content: center;
padding: 0.75rem 0.5rem;
}
body[data-kt-aside-minimize="on"] .user-avatar-modern {
margin-right: 0;
}
body[data-kt-aside-minimize="on"] .logout-btn-modern {
position: absolute;
bottom: 1rem;
right: 1rem;
}
/* Responsive mobile */
@media (max-width: 1024px) {
.aside-modern {
position: fixed;
left: -280px;
top: 0;
bottom: 0;
z-index: 103;
transition: all 0.3s ease;
}
.aside-modern.mobile-show {
left: 0;
box-shadow: 10px 0 30px rgba(0,0,0,0.1);
}
/* Overlay pour mobile */
.aside-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.3);
z-index: 102;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.aside-overlay.active {
opacity: 1;
visibility: visible;
}
}
/* ========== AMÉLIORATIONS DU MENU ========== */
/* 1. Style moderne pour les liens actifs */
.menu-link-modern.active {
background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%);
color: #1e40af;
border-left: 3px solid #3b82f6;
font-weight: 600;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
}
.menu-link-modern.active .menu-icon-modern {
color: #3b82f6;
}
.menu-link-modern.active:hover {
background: linear-gradient(135deg, rgba(37, 99, 235, 0.18) 0%, rgba(59, 130, 246, 0.12) 100%);
transform: translateX(2px);
}
/* 2. Menu fermé par défaut */
.menu-section-modern {
margin-bottom: 1.5rem;
}
.menu-section-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-section-modern.expanded .menu-section-content {
max-height: 1000px;
}
/* 3. Flèche de section */
.menu-section-arrow {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform: rotate(0deg);
}
.menu-section-modern.expanded .menu-section-arrow {
transform: rotate(180deg);
}
/* 4. Style d'en-tête de section */
.menu-section-header-modern {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 0.75rem 1rem;
margin-bottom: 0.5rem;
cursor: pointer;
transition: all 0.2s ease;
}
.menu-section-header-modern:hover {
background: #f1f5f9;
border-color: #cbd5e1;
}
.menu-section-modern.expanded .menu-section-header-modern {
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
border-color: #cbd5e1;
}
/* 5. Maintien de la position de défilement */
.menu-scroll-modern {
scroll-behavior: auto; /* Désactiver le scroll automatique */
}
/* 6. Indicateur pour sections avec contenu actif */
.menu-section-header-modern.has-active-child {
border-left: 3px solid #3b82f6;
background: rgba(59, 130, 246, 0.05);
}
/* 7. Style pour sous-menus actifs */
.menu-sub-link-modern.active {
background: rgba(59, 130, 246, 0.1);
color: #1e40af;
font-weight: 500;
border-left: 2px solid #3b82f6;
}
.menu-sub-link-modern.active .menu-bullet-modern {
background: #3b82f6;
transform: scale(1.1);
}
/* 8. Animation subtile */
.menu-item-modern {
animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateX(-5px); }
to { opacity: 1; transform: translateX(0); }
}
/* 9. Indicateur visuel pour liens actifs */
.menu-link-modern.active::after {
content: '';
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: #10b981;
border-radius: 50%;
animation: pulse-active 2s infinite;
}
@keyframes pulse-active {
0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
70% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// ========== CONFIGURATION ==========
const CONFIG = {
localStorageKey: 'menuState_v1',
autoExpandActive: true,
defaultCollapsed: true,
saveScrollPosition: true
};
// ========== FONCTIONS UTILITAIRES ==========
// Sauvegarder l'état du menu
function saveMenuState() {
const menuState = {
sections: {},
scrollPosition: CONFIG.saveScrollPosition ? getScrollPosition() : 0,
timestamp: Date.now()
};
document.querySelectorAll('.menu-section-modern').forEach(section => {
const sectionId = section.querySelector('.menu-section-header-modern')?.dataset?.section;
if (sectionId) {
menuState.sections[sectionId] = section.classList.contains('expanded') ? 'expanded' : 'collapsed';
}
});
localStorage.setItem(CONFIG.localStorageKey, JSON.stringify(menuState));
}
// Restaurer l'état du menu
function loadMenuState() {
try {
const saved = localStorage.getItem(CONFIG.localStorageKey);
if (!saved) return null;
return JSON.parse(saved);
} catch (e) {
console.warn('Impossible de charger l\'état du menu:', e);
return null;
}
}
// Obtenir la position de défilement
function getScrollPosition() {
const scrollElement = document.querySelector('.menu-scroll-modern');
return scrollElement ? scrollElement.scrollTop : 0;
}
// Restaurer la position de défilement
function restoreScrollPosition(position) {
if (!CONFIG.saveScrollPosition) return;
const scrollElement = document.querySelector('.menu-scroll-modern');
if (scrollElement) {
// Attendre que le DOM soit complètement chargé
setTimeout(() => {
scrollElement.scrollTop = position;
}, 100);
}
}
// Trouver la section active
function findActiveSection() {
const currentPath = window.location.pathname;
const allLinks = document.querySelectorAll('.menu-link-modern[href], .menu-sub-link-modern[href]');
let activeSectionId = null;
allLinks.forEach(link => {
const href = link.getAttribute('href');
if (!href) return;
// Vérifier si ce lien correspond à la page actuelle
if (href === currentPath ||
(href !== '/' && currentPath.startsWith(href))) {
link.classList.add('active');
// Trouver la section parente
const section = link.closest('.menu-section-modern');
if (section) {
const sectionId = section.querySelector('.menu-section-header-modern')?.dataset?.section;
if (sectionId) {
activeSectionId = sectionId;
}
}
// Gérer les sous-menus d'accordéon
const accordion = link.closest('.menu-accordion-modern');
if (accordion) {
accordion.classList.add('show');
}
}
});
return activeSectionId;
}
// Initialiser les sections
function initializeSections() {
const savedState = loadMenuState();
const activeSectionId = findActiveSection();
document.querySelectorAll('.menu-section-modern').forEach(section => {
const header = section.querySelector('.menu-section-header-modern');
const sectionId = header.dataset.section;
// Vérifier si cette section a un enfant actif
const hasActiveChild = section.querySelector('.menu-link-modern.active, .menu-sub-link-modern.active');
if (hasActiveChild) {
header.classList.add('has-active-child');
}
// Déterminer l'état initial
let shouldExpand = false;
if (savedState?.sections?.[sectionId]) {
// Restaurer l'état sauvegardé
shouldExpand = savedState.sections[sectionId] === 'expanded';
} else if (CONFIG.defaultCollapsed) {
// Par défaut, toutes les sections sont fermées
shouldExpand = false;
} else {
// Sinon, ouvrir uniquement la section active
shouldExpand = sectionId === activeSectionId && CONFIG.autoExpandActive;
}
// Appliquer l'état
if (shouldExpand) {
section.classList.add('expanded');
header.classList.add('active');
} else {
section.classList.remove('expanded');
header.classList.remove('active');
}
// Gestionnaire de clic pour l'en-tête de section
header.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
const isExpanded = section.classList.contains('expanded');
const newState = !isExpanded;
// Mettre à jour l'état
section.classList.toggle('expanded', newState);
header.classList.toggle('active', newState);
// Sauvegarder l'état
saveMenuState();
});
});
// Restaurer la position de défilement
if (savedState?.scrollPosition) {
restoreScrollPosition(savedState.scrollPosition);
}
// Sauvegarder l'état initial
setTimeout(() => saveMenuState(), 500);
}
// Gestion des accordéons
function initializeAccordions() {
const accordions = document.querySelectorAll('.menu-accordion-modern');
accordions.forEach(accordion => {
const trigger = accordion.querySelector('.menu-accordion-trigger');
const arrow = accordion.querySelector('.menu-arrow-modern');
if (trigger) {
trigger.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
const isActive = accordion.classList.contains('show');
// Fermer tous les autres accordéons (optionnel)
// document.querySelectorAll('.menu-accordion-modern.show').forEach(acc => {
// if (acc !== accordion) {
// acc.classList.remove('show');
// }
// });
// Basculer l'état
accordion.classList.toggle('show', !isActive);
// Animer la flèche
if (arrow) {
arrow.style.transform = !isActive ? 'rotate(90deg)' : 'rotate(0deg)';
}
});
}
});
}
// Prévenir la perte de position lors des clics
function preventScrollReset() {
const menuLinks = document.querySelectorAll('.menu-link-modern[href]:not([href^="#"]):not([href^="http"])');
menuLinks.forEach(link => {
link.addEventListener('click', function() {
// Sauvegarder la position actuelle avant navigation
if (CONFIG.saveScrollPosition) {
const scrollPos = getScrollPosition();
const currentState = loadMenuState() || {};
currentState.scrollPosition = scrollPos;
localStorage.setItem(CONFIG.localStorageKey, JSON.stringify(currentState));
}
// Marquer ce lien comme actif immédiatement
document.querySelectorAll('.menu-link-modern.active, .menu-sub-link-modern.active').forEach(el => {
el.classList.remove('active');
});
this.classList.add('active');
// Mettre à jour l'état de la section parente
const parentSection = this.closest('.menu-section-modern');
if (parentSection) {
const header = parentSection.querySelector('.menu-section-header-modern');
if (header && !parentSection.classList.contains('expanded')) {
parentSection.classList.add('expanded');
header.classList.add('active');
header.classList.add('has-active-child');
}
}
// Sauvegarder l'état du menu
saveMenuState();
});
});
}
// Initialiser les effets de survol
function initializeHoverEffects() {
const menuItems = document.querySelectorAll('.menu-link-modern');
menuItems.forEach(item => {
item.addEventListener('mouseenter', function() {
if (!this.classList.contains('active')) {
this.style.transform = 'translateX(3px)';
}
});
item.addEventListener('mouseleave', function() {
this.style.transform = 'translateX(0)';
});
});
}
// ========== INITIALISATION ==========
function initializeMenu() {
initializeSections();
initializeAccordions();
preventScrollReset();
initializeHoverEffects();
// Sauvegarder l'état quand l'utilisateur quitte la page
window.addEventListener('beforeunload', saveMenuState);
// Sauvegarder périodiquement (au cas où)
setInterval(saveMenuState, 30000); // Toutes les 30 secondes
}
// Démarrer l'initialisation
initializeMenu();
});
</script>
<script>
// ========== GESTION DES MODALS ==========
document.addEventListener('DOMContentLoaded', function() {
// Initialisation des gestionnaires de fichiers
initFileUpload();
});
// MODAL TICKET
function openTicketModal() {
document.getElementById('ticketModal').style.display = 'flex';
document.body.style.overflow = 'hidden';
}
function closeTicketModal() {
document.getElementById('ticketModal').style.display = 'none';
document.body.style.overflow = '';
// Réinitialiser le formulaire
const form = document.getElementById('ticketForm');
if (form) form.reset();
document.getElementById('fileList').innerHTML = '';
}
// MODAL SUPPORT
function openSupportModal() {
document.getElementById('supportModal').style.display = 'flex';
document.body.style.overflow = 'hidden';
}
function closeSupportModal() {
document.getElementById('supportModal').style.display = 'none';
document.body.style.overflow = '';
}
// MODAL DÉMO
function openDemoScheduler() {
document.getElementById('demoModal').style.display = 'flex';
document.body.style.overflow = 'hidden';
}
function closeDemoModal() {
document.getElementById('demoModal').style.display = 'none';
document.body.style.overflow = '';
}
// Upload de fichiers
function initFileUpload() {
const fileInput = document.getElementById('fileInput');
if (!fileInput) return;
fileInput.addEventListener('change', function(e) {
const fileList = document.getElementById('fileList');
fileList.innerHTML = '';
Array.from(this.files).forEach((file, index) => {
const fileItem = document.createElement('div');
fileItem.className = 'file-item';
fileItem.style.cssText = `
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: #f8fafc;
border-radius: 8px;
font-size: 0.85rem;
`;
fileItem.innerHTML = `
<div style="display: flex; align-items: center; gap: 8px;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#64748b">
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/>
<polyline points="13 2 13 9 20 9"/>
</svg>
<span style="color: #1e293b;">${file.name}</span>
<span style="color: #94a3b8; font-size: 0.75rem;">(${(file.size / 1024).toFixed(1)} KB)</span>
</div>
<button type="button" onclick="this.parentElement.remove()" style="background: none; border: none; color: #ef4444; cursor: pointer;">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
`;
fileList.appendChild(fileItem);
});
});
}
// Fermeture avec touche Echap
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
closeTicketModal();
closeSupportModal();
closeDemoModal();
}
});
// Empêcher la propagation des clics dans les modals
document.querySelectorAll('.modal-container').forEach(modal => {
modal.addEventListener('click', function(e) {
e.stopPropagation();
});
});
</script>
<div class="wrapper d-flex flex-column flex-row-fluid" id="kt_wrapper">
<div id="kt_header" style="" class="header align-items-stretch">
<div class="container d-flex align-items-stretch justify-content-between">
<div class="d-flex align-items-center d-lg-none ms-n3 me-1" title="Show aside menu">
<div class="btn btn-icon btn-active-light-primary" id="kt_aside_mobile_toggle">
<span class="svg-icon svg-icon-2x mt-1">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24" />
<rect fill="#000000" x="4" y="5" width="16" height="3" rx="1.5" />
<path
d="M5.5,15 L18.5,15 C19.3284271,15 20,15.6715729 20,16.5 C20,17.3284271 19.3284271,18 18.5,18 L5.5,18 C4.67157288,18 4,17.3284271 4,16.5 C4,15.6715729 4.67157288,15 5.5,15 Z M5.5,10 L18.5,10 C19.3284271,10 20,10.6715729 20,11.5 C20,12.3284271 19.3284271,13 18.5,13 L5.5,13 C4.67157288,13 4,12.3284271 4,11.5 C4,10.6715729 4.67157288,10 5.5,10 Z"
fill="#000000" opacity="0.3" />
</g>
</svg>
</span>
</div>
</div>
</div>
</div>

templates/Base/_sidebar_admin.html.twig line 1601