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

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