var/cache/dev/twig/7e/7e1eaabe8cf91543b9a61edc82fd2f29.php line 2543

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\CoreExtension;
  7. use Twig\Extension\SandboxExtension;
  8. use Twig\Markup;
  9. use Twig\Sandbox\SecurityError;
  10. use Twig\Sandbox\SecurityNotAllowedTagError;
  11. use Twig\Sandbox\SecurityNotAllowedFilterError;
  12. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  13. use Twig\Source;
  14. use Twig\Template;
  15. use Twig\TemplateWrapper;
  17. /* base_home.html.twig */
  18. class __TwigTemplate_c86efc76357b73ced93910d382926e56 extends Template
  19. {
  20.     private Source $source;
  21.     /**
  22.      * @var array<string, Template>
  23.      */
  24.     private array $macros = [];
  26.     public function __construct(Environment $env)
  27.     {
  28.         parent::__construct($env);
  30.         $this->source = $this->getSourceContext();
  32.         $this->parent = false;
  34.         $this->blocks = [
  35.             'title' => [$this, 'block_title'],
  36.             'stylesheets' => [$this, 'block_stylesheets'],
  37.             'body' => [$this, 'block_body'],
  38.             'javascripts' => [$this, 'block_javascripts'],
  39.         ];
  40.     }
  42.     protected function doDisplay(array $context, array $blocks = []): iterable
  43.     {
  44.         $macros = $this->macros;
  45.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  46.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "base_home.html.twig"));
  48.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  49.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "base_home.html.twig"));
  51.         // line 1
  52.         yield "<!DOCTYPE html>
  53. <html lang=\"fr\" class=\"no-js\">
  55. \t<head>
  56. \t\t<!-- Mobile Specific Meta -->
  57. \t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no\">
  58. \t\t<meta name=\"mobile-web-app-capable\" content=\"yes\">
  59. \t\t<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">
  60. \t\t<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"default\">
  61. \t\t<meta name=\"apple-mobile-web-app-title\" content=\"MaketOu\">
  62. \t\t<meta name=\"theme-color\" content=\"#ffa200\">
  63. \t\t<meta name=\"msapplication-TileColor\" content=\"#ffa200\">
  64. \t\t<meta
  65. \t\tname=\"msapplication-config\" content=\"";
  66.         // line 14
  67.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("favicon/browserconfig.xml"), "html", null, true);
  68.         yield "\">
  70. \t\t<!-- Favicon-->
  71. \t\t<link rel=\"shortcut icon\" href=\"";
  72.         // line 17
  73.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("favicon/favicon-16x16.png"), "html", null, true);
  74.         yield "\">
  75. \t\t<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"";
  76.         // line 18
  77.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("favicon/apple-touch-icon.png"), "html", null, true);
  78.         yield "\">
  79. \t\t<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"";
  80.         // line 19
  81.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("favicon/favicon-32x32.png"), "html", null, true);
  82.         yield "\">
  83. \t\t<link
  84. \t\trel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"";
  85.         // line 21
  86.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("favicon/favicon-16x16.png"), "html", null, true);
  87.         yield "\">
  89. \t\t<!-- PWA Manifest -->
  90. \t\t<link
  91. \t\trel=\"manifest\" href=\"";
  92.         // line 25
  93.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("manifest.json"), "html", null, true);
  94.         yield "\">
  95. \t\t<!-- Author Meta -->
  96. \t\t<meta
  97. \t\tname=\"author\" content=\"Foulgor Tech\">
  98. \t\t<!-- Meta Description -->
  99. \t\t<meta
  100. \t\tname=\"description\" content=\"\">
  101. \t\t<!-- Meta Keyword -->
  102. \t\t<meta
  103. \t\tname=\"keywords\" content=\"\">
  104. \t\t<!-- meta character set -->
  105. \t\t<meta
  106. \t\tcharset=\"UTF-8\">
  107. \t\t<!-- Site Title -->
  108. \t\t<title>
  109. \t\t\t";
  110.         // line 40
  111.         yield from $this->unwrap()->yieldBlock('title', $context, $blocks);
  112.         // line 42
  113.         yield "\t\t</title>
  114. \t\t<!--
  115. \t\t\t\t\t\t        CSS
  116. \t\t\t\t\t\t        ============================================= -->
  117. \t\t<link rel=\"stylesheet\" href=\"https://unpkg.com/dropzone@5/dist/min/dropzone.min.css\"/>
  118. \t\t<link rel=\"stylesheet\" href=\"";
  119.         // line 47
  120.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/css/linearicons.css"), "html", null, true);
  121.         yield "\">
  122. \t\t<link rel=\"stylesheet\" href=\"";
  123.         // line 48
  124.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/css/font-awesome.min.css"), "html", null, true);
  125.         yield "\">
  126. \t\t<link rel=\"stylesheet\" href=\"";
  127.         // line 49
  128.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/css/themify-icons.css"), "html", null, true);
  129.         yield "\">
  130. \t\t<link rel=\"stylesheet\" href=\"";
  131.         // line 50
  132.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/css/bootstrap.css"), "html", null, true);
  133.         yield "\">
  134. \t\t<link rel=\"stylesheet\" href=\"";
  135.         // line 51
  136.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/css/owl.carousel.css"), "html", null, true);
  137.         yield "\">
  138. \t\t<link rel=\"stylesheet\" href=\"";
  139.         // line 52
  140.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/css/nice-select.css"), "html", null, true);
  141.         yield "\">
  142. \t\t<link rel=\"stylesheet\" href=\"";
  143.         // line 53
  144.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/css/nouislider.min.css"), "html", null, true);
  145.         yield "\">
  146. \t\t<link rel=\"stylesheet\" href=\"";
  147.         // line 54
  148.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/css/ion.rangeSlider.css"), "html", null, true);
  149.         yield "\"/>
  150. \t\t<link rel=\"stylesheet\" href=\"";
  151.         // line 55
  152.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/css/ion.rangeSlider.skinFlat.css"), "html", null, true);
  153.         yield "\"/>
  154. \t\t<link rel=\"stylesheet\" href=\"";
  155.         // line 56
  156.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/css/magnific-popup.css"), "html", null, true);
  157.         yield "\">
  158. \t\t<link rel=\"stylesheet\" href=\"";
  159.         // line 57
  160.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/css/main.css"), "html", null, true);
  161.         yield "\">
  162. \t\t<link rel=\"stylesheet\" href=\"";
  163.         // line 58
  164.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/css/cart-modal.css"), "html", null, true);
  165.         yield "\">
  166. \t\t<link rel=\"stylesheet\" href=\"";
  167.         // line 59
  168.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/css/buttons-unified.css"), "html", null, true);
  169.         yield "\">
  170. \t\t<link rel=\"stylesheet\" href=\"";
  171.         // line 60
  172.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/css/design-system.css"), "html", null, true);
  173.         yield "\">
  174. \t\t<link rel=\"stylesheet\" href=\"";
  175.         // line 61
  176.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/css/dark-mode-forced.css"), "html", null, true);
  177.         yield "\">
  178. \t\t<link rel=\"stylesheet\" href=\"";
  179.         // line 62
  180.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/css/dark-mode-complete.css"), "html", null, true);
  181.         yield "\">
  182. \t\t<link rel=\"stylesheet\" href=\"";
  183.         // line 63
  184.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/css/navbar-icons-enhanced.css"), "html", null, true);
  185.         yield "\">
  186. \t\t<link rel=\"stylesheet\" href=\"";
  187.         // line 64
  188.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/css/dark-mode-pages-specific.css"), "html", null, true);
  189.         yield "\">
  190. \t\t<meta
  191. \t\tcharset=\"UTF-8\">
  192. \t\t";
  193.         // line 68
  194.         yield "
  195. \t\t<style>
  196. \t\t\t/* Styles pour l'icône de notification */
  197. \t\t\t.notification-icon {
  198. \t\t\t\tposition: relative;
  199. \t\t\t\tdisplay: inline-block;
  200. \t\t\t\tcolor: #333;
  201. \t\t\t\ttext-decoration: none;
  202. \t\t\t\ttransition: color 0.3s ease;
  203. \t\t\t}
  205. \t\t\t.notification-icon:hover {
  206. \t\t\t\tcolor: #007bff;
  207. \t\t\t}
  209. \t\t\t.notification-badge {
  210. \t\t\t\tposition: absolute;
  211. \t\t\t\ttop: -4px;
  212. \t\t\t\tright: -2px;
  213. \t\t\t\tbackground: #dc3545 !important;
  214. \t\t\t\tcolor: white !important;
  215. \t\t\t\tborder-radius: 50%;
  216. \t\t\t\twidth: 18px;
  217. \t\t\t\theight: 18px;
  218. \t\t\t\tfont-size: 8px !important;
  219. \t\t\t\tdisplay: flex !important;
  220. \t\t\t\talign-items: center !important;
  221. \t\t\t\tjustify-content: center !important;
  222. \t\t\t\tfont-weight: bold !important;
  223. \t\t\t\tanimation: pulse 2s infinite;
  224. \t\t\t\tz-index: 10;
  225. \t\t\t\tline-height: 1 !important;
  226. \t\t\t}
  228. \t\t\t/* Forcer le texte en blanc pour tous les éléments du badge - avec spécificité maximale */
  229. \t\t\t.notification-badge,
  230. \t\t\t.notification-badge.text-white,
  231. \t\t\t.notification-badge *,
  232. \t\t\t#notificationBadge,
  233. \t\t\t#notificationBadge.text-white,
  234. \t\t\t#notificationBadge *,
  235. \t\t\tspan.notification-badge,
  236. \t\t\tspan.notification-badge.text-white,
  237. \t\t\tspan#notificationBadge,
  238. \t\t\tspan#notificationBadge.text-white {
  239. \t\t\t\tcolor: white !important;
  240. \t\t\t\ttext-color: white !important;
  241. \t\t\t\t-webkit-text-fill-color: white !important;
  242. \t\t\t}
  244. \t\t\t/* S'assurer que le contenu texte est bien en blanc */
  245. \t\t\t.notification-badge::before,
  246. \t\t\t.notification-badge::after {
  247. \t\t\t\tcolor: white !important;
  248. \t\t\t}
  250. \t\t\t/* Forcer la couleur pour tous les sélecteurs possibles avec spécificité maximale */
  251. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .notification-icon .notification-badge,
  252. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .notification-icon .notification-badge.text-white,
  253. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .notification-icon span.notification-badge,
  254. \t\t\t.notification-icon .notification-badge,
  255. \t\t\t.notification-icon .notification-badge.text-white,
  256. \t\t\t.notification-icon span.notification-badge,
  257. \t\t\ta.notification-icon .notification-badge,
  258. \t\t\ta.notification-icon span.notification-badge {
  259. \t\t\t\tcolor: white !important;
  260. \t\t\t\ttext-color: white !important;
  261. \t\t\t\t-webkit-text-fill-color: white !important;
  262. \t\t\t}
  264. \t\t\t/* Forcer la couleur pour tous les enfants directs */
  265. \t\t\t.notification-icon > .notification-badge,
  266. \t\t\t.notification-icon > span.notification-badge {
  267. \t\t\t\tcolor: white !important;
  268. \t\t\t}
  270. \t\t\t@keyframes pulse {
  271. \t\t\t\t0% {
  272. \t\t\t\t\ttransform: scale(1);
  273. \t\t\t\t}
  274. \t\t\t\t50% {
  275. \t\t\t\t\ttransform: scale(1.1);
  276. \t\t\t\t}
  277. \t\t\t\t100% {
  278. \t\t\t\t\ttransform: scale(1);
  279. \t\t\t\t}
  280. \t\t\t}
  282. \t\t\t.notification-icon:hover .notification-badge {
  283. \t\t\t\tanimation: none;
  284. \t\t\t}
  286. \t\t\t/* Container pour les icônes - toujours alignées horizontalement */
  287. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper {
  288. \t\t\t\tdisplay: flex !important;
  289. \t\t\t\tflex-direction: row !important;
  290. \t\t\t\talign-items: center !important;
  291. \t\t\t\tjustify-content: center !important;
  292. \t\t\t\tgap: 15px !important;
  293. \t\t\t\tlist-style: none !important;
  294. \t\t\t\tmargin: 0 !important;
  295. \t\t\t\tpadding: 0 !important;
  296. \t\t\t\twidth: auto !important;
  297. \t\t\t}
  299. \t\t\t/* Surcharger les styles existants pour les li contenant le wrapper */
  300. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right li:has(.navbar-icons-wrapper) {
  301. \t\t\t\tmargin-left: 0 !important;
  302. \t\t\t\tmargin-right: 0 !important;
  303. \t\t\t\tdisplay: flex !important;
  304. \t\t\t\talign-items: center !important;
  305. \t\t\t\tjustify-content: center !important;
  306. \t\t\t}
  308. \t\t\t/* Styles pour les icônes */
  309. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .cart,
  310. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .notification-icon,
  311. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .comparison-icon,
  312. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .dark-mode-toggle,
  313. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .search {
  314. \t\t\t\tdisplay: flex !important;
  315. \t\t\t\talign-items: center !important;
  316. \t\t\t\tjustify-content: center !important;
  317. \t\t\t\twidth: 40px !important;
  318. \t\t\t\theight: 40px !important;
  319. \t\t\t\tmin-width: 40px !important;
  320. \t\t\t\tmin-height: 40px !important;
  321. \t\t\t\tcolor: #333 !important;
  322. \t\t\t\ttext-decoration: none !important;
  323. \t\t\t\ttransition: all 0.3s ease !important;
  324. \t\t\t\tborder-radius: 50% !important;
  325. \t\t\t\tposition: relative !important;
  326. \t\t\t\tmargin: 0 !important;
  327. \t\t\t\tpadding: 0 !important;
  328. \t\t\t}
  331. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .cart:hover,
  332. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .notification-icon:hover,
  333. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .comparison-icon:hover,
  334. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .dark-mode-toggle:hover,
  335. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .search:hover {
  336. \t\t\t\tbackground-color: #f0f0f0 !important;
  337. \t\t\t\tcolor: #ffa200 !important;
  338. \t\t\t\ttransform: scale(1.1) !important;
  339. \t\t\t}
  341. \t\t\t/* Surcharger le line-height de main.css */
  342. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .cart span,
  343. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .notification-icon span,
  344. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .search span {
  345. \t\t\t\tfont-size: 18px !important;
  346. \t\t\t\tline-height: 1 !important;
  347. \t\t\t\tdisplay: flex !important;
  348. \t\t\t\talign-items: center !important;
  349. \t\t\t\tjustify-content: center !important;
  350. \t\t\t\tcolor: inherit !important;
  351. \t\t\t\tfont-weight: normal !important;
  352. \t\t\t}
  354. \t\t\t/* Icône de comparaison en noir comme le panier */
  355. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .comparison-icon {
  356. \t\t\t\tcolor: #333 !important;
  357. \t\t\t}
  359. \t\t\t/* L'icône elle-même (lnr-sync) doit être noire, mais pas le badge */
  360. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .comparison-icon > span.lnr-sync,
  361. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .comparison-icon span:not(.comparison-badge) {
  362. \t\t\t\tcolor: #333 !important;
  363. \t\t\t\tfont-size: 18px !important;
  364. \t\t\t\tline-height: 1 !important;
  365. \t\t\t\tdisplay: flex !important;
  366. \t\t\t\talign-items: center !important;
  367. \t\t\t\tjustify-content: center !important;
  368. \t\t\t\tfont-weight: normal !important;
  369. \t\t\t}
  371. \t\t\t/* Le badge doit rester blanc */
  372. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .comparison-icon .comparison-badge {
  373. \t\t\t\tcolor: white !important;
  374. \t\t\t}
  376. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .search {
  377. \t\t\t\tbackground: transparent !important;
  378. \t\t\t\tborder: 0 !important;
  379. \t\t\t\tcursor: pointer !important;
  380. \t\t\t\tpadding: 0 !important;
  381. \t\t\t}
  383. \t\t\t/* Alignement des icônes navbar sur mobile */
  384. \t\t\t@media(max-width: 991.98px) {
  385. \t\t\t\t/* Container navbar-right en colonne sur mobile */
  386. \t\t\t\t.header_area .navbar .nav.navbar-nav.navbar-right {
  387. \t\t\t\t\tdisplay: flex !important;
  388. \t\t\t\t\tflex-direction: column !important;
  389. \t\t\t\t\talign-items: center !important;
  390. \t\t\t\t\tjustify-content: center !important;
  391. \t\t\t\t\twidth: 100% !important;
  392. \t\t\t\t\tgap: 0 !important;
  393. \t\t\t\t\tmargin: 0 !important;
  394. \t\t\t\t\tpadding: 10px 0 !important;
  395. \t\t\t\t}
  397. \t\t\t\t/* Le container d'icônes reste horizontal */
  398. \t\t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper {
  399. \t\t\t\t\twidth: 100% !important;
  400. \t\t\t\t\tjustify-content: center !important;
  401. \t\t\t\t\tdisplay: flex !important;
  402. \t\t\t\t\tflex-direction: row !important;
  403. \t\t\t\t}
  405. \t\t\t\t/* Le bouton compte en bas - pleine largeur */
  406. \t\t\t\t.header_area .navbar .nav.navbar-nav.navbar-right li:last-child {
  407. \t\t\t\t\twidth: 100% !important;
  408. \t\t\t\t\tdisplay: flex !important;
  409. \t\t\t\t\tjustify-content: center !important;
  410. \t\t\t\t\tmargin-top: 12px !important;
  411. \t\t\t\t\tpadding-top: 12px !important;
  412. \t\t\t\t\tborder-top: 1px solid #e0e0e0 !important;
  413. \t\t\t\t}
  415. \t\t\t\t/* Bouton compte responsive */
  416. \t\t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .btn-account {
  417. \t\t\t\t\twidth: 100%;
  418. \t\t\t\t\tmax-width: 200px;
  419. \t\t\t\t\tpadding: 10px 20px;
  420. \t\t\t\t\tfont-size: 14px;
  421. \t\t\t\t}
  422. \t\t\t}
  424. \t\t\t/* Styles pour les messages flash - Design moderne */
  425. \t\t\t.flash-message {
  426. \t\t\t\tanimation: slideInDownFlash 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  427. \t\t\t\tposition: relative;
  428. \t\t\t\toverflow: visible !important;
  429. \t\t\t\tborder: none !important;
  430. \t\t\t\tpadding: 16px 20px !important;
  431. \t\t\t\tborder-radius: 12px !important;
  432. \t\t\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  433. \t\t\t\tdisplay: flex !important;
  434. \t\t\t\talign-items: center;
  435. \t\t\t\tgap: 12px;
  436. \t\t\t\tmargin-bottom: 15px;
  437. \t\t\t\tbackdrop-filter: blur(10px);
  438. \t\t\t\ttransition: all 0.3s ease;
  439. \t\t\t}
  441. \t\t\t/* S'assurer que les icônes Font Awesome sont visibles */
  442. \t\t\t.flash-message i.fa {
  443. \t\t\t\tdisplay: inline-block !important;
  444. \t\t\t\tvisibility: visible !important;
  445. \t\t\t\topacity: 1 !important;
  446. \t\t\t\twidth: auto !important;
  447. \t\t\t\theight: auto !important;
  448. \t\t\t\tfont-family: \"FontAwesome\" !important;
  449. \t\t\t\tfont-style: normal !important;
  450. \t\t\t\tfont-weight: normal !important;
  451. \t\t\t\ttext-rendering: auto !important;
  452. \t\t\t\t-webkit-font-smoothing: antialiased !important;
  453. \t\t\t\t-moz-osx-font-smoothing: grayscale !important;
  454. \t\t\t\tline-height: 1 !important;
  455. \t\t\t\tflex-shrink: 0 !important;
  456. \t\t\t}
  458. \t\t\t/* Forcer l'affichage des pseudo-éléments Font Awesome */
  459. \t\t\t.flash-message i.fa::before {
  460. \t\t\t\tdisplay: inline-block !important;
  461. \t\t\t\tvisibility: visible !important;
  462. \t\t\t\topacity: 1 !important;
  463. \t\t\t\tcontent: attr(data-icon) !important;
  464. \t\t\t}
  466. \t\t\t/* Styles spécifiques pour chaque icône */
  467. \t\t\t.flash-message i.fa-check-circle::before {
  468. \t\t\t\tcontent: \"\\f058\" !important;
  469. \t\t\t}
  471. \t\t\t.flash-message i.fa-exclamation-circle::before {
  472. \t\t\t\tcontent: \"\\f06a\" !important;
  473. \t\t\t}
  475. \t\t\t.flash-message i.fa-exclamation-triangle::before {
  476. \t\t\t\tcontent: \"\\f071\" !important;
  477. \t\t\t}
  479. \t\t\t.flash-message i.fa-info-circle::before {
  480. \t\t\t\tcontent: \"\\f05a\" !important;
  481. \t\t\t}
  483. \t\t\t.flash-message:hover {
  484. \t\t\t\tbox-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
  485. \t\t\t\ttransform: translateY(-2px);
  486. \t\t\t}
  488. \t\t\t.flash-message::before {
  489. \t\t\t\tcontent: '';
  490. \t\t\t\tposition: absolute;
  491. \t\t\t\tleft: 0;
  492. \t\t\t\ttop: 0;
  493. \t\t\t\tbottom: 0;
  494. \t\t\t\twidth: 5px;
  495. \t\t\t\tbackground: linear-gradient(180deg, currentColor 0%, rgba(255,255,255,0.3) 100%);
  496. \t\t\t\tborder-radius: 12px 0 0 12px;
  497. \t\t\t}
  499. \t\t\t.flash-message.alert-success {
  500. \t\t\t\tbackground: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%) !important;
  501. \t\t\t\tcolor: #155724 !important;
  502. \t\t\t\tborder-left: 5px solid #28a745 !important;
  503. \t\t\t}
  505. \t\t\t.flash-message.alert-success i.fa {
  506. \t\t\t\tcolor: #28a745 !important;
  507. \t\t\t\tfont-size: 1.3rem !important;
  508. \t\t\t\tdisplay: inline-block !important;
  509. \t\t\t\tmargin-right: 8px;
  510. \t\t\t\tvertical-align: middle;
  511. \t\t\t}
  513. \t\t\t.flash-message.alert-danger {
  514. \t\t\t\tbackground: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%) !important;
  515. \t\t\t\tcolor: #721c24 !important;
  516. \t\t\t\tborder-left: 5px solid #dc3545 !important;
  517. \t\t\t}
  519. \t\t\t.flash-message.alert-danger i.fa {
  520. \t\t\t\tcolor: #dc3545 !important;
  521. \t\t\t\tfont-size: 1.3rem !important;
  522. \t\t\t\tdisplay: inline-block !important;
  523. \t\t\t\tmargin-right: 8px;
  524. \t\t\t\tvertical-align: middle;
  525. \t\t\t}
  527. \t\t\t.flash-message.alert-warning {
  528. \t\t\t\tbackground: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
  529. \t\t\t\tcolor: #856404 !important;
  530. \t\t\t\tborder-left: 5px solid #ffc107 !important;
  531. \t\t\t}
  533. \t\t\t.flash-message.alert-warning i.fa {
  534. \t\t\t\tcolor: #ffa200 !important;
  535. \t\t\t\tfont-size: 1.3rem !important;
  536. \t\t\t\tdisplay: inline-block !important;
  537. \t\t\t\tmargin-right: 8px;
  538. \t\t\t\tvertical-align: middle;
  539. \t\t\t}
  541. \t\t\t.flash-message.alert-info {
  542. \t\t\t\tbackground: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%) !important;
  543. \t\t\t\tcolor: #0c5460 !important;
  544. \t\t\t\tborder-left: 5px solid #17a2b8 !important;
  545. \t\t\t}
  547. \t\t\t.flash-message.alert-info i.fa {
  548. \t\t\t\tcolor: #17a2b8 !important;
  549. \t\t\t\tfont-size: 1.3rem !important;
  550. \t\t\t\tdisplay: inline-block !important;
  551. \t\t\t\tmargin-right: 8px;
  552. \t\t\t\tvertical-align: middle;
  553. \t\t\t}
  555. \t\t\t.flash-message strong {
  556. \t\t\t\tflex: 1;
  557. \t\t\t\tfont-weight: 600;
  558. \t\t\t\tfont-size: 0.95rem;
  559. \t\t\t\tline-height: 1.5;
  560. \t\t\t}
  562. \t\t\t.flash-message .btn-close {
  563. \t\t\t\topacity: 0.7;
  564. \t\t\t\tpadding: 8px !important;
  565. \t\t\t\tmargin: -8px -8px -8px auto !important;
  566. \t\t\t\ttransition: all 0.2s ease;
  567. \t\t\t\tborder-radius: 50% !important;
  568. \t\t\t\tbackground: rgba(0, 0, 0, 0.05) !important;
  569. \t\t\t\twidth: 32px !important;
  570. \t\t\t\theight: 32px !important;
  571. \t\t\t\tdisplay: flex !important;
  572. \t\t\t\talign-items: center !important;
  573. \t\t\t\tjustify-content: center !important;
  574. \t\t\t\tborder: none !important;
  575. \t\t\t\tcursor: pointer !important;
  576. \t\t\t\tposition: relative !important;
  577. \t\t\t}
  579. \t\t\t/* Ajouter une icône X visible dans le bouton */
  580. \t\t\t.flash-message .btn-close::before {
  581. \t\t\t\tcontent: '×' !important;
  582. \t\t\t\tfont-size: 24px !important;
  583. \t\t\t\tline-height: 1 !important;
  584. \t\t\t\tcolor: currentColor !important;
  585. \t\t\t\tfont-weight: bold !important;
  586. \t\t\t\tdisplay: block !important;
  587. \t\t\t\tposition: absolute !important;
  588. \t\t\t\ttop: 50% !important;
  589. \t\t\t\tleft: 50% !important;
  590. \t\t\t\ttransform: translate(-50%, -50%) !important;
  591. \t\t\t}
  593. \t\t\t.flash-message .btn-close:hover {
  594. \t\t\t\topacity: 1 !important;
  595. \t\t\t\tbackground: rgba(0, 0, 0, 0.15) !important;
  596. \t\t\t\ttransform: rotate(90deg) !important;
  597. \t\t\t}
  599. \t\t\t.flash-message .btn-close:hover::before {
  600. \t\t\t\ttransform: translate(-50%, -50%) rotate(-90deg) !important;
  601. \t\t\t}
  603. \t\t\t@keyframes slideInDownFlash {
  604. \t\t\t\tfrom {
  605. \t\t\t\t\topacity: 0;
  606. \t\t\t\t\ttransform: translateY(-30px) scale(0.95);
  607. \t\t\t\t}
  608. \t\t\t\tto {
  609. \t\t\t\t\topacity: 1;
  610. \t\t\t\t\ttransform: translateY(0) scale(1);
  611. \t\t\t\t}
  612. \t\t\t}
  614. \t\t\t#flash-messages-container {
  615. \t\t\t\tmargin-top: 20px;
  616. \t\t\t\tmargin-bottom: 0;
  617. \t\t\t}
  619. \t\t\t@media(max-width: 768px) {
  620. \t\t\t\t.flash-message {
  621. \t\t\t\t\tpadding: 14px 16px !important;
  622. \t\t\t\t\tfont-size: 0.9rem;
  623. \t\t\t\t}
  625. \t\t\t\t.flash-message i {
  626. \t\t\t\t\tfont-size: 1.2rem !important;
  627. \t\t\t\t}
  628. \t\t\t}
  630. \t\t\t/* Styles pour l'icône de comparaison */
  631. \t\t\t.comparison-icon {
  632. \t\t\t\tposition: relative;
  633. \t\t\t\tdisplay: inline-block;
  634. \t\t\t\tcolor: #333;
  635. \t\t\t\ttext-decoration: none;
  636. \t\t\t\ttransition: all 0.3s ease;
  637. \t\t\t}
  639. \t\t\t.comparison-icon:hover {
  640. \t\t\t\tcolor: #ffa200;
  641. \t\t\t}
  643. \t\t\t.comparison-badge {
  644. \t\t\t\tposition: absolute;
  645. \t\t\t\ttop: -4px;
  646. \t\t\t\tright: -2px;
  647. \t\t\t\tbackground: #095ad3 !important;
  648. \t\t\t\tcolor: white !important;
  649. \t\t\t\tborder-radius: 50%;
  650. \t\t\t\twidth: 18px;
  651. \t\t\t\theight: 18px;
  652. \t\t\t\tfont-size: 8px !important;
  653. \t\t\t\tdisplay: flex !important;
  654. \t\t\t\talign-items: center !important;
  655. \t\t\t\tjustify-content: center !important;
  656. \t\t\t\tfont-weight: bold !important;
  657. \t\t\t\tanimation: pulse 2s infinite;
  658. \t\t\t\tz-index: 10;
  659. \t\t\t\tline-height: 1 !important;
  660. \t\t\t}
  662. \t\t\t/* Correction de l'alignement des boutons actifs dans prd-bottom */
  663. \t\t\t/* Ne s'applique qu'aux boutons actifs pour éviter de casser le comportement hover */
  664. \t\t\t.single-product .product-details .prd-bottom .social-info.active {
  665. \t\t\t\tvertical-align: middle !important;
  666. \t\t\t\tposition: relative !important;
  667. \t\t\t\ttop: 0 !important;
  668. \t\t\t\ttransform: none !important;
  669. \t\t\t\tmargin: 0 !important;
  670. \t\t\t\tpadding: 0 !important;
  671. \t\t\t\tline-height: normal !important;
  672. \t\t\t\twidth: 35px !important;
  673. \t\t\t\theight: auto !important;
  674. \t\t\t\tmin-height: auto !important;
  675. \t\t\t\tmax-height: none !important;
  676. \t\t\t}
  678. \t\t\t.single-product .product-details .prd-bottom .social-info.wishlist-btn.active,
  679. \t\t\t.single-product .product-details .prd-bottom .social-info.comparison-btn.active {
  680. \t\t\t\tvertical-align: middle !important;
  681. \t\t\t\tposition: relative !important;
  682. \t\t\t\ttop: 0 !important;
  683. \t\t\t\ttransform: none !important;
  684. \t\t\t\tmargin: 0 !important;
  685. \t\t\t\tpadding: 0 !important;
  686. \t\t\t\tline-height: normal !important;
  687. \t\t\t\twidth: 35px !important;
  688. \t\t\t\theight: auto !important;
  689. \t\t\t\tmin-height: auto !important;
  690. \t\t\t\tmax-height: none !important;
  691. \t\t\t}
  693. \t\t\t.single-product .product-details .prd-bottom .social-info.active .hover-text {
  694. \t\t\t\tmargin: 0 !important;
  695. \t\t\t\tpadding: 0 !important;
  696. \t\t\t\tline-height: normal !important;
  697. \t\t\t\tposition: absolute !important;
  698. \t\t\t\ttop: 0 !important;
  699. \t\t\t\tbackground: #ffa200 !important;
  700. \t\t\t\tleft: -40px !important;
  701. \t\t\t}
  703. \t\t\t/* S'assurer qu'aucune marge supplémentaire n'est ajoutée quand un bouton est actif */
  704. \t\t\t.single-product .product-details .prd-bottom .social-info.active span,
  705. \t\t\t.single-product .product-details .prd-bottom .social-info.active p {
  706. \t\t\t\tmargin: 0 !important;
  707. \t\t\t\tpadding: 0 !important;
  708. \t\t\t}
  710. \t\t\t/* Empêcher le hover de changer la largeur quand le bouton est actif */
  711. \t\t\t.single-product .product-details .prd-bottom .social-info.active:hover {
  712. \t\t\t\twidth: 35px !important;
  713. \t\t\t}
  715. \t\t\t.comparison-icon:hover .comparison-badge {
  716. \t\t\t\tanimation: none;
  717. \t\t\t}
  719. \t\t\t/* Styles pour les mega-menus - style comme la barre de recherche */
  720. \t\t\t.mega-menu {
  721. \t\t\t\twidth: 100%;
  722. \t\t\t\tmax-width: 1200px;
  723. \t\t\t\tleft: 50%;
  724. \t\t\t\ttransform: translateX(-50%);
  725. \t\t\t\tpadding: 25px;
  726. \t\t\t\tborder-radius: 12px;
  727. \t\t\t\tbox-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  728. \t\t\t\tborder: none;
  729. \t\t\t\tbackground: white;
  730. \t\t\t\tdisplay: none;
  731. \t\t\t\tposition: absolute;
  732. \t\t\t\ttop: 100%;
  733. \t\t\t\tz-index: 9999 !important;
  734. \t\t\t\tmargin-top: 10px;
  735. \t\t\t\topacity: 0;
  736. \t\t\t\tvisibility: hidden;
  737. \t\t\t\ttransition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  738. \t\t\t}
  740. \t\t\t.mega-menu.active {
  741. \t\t\t\tdisplay: block;
  742. \t\t\t\topacity: 1;
  743. \t\t\t\tvisibility: visible;
  744. \t\t\t\ttransform: translateX(-50%) translateY(0);
  745. \t\t\t}
  747. \t\t\t.nav-item.dropdown {
  748. \t\t\t\tposition: relative !important;
  749. \t\t\t}
  751. \t\t\t@media(min-width: 768px) {
  752. \t\t\t\t.nav-item.dropdown {
  753. \t\t\t\t\tposition: relative !important;
  754. \t\t\t\t}
  756. \t\t\t\t.mega-menu {
  757. \t\t\t\t\tposition: absolute !important;
  758. \t\t\t\t\tleft: 50% !important;
  759. \t\t\t\t\ttransform: translateX(-50%) !important;
  760. \t\t\t\t\twidth: auto !important;
  761. \t\t\t\t\tmin-width: 600px !important;
  762. \t\t\t\t}
  763. \t\t\t}
  765. \t\t\t/* Correction supplémentaire pour l'affichage sur la page d'accueil */
  766. \t\t\tbody.home .nav-item.dropdown,
  767. \t\t\t.nav-item.dropdown {
  768. \t\t\t\tposition: relative !important;
  769. \t\t\t}
  771. \t\t\tbody.home .mega-menu,
  772. \t\t\t.mega-menu {
  773. \t\t\t\tposition: absolute !important;
  774. \t\t\t\tleft: 50% !important;
  775. \t\t\t\ttransform: translateX(-50%) translateY(0) !important;
  776. \t\t\t\twidth: auto !important;
  777. \t\t\t\tmin-width: 600px !important;
  778. \t\t\t\tmax-width: 90% !important;
  779. \t\t\t\ttop: 100% !important;
  780. \t\t\t\tmargin-top: 10px !important;
  781. \t\t\t}
  783. \t\t\t/* Assurer que les mega-menus sont toujours visibles au survol */
  784. \t\t\t.nav-item.dropdown:hover .mega-menu {
  785. \t\t\t\topacity: 1 !important;
  786. \t\t\t\tvisibility: visible !important;
  787. \t\t\t\tdisplay: block !important;
  788. \t\t\t\ttransform: translateX(-50%) translateY(0) !important;
  789. \t\t\t}
  791. \t\t\t.mega-menu .dropdown-item {
  792. \t\t\t\tpadding: 0;
  793. \t\t\t\tborder: none;
  794. \t\t\t}
  796. \t\t\t.mega-menu .dropdown-header {
  797. \t\t\t\tfont-weight: 700;
  798. \t\t\t\tcolor: #2c3e50;
  799. \t\t\t\tmargin-bottom: 18px;
  800. \t\t\t\tpadding-bottom: 10px;
  801. \t\t\t\tborder-bottom: 3px solid #3498db;
  802. \t\t\t\tfont-size: 16px;
  803. \t\t\t\ttext-transform: uppercase;
  804. \t\t\t\tletter-spacing: 0.5px;
  805. \t\t\t}
  807. \t\t\t.mega-menu .dropdown-item a {
  808. \t\t\t\tdisplay: block;
  809. \t\t\t\tpadding: 10px 15px;
  810. \t\t\t\tcolor: #555;
  811. \t\t\t\ttext-decoration: none;
  812. \t\t\t\tborder-radius: 6px;
  813. \t\t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  814. \t\t\t\tposition: relative;
  815. \t\t\t\toverflow: hidden;
  816. \t\t\t}
  818. \t\t\t.mega-menu .dropdown-item a::before {
  819. \t\t\t\tcontent: '';
  820. \t\t\t\tposition: absolute;
  821. \t\t\t\ttop: 0;
  822. \t\t\t\tleft: -100%;
  823. \t\t\t\twidth: 100%;
  824. \t\t\t\theight: 100%;
  825. \t\t\t\tbackground: linear-gradient(90deg, transparent, rgba(52, 152, 219, 0.1), transparent);
  826. \t\t\t\ttransition: left 0.5s;
  827. \t\t\t}
  829. \t\t\t.mega-menu .dropdown-item a:hover::before {
  830. \t\t\t\tleft: 100%;
  831. \t\t\t}
  833. \t\t\t.mega-menu .dropdown-item a:hover {
  834. \t\t\t\tbackground: linear-gradient(135deg, #f8f9fa, #e3f2fd);
  835. \t\t\t\tcolor: #2980b9;
  836. \t\t\t\ttransform: translateX(8px);
  837. \t\t\t\tbox-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
  838. \t\t\t}
  840. \t\t\t.mega-menu .dropdown-item a i {
  841. \t\t\t\twidth: 22px;
  842. \t\t\t\ttext-align: center;
  843. \t\t\t\tmargin-right: 8px;
  844. \t\t\t\tcolor: #3498db;
  845. \t\t\t\ttransition: color 0.3s ease;
  846. \t\t\t}
  848. \t\t\t.mega-menu .dropdown-item a:hover i {
  849. \t\t\t\tcolor: #2980b9;
  850. \t\t\t}
  852. \t\t\t/* Animation d'apparition améliorée */
  853. \t\t\t@keyframes slideInDown {
  854. \t\t\t\tfrom {
  855. \t\t\t\t\topacity: 0;
  856. \t\t\t\t\ttransform: translateY(-20px);
  857. \t\t\t\t}
  858. \t\t\t\tto {
  859. \t\t\t\t\topacity: 1;
  860. \t\t\t\t\ttransform: translateY(0);
  861. \t\t\t\t}
  862. \t\t\t}
  864. \t\t\t.mega-menu {
  865. \t\t\t\tanimation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  866. \t\t\t}
  868. \t\t\t/* Effet de survol sur le lien principal */
  869. \t\t\t.nav-item.dropdown .nav-link {
  870. \t\t\t\tposition: relative;
  871. \t\t\t\ttransition: all 0.3s ease;
  872. \t\t\t}
  874. \t\t\t.nav-item.dropdown .nav-link::after {
  875. \t\t\t\tcontent: '';
  876. \t\t\t\tposition: absolute;
  877. \t\t\t\tbottom: -2px;
  878. \t\t\t\tleft: 50%;
  879. \t\t\t\twidth: 0;
  880. \t\t\t\theight: 2px;
  881. \t\t\t\tbackground: linear-gradient(90deg, #3498db, #2980b9);
  882. \t\t\t\ttransition: all 0.3s ease;
  883. \t\t\t\ttransform: translateX(-50%);
  884. \t\t\t}
  886. \t\t\t.nav-item.dropdown:hover .nav-link::after {
  887. \t\t\t\twidth: 100%;
  888. \t\t\t}
  890. \t\t\t.nav-item.dropdown:hover .nav-link {
  891. \t\t\t\tcolor: #2980b9;
  892. \t\t\t}
  894. \t\t\t@keyframes fadeInDown {
  895. \t\t\t\tfrom {
  896. \t\t\t\t\topacity: 0;
  897. \t\t\t\t\ttransform: translateY(-10px);
  898. \t\t\t\t}
  899. \t\t\t\tto {
  900. \t\t\t\t\topacity: 1;
  901. \t\t\t\t\ttransform: translateY(0);
  902. \t\t\t\t}
  903. \t\t\t}
  905. \t\t\t/* Responsive */
  906. \t\t\t@media(max-width: 768px) {
  907. \t\t\t\t.mega-menu {
  908. \t\t\t\t\twidth: 100%;
  909. \t\t\t\t\tleft: 0;
  910. \t\t\t\t\tpadding: 15px;
  911. \t\t\t\t}
  913. \t\t\t\t.mega-menu .row {
  914. \t\t\t\t\tmargin: 0;
  915. \t\t\t\t}
  917. \t\t\t\t.mega-menu .col-md-3 {
  918. \t\t\t\t\tmargin-bottom: 20px;
  919. \t\t\t\t}
  920. \t\t\t}
  921. \t\t\t/* ============================================
  923. \t\t\t.footer-area {
  924. \t\t\t\tbackground: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  925. \t\t\t\tposition: relative;
  926. \t\t\t\toverflow: hidden;
  927. \t\t\t\tpadding: 50px 0 20px;
  928. \t\t\t}
  930. \t\t\t.footer-pattern {
  931. \t\t\t\tposition: absolute;
  932. \t\t\t\ttop: 0;
  933. \t\t\t\tleft: 0;
  934. \t\t\t\tright: 0;
  935. \t\t\t\tbottom: 0;
  936. \t\t\t\tbackground-image: radial-gradient(circle at 20% 50%, rgba(255, 162, 0, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 162, 0, 0.08) 0%, transparent 50%);
  937. \t\t\t\tpointer-events: none;
  938. \t\t\t}
  940. \t\t\t.footer-area .container {
  941. \t\t\t\tposition: relative;
  942. \t\t\t\tz-index: 1;
  943. \t\t\t}
  945. \t\t\t/* Widgets */
  946. \t\t\t.single-footer-widget {
  947. \t\t\t\tcolor: rgba(255, 255, 255, 0.9);
  948. \t\t\t}
  950. \t\t\t.footer-brand {
  951. \t\t\t\tfont-size: 1.6rem;
  952. \t\t\t\tfont-weight: 700;
  953. \t\t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  954. \t\t\t\t-webkit-background-clip: text;
  955. \t\t\t\t-webkit-text-fill-color: transparent;
  956. \t\t\t\tbackground-clip: text;
  957. \t\t\t\tmargin-bottom: 12px;
  958. \t\t\t\tdisplay: inline-block;
  959. \t\t\t}
  961. \t\t\t.footer-widget-title {
  962. \t\t\t\tcolor: #fff;
  963. \t\t\t\tfont-size: 1rem;
  964. \t\t\t\tfont-weight: 600;
  965. \t\t\t\tmargin-bottom: 18px;
  966. \t\t\t\tposition: relative;
  967. \t\t\t\tpadding-bottom: 8px;
  968. \t\t\t}
  970. \t\t\t.footer-widget-title::after {
  971. \t\t\t\tcontent: '';
  972. \t\t\t\tposition: absolute;
  973. \t\t\t\tbottom: 0;
  974. \t\t\t\tleft: 0;
  975. \t\t\t\twidth: 40px;
  976. \t\t\t\theight: 3px;
  977. \t\t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  978. \t\t\t\tborder-radius: 2px;
  979. \t\t\t}
  981. \t\t\t.footer-description {
  982. \t\t\t\tcolor: rgba(255, 255, 255, 0.7);
  983. \t\t\t\tline-height: 1.6;
  984. \t\t\t\tfont-size: 0.9rem;
  985. \t\t\t\tmargin-bottom: 0;
  986. \t\t\t}
  988. \t\t\t/* Liste de liens */
  989. \t\t\t.footer-list {
  990. \t\t\t\tlist-style: none;
  991. \t\t\t\tpadding: 0;
  992. \t\t\t\tmargin: 0;
  993. \t\t\t}
  995. \t\t\t.footer-list li {
  996. \t\t\t\tmargin-bottom: 10px;
  997. \t\t\t}
  999. \t\t\t.footer-list li a {
  1000. \t\t\t\tcolor: rgba(255, 255, 255, 0.7);
  1001. \t\t\t\ttext-decoration: none;
  1002. \t\t\t\ttransition: all 0.3s ease;
  1003. \t\t\t\tfont-size: 0.9rem;
  1004. \t\t\t\tdisplay: inline-flex;
  1005. \t\t\t\talign-items: center;
  1006. \t\t\t}
  1008. \t\t\t.footer-list li a i {
  1009. \t\t\t\tfont-size: 0.8rem;
  1010. \t\t\t\topacity: 0.6;
  1011. \t\t\t\ttransition: all 0.3s ease;
  1012. \t\t\t}
  1014. \t\t\t.footer-list li a:hover {
  1015. \t\t\t\tcolor: #ffa200;
  1016. \t\t\t\ttransform: translateX(5px);
  1017. \t\t\t}
  1019. \t\t\t.footer-list li a:hover i {
  1020. \t\t\t\topacity: 1;
  1021. \t\t\t\tcolor: #ffa200;
  1022. \t\t\t}
  1024. \t\t\t/* Newsletter */
  1025. \t\t\t.footer-newsletter-text {
  1026. \t\t\t\tcolor: rgba(255, 255, 255, 0.7);
  1027. \t\t\t\tfont-size: 0.85rem;
  1028. \t\t\t\tmargin-bottom: 15px;
  1029. \t\t\t\tline-height: 1.5;
  1030. \t\t\t}
  1032. \t\t\t.footer-newsletter-wrapper {
  1033. \t\t\t\tmargin-bottom: 15px;
  1034. \t\t\t}
  1036. \t\t\t.newsletter-input-group {
  1037. \t\t\t\tdisplay: flex;
  1038. \t\t\t\talign-items: center;
  1039. \t\t\t\tbackground: rgba(255, 255, 255, 0.08);
  1040. \t\t\t\tborder-radius: 30px;
  1041. \t\t\t\tpadding: 4px 4px 4px 15px;
  1042. \t\t\t\tbackdrop-filter: blur(10px);
  1043. \t\t\t\tborder: 1px solid rgba(255, 255, 255, 0.15);
  1044. \t\t\t\ttransition: all 0.3s ease;
  1045. \t\t\t\tgap: 8px;
  1046. \t\t\t}
  1048. \t\t\t.newsletter-input-group:focus-within {
  1049. \t\t\t\tbackground: rgba(255, 255, 255, 0.12);
  1050. \t\t\t\tborder-color: rgba(255, 162, 0, 0.6);
  1051. \t\t\t\tbox-shadow: 0 0 0 2px rgba(255, 162, 0, 0.15);
  1052. \t\t\t}
  1054. \t\t\t.newsletter-icon {
  1055. \t\t\t\tcolor: rgba(255, 255, 255, 0.5);
  1056. \t\t\t\tfont-size: 0.9rem;
  1057. \t\t\t\tflex-shrink: 0;
  1058. \t\t\t}
  1060. \t\t\t.newsletter-input-group:focus-within .newsletter-icon {
  1061. \t\t\t\tcolor: #ffa200;
  1062. \t\t\t}
  1064. \t\t\t.newsletter-input {
  1065. \t\t\t\tflex: 1;
  1066. \t\t\t\tbackground: transparent;
  1067. \t\t\t\tborder: none;
  1068. \t\t\t\tcolor: #fff;
  1069. \t\t\t\tpadding: 10px 8px;
  1070. \t\t\t\tfont-size: 0.9rem;
  1071. \t\t\t\tmin-width: 0;
  1072. \t\t\t}
  1074. \t\t\t.newsletter-input::placeholder {
  1075. \t\t\t\tcolor: rgba(255, 255, 255, 0.4);
  1076. \t\t\t\tfont-size: 0.85rem;
  1077. \t\t\t}
  1079. \t\t\t.newsletter-input:focus {
  1080. \t\t\t\toutline: none;
  1081. \t\t\t\tbox-shadow: none;
  1082. \t\t\t}
  1084. \t\t\t.newsletter-btn {
  1085. \t\t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  1086. \t\t\t\tborder: none;
  1087. \t\t\t\tcolor: white;
  1088. \t\t\t\twidth: 42px;
  1089. \t\t\t\theight: 42px;
  1090. \t\t\t\tmin-width: 42px;
  1091. \t\t\t\tmin-height: 42px;
  1092. \t\t\t\tborder-radius: 50%;
  1093. \t\t\t\tdisplay: flex;
  1094. \t\t\t\talign-items: center;
  1095. \t\t\t\tjustify-content: center;
  1096. \t\t\t\tcursor: pointer;
  1097. \t\t\t\ttransition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  1098. \t\t\t\tflex-shrink: 0;
  1099. \t\t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.4), 0 0 0 0 rgba(255, 162, 0, 0.4);
  1100. \t\t\t\tfont-size: 0.9rem;
  1101. \t\t\t\tposition: relative;
  1102. \t\t\t\toverflow: hidden;
  1103. \t\t\t}
  1105. \t\t\t.newsletter-btn::before {
  1106. \t\t\t\tcontent: '';
  1107. \t\t\t\tposition: absolute;
  1108. \t\t\t\ttop: 50%;
  1109. \t\t\t\tleft: 50%;
  1110. \t\t\t\twidth: 0;
  1111. \t\t\t\theight: 0;
  1112. \t\t\t\tborder-radius: 50%;
  1113. \t\t\t\tbackground: rgba(255, 255, 255, 0.3);
  1114. \t\t\t\ttransform: translate(-50%, -50%);
  1115. \t\t\t\ttransition: width 0.6s ease, height 0.6s ease;
  1116. \t\t\t}
  1118. \t\t\t.newsletter-btn:hover::before {
  1119. \t\t\t\twidth: 100%;
  1120. \t\t\t\theight: 100%;
  1121. \t\t\t}
  1123. \t\t\t.newsletter-btn:hover {
  1124. \t\t\t\ttransform: translateX(3px) scale(1.05);
  1125. \t\t\t\tbox-shadow: 0 6px 20px rgba(255, 162, 0, 0.5), 0 0 0 8px rgba(255, 162, 0, 0.1);
  1126. \t\t\t\tbackground: linear-gradient(135deg, #e8910a 0%, #ffa200 100%);
  1127. \t\t\t}
  1129. \t\t\t.newsletter-btn:active {
  1130. \t\t\t\ttransform: translateX(3px) scale(0.98);
  1131. \t\t\t\tbox-shadow: 0 3px 10px rgba(255, 162, 0, 0.4);
  1132. \t\t\t}
  1134. \t\t\t.newsletter-btn:focus {
  1135. \t\t\t\toutline: none;
  1136. \t\t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.4), 0 0 0 3px rgba(255, 162, 0, 0.3);
  1137. \t\t\t}
  1139. \t\t\t.newsletter-btn-icon,
  1140. \t\t\t.newsletter-btn-loader {
  1141. \t\t\t\tposition: relative;
  1142. \t\t\t\tz-index: 2;
  1143. \t\t\t\tdisplay: flex;
  1144. \t\t\t\talign-items: center;
  1145. \t\t\t\tjustify-content: center;
  1146. \t\t\t\ttransition: all 0.3s ease;
  1147. \t\t\t}
  1149. \t\t\t.newsletter-btn:hover .newsletter-btn-icon {
  1150. \t\t\t\ttransform: translateX(2px) rotate(-10deg);
  1151. \t\t\t}
  1153. \t\t\t.newsletter-btn.loading .newsletter-btn-icon {
  1154. \t\t\t\topacity: 0;
  1155. \t\t\t\ttransform: scale(0);
  1156. \t\t\t}
  1158. \t\t\t.newsletter-btn.loading .newsletter-btn-loader {
  1159. \t\t\t\tdisplay: flex !important;
  1160. \t\t\t}
  1162. \t\t\t.newsletter-btn.success {
  1163. \t\t\t\tbackground: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  1164. \t\t\t\tbox-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
  1165. \t\t\t}
  1167. \t\t\t.newsletter-btn.success .newsletter-btn-icon i::before {
  1168. \t\t\t\tcontent: \"\\f00c\";
  1169. \t\t\t}
  1171. \t\t\t/* Trust badges */
  1172. \t\t\t.footer-trust-badges {
  1173. \t\t\t\tdisplay: flex;
  1174. \t\t\t\tflex-direction: row;
  1175. \t\t\t\tgap: 15px;
  1176. \t\t\t\tflex-wrap: wrap;
  1177. \t\t\t}
  1179. \t\t\t.trust-item {
  1180. \t\t\t\tdisplay: flex;
  1181. \t\t\t\talign-items: center;
  1182. \t\t\t\tgap: 6px;
  1183. \t\t\t\tcolor: rgba(255, 255, 255, 0.6);
  1184. \t\t\t\tfont-size: 0.8rem;
  1185. \t\t\t}
  1187. \t\t\t.trust-item i {
  1188. \t\t\t\tcolor: #ffa200;
  1189. \t\t\t\tfont-size: 0.9rem;
  1190. \t\t\t}
  1192. \t\t\t/* Social icons */
  1193. \t\t\t.footer-social {
  1194. \t\t\t\tmargin-top: 0 !important;
  1195. \t\t\t\tposition: relative !important;
  1196. \t\t\t\twidth: 100% !important;
  1197. \t\t\t\tclear: both !important;
  1198. \t\t\t\tfloat: none !important;
  1199. \t\t\t}
  1201. \t\t\t.footer-social h6 {
  1202. \t\t\t\tcolor: #fff;
  1203. \t\t\t\tfont-size: 0.95rem;
  1204. \t\t\t\tfont-weight: 600;
  1205. \t\t\t\tmargin-bottom: 12px !important;
  1206. \t\t\t\tdisplay: block !important;
  1207. \t\t\t\twidth: 100% !important;
  1208. \t\t\t\tposition: relative !important;
  1209. \t\t\t\tclear: both !important;
  1210. \t\t\t\tfloat: none !important;
  1211. \t\t\t}
  1213. \t\t\t.footer-social-icons {
  1214. \t\t\t\tdisplay: flex !important;
  1215. \t\t\t\tgap: 12px !important;
  1216. \t\t\t\tflex-wrap: wrap !important;
  1217. \t\t\t\talign-items: center !important;
  1218. \t\t\t\tjustify-content: flex-start !important;
  1219. \t\t\t\twidth: 100% !important;
  1220. \t\t\t\tposition: relative !important;
  1221. \t\t\t\tclear: both !important;
  1222. \t\t\t\tfloat: none !important;
  1223. \t\t\t\tmargin: 0 !important;
  1224. \t\t\t\tpadding: 0 !important;
  1225. \t\t\t}
  1227. \t\t\t.social-icon {
  1228. \t\t\t\twidth: 38px !important;
  1229. \t\t\t\theight: 38px !important;
  1230. \t\t\t\tmin-width: 38px !important;
  1231. \t\t\t\tmin-height: 38px !important;
  1232. \t\t\t\tdisplay: inline-flex !important;
  1233. \t\t\t\talign-items: center !important;
  1234. \t\t\t\tjustify-content: center !important;
  1235. \t\t\t\tbackground: rgba(255, 255, 255, 0.1) !important;
  1236. \t\t\t\tborder-radius: 50% !important;
  1237. \t\t\t\tcolor: rgba(255, 255, 255, 0.8) !important;
  1238. \t\t\t\ttext-decoration: none !important;
  1239. \t\t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  1240. \t\t\t\tfont-size: 16px !important;
  1241. \t\t\t\tline-height: 1 !important;
  1242. \t\t\t\tbackdrop-filter: blur(10px) !important;
  1243. \t\t\t\tborder: 1px solid rgba(255, 255, 255, 0.1) !important;
  1244. \t\t\t\tflex-shrink: 0 !important;
  1245. \t\t\t\tposition: relative !important;
  1246. \t\t\t\tfloat: none !important;
  1247. \t\t\t\tmargin: 0 !important;
  1248. \t\t\t\tpadding: 0 !important;
  1249. \t\t\t\tvertical-align: middle !important;
  1250. \t\t\t}
  1252. \t\t\t.social-icon i {
  1253. \t\t\t\tfont-size: 16px !important;
  1254. \t\t\t\tline-height: 1 !important;
  1255. \t\t\t\tdisplay: inline-block !important;
  1256. \t\t\t\ttransition: transform 0.3s ease !important;
  1257. \t\t\t\tposition: relative !important;
  1258. \t\t\t\tz-index: 1 !important;
  1259. \t\t\t\tmargin: 0 !important;
  1260. \t\t\t\tpadding: 0 !important;
  1261. \t\t\t}
  1263. \t\t\t.social-icon:hover {
  1264. \t\t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%) !important;
  1265. \t\t\t\ttransform: translateY(-5px) scale(1.1) !important;
  1266. \t\t\t\tcolor: white !important;
  1267. \t\t\t\tborder-color: transparent !important;
  1268. \t\t\t\tbox-shadow: 0 8px 20px rgba(255, 162, 0, 0.4) !important;
  1269. \t\t\t}
  1271. \t\t\t.social-icon:hover i {
  1272. \t\t\t\ttransform: scale(1.1) !important;
  1273. \t\t\t}
  1275. \t\t\t/* Footer divider */
  1276. \t\t\t.footer-divider {
  1277. \t\t\t\theight: 1px;
  1278. \t\t\t\tbackground: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  1279. \t\t\t\tmargin: 30px 0 20px;
  1280. \t\t\t}
  1282. \t\t\t/* Footer bottom */
  1283. \t\t\t.footer-bottom {
  1284. \t\t\t\tpadding-top: 15px;
  1285. \t\t\t}
  1287. \t\t\t.footer-text {
  1288. \t\t\t\tcolor: rgba(255, 255, 255, 0.6);
  1289. \t\t\t\tfont-size: 0.9rem;
  1290. \t\t\t\tmargin: 0;
  1291. \t\t\t\ttext-align: center;
  1292. \t\t\t}
  1294. \t\t\t/* Responsive */
  1295. \t\t\t@media(max-width: 991.98px) {
  1296. \t\t\t\t.footer-area {
  1297. \t\t\t\t\tpadding: 40px 0 20px;
  1298. \t\t\t\t}
  1300. \t\t\t\t.single-footer-widget {
  1301. \t\t\t\t\tmargin-bottom: 30px;
  1302. \t\t\t\t}
  1304. \t\t\t\t.footer-social {
  1305. \t\t\t\t\tmargin-top: 15px;
  1306. \t\t\t\t}
  1307. \t\t\t}
  1309. \t\t\t@media(max-width: 767.98px) {
  1310. \t\t\t\t.footer-area {
  1311. \t\t\t\t\tpadding: 35px 0 18px;
  1312. \t\t\t\t}
  1314. \t\t\t\t.footer-brand {
  1315. \t\t\t\t\tfont-size: 1.4rem;
  1316. \t\t\t\t}
  1318. \t\t\t\t.footer-widget-title {
  1319. \t\t\t\t\tfont-size: 0.95rem;
  1320. \t\t\t\t}
  1323. \t\t\t\t.newsletter-input-group {
  1324. \t\t\t\t\tpadding: 3px 3px 3px 12px;
  1325. \t\t\t\t}
  1327. \t\t\t\t.newsletter-input {
  1328. \t\t\t\t\tpadding: 8px 6px;
  1329. \t\t\t\t\tfont-size: 0.85rem;
  1330. \t\t\t\t}
  1332. \t\t\t\t.newsletter-btn {
  1333. \t\t\t\t\twidth: 38px;
  1334. \t\t\t\t\theight: 38px;
  1335. \t\t\t\t\tmin-width: 38px;
  1336. \t\t\t\t\tmin-height: 38px;
  1337. \t\t\t\t\tfont-size: 0.85rem;
  1338. \t\t\t\t}
  1340. \t\t\t\t.footer-trust-badges {
  1341. \t\t\t\t\tflex-direction: row;
  1342. \t\t\t\t\tflex-wrap: wrap;
  1343. \t\t\t\t\tjustify-content: flex-start;
  1344. \t\t\t\t\tgap: 12px;
  1345. \t\t\t\t}
  1346. \t\t\t}
  1348. \t\t\t@media(max-width: 575.98px) {
  1349. \t\t\t\t.footer-area {
  1350. \t\t\t\t\tpadding: 40px 0 20px;
  1351. \t\t\t\t}
  1353. \t\t\t\t.footer-brand {
  1354. \t\t\t\t\tfont-size: 1.3rem;
  1355. \t\t\t\t}
  1357. \t\t\t\t.social-icon {
  1358. \t\t\t\t\twidth: 38px;
  1359. \t\t\t\t\theight: 38px;
  1360. \t\t\t\t\tfont-size: 16px;
  1361. \t\t\t\t}
  1363. \t\t\t\t.social-icon i {
  1364. \t\t\t\t\tfont-size: 16px;
  1365. \t\t\t\t}
  1366. \t\t\t}
  1367. \t\t</style>
  1369. \t\t";
  1370.         // line 1243
  1371.         yield from $this->unwrap()->yieldBlock('stylesheets', $context, $blocks);
  1372.         // line 1246
  1373.         yield "
  1374. \t\t<!-- Script pour forcer l'application des styles CSS après chargement -->
  1375. \t\t<script>
  1376. \t\t\tdocument.addEventListener('DOMContentLoaded', function () { // Forcer le masquage du toggle sur grands écrans
  1377. if (window.innerWidth >= 992) {
  1378. const togglers = document.querySelectorAll('.navbar-toggler, .header_area .navbar .navbar-toggler');
  1379. togglers.forEach(function (toggler) {
  1380. if (toggler) {
  1381. toggler.style.display = 'none';
  1382. toggler.style.visibility = 'hidden';
  1383. toggler.style.opacity = '0';
  1384. toggler.style.width = '0';
  1385. toggler.style.height = '0';
  1386. toggler.style.padding = '0';
  1387. toggler.style.margin = '0';
  1388. toggler.style.border = 'none';
  1389. toggler.style.position = 'absolute';
  1390. toggler.style.left = '-9999px';
  1391. }
  1392. });
  1394. const iconBars = document.querySelectorAll('.navbar-toggler .icon-bar, .header_area .navbar .navbar-toggler .icon-bar, .navbar-toggler-icon');
  1395. iconBars.forEach(function (bar) {
  1396. if (bar) {
  1397. bar.style.display = 'none';
  1398. bar.style.visibility = 'hidden';
  1399. }
  1400. });
  1401. }
  1403. // Alignement des icônes navbar sur mobile
  1404. const navbarRight = document.querySelectorAll('.navbar-right, .header_area .navbar .nav.navbar-nav.navbar-right');
  1405. navbarRight.forEach(function (nav) {
  1406. if (nav && window.innerWidth<= 991.98) {
  1407.                     // Mobile: colonne avec icônes alignées horizontalement
  1408.                     nav.style.display = 'flex';
  1409.                     nav.style.flexDirection = 'column';
  1410.                     nav.style.alignItems = 'center';
  1411.                     nav.style.textAlign = 'center';
  1412.                     
  1413.                     // Le container d'icônes reste horizontal
  1414.                     const iconsContainer = nav.querySelector('.navbar-icons-wrapper');
  1415.                     if (iconsContainer) {
  1416.                         iconsContainer.style.display = 'flex';
  1417.                         iconsContainer.style.flexDirection = 'row';
  1418.                         iconsContainer.style.justifyContent = 'center';
  1419.                     }
  1420.                     
  1421.                     // Le bouton compte en bas
  1422.                     const accountBtn = nav.querySelector('li:last-child');
  1423.                     if (accountBtn) {
  1424.                         accountBtn.style.width = '100%';
  1425.                         accountBtn.style.display = 'flex';
  1426.                         accountBtn.style.justifyContent = 'center';
  1427.                         accountBtn.style.marginTop = '12px';
  1428.                         accountBtn.style.paddingTop = '12px';
  1429.                         accountBtn.style.borderTop = '1px solid #e0e0e0';
  1430.                     }
  1431.                 } else if (nav && window.innerWidth> 991.98) { // Desktop: alignement horizontal normal
  1432. nav.style.display = 'flex';
  1433. nav.style.flexDirection = 'row';
  1434. nav.style.alignItems = 'center';
  1435. nav.style.justifyContent = 'flex-end';
  1436. }
  1437. });
  1438. });
  1440. // Réappliquer lors du redimensionnement
  1441. window.addEventListener('resize', function () {
  1442. if (window.innerWidth >= 992) {
  1443. const togglers = document.querySelectorAll('.navbar-toggler, .header_area .navbar .navbar-toggler');
  1444. togglers.forEach(function (toggler) {
  1445. if (toggler) {
  1446. toggler.style.display = 'none';
  1447. toggler.style.visibility = 'hidden';
  1448. }
  1449. });
  1450. }
  1452. // Réappliquer l'alignement des icônes navbar
  1453. const navbarRight = document.querySelectorAll('.navbar-right, .header_area .navbar .nav.navbar-nav.navbar-right');
  1454. navbarRight.forEach(function (nav) {
  1455. if (nav && window.innerWidth<= 991.98) {
  1456.                     // Mobile: colonne avec icônes alignées horizontalement
  1457.                     nav.style.display = 'flex';
  1458.                     nav.style.flexDirection = 'column';
  1459.                     nav.style.alignItems = 'center';
  1460.                     nav.style.textAlign = 'center';
  1461.                     
  1462.                     // Le container d'icônes reste horizontal
  1463.                     const iconsContainer = nav.querySelector('.navbar-icons-wrapper');
  1464.                     if (iconsContainer) {
  1465.                         iconsContainer.style.display = 'flex';
  1466.                         iconsContainer.style.flexDirection = 'row';
  1467.                         iconsContainer.style.justifyContent = 'center';
  1468.                     }
  1469.                     
  1470.                     const accountBtn = nav.querySelector('li:last-child');
  1471.                     if (accountBtn) {
  1472.                         accountBtn.style.width = '100%';
  1473.                         accountBtn.style.display = 'flex';
  1474.                         accountBtn.style.justifyContent = 'center';
  1475.                         accountBtn.style.marginTop = '12px';
  1476.                         accountBtn.style.paddingTop = '12px';
  1477.                         accountBtn.style.borderTop = '1px solid #e0e0e0';
  1478.                     }
  1479.                 } else if (nav && window.innerWidth> 991.98) { // Desktop: alignement horizontal normal
  1480. nav.style.display = 'flex';
  1481. nav.style.flexDirection = 'row';
  1482. nav.style.alignItems = 'center';
  1483. nav.style.justifyContent = 'flex-end';
  1484. }
  1485. });
  1486. });
  1487. \t\t</script>
  1489. \t</head>
  1490. \t<body
  1491. \t\t";
  1492.         // line 1364
  1493.         if ((array_key_exists("current_menu", $context) && (($context["current_menu"] ?? null) == "listing"))) {
  1494.             yield " id=\"category\" ";
  1495.         }
  1496.         // line 1365
  1497.         yield "\t\tstyle=\"transition: background-color 0.3s ease, color 0.3s ease;\"
  1498. \t\tclass=\"theme-transition\">
  1500. \t\t<!-- Start Header Area -->
  1501. \t\t<header class=\"header_area sticky-header\">
  1502. \t\t\t<div class=\"main_menu\">
  1503. \t\t\t\t<nav class=\"navbar navbar-expand-lg navbar-light main_box\">
  1504. \t\t\t\t\t<div
  1505. \t\t\t\t\t\tclass=\"container\">
  1506. \t\t\t\t\t\t<!-- Brand and toggle get grouped for better mobile display -->
  1507. \t\t\t\t\t\t<a class=\"navbar-brand logo_h\" href=\"";
  1508.         // line 1375
  1509.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_home");
  1510.         yield "\"><img style=\"width: auto;height: 60px\" src=\"";
  1511.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("logo.png"), "html", null, true);
  1512.         yield "\" alt=\"\"></a>
  1513. \t\t\t\t\t\t<button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">
  1514. \t\t\t\t\t\t\t<span class=\"icon-bar\"></span>
  1515. \t\t\t\t\t\t\t<span class=\"icon-bar\"></span>
  1516. \t\t\t\t\t\t\t<span class=\"icon-bar\"></span>
  1517. \t\t\t\t\t\t</button>
  1518. \t\t\t\t\t\t<!-- Collect the nav links, forms, and other content for toggling -->
  1519. \t\t\t\t\t\t<div class=\"collapse navbar-collapse offset\" id=\"navbarSupportedContent\">
  1520. \t\t\t\t\t\t\t<ul class=\"nav navbar-nav menu_nav ml-auto\">
  1521. \t\t\t\t\t\t\t\t<li class=\"nav-item ";
  1522.         // line 1384
  1523.         if ((array_key_exists("current_menu", $context) && (($context["current_menu"] ?? null) == " home"))) {
  1524.             yield "active";
  1525.         }
  1526.         yield "\">
  1527. \t\t\t\t\t\t\t\t\t<a class=\"nav-link\" href=\"";
  1528.         // line 1385
  1529.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_home");
  1530.         yield "\">Accueil</a>
  1531. \t\t\t\t\t\t\t\t</li>
  1532. \t\t\t\t\t\t\t\t<li class=\"nav-item ";
  1533.         // line 1387
  1534.         if ((array_key_exists("current_menu", $context) && (($context["current_menu"] ?? null) == " shops"))) {
  1535.             yield "active";
  1536.         }
  1537.         yield "\">
  1538. \t\t\t\t\t\t\t\t\t<a class=\"nav-link\" href=\"";
  1539.         // line 1388
  1540.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_shops_list");
  1541.         yield "\">Boutiques</a>
  1542. \t\t\t\t\t\t\t\t</li>
  1543. \t\t\t\t\t\t\t\t<li class=\"nav-item ";
  1544.         // line 1390
  1545.         if ((array_key_exists("current_menu", $context) && (($context["current_menu"] ?? null) == " listing"))) {
  1546.             yield "active";
  1547.         }
  1548.         yield "\">
  1549. \t\t\t\t\t\t\t\t\t<a class=\"nav-link\" href=\"";
  1550.         // line 1391
  1551.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  1552.         yield "\">Produits</a>
  1553. \t\t\t\t\t\t\t\t</li>
  1554. \t\t\t\t\t\t\t\t<li class=\"nav-item ";
  1555.         // line 1393
  1556.         if ((array_key_exists("current_menu", $context) && (($context["current_menu"] ?? null) == " contact"))) {
  1557.             yield "active";
  1558.         }
  1559.         yield "\">
  1560. \t\t\t\t\t\t\t\t\t<a class=\"nav-link\" href=\"";
  1561.         // line 1394
  1562.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_contact");
  1563.         yield "\">Contact</a>
  1564. \t\t\t\t\t\t\t\t</li>
  1565. \t\t\t\t\t\t\t</ul>
  1566. \t\t\t\t\t\t\t<ul class=\"nav navbar-nav navbar-right\">
  1567. \t\t\t\t\t\t\t\t<li class=\"nav-item\">
  1568. \t\t\t\t\t\t\t\t\t<div class=\"navbar-icons-wrapper\">
  1569. \t\t\t\t\t\t\t\t\t\t<a href=\"";
  1570.         // line 1400
  1571.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_cart");
  1572.         yield "\" class=\"cart ";
  1573.         if ((array_key_exists("current_menu", $context) && (($context["current_menu"] ?? null) == " cart"))) {
  1574.             yield "active";
  1575.         }
  1576.         yield "\" aria-label=\"Panier\">
  1577. \t\t\t\t\t\t\t\t\t\t\t<span class=\"ti-bag\"></span>
  1578. \t\t\t\t\t\t\t\t\t\t</a>
  1579. \t\t\t\t\t\t\t\t\t\t";
  1580.         // line 1403
  1581.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 1403)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1582.             // line 1404
  1583.             yield "\t\t\t\t\t\t\t\t\t\t\t<a href=\"";
  1584.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("notifications_list");
  1585.             yield "\" class=\"notification-icon\" title=\"Notifications\" aria-label=\"Notifications\">
  1586. \t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ti-bell\"></span>
  1587. \t\t\t\t\t\t\t\t\t\t\t\t<span class=\"notification-badge text-white\" id=\"notificationBadge\" style=\"display: none;color: white;\">0</span>
  1588. \t\t\t\t\t\t\t\t\t\t\t</a>
  1589. \t\t\t\t\t\t\t\t\t\t\t<a href=\"";
  1590.             // line 1408
  1591.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_product_comparison");
  1592.             yield "\" class=\"comparison-icon\" title=\"Comparaison\" aria-label=\"Comparaison\">
  1593. \t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-sync\"></span>
  1594. \t\t\t\t\t\t\t\t\t\t\t\t<span class=\"comparison-badge text-white\" id=\"comparisonBadge\" style=\"display: none;color: white;\">0</span>
  1595. \t\t\t\t\t\t\t\t\t\t\t</a>
  1596. \t\t\t\t\t\t\t\t\t\t";
  1597.         }
  1598.         // line 1413
  1599.         yield "\t\t\t\t\t\t\t\t\t\t";
  1600.         yield Twig\Extension\CoreExtension::include($this->env, $context, "components/_dark_mode_toggle.html.twig");
  1601.         yield "
  1602. \t\t\t\t\t\t\t\t\t\t<button class=\"search\" type=\"button\" aria-label=\"Recherche\">
  1603. \t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-magnifier\" id=\"search\"></span>
  1604. \t\t\t\t\t\t\t\t\t\t</button>
  1605. \t\t\t\t\t\t\t\t\t</div>
  1606. \t\t\t\t\t\t\t\t</li>
  1607. \t\t\t\t\t\t\t\t<li class=\"nav-item\">
  1608. \t\t\t\t\t\t\t\t\t";
  1609.         // line 1420
  1610.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 1420)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1611.             // line 1421
  1612.             yield "\t\t\t\t\t\t\t\t\t\t<a class=\"nav-link btn btn-primary btn-account text-white\" href=\"";
  1613.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_account_index");
  1614.             yield "\">
  1615. \t\t\t\t\t\t\t\t\t\t\t<i class=\"ti-user\"></i>
  1616. \t\t\t\t\t\t\t\t\t\t\tMon compte
  1617. \t\t\t\t\t\t\t\t\t\t</a>
  1618. \t\t\t\t\t\t\t\t\t";
  1619.         } else {
  1620.             // line 1426
  1621.             yield "\t\t\t\t\t\t\t\t\t\t<a class=\"nav-link btn btn-primary btn-account text-white\" href=\"";
  1622.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_app_login");
  1623.             yield "\">
  1624. \t\t\t\t\t\t\t\t\t\t\t<i class=\"ti-lock\"></i>
  1625. \t\t\t\t\t\t\t\t\t\t\tSe connecter
  1626. \t\t\t\t\t\t\t\t\t\t</a>
  1627. \t\t\t\t\t\t\t\t\t";
  1628.         }
  1629.         // line 1431
  1630.         yield "\t\t\t\t\t\t\t\t</li>
  1631. \t\t\t\t\t\t\t</ul>
  1632. \t\t\t\t\t\t</div>
  1633. \t\t\t\t\t</div>
  1634. \t\t\t\t</nav>
  1635. \t\t\t</div>
  1636. \t\t\t<div class=\"search_input\" id=\"search_input_box\">
  1637. \t\t\t\t<div class=\"container\">
  1638. \t\t\t\t\t<form class=\"d-flex justify-content-between\" id=\"search_form\" action=\"";
  1639.         // line 1439
  1640.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  1641.         yield "\" method=\"get\">
  1642. \t\t\t\t\t\t<input type=\"text\" class=\"form-control\" id=\"search_input\" name=\"q\" placeholder=\"Rechercher un produit, une boutique, une catégorie...\" autocomplete=\"off\" value=\"";
  1643.         // line 1440
  1644.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1440), "query", [], "any", false, false, false, 1440), "get", ["q", ""], "method", false, false, false, 1440), "html", null, true);
  1645.         yield "\">
  1646. \t\t\t\t\t\t<button type=\"button\" class=\"btn\" id=\"search_submit_btn\">
  1647. \t\t\t\t\t\t\t<i class=\"lnr lnr-magnifier\"></i>
  1648. \t\t\t\t\t\t</button>
  1649. \t\t\t\t\t\t";
  1650.         // line 1444
  1651.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1444), "query", [], "any", false, false, false, 1444), "get", ["q"], "method", false, false, false, 1444)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1652.             // line 1445
  1653.             yield "\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-clear-search\" id=\"clear_search_btn\" title=\"Effacer la recherche\">
  1654. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-cross\"></i>
  1655. \t\t\t\t\t\t\t</button>
  1656. \t\t\t\t\t\t";
  1657.         }
  1658.         // line 1449
  1659.         yield "\t\t\t\t\t\t<span class=\"lnr lnr-cross\" id=\"close_search\" title=\"Fermer la recherche\"></span>
  1660. \t\t\t\t\t</form>
  1661. \t\t\t\t\t<div id=\"search_results\" class=\"search-results-container\"></div>
  1662. \t\t\t\t</div>
  1663. \t\t\t</div>
  1664. \t\t\t<script>
  1665. \t\t\t\twindow.searchSuggestUrl = \"";
  1666.         // line 1455
  1667.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_api_search_suggest");
  1668.         yield "\";
  1669. \t\t\t\twindow.listingUrl = \"";
  1670.         // line 1456
  1671.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  1672.         yield "\";
  1673. \t\t\t</script>
  1674. \t\t</header>
  1675. \t\t<!-- End Header Area -->
  1677. \t\t<!-- Flash Messages -->
  1678. \t\t<div class=\"container mt-3\" id=\"flash-messages-container\" style=\"position: relative; z-index: 1050;\">
  1679. \t\t\t<div class=\"row\">
  1680. \t\t\t\t<div class=\"col-12\">
  1681. \t\t\t\t\t";
  1682.         // line 1465
  1683.         $context['_parent'] = $context;
  1684.         $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "flashes", ["success"], "method", false, false, false, 1465));
  1685.         foreach ($context['_seq'] as $context["_key"] => $context["message"]) {
  1686.             // line 1466
  1687.             yield "\t\t\t\t\t\t<div class=\"alert alert-success alert-dismissible fade show flash-message\" role=\"alert\">
  1688. \t\t\t\t\t\t\t<i class=\"fa fa-check-circle\"></i>
  1689. \t\t\t\t\t\t\t<strong>";
  1690.             // line 1468
  1691.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($context["message"], "html", null, true);
  1692.             yield "</strong>
  1693. \t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>
  1694. \t\t\t\t\t\t</div>
  1695. \t\t\t\t\t";
  1696.         }
  1697.         $_parent = $context['_parent'];
  1698.         unset($context['_seq'], $context['_key'], $context['message'], $context['_parent']);
  1699.         $context = array_intersect_key($context, $_parent) + $_parent;
  1700.         // line 1472
  1701.         yield "
  1702. \t\t\t\t\t";
  1703.         // line 1473
  1704.         $context['_parent'] = $context;
  1705.         $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "flashes", ["error"], "method", false, false, false, 1473));
  1706.         foreach ($context['_seq'] as $context["_key"] => $context["message"]) {
  1707.             // line 1474
  1708.             yield "\t\t\t\t\t\t<div class=\"alert alert-danger alert-dismissible fade show flash-message\" role=\"alert\">
  1709. \t\t\t\t\t\t\t<i class=\"fa fa-exclamation-circle\"></i>
  1710. \t\t\t\t\t\t\t<strong>";
  1711.             // line 1476
  1712.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($context["message"], "html", null, true);
  1713.             yield "</strong>
  1714. \t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>
  1715. \t\t\t\t\t\t</div>
  1716. \t\t\t\t\t";
  1717.         }
  1718.         $_parent = $context['_parent'];
  1719.         unset($context['_seq'], $context['_key'], $context['message'], $context['_parent']);
  1720.         $context = array_intersect_key($context, $_parent) + $_parent;
  1721.         // line 1480
  1722.         yield "
  1723. \t\t\t\t\t";
  1724.         // line 1481
  1725.         $context['_parent'] = $context;
  1726.         $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "flashes", ["warning"], "method", false, false, false, 1481));
  1727.         foreach ($context['_seq'] as $context["_key"] => $context["message"]) {
  1728.             // line 1482
  1729.             yield "\t\t\t\t\t\t<div class=\"alert alert-warning alert-dismissible fade show flash-message\" role=\"alert\">
  1730. \t\t\t\t\t\t\t<i class=\"fa fa-exclamation-triangle\"></i>
  1731. \t\t\t\t\t\t\t<strong>";
  1732.             // line 1484
  1733.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($context["message"], "html", null, true);
  1734.             yield "</strong>
  1735. \t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>
  1736. \t\t\t\t\t\t</div>
  1737. \t\t\t\t\t";
  1738.         }
  1739.         $_parent = $context['_parent'];
  1740.         unset($context['_seq'], $context['_key'], $context['message'], $context['_parent']);
  1741.         $context = array_intersect_key($context, $_parent) + $_parent;
  1742.         // line 1488
  1743.         yield "
  1744. \t\t\t\t\t";
  1745.         // line 1489
  1746.         $context['_parent'] = $context;
  1747.         $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "flashes", ["info"], "method", false, false, false, 1489));
  1748.         foreach ($context['_seq'] as $context["_key"] => $context["message"]) {
  1749.             // line 1490
  1750.             yield "\t\t\t\t\t\t<div class=\"alert alert-info alert-dismissible fade show flash-message\" role=\"alert\">
  1751. \t\t\t\t\t\t\t<i class=\"fa fa-info-circle\"></i>
  1752. \t\t\t\t\t\t\t<strong>";
  1753.             // line 1492
  1754.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($context["message"], "html", null, true);
  1755.             yield "</strong>
  1756. \t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>
  1757. \t\t\t\t\t\t</div>
  1758. \t\t\t\t\t";
  1759.         }
  1760.         $_parent = $context['_parent'];
  1761.         unset($context['_seq'], $context['_key'], $context['message'], $context['_parent']);
  1762.         $context = array_intersect_key($context, $_parent) + $_parent;
  1763.         // line 1496
  1764.         yield "\t\t\t\t</div>
  1765. \t\t\t</div>
  1766. \t\t</div>
  1768. \t\t";
  1769.         // line 1500
  1770.         yield from $this->unwrap()->yieldBlock('body', $context, $blocks);
  1771.         // line 1501
  1772.         yield "
  1773. \t\t<!-- start footer Area -->
  1774. \t\t<footer class=\"footer-area section_gap\">
  1775. \t\t\t<div class=\"footer-pattern\"></div>
  1776. \t\t\t<div class=\"container\">
  1777. \t\t\t\t<div class=\"row\">
  1778. \t\t\t\t\t<div class=\"col-lg-3 col-md-6 col-sm-6 mb-4 mb-lg-0\">
  1779. \t\t\t\t\t\t<div class=\"single-footer-widget\">
  1780. \t\t\t\t\t\t\t<div class=\"footer-logo mb-3\">
  1781. \t\t\t\t\t\t\t\t<h4 class=\"footer-brand\">MaketOu</h4>
  1782. \t\t\t\t\t\t\t</div>
  1783. \t\t\t\t\t\t\t<p class=\"footer-description\">
  1784. \t\t\t\t\t\t\t\tMaketOu est la première marketplace haïtienne qui connecte les acheteurs et les vendeurs. 
  1785. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                        Nous offrons une plateforme sécurisée et moderne pour le commerce en ligne en Haïti.
  1786. \t\t\t\t\t\t\t</p>
  1787. \t\t\t\t\t\t\t<div class=\"footer-social mt-3\">
  1788. \t\t\t\t\t\t\t\t<h6 class=\"mb-2\">Suivez-nous</h6>
  1789. \t\t\t\t\t\t\t\t<div class=\"footer-social-icons\">
  1790. \t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"social-icon\" aria-label=\"Facebook\" title=\"Facebook\">
  1791. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-facebook\"></i>
  1792. \t\t\t\t\t\t\t\t\t</a>
  1793. \t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"social-icon\" aria-label=\"Twitter\" title=\"Twitter\">
  1794. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-twitter\"></i>
  1795. \t\t\t\t\t\t\t\t\t</a>
  1796. \t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"social-icon\" aria-label=\"Instagram\" title=\"Instagram\">
  1797. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-instagram\"></i>
  1798. \t\t\t\t\t\t\t\t\t</a>
  1799. \t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"social-icon\" aria-label=\"LinkedIn\" title=\"LinkedIn\">
  1800. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-linkedin\"></i>
  1801. \t\t\t\t\t\t\t\t\t</a>
  1802. \t\t\t\t\t\t\t\t</div>
  1803. \t\t\t\t\t\t\t</div>
  1804. \t\t\t\t\t\t</div>
  1805. \t\t\t\t\t</div>
  1806. \t\t\t\t\t<div class=\"col-lg-2 col-md-6 col-sm-6 mb-4 mb-lg-0\">
  1807. \t\t\t\t\t\t<div class=\"single-footer-widget\">
  1808. \t\t\t\t\t\t\t<h6 class=\"footer-widget-title\">Liens rapides</h6>
  1809. \t\t\t\t\t\t\t<ul class=\"footer-list\">
  1810. \t\t\t\t\t\t\t\t<li>
  1811. \t\t\t\t\t\t\t\t\t<a href=\"";
  1812.         // line 1540
  1813.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_home");
  1814.         yield "\">
  1815. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Accueil</a>
  1816. \t\t\t\t\t\t\t\t</li>
  1817. \t\t\t\t\t\t\t\t<li>
  1818. \t\t\t\t\t\t\t\t\t<a href=\"";
  1819.         // line 1544
  1820.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  1821.         yield "\">
  1822. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Produits</a>
  1823. \t\t\t\t\t\t\t\t</li>
  1824. \t\t\t\t\t\t\t\t<li>
  1825. \t\t\t\t\t\t\t\t\t<a href=\"";
  1826.         // line 1548
  1827.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_shops_list");
  1828.         yield "\">
  1829. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Boutiques</a>
  1830. \t\t\t\t\t\t\t\t</li>
  1831. \t\t\t\t\t\t\t\t";
  1832.         // line 1551
  1833.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 1551)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1834.             // line 1552
  1835.             yield "\t\t\t\t\t\t\t\t\t<li>
  1836. \t\t\t\t\t\t\t\t\t\t<a href=\"";
  1837.             // line 1553
  1838.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_account_index");
  1839.             yield "\">
  1840. \t\t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Mon compte</a>
  1841. \t\t\t\t\t\t\t\t\t</li>
  1842. \t\t\t\t\t\t\t\t";
  1843.         } else {
  1844.             // line 1557
  1845.             yield "\t\t\t\t\t\t\t\t\t<li>
  1846. \t\t\t\t\t\t\t\t\t\t<a href=\"";
  1847.             // line 1558
  1848.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_app_login");
  1849.             yield "\">
  1850. \t\t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Se connecter</a>
  1851. \t\t\t\t\t\t\t\t\t</li>
  1852. \t\t\t\t\t\t\t\t\t<li>
  1853. \t\t\t\t\t\t\t\t\t\t<a href=\"";
  1854.             // line 1562
  1855.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_app_register");
  1856.             yield "\">
  1857. \t\t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;S'inscrire</a>
  1858. \t\t\t\t\t\t\t\t\t</li>
  1859. \t\t\t\t\t\t\t\t";
  1860.         }
  1861.         // line 1566
  1862.         yield "\t\t\t\t\t\t\t</ul>
  1863. \t\t\t\t\t\t</div>
  1864. \t\t\t\t\t</div>
  1865. \t\t\t\t\t<div class=\"col-lg-2 col-md-6 col-sm-6 mb-4 mb-lg-0\">
  1866. \t\t\t\t\t\t<div class=\"single-footer-widget\">
  1867. \t\t\t\t\t\t\t<h6 class=\"footer-widget-title\">Pour les vendeurs</h6>
  1868. \t\t\t\t\t\t\t<ul class=\"footer-list\">
  1869. \t\t\t\t\t\t\t\t<li>
  1870. \t\t\t\t\t\t\t\t\t<a href=\"";
  1871.         // line 1574
  1872.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("seller_index");
  1873.         yield "\">
  1874. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Ouvrir une boutique</a>
  1875. \t\t\t\t\t\t\t\t</li>
  1876. \t\t\t\t\t\t\t\t<li>
  1877. \t\t\t\t\t\t\t\t\t<a href=\"";
  1878.         // line 1578
  1879.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("seller_help_how_to_sell");
  1880.         yield "\">
  1881. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Comment vendre</a>
  1882. \t\t\t\t\t\t\t\t</li>
  1883. \t\t\t\t\t\t\t\t<li>
  1884. \t\t\t\t\t\t\t\t\t<a href=\"";
  1885.         // line 1582
  1886.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("seller_help_pricing");
  1887.         yield "\">
  1888. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Tarifs</a>
  1889. \t\t\t\t\t\t\t\t</li>
  1890. \t\t\t\t\t\t\t\t<li>
  1891. \t\t\t\t\t\t\t\t\t<a href=\"";
  1892.         // line 1586
  1893.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("seller_help_support");
  1894.         yield "\">
  1895. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Support vendeur</a>
  1896. \t\t\t\t\t\t\t\t</li>
  1897. \t\t\t\t\t\t\t</ul>
  1898. \t\t\t\t\t\t</div>
  1899. \t\t\t\t\t</div>
  1900. \t\t\t\t\t<div class=\"col-lg-2 col-md-6 col-sm-6 mb-4 mb-lg-0\">
  1901. \t\t\t\t\t\t<div class=\"single-footer-widget\">
  1902. \t\t\t\t\t\t\t<h6 class=\"footer-widget-title\">Support</h6>
  1903. \t\t\t\t\t\t\t<ul class=\"footer-list\">
  1904. \t\t\t\t\t\t\t\t<li>
  1905. \t\t\t\t\t\t\t\t\t<a href=\"";
  1906.         // line 1597
  1907.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_help");
  1908.         yield "\">
  1909. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Centre d'Aide</a>
  1910. \t\t\t\t\t\t\t\t</li>
  1911. \t\t\t\t\t\t\t\t<li>
  1912. \t\t\t\t\t\t\t\t\t<a href=\"";
  1913.         // line 1601
  1914.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_contact");
  1915.         yield "\">
  1916. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Contactez-nous</a>
  1917. \t\t\t\t\t\t\t\t</li>
  1918. \t\t\t\t\t\t\t\t<li>
  1919. \t\t\t\t\t\t\t\t\t<a href=\"";
  1920.         // line 1605
  1921.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_faq");
  1922.         yield "\">
  1923. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;FAQ</a>
  1924. \t\t\t\t\t\t\t\t</li>
  1925. \t\t\t\t\t\t\t\t<li>
  1926. \t\t\t\t\t\t\t\t\t<a href=\"";
  1927.         // line 1609
  1928.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_privacy");
  1929.         yield "\">
  1930. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Politique de Confidentialité</a>
  1931. \t\t\t\t\t\t\t\t</li>
  1932. \t\t\t\t\t\t\t\t<li>
  1933. \t\t\t\t\t\t\t\t\t<a href=\"";
  1934.         // line 1613
  1935.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_terms");
  1936.         yield "\">
  1937. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Conditions d'Utilisation</a>
  1938. \t\t\t\t\t\t\t\t</li>
  1939. \t\t\t\t\t\t\t</ul>
  1940. \t\t\t\t\t\t</div>
  1941. \t\t\t\t\t</div>
  1942. \t\t\t\t\t<div class=\"col-lg-3 col-md-6 col-sm-6\">
  1943. \t\t\t\t\t\t<div class=\"single-footer-widget\">
  1944. \t\t\t\t\t\t\t<h6 class=\"footer-widget-title\">Newsletter</h6>
  1945. \t\t\t\t\t\t\t<p class=\"footer-newsletter-text\">Restez informé des dernières nouveautés</p>
  1946. \t\t\t\t\t\t\t<div class=\"footer-newsletter-wrapper\" id=\"mc_embed_signup\">
  1947. \t\t\t\t\t\t\t\t<form action=\"";
  1948.         // line 1624
  1949.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_newsletter_subscribe");
  1950.         yield "\" method=\"post\" class=\"footer-newsletter-form\">
  1951. \t\t\t\t\t\t\t\t\t<div class=\"newsletter-input-group\">
  1952. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-envelope newsletter-icon\"></i>
  1953. \t\t\t\t\t\t\t\t\t\t<input class=\"form-control newsletter-input\" name=\"email\" placeholder=\"Votre email\" required type=\"email\">
  1954. \t\t\t\t\t\t\t\t\t\t<button type=\"submit\" class=\"newsletter-btn\" aria-label=\"S'abonner\">
  1955. \t\t\t\t\t\t\t\t\t\t\t<span class=\"newsletter-btn-icon\">
  1956. \t\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-paper-plane\" aria-hidden=\"true\"></i>
  1957. \t\t\t\t\t\t\t\t\t\t\t</span>
  1958. \t\t\t\t\t\t\t\t\t\t\t<span class=\"newsletter-btn-loader\" style=\"display: none;\">
  1959. \t\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-spinner fa-spin\" aria-hidden=\"true\"></i>
  1960. \t\t\t\t\t\t\t\t\t\t\t</span>
  1961. \t\t\t\t\t\t\t\t\t\t</button>
  1962. \t\t\t\t\t\t\t\t\t</div>
  1963. \t\t\t\t\t\t\t\t</form>
  1964. \t\t\t\t\t\t\t</div>
  1965. \t\t\t\t\t\t\t<div class=\"footer-trust-badges mt-3\">
  1966. \t\t\t\t\t\t\t\t<div class=\"trust-item\">
  1967. \t\t\t\t\t\t\t\t\t<i class=\"fa fa-shield\"></i>
  1968. \t\t\t\t\t\t\t\t\t<span>Paiement sécurisé</span>
  1969. \t\t\t\t\t\t\t\t</div>
  1970. \t\t\t\t\t\t\t\t<div class=\"trust-item\">
  1971. \t\t\t\t\t\t\t\t\t<i class=\"fa fa-truck\"></i>
  1972. \t\t\t\t\t\t\t\t\t<span>Livraison rapide</span>
  1973. \t\t\t\t\t\t\t\t</div>
  1974. \t\t\t\t\t\t\t</div>
  1975. \t\t\t\t\t\t</div>
  1976. \t\t\t\t\t</div>
  1977. \t\t\t\t</div>
  1978. \t\t\t\t<div class=\"footer-divider\"></div>
  1979. \t\t\t\t<div class=\"footer-bottom d-flex justify-content-center align-items-center flex-wrap\">
  1980. \t\t\t\t\t<p class=\"footer-text m-0\">
  1981. \t\t\t\t\t\tCopyright &copy;<script>
  1982. \t\t\t\t\t\t\tdocument.write(new Date().getFullYear());
  1983. \t\t\t\t\t\t</script>
  1984. \t\t\t\t\t\tTous droits réservés | Ce site a été fait avec
  1985. \t\t\t\t\t\t<i class=\"fa fa-heart-o\" aria-hidden=\"true\" style=\"color: #dc3545;\"></i>
  1986. \t\t\t\t\t\tpar
  1987. \t\t\t\t\t\t<a href=\"https://tech.foulgor.com\" target=\"_blank\" style=\"color: #ffa200;\">Foulgor Tech</a>
  1988. \t\t\t\t\t</p>
  1989. \t\t\t\t</div>
  1990. \t\t\t</div>
  1991. \t\t</footer>
  1993. \t\t<style>
  1994. \t\t\t.search-results-container {
  1995. \t\t\t\tposition: absolute;
  1996. \t\t\t\ttop: 100%;
  1997. \t\t\t\tleft: 15px;
  1998. \t\t\t\tright: 15px;
  1999. \t\t\t\tbackground: #fff;
  2000. \t\t\t\tborder: 1px solid #ddd;
  2001. \t\t\t\tborder-top: none;
  2002. \t\t\t\tz-index: 9999;
  2003. \t\t\t\tbox-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  2004. \t\t\t\tmax-height: 400px;
  2005. \t\t\t\toverflow-y: auto;
  2006. \t\t\t\tdisplay: none;
  2007. \t\t\t\tborder-radius: 0 0 4px 4px;
  2008. \t\t\t}
  2009. \t\t\t.search-results-container .list-group-item {
  2010. \t\t\t\tborder-left: none;
  2011. \t\t\t\tborder-right: none;
  2012. \t\t\t\tborder-radius: 0;
  2013. \t\t\t\tcursor: pointer;
  2014. \t\t\t\tpadding: 12px 15px;
  2015. \t\t\t\ttransition: background-color 0.2s ease;
  2016. \t\t\t}
  2017. \t\t\t.search-results-container .list-group-item:hover {
  2018. \t\t\t\tbackground-color: #f8f9fa;
  2019. \t\t\t}
  2020. \t\t\t.search-results-container .list-group-item i {
  2021. \t\t\t\tcolor: #777;
  2022. \t\t\t\tfont-size: 1.2rem;
  2023. \t\t\t}
  2024. \t\t\t/* Ensure container is relative for absolute positioning of results */
  2025. \t\t\t#search_input_box .container {
  2026. \t\t\t\tposition: relative;
  2027. \t\t\t}
  2028. \t\t\t#search_input_box .form-control {
  2029. \t\t\t\tflex: 1;
  2030. \t\t\t\tpadding-right: 10px;
  2031. \t\t\t}
  2032. \t\t\t#search_input_box #search_submit_btn {
  2033. \t\t\t\tbackground: transparent;
  2034. \t\t\t\tborder: 0;
  2035. \t\t\t\tcolor: #fff;
  2036. \t\t\t\tpadding: 0 15px;
  2037. \t\t\t\tcursor: pointer;
  2038. \t\t\t\ttransition: opacity 0.3s ease;
  2039. \t\t\t}
  2040. \t\t\t#search_input_box #search_submit_btn:hover {
  2041. \t\t\t\topacity: 0.8;
  2042. \t\t\t}
  2043. \t\t\t#search_input_box .btn-clear-search {
  2044. \t\t\t\tbackground: transparent;
  2045. \t\t\t\tborder: 0;
  2046. \t\t\t\tcolor: #fff;
  2047. \t\t\t\tpadding: 0 10px;
  2048. \t\t\t\tcursor: pointer;
  2049. \t\t\t\ttransition: opacity 0.3s ease;
  2050. \t\t\t\tdisplay: none;
  2051. \t\t\t}
  2052. \t\t\t#search_input_box .btn-clear-search:hover {
  2053. \t\t\t\topacity: 0.8;
  2054. \t\t\t}
  2055. \t\t\t#search_input_box .btn-clear-search i {
  2056. \t\t\t\tfont-size: 1.1rem;
  2057. \t\t\t}
  2058. \t\t\t#search_input_box form {
  2059. \t\t\t\tposition: relative;
  2060. \t\t\t\talign-items: center;
  2061. \t\t\t}
  2062. \t\t</style>
  2063. \t\t<script>
  2064. \t\t\t// Debounced autocomplete for header search
  2065. (function () {
  2066. const input = document.getElementById('search_input');
  2067. const box = document.getElementById('search_results');
  2068. const searchForm = document.getElementById('search_form');
  2069. const clearSearchBtn = document.getElementById('clear_search_btn');
  2070. const closeSearchBtn = document.getElementById('close_search');
  2072. if (! input || ! box) 
  2073. return;
  2076. // Fonction pour effacer la recherche
  2077. function clearSearch() {
  2078. input.value = '';
  2079. box.style.display = 'none';
  2080. box.innerHTML = '';
  2081. if (clearSearchBtn) {
  2082. clearSearchBtn.style.display = 'none';
  2083. }
  2084. // Si on est sur la page listing, utiliser AJAX pour mettre à jour
  2085. if (typeof currentFilters !== 'undefined') {
  2086. currentFilters.q = '';
  2087. currentFilters.page = 1;
  2088. if (typeof applyFilters === 'function') {
  2089. applyFilters();
  2090. }
  2091. if (typeof updateActiveFilters === 'function') {
  2092. updateActiveFilters();
  2093. }
  2094. } else { // Sinon, rediriger vers la page listing sans recherche
  2095. window.location.href = '";
  2096.         // line 1769
  2097.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  2098.         yield "';
  2099. }
  2100. }
  2102. // Bouton pour effacer la recherche
  2103. if (clearSearchBtn) {
  2104. clearSearchBtn.addEventListener('click', function (e) {
  2105. e.preventDefault();
  2106. e.stopPropagation();
  2107. clearSearch();
  2108. });
  2109. }
  2111. // Bouton de soumission de recherche
  2112. var searchSubmitBtn = document.getElementById('search_submit_btn');
  2113. if (searchSubmitBtn) {
  2114. searchSubmitBtn.addEventListener('click', function (e) {
  2115. e.preventDefault();
  2116. e.stopPropagation();
  2117. const q = input.value.trim();
  2118. if (q.length === 0) {
  2119. clearSearch();
  2120. return false;
  2121. }
  2123. // Si on est sur la page listing, utiliser AJAX
  2124. if (typeof currentFilters !== 'undefined' && typeof applyFilters === 'function') {
  2125. currentFilters.q = q;
  2126. currentFilters.page = 1;
  2127. applyFilters();
  2128. if (typeof updateActiveFilters === 'function') {
  2129. updateActiveFilters();
  2130. }
  2131. // Fermer la boîte de recherche
  2132. if (closeSearchBtn) {
  2133. closeSearchBtn.click();
  2134. }
  2135. } else { // Sinon, rediriger vers la page listing avec la recherche
  2136. const listingUrl = '";
  2137.         // line 1807
  2138.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  2139.         yield "' + '?q=' + encodeURIComponent(q);
  2140. window.location.href = listingUrl;
  2141. }
  2142. return false;
  2143. });
  2144. }
  2146. // Gestion du formulaire de recherche
  2147. if (searchForm) {
  2148. searchForm.addEventListener('submit', function (e) {
  2149. e.preventDefault();
  2150. e.stopPropagation();
  2151. const q = input.value.trim();
  2152. if (q.length === 0) {
  2153. clearSearch();
  2154. return;
  2155. }
  2157. // Si on est sur la page listing, utiliser AJAX
  2158. if (typeof currentFilters !== 'undefined' && typeof applyFilters === 'function') {
  2159. currentFilters.q = q;
  2160. currentFilters.page = 1;
  2161. applyFilters();
  2162. if (typeof updateActiveFilters === 'function') {
  2163. updateActiveFilters();
  2164. }
  2165. // Fermer la boîte de recherche
  2166. if (closeSearchBtn) {
  2167. closeSearchBtn.click();
  2168. }
  2169. } else { // Sinon, rediriger vers la page listing avec la recherche
  2170. const listingUrl = '";
  2171.         // line 1838
  2172.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  2173.         yield "' + '?q=' + encodeURIComponent(q);
  2174. window.location.href = listingUrl;
  2175. }
  2176. return false;
  2177. });
  2178. }
  2180. let t = null;
  2181. input.addEventListener('input', function () {
  2182. const q = input.value.trim();
  2183. clearTimeout(t);
  2184. if (q.length === 0) {
  2185. box.style.display = 'none';
  2186. box.innerHTML = '';
  2187. // Afficher/masquer le bouton clear
  2188. if (clearSearchBtn) {
  2189. clearSearchBtn.style.display = 'none';
  2190. }
  2191. return;
  2192. }
  2193. // Afficher le bouton clear
  2194. if (clearSearchBtn) {
  2195. clearSearchBtn.style.display = 'block';
  2196. }
  2197. t = setTimeout(() => fetchSuggestions(q), 300);
  2198. });
  2200. function fetchSuggestions(q) {
  2201. const url = '";
  2202.         // line 1866
  2203.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_api_search_suggest");
  2204.         yield "' + '?q=' + encodeURIComponent(q);
  2205. fetch(url).then(r => r.json()).then(data => {
  2206. if (!data.success) {
  2207. box.style.display = 'none';
  2208. return;
  2209. }
  2210. renderSuggestions(data.results || []);
  2211. }).catch(() => {
  2212. box.style.display = 'none';
  2213. });
  2214. }
  2216. function renderSuggestions(items) {
  2217. if (! items.length) {
  2218. box.style.display = 'none';
  2219. box.innerHTML = '';
  2220. return;
  2221. }
  2222. box.innerHTML = items.map(it => suggestionItem(it)).join('');
  2223. box.style.display = 'block';
  2224. }
  2226. function suggestionItem(it) {
  2227. const icon = it.type === 'product' ? 'ti-package' : (it.type === 'shop' ? 'ti-briefcase' : (it.type === 'category' ? 'ti-layers' : 'ti-tag'));
  2228. const typeLabel = it.type === 'product' ? 'Produit' : (it.type === 'shop' ? 'Boutique' : (it.type === 'category' ? 'Catégorie' : 'Tag'));
  2229. return '<a href=\"' + it.url + '\" class=\"list-group-item list-group-item-action d-flex align-items-center\">' + '<i class=\"' + icon + ' me-3\"></i>' + '<span class=\"flex-grow-1\">' + escapeHtml(it.label) + '</span>' + '<span class=\"badge bg-light text-dark ms-2\">' + typeLabel + '</span>' + '</a>';
  2230. }
  2232. function escapeHtml(s) {
  2233. return s.replace(/[&<>\"]+/g, c => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;'}[c]));
  2234. }
  2236. document.addEventListener('click', function (e) {
  2237. if (! box.contains(e.target) && e.target !== input) {
  2238. box.style.display = 'none';
  2239. }
  2240. });
  2242. window.handleSearchSubmit = function (e) {
  2243. if (e) 
  2244. e.preventDefault();
  2247. const first = box.querySelector('a');
  2248. if (first) {
  2249. window.location.href = first.getAttribute('href');
  2250. return false;
  2251. }
  2252. // fallback to listing page search by name
  2253. const q = input.value.trim();
  2254. if (q.length) { // Si on est sur la page listing, utiliser AJAX
  2255. if (typeof currentFilters !== 'undefined') {
  2256. currentFilters.q = q;
  2257. currentFilters.page = 1;
  2258. if (typeof applyFilters === 'function') {
  2259. applyFilters();
  2260. }
  2261. if (typeof updateActiveFilters === 'function') {
  2262. updateActiveFilters();
  2263. }
  2264. } else {
  2265. window.location.href = '";
  2266.         // line 1927
  2267.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  2268.         yield "' + '?q=' + encodeURIComponent(q);
  2269. }
  2270. }
  2271. return false;
  2272. }
  2274. // Gestion de la touche Enter dans le champ de recherche
  2275. if (input) {
  2276. input.addEventListener('keydown', function (e) {
  2277. if (e.key === 'Enter' || e.keyCode === 13) {
  2278. e.preventDefault();
  2279. e.stopPropagation();
  2280. const q = input.value.trim();
  2281. if (q.length === 0) {
  2282. clearSearch();
  2283. return false;
  2284. }
  2286. // Si on est sur la page listing, utiliser AJAX
  2287. if (typeof currentFilters !== 'undefined' && typeof applyFilters === 'function') {
  2288. currentFilters.q = q;
  2289. currentFilters.page = 1;
  2290. applyFilters();
  2291. if (typeof updateActiveFilters === 'function') {
  2292. updateActiveFilters();
  2293. }
  2294. // Fermer la boîte de recherche
  2295. if (closeSearchBtn) {
  2296. closeSearchBtn.click();
  2297. }
  2298. } else { // Sinon, rediriger vers la page listing avec la recherche
  2299. const listingUrl = '";
  2300.         // line 1958
  2301.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  2302.         yield "' + '?q=' + encodeURIComponent(q);
  2303. window.location.href = listingUrl;
  2304. }
  2305. return false;
  2306. }
  2307. });
  2308. }
  2310. // Ajouter un event listener au bouton de soumission (réutiliser la variable si elle existe déjà)
  2311. if (!searchSubmitBtn) {
  2312.     searchSubmitBtn = document.getElementById('search_submit_btn');
  2313. }
  2314. if (searchSubmitBtn) {
  2315. searchSubmitBtn.addEventListener('click', function (e) {
  2316. e.preventDefault();
  2317. e.stopPropagation();
  2318. const q = input.value.trim();
  2319. if (q.length === 0) {
  2320. clearSearch();
  2321. return false;
  2322. }
  2324. // Si on est sur la page listing, utiliser AJAX
  2325. if (typeof currentFilters !== 'undefined' && typeof applyFilters === 'function') {
  2326. currentFilters.q = q;
  2327. currentFilters.page = 1;
  2328. applyFilters();
  2329. if (typeof updateActiveFilters === 'function') {
  2330. updateActiveFilters();
  2331. }
  2332. // Fermer la boîte de recherche
  2333. if (closeSearchBtn) {
  2334. closeSearchBtn.click();
  2335. }
  2336. } else { // Sinon, rediriger vers la page listing avec la recherche
  2337. const listingUrl = '";
  2338.         // line 1993
  2339.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  2340.         yield "' + '?q=' + encodeURIComponent(q);
  2341. window.location.href = listingUrl;
  2342. }
  2343. return false;
  2344. });
  2345. }
  2347. // Afficher le bouton clear au chargement si une recherche est active
  2348. document.addEventListener('DOMContentLoaded', function () {
  2349. const q = input.value.trim();
  2350. if (q.length > 0 && clearSearchBtn) {
  2351. clearSearchBtn.style.display = 'block';
  2352. }
  2353. });
  2354. })();
  2356. // Gestion des mega-menus avec clic (comme la barre de recherche)
  2357. document.addEventListener('DOMContentLoaded', function () {
  2358. const dropdownItems = document.querySelectorAll('.nav-item.dropdown');
  2360. dropdownItems.forEach(function (item) {
  2361. const dropdownToggle = item.querySelector('.dropdown-toggle');
  2362. const dropdownMenu = item.querySelector('.mega-menu');
  2364. if (! dropdownToggle || ! dropdownMenu) 
  2365. return;
  2369. // Fermer les autres menus quand on ouvre un nouveau
  2370. function closeAllMenus() {
  2371. dropdownItems.forEach(function (otherItem) {
  2372. const otherMenu = otherItem.querySelector('.mega-menu');
  2373. if (otherMenu && otherMenu !== dropdownMenu) {
  2374. \$(otherMenu).slideUp(300);
  2375. otherMenu.classList.remove('active');
  2376. }
  2377. });
  2378. }
  2380. // Toggle au clic (comme la barre de recherche)
  2381. dropdownToggle.addEventListener('click', function (e) {
  2382. e.preventDefault();
  2383. e.stopPropagation();
  2385. closeAllMenus();
  2387. if (dropdownMenu.classList.contains('active')) { // Fermer le menu
  2388. dropdownMenu.style.opacity = '0';
  2389. dropdownMenu.style.visibility = 'hidden';
  2390. dropdownMenu.style.transform = 'translateX(-50%) translateY(-10px)';
  2391. setTimeout(() => {
  2392. dropdownMenu.classList.remove('active');
  2393. dropdownMenu.style.display = 'none';
  2394. }, 300);
  2395. } else { // Ouvrir le menu
  2396. dropdownMenu.style.display = 'block';
  2397. setTimeout(() => {
  2398. dropdownMenu.classList.add('active');
  2399. dropdownMenu.style.opacity = '1';
  2400. dropdownMenu.style.visibility = 'visible';
  2401. dropdownMenu.style.transform = 'translateX(-50%) translateY(0)';
  2402. }, 10);
  2403. }
  2404. });
  2406. // Fermer au clic en dehors
  2407. document.addEventListener('click', function (e) {
  2408. if (! item.contains(e.target) && dropdownMenu.classList.contains('active')) {
  2409. dropdownMenu.style.opacity = '0';
  2410. dropdownMenu.style.visibility = 'hidden';
  2411. dropdownMenu.style.transform = 'translateX(-50%) translateY(-10px)';
  2412. setTimeout(() => {
  2413. dropdownMenu.classList.remove('active');
  2414. dropdownMenu.style.display = 'none';
  2415. }, 300);
  2416. }
  2417. });
  2419. // Animation des éléments du menu
  2420. const menuItems = dropdownMenu.querySelectorAll('.dropdown-item a');
  2421. menuItems.forEach(function (menuItem, index) {
  2422. menuItem.style.animationDelay = (index * 0.05) + 's';
  2423. });
  2424. });
  2426. // Gestion des clics sur mobile
  2427. if (window.innerWidth <= 768) {
  2428. dropdownItems.forEach(function (item) {
  2429. const dropdownToggle = item.querySelector('.dropdown-toggle');
  2430. const dropdownMenu = item.querySelector('.mega-menu');
  2432. dropdownToggle.addEventListener('click', function (e) {
  2433. e.preventDefault();
  2435. // Fermer tous les autres menus
  2436. dropdownItems.forEach(function (otherItem) {
  2437. if (otherItem !== item) {
  2438. const otherMenu = otherItem.querySelector('.mega-menu');
  2439. otherMenu.style.opacity = '0';
  2440. otherMenu.style.visibility = 'hidden';
  2441. otherMenu.style.transform = 'translateY(-10px)';
  2442. }
  2443. });
  2445. // Toggle le menu actuel
  2446. if (dropdownMenu.style.opacity === '1') {
  2447. dropdownMenu.style.opacity = '0';
  2448. dropdownMenu.style.visibility = 'hidden';
  2449. dropdownMenu.style.transform = 'translateY(-10px)';
  2450. } else {
  2451. dropdownMenu.style.opacity = '1';
  2452. dropdownMenu.style.visibility = 'visible';
  2453. dropdownMenu.style.transform = 'translateY(0)';
  2454. }
  2455. });
  2456. });
  2457. }
  2459. // Fermer les menus quand on clique ailleurs
  2460. document.addEventListener('click', function (e) {
  2461. if (! e.target.closest('.nav-item.dropdown')) {
  2462. dropdownItems.forEach(function (item) {
  2463. const dropdownMenu = item.querySelector('.mega-menu');
  2464. dropdownMenu.style.opacity = '0';
  2465. dropdownMenu.style.visibility = 'hidden';
  2466. dropdownMenu.style.transform = 'translateY(-10px)';
  2467. });
  2468. }
  2469. });
  2470. });
  2471. \t\t</script>
  2472. \t\t<!-- End footer Area -->
  2474. \t\t<script src=\"";
  2475.         // line 2127
  2476.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/js/vendor/jquery-2.2.4.min.js"), "html", null, true);
  2477.         yield "\"></script>
  2478. \t\t<script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js\"></script>
  2479. \t\t<script>
  2480. \t\t\t// Initialiser le collapse Bootstrap 5 pour le menu hamburger après chargement de Bootstrap
  2481. document.addEventListener('DOMContentLoaded', function () { // Attendre que Bootstrap soit complètement chargé
  2482. if (typeof bootstrap !== 'undefined') {
  2483. const navbarToggler = document.querySelector('.navbar-toggler');
  2484. const navbarCollapse = document.getElementById('navbarSupportedContent');
  2486. if (navbarToggler && navbarCollapse) {
  2487. // Bootstrap 5 devrait gérer automatiquement avec data-bs-toggle
  2488. // Mais on s'assure que ça fonctionne en écoutant les événements
  2489. navbarCollapse.addEventListener('show.bs.collapse', function () {
  2490. navbarToggler.setAttribute('aria-expanded', 'true');
  2491. navbarToggler.classList.add('active');
  2492. });
  2494. navbarCollapse.addEventListener('hide.bs.collapse', function () {
  2495. navbarToggler.setAttribute('aria-expanded', 'false');
  2496. navbarToggler.classList.remove('active');
  2497. });
  2498. }
  2499. }
  2500. });
  2501. \t\t</script>
  2502. \t\t<script src=\"https://unpkg.com/dropzone@5/dist/min/dropzone.min.js\"></script>
  2503. \t\t<script src=\"";
  2504.         // line 2153
  2505.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/js/jquery.ajaxchimp.min.js"), "html", null, true);
  2506.         yield "\"></script>
  2507. \t\t<script src=\"";
  2508.         // line 2154
  2509.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/js/jquery.nice-select.min.js"), "html", null, true);
  2510.         yield "\"></script>
  2511. \t\t<script src=\"";
  2512.         // line 2155
  2513.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/js/jquery.sticky.js"), "html", null, true);
  2514.         yield "\"></script>
  2515. \t\t<script src=\"";
  2516.         // line 2156
  2517.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/js/nouislider.min.js"), "html", null, true);
  2518.         yield "\"></script>
  2519. \t\t<script src=\"";
  2520.         // line 2157
  2521.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/js/countdown.js"), "html", null, true);
  2522.         yield "\"></script>
  2523. \t\t<script src=\"";
  2524.         // line 2158
  2525.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/js/jquery.magnific-popup.min.js"), "html", null, true);
  2526.         yield "\"></script>
  2527. \t\t<script src=\"";
  2528.         // line 2159
  2529.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/js/owl.carousel.min.js"), "html", null, true);
  2530.         yield "\"></script>
  2531. \t\t<script src=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyCjCGmQ0Uq4exrzdcL6rvxywDDOvfAu6eE\"></script>
  2532. \t\t<script src=\"";
  2533.         // line 2161
  2534.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/js/gmaps.min.js"), "html", null, true);
  2535.         yield "\"></script>
  2536. \t\t<script src=\"";
  2537.         // line 2162
  2538.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/js/main.js"), "html", null, true);
  2539.         yield "\"></script>
  2541. \t\t";
  2542.         // line 2164
  2543.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->env->getFunction('encore_entry_script_tags')->getCallable()("app"), "html", null, true);
  2544.         yield "
  2546. \t\t<!-- PWA Service Worker Registration -->
  2547. \t\t<script>
  2548. \t\t\t// Enregistrement du Service Worker
  2549. if ('serviceWorker' in navigator) {
  2550. window.addEventListener('load', () => {
  2551. navigator.serviceWorker.register('";
  2552.         // line 2171
  2553.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("sw.js"), "html", null, true);
  2554.         yield "').then((registration) => {
  2555. console.log('Service Worker enregistré avec succès:', registration.scope);
  2557. // Vérifie les mises à jour du service worker
  2558. registration.addEventListener('updatefound', () => {
  2559. const newWorker = registration.installing;
  2560. newWorker.addEventListener('statechange', () => {
  2561. if (newWorker.state === 'installed' && navigator.serviceWorker.controller) { // Nouveau service worker disponible
  2562. if (confirm('Une nouvelle version de MaketOu est disponible. Voulez-vous l\\'installer maintenant ?')) {
  2563. newWorker.postMessage({type: 'SKIP_WAITING'});
  2564. window.location.reload();
  2565. }
  2566. }
  2567. });
  2568. });
  2569. }).catch((error) => {
  2570. console.log('Échec de l\\'enregistrement du Service Worker:', error);
  2571. });
  2573. // Écoute les messages du service worker
  2574. navigator.serviceWorker.addEventListener('message', (event) => {
  2575. console.log('Message du Service Worker:', event.data);
  2576. });
  2577. });
  2578. }
  2579. \t\t</script>
  2581. \t\t<!-- PWA Install Script -->
  2582. \t\t<script src=\"";
  2583.         // line 2199
  2584.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("js/pwa-install.js"), "html", null, true);
  2585.         yield "\"></script>
  2587. \t\t<script>
  2588. \t\t\t// Charger les compteurs au chargement de la page
  2589. document.addEventListener('DOMContentLoaded', function () {
  2590. ";
  2591.         // line 2204
  2592.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 2204)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2593.             // line 2205
  2594.             yield "loadNotificationCount();
  2595. // Délai pour s'assurer que la session est bien établie après connexion
  2596. setTimeout(function () {
  2597. loadComparisonCount();
  2598. }, 500);";
  2599.         }
  2600.         // line 2210
  2601.         yield "
  2602. // Gérer le bouton de recherche mobile
  2603. const searchMobileBtn = document.getElementById('searchMobileBtn');
  2604. if (searchMobileBtn) {
  2605. searchMobileBtn.addEventListener('click', function (e) {
  2606. e.preventDefault();
  2607. // Utiliser le même comportement que le bouton desktop
  2608. const searchBox = document.getElementById('search_input_box');
  2609. if (searchBox) {
  2610. searchBox.style.display = 'block';
  2611. const searchInput = document.getElementById('search_input');
  2612. if (searchInput) {
  2613. setTimeout(() => searchInput.focus(), 100);
  2614. }
  2615. }
  2616. });
  2617. }
  2618. });
  2620. function loadNotificationCount() {
  2621. ";
  2622.         // line 2230
  2623.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 2230)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2624.             // line 2231
  2625.             yield "fetch('";
  2626.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("api_notifications_count");
  2627.             yield "').then(response => {
  2628. if (!response.ok) {
  2629. throw new Error('Erreur HTTP: ' + response.status);
  2630. }
  2631. return response.json();
  2632. }).then(data => {
  2633. const count = data.count || 0;
  2635. // Mettre à jour tous les badges de notification
  2636. const badges = [document.getElementById('notificationBadge'), document.getElementById('notificationBadgeMobile'), document.querySelector('.notification-badge')].filter(badge => badge !== null);
  2638. badges.forEach(badge => {
  2639. if (count > 0) {
  2640. badge.textContent = count;
  2641. badge.style.display = 'flex';
  2642. badge.style.color = 'white';
  2643. badge.style.backgroundColor = '#dc3545';
  2644. } else {
  2645. badge.style.display = 'none';
  2646. }
  2647. });
  2649. // Si on est sur la page des notifications, mettre à jour aussi le contenu de la page
  2650. if (typeof updateNotificationPageContent === 'function') {
  2651. updateNotificationPageContent(count);
  2652. }
  2653. }).catch(error => {
  2654. console.error('Erreur lors du chargement du compteur de notifications:', error);
  2655. });";
  2656.         }
  2657.         // line 2260
  2658.         yield "}
  2660. // Exposer la fonction globalement pour qu'elle puisse être appelée depuis d'autres pages
  2661. window.loadNotificationCount = loadNotificationCount;
  2663. // Recharger le compteur toutes les 30 secondes pour garder les données à jour
  2664. ";
  2665.         // line 2266
  2666.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 2266)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2667.             // line 2267
  2668.             yield "setInterval(function () {
  2669. loadNotificationCount();
  2670. }, 30000);";
  2671.         }
  2672.         // line 2269
  2673.         yield "function loadComparisonCount() {
  2674. ";
  2675.         // line 2270
  2676.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 2270)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2677.             // line 2271
  2678.             yield "// Ne pas appeler l'API si on est sur une page d'erreur ou de redirection
  2679. if (window.location.pathname.includes('/api/') || window.location.pathname.includes('/login')) {
  2680. return;
  2681. }
  2683. // Utiliser un try-catch pour éviter toute redirection
  2684. try {
  2685. fetch('";
  2686.             // line 2278
  2687.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_api_comparison_count");
  2688.             yield "', {
  2689. method: 'GET',
  2690. headers: {
  2691. 'X-Requested-With': 'XMLHttpRequest',
  2692. 'Accept': 'application/json'
  2693. },
  2694. credentials: 'same-origin',
  2695. redirect: 'error' // Empêcher les redirections automatiques
  2696. }).then(response => { // Vérifier si la réponse est OK
  2697. if (!response.ok) { // Si c'est une redirection (301, 302, etc.) ou une erreur d'authentification, ignorer silencieusement
  2698. if (response.status >= 300 && response.status < 400) {
  2699. console.warn('Redirection détectée, arrêt de la requête');
  2700. return null;
  2701. }
  2702. if (response.status === 401 || response.status === 403) {
  2703. console.warn('Utilisateur non authentifié pour la comparaison');
  2704. return null;
  2705. }
  2706. // Pour les autres erreurs, throw pour être capturé par catch
  2707. throw new Error('Erreur HTTP: ' + response.status);
  2708. }
  2710. // Vérifier que c'est bien du JSON
  2711. const contentType = response.headers.get('content-type');
  2712. if (! contentType || ! contentType.includes('application/json')) { // Si ce n'est pas du JSON, c'est probablement une redirection HTML
  2713. console.warn('La réponse n\\'est pas du JSON, probable redirection');
  2714. return null;
  2715. }
  2717. return response.json();
  2718. }).then(data => { // Si data est null (redirection ou erreur), ne rien faire
  2719. if (!data || typeof data.count === 'undefined') {
  2720. return;
  2721. }
  2723. // Mettre à jour les badges desktop et mobile
  2724. const badges = [document.getElementById('comparisonBadge'), document.getElementById('comparisonBadgeMobile')];
  2725. badges.forEach(badge => {
  2726. if (badge) {
  2727. if (data.count > 0) {
  2728. badge.textContent = data.count;
  2729. badge.style.display = 'flex';
  2730. } else {
  2731. badge.style.display = 'none';
  2732. }
  2733. }
  2734. });
  2735. }).catch(error => { // Ne pas afficher d'erreur si c'est juste une absence d'authentification ou une redirection
  2736. if (error.message && !error.message.includes('401') && !error.message.includes('403') && !error.message.includes('redirect')) {
  2737. console.error('Erreur lors du chargement du compteur de comparaison:', error);
  2738. }
  2739. // Empêcher toute redirection vers l'URL de l'API
  2740. return false;
  2741. });
  2742. } catch (e) { // Capturer toute erreur qui pourrait causer une redirection
  2743. console.warn('Erreur lors de l\\'appel à l\\'API de comparaison:', e);
  2744. }
  2745. ";
  2746.         }
  2747.         // line 2336
  2748.         yield "}
  2750. // Fonction globale pour gérer la comparaison
  2751. function toggleComparison(productId, element) {
  2752. if (! element) {
  2753. element = document.querySelector(`.comparison-btn[data-product-id=\"\${productId}\"]`);
  2754. }
  2756. if (! element) {
  2757. console.error('Bouton de comparaison non trouvé pour le produit', productId);
  2758. return;
  2759. }
  2761. const originalHtml = element.innerHTML;
  2762. // Désactiver le bouton/lien
  2763. if (element.tagName === 'BUTTON') {
  2764. element.disabled = true;
  2765. } else {
  2766. element.style.pointerEvents = 'none';
  2767. element.style.opacity = '0.6';
  2768. } element.innerHTML = '<span class=\"spinner-border spinner-border-sm\"></span>';
  2770. // Vérifier d'abord si le produit est déjà en comparaison
  2771. let isInComparison = false;
  2772. fetch(`/api/comparison/status/\${productId}`).then(response => response.json()).then(data => {
  2773. isInComparison = data.inComparison;
  2774. const url = isInComparison ? `/api/comparison/remove/\${productId}` : `/api/comparison/add/\${productId}`;
  2776. return fetch(url, {
  2777. method: 'POST',
  2778. headers: {
  2779. 'Content-Type': 'application/json',
  2780. 'X-Requested-With': 'XMLHttpRequest'
  2781. }
  2782. });
  2783. }).then(response => response.json()).then(data => {
  2784. if (data.success) { // Mettre à jour le compteur
  2785. loadComparisonCount();
  2787. // Mettre à jour l'apparence du bouton
  2788. if (element) { // Inverser l'état (car on vient de le changer)
  2789. const newState = ! isInComparison;
  2791. // Restaurer le HTML original puis mettre à jour
  2792. element.innerHTML = originalHtml;
  2794. if (newState) {
  2795. element.classList.add('active');
  2796. // Mettre à jour le texte pour les deux types de boutons
  2797. const textEl = element.querySelector('.comparison-text') || element.querySelector('.hover-text') || element.querySelector('p.hover-text');
  2798. if (textEl) 
  2799. textEl.textContent = 'En comparaison';
  2803. // Mettre à jour l'icône si nécessaire (chercher dans span ou i)
  2804. const iconEl = element.querySelector('.lnr-sync, span.lnr-sync, [class*=\"sync\"], i[class*=\"sync\"]');
  2805. if (iconEl) {
  2806. iconEl.style.color = '#28a745';
  2807. iconEl.classList.add('active');
  2808. }
  2809. } else {
  2810. element.classList.remove('active');
  2811. const textEl = element.querySelector('.comparison-text') || element.querySelector('.hover-text') || element.querySelector('p.hover-text');
  2812. if (textEl) 
  2813. textEl.textContent = 'Comparer';
  2817. // Restaurer la couleur de l'icône
  2818. const iconEl = element.querySelector('.lnr-sync, span.lnr-sync, [class*=\"sync\"], i[class*=\"sync\"]');
  2819. if (iconEl) {
  2820. iconEl.style.color = '';
  2821. iconEl.classList.remove('active');
  2822. }
  2823. }
  2824. }
  2826. // Afficher une notification
  2827. showNotification(data.message, 'success');
  2828. } else {
  2829. showNotification(data.message, 'error');
  2830. if (element) {
  2831. element.innerHTML = originalHtml;
  2832. }
  2833. }
  2834. }).catch(error => {
  2835. console.error('Erreur:', error);
  2836. showNotification('Une erreur est survenue', 'error');
  2837. if (element) {
  2838. element.innerHTML = originalHtml;
  2839. }
  2840. }). finally(() => {
  2841. if (element) {
  2842. if (element.tagName === 'BUTTON') {
  2843. element.disabled = false;
  2844. } else {
  2845. element.style.pointerEvents = '';
  2846. element.style.opacity = '';
  2847. }
  2848. }
  2849. });
  2850. }
  2852. // Fonction globale pour gérer les favoris
  2853. function toggleWishlist(productId, element) {
  2854. if (! element) {
  2855. element = document.querySelector(`.wishlist-btn[data-product-id=\"\${productId}\"]`);
  2856. }
  2858. if (! element) {
  2859. console.error('Bouton de wishlist non trouvé pour le produit', productId);
  2860. return;
  2861. }
  2863. const originalHtml = element.innerHTML;
  2864. // Désactiver le bouton/lien
  2865. if (element.tagName === 'BUTTON') {
  2866. element.disabled = true;
  2867. } else {
  2868. element.style.pointerEvents = 'none';
  2869. element.style.opacity = '0.6';
  2870. } element.innerHTML = '<span class=\"spinner-border spinner-border-sm\"></span>';
  2872. // Vérifier d'abord si le produit est déjà en favoris
  2873. let isInWishlist = false;
  2874. fetch(`/api/wishlist/status/\${productId}`).then(response => response.json()).then(data => {
  2875. isInWishlist = data.inWishlist;
  2876. const url = isInWishlist ? `/api/wishlist/remove/\${productId}` : `/api/wishlist/add/\${productId}`;
  2878. return fetch(url, {
  2879. method: 'POST',
  2880. headers: {
  2881. 'Content-Type': 'application/json',
  2882. 'X-Requested-With': 'XMLHttpRequest'
  2883. }
  2884. });
  2885. }).then(response => response.json()).then(data => {
  2886. if (data.success) { // Mettre à jour l'apparence du bouton
  2887. if (element) { // Inverser l'état (car on vient de le changer)
  2888. const newState = ! isInWishlist;
  2890. // Restaurer le HTML original puis mettre à jour
  2891. element.innerHTML = originalHtml;
  2893. // Chercher l'icône dans span ou i
  2894. const icon = element.querySelector('span.lnr-heart, i.lnr-heart, [class*=\"lnr-heart\"]');
  2895. const text = element.querySelector('.wishlist-text') || element.querySelector('.hover-text') || element.querySelector('p.hover-text');
  2897. if (newState) {
  2898. if (icon) { // Pour les icônes linr, on change la classe
  2899. if (icon.classList.contains('lnr-heart')) {
  2900. icon.classList.remove('lnr-heart');
  2901. }
  2902. if (! icon.classList.contains('lnr-heart-filled')) {
  2903. icon.classList.add('lnr-heart-filled');
  2904. }
  2905. icon.style.color = '#dc3545';
  2906. }
  2907. element.classList.add('active');
  2908. if (text) 
  2909. text.textContent = 'Dans favoris';
  2913. } else {
  2914. if (icon) { // Restaurer l'icône originale
  2915. if (icon.classList.contains('lnr-heart-filled')) {
  2916. icon.classList.remove('lnr-heart-filled');
  2917. }
  2918. if (! icon.classList.contains('lnr-heart')) {
  2919. icon.classList.add('lnr-heart');
  2920. }
  2921. icon.style.color = '';
  2922. }
  2923. element.classList.remove('active');
  2924. if (text) 
  2925. text.textContent = 'Favoris';
  2929. }
  2930. }
  2932. // Afficher une notification
  2933. showNotification(data.message, 'success');
  2935. // Si on est sur la page wishlist, recharger la page
  2936. if (window.location.pathname.includes('/account/wishlist')) {
  2937. setTimeout(() => location.reload(), 1000);
  2938. }
  2939. } else {
  2940. showNotification(data.message, 'error');
  2941. if (element) {
  2942. element.innerHTML = originalHtml;
  2943. }
  2944. }
  2945. }).catch(error => {
  2946. console.error('Erreur:', error);
  2947. showNotification('Une erreur est survenue', 'error');
  2948. if (element) {
  2949. element.innerHTML = originalHtml;
  2950. }
  2951. }). finally(() => {
  2952. if (element) {
  2953. if (element.tagName === 'BUTTON') {
  2954. element.disabled = false;
  2955. } else {
  2956. element.style.pointerEvents = '';
  2957. element.style.opacity = '';
  2958. }
  2959. }
  2960. });
  2961. }
  2963. // Fonction pour afficher des notifications
  2964. function showNotification(message, type = 'success') { // Créer l'élément de notification
  2965. const notification = document.createElement('div');
  2966. notification.className = `alert alert-\${
  2967. type === 'success' ? 'success' : 'danger'
  2968. } alert-dismissible fade show position-fixed`;
  2969. notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);';
  2970. notification.innerHTML = `
  2971.             \${message}
  2972.             <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\"></button>
  2973.         `;
  2975. document.body.appendChild(notification);
  2977. // Supprimer automatiquement après 3 secondes
  2978. setTimeout(() => {
  2979. notification.remove();
  2980. }, 3000);
  2981. }
  2983. // Initialiser les alertes Bootstrap 5 pour la fermeture
  2984. document.addEventListener('DOMContentLoaded', function () { // S'assurer que les alertes peuvent être fermées
  2985. const alertCloseButtons = document.querySelectorAll('.flash-message .btn-close');
  2986. alertCloseButtons.forEach(function (button) {
  2987. button.addEventListener('click', function () {
  2988. const alert = this.closest('.alert');
  2989. if (alert) {
  2990. alert.classList.remove('show');
  2991. setTimeout(function () {
  2992. alert.remove();
  2993. }, 150);
  2994. }
  2995. });
  2996. });
  2998. // Charger les statuts initiaux des produits
  2999. ";
  3000.         // line 2587
  3001.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 2587)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3002.             // line 2588
  3003.             yield "// Charger les statuts de comparaison pour tous les produits visibles
  3004. document.querySelectorAll('.comparison-btn[data-product-id]').forEach(btn => {
  3005. const productId = btn.dataset.productId;
  3006. fetch(`/api/comparison/status/\${productId}`).then(response => response.json()).then(data => {
  3007. if (data.inComparison) {
  3008. btn.classList.add('active');
  3009. // Mettre à jour le texte pour les deux types de boutons
  3010. const textEl = btn.querySelector('.comparison-text') || btn.querySelector('.hover-text') || btn.querySelector('p.hover-text');
  3011. if (textEl) 
  3012. textEl.textContent = 'En comparaison';
  3016. // Mettre à jour l'icône si nécessaire
  3017. const iconEl = btn.querySelector('.lnr-sync, [class*=\"sync\"]');
  3018. if (iconEl) 
  3019. iconEl.style.color = '#28a745';
  3023. }
  3024. }).catch(() => {});
  3025. });
  3027. // Charger les statuts de wishlist pour tous les produits visibles
  3028. document.querySelectorAll('.wishlist-btn[data-product-id]').forEach(btn => {
  3029. const productId = btn.dataset.productId;
  3030. fetch(`/api/wishlist/status/\${productId}`).then(response => response.json()).then(data => {
  3031. if (data.inWishlist) {
  3032. // Chercher l'icône dans span ou i
  3033. const icon = btn.querySelector('span.lnr-heart, i.lnr-heart, [class*=\"lnr-heart\"]');
  3034. if (icon) {
  3035. icon.classList.remove('lnr-heart');
  3036. icon.classList.add('lnr-heart');
  3037. icon.style.color = '#ffa200';
  3038. }
  3039. // Mettre à jour le texte pour les deux types de boutons
  3040. const textEl = btn.querySelector('.wishlist-text') || btn.querySelector('.hover-text') || btn.querySelector('p.hover-text');
  3041. if (textEl) 
  3042. textEl.textContent = 'favoris';
  3046. }
  3047. }).catch(() => {});
  3048. });
  3050. // Charger le compteur de comparaison
  3051. loadComparisonCount();";
  3052.         }
  3053.         // line 2637
  3054.         yield "});
  3055. \t\t</script>
  3057. \t\t<script>
  3058. \t\t\t// Loader global pour tous les boutons de formulaire
  3059. document.addEventListener('DOMContentLoaded', function () { // Intercepter tous les formulaires
  3060. const forms = document.querySelectorAll('form');
  3062. forms.forEach(function (form) {
  3063. form.addEventListener('submit', function (e) {
  3064. const submitButtons = form.querySelectorAll('button[type=\"submit\"], input[type=\"submit\"], button:not([type])');
  3066. submitButtons.forEach(function (button) { // Vérifier si le bouton n'est pas déjà désactivé
  3067. if (! button.disabled && ! button.classList.contains('loading')) {
  3068. button.classList.add('loading');
  3069. button.disabled = true;
  3071. // Sauvegarder le texte original
  3072. const originalText = button.innerHTML;
  3073. button.setAttribute('data-original-text', originalText);
  3075. // Ajouter le loader
  3076. button.innerHTML = '<span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>Envoi...';
  3078. // Si le formulaire n'est pas valide, réactiver le bouton après 1 seconde
  3079. setTimeout(function () {
  3080. if (! form.checkValidity()) {
  3081. button.classList.remove('loading');
  3082. button.disabled = false;
  3083. button.innerHTML = originalText;
  3084. }
  3085. }, 1000);
  3086. }
  3087. });
  3088. });
  3089. });
  3091. // Pour les boutons qui déclenchent des actions AJAX
  3092. const ajaxButtons = document.querySelectorAll('[data-ajax], .ajax-submit, button[data-submit]');
  3094. ajaxButtons.forEach(function (button) {
  3095. button.addEventListener('click', function (e) {
  3096. if (this.disabled || this.classList.contains('loading')) {
  3097. e.preventDefault();
  3098. return false;
  3099. }
  3101. this.classList.add('loading');
  3102. this.disabled = true;
  3104. const originalText = this.innerHTML;
  3105. this.setAttribute('data-original-text', originalText);
  3107. this.innerHTML = '<span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>Chargement...';
  3108. });
  3109. });
  3111. // Gestionnaire spécifique pour le formulaire de newsletter
  3112. const newsletterForm = document.querySelector('.footer-newsletter-form');
  3113. if (newsletterForm) {
  3114. newsletterForm.addEventListener('submit', function (e) {
  3115. const submitBtn = this.querySelector('.newsletter-btn');
  3116. if (submitBtn && ! submitBtn.disabled) {
  3117. submitBtn.classList.add('loading');
  3118. submitBtn.disabled = true;
  3120. // Afficher le loader et masquer l'icône
  3121. const icon = submitBtn.querySelector('.newsletter-btn-icon');
  3122. const loader = submitBtn.querySelector('.newsletter-btn-loader');
  3123. if (icon) 
  3124. icon.style.display = 'none';
  3128. if (loader) 
  3129. loader.style.display = 'flex';
  3133. // Réactiver le bouton après 5 secondes au cas où la requête échoue silencieusement
  3134. setTimeout(function () {
  3135. if (submitBtn.classList.contains('loading')) {
  3136. submitBtn.classList.remove('loading');
  3137. submitBtn.disabled = false;
  3138. if (icon) 
  3139. icon.style.display = 'flex';
  3143. if (loader) 
  3144. loader.style.display = 'none';
  3148. }
  3149. }, 5000);
  3150. }
  3151. });
  3153. // Gérer la réponse du formulaire (si AJAX)
  3154. newsletterForm.addEventListener('submit', function (e) {
  3155. // Si le formulaire est soumis normalement (non-AJAX), le navigateur gère la réponse
  3156. // Sinon, on peut intercepter pour gérer la réponse AJAX ici
  3157. });
  3158. }
  3159. });
  3161. // CSS pour le spinner
  3162. const style = document.createElement('style');
  3163. style.textContent = `
  3164.     .spinner-border-sm {
  3165.         width: 1rem;
  3166.         height: 1rem;
  3167.         border-width: 0.15em;
  3168.     }
  3169.     .spinner-border {
  3170.         display: inline-block;
  3171.         width: 1rem;
  3172.         height: 1rem;
  3173.         vertical-align: text-bottom;
  3174.         border: 0.15em solid currentColor;
  3175.         border-right-color: transparent;
  3176.         border-radius: 50%;
  3177.         animation: spinner-border 0.75s linear infinite;
  3178.     }
  3179.     @keyframes spinner-border {
  3180.         to { transform: rotate(360deg); }
  3181.     }
  3182.     button.loading {
  3183.         opacity: 0.7;
  3184.         cursor: not-allowed !important;
  3185.     }
  3186. `;
  3187. document.head.appendChild(style);
  3188. \t\t</script>
  3190. \t\t<!-- Cart Modal -->
  3191. \t\t<div id=\"ebay-cart-modal\" class=\"ebay-cart-modal-overlay\" style=\"display: none;\" data-url=\"\">
  3192. \t\t\t<div class=\"ebay-cart-modal\">
  3193. \t\t\t\t<div class=\"ebay-modal-header\">
  3194. \t\t\t\t\t<h3>
  3195. \t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  3196. \t\t\t\t\t\tAjouté au panier !</h3>
  3197. \t\t\t\t\t<button class=\"ebay-modal-close\" onclick=\"closeEbayCartModal()\">&times;</button>
  3198. \t\t\t\t</div>
  3200. \t\t\t\t<div class=\"ebay-modal-content\">
  3201. \t\t\t\t\t<div class=\"ebay-product-info\">
  3202. \t\t\t\t\t\t<div class=\"ebay-product-image\">
  3203. \t\t\t\t\t\t\t<img id=\"ebay-modal-product-image\" src=\"\" alt=\"Produit\"/>
  3204. \t\t\t\t\t\t</div>
  3205. \t\t\t\t\t\t<div class=\"ebay-product-details\">
  3206. \t\t\t\t\t\t\t<h4 id=\"ebay-modal-product-name\">Nom du produit</h4>
  3207. \t\t\t\t\t\t\t<div class=\"ebay-product-price\" id=\"ebay-modal-product-price\">Prix</div>
  3208. \t\t\t\t\t\t\t<div class=\"ebay-product-quantity\">
  3209. \t\t\t\t\t\t\t\t<span>Quantité:
  3210. \t\t\t\t\t\t\t\t</span>
  3211. \t\t\t\t\t\t\t\t<span id=\"ebay-modal-product-quantity\">1</span>
  3212. \t\t\t\t\t\t\t</div>
  3213. \t\t\t\t\t\t</div>
  3214. \t\t\t\t\t</div>
  3216. \t\t\t\t\t<!-- Recommendations Section -->
  3217. \t\t\t\t\t<div class=\"ebay-recommendations\" style=\"display: none;\">
  3218. \t\t\t\t\t\t<h4>Les clients ont aussi acheté :</h4>
  3219. \t\t\t\t\t\t<div
  3220. \t\t\t\t\t\t\tclass=\"ebay-recommendations-grid\" id=\"ebay-modal-recommendations\"><!-- Recommendations will be injected here -->
  3221. \t\t\t\t\t\t</div>
  3222. \t\t\t\t\t</div>
  3224. \t\t\t\t\t<div class=\"ebay-modal-actions\">
  3225. \t\t\t\t\t\t<button class=\"ebay-btn-continue\" onclick=\"closeEbayCartModal()\">
  3226. \t\t\t\t\t\t\tContinuer mes achats
  3227. \t\t\t\t\t\t</button>
  3228. \t\t\t\t\t\t<a href=\"";
  3229.         // line 2811
  3230.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_cart");
  3231.         yield "\" class=\"ebay-btn-view-cart\">
  3232. \t\t\t\t\t\t\tVoir mon panier
  3233. \t\t\t\t\t\t</a>
  3234. \t\t\t\t\t</div>
  3235. \t\t\t\t</div>
  3236. \t\t\t</div>
  3237. \t\t</div>
  3239. \t\t<script src=\"";
  3240.         // line 2819
  3241.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/js/cart-modal.js"), "html", null, true);
  3242.         yield "\"></script>
  3243. \t\t<script src=\"";
  3244.         // line 2820
  3245.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/js/notification-badge.js"), "html", null, true);
  3246.         yield "\"></script>
  3247. \t\t<script src=\"";
  3248.         // line 2821
  3249.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("js/dark-mode.js"), "html", null, true);
  3250.         yield "\"></script>
  3252. \t\t";
  3253.         // line 2823
  3254.         yield from $this->unwrap()->yieldBlock('javascripts', $context, $blocks);
  3255.         // line 2824
  3256.         yield "\t</body>
  3257. </html>
  3258. ";
  3259.         
  3260.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  3262.         
  3263.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  3265.         yield from [];
  3266.     }
  3268.     // line 40
  3269.     /**
  3270.      * @return iterable<null|scalar|\Stringable>
  3271.      */
  3272.     public function block_title(array $context, array $blocks = []): iterable
  3273.     {
  3274.         $macros = $this->macros;
  3275.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  3276.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  3278.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  3279.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  3281.         yield "MaketOu
  3282. \t\t\t";
  3283.         
  3284.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  3286.         
  3287.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  3289.         yield from [];
  3290.     }
  3292.     // line 1243
  3293.     /**
  3294.      * @return iterable<null|scalar|\Stringable>
  3295.      */
  3296.     public function block_stylesheets(array $context, array $blocks = []): iterable
  3297.     {
  3298.         $macros = $this->macros;
  3299.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  3300.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  3302.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  3303.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  3305.         // line 1244
  3306.         yield "\t\t\t";
  3307.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->env->getFunction('encore_entry_link_tags')->getCallable()("app"), "html", null, true);
  3308.         yield "
  3309. \t\t";
  3310.         
  3311.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  3313.         
  3314.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  3316.         yield from [];
  3317.     }
  3319.     // line 1500
  3320.     /**
  3321.      * @return iterable<null|scalar|\Stringable>
  3322.      */
  3323.     public function block_body(array $context, array $blocks = []): iterable
  3324.     {
  3325.         $macros = $this->macros;
  3326.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  3327.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  3329.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  3330.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  3332.         
  3333.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  3335.         
  3336.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  3338.         yield from [];
  3339.     }
  3341.     // line 2823
  3342.     /**
  3343.      * @return iterable<null|scalar|\Stringable>
  3344.      */
  3345.     public function block_javascripts(array $context, array $blocks = []): iterable
  3346.     {
  3347.         $macros = $this->macros;
  3348.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  3349.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripts"));
  3351.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  3352.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripts"));
  3354.         
  3355.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  3357.         
  3358.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  3360.         yield from [];
  3361.     }
  3363.     /**
  3364.      * @codeCoverageIgnore
  3365.      */
  3366.     public function getTemplateName(): string
  3367.     {
  3368.         return "base_home.html.twig";
  3369.     }
  3371.     /**
  3372.      * @codeCoverageIgnore
  3373.      */
  3374.     public function isTraitable(): bool
  3375.     {
  3376.         return false;
  3377.     }
  3379.     /**
  3380.      * @codeCoverageIgnore
  3381.      */
  3382.     public function getDebugInfo(): array
  3383.     {
  3384.         return array (  3342 => 2823,  3320 => 1500,  3306 => 1244,  3293 => 1243,  3269 => 40,  3256 => 2824,  3254 => 2823,  3249 => 2821,  3245 => 2820,  3241 => 2819,  3230 => 2811,  3054 => 2637,  3003 => 2588,  3001 => 2587,  2748 => 2336,  2687 => 2278,  2678 => 2271,  2676 => 2270,  2673 => 2269,  2668 => 2267,  2666 => 2266,  2658 => 2260,  2625 => 2231,  2623 => 2230,  2601 => 2210,  2594 => 2205,  2592 => 2204,  2584 => 2199,  2553 => 2171,  2543 => 2164,  2538 => 2162,  2534 => 2161,  2529 => 2159,  2525 => 2158,  2521 => 2157,  2517 => 2156,  2513 => 2155,  2509 => 2154,  2505 => 2153,  2476 => 2127,  2339 => 1993,  2301 => 1958,  2267 => 1927,  2203 => 1866,  2172 => 1838,  2138 => 1807,  2097 => 1769,  1949 => 1624,  1935 => 1613,  1928 => 1609,  1921 => 1605,  1914 => 1601,  1907 => 1597,  1893 => 1586,  1886 => 1582,  1879 => 1578,  1872 => 1574,  1862 => 1566,  1855 => 1562,  1848 => 1558,  1845 => 1557,  1838 => 1553,  1835 => 1552,  1833 => 1551,  1827 => 1548,  1820 => 1544,  1813 => 1540,  1772 => 1501,  1770 => 1500,  1764 => 1496,  1754 => 1492,  1750 => 1490,  1746 => 1489,  1743 => 1488,  1733 => 1484,  1729 => 1482,  1725 => 1481,  1722 => 1480,  1712 => 1476,  1708 => 1474,  1704 => 1473,  1701 => 1472,  1691 => 1468,  1687 => 1466,  1683 => 1465,  1671 => 1456,  1667 => 1455,  1659 => 1449,  1653 => 1445,  1651 => 1444,  1644 => 1440,  1640 => 1439,  1630 => 1431,  1621 => 1426,  1612 => 1421,  1610 => 1420,  1599 => 1413,  1591 => 1408,  1583 => 1404,  1581 => 1403,  1571 => 1400,  1562 => 1394,  1556 => 1393,  1551 => 1391,  1545 => 1390,  1540 => 1388,  1534 => 1387,  1529 => 1385,  1523 => 1384,  1509 => 1375,  1497 => 1365,  1493 => 1364,  1373 => 1246,  1371 => 1243,  194 => 68,  188 => 64,  184 => 63,  180 => 62,  176 => 61,  172 => 60,  168 => 59,  164 => 58,  160 => 57,  156 => 56,  152 => 55,  148 => 54,  144 => 53,  140 => 52,  136 => 51,  132 => 50,  128 => 49,  124 => 48,  120 => 47,  113 => 42,  111 => 40,  93 => 25,  86 => 21,  81 => 19,  77 => 18,  73 => 17,  67 => 14,  52 => 1,);
  3385.     }
  3387.     public function getSourceContext(): Source
  3388.     {
  3389.         return new Source("<!DOCTYPE html>
  3390. <html lang=\"fr\" class=\"no-js\">
  3392. \t<head>
  3393. \t\t<!-- Mobile Specific Meta -->
  3394. \t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no\">
  3395. \t\t<meta name=\"mobile-web-app-capable\" content=\"yes\">
  3396. \t\t<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">
  3397. \t\t<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"default\">
  3398. \t\t<meta name=\"apple-mobile-web-app-title\" content=\"MaketOu\">
  3399. \t\t<meta name=\"theme-color\" content=\"#ffa200\">
  3400. \t\t<meta name=\"msapplication-TileColor\" content=\"#ffa200\">
  3401. \t\t<meta
  3402. \t\tname=\"msapplication-config\" content=\"{{ asset('favicon/browserconfig.xml') }}\">
  3404. \t\t<!-- Favicon-->
  3405. \t\t<link rel=\"shortcut icon\" href=\"{{ asset('favicon/favicon-16x16.png') }}\">
  3406. \t\t<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"{{ asset('favicon/apple-touch-icon.png') }}\">
  3407. \t\t<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"{{ asset('favicon/favicon-32x32.png') }}\">
  3408. \t\t<link
  3409. \t\trel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"{{ asset('favicon/favicon-16x16.png') }}\">
  3411. \t\t<!-- PWA Manifest -->
  3412. \t\t<link
  3413. \t\trel=\"manifest\" href=\"{{ asset('manifest.json') }}\">
  3414. \t\t<!-- Author Meta -->
  3415. \t\t<meta
  3416. \t\tname=\"author\" content=\"Foulgor Tech\">
  3417. \t\t<!-- Meta Description -->
  3418. \t\t<meta
  3419. \t\tname=\"description\" content=\"\">
  3420. \t\t<!-- Meta Keyword -->
  3421. \t\t<meta
  3422. \t\tname=\"keywords\" content=\"\">
  3423. \t\t<!-- meta character set -->
  3424. \t\t<meta
  3425. \t\tcharset=\"UTF-8\">
  3426. \t\t<!-- Site Title -->
  3427. \t\t<title>
  3428. \t\t\t{% block title %}MaketOu
  3429. \t\t\t{% endblock %}
  3430. \t\t</title>
  3431. \t\t<!--
  3432. \t\t\t\t\t\t        CSS
  3433. \t\t\t\t\t\t        ============================================= -->
  3434. \t\t<link rel=\"stylesheet\" href=\"https://unpkg.com/dropzone@5/dist/min/dropzone.min.css\"/>
  3435. \t\t<link rel=\"stylesheet\" href=\"{{ asset('ui/css/linearicons.css') }}\">
  3436. \t\t<link rel=\"stylesheet\" href=\"{{ asset('ui/css/font-awesome.min.css') }}\">
  3437. \t\t<link rel=\"stylesheet\" href=\"{{ asset('ui/css/themify-icons.css') }}\">
  3438. \t\t<link rel=\"stylesheet\" href=\"{{ asset('ui/css/bootstrap.css') }}\">
  3439. \t\t<link rel=\"stylesheet\" href=\"{{ asset('ui/css/owl.carousel.css') }}\">
  3440. \t\t<link rel=\"stylesheet\" href=\"{{ asset('ui/css/nice-select.css') }}\">
  3441. \t\t<link rel=\"stylesheet\" href=\"{{ asset('ui/css/nouislider.min.css') }}\">
  3442. \t\t<link rel=\"stylesheet\" href=\"{{ asset('ui/css/ion.rangeSlider.css') }}\"/>
  3443. \t\t<link rel=\"stylesheet\" href=\"{{ asset('ui/css/ion.rangeSlider.skinFlat.css') }}\"/>
  3444. \t\t<link rel=\"stylesheet\" href=\"{{ asset('ui/css/magnific-popup.css') }}\">
  3445. \t\t<link rel=\"stylesheet\" href=\"{{ asset('ui/css/main.css') }}\">
  3446. \t\t<link rel=\"stylesheet\" href=\"{{ asset('ui/css/cart-modal.css') }}\">
  3447. \t\t<link rel=\"stylesheet\" href=\"{{ asset('ui/css/buttons-unified.css') }}\">
  3448. \t\t<link rel=\"stylesheet\" href=\"{{ asset('ui/css/design-system.css') }}\">
  3449. \t\t<link rel=\"stylesheet\" href=\"{{ asset('ui/css/dark-mode-forced.css') }}\">
  3450. \t\t<link rel=\"stylesheet\" href=\"{{ asset('ui/css/dark-mode-complete.css') }}\">
  3451. \t\t<link rel=\"stylesheet\" href=\"{{ asset('ui/css/navbar-icons-enhanced.css') }}\">
  3452. \t\t<link rel=\"stylesheet\" href=\"{{ asset('ui/css/dark-mode-pages-specific.css') }}\">
  3453. \t\t<meta
  3454. \t\tcharset=\"UTF-8\">
  3455. \t\t{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
  3457. \t\t<style>
  3458. \t\t\t/* Styles pour l'icône de notification */
  3459. \t\t\t.notification-icon {
  3460. \t\t\t\tposition: relative;
  3461. \t\t\t\tdisplay: inline-block;
  3462. \t\t\t\tcolor: #333;
  3463. \t\t\t\ttext-decoration: none;
  3464. \t\t\t\ttransition: color 0.3s ease;
  3465. \t\t\t}
  3467. \t\t\t.notification-icon:hover {
  3468. \t\t\t\tcolor: #007bff;
  3469. \t\t\t}
  3471. \t\t\t.notification-badge {
  3472. \t\t\t\tposition: absolute;
  3473. \t\t\t\ttop: -4px;
  3474. \t\t\t\tright: -2px;
  3475. \t\t\t\tbackground: #dc3545 !important;
  3476. \t\t\t\tcolor: white !important;
  3477. \t\t\t\tborder-radius: 50%;
  3478. \t\t\t\twidth: 18px;
  3479. \t\t\t\theight: 18px;
  3480. \t\t\t\tfont-size: 8px !important;
  3481. \t\t\t\tdisplay: flex !important;
  3482. \t\t\t\talign-items: center !important;
  3483. \t\t\t\tjustify-content: center !important;
  3484. \t\t\t\tfont-weight: bold !important;
  3485. \t\t\t\tanimation: pulse 2s infinite;
  3486. \t\t\t\tz-index: 10;
  3487. \t\t\t\tline-height: 1 !important;
  3488. \t\t\t}
  3490. \t\t\t/* Forcer le texte en blanc pour tous les éléments du badge - avec spécificité maximale */
  3491. \t\t\t.notification-badge,
  3492. \t\t\t.notification-badge.text-white,
  3493. \t\t\t.notification-badge *,
  3494. \t\t\t#notificationBadge,
  3495. \t\t\t#notificationBadge.text-white,
  3496. \t\t\t#notificationBadge *,
  3497. \t\t\tspan.notification-badge,
  3498. \t\t\tspan.notification-badge.text-white,
  3499. \t\t\tspan#notificationBadge,
  3500. \t\t\tspan#notificationBadge.text-white {
  3501. \t\t\t\tcolor: white !important;
  3502. \t\t\t\ttext-color: white !important;
  3503. \t\t\t\t-webkit-text-fill-color: white !important;
  3504. \t\t\t}
  3506. \t\t\t/* S'assurer que le contenu texte est bien en blanc */
  3507. \t\t\t.notification-badge::before,
  3508. \t\t\t.notification-badge::after {
  3509. \t\t\t\tcolor: white !important;
  3510. \t\t\t}
  3512. \t\t\t/* Forcer la couleur pour tous les sélecteurs possibles avec spécificité maximale */
  3513. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .notification-icon .notification-badge,
  3514. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .notification-icon .notification-badge.text-white,
  3515. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .notification-icon span.notification-badge,
  3516. \t\t\t.notification-icon .notification-badge,
  3517. \t\t\t.notification-icon .notification-badge.text-white,
  3518. \t\t\t.notification-icon span.notification-badge,
  3519. \t\t\ta.notification-icon .notification-badge,
  3520. \t\t\ta.notification-icon span.notification-badge {
  3521. \t\t\t\tcolor: white !important;
  3522. \t\t\t\ttext-color: white !important;
  3523. \t\t\t\t-webkit-text-fill-color: white !important;
  3524. \t\t\t}
  3526. \t\t\t/* Forcer la couleur pour tous les enfants directs */
  3527. \t\t\t.notification-icon > .notification-badge,
  3528. \t\t\t.notification-icon > span.notification-badge {
  3529. \t\t\t\tcolor: white !important;
  3530. \t\t\t}
  3532. \t\t\t@keyframes pulse {
  3533. \t\t\t\t0% {
  3534. \t\t\t\t\ttransform: scale(1);
  3535. \t\t\t\t}
  3536. \t\t\t\t50% {
  3537. \t\t\t\t\ttransform: scale(1.1);
  3538. \t\t\t\t}
  3539. \t\t\t\t100% {
  3540. \t\t\t\t\ttransform: scale(1);
  3541. \t\t\t\t}
  3542. \t\t\t}
  3544. \t\t\t.notification-icon:hover .notification-badge {
  3545. \t\t\t\tanimation: none;
  3546. \t\t\t}
  3548. \t\t\t/* Container pour les icônes - toujours alignées horizontalement */
  3549. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper {
  3550. \t\t\t\tdisplay: flex !important;
  3551. \t\t\t\tflex-direction: row !important;
  3552. \t\t\t\talign-items: center !important;
  3553. \t\t\t\tjustify-content: center !important;
  3554. \t\t\t\tgap: 15px !important;
  3555. \t\t\t\tlist-style: none !important;
  3556. \t\t\t\tmargin: 0 !important;
  3557. \t\t\t\tpadding: 0 !important;
  3558. \t\t\t\twidth: auto !important;
  3559. \t\t\t}
  3561. \t\t\t/* Surcharger les styles existants pour les li contenant le wrapper */
  3562. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right li:has(.navbar-icons-wrapper) {
  3563. \t\t\t\tmargin-left: 0 !important;
  3564. \t\t\t\tmargin-right: 0 !important;
  3565. \t\t\t\tdisplay: flex !important;
  3566. \t\t\t\talign-items: center !important;
  3567. \t\t\t\tjustify-content: center !important;
  3568. \t\t\t}
  3570. \t\t\t/* Styles pour les icônes */
  3571. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .cart,
  3572. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .notification-icon,
  3573. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .comparison-icon,
  3574. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .dark-mode-toggle,
  3575. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .search {
  3576. \t\t\t\tdisplay: flex !important;
  3577. \t\t\t\talign-items: center !important;
  3578. \t\t\t\tjustify-content: center !important;
  3579. \t\t\t\twidth: 40px !important;
  3580. \t\t\t\theight: 40px !important;
  3581. \t\t\t\tmin-width: 40px !important;
  3582. \t\t\t\tmin-height: 40px !important;
  3583. \t\t\t\tcolor: #333 !important;
  3584. \t\t\t\ttext-decoration: none !important;
  3585. \t\t\t\ttransition: all 0.3s ease !important;
  3586. \t\t\t\tborder-radius: 50% !important;
  3587. \t\t\t\tposition: relative !important;
  3588. \t\t\t\tmargin: 0 !important;
  3589. \t\t\t\tpadding: 0 !important;
  3590. \t\t\t}
  3593. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .cart:hover,
  3594. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .notification-icon:hover,
  3595. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .comparison-icon:hover,
  3596. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .dark-mode-toggle:hover,
  3597. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .search:hover {
  3598. \t\t\t\tbackground-color: #f0f0f0 !important;
  3599. \t\t\t\tcolor: #ffa200 !important;
  3600. \t\t\t\ttransform: scale(1.1) !important;
  3601. \t\t\t}
  3603. \t\t\t/* Surcharger le line-height de main.css */
  3604. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .cart span,
  3605. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .notification-icon span,
  3606. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .search span {
  3607. \t\t\t\tfont-size: 18px !important;
  3608. \t\t\t\tline-height: 1 !important;
  3609. \t\t\t\tdisplay: flex !important;
  3610. \t\t\t\talign-items: center !important;
  3611. \t\t\t\tjustify-content: center !important;
  3612. \t\t\t\tcolor: inherit !important;
  3613. \t\t\t\tfont-weight: normal !important;
  3614. \t\t\t}
  3616. \t\t\t/* Icône de comparaison en noir comme le panier */
  3617. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .comparison-icon {
  3618. \t\t\t\tcolor: #333 !important;
  3619. \t\t\t}
  3621. \t\t\t/* L'icône elle-même (lnr-sync) doit être noire, mais pas le badge */
  3622. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .comparison-icon > span.lnr-sync,
  3623. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .comparison-icon span:not(.comparison-badge) {
  3624. \t\t\t\tcolor: #333 !important;
  3625. \t\t\t\tfont-size: 18px !important;
  3626. \t\t\t\tline-height: 1 !important;
  3627. \t\t\t\tdisplay: flex !important;
  3628. \t\t\t\talign-items: center !important;
  3629. \t\t\t\tjustify-content: center !important;
  3630. \t\t\t\tfont-weight: normal !important;
  3631. \t\t\t}
  3633. \t\t\t/* Le badge doit rester blanc */
  3634. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .comparison-icon .comparison-badge {
  3635. \t\t\t\tcolor: white !important;
  3636. \t\t\t}
  3638. \t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper .search {
  3639. \t\t\t\tbackground: transparent !important;
  3640. \t\t\t\tborder: 0 !important;
  3641. \t\t\t\tcursor: pointer !important;
  3642. \t\t\t\tpadding: 0 !important;
  3643. \t\t\t}
  3645. \t\t\t/* Alignement des icônes navbar sur mobile */
  3646. \t\t\t@media(max-width: 991.98px) {
  3647. \t\t\t\t/* Container navbar-right en colonne sur mobile */
  3648. \t\t\t\t.header_area .navbar .nav.navbar-nav.navbar-right {
  3649. \t\t\t\t\tdisplay: flex !important;
  3650. \t\t\t\t\tflex-direction: column !important;
  3651. \t\t\t\t\talign-items: center !important;
  3652. \t\t\t\t\tjustify-content: center !important;
  3653. \t\t\t\t\twidth: 100% !important;
  3654. \t\t\t\t\tgap: 0 !important;
  3655. \t\t\t\t\tmargin: 0 !important;
  3656. \t\t\t\t\tpadding: 10px 0 !important;
  3657. \t\t\t\t}
  3659. \t\t\t\t/* Le container d'icônes reste horizontal */
  3660. \t\t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .navbar-icons-wrapper {
  3661. \t\t\t\t\twidth: 100% !important;
  3662. \t\t\t\t\tjustify-content: center !important;
  3663. \t\t\t\t\tdisplay: flex !important;
  3664. \t\t\t\t\tflex-direction: row !important;
  3665. \t\t\t\t}
  3667. \t\t\t\t/* Le bouton compte en bas - pleine largeur */
  3668. \t\t\t\t.header_area .navbar .nav.navbar-nav.navbar-right li:last-child {
  3669. \t\t\t\t\twidth: 100% !important;
  3670. \t\t\t\t\tdisplay: flex !important;
  3671. \t\t\t\t\tjustify-content: center !important;
  3672. \t\t\t\t\tmargin-top: 12px !important;
  3673. \t\t\t\t\tpadding-top: 12px !important;
  3674. \t\t\t\t\tborder-top: 1px solid #e0e0e0 !important;
  3675. \t\t\t\t}
  3677. \t\t\t\t/* Bouton compte responsive */
  3678. \t\t\t\t.header_area .navbar .nav.navbar-nav.navbar-right .btn-account {
  3679. \t\t\t\t\twidth: 100%;
  3680. \t\t\t\t\tmax-width: 200px;
  3681. \t\t\t\t\tpadding: 10px 20px;
  3682. \t\t\t\t\tfont-size: 14px;
  3683. \t\t\t\t}
  3684. \t\t\t}
  3686. \t\t\t/* Styles pour les messages flash - Design moderne */
  3687. \t\t\t.flash-message {
  3688. \t\t\t\tanimation: slideInDownFlash 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  3689. \t\t\t\tposition: relative;
  3690. \t\t\t\toverflow: visible !important;
  3691. \t\t\t\tborder: none !important;
  3692. \t\t\t\tpadding: 16px 20px !important;
  3693. \t\t\t\tborder-radius: 12px !important;
  3694. \t\t\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  3695. \t\t\t\tdisplay: flex !important;
  3696. \t\t\t\talign-items: center;
  3697. \t\t\t\tgap: 12px;
  3698. \t\t\t\tmargin-bottom: 15px;
  3699. \t\t\t\tbackdrop-filter: blur(10px);
  3700. \t\t\t\ttransition: all 0.3s ease;
  3701. \t\t\t}
  3703. \t\t\t/* S'assurer que les icônes Font Awesome sont visibles */
  3704. \t\t\t.flash-message i.fa {
  3705. \t\t\t\tdisplay: inline-block !important;
  3706. \t\t\t\tvisibility: visible !important;
  3707. \t\t\t\topacity: 1 !important;
  3708. \t\t\t\twidth: auto !important;
  3709. \t\t\t\theight: auto !important;
  3710. \t\t\t\tfont-family: \"FontAwesome\" !important;
  3711. \t\t\t\tfont-style: normal !important;
  3712. \t\t\t\tfont-weight: normal !important;
  3713. \t\t\t\ttext-rendering: auto !important;
  3714. \t\t\t\t-webkit-font-smoothing: antialiased !important;
  3715. \t\t\t\t-moz-osx-font-smoothing: grayscale !important;
  3716. \t\t\t\tline-height: 1 !important;
  3717. \t\t\t\tflex-shrink: 0 !important;
  3718. \t\t\t}
  3720. \t\t\t/* Forcer l'affichage des pseudo-éléments Font Awesome */
  3721. \t\t\t.flash-message i.fa::before {
  3722. \t\t\t\tdisplay: inline-block !important;
  3723. \t\t\t\tvisibility: visible !important;
  3724. \t\t\t\topacity: 1 !important;
  3725. \t\t\t\tcontent: attr(data-icon) !important;
  3726. \t\t\t}
  3728. \t\t\t/* Styles spécifiques pour chaque icône */
  3729. \t\t\t.flash-message i.fa-check-circle::before {
  3730. \t\t\t\tcontent: \"\\f058\" !important;
  3731. \t\t\t}
  3733. \t\t\t.flash-message i.fa-exclamation-circle::before {
  3734. \t\t\t\tcontent: \"\\f06a\" !important;
  3735. \t\t\t}
  3737. \t\t\t.flash-message i.fa-exclamation-triangle::before {
  3738. \t\t\t\tcontent: \"\\f071\" !important;
  3739. \t\t\t}
  3741. \t\t\t.flash-message i.fa-info-circle::before {
  3742. \t\t\t\tcontent: \"\\f05a\" !important;
  3743. \t\t\t}
  3745. \t\t\t.flash-message:hover {
  3746. \t\t\t\tbox-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
  3747. \t\t\t\ttransform: translateY(-2px);
  3748. \t\t\t}
  3750. \t\t\t.flash-message::before {
  3751. \t\t\t\tcontent: '';
  3752. \t\t\t\tposition: absolute;
  3753. \t\t\t\tleft: 0;
  3754. \t\t\t\ttop: 0;
  3755. \t\t\t\tbottom: 0;
  3756. \t\t\t\twidth: 5px;
  3757. \t\t\t\tbackground: linear-gradient(180deg, currentColor 0%, rgba(255,255,255,0.3) 100%);
  3758. \t\t\t\tborder-radius: 12px 0 0 12px;
  3759. \t\t\t}
  3761. \t\t\t.flash-message.alert-success {
  3762. \t\t\t\tbackground: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%) !important;
  3763. \t\t\t\tcolor: #155724 !important;
  3764. \t\t\t\tborder-left: 5px solid #28a745 !important;
  3765. \t\t\t}
  3767. \t\t\t.flash-message.alert-success i.fa {
  3768. \t\t\t\tcolor: #28a745 !important;
  3769. \t\t\t\tfont-size: 1.3rem !important;
  3770. \t\t\t\tdisplay: inline-block !important;
  3771. \t\t\t\tmargin-right: 8px;
  3772. \t\t\t\tvertical-align: middle;
  3773. \t\t\t}
  3775. \t\t\t.flash-message.alert-danger {
  3776. \t\t\t\tbackground: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%) !important;
  3777. \t\t\t\tcolor: #721c24 !important;
  3778. \t\t\t\tborder-left: 5px solid #dc3545 !important;
  3779. \t\t\t}
  3781. \t\t\t.flash-message.alert-danger i.fa {
  3782. \t\t\t\tcolor: #dc3545 !important;
  3783. \t\t\t\tfont-size: 1.3rem !important;
  3784. \t\t\t\tdisplay: inline-block !important;
  3785. \t\t\t\tmargin-right: 8px;
  3786. \t\t\t\tvertical-align: middle;
  3787. \t\t\t}
  3789. \t\t\t.flash-message.alert-warning {
  3790. \t\t\t\tbackground: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
  3791. \t\t\t\tcolor: #856404 !important;
  3792. \t\t\t\tborder-left: 5px solid #ffc107 !important;
  3793. \t\t\t}
  3795. \t\t\t.flash-message.alert-warning i.fa {
  3796. \t\t\t\tcolor: #ffa200 !important;
  3797. \t\t\t\tfont-size: 1.3rem !important;
  3798. \t\t\t\tdisplay: inline-block !important;
  3799. \t\t\t\tmargin-right: 8px;
  3800. \t\t\t\tvertical-align: middle;
  3801. \t\t\t}
  3803. \t\t\t.flash-message.alert-info {
  3804. \t\t\t\tbackground: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%) !important;
  3805. \t\t\t\tcolor: #0c5460 !important;
  3806. \t\t\t\tborder-left: 5px solid #17a2b8 !important;
  3807. \t\t\t}
  3809. \t\t\t.flash-message.alert-info i.fa {
  3810. \t\t\t\tcolor: #17a2b8 !important;
  3811. \t\t\t\tfont-size: 1.3rem !important;
  3812. \t\t\t\tdisplay: inline-block !important;
  3813. \t\t\t\tmargin-right: 8px;
  3814. \t\t\t\tvertical-align: middle;
  3815. \t\t\t}
  3817. \t\t\t.flash-message strong {
  3818. \t\t\t\tflex: 1;
  3819. \t\t\t\tfont-weight: 600;
  3820. \t\t\t\tfont-size: 0.95rem;
  3821. \t\t\t\tline-height: 1.5;
  3822. \t\t\t}
  3824. \t\t\t.flash-message .btn-close {
  3825. \t\t\t\topacity: 0.7;
  3826. \t\t\t\tpadding: 8px !important;
  3827. \t\t\t\tmargin: -8px -8px -8px auto !important;
  3828. \t\t\t\ttransition: all 0.2s ease;
  3829. \t\t\t\tborder-radius: 50% !important;
  3830. \t\t\t\tbackground: rgba(0, 0, 0, 0.05) !important;
  3831. \t\t\t\twidth: 32px !important;
  3832. \t\t\t\theight: 32px !important;
  3833. \t\t\t\tdisplay: flex !important;
  3834. \t\t\t\talign-items: center !important;
  3835. \t\t\t\tjustify-content: center !important;
  3836. \t\t\t\tborder: none !important;
  3837. \t\t\t\tcursor: pointer !important;
  3838. \t\t\t\tposition: relative !important;
  3839. \t\t\t}
  3841. \t\t\t/* Ajouter une icône X visible dans le bouton */
  3842. \t\t\t.flash-message .btn-close::before {
  3843. \t\t\t\tcontent: '×' !important;
  3844. \t\t\t\tfont-size: 24px !important;
  3845. \t\t\t\tline-height: 1 !important;
  3846. \t\t\t\tcolor: currentColor !important;
  3847. \t\t\t\tfont-weight: bold !important;
  3848. \t\t\t\tdisplay: block !important;
  3849. \t\t\t\tposition: absolute !important;
  3850. \t\t\t\ttop: 50% !important;
  3851. \t\t\t\tleft: 50% !important;
  3852. \t\t\t\ttransform: translate(-50%, -50%) !important;
  3853. \t\t\t}
  3855. \t\t\t.flash-message .btn-close:hover {
  3856. \t\t\t\topacity: 1 !important;
  3857. \t\t\t\tbackground: rgba(0, 0, 0, 0.15) !important;
  3858. \t\t\t\ttransform: rotate(90deg) !important;
  3859. \t\t\t}
  3861. \t\t\t.flash-message .btn-close:hover::before {
  3862. \t\t\t\ttransform: translate(-50%, -50%) rotate(-90deg) !important;
  3863. \t\t\t}
  3865. \t\t\t@keyframes slideInDownFlash {
  3866. \t\t\t\tfrom {
  3867. \t\t\t\t\topacity: 0;
  3868. \t\t\t\t\ttransform: translateY(-30px) scale(0.95);
  3869. \t\t\t\t}
  3870. \t\t\t\tto {
  3871. \t\t\t\t\topacity: 1;
  3872. \t\t\t\t\ttransform: translateY(0) scale(1);
  3873. \t\t\t\t}
  3874. \t\t\t}
  3876. \t\t\t#flash-messages-container {
  3877. \t\t\t\tmargin-top: 20px;
  3878. \t\t\t\tmargin-bottom: 0;
  3879. \t\t\t}
  3881. \t\t\t@media(max-width: 768px) {
  3882. \t\t\t\t.flash-message {
  3883. \t\t\t\t\tpadding: 14px 16px !important;
  3884. \t\t\t\t\tfont-size: 0.9rem;
  3885. \t\t\t\t}
  3887. \t\t\t\t.flash-message i {
  3888. \t\t\t\t\tfont-size: 1.2rem !important;
  3889. \t\t\t\t}
  3890. \t\t\t}
  3892. \t\t\t/* Styles pour l'icône de comparaison */
  3893. \t\t\t.comparison-icon {
  3894. \t\t\t\tposition: relative;
  3895. \t\t\t\tdisplay: inline-block;
  3896. \t\t\t\tcolor: #333;
  3897. \t\t\t\ttext-decoration: none;
  3898. \t\t\t\ttransition: all 0.3s ease;
  3899. \t\t\t}
  3901. \t\t\t.comparison-icon:hover {
  3902. \t\t\t\tcolor: #ffa200;
  3903. \t\t\t}
  3905. \t\t\t.comparison-badge {
  3906. \t\t\t\tposition: absolute;
  3907. \t\t\t\ttop: -4px;
  3908. \t\t\t\tright: -2px;
  3909. \t\t\t\tbackground: #095ad3 !important;
  3910. \t\t\t\tcolor: white !important;
  3911. \t\t\t\tborder-radius: 50%;
  3912. \t\t\t\twidth: 18px;
  3913. \t\t\t\theight: 18px;
  3914. \t\t\t\tfont-size: 8px !important;
  3915. \t\t\t\tdisplay: flex !important;
  3916. \t\t\t\talign-items: center !important;
  3917. \t\t\t\tjustify-content: center !important;
  3918. \t\t\t\tfont-weight: bold !important;
  3919. \t\t\t\tanimation: pulse 2s infinite;
  3920. \t\t\t\tz-index: 10;
  3921. \t\t\t\tline-height: 1 !important;
  3922. \t\t\t}
  3924. \t\t\t/* Correction de l'alignement des boutons actifs dans prd-bottom */
  3925. \t\t\t/* Ne s'applique qu'aux boutons actifs pour éviter de casser le comportement hover */
  3926. \t\t\t.single-product .product-details .prd-bottom .social-info.active {
  3927. \t\t\t\tvertical-align: middle !important;
  3928. \t\t\t\tposition: relative !important;
  3929. \t\t\t\ttop: 0 !important;
  3930. \t\t\t\ttransform: none !important;
  3931. \t\t\t\tmargin: 0 !important;
  3932. \t\t\t\tpadding: 0 !important;
  3933. \t\t\t\tline-height: normal !important;
  3934. \t\t\t\twidth: 35px !important;
  3935. \t\t\t\theight: auto !important;
  3936. \t\t\t\tmin-height: auto !important;
  3937. \t\t\t\tmax-height: none !important;
  3938. \t\t\t}
  3940. \t\t\t.single-product .product-details .prd-bottom .social-info.wishlist-btn.active,
  3941. \t\t\t.single-product .product-details .prd-bottom .social-info.comparison-btn.active {
  3942. \t\t\t\tvertical-align: middle !important;
  3943. \t\t\t\tposition: relative !important;
  3944. \t\t\t\ttop: 0 !important;
  3945. \t\t\t\ttransform: none !important;
  3946. \t\t\t\tmargin: 0 !important;
  3947. \t\t\t\tpadding: 0 !important;
  3948. \t\t\t\tline-height: normal !important;
  3949. \t\t\t\twidth: 35px !important;
  3950. \t\t\t\theight: auto !important;
  3951. \t\t\t\tmin-height: auto !important;
  3952. \t\t\t\tmax-height: none !important;
  3953. \t\t\t}
  3955. \t\t\t.single-product .product-details .prd-bottom .social-info.active .hover-text {
  3956. \t\t\t\tmargin: 0 !important;
  3957. \t\t\t\tpadding: 0 !important;
  3958. \t\t\t\tline-height: normal !important;
  3959. \t\t\t\tposition: absolute !important;
  3960. \t\t\t\ttop: 0 !important;
  3961. \t\t\t\tbackground: #ffa200 !important;
  3962. \t\t\t\tleft: -40px !important;
  3963. \t\t\t}
  3965. \t\t\t/* S'assurer qu'aucune marge supplémentaire n'est ajoutée quand un bouton est actif */
  3966. \t\t\t.single-product .product-details .prd-bottom .social-info.active span,
  3967. \t\t\t.single-product .product-details .prd-bottom .social-info.active p {
  3968. \t\t\t\tmargin: 0 !important;
  3969. \t\t\t\tpadding: 0 !important;
  3970. \t\t\t}
  3972. \t\t\t/* Empêcher le hover de changer la largeur quand le bouton est actif */
  3973. \t\t\t.single-product .product-details .prd-bottom .social-info.active:hover {
  3974. \t\t\t\twidth: 35px !important;
  3975. \t\t\t}
  3977. \t\t\t.comparison-icon:hover .comparison-badge {
  3978. \t\t\t\tanimation: none;
  3979. \t\t\t}
  3981. \t\t\t/* Styles pour les mega-menus - style comme la barre de recherche */
  3982. \t\t\t.mega-menu {
  3983. \t\t\t\twidth: 100%;
  3984. \t\t\t\tmax-width: 1200px;
  3985. \t\t\t\tleft: 50%;
  3986. \t\t\t\ttransform: translateX(-50%);
  3987. \t\t\t\tpadding: 25px;
  3988. \t\t\t\tborder-radius: 12px;
  3989. \t\t\t\tbox-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  3990. \t\t\t\tborder: none;
  3991. \t\t\t\tbackground: white;
  3992. \t\t\t\tdisplay: none;
  3993. \t\t\t\tposition: absolute;
  3994. \t\t\t\ttop: 100%;
  3995. \t\t\t\tz-index: 9999 !important;
  3996. \t\t\t\tmargin-top: 10px;
  3997. \t\t\t\topacity: 0;
  3998. \t\t\t\tvisibility: hidden;
  3999. \t\t\t\ttransition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  4000. \t\t\t}
  4002. \t\t\t.mega-menu.active {
  4003. \t\t\t\tdisplay: block;
  4004. \t\t\t\topacity: 1;
  4005. \t\t\t\tvisibility: visible;
  4006. \t\t\t\ttransform: translateX(-50%) translateY(0);
  4007. \t\t\t}
  4009. \t\t\t.nav-item.dropdown {
  4010. \t\t\t\tposition: relative !important;
  4011. \t\t\t}
  4013. \t\t\t@media(min-width: 768px) {
  4014. \t\t\t\t.nav-item.dropdown {
  4015. \t\t\t\t\tposition: relative !important;
  4016. \t\t\t\t}
  4018. \t\t\t\t.mega-menu {
  4019. \t\t\t\t\tposition: absolute !important;
  4020. \t\t\t\t\tleft: 50% !important;
  4021. \t\t\t\t\ttransform: translateX(-50%) !important;
  4022. \t\t\t\t\twidth: auto !important;
  4023. \t\t\t\t\tmin-width: 600px !important;
  4024. \t\t\t\t}
  4025. \t\t\t}
  4027. \t\t\t/* Correction supplémentaire pour l'affichage sur la page d'accueil */
  4028. \t\t\tbody.home .nav-item.dropdown,
  4029. \t\t\t.nav-item.dropdown {
  4030. \t\t\t\tposition: relative !important;
  4031. \t\t\t}
  4033. \t\t\tbody.home .mega-menu,
  4034. \t\t\t.mega-menu {
  4035. \t\t\t\tposition: absolute !important;
  4036. \t\t\t\tleft: 50% !important;
  4037. \t\t\t\ttransform: translateX(-50%) translateY(0) !important;
  4038. \t\t\t\twidth: auto !important;
  4039. \t\t\t\tmin-width: 600px !important;
  4040. \t\t\t\tmax-width: 90% !important;
  4041. \t\t\t\ttop: 100% !important;
  4042. \t\t\t\tmargin-top: 10px !important;
  4043. \t\t\t}
  4045. \t\t\t/* Assurer que les mega-menus sont toujours visibles au survol */
  4046. \t\t\t.nav-item.dropdown:hover .mega-menu {
  4047. \t\t\t\topacity: 1 !important;
  4048. \t\t\t\tvisibility: visible !important;
  4049. \t\t\t\tdisplay: block !important;
  4050. \t\t\t\ttransform: translateX(-50%) translateY(0) !important;
  4051. \t\t\t}
  4053. \t\t\t.mega-menu .dropdown-item {
  4054. \t\t\t\tpadding: 0;
  4055. \t\t\t\tborder: none;
  4056. \t\t\t}
  4058. \t\t\t.mega-menu .dropdown-header {
  4059. \t\t\t\tfont-weight: 700;
  4060. \t\t\t\tcolor: #2c3e50;
  4061. \t\t\t\tmargin-bottom: 18px;
  4062. \t\t\t\tpadding-bottom: 10px;
  4063. \t\t\t\tborder-bottom: 3px solid #3498db;
  4064. \t\t\t\tfont-size: 16px;
  4065. \t\t\t\ttext-transform: uppercase;
  4066. \t\t\t\tletter-spacing: 0.5px;
  4067. \t\t\t}
  4069. \t\t\t.mega-menu .dropdown-item a {
  4070. \t\t\t\tdisplay: block;
  4071. \t\t\t\tpadding: 10px 15px;
  4072. \t\t\t\tcolor: #555;
  4073. \t\t\t\ttext-decoration: none;
  4074. \t\t\t\tborder-radius: 6px;
  4075. \t\t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  4076. \t\t\t\tposition: relative;
  4077. \t\t\t\toverflow: hidden;
  4078. \t\t\t}
  4080. \t\t\t.mega-menu .dropdown-item a::before {
  4081. \t\t\t\tcontent: '';
  4082. \t\t\t\tposition: absolute;
  4083. \t\t\t\ttop: 0;
  4084. \t\t\t\tleft: -100%;
  4085. \t\t\t\twidth: 100%;
  4086. \t\t\t\theight: 100%;
  4087. \t\t\t\tbackground: linear-gradient(90deg, transparent, rgba(52, 152, 219, 0.1), transparent);
  4088. \t\t\t\ttransition: left 0.5s;
  4089. \t\t\t}
  4091. \t\t\t.mega-menu .dropdown-item a:hover::before {
  4092. \t\t\t\tleft: 100%;
  4093. \t\t\t}
  4095. \t\t\t.mega-menu .dropdown-item a:hover {
  4096. \t\t\t\tbackground: linear-gradient(135deg, #f8f9fa, #e3f2fd);
  4097. \t\t\t\tcolor: #2980b9;
  4098. \t\t\t\ttransform: translateX(8px);
  4099. \t\t\t\tbox-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
  4100. \t\t\t}
  4102. \t\t\t.mega-menu .dropdown-item a i {
  4103. \t\t\t\twidth: 22px;
  4104. \t\t\t\ttext-align: center;
  4105. \t\t\t\tmargin-right: 8px;
  4106. \t\t\t\tcolor: #3498db;
  4107. \t\t\t\ttransition: color 0.3s ease;
  4108. \t\t\t}
  4110. \t\t\t.mega-menu .dropdown-item a:hover i {
  4111. \t\t\t\tcolor: #2980b9;
  4112. \t\t\t}
  4114. \t\t\t/* Animation d'apparition améliorée */
  4115. \t\t\t@keyframes slideInDown {
  4116. \t\t\t\tfrom {
  4117. \t\t\t\t\topacity: 0;
  4118. \t\t\t\t\ttransform: translateY(-20px);
  4119. \t\t\t\t}
  4120. \t\t\t\tto {
  4121. \t\t\t\t\topacity: 1;
  4122. \t\t\t\t\ttransform: translateY(0);
  4123. \t\t\t\t}
  4124. \t\t\t}
  4126. \t\t\t.mega-menu {
  4127. \t\t\t\tanimation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  4128. \t\t\t}
  4130. \t\t\t/* Effet de survol sur le lien principal */
  4131. \t\t\t.nav-item.dropdown .nav-link {
  4132. \t\t\t\tposition: relative;
  4133. \t\t\t\ttransition: all 0.3s ease;
  4134. \t\t\t}
  4136. \t\t\t.nav-item.dropdown .nav-link::after {
  4137. \t\t\t\tcontent: '';
  4138. \t\t\t\tposition: absolute;
  4139. \t\t\t\tbottom: -2px;
  4140. \t\t\t\tleft: 50%;
  4141. \t\t\t\twidth: 0;
  4142. \t\t\t\theight: 2px;
  4143. \t\t\t\tbackground: linear-gradient(90deg, #3498db, #2980b9);
  4144. \t\t\t\ttransition: all 0.3s ease;
  4145. \t\t\t\ttransform: translateX(-50%);
  4146. \t\t\t}
  4148. \t\t\t.nav-item.dropdown:hover .nav-link::after {
  4149. \t\t\t\twidth: 100%;
  4150. \t\t\t}
  4152. \t\t\t.nav-item.dropdown:hover .nav-link {
  4153. \t\t\t\tcolor: #2980b9;
  4154. \t\t\t}
  4156. \t\t\t@keyframes fadeInDown {
  4157. \t\t\t\tfrom {
  4158. \t\t\t\t\topacity: 0;
  4159. \t\t\t\t\ttransform: translateY(-10px);
  4160. \t\t\t\t}
  4161. \t\t\t\tto {
  4162. \t\t\t\t\topacity: 1;
  4163. \t\t\t\t\ttransform: translateY(0);
  4164. \t\t\t\t}
  4165. \t\t\t}
  4167. \t\t\t/* Responsive */
  4168. \t\t\t@media(max-width: 768px) {
  4169. \t\t\t\t.mega-menu {
  4170. \t\t\t\t\twidth: 100%;
  4171. \t\t\t\t\tleft: 0;
  4172. \t\t\t\t\tpadding: 15px;
  4173. \t\t\t\t}
  4175. \t\t\t\t.mega-menu .row {
  4176. \t\t\t\t\tmargin: 0;
  4177. \t\t\t\t}
  4179. \t\t\t\t.mega-menu .col-md-3 {
  4180. \t\t\t\t\tmargin-bottom: 20px;
  4181. \t\t\t\t}
  4182. \t\t\t}
  4183. \t\t\t/* ============================================
  4185. \t\t\t.footer-area {
  4186. \t\t\t\tbackground: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  4187. \t\t\t\tposition: relative;
  4188. \t\t\t\toverflow: hidden;
  4189. \t\t\t\tpadding: 50px 0 20px;
  4190. \t\t\t}
  4192. \t\t\t.footer-pattern {
  4193. \t\t\t\tposition: absolute;
  4194. \t\t\t\ttop: 0;
  4195. \t\t\t\tleft: 0;
  4196. \t\t\t\tright: 0;
  4197. \t\t\t\tbottom: 0;
  4198. \t\t\t\tbackground-image: radial-gradient(circle at 20% 50%, rgba(255, 162, 0, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 162, 0, 0.08) 0%, transparent 50%);
  4199. \t\t\t\tpointer-events: none;
  4200. \t\t\t}
  4202. \t\t\t.footer-area .container {
  4203. \t\t\t\tposition: relative;
  4204. \t\t\t\tz-index: 1;
  4205. \t\t\t}
  4207. \t\t\t/* Widgets */
  4208. \t\t\t.single-footer-widget {
  4209. \t\t\t\tcolor: rgba(255, 255, 255, 0.9);
  4210. \t\t\t}
  4212. \t\t\t.footer-brand {
  4213. \t\t\t\tfont-size: 1.6rem;
  4214. \t\t\t\tfont-weight: 700;
  4215. \t\t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  4216. \t\t\t\t-webkit-background-clip: text;
  4217. \t\t\t\t-webkit-text-fill-color: transparent;
  4218. \t\t\t\tbackground-clip: text;
  4219. \t\t\t\tmargin-bottom: 12px;
  4220. \t\t\t\tdisplay: inline-block;
  4221. \t\t\t}
  4223. \t\t\t.footer-widget-title {
  4224. \t\t\t\tcolor: #fff;
  4225. \t\t\t\tfont-size: 1rem;
  4226. \t\t\t\tfont-weight: 600;
  4227. \t\t\t\tmargin-bottom: 18px;
  4228. \t\t\t\tposition: relative;
  4229. \t\t\t\tpadding-bottom: 8px;
  4230. \t\t\t}
  4232. \t\t\t.footer-widget-title::after {
  4233. \t\t\t\tcontent: '';
  4234. \t\t\t\tposition: absolute;
  4235. \t\t\t\tbottom: 0;
  4236. \t\t\t\tleft: 0;
  4237. \t\t\t\twidth: 40px;
  4238. \t\t\t\theight: 3px;
  4239. \t\t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  4240. \t\t\t\tborder-radius: 2px;
  4241. \t\t\t}
  4243. \t\t\t.footer-description {
  4244. \t\t\t\tcolor: rgba(255, 255, 255, 0.7);
  4245. \t\t\t\tline-height: 1.6;
  4246. \t\t\t\tfont-size: 0.9rem;
  4247. \t\t\t\tmargin-bottom: 0;
  4248. \t\t\t}
  4250. \t\t\t/* Liste de liens */
  4251. \t\t\t.footer-list {
  4252. \t\t\t\tlist-style: none;
  4253. \t\t\t\tpadding: 0;
  4254. \t\t\t\tmargin: 0;
  4255. \t\t\t}
  4257. \t\t\t.footer-list li {
  4258. \t\t\t\tmargin-bottom: 10px;
  4259. \t\t\t}
  4261. \t\t\t.footer-list li a {
  4262. \t\t\t\tcolor: rgba(255, 255, 255, 0.7);
  4263. \t\t\t\ttext-decoration: none;
  4264. \t\t\t\ttransition: all 0.3s ease;
  4265. \t\t\t\tfont-size: 0.9rem;
  4266. \t\t\t\tdisplay: inline-flex;
  4267. \t\t\t\talign-items: center;
  4268. \t\t\t}
  4270. \t\t\t.footer-list li a i {
  4271. \t\t\t\tfont-size: 0.8rem;
  4272. \t\t\t\topacity: 0.6;
  4273. \t\t\t\ttransition: all 0.3s ease;
  4274. \t\t\t}
  4276. \t\t\t.footer-list li a:hover {
  4277. \t\t\t\tcolor: #ffa200;
  4278. \t\t\t\ttransform: translateX(5px);
  4279. \t\t\t}
  4281. \t\t\t.footer-list li a:hover i {
  4282. \t\t\t\topacity: 1;
  4283. \t\t\t\tcolor: #ffa200;
  4284. \t\t\t}
  4286. \t\t\t/* Newsletter */
  4287. \t\t\t.footer-newsletter-text {
  4288. \t\t\t\tcolor: rgba(255, 255, 255, 0.7);
  4289. \t\t\t\tfont-size: 0.85rem;
  4290. \t\t\t\tmargin-bottom: 15px;
  4291. \t\t\t\tline-height: 1.5;
  4292. \t\t\t}
  4294. \t\t\t.footer-newsletter-wrapper {
  4295. \t\t\t\tmargin-bottom: 15px;
  4296. \t\t\t}
  4298. \t\t\t.newsletter-input-group {
  4299. \t\t\t\tdisplay: flex;
  4300. \t\t\t\talign-items: center;
  4301. \t\t\t\tbackground: rgba(255, 255, 255, 0.08);
  4302. \t\t\t\tborder-radius: 30px;
  4303. \t\t\t\tpadding: 4px 4px 4px 15px;
  4304. \t\t\t\tbackdrop-filter: blur(10px);
  4305. \t\t\t\tborder: 1px solid rgba(255, 255, 255, 0.15);
  4306. \t\t\t\ttransition: all 0.3s ease;
  4307. \t\t\t\tgap: 8px;
  4308. \t\t\t}
  4310. \t\t\t.newsletter-input-group:focus-within {
  4311. \t\t\t\tbackground: rgba(255, 255, 255, 0.12);
  4312. \t\t\t\tborder-color: rgba(255, 162, 0, 0.6);
  4313. \t\t\t\tbox-shadow: 0 0 0 2px rgba(255, 162, 0, 0.15);
  4314. \t\t\t}
  4316. \t\t\t.newsletter-icon {
  4317. \t\t\t\tcolor: rgba(255, 255, 255, 0.5);
  4318. \t\t\t\tfont-size: 0.9rem;
  4319. \t\t\t\tflex-shrink: 0;
  4320. \t\t\t}
  4322. \t\t\t.newsletter-input-group:focus-within .newsletter-icon {
  4323. \t\t\t\tcolor: #ffa200;
  4324. \t\t\t}
  4326. \t\t\t.newsletter-input {
  4327. \t\t\t\tflex: 1;
  4328. \t\t\t\tbackground: transparent;
  4329. \t\t\t\tborder: none;
  4330. \t\t\t\tcolor: #fff;
  4331. \t\t\t\tpadding: 10px 8px;
  4332. \t\t\t\tfont-size: 0.9rem;
  4333. \t\t\t\tmin-width: 0;
  4334. \t\t\t}
  4336. \t\t\t.newsletter-input::placeholder {
  4337. \t\t\t\tcolor: rgba(255, 255, 255, 0.4);
  4338. \t\t\t\tfont-size: 0.85rem;
  4339. \t\t\t}
  4341. \t\t\t.newsletter-input:focus {
  4342. \t\t\t\toutline: none;
  4343. \t\t\t\tbox-shadow: none;
  4344. \t\t\t}
  4346. \t\t\t.newsletter-btn {
  4347. \t\t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  4348. \t\t\t\tborder: none;
  4349. \t\t\t\tcolor: white;
  4350. \t\t\t\twidth: 42px;
  4351. \t\t\t\theight: 42px;
  4352. \t\t\t\tmin-width: 42px;
  4353. \t\t\t\tmin-height: 42px;
  4354. \t\t\t\tborder-radius: 50%;
  4355. \t\t\t\tdisplay: flex;
  4356. \t\t\t\talign-items: center;
  4357. \t\t\t\tjustify-content: center;
  4358. \t\t\t\tcursor: pointer;
  4359. \t\t\t\ttransition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  4360. \t\t\t\tflex-shrink: 0;
  4361. \t\t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.4), 0 0 0 0 rgba(255, 162, 0, 0.4);
  4362. \t\t\t\tfont-size: 0.9rem;
  4363. \t\t\t\tposition: relative;
  4364. \t\t\t\toverflow: hidden;
  4365. \t\t\t}
  4367. \t\t\t.newsletter-btn::before {
  4368. \t\t\t\tcontent: '';
  4369. \t\t\t\tposition: absolute;
  4370. \t\t\t\ttop: 50%;
  4371. \t\t\t\tleft: 50%;
  4372. \t\t\t\twidth: 0;
  4373. \t\t\t\theight: 0;
  4374. \t\t\t\tborder-radius: 50%;
  4375. \t\t\t\tbackground: rgba(255, 255, 255, 0.3);
  4376. \t\t\t\ttransform: translate(-50%, -50%);
  4377. \t\t\t\ttransition: width 0.6s ease, height 0.6s ease;
  4378. \t\t\t}
  4380. \t\t\t.newsletter-btn:hover::before {
  4381. \t\t\t\twidth: 100%;
  4382. \t\t\t\theight: 100%;
  4383. \t\t\t}
  4385. \t\t\t.newsletter-btn:hover {
  4386. \t\t\t\ttransform: translateX(3px) scale(1.05);
  4387. \t\t\t\tbox-shadow: 0 6px 20px rgba(255, 162, 0, 0.5), 0 0 0 8px rgba(255, 162, 0, 0.1);
  4388. \t\t\t\tbackground: linear-gradient(135deg, #e8910a 0%, #ffa200 100%);
  4389. \t\t\t}
  4391. \t\t\t.newsletter-btn:active {
  4392. \t\t\t\ttransform: translateX(3px) scale(0.98);
  4393. \t\t\t\tbox-shadow: 0 3px 10px rgba(255, 162, 0, 0.4);
  4394. \t\t\t}
  4396. \t\t\t.newsletter-btn:focus {
  4397. \t\t\t\toutline: none;
  4398. \t\t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.4), 0 0 0 3px rgba(255, 162, 0, 0.3);
  4399. \t\t\t}
  4401. \t\t\t.newsletter-btn-icon,
  4402. \t\t\t.newsletter-btn-loader {
  4403. \t\t\t\tposition: relative;
  4404. \t\t\t\tz-index: 2;
  4405. \t\t\t\tdisplay: flex;
  4406. \t\t\t\talign-items: center;
  4407. \t\t\t\tjustify-content: center;
  4408. \t\t\t\ttransition: all 0.3s ease;
  4409. \t\t\t}
  4411. \t\t\t.newsletter-btn:hover .newsletter-btn-icon {
  4412. \t\t\t\ttransform: translateX(2px) rotate(-10deg);
  4413. \t\t\t}
  4415. \t\t\t.newsletter-btn.loading .newsletter-btn-icon {
  4416. \t\t\t\topacity: 0;
  4417. \t\t\t\ttransform: scale(0);
  4418. \t\t\t}
  4420. \t\t\t.newsletter-btn.loading .newsletter-btn-loader {
  4421. \t\t\t\tdisplay: flex !important;
  4422. \t\t\t}
  4424. \t\t\t.newsletter-btn.success {
  4425. \t\t\t\tbackground: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  4426. \t\t\t\tbox-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
  4427. \t\t\t}
  4429. \t\t\t.newsletter-btn.success .newsletter-btn-icon i::before {
  4430. \t\t\t\tcontent: \"\\f00c\";
  4431. \t\t\t}
  4433. \t\t\t/* Trust badges */
  4434. \t\t\t.footer-trust-badges {
  4435. \t\t\t\tdisplay: flex;
  4436. \t\t\t\tflex-direction: row;
  4437. \t\t\t\tgap: 15px;
  4438. \t\t\t\tflex-wrap: wrap;
  4439. \t\t\t}
  4441. \t\t\t.trust-item {
  4442. \t\t\t\tdisplay: flex;
  4443. \t\t\t\talign-items: center;
  4444. \t\t\t\tgap: 6px;
  4445. \t\t\t\tcolor: rgba(255, 255, 255, 0.6);
  4446. \t\t\t\tfont-size: 0.8rem;
  4447. \t\t\t}
  4449. \t\t\t.trust-item i {
  4450. \t\t\t\tcolor: #ffa200;
  4451. \t\t\t\tfont-size: 0.9rem;
  4452. \t\t\t}
  4454. \t\t\t/* Social icons */
  4455. \t\t\t.footer-social {
  4456. \t\t\t\tmargin-top: 0 !important;
  4457. \t\t\t\tposition: relative !important;
  4458. \t\t\t\twidth: 100% !important;
  4459. \t\t\t\tclear: both !important;
  4460. \t\t\t\tfloat: none !important;
  4461. \t\t\t}
  4463. \t\t\t.footer-social h6 {
  4464. \t\t\t\tcolor: #fff;
  4465. \t\t\t\tfont-size: 0.95rem;
  4466. \t\t\t\tfont-weight: 600;
  4467. \t\t\t\tmargin-bottom: 12px !important;
  4468. \t\t\t\tdisplay: block !important;
  4469. \t\t\t\twidth: 100% !important;
  4470. \t\t\t\tposition: relative !important;
  4471. \t\t\t\tclear: both !important;
  4472. \t\t\t\tfloat: none !important;
  4473. \t\t\t}
  4475. \t\t\t.footer-social-icons {
  4476. \t\t\t\tdisplay: flex !important;
  4477. \t\t\t\tgap: 12px !important;
  4478. \t\t\t\tflex-wrap: wrap !important;
  4479. \t\t\t\talign-items: center !important;
  4480. \t\t\t\tjustify-content: flex-start !important;
  4481. \t\t\t\twidth: 100% !important;
  4482. \t\t\t\tposition: relative !important;
  4483. \t\t\t\tclear: both !important;
  4484. \t\t\t\tfloat: none !important;
  4485. \t\t\t\tmargin: 0 !important;
  4486. \t\t\t\tpadding: 0 !important;
  4487. \t\t\t}
  4489. \t\t\t.social-icon {
  4490. \t\t\t\twidth: 38px !important;
  4491. \t\t\t\theight: 38px !important;
  4492. \t\t\t\tmin-width: 38px !important;
  4493. \t\t\t\tmin-height: 38px !important;
  4494. \t\t\t\tdisplay: inline-flex !important;
  4495. \t\t\t\talign-items: center !important;
  4496. \t\t\t\tjustify-content: center !important;
  4497. \t\t\t\tbackground: rgba(255, 255, 255, 0.1) !important;
  4498. \t\t\t\tborder-radius: 50% !important;
  4499. \t\t\t\tcolor: rgba(255, 255, 255, 0.8) !important;
  4500. \t\t\t\ttext-decoration: none !important;
  4501. \t\t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  4502. \t\t\t\tfont-size: 16px !important;
  4503. \t\t\t\tline-height: 1 !important;
  4504. \t\t\t\tbackdrop-filter: blur(10px) !important;
  4505. \t\t\t\tborder: 1px solid rgba(255, 255, 255, 0.1) !important;
  4506. \t\t\t\tflex-shrink: 0 !important;
  4507. \t\t\t\tposition: relative !important;
  4508. \t\t\t\tfloat: none !important;
  4509. \t\t\t\tmargin: 0 !important;
  4510. \t\t\t\tpadding: 0 !important;
  4511. \t\t\t\tvertical-align: middle !important;
  4512. \t\t\t}
  4514. \t\t\t.social-icon i {
  4515. \t\t\t\tfont-size: 16px !important;
  4516. \t\t\t\tline-height: 1 !important;
  4517. \t\t\t\tdisplay: inline-block !important;
  4518. \t\t\t\ttransition: transform 0.3s ease !important;
  4519. \t\t\t\tposition: relative !important;
  4520. \t\t\t\tz-index: 1 !important;
  4521. \t\t\t\tmargin: 0 !important;
  4522. \t\t\t\tpadding: 0 !important;
  4523. \t\t\t}
  4525. \t\t\t.social-icon:hover {
  4526. \t\t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%) !important;
  4527. \t\t\t\ttransform: translateY(-5px) scale(1.1) !important;
  4528. \t\t\t\tcolor: white !important;
  4529. \t\t\t\tborder-color: transparent !important;
  4530. \t\t\t\tbox-shadow: 0 8px 20px rgba(255, 162, 0, 0.4) !important;
  4531. \t\t\t}
  4533. \t\t\t.social-icon:hover i {
  4534. \t\t\t\ttransform: scale(1.1) !important;
  4535. \t\t\t}
  4537. \t\t\t/* Footer divider */
  4538. \t\t\t.footer-divider {
  4539. \t\t\t\theight: 1px;
  4540. \t\t\t\tbackground: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  4541. \t\t\t\tmargin: 30px 0 20px;
  4542. \t\t\t}
  4544. \t\t\t/* Footer bottom */
  4545. \t\t\t.footer-bottom {
  4546. \t\t\t\tpadding-top: 15px;
  4547. \t\t\t}
  4549. \t\t\t.footer-text {
  4550. \t\t\t\tcolor: rgba(255, 255, 255, 0.6);
  4551. \t\t\t\tfont-size: 0.9rem;
  4552. \t\t\t\tmargin: 0;
  4553. \t\t\t\ttext-align: center;
  4554. \t\t\t}
  4556. \t\t\t/* Responsive */
  4557. \t\t\t@media(max-width: 991.98px) {
  4558. \t\t\t\t.footer-area {
  4559. \t\t\t\t\tpadding: 40px 0 20px;
  4560. \t\t\t\t}
  4562. \t\t\t\t.single-footer-widget {
  4563. \t\t\t\t\tmargin-bottom: 30px;
  4564. \t\t\t\t}
  4566. \t\t\t\t.footer-social {
  4567. \t\t\t\t\tmargin-top: 15px;
  4568. \t\t\t\t}
  4569. \t\t\t}
  4571. \t\t\t@media(max-width: 767.98px) {
  4572. \t\t\t\t.footer-area {
  4573. \t\t\t\t\tpadding: 35px 0 18px;
  4574. \t\t\t\t}
  4576. \t\t\t\t.footer-brand {
  4577. \t\t\t\t\tfont-size: 1.4rem;
  4578. \t\t\t\t}
  4580. \t\t\t\t.footer-widget-title {
  4581. \t\t\t\t\tfont-size: 0.95rem;
  4582. \t\t\t\t}
  4585. \t\t\t\t.newsletter-input-group {
  4586. \t\t\t\t\tpadding: 3px 3px 3px 12px;
  4587. \t\t\t\t}
  4589. \t\t\t\t.newsletter-input {
  4590. \t\t\t\t\tpadding: 8px 6px;
  4591. \t\t\t\t\tfont-size: 0.85rem;
  4592. \t\t\t\t}
  4594. \t\t\t\t.newsletter-btn {
  4595. \t\t\t\t\twidth: 38px;
  4596. \t\t\t\t\theight: 38px;
  4597. \t\t\t\t\tmin-width: 38px;
  4598. \t\t\t\t\tmin-height: 38px;
  4599. \t\t\t\t\tfont-size: 0.85rem;
  4600. \t\t\t\t}
  4602. \t\t\t\t.footer-trust-badges {
  4603. \t\t\t\t\tflex-direction: row;
  4604. \t\t\t\t\tflex-wrap: wrap;
  4605. \t\t\t\t\tjustify-content: flex-start;
  4606. \t\t\t\t\tgap: 12px;
  4607. \t\t\t\t}
  4608. \t\t\t}
  4610. \t\t\t@media(max-width: 575.98px) {
  4611. \t\t\t\t.footer-area {
  4612. \t\t\t\t\tpadding: 40px 0 20px;
  4613. \t\t\t\t}
  4615. \t\t\t\t.footer-brand {
  4616. \t\t\t\t\tfont-size: 1.3rem;
  4617. \t\t\t\t}
  4619. \t\t\t\t.social-icon {
  4620. \t\t\t\t\twidth: 38px;
  4621. \t\t\t\t\theight: 38px;
  4622. \t\t\t\t\tfont-size: 16px;
  4623. \t\t\t\t}
  4625. \t\t\t\t.social-icon i {
  4626. \t\t\t\t\tfont-size: 16px;
  4627. \t\t\t\t}
  4628. \t\t\t}
  4629. \t\t</style>
  4631. \t\t{% block stylesheets %}
  4632. \t\t\t{{ encore_entry_link_tags('app') }}
  4633. \t\t{% endblock %}
  4635. \t\t<!-- Script pour forcer l'application des styles CSS après chargement -->
  4636. \t\t<script>
  4637. \t\t\tdocument.addEventListener('DOMContentLoaded', function () { // Forcer le masquage du toggle sur grands écrans
  4638. if (window.innerWidth >= 992) {
  4639. const togglers = document.querySelectorAll('.navbar-toggler, .header_area .navbar .navbar-toggler');
  4640. togglers.forEach(function (toggler) {
  4641. if (toggler) {
  4642. toggler.style.display = 'none';
  4643. toggler.style.visibility = 'hidden';
  4644. toggler.style.opacity = '0';
  4645. toggler.style.width = '0';
  4646. toggler.style.height = '0';
  4647. toggler.style.padding = '0';
  4648. toggler.style.margin = '0';
  4649. toggler.style.border = 'none';
  4650. toggler.style.position = 'absolute';
  4651. toggler.style.left = '-9999px';
  4652. }
  4653. });
  4655. const iconBars = document.querySelectorAll('.navbar-toggler .icon-bar, .header_area .navbar .navbar-toggler .icon-bar, .navbar-toggler-icon');
  4656. iconBars.forEach(function (bar) {
  4657. if (bar) {
  4658. bar.style.display = 'none';
  4659. bar.style.visibility = 'hidden';
  4660. }
  4661. });
  4662. }
  4664. // Alignement des icônes navbar sur mobile
  4665. const navbarRight = document.querySelectorAll('.navbar-right, .header_area .navbar .nav.navbar-nav.navbar-right');
  4666. navbarRight.forEach(function (nav) {
  4667. if (nav && window.innerWidth<= 991.98) {
  4668.                     // Mobile: colonne avec icônes alignées horizontalement
  4669.                     nav.style.display = 'flex';
  4670.                     nav.style.flexDirection = 'column';
  4671.                     nav.style.alignItems = 'center';
  4672.                     nav.style.textAlign = 'center';
  4673.                     
  4674.                     // Le container d'icônes reste horizontal
  4675.                     const iconsContainer = nav.querySelector('.navbar-icons-wrapper');
  4676.                     if (iconsContainer) {
  4677.                         iconsContainer.style.display = 'flex';
  4678.                         iconsContainer.style.flexDirection = 'row';
  4679.                         iconsContainer.style.justifyContent = 'center';
  4680.                     }
  4681.                     
  4682.                     // Le bouton compte en bas
  4683.                     const accountBtn = nav.querySelector('li:last-child');
  4684.                     if (accountBtn) {
  4685.                         accountBtn.style.width = '100%';
  4686.                         accountBtn.style.display = 'flex';
  4687.                         accountBtn.style.justifyContent = 'center';
  4688.                         accountBtn.style.marginTop = '12px';
  4689.                         accountBtn.style.paddingTop = '12px';
  4690.                         accountBtn.style.borderTop = '1px solid #e0e0e0';
  4691.                     }
  4692.                 } else if (nav && window.innerWidth> 991.98) { // Desktop: alignement horizontal normal
  4693. nav.style.display = 'flex';
  4694. nav.style.flexDirection = 'row';
  4695. nav.style.alignItems = 'center';
  4696. nav.style.justifyContent = 'flex-end';
  4697. }
  4698. });
  4699. });
  4701. // Réappliquer lors du redimensionnement
  4702. window.addEventListener('resize', function () {
  4703. if (window.innerWidth >= 992) {
  4704. const togglers = document.querySelectorAll('.navbar-toggler, .header_area .navbar .navbar-toggler');
  4705. togglers.forEach(function (toggler) {
  4706. if (toggler) {
  4707. toggler.style.display = 'none';
  4708. toggler.style.visibility = 'hidden';
  4709. }
  4710. });
  4711. }
  4713. // Réappliquer l'alignement des icônes navbar
  4714. const navbarRight = document.querySelectorAll('.navbar-right, .header_area .navbar .nav.navbar-nav.navbar-right');
  4715. navbarRight.forEach(function (nav) {
  4716. if (nav && window.innerWidth<= 991.98) {
  4717.                     // Mobile: colonne avec icônes alignées horizontalement
  4718.                     nav.style.display = 'flex';
  4719.                     nav.style.flexDirection = 'column';
  4720.                     nav.style.alignItems = 'center';
  4721.                     nav.style.textAlign = 'center';
  4722.                     
  4723.                     // Le container d'icônes reste horizontal
  4724.                     const iconsContainer = nav.querySelector('.navbar-icons-wrapper');
  4725.                     if (iconsContainer) {
  4726.                         iconsContainer.style.display = 'flex';
  4727.                         iconsContainer.style.flexDirection = 'row';
  4728.                         iconsContainer.style.justifyContent = 'center';
  4729.                     }
  4730.                     
  4731.                     const accountBtn = nav.querySelector('li:last-child');
  4732.                     if (accountBtn) {
  4733.                         accountBtn.style.width = '100%';
  4734.                         accountBtn.style.display = 'flex';
  4735.                         accountBtn.style.justifyContent = 'center';
  4736.                         accountBtn.style.marginTop = '12px';
  4737.                         accountBtn.style.paddingTop = '12px';
  4738.                         accountBtn.style.borderTop = '1px solid #e0e0e0';
  4739.                     }
  4740.                 } else if (nav && window.innerWidth> 991.98) { // Desktop: alignement horizontal normal
  4741. nav.style.display = 'flex';
  4742. nav.style.flexDirection = 'row';
  4743. nav.style.alignItems = 'center';
  4744. nav.style.justifyContent = 'flex-end';
  4745. }
  4746. });
  4747. });
  4748. \t\t</script>
  4750. \t</head>
  4751. \t<body
  4752. \t\t{% if current_menu is defined and current_menu == \"listing\" %} id=\"category\" {% endif %}
  4753. \t\tstyle=\"transition: background-color 0.3s ease, color 0.3s ease;\"
  4754. \t\tclass=\"theme-transition\">
  4756. \t\t<!-- Start Header Area -->
  4757. \t\t<header class=\"header_area sticky-header\">
  4758. \t\t\t<div class=\"main_menu\">
  4759. \t\t\t\t<nav class=\"navbar navbar-expand-lg navbar-light main_box\">
  4760. \t\t\t\t\t<div
  4761. \t\t\t\t\t\tclass=\"container\">
  4762. \t\t\t\t\t\t<!-- Brand and toggle get grouped for better mobile display -->
  4763. \t\t\t\t\t\t<a class=\"navbar-brand logo_h\" href=\"{{ path('ui_home') }}\"><img style=\"width: auto;height: 60px\" src=\"{{ asset('logo.png') }}\" alt=\"\"></a>
  4764. \t\t\t\t\t\t<button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">
  4765. \t\t\t\t\t\t\t<span class=\"icon-bar\"></span>
  4766. \t\t\t\t\t\t\t<span class=\"icon-bar\"></span>
  4767. \t\t\t\t\t\t\t<span class=\"icon-bar\"></span>
  4768. \t\t\t\t\t\t</button>
  4769. \t\t\t\t\t\t<!-- Collect the nav links, forms, and other content for toggling -->
  4770. \t\t\t\t\t\t<div class=\"collapse navbar-collapse offset\" id=\"navbarSupportedContent\">
  4771. \t\t\t\t\t\t\t<ul class=\"nav navbar-nav menu_nav ml-auto\">
  4772. \t\t\t\t\t\t\t\t<li class=\"nav-item {% if current_menu is defined and current_menu == \" home\" %}active{% endif %}\">
  4773. \t\t\t\t\t\t\t\t\t<a class=\"nav-link\" href=\"{{ path('ui_home') }}\">Accueil</a>
  4774. \t\t\t\t\t\t\t\t</li>
  4775. \t\t\t\t\t\t\t\t<li class=\"nav-item {% if current_menu is defined and current_menu == \" shops\" %}active{% endif %}\">
  4776. \t\t\t\t\t\t\t\t\t<a class=\"nav-link\" href=\"{{ path('ui_shops_list') }}\">Boutiques</a>
  4777. \t\t\t\t\t\t\t\t</li>
  4778. \t\t\t\t\t\t\t\t<li class=\"nav-item {% if current_menu is defined and current_menu == \" listing\" %}active{% endif %}\">
  4779. \t\t\t\t\t\t\t\t\t<a class=\"nav-link\" href=\"{{ path('ui_listing') }}\">Produits</a>
  4780. \t\t\t\t\t\t\t\t</li>
  4781. \t\t\t\t\t\t\t\t<li class=\"nav-item {% if current_menu is defined and current_menu == \" contact\" %}active{% endif %}\">
  4782. \t\t\t\t\t\t\t\t\t<a class=\"nav-link\" href=\"{{ path('ui_contact') }}\">Contact</a>
  4783. \t\t\t\t\t\t\t\t</li>
  4784. \t\t\t\t\t\t\t</ul>
  4785. \t\t\t\t\t\t\t<ul class=\"nav navbar-nav navbar-right\">
  4786. \t\t\t\t\t\t\t\t<li class=\"nav-item\">
  4787. \t\t\t\t\t\t\t\t\t<div class=\"navbar-icons-wrapper\">
  4788. \t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_cart') }}\" class=\"cart {% if current_menu is defined and current_menu == \" cart\" %}active{% endif %}\" aria-label=\"Panier\">
  4789. \t\t\t\t\t\t\t\t\t\t\t<span class=\"ti-bag\"></span>
  4790. \t\t\t\t\t\t\t\t\t\t</a>
  4791. \t\t\t\t\t\t\t\t\t\t{% if app.user %}
  4792. \t\t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('notifications_list') }}\" class=\"notification-icon\" title=\"Notifications\" aria-label=\"Notifications\">
  4793. \t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ti-bell\"></span>
  4794. \t\t\t\t\t\t\t\t\t\t\t\t<span class=\"notification-badge text-white\" id=\"notificationBadge\" style=\"display: none;color: white;\">0</span>
  4795. \t\t\t\t\t\t\t\t\t\t\t</a>
  4796. \t\t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_product_comparison') }}\" class=\"comparison-icon\" title=\"Comparaison\" aria-label=\"Comparaison\">
  4797. \t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-sync\"></span>
  4798. \t\t\t\t\t\t\t\t\t\t\t\t<span class=\"comparison-badge text-white\" id=\"comparisonBadge\" style=\"display: none;color: white;\">0</span>
  4799. \t\t\t\t\t\t\t\t\t\t\t</a>
  4800. \t\t\t\t\t\t\t\t\t\t{% endif %}
  4801. \t\t\t\t\t\t\t\t\t\t{{ include('components/_dark_mode_toggle.html.twig') }}
  4802. \t\t\t\t\t\t\t\t\t\t<button class=\"search\" type=\"button\" aria-label=\"Recherche\">
  4803. \t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-magnifier\" id=\"search\"></span>
  4804. \t\t\t\t\t\t\t\t\t\t</button>
  4805. \t\t\t\t\t\t\t\t\t</div>
  4806. \t\t\t\t\t\t\t\t</li>
  4807. \t\t\t\t\t\t\t\t<li class=\"nav-item\">
  4808. \t\t\t\t\t\t\t\t\t{% if app.user %}
  4809. \t\t\t\t\t\t\t\t\t\t<a class=\"nav-link btn btn-primary btn-account text-white\" href=\"{{ path('ui_account_index') }}\">
  4810. \t\t\t\t\t\t\t\t\t\t\t<i class=\"ti-user\"></i>
  4811. \t\t\t\t\t\t\t\t\t\t\tMon compte
  4812. \t\t\t\t\t\t\t\t\t\t</a>
  4813. \t\t\t\t\t\t\t\t\t{% else %}
  4814. \t\t\t\t\t\t\t\t\t\t<a class=\"nav-link btn btn-primary btn-account text-white\" href=\"{{ path('ui_app_login') }}\">
  4815. \t\t\t\t\t\t\t\t\t\t\t<i class=\"ti-lock\"></i>
  4816. \t\t\t\t\t\t\t\t\t\t\tSe connecter
  4817. \t\t\t\t\t\t\t\t\t\t</a>
  4818. \t\t\t\t\t\t\t\t\t{% endif %}
  4819. \t\t\t\t\t\t\t\t</li>
  4820. \t\t\t\t\t\t\t</ul>
  4821. \t\t\t\t\t\t</div>
  4822. \t\t\t\t\t</div>
  4823. \t\t\t\t</nav>
  4824. \t\t\t</div>
  4825. \t\t\t<div class=\"search_input\" id=\"search_input_box\">
  4826. \t\t\t\t<div class=\"container\">
  4827. \t\t\t\t\t<form class=\"d-flex justify-content-between\" id=\"search_form\" action=\"{{ path('ui_listing') }}\" method=\"get\">
  4828. \t\t\t\t\t\t<input type=\"text\" class=\"form-control\" id=\"search_input\" name=\"q\" placeholder=\"Rechercher un produit, une boutique, une catégorie...\" autocomplete=\"off\" value=\"{{ app.request.query.get('q', '') }}\">
  4829. \t\t\t\t\t\t<button type=\"button\" class=\"btn\" id=\"search_submit_btn\">
  4830. \t\t\t\t\t\t\t<i class=\"lnr lnr-magnifier\"></i>
  4831. \t\t\t\t\t\t</button>
  4832. \t\t\t\t\t\t{% if app.request.query.get('q') %}
  4833. \t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-clear-search\" id=\"clear_search_btn\" title=\"Effacer la recherche\">
  4834. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-cross\"></i>
  4835. \t\t\t\t\t\t\t</button>
  4836. \t\t\t\t\t\t{% endif %}
  4837. \t\t\t\t\t\t<span class=\"lnr lnr-cross\" id=\"close_search\" title=\"Fermer la recherche\"></span>
  4838. \t\t\t\t\t</form>
  4839. \t\t\t\t\t<div id=\"search_results\" class=\"search-results-container\"></div>
  4840. \t\t\t\t</div>
  4841. \t\t\t</div>
  4842. \t\t\t<script>
  4843. \t\t\t\twindow.searchSuggestUrl = \"{{ path('ui_api_search_suggest') }}\";
  4844. \t\t\t\twindow.listingUrl = \"{{ path('ui_listing') }}\";
  4845. \t\t\t</script>
  4846. \t\t</header>
  4847. \t\t<!-- End Header Area -->
  4849. \t\t<!-- Flash Messages -->
  4850. \t\t<div class=\"container mt-3\" id=\"flash-messages-container\" style=\"position: relative; z-index: 1050;\">
  4851. \t\t\t<div class=\"row\">
  4852. \t\t\t\t<div class=\"col-12\">
  4853. \t\t\t\t\t{% for message in app.flashes('success') %}
  4854. \t\t\t\t\t\t<div class=\"alert alert-success alert-dismissible fade show flash-message\" role=\"alert\">
  4855. \t\t\t\t\t\t\t<i class=\"fa fa-check-circle\"></i>
  4856. \t\t\t\t\t\t\t<strong>{{ message }}</strong>
  4857. \t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>
  4858. \t\t\t\t\t\t</div>
  4859. \t\t\t\t\t{% endfor %}
  4861. \t\t\t\t\t{% for message in app.flashes('error') %}
  4862. \t\t\t\t\t\t<div class=\"alert alert-danger alert-dismissible fade show flash-message\" role=\"alert\">
  4863. \t\t\t\t\t\t\t<i class=\"fa fa-exclamation-circle\"></i>
  4864. \t\t\t\t\t\t\t<strong>{{ message }}</strong>
  4865. \t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>
  4866. \t\t\t\t\t\t</div>
  4867. \t\t\t\t\t{% endfor %}
  4869. \t\t\t\t\t{% for message in app.flashes('warning') %}
  4870. \t\t\t\t\t\t<div class=\"alert alert-warning alert-dismissible fade show flash-message\" role=\"alert\">
  4871. \t\t\t\t\t\t\t<i class=\"fa fa-exclamation-triangle\"></i>
  4872. \t\t\t\t\t\t\t<strong>{{ message }}</strong>
  4873. \t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>
  4874. \t\t\t\t\t\t</div>
  4875. \t\t\t\t\t{% endfor %}
  4877. \t\t\t\t\t{% for message in app.flashes('info') %}
  4878. \t\t\t\t\t\t<div class=\"alert alert-info alert-dismissible fade show flash-message\" role=\"alert\">
  4879. \t\t\t\t\t\t\t<i class=\"fa fa-info-circle\"></i>
  4880. \t\t\t\t\t\t\t<strong>{{ message }}</strong>
  4881. \t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>
  4882. \t\t\t\t\t\t</div>
  4883. \t\t\t\t\t{% endfor %}
  4884. \t\t\t\t</div>
  4885. \t\t\t</div>
  4886. \t\t</div>
  4888. \t\t{% block body %}{% endblock %}
  4890. \t\t<!-- start footer Area -->
  4891. \t\t<footer class=\"footer-area section_gap\">
  4892. \t\t\t<div class=\"footer-pattern\"></div>
  4893. \t\t\t<div class=\"container\">
  4894. \t\t\t\t<div class=\"row\">
  4895. \t\t\t\t\t<div class=\"col-lg-3 col-md-6 col-sm-6 mb-4 mb-lg-0\">
  4896. \t\t\t\t\t\t<div class=\"single-footer-widget\">
  4897. \t\t\t\t\t\t\t<div class=\"footer-logo mb-3\">
  4898. \t\t\t\t\t\t\t\t<h4 class=\"footer-brand\">MaketOu</h4>
  4899. \t\t\t\t\t\t\t</div>
  4900. \t\t\t\t\t\t\t<p class=\"footer-description\">
  4901. \t\t\t\t\t\t\t\tMaketOu est la première marketplace haïtienne qui connecte les acheteurs et les vendeurs. 
  4902. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                        Nous offrons une plateforme sécurisée et moderne pour le commerce en ligne en Haïti.
  4903. \t\t\t\t\t\t\t</p>
  4904. \t\t\t\t\t\t\t<div class=\"footer-social mt-3\">
  4905. \t\t\t\t\t\t\t\t<h6 class=\"mb-2\">Suivez-nous</h6>
  4906. \t\t\t\t\t\t\t\t<div class=\"footer-social-icons\">
  4907. \t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"social-icon\" aria-label=\"Facebook\" title=\"Facebook\">
  4908. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-facebook\"></i>
  4909. \t\t\t\t\t\t\t\t\t</a>
  4910. \t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"social-icon\" aria-label=\"Twitter\" title=\"Twitter\">
  4911. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-twitter\"></i>
  4912. \t\t\t\t\t\t\t\t\t</a>
  4913. \t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"social-icon\" aria-label=\"Instagram\" title=\"Instagram\">
  4914. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-instagram\"></i>
  4915. \t\t\t\t\t\t\t\t\t</a>
  4916. \t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"social-icon\" aria-label=\"LinkedIn\" title=\"LinkedIn\">
  4917. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-linkedin\"></i>
  4918. \t\t\t\t\t\t\t\t\t</a>
  4919. \t\t\t\t\t\t\t\t</div>
  4920. \t\t\t\t\t\t\t</div>
  4921. \t\t\t\t\t\t</div>
  4922. \t\t\t\t\t</div>
  4923. \t\t\t\t\t<div class=\"col-lg-2 col-md-6 col-sm-6 mb-4 mb-lg-0\">
  4924. \t\t\t\t\t\t<div class=\"single-footer-widget\">
  4925. \t\t\t\t\t\t\t<h6 class=\"footer-widget-title\">Liens rapides</h6>
  4926. \t\t\t\t\t\t\t<ul class=\"footer-list\">
  4927. \t\t\t\t\t\t\t\t<li>
  4928. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_home') }}\">
  4929. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Accueil</a>
  4930. \t\t\t\t\t\t\t\t</li>
  4931. \t\t\t\t\t\t\t\t<li>
  4932. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_listing') }}\">
  4933. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Produits</a>
  4934. \t\t\t\t\t\t\t\t</li>
  4935. \t\t\t\t\t\t\t\t<li>
  4936. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_shops_list') }}\">
  4937. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Boutiques</a>
  4938. \t\t\t\t\t\t\t\t</li>
  4939. \t\t\t\t\t\t\t\t{% if app.user %}
  4940. \t\t\t\t\t\t\t\t\t<li>
  4941. \t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_account_index') }}\">
  4942. \t\t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Mon compte</a>
  4943. \t\t\t\t\t\t\t\t\t</li>
  4944. \t\t\t\t\t\t\t\t{% else %}
  4945. \t\t\t\t\t\t\t\t\t<li>
  4946. \t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_app_login') }}\">
  4947. \t\t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Se connecter</a>
  4948. \t\t\t\t\t\t\t\t\t</li>
  4949. \t\t\t\t\t\t\t\t\t<li>
  4950. \t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_app_register') }}\">
  4951. \t\t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;S'inscrire</a>
  4952. \t\t\t\t\t\t\t\t\t</li>
  4953. \t\t\t\t\t\t\t\t{% endif %}
  4954. \t\t\t\t\t\t\t</ul>
  4955. \t\t\t\t\t\t</div>
  4956. \t\t\t\t\t</div>
  4957. \t\t\t\t\t<div class=\"col-lg-2 col-md-6 col-sm-6 mb-4 mb-lg-0\">
  4958. \t\t\t\t\t\t<div class=\"single-footer-widget\">
  4959. \t\t\t\t\t\t\t<h6 class=\"footer-widget-title\">Pour les vendeurs</h6>
  4960. \t\t\t\t\t\t\t<ul class=\"footer-list\">
  4961. \t\t\t\t\t\t\t\t<li>
  4962. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('seller_index') }}\">
  4963. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Ouvrir une boutique</a>
  4964. \t\t\t\t\t\t\t\t</li>
  4965. \t\t\t\t\t\t\t\t<li>
  4966. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('seller_help_how_to_sell') }}\">
  4967. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Comment vendre</a>
  4968. \t\t\t\t\t\t\t\t</li>
  4969. \t\t\t\t\t\t\t\t<li>
  4970. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('seller_help_pricing') }}\">
  4971. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Tarifs</a>
  4972. \t\t\t\t\t\t\t\t</li>
  4973. \t\t\t\t\t\t\t\t<li>
  4974. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('seller_help_support') }}\">
  4975. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Support vendeur</a>
  4976. \t\t\t\t\t\t\t\t</li>
  4977. \t\t\t\t\t\t\t</ul>
  4978. \t\t\t\t\t\t</div>
  4979. \t\t\t\t\t</div>
  4980. \t\t\t\t\t<div class=\"col-lg-2 col-md-6 col-sm-6 mb-4 mb-lg-0\">
  4981. \t\t\t\t\t\t<div class=\"single-footer-widget\">
  4982. \t\t\t\t\t\t\t<h6 class=\"footer-widget-title\">Support</h6>
  4983. \t\t\t\t\t\t\t<ul class=\"footer-list\">
  4984. \t\t\t\t\t\t\t\t<li>
  4985. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_help') }}\">
  4986. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Centre d'Aide</a>
  4987. \t\t\t\t\t\t\t\t</li>
  4988. \t\t\t\t\t\t\t\t<li>
  4989. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_contact') }}\">
  4990. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Contactez-nous</a>
  4991. \t\t\t\t\t\t\t\t</li>
  4992. \t\t\t\t\t\t\t\t<li>
  4993. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_faq') }}\">
  4994. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;FAQ</a>
  4995. \t\t\t\t\t\t\t\t</li>
  4996. \t\t\t\t\t\t\t\t<li>
  4997. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_privacy') }}\">
  4998. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Politique de Confidentialité</a>
  4999. \t\t\t\t\t\t\t\t</li>
  5000. \t\t\t\t\t\t\t\t<li>
  5001. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_terms') }}\">
  5002. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-angle-right me-2\"></i>&nbsp;Conditions d'Utilisation</a>
  5003. \t\t\t\t\t\t\t\t</li>
  5004. \t\t\t\t\t\t\t</ul>
  5005. \t\t\t\t\t\t</div>
  5006. \t\t\t\t\t</div>
  5007. \t\t\t\t\t<div class=\"col-lg-3 col-md-6 col-sm-6\">
  5008. \t\t\t\t\t\t<div class=\"single-footer-widget\">
  5009. \t\t\t\t\t\t\t<h6 class=\"footer-widget-title\">Newsletter</h6>
  5010. \t\t\t\t\t\t\t<p class=\"footer-newsletter-text\">Restez informé des dernières nouveautés</p>
  5011. \t\t\t\t\t\t\t<div class=\"footer-newsletter-wrapper\" id=\"mc_embed_signup\">
  5012. \t\t\t\t\t\t\t\t<form action=\"{{ path('ui_newsletter_subscribe') }}\" method=\"post\" class=\"footer-newsletter-form\">
  5013. \t\t\t\t\t\t\t\t\t<div class=\"newsletter-input-group\">
  5014. \t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-envelope newsletter-icon\"></i>
  5015. \t\t\t\t\t\t\t\t\t\t<input class=\"form-control newsletter-input\" name=\"email\" placeholder=\"Votre email\" required type=\"email\">
  5016. \t\t\t\t\t\t\t\t\t\t<button type=\"submit\" class=\"newsletter-btn\" aria-label=\"S'abonner\">
  5017. \t\t\t\t\t\t\t\t\t\t\t<span class=\"newsletter-btn-icon\">
  5018. \t\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-paper-plane\" aria-hidden=\"true\"></i>
  5019. \t\t\t\t\t\t\t\t\t\t\t</span>
  5020. \t\t\t\t\t\t\t\t\t\t\t<span class=\"newsletter-btn-loader\" style=\"display: none;\">
  5021. \t\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-spinner fa-spin\" aria-hidden=\"true\"></i>
  5022. \t\t\t\t\t\t\t\t\t\t\t</span>
  5023. \t\t\t\t\t\t\t\t\t\t</button>
  5024. \t\t\t\t\t\t\t\t\t</div>
  5025. \t\t\t\t\t\t\t\t</form>
  5026. \t\t\t\t\t\t\t</div>
  5027. \t\t\t\t\t\t\t<div class=\"footer-trust-badges mt-3\">
  5028. \t\t\t\t\t\t\t\t<div class=\"trust-item\">
  5029. \t\t\t\t\t\t\t\t\t<i class=\"fa fa-shield\"></i>
  5030. \t\t\t\t\t\t\t\t\t<span>Paiement sécurisé</span>
  5031. \t\t\t\t\t\t\t\t</div>
  5032. \t\t\t\t\t\t\t\t<div class=\"trust-item\">
  5033. \t\t\t\t\t\t\t\t\t<i class=\"fa fa-truck\"></i>
  5034. \t\t\t\t\t\t\t\t\t<span>Livraison rapide</span>
  5035. \t\t\t\t\t\t\t\t</div>
  5036. \t\t\t\t\t\t\t</div>
  5037. \t\t\t\t\t\t</div>
  5038. \t\t\t\t\t</div>
  5039. \t\t\t\t</div>
  5040. \t\t\t\t<div class=\"footer-divider\"></div>
  5041. \t\t\t\t<div class=\"footer-bottom d-flex justify-content-center align-items-center flex-wrap\">
  5042. \t\t\t\t\t<p class=\"footer-text m-0\">
  5043. \t\t\t\t\t\tCopyright &copy;<script>
  5044. \t\t\t\t\t\t\tdocument.write(new Date().getFullYear());
  5045. \t\t\t\t\t\t</script>
  5046. \t\t\t\t\t\tTous droits réservés | Ce site a été fait avec
  5047. \t\t\t\t\t\t<i class=\"fa fa-heart-o\" aria-hidden=\"true\" style=\"color: #dc3545;\"></i>
  5048. \t\t\t\t\t\tpar
  5049. \t\t\t\t\t\t<a href=\"https://tech.foulgor.com\" target=\"_blank\" style=\"color: #ffa200;\">Foulgor Tech</a>
  5050. \t\t\t\t\t</p>
  5051. \t\t\t\t</div>
  5052. \t\t\t</div>
  5053. \t\t</footer>
  5055. \t\t<style>
  5056. \t\t\t.search-results-container {
  5057. \t\t\t\tposition: absolute;
  5058. \t\t\t\ttop: 100%;
  5059. \t\t\t\tleft: 15px;
  5060. \t\t\t\tright: 15px;
  5061. \t\t\t\tbackground: #fff;
  5062. \t\t\t\tborder: 1px solid #ddd;
  5063. \t\t\t\tborder-top: none;
  5064. \t\t\t\tz-index: 9999;
  5065. \t\t\t\tbox-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  5066. \t\t\t\tmax-height: 400px;
  5067. \t\t\t\toverflow-y: auto;
  5068. \t\t\t\tdisplay: none;
  5069. \t\t\t\tborder-radius: 0 0 4px 4px;
  5070. \t\t\t}
  5071. \t\t\t.search-results-container .list-group-item {
  5072. \t\t\t\tborder-left: none;
  5073. \t\t\t\tborder-right: none;
  5074. \t\t\t\tborder-radius: 0;
  5075. \t\t\t\tcursor: pointer;
  5076. \t\t\t\tpadding: 12px 15px;
  5077. \t\t\t\ttransition: background-color 0.2s ease;
  5078. \t\t\t}
  5079. \t\t\t.search-results-container .list-group-item:hover {
  5080. \t\t\t\tbackground-color: #f8f9fa;
  5081. \t\t\t}
  5082. \t\t\t.search-results-container .list-group-item i {
  5083. \t\t\t\tcolor: #777;
  5084. \t\t\t\tfont-size: 1.2rem;
  5085. \t\t\t}
  5086. \t\t\t/* Ensure container is relative for absolute positioning of results */
  5087. \t\t\t#search_input_box .container {
  5088. \t\t\t\tposition: relative;
  5089. \t\t\t}
  5090. \t\t\t#search_input_box .form-control {
  5091. \t\t\t\tflex: 1;
  5092. \t\t\t\tpadding-right: 10px;
  5093. \t\t\t}
  5094. \t\t\t#search_input_box #search_submit_btn {
  5095. \t\t\t\tbackground: transparent;
  5096. \t\t\t\tborder: 0;
  5097. \t\t\t\tcolor: #fff;
  5098. \t\t\t\tpadding: 0 15px;
  5099. \t\t\t\tcursor: pointer;
  5100. \t\t\t\ttransition: opacity 0.3s ease;
  5101. \t\t\t}
  5102. \t\t\t#search_input_box #search_submit_btn:hover {
  5103. \t\t\t\topacity: 0.8;
  5104. \t\t\t}
  5105. \t\t\t#search_input_box .btn-clear-search {
  5106. \t\t\t\tbackground: transparent;
  5107. \t\t\t\tborder: 0;
  5108. \t\t\t\tcolor: #fff;
  5109. \t\t\t\tpadding: 0 10px;
  5110. \t\t\t\tcursor: pointer;
  5111. \t\t\t\ttransition: opacity 0.3s ease;
  5112. \t\t\t\tdisplay: none;
  5113. \t\t\t}
  5114. \t\t\t#search_input_box .btn-clear-search:hover {
  5115. \t\t\t\topacity: 0.8;
  5116. \t\t\t}
  5117. \t\t\t#search_input_box .btn-clear-search i {
  5118. \t\t\t\tfont-size: 1.1rem;
  5119. \t\t\t}
  5120. \t\t\t#search_input_box form {
  5121. \t\t\t\tposition: relative;
  5122. \t\t\t\talign-items: center;
  5123. \t\t\t}
  5124. \t\t</style>
  5125. \t\t<script>
  5126. \t\t\t// Debounced autocomplete for header search
  5127. (function () {
  5128. const input = document.getElementById('search_input');
  5129. const box = document.getElementById('search_results');
  5130. const searchForm = document.getElementById('search_form');
  5131. const clearSearchBtn = document.getElementById('clear_search_btn');
  5132. const closeSearchBtn = document.getElementById('close_search');
  5134. if (! input || ! box) 
  5135. return;
  5138. // Fonction pour effacer la recherche
  5139. function clearSearch() {
  5140. input.value = '';
  5141. box.style.display = 'none';
  5142. box.innerHTML = '';
  5143. if (clearSearchBtn) {
  5144. clearSearchBtn.style.display = 'none';
  5145. }
  5146. // Si on est sur la page listing, utiliser AJAX pour mettre à jour
  5147. if (typeof currentFilters !== 'undefined') {
  5148. currentFilters.q = '';
  5149. currentFilters.page = 1;
  5150. if (typeof applyFilters === 'function') {
  5151. applyFilters();
  5152. }
  5153. if (typeof updateActiveFilters === 'function') {
  5154. updateActiveFilters();
  5155. }
  5156. } else { // Sinon, rediriger vers la page listing sans recherche
  5157. window.location.href = '{{ path('ui_listing') }}';
  5158. }
  5159. }
  5161. // Bouton pour effacer la recherche
  5162. if (clearSearchBtn) {
  5163. clearSearchBtn.addEventListener('click', function (e) {
  5164. e.preventDefault();
  5165. e.stopPropagation();
  5166. clearSearch();
  5167. });
  5168. }
  5170. // Bouton de soumission de recherche
  5171. var searchSubmitBtn = document.getElementById('search_submit_btn');
  5172. if (searchSubmitBtn) {
  5173. searchSubmitBtn.addEventListener('click', function (e) {
  5174. e.preventDefault();
  5175. e.stopPropagation();
  5176. const q = input.value.trim();
  5177. if (q.length === 0) {
  5178. clearSearch();
  5179. return false;
  5180. }
  5182. // Si on est sur la page listing, utiliser AJAX
  5183. if (typeof currentFilters !== 'undefined' && typeof applyFilters === 'function') {
  5184. currentFilters.q = q;
  5185. currentFilters.page = 1;
  5186. applyFilters();
  5187. if (typeof updateActiveFilters === 'function') {
  5188. updateActiveFilters();
  5189. }
  5190. // Fermer la boîte de recherche
  5191. if (closeSearchBtn) {
  5192. closeSearchBtn.click();
  5193. }
  5194. } else { // Sinon, rediriger vers la page listing avec la recherche
  5195. const listingUrl = '{{ path('ui_listing') }}' + '?q=' + encodeURIComponent(q);
  5196. window.location.href = listingUrl;
  5197. }
  5198. return false;
  5199. });
  5200. }
  5202. // Gestion du formulaire de recherche
  5203. if (searchForm) {
  5204. searchForm.addEventListener('submit', function (e) {
  5205. e.preventDefault();
  5206. e.stopPropagation();
  5207. const q = input.value.trim();
  5208. if (q.length === 0) {
  5209. clearSearch();
  5210. return;
  5211. }
  5213. // Si on est sur la page listing, utiliser AJAX
  5214. if (typeof currentFilters !== 'undefined' && typeof applyFilters === 'function') {
  5215. currentFilters.q = q;
  5216. currentFilters.page = 1;
  5217. applyFilters();
  5218. if (typeof updateActiveFilters === 'function') {
  5219. updateActiveFilters();
  5220. }
  5221. // Fermer la boîte de recherche
  5222. if (closeSearchBtn) {
  5223. closeSearchBtn.click();
  5224. }
  5225. } else { // Sinon, rediriger vers la page listing avec la recherche
  5226. const listingUrl = '{{ path('ui_listing') }}' + '?q=' + encodeURIComponent(q);
  5227. window.location.href = listingUrl;
  5228. }
  5229. return false;
  5230. });
  5231. }
  5233. let t = null;
  5234. input.addEventListener('input', function () {
  5235. const q = input.value.trim();
  5236. clearTimeout(t);
  5237. if (q.length === 0) {
  5238. box.style.display = 'none';
  5239. box.innerHTML = '';
  5240. // Afficher/masquer le bouton clear
  5241. if (clearSearchBtn) {
  5242. clearSearchBtn.style.display = 'none';
  5243. }
  5244. return;
  5245. }
  5246. // Afficher le bouton clear
  5247. if (clearSearchBtn) {
  5248. clearSearchBtn.style.display = 'block';
  5249. }
  5250. t = setTimeout(() => fetchSuggestions(q), 300);
  5251. });
  5253. function fetchSuggestions(q) {
  5254. const url = '{{ path('ui_api_search_suggest') }}' + '?q=' + encodeURIComponent(q);
  5255. fetch(url).then(r => r.json()).then(data => {
  5256. if (!data.success) {
  5257. box.style.display = 'none';
  5258. return;
  5259. }
  5260. renderSuggestions(data.results || []);
  5261. }).catch(() => {
  5262. box.style.display = 'none';
  5263. });
  5264. }
  5266. function renderSuggestions(items) {
  5267. if (! items.length) {
  5268. box.style.display = 'none';
  5269. box.innerHTML = '';
  5270. return;
  5271. }
  5272. box.innerHTML = items.map(it => suggestionItem(it)).join('');
  5273. box.style.display = 'block';
  5274. }
  5276. function suggestionItem(it) {
  5277. const icon = it.type === 'product' ? 'ti-package' : (it.type === 'shop' ? 'ti-briefcase' : (it.type === 'category' ? 'ti-layers' : 'ti-tag'));
  5278. const typeLabel = it.type === 'product' ? 'Produit' : (it.type === 'shop' ? 'Boutique' : (it.type === 'category' ? 'Catégorie' : 'Tag'));
  5279. return '<a href=\"' + it.url + '\" class=\"list-group-item list-group-item-action d-flex align-items-center\">' + '<i class=\"' + icon + ' me-3\"></i>' + '<span class=\"flex-grow-1\">' + escapeHtml(it.label) + '</span>' + '<span class=\"badge bg-light text-dark ms-2\">' + typeLabel + '</span>' + '</a>';
  5280. }
  5282. function escapeHtml(s) {
  5283. return s.replace(/[&<>\"]+/g, c => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;'}[c]));
  5284. }
  5286. document.addEventListener('click', function (e) {
  5287. if (! box.contains(e.target) && e.target !== input) {
  5288. box.style.display = 'none';
  5289. }
  5290. });
  5292. window.handleSearchSubmit = function (e) {
  5293. if (e) 
  5294. e.preventDefault();
  5297. const first = box.querySelector('a');
  5298. if (first) {
  5299. window.location.href = first.getAttribute('href');
  5300. return false;
  5301. }
  5302. // fallback to listing page search by name
  5303. const q = input.value.trim();
  5304. if (q.length) { // Si on est sur la page listing, utiliser AJAX
  5305. if (typeof currentFilters !== 'undefined') {
  5306. currentFilters.q = q;
  5307. currentFilters.page = 1;
  5308. if (typeof applyFilters === 'function') {
  5309. applyFilters();
  5310. }
  5311. if (typeof updateActiveFilters === 'function') {
  5312. updateActiveFilters();
  5313. }
  5314. } else {
  5315. window.location.href = '{{ path('ui_listing') }}' + '?q=' + encodeURIComponent(q);
  5316. }
  5317. }
  5318. return false;
  5319. }
  5321. // Gestion de la touche Enter dans le champ de recherche
  5322. if (input) {
  5323. input.addEventListener('keydown', function (e) {
  5324. if (e.key === 'Enter' || e.keyCode === 13) {
  5325. e.preventDefault();
  5326. e.stopPropagation();
  5327. const q = input.value.trim();
  5328. if (q.length === 0) {
  5329. clearSearch();
  5330. return false;
  5331. }
  5333. // Si on est sur la page listing, utiliser AJAX
  5334. if (typeof currentFilters !== 'undefined' && typeof applyFilters === 'function') {
  5335. currentFilters.q = q;
  5336. currentFilters.page = 1;
  5337. applyFilters();
  5338. if (typeof updateActiveFilters === 'function') {
  5339. updateActiveFilters();
  5340. }
  5341. // Fermer la boîte de recherche
  5342. if (closeSearchBtn) {
  5343. closeSearchBtn.click();
  5344. }
  5345. } else { // Sinon, rediriger vers la page listing avec la recherche
  5346. const listingUrl = '{{ path('ui_listing') }}' + '?q=' + encodeURIComponent(q);
  5347. window.location.href = listingUrl;
  5348. }
  5349. return false;
  5350. }
  5351. });
  5352. }
  5354. // Ajouter un event listener au bouton de soumission (réutiliser la variable si elle existe déjà)
  5355. if (!searchSubmitBtn) {
  5356.     searchSubmitBtn = document.getElementById('search_submit_btn');
  5357. }
  5358. if (searchSubmitBtn) {
  5359. searchSubmitBtn.addEventListener('click', function (e) {
  5360. e.preventDefault();
  5361. e.stopPropagation();
  5362. const q = input.value.trim();
  5363. if (q.length === 0) {
  5364. clearSearch();
  5365. return false;
  5366. }
  5368. // Si on est sur la page listing, utiliser AJAX
  5369. if (typeof currentFilters !== 'undefined' && typeof applyFilters === 'function') {
  5370. currentFilters.q = q;
  5371. currentFilters.page = 1;
  5372. applyFilters();
  5373. if (typeof updateActiveFilters === 'function') {
  5374. updateActiveFilters();
  5375. }
  5376. // Fermer la boîte de recherche
  5377. if (closeSearchBtn) {
  5378. closeSearchBtn.click();
  5379. }
  5380. } else { // Sinon, rediriger vers la page listing avec la recherche
  5381. const listingUrl = '{{ path('ui_listing') }}' + '?q=' + encodeURIComponent(q);
  5382. window.location.href = listingUrl;
  5383. }
  5384. return false;
  5385. });
  5386. }
  5388. // Afficher le bouton clear au chargement si une recherche est active
  5389. document.addEventListener('DOMContentLoaded', function () {
  5390. const q = input.value.trim();
  5391. if (q.length > 0 && clearSearchBtn) {
  5392. clearSearchBtn.style.display = 'block';
  5393. }
  5394. });
  5395. })();
  5397. // Gestion des mega-menus avec clic (comme la barre de recherche)
  5398. document.addEventListener('DOMContentLoaded', function () {
  5399. const dropdownItems = document.querySelectorAll('.nav-item.dropdown');
  5401. dropdownItems.forEach(function (item) {
  5402. const dropdownToggle = item.querySelector('.dropdown-toggle');
  5403. const dropdownMenu = item.querySelector('.mega-menu');
  5405. if (! dropdownToggle || ! dropdownMenu) 
  5406. return;
  5410. // Fermer les autres menus quand on ouvre un nouveau
  5411. function closeAllMenus() {
  5412. dropdownItems.forEach(function (otherItem) {
  5413. const otherMenu = otherItem.querySelector('.mega-menu');
  5414. if (otherMenu && otherMenu !== dropdownMenu) {
  5415. \$(otherMenu).slideUp(300);
  5416. otherMenu.classList.remove('active');
  5417. }
  5418. });
  5419. }
  5421. // Toggle au clic (comme la barre de recherche)
  5422. dropdownToggle.addEventListener('click', function (e) {
  5423. e.preventDefault();
  5424. e.stopPropagation();
  5426. closeAllMenus();
  5428. if (dropdownMenu.classList.contains('active')) { // Fermer le menu
  5429. dropdownMenu.style.opacity = '0';
  5430. dropdownMenu.style.visibility = 'hidden';
  5431. dropdownMenu.style.transform = 'translateX(-50%) translateY(-10px)';
  5432. setTimeout(() => {
  5433. dropdownMenu.classList.remove('active');
  5434. dropdownMenu.style.display = 'none';
  5435. }, 300);
  5436. } else { // Ouvrir le menu
  5437. dropdownMenu.style.display = 'block';
  5438. setTimeout(() => {
  5439. dropdownMenu.classList.add('active');
  5440. dropdownMenu.style.opacity = '1';
  5441. dropdownMenu.style.visibility = 'visible';
  5442. dropdownMenu.style.transform = 'translateX(-50%) translateY(0)';
  5443. }, 10);
  5444. }
  5445. });
  5447. // Fermer au clic en dehors
  5448. document.addEventListener('click', function (e) {
  5449. if (! item.contains(e.target) && dropdownMenu.classList.contains('active')) {
  5450. dropdownMenu.style.opacity = '0';
  5451. dropdownMenu.style.visibility = 'hidden';
  5452. dropdownMenu.style.transform = 'translateX(-50%) translateY(-10px)';
  5453. setTimeout(() => {
  5454. dropdownMenu.classList.remove('active');
  5455. dropdownMenu.style.display = 'none';
  5456. }, 300);
  5457. }
  5458. });
  5460. // Animation des éléments du menu
  5461. const menuItems = dropdownMenu.querySelectorAll('.dropdown-item a');
  5462. menuItems.forEach(function (menuItem, index) {
  5463. menuItem.style.animationDelay = (index * 0.05) + 's';
  5464. });
  5465. });
  5467. // Gestion des clics sur mobile
  5468. if (window.innerWidth <= 768) {
  5469. dropdownItems.forEach(function (item) {
  5470. const dropdownToggle = item.querySelector('.dropdown-toggle');
  5471. const dropdownMenu = item.querySelector('.mega-menu');
  5473. dropdownToggle.addEventListener('click', function (e) {
  5474. e.preventDefault();
  5476. // Fermer tous les autres menus
  5477. dropdownItems.forEach(function (otherItem) {
  5478. if (otherItem !== item) {
  5479. const otherMenu = otherItem.querySelector('.mega-menu');
  5480. otherMenu.style.opacity = '0';
  5481. otherMenu.style.visibility = 'hidden';
  5482. otherMenu.style.transform = 'translateY(-10px)';
  5483. }
  5484. });
  5486. // Toggle le menu actuel
  5487. if (dropdownMenu.style.opacity === '1') {
  5488. dropdownMenu.style.opacity = '0';
  5489. dropdownMenu.style.visibility = 'hidden';
  5490. dropdownMenu.style.transform = 'translateY(-10px)';
  5491. } else {
  5492. dropdownMenu.style.opacity = '1';
  5493. dropdownMenu.style.visibility = 'visible';
  5494. dropdownMenu.style.transform = 'translateY(0)';
  5495. }
  5496. });
  5497. });
  5498. }
  5500. // Fermer les menus quand on clique ailleurs
  5501. document.addEventListener('click', function (e) {
  5502. if (! e.target.closest('.nav-item.dropdown')) {
  5503. dropdownItems.forEach(function (item) {
  5504. const dropdownMenu = item.querySelector('.mega-menu');
  5505. dropdownMenu.style.opacity = '0';
  5506. dropdownMenu.style.visibility = 'hidden';
  5507. dropdownMenu.style.transform = 'translateY(-10px)';
  5508. });
  5509. }
  5510. });
  5511. });
  5512. \t\t</script>
  5513. \t\t<!-- End footer Area -->
  5515. \t\t<script src=\"{{ asset('ui/js/vendor/jquery-2.2.4.min.js') }}\"></script>
  5516. \t\t<script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js\"></script>
  5517. \t\t<script>
  5518. \t\t\t// Initialiser le collapse Bootstrap 5 pour le menu hamburger après chargement de Bootstrap
  5519. document.addEventListener('DOMContentLoaded', function () { // Attendre que Bootstrap soit complètement chargé
  5520. if (typeof bootstrap !== 'undefined') {
  5521. const navbarToggler = document.querySelector('.navbar-toggler');
  5522. const navbarCollapse = document.getElementById('navbarSupportedContent');
  5524. if (navbarToggler && navbarCollapse) {
  5525. // Bootstrap 5 devrait gérer automatiquement avec data-bs-toggle
  5526. // Mais on s'assure que ça fonctionne en écoutant les événements
  5527. navbarCollapse.addEventListener('show.bs.collapse', function () {
  5528. navbarToggler.setAttribute('aria-expanded', 'true');
  5529. navbarToggler.classList.add('active');
  5530. });
  5532. navbarCollapse.addEventListener('hide.bs.collapse', function () {
  5533. navbarToggler.setAttribute('aria-expanded', 'false');
  5534. navbarToggler.classList.remove('active');
  5535. });
  5536. }
  5537. }
  5538. });
  5539. \t\t</script>
  5540. \t\t<script src=\"https://unpkg.com/dropzone@5/dist/min/dropzone.min.js\"></script>
  5541. \t\t<script src=\"{{ asset('ui/js/jquery.ajaxchimp.min.js') }}\"></script>
  5542. \t\t<script src=\"{{ asset('ui/js/jquery.nice-select.min.js') }}\"></script>
  5543. \t\t<script src=\"{{ asset('ui/js/jquery.sticky.js') }}\"></script>
  5544. \t\t<script src=\"{{ asset('ui/js/nouislider.min.js') }}\"></script>
  5545. \t\t<script src=\"{{ asset('ui/js/countdown.js') }}\"></script>
  5546. \t\t<script src=\"{{ asset('ui/js/jquery.magnific-popup.min.js') }}\"></script>
  5547. \t\t<script src=\"{{ asset('ui/js/owl.carousel.min.js') }}\"></script>
  5548. \t\t<script src=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyCjCGmQ0Uq4exrzdcL6rvxywDDOvfAu6eE\"></script>
  5549. \t\t<script src=\"{{ asset('ui/js/gmaps.min.js') }}\"></script>
  5550. \t\t<script src=\"{{ asset('ui/js/main.js') }}\"></script>
  5552. \t\t{{ encore_entry_script_tags('app') }}
  5554. \t\t<!-- PWA Service Worker Registration -->
  5555. \t\t<script>
  5556. \t\t\t// Enregistrement du Service Worker
  5557. if ('serviceWorker' in navigator) {
  5558. window.addEventListener('load', () => {
  5559. navigator.serviceWorker.register('{{ asset('sw.js') }}').then((registration) => {
  5560. console.log('Service Worker enregistré avec succès:', registration.scope);
  5562. // Vérifie les mises à jour du service worker
  5563. registration.addEventListener('updatefound', () => {
  5564. const newWorker = registration.installing;
  5565. newWorker.addEventListener('statechange', () => {
  5566. if (newWorker.state === 'installed' && navigator.serviceWorker.controller) { // Nouveau service worker disponible
  5567. if (confirm('Une nouvelle version de MaketOu est disponible. Voulez-vous l\\'installer maintenant ?')) {
  5568. newWorker.postMessage({type: 'SKIP_WAITING'});
  5569. window.location.reload();
  5570. }
  5571. }
  5572. });
  5573. });
  5574. }).catch((error) => {
  5575. console.log('Échec de l\\'enregistrement du Service Worker:', error);
  5576. });
  5578. // Écoute les messages du service worker
  5579. navigator.serviceWorker.addEventListener('message', (event) => {
  5580. console.log('Message du Service Worker:', event.data);
  5581. });
  5582. });
  5583. }
  5584. \t\t</script>
  5586. \t\t<!-- PWA Install Script -->
  5587. \t\t<script src=\"{{ asset('js/pwa-install.js') }}\"></script>
  5589. \t\t<script>
  5590. \t\t\t// Charger les compteurs au chargement de la page
  5591. document.addEventListener('DOMContentLoaded', function () {
  5592. {% if app.user %}
  5593. loadNotificationCount();
  5594. // Délai pour s'assurer que la session est bien établie après connexion
  5595. setTimeout(function () {
  5596. loadComparisonCount();
  5597. }, 500);{% endif %}
  5599. // Gérer le bouton de recherche mobile
  5600. const searchMobileBtn = document.getElementById('searchMobileBtn');
  5601. if (searchMobileBtn) {
  5602. searchMobileBtn.addEventListener('click', function (e) {
  5603. e.preventDefault();
  5604. // Utiliser le même comportement que le bouton desktop
  5605. const searchBox = document.getElementById('search_input_box');
  5606. if (searchBox) {
  5607. searchBox.style.display = 'block';
  5608. const searchInput = document.getElementById('search_input');
  5609. if (searchInput) {
  5610. setTimeout(() => searchInput.focus(), 100);
  5611. }
  5612. }
  5613. });
  5614. }
  5615. });
  5617. function loadNotificationCount() {
  5618. {% if app.user %}
  5619. fetch('{{ path(\"api_notifications_count\") }}').then(response => {
  5620. if (!response.ok) {
  5621. throw new Error('Erreur HTTP: ' + response.status);
  5622. }
  5623. return response.json();
  5624. }).then(data => {
  5625. const count = data.count || 0;
  5627. // Mettre à jour tous les badges de notification
  5628. const badges = [document.getElementById('notificationBadge'), document.getElementById('notificationBadgeMobile'), document.querySelector('.notification-badge')].filter(badge => badge !== null);
  5630. badges.forEach(badge => {
  5631. if (count > 0) {
  5632. badge.textContent = count;
  5633. badge.style.display = 'flex';
  5634. badge.style.color = 'white';
  5635. badge.style.backgroundColor = '#dc3545';
  5636. } else {
  5637. badge.style.display = 'none';
  5638. }
  5639. });
  5641. // Si on est sur la page des notifications, mettre à jour aussi le contenu de la page
  5642. if (typeof updateNotificationPageContent === 'function') {
  5643. updateNotificationPageContent(count);
  5644. }
  5645. }).catch(error => {
  5646. console.error('Erreur lors du chargement du compteur de notifications:', error);
  5647. });{% endif %}
  5648. }
  5650. // Exposer la fonction globalement pour qu'elle puisse être appelée depuis d'autres pages
  5651. window.loadNotificationCount = loadNotificationCount;
  5653. // Recharger le compteur toutes les 30 secondes pour garder les données à jour
  5654. {% if app.user %}
  5655. setInterval(function () {
  5656. loadNotificationCount();
  5657. }, 30000);{% endif %}function loadComparisonCount() {
  5658. {% if app.user %}
  5659. // Ne pas appeler l'API si on est sur une page d'erreur ou de redirection
  5660. if (window.location.pathname.includes('/api/') || window.location.pathname.includes('/login')) {
  5661. return;
  5662. }
  5664. // Utiliser un try-catch pour éviter toute redirection
  5665. try {
  5666. fetch('{{ path(\"ui_api_comparison_count\") }}', {
  5667. method: 'GET',
  5668. headers: {
  5669. 'X-Requested-With': 'XMLHttpRequest',
  5670. 'Accept': 'application/json'
  5671. },
  5672. credentials: 'same-origin',
  5673. redirect: 'error' // Empêcher les redirections automatiques
  5674. }).then(response => { // Vérifier si la réponse est OK
  5675. if (!response.ok) { // Si c'est une redirection (301, 302, etc.) ou une erreur d'authentification, ignorer silencieusement
  5676. if (response.status >= 300 && response.status < 400) {
  5677. console.warn('Redirection détectée, arrêt de la requête');
  5678. return null;
  5679. }
  5680. if (response.status === 401 || response.status === 403) {
  5681. console.warn('Utilisateur non authentifié pour la comparaison');
  5682. return null;
  5683. }
  5684. // Pour les autres erreurs, throw pour être capturé par catch
  5685. throw new Error('Erreur HTTP: ' + response.status);
  5686. }
  5688. // Vérifier que c'est bien du JSON
  5689. const contentType = response.headers.get('content-type');
  5690. if (! contentType || ! contentType.includes('application/json')) { // Si ce n'est pas du JSON, c'est probablement une redirection HTML
  5691. console.warn('La réponse n\\'est pas du JSON, probable redirection');
  5692. return null;
  5693. }
  5695. return response.json();
  5696. }).then(data => { // Si data est null (redirection ou erreur), ne rien faire
  5697. if (!data || typeof data.count === 'undefined') {
  5698. return;
  5699. }
  5701. // Mettre à jour les badges desktop et mobile
  5702. const badges = [document.getElementById('comparisonBadge'), document.getElementById('comparisonBadgeMobile')];
  5703. badges.forEach(badge => {
  5704. if (badge) {
  5705. if (data.count > 0) {
  5706. badge.textContent = data.count;
  5707. badge.style.display = 'flex';
  5708. } else {
  5709. badge.style.display = 'none';
  5710. }
  5711. }
  5712. });
  5713. }).catch(error => { // Ne pas afficher d'erreur si c'est juste une absence d'authentification ou une redirection
  5714. if (error.message && !error.message.includes('401') && !error.message.includes('403') && !error.message.includes('redirect')) {
  5715. console.error('Erreur lors du chargement du compteur de comparaison:', error);
  5716. }
  5717. // Empêcher toute redirection vers l'URL de l'API
  5718. return false;
  5719. });
  5720. } catch (e) { // Capturer toute erreur qui pourrait causer une redirection
  5721. console.warn('Erreur lors de l\\'appel à l\\'API de comparaison:', e);
  5722. }
  5723. {% endif %}
  5724. }
  5726. // Fonction globale pour gérer la comparaison
  5727. function toggleComparison(productId, element) {
  5728. if (! element) {
  5729. element = document.querySelector(`.comparison-btn[data-product-id=\"\${productId}\"]`);
  5730. }
  5732. if (! element) {
  5733. console.error('Bouton de comparaison non trouvé pour le produit', productId);
  5734. return;
  5735. }
  5737. const originalHtml = element.innerHTML;
  5738. // Désactiver le bouton/lien
  5739. if (element.tagName === 'BUTTON') {
  5740. element.disabled = true;
  5741. } else {
  5742. element.style.pointerEvents = 'none';
  5743. element.style.opacity = '0.6';
  5744. } element.innerHTML = '<span class=\"spinner-border spinner-border-sm\"></span>';
  5746. // Vérifier d'abord si le produit est déjà en comparaison
  5747. let isInComparison = false;
  5748. fetch(`/api/comparison/status/\${productId}`).then(response => response.json()).then(data => {
  5749. isInComparison = data.inComparison;
  5750. const url = isInComparison ? `/api/comparison/remove/\${productId}` : `/api/comparison/add/\${productId}`;
  5752. return fetch(url, {
  5753. method: 'POST',
  5754. headers: {
  5755. 'Content-Type': 'application/json',
  5756. 'X-Requested-With': 'XMLHttpRequest'
  5757. }
  5758. });
  5759. }).then(response => response.json()).then(data => {
  5760. if (data.success) { // Mettre à jour le compteur
  5761. loadComparisonCount();
  5763. // Mettre à jour l'apparence du bouton
  5764. if (element) { // Inverser l'état (car on vient de le changer)
  5765. const newState = ! isInComparison;
  5767. // Restaurer le HTML original puis mettre à jour
  5768. element.innerHTML = originalHtml;
  5770. if (newState) {
  5771. element.classList.add('active');
  5772. // Mettre à jour le texte pour les deux types de boutons
  5773. const textEl = element.querySelector('.comparison-text') || element.querySelector('.hover-text') || element.querySelector('p.hover-text');
  5774. if (textEl) 
  5775. textEl.textContent = 'En comparaison';
  5779. // Mettre à jour l'icône si nécessaire (chercher dans span ou i)
  5780. const iconEl = element.querySelector('.lnr-sync, span.lnr-sync, [class*=\"sync\"], i[class*=\"sync\"]');
  5781. if (iconEl) {
  5782. iconEl.style.color = '#28a745';
  5783. iconEl.classList.add('active');
  5784. }
  5785. } else {
  5786. element.classList.remove('active');
  5787. const textEl = element.querySelector('.comparison-text') || element.querySelector('.hover-text') || element.querySelector('p.hover-text');
  5788. if (textEl) 
  5789. textEl.textContent = 'Comparer';
  5793. // Restaurer la couleur de l'icône
  5794. const iconEl = element.querySelector('.lnr-sync, span.lnr-sync, [class*=\"sync\"], i[class*=\"sync\"]');
  5795. if (iconEl) {
  5796. iconEl.style.color = '';
  5797. iconEl.classList.remove('active');
  5798. }
  5799. }
  5800. }
  5802. // Afficher une notification
  5803. showNotification(data.message, 'success');
  5804. } else {
  5805. showNotification(data.message, 'error');
  5806. if (element) {
  5807. element.innerHTML = originalHtml;
  5808. }
  5809. }
  5810. }).catch(error => {
  5811. console.error('Erreur:', error);
  5812. showNotification('Une erreur est survenue', 'error');
  5813. if (element) {
  5814. element.innerHTML = originalHtml;
  5815. }
  5816. }). finally(() => {
  5817. if (element) {
  5818. if (element.tagName === 'BUTTON') {
  5819. element.disabled = false;
  5820. } else {
  5821. element.style.pointerEvents = '';
  5822. element.style.opacity = '';
  5823. }
  5824. }
  5825. });
  5826. }
  5828. // Fonction globale pour gérer les favoris
  5829. function toggleWishlist(productId, element) {
  5830. if (! element) {
  5831. element = document.querySelector(`.wishlist-btn[data-product-id=\"\${productId}\"]`);
  5832. }
  5834. if (! element) {
  5835. console.error('Bouton de wishlist non trouvé pour le produit', productId);
  5836. return;
  5837. }
  5839. const originalHtml = element.innerHTML;
  5840. // Désactiver le bouton/lien
  5841. if (element.tagName === 'BUTTON') {
  5842. element.disabled = true;
  5843. } else {
  5844. element.style.pointerEvents = 'none';
  5845. element.style.opacity = '0.6';
  5846. } element.innerHTML = '<span class=\"spinner-border spinner-border-sm\"></span>';
  5848. // Vérifier d'abord si le produit est déjà en favoris
  5849. let isInWishlist = false;
  5850. fetch(`/api/wishlist/status/\${productId}`).then(response => response.json()).then(data => {
  5851. isInWishlist = data.inWishlist;
  5852. const url = isInWishlist ? `/api/wishlist/remove/\${productId}` : `/api/wishlist/add/\${productId}`;
  5854. return fetch(url, {
  5855. method: 'POST',
  5856. headers: {
  5857. 'Content-Type': 'application/json',
  5858. 'X-Requested-With': 'XMLHttpRequest'
  5859. }
  5860. });
  5861. }).then(response => response.json()).then(data => {
  5862. if (data.success) { // Mettre à jour l'apparence du bouton
  5863. if (element) { // Inverser l'état (car on vient de le changer)
  5864. const newState = ! isInWishlist;
  5866. // Restaurer le HTML original puis mettre à jour
  5867. element.innerHTML = originalHtml;
  5869. // Chercher l'icône dans span ou i
  5870. const icon = element.querySelector('span.lnr-heart, i.lnr-heart, [class*=\"lnr-heart\"]');
  5871. const text = element.querySelector('.wishlist-text') || element.querySelector('.hover-text') || element.querySelector('p.hover-text');
  5873. if (newState) {
  5874. if (icon) { // Pour les icônes linr, on change la classe
  5875. if (icon.classList.contains('lnr-heart')) {
  5876. icon.classList.remove('lnr-heart');
  5877. }
  5878. if (! icon.classList.contains('lnr-heart-filled')) {
  5879. icon.classList.add('lnr-heart-filled');
  5880. }
  5881. icon.style.color = '#dc3545';
  5882. }
  5883. element.classList.add('active');
  5884. if (text) 
  5885. text.textContent = 'Dans favoris';
  5889. } else {
  5890. if (icon) { // Restaurer l'icône originale
  5891. if (icon.classList.contains('lnr-heart-filled')) {
  5892. icon.classList.remove('lnr-heart-filled');
  5893. }
  5894. if (! icon.classList.contains('lnr-heart')) {
  5895. icon.classList.add('lnr-heart');
  5896. }
  5897. icon.style.color = '';
  5898. }
  5899. element.classList.remove('active');
  5900. if (text) 
  5901. text.textContent = 'Favoris';
  5905. }
  5906. }
  5908. // Afficher une notification
  5909. showNotification(data.message, 'success');
  5911. // Si on est sur la page wishlist, recharger la page
  5912. if (window.location.pathname.includes('/account/wishlist')) {
  5913. setTimeout(() => location.reload(), 1000);
  5914. }
  5915. } else {
  5916. showNotification(data.message, 'error');
  5917. if (element) {
  5918. element.innerHTML = originalHtml;
  5919. }
  5920. }
  5921. }).catch(error => {
  5922. console.error('Erreur:', error);
  5923. showNotification('Une erreur est survenue', 'error');
  5924. if (element) {
  5925. element.innerHTML = originalHtml;
  5926. }
  5927. }). finally(() => {
  5928. if (element) {
  5929. if (element.tagName === 'BUTTON') {
  5930. element.disabled = false;
  5931. } else {
  5932. element.style.pointerEvents = '';
  5933. element.style.opacity = '';
  5934. }
  5935. }
  5936. });
  5937. }
  5939. // Fonction pour afficher des notifications
  5940. function showNotification(message, type = 'success') { // Créer l'élément de notification
  5941. const notification = document.createElement('div');
  5942. notification.className = `alert alert-\${
  5943. type === 'success' ? 'success' : 'danger'
  5944. } alert-dismissible fade show position-fixed`;
  5945. notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);';
  5946. notification.innerHTML = `
  5947.             \${message}
  5948.             <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\"></button>
  5949.         `;
  5951. document.body.appendChild(notification);
  5953. // Supprimer automatiquement après 3 secondes
  5954. setTimeout(() => {
  5955. notification.remove();
  5956. }, 3000);
  5957. }
  5959. // Initialiser les alertes Bootstrap 5 pour la fermeture
  5960. document.addEventListener('DOMContentLoaded', function () { // S'assurer que les alertes peuvent être fermées
  5961. const alertCloseButtons = document.querySelectorAll('.flash-message .btn-close');
  5962. alertCloseButtons.forEach(function (button) {
  5963. button.addEventListener('click', function () {
  5964. const alert = this.closest('.alert');
  5965. if (alert) {
  5966. alert.classList.remove('show');
  5967. setTimeout(function () {
  5968. alert.remove();
  5969. }, 150);
  5970. }
  5971. });
  5972. });
  5974. // Charger les statuts initiaux des produits
  5975. {% if app.user %}
  5976. // Charger les statuts de comparaison pour tous les produits visibles
  5977. document.querySelectorAll('.comparison-btn[data-product-id]').forEach(btn => {
  5978. const productId = btn.dataset.productId;
  5979. fetch(`/api/comparison/status/\${productId}`).then(response => response.json()).then(data => {
  5980. if (data.inComparison) {
  5981. btn.classList.add('active');
  5982. // Mettre à jour le texte pour les deux types de boutons
  5983. const textEl = btn.querySelector('.comparison-text') || btn.querySelector('.hover-text') || btn.querySelector('p.hover-text');
  5984. if (textEl) 
  5985. textEl.textContent = 'En comparaison';
  5989. // Mettre à jour l'icône si nécessaire
  5990. const iconEl = btn.querySelector('.lnr-sync, [class*=\"sync\"]');
  5991. if (iconEl) 
  5992. iconEl.style.color = '#28a745';
  5996. }
  5997. }).catch(() => {});
  5998. });
  6000. // Charger les statuts de wishlist pour tous les produits visibles
  6001. document.querySelectorAll('.wishlist-btn[data-product-id]').forEach(btn => {
  6002. const productId = btn.dataset.productId;
  6003. fetch(`/api/wishlist/status/\${productId}`).then(response => response.json()).then(data => {
  6004. if (data.inWishlist) {
  6005. // Chercher l'icône dans span ou i
  6006. const icon = btn.querySelector('span.lnr-heart, i.lnr-heart, [class*=\"lnr-heart\"]');
  6007. if (icon) {
  6008. icon.classList.remove('lnr-heart');
  6009. icon.classList.add('lnr-heart');
  6010. icon.style.color = '#ffa200';
  6011. }
  6012. // Mettre à jour le texte pour les deux types de boutons
  6013. const textEl = btn.querySelector('.wishlist-text') || btn.querySelector('.hover-text') || btn.querySelector('p.hover-text');
  6014. if (textEl) 
  6015. textEl.textContent = 'favoris';
  6019. }
  6020. }).catch(() => {});
  6021. });
  6023. // Charger le compteur de comparaison
  6024. loadComparisonCount();{% endif %}
  6025. });
  6026. \t\t</script>
  6028. \t\t<script>
  6029. \t\t\t// Loader global pour tous les boutons de formulaire
  6030. document.addEventListener('DOMContentLoaded', function () { // Intercepter tous les formulaires
  6031. const forms = document.querySelectorAll('form');
  6033. forms.forEach(function (form) {
  6034. form.addEventListener('submit', function (e) {
  6035. const submitButtons = form.querySelectorAll('button[type=\"submit\"], input[type=\"submit\"], button:not([type])');
  6037. submitButtons.forEach(function (button) { // Vérifier si le bouton n'est pas déjà désactivé
  6038. if (! button.disabled && ! button.classList.contains('loading')) {
  6039. button.classList.add('loading');
  6040. button.disabled = true;
  6042. // Sauvegarder le texte original
  6043. const originalText = button.innerHTML;
  6044. button.setAttribute('data-original-text', originalText);
  6046. // Ajouter le loader
  6047. button.innerHTML = '<span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>Envoi...';
  6049. // Si le formulaire n'est pas valide, réactiver le bouton après 1 seconde
  6050. setTimeout(function () {
  6051. if (! form.checkValidity()) {
  6052. button.classList.remove('loading');
  6053. button.disabled = false;
  6054. button.innerHTML = originalText;
  6055. }
  6056. }, 1000);
  6057. }
  6058. });
  6059. });
  6060. });
  6062. // Pour les boutons qui déclenchent des actions AJAX
  6063. const ajaxButtons = document.querySelectorAll('[data-ajax], .ajax-submit, button[data-submit]');
  6065. ajaxButtons.forEach(function (button) {
  6066. button.addEventListener('click', function (e) {
  6067. if (this.disabled || this.classList.contains('loading')) {
  6068. e.preventDefault();
  6069. return false;
  6070. }
  6072. this.classList.add('loading');
  6073. this.disabled = true;
  6075. const originalText = this.innerHTML;
  6076. this.setAttribute('data-original-text', originalText);
  6078. this.innerHTML = '<span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>Chargement...';
  6079. });
  6080. });
  6082. // Gestionnaire spécifique pour le formulaire de newsletter
  6083. const newsletterForm = document.querySelector('.footer-newsletter-form');
  6084. if (newsletterForm) {
  6085. newsletterForm.addEventListener('submit', function (e) {
  6086. const submitBtn = this.querySelector('.newsletter-btn');
  6087. if (submitBtn && ! submitBtn.disabled) {
  6088. submitBtn.classList.add('loading');
  6089. submitBtn.disabled = true;
  6091. // Afficher le loader et masquer l'icône
  6092. const icon = submitBtn.querySelector('.newsletter-btn-icon');
  6093. const loader = submitBtn.querySelector('.newsletter-btn-loader');
  6094. if (icon) 
  6095. icon.style.display = 'none';
  6099. if (loader) 
  6100. loader.style.display = 'flex';
  6104. // Réactiver le bouton après 5 secondes au cas où la requête échoue silencieusement
  6105. setTimeout(function () {
  6106. if (submitBtn.classList.contains('loading')) {
  6107. submitBtn.classList.remove('loading');
  6108. submitBtn.disabled = false;
  6109. if (icon) 
  6110. icon.style.display = 'flex';
  6114. if (loader) 
  6115. loader.style.display = 'none';
  6119. }
  6120. }, 5000);
  6121. }
  6122. });
  6124. // Gérer la réponse du formulaire (si AJAX)
  6125. newsletterForm.addEventListener('submit', function (e) {
  6126. // Si le formulaire est soumis normalement (non-AJAX), le navigateur gère la réponse
  6127. // Sinon, on peut intercepter pour gérer la réponse AJAX ici
  6128. });
  6129. }
  6130. });
  6132. // CSS pour le spinner
  6133. const style = document.createElement('style');
  6134. style.textContent = `
  6135.     .spinner-border-sm {
  6136.         width: 1rem;
  6137.         height: 1rem;
  6138.         border-width: 0.15em;
  6139.     }
  6140.     .spinner-border {
  6141.         display: inline-block;
  6142.         width: 1rem;
  6143.         height: 1rem;
  6144.         vertical-align: text-bottom;
  6145.         border: 0.15em solid currentColor;
  6146.         border-right-color: transparent;
  6147.         border-radius: 50%;
  6148.         animation: spinner-border 0.75s linear infinite;
  6149.     }
  6150.     @keyframes spinner-border {
  6151.         to { transform: rotate(360deg); }
  6152.     }
  6153.     button.loading {
  6154.         opacity: 0.7;
  6155.         cursor: not-allowed !important;
  6156.     }
  6157. `;
  6158. document.head.appendChild(style);
  6159. \t\t</script>
  6161. \t\t<!-- Cart Modal -->
  6162. \t\t<div id=\"ebay-cart-modal\" class=\"ebay-cart-modal-overlay\" style=\"display: none;\" data-url=\"\">
  6163. \t\t\t<div class=\"ebay-cart-modal\">
  6164. \t\t\t\t<div class=\"ebay-modal-header\">
  6165. \t\t\t\t\t<h3>
  6166. \t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  6167. \t\t\t\t\t\tAjouté au panier !</h3>
  6168. \t\t\t\t\t<button class=\"ebay-modal-close\" onclick=\"closeEbayCartModal()\">&times;</button>
  6169. \t\t\t\t</div>
  6171. \t\t\t\t<div class=\"ebay-modal-content\">
  6172. \t\t\t\t\t<div class=\"ebay-product-info\">
  6173. \t\t\t\t\t\t<div class=\"ebay-product-image\">
  6174. \t\t\t\t\t\t\t<img id=\"ebay-modal-product-image\" src=\"\" alt=\"Produit\"/>
  6175. \t\t\t\t\t\t</div>
  6176. \t\t\t\t\t\t<div class=\"ebay-product-details\">
  6177. \t\t\t\t\t\t\t<h4 id=\"ebay-modal-product-name\">Nom du produit</h4>
  6178. \t\t\t\t\t\t\t<div class=\"ebay-product-price\" id=\"ebay-modal-product-price\">Prix</div>
  6179. \t\t\t\t\t\t\t<div class=\"ebay-product-quantity\">
  6180. \t\t\t\t\t\t\t\t<span>Quantité:
  6181. \t\t\t\t\t\t\t\t</span>
  6182. \t\t\t\t\t\t\t\t<span id=\"ebay-modal-product-quantity\">1</span>
  6183. \t\t\t\t\t\t\t</div>
  6184. \t\t\t\t\t\t</div>
  6185. \t\t\t\t\t</div>
  6187. \t\t\t\t\t<!-- Recommendations Section -->
  6188. \t\t\t\t\t<div class=\"ebay-recommendations\" style=\"display: none;\">
  6189. \t\t\t\t\t\t<h4>Les clients ont aussi acheté :</h4>
  6190. \t\t\t\t\t\t<div
  6191. \t\t\t\t\t\t\tclass=\"ebay-recommendations-grid\" id=\"ebay-modal-recommendations\"><!-- Recommendations will be injected here -->
  6192. \t\t\t\t\t\t</div>
  6193. \t\t\t\t\t</div>
  6195. \t\t\t\t\t<div class=\"ebay-modal-actions\">
  6196. \t\t\t\t\t\t<button class=\"ebay-btn-continue\" onclick=\"closeEbayCartModal()\">
  6197. \t\t\t\t\t\t\tContinuer mes achats
  6198. \t\t\t\t\t\t</button>
  6199. \t\t\t\t\t\t<a href=\"{{ path('ui_cart') }}\" class=\"ebay-btn-view-cart\">
  6200. \t\t\t\t\t\t\tVoir mon panier
  6201. \t\t\t\t\t\t</a>
  6202. \t\t\t\t\t</div>
  6203. \t\t\t\t</div>
  6204. \t\t\t</div>
  6205. \t\t</div>
  6207. \t\t<script src=\"{{ asset('ui/js/cart-modal.js') }}\"></script>
  6208. \t\t<script src=\"{{ asset('ui/js/notification-badge.js') }}\"></script>
  6209. \t\t<script src=\"{{ asset('js/dark-mode.js') }}\"></script>
  6211. \t\t{% block javascripts %}{% endblock %}
  6212. \t</body>
  6213. </html>
  6214. ", "base_home.html.twig", "/home/u540977899/domains/maketou-ht.com/public_html/templates/base_home.html.twig");
  6215.     }
  6216. }