var/cache/dev/twig/fa/fa3304ccd1a4499ea688e4127125ab90.php line 56

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. /* home/index.html.twig */
  18. class __TwigTemplate_affacb9b2c747adbd7a2c975972a32a5 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->blocks = [
  33.             'title' => [$this, 'block_title'],
  34.             'stylesheets' => [$this, 'block_stylesheets'],
  35.             'body' => [$this, 'block_body'],
  36.             'javascripts' => [$this, 'block_javascripts'],
  37.         ];
  38.     }
  40.     protected function doGetParent(array $context): bool|string|Template|TemplateWrapper
  41.     {
  42.         // line 1
  43.         return "base_home.html.twig";
  44.     }
  46.     protected function doDisplay(array $context, array $blocks = []): iterable
  47.     {
  48.         $macros = $this->macros;
  49.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  50.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "home/index.html.twig"));
  52.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  53.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "home/index.html.twig"));
  55.         $this->parent = $this->load("base_home.html.twig", 1);
  56.         yield from $this->parent->unwrap()->yield($context, array_merge($this->blocks, $blocks));
  57.         
  58.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  60.         
  61.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  63.     }
  65.     // line 3
  66.     /**
  67.      * @return iterable<null|scalar|\Stringable>
  68.      */
  69.     public function block_title(array $context, array $blocks = []): iterable
  70.     {
  71.         $macros = $this->macros;
  72.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  73.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  75.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  76.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  78.         yield "Accueil | MaketOu - Votre marketplace haïtienne
  79. ";
  80.         
  81.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  83.         
  84.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  86.         yield from [];
  87.     }
  89.     // line 6
  90.     /**
  91.      * @return iterable<null|scalar|\Stringable>
  92.      */
  93.     public function block_stylesheets(array $context, array $blocks = []): iterable
  94.     {
  95.         $macros = $this->macros;
  96.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  97.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  99.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  100.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  102.         // line 7
  103.         yield "\t<style>
  104. \t\t/* Styles personnalisés pour la page d'accueil */
  105. \t\t.hero-banner {
  106. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  107. \t\t\tcolor: white;
  108. \t\t\tpadding: 100px 0;
  109. \t\t\tposition: relative;
  110. \t\t\toverflow: hidden;
  111. \t\t}
  113. \t\t.hero-banner::before {
  114. \t\t\tcontent: '';
  115. \t\t\tposition: absolute;
  116. \t\t\ttop: 0;
  117. \t\t\tleft: 0;
  118. \t\t\tright: 0;
  119. \t\t\tbottom: 0;
  120. \t\t\tbackground: url('data:image/svg+xml, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"25\" cy=\"25\" r=\"1\" fill=\"rgba(255, 255, 255, 0.1)\"/><circle cx=\"75\" cy=\"75\" r=\"1\" fill=\"rgba(255, 255, 255, 0.1)\"/><circle cx=\"50\" cy=\"10\" r=\"0.5\" fill=\"rgba(255, 255, 255, 0.1)\"/><circle cx=\"10\" cy=\"90\" r=\"0.5\" fill=\"rgba(255, 255, 255, 0.1)\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23grain)\"/></svg>');
  121. \t\t\topacity: 0.3;
  122. \t\t}
  124. \t\t.hero-content {
  125. \t\t\tposition: relative;
  126. \t\t\tz-index: 2;
  127. \t\t}
  129. \t\t.stats-card {
  130. \t\t\tbackground: white;
  131. \t\t\tborder-radius: 15px;
  132. \t\t\tpadding: 30px;
  133. \t\t\ttext-align: center;
  134. \t\t\tbox-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  135. \t\t\ttransition: transform 0.3s ease;
  136. \t\t}
  138. \t\t.stats-card:hover {
  139. \t\t\ttransform: translateY(-5px);
  140. \t\t}
  142. \t\t.stats-number {
  143. \t\t\tfont-size: 3rem;
  144. \t\t\tfont-weight: bold;
  145. \t\t\tcolor: #ffa200;
  146. \t\t\tdisplay: block;
  147. \t\t}
  149. \t\t.stats-label {
  150. \t\t\tcolor: #666;
  151. \t\t\tfont-size: 1.1rem;
  152. \t\t\tmargin-top: 10px;
  153. \t\t}
  155. \t\t.category-card {
  156. \t\t\tbackground: white;
  157. \t\t\tborder-radius: 15px;
  158. \t\t\toverflow: hidden;
  159. \t\t\tbox-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  160. \t\t\ttransition: all 0.3s ease;
  161. \t\t\theight: 100%;
  162. \t\t}
  164. \t\t.category-card:hover {
  165. \t\t\ttransform: translateY(-5px);
  166. \t\t\tbox-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  167. \t\t}
  169. \t\t.category-image {
  170. \t\t\theight: 200px;
  171. \t\t\tbackground-size: cover;
  172. \t\t\tbackground-position: center;
  173. \t\t\tposition: relative;
  174. \t\t}
  176. \t\t.category-overlay {
  177. \t\t\tposition: absolute;
  178. \t\t\ttop: 0;
  179. \t\t\tleft: 0;
  180. \t\t\tright: 0;
  181. \t\t\tbottom: 0;
  182. \t\t\tbackground: linear-gradient(45deg, rgba(255,162,0,0.8), rgba(232,145,10,0.8));
  183. \t\t\tdisplay: flex;
  184. \t\t\talign-items: center;
  185. \t\t\tjustify-content: center;
  186. \t\t\topacity: 0;
  187. \t\t\ttransition: opacity 0.3s ease;
  188. \t\t}
  190. \t\t.category-card:hover .category-overlay {
  191. \t\t\topacity: 1;
  192. \t\t}
  194. \t\t.product-card {
  195. \t\t\tbackground: white;
  196. \t\t\tborder-radius: 15px;
  197. \t\t\toverflow: hidden;
  198. \t\t\tbox-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  199. \t\t\ttransition: all 0.3s ease;
  200. \t\t\theight: 100%;
  201. \t\t}
  203. \t\t.product-card:hover {
  204. \t\t\ttransform: translateY(-5px);
  205. \t\t\tbox-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  206. \t\t}
  208. \t\t.product-image {
  209. \t\t\theight: 250px;
  210. \t\t\tbackground-size: cover;
  211. \t\t\tbackground-position: center;
  212. \t\t\tposition: relative;
  213. \t\t}
  215. \t\t.product-badge {
  216. \t\t\tposition: absolute;
  217. \t\t\ttop: 15px;
  218. \t\t\tright: 15px;
  219. \t\t\tbackground: #ffa200;
  220. \t\t\tcolor: white;
  221. \t\t\tpadding: 5px 10px;
  222. \t\t\tborder-radius: 20px;
  223. \t\t\tfont-size: 0.8rem;
  224. \t\t\tfont-weight: bold;
  225. \t\t}
  227. \t\t.product-info {
  228. \t\t\tpadding: 20px;
  229. \t\t}
  231. \t\t.product-title {
  232. \t\t\tfont-size: 1.2rem;
  233. \t\t\tfont-weight: 600;
  234. \t\t\tmargin-bottom: 10px;
  235. \t\t\tcolor: #333;
  236. \t\t}
  238. \t\t.product-price {
  239. \t\t\tfont-size: 1.5rem;
  240. \t\t\tfont-weight: bold;
  241. \t\t\tcolor: #ffa200;
  242. \t\t\tmargin-bottom: 10px;
  243. \t\t}
  245. \t\t.product-shop {
  246. \t\t\tfont-size: 0.9rem;
  247. \t\t\tcolor: #666;
  248. \t\t\tmargin-bottom: 15px;
  249. \t\t}
  251. \t\t.btn-primary-custom {
  252. \t\t\tbackground: #ffa200;
  253. \t\t\tborder: none;
  254. \t\t\tcolor: white;
  255. \t\t\tpadding: 12px 30px;
  256. \t\t\tborder-radius: 25px;
  257. \t\t\tfont-weight: 500;
  258. \t\t\ttransition: all 0.3s ease;
  259. \t\t}
  261. \t\t.btn-primary-custom:hover {
  262. \t\t\tbackground: #e8910a;
  263. \t\t\ttransform: translateY(-2px);
  264. \t\t\tbox-shadow: 0 5px 15px rgba(255, 162, 0, 0.3);
  265. \t\t}
  267. \t\t.section-title {
  268. \t\t\ttext-align: center;
  269. \t\t\tmargin-bottom: 50px;
  270. \t\t}
  272. \t\t.section-title h2 {
  273. \t\t\tfont-size: 2.5rem;
  274. \t\t\tfont-weight: bold;
  275. \t\t\tcolor: #333;
  276. \t\t\tmargin-bottom: 15px;
  277. \t\t}
  279. \t\t.section-title p {
  280. \t\t\tfont-size: 1.2rem;
  281. \t\t\tcolor: #666;
  282. \t\t\tmax-width: 600px;
  283. \t\t\tmargin: 0 auto;
  284. \t\t}
  286. \t\t.feature-card {
  287. \t\t\ttext-align: center;
  288. \t\t\tpadding: 30px 20px;
  289. \t\t\tbackground: white;
  290. \t\t\tborder-radius: 15px;
  291. \t\t\tbox-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  292. \t\t\ttransition: all 0.3s ease;
  293. \t\t\theight: 100%;
  294. \t\t}
  296. \t\t.feature-card:hover {
  297. \t\t\ttransform: translateY(-5px);
  298. \t\t\tbox-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  299. \t\t}
  301. \t\t.feature-icon {
  302. \t\t\twidth: 80px;
  303. \t\t\theight: 80px;
  304. \t\t\tbackground: linear-gradient(135deg, #ffa200, #e8910a);
  305. \t\t\tborder-radius: 50%;
  306. \t\t\tdisplay: flex;
  307. \t\t\talign-items: center;
  308. \t\t\tjustify-content: center;
  309. \t\t\tmargin: 0 auto 20px;
  310. \t\t\tfont-size: 2rem;
  311. \t\t\tcolor: white;
  312. \t\t}
  314. \t\t.newsletter-section {
  315. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  316. \t\t\tcolor: white;
  317. \t\t\tpadding: 80px 0;
  318. \t\t}
  320. \t\t.newsletter-form {
  321. \t\t\tmax-width: 500px;
  322. \t\t\tmargin: 0 auto;
  323. \t\t}
  325. \t\t.newsletter-form .form-control {
  326. \t\t\tborder: none;
  327. \t\t\tborder-radius: 25px;
  328. \t\t\tpadding: 15px 25px;
  329. \t\t\tfont-size: 1.1rem;
  330. \t\t}
  332. \t\t.newsletter-form .btn {
  333. \t\t\tborder-radius: 25px;
  334. \t\t\tpadding: 15px 30px;
  335. \t\t\tfont-weight: 500;
  336. \t\t}
  338. \t\t/* Styles pour les catégories personnalisées */
  339. \t\t.category-card-custom {
  340. \t\t\tbackground: white;
  341. \t\t\tborder-radius: 15px;
  342. \t\t\toverflow: hidden;
  343. \t\t\tbox-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  344. \t\t\ttransition: all 0.3s ease;
  345. \t\t\theight: 100%;
  346. \t\t\tdisplay: flex;
  347. \t\t\tflex-direction: column;
  348. \t\t}
  350. \t\t.category-card-custom:hover {
  351. \t\t\ttransform: translateY(-5px);
  352. \t\t\tbox-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  353. \t\t}
  355. \t\t.category-image-wrapper {
  356. \t\t\tposition: relative;
  357. \t\t\toverflow: hidden;
  358. \t\t}
  360. \t\t.category-image {
  361. \t\t\theight: 200px;
  362. \t\t\tbackground-size: cover;
  363. \t\t\tbackground-position: center;
  364. \t\t\tposition: relative;
  365. \t\t\ttransition: transform 0.5s ease;
  366. \t\t}
  368. \t\t.category-card-custom:hover .category-image {
  369. \t\t\ttransform: scale(1.1);
  370. \t\t}
  372. \t\t.category-overlay-custom {
  373. \t\t\tposition: absolute;
  374. \t\t\ttop: 0;
  375. \t\t\tleft: 0;
  376. \t\t\tright: 0;
  377. \t\t\tbottom: 0;
  378. \t\t\tbackground: rgba(0, 0, 0, 0.5);
  379. \t\t\tdisplay: flex;
  380. \t\t\talign-items: center;
  381. \t\t\tjustify-content: center;
  382. \t\t\topacity: 0;
  383. \t\t\ttransition: opacity 0.3s ease;
  384. \t\t}
  386. \t\t.category-card-custom:hover .category-overlay-custom {
  387. \t\t\topacity: 1;
  388. \t\t}
  390. \t\t.category-icon-wrapper {
  391. \t\t\ttext-align: center;
  392. \t\t\tcolor: white;
  393. \t\t\ttransform: translateY(20px);
  394. \t\t\ttransition: transform 0.3s ease;
  395. \t\t}
  397. \t\t.category-card-custom:hover .category-icon-wrapper {
  398. \t\t\ttransform: translateY(0);
  399. \t\t}
  401. \t\t.category-content {
  402. \t\t\tflex-grow: 1;
  403. \t\t\tdisplay: flex;
  404. \t\t\tflex-direction: column;
  405. \t\t}
  407. \t\t.category-content .btn {
  408. \t\t\tmargin-top: auto;
  409. \t\t}
  411. \t\t/* Responsive Styles */
  412. \t\t@media(max-width: 991.98px) {
  413. \t\t\t.hero-banner {
  414. \t\t\t\tpadding: 60px 0;
  415. \t\t\t}
  417. \t\t\t.stats-number {
  418. \t\t\t\tfont-size: 2.5rem;
  419. \t\t\t}
  421. \t\t\t.section-title h2 {
  422. \t\t\t\tfont-size: 2rem;
  423. \t\t\t}
  424. \t\t\t
  425. \t\t\t.stats-card {
  426. \t\t\t\tmargin-bottom: 1.5rem;
  427. \t\t\t}
  428. \t\t}
  430. \t\t@media(max-width: 767.98px) {
  431. \t\t\t.hero-banner {
  432. \t\t\t\tpadding: 40px 0;
  433. \t\t\t}
  435. \t\t\t.hero-content h1 {
  436. \t\t\t\tfont-size: 1.75rem;
  437. \t\t\t}
  439. \t\t\t.stats-number {
  440. \t\t\t\tfont-size: 2rem;
  441. \t\t\t}
  443. \t\t\t.stats-label {
  444. \t\t\t\tfont-size: 0.9rem;
  445. \t\t\t}
  447. \t\t\t.section-title h2 {
  448. \t\t\t\tfont-size: 1.75rem;
  449. \t\t\t}
  451. \t\t\t.section-title p {
  452. \t\t\t\tfont-size: 1rem;
  453. \t\t\t}
  454. \t\t\t
  455. \t\t\t.category-card,
  456. \t\t\t.product-card {
  457. \t\t\t\tmargin-bottom: 1.5rem;
  458. \t\t\t}
  459. \t\t\t
  460. \t\t\t.category-image {
  461. \t\t\t\theight: 150px;
  462. \t\t\t}
  463. \t\t\t
  464. \t\t\t.product-image {
  465. \t\t\t\theight: 200px;
  466. \t\t\t}
  467. \t\t\t
  468. \t\t\t.feature-card {
  469. \t\t\t\tmargin-bottom: 1.5rem;
  470. \t\t\t}
  471. \t\t\t
  472. \t\t\t.newsletter-section {
  473. \t\t\t\tpadding: 40px 0;
  474. \t\t\t}
  475. \t\t}
  477. \t\t@media(max-width: 575.98px) {
  478. \t\t\t.hero-banner {
  479. \t\t\t\tpadding: 30px 0;
  480. \t\t\t}
  482. \t\t\t.hero-content h1 {
  483. \t\t\t\tfont-size: 1.5rem;
  484. \t\t\t}
  486. \t\t\t.stats-card {
  487. \t\t\t\tpadding: 1.5rem;
  488. \t\t\t}
  490. \t\t\t.stats-number {
  491. \t\t\t\tfont-size: 1.75rem;
  492. \t\t\t}
  494. \t\t\t.section-title h2 {
  495. \t\t\t\tfont-size: 1.5rem;
  496. \t\t\t}
  497. \t\t\t
  498. \t\t\t.category-image {
  499. \t\t\t\theight: 120px;
  500. \t\t\t}
  501. \t\t\t
  502. \t\t\t.product-image {
  503. \t\t\t\theight: 180px;
  504. \t\t\t}
  505. \t\t\t
  506. \t\t\t.product-info {
  507. \t\t\t\tpadding: 1rem;
  508. \t\t\t}
  509. \t\t\t
  510. \t\t\t.product-title {
  511. \t\t\t\tfont-size: 1rem;
  512. \t\t\t}
  513. \t\t\t
  514. \t\t\t.product-price {
  515. \t\t\t\tfont-size: 1.25rem;
  516. \t\t\t}
  517. \t\t}
  519. \t\t/* Styles modernes pour le carousel de bannière */
  520. \t\t.banner-area-modern {
  521. \t\t\tposition: relative;
  522. \t\t\twidth: 100%;
  523. \t\t\tmin-height: 500px;
  524. \t\t\tbackground: url('";
  525.         // line 428
  526.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/img/banner/banner-bg.jpg"), "html", null, true);
  527.         yield "') center center no-repeat;
  528. \t\t\tbackground-size: cover;
  529. \t\t\toverflow: hidden;
  530. \t\t\tpadding: 60px 0;
  531. \t\t}
  533. \t\t.banner-area-modern::before {
  534. \t\t\tcontent: '';
  535. \t\t\tposition: absolute;
  536. \t\t\ttop: 0;
  537. \t\t\tleft: 0;
  538. \t\t\twidth: 100%;
  539. \t\t\theight: 100%;
  540. \t\t\tbackground: rgba(0, 0, 0, 0.1);
  541. \t\t\tz-index: 1;
  542. \t\t}
  544. \t\t.banner-carousel-wrapper {
  545. \t\t\tposition: relative;
  546. \t\t\twidth: 100%;
  547. \t\t\theight: 100%;
  548. \t\t\tz-index: 2;
  549. \t\t}
  551. \t\t.banner-slide-item {
  552. \t\t\tmin-height: 500px;
  553. \t\t\tdisplay: flex;
  554. \t\t\talign-items: center;
  555. \t\t\tpadding: 40px 0;
  556. \t\t}
  558. \t\t.banner-content-modern {
  559. \t\t\tposition: relative;
  560. \t\t\tz-index: 2;
  561. \t\t\tpadding: 30px;
  562. \t\t\tbackground: rgba(255, 255, 255, 0.98);
  563. \t\t\tborder-radius: 20px;
  564. \t\t\tbox-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  565. \t\t\tbackdrop-filter: blur(10px);
  566. \t\t\tanimation: fadeInUp 0.8s ease;
  567. \t\t}
  569. \t\t@keyframes fadeInUp {
  570. \t\t\tfrom {
  571. \t\t\t\topacity: 0;
  572. \t\t\t\ttransform: translateY(30px);
  573. \t\t\t}
  574. \t\t\tto {
  575. \t\t\t\topacity: 1;
  576. \t\t\t\ttransform: translateY(0);
  577. \t\t\t}
  578. \t\t}
  580. \t\t.banner-badge {
  581. \t\t\tdisplay: inline-block;
  582. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  583. \t\t\tcolor: white;
  584. \t\t\tpadding: 8px 20px;
  585. \t\t\tborder-radius: 50px;
  586. \t\t\tfont-size: 0.85rem;
  587. \t\t\tfont-weight: 600;
  588. \t\t\tmargin-bottom: 20px;
  589. \t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.4);
  590. \t\t}
  592. \t\t.banner-badge i {
  593. \t\t\tmargin-right: 5px;
  594. \t\t}
  596. \t\t.banner-title-modern {
  597. \t\t\tfont-size: 2.0rem;
  598. \t\t\tfont-weight: 600;
  599. \t\t\tcolor: #2c3e50;
  600. \t\t\tmargin-bottom: 20px;
  601. \t\t\tline-height: 1.2;
  602. \t\t\tbackground: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  603. \t\t\t-webkit-background-clip: text;
  604. \t\t\t-webkit-text-fill-color: transparent;
  605. \t\t\tbackground-clip: text;
  606. \t\t}
  608. \t\t.banner-description-modern {
  609. \t\t\tfont-size: 1.1rem;
  610. \t\t\tcolor: #555;
  611. \t\t\tline-height: 1.8;
  612. \t\t\tmargin-bottom: 25px;
  613. \t\t}
  615. \t\t.banner-price-modern {
  616. \t\t\tdisplay: flex;
  617. \t\t\talign-items: center;
  618. \t\t\tgap: 15px;
  619. \t\t\tmargin-bottom: 30px;
  620. \t\t\tpadding: 15px 20px;
  621. \t\t\tbackground: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  622. \t\t\tborder-radius: 12px;
  623. \t\t\tborder-left: 4px solid #ffa200;
  624. \t\t}
  626. \t\t.banner-price-modern .price-label {
  627. \t\t\tfont-size: 0.9rem;
  628. \t\t\tcolor: #666;
  629. \t\t\tfont-weight: 600;
  630. \t\t\ttext-transform: uppercase;
  631. \t\t\tletter-spacing: 1px;
  632. \t\t}
  634. \t\t.banner-price-modern .price-value {
  635. \t\t\tfont-size: 1.2rem;
  636. \t\t\tfont-weight: 600;
  637. \t\t\tcolor: #ffa200;
  638. \t\t}
  640. \t\t.banner-actions-modern {
  641. \t\t\tdisplay: flex;
  642. \t\t\tgap: 15px;
  643. \t\t\tflex-wrap: wrap;
  644. \t\t}
  646. \t\t.btn-banner-primary {
  647. \t\t\tdisplay: inline-flex;
  648. \t\t\talign-items: center;
  649. \t\t\tgap: 10px;
  650. \t\t\tpadding: 15px 35px;
  651. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  652. \t\t\tcolor: white;
  653. \t\t\ttext-decoration: none;
  654. \t\t\tborder-radius: 50px;
  655. \t\t\tfont-weight: 600;
  656. \t\t\tfont-size: 1rem;
  657. \t\t\ttransition: all 0.3s ease;
  658. \t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.4);
  659. \t\t}
  661. \t\t.btn-banner-primary:hover {
  662. \t\t\ttransform: translateY(-3px);
  663. \t\t\tbox-shadow: 0 8px 25px rgba(255, 162, 0, 0.6);
  664. \t\t\tcolor: white;
  665. \t\t}
  667. \t\t.btn-banner-primary .btn-icon {
  668. \t\t\ttransition: transform 0.3s ease;
  669. \t\t}
  671. \t\t.btn-banner-primary:hover .btn-icon {
  672. \t\t\ttransform: translateX(5px);
  673. \t\t}
  675. \t\t.btn-banner-secondary {
  676. \t\t\tdisplay: inline-flex;
  677. \t\t\talign-items: center;
  678. \t\t\tgap: 8px;
  679. \t\t\tpadding: 15px 25px;
  680. \t\t\tbackground: white;
  681. \t\t\tcolor: #667eea;
  682. \t\t\ttext-decoration: none;
  683. \t\t\tborder-radius: 50px;
  684. \t\t\tfont-weight: 600;
  685. \t\t\tfont-size: 0.95rem;
  686. \t\t\tborder: 2px solid #667eea;
  687. \t\t\ttransition: all 0.3s ease;
  688. \t\t}
  690. \t\t.btn-banner-secondary:hover {
  691. \t\t\tbackground: #667eea;
  692. \t\t\tcolor: white;
  693. \t\t\ttransform: translateY(-3px);
  694. \t\t\tbox-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  695. \t\t}
  697. \t\t.banner-image-modern {
  698. \t\t\tposition: relative;
  699. \t\t\theight: 450px;
  700. \t\t\tdisplay: flex;
  701. \t\t\talign-items: center;
  702. \t\t\tjustify-content: center;
  703. \t\t}
  705. \t\t.banner-image-wrapper {
  706. \t\t\tposition: relative;
  707. \t\t\twidth: 100%;
  708. \t\t\theight: 100%;
  709. \t\t\tborder-radius: 20px;
  710. \t\t\toverflow: hidden;
  711. \t\t\tbox-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  712. \t\t\tbackground: white;
  713. \t\t\tpadding: 20px;
  714. \t\t}
  716. \t\t.banner-img {
  717. \t\t\twidth: 100%;
  718. \t\t\theight: 100%;
  719. \t\t\tobject-fit: contain;
  720. \t\t\tborder-radius: 15px;
  721. \t\t\ttransition: transform 0.5s ease;
  722. \t\t}
  724. \t\t.banner-slide-item:hover .banner-img {
  725. \t\t\ttransform: scale(1.05);
  726. \t\t}
  728. \t\t.banner-image-overlay {
  729. \t\t\tposition: absolute;
  730. \t\t\ttop: 0;
  731. \t\t\tleft: 0;
  732. \t\t\twidth: 100%;
  733. \t\t\theight: 100%;
  734. \t\t\tbackground: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  735. \t\t\tborder-radius: 15px;
  736. \t\t\tpointer-events: none;
  737. \t\t}
  739. \t\t/* Styles pour Owl Carousel */
  740. \t\t.banner-area-modern .owl-nav {
  741. \t\t\tposition: absolute;
  742. \t\t\ttop: 50%;
  743. \t\t\ttransform: translateY(-50%);
  744. \t\t\twidth: 100%;
  745. \t\t\tdisplay: flex;
  746. \t\t\tjustify-content: space-between;
  747. \t\t\talign-items: center;
  748. \t\t\tpadding: 0 20px;
  749. \t\t\tpointer-events: none;
  750. \t\t\tz-index: 10;
  751. \t\t\tleft: 0;
  752. \t\t\tright: 0;
  753. \t\t\tbox-sizing: border-box;
  754. \t\t}
  756. \t\t.banner-area-modern .owl-nav button {
  757. \t\t\twidth: 60px;
  758. \t\t\theight: 60px;
  759. \t\t\tmin-width: 60px;
  760. \t\t\tmin-height: 60px;
  761. \t\t\tbackground: #ffa200 !important;
  762. \t\t\tborder-radius: 50% !important;
  763. \t\t\tdisplay: flex !important;
  764. \t\t\talign-items: center;
  765. \t\t\tjustify-content: center;
  766. \t\t\tcolor: white !important;
  767. \t\t\tfont-size: 24px !important;
  768. \t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.4);
  769. \t\t\ttransition: all 0.3s ease;
  770. \t\t\tpointer-events: all;
  771. \t\t\tborder: none !important;
  772. \t\t\tposition: relative;
  773. \t\t\tflex-shrink: 0;
  774. \t\t\tmargin: 0;
  775. \t\t\tpadding: 0;
  776. \t\t\tline-height: 1;
  777. \t\t}
  779. \t\t.banner-area-modern .owl-nav button.owl-prev {
  780. \t\t\tmargin-right: auto;
  781. \t\t}
  783. \t\t.banner-area-modern .owl-nav button.owl-next {
  784. \t\t\tmargin-left: auto;
  785. \t\t}
  787. \t\t.banner-area-modern .owl-nav button:hover {
  788. \t\t\tbackground: #ff6b00 !important;
  789. \t\t\tcolor: white !important;
  790. \t\t\ttransform: scale(1.1);
  791. \t\t\tbox-shadow: 0 6px 20px rgba(255, 162, 0, 0.6);
  792. \t\t}
  794. \t\t.banner-area-modern .owl-nav button.disabled {
  795. \t\t\topacity: 0.5;
  796. \t\t\tcursor: not-allowed;
  797. \t\t}
  799. \t\t.banner-area-modern .owl-nav button.disabled:hover {
  800. \t\t\ttransform: scale(1);
  801. \t\t}
  803. \t\t.banner-area-modern .owl-dots {
  804. \t\t\tposition: absolute;
  805. \t\t\tbottom: 30px;
  806. \t\t\tleft: 50%;
  807. \t\t\ttransform: translateX(-50%);
  808. \t\t\tdisplay: flex;
  809. \t\t\tgap: 10px;
  810. \t\t\tz-index: 10;
  811. \t\t}
  813. \t\t.banner-area-modern .owl-dots button {
  814. \t\t\twidth: 12px;
  815. \t\t\theight: 12px;
  816. \t\t\tborder-radius: 50%;
  817. \t\t\tbackground: rgba(255, 255, 255, 0.6) !important;
  818. \t\t\tborder: 2px solid white !important;
  819. \t\t\ttransition: all 0.3s ease;
  820. \t\t\tmargin: 0 5px;
  821. \t\t}
  823. \t\t.banner-area-modern .owl-dots button.active {
  824. \t\t\tbackground: #ffa200 !important;
  825. \t\t\tborder-color: #ffa200 !important;
  826. \t\t\twidth: 30px;
  827. \t\t\tborder-radius: 6px;
  828. \t\t}
  830. \t\t/* Responsive */
  831. \t\t@media(max-width: 992px) {
  832. \t\t\t.banner-area-modern {
  833. \t\t\t\tmin-height: 450px;
  834. \t\t\t\tpadding: 40px 0;
  835. \t\t\t\tbackground-size: cover;
  836. \t\t\t\tbackground-position: center;
  837. \t\t\t}
  839. \t\t\t.banner-slide-item {
  840. \t\t\t\tmin-height: 450px;
  841. \t\t\t\tpadding: 30px 0;
  842. \t\t\t}
  844. \t\t\t.banner-title-modern {
  845. \t\t\t\tfont-size: 1.5rem;
  846. \t\t\t}
  848. \t\t\t.banner-description-modern {
  849. \t\t\t\tfont-size: 1rem;
  850. \t\t\t}
  852. \t\t\t.banner-image-modern {
  853. \t\t\t\theight: 350px;
  854. \t\t\t\tmargin-top: 30px;
  855. \t\t\t}
  857. \t\t\t.banner-content-modern {
  858. \t\t\t\tpadding: 25px;
  859. \t\t\t}
  860. \t\t}
  862. \t\t@media(max-width: 768px) {
  863. \t\t\t.banner-area-modern {
  864. \t\t\t\tmin-height: 400px;
  865. \t\t\t\tpadding: 30px 0;
  866. \t\t\t\tbackground-size: cover;
  867. \t\t\t\tbackground-position: center;
  868. \t\t\t}
  870. \t\t\t.banner-slide-item {
  871. \t\t\t\tmin-height: 400px;
  872. \t\t\t\tpadding: 20px 0;
  873. \t\t\t}
  875. \t\t\t.banner-title-modern {
  876. \t\t\t\tfont-size: 1.25rem;
  877. \t\t\t}
  879. \t\t\t.banner-description-modern {
  880. \t\t\t\tfont-size: 0.95rem;
  881. \t\t\t}
  883. \t\t\t.banner-image-modern {
  884. \t\t\t\theight: 280px;
  885. \t\t\t\tmargin-top: 20px;
  886. \t\t\t}
  888. \t\t\t.banner-content-modern {
  889. \t\t\t\tpadding: 20px;
  890. \t\t\t}
  892. \t\t\t.banner-price-modern .price-value {
  893. \t\t\t\tfont-size: 1.25rem;
  894. \t\t\t}
  896. \t\t\t.banner-actions-modern {
  897. \t\t\t\tflex-direction: column;
  898. \t\t\t}
  900. \t\t\t.btn-banner-primary,
  901. \t\t\t.btn-banner-secondary {
  902. \t\t\t\twidth: 100%;
  903. \t\t\t\tjustify-content: center;
  904. \t\t\t}
  906. \t\t\t.banner-area-modern .owl-nav button {
  907. \t\t\t\twidth: 50px;
  908. \t\t\t\theight: 50px;
  909. \t\t\t\tmin-width: 50px;
  910. \t\t\t\tmin-height: 50px;
  911. \t\t\t\tfont-size: 20px !important;
  912. \t\t\t\tbackground: #ffa200 !important;
  913. \t\t\t}
  915. \t\t\t.banner-area-modern .owl-nav button:hover {
  916. \t\t\t\tbackground: #ff6b00 !important;
  917. \t\t\t}
  918. \t\t}
  920. \t\t@media(max-width: 576px) {
  921. \t\t\t.banner-area-modern {
  922. \t\t\t\tmin-height: 350px;
  923. \t\t\t\tpadding: 0;
  924. \t\t\t\tbackground-size: cover;
  925. \t\t\t\tbackground-position: center;
  926. \t\t\t}
  928. \t\t\t.banner-slide-item {
  929. \t\t\t\tmin-height: 350px;
  930. \t\t\t}
  932. \t\t\t.banner-title-modern {
  933. \t\t\t\tfont-size: 1.25rem;
  934. \t\t\t}
  936. \t\t\t.banner-image-modern {
  937. \t\t\t\theight: 220px;
  938. \t\t\t}
  940. \t\t\t.banner-content-modern {
  941. \t\t\t\tpadding: 15px;
  942. \t\t\t}
  943. \t\t}
  945. \t\t/* Styles pour les catégories de boutiques cliquables */
  946. \t\t.shop-category-clickable {
  947. \t\t\tcursor: pointer;
  948. \t\t\ttransition: all 0.3s ease;
  949. \t\t\theight: 100%;
  950. \t\t}
  951. \t\t.shop-category-clickable:hover {
  952. \t\t\ttransform: translateY(-10px);
  953. \t\t\tbox-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  954. \t\t}
  955. \t\t.shop-category-clickable:hover .category-image {
  956. \t\t\ttransform: scale(1.1);
  957. \t\t}
  958. \t\t.shop-category-clickable:hover .btn-primary-custom {
  959. \t\t\tbackground: #e8910a;
  960. \t\t\ttransform: translateX(5px);
  961. \t\t}
  963. \t\t/* Styles pour les cartes de catégories personnalisées */
  964. \t\t.category-card-custom {
  965. \t\t\tborder-radius: 15px;
  966. \t\t\toverflow: hidden;
  967. \t\t\tbox-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  968. \t\t\ttransition: transform 0.3s ease, box-shadow 0.3s ease;
  969. \t\t\tbackground: white;
  970. \t\t\theight: 100%;
  971. \t\t}
  972. \t\t.category-card-custom:hover {
  973. \t\t\ttransform: translateY(-10px);
  974. \t\t\tbox-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  975. \t\t}
  976. \t\t.category-image-wrapper {
  977. \t\t\tposition: relative;
  978. \t\t\theight: 200px;
  979. \t\t\toverflow: hidden;
  980. \t\t}
  981. \t\t.category-image {
  982. \t\t\twidth: 100%;
  983. \t\t\theight: 100%;
  984. \t\t\tbackground-size: cover;
  985. \t\t\tbackground-position: center;
  986. \t\t\ttransition: transform 0.3s ease;
  987. \t\t}
  988. \t\t.category-card-custom:hover .category-image {
  989. \t\t\ttransform: scale(1.1);
  990. \t\t}
  991. \t\t.category-overlay-custom {
  992. \t\t\tposition: absolute;
  993. \t\t\ttop: 0;
  994. \t\t\tleft: 0;
  995. \t\t\twidth: 100%;
  996. \t\t\theight: 100%;
  997. \t\t\tbackground: rgba(0, 0, 0, 0.6);
  998. \t\t\tdisplay: flex;
  999. \t\t\talign-items: center;
  1000. \t\t\tjustify-content: center;
  1001. \t\t\topacity: 0;
  1002. \t\t\ttransition: opacity 0.3s ease;
  1003. \t\t\tcolor: white;
  1004. \t\t}
  1005. \t\t.category-card-custom:hover .category-overlay-custom {
  1006. \t\t\topacity: 1;
  1007. \t\t}
  1008. \t\t.category-icon-wrapper {
  1009. \t\t\ttext-align: center;
  1010. \t\t}
  1011. \t\t.category-icon-wrapper i {
  1012. \t\t\tcolor: #ffa200;
  1013. \t\t\tdisplay: block;
  1014. \t\t}
  1015. \t\t.category-icon-wrapper h4 {
  1016. \t\t\tcolor: white;
  1017. \t\t\tmargin-top: 10px;
  1018. \t\t}
  1020. \t\t/* Styles pour la galerie de produits en vedette */
  1021. \t\t.featured-products-carousel-section {
  1022. \t\t\tposition: relative;
  1023. \t\t\toverflow: hidden;
  1024. \t\t}
  1026. \t\t.featured-gallery-wrapper {
  1027. \t\t\tposition: relative;
  1028. \t\t\tmax-width: 1400px;
  1029. \t\t\tmargin: 0 auto;
  1030. \t\t\tpadding: 0 15px;
  1031. \t\t}
  1033. \t\t.featured-gallery-container {
  1034. \t\t\tposition: relative;
  1035. \t\t\toverflow: visible;
  1036. \t\t\tborder-radius: 12px;
  1037. \t\t}
  1039. \t\t.featured-gallery-grid {
  1040. \t\t\tdisplay: flex;
  1041. \t\t\tgap: 30px;
  1042. \t\t\tpadding: 15px 0;
  1043. \t\t\toverflow-x: auto;
  1044. \t\t\toverflow-y: hidden;
  1045. \t\t\tscroll-behavior: smooth;
  1046. \t\t\tscroll-behavior: smooth;
  1047. \t\t\tscrollbar-width: none; /* Firefox */
  1048. \t\t\t-ms-overflow-style: none; /* IE/Edge */
  1049. \t\t\t-webkit-overflow-scrolling: touch; /* iOS smooth scroll */
  1050. \t\t\twill-change: scroll-position;
  1051. \t\t}
  1053. \t\t.featured-gallery-grid::-webkit-scrollbar {
  1054. \t\t\tdisplay: none; /* Chrome/Safari */
  1055. \t\t}
  1057. \t\t/* Mode OwlCarousel */
  1058. \t\t.featured-gallery-grid.owl-carousel {
  1059. \t\t\tdisplay: block;
  1060. \t\t\toverflow: hidden;
  1061. \t\t\tpadding: 25px 0;
  1062. \t\t}
  1064. \t\t.featured-gallery-grid.owl-carousel .owl-stage-outer {
  1065. \t\t\toverflow: visible;
  1066. \t\t}
  1068. \t\t.featured-gallery-grid.owl-carousel .featured-gallery-item {
  1069. \t\t\topacity: 1;
  1070. \t\t\ttransform: none;
  1071. \t\t\twidth: auto;
  1072. \t\t\tmax-width: none;
  1073. \t\t\tmargin: 0 15px;
  1074. \t\t}
  1076. \t\t.featured-gallery-grid.owl-carousel .owl-stage {
  1077. \t\t\tdisplay: flex;
  1078. \t\t}
  1080. \t\t.featured-gallery-item {
  1081. \t\t\tflex: 0 0 auto; /* Largeur automatique basée sur le contenu */
  1082. \t\t\twidth: 100%;
  1083. \t\t\tmax-width: 100%;
  1084. \t\t\topacity: 0;
  1085. \t\t\ttransform: translateY(20px) scale(0.95);
  1086. \t\t\tanimation: galleryItemFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  1087. \t\t\tanimation-delay: calc(var(--item-index, 0) * 0.05s);
  1088. \t\t}
  1090. \t\t/* Produits plus larges et esthétiques - 3 par ligne sur grands écrans */
  1091. \t\t@media(min-width: 1200px) {
  1092. \t\t\t.featured-gallery-item {
  1093. \t\t\t\tflex: 0 0 calc(33.333333% - 20px);
  1094. \t\t\t\tmax-width: calc(33.333333% - 20px);
  1095. \t\t\t}
  1096. \t\t}
  1098. \t\t@media(min-width: 992px) and (max-width: 1199px) {
  1099. \t\t\t.featured-gallery-item {
  1100. \t\t\t\tflex: 0 0 calc(33.333333% - 20px);
  1101. \t\t\t\tmax-width: calc(33.333333% - 20px);
  1102. \t\t\t}
  1103. \t\t}
  1105. \t\t@media(min-width: 768px) and (max-width: 991px) {
  1106. \t\t\t.featured-gallery-item {
  1107. \t\t\t\tflex: 0 0 calc(50% - 15px);
  1108. \t\t\t\tmax-width: calc(50% - 15px);
  1109. \t\t\t}
  1110. \t\t}
  1112. \t\t@media(max-width: 767px) {
  1113. \t\t\t.featured-gallery-item {
  1114. \t\t\t\tflex: 0 0 100%;
  1115. \t\t\t\tmax-width: 100%;
  1116. \t\t\t}
  1117. \t\t}
  1119. \t\t/* Design amélioré pour single-product - plus large et esthétique */
  1120. \t\t.featured-gallery-item .single-product {
  1121. \t\t\tmargin-bottom: 0;
  1122. \t\t\tmin-height: 520px;
  1123. \t\t\tdisplay: flex;
  1124. \t\t\tflex-direction: column;
  1125. \t\t\tpadding: 25px;
  1126. \t\t\tbackground: #fff;
  1127. \t\t\tborder-radius: 16px;
  1128. \t\t\tbox-shadow: 0 8px 25px rgba(15, 34, 58, 0.1);
  1129. \t\t\ttransition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  1130. \t\t\tborder: 1px solid rgba(0, 0, 0, 0.05);
  1131. \t\t\tposition: relative;
  1132. \t\t\toverflow: hidden;
  1133. \t\t}
  1135. \t\t.featured-gallery-item .single-product::before {
  1136. \t\t\tcontent: '';
  1137. \t\t\tposition: absolute;
  1138. \t\t\ttop: 0;
  1139. \t\t\tleft: 0;
  1140. \t\t\tright: 0;
  1141. \t\t\theight: 4px;
  1142. \t\t\tbackground: linear-gradient(90deg, #ffa200 0%, #ff6b00 100%);
  1143. \t\t\ttransform: scaleX(0);
  1144. \t\t\ttransform-origin: left;
  1145. \t\t\ttransition: transform 0.4s ease;
  1146. \t\t}
  1148. \t\t.featured-gallery-item .single-product:hover {
  1149. \t\t\ttransform: translateY(-8px);
  1150. \t\t\tbox-shadow: 0 20px 50px rgba(15, 34, 58, 0.15);
  1151. \t\t\tborder-color: rgba(255, 162, 0, 0.3);
  1152. \t\t}
  1154. \t\t.featured-gallery-item .single-product:hover::before {
  1155. \t\t\ttransform: scaleX(1);
  1156. \t\t}
  1158. \t\t/* S'assurer que les images s'affichent correctement - styles identiques à listing.html.twig */
  1159. \t\t.featured-gallery-item .single-product img {
  1160. \t\t\tmargin-bottom: 20px;
  1161. \t\t\twidth: 100%;
  1162. \t\t}
  1164. \t\t/* Styles améliorés pour product-image-container - plus large et esthétique */
  1165. \t\t.featured-gallery-item .product-image-container {
  1166. \t\t\tposition: relative;
  1167. \t\t\toverflow: hidden;
  1168. \t\t\tborder-radius: 14px;
  1169. \t\t\theight: 320px;
  1170. \t\t\tdisplay: flex;
  1171. \t\t\talign-items: center;
  1172. \t\t\tjustify-content: center;
  1173. \t\t\tbackground: linear-gradient(135deg, #f7f7fb 0%, #e8ecf1 100%);
  1174. \t\t\tmargin-bottom: 22px;
  1175. \t\t\tbox-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  1176. \t\t}
  1178. \t\t.featured-gallery-item .product-image-container:hover {
  1179. \t\t\tbox-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  1180. \t\t}
  1182. \t\t.featured-gallery-item .product-image-container:hover .main-product-img {
  1183. \t\t\ttransform: scale(1.08);
  1184. \t\t\ttransition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  1185. \t\t}
  1187. \t\t.featured-gallery-item .product-image-container a {
  1188. \t\t\tdisplay: block;
  1189. \t\t\twidth: 100%;
  1190. \t\t\theight: 100%;
  1191. \t\t}
  1193. \t\t.featured-gallery-item .main-product-img {
  1194. \t\t\ttransition: transform 0.3s ease;
  1195. \t\t\twidth: 100% !important;
  1196. \t\t\theight: 100% !important;
  1197. \t\t\tobject-fit: cover;
  1198. \t\t\tobject-position: center;
  1199. \t\t\tdisplay: block;
  1200. \t\t\twill-change: transform, opacity;
  1201. \t\t}
  1203. \t\t.featured-gallery-item .main-product-img.image-fade {
  1204. \t\t\tanimation: imageFade 0.5s ease;
  1205. \t\t}
  1207. \t\t@keyframes imageFade {
  1208. \t\t\tfrom {
  1209. \t\t\t\topacity: 0;
  1210. \t\t\t\ttransform: scale(1.02);
  1211. \t\t\t}
  1212. \t\t\tto {
  1213. \t\t\t\topacity: 1;
  1214. \t\t\t\ttransform: scale(1);
  1215. \t\t\t}
  1216. \t\t}
  1218. \t\t.featured-gallery-item .product-details {
  1219. \t\t\tdisplay: flex;
  1220. \t\t\tflex-direction: column;
  1221. \t\t\theight: 100%;
  1222. \t\t\tpadding: 0 5px;
  1223. \t\t}
  1225. \t\t.featured-gallery-item .product-details h6 {
  1226. \t\t\tfont-size: 1.1rem;
  1227. \t\t\tfont-weight: 600;
  1228. \t\t\tmargin-bottom: 12px;
  1229. \t\t\tline-height: 1.4;
  1230. \t\t\tcolor: #2c3e50;
  1231. \t\t\tmin-height: 48px;
  1232. \t\t}
  1234. \t\t.featured-gallery-item .product-details h6 a {
  1235. \t\t\tcolor: #2c3e50;
  1236. \t\t\ttext-decoration: none;
  1237. \t\t\ttransition: color 0.3s ease;
  1238. \t\t}
  1240. \t\t.featured-gallery-item .product-details h6 a:hover {
  1241. \t\t\tcolor: #ffa200;
  1242. \t\t}
  1244. \t\t.featured-gallery-item .prd-bottom {
  1245. \t\t\tmargin-top: auto;
  1246. \t\t}
  1248. \t\t/* Styles pour img-nav-btn - identiques à listing.html.twig */
  1249. \t\t.featured-gallery-item .img-nav-btn {
  1250. \t\t\tposition: absolute;
  1251. \t\t\ttop: 50%;
  1252. \t\t\ttransform: translateY(-50%);
  1253. \t\t\tbackground: rgba(0, 0, 0, 0.6);
  1254. \t\t\tcolor: white;
  1255. \t\t\tborder: none;
  1256. \t\t\twidth: 35px;
  1257. \t\t\theight: 35px;
  1258. \t\t\tborder-radius: 50%;
  1259. \t\t\tdisplay: flex;
  1260. \t\t\talign-items: center;
  1261. \t\t\tjustify-content: center;
  1262. \t\t\tcursor: pointer;
  1263. \t\t\ttransition: all 0.3s ease;
  1264. \t\t\tz-index: 10;
  1265. \t\t}
  1267. \t\t.featured-gallery-item .img-nav-btn:hover {
  1268. \t\t\tbackground: #095ad3;
  1269. \t\t\ttransform: translateY(-50%) scale(1.1);
  1270. \t\t}
  1272. \t\t.featured-gallery-item .img-nav-left {
  1273. \t\t\tleft: 10px;
  1274. \t\t}
  1276. \t\t.featured-gallery-item .img-nav-right {
  1277. \t\t\tright: 10px;
  1278. \t\t}
  1280. \t\t.featured-gallery-item .img-indicators {
  1281. \t\t\tposition: absolute;
  1282. \t\t\tbottom: 10px;
  1283. \t\t\tleft: 50%;
  1284. \t\t\ttransform: translateX(-50%);
  1285. \t\t\tdisplay: flex;
  1286. \t\t\tgap: 5px;
  1287. \t\t\tz-index: 10;
  1288. \t\t}
  1290. \t\t.featured-gallery-item .indicator {
  1291. \t\t\twidth: 8px;
  1292. \t\t\theight: 8px;
  1293. \t\t\tborder-radius: 50%;
  1294. \t\t\tbackground: rgba(255, 255, 255, 0.5);
  1295. \t\t\tcursor: pointer;
  1296. \t\t\tmargin-bottom: 10px;
  1297. \t\t\ttransition: all 0.3s ease;
  1298. \t\t\tborder: 1px solid rgba(255, 255, 255, 0.3);
  1299. \t\t}
  1301. \t\t.featured-gallery-item .indicator.active {
  1302. \t\t\tbackground: #ffa200;
  1303. \t\t\tborder-color: #ffa200;
  1304. \t\t\ttransform: scale(1.2);
  1305. \t\t}
  1307. \t\t.featured-gallery-item .indicator:hover {
  1308. \t\t\tbackground: rgba(255, 255, 255, 0.8);
  1309. \t\t}
  1311. \t\t/* Styles pour shop-info - identiques à listing.html.twig */
  1312. \t\t.featured-gallery-item .shop-info {
  1313. \t\t\tmargin: 10px 0 15px 0;
  1314. \t\t\tpadding: 8px 0;
  1315. \t\t\tborder-bottom: 1px solid #f0f0f0;
  1316. \t\t}
  1318. \t\t.featured-gallery-item .shop-info small {
  1319. \t\t\tfont-size: 0.9rem;
  1320. \t\t}
  1322. \t\t.featured-gallery-item .shop-link {
  1323. \t\t\tcolor: #007bff;
  1324. \t\t\ttext-decoration: none;
  1325. \t\t\tfont-weight: 500;
  1326. \t\t}
  1328. \t\t.featured-gallery-item .shop-link:hover {
  1329. \t\t\tcolor: #ffa200;
  1330. \t\t\ttext-decoration: underline;
  1331. \t\t}
  1333. \t\t/* Styles améliorés pour le prix */
  1334. \t\t.featured-gallery-item .price {
  1335. \t\t\tmargin-bottom: 18px;
  1336. \t\t}
  1338. \t\t.featured-gallery-item .price h6 {
  1339. \t\t\tfont-size: 1.4rem;
  1340. \t\t\tfont-weight: 700;
  1341. \t\t\tcolor: #ffa200;
  1342. \t\t\tmargin-bottom: 5px;
  1343. \t\t}
  1345. \t\t.featured-gallery-item .price h6.l-through {
  1346. \t\t\tfont-size: 1rem;
  1347. \t\t\tcolor: #95a5a6;
  1348. \t\t\ttext-decoration: line-through;
  1349. \t\t\tfont-weight: 500;
  1350. \t\t}
  1352. \t\t/* Les autres styles (prd-bottom, social-info) sont déjà définis dans main.css */
  1354. \t\t@keyframes galleryItemFadeIn {
  1355. \t\t\tfrom {
  1356. \t\t\t\topacity: 0;
  1357. \t\t\t\ttransform: translateY(20px) scale(0.95);
  1358. \t\t\t}
  1359. \t\t\tto {
  1360. \t\t\t\topacity: 1;
  1361. \t\t\t\ttransform: translateY(0) scale(1);
  1362. \t\t\t}
  1363. \t\t}
  1365. \t\t.featured-gallery-card {
  1366. \t\t\tdisplay: flex;
  1367. \t\t\tflex-direction: column;
  1368. \t\t\theight: 100%;
  1369. \t\t\tbackground: white;
  1370. \t\t\tborder-radius: 12px;
  1371. \t\t\toverflow: hidden;
  1372. \t\t\tbox-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  1373. \t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1374. \t\t\tborder: 1px solid #f0f0f0;
  1375. \t\t}
  1377. \t\t.featured-gallery-card:hover {
  1378. \t\t\ttransform: translateY(-5px);
  1379. \t\t\tbox-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  1380. \t\t\tborder-color: #ffa200;
  1381. \t\t}
  1383. \t\t.featured-gallery-image-wrapper {
  1384. \t\t\tposition: relative;
  1385. \t\t\twidth: 100%;
  1386. \t\t\tpadding-top: 100%; /* Ratio 1:1 pour une galerie carrée */
  1387. \t\t\toverflow: hidden;
  1388. \t\t\tbackground: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  1389. \t\t}
  1391. \t\t.featured-gallery-image {
  1392. \t\t\tposition: absolute;
  1393. \t\t\ttop: 0;
  1394. \t\t\tleft: 0;
  1395. \t\t\twidth: 100%;
  1396. \t\t\theight: 100%;
  1397. \t\t\tbackground-size: cover;
  1398. \t\t\tbackground-position: center;
  1399. \t\t\ttransition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  1400. \t\t}
  1402. \t\t.featured-gallery-card:hover .featured-gallery-image {
  1403. \t\t\ttransform: scale(1.08);
  1404. \t\t}
  1406. \t\t.featured-gallery-badge {
  1407. \t\t\tposition: absolute;
  1408. \t\t\ttop: 8px;
  1409. \t\t\tleft: 8px;
  1410. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  1411. \t\t\tcolor: white;
  1412. \t\t\tpadding: 4px 10px;
  1413. \t\t\tborder-radius: 15px;
  1414. \t\t\tfont-size: 12px;
  1415. \t\t\tfont-weight: 600;
  1416. \t\t\tz-index: 2;
  1417. \t\t\tbox-shadow: 0 2px 8px rgba(255, 162, 0, 0.4);
  1418. \t\t}
  1420. \t\t.featured-gallery-overlay {
  1421. \t\t\tposition: absolute;
  1422. \t\t\ttop: 0;
  1423. \t\t\tleft: 0;
  1424. \t\t\twidth: 100%;
  1425. \t\t\theight: 100%;
  1426. \t\t\tbackground: rgba(0, 0, 0, 0.5);
  1427. \t\t\tdisplay: flex;
  1428. \t\t\talign-items: center;
  1429. \t\t\tjustify-content: center;
  1430. \t\t\topacity: 0;
  1431. \t\t\ttransition: opacity 0.3s ease;
  1432. \t\t}
  1434. \t\t.featured-gallery-card:hover .featured-gallery-overlay {
  1435. \t\t\topacity: 1;
  1436. \t\t}
  1438. \t\t.featured-gallery-view-btn {
  1439. \t\t\tbackground: white;
  1440. \t\t\tcolor: #333;
  1441. \t\t\twidth: 40px;
  1442. \t\t\theight: 40px;
  1443. \t\t\tborder-radius: 50%;
  1444. \t\t\tdisplay: flex;
  1445. \t\t\talign-items: center;
  1446. \t\t\tjustify-content: center;
  1447. \t\t\ttext-decoration: none;
  1448. \t\t\tfont-size: 18px;
  1449. \t\t\ttransform: scale(0.8);
  1450. \t\t\ttransition: transform 0.3s ease;
  1451. \t\t}
  1453. \t\t.featured-gallery-card:hover .featured-gallery-view-btn {
  1454. \t\t\ttransform: scale(1);
  1455. \t\t}
  1457. \t\t.featured-gallery-info {
  1458. \t\t\tpadding: 12px;
  1459. \t\t\tflex: 1;
  1460. \t\t\tdisplay: flex;
  1461. \t\t\tflex-direction: column;
  1462. \t\t}
  1464. \t\t.featured-gallery-title {
  1465. \t\t\tfont-size: 14px;
  1466. \t\t\tfont-weight: 600;
  1467. \t\t\tmargin-bottom: 6px;
  1468. \t\t\tcolor: #333;
  1469. \t\t\tline-height: 1.3;
  1470. \t\t\tdisplay: -webkit-box;
  1471. \t\t\t-webkit-line-clamp: 2;
  1472. \t\t\t-webkit-box-orient: vertical;
  1473. \t\t\toverflow: hidden;
  1474. \t\t\tmin-height: 36px;
  1475. \t\t}
  1477. \t\t.featured-gallery-title a {
  1478. \t\t\tcolor: #333;
  1479. \t\t\ttext-decoration: none;
  1480. \t\t\ttransition: color 0.3s ease;
  1481. \t\t}
  1483. \t\t.featured-gallery-title a:hover {
  1484. \t\t\tcolor: #ffa200;
  1485. \t\t}
  1487. \t\t.featured-gallery-price {
  1488. \t\t\tfont-size: 16px;
  1489. \t\t\tfont-weight: 700;
  1490. \t\t\tcolor: #ffa200;
  1491. \t\t\tmargin-bottom: 6px;
  1492. \t\t}
  1494. \t\t.featured-gallery-rating {
  1495. \t\t\tdisplay: flex;
  1496. \t\t\talign-items: center;
  1497. \t\t\tgap: 3px;
  1498. \t\t\tfont-size: 11px;
  1499. \t\t}
  1501. \t\t.featured-gallery-rating .fa-star.active {
  1502. \t\t\tcolor: #ffa200;
  1503. \t\t}
  1505. \t\t.featured-gallery-rating .fa-star-o {
  1506. \t\t\tcolor: #ddd;
  1507. \t\t}
  1509. \t\t.featured-gallery-controls {
  1510. \t\t\tdisplay: flex;
  1511. \t\t\tjustify-content: center;
  1512. \t\t\tgap: 20px;
  1513. \t\t\tmargin-top: 25px;
  1514. \t\t\tpadding: 0 20px;
  1515. \t\t}
  1517. \t\t.featured-gallery-nav-btn {
  1518. \t\t\twidth: 42px;
  1519. \t\t\theight: 42px;
  1520. \t\t\tborder-radius: 50%;
  1521. \t\t\tborder: 1.5px solid #ffa200;
  1522. \t\t\tbackground: white;
  1523. \t\t\tcolor: #ffa200;
  1524. \t\t\tfont-size: 16px;
  1525. \t\t\tcursor: pointer;
  1526. \t\t\tdisplay: flex;
  1527. \t\t\talign-items: center;
  1528. \t\t\tjustify-content: center;
  1529. \t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1530. \t\t\tbox-shadow: 0 3px 10px rgba(255, 162, 0, 0.18);
  1531. \t\t\tposition: relative;
  1532. \t\t\toverflow: hidden;
  1533. \t\t}
  1535. \t\t.featured-gallery-nav-btn.btn-ripple::after {
  1536. \t\t\tcontent: '';
  1537. \t\t\tposition: absolute;
  1538. \t\t\twidth: 100%;
  1539. \t\t\theight: 100%;
  1540. \t\t\tleft: 0;
  1541. \t\t\ttop: 0;
  1542. \t\t\tborder-radius: 50%;
  1543. \t\t\tbackground: rgba(255, 162, 0, 0.2);
  1544. \t\t\tanimation: rippleEffect 0.35s ease;
  1545. \t\t}
  1547. \t\t@keyframes rippleEffect {
  1548. \t\t\tfrom {
  1549. \t\t\t\ttransform: scale(0.6);
  1550. \t\t\t\topacity: 0.7;
  1551. \t\t\t}
  1552. \t\t\tto {
  1553. \t\t\t\ttransform: scale(1.4);
  1554. \t\t\t\topacity: 0;
  1555. \t\t\t}
  1556. \t\t}
  1558. \t\t.featured-gallery-nav-btn:hover:not(:disabled) {
  1559. \t\t\tbackground: #ffa200;
  1560. \t\t\tcolor: white;
  1561. \t\t\ttransform: scale(1.1);
  1562. \t\t\tbox-shadow: 0 5px 18px rgba(255, 162, 0, 0.4);
  1563. \t\t}
  1565. \t\t.featured-gallery-nav-btn:active:not(:disabled) {
  1566. \t\t\ttransform: scale(0.95);
  1567. \t\t}
  1569. \t\t.featured-gallery-nav-btn:disabled {
  1570. \t\t\topacity: 0.3;
  1571. \t\t\tcursor: not-allowed;
  1572. \t\t}
  1574. \t\t.featured-gallery-load-more {
  1575. \t\t\tmargin-top: 30px;
  1576. \t\t}
  1578. \t\t/* Style pour le bouton \"Voir tous les produits\" */
  1579. \t\t.btn-view-all-products {
  1580. \t\t\tdisplay: inline-flex;
  1581. \t\t\talign-items: center;
  1582. \t\t\tgap: 12px;
  1583. \t\t\tpadding: 16px 40px;
  1584. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  1585. \t\t\tcolor: white;
  1586. \t\t\ttext-decoration: none;
  1587. \t\t\tborder-radius: 50px;
  1588. \t\t\tfont-weight: 600;
  1589. \t\t\tfont-size: 16px;
  1590. \t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1591. \t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.3);
  1592. \t\t\tposition: relative;
  1593. \t\t\toverflow: hidden;
  1594. \t\t}
  1596. \t\t.btn-view-all-products::before {
  1597. \t\t\tcontent: '';
  1598. \t\t\tposition: absolute;
  1599. \t\t\ttop: 0;
  1600. \t\t\tleft: -100%;
  1601. \t\t\twidth: 100%;
  1602. \t\t\theight: 100%;
  1603. \t\t\tbackground: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  1604. \t\t\ttransition: left 0.5s ease;
  1605. \t\t}
  1607. \t\t.btn-view-all-products:hover::before {
  1608. \t\t\tleft: 100%;
  1609. \t\t}
  1611. \t\t.btn-view-all-products:hover {
  1612. \t\t\ttransform: translateY(-3px);
  1613. \t\t\tbox-shadow: 0 8px 25px rgba(255, 162, 0, 0.5);
  1614. \t\t\tcolor: white;
  1615. \t\t}
  1617. \t\t.btn-view-all-products:active {
  1618. \t\t\ttransform: translateY(-1px);
  1619. \t\t}
  1621. \t\t.btn-view-all-products i {
  1622. \t\t\tfont-size: 18px;
  1623. \t\t\ttransition: transform 0.3s ease;
  1624. \t\t}
  1626. \t\t.btn-view-all-products:hover i {
  1627. \t\t\ttransform: translateX(5px);
  1628. \t\t}
  1630. \t\t.btn-view-all-products span {
  1631. \t\t\tposition: relative;
  1632. \t\t\tz-index: 1;
  1633. \t\t}
  1635. \t\t/* Responsive */
  1636. \t\t@media(max-width: 767px) {
  1637. \t\t\t.btn-view-all-products {
  1638. \t\t\t\tpadding: 14px 30px;
  1639. \t\t\t\tfont-size: 14px;
  1640. \t\t\t}
  1641. \t\t}
  1643. \t\t/* Responsive */
  1644. \t\t@media(max-width: 767px) {
  1645. \t\t\t.featured-gallery-grid {
  1646. \t\t\t\tgap: 10px;
  1647. \t\t\t}
  1649. \t\t\t.featured-gallery-info {
  1650. \t\t\t\tpadding: 10px;
  1651. \t\t\t}
  1653. \t\t\t.featured-gallery-title {
  1654. \t\t\t\tfont-size: 13px;
  1655. \t\t\t\tmin-height: 32px;
  1656. \t\t\t}
  1658. \t\t\t.featured-gallery-price {
  1659. \t\t\t\tfont-size: 14px;
  1660. \t\t\t}
  1661. \t\t}
  1663. \t\t/* Styles pour les grilles de produits Nouveautés */
  1664. \t\t.latest-products-grid {
  1665. \t\t\tmargin-top: 30px;
  1666. \t\t}
  1668. \t\t.product-card-modern {
  1669. \t\t\tbackground: white;
  1670. \t\t\tborder-radius: 12px;
  1671. \t\t\toverflow: hidden;
  1672. \t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  1673. \t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1674. \t\t\theight: 100%;
  1675. \t\t\tdisplay: flex;
  1676. \t\t\tflex-direction: column;
  1677. \t\t\tborder: 1px solid #f0f0f0;
  1678. \t\t}
  1680. \t\t.product-card-modern:hover {
  1681. \t\t\ttransform: translateY(-8px);
  1682. \t\t\tbox-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  1683. \t\t\tborder-color: #ffa200;
  1684. \t\t}
  1686. \t\t.product-image-wrapper {
  1687. \t\t\tposition: relative;
  1688. \t\t\twidth: 100%;
  1689. \t\t\tpadding-top: 75%; /* Ratio 4:3 */
  1690. \t\t\toverflow: hidden;
  1691. \t\t\tbackground: #f8f9fa;
  1692. \t\t}
  1694. \t\t.product-image {
  1695. \t\t\tposition: absolute;
  1696. \t\t\ttop: 0;
  1697. \t\t\tleft: 0;
  1698. \t\t\twidth: 100%;
  1699. \t\t\theight: 100%;
  1700. \t\t\tbackground-size: cover;
  1701. \t\t\tbackground-position: center;
  1702. \t\t\ttransition: transform 0.5s ease;
  1703. \t\t}
  1705. \t\t.product-card-modern:hover .product-image {
  1706. \t\t\ttransform: scale(1.1);
  1707. \t\t}
  1709. \t\t.product-badge-modern {
  1710. \t\t\tposition: absolute;
  1711. \t\t\ttop: 10px;
  1712. \t\t\tright: 10px;
  1713. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  1714. \t\t\tcolor: white;
  1715. \t\t\tpadding: 6px 12px;
  1716. \t\t\tborder-radius: 20px;
  1717. \t\t\tfont-size: 12px;
  1718. \t\t\tfont-weight: 600;
  1719. \t\t\tz-index: 2;
  1720. \t\t\tbox-shadow: 0 2px 8px rgba(255, 162, 0, 0.3);
  1721. \t\t}
  1723. \t\t.product-badge-modern.new-badge {
  1724. \t\t\tbackground: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  1725. \t\t}
  1727. \t\t.product-overlay {
  1728. \t\t\tposition: absolute;
  1729. \t\t\ttop: 0;
  1730. \t\t\tleft: 0;
  1731. \t\t\twidth: 100%;
  1732. \t\t\theight: 100%;
  1733. \t\t\tbackground: rgba(0, 0, 0, 0.5);
  1734. \t\t\tdisplay: flex;
  1735. \t\t\talign-items: center;
  1736. \t\t\tjustify-content: center;
  1737. \t\t\topacity: 0;
  1738. \t\t\ttransition: opacity 0.3s ease;
  1739. \t\t\tz-index: 1;
  1740. \t\t}
  1742. \t\t.product-card-modern:hover .product-overlay {
  1743. \t\t\topacity: 1;
  1744. \t\t}
  1746. \t\t.btn-view-product {
  1747. \t\t\tbackground: white;
  1748. \t\t\tcolor: #333;
  1749. \t\t\tpadding: 12px 24px;
  1750. \t\t\tborder-radius: 25px;
  1751. \t\t\ttext-decoration: none;
  1752. \t\t\tfont-weight: 600;
  1753. \t\t\tdisplay: flex;
  1754. \t\t\talign-items: center;
  1755. \t\t\tgap: 8px;
  1756. \t\t\ttransition: all 0.3s ease;
  1757. \t\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  1758. \t\t}
  1760. \t\t.btn-view-product:hover {
  1761. \t\t\tbackground: #ffa200;
  1762. \t\t\tcolor: white;
  1763. \t\t\ttransform: scale(1.05);
  1764. \t\t}
  1766. \t\t.product-info-modern {
  1767. \t\t\tpadding: 16px;
  1768. \t\t\tflex-grow: 1;
  1769. \t\t\tdisplay: flex;
  1770. \t\t\tflex-direction: column;
  1771. \t\t}
  1773. \t\t.product-title-modern {
  1774. \t\t\tmargin: 0 0 8px;
  1775. \t\t\tfont-size: 16px;
  1776. \t\t\tfont-weight: 600;
  1777. \t\t\tline-height: 1.4;
  1778. \t\t}
  1780. \t\t.product-title-modern a {
  1781. \t\t\tcolor: #333;
  1782. \t\t\ttext-decoration: none;
  1783. \t\t\ttransition: color 0.3s ease;
  1784. \t\t}
  1786. \t\t.product-title-modern a:hover {
  1787. \t\t\tcolor: #ffa200;
  1788. \t\t}
  1790. \t\t.product-price-modern {
  1791. \t\t\tfont-size: 20px;
  1792. \t\t\tfont-weight: 700;
  1793. \t\t\tcolor: #ffa200;
  1794. \t\t\tmargin-bottom: 8px;
  1795. \t\t}
  1797. \t\t.product-shop-modern {
  1798. \t\t\tdisplay: flex;
  1799. \t\t\talign-items: center;
  1800. \t\t\tgap: 6px;
  1801. \t\t\tfont-size: 13px;
  1802. \t\t\tcolor: #666;
  1803. \t\t\tmargin-bottom: 8px;
  1804. \t\t}
  1806. \t\t.product-shop-modern i {
  1807. \t\t\tcolor: #ffa200;
  1808. \t\t}
  1810. \t\t.shop-link {
  1811. \t\t\tcolor: #666;
  1812. \t\t\ttext-decoration: none;
  1813. \t\t\ttransition: color 0.3s ease;
  1814. \t\t}
  1816. \t\t.shop-link:hover {
  1817. \t\t\tcolor: #ffa200;
  1818. \t\t}
  1820. \t\t.product-rating-modern {
  1821. \t\t\tdisplay: flex;
  1822. \t\t\talign-items: center;
  1823. \t\t\tgap: 4px;
  1824. \t\t\tmargin-top: auto;
  1825. \t\t}
  1827. \t\t.product-rating-modern .fa-star.active {
  1828. \t\t\tcolor: #ffc107;
  1829. \t\t}
  1831. \t\t.product-rating-modern .fa-star-o {
  1832. \t\t\tcolor: #ddd;
  1833. \t\t}
  1835. \t\t.rating-count {
  1836. \t\t\tfont-size: 12px;
  1837. \t\t\tcolor: #666;
  1838. \t\t\tmargin-left: 4px;
  1839. \t\t}
  1841. \t\t.product-views-modern {
  1842. \t\t\tdisplay: flex;
  1843. \t\t\talign-items: center;
  1844. \t\t\tgap: 6px;
  1845. \t\t\tfont-size: 12px;
  1846. \t\t\tcolor: #666;
  1847. \t\t\tmargin-top: auto;
  1848. \t\t}
  1850. \t\t.product-views-modern i {
  1851. \t\t\tcolor: #999;
  1852. \t\t}
  1854. \t\t/* Style des cartes produits */
  1855. \t\t.product-card {
  1856. \t\t\tbackground: white;
  1857. \t\t\tborder-radius: 15px;
  1858. \t\t\toverflow: hidden;
  1859. \t\t\tbox-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  1860. \t\t\ttransition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  1861. \t\t\theight: 100%;
  1862. \t\t\tdisplay: flex;
  1863. \t\t\tflex-direction: column;
  1864. \t\t}
  1866. \t\t.product-card:hover {
  1867. \t\t\tbox-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  1868. \t\t\ttransform: translateY(-5px);
  1869. \t\t}
  1871. \t\t.product-image {
  1872. \t\t\twidth: 100%;
  1873. \t\t\theight: 250px;
  1874. \t\t\tbackground-size: cover;
  1875. \t\t\tbackground-position: center;
  1876. \t\t\tposition: relative;
  1877. \t\t\toverflow: hidden;
  1878. \t\t}
  1880. \t\t.product-image::before {
  1881. \t\t\tcontent: '';
  1882. \t\t\tposition: absolute;
  1883. \t\t\ttop: 0;
  1884. \t\t\tleft: -100%;
  1885. \t\t\twidth: 100%;
  1886. \t\t\theight: 100%;
  1887. \t\t\tbackground: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  1888. \t\t\ttransition: left 0.6s ease;
  1889. \t\t}
  1891. \t\t.product-card:hover .product-image::before {
  1892. \t\t\tleft: 100%;
  1893. \t\t}
  1895. \t\t.product-badge {
  1896. \t\t\tposition: absolute;
  1897. \t\t\ttop: 15px;
  1898. \t\t\tright: 15px;
  1899. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  1900. \t\t\tcolor: white;
  1901. \t\t\tpadding: 8px 15px;
  1902. \t\t\tborder-radius: 20px;
  1903. \t\t\tfont-size: 0.85rem;
  1904. \t\t\tfont-weight: 600;
  1905. \t\t\tbox-shadow: 0 4px 10px rgba(255, 162, 0, 0.4);
  1906. \t\t\tz-index: 1;
  1907. \t\t}
  1909. \t\t.product-info {
  1910. \t\t\tpadding: 20px;
  1911. \t\t\tflex-grow: 1;
  1912. \t\t\tdisplay: flex;
  1913. \t\t\tflex-direction: column;
  1914. \t\t}
  1916. \t\t.product-title {
  1917. \t\t\tfont-size: 1.1rem;
  1918. \t\t\tfont-weight: 600;
  1919. \t\t\tcolor: #2c3e50;
  1920. \t\t\tmargin-bottom: 10px;
  1921. \t\t\tline-height: 1.4;
  1922. \t\t\tdisplay: -webkit-box;
  1923. \t\t\t-webkit-line-clamp: 2;
  1924. \t\t\t-webkit-box-orient: vertical;
  1925. \t\t\toverflow: hidden;
  1926. \t\t}
  1928. \t\t.product-price {
  1929. \t\t\tfont-size: 1.5rem;
  1930. \t\t\tfont-weight: 800;
  1931. \t\t\tcolor: #ffa200;
  1932. \t\t\tmargin-bottom: 15px;
  1933. \t\t}
  1935. \t\t.product-shop {
  1936. \t\t\tfont-size: 0.9rem;
  1937. \t\t\tcolor: #666;
  1938. \t\t\tmargin-bottom: 15px;
  1939. \t\t}
  1941. \t\t.product-shop a {
  1942. \t\t\tcolor: #667eea;
  1943. \t\t\ttext-decoration: none;
  1944. \t\t\ttransition: color 0.3s ease;
  1945. \t\t}
  1947. \t\t.product-shop a:hover {
  1948. \t\t\tcolor: #ffa200;
  1949. \t\t}
  1951. \t\t/* Newsletter Modern Styles */
  1952. \t\t.newsletter-section-modern {
  1953. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #095ad3 100%);
  1954. \t\t\tposition: relative;
  1955. \t\t\toverflow: hidden;
  1956. \t\t}
  1957. \t\t.newsletter-section-modern::before {
  1958. \t\t\tcontent: '';
  1959. \t\t\tposition: absolute;
  1960. \t\t\ttop: -50%;
  1961. \t\t\tright: -50%;
  1962. \t\t\twidth: 100%;
  1963. \t\t\theight: 200%;
  1964. \t\t\tbackground: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  1965. \t\t\tanimation: pulse 3s ease-in-out infinite;
  1966. \t\t}
  1967. \t\t@keyframes pulse {
  1968. \t\t\t0,
  1969. \t\t\t100% {
  1970. \t\t\t\ttransform: scale(1);
  1971. \t\t\t\topacity: 0.5;
  1972. \t\t\t}
  1973. \t\t\t50% {
  1974. \t\t\t\ttransform: scale(1.1);
  1975. \t\t\t\topacity: 0.8;
  1976. \t\t\t}
  1977. \t\t}
  1978. \t\t.newsletter-card {
  1979. \t\t\tbackground: white;
  1980. \t\t\tborder-radius: 20px;
  1981. \t\t\tpadding: 40px;
  1982. \t\t\tbox-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  1983. \t\t\tposition: relative;
  1984. \t\t\tz-index: 1;
  1985. \t\t}
  1986. \t\t.newsletter-title {
  1987. \t\t\tfont-size: 2.5rem;
  1988. \t\t\tfont-weight: bold;
  1989. \t\t\tcolor: #333;
  1990. \t\t}
  1991. \t\t.newsletter-description {
  1992. \t\t\tcolor: #666;
  1993. \t\t\tfont-size: 1.1rem;
  1994. \t\t\tline-height: 1.8;
  1995. \t\t}
  1996. \t\t.newsletter-form-modern {
  1997. \t\t\tposition: relative;
  1998. \t\t}
  1999. \t\t.newsletter-input-wrapper {
  2000. \t\t\tdisplay: flex;
  2001. \t\t\tgap: 10px;
  2002. \t\t\tmargin-bottom: 15px;
  2003. \t\t}
  2004. \t\t.newsletter-input {
  2005. \t\t\tflex: 1;
  2006. \t\t\tpadding: 18px 25px;
  2007. \t\t\tborder: 2px solid #e0e0e0;
  2008. \t\t\tborder-radius: 50px;
  2009. \t\t\tfont-size: 1rem;
  2010. \t\t\ttransition: all 0.3s ease;\t\t\tbackground: #fff;
  2011. \t\t\tcolor: #333;
  2012. \t\t}
  2013. \t\t.newsletter-input::placeholder {
  2014. \t\t\tcolor: #777;
  2015. \t\t}
  2016. \t\t.newsletter-input:focus {
  2017. \t\t\toutline: none;
  2018. \t\t\tborder-color: #ffa200;
  2019. \t\t\tbox-shadow: 0 0 0 3px rgba(255, 162, 0, 0.1);
  2020. \t\t}
  2021. \t\t.newsletter-button {
  2022. \t\t\tpadding: 18px 35px;
  2023. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  2024. \t\t\tcolor: white;
  2025. \t\t\tborder: none;
  2026. \t\t\tborder-radius: 50px;
  2027. \t\t\tfont-weight: 600;
  2028. \t\t\tfont-size: 1rem;
  2029. \t\t\tcursor: pointer;
  2030. \t\t\ttransition: all 0.3s ease;
  2031. \t\t\twhite-space: nowrap;
  2032. \t\t}
  2033. \t\t.newsletter-button:hover {
  2034. \t\t\ttransform: translateY(-2px);
  2035. \t\t\tbox-shadow: 0 5px 20px rgba(255, 162, 0, 0.4);
  2036. \t\t}
  2037. \t\t.newsletter-privacy {
  2038. \t\t\tcolor: #999;
  2039. \t\t}
  2041. \t\t/* CTA Modern Styles */
  2042. \t\t.cta-section-modern {
  2043. \t\t\tbackground: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  2044. \t\t}
  2045. \t\t.cta-card {
  2046. \t\t\tbackground: white;
  2047. \t\t\tborder-radius: 25px;
  2048. \t\t\tpadding: 50px;
  2049. \t\t\tbox-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
  2050. \t\t\tposition: relative;
  2051. \t\t\toverflow: hidden;
  2052. \t\t}
  2053. \t\t.cta-card::before {
  2054. \t\t\tcontent: '';
  2055. \t\t\tposition: absolute;
  2056. \t\t\ttop: -50px;
  2057. \t\t\tright: -50px;
  2058. \t\t\twidth: 200px;
  2059. \t\t\theight: 200px;
  2060. \t\t\tbackground: linear-gradient(135deg, rgba(255,162,0,0.1) 0%, rgba(255,162,0,0.05) 100%);
  2061. \t\t\tborder-radius: 50%;
  2062. \t\t}
  2063. \t\t.cta-badge {
  2064. \t\t\tdisplay: inline-block;
  2065. \t\t\tpadding: 8px 20px;
  2066. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  2067. \t\t\tcolor: white;
  2068. \t\t\tborder-radius: 50px;
  2069. \t\t\tfont-size: 0.9rem;
  2070. \t\t\tfont-weight: 600;
  2071. \t\t\tmargin-bottom: 20px;
  2072. \t\t}
  2073. \t\t.cta-title {
  2074. \t\t\tfont-size: 3rem;
  2075. \t\t\tfont-weight: bold;
  2076. \t\t\tcolor: #333;
  2077. \t\t\tmargin-bottom: 20px;
  2078. \t\t}
  2079. \t\t.cta-description {
  2080. \t\t\tfont-size: 1.2rem;
  2081. \t\t\tcolor: #666;
  2082. \t\t\tline-height: 1.8;
  2083. \t\t}
  2084. \t\t.cta-features {
  2085. \t\t\tdisplay: flex;
  2086. \t\t\tflex-direction: column;
  2087. \t\t\tgap: 15px;
  2088. \t\t}
  2089. \t\t.cta-feature-item {
  2090. \t\t\tdisplay: flex;
  2091. \t\t\talign-items: center;
  2092. \t\t\tgap: 10px;
  2093. \t\t\tfont-size: 1rem;
  2094. \t\t\tcolor: #555;
  2095. \t\t}
  2096. \t\t.cta-feature-item i {
  2097. \t\t\tcolor: #ffa200;
  2098. \t\t\tfont-size: 1.3rem;
  2099. \t\t}
  2100. \t\t.cta-buttons {
  2101. \t\t\tdisplay: flex;
  2102. \t\t\tgap: 15px;
  2103. \t\t\tflex-wrap: wrap;
  2104. \t\t}
  2105. \t\t.cta-button-primary {
  2106. \t\t\tpadding: 15px 35px;
  2107. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  2108. \t\t\tcolor: white;
  2109. \t\t\tborder: none;
  2110. \t\t\tborder-radius: 50px;
  2111. \t\t\tfont-weight: 600;
  2112. \t\t\tfont-size: 1.1rem;
  2113. \t\t\ttransition: all 0.3s ease;
  2114. \t\t}
  2115. \t\t.cta-button-primary:hover {
  2116. \t\t\ttransform: translateY(-3px);
  2117. \t\t\tbox-shadow: 0 8px 25px rgba(255, 162, 0, 0.4);
  2118. \t\t\tcolor: white;
  2119. \t\t}
  2120. \t\t.cta-button-secondary {
  2121. \t\t\tpadding: 15px 35px;
  2122. \t\t\tbackground: white;
  2123. \t\t\tcolor: #ffa200;
  2124. \t\t\tborder: 2px solid #ffa200;
  2125. \t\t\tborder-radius: 50px;
  2126. \t\t\tfont-weight: 600;
  2127. \t\t\tfont-size: 1.1rem;
  2128. \t\t\ttransition: all 0.3s ease;
  2129. \t\t}
  2130. \t\t.cta-button-secondary:hover {
  2131. \t\t\tbackground: #ffa200;
  2132. \t\t\tcolor: white;
  2133. \t\t\ttransform: translateY(-3px);
  2134. \t\t\tbox-shadow: 0 8px 25px rgba(255, 162, 0, 0.3);
  2135. \t\t}
  2136. \t\t.cta-image-wrapper {
  2137. \t\t\tposition: relative;
  2138. \t\t}
  2139. \t\t.cta-decoration {
  2140. \t\t\tposition: absolute;
  2141. \t\t\ttop: -20px;
  2142. \t\t\tright: -20px;
  2143. \t\t\twidth: 150px;
  2144. \t\t\theight: 150px;
  2145. \t\t\tbackground: linear-gradient(135deg, rgba(255,162,0,0.2) 0%, rgba(255,162,0,0.05) 100%);
  2146. \t\t\tborder-radius: 50%;
  2147. \t\t\tz-index: 0;
  2148. \t\t}
  2149. \t\t.cta-image {
  2150. \t\t\tposition: relative;
  2151. \t\t\tz-index: 1;
  2152. \t\t\tmax-width: 100%;
  2153. \t\t\theight: auto;
  2154. \t\t\tborder-radius: 15px;
  2155. \t\t}
  2156. \t</style>
  2157. ";
  2158.         
  2159.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  2161.         
  2162.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  2164.         yield from [];
  2165.     }
  2167.     // line 2060
  2168.     /**
  2169.      * @return iterable<null|scalar|\Stringable>
  2170.      */
  2171.     public function block_body(array $context, array $blocks = []): iterable
  2172.     {
  2173.         $macros = $this->macros;
  2174.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  2175.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  2177.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  2178.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  2180.         // line 2061
  2181.         yield "\t<!-- Hero Section -->
  2182. \t<!-- start banner Area avec produits en vedette -->
  2183. \t\t";
  2184.         // line 2063
  2185.         if ((array_key_exists("bannerProducts", $context) && (Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["bannerProducts"] ?? null)) > 0))) {
  2186.             // line 2064
  2187.             yield "\t\t\t<section class=\"banner-area-modern\"> <div class=\"banner-carousel-wrapper\">
  2188. \t\t\t\t<div class=\"active-banner-slider owl-carousel\" style=\"margin-top: 100px;\">
  2189. \t\t\t\t\t";
  2190.             // line 2066
  2191.             $context['_parent'] = $context;
  2192.             $context['_seq'] = CoreExtension::ensureTraversable(($context["bannerProducts"] ?? null));
  2193.             $context['loop'] = [
  2194.               'parent' => $context['_parent'],
  2195.               'index0' => 0,
  2196.               'index'  => 1,
  2197.               'first'  => true,
  2198.             ];
  2199.             if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  2200.                 $length = count($context['_seq']);
  2201.                 $context['loop']['revindex0'] = $length - 1;
  2202.                 $context['loop']['revindex'] = $length;
  2203.                 $context['loop']['length'] = $length;
  2204.                 $context['loop']['last'] = 1 === $length;
  2205.             }
  2206.             foreach ($context['_seq'] as $context["_key"] => $context["product"]) {
  2207.                 // line 2067
  2208.                 yield "\t\t\t\t\t\t<!-- single-slide -->
  2209. \t\t\t\t\t\t<div class=\"banner-slide-item\">
  2210. \t\t\t\t\t\t\t<div class=\"container\">
  2211. \t\t\t\t\t\t\t\t<div class=\"row align-items-center\">
  2212. \t\t\t\t\t\t\t\t\t<div class=\"col-lg-4 col-md-6 col-12\">
  2213. \t\t\t\t\t\t\t\t\t\t<div class=\"banner-content-modern\">
  2214. \t\t\t\t\t\t\t\t\t\t\t<div class=\"banner-badge\">
  2215. \t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-star\"></i>
  2216. \t\t\t\t\t\t\t\t\t\t\t\tProduit en vedette
  2217. \t\t\t\t\t\t\t\t\t\t\t</div>
  2218. \t\t\t\t\t\t\t\t\t\t\t<h1 class=\"banner-title-modern\">";
  2219.                 // line 2077
  2220.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 2077), "html", null, true);
  2221.                 yield "</h1>
  2222. \t\t\t\t\t\t\t\t\t\t\t<p class=\"banner-description-modern\">
  2223. \t\t\t\t\t\t\t\t\t\t\t\t";
  2224.                 // line 2079
  2225.                 yield (((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "description", [], "any", false, false, false, 2079)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape((Twig\Extension\CoreExtension::slice($this->env->getCharset(), Twig\Extension\CoreExtension::striptags(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "description", [], "any", false, false, false, 2079)), 0, 120) . "..."), "html", null, true)) : ("Découvrez ce produit exclusif sur MaketOu"));
  2226.                 yield "
  2227. \t\t\t\t\t\t\t\t\t\t\t</p>
  2228. \t\t\t\t\t\t\t\t\t\t\t<div class=\"banner-price-modern\">
  2229. \t\t\t\t\t\t\t\t\t\t\t\t<span class=\"price-label\">Prix</span>
  2230. \t\t\t\t\t\t\t\t\t\t\t\t<span class=\"price-value\">";
  2231.                 // line 2083
  2232.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "price", [], "any", false, false, false, 2083), 2, ".", " "), "html", null, true);
  2233.                 yield "
  2234. \t\t\t\t\t\t\t\t\t\t\t\t\tHTG</span>
  2235. \t\t\t\t\t\t\t\t\t\t\t</div>
  2236. \t\t\t\t\t\t\t\t\t\t\t<div class=\"banner-actions-modern\">
  2237. \t\t\t\t\t\t\t\t\t\t\t\t<a class=\"btn-banner-primary\" href=\"";
  2238.                 // line 2087
  2239.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_product_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, $context["product"], "slug", [], "any", false, false, false, 2087)]), "html", null, true);
  2240.                 yield "\">
  2241. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"btn-text\">Voir le produit</span>
  2242. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"btn-icon\">
  2243. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-arrow-right\"></i>
  2244. \t\t\t\t\t\t\t\t\t\t\t\t\t</span>
  2245. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  2246. \t\t\t\t\t\t\t\t\t\t\t\t";
  2247.                 // line 2093
  2248.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "shop", [], "any", false, false, false, 2093)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2249.                     // line 2094
  2250.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"btn-banner-secondary\" href=\"";
  2251.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_shop_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["product"], "shop", [], "any", false, false, false, 2094), "slug", [], "any", false, false, false, 2094)]), "html", null, true);
  2252.                     yield "\">
  2253. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\"></i>
  2254. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>";
  2255.                     // line 2096
  2256.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["product"], "shop", [], "any", false, false, false, 2096), "name", [], "any", false, false, false, 2096), "html", null, true);
  2257.                     yield "</span>
  2258. \t\t\t\t\t\t\t\t\t\t\t\t\t</a>
  2259. \t\t\t\t\t\t\t\t\t\t\t\t";
  2260.                 }
  2261.                 // line 2099
  2262.                 yield "\t\t\t\t\t\t\t\t\t\t\t</div>
  2263. \t\t\t\t\t\t\t\t\t\t</div>
  2264. \t\t\t\t\t\t\t\t\t</div>
  2265. \t\t\t\t\t\t\t\t\t<div class=\"col-lg-8 col-md-6 col-12\">
  2266. \t\t\t\t\t\t\t\t\t\t<div class=\"banner-image-modern\">
  2267. \t\t\t\t\t\t\t\t\t\t\t<div class=\"banner-image-wrapper\">
  2268. \t\t\t\t\t\t\t\t\t\t\t\t";
  2269.                 // line 2105
  2270.                 if ((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", true, true, false, 2105) && (Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2105)) > 0))) {
  2271.                     // line 2106
  2272.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t<img class=\"banner-img\" src=\"";
  2273.                     yield (((CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, true, false, 2106), 0, [], "array", true, true, false, 2106) && (($_v0 = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2106)) && is_array($_v0) || $_v0 instanceof ArrayAccess ? ($_v0[0] ?? null) : null))) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl((($_v1 = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2106)) && is_array($_v1) || $_v1 instanceof ArrayAccess ? ($_v1[0] ?? null) : null)), "html", null, true)) : ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl((("ui/img/product/p" . CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 2106)) . ".jpg")), "html", null, true)));
  2274.                     yield "\" alt=\"";
  2275.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 2106), "html", null, true);
  2276.                     yield "\">
  2277. \t\t\t\t\t\t\t\t\t\t\t\t";
  2278.                 } else {
  2279.                     // line 2108
  2280.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t<img class=\"banner-img\" src=\"";
  2281.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl((("ui/img/product/p" . CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 2108)) . ".jpg")), "html", null, true);
  2282.                     yield "\" alt=\"";
  2283.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 2108), "html", null, true);
  2284.                     yield "\">
  2285. \t\t\t\t\t\t\t\t\t\t\t\t";
  2286.                 }
  2287.                 // line 2110
  2288.                 yield "\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"banner-image-overlay\"></div>
  2289. \t\t\t\t\t\t\t\t\t\t\t</div>
  2290. \t\t\t\t\t\t\t\t\t\t</div>
  2291. \t\t\t\t\t\t\t\t\t</div>
  2292. \t\t\t\t\t\t\t\t</div>
  2293. \t\t\t\t\t\t\t</div>
  2294. \t\t\t\t\t\t</div>
  2295. \t\t\t\t\t";
  2296.                 ++$context['loop']['index0'];
  2297.                 ++$context['loop']['index'];
  2298.                 $context['loop']['first'] = false;
  2299.                 if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  2300.                     --$context['loop']['revindex0'];
  2301.                     --$context['loop']['revindex'];
  2302.                     $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  2303.                 }
  2304.             }
  2305.             $_parent = $context['_parent'];
  2306.             unset($context['_seq'], $context['_key'], $context['product'], $context['_parent'], $context['loop']);
  2307.             $context = array_intersect_key($context, $_parent) + $_parent;
  2308.             // line 2118
  2309.             yield "\t\t\t\t</div>
  2310. \t\t\t</div>
  2311. \t\t</section>
  2312. \t";
  2313.         } else {
  2314.             // line 2122
  2315.             yield "\t\t<!-- Banner par défaut si pas de produits en vedette -->
  2316. \t\t<section class=\"banner-area-modern\">
  2317. \t\t\t<div class=\"banner-carousel-wrapper\">
  2318. \t\t\t\t<div class=\"container\">
  2319. \t\t\t\t\t<div class=\"row align-items-center justify-content-center\">
  2320. \t\t\t\t\t\t<div class=\"col-lg-8 text-center\">
  2321. \t\t\t\t\t\t\t<div class=\"banner-content-modern\" style=\"margin-top: 140px;\">
  2322. \t\t\t\t\t\t\t\t<h1 class=\"banner-title-modern\">Bienvenue sur MaketOu</h1>
  2323. \t\t\t\t\t\t\t\t<p class=\"banner-description-modern\">Votre marketplace haïtienne</p>
  2324. \t\t\t\t\t\t\t</div>
  2325. \t\t\t\t\t\t</div>
  2326. \t\t\t\t\t</div>
  2327. \t\t\t\t</div>
  2328. \t\t\t</div>
  2329. \t\t</section>
  2330. \t";
  2331.         }
  2332.         // line 2138
  2333.         yield "\t<!-- End banner Area -->
  2335. \t<!-- Catégories de produits -->
  2336. \t";
  2337.         // line 2141
  2338.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["categories"] ?? null)) > 0)) {
  2339.             // line 2142
  2340.             yield "\t\t<section class=\"py-5\">
  2341. \t\t\t<div class=\"container\">
  2342. \t\t\t\t<div class=\"section-title\">
  2343. \t\t\t\t\t<h2>Nos catégories</h2>
  2344. \t\t\t\t\t<p>Explorez nos différentes catégories de produits</p>
  2345. \t\t\t\t</div>
  2346. \t\t\t\t<div class=\"row\" id=\"productCategoriesContainer\">
  2347. \t\t\t\t\t";
  2348.             // line 2149
  2349.             $context['_parent'] = $context;
  2350.             $context['_seq'] = CoreExtension::ensureTraversable(Twig\Extension\CoreExtension::slice($this->env->getCharset(), ($context["categories"] ?? null), 0, 8));
  2351.             $context['loop'] = [
  2352.               'parent' => $context['_parent'],
  2353.               'index0' => 0,
  2354.               'index'  => 1,
  2355.               'first'  => true,
  2356.             ];
  2357.             if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  2358.                 $length = count($context['_seq']);
  2359.                 $context['loop']['revindex0'] = $length - 1;
  2360.                 $context['loop']['revindex'] = $length;
  2361.                 $context['loop']['length'] = $length;
  2362.                 $context['loop']['last'] = 1 === $length;
  2363.             }
  2364.             foreach ($context['_seq'] as $context["_key"] => $context["category"]) {
  2365.                 // line 2150
  2366.                 yield "\t\t\t\t\t\t<div class=\"col-lg-3 col-md-4 col-sm-6 mb-4\">
  2367. \t\t\t\t\t\t\t<div class=\"category-card-custom\">
  2368. \t\t\t\t\t\t\t\t<div class=\"category-image-wrapper\">
  2369. \t\t\t\t\t\t\t\t\t<div class=\"category-image\" style=\"background-image: url('";
  2370.                 // line 2153
  2371.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["category"], "bannerImage", [], "any", false, false, false, 2153)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2372.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(("uploads/categories/banner/" . CoreExtension::getAttribute($this->env, $this->source, $context["category"], "bannerImage", [], "any", false, false, false, 2153))), "html", null, true);
  2373.                 } else {
  2374.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl((("ui/img/category/cat-" . CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 2153)) . ".jpg")), "html", null, true);
  2375.                 }
  2376.                 yield "')\">
  2377. \t\t\t\t\t\t\t\t\t\t<div class=\"category-overlay-custom\">
  2378. \t\t\t\t\t\t\t\t\t\t\t<div class=\"category-icon-wrapper\">
  2379. \t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-tag\" style=\"font-size: 3rem;\"></i>
  2380. \t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-3\">";
  2381.                 // line 2157
  2382.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["category"], "name", [], "any", false, false, false, 2157), "html", null, true);
  2383.                 yield "</h4>
  2384. \t\t\t\t\t\t\t\t\t\t\t</div>
  2385. \t\t\t\t\t\t\t\t\t\t</div>
  2386. \t\t\t\t\t\t\t\t\t</div>
  2387. \t\t\t\t\t\t\t\t</div>
  2388. \t\t\t\t\t\t\t\t<div class=\"category-content p-3\">
  2389. \t\t\t\t\t\t\t\t\t<h5 class=\"mb-2\">";
  2390.                 // line 2163
  2391.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["category"], "name", [], "any", false, false, false, 2163), "html", null, true);
  2392.                 yield "</h5>
  2393. \t\t\t\t\t\t\t\t\t";
  2394.                 // line 2164
  2395.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["category"], "description", [], "any", false, false, false, 2164)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2396.                     // line 2165
  2397.                     yield "\t\t\t\t\t\t\t\t\t\t<p class=\"text-muted mb-3 small\">";
  2398.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::slice($this->env->getCharset(), Twig\Extension\CoreExtension::striptags(CoreExtension::getAttribute($this->env, $this->source, $context["category"], "description", [], "any", false, false, false, 2165)), 0, 60), "html", null, true);
  2399.                     yield "
  2400. \t\t\t\t\t\t\t\t\t\t\t";
  2401.                     // line 2166
  2402.                     if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), Twig\Extension\CoreExtension::striptags(CoreExtension::getAttribute($this->env, $this->source, $context["category"], "description", [], "any", false, false, false, 2166))) > 60)) {
  2403.                         yield "...
  2404. \t\t\t\t\t\t\t\t\t\t\t";
  2405.                     }
  2406.                     // line 2168
  2407.                     yield "\t\t\t\t\t\t\t\t\t\t</p>
  2408. \t\t\t\t\t\t\t\t\t";
  2409.                 }
  2410.                 // line 2170
  2411.                 yield "\t\t\t\t\t\t\t\t\t<a href=\"";
  2412.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing", ["category" => CoreExtension::getAttribute($this->env, $this->source, $context["category"], "slug", [], "any", false, false, false, 2170)]), "html", null, true);
  2413.                 yield "\" class=\"btn btn-primary-custom btn-sm w-100\">
  2414. \t\t\t\t\t\t\t\t\t\tVoir les produits
  2415. \t\t\t\t\t\t\t\t\t</a>
  2416. \t\t\t\t\t\t\t\t</div>
  2417. \t\t\t\t\t\t\t</div>
  2418. \t\t\t\t\t\t</div>
  2419. \t\t\t\t\t";
  2420.                 ++$context['loop']['index0'];
  2421.                 ++$context['loop']['index'];
  2422.                 $context['loop']['first'] = false;
  2423.                 if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  2424.                     --$context['loop']['revindex0'];
  2425.                     --$context['loop']['revindex'];
  2426.                     $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  2427.                 }
  2428.             }
  2429.             $_parent = $context['_parent'];
  2430.             unset($context['_seq'], $context['_key'], $context['category'], $context['_parent'], $context['loop']);
  2431.             $context = array_intersect_key($context, $_parent) + $_parent;
  2432.             // line 2177
  2433.             yield "\t\t\t\t</div>
  2434. \t\t\t</div>
  2435. \t\t</section>
  2436. \t";
  2437.         }
  2438.         // line 2181
  2439.         yield "
  2440. \t<!-- Catégories de boutiques -->
  2441. \t";
  2442.         // line 2183
  2443.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["shopCategories"] ?? null)) > 0)) {
  2444.             // line 2184
  2445.             yield "\t\t<section class=\"py-5 bg-light\">
  2446. \t\t\t<div class=\"container\">
  2447. \t\t\t\t<div class=\"section-title\">
  2448. \t\t\t\t\t<h2>Nos catégories de boutiques</h2>
  2449. \t\t\t\t\t<p>Explorez les différentes catégories de boutiques disponibles sur MaketOu</p>
  2450. \t\t\t\t</div>
  2451. \t\t\t\t<div class=\"row\" id=\"shopCategoriesContainer\">
  2452. \t\t\t\t\t";
  2453.             // line 2191
  2454.             $context['_parent'] = $context;
  2455.             $context['_seq'] = CoreExtension::ensureTraversable(Twig\Extension\CoreExtension::slice($this->env->getCharset(), ($context["shopCategories"] ?? null), 0, 6));
  2456.             $context['loop'] = [
  2457.               'parent' => $context['_parent'],
  2458.               'index0' => 0,
  2459.               'index'  => 1,
  2460.               'first'  => true,
  2461.             ];
  2462.             if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  2463.                 $length = count($context['_seq']);
  2464.                 $context['loop']['revindex0'] = $length - 1;
  2465.                 $context['loop']['revindex'] = $length;
  2466.                 $context['loop']['length'] = $length;
  2467.                 $context['loop']['last'] = 1 === $length;
  2468.             }
  2469.             foreach ($context['_seq'] as $context["_key"] => $context["shopCategory"]) {
  2470.                 // line 2192
  2471.                 yield "\t\t\t\t\t\t<div class=\"col-lg-4 col-md-6 mb-4\">
  2472. \t\t\t\t\t\t\t<a href=\"";
  2473.                 // line 2193
  2474.                 yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_shops_list");
  2475.                 yield "?category=";
  2476.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "slug", [], "any", false, false, false, 2193), "html", null, true);
  2477.                 yield "\" class=\"text-decoration-none\" style=\"display: block;\">
  2478. \t\t\t\t\t\t\t\t<div class=\"category-card-custom shop-category-clickable\">
  2479. \t\t\t\t\t\t\t\t\t<div class=\"category-image-wrapper\">
  2480. \t\t\t\t\t\t\t\t\t\t<div class=\"category-image\" style=\"background-image: url('";
  2481.                 // line 2196
  2482.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "bannerImage", [], "any", false, false, false, 2196)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2483.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "bannerImage", [], "any", false, false, false, 2196)), "html", null, true);
  2484.                 } else {
  2485.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl((("ui/img/category/shop-" . CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 2196)) . ".jpg")), "html", null, true);
  2486.                 }
  2487.                 yield "')\">
  2488. \t\t\t\t\t\t\t\t\t\t\t<div class=\"category-overlay-custom\">
  2489. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"category-icon-wrapper\">
  2490. \t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\" style=\"font-size: 3rem;\"></i>
  2491. \t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-3\">";
  2492.                 // line 2200
  2493.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "name", [], "any", false, false, false, 2200), "html", null, true);
  2494.                 yield "</h4>
  2495. \t\t\t\t\t\t\t\t\t\t\t\t\t";
  2496.                 // line 2201
  2497.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "description", [], "any", false, false, false, 2201)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2498.                     // line 2202
  2499.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"mt-2 px-3\">";
  2500.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::slice($this->env->getCharset(), Twig\Extension\CoreExtension::striptags(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "description", [], "any", false, false, false, 2202)), 0, 100), "html", null, true);
  2501.                     yield "
  2502. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  2503.                     // line 2203
  2504.                     if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), Twig\Extension\CoreExtension::striptags(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "description", [], "any", false, false, false, 2203))) > 100)) {
  2505.                         yield "...
  2506. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  2507.                     }
  2508.                     // line 2205
  2509.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t</p>
  2510. \t\t\t\t\t\t\t\t\t\t\t\t\t";
  2511.                 }
  2512.                 // line 2207
  2513.                 yield "\t\t\t\t\t\t\t\t\t\t\t\t</div>
  2514. \t\t\t\t\t\t\t\t\t\t\t</div>
  2515. \t\t\t\t\t\t\t\t\t\t</div>
  2516. \t\t\t\t\t\t\t\t\t</div>
  2517. \t\t\t\t\t\t\t\t\t<div class=\"category-content p-3\">
  2518. \t\t\t\t\t\t\t\t\t\t<h5 class=\"mb-2\">";
  2519.                 // line 2212
  2520.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "name", [], "any", false, false, false, 2212), "html", null, true);
  2521.                 yield "</h5>
  2522. \t\t\t\t\t\t\t\t\t\t";
  2523.                 // line 2213
  2524.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "description", [], "any", false, false, false, 2213)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2525.                     // line 2214
  2526.                     yield "\t\t\t\t\t\t\t\t\t\t\t<p class=\"text-muted mb-3 small\">";
  2527.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::slice($this->env->getCharset(), Twig\Extension\CoreExtension::striptags(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "description", [], "any", false, false, false, 2214)), 0, 80), "html", null, true);
  2528.                     yield "
  2529. \t\t\t\t\t\t\t\t\t\t\t\t";
  2530.                     // line 2215
  2531.                     if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), Twig\Extension\CoreExtension::striptags(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "description", [], "any", false, false, false, 2215))) > 80)) {
  2532.                         yield "...
  2533. \t\t\t\t\t\t\t\t\t\t\t\t";
  2534.                     }
  2535.                     // line 2217
  2536.                     yield "\t\t\t\t\t\t\t\t\t\t\t</p>
  2537. \t\t\t\t\t\t\t\t\t\t";
  2538.                 }
  2539.                 // line 2219
  2540.                 yield "\t\t\t\t\t\t\t\t\t\t<span class=\"btn btn-primary-custom btn-sm w-100\">
  2541. \t\t\t\t\t\t\t\t\t\t\tVoir les boutiques
  2542. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-arrow-right ms-2\"></i>
  2543. \t\t\t\t\t\t\t\t\t\t</span>
  2544. \t\t\t\t\t\t\t\t\t</div>
  2545. \t\t\t\t\t\t\t\t</div>
  2546. \t\t\t\t\t\t\t</a>
  2547. \t\t\t\t\t\t</div>
  2548. \t\t\t\t\t";
  2549.                 ++$context['loop']['index0'];
  2550.                 ++$context['loop']['index'];
  2551.                 $context['loop']['first'] = false;
  2552.                 if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  2553.                     --$context['loop']['revindex0'];
  2554.                     --$context['loop']['revindex'];
  2555.                     $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  2556.                 }
  2557.             }
  2558.             $_parent = $context['_parent'];
  2559.             unset($context['_seq'], $context['_key'], $context['shopCategory'], $context['_parent'], $context['loop']);
  2560.             $context = array_intersect_key($context, $_parent) + $_parent;
  2561.             // line 2228
  2562.             yield "\t\t\t\t</div>
  2563. \t\t\t\t";
  2564.             // line 2229
  2565.             if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["shopCategories"] ?? null)) > 6)) {
  2566.                 // line 2230
  2567.                 yield "\t\t\t\t\t<div class=\"text-center mt-4\">
  2568. \t\t\t\t\t\t<button class=\"btn btn-outline-primary btn-lg\" onclick=\"showAllShopCategories()\">
  2569. \t\t\t\t\t\t\t<i class=\"lnr lnr-store me-2\"></i>
  2570. \t\t\t\t\t\t\tVoir toutes les catégories de boutiques (";
  2571.                 // line 2233
  2572.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["shopCategories"] ?? null)), "html", null, true);
  2573.                 yield ")
  2574. \t\t\t\t\t\t</button>
  2575. \t\t\t\t\t</div>
  2576. \t\t\t\t";
  2577.             }
  2578.             // line 2237
  2579.             yield "\t\t\t</div>
  2580. \t\t</section>
  2581. \t";
  2582.         }
  2583.         // line 2240
  2584.         yield "
  2585. \t<!-- Produits en vedette -->
  2586. \t";
  2587.         // line 2242
  2588.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["featuredProducts"] ?? null)) > 0)) {
  2589.             // line 2243
  2590.             yield "\t\t<section class=\"py-5\">
  2591. \t\t\t<div class=\"container\">
  2592. \t\t\t\t<div class=\"section-title text-center mb-5\">
  2593. \t\t\t\t\t<h2>Produits en vedette</h2>
  2594. \t\t\t\t\t<p>Découvrez nos produits les plus populaires et les mieux notés</p>
  2595. \t\t\t\t</div>
  2597. \t\t\t\t<div class=\"featured-gallery-wrapper\">
  2598. \t\t\t\t\t<div class=\"featured-gallery-container\">
  2599. \t\t\t\t\t\t<div class=\"featured-gallery-grid\" id=\"featuredGalleryGrid\">
  2600. \t\t\t\t\t\t\t";
  2601.             // line 2253
  2602.             $context['_parent'] = $context;
  2603.             $context['_seq'] = CoreExtension::ensureTraversable(($context["featuredProducts"] ?? null));
  2604.             foreach ($context['_seq'] as $context["_key"] => $context["product"]) {
  2605.                 // line 2254
  2606.                 yield "\t\t\t\t\t\t\t\t<div class=\"featured-gallery-item\">
  2607. \t\t\t\t\t\t\t\t\t<div class=\"single-product\">
  2608. \t\t\t\t\t\t\t\t\t\t<div class=\"product-image-container\" onmouseenter=\"showImageNav(";
  2609.                 // line 2256
  2610.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2256), "html", null, true);
  2611.                 yield ")\" onmouseleave=\"hideImageNav(";
  2612.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2256), "html", null, true);
  2613.                 yield ")\">
  2614. \t\t\t\t\t\t\t\t\t\t\t<a href=\"";
  2615.                 // line 2257
  2616.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_product_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, $context["product"], "slug", [], "any", false, false, false, 2257)]), "html", null, true);
  2617.                 yield "\">
  2618. \t\t\t\t\t\t\t\t\t\t\t\t";
  2619.                 // line 2258
  2620.                 if ((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", true, true, false, 2258) && (Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2258)) > 0))) {
  2621.                     // line 2259
  2622.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t<img 
  2623. \t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"img-fluid main-product-img\" 
  2624. \t\t\t\t\t\t\t\t\t\t\t\t\t\tid=\"main-img-";
  2625.                     // line 2261
  2626.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2261), "html", null, true);
  2627.                     yield "\" 
  2628. \t\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"";
  2629.                     // line 2262
  2630.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl((($_v2 = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2262)) && is_array($_v2) || $_v2 instanceof ArrayAccess ? ($_v2[0] ?? null) : null)), "html", null, true);
  2631.                     yield "\" 
  2632. \t\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"";
  2633.                     // line 2263
  2634.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 2263), "html", null, true);
  2635.                     yield "\"
  2636. \t\t\t\t\t\t\t\t\t\t\t\t\t\tonerror=\"this.onerror=null;this.src='";
  2637.                     // line 2264
  2638.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/img/product/p1.jpg"), "html", null, true);
  2639.                     yield "';\"
  2640. \t\t\t\t\t\t\t\t\t\t\t\t\t>
  2641. \t\t\t\t\t\t\t\t\t\t\t\t";
  2642.                 } else {
  2643.                     // line 2267
  2644.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t<img class=\"img-fluid main-product-img\" id=\"main-img-";
  2645.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2267), "html", null, true);
  2646.                     yield "\" src=\"";
  2647.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/img/product/p1.jpg"), "html", null, true);
  2648.                     yield "\" alt=\"";
  2649.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 2267), "html", null, true);
  2650.                     yield "\">
  2651. \t\t\t\t\t\t\t\t\t\t\t\t";
  2652.                 }
  2653.                 // line 2269
  2654.                 yield "\t\t\t\t\t\t\t\t\t\t\t</a>
  2656. \t\t\t\t\t\t\t\t\t\t\t<!-- Boutons de navigation (visibles au survol) -->
  2657. \t\t\t\t\t\t\t\t\t\t\t";
  2658.                 // line 2272
  2659.                 if ((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", true, true, false, 2272) && (Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2272)) > 1))) {
  2660.                     // line 2273
  2661.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"img-nav-btn img-nav-left\" id=\"img-left-";
  2662.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2273), "html", null, true);
  2663.                     yield "\" onclick=\"prevImage(";
  2664.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2273), "html", null, true);
  2665.                     yield ")\" style=\"display: none;\">
  2666. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-chevron-left\"></span>
  2667. \t\t\t\t\t\t\t\t\t\t\t\t</button>
  2668. \t\t\t\t\t\t\t\t\t\t\t\t<button class=\"img-nav-btn img-nav-right\" id=\"img-right-";
  2669.                     // line 2276
  2670.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2276), "html", null, true);
  2671.                     yield "\" onclick=\"nextImage(";
  2672.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2276), "html", null, true);
  2673.                     yield ")\" style=\"display: none;\">
  2674. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-chevron-right\"></span>
  2675. \t\t\t\t\t\t\t\t\t\t\t\t</button>
  2677. \t\t\t\t\t\t\t\t\t\t\t\t<!-- Indicateurs de position -->
  2678. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"img-indicators\" id=\"img-indicators-";
  2679.                     // line 2281
  2680.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2281), "html", null, true);
  2681.                     yield "\" style=\"display: none;\">
  2682. \t\t\t\t\t\t\t\t\t\t\t\t\t";
  2683.                     // line 2282
  2684.                     $context['_parent'] = $context;
  2685.                     $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2282));
  2686.                     $context['loop'] = [
  2687.                       'parent' => $context['_parent'],
  2688.                       'index0' => 0,
  2689.                       'index'  => 1,
  2690.                       'first'  => true,
  2691.                     ];
  2692.                     if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  2693.                         $length = count($context['_seq']);
  2694.                         $context['loop']['revindex0'] = $length - 1;
  2695.                         $context['loop']['revindex'] = $length;
  2696.                         $context['loop']['length'] = $length;
  2697.                         $context['loop']['last'] = 1 === $length;
  2698.                     }
  2699.                     foreach ($context['_seq'] as $context["_key"] => $context["img"]) {
  2700.                         // line 2283
  2701.                         yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"indicator\" id=\"indicator-";
  2702.                         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2283), "html", null, true);
  2703.                         yield "-";
  2704.                         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index0", [], "any", false, false, false, 2283), "html", null, true);
  2705.                         yield "\" onclick=\"showImage(";
  2706.                         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2283), "html", null, true);
  2707.                         yield ", ";
  2708.                         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index0", [], "any", false, false, false, 2283), "html", null, true);
  2709.                         yield ")\"></span>
  2710. \t\t\t\t\t\t\t\t\t\t\t\t\t";
  2711.                         ++$context['loop']['index0'];
  2712.                         ++$context['loop']['index'];
  2713.                         $context['loop']['first'] = false;
  2714.                         if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  2715.                             --$context['loop']['revindex0'];
  2716.                             --$context['loop']['revindex'];
  2717.                             $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  2718.                         }
  2719.                     }
  2720.                     $_parent = $context['_parent'];
  2721.                     unset($context['_seq'], $context['_key'], $context['img'], $context['_parent'], $context['loop']);
  2722.                     $context = array_intersect_key($context, $_parent) + $_parent;
  2723.                     // line 2285
  2724.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t</div>
  2725. \t\t\t\t\t\t\t\t\t\t\t";
  2726.                 }
  2727.                 // line 2287
  2728.                 yield "\t\t\t\t\t\t\t\t\t\t</div>
  2730. \t\t\t\t\t\t\t\t\t\t<div class=\"product-details\">
  2731. \t\t\t\t\t\t\t\t\t\t\t<a href=\"";
  2732.                 // line 2290
  2733.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_product_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, $context["product"], "slug", [], "any", false, false, false, 2290)]), "html", null, true);
  2734.                 yield "\">
  2735. \t\t\t\t\t\t\t\t\t\t\t\t<h6>";
  2736.                 // line 2291
  2737.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 2291), "html", null, true);
  2738.                 yield "</h6>
  2739. \t\t\t\t\t\t\t\t\t\t\t</a>
  2741. \t\t\t\t\t\t\t\t\t\t\t<!-- Affichage de la boutique -->
  2742. \t\t\t\t\t\t\t\t\t\t\t<div class=\"shop-info\">
  2743. \t\t\t\t\t\t\t\t\t\t\t\t<small class=\"text-muted\">
  2744. \t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\"></i>
  2745. \t\t\t\t\t\t\t\t\t\t\t\t\tVendu par :
  2746. \t\t\t\t\t\t\t\t\t\t\t\t\t";
  2747.                 // line 2299
  2748.                 if ((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "shop", [], "any", true, true, false, 2299) && CoreExtension::getAttribute($this->env, $this->source, $context["product"], "shop", [], "any", false, false, false, 2299))) {
  2749.                     // line 2300
  2750.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"";
  2751.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_shop_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["product"], "shop", [], "any", false, false, false, 2300), "slug", [], "any", false, false, false, 2300)]), "html", null, true);
  2752.                     yield "\" class=\"shop-link\">
  2753. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  2754.                     // line 2301
  2755.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["product"], "shop", [], "any", false, false, false, 2301), "name", [], "any", false, false, false, 2301), "html", null, true);
  2756.                     yield "
  2757. \t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>
  2758. \t\t\t\t\t\t\t\t\t\t\t\t\t";
  2759.                 } else {
  2760.                     // line 2304
  2761.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"text-muted\">Boutique inconnue</span>
  2762. \t\t\t\t\t\t\t\t\t\t\t\t\t";
  2763.                 }
  2764.                 // line 2306
  2765.                 yield "\t\t\t\t\t\t\t\t\t\t\t\t</small>
  2766. \t\t\t\t\t\t\t\t\t\t\t</div>
  2768. \t\t\t\t\t\t\t\t\t\t\t<div class=\"price\">
  2769. \t\t\t\t\t\t\t\t\t\t\t\t<h6>";
  2770.                 // line 2310
  2771.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "price", [], "any", false, false, false, 2310), 2, ".", " "), "html", null, true);
  2772.                 yield "
  2773. \t\t\t\t\t\t\t\t\t\t\t\t\tHTG</h6>
  2774. \t\t\t\t\t\t\t\t\t\t\t\t";
  2775.                 // line 2312
  2776.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "compareAtPrice", [], "any", false, false, false, 2312)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2777.                     // line 2313
  2778.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t<h6 class=\"l-through\">";
  2779.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "compareAtPrice", [], "any", false, false, false, 2313), 2, ".", " "), "html", null, true);
  2780.                     yield "
  2781. \t\t\t\t\t\t\t\t\t\t\t\t\t\tHTG</h6>
  2782. \t\t\t\t\t\t\t\t\t\t\t\t";
  2783.                 }
  2784.                 // line 2316
  2785.                 yield "\t\t\t\t\t\t\t\t\t\t\t</div>
  2786. \t\t\t\t\t\t\t\t\t\t\t<div class=\"prd-bottom\">
  2787. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0)\" class=\"social-info add-to-cart\" data-product-id=\"";
  2788.                 // line 2318
  2789.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2318), "html", null, true);
  2790.                 yield "\" data-qty=\"1\">
  2791. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ti-bag\"></span>
  2792. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">+ panier</p>
  2793. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  2794. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"social-info wishlist-btn\" data-product-id=\"";
  2795.                 // line 2322
  2796.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2322), "html", null, true);
  2797.                 yield "\" ";
  2798.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 2322)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2799.                     yield " onclick=\"toggleWishlist(";
  2800.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2322), "html", null, true);
  2801.                     yield ", this); return false;\" ";
  2802.                 } else {
  2803.                     yield " onclick=\"alert('Vous devez être connecté pour ajouter aux favoris'); return false;\" ";
  2804.                 }
  2805.                 yield ">
  2806. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-heart\"></span>
  2807. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">Favoris</p>
  2808. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  2809. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"social-info comparison-btn\" data-product-id=\"";
  2810.                 // line 2326
  2811.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2326), "html", null, true);
  2812.                 yield "\" ";
  2813.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 2326)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2814.                     yield " onclick=\"toggleComparison(";
  2815.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2326), "html", null, true);
  2816.                     yield ", this); return false;\" ";
  2817.                 } else {
  2818.                     yield " onclick=\"alert('Vous devez être connecté pour comparer des produits'); return false;\" ";
  2819.                 }
  2820.                 yield ">
  2821. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-sync\"></span>
  2822. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">Comparer</p>
  2823. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  2824. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"";
  2825.                 // line 2330
  2826.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_product_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, $context["product"], "slug", [], "any", false, false, false, 2330)]), "html", null, true);
  2827.                 yield "\" class=\"social-info\">
  2828. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-move\"></span>
  2829. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">Voir plus</p>
  2830. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  2831. \t\t\t\t\t\t\t\t\t\t\t</div>
  2832. \t\t\t\t\t\t\t\t\t\t</div>
  2833. \t\t\t\t\t\t\t\t\t</div>
  2834. \t\t\t\t\t\t\t\t</div>
  2835. \t\t\t\t\t\t\t";
  2836.             }
  2837.             $_parent = $context['_parent'];
  2838.             unset($context['_seq'], $context['_key'], $context['product'], $context['_parent']);
  2839.             $context = array_intersect_key($context, $_parent) + $_parent;
  2840.             // line 2339
  2841.             yield "\t\t\t\t\t\t</div>
  2842. \t\t\t\t\t</div>
  2844. \t\t\t\t\t<!-- Contrôles de navigation -->
  2845. \t\t\t\t\t<div class=\"featured-gallery-controls\">
  2846. \t\t\t\t\t\t<button class=\"featured-gallery-nav-btn featured-gallery-prev\" id=\"featuredGalleryPrev\" aria-label=\"Précédent\">
  2847. \t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-left\"></i>
  2848. \t\t\t\t\t\t</button>
  2849. \t\t\t\t\t\t<button class=\"featured-gallery-nav-btn featured-gallery-next\" id=\"featuredGalleryNext\" aria-label=\"Suivant\">
  2850. \t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-right\"></i>
  2851. \t\t\t\t\t\t</button>
  2852. \t\t\t\t\t</div>
  2854. \t\t\t\t\t<!-- Bouton charger plus -->
  2855. \t\t\t\t\t<div class=\"featured-gallery-load-more text-center mt-4\" id=\"featuredGalleryLoadMore\" style=\"display: none;\">
  2856. \t\t\t\t\t\t<button class=\"btn btn-outline-primary\" id=\"loadMoreFeaturedBtn\">
  2857. \t\t\t\t\t\t\t<i class=\"lnr lnr-plus-circle me-2\"></i>
  2858. \t\t\t\t\t\t\tCharger plus de produits
  2859. \t\t\t\t\t\t</button>
  2860. \t\t\t\t\t</div>
  2861. \t\t\t\t</div>
  2863. \t\t\t\t<div class=\"text-center mt-5\">
  2864. \t\t\t\t\t<a href=\"";
  2865.             // line 2362
  2866.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  2867.             yield "\" class=\"btn-view-all-products\">
  2868. \t\t\t\t\t\t<span>Voir tous les produits</span>
  2869. \t\t\t\t\t\t<i class=\"lnr lnr-arrow-right\"></i>
  2870. \t\t\t\t\t</a>
  2871. \t\t\t\t</div>
  2872. \t\t\t</div>
  2873. \t\t</section>
  2874. \t";
  2875.         }
  2876.         // line 2370
  2877.         yield "
  2878. \t<!-- Nouveautés -->
  2879. \t";
  2880.         // line 2372
  2881.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["latestProducts"] ?? null)) > 0)) {
  2882.             // line 2373
  2883.             yield "\t\t<section class=\"py-5 bg-light\">
  2884. \t\t\t<div class=\"container\">
  2885. \t\t\t\t<div class=\"section-title text-center mb-5\">
  2886. \t\t\t\t\t<h2>Nouveautés</h2>
  2887. \t\t\t\t\t<p>Les derniers produits ajoutés sur MaketOu</p>
  2888. \t\t\t\t</div>
  2890. \t\t\t\t<div class=\"featured-gallery-wrapper\">
  2891. \t\t\t\t\t<div class=\"featured-gallery-container\">
  2892. \t\t\t\t\t\t<div class=\"featured-gallery-grid\" id=\"latestGalleryGrid\">
  2893. \t\t\t\t\t\t\t";
  2894.             // line 2383
  2895.             $context['_parent'] = $context;
  2896.             $context['_seq'] = CoreExtension::ensureTraversable(($context["latestProducts"] ?? null));
  2897.             foreach ($context['_seq'] as $context["_key"] => $context["product"]) {
  2898.                 // line 2384
  2899.                 yield "\t\t\t\t\t\t\t\t<div class=\"featured-gallery-item\">
  2900. \t\t\t\t\t\t\t\t\t<div class=\"single-product\">
  2901. \t\t\t\t\t\t\t\t\t\t<div class=\"product-image-container\" onmouseenter=\"showImageNav(";
  2902.                 // line 2386
  2903.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2386), "html", null, true);
  2904.                 yield ")\" onmouseleave=\"hideImageNav(";
  2905.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2386), "html", null, true);
  2906.                 yield ")\">
  2907. \t\t\t\t\t\t\t\t\t\t\t<a href=\"";
  2908.                 // line 2387
  2909.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_product_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, $context["product"], "slug", [], "any", false, false, false, 2387)]), "html", null, true);
  2910.                 yield "\">
  2911. \t\t\t\t\t\t\t\t\t\t\t\t";
  2912.                 // line 2388
  2913.                 if ((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", true, true, false, 2388) && (Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2388)) > 0))) {
  2914.                     // line 2389
  2915.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t<img class=\"img-fluid main-product-img\" id=\"main-img-";
  2916.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2389), "html", null, true);
  2917.                     yield "\" src=\"";
  2918.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl((($_v3 = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2389)) && is_array($_v3) || $_v3 instanceof ArrayAccess ? ($_v3[0] ?? null) : null)), "html", null, true);
  2919.                     yield "\" alt=\"";
  2920.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 2389), "html", null, true);
  2921.                     yield "\">
  2922. \t\t\t\t\t\t\t\t\t\t\t\t";
  2923.                 } else {
  2924.                     // line 2391
  2925.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t<img class=\"img-fluid main-product-img\" id=\"main-img-";
  2926.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2391), "html", null, true);
  2927.                     yield "\" src=\"";
  2928.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/img/product/p1.jpg"), "html", null, true);
  2929.                     yield "\" alt=\"";
  2930.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 2391), "html", null, true);
  2931.                     yield "\">
  2932. \t\t\t\t\t\t\t\t\t\t\t\t";
  2933.                 }
  2934.                 // line 2393
  2935.                 yield "\t\t\t\t\t\t\t\t\t\t\t</a>
  2937. \t\t\t\t\t\t\t\t\t\t\t<!-- Boutons de navigation (visibles au survol) -->
  2938. \t\t\t\t\t\t\t\t\t\t\t";
  2939.                 // line 2396
  2940.                 if ((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", true, true, false, 2396) && (Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2396)) > 1))) {
  2941.                     // line 2397
  2942.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"img-nav-btn img-nav-left\" id=\"img-left-";
  2943.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2397), "html", null, true);
  2944.                     yield "\" onclick=\"prevImage(";
  2945.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2397), "html", null, true);
  2946.                     yield ")\" style=\"display: none;\">
  2947. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-chevron-left\"></span>
  2948. \t\t\t\t\t\t\t\t\t\t\t\t</button>
  2949. \t\t\t\t\t\t\t\t\t\t\t\t<button class=\"img-nav-btn img-nav-right\" id=\"img-right-";
  2950.                     // line 2400
  2951.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2400), "html", null, true);
  2952.                     yield "\" onclick=\"nextImage(";
  2953.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2400), "html", null, true);
  2954.                     yield ")\" style=\"display: none;\">
  2955. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-chevron-right\"></span>
  2956. \t\t\t\t\t\t\t\t\t\t\t\t</button>
  2958. \t\t\t\t\t\t\t\t\t\t\t\t<!-- Indicateurs de position -->
  2959. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"img-indicators\" id=\"img-indicators-";
  2960.                     // line 2405
  2961.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2405), "html", null, true);
  2962.                     yield "\" style=\"display: none;\">
  2963. \t\t\t\t\t\t\t\t\t\t\t\t\t";
  2964.                     // line 2406
  2965.                     $context['_parent'] = $context;
  2966.                     $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2406));
  2967.                     $context['loop'] = [
  2968.                       'parent' => $context['_parent'],
  2969.                       'index0' => 0,
  2970.                       'index'  => 1,
  2971.                       'first'  => true,
  2972.                     ];
  2973.                     if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  2974.                         $length = count($context['_seq']);
  2975.                         $context['loop']['revindex0'] = $length - 1;
  2976.                         $context['loop']['revindex'] = $length;
  2977.                         $context['loop']['length'] = $length;
  2978.                         $context['loop']['last'] = 1 === $length;
  2979.                     }
  2980.                     foreach ($context['_seq'] as $context["_key"] => $context["img"]) {
  2981.                         // line 2407
  2982.                         yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"indicator\" id=\"indicator-";
  2983.                         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2407), "html", null, true);
  2984.                         yield "-";
  2985.                         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index0", [], "any", false, false, false, 2407), "html", null, true);
  2986.                         yield "\" onclick=\"showImage(";
  2987.                         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2407), "html", null, true);
  2988.                         yield ", ";
  2989.                         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index0", [], "any", false, false, false, 2407), "html", null, true);
  2990.                         yield ")\"></span>
  2991. \t\t\t\t\t\t\t\t\t\t\t\t\t";
  2992.                         ++$context['loop']['index0'];
  2993.                         ++$context['loop']['index'];
  2994.                         $context['loop']['first'] = false;
  2995.                         if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  2996.                             --$context['loop']['revindex0'];
  2997.                             --$context['loop']['revindex'];
  2998.                             $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  2999.                         }
  3000.                     }
  3001.                     $_parent = $context['_parent'];
  3002.                     unset($context['_seq'], $context['_key'], $context['img'], $context['_parent'], $context['loop']);
  3003.                     $context = array_intersect_key($context, $_parent) + $_parent;
  3004.                     // line 2409
  3005.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t</div>
  3006. \t\t\t\t\t\t\t\t\t\t\t";
  3007.                 }
  3008.                 // line 2411
  3009.                 yield "\t\t\t\t\t\t\t\t\t\t</div>
  3011. \t\t\t\t\t\t\t\t\t\t<div class=\"product-details\">
  3012. \t\t\t\t\t\t\t\t\t\t\t<a href=\"";
  3013.                 // line 2414
  3014.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_product_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, $context["product"], "slug", [], "any", false, false, false, 2414)]), "html", null, true);
  3015.                 yield "\">
  3016. \t\t\t\t\t\t\t\t\t\t\t\t<h6>";
  3017.                 // line 2415
  3018.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 2415), "html", null, true);
  3019.                 yield "</h6>
  3020. \t\t\t\t\t\t\t\t\t\t\t</a>
  3022. \t\t\t\t\t\t\t\t\t\t\t<!-- Affichage de la boutique -->
  3023. \t\t\t\t\t\t\t\t\t\t\t<div class=\"shop-info\">
  3024. \t\t\t\t\t\t\t\t\t\t\t\t<small class=\"text-muted\">
  3025. \t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\"></i>
  3026. \t\t\t\t\t\t\t\t\t\t\t\t\tVendu par :
  3027. \t\t\t\t\t\t\t\t\t\t\t\t\t";
  3028.                 // line 2423
  3029.                 if ((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "shop", [], "any", true, true, false, 2423) && CoreExtension::getAttribute($this->env, $this->source, $context["product"], "shop", [], "any", false, false, false, 2423))) {
  3030.                     // line 2424
  3031.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"";
  3032.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_shop_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["product"], "shop", [], "any", false, false, false, 2424), "slug", [], "any", false, false, false, 2424)]), "html", null, true);
  3033.                     yield "\" class=\"shop-link\">
  3034. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  3035.                     // line 2425
  3036.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["product"], "shop", [], "any", false, false, false, 2425), "name", [], "any", false, false, false, 2425), "html", null, true);
  3037.                     yield "
  3038. \t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>
  3039. \t\t\t\t\t\t\t\t\t\t\t\t\t";
  3040.                 } else {
  3041.                     // line 2428
  3042.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"text-muted\">Boutique inconnue</span>
  3043. \t\t\t\t\t\t\t\t\t\t\t\t\t";
  3044.                 }
  3045.                 // line 2430
  3046.                 yield "\t\t\t\t\t\t\t\t\t\t\t\t</small>
  3047. \t\t\t\t\t\t\t\t\t\t\t</div>
  3049. \t\t\t\t\t\t\t\t\t\t\t<div class=\"price\">
  3050. \t\t\t\t\t\t\t\t\t\t\t\t<h6>";
  3051.                 // line 2434
  3052.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "price", [], "any", false, false, false, 2434), 2, ".", " "), "html", null, true);
  3053.                 yield "
  3054. \t\t\t\t\t\t\t\t\t\t\t\t\tHTG</h6>
  3055. \t\t\t\t\t\t\t\t\t\t\t\t";
  3056.                 // line 2436
  3057.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "compareAtPrice", [], "any", false, false, false, 2436)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3058.                     // line 2437
  3059.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t<h6 class=\"l-through\">";
  3060.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "compareAtPrice", [], "any", false, false, false, 2437), 2, ".", " "), "html", null, true);
  3061.                     yield "
  3062. \t\t\t\t\t\t\t\t\t\t\t\t\t\tHTG</h6>
  3063. \t\t\t\t\t\t\t\t\t\t\t\t";
  3064.                 }
  3065.                 // line 2440
  3066.                 yield "\t\t\t\t\t\t\t\t\t\t\t</div>
  3067. \t\t\t\t\t\t\t\t\t\t\t<div class=\"prd-bottom\">
  3068. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0)\" class=\"social-info add-to-cart\" data-product-id=\"";
  3069.                 // line 2442
  3070.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2442), "html", null, true);
  3071.                 yield "\" data-qty=\"1\">
  3072. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ti-bag\"></span>
  3073. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">+ panier</p>
  3074. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  3075. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"social-info wishlist-btn\" data-product-id=\"";
  3076.                 // line 2446
  3077.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2446), "html", null, true);
  3078.                 yield "\" ";
  3079.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 2446)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3080.                     yield " onclick=\"toggleWishlist(";
  3081.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2446), "html", null, true);
  3082.                     yield ", this); return false;\" ";
  3083.                 } else {
  3084.                     yield " onclick=\"alert('Vous devez être connecté pour ajouter aux favoris'); return false;\" ";
  3085.                 }
  3086.                 yield ">
  3087. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-heart\"></span>
  3088. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">Favoris</p>
  3089. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  3090. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"social-info comparison-btn\" data-product-id=\"";
  3091.                 // line 2450
  3092.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2450), "html", null, true);
  3093.                 yield "\" ";
  3094.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 2450)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3095.                     yield " onclick=\"toggleComparison(";
  3096.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2450), "html", null, true);
  3097.                     yield ", this); return false;\" ";
  3098.                 } else {
  3099.                     yield " onclick=\"alert('Vous devez être connecté pour comparer des produits'); return false;\" ";
  3100.                 }
  3101.                 yield ">
  3102. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-sync\"></span>
  3103. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">Comparer</p>
  3104. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  3105. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"";
  3106.                 // line 2454
  3107.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_product_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, $context["product"], "slug", [], "any", false, false, false, 2454)]), "html", null, true);
  3108.                 yield "\" class=\"social-info\">
  3109. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-move\"></span>
  3110. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">Voir plus</p>
  3111. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  3112. \t\t\t\t\t\t\t\t\t\t\t</div>
  3113. \t\t\t\t\t\t\t\t\t\t</div>
  3114. \t\t\t\t\t\t\t\t\t</div>
  3115. \t\t\t\t\t\t\t\t</div>
  3116. \t\t\t\t\t\t\t";
  3117.             }
  3118.             $_parent = $context['_parent'];
  3119.             unset($context['_seq'], $context['_key'], $context['product'], $context['_parent']);
  3120.             $context = array_intersect_key($context, $_parent) + $_parent;
  3121.             // line 2463
  3122.             yield "\t\t\t\t\t\t</div>
  3123. \t\t\t\t\t</div>
  3125. \t\t\t\t\t<!-- Contrôles de navigation -->
  3126. \t\t\t\t\t<div class=\"featured-gallery-controls\">
  3127. \t\t\t\t\t\t<button class=\"featured-gallery-nav-btn featured-gallery-prev\" id=\"latestGalleryPrev\" aria-label=\"Précédent\">
  3128. \t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-left\"></i>
  3129. \t\t\t\t\t\t</button>
  3130. \t\t\t\t\t\t<button class=\"featured-gallery-nav-btn featured-gallery-next\" id=\"latestGalleryNext\" aria-label=\"Suivant\">
  3131. \t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-right\"></i>
  3132. \t\t\t\t\t\t</button>
  3133. \t\t\t\t\t</div>
  3135. \t\t\t\t\t<!-- Bouton charger plus -->
  3136. \t\t\t\t\t<div class=\"featured-gallery-load-more text-center mt-4\" id=\"latestGalleryLoadMore\" style=\"display: none;\">
  3137. \t\t\t\t\t\t<button class=\"btn btn-outline-primary\" id=\"loadMoreLatestBtn\">
  3138. \t\t\t\t\t\t\t<i class=\"lnr lnr-plus-circle me-2\"></i>
  3139. \t\t\t\t\t\t\tCharger plus de produits
  3140. \t\t\t\t\t\t</button>
  3141. \t\t\t\t\t</div>
  3142. \t\t\t\t</div>
  3144. \t\t\t\t<div class=\"text-center mt-5\">
  3145. \t\t\t\t\t<a href=\"";
  3146.             // line 2486
  3147.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  3148.             yield "\" class=\"btn-view-all-products\">
  3149. \t\t\t\t\t\t<span>Voir tous les produits</span>
  3150. \t\t\t\t\t\t<i class=\"lnr lnr-arrow-right\"></i>
  3151. \t\t\t\t\t</a>
  3152. \t\t\t\t</div>
  3153. \t\t\t</div>
  3154. \t\t</section>
  3155. \t";
  3156.         }
  3157.         // line 2494
  3158.         yield "
  3159. \t";
  3160.         // line 2495
  3161.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["recommendedProducts"] ?? null)) > 0)) {
  3162.             // line 2496
  3163.             yield "\t\t<section class=\"py-5\">
  3164. \t\t\t<div class=\"container\">
  3165. \t\t\t\t<div class=\"section-title text-center mb-5\">
  3166. \t\t\t\t\t<h2>Recommandés pour vous</h2>
  3167. \t\t\t\t\t<p>Suggestions basées sur votre activité récente et les tendances de MaketOu</p>
  3168. \t\t\t\t</div>
  3169. \t\t\t\t<div class=\"row g-4\">
  3170. \t\t\t\t\t";
  3171.             // line 2503
  3172.             $context['_parent'] = $context;
  3173.             $context['_seq'] = CoreExtension::ensureTraversable(($context["recommendedProducts"] ?? null));
  3174.             foreach ($context['_seq'] as $context["_key"] => $context["product"]) {
  3175.                 // line 2504
  3176.                 yield "\t\t\t\t\t\t<div class=\"col-12 col-sm-6 col-lg-3\">
  3177. \t\t\t\t\t\t\t<div class=\"product-card h-100\">
  3178. \t\t\t\t\t\t\t\t";
  3179.                 // line 2506
  3180.                 $context["productImage"] = (((CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, true, false, 2506), 0, [], "array", true, true, false, 2506) &&  !(null === (($_v4 = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2506)) && is_array($_v4) || $_v4 instanceof ArrayAccess ? ($_v4[0] ?? null) : null)))) ? ((($_v5 = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2506)) && is_array($_v5) || $_v5 instanceof ArrayAccess ? ($_v5[0] ?? null) : null)) : ("ui/img/product/p1.jpg"));
  3181.                 // line 2507
  3182.                 yield "\t\t\t\t\t\t\t\t<div class=\"product-image\" style=\"background-image:url('";
  3183.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(($context["productImage"] ?? null)), "html", null, true);
  3184.                 yield "');\">
  3185. \t\t\t\t\t\t\t\t\t";
  3186.                 // line 2508
  3187.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "isFeatured", [], "any", false, false, false, 2508)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3188.                     // line 2509
  3189.                     yield "\t\t\t\t\t\t\t\t\t\t<span class=\"product-badge bg-success\">Populaire</span>
  3190. \t\t\t\t\t\t\t\t\t";
  3191.                 }
  3192.                 // line 2511
  3193.                 yield "\t\t\t\t\t\t\t\t</div>
  3194. \t\t\t\t\t\t\t\t<div class=\"p-3\">
  3195. \t\t\t\t\t\t\t\t\t<h6 class=\"mb-2\">
  3196. \t\t\t\t\t\t\t\t\t\t<a href=\"";
  3197.                 // line 2514
  3198.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_product_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, $context["product"], "slug", [], "any", false, false, false, 2514)]), "html", null, true);
  3199.                 yield "\">";
  3200.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 2514), "html", null, true);
  3201.                 yield "</a>
  3202. \t\t\t\t\t\t\t\t\t</h6>
  3203. \t\t\t\t\t\t\t\t\t<p class=\"mb-2 text-muted small\">
  3204. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\"></i>
  3205. \t\t\t\t\t\t\t\t\t\t";
  3206.                 // line 2518
  3207.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "shop", [], "any", false, false, false, 2518)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3208.                     // line 2519
  3209.                     yield "\t\t\t\t\t\t\t\t\t\t\t<a href=\"";
  3210.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_shop_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["product"], "shop", [], "any", false, false, false, 2519), "slug", [], "any", false, false, false, 2519)]), "html", null, true);
  3211.                     yield "\">";
  3212.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["product"], "shop", [], "any", false, false, false, 2519), "name", [], "any", false, false, false, 2519), "html", null, true);
  3213.                     yield "</a>
  3214. \t\t\t\t\t\t\t\t\t\t";
  3215.                 } else {
  3216.                     // line 2521
  3217.                     yield "\t\t\t\t\t\t\t\t\t\t\tBoutique non spécifiée
  3218. \t\t\t\t\t\t\t\t\t\t";
  3219.                 }
  3220.                 // line 2523
  3221.                 yield "\t\t\t\t\t\t\t\t\t</p>
  3222. \t\t\t\t\t\t\t\t\t<div class=\"d-flex align-items-center justify-content-between\">
  3223. \t\t\t\t\t\t\t\t\t\t<span class=\"fw-bold text-primary\">";
  3224.                 // line 2525
  3225.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "price", [], "any", false, false, false, 2525), 2, ".", " "), "html", null, true);
  3226.                 yield " HTG</span>
  3227. \t\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0)\" class=\"btn btn-sm btn-outline-primary add-to-cart\" data-product-id=\"";
  3228.                 // line 2526
  3229.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2526), "html", null, true);
  3230.                 yield "\" data-qty=\"1\">
  3231. \t\t\t\t\t\t\t\t\t\t\t<i class=\"ti ti-bag\"></i>
  3232. \t\t\t\t\t\t\t\t\t\t</a>
  3233. \t\t\t\t\t\t\t\t\t</div>
  3234. \t\t\t\t\t\t\t\t</div>
  3235. \t\t\t\t\t\t\t</div>
  3236. \t\t\t\t\t\t</div>
  3237. \t\t\t\t\t";
  3238.             }
  3239.             $_parent = $context['_parent'];
  3240.             unset($context['_seq'], $context['_key'], $context['product'], $context['_parent']);
  3241.             $context = array_intersect_key($context, $_parent) + $_parent;
  3242.             // line 2534
  3243.             yield "\t\t\t\t</div>
  3244. \t\t\t</div>
  3245. \t\t</section>
  3246. \t";
  3247.         }
  3248.         // line 2538
  3249.         yield "
  3250. \t";
  3251.         // line 2539
  3252.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["recentlyViewedProducts"] ?? null)) > 0)) {
  3253.             // line 2540
  3254.             yield "\t\t<section class=\"py-5 bg-light\">
  3255. \t\t\t<div class=\"container\">
  3256. \t\t\t\t<div class=\"section-title text-center mb-5\">
  3257. \t\t\t\t\t<h2>Récemment consultés</h2>
  3258. \t\t\t\t\t<p>Retrouvez les articles que vous avez explorés dernièrement</p>
  3259. \t\t\t\t</div>
  3260. \t\t\t\t<div class=\"featured-gallery-wrapper\">
  3261. \t\t\t\t\t<div class=\"featured-gallery-container\">
  3262. \t\t\t\t\t\t<div class=\"featured-gallery-grid\">
  3263. \t\t\t\t\t\t\t";
  3264.             // line 2549
  3265.             $context['_parent'] = $context;
  3266.             $context['_seq'] = CoreExtension::ensureTraversable(($context["recentlyViewedProducts"] ?? null));
  3267.             foreach ($context['_seq'] as $context["_key"] => $context["product"]) {
  3268.                 // line 2550
  3269.                 yield "\t\t\t\t\t\t\t\t<div class=\"featured-gallery-item\">
  3270. \t\t\t\t\t\t\t\t\t<div class=\"single-product\">
  3271. \t\t\t\t\t\t\t\t\t\t<div class=\"product-image-container\">
  3272. \t\t\t\t\t\t\t\t\t\t\t<a href=\"";
  3273.                 // line 2553
  3274.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_product_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, $context["product"], "slug", [], "any", false, false, false, 2553)]), "html", null, true);
  3275.                 yield "\">
  3276. \t\t\t\t\t\t\t\t\t\t\t\t";
  3277.                 // line 2554
  3278.                 if ((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", true, true, false, 2554) && (Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2554)) > 0))) {
  3279.                     // line 2555
  3280.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t<img class=\"img-fluid main-product-img\" src=\"";
  3281.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl((($_v6 = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2555)) && is_array($_v6) || $_v6 instanceof ArrayAccess ? ($_v6[0] ?? null) : null)), "html", null, true);
  3282.                     yield "\" alt=\"";
  3283.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 2555), "html", null, true);
  3284.                     yield "\">
  3285. \t\t\t\t\t\t\t\t\t\t\t\t";
  3286.                 } else {
  3287.                     // line 2557
  3288.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t<img class=\"img-fluid main-product-img\" src=\"";
  3289.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/img/product/p1.jpg"), "html", null, true);
  3290.                     yield "\" alt=\"";
  3291.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 2557), "html", null, true);
  3292.                     yield "\">
  3293. \t\t\t\t\t\t\t\t\t\t\t\t";
  3294.                 }
  3295.                 // line 2559
  3296.                 yield "\t\t\t\t\t\t\t\t\t\t\t</a>
  3297. \t\t\t\t\t\t\t\t\t\t</div>
  3298. \t\t\t\t\t\t\t\t\t\t<div class=\"product-details\">
  3299. \t\t\t\t\t\t\t\t\t\t\t<a href=\"";
  3300.                 // line 2562
  3301.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_product_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, $context["product"], "slug", [], "any", false, false, false, 2562)]), "html", null, true);
  3302.                 yield "\">
  3303. \t\t\t\t\t\t\t\t\t\t\t\t<h6>";
  3304.                 // line 2563
  3305.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 2563), "html", null, true);
  3306.                 yield "</h6>
  3307. \t\t\t\t\t\t\t\t\t\t\t</a>
  3308. \t\t\t\t\t\t\t\t\t\t\t<div class=\"price\">
  3309. \t\t\t\t\t\t\t\t\t\t\t\t<h6>";
  3310.                 // line 2566
  3311.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "price", [], "any", false, false, false, 2566), 2, ".", " "), "html", null, true);
  3312.                 yield " HTG</h6>
  3313. \t\t\t\t\t\t\t\t\t\t\t</div>
  3314. \t\t\t\t\t\t\t\t\t\t\t<div class=\"prd-bottom\">
  3315. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0)\" class=\"social-info add-to-cart\" data-product-id=\"";
  3316.                 // line 2569
  3317.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2569), "html", null, true);
  3318.                 yield "\" data-qty=\"1\">
  3319. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ti-bag\"></span>
  3320. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">+ panier</p>
  3321. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  3322. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"";
  3323.                 // line 2573
  3324.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_product_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, $context["product"], "slug", [], "any", false, false, false, 2573)]), "html", null, true);
  3325.                 yield "\" class=\"social-info\">
  3326. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-move\"></span>
  3327. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">Voir</p>
  3328. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  3329. \t\t\t\t\t\t\t\t\t\t\t</div>
  3330. \t\t\t\t\t\t\t\t\t\t</div>
  3331. \t\t\t\t\t\t\t\t\t</div>
  3332. \t\t\t\t\t\t\t\t</div>
  3333. \t\t\t\t\t\t\t";
  3334.             }
  3335.             $_parent = $context['_parent'];
  3336.             unset($context['_seq'], $context['_key'], $context['product'], $context['_parent']);
  3337.             $context = array_intersect_key($context, $_parent) + $_parent;
  3338.             // line 2582
  3339.             yield "\t\t\t\t\t\t</div>
  3340. \t\t\t\t\t</div>
  3341. \t\t\t\t</div>
  3342. \t\t\t</div>
  3343. \t\t</section>
  3344. \t";
  3345.         }
  3346.         // line 2588
  3347.         yield "
  3348. \t<!-- Fonctionnalités -->
  3349. \t<section class=\"py-5\">
  3350. \t\t<div class=\"container\">
  3351. \t\t\t<div class=\"section-title\">
  3352. \t\t\t\t<h2>Pourquoi choisir MaketOu ?</h2>
  3353. \t\t\t\t<p>Découvrez les avantages de notre plateforme</p>
  3354. \t\t\t</div>
  3355. \t\t\t<div class=\"row\">
  3356. \t\t\t\t<div class=\"col-lg-3 col-md-6 mb-4\">
  3357. \t\t\t\t\t<div class=\"feature-card\">
  3358. \t\t\t\t\t\t<div class=\"feature-icon\">
  3359. \t\t\t\t\t\t\t<i class=\"lnr lnr-rocket\"></i>
  3360. \t\t\t\t\t\t</div>
  3361. \t\t\t\t\t\t<h5>Livraison rapide</h5>
  3362. \t\t\t\t\t\t<p>Recevez vos commandes rapidement avec notre réseau de livraison optimisé</p>
  3363. \t\t\t\t\t</div>
  3364. \t\t\t\t</div>
  3365. \t\t\t\t<div class=\"col-lg-3 col-md-6 mb-4\">
  3366. \t\t\t\t\t<div class=\"feature-card\">
  3367. \t\t\t\t\t\t<div class=\"feature-icon\">
  3368. \t\t\t\t\t\t\t<i class=\"lnr lnr-lock\"></i>
  3369. \t\t\t\t\t\t</div>
  3370. \t\t\t\t\t\t<h5>Paiement sécurisé</h5>
  3371. \t\t\t\t\t\t<p>Vos transactions sont protégées avec les dernières technologies de sécurité</p>
  3372. \t\t\t\t\t</div>
  3373. \t\t\t\t</div>
  3374. \t\t\t\t<div class=\"col-lg-3 col-md-6 mb-4\">
  3375. \t\t\t\t\t<div class=\"feature-card\">
  3376. \t\t\t\t\t\t<div class=\"feature-icon\">
  3377. \t\t\t\t\t\t\t<i class=\"lnr lnr-phone\"></i>
  3378. \t\t\t\t\t\t</div>
  3379. \t\t\t\t\t\t<h5>Support 24/7</h5>
  3380. \t\t\t\t\t\t<p>Notre équipe est disponible pour vous aider à tout moment</p>
  3381. \t\t\t\t\t</div>
  3382. \t\t\t\t</div>
  3383. \t\t\t\t<div class=\"col-lg-3 col-md-6 mb-4\">
  3384. \t\t\t\t\t<div class=\"feature-card\">
  3385. \t\t\t\t\t\t<div class=\"feature-icon\">
  3386. \t\t\t\t\t\t\t<i class=\"lnr lnr-undo\"></i>
  3387. \t\t\t\t\t\t</div>
  3388. \t\t\t\t\t\t<h5>Retour facile</h5>
  3389. \t\t\t\t\t\t<p>Politique de retour flexible pour votre tranquillité d'esprit</p>
  3390. \t\t\t\t\t</div>
  3391. \t\t\t\t</div>
  3392. \t\t\t</div>
  3393. \t\t</div>
  3394. \t</section>
  3396. \t<!-- Newsletter -->
  3397. \t<section class=\"newsletter-section-modern py-5\">
  3398. \t\t<div class=\"container\">
  3399. \t\t\t<div class=\"row justify-content-center\">
  3400. \t\t\t\t<div class=\"col-lg-10\">
  3401. \t\t\t\t\t<div class=\"newsletter-card\">
  3402. \t\t\t\t\t\t<div class=\"row align-items-center\">
  3403. \t\t\t\t\t\t\t<div class=\"col-lg-6 text-center text-lg-start mb-4 mb-lg-0\">
  3404. \t\t\t\t\t\t\t\t<div class=\"newsletter-icon mb-3\">
  3405. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-envelope\" style=\"font-size: 4rem; color: #ffa200;\"></i>
  3406. \t\t\t\t\t\t\t\t</div>
  3407. \t\t\t\t\t\t\t\t<h2 class=\"newsletter-title mb-3\">Restez informé des dernières nouveautés</h2>
  3408. \t\t\t\t\t\t\t\t<p class=\"newsletter-description mb-0\">
  3409. \t\t\t\t\t\t\t\t\tInscrivez-vous à notre newsletter pour recevoir les offres exclusives, 
  3410. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                les nouveaux produits et les meilleures promotions directement dans votre boîte mail.
  3411. \t\t\t\t\t\t\t\t</p>
  3412. \t\t\t\t\t\t\t</div>
  3413. \t\t\t\t\t\t\t<div class=\"col-lg-6\">
  3414. \t\t\t\t\t\t\t\t<form class=\"newsletter-form-modern\" id=\"newsletterFormHome\">
  3415. \t\t\t\t\t\t\t\t\t<div class=\"newsletter-input-wrapper\">
  3416. \t\t\t\t\t\t\t\t\t\t<input type=\"email\" class=\"newsletter-input\" placeholder=\"Votre adresse email\" required name=\"email\">
  3417. \t\t\t\t\t\t\t\t\t\t<button class=\"newsletter-button\" type=\"submit\">
  3418. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-arrow-right me-2\"></i>
  3419. \t\t\t\t\t\t\t\t\t\t\tS'abonner
  3420. \t\t\t\t\t\t\t\t\t\t</button>
  3421. \t\t\t\t\t\t\t\t\t</div>
  3422. \t\t\t\t\t\t\t\t\t<p class=\"newsletter-privacy mt-3 text-center\">
  3423. \t\t\t\t\t\t\t\t\t\t<small>
  3424. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-lock me-1\"></i>
  3425. \t\t\t\t\t\t\t\t\t\t\tVos données sont sécurisées. Pas de spam, désinscription facile.
  3426. \t\t\t\t\t\t\t\t\t\t</small>
  3427. \t\t\t\t\t\t\t\t\t</p>
  3428. \t\t\t\t\t\t\t\t</form>
  3429. \t\t\t\t\t\t\t</div>
  3430. \t\t\t\t\t\t</div>
  3431. \t\t\t\t\t</div>
  3432. \t\t\t\t</div>
  3433. \t\t\t</div>
  3434. \t\t</div>
  3435. \t</section>
  3437. \t<!-- Call to Action -->
  3438. \t<section class=\"cta-section-modern py-5\">
  3439. \t\t<div class=\"container\">
  3440. \t\t\t<div class=\"cta-card\">
  3441. \t\t\t\t<div class=\"row align-items-center\">
  3442. \t\t\t\t\t<div class=\"col-lg-6 mb-4 mb-lg-0\">
  3443. \t\t\t\t\t\t<div class=\"cta-content\">
  3444. \t\t\t\t\t\t\t<span class=\"cta-badge\">
  3445. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-rocket me-2\"></i>
  3446. \t\t\t\t\t\t\t\tCommencez dès aujourd'hui
  3447. \t\t\t\t\t\t\t</span>
  3448. \t\t\t\t\t\t\t<h2 class=\"cta-title mb-3\">Prêt à commencer ?</h2>
  3449. \t\t\t\t\t\t\t<p class=\"cta-description mb-4\">
  3450. \t\t\t\t\t\t\t\tQue vous soyez
  3451. \t\t\t\t\t\t\t\t<strong>acheteur</strong>
  3452. \t\t\t\t\t\t\t\tou
  3453. \t\t\t\t\t\t\t\t<strong>vendeur</strong>, MaketOu vous offre la plateforme idéale 
  3454. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                            pour vos besoins commerciaux en Haïti. Rejoignez des milliers d'utilisateurs satisfaits !
  3455. \t\t\t\t\t\t\t</p>
  3456. \t\t\t\t\t\t\t<div class=\"cta-features mb-4\">
  3457. \t\t\t\t\t\t\t\t<div class=\"cta-feature-item\">
  3458. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  3459. \t\t\t\t\t\t\t\t\t<span>Plateforme 100% sécurisée</span>
  3460. \t\t\t\t\t\t\t\t</div>
  3461. \t\t\t\t\t\t\t\t<div class=\"cta-feature-item\">
  3462. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  3463. \t\t\t\t\t\t\t\t\t<span>Support client 24/7</span>
  3464. \t\t\t\t\t\t\t\t</div>
  3465. \t\t\t\t\t\t\t\t<div class=\"cta-feature-item\">
  3466. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  3467. \t\t\t\t\t\t\t\t\t<span>Paiements multiples</span>
  3468. \t\t\t\t\t\t\t\t</div>
  3469. \t\t\t\t\t\t\t</div>
  3470. \t\t\t\t\t\t\t<div class=\"cta-buttons\">
  3471. \t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn cta-button-primary\" onclick=\"openReadyModal()\">
  3472. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-rocket me-2\"></i>
  3473. \t\t\t\t\t\t\t\t\tPrêt à commencer ?
  3474. \t\t\t\t\t\t\t\t</button>
  3475. \t\t\t\t\t\t\t\t<a href=\"";
  3476.         // line 2716
  3477.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  3478.         yield "\" class=\"btn cta-button-secondary\">
  3479. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-magnifier me-2\"></i>
  3480. \t\t\t\t\t\t\t\t\tVoir les produits
  3481. \t\t\t\t\t\t\t\t</a>
  3482. \t\t\t\t\t\t\t</div>
  3483. \t\t\t\t\t\t</div>
  3484. \t\t\t\t\t</div>
  3485. \t\t\t\t\t<div class=\"col-lg-6\">
  3486. \t\t\t\t\t\t<div class=\"cta-image-wrapper\">
  3487. \t\t\t\t\t\t\t<div class=\"cta-decoration\"></div>
  3488. \t\t\t\t\t\t\t<img src=\"";
  3489.         // line 2726
  3490.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Start.png"), "html", null, true);
  3491.         yield "\" alt=\"MaketOu\" class=\"cta-image\">
  3492. \t\t\t\t\t\t</div>
  3493. \t\t\t\t\t</div>
  3494. \t\t\t\t</div>
  3495. \t\t\t</div>
  3496. \t\t</div>
  3497. \t</section>
  3498. ";
  3499.         
  3500.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  3502.         
  3503.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  3505.         yield from [];
  3506.     }
  3508.     // line 2735
  3509.     /**
  3510.      * @return iterable<null|scalar|\Stringable>
  3511.      */
  3512.     public function block_javascripts(array $context, array $blocks = []): iterable
  3513.     {
  3514.         $macros = $this->macros;
  3515.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  3516.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripts"));
  3518.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  3519.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripts"));
  3521.         // line 2736
  3522.         yield "\t<script src=\"";
  3523.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/js/product-unified.js"), "html", null, true);
  3524.         yield "\"></script>
  3525. \t<script>
  3526. \t\twindow.openReadyModal = function () {
  3527. \t\t\tconst modalEl = document.getElementById('readyModal');
  3528. \t\t\tif (!modalEl) {
  3529. \t\t\t\tconsole.error('readyModal introuvable');
  3530. \t\t\t\treturn;
  3531. \t\t\t}
  3532. \t\t\tif (typeof bootstrap === 'undefined' || !bootstrap.Modal) {
  3533. \t\t\t\tconsole.error('Bootstrap Modal non chargé');
  3534. \t\t\t\treturn;
  3535. \t\t\t}
  3536. \t\t\tconst modalInstance = bootstrap.Modal.getOrCreateInstance(modalEl);
  3537. \t\t\tmodalInstance.show();
  3538. \t\t};
  3539. \t</script>
  3540. \t<script>
  3541. \t\t// Variables globales pour la navigation des images (si pas déjà définies)
  3542. \t\tif (typeof productImages === 'undefined') {
  3543. \t\t\twindow.productImages = {};
  3544. \t\t\twindow.currentImageIndex = {};
  3545. \t\t}
  3547. // Initialisation des données d'images pour les produits \"Produits en vedette\"
  3548. ";
  3549.         // line 2760
  3550.         if (array_key_exists("featuredProducts", $context)) {
  3551.             // line 2761
  3552.             $context['_parent'] = $context;
  3553.             $context['_seq'] = CoreExtension::ensureTraversable(($context["featuredProducts"] ?? null));
  3554.             foreach ($context['_seq'] as $context["_key"] => $context["product"]) {
  3555.                 // line 2762
  3556.                 if ((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", true, true, false, 2762) && (Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2762)) > 0))) {
  3557.                     // line 2763
  3558.                     yield "productImages[";
  3559.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2763), "html", null, true);
  3560.                     yield "] = [";
  3561.                     $context['_parent'] = $context;
  3562.                     $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2763));
  3563.                     $context['loop'] = [
  3564.                       'parent' => $context['_parent'],
  3565.                       'index0' => 0,
  3566.                       'index'  => 1,
  3567.                       'first'  => true,
  3568.                     ];
  3569.                     if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  3570.                         $length = count($context['_seq']);
  3571.                         $context['loop']['revindex0'] = $length - 1;
  3572.                         $context['loop']['revindex'] = $length;
  3573.                         $context['loop']['length'] = $length;
  3574.                         $context['loop']['last'] = 1 === $length;
  3575.                     }
  3576.                     foreach ($context['_seq'] as $context["_key"] => $context["img"]) {
  3577.                         yield "'";
  3578.                         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl($context["img"]), "html", null, true);
  3579.                         yield "'";
  3580.                         if ((($tmp =  !CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "last", [], "any", false, false, false, 2763)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3581.                             yield ",";
  3582.                         }
  3583.                         ++$context['loop']['index0'];
  3584.                         ++$context['loop']['index'];
  3585.                         $context['loop']['first'] = false;
  3586.                         if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  3587.                             --$context['loop']['revindex0'];
  3588.                             --$context['loop']['revindex'];
  3589.                             $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  3590.                         }
  3591.                     }
  3592.                     $_parent = $context['_parent'];
  3593.                     unset($context['_seq'], $context['_key'], $context['img'], $context['_parent'], $context['loop']);
  3594.                     $context = array_intersect_key($context, $_parent) + $_parent;
  3595.                     yield "];
  3596. currentImageIndex[";
  3597.                     // line 2764
  3598.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2764), "html", null, true);
  3599.                     yield "] = 0;";
  3600.                 }
  3601.             }
  3602.             $_parent = $context['_parent'];
  3603.             unset($context['_seq'], $context['_key'], $context['product'], $context['_parent']);
  3604.             $context = array_intersect_key($context, $_parent) + $_parent;
  3605.         }
  3606.         // line 2765
  3607.         yield "
  3608. // Initialisation des données d'images pour les produits \"Nouveautés\"
  3609. ";
  3610.         // line 2767
  3611.         if (array_key_exists("latestProducts", $context)) {
  3612.             // line 2768
  3613.             $context['_parent'] = $context;
  3614.             $context['_seq'] = CoreExtension::ensureTraversable(($context["latestProducts"] ?? null));
  3615.             foreach ($context['_seq'] as $context["_key"] => $context["product"]) {
  3616.                 // line 2769
  3617.                 if ((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", true, true, false, 2769) && (Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2769)) > 0))) {
  3618.                     // line 2770
  3619.                     yield "productImages[";
  3620.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2770), "html", null, true);
  3621.                     yield "] = [";
  3622.                     $context['_parent'] = $context;
  3623.                     $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2770));
  3624.                     $context['loop'] = [
  3625.                       'parent' => $context['_parent'],
  3626.                       'index0' => 0,
  3627.                       'index'  => 1,
  3628.                       'first'  => true,
  3629.                     ];
  3630.                     if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  3631.                         $length = count($context['_seq']);
  3632.                         $context['loop']['revindex0'] = $length - 1;
  3633.                         $context['loop']['revindex'] = $length;
  3634.                         $context['loop']['length'] = $length;
  3635.                         $context['loop']['last'] = 1 === $length;
  3636.                     }
  3637.                     foreach ($context['_seq'] as $context["_key"] => $context["img"]) {
  3638.                         yield "'";
  3639.                         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl($context["img"]), "html", null, true);
  3640.                         yield "'";
  3641.                         if ((($tmp =  !CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "last", [], "any", false, false, false, 2770)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3642.                             yield ",";
  3643.                         }
  3644.                         ++$context['loop']['index0'];
  3645.                         ++$context['loop']['index'];
  3646.                         $context['loop']['first'] = false;
  3647.                         if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  3648.                             --$context['loop']['revindex0'];
  3649.                             --$context['loop']['revindex'];
  3650.                             $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  3651.                         }
  3652.                     }
  3653.                     $_parent = $context['_parent'];
  3654.                     unset($context['_seq'], $context['_key'], $context['img'], $context['_parent'], $context['loop']);
  3655.                     $context = array_intersect_key($context, $_parent) + $_parent;
  3656.                     yield "];
  3657. currentImageIndex[";
  3658.                     // line 2771
  3659.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2771), "html", null, true);
  3660.                     yield "] = 0;";
  3661.                 }
  3662.             }
  3663.             $_parent = $context['_parent'];
  3664.             unset($context['_seq'], $context['_key'], $context['product'], $context['_parent']);
  3665.             $context = array_intersect_key($context, $_parent) + $_parent;
  3666.         }
  3667.         // line 2772
  3668.         yield "
  3669. console.log('SCRIPT LOADED - Featured Gallery');
  3670. (function () {
  3671. \t'use strict';
  3673. \tconst SECTION_CONFIGS = [
  3674. \t\t{ grid: '#featuredGalleryGrid', prev: '#featuredGalleryPrev', next: '#featuredGalleryNext' },
  3675. \t\t{ grid: '#latestGalleryGrid', prev: '#latestGalleryPrev', next: '#latestGalleryNext' }
  3676. \t];
  3678. \tfunction triggerRipple(button) {
  3679. \t\tbutton.classList.remove('btn-ripple');
  3680. \t\tvoid button.offsetWidth;
  3681. \t\tbutton.classList.add('btn-ripple');
  3682. \t\tsetTimeout(() => button.classList.remove('btn-ripple'), 350);
  3683. \t}
  3685. \tfunction initSectionCarousel(config) {
  3686. \t\tconst \$grid = \$(config.grid);
  3687. \t\tif (!\$grid.length) {
  3688. \t\t\tconsole.warn('Grid not found:', config.grid);
  3689. \t\t\treturn;
  3690. \t\t}
  3692. \t\tif (typeof \$.fn.owlCarousel !== 'function') {
  3693. \t\t\tconsole.warn('OwlCarousel n\\'est pas chargé pour', config.grid);
  3694. \t\t\treturn;
  3695. \t\t}
  3697. \t\t// Si déjà initialisé, récupérer l'instance existante
  3698. \t\tlet owlInstance;
  3699. \t\tif (\$grid.hasClass('owl-loaded')) {
  3700. \t\t\towlInstance = \$grid.data('owl.carousel');
  3701. \t\t\tconsole.log('OwlCarousel already initialized for', config.grid, owlInstance);
  3702. \t\t} else {
  3703. \t\t\tif (!\$grid.hasClass('owl-carousel')) {
  3704. \t\t\t\t\$grid.addClass('owl-carousel');
  3705. \t\t\t}
  3707. \t\t\towlInstance = \$grid.owlCarousel({
  3708. \t\t\t\tloop: true,
  3709. \t\t\t\tmargin: 30,
  3710. \t\t\t\tautoplay: true,
  3711. \t\t\t\tautoplayTimeout: 4800,
  3712. \t\t\t\tautoplayHoverPause: true,
  3713. \t\t\t\tsmartSpeed: 650,
  3714. \t\t\t\tnav: false,
  3715. \t\t\t\tdots: false,
  3716. \t\t\t\tresponsive: {
  3717. \t\t\t\t\t0: { items: 1, margin: 15 },
  3718. \t\t\t\t\t576: { items: 1.2, margin: 18 },
  3719. \t\t\t\t\t768: { items: 2, margin: 20 },
  3720. \t\t\t\t\t992: { items: 3, margin: 25 },
  3721. \t\t\t\t\t1400: { items: 4, margin: 30 }
  3722. \t\t\t\t}
  3723. \t\t\t});
  3724. \t\t\tconsole.log('OwlCarousel initialized for', config.grid, owlInstance);
  3725. \t\t}
  3727. \t\tconst \$prev = \$(config.prev);
  3728. \t\tconst \$next = \$(config.next);
  3730. \t\tif (\$prev.length) {
  3731. \t\t\t\$prev.off('click.carouselNav').on('click.carouselNav', function (e) {
  3732. \t\t\t\te.preventDefault();
  3733. \t\t\t\te.stopPropagation();
  3734. \t\t\t\tconsole.log('Prev clicked for', config.grid, 'Instance:', owlInstance);
  3735. \t\t\t\tif (owlInstance) {
  3736. \t\t\t\t\ttry {
  3737. \t\t\t\t\t\t\$grid.trigger('prev.owl.carousel');
  3738. \t\t\t\t\t\ttriggerRipple(this);
  3739. \t\t\t\t\t} catch (err) {
  3740. \t\t\t\t\t\tconsole.error('Error triggering prev:', err);
  3741. \t\t\t\t\t}
  3742. \t\t\t\t} else {
  3743. \t\t\t\t\tconsole.error('OwlCarousel instance not available');
  3744. \t\t\t\t}
  3745. \t\t\t});
  3746. \t\t} else {
  3747. \t\t\tconsole.warn('Prev button not found:', config.prev);
  3748. \t\t}
  3750. \t\tif (\$next.length) {
  3751. \t\t\t\$next.off('click.carouselNav').on('click.carouselNav', function (e) {
  3752. \t\t\t\te.preventDefault();
  3753. \t\t\t\te.stopPropagation();
  3754. \t\t\t\tconsole.log('Next clicked for', config.grid, 'Instance:', owlInstance);
  3755. \t\t\t\tif (owlInstance) {
  3756. \t\t\t\t\ttry {
  3757. \t\t\t\t\t\t\$grid.trigger('next.owl.carousel');
  3758. \t\t\t\t\t\ttriggerRipple(this);
  3759. \t\t\t\t\t} catch (err) {
  3760. \t\t\t\t\t\tconsole.error('Error triggering next:', err);
  3761. \t\t\t\t\t}
  3762. \t\t\t\t} else {
  3763. \t\t\t\t\tconsole.error('OwlCarousel instance not available');
  3764. \t\t\t\t}
  3765. \t\t\t});
  3766. \t\t} else {
  3767. \t\t\tconsole.warn('Next button not found:', config.next);
  3768. \t\t}
  3769. \t}
  3771. \tfunction ensureOwl(attempt = 0) {
  3772. \t\tif (window.jQuery && typeof \$.fn !== 'undefined' && typeof \$.fn.owlCarousel === 'function') {
  3773. \t\t\tSECTION_CONFIGS.forEach(initSectionCarousel);
  3774. \t\t} else if (attempt < 15) {
  3775. \t\t\tsetTimeout(() => ensureOwl(attempt + 1), 200);
  3776. \t\t} else {
  3777. \t\t\tconsole.warn('OwlCarousel non disponible après plusieurs tentatives');
  3778. \t\t}
  3779. \t}
  3781. \tdocument.addEventListener('DOMContentLoaded', function () {
  3782. \t\tensureOwl();
  3783. \t});
  3784. })();
  3786. document.addEventListener('DOMContentLoaded', function () { // Animation des cartes au scroll
  3787. const observerOptions = {
  3788. threshold: 0.1,
  3789. rootMargin: '0px 0px -50px 0px'
  3790. };
  3792. const observer = new IntersectionObserver(function (entries) {
  3793. entries.forEach(entry => {
  3794. if (entry.isIntersecting) {
  3795. entry.target.style.opacity = '1';
  3796. entry.target.style.transform = 'translateY(0)';
  3797. }
  3798. });
  3799. }, observerOptions);
  3801. // Observer toutes les cartes
  3802. document.querySelectorAll('.stats-card, .category-card, .product-card, .feature-card').forEach(card => {
  3803. card.style.opacity = '0';
  3804. card.style.transform = 'translateY(30px)';
  3805. card.style.transition = 'all 0.6s ease';
  3806. observer.observe(card);
  3807. });
  3809. // Compteur animé pour les statistiques
  3810. function animateCounter(element, target, duration = 2000) {
  3811. let start = 0;
  3812. const increment = target / (duration / 16);
  3814. function updateCounter() {
  3815. start += increment;
  3816. if (start < target) {
  3817. element.textContent = Math.floor(start).toLocaleString();
  3818. requestAnimationFrame(updateCounter);
  3819. } else {
  3820. element.textContent = target.toLocaleString();
  3821. }
  3822. }
  3824. updateCounter();
  3825. }
  3827. // Animer les compteurs quand ils sont visibles
  3828. const statsObserver = new IntersectionObserver(function (entries) {
  3829. entries.forEach(entry => {
  3830. if (entry.isIntersecting) {
  3831. const numberElement = entry.target.querySelector('.stats-number');
  3832. const target = parseInt(numberElement.textContent.replace(/,/g, ''));
  3833. animateCounter(numberElement, target);
  3834. statsObserver.unobserve(entry.target);
  3835. }
  3836. });
  3837. });
  3839. document.querySelectorAll('.stats-card').forEach(card => {
  3840. statsObserver.observe(card);
  3841. });
  3843. // Gestion de la newsletter
  3844. const newsletterForm = document.querySelector('.newsletter-form');
  3845. if (newsletterForm) {
  3846. newsletterForm.addEventListener('submit', function (e) {
  3847. e.preventDefault();
  3848. const email = this.querySelector('input[type=\"email\"]').value;
  3849. const button = this.querySelector('button');
  3850. const originalText = button.innerHTML;
  3852. // Désactiver le bouton
  3853. button.disabled = true;
  3854. button.innerHTML = '<i class=\"lnr lnr-spinner me-2\"></i>Inscription...';
  3856. // Envoyer la requête
  3857. fetch('";
  3858.         // line 2961
  3859.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_newsletter_subscribe");
  3860.         yield "', {
  3861. method: 'POST',
  3862. headers: {
  3863. 'Content-Type': 'application/x-www-form-urlencoded',
  3864. 'X-Requested-With': 'XMLHttpRequest'
  3865. },
  3866. body: 'email=' + encodeURIComponent(email)
  3867. }).then(response => response.json()).then(data => {
  3868. if (data.success) {
  3869. button.innerHTML = '<i class=\"lnr lnr-check me-2\"></i>Inscription réussie !';
  3870. button.classList.remove('btn-warning');
  3871. button.classList.add('btn-success');
  3872. this.reset();
  3873. } else {
  3874. button.innerHTML = '<i class=\"lnr lnr-warning me-2\"></i>Erreur';
  3875. button.classList.remove('btn-warning');
  3876. button.classList.add('btn-danger');
  3877. }
  3879. setTimeout(() => {
  3880. button.innerHTML = originalText;
  3881. button.classList.remove('btn-success', 'btn-danger');
  3882. button.classList.add('btn-warning');
  3883. button.disabled = false;
  3884. }, 3000);
  3885. }).catch(error => {
  3886. console.error('Erreur:', error);
  3887. button.innerHTML = '<i class=\"lnr lnr-warning me-2\"></i>Erreur';
  3888. button.classList.remove('btn-warning');
  3889. button.classList.add('btn-danger');
  3891. setTimeout(() => {
  3892. button.innerHTML = originalText;
  3893. button.classList.remove('btn-danger');
  3894. button.classList.add('btn-warning');
  3895. button.disabled = false;
  3896. }, 3000);
  3897. });
  3898. });
  3899. }
  3900. });
  3902. // Effet parallaxe léger pour le hero
  3903. window.addEventListener('scroll', function () {
  3904. const scrolled = window.pageYOffset;
  3905. const hero = document.querySelector('.hero-banner');
  3906. if (hero) {
  3907. hero.style.transform = `translateY(\${
  3908. scrolled * 0.5
  3909. }px)`;
  3910. }
  3911. });
  3912. });
  3914. // Fonction pour afficher toutes les catégories
  3915. function showAllCategories () {
  3916. const container = document.getElementById('productCategoriesContainer');
  3917. const btn = document.getElementById('showAllCategoriesBtn');";
  3918.         // line 3018
  3919.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["allCategories"] ?? null)) > 8)) {
  3920.             $context['_parent'] = $context;
  3921.             $context['_seq'] = CoreExtension::ensureTraversable(($context["allCategories"] ?? null));
  3922.             $context['loop'] = [
  3923.               'parent' => $context['_parent'],
  3924.               'index0' => 0,
  3925.               'index'  => 1,
  3926.               'first'  => true,
  3927.             ];
  3928.             if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  3929.                 $length = count($context['_seq']);
  3930.                 $context['loop']['revindex0'] = $length - 1;
  3931.                 $context['loop']['revindex'] = $length;
  3932.                 $context['loop']['length'] = $length;
  3933.                 $context['loop']['last'] = 1 === $length;
  3934.             }
  3935.             foreach ($context['_seq'] as $context["_key"] => $context["category"]) {
  3936.                 if ((CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 3018) > 8)) {
  3937.                     yield "const categoryHtml ";
  3938.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 3018), "html", null, true);
  3939.                     yield " = `
  3940.         <div class=\"col-lg-3 col-md-4 col-sm-6 mb-4\">
  3941.             <div class=\"category-card-custom\">
  3942.                 <div class=\"category-image-wrapper\">
  3943.                     <div class=\"category-image\" style=\"background-image: url('";
  3944.                     // line 3022
  3945.                     if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["category"], "bannerImage", [], "any", false, false, false, 3022)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3946.                         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(("uploads/categories/banner/" . CoreExtension::getAttribute($this->env, $this->source, $context["category"], "bannerImage", [], "any", false, false, false, 3022))), "html", null, true);
  3947.                     } else {
  3948.                         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl((("ui/img/category/cat-" . CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 3022)) . ".jpg")), "html", null, true);
  3949.                     }
  3950.                     yield "')\">
  3951.                         <div class=\"category-overlay-custom\">
  3952.                             <div class=\"category-icon-wrapper\">
  3953.                                 <i class=\"lnr lnr-tag\" style=\"font-size: 3rem;\"></i>
  3954.                                 <h4 class=\"mt-3\">";
  3955.                     // line 3026
  3956.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["category"], "name", [], "any", false, false, false, 3026), "html", null, true);
  3957.                     yield "</h4>
  3958.                             </div>
  3959.                         </div>
  3960.                     </div>
  3961.                 </div>
  3962.                 <div class=\"category-content p-3\">
  3963.                     <h5 class=\"mb-2\">";
  3964.                     // line 3032
  3965.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["category"], "name", [], "any", false, false, false, 3032), "html", null, true);
  3966.                     yield "</h5>
  3967.                     ";
  3968.                     // line 3033
  3969.                     if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["category"], "description", [], "any", false, false, false, 3033)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3970.                         // line 3034
  3971.                         yield "                        <p class=\"text-muted mb-3 small\">";
  3972.                         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::slice($this->env->getCharset(), Twig\Extension\CoreExtension::striptags(CoreExtension::getAttribute($this->env, $this->source, $context["category"], "description", [], "any", false, false, false, 3034)), 0, 60), "html", null, true);
  3973.                         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), Twig\Extension\CoreExtension::striptags(CoreExtension::getAttribute($this->env, $this->source, $context["category"], "description", [], "any", false, false, false, 3034))) > 60)) {
  3974.                             yield "...";
  3975.                         }
  3976.                         yield "</p>
  3977.                     ";
  3978.                     }
  3979.                     // line 3036
  3980.                     yield "                    <a href=\"";
  3981.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing", ["category" => CoreExtension::getAttribute($this->env, $this->source, $context["category"], "slug", [], "any", false, false, false, 3036)]), "html", null, true);
  3982.                     yield "\" class=\"btn btn-primary-custom btn-sm w-100\">
  3983.                         Voir les produits
  3984.                     </a>
  3985.                 </div>
  3986.             </div>
  3987.         </div>
  3988.     `;
  3989. container.insertAdjacentHTML('beforeend', categoryHtml ";
  3990.                     // line 3043
  3991.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 3043), "html", null, true);
  3992.                     yield ");";
  3993.                 }
  3994.                 ++$context['loop']['index0'];
  3995.                 ++$context['loop']['index'];
  3996.                 $context['loop']['first'] = false;
  3997.                 if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  3998.                     --$context['loop']['revindex0'];
  3999.                     --$context['loop']['revindex'];
  4000.                     $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  4001.                 }
  4002.             }
  4003.             $_parent = $context['_parent'];
  4004.             unset($context['_seq'], $context['_key'], $context['category'], $context['_parent'], $context['loop']);
  4005.             $context = array_intersect_key($context, $_parent) + $_parent;
  4006.         }
  4007.         yield "if (btn) 
  4008. btn.style.display = 'none';
  4012. }
  4014. // Fonction pour afficher toutes les catégories de boutiques
  4015. function showAllShopCategories () {
  4016. const container = document.getElementById('shopCategoriesContainer');
  4017. const btn = document.querySelector('[onclick=\"showAllShopCategories()\"]') ?. parentElement;";
  4018.         // line 3053
  4019.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["allShopCategories"] ?? null)) > 6)) {
  4020.             $context['_parent'] = $context;
  4021.             $context['_seq'] = CoreExtension::ensureTraversable(($context["allShopCategories"] ?? null));
  4022.             $context['loop'] = [
  4023.               'parent' => $context['_parent'],
  4024.               'index0' => 0,
  4025.               'index'  => 1,
  4026.               'first'  => true,
  4027.             ];
  4028.             if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  4029.                 $length = count($context['_seq']);
  4030.                 $context['loop']['revindex0'] = $length - 1;
  4031.                 $context['loop']['revindex'] = $length;
  4032.                 $context['loop']['length'] = $length;
  4033.                 $context['loop']['last'] = 1 === $length;
  4034.             }
  4035.             foreach ($context['_seq'] as $context["_key"] => $context["shopCategory"]) {
  4036.                 if ((CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 3053) > 6)) {
  4037.                     yield "const shopCategoryHtml ";
  4038.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 3053), "html", null, true);
  4039.                     yield " = `
  4040.         <div class=\"col-lg-4 col-md-6 mb-4\">
  4041.             <a href=\"";
  4042.                     // line 3055
  4043.                     yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_shops_list");
  4044.                     yield "?category=";
  4045.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "slug", [], "any", false, false, false, 3055), "html", null, true);
  4046.                     yield "\" class=\"text-decoration-none\" style=\"display: block;\">
  4047.                 <div class=\"category-card-custom shop-category-clickable\">
  4048.                     <div class=\"category-image-wrapper\">
  4049.                         <div class=\"category-image\" style=\"background-image: url('";
  4050.                     // line 3058
  4051.                     if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "bannerImage", [], "any", false, false, false, 3058)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  4052.                         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "bannerImage", [], "any", false, false, false, 3058)), "html", null, true);
  4053.                     } else {
  4054.                         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl((("ui/img/category/shop-" . CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 3058)) . ".jpg")), "html", null, true);
  4055.                     }
  4056.                     yield "')\">
  4057.                             <div class=\"category-overlay-custom\">
  4058.                                 <div class=\"category-icon-wrapper\">
  4059.                                     <i class=\"lnr lnr-store\" style=\"font-size: 3rem;\"></i>
  4060.                                     <h4 class=\"mt-3\">";
  4061.                     // line 3062
  4062.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "name", [], "any", false, false, false, 3062), "html", null, true);
  4063.                     yield "</h4>
  4064.                                     ";
  4065.                     // line 3063
  4066.                     if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "description", [], "any", false, false, false, 3063)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  4067.                         // line 3064
  4068.                         yield "                                        <p class=\"mt-2 px-3\">";
  4069.                         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::slice($this->env->getCharset(), Twig\Extension\CoreExtension::striptags(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "description", [], "any", false, false, false, 3064)), 0, 100), "html", null, true);
  4070.                         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), Twig\Extension\CoreExtension::striptags(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "description", [], "any", false, false, false, 3064))) > 100)) {
  4071.                             yield "...";
  4072.                         }
  4073.                         yield "</p>
  4074.                                     ";
  4075.                     }
  4076.                     // line 3066
  4077.                     yield "                                </div>
  4078.                             </div>
  4079.                         </div>
  4080.                     </div>
  4081.                     <div class=\"category-content p-3\">
  4082.                         <h5 class=\"mb-2\">";
  4083.                     // line 3071
  4084.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "name", [], "any", false, false, false, 3071), "html", null, true);
  4085.                     yield "</h5>
  4086.                         ";
  4087.                     // line 3072
  4088.                     if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "description", [], "any", false, false, false, 3072)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  4089.                         // line 3073
  4090.                         yield "                            <p class=\"text-muted mb-3 small\">";
  4091.                         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::slice($this->env->getCharset(), Twig\Extension\CoreExtension::striptags(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "description", [], "any", false, false, false, 3073)), 0, 80), "html", null, true);
  4092.                         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), Twig\Extension\CoreExtension::striptags(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "description", [], "any", false, false, false, 3073))) > 80)) {
  4093.                             yield "...";
  4094.                         }
  4095.                         yield "</p>
  4096.                         ";
  4097.                     }
  4098.                     // line 3075
  4099.                     yield "                        <span class=\"btn btn-primary-custom btn-sm w-100\">
  4100.                             Voir les boutiques <i class=\"lnr lnr-arrow-right ms-2\"></i>
  4101.                         </span>
  4102.                     </div>
  4103.                 </div>
  4104.             </a>
  4105.         </div>
  4106.     `;
  4107. container.insertAdjacentHTML('beforeend', shopCategoryHtml ";
  4108.                     // line 3083
  4109.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 3083), "html", null, true);
  4110.                     yield ");";
  4111.                 }
  4112.                 ++$context['loop']['index0'];
  4113.                 ++$context['loop']['index'];
  4114.                 $context['loop']['first'] = false;
  4115.                 if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  4116.                     --$context['loop']['revindex0'];
  4117.                     --$context['loop']['revindex'];
  4118.                     $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  4119.                 }
  4120.             }
  4121.             $_parent = $context['_parent'];
  4122.             unset($context['_seq'], $context['_key'], $context['shopCategory'], $context['_parent'], $context['loop']);
  4123.             $context = array_intersect_key($context, $_parent) + $_parent;
  4124.         }
  4125.         yield "if (btn) 
  4126. btn.style.display = 'none';
  4130. }
  4132.     // Initialiser les carousels
  4133.     <script src=\"";
  4134.         // line 3091
  4135.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/js/product-unified.js"), "html", null, true);
  4136.         yield "\"></script>
  4137.     <script>
  4138.         document.addEventListener('DOMContentLoaded', function() {
  4139.             // Init featured products images
  4140.             ";
  4141.         // line 3095
  4142.         if (array_key_exists("featuredProducts", $context)) {
  4143.             // line 3096
  4144.             yield "                ";
  4145.             $context['_parent'] = $context;
  4146.             $context['_seq'] = CoreExtension::ensureTraversable(($context["featuredProducts"] ?? null));
  4147.             foreach ($context['_seq'] as $context["_key"] => $context["product"]) {
  4148.                 // line 3097
  4149.                 yield "                    ";
  4150.                 if ((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", true, true, false, 3097) && (Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 3097)) > 0))) {
  4151.                     // line 3098
  4152.                     yield "                        if (typeof initProductImages === 'function') {
  4153.                             initProductImages(";
  4154.                     // line 3099
  4155.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 3099), "html", null, true);
  4156.                     yield ", ";
  4157.                     yield json_encode(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 3099));
  4158.                     yield ");
  4159.                         }
  4160.                     ";
  4161.                 }
  4162.                 // line 3102
  4163.                 yield "                ";
  4164.             }
  4165.             $_parent = $context['_parent'];
  4166.             unset($context['_seq'], $context['_key'], $context['product'], $context['_parent']);
  4167.             $context = array_intersect_key($context, $_parent) + $_parent;
  4168.             // line 3103
  4169.             yield "            ";
  4170.         }
  4171.         // line 3104
  4172.         yield "
  4173.             // Init latest products images
  4174.             ";
  4175.         // line 3106
  4176.         if (array_key_exists("latestProducts", $context)) {
  4177.             // line 3107
  4178.             yield "                ";
  4179.             $context['_parent'] = $context;
  4180.             $context['_seq'] = CoreExtension::ensureTraversable(($context["latestProducts"] ?? null));
  4181.             foreach ($context['_seq'] as $context["_key"] => $context["product"]) {
  4182.                 // line 3108
  4183.                 yield "                    ";
  4184.                 if ((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", true, true, false, 3108) && (Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 3108)) > 0))) {
  4185.                     // line 3109
  4186.                     yield "                        if (typeof initProductImages === 'function') {
  4187.                             initProductImages(";
  4188.                     // line 3110
  4189.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 3110), "html", null, true);
  4190.                     yield ", ";
  4191.                     yield json_encode(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 3110));
  4192.                     yield ");
  4193.                         }
  4194.                     ";
  4195.                 }
  4196.                 // line 3113
  4197.                 yield "                ";
  4198.             }
  4199.             $_parent = $context['_parent'];
  4200.             unset($context['_seq'], $context['_key'], $context['product'], $context['_parent']);
  4201.             $context = array_intersect_key($context, $_parent) + $_parent;
  4202.             // line 3114
  4203.             yield "            ";
  4204.         }
  4205.         // line 3115
  4206.         yield "        });
  4207.     </script>
  4208.     <script>
  4209.     \$(document).ready(function () { // Carousel bannière principale
  4210. if (\$('.active-banner-slider').length) {
  4211. \$('.active-banner-slider').owlCarousel({
  4212. items: 1,
  4213. loop: true,
  4214. autoplay: true,
  4215. autoplayTimeout: 6000,
  4216. autoplayHoverPause: true,
  4217. nav: true,
  4218. dots: true,
  4219. navText: [
  4220. '<i class=\"lnr lnr-chevron-left\"></i>', '<i class=\"lnr lnr-chevron-right\"></i>'
  4221. ],
  4222. smartSpeed: 1000,
  4223. animateOut: 'fadeOut',
  4224. animateIn: 'fadeIn',
  4225. responsive: {
  4226. 0: {
  4227. items: 1,
  4228. nav: true,
  4229. dots: true
  4230. },
  4231. 768: {
  4232. items: 1,
  4233. nav: true,
  4234. dots: true
  4235. },
  4236. 992: {
  4237. items: 1,
  4238. nav: true,
  4239. dots: true
  4240. }
  4241. }
  4242. });
  4243. }
  4245. // Animation d'apparition pour les cartes produits
  4246. const observerOptions = {
  4247. threshold: 0.1,
  4248. rootMargin: '0px 0px -50px 0px'
  4249. };
  4251. const productObserver = new IntersectionObserver(function (entries) {
  4252. entries.forEach(entry => {
  4253. if (entry.isIntersecting) {
  4254. entry.target.style.opacity = '1';
  4255. entry.target.style.transform = 'translateY(0)';
  4256. }
  4257. });
  4258. }, observerOptions);
  4260. document.querySelectorAll('.product-card-modern').forEach((card, index) => {
  4261. card.style.opacity = '0';
  4262. card.style.transform = 'translateY(20px)';
  4263. card.style.transition = `opacity 0.6s ease \${
  4264. index * 0.1
  4265. }s, transform 0.6s ease \${
  4266. index * 0.1
  4267. }s`;
  4268. productObserver.observe(card);
  4269. });
  4270. });
  4271. \t</script>
  4273. \t<!-- Modal \"Prêt à commencer ?\" -->
  4274. \t<div class=\"modal fade\" id=\"readyModal\" tabindex=\"-1\">
  4275. \t\t<div class=\"modal-dialog modal-dialog-centered\">
  4276. \t\t\t<div class=\"modal-content\">
  4277. \t\t\t\t<div class=\"modal-header\">
  4278. \t\t\t\t\t<h5 class=\"modal-title\">
  4279. \t\t\t\t\t\t<i class=\"lnr lnr-rocket me-2\"></i>Prêt à commencer ?
  4280. \t\t\t\t\t</h5>
  4281. \t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button>
  4282. \t\t\t\t</div>
  4283. \t\t\t\t<div class=\"modal-body\">
  4284. \t\t\t\t\t";
  4285.         // line 3193
  4286.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 3193)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  4287.             // line 3194
  4288.             yield "\t\t\t\t\t\t";
  4289.             if ((CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 3194), "kycStatus", [], "any", false, false, false, 3194) == "verified")) {
  4290.                 // line 3195
  4291.                 yield "\t\t\t\t\t\t\t<div class=\"text-center\">
  4292. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\" style=\"font-size: 4rem; color: #28a745;\"></i>
  4293. \t\t\t\t\t\t\t\t<h4 class=\"mt-3\">Votre compte est vérifié !</h4>
  4294. \t\t\t\t\t\t\t\t<p class=\"text-muted\">Vous pouvez commencer à utiliser MaketOu en toute sérénité.</p>
  4295. \t\t\t\t\t\t\t\t<div class=\"mt-4\">
  4296. \t\t\t\t\t\t\t\t\t<a href=\"";
  4297.                 // line 3200
  4298.                 yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("seller_index");
  4299.                 yield "\" class=\"btn btn-primary me-2\">
  4300. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store me-1\"></i>Ouvrir ma boutique
  4301. \t\t\t\t\t\t\t\t\t</a>
  4302. \t\t\t\t\t\t\t\t\t<a href=\"";
  4303.                 // line 3203
  4304.                 yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  4305.                 yield "\" class=\"btn btn-outline-primary\">
  4306. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-magnifier me-1\"></i>Voir les produits
  4307. \t\t\t\t\t\t\t\t\t</a>
  4308. \t\t\t\t\t\t\t\t</div>
  4309. \t\t\t\t\t\t\t</div>
  4310. \t\t\t\t\t\t";
  4311.             } else {
  4312.                 // line 3209
  4313.                 yield "\t\t\t\t\t\t\t<div class=\"text-center\">
  4314. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-shield\" style=\"font-size: 4rem; color: #ffa200;\"></i>
  4315. \t\t\t\t\t\t\t\t<h4 class=\"mt-3\">Vérification requise</h4>
  4316. \t\t\t\t\t\t\t\t<p class=\"text-muted\">Pour utiliser toutes les fonctionnalités de MaketOu, vous devez compléter votre vérification KYC.</p>
  4317. \t\t\t\t\t\t\t\t<div class=\"mt-4\">
  4318. \t\t\t\t\t\t\t\t\t<a href=\"";
  4319.                 // line 3214
  4320.                 yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_account_kyc");
  4321.                 yield "\" class=\"btn btn-primary btn-lg\">
  4322. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle me-1\"></i> <span class=\"d-none d-md-inline\">Commencer la vérification</span>
  4323. \t\t\t\t\t\t\t\t\t</a>
  4324. \t\t\t\t\t\t\t\t</div>
  4325. \t\t\t\t\t\t\t</div>
  4326. \t\t\t\t\t\t";
  4327.             }
  4328.             // line 3220
  4329.             yield "\t\t\t\t\t";
  4330.         } else {
  4331.             // line 3221
  4332.             yield "\t\t\t\t\t\t<div class=\"text-center\">
  4333. \t\t\t\t\t\t\t<i class=\"lnr lnr-user\" style=\"font-size: 4rem; color: #007bff;\"></i>
  4334. \t\t\t\t\t\t\t<h4 class=\"mt-3\">Connectez-vous pour commencer</h4>
  4335. \t\t\t\t\t\t\t<p class=\"text-muted\">Créez un compte ou connectez-vous pour accéder à toutes les fonctionnalités de MaketOu.</p>
  4336. \t\t\t\t\t\t\t<div class=\"mt-4\">
  4337. \t\t\t\t\t\t\t\t<a href=\"";
  4338.             // line 3226
  4339.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_app_login");
  4340.             yield "\" class=\"btn btn-primary btn-lg me-2\">
  4341. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-enter me-1\"></i> Se connecter
  4342. \t\t\t\t\t\t\t\t</a>
  4343. \t\t\t\t\t\t\t\t<a href=\"";
  4344.             // line 3229
  4345.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_app_register");
  4346.             yield "\" class=\"btn btn-outline-primary btn-lg\">
  4347. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-user-plus me-1\"></i> S'inscrire
  4348. \t\t\t\t\t\t\t\t</a>
  4349. \t\t\t\t\t\t\t</div>
  4350. \t\t\t\t\t\t</div>
  4351. \t\t\t\t\t";
  4352.         }
  4353.         // line 3235
  4354.         yield "\t\t\t\t</div>
  4355. \t\t\t</div>
  4356. \t\t</div>
  4357. \t</div>
  4358. ";
  4359.         
  4360.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  4362.         
  4363.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  4365.         yield from [];
  4366.     }
  4368.     /**
  4369.      * @codeCoverageIgnore
  4370.      */
  4371.     public function getTemplateName(): string
  4372.     {
  4373.         return "home/index.html.twig";
  4374.     }
  4376.     /**
  4377.      * @codeCoverageIgnore
  4378.      */
  4379.     public function isTraitable(): bool
  4380.     {
  4381.         return false;
  4382.     }
  4384.     /**
  4385.      * @codeCoverageIgnore
  4386.      */
  4387.     public function getDebugInfo(): array
  4388.     {
  4389.         return array (  4354 => 3235,  4345 => 3229,  4339 => 3226,  4332 => 3221,  4329 => 3220,  4320 => 3214,  4313 => 3209,  4304 => 3203,  4298 => 3200,  4291 => 3195,  4288 => 3194,  4286 => 3193,  4206 => 3115,  4203 => 3114,  4197 => 3113,  4189 => 3110,  4186 => 3109,  4183 => 3108,  4178 => 3107,  4176 => 3106,  4172 => 3104,  4169 => 3103,  4163 => 3102,  4155 => 3099,  4152 => 3098,  4149 => 3097,  4144 => 3096,  4142 => 3095,  4135 => 3091,  4109 => 3083,  4099 => 3075,  4090 => 3073,  4088 => 3072,  4084 => 3071,  4077 => 3066,  4068 => 3064,  4066 => 3063,  4062 => 3062,  4051 => 3058,  4043 => 3055,  4019 => 3053,  3991 => 3043,  3980 => 3036,  3971 => 3034,  3969 => 3033,  3965 => 3032,  3956 => 3026,  3945 => 3022,  3919 => 3018,  3859 => 2961,  3668 => 2772,  3659 => 2771,  3619 => 2770,  3617 => 2769,  3613 => 2768,  3611 => 2767,  3607 => 2765,  3598 => 2764,  3558 => 2763,  3556 => 2762,  3552 => 2761,  3550 => 2760,  3522 => 2736,  3509 => 2735,  3490 => 2726,  3477 => 2716,  3347 => 2588,  3339 => 2582,  3324 => 2573,  3317 => 2569,  3311 => 2566,  3305 => 2563,  3301 => 2562,  3296 => 2559,  3288 => 2557,  3280 => 2555,  3278 => 2554,  3274 => 2553,  3269 => 2550,  3265 => 2549,  3254 => 2540,  3252 => 2539,  3249 => 2538,  3243 => 2534,  3229 => 2526,  3225 => 2525,  3221 => 2523,  3217 => 2521,  3209 => 2519,  3207 => 2518,  3198 => 2514,  3193 => 2511,  3189 => 2509,  3187 => 2508,  3182 => 2507,  3180 => 2506,  3176 => 2504,  3172 => 2503,  3163 => 2496,  3161 => 2495,  3158 => 2494,  3147 => 2486,  3122 => 2463,  3107 => 2454,  3092 => 2450,  3077 => 2446,  3070 => 2442,  3066 => 2440,  3059 => 2437,  3057 => 2436,  3052 => 2434,  3046 => 2430,  3042 => 2428,  3036 => 2425,  3031 => 2424,  3029 => 2423,  3018 => 2415,  3014 => 2414,  3009 => 2411,  3005 => 2409,  2982 => 2407,  2965 => 2406,  2961 => 2405,  2951 => 2400,  2942 => 2397,  2940 => 2396,  2935 => 2393,  2925 => 2391,  2915 => 2389,  2913 => 2388,  2909 => 2387,  2903 => 2386,  2899 => 2384,  2895 => 2383,  2883 => 2373,  2881 => 2372,  2877 => 2370,  2866 => 2362,  2841 => 2339,  2826 => 2330,  2811 => 2326,  2796 => 2322,  2789 => 2318,  2785 => 2316,  2778 => 2313,  2776 => 2312,  2771 => 2310,  2765 => 2306,  2761 => 2304,  2755 => 2301,  2750 => 2300,  2748 => 2299,  2737 => 2291,  2733 => 2290,  2728 => 2287,  2724 => 2285,  2701 => 2283,  2684 => 2282,  2680 => 2281,  2670 => 2276,  2661 => 2273,  2659 => 2272,  2654 => 2269,  2644 => 2267,  2638 => 2264,  2634 => 2263,  2630 => 2262,  2626 => 2261,  2622 => 2259,  2620 => 2258,  2616 => 2257,  2610 => 2256,  2606 => 2254,  2602 => 2253,  2590 => 2243,  2588 => 2242,  2584 => 2240,  2579 => 2237,  2572 => 2233,  2567 => 2230,  2565 => 2229,  2562 => 2228,  2540 => 2219,  2536 => 2217,  2531 => 2215,  2526 => 2214,  2524 => 2213,  2520 => 2212,  2513 => 2207,  2509 => 2205,  2504 => 2203,  2499 => 2202,  2497 => 2201,  2493 => 2200,  2482 => 2196,  2474 => 2193,  2471 => 2192,  2454 => 2191,  2445 => 2184,  2443 => 2183,  2439 => 2181,  2433 => 2177,  2411 => 2170,  2407 => 2168,  2402 => 2166,  2397 => 2165,  2395 => 2164,  2391 => 2163,  2382 => 2157,  2371 => 2153,  2366 => 2150,  2349 => 2149,  2340 => 2142,  2338 => 2141,  2333 => 2138,  2315 => 2122,  2309 => 2118,  2288 => 2110,  2280 => 2108,  2272 => 2106,  2270 => 2105,  2262 => 2099,  2256 => 2096,  2250 => 2094,  2248 => 2093,  2239 => 2087,  2232 => 2083,  2225 => 2079,  2220 => 2077,  2208 => 2067,  2191 => 2066,  2187 => 2064,  2185 => 2063,  2181 => 2061,  2168 => 2060,  526 => 428,  103 => 7,  90 => 6,  66 => 3,  43 => 1,);
  4390.     }
  4392.     public function getSourceContext(): Source
  4393.     {
  4394.         return new Source("{% extends 'base_home.html.twig' %}
  4396. {% block title %}Accueil | MaketOu - Votre marketplace haïtienne
  4397. {% endblock %}
  4399. {% block stylesheets %}
  4400. \t<style>
  4401. \t\t/* Styles personnalisés pour la page d'accueil */
  4402. \t\t.hero-banner {
  4403. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  4404. \t\t\tcolor: white;
  4405. \t\t\tpadding: 100px 0;
  4406. \t\t\tposition: relative;
  4407. \t\t\toverflow: hidden;
  4408. \t\t}
  4410. \t\t.hero-banner::before {
  4411. \t\t\tcontent: '';
  4412. \t\t\tposition: absolute;
  4413. \t\t\ttop: 0;
  4414. \t\t\tleft: 0;
  4415. \t\t\tright: 0;
  4416. \t\t\tbottom: 0;
  4417. \t\t\tbackground: url('data:image/svg+xml, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"25\" cy=\"25\" r=\"1\" fill=\"rgba(255, 255, 255, 0.1)\"/><circle cx=\"75\" cy=\"75\" r=\"1\" fill=\"rgba(255, 255, 255, 0.1)\"/><circle cx=\"50\" cy=\"10\" r=\"0.5\" fill=\"rgba(255, 255, 255, 0.1)\"/><circle cx=\"10\" cy=\"90\" r=\"0.5\" fill=\"rgba(255, 255, 255, 0.1)\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23grain)\"/></svg>');
  4418. \t\t\topacity: 0.3;
  4419. \t\t}
  4421. \t\t.hero-content {
  4422. \t\t\tposition: relative;
  4423. \t\t\tz-index: 2;
  4424. \t\t}
  4426. \t\t.stats-card {
  4427. \t\t\tbackground: white;
  4428. \t\t\tborder-radius: 15px;
  4429. \t\t\tpadding: 30px;
  4430. \t\t\ttext-align: center;
  4431. \t\t\tbox-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  4432. \t\t\ttransition: transform 0.3s ease;
  4433. \t\t}
  4435. \t\t.stats-card:hover {
  4436. \t\t\ttransform: translateY(-5px);
  4437. \t\t}
  4439. \t\t.stats-number {
  4440. \t\t\tfont-size: 3rem;
  4441. \t\t\tfont-weight: bold;
  4442. \t\t\tcolor: #ffa200;
  4443. \t\t\tdisplay: block;
  4444. \t\t}
  4446. \t\t.stats-label {
  4447. \t\t\tcolor: #666;
  4448. \t\t\tfont-size: 1.1rem;
  4449. \t\t\tmargin-top: 10px;
  4450. \t\t}
  4452. \t\t.category-card {
  4453. \t\t\tbackground: white;
  4454. \t\t\tborder-radius: 15px;
  4455. \t\t\toverflow: hidden;
  4456. \t\t\tbox-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  4457. \t\t\ttransition: all 0.3s ease;
  4458. \t\t\theight: 100%;
  4459. \t\t}
  4461. \t\t.category-card:hover {
  4462. \t\t\ttransform: translateY(-5px);
  4463. \t\t\tbox-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  4464. \t\t}
  4466. \t\t.category-image {
  4467. \t\t\theight: 200px;
  4468. \t\t\tbackground-size: cover;
  4469. \t\t\tbackground-position: center;
  4470. \t\t\tposition: relative;
  4471. \t\t}
  4473. \t\t.category-overlay {
  4474. \t\t\tposition: absolute;
  4475. \t\t\ttop: 0;
  4476. \t\t\tleft: 0;
  4477. \t\t\tright: 0;
  4478. \t\t\tbottom: 0;
  4479. \t\t\tbackground: linear-gradient(45deg, rgba(255,162,0,0.8), rgba(232,145,10,0.8));
  4480. \t\t\tdisplay: flex;
  4481. \t\t\talign-items: center;
  4482. \t\t\tjustify-content: center;
  4483. \t\t\topacity: 0;
  4484. \t\t\ttransition: opacity 0.3s ease;
  4485. \t\t}
  4487. \t\t.category-card:hover .category-overlay {
  4488. \t\t\topacity: 1;
  4489. \t\t}
  4491. \t\t.product-card {
  4492. \t\t\tbackground: white;
  4493. \t\t\tborder-radius: 15px;
  4494. \t\t\toverflow: hidden;
  4495. \t\t\tbox-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  4496. \t\t\ttransition: all 0.3s ease;
  4497. \t\t\theight: 100%;
  4498. \t\t}
  4500. \t\t.product-card:hover {
  4501. \t\t\ttransform: translateY(-5px);
  4502. \t\t\tbox-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  4503. \t\t}
  4505. \t\t.product-image {
  4506. \t\t\theight: 250px;
  4507. \t\t\tbackground-size: cover;
  4508. \t\t\tbackground-position: center;
  4509. \t\t\tposition: relative;
  4510. \t\t}
  4512. \t\t.product-badge {
  4513. \t\t\tposition: absolute;
  4514. \t\t\ttop: 15px;
  4515. \t\t\tright: 15px;
  4516. \t\t\tbackground: #ffa200;
  4517. \t\t\tcolor: white;
  4518. \t\t\tpadding: 5px 10px;
  4519. \t\t\tborder-radius: 20px;
  4520. \t\t\tfont-size: 0.8rem;
  4521. \t\t\tfont-weight: bold;
  4522. \t\t}
  4524. \t\t.product-info {
  4525. \t\t\tpadding: 20px;
  4526. \t\t}
  4528. \t\t.product-title {
  4529. \t\t\tfont-size: 1.2rem;
  4530. \t\t\tfont-weight: 600;
  4531. \t\t\tmargin-bottom: 10px;
  4532. \t\t\tcolor: #333;
  4533. \t\t}
  4535. \t\t.product-price {
  4536. \t\t\tfont-size: 1.5rem;
  4537. \t\t\tfont-weight: bold;
  4538. \t\t\tcolor: #ffa200;
  4539. \t\t\tmargin-bottom: 10px;
  4540. \t\t}
  4542. \t\t.product-shop {
  4543. \t\t\tfont-size: 0.9rem;
  4544. \t\t\tcolor: #666;
  4545. \t\t\tmargin-bottom: 15px;
  4546. \t\t}
  4548. \t\t.btn-primary-custom {
  4549. \t\t\tbackground: #ffa200;
  4550. \t\t\tborder: none;
  4551. \t\t\tcolor: white;
  4552. \t\t\tpadding: 12px 30px;
  4553. \t\t\tborder-radius: 25px;
  4554. \t\t\tfont-weight: 500;
  4555. \t\t\ttransition: all 0.3s ease;
  4556. \t\t}
  4558. \t\t.btn-primary-custom:hover {
  4559. \t\t\tbackground: #e8910a;
  4560. \t\t\ttransform: translateY(-2px);
  4561. \t\t\tbox-shadow: 0 5px 15px rgba(255, 162, 0, 0.3);
  4562. \t\t}
  4564. \t\t.section-title {
  4565. \t\t\ttext-align: center;
  4566. \t\t\tmargin-bottom: 50px;
  4567. \t\t}
  4569. \t\t.section-title h2 {
  4570. \t\t\tfont-size: 2.5rem;
  4571. \t\t\tfont-weight: bold;
  4572. \t\t\tcolor: #333;
  4573. \t\t\tmargin-bottom: 15px;
  4574. \t\t}
  4576. \t\t.section-title p {
  4577. \t\t\tfont-size: 1.2rem;
  4578. \t\t\tcolor: #666;
  4579. \t\t\tmax-width: 600px;
  4580. \t\t\tmargin: 0 auto;
  4581. \t\t}
  4583. \t\t.feature-card {
  4584. \t\t\ttext-align: center;
  4585. \t\t\tpadding: 30px 20px;
  4586. \t\t\tbackground: white;
  4587. \t\t\tborder-radius: 15px;
  4588. \t\t\tbox-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  4589. \t\t\ttransition: all 0.3s ease;
  4590. \t\t\theight: 100%;
  4591. \t\t}
  4593. \t\t.feature-card:hover {
  4594. \t\t\ttransform: translateY(-5px);
  4595. \t\t\tbox-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  4596. \t\t}
  4598. \t\t.feature-icon {
  4599. \t\t\twidth: 80px;
  4600. \t\t\theight: 80px;
  4601. \t\t\tbackground: linear-gradient(135deg, #ffa200, #e8910a);
  4602. \t\t\tborder-radius: 50%;
  4603. \t\t\tdisplay: flex;
  4604. \t\t\talign-items: center;
  4605. \t\t\tjustify-content: center;
  4606. \t\t\tmargin: 0 auto 20px;
  4607. \t\t\tfont-size: 2rem;
  4608. \t\t\tcolor: white;
  4609. \t\t}
  4611. \t\t.newsletter-section {
  4612. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  4613. \t\t\tcolor: white;
  4614. \t\t\tpadding: 80px 0;
  4615. \t\t}
  4617. \t\t.newsletter-form {
  4618. \t\t\tmax-width: 500px;
  4619. \t\t\tmargin: 0 auto;
  4620. \t\t}
  4622. \t\t.newsletter-form .form-control {
  4623. \t\t\tborder: none;
  4624. \t\t\tborder-radius: 25px;
  4625. \t\t\tpadding: 15px 25px;
  4626. \t\t\tfont-size: 1.1rem;
  4627. \t\t}
  4629. \t\t.newsletter-form .btn {
  4630. \t\t\tborder-radius: 25px;
  4631. \t\t\tpadding: 15px 30px;
  4632. \t\t\tfont-weight: 500;
  4633. \t\t}
  4635. \t\t/* Styles pour les catégories personnalisées */
  4636. \t\t.category-card-custom {
  4637. \t\t\tbackground: white;
  4638. \t\t\tborder-radius: 15px;
  4639. \t\t\toverflow: hidden;
  4640. \t\t\tbox-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  4641. \t\t\ttransition: all 0.3s ease;
  4642. \t\t\theight: 100%;
  4643. \t\t\tdisplay: flex;
  4644. \t\t\tflex-direction: column;
  4645. \t\t}
  4647. \t\t.category-card-custom:hover {
  4648. \t\t\ttransform: translateY(-5px);
  4649. \t\t\tbox-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  4650. \t\t}
  4652. \t\t.category-image-wrapper {
  4653. \t\t\tposition: relative;
  4654. \t\t\toverflow: hidden;
  4655. \t\t}
  4657. \t\t.category-image {
  4658. \t\t\theight: 200px;
  4659. \t\t\tbackground-size: cover;
  4660. \t\t\tbackground-position: center;
  4661. \t\t\tposition: relative;
  4662. \t\t\ttransition: transform 0.5s ease;
  4663. \t\t}
  4665. \t\t.category-card-custom:hover .category-image {
  4666. \t\t\ttransform: scale(1.1);
  4667. \t\t}
  4669. \t\t.category-overlay-custom {
  4670. \t\t\tposition: absolute;
  4671. \t\t\ttop: 0;
  4672. \t\t\tleft: 0;
  4673. \t\t\tright: 0;
  4674. \t\t\tbottom: 0;
  4675. \t\t\tbackground: rgba(0, 0, 0, 0.5);
  4676. \t\t\tdisplay: flex;
  4677. \t\t\talign-items: center;
  4678. \t\t\tjustify-content: center;
  4679. \t\t\topacity: 0;
  4680. \t\t\ttransition: opacity 0.3s ease;
  4681. \t\t}
  4683. \t\t.category-card-custom:hover .category-overlay-custom {
  4684. \t\t\topacity: 1;
  4685. \t\t}
  4687. \t\t.category-icon-wrapper {
  4688. \t\t\ttext-align: center;
  4689. \t\t\tcolor: white;
  4690. \t\t\ttransform: translateY(20px);
  4691. \t\t\ttransition: transform 0.3s ease;
  4692. \t\t}
  4694. \t\t.category-card-custom:hover .category-icon-wrapper {
  4695. \t\t\ttransform: translateY(0);
  4696. \t\t}
  4698. \t\t.category-content {
  4699. \t\t\tflex-grow: 1;
  4700. \t\t\tdisplay: flex;
  4701. \t\t\tflex-direction: column;
  4702. \t\t}
  4704. \t\t.category-content .btn {
  4705. \t\t\tmargin-top: auto;
  4706. \t\t}
  4708. \t\t/* Responsive Styles */
  4709. \t\t@media(max-width: 991.98px) {
  4710. \t\t\t.hero-banner {
  4711. \t\t\t\tpadding: 60px 0;
  4712. \t\t\t}
  4714. \t\t\t.stats-number {
  4715. \t\t\t\tfont-size: 2.5rem;
  4716. \t\t\t}
  4718. \t\t\t.section-title h2 {
  4719. \t\t\t\tfont-size: 2rem;
  4720. \t\t\t}
  4721. \t\t\t
  4722. \t\t\t.stats-card {
  4723. \t\t\t\tmargin-bottom: 1.5rem;
  4724. \t\t\t}
  4725. \t\t}
  4727. \t\t@media(max-width: 767.98px) {
  4728. \t\t\t.hero-banner {
  4729. \t\t\t\tpadding: 40px 0;
  4730. \t\t\t}
  4732. \t\t\t.hero-content h1 {
  4733. \t\t\t\tfont-size: 1.75rem;
  4734. \t\t\t}
  4736. \t\t\t.stats-number {
  4737. \t\t\t\tfont-size: 2rem;
  4738. \t\t\t}
  4740. \t\t\t.stats-label {
  4741. \t\t\t\tfont-size: 0.9rem;
  4742. \t\t\t}
  4744. \t\t\t.section-title h2 {
  4745. \t\t\t\tfont-size: 1.75rem;
  4746. \t\t\t}
  4748. \t\t\t.section-title p {
  4749. \t\t\t\tfont-size: 1rem;
  4750. \t\t\t}
  4751. \t\t\t
  4752. \t\t\t.category-card,
  4753. \t\t\t.product-card {
  4754. \t\t\t\tmargin-bottom: 1.5rem;
  4755. \t\t\t}
  4756. \t\t\t
  4757. \t\t\t.category-image {
  4758. \t\t\t\theight: 150px;
  4759. \t\t\t}
  4760. \t\t\t
  4761. \t\t\t.product-image {
  4762. \t\t\t\theight: 200px;
  4763. \t\t\t}
  4764. \t\t\t
  4765. \t\t\t.feature-card {
  4766. \t\t\t\tmargin-bottom: 1.5rem;
  4767. \t\t\t}
  4768. \t\t\t
  4769. \t\t\t.newsletter-section {
  4770. \t\t\t\tpadding: 40px 0;
  4771. \t\t\t}
  4772. \t\t}
  4774. \t\t@media(max-width: 575.98px) {
  4775. \t\t\t.hero-banner {
  4776. \t\t\t\tpadding: 30px 0;
  4777. \t\t\t}
  4779. \t\t\t.hero-content h1 {
  4780. \t\t\t\tfont-size: 1.5rem;
  4781. \t\t\t}
  4783. \t\t\t.stats-card {
  4784. \t\t\t\tpadding: 1.5rem;
  4785. \t\t\t}
  4787. \t\t\t.stats-number {
  4788. \t\t\t\tfont-size: 1.75rem;
  4789. \t\t\t}
  4791. \t\t\t.section-title h2 {
  4792. \t\t\t\tfont-size: 1.5rem;
  4793. \t\t\t}
  4794. \t\t\t
  4795. \t\t\t.category-image {
  4796. \t\t\t\theight: 120px;
  4797. \t\t\t}
  4798. \t\t\t
  4799. \t\t\t.product-image {
  4800. \t\t\t\theight: 180px;
  4801. \t\t\t}
  4802. \t\t\t
  4803. \t\t\t.product-info {
  4804. \t\t\t\tpadding: 1rem;
  4805. \t\t\t}
  4806. \t\t\t
  4807. \t\t\t.product-title {
  4808. \t\t\t\tfont-size: 1rem;
  4809. \t\t\t}
  4810. \t\t\t
  4811. \t\t\t.product-price {
  4812. \t\t\t\tfont-size: 1.25rem;
  4813. \t\t\t}
  4814. \t\t}
  4816. \t\t/* Styles modernes pour le carousel de bannière */
  4817. \t\t.banner-area-modern {
  4818. \t\t\tposition: relative;
  4819. \t\t\twidth: 100%;
  4820. \t\t\tmin-height: 500px;
  4821. \t\t\tbackground: url('{{ asset('ui/img/banner/banner-bg.jpg') }}') center center no-repeat;
  4822. \t\t\tbackground-size: cover;
  4823. \t\t\toverflow: hidden;
  4824. \t\t\tpadding: 60px 0;
  4825. \t\t}
  4827. \t\t.banner-area-modern::before {
  4828. \t\t\tcontent: '';
  4829. \t\t\tposition: absolute;
  4830. \t\t\ttop: 0;
  4831. \t\t\tleft: 0;
  4832. \t\t\twidth: 100%;
  4833. \t\t\theight: 100%;
  4834. \t\t\tbackground: rgba(0, 0, 0, 0.1);
  4835. \t\t\tz-index: 1;
  4836. \t\t}
  4838. \t\t.banner-carousel-wrapper {
  4839. \t\t\tposition: relative;
  4840. \t\t\twidth: 100%;
  4841. \t\t\theight: 100%;
  4842. \t\t\tz-index: 2;
  4843. \t\t}
  4845. \t\t.banner-slide-item {
  4846. \t\t\tmin-height: 500px;
  4847. \t\t\tdisplay: flex;
  4848. \t\t\talign-items: center;
  4849. \t\t\tpadding: 40px 0;
  4850. \t\t}
  4852. \t\t.banner-content-modern {
  4853. \t\t\tposition: relative;
  4854. \t\t\tz-index: 2;
  4855. \t\t\tpadding: 30px;
  4856. \t\t\tbackground: rgba(255, 255, 255, 0.98);
  4857. \t\t\tborder-radius: 20px;
  4858. \t\t\tbox-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  4859. \t\t\tbackdrop-filter: blur(10px);
  4860. \t\t\tanimation: fadeInUp 0.8s ease;
  4861. \t\t}
  4863. \t\t@keyframes fadeInUp {
  4864. \t\t\tfrom {
  4865. \t\t\t\topacity: 0;
  4866. \t\t\t\ttransform: translateY(30px);
  4867. \t\t\t}
  4868. \t\t\tto {
  4869. \t\t\t\topacity: 1;
  4870. \t\t\t\ttransform: translateY(0);
  4871. \t\t\t}
  4872. \t\t}
  4874. \t\t.banner-badge {
  4875. \t\t\tdisplay: inline-block;
  4876. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  4877. \t\t\tcolor: white;
  4878. \t\t\tpadding: 8px 20px;
  4879. \t\t\tborder-radius: 50px;
  4880. \t\t\tfont-size: 0.85rem;
  4881. \t\t\tfont-weight: 600;
  4882. \t\t\tmargin-bottom: 20px;
  4883. \t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.4);
  4884. \t\t}
  4886. \t\t.banner-badge i {
  4887. \t\t\tmargin-right: 5px;
  4888. \t\t}
  4890. \t\t.banner-title-modern {
  4891. \t\t\tfont-size: 2.0rem;
  4892. \t\t\tfont-weight: 600;
  4893. \t\t\tcolor: #2c3e50;
  4894. \t\t\tmargin-bottom: 20px;
  4895. \t\t\tline-height: 1.2;
  4896. \t\t\tbackground: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  4897. \t\t\t-webkit-background-clip: text;
  4898. \t\t\t-webkit-text-fill-color: transparent;
  4899. \t\t\tbackground-clip: text;
  4900. \t\t}
  4902. \t\t.banner-description-modern {
  4903. \t\t\tfont-size: 1.1rem;
  4904. \t\t\tcolor: #555;
  4905. \t\t\tline-height: 1.8;
  4906. \t\t\tmargin-bottom: 25px;
  4907. \t\t}
  4909. \t\t.banner-price-modern {
  4910. \t\t\tdisplay: flex;
  4911. \t\t\talign-items: center;
  4912. \t\t\tgap: 15px;
  4913. \t\t\tmargin-bottom: 30px;
  4914. \t\t\tpadding: 15px 20px;
  4915. \t\t\tbackground: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  4916. \t\t\tborder-radius: 12px;
  4917. \t\t\tborder-left: 4px solid #ffa200;
  4918. \t\t}
  4920. \t\t.banner-price-modern .price-label {
  4921. \t\t\tfont-size: 0.9rem;
  4922. \t\t\tcolor: #666;
  4923. \t\t\tfont-weight: 600;
  4924. \t\t\ttext-transform: uppercase;
  4925. \t\t\tletter-spacing: 1px;
  4926. \t\t}
  4928. \t\t.banner-price-modern .price-value {
  4929. \t\t\tfont-size: 1.2rem;
  4930. \t\t\tfont-weight: 600;
  4931. \t\t\tcolor: #ffa200;
  4932. \t\t}
  4934. \t\t.banner-actions-modern {
  4935. \t\t\tdisplay: flex;
  4936. \t\t\tgap: 15px;
  4937. \t\t\tflex-wrap: wrap;
  4938. \t\t}
  4940. \t\t.btn-banner-primary {
  4941. \t\t\tdisplay: inline-flex;
  4942. \t\t\talign-items: center;
  4943. \t\t\tgap: 10px;
  4944. \t\t\tpadding: 15px 35px;
  4945. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  4946. \t\t\tcolor: white;
  4947. \t\t\ttext-decoration: none;
  4948. \t\t\tborder-radius: 50px;
  4949. \t\t\tfont-weight: 600;
  4950. \t\t\tfont-size: 1rem;
  4951. \t\t\ttransition: all 0.3s ease;
  4952. \t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.4);
  4953. \t\t}
  4955. \t\t.btn-banner-primary:hover {
  4956. \t\t\ttransform: translateY(-3px);
  4957. \t\t\tbox-shadow: 0 8px 25px rgba(255, 162, 0, 0.6);
  4958. \t\t\tcolor: white;
  4959. \t\t}
  4961. \t\t.btn-banner-primary .btn-icon {
  4962. \t\t\ttransition: transform 0.3s ease;
  4963. \t\t}
  4965. \t\t.btn-banner-primary:hover .btn-icon {
  4966. \t\t\ttransform: translateX(5px);
  4967. \t\t}
  4969. \t\t.btn-banner-secondary {
  4970. \t\t\tdisplay: inline-flex;
  4971. \t\t\talign-items: center;
  4972. \t\t\tgap: 8px;
  4973. \t\t\tpadding: 15px 25px;
  4974. \t\t\tbackground: white;
  4975. \t\t\tcolor: #667eea;
  4976. \t\t\ttext-decoration: none;
  4977. \t\t\tborder-radius: 50px;
  4978. \t\t\tfont-weight: 600;
  4979. \t\t\tfont-size: 0.95rem;
  4980. \t\t\tborder: 2px solid #667eea;
  4981. \t\t\ttransition: all 0.3s ease;
  4982. \t\t}
  4984. \t\t.btn-banner-secondary:hover {
  4985. \t\t\tbackground: #667eea;
  4986. \t\t\tcolor: white;
  4987. \t\t\ttransform: translateY(-3px);
  4988. \t\t\tbox-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  4989. \t\t}
  4991. \t\t.banner-image-modern {
  4992. \t\t\tposition: relative;
  4993. \t\t\theight: 450px;
  4994. \t\t\tdisplay: flex;
  4995. \t\t\talign-items: center;
  4996. \t\t\tjustify-content: center;
  4997. \t\t}
  4999. \t\t.banner-image-wrapper {
  5000. \t\t\tposition: relative;
  5001. \t\t\twidth: 100%;
  5002. \t\t\theight: 100%;
  5003. \t\t\tborder-radius: 20px;
  5004. \t\t\toverflow: hidden;
  5005. \t\t\tbox-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  5006. \t\t\tbackground: white;
  5007. \t\t\tpadding: 20px;
  5008. \t\t}
  5010. \t\t.banner-img {
  5011. \t\t\twidth: 100%;
  5012. \t\t\theight: 100%;
  5013. \t\t\tobject-fit: contain;
  5014. \t\t\tborder-radius: 15px;
  5015. \t\t\ttransition: transform 0.5s ease;
  5016. \t\t}
  5018. \t\t.banner-slide-item:hover .banner-img {
  5019. \t\t\ttransform: scale(1.05);
  5020. \t\t}
  5022. \t\t.banner-image-overlay {
  5023. \t\t\tposition: absolute;
  5024. \t\t\ttop: 0;
  5025. \t\t\tleft: 0;
  5026. \t\t\twidth: 100%;
  5027. \t\t\theight: 100%;
  5028. \t\t\tbackground: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  5029. \t\t\tborder-radius: 15px;
  5030. \t\t\tpointer-events: none;
  5031. \t\t}
  5033. \t\t/* Styles pour Owl Carousel */
  5034. \t\t.banner-area-modern .owl-nav {
  5035. \t\t\tposition: absolute;
  5036. \t\t\ttop: 50%;
  5037. \t\t\ttransform: translateY(-50%);
  5038. \t\t\twidth: 100%;
  5039. \t\t\tdisplay: flex;
  5040. \t\t\tjustify-content: space-between;
  5041. \t\t\talign-items: center;
  5042. \t\t\tpadding: 0 20px;
  5043. \t\t\tpointer-events: none;
  5044. \t\t\tz-index: 10;
  5045. \t\t\tleft: 0;
  5046. \t\t\tright: 0;
  5047. \t\t\tbox-sizing: border-box;
  5048. \t\t}
  5050. \t\t.banner-area-modern .owl-nav button {
  5051. \t\t\twidth: 60px;
  5052. \t\t\theight: 60px;
  5053. \t\t\tmin-width: 60px;
  5054. \t\t\tmin-height: 60px;
  5055. \t\t\tbackground: #ffa200 !important;
  5056. \t\t\tborder-radius: 50% !important;
  5057. \t\t\tdisplay: flex !important;
  5058. \t\t\talign-items: center;
  5059. \t\t\tjustify-content: center;
  5060. \t\t\tcolor: white !important;
  5061. \t\t\tfont-size: 24px !important;
  5062. \t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.4);
  5063. \t\t\ttransition: all 0.3s ease;
  5064. \t\t\tpointer-events: all;
  5065. \t\t\tborder: none !important;
  5066. \t\t\tposition: relative;
  5067. \t\t\tflex-shrink: 0;
  5068. \t\t\tmargin: 0;
  5069. \t\t\tpadding: 0;
  5070. \t\t\tline-height: 1;
  5071. \t\t}
  5073. \t\t.banner-area-modern .owl-nav button.owl-prev {
  5074. \t\t\tmargin-right: auto;
  5075. \t\t}
  5077. \t\t.banner-area-modern .owl-nav button.owl-next {
  5078. \t\t\tmargin-left: auto;
  5079. \t\t}
  5081. \t\t.banner-area-modern .owl-nav button:hover {
  5082. \t\t\tbackground: #ff6b00 !important;
  5083. \t\t\tcolor: white !important;
  5084. \t\t\ttransform: scale(1.1);
  5085. \t\t\tbox-shadow: 0 6px 20px rgba(255, 162, 0, 0.6);
  5086. \t\t}
  5088. \t\t.banner-area-modern .owl-nav button.disabled {
  5089. \t\t\topacity: 0.5;
  5090. \t\t\tcursor: not-allowed;
  5091. \t\t}
  5093. \t\t.banner-area-modern .owl-nav button.disabled:hover {
  5094. \t\t\ttransform: scale(1);
  5095. \t\t}
  5097. \t\t.banner-area-modern .owl-dots {
  5098. \t\t\tposition: absolute;
  5099. \t\t\tbottom: 30px;
  5100. \t\t\tleft: 50%;
  5101. \t\t\ttransform: translateX(-50%);
  5102. \t\t\tdisplay: flex;
  5103. \t\t\tgap: 10px;
  5104. \t\t\tz-index: 10;
  5105. \t\t}
  5107. \t\t.banner-area-modern .owl-dots button {
  5108. \t\t\twidth: 12px;
  5109. \t\t\theight: 12px;
  5110. \t\t\tborder-radius: 50%;
  5111. \t\t\tbackground: rgba(255, 255, 255, 0.6) !important;
  5112. \t\t\tborder: 2px solid white !important;
  5113. \t\t\ttransition: all 0.3s ease;
  5114. \t\t\tmargin: 0 5px;
  5115. \t\t}
  5117. \t\t.banner-area-modern .owl-dots button.active {
  5118. \t\t\tbackground: #ffa200 !important;
  5119. \t\t\tborder-color: #ffa200 !important;
  5120. \t\t\twidth: 30px;
  5121. \t\t\tborder-radius: 6px;
  5122. \t\t}
  5124. \t\t/* Responsive */
  5125. \t\t@media(max-width: 992px) {
  5126. \t\t\t.banner-area-modern {
  5127. \t\t\t\tmin-height: 450px;
  5128. \t\t\t\tpadding: 40px 0;
  5129. \t\t\t\tbackground-size: cover;
  5130. \t\t\t\tbackground-position: center;
  5131. \t\t\t}
  5133. \t\t\t.banner-slide-item {
  5134. \t\t\t\tmin-height: 450px;
  5135. \t\t\t\tpadding: 30px 0;
  5136. \t\t\t}
  5138. \t\t\t.banner-title-modern {
  5139. \t\t\t\tfont-size: 1.5rem;
  5140. \t\t\t}
  5142. \t\t\t.banner-description-modern {
  5143. \t\t\t\tfont-size: 1rem;
  5144. \t\t\t}
  5146. \t\t\t.banner-image-modern {
  5147. \t\t\t\theight: 350px;
  5148. \t\t\t\tmargin-top: 30px;
  5149. \t\t\t}
  5151. \t\t\t.banner-content-modern {
  5152. \t\t\t\tpadding: 25px;
  5153. \t\t\t}
  5154. \t\t}
  5156. \t\t@media(max-width: 768px) {
  5157. \t\t\t.banner-area-modern {
  5158. \t\t\t\tmin-height: 400px;
  5159. \t\t\t\tpadding: 30px 0;
  5160. \t\t\t\tbackground-size: cover;
  5161. \t\t\t\tbackground-position: center;
  5162. \t\t\t}
  5164. \t\t\t.banner-slide-item {
  5165. \t\t\t\tmin-height: 400px;
  5166. \t\t\t\tpadding: 20px 0;
  5167. \t\t\t}
  5169. \t\t\t.banner-title-modern {
  5170. \t\t\t\tfont-size: 1.25rem;
  5171. \t\t\t}
  5173. \t\t\t.banner-description-modern {
  5174. \t\t\t\tfont-size: 0.95rem;
  5175. \t\t\t}
  5177. \t\t\t.banner-image-modern {
  5178. \t\t\t\theight: 280px;
  5179. \t\t\t\tmargin-top: 20px;
  5180. \t\t\t}
  5182. \t\t\t.banner-content-modern {
  5183. \t\t\t\tpadding: 20px;
  5184. \t\t\t}
  5186. \t\t\t.banner-price-modern .price-value {
  5187. \t\t\t\tfont-size: 1.25rem;
  5188. \t\t\t}
  5190. \t\t\t.banner-actions-modern {
  5191. \t\t\t\tflex-direction: column;
  5192. \t\t\t}
  5194. \t\t\t.btn-banner-primary,
  5195. \t\t\t.btn-banner-secondary {
  5196. \t\t\t\twidth: 100%;
  5197. \t\t\t\tjustify-content: center;
  5198. \t\t\t}
  5200. \t\t\t.banner-area-modern .owl-nav button {
  5201. \t\t\t\twidth: 50px;
  5202. \t\t\t\theight: 50px;
  5203. \t\t\t\tmin-width: 50px;
  5204. \t\t\t\tmin-height: 50px;
  5205. \t\t\t\tfont-size: 20px !important;
  5206. \t\t\t\tbackground: #ffa200 !important;
  5207. \t\t\t}
  5209. \t\t\t.banner-area-modern .owl-nav button:hover {
  5210. \t\t\t\tbackground: #ff6b00 !important;
  5211. \t\t\t}
  5212. \t\t}
  5214. \t\t@media(max-width: 576px) {
  5215. \t\t\t.banner-area-modern {
  5216. \t\t\t\tmin-height: 350px;
  5217. \t\t\t\tpadding: 0;
  5218. \t\t\t\tbackground-size: cover;
  5219. \t\t\t\tbackground-position: center;
  5220. \t\t\t}
  5222. \t\t\t.banner-slide-item {
  5223. \t\t\t\tmin-height: 350px;
  5224. \t\t\t}
  5226. \t\t\t.banner-title-modern {
  5227. \t\t\t\tfont-size: 1.25rem;
  5228. \t\t\t}
  5230. \t\t\t.banner-image-modern {
  5231. \t\t\t\theight: 220px;
  5232. \t\t\t}
  5234. \t\t\t.banner-content-modern {
  5235. \t\t\t\tpadding: 15px;
  5236. \t\t\t}
  5237. \t\t}
  5239. \t\t/* Styles pour les catégories de boutiques cliquables */
  5240. \t\t.shop-category-clickable {
  5241. \t\t\tcursor: pointer;
  5242. \t\t\ttransition: all 0.3s ease;
  5243. \t\t\theight: 100%;
  5244. \t\t}
  5245. \t\t.shop-category-clickable:hover {
  5246. \t\t\ttransform: translateY(-10px);
  5247. \t\t\tbox-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  5248. \t\t}
  5249. \t\t.shop-category-clickable:hover .category-image {
  5250. \t\t\ttransform: scale(1.1);
  5251. \t\t}
  5252. \t\t.shop-category-clickable:hover .btn-primary-custom {
  5253. \t\t\tbackground: #e8910a;
  5254. \t\t\ttransform: translateX(5px);
  5255. \t\t}
  5257. \t\t/* Styles pour les cartes de catégories personnalisées */
  5258. \t\t.category-card-custom {
  5259. \t\t\tborder-radius: 15px;
  5260. \t\t\toverflow: hidden;
  5261. \t\t\tbox-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  5262. \t\t\ttransition: transform 0.3s ease, box-shadow 0.3s ease;
  5263. \t\t\tbackground: white;
  5264. \t\t\theight: 100%;
  5265. \t\t}
  5266. \t\t.category-card-custom:hover {
  5267. \t\t\ttransform: translateY(-10px);
  5268. \t\t\tbox-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  5269. \t\t}
  5270. \t\t.category-image-wrapper {
  5271. \t\t\tposition: relative;
  5272. \t\t\theight: 200px;
  5273. \t\t\toverflow: hidden;
  5274. \t\t}
  5275. \t\t.category-image {
  5276. \t\t\twidth: 100%;
  5277. \t\t\theight: 100%;
  5278. \t\t\tbackground-size: cover;
  5279. \t\t\tbackground-position: center;
  5280. \t\t\ttransition: transform 0.3s ease;
  5281. \t\t}
  5282. \t\t.category-card-custom:hover .category-image {
  5283. \t\t\ttransform: scale(1.1);
  5284. \t\t}
  5285. \t\t.category-overlay-custom {
  5286. \t\t\tposition: absolute;
  5287. \t\t\ttop: 0;
  5288. \t\t\tleft: 0;
  5289. \t\t\twidth: 100%;
  5290. \t\t\theight: 100%;
  5291. \t\t\tbackground: rgba(0, 0, 0, 0.6);
  5292. \t\t\tdisplay: flex;
  5293. \t\t\talign-items: center;
  5294. \t\t\tjustify-content: center;
  5295. \t\t\topacity: 0;
  5296. \t\t\ttransition: opacity 0.3s ease;
  5297. \t\t\tcolor: white;
  5298. \t\t}
  5299. \t\t.category-card-custom:hover .category-overlay-custom {
  5300. \t\t\topacity: 1;
  5301. \t\t}
  5302. \t\t.category-icon-wrapper {
  5303. \t\t\ttext-align: center;
  5304. \t\t}
  5305. \t\t.category-icon-wrapper i {
  5306. \t\t\tcolor: #ffa200;
  5307. \t\t\tdisplay: block;
  5308. \t\t}
  5309. \t\t.category-icon-wrapper h4 {
  5310. \t\t\tcolor: white;
  5311. \t\t\tmargin-top: 10px;
  5312. \t\t}
  5314. \t\t/* Styles pour la galerie de produits en vedette */
  5315. \t\t.featured-products-carousel-section {
  5316. \t\t\tposition: relative;
  5317. \t\t\toverflow: hidden;
  5318. \t\t}
  5320. \t\t.featured-gallery-wrapper {
  5321. \t\t\tposition: relative;
  5322. \t\t\tmax-width: 1400px;
  5323. \t\t\tmargin: 0 auto;
  5324. \t\t\tpadding: 0 15px;
  5325. \t\t}
  5327. \t\t.featured-gallery-container {
  5328. \t\t\tposition: relative;
  5329. \t\t\toverflow: visible;
  5330. \t\t\tborder-radius: 12px;
  5331. \t\t}
  5333. \t\t.featured-gallery-grid {
  5334. \t\t\tdisplay: flex;
  5335. \t\t\tgap: 30px;
  5336. \t\t\tpadding: 15px 0;
  5337. \t\t\toverflow-x: auto;
  5338. \t\t\toverflow-y: hidden;
  5339. \t\t\tscroll-behavior: smooth;
  5340. \t\t\tscroll-behavior: smooth;
  5341. \t\t\tscrollbar-width: none; /* Firefox */
  5342. \t\t\t-ms-overflow-style: none; /* IE/Edge */
  5343. \t\t\t-webkit-overflow-scrolling: touch; /* iOS smooth scroll */
  5344. \t\t\twill-change: scroll-position;
  5345. \t\t}
  5347. \t\t.featured-gallery-grid::-webkit-scrollbar {
  5348. \t\t\tdisplay: none; /* Chrome/Safari */
  5349. \t\t}
  5351. \t\t/* Mode OwlCarousel */
  5352. \t\t.featured-gallery-grid.owl-carousel {
  5353. \t\t\tdisplay: block;
  5354. \t\t\toverflow: hidden;
  5355. \t\t\tpadding: 25px 0;
  5356. \t\t}
  5358. \t\t.featured-gallery-grid.owl-carousel .owl-stage-outer {
  5359. \t\t\toverflow: visible;
  5360. \t\t}
  5362. \t\t.featured-gallery-grid.owl-carousel .featured-gallery-item {
  5363. \t\t\topacity: 1;
  5364. \t\t\ttransform: none;
  5365. \t\t\twidth: auto;
  5366. \t\t\tmax-width: none;
  5367. \t\t\tmargin: 0 15px;
  5368. \t\t}
  5370. \t\t.featured-gallery-grid.owl-carousel .owl-stage {
  5371. \t\t\tdisplay: flex;
  5372. \t\t}
  5374. \t\t.featured-gallery-item {
  5375. \t\t\tflex: 0 0 auto; /* Largeur automatique basée sur le contenu */
  5376. \t\t\twidth: 100%;
  5377. \t\t\tmax-width: 100%;
  5378. \t\t\topacity: 0;
  5379. \t\t\ttransform: translateY(20px) scale(0.95);
  5380. \t\t\tanimation: galleryItemFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  5381. \t\t\tanimation-delay: calc(var(--item-index, 0) * 0.05s);
  5382. \t\t}
  5384. \t\t/* Produits plus larges et esthétiques - 3 par ligne sur grands écrans */
  5385. \t\t@media(min-width: 1200px) {
  5386. \t\t\t.featured-gallery-item {
  5387. \t\t\t\tflex: 0 0 calc(33.333333% - 20px);
  5388. \t\t\t\tmax-width: calc(33.333333% - 20px);
  5389. \t\t\t}
  5390. \t\t}
  5392. \t\t@media(min-width: 992px) and (max-width: 1199px) {
  5393. \t\t\t.featured-gallery-item {
  5394. \t\t\t\tflex: 0 0 calc(33.333333% - 20px);
  5395. \t\t\t\tmax-width: calc(33.333333% - 20px);
  5396. \t\t\t}
  5397. \t\t}
  5399. \t\t@media(min-width: 768px) and (max-width: 991px) {
  5400. \t\t\t.featured-gallery-item {
  5401. \t\t\t\tflex: 0 0 calc(50% - 15px);
  5402. \t\t\t\tmax-width: calc(50% - 15px);
  5403. \t\t\t}
  5404. \t\t}
  5406. \t\t@media(max-width: 767px) {
  5407. \t\t\t.featured-gallery-item {
  5408. \t\t\t\tflex: 0 0 100%;
  5409. \t\t\t\tmax-width: 100%;
  5410. \t\t\t}
  5411. \t\t}
  5413. \t\t/* Design amélioré pour single-product - plus large et esthétique */
  5414. \t\t.featured-gallery-item .single-product {
  5415. \t\t\tmargin-bottom: 0;
  5416. \t\t\tmin-height: 520px;
  5417. \t\t\tdisplay: flex;
  5418. \t\t\tflex-direction: column;
  5419. \t\t\tpadding: 25px;
  5420. \t\t\tbackground: #fff;
  5421. \t\t\tborder-radius: 16px;
  5422. \t\t\tbox-shadow: 0 8px 25px rgba(15, 34, 58, 0.1);
  5423. \t\t\ttransition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  5424. \t\t\tborder: 1px solid rgba(0, 0, 0, 0.05);
  5425. \t\t\tposition: relative;
  5426. \t\t\toverflow: hidden;
  5427. \t\t}
  5429. \t\t.featured-gallery-item .single-product::before {
  5430. \t\t\tcontent: '';
  5431. \t\t\tposition: absolute;
  5432. \t\t\ttop: 0;
  5433. \t\t\tleft: 0;
  5434. \t\t\tright: 0;
  5435. \t\t\theight: 4px;
  5436. \t\t\tbackground: linear-gradient(90deg, #ffa200 0%, #ff6b00 100%);
  5437. \t\t\ttransform: scaleX(0);
  5438. \t\t\ttransform-origin: left;
  5439. \t\t\ttransition: transform 0.4s ease;
  5440. \t\t}
  5442. \t\t.featured-gallery-item .single-product:hover {
  5443. \t\t\ttransform: translateY(-8px);
  5444. \t\t\tbox-shadow: 0 20px 50px rgba(15, 34, 58, 0.15);
  5445. \t\t\tborder-color: rgba(255, 162, 0, 0.3);
  5446. \t\t}
  5448. \t\t.featured-gallery-item .single-product:hover::before {
  5449. \t\t\ttransform: scaleX(1);
  5450. \t\t}
  5452. \t\t/* S'assurer que les images s'affichent correctement - styles identiques à listing.html.twig */
  5453. \t\t.featured-gallery-item .single-product img {
  5454. \t\t\tmargin-bottom: 20px;
  5455. \t\t\twidth: 100%;
  5456. \t\t}
  5458. \t\t/* Styles améliorés pour product-image-container - plus large et esthétique */
  5459. \t\t.featured-gallery-item .product-image-container {
  5460. \t\t\tposition: relative;
  5461. \t\t\toverflow: hidden;
  5462. \t\t\tborder-radius: 14px;
  5463. \t\t\theight: 320px;
  5464. \t\t\tdisplay: flex;
  5465. \t\t\talign-items: center;
  5466. \t\t\tjustify-content: center;
  5467. \t\t\tbackground: linear-gradient(135deg, #f7f7fb 0%, #e8ecf1 100%);
  5468. \t\t\tmargin-bottom: 22px;
  5469. \t\t\tbox-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  5470. \t\t}
  5472. \t\t.featured-gallery-item .product-image-container:hover {
  5473. \t\t\tbox-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  5474. \t\t}
  5476. \t\t.featured-gallery-item .product-image-container:hover .main-product-img {
  5477. \t\t\ttransform: scale(1.08);
  5478. \t\t\ttransition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  5479. \t\t}
  5481. \t\t.featured-gallery-item .product-image-container a {
  5482. \t\t\tdisplay: block;
  5483. \t\t\twidth: 100%;
  5484. \t\t\theight: 100%;
  5485. \t\t}
  5487. \t\t.featured-gallery-item .main-product-img {
  5488. \t\t\ttransition: transform 0.3s ease;
  5489. \t\t\twidth: 100% !important;
  5490. \t\t\theight: 100% !important;
  5491. \t\t\tobject-fit: cover;
  5492. \t\t\tobject-position: center;
  5493. \t\t\tdisplay: block;
  5494. \t\t\twill-change: transform, opacity;
  5495. \t\t}
  5497. \t\t.featured-gallery-item .main-product-img.image-fade {
  5498. \t\t\tanimation: imageFade 0.5s ease;
  5499. \t\t}
  5501. \t\t@keyframes imageFade {
  5502. \t\t\tfrom {
  5503. \t\t\t\topacity: 0;
  5504. \t\t\t\ttransform: scale(1.02);
  5505. \t\t\t}
  5506. \t\t\tto {
  5507. \t\t\t\topacity: 1;
  5508. \t\t\t\ttransform: scale(1);
  5509. \t\t\t}
  5510. \t\t}
  5512. \t\t.featured-gallery-item .product-details {
  5513. \t\t\tdisplay: flex;
  5514. \t\t\tflex-direction: column;
  5515. \t\t\theight: 100%;
  5516. \t\t\tpadding: 0 5px;
  5517. \t\t}
  5519. \t\t.featured-gallery-item .product-details h6 {
  5520. \t\t\tfont-size: 1.1rem;
  5521. \t\t\tfont-weight: 600;
  5522. \t\t\tmargin-bottom: 12px;
  5523. \t\t\tline-height: 1.4;
  5524. \t\t\tcolor: #2c3e50;
  5525. \t\t\tmin-height: 48px;
  5526. \t\t}
  5528. \t\t.featured-gallery-item .product-details h6 a {
  5529. \t\t\tcolor: #2c3e50;
  5530. \t\t\ttext-decoration: none;
  5531. \t\t\ttransition: color 0.3s ease;
  5532. \t\t}
  5534. \t\t.featured-gallery-item .product-details h6 a:hover {
  5535. \t\t\tcolor: #ffa200;
  5536. \t\t}
  5538. \t\t.featured-gallery-item .prd-bottom {
  5539. \t\t\tmargin-top: auto;
  5540. \t\t}
  5542. \t\t/* Styles pour img-nav-btn - identiques à listing.html.twig */
  5543. \t\t.featured-gallery-item .img-nav-btn {
  5544. \t\t\tposition: absolute;
  5545. \t\t\ttop: 50%;
  5546. \t\t\ttransform: translateY(-50%);
  5547. \t\t\tbackground: rgba(0, 0, 0, 0.6);
  5548. \t\t\tcolor: white;
  5549. \t\t\tborder: none;
  5550. \t\t\twidth: 35px;
  5551. \t\t\theight: 35px;
  5552. \t\t\tborder-radius: 50%;
  5553. \t\t\tdisplay: flex;
  5554. \t\t\talign-items: center;
  5555. \t\t\tjustify-content: center;
  5556. \t\t\tcursor: pointer;
  5557. \t\t\ttransition: all 0.3s ease;
  5558. \t\t\tz-index: 10;
  5559. \t\t}
  5561. \t\t.featured-gallery-item .img-nav-btn:hover {
  5562. \t\t\tbackground: #095ad3;
  5563. \t\t\ttransform: translateY(-50%) scale(1.1);
  5564. \t\t}
  5566. \t\t.featured-gallery-item .img-nav-left {
  5567. \t\t\tleft: 10px;
  5568. \t\t}
  5570. \t\t.featured-gallery-item .img-nav-right {
  5571. \t\t\tright: 10px;
  5572. \t\t}
  5574. \t\t.featured-gallery-item .img-indicators {
  5575. \t\t\tposition: absolute;
  5576. \t\t\tbottom: 10px;
  5577. \t\t\tleft: 50%;
  5578. \t\t\ttransform: translateX(-50%);
  5579. \t\t\tdisplay: flex;
  5580. \t\t\tgap: 5px;
  5581. \t\t\tz-index: 10;
  5582. \t\t}
  5584. \t\t.featured-gallery-item .indicator {
  5585. \t\t\twidth: 8px;
  5586. \t\t\theight: 8px;
  5587. \t\t\tborder-radius: 50%;
  5588. \t\t\tbackground: rgba(255, 255, 255, 0.5);
  5589. \t\t\tcursor: pointer;
  5590. \t\t\tmargin-bottom: 10px;
  5591. \t\t\ttransition: all 0.3s ease;
  5592. \t\t\tborder: 1px solid rgba(255, 255, 255, 0.3);
  5593. \t\t}
  5595. \t\t.featured-gallery-item .indicator.active {
  5596. \t\t\tbackground: #ffa200;
  5597. \t\t\tborder-color: #ffa200;
  5598. \t\t\ttransform: scale(1.2);
  5599. \t\t}
  5601. \t\t.featured-gallery-item .indicator:hover {
  5602. \t\t\tbackground: rgba(255, 255, 255, 0.8);
  5603. \t\t}
  5605. \t\t/* Styles pour shop-info - identiques à listing.html.twig */
  5606. \t\t.featured-gallery-item .shop-info {
  5607. \t\t\tmargin: 10px 0 15px 0;
  5608. \t\t\tpadding: 8px 0;
  5609. \t\t\tborder-bottom: 1px solid #f0f0f0;
  5610. \t\t}
  5612. \t\t.featured-gallery-item .shop-info small {
  5613. \t\t\tfont-size: 0.9rem;
  5614. \t\t}
  5616. \t\t.featured-gallery-item .shop-link {
  5617. \t\t\tcolor: #007bff;
  5618. \t\t\ttext-decoration: none;
  5619. \t\t\tfont-weight: 500;
  5620. \t\t}
  5622. \t\t.featured-gallery-item .shop-link:hover {
  5623. \t\t\tcolor: #ffa200;
  5624. \t\t\ttext-decoration: underline;
  5625. \t\t}
  5627. \t\t/* Styles améliorés pour le prix */
  5628. \t\t.featured-gallery-item .price {
  5629. \t\t\tmargin-bottom: 18px;
  5630. \t\t}
  5632. \t\t.featured-gallery-item .price h6 {
  5633. \t\t\tfont-size: 1.4rem;
  5634. \t\t\tfont-weight: 700;
  5635. \t\t\tcolor: #ffa200;
  5636. \t\t\tmargin-bottom: 5px;
  5637. \t\t}
  5639. \t\t.featured-gallery-item .price h6.l-through {
  5640. \t\t\tfont-size: 1rem;
  5641. \t\t\tcolor: #95a5a6;
  5642. \t\t\ttext-decoration: line-through;
  5643. \t\t\tfont-weight: 500;
  5644. \t\t}
  5646. \t\t/* Les autres styles (prd-bottom, social-info) sont déjà définis dans main.css */
  5648. \t\t@keyframes galleryItemFadeIn {
  5649. \t\t\tfrom {
  5650. \t\t\t\topacity: 0;
  5651. \t\t\t\ttransform: translateY(20px) scale(0.95);
  5652. \t\t\t}
  5653. \t\t\tto {
  5654. \t\t\t\topacity: 1;
  5655. \t\t\t\ttransform: translateY(0) scale(1);
  5656. \t\t\t}
  5657. \t\t}
  5659. \t\t.featured-gallery-card {
  5660. \t\t\tdisplay: flex;
  5661. \t\t\tflex-direction: column;
  5662. \t\t\theight: 100%;
  5663. \t\t\tbackground: white;
  5664. \t\t\tborder-radius: 12px;
  5665. \t\t\toverflow: hidden;
  5666. \t\t\tbox-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  5667. \t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  5668. \t\t\tborder: 1px solid #f0f0f0;
  5669. \t\t}
  5671. \t\t.featured-gallery-card:hover {
  5672. \t\t\ttransform: translateY(-5px);
  5673. \t\t\tbox-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  5674. \t\t\tborder-color: #ffa200;
  5675. \t\t}
  5677. \t\t.featured-gallery-image-wrapper {
  5678. \t\t\tposition: relative;
  5679. \t\t\twidth: 100%;
  5680. \t\t\tpadding-top: 100%; /* Ratio 1:1 pour une galerie carrée */
  5681. \t\t\toverflow: hidden;
  5682. \t\t\tbackground: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  5683. \t\t}
  5685. \t\t.featured-gallery-image {
  5686. \t\t\tposition: absolute;
  5687. \t\t\ttop: 0;
  5688. \t\t\tleft: 0;
  5689. \t\t\twidth: 100%;
  5690. \t\t\theight: 100%;
  5691. \t\t\tbackground-size: cover;
  5692. \t\t\tbackground-position: center;
  5693. \t\t\ttransition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  5694. \t\t}
  5696. \t\t.featured-gallery-card:hover .featured-gallery-image {
  5697. \t\t\ttransform: scale(1.08);
  5698. \t\t}
  5700. \t\t.featured-gallery-badge {
  5701. \t\t\tposition: absolute;
  5702. \t\t\ttop: 8px;
  5703. \t\t\tleft: 8px;
  5704. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  5705. \t\t\tcolor: white;
  5706. \t\t\tpadding: 4px 10px;
  5707. \t\t\tborder-radius: 15px;
  5708. \t\t\tfont-size: 12px;
  5709. \t\t\tfont-weight: 600;
  5710. \t\t\tz-index: 2;
  5711. \t\t\tbox-shadow: 0 2px 8px rgba(255, 162, 0, 0.4);
  5712. \t\t}
  5714. \t\t.featured-gallery-overlay {
  5715. \t\t\tposition: absolute;
  5716. \t\t\ttop: 0;
  5717. \t\t\tleft: 0;
  5718. \t\t\twidth: 100%;
  5719. \t\t\theight: 100%;
  5720. \t\t\tbackground: rgba(0, 0, 0, 0.5);
  5721. \t\t\tdisplay: flex;
  5722. \t\t\talign-items: center;
  5723. \t\t\tjustify-content: center;
  5724. \t\t\topacity: 0;
  5725. \t\t\ttransition: opacity 0.3s ease;
  5726. \t\t}
  5728. \t\t.featured-gallery-card:hover .featured-gallery-overlay {
  5729. \t\t\topacity: 1;
  5730. \t\t}
  5732. \t\t.featured-gallery-view-btn {
  5733. \t\t\tbackground: white;
  5734. \t\t\tcolor: #333;
  5735. \t\t\twidth: 40px;
  5736. \t\t\theight: 40px;
  5737. \t\t\tborder-radius: 50%;
  5738. \t\t\tdisplay: flex;
  5739. \t\t\talign-items: center;
  5740. \t\t\tjustify-content: center;
  5741. \t\t\ttext-decoration: none;
  5742. \t\t\tfont-size: 18px;
  5743. \t\t\ttransform: scale(0.8);
  5744. \t\t\ttransition: transform 0.3s ease;
  5745. \t\t}
  5747. \t\t.featured-gallery-card:hover .featured-gallery-view-btn {
  5748. \t\t\ttransform: scale(1);
  5749. \t\t}
  5751. \t\t.featured-gallery-info {
  5752. \t\t\tpadding: 12px;
  5753. \t\t\tflex: 1;
  5754. \t\t\tdisplay: flex;
  5755. \t\t\tflex-direction: column;
  5756. \t\t}
  5758. \t\t.featured-gallery-title {
  5759. \t\t\tfont-size: 14px;
  5760. \t\t\tfont-weight: 600;
  5761. \t\t\tmargin-bottom: 6px;
  5762. \t\t\tcolor: #333;
  5763. \t\t\tline-height: 1.3;
  5764. \t\t\tdisplay: -webkit-box;
  5765. \t\t\t-webkit-line-clamp: 2;
  5766. \t\t\t-webkit-box-orient: vertical;
  5767. \t\t\toverflow: hidden;
  5768. \t\t\tmin-height: 36px;
  5769. \t\t}
  5771. \t\t.featured-gallery-title a {
  5772. \t\t\tcolor: #333;
  5773. \t\t\ttext-decoration: none;
  5774. \t\t\ttransition: color 0.3s ease;
  5775. \t\t}
  5777. \t\t.featured-gallery-title a:hover {
  5778. \t\t\tcolor: #ffa200;
  5779. \t\t}
  5781. \t\t.featured-gallery-price {
  5782. \t\t\tfont-size: 16px;
  5783. \t\t\tfont-weight: 700;
  5784. \t\t\tcolor: #ffa200;
  5785. \t\t\tmargin-bottom: 6px;
  5786. \t\t}
  5788. \t\t.featured-gallery-rating {
  5789. \t\t\tdisplay: flex;
  5790. \t\t\talign-items: center;
  5791. \t\t\tgap: 3px;
  5792. \t\t\tfont-size: 11px;
  5793. \t\t}
  5795. \t\t.featured-gallery-rating .fa-star.active {
  5796. \t\t\tcolor: #ffa200;
  5797. \t\t}
  5799. \t\t.featured-gallery-rating .fa-star-o {
  5800. \t\t\tcolor: #ddd;
  5801. \t\t}
  5803. \t\t.featured-gallery-controls {
  5804. \t\t\tdisplay: flex;
  5805. \t\t\tjustify-content: center;
  5806. \t\t\tgap: 20px;
  5807. \t\t\tmargin-top: 25px;
  5808. \t\t\tpadding: 0 20px;
  5809. \t\t}
  5811. \t\t.featured-gallery-nav-btn {
  5812. \t\t\twidth: 42px;
  5813. \t\t\theight: 42px;
  5814. \t\t\tborder-radius: 50%;
  5815. \t\t\tborder: 1.5px solid #ffa200;
  5816. \t\t\tbackground: white;
  5817. \t\t\tcolor: #ffa200;
  5818. \t\t\tfont-size: 16px;
  5819. \t\t\tcursor: pointer;
  5820. \t\t\tdisplay: flex;
  5821. \t\t\talign-items: center;
  5822. \t\t\tjustify-content: center;
  5823. \t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  5824. \t\t\tbox-shadow: 0 3px 10px rgba(255, 162, 0, 0.18);
  5825. \t\t\tposition: relative;
  5826. \t\t\toverflow: hidden;
  5827. \t\t}
  5829. \t\t.featured-gallery-nav-btn.btn-ripple::after {
  5830. \t\t\tcontent: '';
  5831. \t\t\tposition: absolute;
  5832. \t\t\twidth: 100%;
  5833. \t\t\theight: 100%;
  5834. \t\t\tleft: 0;
  5835. \t\t\ttop: 0;
  5836. \t\t\tborder-radius: 50%;
  5837. \t\t\tbackground: rgba(255, 162, 0, 0.2);
  5838. \t\t\tanimation: rippleEffect 0.35s ease;
  5839. \t\t}
  5841. \t\t@keyframes rippleEffect {
  5842. \t\t\tfrom {
  5843. \t\t\t\ttransform: scale(0.6);
  5844. \t\t\t\topacity: 0.7;
  5845. \t\t\t}
  5846. \t\t\tto {
  5847. \t\t\t\ttransform: scale(1.4);
  5848. \t\t\t\topacity: 0;
  5849. \t\t\t}
  5850. \t\t}
  5852. \t\t.featured-gallery-nav-btn:hover:not(:disabled) {
  5853. \t\t\tbackground: #ffa200;
  5854. \t\t\tcolor: white;
  5855. \t\t\ttransform: scale(1.1);
  5856. \t\t\tbox-shadow: 0 5px 18px rgba(255, 162, 0, 0.4);
  5857. \t\t}
  5859. \t\t.featured-gallery-nav-btn:active:not(:disabled) {
  5860. \t\t\ttransform: scale(0.95);
  5861. \t\t}
  5863. \t\t.featured-gallery-nav-btn:disabled {
  5864. \t\t\topacity: 0.3;
  5865. \t\t\tcursor: not-allowed;
  5866. \t\t}
  5868. \t\t.featured-gallery-load-more {
  5869. \t\t\tmargin-top: 30px;
  5870. \t\t}
  5872. \t\t/* Style pour le bouton \"Voir tous les produits\" */
  5873. \t\t.btn-view-all-products {
  5874. \t\t\tdisplay: inline-flex;
  5875. \t\t\talign-items: center;
  5876. \t\t\tgap: 12px;
  5877. \t\t\tpadding: 16px 40px;
  5878. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  5879. \t\t\tcolor: white;
  5880. \t\t\ttext-decoration: none;
  5881. \t\t\tborder-radius: 50px;
  5882. \t\t\tfont-weight: 600;
  5883. \t\t\tfont-size: 16px;
  5884. \t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  5885. \t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.3);
  5886. \t\t\tposition: relative;
  5887. \t\t\toverflow: hidden;
  5888. \t\t}
  5890. \t\t.btn-view-all-products::before {
  5891. \t\t\tcontent: '';
  5892. \t\t\tposition: absolute;
  5893. \t\t\ttop: 0;
  5894. \t\t\tleft: -100%;
  5895. \t\t\twidth: 100%;
  5896. \t\t\theight: 100%;
  5897. \t\t\tbackground: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  5898. \t\t\ttransition: left 0.5s ease;
  5899. \t\t}
  5901. \t\t.btn-view-all-products:hover::before {
  5902. \t\t\tleft: 100%;
  5903. \t\t}
  5905. \t\t.btn-view-all-products:hover {
  5906. \t\t\ttransform: translateY(-3px);
  5907. \t\t\tbox-shadow: 0 8px 25px rgba(255, 162, 0, 0.5);
  5908. \t\t\tcolor: white;
  5909. \t\t}
  5911. \t\t.btn-view-all-products:active {
  5912. \t\t\ttransform: translateY(-1px);
  5913. \t\t}
  5915. \t\t.btn-view-all-products i {
  5916. \t\t\tfont-size: 18px;
  5917. \t\t\ttransition: transform 0.3s ease;
  5918. \t\t}
  5920. \t\t.btn-view-all-products:hover i {
  5921. \t\t\ttransform: translateX(5px);
  5922. \t\t}
  5924. \t\t.btn-view-all-products span {
  5925. \t\t\tposition: relative;
  5926. \t\t\tz-index: 1;
  5927. \t\t}
  5929. \t\t/* Responsive */
  5930. \t\t@media(max-width: 767px) {
  5931. \t\t\t.btn-view-all-products {
  5932. \t\t\t\tpadding: 14px 30px;
  5933. \t\t\t\tfont-size: 14px;
  5934. \t\t\t}
  5935. \t\t}
  5937. \t\t/* Responsive */
  5938. \t\t@media(max-width: 767px) {
  5939. \t\t\t.featured-gallery-grid {
  5940. \t\t\t\tgap: 10px;
  5941. \t\t\t}
  5943. \t\t\t.featured-gallery-info {
  5944. \t\t\t\tpadding: 10px;
  5945. \t\t\t}
  5947. \t\t\t.featured-gallery-title {
  5948. \t\t\t\tfont-size: 13px;
  5949. \t\t\t\tmin-height: 32px;
  5950. \t\t\t}
  5952. \t\t\t.featured-gallery-price {
  5953. \t\t\t\tfont-size: 14px;
  5954. \t\t\t}
  5955. \t\t}
  5957. \t\t/* Styles pour les grilles de produits Nouveautés */
  5958. \t\t.latest-products-grid {
  5959. \t\t\tmargin-top: 30px;
  5960. \t\t}
  5962. \t\t.product-card-modern {
  5963. \t\t\tbackground: white;
  5964. \t\t\tborder-radius: 12px;
  5965. \t\t\toverflow: hidden;
  5966. \t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  5967. \t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  5968. \t\t\theight: 100%;
  5969. \t\t\tdisplay: flex;
  5970. \t\t\tflex-direction: column;
  5971. \t\t\tborder: 1px solid #f0f0f0;
  5972. \t\t}
  5974. \t\t.product-card-modern:hover {
  5975. \t\t\ttransform: translateY(-8px);
  5976. \t\t\tbox-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  5977. \t\t\tborder-color: #ffa200;
  5978. \t\t}
  5980. \t\t.product-image-wrapper {
  5981. \t\t\tposition: relative;
  5982. \t\t\twidth: 100%;
  5983. \t\t\tpadding-top: 75%; /* Ratio 4:3 */
  5984. \t\t\toverflow: hidden;
  5985. \t\t\tbackground: #f8f9fa;
  5986. \t\t}
  5988. \t\t.product-image {
  5989. \t\t\tposition: absolute;
  5990. \t\t\ttop: 0;
  5991. \t\t\tleft: 0;
  5992. \t\t\twidth: 100%;
  5993. \t\t\theight: 100%;
  5994. \t\t\tbackground-size: cover;
  5995. \t\t\tbackground-position: center;
  5996. \t\t\ttransition: transform 0.5s ease;
  5997. \t\t}
  5999. \t\t.product-card-modern:hover .product-image {
  6000. \t\t\ttransform: scale(1.1);
  6001. \t\t}
  6003. \t\t.product-badge-modern {
  6004. \t\t\tposition: absolute;
  6005. \t\t\ttop: 10px;
  6006. \t\t\tright: 10px;
  6007. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  6008. \t\t\tcolor: white;
  6009. \t\t\tpadding: 6px 12px;
  6010. \t\t\tborder-radius: 20px;
  6011. \t\t\tfont-size: 12px;
  6012. \t\t\tfont-weight: 600;
  6013. \t\t\tz-index: 2;
  6014. \t\t\tbox-shadow: 0 2px 8px rgba(255, 162, 0, 0.3);
  6015. \t\t}
  6017. \t\t.product-badge-modern.new-badge {
  6018. \t\t\tbackground: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  6019. \t\t}
  6021. \t\t.product-overlay {
  6022. \t\t\tposition: absolute;
  6023. \t\t\ttop: 0;
  6024. \t\t\tleft: 0;
  6025. \t\t\twidth: 100%;
  6026. \t\t\theight: 100%;
  6027. \t\t\tbackground: rgba(0, 0, 0, 0.5);
  6028. \t\t\tdisplay: flex;
  6029. \t\t\talign-items: center;
  6030. \t\t\tjustify-content: center;
  6031. \t\t\topacity: 0;
  6032. \t\t\ttransition: opacity 0.3s ease;
  6033. \t\t\tz-index: 1;
  6034. \t\t}
  6036. \t\t.product-card-modern:hover .product-overlay {
  6037. \t\t\topacity: 1;
  6038. \t\t}
  6040. \t\t.btn-view-product {
  6041. \t\t\tbackground: white;
  6042. \t\t\tcolor: #333;
  6043. \t\t\tpadding: 12px 24px;
  6044. \t\t\tborder-radius: 25px;
  6045. \t\t\ttext-decoration: none;
  6046. \t\t\tfont-weight: 600;
  6047. \t\t\tdisplay: flex;
  6048. \t\t\talign-items: center;
  6049. \t\t\tgap: 8px;
  6050. \t\t\ttransition: all 0.3s ease;
  6051. \t\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  6052. \t\t}
  6054. \t\t.btn-view-product:hover {
  6055. \t\t\tbackground: #ffa200;
  6056. \t\t\tcolor: white;
  6057. \t\t\ttransform: scale(1.05);
  6058. \t\t}
  6060. \t\t.product-info-modern {
  6061. \t\t\tpadding: 16px;
  6062. \t\t\tflex-grow: 1;
  6063. \t\t\tdisplay: flex;
  6064. \t\t\tflex-direction: column;
  6065. \t\t}
  6067. \t\t.product-title-modern {
  6068. \t\t\tmargin: 0 0 8px;
  6069. \t\t\tfont-size: 16px;
  6070. \t\t\tfont-weight: 600;
  6071. \t\t\tline-height: 1.4;
  6072. \t\t}
  6074. \t\t.product-title-modern a {
  6075. \t\t\tcolor: #333;
  6076. \t\t\ttext-decoration: none;
  6077. \t\t\ttransition: color 0.3s ease;
  6078. \t\t}
  6080. \t\t.product-title-modern a:hover {
  6081. \t\t\tcolor: #ffa200;
  6082. \t\t}
  6084. \t\t.product-price-modern {
  6085. \t\t\tfont-size: 20px;
  6086. \t\t\tfont-weight: 700;
  6087. \t\t\tcolor: #ffa200;
  6088. \t\t\tmargin-bottom: 8px;
  6089. \t\t}
  6091. \t\t.product-shop-modern {
  6092. \t\t\tdisplay: flex;
  6093. \t\t\talign-items: center;
  6094. \t\t\tgap: 6px;
  6095. \t\t\tfont-size: 13px;
  6096. \t\t\tcolor: #666;
  6097. \t\t\tmargin-bottom: 8px;
  6098. \t\t}
  6100. \t\t.product-shop-modern i {
  6101. \t\t\tcolor: #ffa200;
  6102. \t\t}
  6104. \t\t.shop-link {
  6105. \t\t\tcolor: #666;
  6106. \t\t\ttext-decoration: none;
  6107. \t\t\ttransition: color 0.3s ease;
  6108. \t\t}
  6110. \t\t.shop-link:hover {
  6111. \t\t\tcolor: #ffa200;
  6112. \t\t}
  6114. \t\t.product-rating-modern {
  6115. \t\t\tdisplay: flex;
  6116. \t\t\talign-items: center;
  6117. \t\t\tgap: 4px;
  6118. \t\t\tmargin-top: auto;
  6119. \t\t}
  6121. \t\t.product-rating-modern .fa-star.active {
  6122. \t\t\tcolor: #ffc107;
  6123. \t\t}
  6125. \t\t.product-rating-modern .fa-star-o {
  6126. \t\t\tcolor: #ddd;
  6127. \t\t}
  6129. \t\t.rating-count {
  6130. \t\t\tfont-size: 12px;
  6131. \t\t\tcolor: #666;
  6132. \t\t\tmargin-left: 4px;
  6133. \t\t}
  6135. \t\t.product-views-modern {
  6136. \t\t\tdisplay: flex;
  6137. \t\t\talign-items: center;
  6138. \t\t\tgap: 6px;
  6139. \t\t\tfont-size: 12px;
  6140. \t\t\tcolor: #666;
  6141. \t\t\tmargin-top: auto;
  6142. \t\t}
  6144. \t\t.product-views-modern i {
  6145. \t\t\tcolor: #999;
  6146. \t\t}
  6148. \t\t/* Style des cartes produits */
  6149. \t\t.product-card {
  6150. \t\t\tbackground: white;
  6151. \t\t\tborder-radius: 15px;
  6152. \t\t\toverflow: hidden;
  6153. \t\t\tbox-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  6154. \t\t\ttransition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  6155. \t\t\theight: 100%;
  6156. \t\t\tdisplay: flex;
  6157. \t\t\tflex-direction: column;
  6158. \t\t}
  6160. \t\t.product-card:hover {
  6161. \t\t\tbox-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  6162. \t\t\ttransform: translateY(-5px);
  6163. \t\t}
  6165. \t\t.product-image {
  6166. \t\t\twidth: 100%;
  6167. \t\t\theight: 250px;
  6168. \t\t\tbackground-size: cover;
  6169. \t\t\tbackground-position: center;
  6170. \t\t\tposition: relative;
  6171. \t\t\toverflow: hidden;
  6172. \t\t}
  6174. \t\t.product-image::before {
  6175. \t\t\tcontent: '';
  6176. \t\t\tposition: absolute;
  6177. \t\t\ttop: 0;
  6178. \t\t\tleft: -100%;
  6179. \t\t\twidth: 100%;
  6180. \t\t\theight: 100%;
  6181. \t\t\tbackground: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  6182. \t\t\ttransition: left 0.6s ease;
  6183. \t\t}
  6185. \t\t.product-card:hover .product-image::before {
  6186. \t\t\tleft: 100%;
  6187. \t\t}
  6189. \t\t.product-badge {
  6190. \t\t\tposition: absolute;
  6191. \t\t\ttop: 15px;
  6192. \t\t\tright: 15px;
  6193. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  6194. \t\t\tcolor: white;
  6195. \t\t\tpadding: 8px 15px;
  6196. \t\t\tborder-radius: 20px;
  6197. \t\t\tfont-size: 0.85rem;
  6198. \t\t\tfont-weight: 600;
  6199. \t\t\tbox-shadow: 0 4px 10px rgba(255, 162, 0, 0.4);
  6200. \t\t\tz-index: 1;
  6201. \t\t}
  6203. \t\t.product-info {
  6204. \t\t\tpadding: 20px;
  6205. \t\t\tflex-grow: 1;
  6206. \t\t\tdisplay: flex;
  6207. \t\t\tflex-direction: column;
  6208. \t\t}
  6210. \t\t.product-title {
  6211. \t\t\tfont-size: 1.1rem;
  6212. \t\t\tfont-weight: 600;
  6213. \t\t\tcolor: #2c3e50;
  6214. \t\t\tmargin-bottom: 10px;
  6215. \t\t\tline-height: 1.4;
  6216. \t\t\tdisplay: -webkit-box;
  6217. \t\t\t-webkit-line-clamp: 2;
  6218. \t\t\t-webkit-box-orient: vertical;
  6219. \t\t\toverflow: hidden;
  6220. \t\t}
  6222. \t\t.product-price {
  6223. \t\t\tfont-size: 1.5rem;
  6224. \t\t\tfont-weight: 800;
  6225. \t\t\tcolor: #ffa200;
  6226. \t\t\tmargin-bottom: 15px;
  6227. \t\t}
  6229. \t\t.product-shop {
  6230. \t\t\tfont-size: 0.9rem;
  6231. \t\t\tcolor: #666;
  6232. \t\t\tmargin-bottom: 15px;
  6233. \t\t}
  6235. \t\t.product-shop a {
  6236. \t\t\tcolor: #667eea;
  6237. \t\t\ttext-decoration: none;
  6238. \t\t\ttransition: color 0.3s ease;
  6239. \t\t}
  6241. \t\t.product-shop a:hover {
  6242. \t\t\tcolor: #ffa200;
  6243. \t\t}
  6245. \t\t/* Newsletter Modern Styles */
  6246. \t\t.newsletter-section-modern {
  6247. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #095ad3 100%);
  6248. \t\t\tposition: relative;
  6249. \t\t\toverflow: hidden;
  6250. \t\t}
  6251. \t\t.newsletter-section-modern::before {
  6252. \t\t\tcontent: '';
  6253. \t\t\tposition: absolute;
  6254. \t\t\ttop: -50%;
  6255. \t\t\tright: -50%;
  6256. \t\t\twidth: 100%;
  6257. \t\t\theight: 200%;
  6258. \t\t\tbackground: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  6259. \t\t\tanimation: pulse 3s ease-in-out infinite;
  6260. \t\t}
  6261. \t\t@keyframes pulse {
  6262. \t\t\t0,
  6263. \t\t\t100% {
  6264. \t\t\t\ttransform: scale(1);
  6265. \t\t\t\topacity: 0.5;
  6266. \t\t\t}
  6267. \t\t\t50% {
  6268. \t\t\t\ttransform: scale(1.1);
  6269. \t\t\t\topacity: 0.8;
  6270. \t\t\t}
  6271. \t\t}
  6272. \t\t.newsletter-card {
  6273. \t\t\tbackground: white;
  6274. \t\t\tborder-radius: 20px;
  6275. \t\t\tpadding: 40px;
  6276. \t\t\tbox-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  6277. \t\t\tposition: relative;
  6278. \t\t\tz-index: 1;
  6279. \t\t}
  6280. \t\t.newsletter-title {
  6281. \t\t\tfont-size: 2.5rem;
  6282. \t\t\tfont-weight: bold;
  6283. \t\t\tcolor: #333;
  6284. \t\t}
  6285. \t\t.newsletter-description {
  6286. \t\t\tcolor: #666;
  6287. \t\t\tfont-size: 1.1rem;
  6288. \t\t\tline-height: 1.8;
  6289. \t\t}
  6290. \t\t.newsletter-form-modern {
  6291. \t\t\tposition: relative;
  6292. \t\t}
  6293. \t\t.newsletter-input-wrapper {
  6294. \t\t\tdisplay: flex;
  6295. \t\t\tgap: 10px;
  6296. \t\t\tmargin-bottom: 15px;
  6297. \t\t}
  6298. \t\t.newsletter-input {
  6299. \t\t\tflex: 1;
  6300. \t\t\tpadding: 18px 25px;
  6301. \t\t\tborder: 2px solid #e0e0e0;
  6302. \t\t\tborder-radius: 50px;
  6303. \t\t\tfont-size: 1rem;
  6304. \t\t\ttransition: all 0.3s ease;\t\t\tbackground: #fff;
  6305. \t\t\tcolor: #333;
  6306. \t\t}
  6307. \t\t.newsletter-input::placeholder {
  6308. \t\t\tcolor: #777;
  6309. \t\t}
  6310. \t\t.newsletter-input:focus {
  6311. \t\t\toutline: none;
  6312. \t\t\tborder-color: #ffa200;
  6313. \t\t\tbox-shadow: 0 0 0 3px rgba(255, 162, 0, 0.1);
  6314. \t\t}
  6315. \t\t.newsletter-button {
  6316. \t\t\tpadding: 18px 35px;
  6317. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  6318. \t\t\tcolor: white;
  6319. \t\t\tborder: none;
  6320. \t\t\tborder-radius: 50px;
  6321. \t\t\tfont-weight: 600;
  6322. \t\t\tfont-size: 1rem;
  6323. \t\t\tcursor: pointer;
  6324. \t\t\ttransition: all 0.3s ease;
  6325. \t\t\twhite-space: nowrap;
  6326. \t\t}
  6327. \t\t.newsletter-button:hover {
  6328. \t\t\ttransform: translateY(-2px);
  6329. \t\t\tbox-shadow: 0 5px 20px rgba(255, 162, 0, 0.4);
  6330. \t\t}
  6331. \t\t.newsletter-privacy {
  6332. \t\t\tcolor: #999;
  6333. \t\t}
  6335. \t\t/* CTA Modern Styles */
  6336. \t\t.cta-section-modern {
  6337. \t\t\tbackground: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  6338. \t\t}
  6339. \t\t.cta-card {
  6340. \t\t\tbackground: white;
  6341. \t\t\tborder-radius: 25px;
  6342. \t\t\tpadding: 50px;
  6343. \t\t\tbox-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
  6344. \t\t\tposition: relative;
  6345. \t\t\toverflow: hidden;
  6346. \t\t}
  6347. \t\t.cta-card::before {
  6348. \t\t\tcontent: '';
  6349. \t\t\tposition: absolute;
  6350. \t\t\ttop: -50px;
  6351. \t\t\tright: -50px;
  6352. \t\t\twidth: 200px;
  6353. \t\t\theight: 200px;
  6354. \t\t\tbackground: linear-gradient(135deg, rgba(255,162,0,0.1) 0%, rgba(255,162,0,0.05) 100%);
  6355. \t\t\tborder-radius: 50%;
  6356. \t\t}
  6357. \t\t.cta-badge {
  6358. \t\t\tdisplay: inline-block;
  6359. \t\t\tpadding: 8px 20px;
  6360. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  6361. \t\t\tcolor: white;
  6362. \t\t\tborder-radius: 50px;
  6363. \t\t\tfont-size: 0.9rem;
  6364. \t\t\tfont-weight: 600;
  6365. \t\t\tmargin-bottom: 20px;
  6366. \t\t}
  6367. \t\t.cta-title {
  6368. \t\t\tfont-size: 3rem;
  6369. \t\t\tfont-weight: bold;
  6370. \t\t\tcolor: #333;
  6371. \t\t\tmargin-bottom: 20px;
  6372. \t\t}
  6373. \t\t.cta-description {
  6374. \t\t\tfont-size: 1.2rem;
  6375. \t\t\tcolor: #666;
  6376. \t\t\tline-height: 1.8;
  6377. \t\t}
  6378. \t\t.cta-features {
  6379. \t\t\tdisplay: flex;
  6380. \t\t\tflex-direction: column;
  6381. \t\t\tgap: 15px;
  6382. \t\t}
  6383. \t\t.cta-feature-item {
  6384. \t\t\tdisplay: flex;
  6385. \t\t\talign-items: center;
  6386. \t\t\tgap: 10px;
  6387. \t\t\tfont-size: 1rem;
  6388. \t\t\tcolor: #555;
  6389. \t\t}
  6390. \t\t.cta-feature-item i {
  6391. \t\t\tcolor: #ffa200;
  6392. \t\t\tfont-size: 1.3rem;
  6393. \t\t}
  6394. \t\t.cta-buttons {
  6395. \t\t\tdisplay: flex;
  6396. \t\t\tgap: 15px;
  6397. \t\t\tflex-wrap: wrap;
  6398. \t\t}
  6399. \t\t.cta-button-primary {
  6400. \t\t\tpadding: 15px 35px;
  6401. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  6402. \t\t\tcolor: white;
  6403. \t\t\tborder: none;
  6404. \t\t\tborder-radius: 50px;
  6405. \t\t\tfont-weight: 600;
  6406. \t\t\tfont-size: 1.1rem;
  6407. \t\t\ttransition: all 0.3s ease;
  6408. \t\t}
  6409. \t\t.cta-button-primary:hover {
  6410. \t\t\ttransform: translateY(-3px);
  6411. \t\t\tbox-shadow: 0 8px 25px rgba(255, 162, 0, 0.4);
  6412. \t\t\tcolor: white;
  6413. \t\t}
  6414. \t\t.cta-button-secondary {
  6415. \t\t\tpadding: 15px 35px;
  6416. \t\t\tbackground: white;
  6417. \t\t\tcolor: #ffa200;
  6418. \t\t\tborder: 2px solid #ffa200;
  6419. \t\t\tborder-radius: 50px;
  6420. \t\t\tfont-weight: 600;
  6421. \t\t\tfont-size: 1.1rem;
  6422. \t\t\ttransition: all 0.3s ease;
  6423. \t\t}
  6424. \t\t.cta-button-secondary:hover {
  6425. \t\t\tbackground: #ffa200;
  6426. \t\t\tcolor: white;
  6427. \t\t\ttransform: translateY(-3px);
  6428. \t\t\tbox-shadow: 0 8px 25px rgba(255, 162, 0, 0.3);
  6429. \t\t}
  6430. \t\t.cta-image-wrapper {
  6431. \t\t\tposition: relative;
  6432. \t\t}
  6433. \t\t.cta-decoration {
  6434. \t\t\tposition: absolute;
  6435. \t\t\ttop: -20px;
  6436. \t\t\tright: -20px;
  6437. \t\t\twidth: 150px;
  6438. \t\t\theight: 150px;
  6439. \t\t\tbackground: linear-gradient(135deg, rgba(255,162,0,0.2) 0%, rgba(255,162,0,0.05) 100%);
  6440. \t\t\tborder-radius: 50%;
  6441. \t\t\tz-index: 0;
  6442. \t\t}
  6443. \t\t.cta-image {
  6444. \t\t\tposition: relative;
  6445. \t\t\tz-index: 1;
  6446. \t\t\tmax-width: 100%;
  6447. \t\t\theight: auto;
  6448. \t\t\tborder-radius: 15px;
  6449. \t\t}
  6450. \t</style>
  6451. {% endblock %}
  6453. {% block body %}
  6454. \t<!-- Hero Section -->
  6455. \t<!-- start banner Area avec produits en vedette -->
  6456. \t\t{% if bannerProducts is defined and bannerProducts|length > 0 %}
  6457. \t\t\t<section class=\"banner-area-modern\"> <div class=\"banner-carousel-wrapper\">
  6458. \t\t\t\t<div class=\"active-banner-slider owl-carousel\" style=\"margin-top: 100px;\">
  6459. \t\t\t\t\t{% for product in bannerProducts %}
  6460. \t\t\t\t\t\t<!-- single-slide -->
  6461. \t\t\t\t\t\t<div class=\"banner-slide-item\">
  6462. \t\t\t\t\t\t\t<div class=\"container\">
  6463. \t\t\t\t\t\t\t\t<div class=\"row align-items-center\">
  6464. \t\t\t\t\t\t\t\t\t<div class=\"col-lg-4 col-md-6 col-12\">
  6465. \t\t\t\t\t\t\t\t\t\t<div class=\"banner-content-modern\">
  6466. \t\t\t\t\t\t\t\t\t\t\t<div class=\"banner-badge\">
  6467. \t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-star\"></i>
  6468. \t\t\t\t\t\t\t\t\t\t\t\tProduit en vedette
  6469. \t\t\t\t\t\t\t\t\t\t\t</div>
  6470. \t\t\t\t\t\t\t\t\t\t\t<h1 class=\"banner-title-modern\">{{ product.name }}</h1>
  6471. \t\t\t\t\t\t\t\t\t\t\t<p class=\"banner-description-modern\">
  6472. \t\t\t\t\t\t\t\t\t\t\t\t{{ product.description ? (product.description|striptags|slice(0, 120) ~ '...') : 'Découvrez ce produit exclusif sur MaketOu' }}
  6473. \t\t\t\t\t\t\t\t\t\t\t</p>
  6474. \t\t\t\t\t\t\t\t\t\t\t<div class=\"banner-price-modern\">
  6475. \t\t\t\t\t\t\t\t\t\t\t\t<span class=\"price-label\">Prix</span>
  6476. \t\t\t\t\t\t\t\t\t\t\t\t<span class=\"price-value\">{{ product.price|number_format(2, '.', ' ') }}
  6477. \t\t\t\t\t\t\t\t\t\t\t\t\tHTG</span>
  6478. \t\t\t\t\t\t\t\t\t\t\t</div>
  6479. \t\t\t\t\t\t\t\t\t\t\t<div class=\"banner-actions-modern\">
  6480. \t\t\t\t\t\t\t\t\t\t\t\t<a class=\"btn-banner-primary\" href=\"{{ path('ui_product_show', {'slug': product.slug}) }}\">
  6481. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"btn-text\">Voir le produit</span>
  6482. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"btn-icon\">
  6483. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-arrow-right\"></i>
  6484. \t\t\t\t\t\t\t\t\t\t\t\t\t</span>
  6485. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  6486. \t\t\t\t\t\t\t\t\t\t\t\t{% if product.shop %}
  6487. \t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"btn-banner-secondary\" href=\"{{ path('ui_shop_show', {'slug': product.shop.slug}) }}\">
  6488. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\"></i>
  6489. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ product.shop.name }}</span>
  6490. \t\t\t\t\t\t\t\t\t\t\t\t\t</a>
  6491. \t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6492. \t\t\t\t\t\t\t\t\t\t\t</div>
  6493. \t\t\t\t\t\t\t\t\t\t</div>
  6494. \t\t\t\t\t\t\t\t\t</div>
  6495. \t\t\t\t\t\t\t\t\t<div class=\"col-lg-8 col-md-6 col-12\">
  6496. \t\t\t\t\t\t\t\t\t\t<div class=\"banner-image-modern\">
  6497. \t\t\t\t\t\t\t\t\t\t\t<div class=\"banner-image-wrapper\">
  6498. \t\t\t\t\t\t\t\t\t\t\t\t{% if product.images is defined and product.images|length > 0 %}
  6499. \t\t\t\t\t\t\t\t\t\t\t\t\t<img class=\"banner-img\" src=\"{{ product.images[0] is defined and product.images[0] ? asset(product.images[0]) : asset('ui/img/product/p' ~ loop.index ~ '.jpg') }}\" alt=\"{{ product.name }}\">
  6500. \t\t\t\t\t\t\t\t\t\t\t\t{% else %}
  6501. \t\t\t\t\t\t\t\t\t\t\t\t\t<img class=\"banner-img\" src=\"{{ asset('ui/img/product/p' ~ loop.index ~ '.jpg') }}\" alt=\"{{ product.name }}\">
  6502. \t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6503. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"banner-image-overlay\"></div>
  6504. \t\t\t\t\t\t\t\t\t\t\t</div>
  6505. \t\t\t\t\t\t\t\t\t\t</div>
  6506. \t\t\t\t\t\t\t\t\t</div>
  6507. \t\t\t\t\t\t\t\t</div>
  6508. \t\t\t\t\t\t\t</div>
  6509. \t\t\t\t\t\t</div>
  6510. \t\t\t\t\t{% endfor %}
  6511. \t\t\t\t</div>
  6512. \t\t\t</div>
  6513. \t\t</section>
  6514. \t{% else %}
  6515. \t\t<!-- Banner par défaut si pas de produits en vedette -->
  6516. \t\t<section class=\"banner-area-modern\">
  6517. \t\t\t<div class=\"banner-carousel-wrapper\">
  6518. \t\t\t\t<div class=\"container\">
  6519. \t\t\t\t\t<div class=\"row align-items-center justify-content-center\">
  6520. \t\t\t\t\t\t<div class=\"col-lg-8 text-center\">
  6521. \t\t\t\t\t\t\t<div class=\"banner-content-modern\" style=\"margin-top: 140px;\">
  6522. \t\t\t\t\t\t\t\t<h1 class=\"banner-title-modern\">Bienvenue sur MaketOu</h1>
  6523. \t\t\t\t\t\t\t\t<p class=\"banner-description-modern\">Votre marketplace haïtienne</p>
  6524. \t\t\t\t\t\t\t</div>
  6525. \t\t\t\t\t\t</div>
  6526. \t\t\t\t\t</div>
  6527. \t\t\t\t</div>
  6528. \t\t\t</div>
  6529. \t\t</section>
  6530. \t{% endif %}
  6531. \t<!-- End banner Area -->
  6533. \t<!-- Catégories de produits -->
  6534. \t{% if categories|length > 0 %}
  6535. \t\t<section class=\"py-5\">
  6536. \t\t\t<div class=\"container\">
  6537. \t\t\t\t<div class=\"section-title\">
  6538. \t\t\t\t\t<h2>Nos catégories</h2>
  6539. \t\t\t\t\t<p>Explorez nos différentes catégories de produits</p>
  6540. \t\t\t\t</div>
  6541. \t\t\t\t<div class=\"row\" id=\"productCategoriesContainer\">
  6542. \t\t\t\t\t{% for category in categories|slice(0, 8) %}
  6543. \t\t\t\t\t\t<div class=\"col-lg-3 col-md-4 col-sm-6 mb-4\">
  6544. \t\t\t\t\t\t\t<div class=\"category-card-custom\">
  6545. \t\t\t\t\t\t\t\t<div class=\"category-image-wrapper\">
  6546. \t\t\t\t\t\t\t\t\t<div class=\"category-image\" style=\"background-image: url('{% if category.bannerImage %}{{ asset('uploads/categories/banner/' ~ category.bannerImage) }}{% else %}{{ asset('ui/img/category/cat-' ~ loop.index ~ '.jpg') }}{% endif %}')\">
  6547. \t\t\t\t\t\t\t\t\t\t<div class=\"category-overlay-custom\">
  6548. \t\t\t\t\t\t\t\t\t\t\t<div class=\"category-icon-wrapper\">
  6549. \t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-tag\" style=\"font-size: 3rem;\"></i>
  6550. \t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-3\">{{ category.name }}</h4>
  6551. \t\t\t\t\t\t\t\t\t\t\t</div>
  6552. \t\t\t\t\t\t\t\t\t\t</div>
  6553. \t\t\t\t\t\t\t\t\t</div>
  6554. \t\t\t\t\t\t\t\t</div>
  6555. \t\t\t\t\t\t\t\t<div class=\"category-content p-3\">
  6556. \t\t\t\t\t\t\t\t\t<h5 class=\"mb-2\">{{ category.name }}</h5>
  6557. \t\t\t\t\t\t\t\t\t{% if category.description %}
  6558. \t\t\t\t\t\t\t\t\t\t<p class=\"text-muted mb-3 small\">{{ category.description|striptags|slice(0, 60) }}
  6559. \t\t\t\t\t\t\t\t\t\t\t{% if category.description|striptags|length > 60 %}...
  6560. \t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6561. \t\t\t\t\t\t\t\t\t\t</p>
  6562. \t\t\t\t\t\t\t\t\t{% endif %}
  6563. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_listing', {'category': category.slug}) }}\" class=\"btn btn-primary-custom btn-sm w-100\">
  6564. \t\t\t\t\t\t\t\t\t\tVoir les produits
  6565. \t\t\t\t\t\t\t\t\t</a>
  6566. \t\t\t\t\t\t\t\t</div>
  6567. \t\t\t\t\t\t\t</div>
  6568. \t\t\t\t\t\t</div>
  6569. \t\t\t\t\t{% endfor %}
  6570. \t\t\t\t</div>
  6571. \t\t\t</div>
  6572. \t\t</section>
  6573. \t{% endif %}
  6575. \t<!-- Catégories de boutiques -->
  6576. \t{% if shopCategories|length > 0 %}
  6577. \t\t<section class=\"py-5 bg-light\">
  6578. \t\t\t<div class=\"container\">
  6579. \t\t\t\t<div class=\"section-title\">
  6580. \t\t\t\t\t<h2>Nos catégories de boutiques</h2>
  6581. \t\t\t\t\t<p>Explorez les différentes catégories de boutiques disponibles sur MaketOu</p>
  6582. \t\t\t\t</div>
  6583. \t\t\t\t<div class=\"row\" id=\"shopCategoriesContainer\">
  6584. \t\t\t\t\t{% for shopCategory in shopCategories|slice(0, 6) %}
  6585. \t\t\t\t\t\t<div class=\"col-lg-4 col-md-6 mb-4\">
  6586. \t\t\t\t\t\t\t<a href=\"{{ path('ui_shops_list') }}?category={{ shopCategory.slug }}\" class=\"text-decoration-none\" style=\"display: block;\">
  6587. \t\t\t\t\t\t\t\t<div class=\"category-card-custom shop-category-clickable\">
  6588. \t\t\t\t\t\t\t\t\t<div class=\"category-image-wrapper\">
  6589. \t\t\t\t\t\t\t\t\t\t<div class=\"category-image\" style=\"background-image: url('{% if shopCategory.bannerImage %}{{ asset(shopCategory.bannerImage) }}{% else %}{{ asset('ui/img/category/shop-' ~ loop.index ~ '.jpg') }}{% endif %}')\">
  6590. \t\t\t\t\t\t\t\t\t\t\t<div class=\"category-overlay-custom\">
  6591. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"category-icon-wrapper\">
  6592. \t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\" style=\"font-size: 3rem;\"></i>
  6593. \t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-3\">{{ shopCategory.name }}</h4>
  6594. \t\t\t\t\t\t\t\t\t\t\t\t\t{% if shopCategory.description %}
  6595. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"mt-2 px-3\">{{ shopCategory.description|striptags|slice(0, 100) }}
  6596. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{% if shopCategory.description|striptags|length > 100 %}...
  6597. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6598. \t\t\t\t\t\t\t\t\t\t\t\t\t\t</p>
  6599. \t\t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6600. \t\t\t\t\t\t\t\t\t\t\t\t</div>
  6601. \t\t\t\t\t\t\t\t\t\t\t</div>
  6602. \t\t\t\t\t\t\t\t\t\t</div>
  6603. \t\t\t\t\t\t\t\t\t</div>
  6604. \t\t\t\t\t\t\t\t\t<div class=\"category-content p-3\">
  6605. \t\t\t\t\t\t\t\t\t\t<h5 class=\"mb-2\">{{ shopCategory.name }}</h5>
  6606. \t\t\t\t\t\t\t\t\t\t{% if shopCategory.description %}
  6607. \t\t\t\t\t\t\t\t\t\t\t<p class=\"text-muted mb-3 small\">{{ shopCategory.description|striptags|slice(0, 80) }}
  6608. \t\t\t\t\t\t\t\t\t\t\t\t{% if shopCategory.description|striptags|length > 80 %}...
  6609. \t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6610. \t\t\t\t\t\t\t\t\t\t\t</p>
  6611. \t\t\t\t\t\t\t\t\t\t{% endif %}
  6612. \t\t\t\t\t\t\t\t\t\t<span class=\"btn btn-primary-custom btn-sm w-100\">
  6613. \t\t\t\t\t\t\t\t\t\t\tVoir les boutiques
  6614. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-arrow-right ms-2\"></i>
  6615. \t\t\t\t\t\t\t\t\t\t</span>
  6616. \t\t\t\t\t\t\t\t\t</div>
  6617. \t\t\t\t\t\t\t\t</div>
  6618. \t\t\t\t\t\t\t</a>
  6619. \t\t\t\t\t\t</div>
  6620. \t\t\t\t\t{% endfor %}
  6621. \t\t\t\t</div>
  6622. \t\t\t\t{% if shopCategories|length > 6 %}
  6623. \t\t\t\t\t<div class=\"text-center mt-4\">
  6624. \t\t\t\t\t\t<button class=\"btn btn-outline-primary btn-lg\" onclick=\"showAllShopCategories()\">
  6625. \t\t\t\t\t\t\t<i class=\"lnr lnr-store me-2\"></i>
  6626. \t\t\t\t\t\t\tVoir toutes les catégories de boutiques ({{ shopCategories|length }})
  6627. \t\t\t\t\t\t</button>
  6628. \t\t\t\t\t</div>
  6629. \t\t\t\t{% endif %}
  6630. \t\t\t</div>
  6631. \t\t</section>
  6632. \t{% endif %}
  6634. \t<!-- Produits en vedette -->
  6635. \t{% if featuredProducts|length > 0 %}
  6636. \t\t<section class=\"py-5\">
  6637. \t\t\t<div class=\"container\">
  6638. \t\t\t\t<div class=\"section-title text-center mb-5\">
  6639. \t\t\t\t\t<h2>Produits en vedette</h2>
  6640. \t\t\t\t\t<p>Découvrez nos produits les plus populaires et les mieux notés</p>
  6641. \t\t\t\t</div>
  6643. \t\t\t\t<div class=\"featured-gallery-wrapper\">
  6644. \t\t\t\t\t<div class=\"featured-gallery-container\">
  6645. \t\t\t\t\t\t<div class=\"featured-gallery-grid\" id=\"featuredGalleryGrid\">
  6646. \t\t\t\t\t\t\t{% for product in featuredProducts %}
  6647. \t\t\t\t\t\t\t\t<div class=\"featured-gallery-item\">
  6648. \t\t\t\t\t\t\t\t\t<div class=\"single-product\">
  6649. \t\t\t\t\t\t\t\t\t\t<div class=\"product-image-container\" onmouseenter=\"showImageNav({{ product.id }})\" onmouseleave=\"hideImageNav({{ product.id }})\">
  6650. \t\t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_product_show', { slug: product.slug }) }}\">
  6651. \t\t\t\t\t\t\t\t\t\t\t\t{% if product.images is defined and product.images|length > 0 %}
  6652. \t\t\t\t\t\t\t\t\t\t\t\t\t<img 
  6653. \t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"img-fluid main-product-img\" 
  6654. \t\t\t\t\t\t\t\t\t\t\t\t\t\tid=\"main-img-{{ product.id }}\" 
  6655. \t\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"{{ asset(product.images[0]) }}\" 
  6656. \t\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"{{ product.name }}\"
  6657. \t\t\t\t\t\t\t\t\t\t\t\t\t\tonerror=\"this.onerror=null;this.src='{{ asset('ui/img/product/p1.jpg') }}';\"
  6658. \t\t\t\t\t\t\t\t\t\t\t\t\t>
  6659. \t\t\t\t\t\t\t\t\t\t\t\t{% else %}
  6660. \t\t\t\t\t\t\t\t\t\t\t\t\t<img class=\"img-fluid main-product-img\" id=\"main-img-{{ product.id }}\" src=\"{{ asset('ui/img/product/p1.jpg') }}\" alt=\"{{ product.name }}\">
  6661. \t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6662. \t\t\t\t\t\t\t\t\t\t\t</a>
  6664. \t\t\t\t\t\t\t\t\t\t\t<!-- Boutons de navigation (visibles au survol) -->
  6665. \t\t\t\t\t\t\t\t\t\t\t{% if product.images is defined and product.images|length > 1 %}
  6666. \t\t\t\t\t\t\t\t\t\t\t\t<button class=\"img-nav-btn img-nav-left\" id=\"img-left-{{ product.id }}\" onclick=\"prevImage({{ product.id }})\" style=\"display: none;\">
  6667. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-chevron-left\"></span>
  6668. \t\t\t\t\t\t\t\t\t\t\t\t</button>
  6669. \t\t\t\t\t\t\t\t\t\t\t\t<button class=\"img-nav-btn img-nav-right\" id=\"img-right-{{ product.id }}\" onclick=\"nextImage({{ product.id }})\" style=\"display: none;\">
  6670. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-chevron-right\"></span>
  6671. \t\t\t\t\t\t\t\t\t\t\t\t</button>
  6673. \t\t\t\t\t\t\t\t\t\t\t\t<!-- Indicateurs de position -->
  6674. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"img-indicators\" id=\"img-indicators-{{ product.id }}\" style=\"display: none;\">
  6675. \t\t\t\t\t\t\t\t\t\t\t\t\t{% for img in product.images %}
  6676. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"indicator\" id=\"indicator-{{ product.id }}-{{ loop.index0 }}\" onclick=\"showImage({{ product.id }}, {{ loop.index0 }})\"></span>
  6677. \t\t\t\t\t\t\t\t\t\t\t\t\t{% endfor %}
  6678. \t\t\t\t\t\t\t\t\t\t\t\t</div>
  6679. \t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6680. \t\t\t\t\t\t\t\t\t\t</div>
  6682. \t\t\t\t\t\t\t\t\t\t<div class=\"product-details\">
  6683. \t\t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_product_show', { slug: product.slug }) }}\">
  6684. \t\t\t\t\t\t\t\t\t\t\t\t<h6>{{ product.name }}</h6>
  6685. \t\t\t\t\t\t\t\t\t\t\t</a>
  6687. \t\t\t\t\t\t\t\t\t\t\t<!-- Affichage de la boutique -->
  6688. \t\t\t\t\t\t\t\t\t\t\t<div class=\"shop-info\">
  6689. \t\t\t\t\t\t\t\t\t\t\t\t<small class=\"text-muted\">
  6690. \t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\"></i>
  6691. \t\t\t\t\t\t\t\t\t\t\t\t\tVendu par :
  6692. \t\t\t\t\t\t\t\t\t\t\t\t\t{% if product.shop is defined and product.shop %}
  6693. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_shop_show', {'slug': product.shop.slug}) }}\" class=\"shop-link\">
  6694. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ product.shop.name }}
  6695. \t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>
  6696. \t\t\t\t\t\t\t\t\t\t\t\t\t{% else %}
  6697. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"text-muted\">Boutique inconnue</span>
  6698. \t\t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6699. \t\t\t\t\t\t\t\t\t\t\t\t</small>
  6700. \t\t\t\t\t\t\t\t\t\t\t</div>
  6702. \t\t\t\t\t\t\t\t\t\t\t<div class=\"price\">
  6703. \t\t\t\t\t\t\t\t\t\t\t\t<h6>{{ product.price|number_format(2, '.', ' ') }}
  6704. \t\t\t\t\t\t\t\t\t\t\t\t\tHTG</h6>
  6705. \t\t\t\t\t\t\t\t\t\t\t\t{% if product.compareAtPrice %}
  6706. \t\t\t\t\t\t\t\t\t\t\t\t\t<h6 class=\"l-through\">{{ product.compareAtPrice|number_format(2, '.', ' ') }}
  6707. \t\t\t\t\t\t\t\t\t\t\t\t\t\tHTG</h6>
  6708. \t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6709. \t\t\t\t\t\t\t\t\t\t\t</div>
  6710. \t\t\t\t\t\t\t\t\t\t\t<div class=\"prd-bottom\">
  6711. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0)\" class=\"social-info add-to-cart\" data-product-id=\"{{ product.id }}\" data-qty=\"1\">
  6712. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ti-bag\"></span>
  6713. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">+ panier</p>
  6714. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  6715. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"social-info wishlist-btn\" data-product-id=\"{{ product.id }}\" {% if app.user %} onclick=\"toggleWishlist({{ product.id }}, this); return false;\" {% else %} onclick=\"alert('Vous devez être connecté pour ajouter aux favoris'); return false;\" {% endif %}>
  6716. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-heart\"></span>
  6717. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">Favoris</p>
  6718. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  6719. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"social-info comparison-btn\" data-product-id=\"{{ product.id }}\" {% if app.user %} onclick=\"toggleComparison({{ product.id }}, this); return false;\" {% else %} onclick=\"alert('Vous devez être connecté pour comparer des produits'); return false;\" {% endif %}>
  6720. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-sync\"></span>
  6721. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">Comparer</p>
  6722. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  6723. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_product_show', { slug: product.slug }) }}\" class=\"social-info\">
  6724. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-move\"></span>
  6725. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">Voir plus</p>
  6726. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  6727. \t\t\t\t\t\t\t\t\t\t\t</div>
  6728. \t\t\t\t\t\t\t\t\t\t</div>
  6729. \t\t\t\t\t\t\t\t\t</div>
  6730. \t\t\t\t\t\t\t\t</div>
  6731. \t\t\t\t\t\t\t{% endfor %}
  6732. \t\t\t\t\t\t</div>
  6733. \t\t\t\t\t</div>
  6735. \t\t\t\t\t<!-- Contrôles de navigation -->
  6736. \t\t\t\t\t<div class=\"featured-gallery-controls\">
  6737. \t\t\t\t\t\t<button class=\"featured-gallery-nav-btn featured-gallery-prev\" id=\"featuredGalleryPrev\" aria-label=\"Précédent\">
  6738. \t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-left\"></i>
  6739. \t\t\t\t\t\t</button>
  6740. \t\t\t\t\t\t<button class=\"featured-gallery-nav-btn featured-gallery-next\" id=\"featuredGalleryNext\" aria-label=\"Suivant\">
  6741. \t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-right\"></i>
  6742. \t\t\t\t\t\t</button>
  6743. \t\t\t\t\t</div>
  6745. \t\t\t\t\t<!-- Bouton charger plus -->
  6746. \t\t\t\t\t<div class=\"featured-gallery-load-more text-center mt-4\" id=\"featuredGalleryLoadMore\" style=\"display: none;\">
  6747. \t\t\t\t\t\t<button class=\"btn btn-outline-primary\" id=\"loadMoreFeaturedBtn\">
  6748. \t\t\t\t\t\t\t<i class=\"lnr lnr-plus-circle me-2\"></i>
  6749. \t\t\t\t\t\t\tCharger plus de produits
  6750. \t\t\t\t\t\t</button>
  6751. \t\t\t\t\t</div>
  6752. \t\t\t\t</div>
  6754. \t\t\t\t<div class=\"text-center mt-5\">
  6755. \t\t\t\t\t<a href=\"{{ path('ui_listing') }}\" class=\"btn-view-all-products\">
  6756. \t\t\t\t\t\t<span>Voir tous les produits</span>
  6757. \t\t\t\t\t\t<i class=\"lnr lnr-arrow-right\"></i>
  6758. \t\t\t\t\t</a>
  6759. \t\t\t\t</div>
  6760. \t\t\t</div>
  6761. \t\t</section>
  6762. \t{% endif %}
  6764. \t<!-- Nouveautés -->
  6765. \t{% if latestProducts|length > 0 %}
  6766. \t\t<section class=\"py-5 bg-light\">
  6767. \t\t\t<div class=\"container\">
  6768. \t\t\t\t<div class=\"section-title text-center mb-5\">
  6769. \t\t\t\t\t<h2>Nouveautés</h2>
  6770. \t\t\t\t\t<p>Les derniers produits ajoutés sur MaketOu</p>
  6771. \t\t\t\t</div>
  6773. \t\t\t\t<div class=\"featured-gallery-wrapper\">
  6774. \t\t\t\t\t<div class=\"featured-gallery-container\">
  6775. \t\t\t\t\t\t<div class=\"featured-gallery-grid\" id=\"latestGalleryGrid\">
  6776. \t\t\t\t\t\t\t{% for product in latestProducts %}
  6777. \t\t\t\t\t\t\t\t<div class=\"featured-gallery-item\">
  6778. \t\t\t\t\t\t\t\t\t<div class=\"single-product\">
  6779. \t\t\t\t\t\t\t\t\t\t<div class=\"product-image-container\" onmouseenter=\"showImageNav({{ product.id }})\" onmouseleave=\"hideImageNav({{ product.id }})\">
  6780. \t\t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_product_show', { slug: product.slug }) }}\">
  6781. \t\t\t\t\t\t\t\t\t\t\t\t{% if product.images is defined and product.images|length > 0 %}
  6782. \t\t\t\t\t\t\t\t\t\t\t\t\t<img class=\"img-fluid main-product-img\" id=\"main-img-{{ product.id }}\" src=\"{{ asset(product.images[0]) }}\" alt=\"{{ product.name }}\">
  6783. \t\t\t\t\t\t\t\t\t\t\t\t{% else %}
  6784. \t\t\t\t\t\t\t\t\t\t\t\t\t<img class=\"img-fluid main-product-img\" id=\"main-img-{{ product.id }}\" src=\"{{ asset('ui/img/product/p1.jpg') }}\" alt=\"{{ product.name }}\">
  6785. \t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6786. \t\t\t\t\t\t\t\t\t\t\t</a>
  6788. \t\t\t\t\t\t\t\t\t\t\t<!-- Boutons de navigation (visibles au survol) -->
  6789. \t\t\t\t\t\t\t\t\t\t\t{% if product.images is defined and product.images|length > 1 %}
  6790. \t\t\t\t\t\t\t\t\t\t\t\t<button class=\"img-nav-btn img-nav-left\" id=\"img-left-{{ product.id }}\" onclick=\"prevImage({{ product.id }})\" style=\"display: none;\">
  6791. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-chevron-left\"></span>
  6792. \t\t\t\t\t\t\t\t\t\t\t\t</button>
  6793. \t\t\t\t\t\t\t\t\t\t\t\t<button class=\"img-nav-btn img-nav-right\" id=\"img-right-{{ product.id }}\" onclick=\"nextImage({{ product.id }})\" style=\"display: none;\">
  6794. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-chevron-right\"></span>
  6795. \t\t\t\t\t\t\t\t\t\t\t\t</button>
  6797. \t\t\t\t\t\t\t\t\t\t\t\t<!-- Indicateurs de position -->
  6798. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"img-indicators\" id=\"img-indicators-{{ product.id }}\" style=\"display: none;\">
  6799. \t\t\t\t\t\t\t\t\t\t\t\t\t{% for img in product.images %}
  6800. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"indicator\" id=\"indicator-{{ product.id }}-{{ loop.index0 }}\" onclick=\"showImage({{ product.id }}, {{ loop.index0 }})\"></span>
  6801. \t\t\t\t\t\t\t\t\t\t\t\t\t{% endfor %}
  6802. \t\t\t\t\t\t\t\t\t\t\t\t</div>
  6803. \t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6804. \t\t\t\t\t\t\t\t\t\t</div>
  6806. \t\t\t\t\t\t\t\t\t\t<div class=\"product-details\">
  6807. \t\t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_product_show', { slug: product.slug }) }}\">
  6808. \t\t\t\t\t\t\t\t\t\t\t\t<h6>{{ product.name }}</h6>
  6809. \t\t\t\t\t\t\t\t\t\t\t</a>
  6811. \t\t\t\t\t\t\t\t\t\t\t<!-- Affichage de la boutique -->
  6812. \t\t\t\t\t\t\t\t\t\t\t<div class=\"shop-info\">
  6813. \t\t\t\t\t\t\t\t\t\t\t\t<small class=\"text-muted\">
  6814. \t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\"></i>
  6815. \t\t\t\t\t\t\t\t\t\t\t\t\tVendu par :
  6816. \t\t\t\t\t\t\t\t\t\t\t\t\t{% if product.shop is defined and product.shop %}
  6817. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_shop_show', {'slug': product.shop.slug}) }}\" class=\"shop-link\">
  6818. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ product.shop.name }}
  6819. \t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>
  6820. \t\t\t\t\t\t\t\t\t\t\t\t\t{% else %}
  6821. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"text-muted\">Boutique inconnue</span>
  6822. \t\t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6823. \t\t\t\t\t\t\t\t\t\t\t\t</small>
  6824. \t\t\t\t\t\t\t\t\t\t\t</div>
  6826. \t\t\t\t\t\t\t\t\t\t\t<div class=\"price\">
  6827. \t\t\t\t\t\t\t\t\t\t\t\t<h6>{{ product.price|number_format(2, '.', ' ') }}
  6828. \t\t\t\t\t\t\t\t\t\t\t\t\tHTG</h6>
  6829. \t\t\t\t\t\t\t\t\t\t\t\t{% if product.compareAtPrice %}
  6830. \t\t\t\t\t\t\t\t\t\t\t\t\t<h6 class=\"l-through\">{{ product.compareAtPrice|number_format(2, '.', ' ') }}
  6831. \t\t\t\t\t\t\t\t\t\t\t\t\t\tHTG</h6>
  6832. \t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6833. \t\t\t\t\t\t\t\t\t\t\t</div>
  6834. \t\t\t\t\t\t\t\t\t\t\t<div class=\"prd-bottom\">
  6835. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0)\" class=\"social-info add-to-cart\" data-product-id=\"{{ product.id }}\" data-qty=\"1\">
  6836. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ti-bag\"></span>
  6837. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">+ panier</p>
  6838. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  6839. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"social-info wishlist-btn\" data-product-id=\"{{ product.id }}\" {% if app.user %} onclick=\"toggleWishlist({{ product.id }}, this); return false;\" {% else %} onclick=\"alert('Vous devez être connecté pour ajouter aux favoris'); return false;\" {% endif %}>
  6840. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-heart\"></span>
  6841. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">Favoris</p>
  6842. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  6843. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"social-info comparison-btn\" data-product-id=\"{{ product.id }}\" {% if app.user %} onclick=\"toggleComparison({{ product.id }}, this); return false;\" {% else %} onclick=\"alert('Vous devez être connecté pour comparer des produits'); return false;\" {% endif %}>
  6844. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-sync\"></span>
  6845. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">Comparer</p>
  6846. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  6847. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_product_show', { slug: product.slug }) }}\" class=\"social-info\">
  6848. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-move\"></span>
  6849. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">Voir plus</p>
  6850. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  6851. \t\t\t\t\t\t\t\t\t\t\t</div>
  6852. \t\t\t\t\t\t\t\t\t\t</div>
  6853. \t\t\t\t\t\t\t\t\t</div>
  6854. \t\t\t\t\t\t\t\t</div>
  6855. \t\t\t\t\t\t\t{% endfor %}
  6856. \t\t\t\t\t\t</div>
  6857. \t\t\t\t\t</div>
  6859. \t\t\t\t\t<!-- Contrôles de navigation -->
  6860. \t\t\t\t\t<div class=\"featured-gallery-controls\">
  6861. \t\t\t\t\t\t<button class=\"featured-gallery-nav-btn featured-gallery-prev\" id=\"latestGalleryPrev\" aria-label=\"Précédent\">
  6862. \t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-left\"></i>
  6863. \t\t\t\t\t\t</button>
  6864. \t\t\t\t\t\t<button class=\"featured-gallery-nav-btn featured-gallery-next\" id=\"latestGalleryNext\" aria-label=\"Suivant\">
  6865. \t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-right\"></i>
  6866. \t\t\t\t\t\t</button>
  6867. \t\t\t\t\t</div>
  6869. \t\t\t\t\t<!-- Bouton charger plus -->
  6870. \t\t\t\t\t<div class=\"featured-gallery-load-more text-center mt-4\" id=\"latestGalleryLoadMore\" style=\"display: none;\">
  6871. \t\t\t\t\t\t<button class=\"btn btn-outline-primary\" id=\"loadMoreLatestBtn\">
  6872. \t\t\t\t\t\t\t<i class=\"lnr lnr-plus-circle me-2\"></i>
  6873. \t\t\t\t\t\t\tCharger plus de produits
  6874. \t\t\t\t\t\t</button>
  6875. \t\t\t\t\t</div>
  6876. \t\t\t\t</div>
  6878. \t\t\t\t<div class=\"text-center mt-5\">
  6879. \t\t\t\t\t<a href=\"{{ path('ui_listing') }}\" class=\"btn-view-all-products\">
  6880. \t\t\t\t\t\t<span>Voir tous les produits</span>
  6881. \t\t\t\t\t\t<i class=\"lnr lnr-arrow-right\"></i>
  6882. \t\t\t\t\t</a>
  6883. \t\t\t\t</div>
  6884. \t\t\t</div>
  6885. \t\t</section>
  6886. \t{% endif %}
  6888. \t{% if recommendedProducts|length > 0 %}
  6889. \t\t<section class=\"py-5\">
  6890. \t\t\t<div class=\"container\">
  6891. \t\t\t\t<div class=\"section-title text-center mb-5\">
  6892. \t\t\t\t\t<h2>Recommandés pour vous</h2>
  6893. \t\t\t\t\t<p>Suggestions basées sur votre activité récente et les tendances de MaketOu</p>
  6894. \t\t\t\t</div>
  6895. \t\t\t\t<div class=\"row g-4\">
  6896. \t\t\t\t\t{% for product in recommendedProducts %}
  6897. \t\t\t\t\t\t<div class=\"col-12 col-sm-6 col-lg-3\">
  6898. \t\t\t\t\t\t\t<div class=\"product-card h-100\">
  6899. \t\t\t\t\t\t\t\t{% set productImage = product.images[0] ?? 'ui/img/product/p1.jpg' %}
  6900. \t\t\t\t\t\t\t\t<div class=\"product-image\" style=\"background-image:url('{{ asset(productImage) }}');\">
  6901. \t\t\t\t\t\t\t\t\t{% if product.isFeatured %}
  6902. \t\t\t\t\t\t\t\t\t\t<span class=\"product-badge bg-success\">Populaire</span>
  6903. \t\t\t\t\t\t\t\t\t{% endif %}
  6904. \t\t\t\t\t\t\t\t</div>
  6905. \t\t\t\t\t\t\t\t<div class=\"p-3\">
  6906. \t\t\t\t\t\t\t\t\t<h6 class=\"mb-2\">
  6907. \t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_product_show', { slug: product.slug }) }}\">{{ product.name }}</a>
  6908. \t\t\t\t\t\t\t\t\t</h6>
  6909. \t\t\t\t\t\t\t\t\t<p class=\"mb-2 text-muted small\">
  6910. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\"></i>
  6911. \t\t\t\t\t\t\t\t\t\t{% if product.shop %}
  6912. \t\t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_shop_show', {'slug': product.shop.slug}) }}\">{{ product.shop.name }}</a>
  6913. \t\t\t\t\t\t\t\t\t\t{% else %}
  6914. \t\t\t\t\t\t\t\t\t\t\tBoutique non spécifiée
  6915. \t\t\t\t\t\t\t\t\t\t{% endif %}
  6916. \t\t\t\t\t\t\t\t\t</p>
  6917. \t\t\t\t\t\t\t\t\t<div class=\"d-flex align-items-center justify-content-between\">
  6918. \t\t\t\t\t\t\t\t\t\t<span class=\"fw-bold text-primary\">{{ product.price|number_format(2, '.', ' ') }} HTG</span>
  6919. \t\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0)\" class=\"btn btn-sm btn-outline-primary add-to-cart\" data-product-id=\"{{ product.id }}\" data-qty=\"1\">
  6920. \t\t\t\t\t\t\t\t\t\t\t<i class=\"ti ti-bag\"></i>
  6921. \t\t\t\t\t\t\t\t\t\t</a>
  6922. \t\t\t\t\t\t\t\t\t</div>
  6923. \t\t\t\t\t\t\t\t</div>
  6924. \t\t\t\t\t\t\t</div>
  6925. \t\t\t\t\t\t</div>
  6926. \t\t\t\t\t{% endfor %}
  6927. \t\t\t\t</div>
  6928. \t\t\t</div>
  6929. \t\t</section>
  6930. \t{% endif %}
  6932. \t{% if recentlyViewedProducts|length > 0 %}
  6933. \t\t<section class=\"py-5 bg-light\">
  6934. \t\t\t<div class=\"container\">
  6935. \t\t\t\t<div class=\"section-title text-center mb-5\">
  6936. \t\t\t\t\t<h2>Récemment consultés</h2>
  6937. \t\t\t\t\t<p>Retrouvez les articles que vous avez explorés dernièrement</p>
  6938. \t\t\t\t</div>
  6939. \t\t\t\t<div class=\"featured-gallery-wrapper\">
  6940. \t\t\t\t\t<div class=\"featured-gallery-container\">
  6941. \t\t\t\t\t\t<div class=\"featured-gallery-grid\">
  6942. \t\t\t\t\t\t\t{% for product in recentlyViewedProducts %}
  6943. \t\t\t\t\t\t\t\t<div class=\"featured-gallery-item\">
  6944. \t\t\t\t\t\t\t\t\t<div class=\"single-product\">
  6945. \t\t\t\t\t\t\t\t\t\t<div class=\"product-image-container\">
  6946. \t\t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_product_show', { slug: product.slug }) }}\">
  6947. \t\t\t\t\t\t\t\t\t\t\t\t{% if product.images is defined and product.images|length > 0 %}
  6948. \t\t\t\t\t\t\t\t\t\t\t\t\t<img class=\"img-fluid main-product-img\" src=\"{{ asset(product.images[0]) }}\" alt=\"{{ product.name }}\">
  6949. \t\t\t\t\t\t\t\t\t\t\t\t{% else %}
  6950. \t\t\t\t\t\t\t\t\t\t\t\t\t<img class=\"img-fluid main-product-img\" src=\"{{ asset('ui/img/product/p1.jpg') }}\" alt=\"{{ product.name }}\">
  6951. \t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6952. \t\t\t\t\t\t\t\t\t\t\t</a>
  6953. \t\t\t\t\t\t\t\t\t\t</div>
  6954. \t\t\t\t\t\t\t\t\t\t<div class=\"product-details\">
  6955. \t\t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_product_show', { slug: product.slug }) }}\">
  6956. \t\t\t\t\t\t\t\t\t\t\t\t<h6>{{ product.name }}</h6>
  6957. \t\t\t\t\t\t\t\t\t\t\t</a>
  6958. \t\t\t\t\t\t\t\t\t\t\t<div class=\"price\">
  6959. \t\t\t\t\t\t\t\t\t\t\t\t<h6>{{ product.price|number_format(2, '.', ' ') }} HTG</h6>
  6960. \t\t\t\t\t\t\t\t\t\t\t</div>
  6961. \t\t\t\t\t\t\t\t\t\t\t<div class=\"prd-bottom\">
  6962. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0)\" class=\"social-info add-to-cart\" data-product-id=\"{{ product.id }}\" data-qty=\"1\">
  6963. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ti-bag\"></span>
  6964. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">+ panier</p>
  6965. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  6966. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_product_show', { slug: product.slug }) }}\" class=\"social-info\">
  6967. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-move\"></span>
  6968. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">Voir</p>
  6969. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  6970. \t\t\t\t\t\t\t\t\t\t\t</div>
  6971. \t\t\t\t\t\t\t\t\t\t</div>
  6972. \t\t\t\t\t\t\t\t\t</div>
  6973. \t\t\t\t\t\t\t\t</div>
  6974. \t\t\t\t\t\t\t{% endfor %}
  6975. \t\t\t\t\t\t</div>
  6976. \t\t\t\t\t</div>
  6977. \t\t\t\t</div>
  6978. \t\t\t</div>
  6979. \t\t</section>
  6980. \t{% endif %}
  6982. \t<!-- Fonctionnalités -->
  6983. \t<section class=\"py-5\">
  6984. \t\t<div class=\"container\">
  6985. \t\t\t<div class=\"section-title\">
  6986. \t\t\t\t<h2>Pourquoi choisir MaketOu ?</h2>
  6987. \t\t\t\t<p>Découvrez les avantages de notre plateforme</p>
  6988. \t\t\t</div>
  6989. \t\t\t<div class=\"row\">
  6990. \t\t\t\t<div class=\"col-lg-3 col-md-6 mb-4\">
  6991. \t\t\t\t\t<div class=\"feature-card\">
  6992. \t\t\t\t\t\t<div class=\"feature-icon\">
  6993. \t\t\t\t\t\t\t<i class=\"lnr lnr-rocket\"></i>
  6994. \t\t\t\t\t\t</div>
  6995. \t\t\t\t\t\t<h5>Livraison rapide</h5>
  6996. \t\t\t\t\t\t<p>Recevez vos commandes rapidement avec notre réseau de livraison optimisé</p>
  6997. \t\t\t\t\t</div>
  6998. \t\t\t\t</div>
  6999. \t\t\t\t<div class=\"col-lg-3 col-md-6 mb-4\">
  7000. \t\t\t\t\t<div class=\"feature-card\">
  7001. \t\t\t\t\t\t<div class=\"feature-icon\">
  7002. \t\t\t\t\t\t\t<i class=\"lnr lnr-lock\"></i>
  7003. \t\t\t\t\t\t</div>
  7004. \t\t\t\t\t\t<h5>Paiement sécurisé</h5>
  7005. \t\t\t\t\t\t<p>Vos transactions sont protégées avec les dernières technologies de sécurité</p>
  7006. \t\t\t\t\t</div>
  7007. \t\t\t\t</div>
  7008. \t\t\t\t<div class=\"col-lg-3 col-md-6 mb-4\">
  7009. \t\t\t\t\t<div class=\"feature-card\">
  7010. \t\t\t\t\t\t<div class=\"feature-icon\">
  7011. \t\t\t\t\t\t\t<i class=\"lnr lnr-phone\"></i>
  7012. \t\t\t\t\t\t</div>
  7013. \t\t\t\t\t\t<h5>Support 24/7</h5>
  7014. \t\t\t\t\t\t<p>Notre équipe est disponible pour vous aider à tout moment</p>
  7015. \t\t\t\t\t</div>
  7016. \t\t\t\t</div>
  7017. \t\t\t\t<div class=\"col-lg-3 col-md-6 mb-4\">
  7018. \t\t\t\t\t<div class=\"feature-card\">
  7019. \t\t\t\t\t\t<div class=\"feature-icon\">
  7020. \t\t\t\t\t\t\t<i class=\"lnr lnr-undo\"></i>
  7021. \t\t\t\t\t\t</div>
  7022. \t\t\t\t\t\t<h5>Retour facile</h5>
  7023. \t\t\t\t\t\t<p>Politique de retour flexible pour votre tranquillité d'esprit</p>
  7024. \t\t\t\t\t</div>
  7025. \t\t\t\t</div>
  7026. \t\t\t</div>
  7027. \t\t</div>
  7028. \t</section>
  7030. \t<!-- Newsletter -->
  7031. \t<section class=\"newsletter-section-modern py-5\">
  7032. \t\t<div class=\"container\">
  7033. \t\t\t<div class=\"row justify-content-center\">
  7034. \t\t\t\t<div class=\"col-lg-10\">
  7035. \t\t\t\t\t<div class=\"newsletter-card\">
  7036. \t\t\t\t\t\t<div class=\"row align-items-center\">
  7037. \t\t\t\t\t\t\t<div class=\"col-lg-6 text-center text-lg-start mb-4 mb-lg-0\">
  7038. \t\t\t\t\t\t\t\t<div class=\"newsletter-icon mb-3\">
  7039. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-envelope\" style=\"font-size: 4rem; color: #ffa200;\"></i>
  7040. \t\t\t\t\t\t\t\t</div>
  7041. \t\t\t\t\t\t\t\t<h2 class=\"newsletter-title mb-3\">Restez informé des dernières nouveautés</h2>
  7042. \t\t\t\t\t\t\t\t<p class=\"newsletter-description mb-0\">
  7043. \t\t\t\t\t\t\t\t\tInscrivez-vous à notre newsletter pour recevoir les offres exclusives, 
  7044. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                les nouveaux produits et les meilleures promotions directement dans votre boîte mail.
  7045. \t\t\t\t\t\t\t\t</p>
  7046. \t\t\t\t\t\t\t</div>
  7047. \t\t\t\t\t\t\t<div class=\"col-lg-6\">
  7048. \t\t\t\t\t\t\t\t<form class=\"newsletter-form-modern\" id=\"newsletterFormHome\">
  7049. \t\t\t\t\t\t\t\t\t<div class=\"newsletter-input-wrapper\">
  7050. \t\t\t\t\t\t\t\t\t\t<input type=\"email\" class=\"newsletter-input\" placeholder=\"Votre adresse email\" required name=\"email\">
  7051. \t\t\t\t\t\t\t\t\t\t<button class=\"newsletter-button\" type=\"submit\">
  7052. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-arrow-right me-2\"></i>
  7053. \t\t\t\t\t\t\t\t\t\t\tS'abonner
  7054. \t\t\t\t\t\t\t\t\t\t</button>
  7055. \t\t\t\t\t\t\t\t\t</div>
  7056. \t\t\t\t\t\t\t\t\t<p class=\"newsletter-privacy mt-3 text-center\">
  7057. \t\t\t\t\t\t\t\t\t\t<small>
  7058. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-lock me-1\"></i>
  7059. \t\t\t\t\t\t\t\t\t\t\tVos données sont sécurisées. Pas de spam, désinscription facile.
  7060. \t\t\t\t\t\t\t\t\t\t</small>
  7061. \t\t\t\t\t\t\t\t\t</p>
  7062. \t\t\t\t\t\t\t\t</form>
  7063. \t\t\t\t\t\t\t</div>
  7064. \t\t\t\t\t\t</div>
  7065. \t\t\t\t\t</div>
  7066. \t\t\t\t</div>
  7067. \t\t\t</div>
  7068. \t\t</div>
  7069. \t</section>
  7071. \t<!-- Call to Action -->
  7072. \t<section class=\"cta-section-modern py-5\">
  7073. \t\t<div class=\"container\">
  7074. \t\t\t<div class=\"cta-card\">
  7075. \t\t\t\t<div class=\"row align-items-center\">
  7076. \t\t\t\t\t<div class=\"col-lg-6 mb-4 mb-lg-0\">
  7077. \t\t\t\t\t\t<div class=\"cta-content\">
  7078. \t\t\t\t\t\t\t<span class=\"cta-badge\">
  7079. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-rocket me-2\"></i>
  7080. \t\t\t\t\t\t\t\tCommencez dès aujourd'hui
  7081. \t\t\t\t\t\t\t</span>
  7082. \t\t\t\t\t\t\t<h2 class=\"cta-title mb-3\">Prêt à commencer ?</h2>
  7083. \t\t\t\t\t\t\t<p class=\"cta-description mb-4\">
  7084. \t\t\t\t\t\t\t\tQue vous soyez
  7085. \t\t\t\t\t\t\t\t<strong>acheteur</strong>
  7086. \t\t\t\t\t\t\t\tou
  7087. \t\t\t\t\t\t\t\t<strong>vendeur</strong>, MaketOu vous offre la plateforme idéale 
  7088. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                            pour vos besoins commerciaux en Haïti. Rejoignez des milliers d'utilisateurs satisfaits !
  7089. \t\t\t\t\t\t\t</p>
  7090. \t\t\t\t\t\t\t<div class=\"cta-features mb-4\">
  7091. \t\t\t\t\t\t\t\t<div class=\"cta-feature-item\">
  7092. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  7093. \t\t\t\t\t\t\t\t\t<span>Plateforme 100% sécurisée</span>
  7094. \t\t\t\t\t\t\t\t</div>
  7095. \t\t\t\t\t\t\t\t<div class=\"cta-feature-item\">
  7096. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  7097. \t\t\t\t\t\t\t\t\t<span>Support client 24/7</span>
  7098. \t\t\t\t\t\t\t\t</div>
  7099. \t\t\t\t\t\t\t\t<div class=\"cta-feature-item\">
  7100. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  7101. \t\t\t\t\t\t\t\t\t<span>Paiements multiples</span>
  7102. \t\t\t\t\t\t\t\t</div>
  7103. \t\t\t\t\t\t\t</div>
  7104. \t\t\t\t\t\t\t<div class=\"cta-buttons\">
  7105. \t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn cta-button-primary\" onclick=\"openReadyModal()\">
  7106. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-rocket me-2\"></i>
  7107. \t\t\t\t\t\t\t\t\tPrêt à commencer ?
  7108. \t\t\t\t\t\t\t\t</button>
  7109. \t\t\t\t\t\t\t\t<a href=\"{{ path('ui_listing') }}\" class=\"btn cta-button-secondary\">
  7110. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-magnifier me-2\"></i>
  7111. \t\t\t\t\t\t\t\t\tVoir les produits
  7112. \t\t\t\t\t\t\t\t</a>
  7113. \t\t\t\t\t\t\t</div>
  7114. \t\t\t\t\t\t</div>
  7115. \t\t\t\t\t</div>
  7116. \t\t\t\t\t<div class=\"col-lg-6\">
  7117. \t\t\t\t\t\t<div class=\"cta-image-wrapper\">
  7118. \t\t\t\t\t\t\t<div class=\"cta-decoration\"></div>
  7119. \t\t\t\t\t\t\t<img src=\"{{ asset('Start.png') }}\" alt=\"MaketOu\" class=\"cta-image\">
  7120. \t\t\t\t\t\t</div>
  7121. \t\t\t\t\t</div>
  7122. \t\t\t\t</div>
  7123. \t\t\t</div>
  7124. \t\t</div>
  7125. \t</section>
  7126. {% endblock %}
  7128. {% block javascripts %}
  7129. \t<script src=\"{{ asset('ui/js/product-unified.js') }}\"></script>
  7130. \t<script>
  7131. \t\twindow.openReadyModal = function () {
  7132. \t\t\tconst modalEl = document.getElementById('readyModal');
  7133. \t\t\tif (!modalEl) {
  7134. \t\t\t\tconsole.error('readyModal introuvable');
  7135. \t\t\t\treturn;
  7136. \t\t\t}
  7137. \t\t\tif (typeof bootstrap === 'undefined' || !bootstrap.Modal) {
  7138. \t\t\t\tconsole.error('Bootstrap Modal non chargé');
  7139. \t\t\t\treturn;
  7140. \t\t\t}
  7141. \t\t\tconst modalInstance = bootstrap.Modal.getOrCreateInstance(modalEl);
  7142. \t\t\tmodalInstance.show();
  7143. \t\t};
  7144. \t</script>
  7145. \t<script>
  7146. \t\t// Variables globales pour la navigation des images (si pas déjà définies)
  7147. \t\tif (typeof productImages === 'undefined') {
  7148. \t\t\twindow.productImages = {};
  7149. \t\t\twindow.currentImageIndex = {};
  7150. \t\t}
  7152. // Initialisation des données d'images pour les produits \"Produits en vedette\"
  7153. {% if featuredProducts is defined %}
  7154. {% for product in featuredProducts %}
  7155. {% if product.images is defined and product.images|length > 0 %}
  7156. productImages[{{ product.id }}] = [{% for img in product.images %}'{{ asset(img) }}'{% if not loop.last %},{% endif %}{% endfor %}];
  7157. currentImageIndex[{{ product.id }}] = 0;{% endif %}{% endfor %}{% endif %}
  7159. // Initialisation des données d'images pour les produits \"Nouveautés\"
  7160. {% if latestProducts is defined %}
  7161. {% for product in latestProducts %}
  7162. {% if product.images is defined and product.images|length > 0 %}
  7163. productImages[{{ product.id }}] = [{% for img in product.images %}'{{ asset(img) }}'{% if not loop.last %},{% endif %}{% endfor %}];
  7164. currentImageIndex[{{ product.id }}] = 0;{% endif %}{% endfor %}{% endif %}
  7166. console.log('SCRIPT LOADED - Featured Gallery');
  7167. (function () {
  7168. \t'use strict';
  7170. \tconst SECTION_CONFIGS = [
  7171. \t\t{ grid: '#featuredGalleryGrid', prev: '#featuredGalleryPrev', next: '#featuredGalleryNext' },
  7172. \t\t{ grid: '#latestGalleryGrid', prev: '#latestGalleryPrev', next: '#latestGalleryNext' }
  7173. \t];
  7175. \tfunction triggerRipple(button) {
  7176. \t\tbutton.classList.remove('btn-ripple');
  7177. \t\tvoid button.offsetWidth;
  7178. \t\tbutton.classList.add('btn-ripple');
  7179. \t\tsetTimeout(() => button.classList.remove('btn-ripple'), 350);
  7180. \t}
  7182. \tfunction initSectionCarousel(config) {
  7183. \t\tconst \$grid = \$(config.grid);
  7184. \t\tif (!\$grid.length) {
  7185. \t\t\tconsole.warn('Grid not found:', config.grid);
  7186. \t\t\treturn;
  7187. \t\t}
  7189. \t\tif (typeof \$.fn.owlCarousel !== 'function') {
  7190. \t\t\tconsole.warn('OwlCarousel n\\'est pas chargé pour', config.grid);
  7191. \t\t\treturn;
  7192. \t\t}
  7194. \t\t// Si déjà initialisé, récupérer l'instance existante
  7195. \t\tlet owlInstance;
  7196. \t\tif (\$grid.hasClass('owl-loaded')) {
  7197. \t\t\towlInstance = \$grid.data('owl.carousel');
  7198. \t\t\tconsole.log('OwlCarousel already initialized for', config.grid, owlInstance);
  7199. \t\t} else {
  7200. \t\t\tif (!\$grid.hasClass('owl-carousel')) {
  7201. \t\t\t\t\$grid.addClass('owl-carousel');
  7202. \t\t\t}
  7204. \t\t\towlInstance = \$grid.owlCarousel({
  7205. \t\t\t\tloop: true,
  7206. \t\t\t\tmargin: 30,
  7207. \t\t\t\tautoplay: true,
  7208. \t\t\t\tautoplayTimeout: 4800,
  7209. \t\t\t\tautoplayHoverPause: true,
  7210. \t\t\t\tsmartSpeed: 650,
  7211. \t\t\t\tnav: false,
  7212. \t\t\t\tdots: false,
  7213. \t\t\t\tresponsive: {
  7214. \t\t\t\t\t0: { items: 1, margin: 15 },
  7215. \t\t\t\t\t576: { items: 1.2, margin: 18 },
  7216. \t\t\t\t\t768: { items: 2, margin: 20 },
  7217. \t\t\t\t\t992: { items: 3, margin: 25 },
  7218. \t\t\t\t\t1400: { items: 4, margin: 30 }
  7219. \t\t\t\t}
  7220. \t\t\t});
  7221. \t\t\tconsole.log('OwlCarousel initialized for', config.grid, owlInstance);
  7222. \t\t}
  7224. \t\tconst \$prev = \$(config.prev);
  7225. \t\tconst \$next = \$(config.next);
  7227. \t\tif (\$prev.length) {
  7228. \t\t\t\$prev.off('click.carouselNav').on('click.carouselNav', function (e) {
  7229. \t\t\t\te.preventDefault();
  7230. \t\t\t\te.stopPropagation();
  7231. \t\t\t\tconsole.log('Prev clicked for', config.grid, 'Instance:', owlInstance);
  7232. \t\t\t\tif (owlInstance) {
  7233. \t\t\t\t\ttry {
  7234. \t\t\t\t\t\t\$grid.trigger('prev.owl.carousel');
  7235. \t\t\t\t\t\ttriggerRipple(this);
  7236. \t\t\t\t\t} catch (err) {
  7237. \t\t\t\t\t\tconsole.error('Error triggering prev:', err);
  7238. \t\t\t\t\t}
  7239. \t\t\t\t} else {
  7240. \t\t\t\t\tconsole.error('OwlCarousel instance not available');
  7241. \t\t\t\t}
  7242. \t\t\t});
  7243. \t\t} else {
  7244. \t\t\tconsole.warn('Prev button not found:', config.prev);
  7245. \t\t}
  7247. \t\tif (\$next.length) {
  7248. \t\t\t\$next.off('click.carouselNav').on('click.carouselNav', function (e) {
  7249. \t\t\t\te.preventDefault();
  7250. \t\t\t\te.stopPropagation();
  7251. \t\t\t\tconsole.log('Next clicked for', config.grid, 'Instance:', owlInstance);
  7252. \t\t\t\tif (owlInstance) {
  7253. \t\t\t\t\ttry {
  7254. \t\t\t\t\t\t\$grid.trigger('next.owl.carousel');
  7255. \t\t\t\t\t\ttriggerRipple(this);
  7256. \t\t\t\t\t} catch (err) {
  7257. \t\t\t\t\t\tconsole.error('Error triggering next:', err);
  7258. \t\t\t\t\t}
  7259. \t\t\t\t} else {
  7260. \t\t\t\t\tconsole.error('OwlCarousel instance not available');
  7261. \t\t\t\t}
  7262. \t\t\t});
  7263. \t\t} else {
  7264. \t\t\tconsole.warn('Next button not found:', config.next);
  7265. \t\t}
  7266. \t}
  7268. \tfunction ensureOwl(attempt = 0) {
  7269. \t\tif (window.jQuery && typeof \$.fn !== 'undefined' && typeof \$.fn.owlCarousel === 'function') {
  7270. \t\t\tSECTION_CONFIGS.forEach(initSectionCarousel);
  7271. \t\t} else if (attempt < 15) {
  7272. \t\t\tsetTimeout(() => ensureOwl(attempt + 1), 200);
  7273. \t\t} else {
  7274. \t\t\tconsole.warn('OwlCarousel non disponible après plusieurs tentatives');
  7275. \t\t}
  7276. \t}
  7278. \tdocument.addEventListener('DOMContentLoaded', function () {
  7279. \t\tensureOwl();
  7280. \t});
  7281. })();
  7283. document.addEventListener('DOMContentLoaded', function () { // Animation des cartes au scroll
  7284. const observerOptions = {
  7285. threshold: 0.1,
  7286. rootMargin: '0px 0px -50px 0px'
  7287. };
  7289. const observer = new IntersectionObserver(function (entries) {
  7290. entries.forEach(entry => {
  7291. if (entry.isIntersecting) {
  7292. entry.target.style.opacity = '1';
  7293. entry.target.style.transform = 'translateY(0)';
  7294. }
  7295. });
  7296. }, observerOptions);
  7298. // Observer toutes les cartes
  7299. document.querySelectorAll('.stats-card, .category-card, .product-card, .feature-card').forEach(card => {
  7300. card.style.opacity = '0';
  7301. card.style.transform = 'translateY(30px)';
  7302. card.style.transition = 'all 0.6s ease';
  7303. observer.observe(card);
  7304. });
  7306. // Compteur animé pour les statistiques
  7307. function animateCounter(element, target, duration = 2000) {
  7308. let start = 0;
  7309. const increment = target / (duration / 16);
  7311. function updateCounter() {
  7312. start += increment;
  7313. if (start < target) {
  7314. element.textContent = Math.floor(start).toLocaleString();
  7315. requestAnimationFrame(updateCounter);
  7316. } else {
  7317. element.textContent = target.toLocaleString();
  7318. }
  7319. }
  7321. updateCounter();
  7322. }
  7324. // Animer les compteurs quand ils sont visibles
  7325. const statsObserver = new IntersectionObserver(function (entries) {
  7326. entries.forEach(entry => {
  7327. if (entry.isIntersecting) {
  7328. const numberElement = entry.target.querySelector('.stats-number');
  7329. const target = parseInt(numberElement.textContent.replace(/,/g, ''));
  7330. animateCounter(numberElement, target);
  7331. statsObserver.unobserve(entry.target);
  7332. }
  7333. });
  7334. });
  7336. document.querySelectorAll('.stats-card').forEach(card => {
  7337. statsObserver.observe(card);
  7338. });
  7340. // Gestion de la newsletter
  7341. const newsletterForm = document.querySelector('.newsletter-form');
  7342. if (newsletterForm) {
  7343. newsletterForm.addEventListener('submit', function (e) {
  7344. e.preventDefault();
  7345. const email = this.querySelector('input[type=\"email\"]').value;
  7346. const button = this.querySelector('button');
  7347. const originalText = button.innerHTML;
  7349. // Désactiver le bouton
  7350. button.disabled = true;
  7351. button.innerHTML = '<i class=\"lnr lnr-spinner me-2\"></i>Inscription...';
  7353. // Envoyer la requête
  7354. fetch('{{ path(\"ui_newsletter_subscribe\") }}', {
  7355. method: 'POST',
  7356. headers: {
  7357. 'Content-Type': 'application/x-www-form-urlencoded',
  7358. 'X-Requested-With': 'XMLHttpRequest'
  7359. },
  7360. body: 'email=' + encodeURIComponent(email)
  7361. }).then(response => response.json()).then(data => {
  7362. if (data.success) {
  7363. button.innerHTML = '<i class=\"lnr lnr-check me-2\"></i>Inscription réussie !';
  7364. button.classList.remove('btn-warning');
  7365. button.classList.add('btn-success');
  7366. this.reset();
  7367. } else {
  7368. button.innerHTML = '<i class=\"lnr lnr-warning me-2\"></i>Erreur';
  7369. button.classList.remove('btn-warning');
  7370. button.classList.add('btn-danger');
  7371. }
  7373. setTimeout(() => {
  7374. button.innerHTML = originalText;
  7375. button.classList.remove('btn-success', 'btn-danger');
  7376. button.classList.add('btn-warning');
  7377. button.disabled = false;
  7378. }, 3000);
  7379. }).catch(error => {
  7380. console.error('Erreur:', error);
  7381. button.innerHTML = '<i class=\"lnr lnr-warning me-2\"></i>Erreur';
  7382. button.classList.remove('btn-warning');
  7383. button.classList.add('btn-danger');
  7385. setTimeout(() => {
  7386. button.innerHTML = originalText;
  7387. button.classList.remove('btn-danger');
  7388. button.classList.add('btn-warning');
  7389. button.disabled = false;
  7390. }, 3000);
  7391. });
  7392. });
  7393. }
  7394. });
  7396. // Effet parallaxe léger pour le hero
  7397. window.addEventListener('scroll', function () {
  7398. const scrolled = window.pageYOffset;
  7399. const hero = document.querySelector('.hero-banner');
  7400. if (hero) {
  7401. hero.style.transform = `translateY(\${
  7402. scrolled * 0.5
  7403. }px)`;
  7404. }
  7405. });
  7406. });
  7408. // Fonction pour afficher toutes les catégories
  7409. function showAllCategories () {
  7410. const container = document.getElementById('productCategoriesContainer');
  7411. const btn = document.getElementById('showAllCategoriesBtn');{% if allCategories|length > 8 %}{% for category in allCategories %}{% if loop.index > 8 %}const categoryHtml {{ loop.index }} = `
  7412.         <div class=\"col-lg-3 col-md-4 col-sm-6 mb-4\">
  7413.             <div class=\"category-card-custom\">
  7414.                 <div class=\"category-image-wrapper\">
  7415.                     <div class=\"category-image\" style=\"background-image: url('{% if category.bannerImage %}{{ asset('uploads/categories/banner/' ~ category.bannerImage) }}{% else %}{{ asset('ui/img/category/cat-' ~ loop.index ~ '.jpg') }}{% endif %}')\">
  7416.                         <div class=\"category-overlay-custom\">
  7417.                             <div class=\"category-icon-wrapper\">
  7418.                                 <i class=\"lnr lnr-tag\" style=\"font-size: 3rem;\"></i>
  7419.                                 <h4 class=\"mt-3\">{{ category.name }}</h4>
  7420.                             </div>
  7421.                         </div>
  7422.                     </div>
  7423.                 </div>
  7424.                 <div class=\"category-content p-3\">
  7425.                     <h5 class=\"mb-2\">{{ category.name }}</h5>
  7426.                     {% if category.description %}
  7427.                         <p class=\"text-muted mb-3 small\">{{ category.description|striptags|slice(0, 60) }}{% if category.description|striptags|length > 60 %}...{% endif %}</p>
  7428.                     {% endif %}
  7429.                     <a href=\"{{ path('ui_listing', {'category': category.slug}) }}\" class=\"btn btn-primary-custom btn-sm w-100\">
  7430.                         Voir les produits
  7431.                     </a>
  7432.                 </div>
  7433.             </div>
  7434.         </div>
  7435.     `;
  7436. container.insertAdjacentHTML('beforeend', categoryHtml {{ loop.index }});{% endif %}{% endfor %}{% endif %}if (btn) 
  7437. btn.style.display = 'none';
  7441. }
  7443. // Fonction pour afficher toutes les catégories de boutiques
  7444. function showAllShopCategories () {
  7445. const container = document.getElementById('shopCategoriesContainer');
  7446. const btn = document.querySelector('[onclick=\"showAllShopCategories()\"]') ?. parentElement;{% if allShopCategories|length > 6 %}{% for shopCategory in allShopCategories %}{% if loop.index > 6 %}const shopCategoryHtml {{ loop.index }} = `
  7447.         <div class=\"col-lg-4 col-md-6 mb-4\">
  7448.             <a href=\"{{ path('ui_shops_list') }}?category={{ shopCategory.slug }}\" class=\"text-decoration-none\" style=\"display: block;\">
  7449.                 <div class=\"category-card-custom shop-category-clickable\">
  7450.                     <div class=\"category-image-wrapper\">
  7451.                         <div class=\"category-image\" style=\"background-image: url('{% if shopCategory.bannerImage %}{{ asset(shopCategory.bannerImage) }}{% else %}{{ asset('ui/img/category/shop-' ~ loop.index ~ '.jpg') }}{% endif %}')\">
  7452.                             <div class=\"category-overlay-custom\">
  7453.                                 <div class=\"category-icon-wrapper\">
  7454.                                     <i class=\"lnr lnr-store\" style=\"font-size: 3rem;\"></i>
  7455.                                     <h4 class=\"mt-3\">{{ shopCategory.name }}</h4>
  7456.                                     {% if shopCategory.description %}
  7457.                                         <p class=\"mt-2 px-3\">{{ shopCategory.description|striptags|slice(0, 100) }}{% if shopCategory.description|striptags|length > 100 %}...{% endif %}</p>
  7458.                                     {% endif %}
  7459.                                 </div>
  7460.                             </div>
  7461.                         </div>
  7462.                     </div>
  7463.                     <div class=\"category-content p-3\">
  7464.                         <h5 class=\"mb-2\">{{ shopCategory.name }}</h5>
  7465.                         {% if shopCategory.description %}
  7466.                             <p class=\"text-muted mb-3 small\">{{ shopCategory.description|striptags|slice(0, 80) }}{% if shopCategory.description|striptags|length > 80 %}...{% endif %}</p>
  7467.                         {% endif %}
  7468.                         <span class=\"btn btn-primary-custom btn-sm w-100\">
  7469.                             Voir les boutiques <i class=\"lnr lnr-arrow-right ms-2\"></i>
  7470.                         </span>
  7471.                     </div>
  7472.                 </div>
  7473.             </a>
  7474.         </div>
  7475.     `;
  7476. container.insertAdjacentHTML('beforeend', shopCategoryHtml {{ loop.index }});{% endif %}{% endfor %}{% endif %}if (btn) 
  7477. btn.style.display = 'none';
  7481. }
  7483.     // Initialiser les carousels
  7484.     <script src=\"{{ asset('ui/js/product-unified.js') }}\"></script>
  7485.     <script>
  7486.         document.addEventListener('DOMContentLoaded', function() {
  7487.             // Init featured products images
  7488.             {% if featuredProducts is defined %}
  7489.                 {% for product in featuredProducts %}
  7490.                     {% if product.images is defined and product.images|length > 0 %}
  7491.                         if (typeof initProductImages === 'function') {
  7492.                             initProductImages({{ product.id }}, {{ product.images|json_encode|raw }});
  7493.                         }
  7494.                     {% endif %}
  7495.                 {% endfor %}
  7496.             {% endif %}
  7498.             // Init latest products images
  7499.             {% if latestProducts is defined %}
  7500.                 {% for product in latestProducts %}
  7501.                     {% if product.images is defined and product.images|length > 0 %}
  7502.                         if (typeof initProductImages === 'function') {
  7503.                             initProductImages({{ product.id }}, {{ product.images|json_encode|raw }});
  7504.                         }
  7505.                     {% endif %}
  7506.                 {% endfor %}
  7507.             {% endif %}
  7508.         });
  7509.     </script>
  7510.     <script>
  7511.     \$(document).ready(function () { // Carousel bannière principale
  7512. if (\$('.active-banner-slider').length) {
  7513. \$('.active-banner-slider').owlCarousel({
  7514. items: 1,
  7515. loop: true,
  7516. autoplay: true,
  7517. autoplayTimeout: 6000,
  7518. autoplayHoverPause: true,
  7519. nav: true,
  7520. dots: true,
  7521. navText: [
  7522. '<i class=\"lnr lnr-chevron-left\"></i>', '<i class=\"lnr lnr-chevron-right\"></i>'
  7523. ],
  7524. smartSpeed: 1000,
  7525. animateOut: 'fadeOut',
  7526. animateIn: 'fadeIn',
  7527. responsive: {
  7528. 0: {
  7529. items: 1,
  7530. nav: true,
  7531. dots: true
  7532. },
  7533. 768: {
  7534. items: 1,
  7535. nav: true,
  7536. dots: true
  7537. },
  7538. 992: {
  7539. items: 1,
  7540. nav: true,
  7541. dots: true
  7542. }
  7543. }
  7544. });
  7545. }
  7547. // Animation d'apparition pour les cartes produits
  7548. const observerOptions = {
  7549. threshold: 0.1,
  7550. rootMargin: '0px 0px -50px 0px'
  7551. };
  7553. const productObserver = new IntersectionObserver(function (entries) {
  7554. entries.forEach(entry => {
  7555. if (entry.isIntersecting) {
  7556. entry.target.style.opacity = '1';
  7557. entry.target.style.transform = 'translateY(0)';
  7558. }
  7559. });
  7560. }, observerOptions);
  7562. document.querySelectorAll('.product-card-modern').forEach((card, index) => {
  7563. card.style.opacity = '0';
  7564. card.style.transform = 'translateY(20px)';
  7565. card.style.transition = `opacity 0.6s ease \${
  7566. index * 0.1
  7567. }s, transform 0.6s ease \${
  7568. index * 0.1
  7569. }s`;
  7570. productObserver.observe(card);
  7571. });
  7572. });
  7573. \t</script>
  7575. \t<!-- Modal \"Prêt à commencer ?\" -->
  7576. \t<div class=\"modal fade\" id=\"readyModal\" tabindex=\"-1\">
  7577. \t\t<div class=\"modal-dialog modal-dialog-centered\">
  7578. \t\t\t<div class=\"modal-content\">
  7579. \t\t\t\t<div class=\"modal-header\">
  7580. \t\t\t\t\t<h5 class=\"modal-title\">
  7581. \t\t\t\t\t\t<i class=\"lnr lnr-rocket me-2\"></i>Prêt à commencer ?
  7582. \t\t\t\t\t</h5>
  7583. \t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button>
  7584. \t\t\t\t</div>
  7585. \t\t\t\t<div class=\"modal-body\">
  7586. \t\t\t\t\t{% if app.user %}
  7587. \t\t\t\t\t\t{% if app.user.kycStatus == 'verified' %}
  7588. \t\t\t\t\t\t\t<div class=\"text-center\">
  7589. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\" style=\"font-size: 4rem; color: #28a745;\"></i>
  7590. \t\t\t\t\t\t\t\t<h4 class=\"mt-3\">Votre compte est vérifié !</h4>
  7591. \t\t\t\t\t\t\t\t<p class=\"text-muted\">Vous pouvez commencer à utiliser MaketOu en toute sérénité.</p>
  7592. \t\t\t\t\t\t\t\t<div class=\"mt-4\">
  7593. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('seller_index') }}\" class=\"btn btn-primary me-2\">
  7594. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store me-1\"></i>Ouvrir ma boutique
  7595. \t\t\t\t\t\t\t\t\t</a>
  7596. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_listing') }}\" class=\"btn btn-outline-primary\">
  7597. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-magnifier me-1\"></i>Voir les produits
  7598. \t\t\t\t\t\t\t\t\t</a>
  7599. \t\t\t\t\t\t\t\t</div>
  7600. \t\t\t\t\t\t\t</div>
  7601. \t\t\t\t\t\t{% else %}
  7602. \t\t\t\t\t\t\t<div class=\"text-center\">
  7603. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-shield\" style=\"font-size: 4rem; color: #ffa200;\"></i>
  7604. \t\t\t\t\t\t\t\t<h4 class=\"mt-3\">Vérification requise</h4>
  7605. \t\t\t\t\t\t\t\t<p class=\"text-muted\">Pour utiliser toutes les fonctionnalités de MaketOu, vous devez compléter votre vérification KYC.</p>
  7606. \t\t\t\t\t\t\t\t<div class=\"mt-4\">
  7607. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_account_kyc') }}\" class=\"btn btn-primary btn-lg\">
  7608. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle me-1\"></i> <span class=\"d-none d-md-inline\">Commencer la vérification</span>
  7609. \t\t\t\t\t\t\t\t\t</a>
  7610. \t\t\t\t\t\t\t\t</div>
  7611. \t\t\t\t\t\t\t</div>
  7612. \t\t\t\t\t\t{% endif %}
  7613. \t\t\t\t\t{% else %}
  7614. \t\t\t\t\t\t<div class=\"text-center\">
  7615. \t\t\t\t\t\t\t<i class=\"lnr lnr-user\" style=\"font-size: 4rem; color: #007bff;\"></i>
  7616. \t\t\t\t\t\t\t<h4 class=\"mt-3\">Connectez-vous pour commencer</h4>
  7617. \t\t\t\t\t\t\t<p class=\"text-muted\">Créez un compte ou connectez-vous pour accéder à toutes les fonctionnalités de MaketOu.</p>
  7618. \t\t\t\t\t\t\t<div class=\"mt-4\">
  7619. \t\t\t\t\t\t\t\t<a href=\"{{ path('ui_app_login') }}\" class=\"btn btn-primary btn-lg me-2\">
  7620. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-enter me-1\"></i> Se connecter
  7621. \t\t\t\t\t\t\t\t</a>
  7622. \t\t\t\t\t\t\t\t<a href=\"{{ path('ui_app_register') }}\" class=\"btn btn-outline-primary btn-lg\">
  7623. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-user-plus me-1\"></i> S'inscrire
  7624. \t\t\t\t\t\t\t\t</a>
  7625. \t\t\t\t\t\t\t</div>
  7626. \t\t\t\t\t\t</div>
  7627. \t\t\t\t\t{% endif %}
  7628. \t\t\t\t</div>
  7629. \t\t\t</div>
  7630. \t\t</div>
  7631. \t</div>
  7632. {% endblock %}
  7633. ", "home/index.html.twig", "/home/u540977899/domains/maketou-ht.com/public_html/templates/home/index.html.twig");
  7634.     }
  7635. }