var/cache/dev/twig/9c/9c0865ea86947429ecb405c3804c305a.php line 46

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_3fa228d84c2cefb05611b8dc23d1ea4e 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/* Responsive Styles */
  339. \t\t@media(max-width: 991.98px) {
  340. \t\t\t.hero-banner {
  341. \t\t\t\tpadding: 60px 0;
  342. \t\t\t}
  344. \t\t\t.stats-number {
  345. \t\t\t\tfont-size: 2.5rem;
  346. \t\t\t}
  348. \t\t\t.section-title h2 {
  349. \t\t\t\tfont-size: 2rem;
  350. \t\t\t}
  351. \t\t\t
  352. \t\t\t.stats-card {
  353. \t\t\t\tmargin-bottom: 1.5rem;
  354. \t\t\t}
  355. \t\t}
  357. \t\t@media(max-width: 767.98px) {
  358. \t\t\t.hero-banner {
  359. \t\t\t\tpadding: 40px 0;
  360. \t\t\t}
  362. \t\t\t.hero-content h1 {
  363. \t\t\t\tfont-size: 1.75rem;
  364. \t\t\t}
  366. \t\t\t.stats-number {
  367. \t\t\t\tfont-size: 2rem;
  368. \t\t\t}
  370. \t\t\t.stats-label {
  371. \t\t\t\tfont-size: 0.9rem;
  372. \t\t\t}
  374. \t\t\t.section-title h2 {
  375. \t\t\t\tfont-size: 1.75rem;
  376. \t\t\t}
  378. \t\t\t.section-title p {
  379. \t\t\t\tfont-size: 1rem;
  380. \t\t\t}
  381. \t\t\t
  382. \t\t\t.category-card,
  383. \t\t\t.product-card {
  384. \t\t\t\tmargin-bottom: 1.5rem;
  385. \t\t\t}
  386. \t\t\t
  387. \t\t\t.category-image {
  388. \t\t\t\theight: 150px;
  389. \t\t\t}
  390. \t\t\t
  391. \t\t\t.product-image {
  392. \t\t\t\theight: 200px;
  393. \t\t\t}
  394. \t\t\t
  395. \t\t\t.feature-card {
  396. \t\t\t\tmargin-bottom: 1.5rem;
  397. \t\t\t}
  398. \t\t\t
  399. \t\t\t.newsletter-section {
  400. \t\t\t\tpadding: 40px 0;
  401. \t\t\t}
  402. \t\t}
  404. \t\t@media(max-width: 575.98px) {
  405. \t\t\t.hero-banner {
  406. \t\t\t\tpadding: 30px 0;
  407. \t\t\t}
  409. \t\t\t.hero-content h1 {
  410. \t\t\t\tfont-size: 1.5rem;
  411. \t\t\t}
  413. \t\t\t.stats-card {
  414. \t\t\t\tpadding: 1.5rem;
  415. \t\t\t}
  417. \t\t\t.stats-number {
  418. \t\t\t\tfont-size: 1.75rem;
  419. \t\t\t}
  421. \t\t\t.section-title h2 {
  422. \t\t\t\tfont-size: 1.5rem;
  423. \t\t\t}
  424. \t\t\t
  425. \t\t\t.category-image {
  426. \t\t\t\theight: 120px;
  427. \t\t\t}
  428. \t\t\t
  429. \t\t\t.product-image {
  430. \t\t\t\theight: 180px;
  431. \t\t\t}
  432. \t\t\t
  433. \t\t\t.product-info {
  434. \t\t\t\tpadding: 1rem;
  435. \t\t\t}
  436. \t\t\t
  437. \t\t\t.product-title {
  438. \t\t\t\tfont-size: 1rem;
  439. \t\t\t}
  440. \t\t\t
  441. \t\t\t.product-price {
  442. \t\t\t\tfont-size: 1.25rem;
  443. \t\t\t}
  444. \t\t}
  446. \t\t/* Styles modernes pour le carousel de bannière */
  447. \t\t.banner-area-modern {
  448. \t\t\tposition: relative;
  449. \t\t\twidth: 100%;
  450. \t\t\tmin-height: 500px;
  451. \t\t\tbackground: url('";
  452.         // line 355
  453.         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);
  454.         yield "') center center no-repeat;
  455. \t\t\tbackground-size: cover;
  456. \t\t\toverflow: hidden;
  457. \t\t\tpadding: 60px 0;
  458. \t\t}
  460. \t\t.banner-area-modern::before {
  461. \t\t\tcontent: '';
  462. \t\t\tposition: absolute;
  463. \t\t\ttop: 0;
  464. \t\t\tleft: 0;
  465. \t\t\twidth: 100%;
  466. \t\t\theight: 100%;
  467. \t\t\tbackground: rgba(0, 0, 0, 0.1);
  468. \t\t\tz-index: 1;
  469. \t\t}
  471. \t\t.banner-carousel-wrapper {
  472. \t\t\tposition: relative;
  473. \t\t\twidth: 100%;
  474. \t\t\theight: 100%;
  475. \t\t\tz-index: 2;
  476. \t\t}
  478. \t\t.banner-slide-item {
  479. \t\t\tmin-height: 500px;
  480. \t\t\tdisplay: flex;
  481. \t\t\talign-items: center;
  482. \t\t\tpadding: 40px 0;
  483. \t\t}
  485. \t\t.banner-content-modern {
  486. \t\t\tposition: relative;
  487. \t\t\tz-index: 2;
  488. \t\t\tpadding: 30px;
  489. \t\t\tbackground: rgba(255, 255, 255, 0.98);
  490. \t\t\tborder-radius: 20px;
  491. \t\t\tbox-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  492. \t\t\tbackdrop-filter: blur(10px);
  493. \t\t\tanimation: fadeInUp 0.8s ease;
  494. \t\t}
  496. \t\t@keyframes fadeInUp {
  497. \t\t\tfrom {
  498. \t\t\t\topacity: 0;
  499. \t\t\t\ttransform: translateY(30px);
  500. \t\t\t}
  501. \t\t\tto {
  502. \t\t\t\topacity: 1;
  503. \t\t\t\ttransform: translateY(0);
  504. \t\t\t}
  505. \t\t}
  507. \t\t.banner-badge {
  508. \t\t\tdisplay: inline-block;
  509. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  510. \t\t\tcolor: white;
  511. \t\t\tpadding: 8px 20px;
  512. \t\t\tborder-radius: 50px;
  513. \t\t\tfont-size: 0.85rem;
  514. \t\t\tfont-weight: 600;
  515. \t\t\tmargin-bottom: 20px;
  516. \t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.4);
  517. \t\t}
  519. \t\t.banner-badge i {
  520. \t\t\tmargin-right: 5px;
  521. \t\t}
  523. \t\t.banner-title-modern {
  524. \t\t\tfont-size: 2.0rem;
  525. \t\t\tfont-weight: 600;
  526. \t\t\tcolor: #2c3e50;
  527. \t\t\tmargin-bottom: 20px;
  528. \t\t\tline-height: 1.2;
  529. \t\t\tbackground: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  530. \t\t\t-webkit-background-clip: text;
  531. \t\t\t-webkit-text-fill-color: transparent;
  532. \t\t\tbackground-clip: text;
  533. \t\t}
  535. \t\t.banner-description-modern {
  536. \t\t\tfont-size: 1.1rem;
  537. \t\t\tcolor: #555;
  538. \t\t\tline-height: 1.8;
  539. \t\t\tmargin-bottom: 25px;
  540. \t\t}
  542. \t\t.banner-price-modern {
  543. \t\t\tdisplay: flex;
  544. \t\t\talign-items: center;
  545. \t\t\tgap: 15px;
  546. \t\t\tmargin-bottom: 30px;
  547. \t\t\tpadding: 15px 20px;
  548. \t\t\tbackground: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  549. \t\t\tborder-radius: 12px;
  550. \t\t\tborder-left: 4px solid #ffa200;
  551. \t\t}
  553. \t\t.banner-price-modern .price-label {
  554. \t\t\tfont-size: 0.9rem;
  555. \t\t\tcolor: #666;
  556. \t\t\tfont-weight: 600;
  557. \t\t\ttext-transform: uppercase;
  558. \t\t\tletter-spacing: 1px;
  559. \t\t}
  561. \t\t.banner-price-modern .price-value {
  562. \t\t\tfont-size: 1.2rem;
  563. \t\t\tfont-weight: 600;
  564. \t\t\tcolor: #ffa200;
  565. \t\t}
  567. \t\t.banner-actions-modern {
  568. \t\t\tdisplay: flex;
  569. \t\t\tgap: 15px;
  570. \t\t\tflex-wrap: wrap;
  571. \t\t}
  573. \t\t.btn-banner-primary {
  574. \t\t\tdisplay: inline-flex;
  575. \t\t\talign-items: center;
  576. \t\t\tgap: 10px;
  577. \t\t\tpadding: 15px 35px;
  578. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  579. \t\t\tcolor: white;
  580. \t\t\ttext-decoration: none;
  581. \t\t\tborder-radius: 50px;
  582. \t\t\tfont-weight: 600;
  583. \t\t\tfont-size: 1rem;
  584. \t\t\ttransition: all 0.3s ease;
  585. \t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.4);
  586. \t\t}
  588. \t\t.btn-banner-primary:hover {
  589. \t\t\ttransform: translateY(-3px);
  590. \t\t\tbox-shadow: 0 8px 25px rgba(255, 162, 0, 0.6);
  591. \t\t\tcolor: white;
  592. \t\t}
  594. \t\t.btn-banner-primary .btn-icon {
  595. \t\t\ttransition: transform 0.3s ease;
  596. \t\t}
  598. \t\t.btn-banner-primary:hover .btn-icon {
  599. \t\t\ttransform: translateX(5px);
  600. \t\t}
  602. \t\t.btn-banner-secondary {
  603. \t\t\tdisplay: inline-flex;
  604. \t\t\talign-items: center;
  605. \t\t\tgap: 8px;
  606. \t\t\tpadding: 15px 25px;
  607. \t\t\tbackground: white;
  608. \t\t\tcolor: #667eea;
  609. \t\t\ttext-decoration: none;
  610. \t\t\tborder-radius: 50px;
  611. \t\t\tfont-weight: 600;
  612. \t\t\tfont-size: 0.95rem;
  613. \t\t\tborder: 2px solid #667eea;
  614. \t\t\ttransition: all 0.3s ease;
  615. \t\t}
  617. \t\t.btn-banner-secondary:hover {
  618. \t\t\tbackground: #667eea;
  619. \t\t\tcolor: white;
  620. \t\t\ttransform: translateY(-3px);
  621. \t\t\tbox-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  622. \t\t}
  624. \t\t.banner-image-modern {
  625. \t\t\tposition: relative;
  626. \t\t\theight: 450px;
  627. \t\t\tdisplay: flex;
  628. \t\t\talign-items: center;
  629. \t\t\tjustify-content: center;
  630. \t\t}
  632. \t\t.banner-image-wrapper {
  633. \t\t\tposition: relative;
  634. \t\t\twidth: 100%;
  635. \t\t\theight: 100%;
  636. \t\t\tborder-radius: 20px;
  637. \t\t\toverflow: hidden;
  638. \t\t\tbox-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  639. \t\t\tbackground: white;
  640. \t\t\tpadding: 20px;
  641. \t\t}
  643. \t\t.banner-img {
  644. \t\t\twidth: 100%;
  645. \t\t\theight: 100%;
  646. \t\t\tobject-fit: contain;
  647. \t\t\tborder-radius: 15px;
  648. \t\t\ttransition: transform 0.5s ease;
  649. \t\t}
  651. \t\t.banner-slide-item:hover .banner-img {
  652. \t\t\ttransform: scale(1.05);
  653. \t\t}
  655. \t\t.banner-image-overlay {
  656. \t\t\tposition: absolute;
  657. \t\t\ttop: 0;
  658. \t\t\tleft: 0;
  659. \t\t\twidth: 100%;
  660. \t\t\theight: 100%;
  661. \t\t\tbackground: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  662. \t\t\tborder-radius: 15px;
  663. \t\t\tpointer-events: none;
  664. \t\t}
  666. \t\t/* Styles pour Owl Carousel */
  667. \t\t.banner-area-modern .owl-nav {
  668. \t\t\tposition: absolute;
  669. \t\t\ttop: 50%;
  670. \t\t\ttransform: translateY(-50%);
  671. \t\t\twidth: 100%;
  672. \t\t\tdisplay: flex;
  673. \t\t\tjustify-content: space-between;
  674. \t\t\talign-items: center;
  675. \t\t\tpadding: 0 20px;
  676. \t\t\tpointer-events: none;
  677. \t\t\tz-index: 10;
  678. \t\t\tleft: 0;
  679. \t\t\tright: 0;
  680. \t\t\tbox-sizing: border-box;
  681. \t\t}
  683. \t\t.banner-area-modern .owl-nav button {
  684. \t\t\twidth: 60px;
  685. \t\t\theight: 60px;
  686. \t\t\tmin-width: 60px;
  687. \t\t\tmin-height: 60px;
  688. \t\t\tbackground: #ffa200 !important;
  689. \t\t\tborder-radius: 50% !important;
  690. \t\t\tdisplay: flex !important;
  691. \t\t\talign-items: center;
  692. \t\t\tjustify-content: center;
  693. \t\t\tcolor: white !important;
  694. \t\t\tfont-size: 24px !important;
  695. \t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.4);
  696. \t\t\ttransition: all 0.3s ease;
  697. \t\t\tpointer-events: all;
  698. \t\t\tborder: none !important;
  699. \t\t\tposition: relative;
  700. \t\t\tflex-shrink: 0;
  701. \t\t\tmargin: 0;
  702. \t\t\tpadding: 0;
  703. \t\t\tline-height: 1;
  704. \t\t}
  706. \t\t.banner-area-modern .owl-nav button.owl-prev {
  707. \t\t\tmargin-right: auto;
  708. \t\t}
  710. \t\t.banner-area-modern .owl-nav button.owl-next {
  711. \t\t\tmargin-left: auto;
  712. \t\t}
  714. \t\t.banner-area-modern .owl-nav button:hover {
  715. \t\t\tbackground: #ff6b00 !important;
  716. \t\t\tcolor: white !important;
  717. \t\t\ttransform: scale(1.1);
  718. \t\t\tbox-shadow: 0 6px 20px rgba(255, 162, 0, 0.6);
  719. \t\t}
  721. \t\t.banner-area-modern .owl-nav button.disabled {
  722. \t\t\topacity: 0.5;
  723. \t\t\tcursor: not-allowed;
  724. \t\t}
  726. \t\t.banner-area-modern .owl-nav button.disabled:hover {
  727. \t\t\ttransform: scale(1);
  728. \t\t}
  730. \t\t.banner-area-modern .owl-dots {
  731. \t\t\tposition: absolute;
  732. \t\t\tbottom: 30px;
  733. \t\t\tleft: 50%;
  734. \t\t\ttransform: translateX(-50%);
  735. \t\t\tdisplay: flex;
  736. \t\t\tgap: 10px;
  737. \t\t\tz-index: 10;
  738. \t\t}
  740. \t\t.banner-area-modern .owl-dots button {
  741. \t\t\twidth: 12px;
  742. \t\t\theight: 12px;
  743. \t\t\tborder-radius: 50%;
  744. \t\t\tbackground: rgba(255, 255, 255, 0.6) !important;
  745. \t\t\tborder: 2px solid white !important;
  746. \t\t\ttransition: all 0.3s ease;
  747. \t\t\tmargin: 0 5px;
  748. \t\t}
  750. \t\t.banner-area-modern .owl-dots button.active {
  751. \t\t\tbackground: #ffa200 !important;
  752. \t\t\tborder-color: #ffa200 !important;
  753. \t\t\twidth: 30px;
  754. \t\t\tborder-radius: 6px;
  755. \t\t}
  757. \t\t/* Responsive */
  758. \t\t@media(max-width: 992px) {
  759. \t\t\t.banner-area-modern {
  760. \t\t\t\tmin-height: 450px;
  761. \t\t\t\tpadding: 40px 0;
  762. \t\t\t\tbackground-size: cover;
  763. \t\t\t\tbackground-position: center;
  764. \t\t\t}
  766. \t\t\t.banner-slide-item {
  767. \t\t\t\tmin-height: 450px;
  768. \t\t\t\tpadding: 30px 0;
  769. \t\t\t}
  771. \t\t\t.banner-title-modern {
  772. \t\t\t\tfont-size: 1.5rem;
  773. \t\t\t}
  775. \t\t\t.banner-description-modern {
  776. \t\t\t\tfont-size: 1rem;
  777. \t\t\t}
  779. \t\t\t.banner-image-modern {
  780. \t\t\t\theight: 350px;
  781. \t\t\t\tmargin-top: 30px;
  782. \t\t\t}
  784. \t\t\t.banner-content-modern {
  785. \t\t\t\tpadding: 25px;
  786. \t\t\t}
  787. \t\t}
  789. \t\t@media(max-width: 768px) {
  790. \t\t\t.banner-area-modern {
  791. \t\t\t\tmin-height: 400px;
  792. \t\t\t\tpadding: 30px 0;
  793. \t\t\t\tbackground-size: cover;
  794. \t\t\t\tbackground-position: center;
  795. \t\t\t}
  797. \t\t\t.banner-slide-item {
  798. \t\t\t\tmin-height: 400px;
  799. \t\t\t\tpadding: 20px 0;
  800. \t\t\t}
  802. \t\t\t.banner-title-modern {
  803. \t\t\t\tfont-size: 1.25rem;
  804. \t\t\t}
  806. \t\t\t.banner-description-modern {
  807. \t\t\t\tfont-size: 0.95rem;
  808. \t\t\t}
  810. \t\t\t.banner-image-modern {
  811. \t\t\t\theight: 280px;
  812. \t\t\t\tmargin-top: 20px;
  813. \t\t\t}
  815. \t\t\t.banner-content-modern {
  816. \t\t\t\tpadding: 20px;
  817. \t\t\t}
  819. \t\t\t.banner-price-modern .price-value {
  820. \t\t\t\tfont-size: 1.25rem;
  821. \t\t\t}
  823. \t\t\t.banner-actions-modern {
  824. \t\t\t\tflex-direction: column;
  825. \t\t\t}
  827. \t\t\t.btn-banner-primary,
  828. \t\t\t.btn-banner-secondary {
  829. \t\t\t\twidth: 100%;
  830. \t\t\t\tjustify-content: center;
  831. \t\t\t}
  833. \t\t\t.banner-area-modern .owl-nav button {
  834. \t\t\t\twidth: 50px;
  835. \t\t\t\theight: 50px;
  836. \t\t\t\tmin-width: 50px;
  837. \t\t\t\tmin-height: 50px;
  838. \t\t\t\tfont-size: 20px !important;
  839. \t\t\t\tbackground: #ffa200 !important;
  840. \t\t\t}
  842. \t\t\t.banner-area-modern .owl-nav button:hover {
  843. \t\t\t\tbackground: #ff6b00 !important;
  844. \t\t\t}
  845. \t\t}
  847. \t\t@media(max-width: 576px) {
  848. \t\t\t.banner-area-modern {
  849. \t\t\t\tmin-height: 350px;
  850. \t\t\t\tpadding: 0;
  851. \t\t\t\tbackground-size: cover;
  852. \t\t\t\tbackground-position: center;
  853. \t\t\t}
  855. \t\t\t.banner-slide-item {
  856. \t\t\t\tmin-height: 350px;
  857. \t\t\t}
  859. \t\t\t.banner-title-modern {
  860. \t\t\t\tfont-size: 1.25rem;
  861. \t\t\t}
  863. \t\t\t.banner-image-modern {
  864. \t\t\t\theight: 220px;
  865. \t\t\t}
  867. \t\t\t.banner-content-modern {
  868. \t\t\t\tpadding: 15px;
  869. \t\t\t}
  870. \t\t}
  872. \t\t/* Styles pour les catégories de boutiques cliquables */
  873. \t\t.shop-category-clickable {
  874. \t\t\tcursor: pointer;
  875. \t\t\ttransition: all 0.3s ease;
  876. \t\t\theight: 100%;
  877. \t\t}
  878. \t\t.shop-category-clickable:hover {
  879. \t\t\ttransform: translateY(-10px);
  880. \t\t\tbox-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  881. \t\t}
  882. \t\t.shop-category-clickable:hover .category-image {
  883. \t\t\ttransform: scale(1.1);
  884. \t\t}
  885. \t\t.shop-category-clickable:hover .btn-primary-custom {
  886. \t\t\tbackground: #e8910a;
  887. \t\t\ttransform: translateX(5px);
  888. \t\t}
  890. \t\t/* Styles pour les cartes de catégories personnalisées */
  891. \t\t.category-card-custom {
  892. \t\t\tborder-radius: 15px;
  893. \t\t\toverflow: hidden;
  894. \t\t\tbox-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  895. \t\t\ttransition: transform 0.3s ease, box-shadow 0.3s ease;
  896. \t\t\tbackground: white;
  897. \t\t\theight: 100%;
  898. \t\t}
  899. \t\t.category-card-custom:hover {
  900. \t\t\ttransform: translateY(-10px);
  901. \t\t\tbox-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  902. \t\t}
  903. \t\t.category-image-wrapper {
  904. \t\t\tposition: relative;
  905. \t\t\theight: 200px;
  906. \t\t\toverflow: hidden;
  907. \t\t}
  908. \t\t.category-image {
  909. \t\t\twidth: 100%;
  910. \t\t\theight: 100%;
  911. \t\t\tbackground-size: cover;
  912. \t\t\tbackground-position: center;
  913. \t\t\ttransition: transform 0.3s ease;
  914. \t\t}
  915. \t\t.category-card-custom:hover .category-image {
  916. \t\t\ttransform: scale(1.1);
  917. \t\t}
  918. \t\t.category-overlay-custom {
  919. \t\t\tposition: absolute;
  920. \t\t\ttop: 0;
  921. \t\t\tleft: 0;
  922. \t\t\twidth: 100%;
  923. \t\t\theight: 100%;
  924. \t\t\tbackground: rgba(0, 0, 0, 0.6);
  925. \t\t\tdisplay: flex;
  926. \t\t\talign-items: center;
  927. \t\t\tjustify-content: center;
  928. \t\t\topacity: 0;
  929. \t\t\ttransition: opacity 0.3s ease;
  930. \t\t\tcolor: white;
  931. \t\t}
  932. \t\t.category-card-custom:hover .category-overlay-custom {
  933. \t\t\topacity: 1;
  934. \t\t}
  935. \t\t.category-icon-wrapper {
  936. \t\t\ttext-align: center;
  937. \t\t}
  938. \t\t.category-icon-wrapper i {
  939. \t\t\tcolor: #ffa200;
  940. \t\t\tdisplay: block;
  941. \t\t}
  942. \t\t.category-icon-wrapper h4 {
  943. \t\t\tcolor: white;
  944. \t\t\tmargin-top: 10px;
  945. \t\t}
  947. \t\t/* Styles pour la galerie de produits en vedette */
  948. \t\t.featured-products-carousel-section {
  949. \t\t\tposition: relative;
  950. \t\t\toverflow: hidden;
  951. \t\t}
  953. \t\t.featured-gallery-wrapper {
  954. \t\t\tposition: relative;
  955. \t\t\tmax-width: 1400px;
  956. \t\t\tmargin: 0 auto;
  957. \t\t\tpadding: 0 15px;
  958. \t\t}
  960. \t\t.featured-gallery-container {
  961. \t\t\tposition: relative;
  962. \t\t\toverflow: visible;
  963. \t\t\tborder-radius: 12px;
  964. \t\t}
  966. \t\t.featured-gallery-grid {
  967. \t\t\tdisplay: flex;
  968. \t\t\tgap: 30px; /* Même espacement que dans listing (margin entre col-lg-4) */
  969. \t\t\tpadding: 10px 0;
  970. \t\t\toverflow-x: auto;
  971. \t\t\toverflow-y: hidden;
  972. \t\t\tscroll-behavior: smooth;
  973. \t\t\tscrollbar-width: none; /* Firefox */
  974. \t\t\t-ms-overflow-style: none; /* IE/Edge */
  975. \t\t\t-webkit-overflow-scrolling: touch; /* iOS smooth scroll */
  976. \t\t\twill-change: scroll-position;
  977. \t\t}
  979. \t\t.featured-gallery-grid::-webkit-scrollbar {
  980. \t\t\tdisplay: none; /* Chrome/Safari */
  981. \t\t}
  983. \t\t/* Mode OwlCarousel */
  984. \t\t.featured-gallery-grid.owl-carousel {
  985. \t\t\tdisplay: block;
  986. \t\t\toverflow: hidden;
  987. \t\t\tpadding: 25px 0;
  988. \t\t}
  990. \t\t.featured-gallery-grid.owl-carousel .owl-stage-outer {
  991. \t\t\toverflow: visible;
  992. \t\t}
  994. \t\t.featured-gallery-grid.owl-carousel .featured-gallery-item {
  995. \t\t\topacity: 1;
  996. \t\t\ttransform: none;
  997. \t\t\twidth: auto;
  998. \t\t\tmax-width: none;
  999. \t\t\tmargin: 0 15px;
  1000. \t\t}
  1002. \t\t.featured-gallery-grid.owl-carousel .owl-stage {
  1003. \t\t\tdisplay: flex;
  1004. \t\t}
  1006. \t\t.featured-gallery-item {
  1007. \t\t\tflex: 0 0 auto; /* Largeur automatique basée sur le contenu */
  1008. \t\t\twidth: 100%;
  1009. \t\t\tmax-width: 100%;
  1010. \t\t\topacity: 0;
  1011. \t\t\ttransform: translateY(20px) scale(0.95);
  1012. \t\t\tanimation: galleryItemFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  1013. \t\t\tanimation-delay: calc(var(--item-index, 0) * 0.05s);
  1014. \t\t}
  1016. \t\t/* Utiliser la même largeur que dans listing (col-lg-4 = ~33.33%) */
  1017. \t\t@media(min-width: 992px) {
  1018. \t\t\t.featured-gallery-item {
  1019. \t\t\t\tflex: 0 0 33.333333%;
  1020. \t\t\t\tmax-width: 25%;
  1021. \t\t\t}
  1022. \t\t}
  1024. \t\t@media(min-width: 768px) and(max-width: 991px) {
  1025. \t\t\t.featured-gallery-item {
  1026. \t\t\t\tflex: 0 0 50%;
  1027. \t\t\t\tmax-width: 50%;
  1028. \t\t\t}
  1029. \t\t}
  1031. \t\t@media(max-width: 767px) {
  1032. \t\t\t.featured-gallery-item {
  1033. \t\t\t\tflex: 0 0 100%;
  1034. \t\t\t\tmax-width: 100%;
  1035. \t\t\t}
  1036. \t\t}
  1038. \t\t/* Ajustements minimaux pour single-product dans le carrousel - utiliser les styles de main.css */
  1039. \t\t.featured-gallery-item .single-product {
  1040. \t\t\tmargin-bottom: 0; /* Override main.css margin-bottom: 50px */
  1041. \t\t\tmin-height: 480px;
  1042. \t\t\tdisplay: flex;
  1043. \t\t\tflex-direction: column;
  1044. \t\t\tpadding: 20px;
  1045. \t\t\tbackground: #fff;
  1046. \t\t\tborder-radius: 12px;
  1047. \t\t\tbox-shadow: 0 10px 30px rgba(15, 34, 58, 0.08);
  1048. \t\t\ttransition: transform 0.25s ease, box-shadow 0.25s ease;
  1049. \t\t}
  1051. \t\t.featured-gallery-item .single-product:hover {
  1052. \t\t\ttransform: translateY(-4px);
  1053. \t\t\tbox-shadow: 0 18px 40px rgba(15, 34, 58, 0.12);
  1054. \t\t}
  1056. \t\t/* S'assurer que les images s'affichent correctement - styles identiques à listing.html.twig */
  1057. \t\t.featured-gallery-item .single-product img {
  1058. \t\t\tmargin-bottom: 20px;
  1059. \t\t\twidth: 100%;
  1060. \t\t}
  1062. \t\t/* Styles pour product-image-container - identiques à listing.html.twig */
  1063. \t\t.featured-gallery-item .product-image-container {
  1064. \t\t\tposition: relative;
  1065. \t\t\toverflow: hidden;
  1066. \t\t\tborder-radius: 10px;
  1067. \t\t\theight: 260px;
  1068. \t\t\tdisplay: flex;
  1069. \t\t\talign-items: center;
  1070. \t\t\tjustify-content: center;
  1071. \t\t\tbackground: #f7f7fb;
  1072. \t\t\tmargin-bottom: 18px;
  1073. \t\t}
  1075. \t\t.featured-gallery-item .product-image-container:hover .main-product-img {
  1076. \t\t\ttransform: scale(1.05);
  1077. \t\t\ttransition: transform 0.3s ease;
  1078. \t\t}
  1080. \t\t.featured-gallery-item .product-image-container a {
  1081. \t\t\tdisplay: block;
  1082. \t\t\twidth: 100%;
  1083. \t\t\theight: 100%;
  1084. \t\t}
  1086. \t\t.featured-gallery-item .main-product-img {
  1087. \t\t\ttransition: transform 0.3s ease;
  1088. \t\t\twidth: 100% !important;
  1089. \t\t\theight: 100% !important;
  1090. \t\t\tobject-fit: cover;
  1091. \t\t\tobject-position: center;
  1092. \t\t\tdisplay: block;
  1093. \t\t\twill-change: transform, opacity;
  1094. \t\t}
  1096. \t\t.featured-gallery-item .main-product-img.image-fade {
  1097. \t\t\tanimation: imageFade 0.5s ease;
  1098. \t\t}
  1100. \t\t@keyframes imageFade {
  1101. \t\t\tfrom {
  1102. \t\t\t\topacity: 0;
  1103. \t\t\t\ttransform: scale(1.02);
  1104. \t\t\t}
  1105. \t\t\tto {
  1106. \t\t\t\topacity: 1;
  1107. \t\t\t\ttransform: scale(1);
  1108. \t\t\t}
  1109. \t\t}
  1111. \t\t.featured-gallery-item .product-details {
  1112. \t\t\tdisplay: flex;
  1113. \t\t\tflex-direction: column;
  1114. \t\t\theight: 100%;
  1115. \t\t}
  1117. \t\t.featured-gallery-item .prd-bottom {
  1118. \t\t\tmargin-top: auto;
  1119. \t\t}
  1121. \t\t/* Styles pour img-nav-btn - identiques à listing.html.twig */
  1122. \t\t.featured-gallery-item .img-nav-btn {
  1123. \t\t\tposition: absolute;
  1124. \t\t\ttop: 50%;
  1125. \t\t\ttransform: translateY(-50%);
  1126. \t\t\tbackground: rgba(0, 0, 0, 0.6);
  1127. \t\t\tcolor: white;
  1128. \t\t\tborder: none;
  1129. \t\t\twidth: 35px;
  1130. \t\t\theight: 35px;
  1131. \t\t\tborder-radius: 50%;
  1132. \t\t\tdisplay: flex;
  1133. \t\t\talign-items: center;
  1134. \t\t\tjustify-content: center;
  1135. \t\t\tcursor: pointer;
  1136. \t\t\ttransition: all 0.3s ease;
  1137. \t\t\tz-index: 10;
  1138. \t\t}
  1140. \t\t.featured-gallery-item .img-nav-btn:hover {
  1141. \t\t\tbackground: #095ad3;
  1142. \t\t\ttransform: translateY(-50%) scale(1.1);
  1143. \t\t}
  1145. \t\t.featured-gallery-item .img-nav-left {
  1146. \t\t\tleft: 10px;
  1147. \t\t}
  1149. \t\t.featured-gallery-item .img-nav-right {
  1150. \t\t\tright: 10px;
  1151. \t\t}
  1153. \t\t.featured-gallery-item .img-indicators {
  1154. \t\t\tposition: absolute;
  1155. \t\t\tbottom: 10px;
  1156. \t\t\tleft: 50%;
  1157. \t\t\ttransform: translateX(-50%);
  1158. \t\t\tdisplay: flex;
  1159. \t\t\tgap: 5px;
  1160. \t\t\tz-index: 10;
  1161. \t\t}
  1163. \t\t.featured-gallery-item .indicator {
  1164. \t\t\twidth: 8px;
  1165. \t\t\theight: 8px;
  1166. \t\t\tborder-radius: 50%;
  1167. \t\t\tbackground: rgba(255, 255, 255, 0.5);
  1168. \t\t\tcursor: pointer;
  1169. \t\t\tmargin-bottom: 10px;
  1170. \t\t\ttransition: all 0.3s ease;
  1171. \t\t\tborder: 1px solid rgba(255, 255, 255, 0.3);
  1172. \t\t}
  1174. \t\t.featured-gallery-item .indicator.active {
  1175. \t\t\tbackground: #ffa200;
  1176. \t\t\tborder-color: #ffa200;
  1177. \t\t\ttransform: scale(1.2);
  1178. \t\t}
  1180. \t\t.featured-gallery-item .indicator:hover {
  1181. \t\t\tbackground: rgba(255, 255, 255, 0.8);
  1182. \t\t}
  1184. \t\t/* Styles pour shop-info - identiques à listing.html.twig */
  1185. \t\t.featured-gallery-item .shop-info {
  1186. \t\t\tmargin: 8px 0;
  1187. \t\t\tpadding: 5px 0;
  1188. \t\t\tborder-bottom: 1px solid #f0f0f0;
  1189. \t\t}
  1191. \t\t.featured-gallery-item .shop-link {
  1192. \t\t\tcolor: #007bff;
  1193. \t\t\ttext-decoration: none;
  1194. \t\t\tfont-weight: 500;
  1195. \t\t}
  1197. \t\t.featured-gallery-item .shop-link:hover {
  1198. \t\t\tcolor: #ffa200;
  1199. \t\t\ttext-decoration: underline;
  1200. \t\t}
  1202. \t\t/* Les autres styles (product-details h6, price, prd-bottom, social-info) sont déjà définis dans main.css */
  1204. \t\t@keyframes galleryItemFadeIn {
  1205. \t\t\tfrom {
  1206. \t\t\t\topacity: 0;
  1207. \t\t\t\ttransform: translateY(20px) scale(0.95);
  1208. \t\t\t}
  1209. \t\t\tto {
  1210. \t\t\t\topacity: 1;
  1211. \t\t\t\ttransform: translateY(0) scale(1);
  1212. \t\t\t}
  1213. \t\t}
  1215. \t\t.featured-gallery-card {
  1216. \t\t\tdisplay: flex;
  1217. \t\t\tflex-direction: column;
  1218. \t\t\theight: 100%;
  1219. \t\t\tbackground: white;
  1220. \t\t\tborder-radius: 12px;
  1221. \t\t\toverflow: hidden;
  1222. \t\t\tbox-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  1223. \t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1224. \t\t\tborder: 1px solid #f0f0f0;
  1225. \t\t}
  1227. \t\t.featured-gallery-card:hover {
  1228. \t\t\ttransform: translateY(-5px);
  1229. \t\t\tbox-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  1230. \t\t\tborder-color: #ffa200;
  1231. \t\t}
  1233. \t\t.featured-gallery-image-wrapper {
  1234. \t\t\tposition: relative;
  1235. \t\t\twidth: 100%;
  1236. \t\t\tpadding-top: 100%; /* Ratio 1:1 pour une galerie carrée */
  1237. \t\t\toverflow: hidden;
  1238. \t\t\tbackground: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  1239. \t\t}
  1241. \t\t.featured-gallery-image {
  1242. \t\t\tposition: absolute;
  1243. \t\t\ttop: 0;
  1244. \t\t\tleft: 0;
  1245. \t\t\twidth: 100%;
  1246. \t\t\theight: 100%;
  1247. \t\t\tbackground-size: cover;
  1248. \t\t\tbackground-position: center;
  1249. \t\t\ttransition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  1250. \t\t}
  1252. \t\t.featured-gallery-card:hover .featured-gallery-image {
  1253. \t\t\ttransform: scale(1.08);
  1254. \t\t}
  1256. \t\t.featured-gallery-badge {
  1257. \t\t\tposition: absolute;
  1258. \t\t\ttop: 8px;
  1259. \t\t\tleft: 8px;
  1260. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  1261. \t\t\tcolor: white;
  1262. \t\t\tpadding: 4px 10px;
  1263. \t\t\tborder-radius: 15px;
  1264. \t\t\tfont-size: 12px;
  1265. \t\t\tfont-weight: 600;
  1266. \t\t\tz-index: 2;
  1267. \t\t\tbox-shadow: 0 2px 8px rgba(255, 162, 0, 0.4);
  1268. \t\t}
  1270. \t\t.featured-gallery-overlay {
  1271. \t\t\tposition: absolute;
  1272. \t\t\ttop: 0;
  1273. \t\t\tleft: 0;
  1274. \t\t\twidth: 100%;
  1275. \t\t\theight: 100%;
  1276. \t\t\tbackground: rgba(0, 0, 0, 0.5);
  1277. \t\t\tdisplay: flex;
  1278. \t\t\talign-items: center;
  1279. \t\t\tjustify-content: center;
  1280. \t\t\topacity: 0;
  1281. \t\t\ttransition: opacity 0.3s ease;
  1282. \t\t}
  1284. \t\t.featured-gallery-card:hover .featured-gallery-overlay {
  1285. \t\t\topacity: 1;
  1286. \t\t}
  1288. \t\t.featured-gallery-view-btn {
  1289. \t\t\tbackground: white;
  1290. \t\t\tcolor: #333;
  1291. \t\t\twidth: 40px;
  1292. \t\t\theight: 40px;
  1293. \t\t\tborder-radius: 50%;
  1294. \t\t\tdisplay: flex;
  1295. \t\t\talign-items: center;
  1296. \t\t\tjustify-content: center;
  1297. \t\t\ttext-decoration: none;
  1298. \t\t\tfont-size: 18px;
  1299. \t\t\ttransform: scale(0.8);
  1300. \t\t\ttransition: transform 0.3s ease;
  1301. \t\t}
  1303. \t\t.featured-gallery-card:hover .featured-gallery-view-btn {
  1304. \t\t\ttransform: scale(1);
  1305. \t\t}
  1307. \t\t.featured-gallery-info {
  1308. \t\t\tpadding: 12px;
  1309. \t\t\tflex: 1;
  1310. \t\t\tdisplay: flex;
  1311. \t\t\tflex-direction: column;
  1312. \t\t}
  1314. \t\t.featured-gallery-title {
  1315. \t\t\tfont-size: 14px;
  1316. \t\t\tfont-weight: 600;
  1317. \t\t\tmargin-bottom: 6px;
  1318. \t\t\tcolor: #333;
  1319. \t\t\tline-height: 1.3;
  1320. \t\t\tdisplay: -webkit-box;
  1321. \t\t\t-webkit-line-clamp: 2;
  1322. \t\t\t-webkit-box-orient: vertical;
  1323. \t\t\toverflow: hidden;
  1324. \t\t\tmin-height: 36px;
  1325. \t\t}
  1327. \t\t.featured-gallery-title a {
  1328. \t\t\tcolor: #333;
  1329. \t\t\ttext-decoration: none;
  1330. \t\t\ttransition: color 0.3s ease;
  1331. \t\t}
  1333. \t\t.featured-gallery-title a:hover {
  1334. \t\t\tcolor: #ffa200;
  1335. \t\t}
  1337. \t\t.featured-gallery-price {
  1338. \t\t\tfont-size: 16px;
  1339. \t\t\tfont-weight: 700;
  1340. \t\t\tcolor: #ffa200;
  1341. \t\t\tmargin-bottom: 6px;
  1342. \t\t}
  1344. \t\t.featured-gallery-rating {
  1345. \t\t\tdisplay: flex;
  1346. \t\t\talign-items: center;
  1347. \t\t\tgap: 3px;
  1348. \t\t\tfont-size: 11px;
  1349. \t\t}
  1351. \t\t.featured-gallery-rating .fa-star.active {
  1352. \t\t\tcolor: #ffa200;
  1353. \t\t}
  1355. \t\t.featured-gallery-rating .fa-star-o {
  1356. \t\t\tcolor: #ddd;
  1357. \t\t}
  1359. \t\t.featured-gallery-controls {
  1360. \t\t\tdisplay: flex;
  1361. \t\t\tjustify-content: center;
  1362. \t\t\tgap: 20px;
  1363. \t\t\tmargin-top: 25px;
  1364. \t\t\tpadding: 0 20px;
  1365. \t\t}
  1367. \t\t.featured-gallery-nav-btn {
  1368. \t\t\twidth: 42px;
  1369. \t\t\theight: 42px;
  1370. \t\t\tborder-radius: 50%;
  1371. \t\t\tborder: 1.5px solid #ffa200;
  1372. \t\t\tbackground: white;
  1373. \t\t\tcolor: #ffa200;
  1374. \t\t\tfont-size: 16px;
  1375. \t\t\tcursor: pointer;
  1376. \t\t\tdisplay: flex;
  1377. \t\t\talign-items: center;
  1378. \t\t\tjustify-content: center;
  1379. \t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1380. \t\t\tbox-shadow: 0 3px 10px rgba(255, 162, 0, 0.18);
  1381. \t\t\tposition: relative;
  1382. \t\t\toverflow: hidden;
  1383. \t\t}
  1385. \t\t.featured-gallery-nav-btn.btn-ripple::after {
  1386. \t\t\tcontent: '';
  1387. \t\t\tposition: absolute;
  1388. \t\t\twidth: 100%;
  1389. \t\t\theight: 100%;
  1390. \t\t\tleft: 0;
  1391. \t\t\ttop: 0;
  1392. \t\t\tborder-radius: 50%;
  1393. \t\t\tbackground: rgba(255, 162, 0, 0.2);
  1394. \t\t\tanimation: rippleEffect 0.35s ease;
  1395. \t\t}
  1397. \t\t@keyframes rippleEffect {
  1398. \t\t\tfrom {
  1399. \t\t\t\ttransform: scale(0.6);
  1400. \t\t\t\topacity: 0.7;
  1401. \t\t\t}
  1402. \t\t\tto {
  1403. \t\t\t\ttransform: scale(1.4);
  1404. \t\t\t\topacity: 0;
  1405. \t\t\t}
  1406. \t\t}
  1408. \t\t.featured-gallery-nav-btn:hover:not(:disabled) {
  1409. \t\t\tbackground: #ffa200;
  1410. \t\t\tcolor: white;
  1411. \t\t\ttransform: scale(1.1);
  1412. \t\t\tbox-shadow: 0 5px 18px rgba(255, 162, 0, 0.4);
  1413. \t\t}
  1415. \t\t.featured-gallery-nav-btn:active:not(:disabled) {
  1416. \t\t\ttransform: scale(0.95);
  1417. \t\t}
  1419. \t\t.featured-gallery-nav-btn:disabled {
  1420. \t\t\topacity: 0.3;
  1421. \t\t\tcursor: not-allowed;
  1422. \t\t}
  1424. \t\t.featured-gallery-load-more {
  1425. \t\t\tmargin-top: 30px;
  1426. \t\t}
  1428. \t\t/* Style pour le bouton \"Voir tous les produits\" */
  1429. \t\t.btn-view-all-products {
  1430. \t\t\tdisplay: inline-flex;
  1431. \t\t\talign-items: center;
  1432. \t\t\tgap: 12px;
  1433. \t\t\tpadding: 16px 40px;
  1434. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  1435. \t\t\tcolor: white;
  1436. \t\t\ttext-decoration: none;
  1437. \t\t\tborder-radius: 50px;
  1438. \t\t\tfont-weight: 600;
  1439. \t\t\tfont-size: 16px;
  1440. \t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1441. \t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.3);
  1442. \t\t\tposition: relative;
  1443. \t\t\toverflow: hidden;
  1444. \t\t}
  1446. \t\t.btn-view-all-products::before {
  1447. \t\t\tcontent: '';
  1448. \t\t\tposition: absolute;
  1449. \t\t\ttop: 0;
  1450. \t\t\tleft: -100%;
  1451. \t\t\twidth: 100%;
  1452. \t\t\theight: 100%;
  1453. \t\t\tbackground: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  1454. \t\t\ttransition: left 0.5s ease;
  1455. \t\t}
  1457. \t\t.btn-view-all-products:hover::before {
  1458. \t\t\tleft: 100%;
  1459. \t\t}
  1461. \t\t.btn-view-all-products:hover {
  1462. \t\t\ttransform: translateY(-3px);
  1463. \t\t\tbox-shadow: 0 8px 25px rgba(255, 162, 0, 0.5);
  1464. \t\t\tcolor: white;
  1465. \t\t}
  1467. \t\t.btn-view-all-products:active {
  1468. \t\t\ttransform: translateY(-1px);
  1469. \t\t}
  1471. \t\t.btn-view-all-products i {
  1472. \t\t\tfont-size: 18px;
  1473. \t\t\ttransition: transform 0.3s ease;
  1474. \t\t}
  1476. \t\t.btn-view-all-products:hover i {
  1477. \t\t\ttransform: translateX(5px);
  1478. \t\t}
  1480. \t\t.btn-view-all-products span {
  1481. \t\t\tposition: relative;
  1482. \t\t\tz-index: 1;
  1483. \t\t}
  1485. \t\t/* Responsive */
  1486. \t\t@media(max-width: 767px) {
  1487. \t\t\t.btn-view-all-products {
  1488. \t\t\t\tpadding: 14px 30px;
  1489. \t\t\t\tfont-size: 14px;
  1490. \t\t\t}
  1491. \t\t}
  1493. \t\t/* Responsive */
  1494. \t\t@media(max-width: 767px) {
  1495. \t\t\t.featured-gallery-grid {
  1496. \t\t\t\tgap: 10px;
  1497. \t\t\t}
  1499. \t\t\t.featured-gallery-info {
  1500. \t\t\t\tpadding: 10px;
  1501. \t\t\t}
  1503. \t\t\t.featured-gallery-title {
  1504. \t\t\t\tfont-size: 13px;
  1505. \t\t\t\tmin-height: 32px;
  1506. \t\t\t}
  1508. \t\t\t.featured-gallery-price {
  1509. \t\t\t\tfont-size: 14px;
  1510. \t\t\t}
  1511. \t\t}
  1513. \t\t/* Styles pour les grilles de produits Nouveautés */
  1514. \t\t.latest-products-grid {
  1515. \t\t\tmargin-top: 30px;
  1516. \t\t}
  1518. \t\t.product-card-modern {
  1519. \t\t\tbackground: white;
  1520. \t\t\tborder-radius: 12px;
  1521. \t\t\toverflow: hidden;
  1522. \t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  1523. \t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1524. \t\t\theight: 100%;
  1525. \t\t\tdisplay: flex;
  1526. \t\t\tflex-direction: column;
  1527. \t\t\tborder: 1px solid #f0f0f0;
  1528. \t\t}
  1530. \t\t.product-card-modern:hover {
  1531. \t\t\ttransform: translateY(-8px);
  1532. \t\t\tbox-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  1533. \t\t\tborder-color: #ffa200;
  1534. \t\t}
  1536. \t\t.product-image-wrapper {
  1537. \t\t\tposition: relative;
  1538. \t\t\twidth: 100%;
  1539. \t\t\tpadding-top: 75%; /* Ratio 4:3 */
  1540. \t\t\toverflow: hidden;
  1541. \t\t\tbackground: #f8f9fa;
  1542. \t\t}
  1544. \t\t.product-image {
  1545. \t\t\tposition: absolute;
  1546. \t\t\ttop: 0;
  1547. \t\t\tleft: 0;
  1548. \t\t\twidth: 100%;
  1549. \t\t\theight: 100%;
  1550. \t\t\tbackground-size: cover;
  1551. \t\t\tbackground-position: center;
  1552. \t\t\ttransition: transform 0.5s ease;
  1553. \t\t}
  1555. \t\t.product-card-modern:hover .product-image {
  1556. \t\t\ttransform: scale(1.1);
  1557. \t\t}
  1559. \t\t.product-badge-modern {
  1560. \t\t\tposition: absolute;
  1561. \t\t\ttop: 10px;
  1562. \t\t\tright: 10px;
  1563. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  1564. \t\t\tcolor: white;
  1565. \t\t\tpadding: 6px 12px;
  1566. \t\t\tborder-radius: 20px;
  1567. \t\t\tfont-size: 12px;
  1568. \t\t\tfont-weight: 600;
  1569. \t\t\tz-index: 2;
  1570. \t\t\tbox-shadow: 0 2px 8px rgba(255, 162, 0, 0.3);
  1571. \t\t}
  1573. \t\t.product-badge-modern.new-badge {
  1574. \t\t\tbackground: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  1575. \t\t}
  1577. \t\t.product-overlay {
  1578. \t\t\tposition: absolute;
  1579. \t\t\ttop: 0;
  1580. \t\t\tleft: 0;
  1581. \t\t\twidth: 100%;
  1582. \t\t\theight: 100%;
  1583. \t\t\tbackground: rgba(0, 0, 0, 0.5);
  1584. \t\t\tdisplay: flex;
  1585. \t\t\talign-items: center;
  1586. \t\t\tjustify-content: center;
  1587. \t\t\topacity: 0;
  1588. \t\t\ttransition: opacity 0.3s ease;
  1589. \t\t\tz-index: 1;
  1590. \t\t}
  1592. \t\t.product-card-modern:hover .product-overlay {
  1593. \t\t\topacity: 1;
  1594. \t\t}
  1596. \t\t.btn-view-product {
  1597. \t\t\tbackground: white;
  1598. \t\t\tcolor: #333;
  1599. \t\t\tpadding: 12px 24px;
  1600. \t\t\tborder-radius: 25px;
  1601. \t\t\ttext-decoration: none;
  1602. \t\t\tfont-weight: 600;
  1603. \t\t\tdisplay: flex;
  1604. \t\t\talign-items: center;
  1605. \t\t\tgap: 8px;
  1606. \t\t\ttransition: all 0.3s ease;
  1607. \t\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  1608. \t\t}
  1610. \t\t.btn-view-product:hover {
  1611. \t\t\tbackground: #ffa200;
  1612. \t\t\tcolor: white;
  1613. \t\t\ttransform: scale(1.05);
  1614. \t\t}
  1616. \t\t.product-info-modern {
  1617. \t\t\tpadding: 16px;
  1618. \t\t\tflex-grow: 1;
  1619. \t\t\tdisplay: flex;
  1620. \t\t\tflex-direction: column;
  1621. \t\t}
  1623. \t\t.product-title-modern {
  1624. \t\t\tmargin: 0 0 8px;
  1625. \t\t\tfont-size: 16px;
  1626. \t\t\tfont-weight: 600;
  1627. \t\t\tline-height: 1.4;
  1628. \t\t}
  1630. \t\t.product-title-modern a {
  1631. \t\t\tcolor: #333;
  1632. \t\t\ttext-decoration: none;
  1633. \t\t\ttransition: color 0.3s ease;
  1634. \t\t}
  1636. \t\t.product-title-modern a:hover {
  1637. \t\t\tcolor: #ffa200;
  1638. \t\t}
  1640. \t\t.product-price-modern {
  1641. \t\t\tfont-size: 20px;
  1642. \t\t\tfont-weight: 700;
  1643. \t\t\tcolor: #ffa200;
  1644. \t\t\tmargin-bottom: 8px;
  1645. \t\t}
  1647. \t\t.product-shop-modern {
  1648. \t\t\tdisplay: flex;
  1649. \t\t\talign-items: center;
  1650. \t\t\tgap: 6px;
  1651. \t\t\tfont-size: 13px;
  1652. \t\t\tcolor: #666;
  1653. \t\t\tmargin-bottom: 8px;
  1654. \t\t}
  1656. \t\t.product-shop-modern i {
  1657. \t\t\tcolor: #ffa200;
  1658. \t\t}
  1660. \t\t.shop-link {
  1661. \t\t\tcolor: #666;
  1662. \t\t\ttext-decoration: none;
  1663. \t\t\ttransition: color 0.3s ease;
  1664. \t\t}
  1666. \t\t.shop-link:hover {
  1667. \t\t\tcolor: #ffa200;
  1668. \t\t}
  1670. \t\t.product-rating-modern {
  1671. \t\t\tdisplay: flex;
  1672. \t\t\talign-items: center;
  1673. \t\t\tgap: 4px;
  1674. \t\t\tmargin-top: auto;
  1675. \t\t}
  1677. \t\t.product-rating-modern .fa-star.active {
  1678. \t\t\tcolor: #ffc107;
  1679. \t\t}
  1681. \t\t.product-rating-modern .fa-star-o {
  1682. \t\t\tcolor: #ddd;
  1683. \t\t}
  1685. \t\t.rating-count {
  1686. \t\t\tfont-size: 12px;
  1687. \t\t\tcolor: #666;
  1688. \t\t\tmargin-left: 4px;
  1689. \t\t}
  1691. \t\t.product-views-modern {
  1692. \t\t\tdisplay: flex;
  1693. \t\t\talign-items: center;
  1694. \t\t\tgap: 6px;
  1695. \t\t\tfont-size: 12px;
  1696. \t\t\tcolor: #666;
  1697. \t\t\tmargin-top: auto;
  1698. \t\t}
  1700. \t\t.product-views-modern i {
  1701. \t\t\tcolor: #999;
  1702. \t\t}
  1704. \t\t/* Style des cartes produits */
  1705. \t\t.product-card {
  1706. \t\t\tbackground: white;
  1707. \t\t\tborder-radius: 15px;
  1708. \t\t\toverflow: hidden;
  1709. \t\t\tbox-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  1710. \t\t\ttransition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  1711. \t\t\theight: 100%;
  1712. \t\t\tdisplay: flex;
  1713. \t\t\tflex-direction: column;
  1714. \t\t}
  1716. \t\t.product-card:hover {
  1717. \t\t\tbox-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  1718. \t\t\ttransform: translateY(-5px);
  1719. \t\t}
  1721. \t\t.product-image {
  1722. \t\t\twidth: 100%;
  1723. \t\t\theight: 250px;
  1724. \t\t\tbackground-size: cover;
  1725. \t\t\tbackground-position: center;
  1726. \t\t\tposition: relative;
  1727. \t\t\toverflow: hidden;
  1728. \t\t}
  1730. \t\t.product-image::before {
  1731. \t\t\tcontent: '';
  1732. \t\t\tposition: absolute;
  1733. \t\t\ttop: 0;
  1734. \t\t\tleft: -100%;
  1735. \t\t\twidth: 100%;
  1736. \t\t\theight: 100%;
  1737. \t\t\tbackground: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  1738. \t\t\ttransition: left 0.6s ease;
  1739. \t\t}
  1741. \t\t.product-card:hover .product-image::before {
  1742. \t\t\tleft: 100%;
  1743. \t\t}
  1745. \t\t.product-badge {
  1746. \t\t\tposition: absolute;
  1747. \t\t\ttop: 15px;
  1748. \t\t\tright: 15px;
  1749. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  1750. \t\t\tcolor: white;
  1751. \t\t\tpadding: 8px 15px;
  1752. \t\t\tborder-radius: 20px;
  1753. \t\t\tfont-size: 0.85rem;
  1754. \t\t\tfont-weight: 600;
  1755. \t\t\tbox-shadow: 0 4px 10px rgba(255, 162, 0, 0.4);
  1756. \t\t\tz-index: 1;
  1757. \t\t}
  1759. \t\t.product-info {
  1760. \t\t\tpadding: 20px;
  1761. \t\t\tflex-grow: 1;
  1762. \t\t\tdisplay: flex;
  1763. \t\t\tflex-direction: column;
  1764. \t\t}
  1766. \t\t.product-title {
  1767. \t\t\tfont-size: 1.1rem;
  1768. \t\t\tfont-weight: 600;
  1769. \t\t\tcolor: #2c3e50;
  1770. \t\t\tmargin-bottom: 10px;
  1771. \t\t\tline-height: 1.4;
  1772. \t\t\tdisplay: -webkit-box;
  1773. \t\t\t-webkit-line-clamp: 2;
  1774. \t\t\t-webkit-box-orient: vertical;
  1775. \t\t\toverflow: hidden;
  1776. \t\t}
  1778. \t\t.product-price {
  1779. \t\t\tfont-size: 1.5rem;
  1780. \t\t\tfont-weight: 800;
  1781. \t\t\tcolor: #ffa200;
  1782. \t\t\tmargin-bottom: 15px;
  1783. \t\t}
  1785. \t\t.product-shop {
  1786. \t\t\tfont-size: 0.9rem;
  1787. \t\t\tcolor: #666;
  1788. \t\t\tmargin-bottom: 15px;
  1789. \t\t}
  1791. \t\t.product-shop a {
  1792. \t\t\tcolor: #667eea;
  1793. \t\t\ttext-decoration: none;
  1794. \t\t\ttransition: color 0.3s ease;
  1795. \t\t}
  1797. \t\t.product-shop a:hover {
  1798. \t\t\tcolor: #ffa200;
  1799. \t\t}
  1801. \t\t/* Newsletter Modern Styles */
  1802. \t\t.newsletter-section-modern {
  1803. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #095ad3 100%);
  1804. \t\t\tposition: relative;
  1805. \t\t\toverflow: hidden;
  1806. \t\t}
  1807. \t\t.newsletter-section-modern::before {
  1808. \t\t\tcontent: '';
  1809. \t\t\tposition: absolute;
  1810. \t\t\ttop: -50%;
  1811. \t\t\tright: -50%;
  1812. \t\t\twidth: 100%;
  1813. \t\t\theight: 200%;
  1814. \t\t\tbackground: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  1815. \t\t\tanimation: pulse 3s ease-in-out infinite;
  1816. \t\t}
  1817. \t\t@keyframes pulse {
  1818. \t\t\t0,
  1819. \t\t\t100% {
  1820. \t\t\t\ttransform: scale(1);
  1821. \t\t\t\topacity: 0.5;
  1822. \t\t\t}
  1823. \t\t\t50% {
  1824. \t\t\t\ttransform: scale(1.1);
  1825. \t\t\t\topacity: 0.8;
  1826. \t\t\t}
  1827. \t\t}
  1828. \t\t.newsletter-card {
  1829. \t\t\tbackground: white;
  1830. \t\t\tborder-radius: 20px;
  1831. \t\t\tpadding: 40px;
  1832. \t\t\tbox-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  1833. \t\t\tposition: relative;
  1834. \t\t\tz-index: 1;
  1835. \t\t}
  1836. \t\t.newsletter-title {
  1837. \t\t\tfont-size: 2.5rem;
  1838. \t\t\tfont-weight: bold;
  1839. \t\t\tcolor: #333;
  1840. \t\t}
  1841. \t\t.newsletter-description {
  1842. \t\t\tcolor: #666;
  1843. \t\t\tfont-size: 1.1rem;
  1844. \t\t\tline-height: 1.8;
  1845. \t\t}
  1846. \t\t.newsletter-form-modern {
  1847. \t\t\tposition: relative;
  1848. \t\t}
  1849. \t\t.newsletter-input-wrapper {
  1850. \t\t\tdisplay: flex;
  1851. \t\t\tgap: 10px;
  1852. \t\t\tmargin-bottom: 15px;
  1853. \t\t}
  1854. \t\t.newsletter-input {
  1855. \t\t\tflex: 1;
  1856. \t\t\tpadding: 18px 25px;
  1857. \t\t\tborder: 2px solid #e0e0e0;
  1858. \t\t\tborder-radius: 50px;
  1859. \t\t\tfont-size: 1rem;
  1860. \t\t\ttransition: all 0.3s ease;
  1861. \t\t}
  1862. \t\t.newsletter-input:focus {
  1863. \t\t\toutline: none;
  1864. \t\t\tborder-color: #ffa200;
  1865. \t\t\tbox-shadow: 0 0 0 3px rgba(255, 162, 0, 0.1);
  1866. \t\t}
  1867. \t\t.newsletter-button {
  1868. \t\t\tpadding: 18px 35px;
  1869. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  1870. \t\t\tcolor: white;
  1871. \t\t\tborder: none;
  1872. \t\t\tborder-radius: 50px;
  1873. \t\t\tfont-weight: 600;
  1874. \t\t\tfont-size: 1rem;
  1875. \t\t\tcursor: pointer;
  1876. \t\t\ttransition: all 0.3s ease;
  1877. \t\t\twhite-space: nowrap;
  1878. \t\t}
  1879. \t\t.newsletter-button:hover {
  1880. \t\t\ttransform: translateY(-2px);
  1881. \t\t\tbox-shadow: 0 5px 20px rgba(255, 162, 0, 0.4);
  1882. \t\t}
  1883. \t\t.newsletter-privacy {
  1884. \t\t\tcolor: #999;
  1885. \t\t}
  1887. \t\t/* CTA Modern Styles */
  1888. \t\t.cta-section-modern {
  1889. \t\t\tbackground: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  1890. \t\t}
  1891. \t\t.cta-card {
  1892. \t\t\tbackground: white;
  1893. \t\t\tborder-radius: 25px;
  1894. \t\t\tpadding: 50px;
  1895. \t\t\tbox-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
  1896. \t\t\tposition: relative;
  1897. \t\t\toverflow: hidden;
  1898. \t\t}
  1899. \t\t.cta-card::before {
  1900. \t\t\tcontent: '';
  1901. \t\t\tposition: absolute;
  1902. \t\t\ttop: -50px;
  1903. \t\t\tright: -50px;
  1904. \t\t\twidth: 200px;
  1905. \t\t\theight: 200px;
  1906. \t\t\tbackground: linear-gradient(135deg, rgba(255,162,0,0.1) 0%, rgba(255,162,0,0.05) 100%);
  1907. \t\t\tborder-radius: 50%;
  1908. \t\t}
  1909. \t\t.cta-badge {
  1910. \t\t\tdisplay: inline-block;
  1911. \t\t\tpadding: 8px 20px;
  1912. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  1913. \t\t\tcolor: white;
  1914. \t\t\tborder-radius: 50px;
  1915. \t\t\tfont-size: 0.9rem;
  1916. \t\t\tfont-weight: 600;
  1917. \t\t\tmargin-bottom: 20px;
  1918. \t\t}
  1919. \t\t.cta-title {
  1920. \t\t\tfont-size: 3rem;
  1921. \t\t\tfont-weight: bold;
  1922. \t\t\tcolor: #333;
  1923. \t\t\tmargin-bottom: 20px;
  1924. \t\t}
  1925. \t\t.cta-description {
  1926. \t\t\tfont-size: 1.2rem;
  1927. \t\t\tcolor: #666;
  1928. \t\t\tline-height: 1.8;
  1929. \t\t}
  1930. \t\t.cta-features {
  1931. \t\t\tdisplay: flex;
  1932. \t\t\tflex-direction: column;
  1933. \t\t\tgap: 15px;
  1934. \t\t}
  1935. \t\t.cta-feature-item {
  1936. \t\t\tdisplay: flex;
  1937. \t\t\talign-items: center;
  1938. \t\t\tgap: 10px;
  1939. \t\t\tfont-size: 1rem;
  1940. \t\t\tcolor: #555;
  1941. \t\t}
  1942. \t\t.cta-feature-item i {
  1943. \t\t\tcolor: #ffa200;
  1944. \t\t\tfont-size: 1.3rem;
  1945. \t\t}
  1946. \t\t.cta-buttons {
  1947. \t\t\tdisplay: flex;
  1948. \t\t\tgap: 15px;
  1949. \t\t\tflex-wrap: wrap;
  1950. \t\t}
  1951. \t\t.cta-button-primary {
  1952. \t\t\tpadding: 15px 35px;
  1953. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  1954. \t\t\tcolor: white;
  1955. \t\t\tborder: none;
  1956. \t\t\tborder-radius: 50px;
  1957. \t\t\tfont-weight: 600;
  1958. \t\t\tfont-size: 1.1rem;
  1959. \t\t\ttransition: all 0.3s ease;
  1960. \t\t}
  1961. \t\t.cta-button-primary:hover {
  1962. \t\t\ttransform: translateY(-3px);
  1963. \t\t\tbox-shadow: 0 8px 25px rgba(255, 162, 0, 0.4);
  1964. \t\t\tcolor: white;
  1965. \t\t}
  1966. \t\t.cta-button-secondary {
  1967. \t\t\tpadding: 15px 35px;
  1968. \t\t\tbackground: white;
  1969. \t\t\tcolor: #ffa200;
  1970. \t\t\tborder: 2px solid #ffa200;
  1971. \t\t\tborder-radius: 50px;
  1972. \t\t\tfont-weight: 600;
  1973. \t\t\tfont-size: 1.1rem;
  1974. \t\t\ttransition: all 0.3s ease;
  1975. \t\t}
  1976. \t\t.cta-button-secondary:hover {
  1977. \t\t\tbackground: #ffa200;
  1978. \t\t\tcolor: white;
  1979. \t\t\ttransform: translateY(-3px);
  1980. \t\t\tbox-shadow: 0 8px 25px rgba(255, 162, 0, 0.3);
  1981. \t\t}
  1982. \t\t.cta-image-wrapper {
  1983. \t\t\tposition: relative;
  1984. \t\t}
  1985. \t\t.cta-decoration {
  1986. \t\t\tposition: absolute;
  1987. \t\t\ttop: -20px;
  1988. \t\t\tright: -20px;
  1989. \t\t\twidth: 150px;
  1990. \t\t\theight: 150px;
  1991. \t\t\tbackground: linear-gradient(135deg, rgba(255,162,0,0.2) 0%, rgba(255,162,0,0.05) 100%);
  1992. \t\t\tborder-radius: 50%;
  1993. \t\t\tz-index: 0;
  1994. \t\t}
  1995. \t\t.cta-image {
  1996. \t\t\tposition: relative;
  1997. \t\t\tz-index: 1;
  1998. \t\t\tmax-width: 100%;
  1999. \t\t\theight: auto;
  2000. \t\t\tborder-radius: 15px;
  2001. \t\t}
  2003. \t\t.home-section {
  2004. \t\t\tposition: relative;
  2005. \t\t\ttransition: background-color 0.3s ease, color 0.3s ease;
  2006. \t\t}
  2008. \t\t.home-section::before {
  2009. \t\t\tcontent: '';
  2010. \t\t\tposition: absolute;
  2011. \t\t\tinset: 0;
  2012. \t\t\tpointer-events: none;
  2013. \t\t\topacity: 0;
  2014. \t\t\ttransition: opacity 0.3s ease;
  2015. \t\t}
  2017. \t\thtml[data-theme=\"dark\"] .home-section {
  2018. \t\t\tbackground: linear-gradient(180deg, rgba(17, 24, 39, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  2019. \t\t\tcolor: var(--mk-text) !important;
  2020. \t\t\tborder-top: 1px solid rgba(148, 163, 184, 0.08);
  2021. \t\t\tborder-bottom: 1px solid rgba(148, 163, 184, 0.08);
  2022. \t\t}
  2024. \t\thtml[data-theme=\"dark\"] .home-section--alt {
  2025. \t\t\tbackground: linear-gradient(180deg, rgba(12, 18, 30, 0.98) 0%, rgba(24, 34, 53, 0.95) 100%) !important;
  2026. \t\t}
  2028. \t\thtml[data-theme=\"dark\"] .home-section--alt::before {
  2029. \t\t\topacity: 1;
  2030. \t\t\tbackground: linear-gradient(
  2031. \t\t\t\t180deg,
  2032. \t\t\t\trgba(255, 255, 255, 0.015) 0%,
  2033. \t\t\t\trgba(255, 255, 255, 0.015) 50%,
  2034. \t\t\t\trgba(255, 255, 255, 0.03) 50%,
  2035. \t\t\t\trgba(255, 255, 255, 0.03) 100%
  2036. \t\t\t);
  2037. \t\t\tbackground-size: 100% 12px;
  2038. \t\t}
  2040. \t\thtml[data-theme=\"dark\"] .home-section .section-title h2,
  2041. \t\thtml[data-theme=\"dark\"] .home-section .category-content h5,
  2042. \t\thtml[data-theme=\"dark\"] .home-section .product-title-modern,
  2043. \t\thtml[data-theme=\"dark\"] .home-section .product-title-modern a,
  2044. \t\thtml[data-theme=\"dark\"] .home-section .product-title,
  2045. \t\thtml[data-theme=\"dark\"] .home-section .product-title a,
  2046. \t\thtml[data-theme=\"dark\"] .home-section .featured-gallery-title,
  2047. \t\thtml[data-theme=\"dark\"] .home-section .featured-gallery-title a,
  2048. \t\thtml[data-theme=\"dark\"] .home-section .newsletter-title,
  2049. \t\thtml[data-theme=\"dark\"] .home-section .cta-title,
  2050. \t\thtml[data-theme=\"dark\"] .home-section .feature-card h5,
  2051. \t\thtml[data-theme=\"dark\"] .home-section .banner-title-modern {
  2052. \t\t\tcolor: var(--mk-text) !important;
  2053. \t\t\t-webkit-text-fill-color: currentColor !important;
  2054. \t\t\tbackground: none !important;
  2055. \t\t}
  2057. \t\thtml[data-theme=\"dark\"] .home-section .section-title p,
  2058. \t\thtml[data-theme=\"dark\"] .home-section .category-content p,
  2059. \t\thtml[data-theme=\"dark\"] .home-section .product-shop-modern,
  2060. \t\thtml[data-theme=\"dark\"] .home-section .rating-count,
  2061. \t\thtml[data-theme=\"dark\"] .home-section .product-views-modern,
  2062. \t\thtml[data-theme=\"dark\"] .home-section .newsletter-description,
  2063. \t\thtml[data-theme=\"dark\"] .home-section .newsletter-privacy,
  2064. \t\thtml[data-theme=\"dark\"] .home-section .cta-description,
  2065. \t\thtml[data-theme=\"dark\"] .home-section .cta-feature-item,
  2066. \t\thtml[data-theme=\"dark\"] .home-section .banner-description-modern,
  2067. \t\thtml[data-theme=\"dark\"] .home-section .price-label {
  2068. \t\t\tcolor: var(--mk-text-soft) !important;
  2069. \t\t}
  2071. \t\thtml[data-theme=\"dark\"] .home-section .text-muted,
  2072. \t\thtml[data-theme=\"dark\"] .home-section small.text-muted,
  2073. \t\thtml[data-theme=\"dark\"] .home-section .small.text-muted {
  2074. \t\t\tcolor: var(--mk-text-muted) !important;
  2075. \t\t}
  2077. \t\thtml[data-theme=\"dark\"] .home-section .stats-card,
  2078. \t\thtml[data-theme=\"dark\"] .home-section .category-card-custom,
  2079. \t\thtml[data-theme=\"dark\"] .home-section .product-card-modern,
  2080. \t\thtml[data-theme=\"dark\"] .home-section .product-card,
  2081. \t\thtml[data-theme=\"dark\"] .home-section .feature-card,
  2082. \t\thtml[data-theme=\"dark\"] .home-section .newsletter-card,
  2083. \t\thtml[data-theme=\"dark\"] .home-section .cta-card,
  2084. \t\thtml[data-theme=\"dark\"] .home-section .single-product,
  2085. \t\thtml[data-theme=\"dark\"] .home-section .banner-content-modern,
  2086. \t\thtml[data-theme=\"dark\"] .home-section .featured-gallery-card {
  2087. \t\t\tbackground: var(--mk-surface-strong) !important;
  2088. \t\t\tcolor: var(--mk-text) !important;
  2089. \t\t\tborder-color: var(--mk-border) !important;
  2090. \t\t\tbox-shadow: 0 20px 45px rgba(2, 6, 23, 0.28) !important;
  2091. \t\t}
  2093. \t\thtml[data-theme=\"dark\"] .home-section--alt .stats-card,
  2094. \t\thtml[data-theme=\"dark\"] .home-section--alt .category-card-custom,
  2095. \t\thtml[data-theme=\"dark\"] .home-section--alt .product-card-modern,
  2096. \t\thtml[data-theme=\"dark\"] .home-section--alt .product-card,
  2097. \t\thtml[data-theme=\"dark\"] .home-section--alt .feature-card,
  2098. \t\thtml[data-theme=\"dark\"] .home-section--alt .newsletter-card,
  2099. \t\thtml[data-theme=\"dark\"] .home-section--alt .cta-card,
  2100. \t\thtml[data-theme=\"dark\"] .home-section--alt .single-product,
  2101. \t\thtml[data-theme=\"dark\"] .home-section--alt .banner-content-modern,
  2102. \t\thtml[data-theme=\"dark\"] .home-section--alt .featured-gallery-card {
  2103. \t\t\tbackground: rgba(31, 41, 55, 0.9) !important;
  2104. \t\t}
  2106. \t\thtml[data-theme=\"dark\"] .home-section .product-image-wrapper,
  2107. \t\thtml[data-theme=\"dark\"] .home-section .featured-gallery-image-wrapper,
  2108. \t\thtml[data-theme=\"dark\"] .home-section .product-image-container,
  2109. \t\thtml[data-theme=\"dark\"] .home-section .banner-image-wrapper {
  2110. \t\t\tbackground: #0f172a !important;
  2111. \t\t\tborder-color: var(--mk-border) !important;
  2112. \t\t}
  2114. \t\thtml[data-theme=\"dark\"] .home-section .shop-link,
  2115. \t\thtml[data-theme=\"dark\"] .home-section .product-shop a,
  2116. \t\thtml[data-theme=\"dark\"] .home-section .product-shop-modern a,
  2117. \t\thtml[data-theme=\"dark\"] .home-section .featured-gallery-view-btn {
  2118. \t\t\tcolor: #93c5fd !important;
  2119. \t\t}
  2121. \t\thtml[data-theme=\"dark\"] .home-section .shop-link:hover,
  2122. \t\thtml[data-theme=\"dark\"] .home-section .product-shop a:hover,
  2123. \t\thtml[data-theme=\"dark\"] .home-section .product-shop-modern a:hover {
  2124. \t\t\tcolor: var(--mk-primary) !important;
  2125. \t\t}
  2127. \t\thtml[data-theme=\"dark\"] .home-section .banner-price-modern {
  2128. \t\t\tbackground: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(31, 41, 55, 0.94) 100%) !important;
  2129. \t\t\tborder-left-color: var(--mk-primary) !important;
  2130. \t\t}
  2132. \t\thtml[data-theme=\"dark\"] .home-section .newsletter-input {
  2133. \t\t\tbackground: #0f172a !important;
  2134. \t\t\tborder-color: var(--mk-border) !important;
  2135. \t\t\tcolor: var(--mk-text) !important;
  2136. \t\t}
  2138. \t\thtml[data-theme=\"dark\"] .home-section .newsletter-input::placeholder {
  2139. \t\t\tcolor: var(--mk-text-muted) !important;
  2140. \t\t}
  2142. \t\thtml[data-theme=\"dark\"] .home-section .cta-section-modern,
  2143. \t\thtml[data-theme=\"dark\"] .home-section.cta-section-modern,
  2144. \t\thtml[data-theme=\"dark\"] .home-section.newsletter-section-modern {
  2145. \t\t\tcolor: var(--mk-text) !important;
  2146. \t\t}
  2147. \t</style>
  2148. ";
  2149.         
  2150.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  2152.         
  2153.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  2155.         yield from [];
  2156.     }
  2158.     // line 2051
  2159.     /**
  2160.      * @return iterable<null|scalar|\Stringable>
  2161.      */
  2162.     public function block_body(array $context, array $blocks = []): iterable
  2163.     {
  2164.         $macros = $this->macros;
  2165.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  2166.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  2168.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  2169.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  2171.         // line 2052
  2172.         yield "\t<!-- Hero Section -->
  2173. \t<!-- start banner Area avec produits en vedette -->
  2174. \t\t";
  2175.         // line 2054
  2176.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["featuredProducts"] ?? null)) > 0)) {
  2177.             // line 2055
  2178.             yield "\t\t\t<section class=\"banner-area-modern\"> <div class=\"banner-carousel-wrapper\">
  2179. \t\t\t\t<div class=\"active-banner-slider owl-carousel\" style=\"margin-top: 100px;\">
  2180. \t\t\t\t\t";
  2181.             // line 2057
  2182.             $context['_parent'] = $context;
  2183.             $context['_seq'] = CoreExtension::ensureTraversable(($context["featuredProducts"] ?? null));
  2184.             $context['loop'] = [
  2185.               'parent' => $context['_parent'],
  2186.               'index0' => 0,
  2187.               'index'  => 1,
  2188.               'first'  => true,
  2189.             ];
  2190.             if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  2191.                 $length = count($context['_seq']);
  2192.                 $context['loop']['revindex0'] = $length - 1;
  2193.                 $context['loop']['revindex'] = $length;
  2194.                 $context['loop']['length'] = $length;
  2195.                 $context['loop']['last'] = 1 === $length;
  2196.             }
  2197.             foreach ($context['_seq'] as $context["_key"] => $context["product"]) {
  2198.                 // line 2058
  2199.                 yield "\t\t\t\t\t\t<!-- single-slide -->
  2200. \t\t\t\t\t\t<div class=\"banner-slide-item\">
  2201. \t\t\t\t\t\t\t<div class=\"container\">
  2202. \t\t\t\t\t\t\t\t<div class=\"row align-items-center\">
  2203. \t\t\t\t\t\t\t\t\t<div class=\"col-lg-4 col-md-6 col-12\">
  2204. \t\t\t\t\t\t\t\t\t\t<div class=\"banner-content-modern\">
  2205. \t\t\t\t\t\t\t\t\t\t\t<div class=\"banner-badge\">
  2206. \t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-star\"></i>
  2207. \t\t\t\t\t\t\t\t\t\t\t\tProduit en vedette
  2208. \t\t\t\t\t\t\t\t\t\t\t</div>
  2209. \t\t\t\t\t\t\t\t\t\t\t<h1 class=\"banner-title-modern\">";
  2210.                 // line 2068
  2211.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 2068), "html", null, true);
  2212.                 yield "</h1>
  2213. \t\t\t\t\t\t\t\t\t\t\t<p class=\"banner-description-modern\">
  2214. \t\t\t\t\t\t\t\t\t\t\t\t";
  2215.                 // line 2070
  2216.                 yield (((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "description", [], "any", false, false, false, 2070)) && $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, 2070)), 0, 120) . "..."), "html", null, true)) : ("Découvrez ce produit exclusif sur MaketOu"));
  2217.                 yield "
  2218. \t\t\t\t\t\t\t\t\t\t\t</p>
  2219. \t\t\t\t\t\t\t\t\t\t\t<div class=\"banner-price-modern\">
  2220. \t\t\t\t\t\t\t\t\t\t\t\t<span class=\"price-label\">Prix</span>
  2221. \t\t\t\t\t\t\t\t\t\t\t\t<span class=\"price-value\">";
  2222.                 // line 2074
  2223.                 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, 2074), 2, ".", " "), "html", null, true);
  2224.                 yield "
  2225. \t\t\t\t\t\t\t\t\t\t\t\t\tHTG</span>
  2226. \t\t\t\t\t\t\t\t\t\t\t</div>
  2227. \t\t\t\t\t\t\t\t\t\t\t<div class=\"banner-actions-modern\">
  2228. \t\t\t\t\t\t\t\t\t\t\t\t<a class=\"btn-banner-primary\" href=\"";
  2229.                 // line 2078
  2230.                 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, 2078)]), "html", null, true);
  2231.                 yield "\">
  2232. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"btn-text\">Voir le produit</span>
  2233. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"btn-icon\">
  2234. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-arrow-right\"></i>
  2235. \t\t\t\t\t\t\t\t\t\t\t\t\t</span>
  2236. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  2237. \t\t\t\t\t\t\t\t\t\t\t\t";
  2238.                 // line 2084
  2239.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "shop", [], "any", false, false, false, 2084)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2240.                     // line 2085
  2241.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"btn-banner-secondary\" href=\"";
  2242.                     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, 2085), "slug", [], "any", false, false, false, 2085)]), "html", null, true);
  2243.                     yield "\">
  2244. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\"></i>
  2245. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>";
  2246.                     // line 2087
  2247.                     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, 2087), "name", [], "any", false, false, false, 2087), "html", null, true);
  2248.                     yield "</span>
  2249. \t\t\t\t\t\t\t\t\t\t\t\t\t</a>
  2250. \t\t\t\t\t\t\t\t\t\t\t\t";
  2251.                 }
  2252.                 // line 2090
  2253.                 yield "\t\t\t\t\t\t\t\t\t\t\t</div>
  2254. \t\t\t\t\t\t\t\t\t\t</div>
  2255. \t\t\t\t\t\t\t\t\t</div>
  2256. \t\t\t\t\t\t\t\t\t<div class=\"col-lg-8 col-md-6 col-12\">
  2257. \t\t\t\t\t\t\t\t\t\t<div class=\"banner-image-modern\">
  2258. \t\t\t\t\t\t\t\t\t\t\t<div class=\"banner-image-wrapper\">
  2259. \t\t\t\t\t\t\t\t\t\t\t\t";
  2260.                 // line 2096
  2261.                 if ((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", true, true, false, 2096) && (Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2096)) > 0))) {
  2262.                     // line 2097
  2263.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t<img class=\"banner-img\" src=\"";
  2264.                     yield (((CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, true, false, 2097), 0, [], "array", true, true, false, 2097) && (($_v0 = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2097)) && 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, 2097)) && 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, 2097)) . ".jpg")), "html", null, true)));
  2265.                     yield "\" alt=\"";
  2266.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 2097), "html", null, true);
  2267.                     yield "\">
  2268. \t\t\t\t\t\t\t\t\t\t\t\t";
  2269.                 } else {
  2270.                     // line 2099
  2271.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t<img class=\"banner-img\" src=\"";
  2272.                     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, 2099)) . ".jpg")), "html", null, true);
  2273.                     yield "\" alt=\"";
  2274.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 2099), "html", null, true);
  2275.                     yield "\">
  2276. \t\t\t\t\t\t\t\t\t\t\t\t";
  2277.                 }
  2278.                 // line 2101
  2279.                 yield "\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"banner-image-overlay\"></div>
  2280. \t\t\t\t\t\t\t\t\t\t\t</div>
  2281. \t\t\t\t\t\t\t\t\t\t</div>
  2282. \t\t\t\t\t\t\t\t\t</div>
  2283. \t\t\t\t\t\t\t\t</div>
  2284. \t\t\t\t\t\t\t</div>
  2285. \t\t\t\t\t\t</div>
  2286. \t\t\t\t\t";
  2287.                 ++$context['loop']['index0'];
  2288.                 ++$context['loop']['index'];
  2289.                 $context['loop']['first'] = false;
  2290.                 if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  2291.                     --$context['loop']['revindex0'];
  2292.                     --$context['loop']['revindex'];
  2293.                     $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  2294.                 }
  2295.             }
  2296.             $_parent = $context['_parent'];
  2297.             unset($context['_seq'], $context['_key'], $context['product'], $context['_parent'], $context['loop']);
  2298.             $context = array_intersect_key($context, $_parent) + $_parent;
  2299.             // line 2109
  2300.             yield "\t\t\t\t</div>
  2301. \t\t\t</div>
  2302. \t\t</section>
  2303. \t";
  2304.         } else {
  2305.             // line 2113
  2306.             yield "\t\t<!-- Banner par défaut si pas de produits en vedette -->
  2307. \t\t<section class=\"banner-area-modern\">
  2308. \t\t\t<div class=\"banner-carousel-wrapper\">
  2309. \t\t\t\t<div class=\"container\">
  2310. \t\t\t\t\t<div class=\"row align-items-center justify-content-center\">
  2311. \t\t\t\t\t\t<div class=\"col-lg-8 text-center\">
  2312. \t\t\t\t\t\t\t<div class=\"banner-content-modern\" style=\"margin-top: 140px;\">
  2313. \t\t\t\t\t\t\t\t<h1 class=\"banner-title-modern\">Bienvenue sur MaketOu</h1>
  2314. \t\t\t\t\t\t\t\t<p class=\"banner-description-modern\">Votre marketplace haïtienne</p>
  2315. \t\t\t\t\t\t\t</div>
  2316. \t\t\t\t\t\t</div>
  2317. \t\t\t\t\t</div>
  2318. \t\t\t\t</div>
  2319. \t\t\t</div>
  2320. \t\t</section>
  2321. \t";
  2322.         }
  2323.         // line 2129
  2324.         yield "\t<!-- End banner Area -->
  2326. \t<!-- Catégories de produits -->
  2327. \t";
  2328.         // line 2132
  2329.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["categories"] ?? null)) > 0)) {
  2330.             // line 2133
  2331.             yield "\t\t<section class=\"py-5 home-section\">
  2332. \t\t\t<div class=\"container\">
  2333. \t\t\t\t<div class=\"section-title\">
  2334. \t\t\t\t\t<h2>Nos catégories</h2>
  2335. \t\t\t\t\t<p>Explorez nos différentes catégories de produits</p>
  2336. \t\t\t\t</div>
  2337. \t\t\t\t<div class=\"row\" id=\"productCategoriesContainer\">
  2338. \t\t\t\t\t";
  2339.             // line 2140
  2340.             $context['_parent'] = $context;
  2341.             $context['_seq'] = CoreExtension::ensureTraversable(Twig\Extension\CoreExtension::slice($this->env->getCharset(), ($context["categories"] ?? null), 0, 8));
  2342.             $context['loop'] = [
  2343.               'parent' => $context['_parent'],
  2344.               'index0' => 0,
  2345.               'index'  => 1,
  2346.               'first'  => true,
  2347.             ];
  2348.             if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  2349.                 $length = count($context['_seq']);
  2350.                 $context['loop']['revindex0'] = $length - 1;
  2351.                 $context['loop']['revindex'] = $length;
  2352.                 $context['loop']['length'] = $length;
  2353.                 $context['loop']['last'] = 1 === $length;
  2354.             }
  2355.             foreach ($context['_seq'] as $context["_key"] => $context["category"]) {
  2356.                 // line 2141
  2357.                 yield "\t\t\t\t\t\t<div class=\"col-lg-3 col-md-4 col-sm-6 mb-4\">
  2358. \t\t\t\t\t\t\t<div class=\"category-card-custom d-flex flex-column h-100\">
  2359. \t\t\t\t\t\t\t\t<div class=\"category-image-wrapper\">
  2360. \t\t\t\t\t\t\t\t\t<div class=\"category-image\" style=\"background-image: url('";
  2361.                 // line 2144
  2362.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["category"], "bannerImage", [], "any", false, false, false, 2144)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2363.                     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, 2144))), "html", null, true);
  2364.                 } else {
  2365.                     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, 2144)) . ".jpg")), "html", null, true);
  2366.                 }
  2367.                 yield "')\">
  2368. \t\t\t\t\t\t\t\t\t\t<div class=\"category-overlay-custom\">
  2369. \t\t\t\t\t\t\t\t\t\t\t<div class=\"category-icon-wrapper\">
  2370. \t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-tag\" style=\"font-size: 3rem;\"></i>
  2371. \t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-3\">";
  2372.                 // line 2148
  2373.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["category"], "name", [], "any", false, false, false, 2148), "html", null, true);
  2374.                 yield "</h4>
  2375. \t\t\t\t\t\t\t\t\t\t\t</div>
  2376. \t\t\t\t\t\t\t\t\t\t</div>
  2377. \t\t\t\t\t\t\t\t\t</div>
  2378. \t\t\t\t\t\t\t\t</div>
  2379. \t\t\t\t\t\t\t\t<div class=\"category-content p-3 d-flex flex-column flex-grow-1\">
  2380. \t\t\t\t\t\t\t\t\t<h5 class=\"mb-2\">";
  2381.                 // line 2154
  2382.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["category"], "name", [], "any", false, false, false, 2154), "html", null, true);
  2383.                 yield "</h5>
  2384. \t\t\t\t\t\t\t\t\t";
  2385.                 // line 2155
  2386.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["category"], "description", [], "any", false, false, false, 2155)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2387.                     // line 2156
  2388.                     yield "\t\t\t\t\t\t\t\t\t\t<p class=\"text-muted mb-3 small\">";
  2389.                     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, 2156)), 0, 60), "html", null, true);
  2390.                     yield "
  2391. \t\t\t\t\t\t\t\t\t\t\t";
  2392.                     // line 2157
  2393.                     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, 2157))) > 60)) {
  2394.                         yield "...
  2395. \t\t\t\t\t\t\t\t\t\t\t";
  2396.                     }
  2397.                     // line 2159
  2398.                     yield "\t\t\t\t\t\t\t\t\t\t</p>
  2399. \t\t\t\t\t\t\t\t\t";
  2400.                 }
  2401.                 // line 2161
  2402.                 yield "\t\t\t\t\t\t\t\t\t<a href=\"";
  2403.                 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, 2161)]), "html", null, true);
  2404.                 yield "\" class=\"btn btn-primary-custom btn-sm w-100 mt-auto\">
  2405. \t\t\t\t\t\t\t\t\t\tVoir les produits
  2406. \t\t\t\t\t\t\t\t\t</a>
  2407. \t\t\t\t\t\t\t\t</div>
  2408. \t\t\t\t\t\t\t</div>
  2409. \t\t\t\t\t\t</div>
  2410. \t\t\t\t\t";
  2411.                 ++$context['loop']['index0'];
  2412.                 ++$context['loop']['index'];
  2413.                 $context['loop']['first'] = false;
  2414.                 if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  2415.                     --$context['loop']['revindex0'];
  2416.                     --$context['loop']['revindex'];
  2417.                     $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  2418.                 }
  2419.             }
  2420.             $_parent = $context['_parent'];
  2421.             unset($context['_seq'], $context['_key'], $context['category'], $context['_parent'], $context['loop']);
  2422.             $context = array_intersect_key($context, $_parent) + $_parent;
  2423.             // line 2168
  2424.             yield "\t\t\t\t</div>
  2425. \t\t\t</div>
  2426. \t\t</section>
  2427. \t";
  2428.         }
  2429.         // line 2172
  2430.         yield "
  2431. \t<!-- Catégories de boutiques -->
  2432. \t";
  2433.         // line 2174
  2434.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["shopCategories"] ?? null)) > 0)) {
  2435.             // line 2175
  2436.             yield "\t\t<section class=\"py-5 bg-light home-section home-section--alt\">
  2437. \t\t\t<div class=\"container\">
  2438. \t\t\t\t<div class=\"section-title\">
  2439. \t\t\t\t\t<h2>Nos catégories de boutiques</h2>
  2440. \t\t\t\t\t<p>Explorez les différentes catégories de boutiques disponibles sur MaketOu</p>
  2441. \t\t\t\t</div>
  2442. \t\t\t\t<div class=\"row\" id=\"shopCategoriesContainer\">
  2443. \t\t\t\t\t";
  2444.             // line 2182
  2445.             $context['_parent'] = $context;
  2446.             $context['_seq'] = CoreExtension::ensureTraversable(Twig\Extension\CoreExtension::slice($this->env->getCharset(), ($context["shopCategories"] ?? null), 0, 6));
  2447.             $context['loop'] = [
  2448.               'parent' => $context['_parent'],
  2449.               'index0' => 0,
  2450.               'index'  => 1,
  2451.               'first'  => true,
  2452.             ];
  2453.             if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  2454.                 $length = count($context['_seq']);
  2455.                 $context['loop']['revindex0'] = $length - 1;
  2456.                 $context['loop']['revindex'] = $length;
  2457.                 $context['loop']['length'] = $length;
  2458.                 $context['loop']['last'] = 1 === $length;
  2459.             }
  2460.             foreach ($context['_seq'] as $context["_key"] => $context["shopCategory"]) {
  2461.                 // line 2183
  2462.                 yield "\t\t\t\t\t\t<div class=\"col-lg-4 col-md-6 mb-4\">
  2463. \t\t\t\t\t\t\t<a href=\"";
  2464.                 // line 2184
  2465.                 yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_shops_list");
  2466.                 yield "?category=";
  2467.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "slug", [], "any", false, false, false, 2184), "html", null, true);
  2468.                 yield "\" class=\"text-decoration-none h-100\" style=\"display: block;\">
  2469. \t\t\t\t\t\t\t\t<div class=\"category-card-custom shop-category-clickable d-flex flex-column h-100\">
  2470. \t\t\t\t\t\t\t\t\t<div class=\"category-image-wrapper\">
  2471. \t\t\t\t\t\t\t\t\t\t<div class=\"category-image\" style=\"background-image: url('";
  2472.                 // line 2187
  2473.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "bannerImage", [], "any", false, false, false, 2187)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2474.                     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, 2187)), "html", null, true);
  2475.                 } else {
  2476.                     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, 2187)) . ".jpg")), "html", null, true);
  2477.                 }
  2478.                 yield "')\">
  2479. \t\t\t\t\t\t\t\t\t\t\t<div class=\"category-overlay-custom\">
  2480. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"category-icon-wrapper\">
  2481. \t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\" style=\"font-size: 3rem;\"></i>
  2482. \t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-3\">";
  2483.                 // line 2191
  2484.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "name", [], "any", false, false, false, 2191), "html", null, true);
  2485.                 yield "</h4>
  2486. \t\t\t\t\t\t\t\t\t\t\t\t\t";
  2487.                 // line 2192
  2488.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "description", [], "any", false, false, false, 2192)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2489.                     // line 2193
  2490.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"mt-2 px-3\">";
  2491.                     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, 2193)), 0, 100), "html", null, true);
  2492.                     yield "
  2493. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  2494.                     // line 2194
  2495.                     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, 2194))) > 100)) {
  2496.                         yield "...
  2497. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  2498.                     }
  2499.                     // line 2196
  2500.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t</p>
  2501. \t\t\t\t\t\t\t\t\t\t\t\t\t";
  2502.                 }
  2503.                 // line 2198
  2504.                 yield "\t\t\t\t\t\t\t\t\t\t\t\t</div>
  2505. \t\t\t\t\t\t\t\t\t\t\t</div>
  2506. \t\t\t\t\t\t\t\t\t\t</div>
  2507. \t\t\t\t\t\t\t\t\t</div>
  2508. \t\t\t\t\t\t\t\t\t<div class=\"category-content p-3 d-flex flex-column flex-grow-1\">
  2509. \t\t\t\t\t\t\t\t\t\t<h5 class=\"mb-2\">";
  2510.                 // line 2203
  2511.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "name", [], "any", false, false, false, 2203), "html", null, true);
  2512.                 yield "</h5>
  2513. \t\t\t\t\t\t\t\t\t\t";
  2514.                 // line 2204
  2515.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "description", [], "any", false, false, false, 2204)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2516.                     // line 2205
  2517.                     yield "\t\t\t\t\t\t\t\t\t\t\t<p class=\"text-muted mb-3 small\">";
  2518.                     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, 2205)), 0, 80), "html", null, true);
  2519.                     yield "
  2520. \t\t\t\t\t\t\t\t\t\t\t\t";
  2521.                     // line 2206
  2522.                     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, 2206))) > 80)) {
  2523.                         yield "...
  2524. \t\t\t\t\t\t\t\t\t\t\t\t";
  2525.                     }
  2526.                     // line 2208
  2527.                     yield "\t\t\t\t\t\t\t\t\t\t\t</p>
  2528. \t\t\t\t\t\t\t\t\t\t";
  2529.                 }
  2530.                 // line 2210
  2531.                 yield "\t\t\t\t\t\t\t\t\t\t<span class=\"btn btn-primary-custom btn-sm w-100 mt-auto\">
  2532. \t\t\t\t\t\t\t\t\t\t\tVoir les boutiques
  2533. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-arrow-right ms-2\"></i>
  2534. \t\t\t\t\t\t\t\t\t\t</span>
  2535. \t\t\t\t\t\t\t\t\t</div>
  2536. \t\t\t\t\t\t\t\t</div>
  2537. \t\t\t\t\t\t\t</a>
  2538. \t\t\t\t\t\t</div>
  2539. \t\t\t\t\t";
  2540.                 ++$context['loop']['index0'];
  2541.                 ++$context['loop']['index'];
  2542.                 $context['loop']['first'] = false;
  2543.                 if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  2544.                     --$context['loop']['revindex0'];
  2545.                     --$context['loop']['revindex'];
  2546.                     $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  2547.                 }
  2548.             }
  2549.             $_parent = $context['_parent'];
  2550.             unset($context['_seq'], $context['_key'], $context['shopCategory'], $context['_parent'], $context['loop']);
  2551.             $context = array_intersect_key($context, $_parent) + $_parent;
  2552.             // line 2219
  2553.             yield "\t\t\t\t</div>
  2554. \t\t\t\t";
  2555.             // line 2220
  2556.             if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["shopCategories"] ?? null)) > 6)) {
  2557.                 // line 2221
  2558.                 yield "\t\t\t\t\t<div class=\"text-center mt-4\">
  2559. \t\t\t\t\t\t<button class=\"btn btn-outline-primary btn-lg\" onclick=\"showAllShopCategories()\">
  2560. \t\t\t\t\t\t\t<i class=\"lnr lnr-store me-2\"></i>
  2561. \t\t\t\t\t\t\tVoir toutes les catégories de boutiques (";
  2562.                 // line 2224
  2563.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["shopCategories"] ?? null)), "html", null, true);
  2564.                 yield ")
  2565. \t\t\t\t\t\t</button>
  2566. \t\t\t\t\t</div>
  2567. \t\t\t\t";
  2568.             }
  2569.             // line 2228
  2570.             yield "\t\t\t</div>
  2571. \t\t</section>
  2572. \t";
  2573.         }
  2574.         // line 2231
  2575.         yield "
  2576. \t<!-- Produits en vedette -->
  2577. \t";
  2578.         // line 2233
  2579.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["featuredProducts"] ?? null)) > 0)) {
  2580.             // line 2234
  2581.             yield "\t\t<section class=\"py-5 bg-light home-section\">
  2582. \t\t\t<div class=\"container\">
  2583. \t\t\t\t<div class=\"section-title text-center mb-5\">
  2584. \t\t\t\t\t<h2>Produits en vedette</h2>
  2585. \t\t\t\t\t<p>Découvrez nos produits les plus populaires et les mieux notés</p>
  2586. \t\t\t\t</div>
  2588. \t\t\t\t<div class=\"featured-gallery-wrapper\">
  2589. \t\t\t\t\t<div class=\"featured-gallery-container\">
  2590. \t\t\t\t\t\t<div class=\"featured-gallery-grid\" id=\"featuredGalleryGrid\">
  2591. \t\t\t\t\t\t\t";
  2592.             // line 2244
  2593.             $context['_parent'] = $context;
  2594.             $context['_seq'] = CoreExtension::ensureTraversable(($context["featuredProducts"] ?? null));
  2595.             $context['loop'] = [
  2596.               'parent' => $context['_parent'],
  2597.               'index0' => 0,
  2598.               'index'  => 1,
  2599.               'first'  => true,
  2600.             ];
  2601.             if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  2602.                 $length = count($context['_seq']);
  2603.                 $context['loop']['revindex0'] = $length - 1;
  2604.                 $context['loop']['revindex'] = $length;
  2605.                 $context['loop']['length'] = $length;
  2606.                 $context['loop']['last'] = 1 === $length;
  2607.             }
  2608.             foreach ($context['_seq'] as $context["_key"] => $context["product"]) {
  2609.                 // line 2245
  2610.                 yield "\t\t\t\t\t\t\t\t<div class=\"featured-gallery-item\">
  2611. \t\t\t\t\t\t\t\t\t";
  2612.                 // line 2246
  2613.                 yield from $this->load("home/_single_product_card.html.twig", 2246)->unwrap()->yield(CoreExtension::merge($context, ["product" => $context["product"]]));
  2614.                 // line 2247
  2615.                 yield "\t\t\t\t\t\t\t\t</div>
  2616. \t\t\t\t\t\t\t";
  2617.                 ++$context['loop']['index0'];
  2618.                 ++$context['loop']['index'];
  2619.                 $context['loop']['first'] = false;
  2620.                 if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  2621.                     --$context['loop']['revindex0'];
  2622.                     --$context['loop']['revindex'];
  2623.                     $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  2624.                 }
  2625.             }
  2626.             $_parent = $context['_parent'];
  2627.             unset($context['_seq'], $context['_key'], $context['product'], $context['_parent'], $context['loop']);
  2628.             $context = array_intersect_key($context, $_parent) + $_parent;
  2629.             // line 2249
  2630.             yield "\t\t\t\t\t\t</div>
  2631. \t\t\t\t\t</div>
  2633. \t\t\t\t\t<!-- Contrôles de navigation -->
  2634. \t\t\t\t\t<div class=\"featured-gallery-controls\">
  2635. \t\t\t\t\t\t<button class=\"featured-gallery-nav-btn featured-gallery-prev\" id=\"featuredGalleryPrev\" aria-label=\"Précédent\">
  2636. \t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-left\"></i>
  2637. \t\t\t\t\t\t</button>
  2638. \t\t\t\t\t\t<button class=\"featured-gallery-nav-btn featured-gallery-next\" id=\"featuredGalleryNext\" aria-label=\"Suivant\">
  2639. \t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-right\"></i>
  2640. \t\t\t\t\t\t</button>
  2641. \t\t\t\t\t</div>
  2643. \t\t\t\t\t<!-- Bouton charger plus -->
  2644. \t\t\t\t\t<div class=\"featured-gallery-load-more text-center mt-4\" id=\"featuredGalleryLoadMore\" style=\"display: none;\">
  2645. \t\t\t\t\t\t<button class=\"btn btn-outline-primary\" id=\"loadMoreFeaturedBtn\">
  2646. \t\t\t\t\t\t\t<i class=\"lnr lnr-plus-circle me-2\"></i>
  2647. \t\t\t\t\t\t\tCharger plus de produits
  2648. \t\t\t\t\t\t</button>
  2649. \t\t\t\t\t</div>
  2650. \t\t\t\t</div>
  2652. \t\t\t\t<div class=\"text-center mt-5\">
  2653. \t\t\t\t\t<a href=\"";
  2654.             // line 2272
  2655.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  2656.             yield "\" class=\"btn-view-all-products\">
  2657. \t\t\t\t\t\t<span>Voir tous les produits</span>
  2658. \t\t\t\t\t\t<i class=\"lnr lnr-arrow-right\"></i>
  2659. \t\t\t\t\t</a>
  2660. \t\t\t\t</div>
  2661. \t\t\t</div>
  2662. \t\t</section>
  2663. \t";
  2664.         }
  2665.         // line 2280
  2666.         yield "
  2667. \t<!-- Nouveautés -->
  2668. \t";
  2669.         // line 2282
  2670.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["latestProducts"] ?? null)) > 0)) {
  2671.             // line 2283
  2672.             yield "\t\t<section class=\"py-5 home-section home-section--alt\">
  2673. \t\t\t<div class=\"container\">
  2674. \t\t\t\t<div class=\"section-title text-center mb-5\">
  2675. \t\t\t\t\t<h2>Nouveautés</h2>
  2676. \t\t\t\t\t<p>Les derniers produits ajoutés sur MaketOu</p>
  2677. \t\t\t\t</div>
  2679. \t\t\t\t<div class=\"featured-gallery-wrapper\">
  2680. \t\t\t\t\t<div class=\"featured-gallery-container\">
  2681. \t\t\t\t\t\t<div class=\"featured-gallery-grid\" id=\"latestGalleryGrid\">
  2682. \t\t\t\t\t\t\t";
  2683.             // line 2293
  2684.             $context['_parent'] = $context;
  2685.             $context['_seq'] = CoreExtension::ensureTraversable(($context["latestProducts"] ?? null));
  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["product"]) {
  2700.                 // line 2294
  2701.                 yield "\t\t\t\t\t\t\t\t<div class=\"featured-gallery-item\">
  2702. \t\t\t\t\t\t\t\t\t";
  2703.                 // line 2295
  2704.                 yield from $this->load("home/_single_product_card.html.twig", 2295)->unwrap()->yield(CoreExtension::merge($context, ["product" => $context["product"]]));
  2705.                 // line 2296
  2706.                 yield "\t\t\t\t\t\t\t\t</div>
  2707. \t\t\t\t\t\t\t";
  2708.                 ++$context['loop']['index0'];
  2709.                 ++$context['loop']['index'];
  2710.                 $context['loop']['first'] = false;
  2711.                 if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  2712.                     --$context['loop']['revindex0'];
  2713.                     --$context['loop']['revindex'];
  2714.                     $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  2715.                 }
  2716.             }
  2717.             $_parent = $context['_parent'];
  2718.             unset($context['_seq'], $context['_key'], $context['product'], $context['_parent'], $context['loop']);
  2719.             $context = array_intersect_key($context, $_parent) + $_parent;
  2720.             // line 2298
  2721.             yield "\t\t\t\t\t\t</div>
  2722. \t\t\t\t\t</div>
  2724. \t\t\t\t\t<!-- Contrôles de navigation -->
  2725. \t\t\t\t\t<div class=\"featured-gallery-controls\">
  2726. \t\t\t\t\t\t<button class=\"featured-gallery-nav-btn featured-gallery-prev\" id=\"latestGalleryPrev\" aria-label=\"Précédent\">
  2727. \t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-left\"></i>
  2728. \t\t\t\t\t\t</button>
  2729. \t\t\t\t\t\t<button class=\"featured-gallery-nav-btn featured-gallery-next\" id=\"latestGalleryNext\" aria-label=\"Suivant\">
  2730. \t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-right\"></i>
  2731. \t\t\t\t\t\t</button>
  2732. \t\t\t\t\t</div>
  2734. \t\t\t\t\t<!-- Bouton charger plus -->
  2735. \t\t\t\t\t<div class=\"featured-gallery-load-more text-center mt-4\" id=\"latestGalleryLoadMore\" style=\"display: none;\">
  2736. \t\t\t\t\t\t<button class=\"btn btn-outline-primary\" id=\"loadMoreLatestBtn\">
  2737. \t\t\t\t\t\t\t<i class=\"lnr lnr-plus-circle me-2\"></i>
  2738. \t\t\t\t\t\t\tCharger plus de produits
  2739. \t\t\t\t\t\t</button>
  2740. \t\t\t\t\t</div>
  2741. \t\t\t\t</div>
  2743. \t\t\t\t<div class=\"text-center mt-5\">
  2744. \t\t\t\t\t<a href=\"";
  2745.             // line 2321
  2746.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  2747.             yield "\" class=\"btn-view-all-products\">
  2748. \t\t\t\t\t\t<span>Voir tous les produits</span>
  2749. \t\t\t\t\t\t<i class=\"lnr lnr-arrow-right\"></i>
  2750. \t\t\t\t\t</a>
  2751. \t\t\t\t</div>
  2752. \t\t\t</div>
  2753. \t\t</section>
  2754. \t";
  2755.         }
  2756.         // line 2329
  2757.         yield "
  2758. \t";
  2759.         // line 2330
  2760.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["recommendedProducts"] ?? null)) > 0)) {
  2761.             // line 2331
  2762.             yield "\t\t<section class=\"py-5 bg-white home-section\">
  2763. \t\t\t<div class=\"container\">
  2764. \t\t\t\t<div class=\"section-title text-center mb-5\">
  2765. \t\t\t\t\t<h2>Recommandés pour vous</h2>
  2766. \t\t\t\t\t<p>Suggestions basées sur votre activité récente et les tendances de MaketOu</p>
  2767. \t\t\t\t</div>
  2768. \t\t\t\t<div class=\"row g-4\">
  2769. \t\t\t\t\t";
  2770.             // line 2338
  2771.             $context['_parent'] = $context;
  2772.             $context['_seq'] = CoreExtension::ensureTraversable(($context["recommendedProducts"] ?? null));
  2773.             foreach ($context['_seq'] as $context["_key"] => $context["product"]) {
  2774.                 // line 2339
  2775.                 yield "\t\t\t\t\t\t<div class=\"col-12 col-sm-6 col-lg-3\">
  2776. \t\t\t\t\t\t\t<div class=\"product-card h-100\">
  2777. \t\t\t\t\t\t\t\t";
  2778.                 // line 2341
  2779.                 $context["productImage"] = (((CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, true, false, 2341), 0, [], "array", true, true, false, 2341) &&  !(null === (($_v2 = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2341)) && is_array($_v2) || $_v2 instanceof ArrayAccess ? ($_v2[0] ?? null) : null)))) ? ((($_v3 = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2341)) && is_array($_v3) || $_v3 instanceof ArrayAccess ? ($_v3[0] ?? null) : null)) : ("ui/img/product/p1.jpg"));
  2780.                 // line 2342
  2781.                 yield "\t\t\t\t\t\t\t\t<div class=\"product-image\" style=\"background-image:url('";
  2782.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(($context["productImage"] ?? null)), "html", null, true);
  2783.                 yield "');\">
  2784. \t\t\t\t\t\t\t\t\t";
  2785.                 // line 2343
  2786.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "isFeatured", [], "any", false, false, false, 2343)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2787.                     // line 2344
  2788.                     yield "\t\t\t\t\t\t\t\t\t\t<span class=\"product-badge bg-success\">Populaire</span>
  2789. \t\t\t\t\t\t\t\t\t";
  2790.                 }
  2791.                 // line 2346
  2792.                 yield "\t\t\t\t\t\t\t\t</div>
  2793. \t\t\t\t\t\t\t\t<div class=\"p-3\">
  2794. \t\t\t\t\t\t\t\t\t<h6 class=\"mb-2\">
  2795. \t\t\t\t\t\t\t\t\t\t<a href=\"";
  2796.                 // line 2349
  2797.                 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, 2349)]), "html", null, true);
  2798.                 yield "\">";
  2799.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 2349), "html", null, true);
  2800.                 yield "</a>
  2801. \t\t\t\t\t\t\t\t\t</h6>
  2802. \t\t\t\t\t\t\t\t\t<p class=\"mb-2 text-muted small\">
  2803. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\"></i>
  2804. \t\t\t\t\t\t\t\t\t\t";
  2805.                 // line 2353
  2806.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "shop", [], "any", false, false, false, 2353)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2807.                     // line 2354
  2808.                     yield "\t\t\t\t\t\t\t\t\t\t\t<a href=\"";
  2809.                     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, 2354), "slug", [], "any", false, false, false, 2354)]), "html", null, true);
  2810.                     yield "\">";
  2811.                     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, 2354), "name", [], "any", false, false, false, 2354), "html", null, true);
  2812.                     yield "</a>
  2813. \t\t\t\t\t\t\t\t\t\t";
  2814.                 } else {
  2815.                     // line 2356
  2816.                     yield "\t\t\t\t\t\t\t\t\t\t\tBoutique non spécifiée
  2817. \t\t\t\t\t\t\t\t\t\t";
  2818.                 }
  2819.                 // line 2358
  2820.                 yield "\t\t\t\t\t\t\t\t\t</p>
  2821. \t\t\t\t\t\t\t\t\t<div class=\"d-flex align-items-center justify-content-between\">
  2822. \t\t\t\t\t\t\t\t\t\t<span class=\"fw-bold text-primary\">";
  2823.                 // line 2360
  2824.                 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, 2360), 2, ".", " "), "html", null, true);
  2825.                 yield " HTG</span>
  2826. \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=\"";
  2827.                 // line 2361
  2828.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2361), "html", null, true);
  2829.                 yield "\" data-qty=\"1\">
  2830. \t\t\t\t\t\t\t\t\t\t\t<i class=\"ti ti-bag\"></i>
  2831. \t\t\t\t\t\t\t\t\t\t</a>
  2832. \t\t\t\t\t\t\t\t\t</div>
  2833. \t\t\t\t\t\t\t\t</div>
  2834. \t\t\t\t\t\t\t</div>
  2835. \t\t\t\t\t\t</div>
  2836. \t\t\t\t\t";
  2837.             }
  2838.             $_parent = $context['_parent'];
  2839.             unset($context['_seq'], $context['_key'], $context['product'], $context['_parent']);
  2840.             $context = array_intersect_key($context, $_parent) + $_parent;
  2841.             // line 2369
  2842.             yield "\t\t\t\t</div>
  2843. \t\t\t</div>
  2844. \t\t</section>
  2845. \t";
  2846.         }
  2847.         // line 2373
  2848.         yield "
  2849. \t";
  2850.         // line 2374
  2851.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["recentlyViewedProducts"] ?? null)) > 0)) {
  2852.             // line 2375
  2853.             yield "\t\t<section class=\"py-5 bg-light home-section home-section--alt\">
  2854. \t\t\t<div class=\"container\">
  2855. \t\t\t\t<div class=\"section-title text-center mb-5\">
  2856. \t\t\t\t\t<h2>Récemment consultés</h2>
  2857. \t\t\t\t\t<p>Retrouvez les articles que vous avez explorés dernièrement</p>
  2858. \t\t\t\t</div>
  2859. \t\t\t\t<div class=\"featured-gallery-wrapper\">
  2860. \t\t\t\t\t<div class=\"featured-gallery-container\">
  2861. \t\t\t\t\t\t<div class=\"featured-gallery-grid\">
  2862. \t\t\t\t\t\t\t";
  2863.             // line 2384
  2864.             $context['_parent'] = $context;
  2865.             $context['_seq'] = CoreExtension::ensureTraversable(($context["recentlyViewedProducts"] ?? null));
  2866.             $context['loop'] = [
  2867.               'parent' => $context['_parent'],
  2868.               'index0' => 0,
  2869.               'index'  => 1,
  2870.               'first'  => true,
  2871.             ];
  2872.             if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  2873.                 $length = count($context['_seq']);
  2874.                 $context['loop']['revindex0'] = $length - 1;
  2875.                 $context['loop']['revindex'] = $length;
  2876.                 $context['loop']['length'] = $length;
  2877.                 $context['loop']['last'] = 1 === $length;
  2878.             }
  2879.             foreach ($context['_seq'] as $context["_key"] => $context["product"]) {
  2880.                 // line 2385
  2881.                 yield "\t\t\t\t\t\t\t\t<div class=\"featured-gallery-item\">
  2882. \t\t\t\t\t\t\t\t\t";
  2883.                 // line 2386
  2884.                 yield from $this->load("home/_single_product_card.html.twig", 2386)->unwrap()->yield(CoreExtension::merge($context, ["product" => $context["product"]]));
  2885.                 // line 2387
  2886.                 yield "\t\t\t\t\t\t\t\t</div>
  2887. \t\t\t\t\t\t\t";
  2888.                 ++$context['loop']['index0'];
  2889.                 ++$context['loop']['index'];
  2890.                 $context['loop']['first'] = false;
  2891.                 if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  2892.                     --$context['loop']['revindex0'];
  2893.                     --$context['loop']['revindex'];
  2894.                     $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  2895.                 }
  2896.             }
  2897.             $_parent = $context['_parent'];
  2898.             unset($context['_seq'], $context['_key'], $context['product'], $context['_parent'], $context['loop']);
  2899.             $context = array_intersect_key($context, $_parent) + $_parent;
  2900.             // line 2389
  2901.             yield "\t\t\t\t\t\t</div>
  2902. \t\t\t\t\t</div>
  2903. \t\t\t\t</div>
  2904. \t\t\t</div>
  2905. \t\t</section>
  2906. \t";
  2907.         }
  2908.         // line 2395
  2909.         yield "
  2910. \t<!-- Fonctionnalités -->
  2911. \t<section class=\"py-5 bg-light home-section\">
  2912. \t\t<div class=\"container\">
  2913. \t\t\t<div class=\"section-title\">
  2914. \t\t\t\t<h2>Pourquoi choisir MaketOu ?</h2>
  2915. \t\t\t\t<p>Découvrez les avantages de notre plateforme</p>
  2916. \t\t\t</div>
  2917. \t\t\t<div class=\"row\">
  2918. \t\t\t\t<div class=\"col-lg-3 col-md-6 mb-4\">
  2919. \t\t\t\t\t<div class=\"feature-card\">
  2920. \t\t\t\t\t\t<div class=\"feature-icon\">
  2921. \t\t\t\t\t\t\t<i class=\"lnr lnr-rocket\"></i>
  2922. \t\t\t\t\t\t</div>
  2923. \t\t\t\t\t\t<h5>Livraison rapide</h5>
  2924. \t\t\t\t\t\t<p>Recevez vos commandes rapidement avec notre réseau de livraison optimisé</p>
  2925. \t\t\t\t\t</div>
  2926. \t\t\t\t</div>
  2927. \t\t\t\t<div class=\"col-lg-3 col-md-6 mb-4\">
  2928. \t\t\t\t\t<div class=\"feature-card\">
  2929. \t\t\t\t\t\t<div class=\"feature-icon\">
  2930. \t\t\t\t\t\t\t<i class=\"lnr lnr-lock\"></i>
  2931. \t\t\t\t\t\t</div>
  2932. \t\t\t\t\t\t<h5>Paiement sécurisé</h5>
  2933. \t\t\t\t\t\t<p>Vos transactions sont protégées avec les dernières technologies de sécurité</p>
  2934. \t\t\t\t\t</div>
  2935. \t\t\t\t</div>
  2936. \t\t\t\t<div class=\"col-lg-3 col-md-6 mb-4\">
  2937. \t\t\t\t\t<div class=\"feature-card\">
  2938. \t\t\t\t\t\t<div class=\"feature-icon\">
  2939. \t\t\t\t\t\t\t<i class=\"lnr lnr-phone\"></i>
  2940. \t\t\t\t\t\t</div>
  2941. \t\t\t\t\t\t<h5>Support 24/7</h5>
  2942. \t\t\t\t\t\t<p>Notre équipe est disponible pour vous aider à tout moment</p>
  2943. \t\t\t\t\t</div>
  2944. \t\t\t\t</div>
  2945. \t\t\t\t<div class=\"col-lg-3 col-md-6 mb-4\">
  2946. \t\t\t\t\t<div class=\"feature-card\">
  2947. \t\t\t\t\t\t<div class=\"feature-icon\">
  2948. \t\t\t\t\t\t\t<i class=\"lnr lnr-undo\"></i>
  2949. \t\t\t\t\t\t</div>
  2950. \t\t\t\t\t\t<h5>Retour facile</h5>
  2951. \t\t\t\t\t\t<p>Politique de retour flexible pour votre tranquillité d'esprit</p>
  2952. \t\t\t\t\t</div>
  2953. \t\t\t\t</div>
  2954. \t\t\t</div>
  2955. \t\t</div>
  2956. \t</section>
  2958. \t<!-- Newsletter -->
  2959. \t<section class=\"newsletter-section-modern py-5 home-section home-section--alt\">
  2960. \t\t<div class=\"container\">
  2961. \t\t\t<div class=\"row justify-content-center\">
  2962. \t\t\t\t<div class=\"col-lg-10\">
  2963. \t\t\t\t\t<div class=\"newsletter-card\">
  2964. \t\t\t\t\t\t<div class=\"row align-items-center\">
  2965. \t\t\t\t\t\t\t<div class=\"col-lg-6 text-center text-lg-start mb-4 mb-lg-0\">
  2966. \t\t\t\t\t\t\t\t<div class=\"newsletter-icon mb-3\">
  2967. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-envelope\" style=\"font-size: 4rem; color: #ffa200;\"></i>
  2968. \t\t\t\t\t\t\t\t</div>
  2969. \t\t\t\t\t\t\t\t<h2 class=\"newsletter-title mb-3\">Restez informé des dernières nouveautés</h2>
  2970. \t\t\t\t\t\t\t\t<p class=\"newsletter-description mb-0\">
  2971. \t\t\t\t\t\t\t\t\tInscrivez-vous à notre newsletter pour recevoir les offres exclusives, 
  2972. \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.
  2973. \t\t\t\t\t\t\t\t</p>
  2974. \t\t\t\t\t\t\t</div>
  2975. \t\t\t\t\t\t\t<div class=\"col-lg-6\">
  2976. \t\t\t\t\t\t\t\t<form class=\"newsletter-form-modern\" id=\"newsletterFormHome\">
  2977. \t\t\t\t\t\t\t\t\t<div class=\"newsletter-input-wrapper\">
  2978. \t\t\t\t\t\t\t\t\t\t<input type=\"email\" class=\"newsletter-input\" placeholder=\"Votre adresse email\" required name=\"email\">
  2979. \t\t\t\t\t\t\t\t\t\t<button class=\"newsletter-button\" type=\"submit\">
  2980. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-arrow-right me-2\"></i>
  2981. \t\t\t\t\t\t\t\t\t\t\tS'abonner
  2982. \t\t\t\t\t\t\t\t\t\t</button>
  2983. \t\t\t\t\t\t\t\t\t</div>
  2984. \t\t\t\t\t\t\t\t\t<p class=\"newsletter-privacy mt-3 text-center\">
  2985. \t\t\t\t\t\t\t\t\t\t<small>
  2986. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-lock me-1\"></i>
  2987. \t\t\t\t\t\t\t\t\t\t\tVos données sont sécurisées. Pas de spam, désinscription facile.
  2988. \t\t\t\t\t\t\t\t\t\t</small>
  2989. \t\t\t\t\t\t\t\t\t</p>
  2990. \t\t\t\t\t\t\t\t</form>
  2991. \t\t\t\t\t\t\t</div>
  2992. \t\t\t\t\t\t</div>
  2993. \t\t\t\t\t</div>
  2994. \t\t\t\t</div>
  2995. \t\t\t</div>
  2996. \t\t</div>
  2997. \t</section>
  2999. \t<!-- Call to Action -->
  3000. \t<section class=\"cta-section-modern py-5 home-section\">
  3001. \t\t<div class=\"container\">
  3002. \t\t\t<div class=\"cta-card\">
  3003. \t\t\t\t<div class=\"row align-items-center\">
  3004. \t\t\t\t\t<div class=\"col-lg-6 mb-4 mb-lg-0\">
  3005. \t\t\t\t\t\t<div class=\"cta-content\">
  3006. \t\t\t\t\t\t\t<span class=\"cta-badge\">
  3007. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-rocket me-2\"></i>
  3008. \t\t\t\t\t\t\t\tCommencez dès aujourd'hui
  3009. \t\t\t\t\t\t\t</span>
  3010. \t\t\t\t\t\t\t<h2 class=\"cta-title mb-3\">Prêt à commencer ?</h2>
  3011. \t\t\t\t\t\t\t<p class=\"cta-description mb-4\">
  3012. \t\t\t\t\t\t\t\tQue vous soyez
  3013. \t\t\t\t\t\t\t\t<strong>acheteur</strong>
  3014. \t\t\t\t\t\t\t\tou
  3015. \t\t\t\t\t\t\t\t<strong>vendeur</strong>, MaketOu vous offre la plateforme idéale 
  3016. \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 !
  3017. \t\t\t\t\t\t\t</p>
  3018. \t\t\t\t\t\t\t<div class=\"cta-features mb-4\">
  3019. \t\t\t\t\t\t\t\t<div class=\"cta-feature-item\">
  3020. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  3021. \t\t\t\t\t\t\t\t\t<span>Plateforme 100% sécurisée</span>
  3022. \t\t\t\t\t\t\t\t</div>
  3023. \t\t\t\t\t\t\t\t<div class=\"cta-feature-item\">
  3024. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  3025. \t\t\t\t\t\t\t\t\t<span>Support client 24/7</span>
  3026. \t\t\t\t\t\t\t\t</div>
  3027. \t\t\t\t\t\t\t\t<div class=\"cta-feature-item\">
  3028. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  3029. \t\t\t\t\t\t\t\t\t<span>Paiements multiples</span>
  3030. \t\t\t\t\t\t\t\t</div>
  3031. \t\t\t\t\t\t\t</div>
  3032. \t\t\t\t\t\t\t<div class=\"cta-buttons\">
  3033. \t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn cta-button-primary\" onclick=\"openReadyModal()\">
  3034. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-rocket me-2\"></i>
  3035. \t\t\t\t\t\t\t\t\tPrêt à commencer ?
  3036. \t\t\t\t\t\t\t\t</button>
  3037. \t\t\t\t\t\t\t\t<a href=\"";
  3038.         // line 2523
  3039.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  3040.         yield "\" class=\"btn cta-button-secondary\">
  3041. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-magnifier me-2\"></i>
  3042. \t\t\t\t\t\t\t\t\tVoir les produits
  3043. \t\t\t\t\t\t\t\t</a>
  3044. \t\t\t\t\t\t\t</div>
  3045. \t\t\t\t\t\t</div>
  3046. \t\t\t\t\t</div>
  3047. \t\t\t\t\t<div class=\"col-lg-6\">
  3048. \t\t\t\t\t\t<div class=\"cta-image-wrapper\">
  3049. \t\t\t\t\t\t\t<div class=\"cta-decoration\"></div>
  3050. \t\t\t\t\t\t\t<img src=\"";
  3051.         // line 2533
  3052.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Start.png"), "html", null, true);
  3053.         yield "\" alt=\"MaketOu\" class=\"cta-image\">
  3054. \t\t\t\t\t\t</div>
  3055. \t\t\t\t\t</div>
  3056. \t\t\t\t</div>
  3057. \t\t\t</div>
  3058. \t\t</div>
  3059. \t</section>
  3060. ";
  3061.         
  3062.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  3064.         
  3065.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  3067.         yield from [];
  3068.     }
  3070.     // line 2542
  3071.     /**
  3072.      * @return iterable<null|scalar|\Stringable>
  3073.      */
  3074.     public function block_javascripts(array $context, array $blocks = []): iterable
  3075.     {
  3076.         $macros = $this->macros;
  3077.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  3078.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripts"));
  3080.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  3081.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripts"));
  3083.         // line 2543
  3084.         yield "\t<script src=\"https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js\"></script>
  3085. \t<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css\">
  3086. \t<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css\">
  3087. \t<script src=\"";
  3088.         // line 2546
  3089.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/js/product-unified.js"), "html", null, true);
  3090.         yield "\"></script>
  3091. \t<script>
  3092. \t\twindow.openReadyModal = function () {
  3093. \t\t\tconst modalEl = document.getElementById('readyModal');
  3094. \t\t\tif (!modalEl) {
  3095. \t\t\t\tconsole.error('readyModal introuvable');
  3096. \t\t\t\treturn;
  3097. \t\t\t}
  3098. \t\t\tif (typeof bootstrap === 'undefined' || !bootstrap.Modal) {
  3099. \t\t\t\tconsole.error('Bootstrap Modal non chargé');
  3100. \t\t\t\treturn;
  3101. \t\t\t}
  3102. \t\t\tconst modalInstance = bootstrap.Modal.getOrCreateInstance(modalEl);
  3103. \t\t\tmodalInstance.show();
  3104. \t\t};
  3105. \t</script>
  3106. \t<script>
  3107. \t\t// Variables globales pour la navigation des images (si pas déjà définies)
  3108. if (typeof productImages === 'undefined') {
  3109. var productImages = {};
  3110. var currentImageIndex = {};
  3111. }
  3113. // Initialisation des données d'images pour les produits \"Produits en vedette\"
  3114. ";
  3115.         // line 2570
  3116.         if (array_key_exists("featuredProducts", $context)) {
  3117.             // line 2571
  3118.             $context['_parent'] = $context;
  3119.             $context['_seq'] = CoreExtension::ensureTraversable(($context["featuredProducts"] ?? null));
  3120.             foreach ($context['_seq'] as $context["_key"] => $context["product"]) {
  3121.                 // line 2572
  3122.                 if ((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", true, true, false, 2572) && (Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2572)) > 0))) {
  3123.                     // line 2573
  3124.                     yield "productImages[";
  3125.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2573), "html", null, true);
  3126.                     yield "] = [";
  3127.                     $context['_parent'] = $context;
  3128.                     $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2573));
  3129.                     $context['loop'] = [
  3130.                       'parent' => $context['_parent'],
  3131.                       'index0' => 0,
  3132.                       'index'  => 1,
  3133.                       'first'  => true,
  3134.                     ];
  3135.                     if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  3136.                         $length = count($context['_seq']);
  3137.                         $context['loop']['revindex0'] = $length - 1;
  3138.                         $context['loop']['revindex'] = $length;
  3139.                         $context['loop']['length'] = $length;
  3140.                         $context['loop']['last'] = 1 === $length;
  3141.                     }
  3142.                     foreach ($context['_seq'] as $context["_key"] => $context["img"]) {
  3143.                         yield "'";
  3144.                         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl($context["img"]), "html", null, true);
  3145.                         yield "'";
  3146.                         if ((($tmp =  !CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "last", [], "any", false, false, false, 2573)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3147.                             yield ",";
  3148.                         }
  3149.                         ++$context['loop']['index0'];
  3150.                         ++$context['loop']['index'];
  3151.                         $context['loop']['first'] = false;
  3152.                         if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  3153.                             --$context['loop']['revindex0'];
  3154.                             --$context['loop']['revindex'];
  3155.                             $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  3156.                         }
  3157.                     }
  3158.                     $_parent = $context['_parent'];
  3159.                     unset($context['_seq'], $context['_key'], $context['img'], $context['_parent'], $context['loop']);
  3160.                     $context = array_intersect_key($context, $_parent) + $_parent;
  3161.                     yield "];
  3162. currentImageIndex[";
  3163.                     // line 2574
  3164.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2574), "html", null, true);
  3165.                     yield "] = 0;";
  3166.                 }
  3167.             }
  3168.             $_parent = $context['_parent'];
  3169.             unset($context['_seq'], $context['_key'], $context['product'], $context['_parent']);
  3170.             $context = array_intersect_key($context, $_parent) + $_parent;
  3171.         }
  3172.         // line 2575
  3173.         yield "
  3174. // Initialisation des données d'images pour les produits \"Nouveautés\"
  3175. ";
  3176.         // line 2577
  3177.         if (array_key_exists("latestProducts", $context)) {
  3178.             // line 2578
  3179.             $context['_parent'] = $context;
  3180.             $context['_seq'] = CoreExtension::ensureTraversable(($context["latestProducts"] ?? null));
  3181.             foreach ($context['_seq'] as $context["_key"] => $context["product"]) {
  3182.                 // line 2579
  3183.                 if ((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", true, true, false, 2579) && (Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2579)) > 0))) {
  3184.                     // line 2580
  3185.                     yield "productImages[";
  3186.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2580), "html", null, true);
  3187.                     yield "] = [";
  3188.                     $context['_parent'] = $context;
  3189.                     $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2580));
  3190.                     $context['loop'] = [
  3191.                       'parent' => $context['_parent'],
  3192.                       'index0' => 0,
  3193.                       'index'  => 1,
  3194.                       'first'  => true,
  3195.                     ];
  3196.                     if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  3197.                         $length = count($context['_seq']);
  3198.                         $context['loop']['revindex0'] = $length - 1;
  3199.                         $context['loop']['revindex'] = $length;
  3200.                         $context['loop']['length'] = $length;
  3201.                         $context['loop']['last'] = 1 === $length;
  3202.                     }
  3203.                     foreach ($context['_seq'] as $context["_key"] => $context["img"]) {
  3204.                         yield "'";
  3205.                         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl($context["img"]), "html", null, true);
  3206.                         yield "'";
  3207.                         if ((($tmp =  !CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "last", [], "any", false, false, false, 2580)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3208.                             yield ",";
  3209.                         }
  3210.                         ++$context['loop']['index0'];
  3211.                         ++$context['loop']['index'];
  3212.                         $context['loop']['first'] = false;
  3213.                         if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  3214.                             --$context['loop']['revindex0'];
  3215.                             --$context['loop']['revindex'];
  3216.                             $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  3217.                         }
  3218.                     }
  3219.                     $_parent = $context['_parent'];
  3220.                     unset($context['_seq'], $context['_key'], $context['img'], $context['_parent'], $context['loop']);
  3221.                     $context = array_intersect_key($context, $_parent) + $_parent;
  3222.                     yield "];
  3223. currentImageIndex[";
  3224.                     // line 2581
  3225.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 2581), "html", null, true);
  3226.                     yield "] = 0;";
  3227.                 }
  3228.             }
  3229.             $_parent = $context['_parent'];
  3230.             unset($context['_seq'], $context['_key'], $context['product'], $context['_parent']);
  3231.             $context = array_intersect_key($context, $_parent) + $_parent;
  3232.         }
  3233.         // line 2582
  3234.         yield "
  3235. console.log('SCRIPT LOADED - Featured Gallery');
  3236. (function () {
  3237. \t'use strict';
  3239. \tconst SECTION_CONFIGS = [
  3240. \t\t{ grid: '#featuredGalleryGrid', prev: '#featuredGalleryPrev', next: '#featuredGalleryNext' },
  3241. \t\t{ grid: '#latestGalleryGrid', prev: '#latestGalleryPrev', next: '#latestGalleryNext' }
  3242. \t];
  3244. \tfunction triggerRipple(button) {
  3245. \t\tbutton.classList.remove('btn-ripple');
  3246. \t\tvoid button.offsetWidth;
  3247. \t\tbutton.classList.add('btn-ripple');
  3248. \t\tsetTimeout(() => button.classList.remove('btn-ripple'), 350);
  3249. \t}
  3251. \tfunction initSectionCarousel(config) {
  3252. \t\tconst \$grid = \$(config.grid);
  3253. \t\tif (!\$grid.length) {
  3254. \t\t\treturn;
  3255. \t\t}
  3257. \t\tif (typeof \$.fn.owlCarousel !== 'function') {
  3258. \t\t\tconsole.warn('OwlCarousel n\\'est pas chargé pour', config.grid);
  3259. \t\t\treturn;
  3260. \t\t}
  3262. \t\tif (!\$grid.hasClass('owl-carousel')) {
  3263. \t\t\t\$grid.addClass('owl-carousel');
  3264. \t\t}
  3266. \t\tif (\$grid.hasClass('owl-loaded')) {
  3267. \t\t\treturn;
  3268. \t\t}
  3270. \t\tconst owlInstance = \$grid.owlCarousel({
  3271. \t\t\tloop: true,
  3272. \t\t\tmargin: 30,
  3273. \t\t\tautoplay: true,
  3274. \t\t\tautoplayTimeout: 4800,
  3275. \t\t\tautoplayHoverPause: true,
  3276. \t\t\tsmartSpeed: 650,
  3277. \t\t\tnav: false,
  3278. \t\t\tdots: false,
  3279. \t\t\tresponsive: {
  3280. \t\t\t\t0: { items: 1, margin: 15 },
  3281. \t\t\t\t576: { items: 1.2, margin: 18 },
  3282. \t\t\t\t768: { items: 2, margin: 20 },
  3283. \t\t\t\t992: { items: 3, margin: 25 },
  3284. \t\t\t\t1400: { items: 4, margin: 30 }
  3285. \t\t\t}
  3286. \t\t});
  3288. \t\tconst \$prev = \$(config.prev);
  3289. \t\tconst \$next = \$(config.next);
  3291. \t\tif (\$prev.length) {
  3292. \t\t\t\$prev.off('click.carouselNav').on('click.carouselNav', function (e) {
  3293. \t\t\t\te.preventDefault();
  3294. \t\t\t\towlInstance.trigger('prev.owl.carousel');
  3295. \t\t\t\ttriggerRipple(this);
  3296. \t\t\t});
  3297. \t\t}
  3299. \t\tif (\$next.length) {
  3300. \t\t\t\$next.off('click.carouselNav').on('click.carouselNav', function (e) {
  3301. \t\t\t\te.preventDefault();
  3302. \t\t\t\towlInstance.trigger('next.owl.carousel');
  3303. \t\t\t\ttriggerRipple(this);
  3304. \t\t\t});
  3305. \t\t}
  3306. \t}
  3308. \tfunction ensureOwl(attempt = 0) {
  3309. \t\tif (window.jQuery && typeof \$.fn !== 'undefined' && typeof \$.fn.owlCarousel === 'function') {
  3310. \t\t\tSECTION_CONFIGS.forEach(initSectionCarousel);
  3311. \t\t} else if (attempt < 15) {
  3312. \t\t\tsetTimeout(() => ensureOwl(attempt + 1), 200);
  3313. \t\t} else {
  3314. \t\t\tconsole.warn('OwlCarousel non disponible après plusieurs tentatives');
  3315. \t\t}
  3316. \t}
  3318. \tdocument.addEventListener('DOMContentLoaded', function () {
  3319. \t\tensureOwl();
  3320. \t});
  3321. })();
  3323. document.addEventListener('DOMContentLoaded', function () { // Animation des cartes au scroll
  3324. const observerOptions = {
  3325. threshold: 0.1,
  3326. rootMargin: '0px 0px -50px 0px'
  3327. };
  3329. const observer = new IntersectionObserver(function (entries) {
  3330. entries.forEach(entry => {
  3331. if (entry.isIntersecting) {
  3332. entry.target.style.opacity = '1';
  3333. entry.target.style.transform = 'translateY(0)';
  3334. }
  3335. });
  3336. }, observerOptions);
  3338. // Observer toutes les cartes
  3339. document.querySelectorAll('.stats-card, .category-card, .product-card, .feature-card').forEach(card => {
  3340. card.style.opacity = '0';
  3341. card.style.transform = 'translateY(30px)';
  3342. card.style.transition = 'all 0.6s ease';
  3343. observer.observe(card);
  3344. });
  3346. // Compteur animé pour les statistiques
  3347. function animateCounter(element, target, duration = 2000) {
  3348. let start = 0;
  3349. const increment = target / (duration / 16);
  3351. function updateCounter() {
  3352. start += increment;
  3353. if (start < target) {
  3354. element.textContent = Math.floor(start).toLocaleString();
  3355. requestAnimationFrame(updateCounter);
  3356. } else {
  3357. element.textContent = target.toLocaleString();
  3358. }
  3359. }
  3361. updateCounter();
  3362. }
  3364. // Animer les compteurs quand ils sont visibles
  3365. const statsObserver = new IntersectionObserver(function (entries) {
  3366. entries.forEach(entry => {
  3367. if (entry.isIntersecting) {
  3368. const numberElement = entry.target.querySelector('.stats-number');
  3369. const target = parseInt(numberElement.textContent.replace(/,/g, ''));
  3370. animateCounter(numberElement, target);
  3371. statsObserver.unobserve(entry.target);
  3372. }
  3373. });
  3374. });
  3376. document.querySelectorAll('.stats-card').forEach(card => {
  3377. statsObserver.observe(card);
  3378. });
  3380. // Gestion de la newsletter
  3381. const newsletterForm = document.querySelector('.newsletter-form');
  3382. if (newsletterForm) {
  3383. newsletterForm.addEventListener('submit', function (e) {
  3384. e.preventDefault();
  3385. const email = this.querySelector('input[type=\"email\"]').value;
  3386. const button = this.querySelector('button');
  3387. const originalText = button.innerHTML;
  3389. // Désactiver le bouton
  3390. button.disabled = true;
  3391. button.innerHTML = '<i class=\"lnr lnr-spinner me-2\"></i>Inscription...';
  3393. // Envoyer la requête
  3394. fetch('";
  3395.         // line 2742
  3396.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_newsletter_subscribe");
  3397.         yield "', {
  3398. method: 'POST',
  3399. headers: {
  3400. 'Content-Type': 'application/x-www-form-urlencoded',
  3401. 'X-Requested-With': 'XMLHttpRequest'
  3402. },
  3403. body: 'email=' + encodeURIComponent(email)
  3404. }).then(response => response.json()).then(data => {
  3405. if (data.success) {
  3406. button.innerHTML = '<i class=\"lnr lnr-check me-2\"></i>Inscription réussie !';
  3407. button.classList.remove('btn-warning');
  3408. button.classList.add('btn-success');
  3409. this.reset();
  3410. } else {
  3411. button.innerHTML = '<i class=\"lnr lnr-warning me-2\"></i>Erreur';
  3412. button.classList.remove('btn-warning');
  3413. button.classList.add('btn-danger');
  3414. }
  3416. setTimeout(() => {
  3417. button.innerHTML = originalText;
  3418. button.classList.remove('btn-success', 'btn-danger');
  3419. button.classList.add('btn-warning');
  3420. button.disabled = false;
  3421. }, 3000);
  3422. }).catch(error => {
  3423. console.error('Erreur:', error);
  3424. button.innerHTML = '<i class=\"lnr lnr-warning me-2\"></i>Erreur';
  3425. button.classList.remove('btn-warning');
  3426. button.classList.add('btn-danger');
  3428. setTimeout(() => {
  3429. button.innerHTML = originalText;
  3430. button.classList.remove('btn-danger');
  3431. button.classList.add('btn-warning');
  3432. button.disabled = false;
  3433. }, 3000);
  3434. });
  3435. });
  3436. }
  3437. });
  3439. // Effet parallaxe léger pour le hero
  3440. window.addEventListener('scroll', function () {
  3441. const scrolled = window.pageYOffset;
  3442. const hero = document.querySelector('.hero-banner');
  3443. if (hero) {
  3444. hero.style.transform = `translateY(\${
  3445. scrolled * 0.5
  3446. }px)`;
  3447. }
  3448. });
  3449. });
  3451. // Fonction pour afficher toutes les catégories
  3452. function showAllCategories () {
  3453. const container = document.getElementById('productCategoriesContainer');
  3454. const btn = document.getElementById('showAllCategoriesBtn');";
  3455.         // line 2799
  3456.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["allCategories"] ?? null)) > 8)) {
  3457.             $context['_parent'] = $context;
  3458.             $context['_seq'] = CoreExtension::ensureTraversable(($context["allCategories"] ?? null));
  3459.             $context['loop'] = [
  3460.               'parent' => $context['_parent'],
  3461.               'index0' => 0,
  3462.               'index'  => 1,
  3463.               'first'  => true,
  3464.             ];
  3465.             if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  3466.                 $length = count($context['_seq']);
  3467.                 $context['loop']['revindex0'] = $length - 1;
  3468.                 $context['loop']['revindex'] = $length;
  3469.                 $context['loop']['length'] = $length;
  3470.                 $context['loop']['last'] = 1 === $length;
  3471.             }
  3472.             foreach ($context['_seq'] as $context["_key"] => $context["category"]) {
  3473.                 if ((CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 2799) > 8)) {
  3474.                     yield "const categoryHtml ";
  3475.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 2799), "html", null, true);
  3476.                     yield " = `
  3477.         <div class=\"col-lg-3 col-md-4 col-sm-6 mb-4\">
  3478.             <div class=\"category-card-custom d-flex flex-column h-100\">
  3479.                 <div class=\"category-image-wrapper\">
  3480.                     <div class=\"category-image\" style=\"background-image: url('";
  3481.                     // line 2803
  3482.                     if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["category"], "bannerImage", [], "any", false, false, false, 2803)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3483.                         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, 2803))), "html", null, true);
  3484.                     } else {
  3485.                         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, 2803)) . ".jpg")), "html", null, true);
  3486.                     }
  3487.                     yield "')\">
  3488.                         <div class=\"category-overlay-custom\">
  3489.                             <div class=\"category-icon-wrapper\">
  3490.                                 <i class=\"lnr lnr-tag\" style=\"font-size: 3rem;\"></i>
  3491.                                 <h4 class=\"mt-3\">";
  3492.                     // line 2807
  3493.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["category"], "name", [], "any", false, false, false, 2807), "html", null, true);
  3494.                     yield "</h4>
  3495.                             </div>
  3496.                         </div>
  3497.                     </div>
  3498.                 </div>
  3499.                 <div class=\"category-content p-3 d-flex flex-column flex-grow-1\">
  3500.                     <h5 class=\"mb-2\">";
  3501.                     // line 2813
  3502.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["category"], "name", [], "any", false, false, false, 2813), "html", null, true);
  3503.                     yield "</h5>
  3504.                     ";
  3505.                     // line 2814
  3506.                     if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["category"], "description", [], "any", false, false, false, 2814)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3507.                         // line 2815
  3508.                         yield "                        <p class=\"text-muted mb-3 small\">";
  3509.                         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, 2815)), 0, 60), "html", null, true);
  3510.                         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, 2815))) > 60)) {
  3511.                             yield "...";
  3512.                         }
  3513.                         yield "</p>
  3514.                     ";
  3515.                     }
  3516.                     // line 2817
  3517.                     yield "                    <a href=\"";
  3518.                     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, 2817)]), "html", null, true);
  3519.                     yield "\" class=\"btn btn-primary-custom btn-sm w-100 mt-auto\">
  3520.                         Voir les produits
  3521.                     </a>
  3522.                 </div>
  3523.             </div>
  3524.         </div>
  3525.     `;
  3526. container.insertAdjacentHTML('beforeend', categoryHtml ";
  3527.                     // line 2824
  3528.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 2824), "html", null, true);
  3529.                     yield ");";
  3530.                 }
  3531.                 ++$context['loop']['index0'];
  3532.                 ++$context['loop']['index'];
  3533.                 $context['loop']['first'] = false;
  3534.                 if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  3535.                     --$context['loop']['revindex0'];
  3536.                     --$context['loop']['revindex'];
  3537.                     $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  3538.                 }
  3539.             }
  3540.             $_parent = $context['_parent'];
  3541.             unset($context['_seq'], $context['_key'], $context['category'], $context['_parent'], $context['loop']);
  3542.             $context = array_intersect_key($context, $_parent) + $_parent;
  3543.         }
  3544.         yield "if (btn) 
  3545. btn.style.display = 'none';
  3549. }
  3551. // Fonction pour afficher toutes les catégories de boutiques
  3552. function showAllShopCategories () {
  3553. const container = document.getElementById('shopCategoriesContainer');
  3554. const btn = document.querySelector('[onclick=\"showAllShopCategories()\"]') ?. parentElement;";
  3555.         // line 2834
  3556.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["allShopCategories"] ?? null)) > 6)) {
  3557.             $context['_parent'] = $context;
  3558.             $context['_seq'] = CoreExtension::ensureTraversable(($context["allShopCategories"] ?? null));
  3559.             $context['loop'] = [
  3560.               'parent' => $context['_parent'],
  3561.               'index0' => 0,
  3562.               'index'  => 1,
  3563.               'first'  => true,
  3564.             ];
  3565.             if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  3566.                 $length = count($context['_seq']);
  3567.                 $context['loop']['revindex0'] = $length - 1;
  3568.                 $context['loop']['revindex'] = $length;
  3569.                 $context['loop']['length'] = $length;
  3570.                 $context['loop']['last'] = 1 === $length;
  3571.             }
  3572.             foreach ($context['_seq'] as $context["_key"] => $context["shopCategory"]) {
  3573.                 if ((CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 2834) > 6)) {
  3574.                     yield "const shopCategoryHtml ";
  3575.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 2834), "html", null, true);
  3576.                     yield " = `
  3577.         <div class=\"col-lg-4 col-md-6 mb-4\">
  3578.             <a href=\"";
  3579.                     // line 2836
  3580.                     yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_shops_list");
  3581.                     yield "?category=";
  3582.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "slug", [], "any", false, false, false, 2836), "html", null, true);
  3583.                     yield "\" class=\"text-decoration-none h-100\" style=\"display: block;\">
  3584.                 <div class=\"category-card-custom shop-category-clickable d-flex flex-column h-100\">
  3585.                     <div class=\"category-image-wrapper\">
  3586.                         <div class=\"category-image\" style=\"background-image: url('";
  3587.                     // line 2839
  3588.                     if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "bannerImage", [], "any", false, false, false, 2839)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3589.                         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, 2839)), "html", null, true);
  3590.                     } else {
  3591.                         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, 2839)) . ".jpg")), "html", null, true);
  3592.                     }
  3593.                     yield "')\">
  3594.                             <div class=\"category-overlay-custom\">
  3595.                                 <div class=\"category-icon-wrapper\">
  3596.                                     <i class=\"lnr lnr-store\" style=\"font-size: 3rem;\"></i>
  3597.                                     <h4 class=\"mt-3\">";
  3598.                     // line 2843
  3599.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "name", [], "any", false, false, false, 2843), "html", null, true);
  3600.                     yield "</h4>
  3601.                                     ";
  3602.                     // line 2844
  3603.                     if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "description", [], "any", false, false, false, 2844)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3604.                         // line 2845
  3605.                         yield "                                        <p class=\"mt-2 px-3\">";
  3606.                         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, 2845)), 0, 100), "html", null, true);
  3607.                         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, 2845))) > 100)) {
  3608.                             yield "...";
  3609.                         }
  3610.                         yield "</p>
  3611.                                     ";
  3612.                     }
  3613.                     // line 2847
  3614.                     yield "                                </div>
  3615.                             </div>
  3616.                         </div>
  3617.                     </div>
  3618.                     <div class=\"category-content p-3 d-flex flex-column flex-grow-1\">
  3619.                         <h5 class=\"mb-2\">";
  3620.                     // line 2852
  3621.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "name", [], "any", false, false, false, 2852), "html", null, true);
  3622.                     yield "</h5>
  3623.                         ";
  3624.                     // line 2853
  3625.                     if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["shopCategory"], "description", [], "any", false, false, false, 2853)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3626.                         // line 2854
  3627.                         yield "                            <p class=\"text-muted mb-3 small\">";
  3628.                         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, 2854)), 0, 80), "html", null, true);
  3629.                         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, 2854))) > 80)) {
  3630.                             yield "...";
  3631.                         }
  3632.                         yield "</p>
  3633.                         ";
  3634.                     }
  3635.                     // line 2856
  3636.                     yield "                        <span class=\"btn btn-primary-custom btn-sm w-100 mt-auto\">
  3637.                             Voir les boutiques <i class=\"lnr lnr-arrow-right ms-2\"></i>
  3638.                         </span>
  3639.                     </div>
  3640.                 </div>
  3641.             </a>
  3642.         </div>
  3643.     `;
  3644. container.insertAdjacentHTML('beforeend', shopCategoryHtml ";
  3645.                     // line 2864
  3646.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 2864), "html", null, true);
  3647.                     yield ");";
  3648.                 }
  3649.                 ++$context['loop']['index0'];
  3650.                 ++$context['loop']['index'];
  3651.                 $context['loop']['first'] = false;
  3652.                 if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  3653.                     --$context['loop']['revindex0'];
  3654.                     --$context['loop']['revindex'];
  3655.                     $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  3656.                 }
  3657.             }
  3658.             $_parent = $context['_parent'];
  3659.             unset($context['_seq'], $context['_key'], $context['shopCategory'], $context['_parent'], $context['loop']);
  3660.             $context = array_intersect_key($context, $_parent) + $_parent;
  3661.         }
  3662.         yield "if (btn) 
  3663. btn.style.display = 'none';
  3667. }
  3669. // Initialiser les carousels
  3670. \$(document).ready(function () { // Carousel bannière principale
  3671. if (\$('.active-banner-slider').length) {
  3672. \$('.active-banner-slider').owlCarousel({
  3673. items: 1,
  3674. loop: true,
  3675. autoplay: true,
  3676. autoplayTimeout: 6000,
  3677. autoplayHoverPause: true,
  3678. nav: true,
  3679. dots: true,
  3680. navText: [
  3681. '<i class=\"lnr lnr-chevron-left\"></i>', '<i class=\"lnr lnr-chevron-right\"></i>'
  3682. ],
  3683. smartSpeed: 1000,
  3684. animateOut: 'fadeOut',
  3685. animateIn: 'fadeIn',
  3686. responsive: {
  3687. 0: {
  3688. items: 1,
  3689. nav: true,
  3690. dots: true
  3691. },
  3692. 768: {
  3693. items: 1,
  3694. nav: true,
  3695. dots: true
  3696. },
  3697. 992: {
  3698. items: 1,
  3699. nav: true,
  3700. dots: true
  3701. }
  3702. }
  3703. });
  3704. }
  3706. // Animation d'apparition pour les cartes produits
  3707. const observerOptions = {
  3708. threshold: 0.1,
  3709. rootMargin: '0px 0px -50px 0px'
  3710. };
  3712. const productObserver = new IntersectionObserver(function (entries) {
  3713. entries.forEach(entry => {
  3714. if (entry.isIntersecting) {
  3715. entry.target.style.opacity = '1';
  3716. entry.target.style.transform = 'translateY(0)';
  3717. }
  3718. });
  3719. }, observerOptions);
  3721. document.querySelectorAll('.product-card-modern').forEach((card, index) => {
  3722. card.style.opacity = '0';
  3723. card.style.transform = 'translateY(20px)';
  3724. card.style.transition = `opacity 0.6s ease \${
  3725. index * 0.1
  3726. }s, transform 0.6s ease \${
  3727. index * 0.1
  3728. }s`;
  3729. productObserver.observe(card);
  3730. });
  3731. });
  3732. \t</script>
  3734. \t<!-- Modal \"Prêt à commencer ?\" -->
  3735. \t<div class=\"modal fade\" id=\"readyModal\" tabindex=\"-1\">
  3736. \t\t<div class=\"modal-dialog modal-dialog-centered\">
  3737. \t\t\t<div class=\"modal-content\">
  3738. \t\t\t\t<div class=\"modal-header\">
  3739. \t\t\t\t\t<h5 class=\"modal-title\">
  3740. \t\t\t\t\t\t<i class=\"lnr lnr-rocket me-2\"></i>Prêt à commencer ?
  3741. \t\t\t\t\t</h5>
  3742. \t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button>
  3743. \t\t\t\t</div>
  3744. \t\t\t\t<div class=\"modal-body\">
  3745. \t\t\t\t\t";
  3746.         // line 2947
  3747.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 2947)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3748.             // line 2948
  3749.             yield "\t\t\t\t\t\t";
  3750.             if ((CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 2948), "kycStatus", [], "any", false, false, false, 2948) == "approved")) {
  3751.                 // line 2949
  3752.                 yield "\t\t\t\t\t\t\t<div class=\"text-center\">
  3753. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\" style=\"font-size: 4rem; color: #28a745;\"></i>
  3754. \t\t\t\t\t\t\t\t<h4 class=\"mt-3\">Votre compte est vérifié !</h4>
  3755. \t\t\t\t\t\t\t\t<p class=\"text-muted\">Vous pouvez commencer à utiliser MaketOu en toute sérénité.</p>
  3756. \t\t\t\t\t\t\t\t<div class=\"mt-4\">
  3757. \t\t\t\t\t\t\t\t\t<a href=\"";
  3758.                 // line 2954
  3759.                 yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("seller_index");
  3760.                 yield "\" class=\"btn btn-primary me-2\">
  3761. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store me-1\"></i>Ouvrir ma boutique
  3762. \t\t\t\t\t\t\t\t\t</a>
  3763. \t\t\t\t\t\t\t\t\t<a href=\"";
  3764.                 // line 2957
  3765.                 yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  3766.                 yield "\" class=\"btn btn-outline-primary\">
  3767. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-magnifier me-1\"></i>Voir les produits
  3768. \t\t\t\t\t\t\t\t\t</a>
  3769. \t\t\t\t\t\t\t\t</div>
  3770. \t\t\t\t\t\t\t</div>
  3771. \t\t\t\t\t\t";
  3772.             } else {
  3773.                 // line 2963
  3774.                 yield "\t\t\t\t\t\t\t<div class=\"text-center\">
  3775. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-shield\" style=\"font-size: 4rem; color: #ffa200;\"></i>
  3776. \t\t\t\t\t\t\t\t<h4 class=\"mt-3\">Vérification requise</h4>
  3777. \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>
  3778. \t\t\t\t\t\t\t\t<div class=\"mt-4\">
  3779. \t\t\t\t\t\t\t\t\t<a href=\"";
  3780.                 // line 2968
  3781.                 yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_account_kyc");
  3782.                 yield "\" class=\"btn btn-primary btn-lg\">
  3783. \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>
  3784. \t\t\t\t\t\t\t\t\t</a>
  3785. \t\t\t\t\t\t\t\t</div>
  3786. \t\t\t\t\t\t\t</div>
  3787. \t\t\t\t\t\t";
  3788.             }
  3789.             // line 2974
  3790.             yield "\t\t\t\t\t";
  3791.         } else {
  3792.             // line 2975
  3793.             yield "\t\t\t\t\t\t<div class=\"text-center\">
  3794. \t\t\t\t\t\t\t<i class=\"lnr lnr-user\" style=\"font-size: 4rem; color: #007bff;\"></i>
  3795. \t\t\t\t\t\t\t<h4 class=\"mt-3\">Connectez-vous pour commencer</h4>
  3796. \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>
  3797. \t\t\t\t\t\t\t<div class=\"mt-4\">
  3798. \t\t\t\t\t\t\t\t<a href=\"";
  3799.             // line 2980
  3800.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_app_login");
  3801.             yield "\" class=\"btn btn-primary btn-lg me-2\">
  3802. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-enter me-1\"></i>Se connecter
  3803. \t\t\t\t\t\t\t\t</a>
  3804. \t\t\t\t\t\t\t\t<a href=\"";
  3805.             // line 2983
  3806.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_app_register");
  3807.             yield "\" class=\"btn btn-outline-primary btn-lg\">
  3808. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-user-plus me-1\"></i>S'inscrire
  3809. \t\t\t\t\t\t\t\t</a>
  3810. \t\t\t\t\t\t\t</div>
  3811. \t\t\t\t\t\t</div>
  3812. \t\t\t\t\t";
  3813.         }
  3814.         // line 2989
  3815.         yield "\t\t\t\t</div>
  3816. \t\t\t</div>
  3817. \t\t</div>
  3818. \t</div>
  3819. ";
  3820.         
  3821.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  3823.         
  3824.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  3826.         yield from [];
  3827.     }
  3829.     /**
  3830.      * @codeCoverageIgnore
  3831.      */
  3832.     public function getTemplateName(): string
  3833.     {
  3834.         return "home/index.html.twig";
  3835.     }
  3837.     /**
  3838.      * @codeCoverageIgnore
  3839.      */
  3840.     public function isTraitable(): bool
  3841.     {
  3842.         return false;
  3843.     }
  3845.     /**
  3846.      * @codeCoverageIgnore
  3847.      */
  3848.     public function getDebugInfo(): array
  3849.     {
  3850.         return array (  3815 => 2989,  3806 => 2983,  3800 => 2980,  3793 => 2975,  3790 => 2974,  3781 => 2968,  3774 => 2963,  3765 => 2957,  3759 => 2954,  3752 => 2949,  3749 => 2948,  3747 => 2947,  3646 => 2864,  3636 => 2856,  3627 => 2854,  3625 => 2853,  3621 => 2852,  3614 => 2847,  3605 => 2845,  3603 => 2844,  3599 => 2843,  3588 => 2839,  3580 => 2836,  3556 => 2834,  3528 => 2824,  3517 => 2817,  3508 => 2815,  3506 => 2814,  3502 => 2813,  3493 => 2807,  3482 => 2803,  3456 => 2799,  3396 => 2742,  3234 => 2582,  3225 => 2581,  3185 => 2580,  3183 => 2579,  3179 => 2578,  3177 => 2577,  3173 => 2575,  3164 => 2574,  3124 => 2573,  3122 => 2572,  3118 => 2571,  3116 => 2570,  3089 => 2546,  3084 => 2543,  3071 => 2542,  3052 => 2533,  3039 => 2523,  2909 => 2395,  2901 => 2389,  2886 => 2387,  2884 => 2386,  2881 => 2385,  2864 => 2384,  2853 => 2375,  2851 => 2374,  2848 => 2373,  2842 => 2369,  2828 => 2361,  2824 => 2360,  2820 => 2358,  2816 => 2356,  2808 => 2354,  2806 => 2353,  2797 => 2349,  2792 => 2346,  2788 => 2344,  2786 => 2343,  2781 => 2342,  2779 => 2341,  2775 => 2339,  2771 => 2338,  2762 => 2331,  2760 => 2330,  2757 => 2329,  2746 => 2321,  2721 => 2298,  2706 => 2296,  2704 => 2295,  2701 => 2294,  2684 => 2293,  2672 => 2283,  2670 => 2282,  2666 => 2280,  2655 => 2272,  2630 => 2249,  2615 => 2247,  2613 => 2246,  2610 => 2245,  2593 => 2244,  2581 => 2234,  2579 => 2233,  2575 => 2231,  2570 => 2228,  2563 => 2224,  2558 => 2221,  2556 => 2220,  2553 => 2219,  2531 => 2210,  2527 => 2208,  2522 => 2206,  2517 => 2205,  2515 => 2204,  2511 => 2203,  2504 => 2198,  2500 => 2196,  2495 => 2194,  2490 => 2193,  2488 => 2192,  2484 => 2191,  2473 => 2187,  2465 => 2184,  2462 => 2183,  2445 => 2182,  2436 => 2175,  2434 => 2174,  2430 => 2172,  2424 => 2168,  2402 => 2161,  2398 => 2159,  2393 => 2157,  2388 => 2156,  2386 => 2155,  2382 => 2154,  2373 => 2148,  2362 => 2144,  2357 => 2141,  2340 => 2140,  2331 => 2133,  2329 => 2132,  2324 => 2129,  2306 => 2113,  2300 => 2109,  2279 => 2101,  2271 => 2099,  2263 => 2097,  2261 => 2096,  2253 => 2090,  2247 => 2087,  2241 => 2085,  2239 => 2084,  2230 => 2078,  2223 => 2074,  2216 => 2070,  2211 => 2068,  2199 => 2058,  2182 => 2057,  2178 => 2055,  2176 => 2054,  2172 => 2052,  2159 => 2051,  453 => 355,  103 => 7,  90 => 6,  66 => 3,  43 => 1,);
  3851.     }
  3853.     public function getSourceContext(): Source
  3854.     {
  3855.         return new Source("{% extends 'base_home.html.twig' %}
  3857. {% block title %}Accueil | MaketOu - Votre marketplace haïtienne
  3858. {% endblock %}
  3860. {% block stylesheets %}
  3861. \t<style>
  3862. \t\t/* Styles personnalisés pour la page d'accueil */
  3863. \t\t.hero-banner {
  3864. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  3865. \t\t\tcolor: white;
  3866. \t\t\tpadding: 100px 0;
  3867. \t\t\tposition: relative;
  3868. \t\t\toverflow: hidden;
  3869. \t\t}
  3871. \t\t.hero-banner::before {
  3872. \t\t\tcontent: '';
  3873. \t\t\tposition: absolute;
  3874. \t\t\ttop: 0;
  3875. \t\t\tleft: 0;
  3876. \t\t\tright: 0;
  3877. \t\t\tbottom: 0;
  3878. \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>');
  3879. \t\t\topacity: 0.3;
  3880. \t\t}
  3882. \t\t.hero-content {
  3883. \t\t\tposition: relative;
  3884. \t\t\tz-index: 2;
  3885. \t\t}
  3887. \t\t.stats-card {
  3888. \t\t\tbackground: white;
  3889. \t\t\tborder-radius: 15px;
  3890. \t\t\tpadding: 30px;
  3891. \t\t\ttext-align: center;
  3892. \t\t\tbox-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  3893. \t\t\ttransition: transform 0.3s ease;
  3894. \t\t}
  3896. \t\t.stats-card:hover {
  3897. \t\t\ttransform: translateY(-5px);
  3898. \t\t}
  3900. \t\t.stats-number {
  3901. \t\t\tfont-size: 3rem;
  3902. \t\t\tfont-weight: bold;
  3903. \t\t\tcolor: #ffa200;
  3904. \t\t\tdisplay: block;
  3905. \t\t}
  3907. \t\t.stats-label {
  3908. \t\t\tcolor: #666;
  3909. \t\t\tfont-size: 1.1rem;
  3910. \t\t\tmargin-top: 10px;
  3911. \t\t}
  3913. \t\t.category-card {
  3914. \t\t\tbackground: white;
  3915. \t\t\tborder-radius: 15px;
  3916. \t\t\toverflow: hidden;
  3917. \t\t\tbox-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  3918. \t\t\ttransition: all 0.3s ease;
  3919. \t\t\theight: 100%;
  3920. \t\t}
  3922. \t\t.category-card:hover {
  3923. \t\t\ttransform: translateY(-5px);
  3924. \t\t\tbox-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  3925. \t\t}
  3927. \t\t.category-image {
  3928. \t\t\theight: 200px;
  3929. \t\t\tbackground-size: cover;
  3930. \t\t\tbackground-position: center;
  3931. \t\t\tposition: relative;
  3932. \t\t}
  3934. \t\t.category-overlay {
  3935. \t\t\tposition: absolute;
  3936. \t\t\ttop: 0;
  3937. \t\t\tleft: 0;
  3938. \t\t\tright: 0;
  3939. \t\t\tbottom: 0;
  3940. \t\t\tbackground: linear-gradient(45deg, rgba(255,162,0,0.8), rgba(232,145,10,0.8));
  3941. \t\t\tdisplay: flex;
  3942. \t\t\talign-items: center;
  3943. \t\t\tjustify-content: center;
  3944. \t\t\topacity: 0;
  3945. \t\t\ttransition: opacity 0.3s ease;
  3946. \t\t}
  3948. \t\t.category-card:hover .category-overlay {
  3949. \t\t\topacity: 1;
  3950. \t\t}
  3952. \t\t.product-card {
  3953. \t\t\tbackground: white;
  3954. \t\t\tborder-radius: 15px;
  3955. \t\t\toverflow: hidden;
  3956. \t\t\tbox-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  3957. \t\t\ttransition: all 0.3s ease;
  3958. \t\t\theight: 100%;
  3959. \t\t}
  3961. \t\t.product-card:hover {
  3962. \t\t\ttransform: translateY(-5px);
  3963. \t\t\tbox-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  3964. \t\t}
  3966. \t\t.product-image {
  3967. \t\t\theight: 250px;
  3968. \t\t\tbackground-size: cover;
  3969. \t\t\tbackground-position: center;
  3970. \t\t\tposition: relative;
  3971. \t\t}
  3973. \t\t.product-badge {
  3974. \t\t\tposition: absolute;
  3975. \t\t\ttop: 15px;
  3976. \t\t\tright: 15px;
  3977. \t\t\tbackground: #ffa200;
  3978. \t\t\tcolor: white;
  3979. \t\t\tpadding: 5px 10px;
  3980. \t\t\tborder-radius: 20px;
  3981. \t\t\tfont-size: 0.8rem;
  3982. \t\t\tfont-weight: bold;
  3983. \t\t}
  3985. \t\t.product-info {
  3986. \t\t\tpadding: 20px;
  3987. \t\t}
  3989. \t\t.product-title {
  3990. \t\t\tfont-size: 1.2rem;
  3991. \t\t\tfont-weight: 600;
  3992. \t\t\tmargin-bottom: 10px;
  3993. \t\t\tcolor: #333;
  3994. \t\t}
  3996. \t\t.product-price {
  3997. \t\t\tfont-size: 1.5rem;
  3998. \t\t\tfont-weight: bold;
  3999. \t\t\tcolor: #ffa200;
  4000. \t\t\tmargin-bottom: 10px;
  4001. \t\t}
  4003. \t\t.product-shop {
  4004. \t\t\tfont-size: 0.9rem;
  4005. \t\t\tcolor: #666;
  4006. \t\t\tmargin-bottom: 15px;
  4007. \t\t}
  4009. \t\t.btn-primary-custom {
  4010. \t\t\tbackground: #ffa200;
  4011. \t\t\tborder: none;
  4012. \t\t\tcolor: white;
  4013. \t\t\tpadding: 12px 30px;
  4014. \t\t\tborder-radius: 25px;
  4015. \t\t\tfont-weight: 500;
  4016. \t\t\ttransition: all 0.3s ease;
  4017. \t\t}
  4019. \t\t.btn-primary-custom:hover {
  4020. \t\t\tbackground: #e8910a;
  4021. \t\t\ttransform: translateY(-2px);
  4022. \t\t\tbox-shadow: 0 5px 15px rgba(255, 162, 0, 0.3);
  4023. \t\t}
  4025. \t\t.section-title {
  4026. \t\t\ttext-align: center;
  4027. \t\t\tmargin-bottom: 50px;
  4028. \t\t}
  4030. \t\t.section-title h2 {
  4031. \t\t\tfont-size: 2.5rem;
  4032. \t\t\tfont-weight: bold;
  4033. \t\t\tcolor: #333;
  4034. \t\t\tmargin-bottom: 15px;
  4035. \t\t}
  4037. \t\t.section-title p {
  4038. \t\t\tfont-size: 1.2rem;
  4039. \t\t\tcolor: #666;
  4040. \t\t\tmax-width: 600px;
  4041. \t\t\tmargin: 0 auto;
  4042. \t\t}
  4044. \t\t.feature-card {
  4045. \t\t\ttext-align: center;
  4046. \t\t\tpadding: 30px 20px;
  4047. \t\t\tbackground: white;
  4048. \t\t\tborder-radius: 15px;
  4049. \t\t\tbox-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  4050. \t\t\ttransition: all 0.3s ease;
  4051. \t\t\theight: 100%;
  4052. \t\t}
  4054. \t\t.feature-card:hover {
  4055. \t\t\ttransform: translateY(-5px);
  4056. \t\t\tbox-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  4057. \t\t}
  4059. \t\t.feature-icon {
  4060. \t\t\twidth: 80px;
  4061. \t\t\theight: 80px;
  4062. \t\t\tbackground: linear-gradient(135deg, #ffa200, #e8910a);
  4063. \t\t\tborder-radius: 50%;
  4064. \t\t\tdisplay: flex;
  4065. \t\t\talign-items: center;
  4066. \t\t\tjustify-content: center;
  4067. \t\t\tmargin: 0 auto 20px;
  4068. \t\t\tfont-size: 2rem;
  4069. \t\t\tcolor: white;
  4070. \t\t}
  4072. \t\t.newsletter-section {
  4073. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  4074. \t\t\tcolor: white;
  4075. \t\t\tpadding: 80px 0;
  4076. \t\t}
  4078. \t\t.newsletter-form {
  4079. \t\t\tmax-width: 500px;
  4080. \t\t\tmargin: 0 auto;
  4081. \t\t}
  4083. \t\t.newsletter-form .form-control {
  4084. \t\t\tborder: none;
  4085. \t\t\tborder-radius: 25px;
  4086. \t\t\tpadding: 15px 25px;
  4087. \t\t\tfont-size: 1.1rem;
  4088. \t\t}
  4090. \t\t.newsletter-form .btn {
  4091. \t\t\tborder-radius: 25px;
  4092. \t\t\tpadding: 15px 30px;
  4093. \t\t\tfont-weight: 500;
  4094. \t\t}
  4096. \t\t/* Responsive Styles */
  4097. \t\t@media(max-width: 991.98px) {
  4098. \t\t\t.hero-banner {
  4099. \t\t\t\tpadding: 60px 0;
  4100. \t\t\t}
  4102. \t\t\t.stats-number {
  4103. \t\t\t\tfont-size: 2.5rem;
  4104. \t\t\t}
  4106. \t\t\t.section-title h2 {
  4107. \t\t\t\tfont-size: 2rem;
  4108. \t\t\t}
  4109. \t\t\t
  4110. \t\t\t.stats-card {
  4111. \t\t\t\tmargin-bottom: 1.5rem;
  4112. \t\t\t}
  4113. \t\t}
  4115. \t\t@media(max-width: 767.98px) {
  4116. \t\t\t.hero-banner {
  4117. \t\t\t\tpadding: 40px 0;
  4118. \t\t\t}
  4120. \t\t\t.hero-content h1 {
  4121. \t\t\t\tfont-size: 1.75rem;
  4122. \t\t\t}
  4124. \t\t\t.stats-number {
  4125. \t\t\t\tfont-size: 2rem;
  4126. \t\t\t}
  4128. \t\t\t.stats-label {
  4129. \t\t\t\tfont-size: 0.9rem;
  4130. \t\t\t}
  4132. \t\t\t.section-title h2 {
  4133. \t\t\t\tfont-size: 1.75rem;
  4134. \t\t\t}
  4136. \t\t\t.section-title p {
  4137. \t\t\t\tfont-size: 1rem;
  4138. \t\t\t}
  4139. \t\t\t
  4140. \t\t\t.category-card,
  4141. \t\t\t.product-card {
  4142. \t\t\t\tmargin-bottom: 1.5rem;
  4143. \t\t\t}
  4144. \t\t\t
  4145. \t\t\t.category-image {
  4146. \t\t\t\theight: 150px;
  4147. \t\t\t}
  4148. \t\t\t
  4149. \t\t\t.product-image {
  4150. \t\t\t\theight: 200px;
  4151. \t\t\t}
  4152. \t\t\t
  4153. \t\t\t.feature-card {
  4154. \t\t\t\tmargin-bottom: 1.5rem;
  4155. \t\t\t}
  4156. \t\t\t
  4157. \t\t\t.newsletter-section {
  4158. \t\t\t\tpadding: 40px 0;
  4159. \t\t\t}
  4160. \t\t}
  4162. \t\t@media(max-width: 575.98px) {
  4163. \t\t\t.hero-banner {
  4164. \t\t\t\tpadding: 30px 0;
  4165. \t\t\t}
  4167. \t\t\t.hero-content h1 {
  4168. \t\t\t\tfont-size: 1.5rem;
  4169. \t\t\t}
  4171. \t\t\t.stats-card {
  4172. \t\t\t\tpadding: 1.5rem;
  4173. \t\t\t}
  4175. \t\t\t.stats-number {
  4176. \t\t\t\tfont-size: 1.75rem;
  4177. \t\t\t}
  4179. \t\t\t.section-title h2 {
  4180. \t\t\t\tfont-size: 1.5rem;
  4181. \t\t\t}
  4182. \t\t\t
  4183. \t\t\t.category-image {
  4184. \t\t\t\theight: 120px;
  4185. \t\t\t}
  4186. \t\t\t
  4187. \t\t\t.product-image {
  4188. \t\t\t\theight: 180px;
  4189. \t\t\t}
  4190. \t\t\t
  4191. \t\t\t.product-info {
  4192. \t\t\t\tpadding: 1rem;
  4193. \t\t\t}
  4194. \t\t\t
  4195. \t\t\t.product-title {
  4196. \t\t\t\tfont-size: 1rem;
  4197. \t\t\t}
  4198. \t\t\t
  4199. \t\t\t.product-price {
  4200. \t\t\t\tfont-size: 1.25rem;
  4201. \t\t\t}
  4202. \t\t}
  4204. \t\t/* Styles modernes pour le carousel de bannière */
  4205. \t\t.banner-area-modern {
  4206. \t\t\tposition: relative;
  4207. \t\t\twidth: 100%;
  4208. \t\t\tmin-height: 500px;
  4209. \t\t\tbackground: url('{{ asset('ui/img/banner/banner-bg.jpg') }}') center center no-repeat;
  4210. \t\t\tbackground-size: cover;
  4211. \t\t\toverflow: hidden;
  4212. \t\t\tpadding: 60px 0;
  4213. \t\t}
  4215. \t\t.banner-area-modern::before {
  4216. \t\t\tcontent: '';
  4217. \t\t\tposition: absolute;
  4218. \t\t\ttop: 0;
  4219. \t\t\tleft: 0;
  4220. \t\t\twidth: 100%;
  4221. \t\t\theight: 100%;
  4222. \t\t\tbackground: rgba(0, 0, 0, 0.1);
  4223. \t\t\tz-index: 1;
  4224. \t\t}
  4226. \t\t.banner-carousel-wrapper {
  4227. \t\t\tposition: relative;
  4228. \t\t\twidth: 100%;
  4229. \t\t\theight: 100%;
  4230. \t\t\tz-index: 2;
  4231. \t\t}
  4233. \t\t.banner-slide-item {
  4234. \t\t\tmin-height: 500px;
  4235. \t\t\tdisplay: flex;
  4236. \t\t\talign-items: center;
  4237. \t\t\tpadding: 40px 0;
  4238. \t\t}
  4240. \t\t.banner-content-modern {
  4241. \t\t\tposition: relative;
  4242. \t\t\tz-index: 2;
  4243. \t\t\tpadding: 30px;
  4244. \t\t\tbackground: rgba(255, 255, 255, 0.98);
  4245. \t\t\tborder-radius: 20px;
  4246. \t\t\tbox-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  4247. \t\t\tbackdrop-filter: blur(10px);
  4248. \t\t\tanimation: fadeInUp 0.8s ease;
  4249. \t\t}
  4251. \t\t@keyframes fadeInUp {
  4252. \t\t\tfrom {
  4253. \t\t\t\topacity: 0;
  4254. \t\t\t\ttransform: translateY(30px);
  4255. \t\t\t}
  4256. \t\t\tto {
  4257. \t\t\t\topacity: 1;
  4258. \t\t\t\ttransform: translateY(0);
  4259. \t\t\t}
  4260. \t\t}
  4262. \t\t.banner-badge {
  4263. \t\t\tdisplay: inline-block;
  4264. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  4265. \t\t\tcolor: white;
  4266. \t\t\tpadding: 8px 20px;
  4267. \t\t\tborder-radius: 50px;
  4268. \t\t\tfont-size: 0.85rem;
  4269. \t\t\tfont-weight: 600;
  4270. \t\t\tmargin-bottom: 20px;
  4271. \t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.4);
  4272. \t\t}
  4274. \t\t.banner-badge i {
  4275. \t\t\tmargin-right: 5px;
  4276. \t\t}
  4278. \t\t.banner-title-modern {
  4279. \t\t\tfont-size: 2.0rem;
  4280. \t\t\tfont-weight: 600;
  4281. \t\t\tcolor: #2c3e50;
  4282. \t\t\tmargin-bottom: 20px;
  4283. \t\t\tline-height: 1.2;
  4284. \t\t\tbackground: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  4285. \t\t\t-webkit-background-clip: text;
  4286. \t\t\t-webkit-text-fill-color: transparent;
  4287. \t\t\tbackground-clip: text;
  4288. \t\t}
  4290. \t\t.banner-description-modern {
  4291. \t\t\tfont-size: 1.1rem;
  4292. \t\t\tcolor: #555;
  4293. \t\t\tline-height: 1.8;
  4294. \t\t\tmargin-bottom: 25px;
  4295. \t\t}
  4297. \t\t.banner-price-modern {
  4298. \t\t\tdisplay: flex;
  4299. \t\t\talign-items: center;
  4300. \t\t\tgap: 15px;
  4301. \t\t\tmargin-bottom: 30px;
  4302. \t\t\tpadding: 15px 20px;
  4303. \t\t\tbackground: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  4304. \t\t\tborder-radius: 12px;
  4305. \t\t\tborder-left: 4px solid #ffa200;
  4306. \t\t}
  4308. \t\t.banner-price-modern .price-label {
  4309. \t\t\tfont-size: 0.9rem;
  4310. \t\t\tcolor: #666;
  4311. \t\t\tfont-weight: 600;
  4312. \t\t\ttext-transform: uppercase;
  4313. \t\t\tletter-spacing: 1px;
  4314. \t\t}
  4316. \t\t.banner-price-modern .price-value {
  4317. \t\t\tfont-size: 1.2rem;
  4318. \t\t\tfont-weight: 600;
  4319. \t\t\tcolor: #ffa200;
  4320. \t\t}
  4322. \t\t.banner-actions-modern {
  4323. \t\t\tdisplay: flex;
  4324. \t\t\tgap: 15px;
  4325. \t\t\tflex-wrap: wrap;
  4326. \t\t}
  4328. \t\t.btn-banner-primary {
  4329. \t\t\tdisplay: inline-flex;
  4330. \t\t\talign-items: center;
  4331. \t\t\tgap: 10px;
  4332. \t\t\tpadding: 15px 35px;
  4333. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  4334. \t\t\tcolor: white;
  4335. \t\t\ttext-decoration: none;
  4336. \t\t\tborder-radius: 50px;
  4337. \t\t\tfont-weight: 600;
  4338. \t\t\tfont-size: 1rem;
  4339. \t\t\ttransition: all 0.3s ease;
  4340. \t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.4);
  4341. \t\t}
  4343. \t\t.btn-banner-primary:hover {
  4344. \t\t\ttransform: translateY(-3px);
  4345. \t\t\tbox-shadow: 0 8px 25px rgba(255, 162, 0, 0.6);
  4346. \t\t\tcolor: white;
  4347. \t\t}
  4349. \t\t.btn-banner-primary .btn-icon {
  4350. \t\t\ttransition: transform 0.3s ease;
  4351. \t\t}
  4353. \t\t.btn-banner-primary:hover .btn-icon {
  4354. \t\t\ttransform: translateX(5px);
  4355. \t\t}
  4357. \t\t.btn-banner-secondary {
  4358. \t\t\tdisplay: inline-flex;
  4359. \t\t\talign-items: center;
  4360. \t\t\tgap: 8px;
  4361. \t\t\tpadding: 15px 25px;
  4362. \t\t\tbackground: white;
  4363. \t\t\tcolor: #667eea;
  4364. \t\t\ttext-decoration: none;
  4365. \t\t\tborder-radius: 50px;
  4366. \t\t\tfont-weight: 600;
  4367. \t\t\tfont-size: 0.95rem;
  4368. \t\t\tborder: 2px solid #667eea;
  4369. \t\t\ttransition: all 0.3s ease;
  4370. \t\t}
  4372. \t\t.btn-banner-secondary:hover {
  4373. \t\t\tbackground: #667eea;
  4374. \t\t\tcolor: white;
  4375. \t\t\ttransform: translateY(-3px);
  4376. \t\t\tbox-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  4377. \t\t}
  4379. \t\t.banner-image-modern {
  4380. \t\t\tposition: relative;
  4381. \t\t\theight: 450px;
  4382. \t\t\tdisplay: flex;
  4383. \t\t\talign-items: center;
  4384. \t\t\tjustify-content: center;
  4385. \t\t}
  4387. \t\t.banner-image-wrapper {
  4388. \t\t\tposition: relative;
  4389. \t\t\twidth: 100%;
  4390. \t\t\theight: 100%;
  4391. \t\t\tborder-radius: 20px;
  4392. \t\t\toverflow: hidden;
  4393. \t\t\tbox-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  4394. \t\t\tbackground: white;
  4395. \t\t\tpadding: 20px;
  4396. \t\t}
  4398. \t\t.banner-img {
  4399. \t\t\twidth: 100%;
  4400. \t\t\theight: 100%;
  4401. \t\t\tobject-fit: contain;
  4402. \t\t\tborder-radius: 15px;
  4403. \t\t\ttransition: transform 0.5s ease;
  4404. \t\t}
  4406. \t\t.banner-slide-item:hover .banner-img {
  4407. \t\t\ttransform: scale(1.05);
  4408. \t\t}
  4410. \t\t.banner-image-overlay {
  4411. \t\t\tposition: absolute;
  4412. \t\t\ttop: 0;
  4413. \t\t\tleft: 0;
  4414. \t\t\twidth: 100%;
  4415. \t\t\theight: 100%;
  4416. \t\t\tbackground: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  4417. \t\t\tborder-radius: 15px;
  4418. \t\t\tpointer-events: none;
  4419. \t\t}
  4421. \t\t/* Styles pour Owl Carousel */
  4422. \t\t.banner-area-modern .owl-nav {
  4423. \t\t\tposition: absolute;
  4424. \t\t\ttop: 50%;
  4425. \t\t\ttransform: translateY(-50%);
  4426. \t\t\twidth: 100%;
  4427. \t\t\tdisplay: flex;
  4428. \t\t\tjustify-content: space-between;
  4429. \t\t\talign-items: center;
  4430. \t\t\tpadding: 0 20px;
  4431. \t\t\tpointer-events: none;
  4432. \t\t\tz-index: 10;
  4433. \t\t\tleft: 0;
  4434. \t\t\tright: 0;
  4435. \t\t\tbox-sizing: border-box;
  4436. \t\t}
  4438. \t\t.banner-area-modern .owl-nav button {
  4439. \t\t\twidth: 60px;
  4440. \t\t\theight: 60px;
  4441. \t\t\tmin-width: 60px;
  4442. \t\t\tmin-height: 60px;
  4443. \t\t\tbackground: #ffa200 !important;
  4444. \t\t\tborder-radius: 50% !important;
  4445. \t\t\tdisplay: flex !important;
  4446. \t\t\talign-items: center;
  4447. \t\t\tjustify-content: center;
  4448. \t\t\tcolor: white !important;
  4449. \t\t\tfont-size: 24px !important;
  4450. \t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.4);
  4451. \t\t\ttransition: all 0.3s ease;
  4452. \t\t\tpointer-events: all;
  4453. \t\t\tborder: none !important;
  4454. \t\t\tposition: relative;
  4455. \t\t\tflex-shrink: 0;
  4456. \t\t\tmargin: 0;
  4457. \t\t\tpadding: 0;
  4458. \t\t\tline-height: 1;
  4459. \t\t}
  4461. \t\t.banner-area-modern .owl-nav button.owl-prev {
  4462. \t\t\tmargin-right: auto;
  4463. \t\t}
  4465. \t\t.banner-area-modern .owl-nav button.owl-next {
  4466. \t\t\tmargin-left: auto;
  4467. \t\t}
  4469. \t\t.banner-area-modern .owl-nav button:hover {
  4470. \t\t\tbackground: #ff6b00 !important;
  4471. \t\t\tcolor: white !important;
  4472. \t\t\ttransform: scale(1.1);
  4473. \t\t\tbox-shadow: 0 6px 20px rgba(255, 162, 0, 0.6);
  4474. \t\t}
  4476. \t\t.banner-area-modern .owl-nav button.disabled {
  4477. \t\t\topacity: 0.5;
  4478. \t\t\tcursor: not-allowed;
  4479. \t\t}
  4481. \t\t.banner-area-modern .owl-nav button.disabled:hover {
  4482. \t\t\ttransform: scale(1);
  4483. \t\t}
  4485. \t\t.banner-area-modern .owl-dots {
  4486. \t\t\tposition: absolute;
  4487. \t\t\tbottom: 30px;
  4488. \t\t\tleft: 50%;
  4489. \t\t\ttransform: translateX(-50%);
  4490. \t\t\tdisplay: flex;
  4491. \t\t\tgap: 10px;
  4492. \t\t\tz-index: 10;
  4493. \t\t}
  4495. \t\t.banner-area-modern .owl-dots button {
  4496. \t\t\twidth: 12px;
  4497. \t\t\theight: 12px;
  4498. \t\t\tborder-radius: 50%;
  4499. \t\t\tbackground: rgba(255, 255, 255, 0.6) !important;
  4500. \t\t\tborder: 2px solid white !important;
  4501. \t\t\ttransition: all 0.3s ease;
  4502. \t\t\tmargin: 0 5px;
  4503. \t\t}
  4505. \t\t.banner-area-modern .owl-dots button.active {
  4506. \t\t\tbackground: #ffa200 !important;
  4507. \t\t\tborder-color: #ffa200 !important;
  4508. \t\t\twidth: 30px;
  4509. \t\t\tborder-radius: 6px;
  4510. \t\t}
  4512. \t\t/* Responsive */
  4513. \t\t@media(max-width: 992px) {
  4514. \t\t\t.banner-area-modern {
  4515. \t\t\t\tmin-height: 450px;
  4516. \t\t\t\tpadding: 40px 0;
  4517. \t\t\t\tbackground-size: cover;
  4518. \t\t\t\tbackground-position: center;
  4519. \t\t\t}
  4521. \t\t\t.banner-slide-item {
  4522. \t\t\t\tmin-height: 450px;
  4523. \t\t\t\tpadding: 30px 0;
  4524. \t\t\t}
  4526. \t\t\t.banner-title-modern {
  4527. \t\t\t\tfont-size: 1.5rem;
  4528. \t\t\t}
  4530. \t\t\t.banner-description-modern {
  4531. \t\t\t\tfont-size: 1rem;
  4532. \t\t\t}
  4534. \t\t\t.banner-image-modern {
  4535. \t\t\t\theight: 350px;
  4536. \t\t\t\tmargin-top: 30px;
  4537. \t\t\t}
  4539. \t\t\t.banner-content-modern {
  4540. \t\t\t\tpadding: 25px;
  4541. \t\t\t}
  4542. \t\t}
  4544. \t\t@media(max-width: 768px) {
  4545. \t\t\t.banner-area-modern {
  4546. \t\t\t\tmin-height: 400px;
  4547. \t\t\t\tpadding: 30px 0;
  4548. \t\t\t\tbackground-size: cover;
  4549. \t\t\t\tbackground-position: center;
  4550. \t\t\t}
  4552. \t\t\t.banner-slide-item {
  4553. \t\t\t\tmin-height: 400px;
  4554. \t\t\t\tpadding: 20px 0;
  4555. \t\t\t}
  4557. \t\t\t.banner-title-modern {
  4558. \t\t\t\tfont-size: 1.25rem;
  4559. \t\t\t}
  4561. \t\t\t.banner-description-modern {
  4562. \t\t\t\tfont-size: 0.95rem;
  4563. \t\t\t}
  4565. \t\t\t.banner-image-modern {
  4566. \t\t\t\theight: 280px;
  4567. \t\t\t\tmargin-top: 20px;
  4568. \t\t\t}
  4570. \t\t\t.banner-content-modern {
  4571. \t\t\t\tpadding: 20px;
  4572. \t\t\t}
  4574. \t\t\t.banner-price-modern .price-value {
  4575. \t\t\t\tfont-size: 1.25rem;
  4576. \t\t\t}
  4578. \t\t\t.banner-actions-modern {
  4579. \t\t\t\tflex-direction: column;
  4580. \t\t\t}
  4582. \t\t\t.btn-banner-primary,
  4583. \t\t\t.btn-banner-secondary {
  4584. \t\t\t\twidth: 100%;
  4585. \t\t\t\tjustify-content: center;
  4586. \t\t\t}
  4588. \t\t\t.banner-area-modern .owl-nav button {
  4589. \t\t\t\twidth: 50px;
  4590. \t\t\t\theight: 50px;
  4591. \t\t\t\tmin-width: 50px;
  4592. \t\t\t\tmin-height: 50px;
  4593. \t\t\t\tfont-size: 20px !important;
  4594. \t\t\t\tbackground: #ffa200 !important;
  4595. \t\t\t}
  4597. \t\t\t.banner-area-modern .owl-nav button:hover {
  4598. \t\t\t\tbackground: #ff6b00 !important;
  4599. \t\t\t}
  4600. \t\t}
  4602. \t\t@media(max-width: 576px) {
  4603. \t\t\t.banner-area-modern {
  4604. \t\t\t\tmin-height: 350px;
  4605. \t\t\t\tpadding: 0;
  4606. \t\t\t\tbackground-size: cover;
  4607. \t\t\t\tbackground-position: center;
  4608. \t\t\t}
  4610. \t\t\t.banner-slide-item {
  4611. \t\t\t\tmin-height: 350px;
  4612. \t\t\t}
  4614. \t\t\t.banner-title-modern {
  4615. \t\t\t\tfont-size: 1.25rem;
  4616. \t\t\t}
  4618. \t\t\t.banner-image-modern {
  4619. \t\t\t\theight: 220px;
  4620. \t\t\t}
  4622. \t\t\t.banner-content-modern {
  4623. \t\t\t\tpadding: 15px;
  4624. \t\t\t}
  4625. \t\t}
  4627. \t\t/* Styles pour les catégories de boutiques cliquables */
  4628. \t\t.shop-category-clickable {
  4629. \t\t\tcursor: pointer;
  4630. \t\t\ttransition: all 0.3s ease;
  4631. \t\t\theight: 100%;
  4632. \t\t}
  4633. \t\t.shop-category-clickable:hover {
  4634. \t\t\ttransform: translateY(-10px);
  4635. \t\t\tbox-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  4636. \t\t}
  4637. \t\t.shop-category-clickable:hover .category-image {
  4638. \t\t\ttransform: scale(1.1);
  4639. \t\t}
  4640. \t\t.shop-category-clickable:hover .btn-primary-custom {
  4641. \t\t\tbackground: #e8910a;
  4642. \t\t\ttransform: translateX(5px);
  4643. \t\t}
  4645. \t\t/* Styles pour les cartes de catégories personnalisées */
  4646. \t\t.category-card-custom {
  4647. \t\t\tborder-radius: 15px;
  4648. \t\t\toverflow: hidden;
  4649. \t\t\tbox-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  4650. \t\t\ttransition: transform 0.3s ease, box-shadow 0.3s ease;
  4651. \t\t\tbackground: white;
  4652. \t\t\theight: 100%;
  4653. \t\t}
  4654. \t\t.category-card-custom:hover {
  4655. \t\t\ttransform: translateY(-10px);
  4656. \t\t\tbox-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  4657. \t\t}
  4658. \t\t.category-image-wrapper {
  4659. \t\t\tposition: relative;
  4660. \t\t\theight: 200px;
  4661. \t\t\toverflow: hidden;
  4662. \t\t}
  4663. \t\t.category-image {
  4664. \t\t\twidth: 100%;
  4665. \t\t\theight: 100%;
  4666. \t\t\tbackground-size: cover;
  4667. \t\t\tbackground-position: center;
  4668. \t\t\ttransition: transform 0.3s ease;
  4669. \t\t}
  4670. \t\t.category-card-custom:hover .category-image {
  4671. \t\t\ttransform: scale(1.1);
  4672. \t\t}
  4673. \t\t.category-overlay-custom {
  4674. \t\t\tposition: absolute;
  4675. \t\t\ttop: 0;
  4676. \t\t\tleft: 0;
  4677. \t\t\twidth: 100%;
  4678. \t\t\theight: 100%;
  4679. \t\t\tbackground: rgba(0, 0, 0, 0.6);
  4680. \t\t\tdisplay: flex;
  4681. \t\t\talign-items: center;
  4682. \t\t\tjustify-content: center;
  4683. \t\t\topacity: 0;
  4684. \t\t\ttransition: opacity 0.3s ease;
  4685. \t\t\tcolor: white;
  4686. \t\t}
  4687. \t\t.category-card-custom:hover .category-overlay-custom {
  4688. \t\t\topacity: 1;
  4689. \t\t}
  4690. \t\t.category-icon-wrapper {
  4691. \t\t\ttext-align: center;
  4692. \t\t}
  4693. \t\t.category-icon-wrapper i {
  4694. \t\t\tcolor: #ffa200;
  4695. \t\t\tdisplay: block;
  4696. \t\t}
  4697. \t\t.category-icon-wrapper h4 {
  4698. \t\t\tcolor: white;
  4699. \t\t\tmargin-top: 10px;
  4700. \t\t}
  4702. \t\t/* Styles pour la galerie de produits en vedette */
  4703. \t\t.featured-products-carousel-section {
  4704. \t\t\tposition: relative;
  4705. \t\t\toverflow: hidden;
  4706. \t\t}
  4708. \t\t.featured-gallery-wrapper {
  4709. \t\t\tposition: relative;
  4710. \t\t\tmax-width: 1400px;
  4711. \t\t\tmargin: 0 auto;
  4712. \t\t\tpadding: 0 15px;
  4713. \t\t}
  4715. \t\t.featured-gallery-container {
  4716. \t\t\tposition: relative;
  4717. \t\t\toverflow: visible;
  4718. \t\t\tborder-radius: 12px;
  4719. \t\t}
  4721. \t\t.featured-gallery-grid {
  4722. \t\t\tdisplay: flex;
  4723. \t\t\tgap: 30px; /* Même espacement que dans listing (margin entre col-lg-4) */
  4724. \t\t\tpadding: 10px 0;
  4725. \t\t\toverflow-x: auto;
  4726. \t\t\toverflow-y: hidden;
  4727. \t\t\tscroll-behavior: smooth;
  4728. \t\t\tscrollbar-width: none; /* Firefox */
  4729. \t\t\t-ms-overflow-style: none; /* IE/Edge */
  4730. \t\t\t-webkit-overflow-scrolling: touch; /* iOS smooth scroll */
  4731. \t\t\twill-change: scroll-position;
  4732. \t\t}
  4734. \t\t.featured-gallery-grid::-webkit-scrollbar {
  4735. \t\t\tdisplay: none; /* Chrome/Safari */
  4736. \t\t}
  4738. \t\t/* Mode OwlCarousel */
  4739. \t\t.featured-gallery-grid.owl-carousel {
  4740. \t\t\tdisplay: block;
  4741. \t\t\toverflow: hidden;
  4742. \t\t\tpadding: 25px 0;
  4743. \t\t}
  4745. \t\t.featured-gallery-grid.owl-carousel .owl-stage-outer {
  4746. \t\t\toverflow: visible;
  4747. \t\t}
  4749. \t\t.featured-gallery-grid.owl-carousel .featured-gallery-item {
  4750. \t\t\topacity: 1;
  4751. \t\t\ttransform: none;
  4752. \t\t\twidth: auto;
  4753. \t\t\tmax-width: none;
  4754. \t\t\tmargin: 0 15px;
  4755. \t\t}
  4757. \t\t.featured-gallery-grid.owl-carousel .owl-stage {
  4758. \t\t\tdisplay: flex;
  4759. \t\t}
  4761. \t\t.featured-gallery-item {
  4762. \t\t\tflex: 0 0 auto; /* Largeur automatique basée sur le contenu */
  4763. \t\t\twidth: 100%;
  4764. \t\t\tmax-width: 100%;
  4765. \t\t\topacity: 0;
  4766. \t\t\ttransform: translateY(20px) scale(0.95);
  4767. \t\t\tanimation: galleryItemFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  4768. \t\t\tanimation-delay: calc(var(--item-index, 0) * 0.05s);
  4769. \t\t}
  4771. \t\t/* Utiliser la même largeur que dans listing (col-lg-4 = ~33.33%) */
  4772. \t\t@media(min-width: 992px) {
  4773. \t\t\t.featured-gallery-item {
  4774. \t\t\t\tflex: 0 0 33.333333%;
  4775. \t\t\t\tmax-width: 25%;
  4776. \t\t\t}
  4777. \t\t}
  4779. \t\t@media(min-width: 768px) and(max-width: 991px) {
  4780. \t\t\t.featured-gallery-item {
  4781. \t\t\t\tflex: 0 0 50%;
  4782. \t\t\t\tmax-width: 50%;
  4783. \t\t\t}
  4784. \t\t}
  4786. \t\t@media(max-width: 767px) {
  4787. \t\t\t.featured-gallery-item {
  4788. \t\t\t\tflex: 0 0 100%;
  4789. \t\t\t\tmax-width: 100%;
  4790. \t\t\t}
  4791. \t\t}
  4793. \t\t/* Ajustements minimaux pour single-product dans le carrousel - utiliser les styles de main.css */
  4794. \t\t.featured-gallery-item .single-product {
  4795. \t\t\tmargin-bottom: 0; /* Override main.css margin-bottom: 50px */
  4796. \t\t\tmin-height: 480px;
  4797. \t\t\tdisplay: flex;
  4798. \t\t\tflex-direction: column;
  4799. \t\t\tpadding: 20px;
  4800. \t\t\tbackground: #fff;
  4801. \t\t\tborder-radius: 12px;
  4802. \t\t\tbox-shadow: 0 10px 30px rgba(15, 34, 58, 0.08);
  4803. \t\t\ttransition: transform 0.25s ease, box-shadow 0.25s ease;
  4804. \t\t}
  4806. \t\t.featured-gallery-item .single-product:hover {
  4807. \t\t\ttransform: translateY(-4px);
  4808. \t\t\tbox-shadow: 0 18px 40px rgba(15, 34, 58, 0.12);
  4809. \t\t}
  4811. \t\t/* S'assurer que les images s'affichent correctement - styles identiques à listing.html.twig */
  4812. \t\t.featured-gallery-item .single-product img {
  4813. \t\t\tmargin-bottom: 20px;
  4814. \t\t\twidth: 100%;
  4815. \t\t}
  4817. \t\t/* Styles pour product-image-container - identiques à listing.html.twig */
  4818. \t\t.featured-gallery-item .product-image-container {
  4819. \t\t\tposition: relative;
  4820. \t\t\toverflow: hidden;
  4821. \t\t\tborder-radius: 10px;
  4822. \t\t\theight: 260px;
  4823. \t\t\tdisplay: flex;
  4824. \t\t\talign-items: center;
  4825. \t\t\tjustify-content: center;
  4826. \t\t\tbackground: #f7f7fb;
  4827. \t\t\tmargin-bottom: 18px;
  4828. \t\t}
  4830. \t\t.featured-gallery-item .product-image-container:hover .main-product-img {
  4831. \t\t\ttransform: scale(1.05);
  4832. \t\t\ttransition: transform 0.3s ease;
  4833. \t\t}
  4835. \t\t.featured-gallery-item .product-image-container a {
  4836. \t\t\tdisplay: block;
  4837. \t\t\twidth: 100%;
  4838. \t\t\theight: 100%;
  4839. \t\t}
  4841. \t\t.featured-gallery-item .main-product-img {
  4842. \t\t\ttransition: transform 0.3s ease;
  4843. \t\t\twidth: 100% !important;
  4844. \t\t\theight: 100% !important;
  4845. \t\t\tobject-fit: cover;
  4846. \t\t\tobject-position: center;
  4847. \t\t\tdisplay: block;
  4848. \t\t\twill-change: transform, opacity;
  4849. \t\t}
  4851. \t\t.featured-gallery-item .main-product-img.image-fade {
  4852. \t\t\tanimation: imageFade 0.5s ease;
  4853. \t\t}
  4855. \t\t@keyframes imageFade {
  4856. \t\t\tfrom {
  4857. \t\t\t\topacity: 0;
  4858. \t\t\t\ttransform: scale(1.02);
  4859. \t\t\t}
  4860. \t\t\tto {
  4861. \t\t\t\topacity: 1;
  4862. \t\t\t\ttransform: scale(1);
  4863. \t\t\t}
  4864. \t\t}
  4866. \t\t.featured-gallery-item .product-details {
  4867. \t\t\tdisplay: flex;
  4868. \t\t\tflex-direction: column;
  4869. \t\t\theight: 100%;
  4870. \t\t}
  4872. \t\t.featured-gallery-item .prd-bottom {
  4873. \t\t\tmargin-top: auto;
  4874. \t\t}
  4876. \t\t/* Styles pour img-nav-btn - identiques à listing.html.twig */
  4877. \t\t.featured-gallery-item .img-nav-btn {
  4878. \t\t\tposition: absolute;
  4879. \t\t\ttop: 50%;
  4880. \t\t\ttransform: translateY(-50%);
  4881. \t\t\tbackground: rgba(0, 0, 0, 0.6);
  4882. \t\t\tcolor: white;
  4883. \t\t\tborder: none;
  4884. \t\t\twidth: 35px;
  4885. \t\t\theight: 35px;
  4886. \t\t\tborder-radius: 50%;
  4887. \t\t\tdisplay: flex;
  4888. \t\t\talign-items: center;
  4889. \t\t\tjustify-content: center;
  4890. \t\t\tcursor: pointer;
  4891. \t\t\ttransition: all 0.3s ease;
  4892. \t\t\tz-index: 10;
  4893. \t\t}
  4895. \t\t.featured-gallery-item .img-nav-btn:hover {
  4896. \t\t\tbackground: #095ad3;
  4897. \t\t\ttransform: translateY(-50%) scale(1.1);
  4898. \t\t}
  4900. \t\t.featured-gallery-item .img-nav-left {
  4901. \t\t\tleft: 10px;
  4902. \t\t}
  4904. \t\t.featured-gallery-item .img-nav-right {
  4905. \t\t\tright: 10px;
  4906. \t\t}
  4908. \t\t.featured-gallery-item .img-indicators {
  4909. \t\t\tposition: absolute;
  4910. \t\t\tbottom: 10px;
  4911. \t\t\tleft: 50%;
  4912. \t\t\ttransform: translateX(-50%);
  4913. \t\t\tdisplay: flex;
  4914. \t\t\tgap: 5px;
  4915. \t\t\tz-index: 10;
  4916. \t\t}
  4918. \t\t.featured-gallery-item .indicator {
  4919. \t\t\twidth: 8px;
  4920. \t\t\theight: 8px;
  4921. \t\t\tborder-radius: 50%;
  4922. \t\t\tbackground: rgba(255, 255, 255, 0.5);
  4923. \t\t\tcursor: pointer;
  4924. \t\t\tmargin-bottom: 10px;
  4925. \t\t\ttransition: all 0.3s ease;
  4926. \t\t\tborder: 1px solid rgba(255, 255, 255, 0.3);
  4927. \t\t}
  4929. \t\t.featured-gallery-item .indicator.active {
  4930. \t\t\tbackground: #ffa200;
  4931. \t\t\tborder-color: #ffa200;
  4932. \t\t\ttransform: scale(1.2);
  4933. \t\t}
  4935. \t\t.featured-gallery-item .indicator:hover {
  4936. \t\t\tbackground: rgba(255, 255, 255, 0.8);
  4937. \t\t}
  4939. \t\t/* Styles pour shop-info - identiques à listing.html.twig */
  4940. \t\t.featured-gallery-item .shop-info {
  4941. \t\t\tmargin: 8px 0;
  4942. \t\t\tpadding: 5px 0;
  4943. \t\t\tborder-bottom: 1px solid #f0f0f0;
  4944. \t\t}
  4946. \t\t.featured-gallery-item .shop-link {
  4947. \t\t\tcolor: #007bff;
  4948. \t\t\ttext-decoration: none;
  4949. \t\t\tfont-weight: 500;
  4950. \t\t}
  4952. \t\t.featured-gallery-item .shop-link:hover {
  4953. \t\t\tcolor: #ffa200;
  4954. \t\t\ttext-decoration: underline;
  4955. \t\t}
  4957. \t\t/* Les autres styles (product-details h6, price, prd-bottom, social-info) sont déjà définis dans main.css */
  4959. \t\t@keyframes galleryItemFadeIn {
  4960. \t\t\tfrom {
  4961. \t\t\t\topacity: 0;
  4962. \t\t\t\ttransform: translateY(20px) scale(0.95);
  4963. \t\t\t}
  4964. \t\t\tto {
  4965. \t\t\t\topacity: 1;
  4966. \t\t\t\ttransform: translateY(0) scale(1);
  4967. \t\t\t}
  4968. \t\t}
  4970. \t\t.featured-gallery-card {
  4971. \t\t\tdisplay: flex;
  4972. \t\t\tflex-direction: column;
  4973. \t\t\theight: 100%;
  4974. \t\t\tbackground: white;
  4975. \t\t\tborder-radius: 12px;
  4976. \t\t\toverflow: hidden;
  4977. \t\t\tbox-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  4978. \t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  4979. \t\t\tborder: 1px solid #f0f0f0;
  4980. \t\t}
  4982. \t\t.featured-gallery-card:hover {
  4983. \t\t\ttransform: translateY(-5px);
  4984. \t\t\tbox-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  4985. \t\t\tborder-color: #ffa200;
  4986. \t\t}
  4988. \t\t.featured-gallery-image-wrapper {
  4989. \t\t\tposition: relative;
  4990. \t\t\twidth: 100%;
  4991. \t\t\tpadding-top: 100%; /* Ratio 1:1 pour une galerie carrée */
  4992. \t\t\toverflow: hidden;
  4993. \t\t\tbackground: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  4994. \t\t}
  4996. \t\t.featured-gallery-image {
  4997. \t\t\tposition: absolute;
  4998. \t\t\ttop: 0;
  4999. \t\t\tleft: 0;
  5000. \t\t\twidth: 100%;
  5001. \t\t\theight: 100%;
  5002. \t\t\tbackground-size: cover;
  5003. \t\t\tbackground-position: center;
  5004. \t\t\ttransition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  5005. \t\t}
  5007. \t\t.featured-gallery-card:hover .featured-gallery-image {
  5008. \t\t\ttransform: scale(1.08);
  5009. \t\t}
  5011. \t\t.featured-gallery-badge {
  5012. \t\t\tposition: absolute;
  5013. \t\t\ttop: 8px;
  5014. \t\t\tleft: 8px;
  5015. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  5016. \t\t\tcolor: white;
  5017. \t\t\tpadding: 4px 10px;
  5018. \t\t\tborder-radius: 15px;
  5019. \t\t\tfont-size: 12px;
  5020. \t\t\tfont-weight: 600;
  5021. \t\t\tz-index: 2;
  5022. \t\t\tbox-shadow: 0 2px 8px rgba(255, 162, 0, 0.4);
  5023. \t\t}
  5025. \t\t.featured-gallery-overlay {
  5026. \t\t\tposition: absolute;
  5027. \t\t\ttop: 0;
  5028. \t\t\tleft: 0;
  5029. \t\t\twidth: 100%;
  5030. \t\t\theight: 100%;
  5031. \t\t\tbackground: rgba(0, 0, 0, 0.5);
  5032. \t\t\tdisplay: flex;
  5033. \t\t\talign-items: center;
  5034. \t\t\tjustify-content: center;
  5035. \t\t\topacity: 0;
  5036. \t\t\ttransition: opacity 0.3s ease;
  5037. \t\t}
  5039. \t\t.featured-gallery-card:hover .featured-gallery-overlay {
  5040. \t\t\topacity: 1;
  5041. \t\t}
  5043. \t\t.featured-gallery-view-btn {
  5044. \t\t\tbackground: white;
  5045. \t\t\tcolor: #333;
  5046. \t\t\twidth: 40px;
  5047. \t\t\theight: 40px;
  5048. \t\t\tborder-radius: 50%;
  5049. \t\t\tdisplay: flex;
  5050. \t\t\talign-items: center;
  5051. \t\t\tjustify-content: center;
  5052. \t\t\ttext-decoration: none;
  5053. \t\t\tfont-size: 18px;
  5054. \t\t\ttransform: scale(0.8);
  5055. \t\t\ttransition: transform 0.3s ease;
  5056. \t\t}
  5058. \t\t.featured-gallery-card:hover .featured-gallery-view-btn {
  5059. \t\t\ttransform: scale(1);
  5060. \t\t}
  5062. \t\t.featured-gallery-info {
  5063. \t\t\tpadding: 12px;
  5064. \t\t\tflex: 1;
  5065. \t\t\tdisplay: flex;
  5066. \t\t\tflex-direction: column;
  5067. \t\t}
  5069. \t\t.featured-gallery-title {
  5070. \t\t\tfont-size: 14px;
  5071. \t\t\tfont-weight: 600;
  5072. \t\t\tmargin-bottom: 6px;
  5073. \t\t\tcolor: #333;
  5074. \t\t\tline-height: 1.3;
  5075. \t\t\tdisplay: -webkit-box;
  5076. \t\t\t-webkit-line-clamp: 2;
  5077. \t\t\t-webkit-box-orient: vertical;
  5078. \t\t\toverflow: hidden;
  5079. \t\t\tmin-height: 36px;
  5080. \t\t}
  5082. \t\t.featured-gallery-title a {
  5083. \t\t\tcolor: #333;
  5084. \t\t\ttext-decoration: none;
  5085. \t\t\ttransition: color 0.3s ease;
  5086. \t\t}
  5088. \t\t.featured-gallery-title a:hover {
  5089. \t\t\tcolor: #ffa200;
  5090. \t\t}
  5092. \t\t.featured-gallery-price {
  5093. \t\t\tfont-size: 16px;
  5094. \t\t\tfont-weight: 700;
  5095. \t\t\tcolor: #ffa200;
  5096. \t\t\tmargin-bottom: 6px;
  5097. \t\t}
  5099. \t\t.featured-gallery-rating {
  5100. \t\t\tdisplay: flex;
  5101. \t\t\talign-items: center;
  5102. \t\t\tgap: 3px;
  5103. \t\t\tfont-size: 11px;
  5104. \t\t}
  5106. \t\t.featured-gallery-rating .fa-star.active {
  5107. \t\t\tcolor: #ffa200;
  5108. \t\t}
  5110. \t\t.featured-gallery-rating .fa-star-o {
  5111. \t\t\tcolor: #ddd;
  5112. \t\t}
  5114. \t\t.featured-gallery-controls {
  5115. \t\t\tdisplay: flex;
  5116. \t\t\tjustify-content: center;
  5117. \t\t\tgap: 20px;
  5118. \t\t\tmargin-top: 25px;
  5119. \t\t\tpadding: 0 20px;
  5120. \t\t}
  5122. \t\t.featured-gallery-nav-btn {
  5123. \t\t\twidth: 42px;
  5124. \t\t\theight: 42px;
  5125. \t\t\tborder-radius: 50%;
  5126. \t\t\tborder: 1.5px solid #ffa200;
  5127. \t\t\tbackground: white;
  5128. \t\t\tcolor: #ffa200;
  5129. \t\t\tfont-size: 16px;
  5130. \t\t\tcursor: pointer;
  5131. \t\t\tdisplay: flex;
  5132. \t\t\talign-items: center;
  5133. \t\t\tjustify-content: center;
  5134. \t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  5135. \t\t\tbox-shadow: 0 3px 10px rgba(255, 162, 0, 0.18);
  5136. \t\t\tposition: relative;
  5137. \t\t\toverflow: hidden;
  5138. \t\t}
  5140. \t\t.featured-gallery-nav-btn.btn-ripple::after {
  5141. \t\t\tcontent: '';
  5142. \t\t\tposition: absolute;
  5143. \t\t\twidth: 100%;
  5144. \t\t\theight: 100%;
  5145. \t\t\tleft: 0;
  5146. \t\t\ttop: 0;
  5147. \t\t\tborder-radius: 50%;
  5148. \t\t\tbackground: rgba(255, 162, 0, 0.2);
  5149. \t\t\tanimation: rippleEffect 0.35s ease;
  5150. \t\t}
  5152. \t\t@keyframes rippleEffect {
  5153. \t\t\tfrom {
  5154. \t\t\t\ttransform: scale(0.6);
  5155. \t\t\t\topacity: 0.7;
  5156. \t\t\t}
  5157. \t\t\tto {
  5158. \t\t\t\ttransform: scale(1.4);
  5159. \t\t\t\topacity: 0;
  5160. \t\t\t}
  5161. \t\t}
  5163. \t\t.featured-gallery-nav-btn:hover:not(:disabled) {
  5164. \t\t\tbackground: #ffa200;
  5165. \t\t\tcolor: white;
  5166. \t\t\ttransform: scale(1.1);
  5167. \t\t\tbox-shadow: 0 5px 18px rgba(255, 162, 0, 0.4);
  5168. \t\t}
  5170. \t\t.featured-gallery-nav-btn:active:not(:disabled) {
  5171. \t\t\ttransform: scale(0.95);
  5172. \t\t}
  5174. \t\t.featured-gallery-nav-btn:disabled {
  5175. \t\t\topacity: 0.3;
  5176. \t\t\tcursor: not-allowed;
  5177. \t\t}
  5179. \t\t.featured-gallery-load-more {
  5180. \t\t\tmargin-top: 30px;
  5181. \t\t}
  5183. \t\t/* Style pour le bouton \"Voir tous les produits\" */
  5184. \t\t.btn-view-all-products {
  5185. \t\t\tdisplay: inline-flex;
  5186. \t\t\talign-items: center;
  5187. \t\t\tgap: 12px;
  5188. \t\t\tpadding: 16px 40px;
  5189. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  5190. \t\t\tcolor: white;
  5191. \t\t\ttext-decoration: none;
  5192. \t\t\tborder-radius: 50px;
  5193. \t\t\tfont-weight: 600;
  5194. \t\t\tfont-size: 16px;
  5195. \t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  5196. \t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.3);
  5197. \t\t\tposition: relative;
  5198. \t\t\toverflow: hidden;
  5199. \t\t}
  5201. \t\t.btn-view-all-products::before {
  5202. \t\t\tcontent: '';
  5203. \t\t\tposition: absolute;
  5204. \t\t\ttop: 0;
  5205. \t\t\tleft: -100%;
  5206. \t\t\twidth: 100%;
  5207. \t\t\theight: 100%;
  5208. \t\t\tbackground: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  5209. \t\t\ttransition: left 0.5s ease;
  5210. \t\t}
  5212. \t\t.btn-view-all-products:hover::before {
  5213. \t\t\tleft: 100%;
  5214. \t\t}
  5216. \t\t.btn-view-all-products:hover {
  5217. \t\t\ttransform: translateY(-3px);
  5218. \t\t\tbox-shadow: 0 8px 25px rgba(255, 162, 0, 0.5);
  5219. \t\t\tcolor: white;
  5220. \t\t}
  5222. \t\t.btn-view-all-products:active {
  5223. \t\t\ttransform: translateY(-1px);
  5224. \t\t}
  5226. \t\t.btn-view-all-products i {
  5227. \t\t\tfont-size: 18px;
  5228. \t\t\ttransition: transform 0.3s ease;
  5229. \t\t}
  5231. \t\t.btn-view-all-products:hover i {
  5232. \t\t\ttransform: translateX(5px);
  5233. \t\t}
  5235. \t\t.btn-view-all-products span {
  5236. \t\t\tposition: relative;
  5237. \t\t\tz-index: 1;
  5238. \t\t}
  5240. \t\t/* Responsive */
  5241. \t\t@media(max-width: 767px) {
  5242. \t\t\t.btn-view-all-products {
  5243. \t\t\t\tpadding: 14px 30px;
  5244. \t\t\t\tfont-size: 14px;
  5245. \t\t\t}
  5246. \t\t}
  5248. \t\t/* Responsive */
  5249. \t\t@media(max-width: 767px) {
  5250. \t\t\t.featured-gallery-grid {
  5251. \t\t\t\tgap: 10px;
  5252. \t\t\t}
  5254. \t\t\t.featured-gallery-info {
  5255. \t\t\t\tpadding: 10px;
  5256. \t\t\t}
  5258. \t\t\t.featured-gallery-title {
  5259. \t\t\t\tfont-size: 13px;
  5260. \t\t\t\tmin-height: 32px;
  5261. \t\t\t}
  5263. \t\t\t.featured-gallery-price {
  5264. \t\t\t\tfont-size: 14px;
  5265. \t\t\t}
  5266. \t\t}
  5268. \t\t/* Styles pour les grilles de produits Nouveautés */
  5269. \t\t.latest-products-grid {
  5270. \t\t\tmargin-top: 30px;
  5271. \t\t}
  5273. \t\t.product-card-modern {
  5274. \t\t\tbackground: white;
  5275. \t\t\tborder-radius: 12px;
  5276. \t\t\toverflow: hidden;
  5277. \t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  5278. \t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  5279. \t\t\theight: 100%;
  5280. \t\t\tdisplay: flex;
  5281. \t\t\tflex-direction: column;
  5282. \t\t\tborder: 1px solid #f0f0f0;
  5283. \t\t}
  5285. \t\t.product-card-modern:hover {
  5286. \t\t\ttransform: translateY(-8px);
  5287. \t\t\tbox-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  5288. \t\t\tborder-color: #ffa200;
  5289. \t\t}
  5291. \t\t.product-image-wrapper {
  5292. \t\t\tposition: relative;
  5293. \t\t\twidth: 100%;
  5294. \t\t\tpadding-top: 75%; /* Ratio 4:3 */
  5295. \t\t\toverflow: hidden;
  5296. \t\t\tbackground: #f8f9fa;
  5297. \t\t}
  5299. \t\t.product-image {
  5300. \t\t\tposition: absolute;
  5301. \t\t\ttop: 0;
  5302. \t\t\tleft: 0;
  5303. \t\t\twidth: 100%;
  5304. \t\t\theight: 100%;
  5305. \t\t\tbackground-size: cover;
  5306. \t\t\tbackground-position: center;
  5307. \t\t\ttransition: transform 0.5s ease;
  5308. \t\t}
  5310. \t\t.product-card-modern:hover .product-image {
  5311. \t\t\ttransform: scale(1.1);
  5312. \t\t}
  5314. \t\t.product-badge-modern {
  5315. \t\t\tposition: absolute;
  5316. \t\t\ttop: 10px;
  5317. \t\t\tright: 10px;
  5318. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  5319. \t\t\tcolor: white;
  5320. \t\t\tpadding: 6px 12px;
  5321. \t\t\tborder-radius: 20px;
  5322. \t\t\tfont-size: 12px;
  5323. \t\t\tfont-weight: 600;
  5324. \t\t\tz-index: 2;
  5325. \t\t\tbox-shadow: 0 2px 8px rgba(255, 162, 0, 0.3);
  5326. \t\t}
  5328. \t\t.product-badge-modern.new-badge {
  5329. \t\t\tbackground: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  5330. \t\t}
  5332. \t\t.product-overlay {
  5333. \t\t\tposition: absolute;
  5334. \t\t\ttop: 0;
  5335. \t\t\tleft: 0;
  5336. \t\t\twidth: 100%;
  5337. \t\t\theight: 100%;
  5338. \t\t\tbackground: rgba(0, 0, 0, 0.5);
  5339. \t\t\tdisplay: flex;
  5340. \t\t\talign-items: center;
  5341. \t\t\tjustify-content: center;
  5342. \t\t\topacity: 0;
  5343. \t\t\ttransition: opacity 0.3s ease;
  5344. \t\t\tz-index: 1;
  5345. \t\t}
  5347. \t\t.product-card-modern:hover .product-overlay {
  5348. \t\t\topacity: 1;
  5349. \t\t}
  5351. \t\t.btn-view-product {
  5352. \t\t\tbackground: white;
  5353. \t\t\tcolor: #333;
  5354. \t\t\tpadding: 12px 24px;
  5355. \t\t\tborder-radius: 25px;
  5356. \t\t\ttext-decoration: none;
  5357. \t\t\tfont-weight: 600;
  5358. \t\t\tdisplay: flex;
  5359. \t\t\talign-items: center;
  5360. \t\t\tgap: 8px;
  5361. \t\t\ttransition: all 0.3s ease;
  5362. \t\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  5363. \t\t}
  5365. \t\t.btn-view-product:hover {
  5366. \t\t\tbackground: #ffa200;
  5367. \t\t\tcolor: white;
  5368. \t\t\ttransform: scale(1.05);
  5369. \t\t}
  5371. \t\t.product-info-modern {
  5372. \t\t\tpadding: 16px;
  5373. \t\t\tflex-grow: 1;
  5374. \t\t\tdisplay: flex;
  5375. \t\t\tflex-direction: column;
  5376. \t\t}
  5378. \t\t.product-title-modern {
  5379. \t\t\tmargin: 0 0 8px;
  5380. \t\t\tfont-size: 16px;
  5381. \t\t\tfont-weight: 600;
  5382. \t\t\tline-height: 1.4;
  5383. \t\t}
  5385. \t\t.product-title-modern a {
  5386. \t\t\tcolor: #333;
  5387. \t\t\ttext-decoration: none;
  5388. \t\t\ttransition: color 0.3s ease;
  5389. \t\t}
  5391. \t\t.product-title-modern a:hover {
  5392. \t\t\tcolor: #ffa200;
  5393. \t\t}
  5395. \t\t.product-price-modern {
  5396. \t\t\tfont-size: 20px;
  5397. \t\t\tfont-weight: 700;
  5398. \t\t\tcolor: #ffa200;
  5399. \t\t\tmargin-bottom: 8px;
  5400. \t\t}
  5402. \t\t.product-shop-modern {
  5403. \t\t\tdisplay: flex;
  5404. \t\t\talign-items: center;
  5405. \t\t\tgap: 6px;
  5406. \t\t\tfont-size: 13px;
  5407. \t\t\tcolor: #666;
  5408. \t\t\tmargin-bottom: 8px;
  5409. \t\t}
  5411. \t\t.product-shop-modern i {
  5412. \t\t\tcolor: #ffa200;
  5413. \t\t}
  5415. \t\t.shop-link {
  5416. \t\t\tcolor: #666;
  5417. \t\t\ttext-decoration: none;
  5418. \t\t\ttransition: color 0.3s ease;
  5419. \t\t}
  5421. \t\t.shop-link:hover {
  5422. \t\t\tcolor: #ffa200;
  5423. \t\t}
  5425. \t\t.product-rating-modern {
  5426. \t\t\tdisplay: flex;
  5427. \t\t\talign-items: center;
  5428. \t\t\tgap: 4px;
  5429. \t\t\tmargin-top: auto;
  5430. \t\t}
  5432. \t\t.product-rating-modern .fa-star.active {
  5433. \t\t\tcolor: #ffc107;
  5434. \t\t}
  5436. \t\t.product-rating-modern .fa-star-o {
  5437. \t\t\tcolor: #ddd;
  5438. \t\t}
  5440. \t\t.rating-count {
  5441. \t\t\tfont-size: 12px;
  5442. \t\t\tcolor: #666;
  5443. \t\t\tmargin-left: 4px;
  5444. \t\t}
  5446. \t\t.product-views-modern {
  5447. \t\t\tdisplay: flex;
  5448. \t\t\talign-items: center;
  5449. \t\t\tgap: 6px;
  5450. \t\t\tfont-size: 12px;
  5451. \t\t\tcolor: #666;
  5452. \t\t\tmargin-top: auto;
  5453. \t\t}
  5455. \t\t.product-views-modern i {
  5456. \t\t\tcolor: #999;
  5457. \t\t}
  5459. \t\t/* Style des cartes produits */
  5460. \t\t.product-card {
  5461. \t\t\tbackground: white;
  5462. \t\t\tborder-radius: 15px;
  5463. \t\t\toverflow: hidden;
  5464. \t\t\tbox-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  5465. \t\t\ttransition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  5466. \t\t\theight: 100%;
  5467. \t\t\tdisplay: flex;
  5468. \t\t\tflex-direction: column;
  5469. \t\t}
  5471. \t\t.product-card:hover {
  5472. \t\t\tbox-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  5473. \t\t\ttransform: translateY(-5px);
  5474. \t\t}
  5476. \t\t.product-image {
  5477. \t\t\twidth: 100%;
  5478. \t\t\theight: 250px;
  5479. \t\t\tbackground-size: cover;
  5480. \t\t\tbackground-position: center;
  5481. \t\t\tposition: relative;
  5482. \t\t\toverflow: hidden;
  5483. \t\t}
  5485. \t\t.product-image::before {
  5486. \t\t\tcontent: '';
  5487. \t\t\tposition: absolute;
  5488. \t\t\ttop: 0;
  5489. \t\t\tleft: -100%;
  5490. \t\t\twidth: 100%;
  5491. \t\t\theight: 100%;
  5492. \t\t\tbackground: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  5493. \t\t\ttransition: left 0.6s ease;
  5494. \t\t}
  5496. \t\t.product-card:hover .product-image::before {
  5497. \t\t\tleft: 100%;
  5498. \t\t}
  5500. \t\t.product-badge {
  5501. \t\t\tposition: absolute;
  5502. \t\t\ttop: 15px;
  5503. \t\t\tright: 15px;
  5504. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  5505. \t\t\tcolor: white;
  5506. \t\t\tpadding: 8px 15px;
  5507. \t\t\tborder-radius: 20px;
  5508. \t\t\tfont-size: 0.85rem;
  5509. \t\t\tfont-weight: 600;
  5510. \t\t\tbox-shadow: 0 4px 10px rgba(255, 162, 0, 0.4);
  5511. \t\t\tz-index: 1;
  5512. \t\t}
  5514. \t\t.product-info {
  5515. \t\t\tpadding: 20px;
  5516. \t\t\tflex-grow: 1;
  5517. \t\t\tdisplay: flex;
  5518. \t\t\tflex-direction: column;
  5519. \t\t}
  5521. \t\t.product-title {
  5522. \t\t\tfont-size: 1.1rem;
  5523. \t\t\tfont-weight: 600;
  5524. \t\t\tcolor: #2c3e50;
  5525. \t\t\tmargin-bottom: 10px;
  5526. \t\t\tline-height: 1.4;
  5527. \t\t\tdisplay: -webkit-box;
  5528. \t\t\t-webkit-line-clamp: 2;
  5529. \t\t\t-webkit-box-orient: vertical;
  5530. \t\t\toverflow: hidden;
  5531. \t\t}
  5533. \t\t.product-price {
  5534. \t\t\tfont-size: 1.5rem;
  5535. \t\t\tfont-weight: 800;
  5536. \t\t\tcolor: #ffa200;
  5537. \t\t\tmargin-bottom: 15px;
  5538. \t\t}
  5540. \t\t.product-shop {
  5541. \t\t\tfont-size: 0.9rem;
  5542. \t\t\tcolor: #666;
  5543. \t\t\tmargin-bottom: 15px;
  5544. \t\t}
  5546. \t\t.product-shop a {
  5547. \t\t\tcolor: #667eea;
  5548. \t\t\ttext-decoration: none;
  5549. \t\t\ttransition: color 0.3s ease;
  5550. \t\t}
  5552. \t\t.product-shop a:hover {
  5553. \t\t\tcolor: #ffa200;
  5554. \t\t}
  5556. \t\t/* Newsletter Modern Styles */
  5557. \t\t.newsletter-section-modern {
  5558. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #095ad3 100%);
  5559. \t\t\tposition: relative;
  5560. \t\t\toverflow: hidden;
  5561. \t\t}
  5562. \t\t.newsletter-section-modern::before {
  5563. \t\t\tcontent: '';
  5564. \t\t\tposition: absolute;
  5565. \t\t\ttop: -50%;
  5566. \t\t\tright: -50%;
  5567. \t\t\twidth: 100%;
  5568. \t\t\theight: 200%;
  5569. \t\t\tbackground: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  5570. \t\t\tanimation: pulse 3s ease-in-out infinite;
  5571. \t\t}
  5572. \t\t@keyframes pulse {
  5573. \t\t\t0,
  5574. \t\t\t100% {
  5575. \t\t\t\ttransform: scale(1);
  5576. \t\t\t\topacity: 0.5;
  5577. \t\t\t}
  5578. \t\t\t50% {
  5579. \t\t\t\ttransform: scale(1.1);
  5580. \t\t\t\topacity: 0.8;
  5581. \t\t\t}
  5582. \t\t}
  5583. \t\t.newsletter-card {
  5584. \t\t\tbackground: white;
  5585. \t\t\tborder-radius: 20px;
  5586. \t\t\tpadding: 40px;
  5587. \t\t\tbox-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  5588. \t\t\tposition: relative;
  5589. \t\t\tz-index: 1;
  5590. \t\t}
  5591. \t\t.newsletter-title {
  5592. \t\t\tfont-size: 2.5rem;
  5593. \t\t\tfont-weight: bold;
  5594. \t\t\tcolor: #333;
  5595. \t\t}
  5596. \t\t.newsletter-description {
  5597. \t\t\tcolor: #666;
  5598. \t\t\tfont-size: 1.1rem;
  5599. \t\t\tline-height: 1.8;
  5600. \t\t}
  5601. \t\t.newsletter-form-modern {
  5602. \t\t\tposition: relative;
  5603. \t\t}
  5604. \t\t.newsletter-input-wrapper {
  5605. \t\t\tdisplay: flex;
  5606. \t\t\tgap: 10px;
  5607. \t\t\tmargin-bottom: 15px;
  5608. \t\t}
  5609. \t\t.newsletter-input {
  5610. \t\t\tflex: 1;
  5611. \t\t\tpadding: 18px 25px;
  5612. \t\t\tborder: 2px solid #e0e0e0;
  5613. \t\t\tborder-radius: 50px;
  5614. \t\t\tfont-size: 1rem;
  5615. \t\t\ttransition: all 0.3s ease;
  5616. \t\t}
  5617. \t\t.newsletter-input:focus {
  5618. \t\t\toutline: none;
  5619. \t\t\tborder-color: #ffa200;
  5620. \t\t\tbox-shadow: 0 0 0 3px rgba(255, 162, 0, 0.1);
  5621. \t\t}
  5622. \t\t.newsletter-button {
  5623. \t\t\tpadding: 18px 35px;
  5624. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  5625. \t\t\tcolor: white;
  5626. \t\t\tborder: none;
  5627. \t\t\tborder-radius: 50px;
  5628. \t\t\tfont-weight: 600;
  5629. \t\t\tfont-size: 1rem;
  5630. \t\t\tcursor: pointer;
  5631. \t\t\ttransition: all 0.3s ease;
  5632. \t\t\twhite-space: nowrap;
  5633. \t\t}
  5634. \t\t.newsletter-button:hover {
  5635. \t\t\ttransform: translateY(-2px);
  5636. \t\t\tbox-shadow: 0 5px 20px rgba(255, 162, 0, 0.4);
  5637. \t\t}
  5638. \t\t.newsletter-privacy {
  5639. \t\t\tcolor: #999;
  5640. \t\t}
  5642. \t\t/* CTA Modern Styles */
  5643. \t\t.cta-section-modern {
  5644. \t\t\tbackground: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  5645. \t\t}
  5646. \t\t.cta-card {
  5647. \t\t\tbackground: white;
  5648. \t\t\tborder-radius: 25px;
  5649. \t\t\tpadding: 50px;
  5650. \t\t\tbox-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
  5651. \t\t\tposition: relative;
  5652. \t\t\toverflow: hidden;
  5653. \t\t}
  5654. \t\t.cta-card::before {
  5655. \t\t\tcontent: '';
  5656. \t\t\tposition: absolute;
  5657. \t\t\ttop: -50px;
  5658. \t\t\tright: -50px;
  5659. \t\t\twidth: 200px;
  5660. \t\t\theight: 200px;
  5661. \t\t\tbackground: linear-gradient(135deg, rgba(255,162,0,0.1) 0%, rgba(255,162,0,0.05) 100%);
  5662. \t\t\tborder-radius: 50%;
  5663. \t\t}
  5664. \t\t.cta-badge {
  5665. \t\t\tdisplay: inline-block;
  5666. \t\t\tpadding: 8px 20px;
  5667. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  5668. \t\t\tcolor: white;
  5669. \t\t\tborder-radius: 50px;
  5670. \t\t\tfont-size: 0.9rem;
  5671. \t\t\tfont-weight: 600;
  5672. \t\t\tmargin-bottom: 20px;
  5673. \t\t}
  5674. \t\t.cta-title {
  5675. \t\t\tfont-size: 3rem;
  5676. \t\t\tfont-weight: bold;
  5677. \t\t\tcolor: #333;
  5678. \t\t\tmargin-bottom: 20px;
  5679. \t\t}
  5680. \t\t.cta-description {
  5681. \t\t\tfont-size: 1.2rem;
  5682. \t\t\tcolor: #666;
  5683. \t\t\tline-height: 1.8;
  5684. \t\t}
  5685. \t\t.cta-features {
  5686. \t\t\tdisplay: flex;
  5687. \t\t\tflex-direction: column;
  5688. \t\t\tgap: 15px;
  5689. \t\t}
  5690. \t\t.cta-feature-item {
  5691. \t\t\tdisplay: flex;
  5692. \t\t\talign-items: center;
  5693. \t\t\tgap: 10px;
  5694. \t\t\tfont-size: 1rem;
  5695. \t\t\tcolor: #555;
  5696. \t\t}
  5697. \t\t.cta-feature-item i {
  5698. \t\t\tcolor: #ffa200;
  5699. \t\t\tfont-size: 1.3rem;
  5700. \t\t}
  5701. \t\t.cta-buttons {
  5702. \t\t\tdisplay: flex;
  5703. \t\t\tgap: 15px;
  5704. \t\t\tflex-wrap: wrap;
  5705. \t\t}
  5706. \t\t.cta-button-primary {
  5707. \t\t\tpadding: 15px 35px;
  5708. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  5709. \t\t\tcolor: white;
  5710. \t\t\tborder: none;
  5711. \t\t\tborder-radius: 50px;
  5712. \t\t\tfont-weight: 600;
  5713. \t\t\tfont-size: 1.1rem;
  5714. \t\t\ttransition: all 0.3s ease;
  5715. \t\t}
  5716. \t\t.cta-button-primary:hover {
  5717. \t\t\ttransform: translateY(-3px);
  5718. \t\t\tbox-shadow: 0 8px 25px rgba(255, 162, 0, 0.4);
  5719. \t\t\tcolor: white;
  5720. \t\t}
  5721. \t\t.cta-button-secondary {
  5722. \t\t\tpadding: 15px 35px;
  5723. \t\t\tbackground: white;
  5724. \t\t\tcolor: #ffa200;
  5725. \t\t\tborder: 2px solid #ffa200;
  5726. \t\t\tborder-radius: 50px;
  5727. \t\t\tfont-weight: 600;
  5728. \t\t\tfont-size: 1.1rem;
  5729. \t\t\ttransition: all 0.3s ease;
  5730. \t\t}
  5731. \t\t.cta-button-secondary:hover {
  5732. \t\t\tbackground: #ffa200;
  5733. \t\t\tcolor: white;
  5734. \t\t\ttransform: translateY(-3px);
  5735. \t\t\tbox-shadow: 0 8px 25px rgba(255, 162, 0, 0.3);
  5736. \t\t}
  5737. \t\t.cta-image-wrapper {
  5738. \t\t\tposition: relative;
  5739. \t\t}
  5740. \t\t.cta-decoration {
  5741. \t\t\tposition: absolute;
  5742. \t\t\ttop: -20px;
  5743. \t\t\tright: -20px;
  5744. \t\t\twidth: 150px;
  5745. \t\t\theight: 150px;
  5746. \t\t\tbackground: linear-gradient(135deg, rgba(255,162,0,0.2) 0%, rgba(255,162,0,0.05) 100%);
  5747. \t\t\tborder-radius: 50%;
  5748. \t\t\tz-index: 0;
  5749. \t\t}
  5750. \t\t.cta-image {
  5751. \t\t\tposition: relative;
  5752. \t\t\tz-index: 1;
  5753. \t\t\tmax-width: 100%;
  5754. \t\t\theight: auto;
  5755. \t\t\tborder-radius: 15px;
  5756. \t\t}
  5758. \t\t.home-section {
  5759. \t\t\tposition: relative;
  5760. \t\t\ttransition: background-color 0.3s ease, color 0.3s ease;
  5761. \t\t}
  5763. \t\t.home-section::before {
  5764. \t\t\tcontent: '';
  5765. \t\t\tposition: absolute;
  5766. \t\t\tinset: 0;
  5767. \t\t\tpointer-events: none;
  5768. \t\t\topacity: 0;
  5769. \t\t\ttransition: opacity 0.3s ease;
  5770. \t\t}
  5772. \t\thtml[data-theme=\"dark\"] .home-section {
  5773. \t\t\tbackground: linear-gradient(180deg, rgba(17, 24, 39, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  5774. \t\t\tcolor: var(--mk-text) !important;
  5775. \t\t\tborder-top: 1px solid rgba(148, 163, 184, 0.08);
  5776. \t\t\tborder-bottom: 1px solid rgba(148, 163, 184, 0.08);
  5777. \t\t}
  5779. \t\thtml[data-theme=\"dark\"] .home-section--alt {
  5780. \t\t\tbackground: linear-gradient(180deg, rgba(12, 18, 30, 0.98) 0%, rgba(24, 34, 53, 0.95) 100%) !important;
  5781. \t\t}
  5783. \t\thtml[data-theme=\"dark\"] .home-section--alt::before {
  5784. \t\t\topacity: 1;
  5785. \t\t\tbackground: linear-gradient(
  5786. \t\t\t\t180deg,
  5787. \t\t\t\trgba(255, 255, 255, 0.015) 0%,
  5788. \t\t\t\trgba(255, 255, 255, 0.015) 50%,
  5789. \t\t\t\trgba(255, 255, 255, 0.03) 50%,
  5790. \t\t\t\trgba(255, 255, 255, 0.03) 100%
  5791. \t\t\t);
  5792. \t\t\tbackground-size: 100% 12px;
  5793. \t\t}
  5795. \t\thtml[data-theme=\"dark\"] .home-section .section-title h2,
  5796. \t\thtml[data-theme=\"dark\"] .home-section .category-content h5,
  5797. \t\thtml[data-theme=\"dark\"] .home-section .product-title-modern,
  5798. \t\thtml[data-theme=\"dark\"] .home-section .product-title-modern a,
  5799. \t\thtml[data-theme=\"dark\"] .home-section .product-title,
  5800. \t\thtml[data-theme=\"dark\"] .home-section .product-title a,
  5801. \t\thtml[data-theme=\"dark\"] .home-section .featured-gallery-title,
  5802. \t\thtml[data-theme=\"dark\"] .home-section .featured-gallery-title a,
  5803. \t\thtml[data-theme=\"dark\"] .home-section .newsletter-title,
  5804. \t\thtml[data-theme=\"dark\"] .home-section .cta-title,
  5805. \t\thtml[data-theme=\"dark\"] .home-section .feature-card h5,
  5806. \t\thtml[data-theme=\"dark\"] .home-section .banner-title-modern {
  5807. \t\t\tcolor: var(--mk-text) !important;
  5808. \t\t\t-webkit-text-fill-color: currentColor !important;
  5809. \t\t\tbackground: none !important;
  5810. \t\t}
  5812. \t\thtml[data-theme=\"dark\"] .home-section .section-title p,
  5813. \t\thtml[data-theme=\"dark\"] .home-section .category-content p,
  5814. \t\thtml[data-theme=\"dark\"] .home-section .product-shop-modern,
  5815. \t\thtml[data-theme=\"dark\"] .home-section .rating-count,
  5816. \t\thtml[data-theme=\"dark\"] .home-section .product-views-modern,
  5817. \t\thtml[data-theme=\"dark\"] .home-section .newsletter-description,
  5818. \t\thtml[data-theme=\"dark\"] .home-section .newsletter-privacy,
  5819. \t\thtml[data-theme=\"dark\"] .home-section .cta-description,
  5820. \t\thtml[data-theme=\"dark\"] .home-section .cta-feature-item,
  5821. \t\thtml[data-theme=\"dark\"] .home-section .banner-description-modern,
  5822. \t\thtml[data-theme=\"dark\"] .home-section .price-label {
  5823. \t\t\tcolor: var(--mk-text-soft) !important;
  5824. \t\t}
  5826. \t\thtml[data-theme=\"dark\"] .home-section .text-muted,
  5827. \t\thtml[data-theme=\"dark\"] .home-section small.text-muted,
  5828. \t\thtml[data-theme=\"dark\"] .home-section .small.text-muted {
  5829. \t\t\tcolor: var(--mk-text-muted) !important;
  5830. \t\t}
  5832. \t\thtml[data-theme=\"dark\"] .home-section .stats-card,
  5833. \t\thtml[data-theme=\"dark\"] .home-section .category-card-custom,
  5834. \t\thtml[data-theme=\"dark\"] .home-section .product-card-modern,
  5835. \t\thtml[data-theme=\"dark\"] .home-section .product-card,
  5836. \t\thtml[data-theme=\"dark\"] .home-section .feature-card,
  5837. \t\thtml[data-theme=\"dark\"] .home-section .newsletter-card,
  5838. \t\thtml[data-theme=\"dark\"] .home-section .cta-card,
  5839. \t\thtml[data-theme=\"dark\"] .home-section .single-product,
  5840. \t\thtml[data-theme=\"dark\"] .home-section .banner-content-modern,
  5841. \t\thtml[data-theme=\"dark\"] .home-section .featured-gallery-card {
  5842. \t\t\tbackground: var(--mk-surface-strong) !important;
  5843. \t\t\tcolor: var(--mk-text) !important;
  5844. \t\t\tborder-color: var(--mk-border) !important;
  5845. \t\t\tbox-shadow: 0 20px 45px rgba(2, 6, 23, 0.28) !important;
  5846. \t\t}
  5848. \t\thtml[data-theme=\"dark\"] .home-section--alt .stats-card,
  5849. \t\thtml[data-theme=\"dark\"] .home-section--alt .category-card-custom,
  5850. \t\thtml[data-theme=\"dark\"] .home-section--alt .product-card-modern,
  5851. \t\thtml[data-theme=\"dark\"] .home-section--alt .product-card,
  5852. \t\thtml[data-theme=\"dark\"] .home-section--alt .feature-card,
  5853. \t\thtml[data-theme=\"dark\"] .home-section--alt .newsletter-card,
  5854. \t\thtml[data-theme=\"dark\"] .home-section--alt .cta-card,
  5855. \t\thtml[data-theme=\"dark\"] .home-section--alt .single-product,
  5856. \t\thtml[data-theme=\"dark\"] .home-section--alt .banner-content-modern,
  5857. \t\thtml[data-theme=\"dark\"] .home-section--alt .featured-gallery-card {
  5858. \t\t\tbackground: rgba(31, 41, 55, 0.9) !important;
  5859. \t\t}
  5861. \t\thtml[data-theme=\"dark\"] .home-section .product-image-wrapper,
  5862. \t\thtml[data-theme=\"dark\"] .home-section .featured-gallery-image-wrapper,
  5863. \t\thtml[data-theme=\"dark\"] .home-section .product-image-container,
  5864. \t\thtml[data-theme=\"dark\"] .home-section .banner-image-wrapper {
  5865. \t\t\tbackground: #0f172a !important;
  5866. \t\t\tborder-color: var(--mk-border) !important;
  5867. \t\t}
  5869. \t\thtml[data-theme=\"dark\"] .home-section .shop-link,
  5870. \t\thtml[data-theme=\"dark\"] .home-section .product-shop a,
  5871. \t\thtml[data-theme=\"dark\"] .home-section .product-shop-modern a,
  5872. \t\thtml[data-theme=\"dark\"] .home-section .featured-gallery-view-btn {
  5873. \t\t\tcolor: #93c5fd !important;
  5874. \t\t}
  5876. \t\thtml[data-theme=\"dark\"] .home-section .shop-link:hover,
  5877. \t\thtml[data-theme=\"dark\"] .home-section .product-shop a:hover,
  5878. \t\thtml[data-theme=\"dark\"] .home-section .product-shop-modern a:hover {
  5879. \t\t\tcolor: var(--mk-primary) !important;
  5880. \t\t}
  5882. \t\thtml[data-theme=\"dark\"] .home-section .banner-price-modern {
  5883. \t\t\tbackground: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(31, 41, 55, 0.94) 100%) !important;
  5884. \t\t\tborder-left-color: var(--mk-primary) !important;
  5885. \t\t}
  5887. \t\thtml[data-theme=\"dark\"] .home-section .newsletter-input {
  5888. \t\t\tbackground: #0f172a !important;
  5889. \t\t\tborder-color: var(--mk-border) !important;
  5890. \t\t\tcolor: var(--mk-text) !important;
  5891. \t\t}
  5893. \t\thtml[data-theme=\"dark\"] .home-section .newsletter-input::placeholder {
  5894. \t\t\tcolor: var(--mk-text-muted) !important;
  5895. \t\t}
  5897. \t\thtml[data-theme=\"dark\"] .home-section .cta-section-modern,
  5898. \t\thtml[data-theme=\"dark\"] .home-section.cta-section-modern,
  5899. \t\thtml[data-theme=\"dark\"] .home-section.newsletter-section-modern {
  5900. \t\t\tcolor: var(--mk-text) !important;
  5901. \t\t}
  5902. \t</style>
  5903. {% endblock %}
  5905. {% block body %}
  5906. \t<!-- Hero Section -->
  5907. \t<!-- start banner Area avec produits en vedette -->
  5908. \t\t{% if featuredProducts|length > 0 %}
  5909. \t\t\t<section class=\"banner-area-modern\"> <div class=\"banner-carousel-wrapper\">
  5910. \t\t\t\t<div class=\"active-banner-slider owl-carousel\" style=\"margin-top: 100px;\">
  5911. \t\t\t\t\t{% for product in featuredProducts %}
  5912. \t\t\t\t\t\t<!-- single-slide -->
  5913. \t\t\t\t\t\t<div class=\"banner-slide-item\">
  5914. \t\t\t\t\t\t\t<div class=\"container\">
  5915. \t\t\t\t\t\t\t\t<div class=\"row align-items-center\">
  5916. \t\t\t\t\t\t\t\t\t<div class=\"col-lg-4 col-md-6 col-12\">
  5917. \t\t\t\t\t\t\t\t\t\t<div class=\"banner-content-modern\">
  5918. \t\t\t\t\t\t\t\t\t\t\t<div class=\"banner-badge\">
  5919. \t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-star\"></i>
  5920. \t\t\t\t\t\t\t\t\t\t\t\tProduit en vedette
  5921. \t\t\t\t\t\t\t\t\t\t\t</div>
  5922. \t\t\t\t\t\t\t\t\t\t\t<h1 class=\"banner-title-modern\">{{ product.name }}</h1>
  5923. \t\t\t\t\t\t\t\t\t\t\t<p class=\"banner-description-modern\">
  5924. \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' }}
  5925. \t\t\t\t\t\t\t\t\t\t\t</p>
  5926. \t\t\t\t\t\t\t\t\t\t\t<div class=\"banner-price-modern\">
  5927. \t\t\t\t\t\t\t\t\t\t\t\t<span class=\"price-label\">Prix</span>
  5928. \t\t\t\t\t\t\t\t\t\t\t\t<span class=\"price-value\">{{ product.price|number_format(2, '.', ' ') }}
  5929. \t\t\t\t\t\t\t\t\t\t\t\t\tHTG</span>
  5930. \t\t\t\t\t\t\t\t\t\t\t</div>
  5931. \t\t\t\t\t\t\t\t\t\t\t<div class=\"banner-actions-modern\">
  5932. \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}) }}\">
  5933. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"btn-text\">Voir le produit</span>
  5934. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"btn-icon\">
  5935. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-arrow-right\"></i>
  5936. \t\t\t\t\t\t\t\t\t\t\t\t\t</span>
  5937. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  5938. \t\t\t\t\t\t\t\t\t\t\t\t{% if product.shop %}
  5939. \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}) }}\">
  5940. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\"></i>
  5941. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ product.shop.name }}</span>
  5942. \t\t\t\t\t\t\t\t\t\t\t\t\t</a>
  5943. \t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  5944. \t\t\t\t\t\t\t\t\t\t\t</div>
  5945. \t\t\t\t\t\t\t\t\t\t</div>
  5946. \t\t\t\t\t\t\t\t\t</div>
  5947. \t\t\t\t\t\t\t\t\t<div class=\"col-lg-8 col-md-6 col-12\">
  5948. \t\t\t\t\t\t\t\t\t\t<div class=\"banner-image-modern\">
  5949. \t\t\t\t\t\t\t\t\t\t\t<div class=\"banner-image-wrapper\">
  5950. \t\t\t\t\t\t\t\t\t\t\t\t{% if product.images is defined and product.images|length > 0 %}
  5951. \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 }}\">
  5952. \t\t\t\t\t\t\t\t\t\t\t\t{% else %}
  5953. \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 }}\">
  5954. \t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  5955. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"banner-image-overlay\"></div>
  5956. \t\t\t\t\t\t\t\t\t\t\t</div>
  5957. \t\t\t\t\t\t\t\t\t\t</div>
  5958. \t\t\t\t\t\t\t\t\t</div>
  5959. \t\t\t\t\t\t\t\t</div>
  5960. \t\t\t\t\t\t\t</div>
  5961. \t\t\t\t\t\t</div>
  5962. \t\t\t\t\t{% endfor %}
  5963. \t\t\t\t</div>
  5964. \t\t\t</div>
  5965. \t\t</section>
  5966. \t{% else %}
  5967. \t\t<!-- Banner par défaut si pas de produits en vedette -->
  5968. \t\t<section class=\"banner-area-modern\">
  5969. \t\t\t<div class=\"banner-carousel-wrapper\">
  5970. \t\t\t\t<div class=\"container\">
  5971. \t\t\t\t\t<div class=\"row align-items-center justify-content-center\">
  5972. \t\t\t\t\t\t<div class=\"col-lg-8 text-center\">
  5973. \t\t\t\t\t\t\t<div class=\"banner-content-modern\" style=\"margin-top: 140px;\">
  5974. \t\t\t\t\t\t\t\t<h1 class=\"banner-title-modern\">Bienvenue sur MaketOu</h1>
  5975. \t\t\t\t\t\t\t\t<p class=\"banner-description-modern\">Votre marketplace haïtienne</p>
  5976. \t\t\t\t\t\t\t</div>
  5977. \t\t\t\t\t\t</div>
  5978. \t\t\t\t\t</div>
  5979. \t\t\t\t</div>
  5980. \t\t\t</div>
  5981. \t\t</section>
  5982. \t{% endif %}
  5983. \t<!-- End banner Area -->
  5985. \t<!-- Catégories de produits -->
  5986. \t{% if categories|length > 0 %}
  5987. \t\t<section class=\"py-5 home-section\">
  5988. \t\t\t<div class=\"container\">
  5989. \t\t\t\t<div class=\"section-title\">
  5990. \t\t\t\t\t<h2>Nos catégories</h2>
  5991. \t\t\t\t\t<p>Explorez nos différentes catégories de produits</p>
  5992. \t\t\t\t</div>
  5993. \t\t\t\t<div class=\"row\" id=\"productCategoriesContainer\">
  5994. \t\t\t\t\t{% for category in categories|slice(0, 8) %}
  5995. \t\t\t\t\t\t<div class=\"col-lg-3 col-md-4 col-sm-6 mb-4\">
  5996. \t\t\t\t\t\t\t<div class=\"category-card-custom d-flex flex-column h-100\">
  5997. \t\t\t\t\t\t\t\t<div class=\"category-image-wrapper\">
  5998. \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 %}')\">
  5999. \t\t\t\t\t\t\t\t\t\t<div class=\"category-overlay-custom\">
  6000. \t\t\t\t\t\t\t\t\t\t\t<div class=\"category-icon-wrapper\">
  6001. \t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-tag\" style=\"font-size: 3rem;\"></i>
  6002. \t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-3\">{{ category.name }}</h4>
  6003. \t\t\t\t\t\t\t\t\t\t\t</div>
  6004. \t\t\t\t\t\t\t\t\t\t</div>
  6005. \t\t\t\t\t\t\t\t\t</div>
  6006. \t\t\t\t\t\t\t\t</div>
  6007. \t\t\t\t\t\t\t\t<div class=\"category-content p-3 d-flex flex-column flex-grow-1\">
  6008. \t\t\t\t\t\t\t\t\t<h5 class=\"mb-2\">{{ category.name }}</h5>
  6009. \t\t\t\t\t\t\t\t\t{% if category.description %}
  6010. \t\t\t\t\t\t\t\t\t\t<p class=\"text-muted mb-3 small\">{{ category.description|striptags|slice(0, 60) }}
  6011. \t\t\t\t\t\t\t\t\t\t\t{% if category.description|striptags|length > 60 %}...
  6012. \t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6013. \t\t\t\t\t\t\t\t\t\t</p>
  6014. \t\t\t\t\t\t\t\t\t{% endif %}
  6015. \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 mt-auto\">
  6016. \t\t\t\t\t\t\t\t\t\tVoir les produits
  6017. \t\t\t\t\t\t\t\t\t</a>
  6018. \t\t\t\t\t\t\t\t</div>
  6019. \t\t\t\t\t\t\t</div>
  6020. \t\t\t\t\t\t</div>
  6021. \t\t\t\t\t{% endfor %}
  6022. \t\t\t\t</div>
  6023. \t\t\t</div>
  6024. \t\t</section>
  6025. \t{% endif %}
  6027. \t<!-- Catégories de boutiques -->
  6028. \t{% if shopCategories|length > 0 %}
  6029. \t\t<section class=\"py-5 bg-light home-section home-section--alt\">
  6030. \t\t\t<div class=\"container\">
  6031. \t\t\t\t<div class=\"section-title\">
  6032. \t\t\t\t\t<h2>Nos catégories de boutiques</h2>
  6033. \t\t\t\t\t<p>Explorez les différentes catégories de boutiques disponibles sur MaketOu</p>
  6034. \t\t\t\t</div>
  6035. \t\t\t\t<div class=\"row\" id=\"shopCategoriesContainer\">
  6036. \t\t\t\t\t{% for shopCategory in shopCategories|slice(0, 6) %}
  6037. \t\t\t\t\t\t<div class=\"col-lg-4 col-md-6 mb-4\">
  6038. \t\t\t\t\t\t\t<a href=\"{{ path('ui_shops_list') }}?category={{ shopCategory.slug }}\" class=\"text-decoration-none h-100\" style=\"display: block;\">
  6039. \t\t\t\t\t\t\t\t<div class=\"category-card-custom shop-category-clickable d-flex flex-column h-100\">
  6040. \t\t\t\t\t\t\t\t\t<div class=\"category-image-wrapper\">
  6041. \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 %}')\">
  6042. \t\t\t\t\t\t\t\t\t\t\t<div class=\"category-overlay-custom\">
  6043. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"category-icon-wrapper\">
  6044. \t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\" style=\"font-size: 3rem;\"></i>
  6045. \t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-3\">{{ shopCategory.name }}</h4>
  6046. \t\t\t\t\t\t\t\t\t\t\t\t\t{% if shopCategory.description %}
  6047. \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) }}
  6048. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{% if shopCategory.description|striptags|length > 100 %}...
  6049. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6050. \t\t\t\t\t\t\t\t\t\t\t\t\t\t</p>
  6051. \t\t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6052. \t\t\t\t\t\t\t\t\t\t\t\t</div>
  6053. \t\t\t\t\t\t\t\t\t\t\t</div>
  6054. \t\t\t\t\t\t\t\t\t\t</div>
  6055. \t\t\t\t\t\t\t\t\t</div>
  6056. \t\t\t\t\t\t\t\t\t<div class=\"category-content p-3 d-flex flex-column flex-grow-1\">
  6057. \t\t\t\t\t\t\t\t\t\t<h5 class=\"mb-2\">{{ shopCategory.name }}</h5>
  6058. \t\t\t\t\t\t\t\t\t\t{% if shopCategory.description %}
  6059. \t\t\t\t\t\t\t\t\t\t\t<p class=\"text-muted mb-3 small\">{{ shopCategory.description|striptags|slice(0, 80) }}
  6060. \t\t\t\t\t\t\t\t\t\t\t\t{% if shopCategory.description|striptags|length > 80 %}...
  6061. \t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6062. \t\t\t\t\t\t\t\t\t\t\t</p>
  6063. \t\t\t\t\t\t\t\t\t\t{% endif %}
  6064. \t\t\t\t\t\t\t\t\t\t<span class=\"btn btn-primary-custom btn-sm w-100 mt-auto\">
  6065. \t\t\t\t\t\t\t\t\t\t\tVoir les boutiques
  6066. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-arrow-right ms-2\"></i>
  6067. \t\t\t\t\t\t\t\t\t\t</span>
  6068. \t\t\t\t\t\t\t\t\t</div>
  6069. \t\t\t\t\t\t\t\t</div>
  6070. \t\t\t\t\t\t\t</a>
  6071. \t\t\t\t\t\t</div>
  6072. \t\t\t\t\t{% endfor %}
  6073. \t\t\t\t</div>
  6074. \t\t\t\t{% if shopCategories|length > 6 %}
  6075. \t\t\t\t\t<div class=\"text-center mt-4\">
  6076. \t\t\t\t\t\t<button class=\"btn btn-outline-primary btn-lg\" onclick=\"showAllShopCategories()\">
  6077. \t\t\t\t\t\t\t<i class=\"lnr lnr-store me-2\"></i>
  6078. \t\t\t\t\t\t\tVoir toutes les catégories de boutiques ({{ shopCategories|length }})
  6079. \t\t\t\t\t\t</button>
  6080. \t\t\t\t\t</div>
  6081. \t\t\t\t{% endif %}
  6082. \t\t\t</div>
  6083. \t\t</section>
  6084. \t{% endif %}
  6086. \t<!-- Produits en vedette -->
  6087. \t{% if featuredProducts|length > 0 %}
  6088. \t\t<section class=\"py-5 bg-light home-section\">
  6089. \t\t\t<div class=\"container\">
  6090. \t\t\t\t<div class=\"section-title text-center mb-5\">
  6091. \t\t\t\t\t<h2>Produits en vedette</h2>
  6092. \t\t\t\t\t<p>Découvrez nos produits les plus populaires et les mieux notés</p>
  6093. \t\t\t\t</div>
  6095. \t\t\t\t<div class=\"featured-gallery-wrapper\">
  6096. \t\t\t\t\t<div class=\"featured-gallery-container\">
  6097. \t\t\t\t\t\t<div class=\"featured-gallery-grid\" id=\"featuredGalleryGrid\">
  6098. \t\t\t\t\t\t\t{% for product in featuredProducts %}
  6099. \t\t\t\t\t\t\t\t<div class=\"featured-gallery-item\">
  6100. \t\t\t\t\t\t\t\t\t{% include 'home/_single_product_card.html.twig' with {'product': product} %}
  6101. \t\t\t\t\t\t\t\t</div>
  6102. \t\t\t\t\t\t\t{% endfor %}
  6103. \t\t\t\t\t\t</div>
  6104. \t\t\t\t\t</div>
  6106. \t\t\t\t\t<!-- Contrôles de navigation -->
  6107. \t\t\t\t\t<div class=\"featured-gallery-controls\">
  6108. \t\t\t\t\t\t<button class=\"featured-gallery-nav-btn featured-gallery-prev\" id=\"featuredGalleryPrev\" aria-label=\"Précédent\">
  6109. \t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-left\"></i>
  6110. \t\t\t\t\t\t</button>
  6111. \t\t\t\t\t\t<button class=\"featured-gallery-nav-btn featured-gallery-next\" id=\"featuredGalleryNext\" aria-label=\"Suivant\">
  6112. \t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-right\"></i>
  6113. \t\t\t\t\t\t</button>
  6114. \t\t\t\t\t</div>
  6116. \t\t\t\t\t<!-- Bouton charger plus -->
  6117. \t\t\t\t\t<div class=\"featured-gallery-load-more text-center mt-4\" id=\"featuredGalleryLoadMore\" style=\"display: none;\">
  6118. \t\t\t\t\t\t<button class=\"btn btn-outline-primary\" id=\"loadMoreFeaturedBtn\">
  6119. \t\t\t\t\t\t\t<i class=\"lnr lnr-plus-circle me-2\"></i>
  6120. \t\t\t\t\t\t\tCharger plus de produits
  6121. \t\t\t\t\t\t</button>
  6122. \t\t\t\t\t</div>
  6123. \t\t\t\t</div>
  6125. \t\t\t\t<div class=\"text-center mt-5\">
  6126. \t\t\t\t\t<a href=\"{{ path('ui_listing') }}\" class=\"btn-view-all-products\">
  6127. \t\t\t\t\t\t<span>Voir tous les produits</span>
  6128. \t\t\t\t\t\t<i class=\"lnr lnr-arrow-right\"></i>
  6129. \t\t\t\t\t</a>
  6130. \t\t\t\t</div>
  6131. \t\t\t</div>
  6132. \t\t</section>
  6133. \t{% endif %}
  6135. \t<!-- Nouveautés -->
  6136. \t{% if latestProducts|length > 0 %}
  6137. \t\t<section class=\"py-5 home-section home-section--alt\">
  6138. \t\t\t<div class=\"container\">
  6139. \t\t\t\t<div class=\"section-title text-center mb-5\">
  6140. \t\t\t\t\t<h2>Nouveautés</h2>
  6141. \t\t\t\t\t<p>Les derniers produits ajoutés sur MaketOu</p>
  6142. \t\t\t\t</div>
  6144. \t\t\t\t<div class=\"featured-gallery-wrapper\">
  6145. \t\t\t\t\t<div class=\"featured-gallery-container\">
  6146. \t\t\t\t\t\t<div class=\"featured-gallery-grid\" id=\"latestGalleryGrid\">
  6147. \t\t\t\t\t\t\t{% for product in latestProducts %}
  6148. \t\t\t\t\t\t\t\t<div class=\"featured-gallery-item\">
  6149. \t\t\t\t\t\t\t\t\t{% include 'home/_single_product_card.html.twig' with {'product': product} %}
  6150. \t\t\t\t\t\t\t\t</div>
  6151. \t\t\t\t\t\t\t{% endfor %}
  6152. \t\t\t\t\t\t</div>
  6153. \t\t\t\t\t</div>
  6155. \t\t\t\t\t<!-- Contrôles de navigation -->
  6156. \t\t\t\t\t<div class=\"featured-gallery-controls\">
  6157. \t\t\t\t\t\t<button class=\"featured-gallery-nav-btn featured-gallery-prev\" id=\"latestGalleryPrev\" aria-label=\"Précédent\">
  6158. \t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-left\"></i>
  6159. \t\t\t\t\t\t</button>
  6160. \t\t\t\t\t\t<button class=\"featured-gallery-nav-btn featured-gallery-next\" id=\"latestGalleryNext\" aria-label=\"Suivant\">
  6161. \t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-right\"></i>
  6162. \t\t\t\t\t\t</button>
  6163. \t\t\t\t\t</div>
  6165. \t\t\t\t\t<!-- Bouton charger plus -->
  6166. \t\t\t\t\t<div class=\"featured-gallery-load-more text-center mt-4\" id=\"latestGalleryLoadMore\" style=\"display: none;\">
  6167. \t\t\t\t\t\t<button class=\"btn btn-outline-primary\" id=\"loadMoreLatestBtn\">
  6168. \t\t\t\t\t\t\t<i class=\"lnr lnr-plus-circle me-2\"></i>
  6169. \t\t\t\t\t\t\tCharger plus de produits
  6170. \t\t\t\t\t\t</button>
  6171. \t\t\t\t\t</div>
  6172. \t\t\t\t</div>
  6174. \t\t\t\t<div class=\"text-center mt-5\">
  6175. \t\t\t\t\t<a href=\"{{ path('ui_listing') }}\" class=\"btn-view-all-products\">
  6176. \t\t\t\t\t\t<span>Voir tous les produits</span>
  6177. \t\t\t\t\t\t<i class=\"lnr lnr-arrow-right\"></i>
  6178. \t\t\t\t\t</a>
  6179. \t\t\t\t</div>
  6180. \t\t\t</div>
  6181. \t\t</section>
  6182. \t{% endif %}
  6184. \t{% if recommendedProducts|length > 0 %}
  6185. \t\t<section class=\"py-5 bg-white home-section\">
  6186. \t\t\t<div class=\"container\">
  6187. \t\t\t\t<div class=\"section-title text-center mb-5\">
  6188. \t\t\t\t\t<h2>Recommandés pour vous</h2>
  6189. \t\t\t\t\t<p>Suggestions basées sur votre activité récente et les tendances de MaketOu</p>
  6190. \t\t\t\t</div>
  6191. \t\t\t\t<div class=\"row g-4\">
  6192. \t\t\t\t\t{% for product in recommendedProducts %}
  6193. \t\t\t\t\t\t<div class=\"col-12 col-sm-6 col-lg-3\">
  6194. \t\t\t\t\t\t\t<div class=\"product-card h-100\">
  6195. \t\t\t\t\t\t\t\t{% set productImage = product.images[0] ?? 'ui/img/product/p1.jpg' %}
  6196. \t\t\t\t\t\t\t\t<div class=\"product-image\" style=\"background-image:url('{{ asset(productImage) }}');\">
  6197. \t\t\t\t\t\t\t\t\t{% if product.isFeatured %}
  6198. \t\t\t\t\t\t\t\t\t\t<span class=\"product-badge bg-success\">Populaire</span>
  6199. \t\t\t\t\t\t\t\t\t{% endif %}
  6200. \t\t\t\t\t\t\t\t</div>
  6201. \t\t\t\t\t\t\t\t<div class=\"p-3\">
  6202. \t\t\t\t\t\t\t\t\t<h6 class=\"mb-2\">
  6203. \t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_product_show', { slug: product.slug }) }}\">{{ product.name }}</a>
  6204. \t\t\t\t\t\t\t\t\t</h6>
  6205. \t\t\t\t\t\t\t\t\t<p class=\"mb-2 text-muted small\">
  6206. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\"></i>
  6207. \t\t\t\t\t\t\t\t\t\t{% if product.shop %}
  6208. \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>
  6209. \t\t\t\t\t\t\t\t\t\t{% else %}
  6210. \t\t\t\t\t\t\t\t\t\t\tBoutique non spécifiée
  6211. \t\t\t\t\t\t\t\t\t\t{% endif %}
  6212. \t\t\t\t\t\t\t\t\t</p>
  6213. \t\t\t\t\t\t\t\t\t<div class=\"d-flex align-items-center justify-content-between\">
  6214. \t\t\t\t\t\t\t\t\t\t<span class=\"fw-bold text-primary\">{{ product.price|number_format(2, '.', ' ') }} HTG</span>
  6215. \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\">
  6216. \t\t\t\t\t\t\t\t\t\t\t<i class=\"ti ti-bag\"></i>
  6217. \t\t\t\t\t\t\t\t\t\t</a>
  6218. \t\t\t\t\t\t\t\t\t</div>
  6219. \t\t\t\t\t\t\t\t</div>
  6220. \t\t\t\t\t\t\t</div>
  6221. \t\t\t\t\t\t</div>
  6222. \t\t\t\t\t{% endfor %}
  6223. \t\t\t\t</div>
  6224. \t\t\t</div>
  6225. \t\t</section>
  6226. \t{% endif %}
  6228. \t{% if recentlyViewedProducts|length > 0 %}
  6229. \t\t<section class=\"py-5 bg-light home-section home-section--alt\">
  6230. \t\t\t<div class=\"container\">
  6231. \t\t\t\t<div class=\"section-title text-center mb-5\">
  6232. \t\t\t\t\t<h2>Récemment consultés</h2>
  6233. \t\t\t\t\t<p>Retrouvez les articles que vous avez explorés dernièrement</p>
  6234. \t\t\t\t</div>
  6235. \t\t\t\t<div class=\"featured-gallery-wrapper\">
  6236. \t\t\t\t\t<div class=\"featured-gallery-container\">
  6237. \t\t\t\t\t\t<div class=\"featured-gallery-grid\">
  6238. \t\t\t\t\t\t\t{% for product in recentlyViewedProducts %}
  6239. \t\t\t\t\t\t\t\t<div class=\"featured-gallery-item\">
  6240. \t\t\t\t\t\t\t\t\t{% include 'home/_single_product_card.html.twig' with {'product': product} %}
  6241. \t\t\t\t\t\t\t\t</div>
  6242. \t\t\t\t\t\t\t{% endfor %}
  6243. \t\t\t\t\t\t</div>
  6244. \t\t\t\t\t</div>
  6245. \t\t\t\t</div>
  6246. \t\t\t</div>
  6247. \t\t</section>
  6248. \t{% endif %}
  6250. \t<!-- Fonctionnalités -->
  6251. \t<section class=\"py-5 bg-light home-section\">
  6252. \t\t<div class=\"container\">
  6253. \t\t\t<div class=\"section-title\">
  6254. \t\t\t\t<h2>Pourquoi choisir MaketOu ?</h2>
  6255. \t\t\t\t<p>Découvrez les avantages de notre plateforme</p>
  6256. \t\t\t</div>
  6257. \t\t\t<div class=\"row\">
  6258. \t\t\t\t<div class=\"col-lg-3 col-md-6 mb-4\">
  6259. \t\t\t\t\t<div class=\"feature-card\">
  6260. \t\t\t\t\t\t<div class=\"feature-icon\">
  6261. \t\t\t\t\t\t\t<i class=\"lnr lnr-rocket\"></i>
  6262. \t\t\t\t\t\t</div>
  6263. \t\t\t\t\t\t<h5>Livraison rapide</h5>
  6264. \t\t\t\t\t\t<p>Recevez vos commandes rapidement avec notre réseau de livraison optimisé</p>
  6265. \t\t\t\t\t</div>
  6266. \t\t\t\t</div>
  6267. \t\t\t\t<div class=\"col-lg-3 col-md-6 mb-4\">
  6268. \t\t\t\t\t<div class=\"feature-card\">
  6269. \t\t\t\t\t\t<div class=\"feature-icon\">
  6270. \t\t\t\t\t\t\t<i class=\"lnr lnr-lock\"></i>
  6271. \t\t\t\t\t\t</div>
  6272. \t\t\t\t\t\t<h5>Paiement sécurisé</h5>
  6273. \t\t\t\t\t\t<p>Vos transactions sont protégées avec les dernières technologies de sécurité</p>
  6274. \t\t\t\t\t</div>
  6275. \t\t\t\t</div>
  6276. \t\t\t\t<div class=\"col-lg-3 col-md-6 mb-4\">
  6277. \t\t\t\t\t<div class=\"feature-card\">
  6278. \t\t\t\t\t\t<div class=\"feature-icon\">
  6279. \t\t\t\t\t\t\t<i class=\"lnr lnr-phone\"></i>
  6280. \t\t\t\t\t\t</div>
  6281. \t\t\t\t\t\t<h5>Support 24/7</h5>
  6282. \t\t\t\t\t\t<p>Notre équipe est disponible pour vous aider à tout moment</p>
  6283. \t\t\t\t\t</div>
  6284. \t\t\t\t</div>
  6285. \t\t\t\t<div class=\"col-lg-3 col-md-6 mb-4\">
  6286. \t\t\t\t\t<div class=\"feature-card\">
  6287. \t\t\t\t\t\t<div class=\"feature-icon\">
  6288. \t\t\t\t\t\t\t<i class=\"lnr lnr-undo\"></i>
  6289. \t\t\t\t\t\t</div>
  6290. \t\t\t\t\t\t<h5>Retour facile</h5>
  6291. \t\t\t\t\t\t<p>Politique de retour flexible pour votre tranquillité d'esprit</p>
  6292. \t\t\t\t\t</div>
  6293. \t\t\t\t</div>
  6294. \t\t\t</div>
  6295. \t\t</div>
  6296. \t</section>
  6298. \t<!-- Newsletter -->
  6299. \t<section class=\"newsletter-section-modern py-5 home-section home-section--alt\">
  6300. \t\t<div class=\"container\">
  6301. \t\t\t<div class=\"row justify-content-center\">
  6302. \t\t\t\t<div class=\"col-lg-10\">
  6303. \t\t\t\t\t<div class=\"newsletter-card\">
  6304. \t\t\t\t\t\t<div class=\"row align-items-center\">
  6305. \t\t\t\t\t\t\t<div class=\"col-lg-6 text-center text-lg-start mb-4 mb-lg-0\">
  6306. \t\t\t\t\t\t\t\t<div class=\"newsletter-icon mb-3\">
  6307. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-envelope\" style=\"font-size: 4rem; color: #ffa200;\"></i>
  6308. \t\t\t\t\t\t\t\t</div>
  6309. \t\t\t\t\t\t\t\t<h2 class=\"newsletter-title mb-3\">Restez informé des dernières nouveautés</h2>
  6310. \t\t\t\t\t\t\t\t<p class=\"newsletter-description mb-0\">
  6311. \t\t\t\t\t\t\t\t\tInscrivez-vous à notre newsletter pour recevoir les offres exclusives, 
  6312. \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.
  6313. \t\t\t\t\t\t\t\t</p>
  6314. \t\t\t\t\t\t\t</div>
  6315. \t\t\t\t\t\t\t<div class=\"col-lg-6\">
  6316. \t\t\t\t\t\t\t\t<form class=\"newsletter-form-modern\" id=\"newsletterFormHome\">
  6317. \t\t\t\t\t\t\t\t\t<div class=\"newsletter-input-wrapper\">
  6318. \t\t\t\t\t\t\t\t\t\t<input type=\"email\" class=\"newsletter-input\" placeholder=\"Votre adresse email\" required name=\"email\">
  6319. \t\t\t\t\t\t\t\t\t\t<button class=\"newsletter-button\" type=\"submit\">
  6320. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-arrow-right me-2\"></i>
  6321. \t\t\t\t\t\t\t\t\t\t\tS'abonner
  6322. \t\t\t\t\t\t\t\t\t\t</button>
  6323. \t\t\t\t\t\t\t\t\t</div>
  6324. \t\t\t\t\t\t\t\t\t<p class=\"newsletter-privacy mt-3 text-center\">
  6325. \t\t\t\t\t\t\t\t\t\t<small>
  6326. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-lock me-1\"></i>
  6327. \t\t\t\t\t\t\t\t\t\t\tVos données sont sécurisées. Pas de spam, désinscription facile.
  6328. \t\t\t\t\t\t\t\t\t\t</small>
  6329. \t\t\t\t\t\t\t\t\t</p>
  6330. \t\t\t\t\t\t\t\t</form>
  6331. \t\t\t\t\t\t\t</div>
  6332. \t\t\t\t\t\t</div>
  6333. \t\t\t\t\t</div>
  6334. \t\t\t\t</div>
  6335. \t\t\t</div>
  6336. \t\t</div>
  6337. \t</section>
  6339. \t<!-- Call to Action -->
  6340. \t<section class=\"cta-section-modern py-5 home-section\">
  6341. \t\t<div class=\"container\">
  6342. \t\t\t<div class=\"cta-card\">
  6343. \t\t\t\t<div class=\"row align-items-center\">
  6344. \t\t\t\t\t<div class=\"col-lg-6 mb-4 mb-lg-0\">
  6345. \t\t\t\t\t\t<div class=\"cta-content\">
  6346. \t\t\t\t\t\t\t<span class=\"cta-badge\">
  6347. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-rocket me-2\"></i>
  6348. \t\t\t\t\t\t\t\tCommencez dès aujourd'hui
  6349. \t\t\t\t\t\t\t</span>
  6350. \t\t\t\t\t\t\t<h2 class=\"cta-title mb-3\">Prêt à commencer ?</h2>
  6351. \t\t\t\t\t\t\t<p class=\"cta-description mb-4\">
  6352. \t\t\t\t\t\t\t\tQue vous soyez
  6353. \t\t\t\t\t\t\t\t<strong>acheteur</strong>
  6354. \t\t\t\t\t\t\t\tou
  6355. \t\t\t\t\t\t\t\t<strong>vendeur</strong>, MaketOu vous offre la plateforme idéale 
  6356. \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 !
  6357. \t\t\t\t\t\t\t</p>
  6358. \t\t\t\t\t\t\t<div class=\"cta-features mb-4\">
  6359. \t\t\t\t\t\t\t\t<div class=\"cta-feature-item\">
  6360. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  6361. \t\t\t\t\t\t\t\t\t<span>Plateforme 100% sécurisée</span>
  6362. \t\t\t\t\t\t\t\t</div>
  6363. \t\t\t\t\t\t\t\t<div class=\"cta-feature-item\">
  6364. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  6365. \t\t\t\t\t\t\t\t\t<span>Support client 24/7</span>
  6366. \t\t\t\t\t\t\t\t</div>
  6367. \t\t\t\t\t\t\t\t<div class=\"cta-feature-item\">
  6368. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  6369. \t\t\t\t\t\t\t\t\t<span>Paiements multiples</span>
  6370. \t\t\t\t\t\t\t\t</div>
  6371. \t\t\t\t\t\t\t</div>
  6372. \t\t\t\t\t\t\t<div class=\"cta-buttons\">
  6373. \t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn cta-button-primary\" onclick=\"openReadyModal()\">
  6374. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-rocket me-2\"></i>
  6375. \t\t\t\t\t\t\t\t\tPrêt à commencer ?
  6376. \t\t\t\t\t\t\t\t</button>
  6377. \t\t\t\t\t\t\t\t<a href=\"{{ path('ui_listing') }}\" class=\"btn cta-button-secondary\">
  6378. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-magnifier me-2\"></i>
  6379. \t\t\t\t\t\t\t\t\tVoir les produits
  6380. \t\t\t\t\t\t\t\t</a>
  6381. \t\t\t\t\t\t\t</div>
  6382. \t\t\t\t\t\t</div>
  6383. \t\t\t\t\t</div>
  6384. \t\t\t\t\t<div class=\"col-lg-6\">
  6385. \t\t\t\t\t\t<div class=\"cta-image-wrapper\">
  6386. \t\t\t\t\t\t\t<div class=\"cta-decoration\"></div>
  6387. \t\t\t\t\t\t\t<img src=\"{{ asset('Start.png') }}\" alt=\"MaketOu\" class=\"cta-image\">
  6388. \t\t\t\t\t\t</div>
  6389. \t\t\t\t\t</div>
  6390. \t\t\t\t</div>
  6391. \t\t\t</div>
  6392. \t\t</div>
  6393. \t</section>
  6394. {% endblock %}
  6396. {% block javascripts %}
  6397. \t<script src=\"https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js\"></script>
  6398. \t<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css\">
  6399. \t<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css\">
  6400. \t<script src=\"{{ asset('ui/js/product-unified.js') }}\"></script>
  6401. \t<script>
  6402. \t\twindow.openReadyModal = function () {
  6403. \t\t\tconst modalEl = document.getElementById('readyModal');
  6404. \t\t\tif (!modalEl) {
  6405. \t\t\t\tconsole.error('readyModal introuvable');
  6406. \t\t\t\treturn;
  6407. \t\t\t}
  6408. \t\t\tif (typeof bootstrap === 'undefined' || !bootstrap.Modal) {
  6409. \t\t\t\tconsole.error('Bootstrap Modal non chargé');
  6410. \t\t\t\treturn;
  6411. \t\t\t}
  6412. \t\t\tconst modalInstance = bootstrap.Modal.getOrCreateInstance(modalEl);
  6413. \t\t\tmodalInstance.show();
  6414. \t\t};
  6415. \t</script>
  6416. \t<script>
  6417. \t\t// Variables globales pour la navigation des images (si pas déjà définies)
  6418. if (typeof productImages === 'undefined') {
  6419. var productImages = {};
  6420. var currentImageIndex = {};
  6421. }
  6423. // Initialisation des données d'images pour les produits \"Produits en vedette\"
  6424. {% if featuredProducts is defined %}
  6425. {% for product in featuredProducts %}
  6426. {% if product.images is defined and product.images|length > 0 %}
  6427. productImages[{{ product.id }}] = [{% for img in product.images %}'{{ asset(img) }}'{% if not loop.last %},{% endif %}{% endfor %}];
  6428. currentImageIndex[{{ product.id }}] = 0;{% endif %}{% endfor %}{% endif %}
  6430. // Initialisation des données d'images pour les produits \"Nouveautés\"
  6431. {% if latestProducts is defined %}
  6432. {% for product in latestProducts %}
  6433. {% if product.images is defined and product.images|length > 0 %}
  6434. productImages[{{ product.id }}] = [{% for img in product.images %}'{{ asset(img) }}'{% if not loop.last %},{% endif %}{% endfor %}];
  6435. currentImageIndex[{{ product.id }}] = 0;{% endif %}{% endfor %}{% endif %}
  6437. console.log('SCRIPT LOADED - Featured Gallery');
  6438. (function () {
  6439. \t'use strict';
  6441. \tconst SECTION_CONFIGS = [
  6442. \t\t{ grid: '#featuredGalleryGrid', prev: '#featuredGalleryPrev', next: '#featuredGalleryNext' },
  6443. \t\t{ grid: '#latestGalleryGrid', prev: '#latestGalleryPrev', next: '#latestGalleryNext' }
  6444. \t];
  6446. \tfunction triggerRipple(button) {
  6447. \t\tbutton.classList.remove('btn-ripple');
  6448. \t\tvoid button.offsetWidth;
  6449. \t\tbutton.classList.add('btn-ripple');
  6450. \t\tsetTimeout(() => button.classList.remove('btn-ripple'), 350);
  6451. \t}
  6453. \tfunction initSectionCarousel(config) {
  6454. \t\tconst \$grid = \$(config.grid);
  6455. \t\tif (!\$grid.length) {
  6456. \t\t\treturn;
  6457. \t\t}
  6459. \t\tif (typeof \$.fn.owlCarousel !== 'function') {
  6460. \t\t\tconsole.warn('OwlCarousel n\\'est pas chargé pour', config.grid);
  6461. \t\t\treturn;
  6462. \t\t}
  6464. \t\tif (!\$grid.hasClass('owl-carousel')) {
  6465. \t\t\t\$grid.addClass('owl-carousel');
  6466. \t\t}
  6468. \t\tif (\$grid.hasClass('owl-loaded')) {
  6469. \t\t\treturn;
  6470. \t\t}
  6472. \t\tconst owlInstance = \$grid.owlCarousel({
  6473. \t\t\tloop: true,
  6474. \t\t\tmargin: 30,
  6475. \t\t\tautoplay: true,
  6476. \t\t\tautoplayTimeout: 4800,
  6477. \t\t\tautoplayHoverPause: true,
  6478. \t\t\tsmartSpeed: 650,
  6479. \t\t\tnav: false,
  6480. \t\t\tdots: false,
  6481. \t\t\tresponsive: {
  6482. \t\t\t\t0: { items: 1, margin: 15 },
  6483. \t\t\t\t576: { items: 1.2, margin: 18 },
  6484. \t\t\t\t768: { items: 2, margin: 20 },
  6485. \t\t\t\t992: { items: 3, margin: 25 },
  6486. \t\t\t\t1400: { items: 4, margin: 30 }
  6487. \t\t\t}
  6488. \t\t});
  6490. \t\tconst \$prev = \$(config.prev);
  6491. \t\tconst \$next = \$(config.next);
  6493. \t\tif (\$prev.length) {
  6494. \t\t\t\$prev.off('click.carouselNav').on('click.carouselNav', function (e) {
  6495. \t\t\t\te.preventDefault();
  6496. \t\t\t\towlInstance.trigger('prev.owl.carousel');
  6497. \t\t\t\ttriggerRipple(this);
  6498. \t\t\t});
  6499. \t\t}
  6501. \t\tif (\$next.length) {
  6502. \t\t\t\$next.off('click.carouselNav').on('click.carouselNav', function (e) {
  6503. \t\t\t\te.preventDefault();
  6504. \t\t\t\towlInstance.trigger('next.owl.carousel');
  6505. \t\t\t\ttriggerRipple(this);
  6506. \t\t\t});
  6507. \t\t}
  6508. \t}
  6510. \tfunction ensureOwl(attempt = 0) {
  6511. \t\tif (window.jQuery && typeof \$.fn !== 'undefined' && typeof \$.fn.owlCarousel === 'function') {
  6512. \t\t\tSECTION_CONFIGS.forEach(initSectionCarousel);
  6513. \t\t} else if (attempt < 15) {
  6514. \t\t\tsetTimeout(() => ensureOwl(attempt + 1), 200);
  6515. \t\t} else {
  6516. \t\t\tconsole.warn('OwlCarousel non disponible après plusieurs tentatives');
  6517. \t\t}
  6518. \t}
  6520. \tdocument.addEventListener('DOMContentLoaded', function () {
  6521. \t\tensureOwl();
  6522. \t});
  6523. })();
  6525. document.addEventListener('DOMContentLoaded', function () { // Animation des cartes au scroll
  6526. const observerOptions = {
  6527. threshold: 0.1,
  6528. rootMargin: '0px 0px -50px 0px'
  6529. };
  6531. const observer = new IntersectionObserver(function (entries) {
  6532. entries.forEach(entry => {
  6533. if (entry.isIntersecting) {
  6534. entry.target.style.opacity = '1';
  6535. entry.target.style.transform = 'translateY(0)';
  6536. }
  6537. });
  6538. }, observerOptions);
  6540. // Observer toutes les cartes
  6541. document.querySelectorAll('.stats-card, .category-card, .product-card, .feature-card').forEach(card => {
  6542. card.style.opacity = '0';
  6543. card.style.transform = 'translateY(30px)';
  6544. card.style.transition = 'all 0.6s ease';
  6545. observer.observe(card);
  6546. });
  6548. // Compteur animé pour les statistiques
  6549. function animateCounter(element, target, duration = 2000) {
  6550. let start = 0;
  6551. const increment = target / (duration / 16);
  6553. function updateCounter() {
  6554. start += increment;
  6555. if (start < target) {
  6556. element.textContent = Math.floor(start).toLocaleString();
  6557. requestAnimationFrame(updateCounter);
  6558. } else {
  6559. element.textContent = target.toLocaleString();
  6560. }
  6561. }
  6563. updateCounter();
  6564. }
  6566. // Animer les compteurs quand ils sont visibles
  6567. const statsObserver = new IntersectionObserver(function (entries) {
  6568. entries.forEach(entry => {
  6569. if (entry.isIntersecting) {
  6570. const numberElement = entry.target.querySelector('.stats-number');
  6571. const target = parseInt(numberElement.textContent.replace(/,/g, ''));
  6572. animateCounter(numberElement, target);
  6573. statsObserver.unobserve(entry.target);
  6574. }
  6575. });
  6576. });
  6578. document.querySelectorAll('.stats-card').forEach(card => {
  6579. statsObserver.observe(card);
  6580. });
  6582. // Gestion de la newsletter
  6583. const newsletterForm = document.querySelector('.newsletter-form');
  6584. if (newsletterForm) {
  6585. newsletterForm.addEventListener('submit', function (e) {
  6586. e.preventDefault();
  6587. const email = this.querySelector('input[type=\"email\"]').value;
  6588. const button = this.querySelector('button');
  6589. const originalText = button.innerHTML;
  6591. // Désactiver le bouton
  6592. button.disabled = true;
  6593. button.innerHTML = '<i class=\"lnr lnr-spinner me-2\"></i>Inscription...';
  6595. // Envoyer la requête
  6596. fetch('{{ path(\"ui_newsletter_subscribe\") }}', {
  6597. method: 'POST',
  6598. headers: {
  6599. 'Content-Type': 'application/x-www-form-urlencoded',
  6600. 'X-Requested-With': 'XMLHttpRequest'
  6601. },
  6602. body: 'email=' + encodeURIComponent(email)
  6603. }).then(response => response.json()).then(data => {
  6604. if (data.success) {
  6605. button.innerHTML = '<i class=\"lnr lnr-check me-2\"></i>Inscription réussie !';
  6606. button.classList.remove('btn-warning');
  6607. button.classList.add('btn-success');
  6608. this.reset();
  6609. } else {
  6610. button.innerHTML = '<i class=\"lnr lnr-warning me-2\"></i>Erreur';
  6611. button.classList.remove('btn-warning');
  6612. button.classList.add('btn-danger');
  6613. }
  6615. setTimeout(() => {
  6616. button.innerHTML = originalText;
  6617. button.classList.remove('btn-success', 'btn-danger');
  6618. button.classList.add('btn-warning');
  6619. button.disabled = false;
  6620. }, 3000);
  6621. }).catch(error => {
  6622. console.error('Erreur:', error);
  6623. button.innerHTML = '<i class=\"lnr lnr-warning me-2\"></i>Erreur';
  6624. button.classList.remove('btn-warning');
  6625. button.classList.add('btn-danger');
  6627. setTimeout(() => {
  6628. button.innerHTML = originalText;
  6629. button.classList.remove('btn-danger');
  6630. button.classList.add('btn-warning');
  6631. button.disabled = false;
  6632. }, 3000);
  6633. });
  6634. });
  6635. }
  6636. });
  6638. // Effet parallaxe léger pour le hero
  6639. window.addEventListener('scroll', function () {
  6640. const scrolled = window.pageYOffset;
  6641. const hero = document.querySelector('.hero-banner');
  6642. if (hero) {
  6643. hero.style.transform = `translateY(\${
  6644. scrolled * 0.5
  6645. }px)`;
  6646. }
  6647. });
  6648. });
  6650. // Fonction pour afficher toutes les catégories
  6651. function showAllCategories () {
  6652. const container = document.getElementById('productCategoriesContainer');
  6653. const btn = document.getElementById('showAllCategoriesBtn');{% if allCategories|length > 8 %}{% for category in allCategories %}{% if loop.index > 8 %}const categoryHtml {{ loop.index }} = `
  6654.         <div class=\"col-lg-3 col-md-4 col-sm-6 mb-4\">
  6655.             <div class=\"category-card-custom d-flex flex-column h-100\">
  6656.                 <div class=\"category-image-wrapper\">
  6657.                     <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 %}')\">
  6658.                         <div class=\"category-overlay-custom\">
  6659.                             <div class=\"category-icon-wrapper\">
  6660.                                 <i class=\"lnr lnr-tag\" style=\"font-size: 3rem;\"></i>
  6661.                                 <h4 class=\"mt-3\">{{ category.name }}</h4>
  6662.                             </div>
  6663.                         </div>
  6664.                     </div>
  6665.                 </div>
  6666.                 <div class=\"category-content p-3 d-flex flex-column flex-grow-1\">
  6667.                     <h5 class=\"mb-2\">{{ category.name }}</h5>
  6668.                     {% if category.description %}
  6669.                         <p class=\"text-muted mb-3 small\">{{ category.description|striptags|slice(0, 60) }}{% if category.description|striptags|length > 60 %}...{% endif %}</p>
  6670.                     {% endif %}
  6671.                     <a href=\"{{ path('ui_listing', {'category': category.slug}) }}\" class=\"btn btn-primary-custom btn-sm w-100 mt-auto\">
  6672.                         Voir les produits
  6673.                     </a>
  6674.                 </div>
  6675.             </div>
  6676.         </div>
  6677.     `;
  6678. container.insertAdjacentHTML('beforeend', categoryHtml {{ loop.index }});{% endif %}{% endfor %}{% endif %}if (btn) 
  6679. btn.style.display = 'none';
  6683. }
  6685. // Fonction pour afficher toutes les catégories de boutiques
  6686. function showAllShopCategories () {
  6687. const container = document.getElementById('shopCategoriesContainer');
  6688. const btn = document.querySelector('[onclick=\"showAllShopCategories()\"]') ?. parentElement;{% if allShopCategories|length > 6 %}{% for shopCategory in allShopCategories %}{% if loop.index > 6 %}const shopCategoryHtml {{ loop.index }} = `
  6689.         <div class=\"col-lg-4 col-md-6 mb-4\">
  6690.             <a href=\"{{ path('ui_shops_list') }}?category={{ shopCategory.slug }}\" class=\"text-decoration-none h-100\" style=\"display: block;\">
  6691.                 <div class=\"category-card-custom shop-category-clickable d-flex flex-column h-100\">
  6692.                     <div class=\"category-image-wrapper\">
  6693.                         <div class=\"category-image\" style=\"background-image: url('{% if shopCategory.bannerImage %}{{ asset(shopCategory.bannerImage) }}{% else %}{{ asset('ui/img/category/shop-' ~ loop.index ~ '.jpg') }}{% endif %}')\">
  6694.                             <div class=\"category-overlay-custom\">
  6695.                                 <div class=\"category-icon-wrapper\">
  6696.                                     <i class=\"lnr lnr-store\" style=\"font-size: 3rem;\"></i>
  6697.                                     <h4 class=\"mt-3\">{{ shopCategory.name }}</h4>
  6698.                                     {% if shopCategory.description %}
  6699.                                         <p class=\"mt-2 px-3\">{{ shopCategory.description|striptags|slice(0, 100) }}{% if shopCategory.description|striptags|length > 100 %}...{% endif %}</p>
  6700.                                     {% endif %}
  6701.                                 </div>
  6702.                             </div>
  6703.                         </div>
  6704.                     </div>
  6705.                     <div class=\"category-content p-3 d-flex flex-column flex-grow-1\">
  6706.                         <h5 class=\"mb-2\">{{ shopCategory.name }}</h5>
  6707.                         {% if shopCategory.description %}
  6708.                             <p class=\"text-muted mb-3 small\">{{ shopCategory.description|striptags|slice(0, 80) }}{% if shopCategory.description|striptags|length > 80 %}...{% endif %}</p>
  6709.                         {% endif %}
  6710.                         <span class=\"btn btn-primary-custom btn-sm w-100 mt-auto\">
  6711.                             Voir les boutiques <i class=\"lnr lnr-arrow-right ms-2\"></i>
  6712.                         </span>
  6713.                     </div>
  6714.                 </div>
  6715.             </a>
  6716.         </div>
  6717.     `;
  6718. container.insertAdjacentHTML('beforeend', shopCategoryHtml {{ loop.index }});{% endif %}{% endfor %}{% endif %}if (btn) 
  6719. btn.style.display = 'none';
  6723. }
  6725. // Initialiser les carousels
  6726. \$(document).ready(function () { // Carousel bannière principale
  6727. if (\$('.active-banner-slider').length) {
  6728. \$('.active-banner-slider').owlCarousel({
  6729. items: 1,
  6730. loop: true,
  6731. autoplay: true,
  6732. autoplayTimeout: 6000,
  6733. autoplayHoverPause: true,
  6734. nav: true,
  6735. dots: true,
  6736. navText: [
  6737. '<i class=\"lnr lnr-chevron-left\"></i>', '<i class=\"lnr lnr-chevron-right\"></i>'
  6738. ],
  6739. smartSpeed: 1000,
  6740. animateOut: 'fadeOut',
  6741. animateIn: 'fadeIn',
  6742. responsive: {
  6743. 0: {
  6744. items: 1,
  6745. nav: true,
  6746. dots: true
  6747. },
  6748. 768: {
  6749. items: 1,
  6750. nav: true,
  6751. dots: true
  6752. },
  6753. 992: {
  6754. items: 1,
  6755. nav: true,
  6756. dots: true
  6757. }
  6758. }
  6759. });
  6760. }
  6762. // Animation d'apparition pour les cartes produits
  6763. const observerOptions = {
  6764. threshold: 0.1,
  6765. rootMargin: '0px 0px -50px 0px'
  6766. };
  6768. const productObserver = new IntersectionObserver(function (entries) {
  6769. entries.forEach(entry => {
  6770. if (entry.isIntersecting) {
  6771. entry.target.style.opacity = '1';
  6772. entry.target.style.transform = 'translateY(0)';
  6773. }
  6774. });
  6775. }, observerOptions);
  6777. document.querySelectorAll('.product-card-modern').forEach((card, index) => {
  6778. card.style.opacity = '0';
  6779. card.style.transform = 'translateY(20px)';
  6780. card.style.transition = `opacity 0.6s ease \${
  6781. index * 0.1
  6782. }s, transform 0.6s ease \${
  6783. index * 0.1
  6784. }s`;
  6785. productObserver.observe(card);
  6786. });
  6787. });
  6788. \t</script>
  6790. \t<!-- Modal \"Prêt à commencer ?\" -->
  6791. \t<div class=\"modal fade\" id=\"readyModal\" tabindex=\"-1\">
  6792. \t\t<div class=\"modal-dialog modal-dialog-centered\">
  6793. \t\t\t<div class=\"modal-content\">
  6794. \t\t\t\t<div class=\"modal-header\">
  6795. \t\t\t\t\t<h5 class=\"modal-title\">
  6796. \t\t\t\t\t\t<i class=\"lnr lnr-rocket me-2\"></i>Prêt à commencer ?
  6797. \t\t\t\t\t</h5>
  6798. \t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button>
  6799. \t\t\t\t</div>
  6800. \t\t\t\t<div class=\"modal-body\">
  6801. \t\t\t\t\t{% if app.user %}
  6802. \t\t\t\t\t\t{% if app.user.kycStatus == 'approved' %}
  6803. \t\t\t\t\t\t\t<div class=\"text-center\">
  6804. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\" style=\"font-size: 4rem; color: #28a745;\"></i>
  6805. \t\t\t\t\t\t\t\t<h4 class=\"mt-3\">Votre compte est vérifié !</h4>
  6806. \t\t\t\t\t\t\t\t<p class=\"text-muted\">Vous pouvez commencer à utiliser MaketOu en toute sérénité.</p>
  6807. \t\t\t\t\t\t\t\t<div class=\"mt-4\">
  6808. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('seller_index') }}\" class=\"btn btn-primary me-2\">
  6809. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store me-1\"></i>Ouvrir ma boutique
  6810. \t\t\t\t\t\t\t\t\t</a>
  6811. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_listing') }}\" class=\"btn btn-outline-primary\">
  6812. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-magnifier me-1\"></i>Voir les produits
  6813. \t\t\t\t\t\t\t\t\t</a>
  6814. \t\t\t\t\t\t\t\t</div>
  6815. \t\t\t\t\t\t\t</div>
  6816. \t\t\t\t\t\t{% else %}
  6817. \t\t\t\t\t\t\t<div class=\"text-center\">
  6818. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-shield\" style=\"font-size: 4rem; color: #ffa200;\"></i>
  6819. \t\t\t\t\t\t\t\t<h4 class=\"mt-3\">Vérification requise</h4>
  6820. \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>
  6821. \t\t\t\t\t\t\t\t<div class=\"mt-4\">
  6822. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_account_kyc') }}\" class=\"btn btn-primary btn-lg\">
  6823. \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>
  6824. \t\t\t\t\t\t\t\t\t</a>
  6825. \t\t\t\t\t\t\t\t</div>
  6826. \t\t\t\t\t\t\t</div>
  6827. \t\t\t\t\t\t{% endif %}
  6828. \t\t\t\t\t{% else %}
  6829. \t\t\t\t\t\t<div class=\"text-center\">
  6830. \t\t\t\t\t\t\t<i class=\"lnr lnr-user\" style=\"font-size: 4rem; color: #007bff;\"></i>
  6831. \t\t\t\t\t\t\t<h4 class=\"mt-3\">Connectez-vous pour commencer</h4>
  6832. \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>
  6833. \t\t\t\t\t\t\t<div class=\"mt-4\">
  6834. \t\t\t\t\t\t\t\t<a href=\"{{ path('ui_app_login') }}\" class=\"btn btn-primary btn-lg me-2\">
  6835. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-enter me-1\"></i>Se connecter
  6836. \t\t\t\t\t\t\t\t</a>
  6837. \t\t\t\t\t\t\t\t<a href=\"{{ path('ui_app_register') }}\" class=\"btn btn-outline-primary btn-lg\">
  6838. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-user-plus me-1\"></i>S'inscrire
  6839. \t\t\t\t\t\t\t\t</a>
  6840. \t\t\t\t\t\t\t</div>
  6841. \t\t\t\t\t\t</div>
  6842. \t\t\t\t\t{% endif %}
  6843. \t\t\t\t</div>
  6844. \t\t\t</div>
  6845. \t\t</div>
  6846. \t</div>
  6847. {% endblock %}
  6848. ", "home/index.html.twig", "/home/u540977899/domains/maketou-ht.com/public_html/templates/home/index.html.twig");
  6849.     }
  6850. }