templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base_home.html.twig' %}
  3. {% block title %}Accueil | MaketOu - Votre marketplace haïtienne
  4. {% endblock %}
  6. {% block stylesheets %}
  7.     <style>
  8.         /* Styles personnalisés pour la page d'accueil */
  9.         .hero-banner {
  10.             background: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  11.             color: white;
  12.             padding: 100px 0;
  13.             position: relative;
  14.             overflow: hidden;
  15.         }
  17.         .hero-banner::before {
  18.             content: '';
  19.             position: absolute;
  20.             top: 0;
  21.             left: 0;
  22.             right: 0;
  23.             bottom: 0;
  24.             background: 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>');
  25.             opacity: 0.3;
  26.         }
  28.         .hero-content {
  29.             position: relative;
  30.             z-index: 2;
  31.         }
  33.         .stats-card {
  34.             background: white;
  35.             border-radius: 15px;
  36.             padding: 30px;
  37.             text-align: center;
  38.             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  39.             transition: transform 0.3s ease;
  40.         }
  42.         .stats-card:hover {
  43.             transform: translateY(-5px);
  44.         }
  46.         .stats-number {
  47.             font-size: 3rem;
  48.             font-weight: bold;
  49.             color: #ffa200;
  50.             display: block;
  51.         }
  53.         .stats-label {
  54.             color: #666;
  55.             font-size: 1.1rem;
  56.             margin-top: 10px;
  57.         }
  59.         .category-card {
  60.             background: white;
  61.             border-radius: 15px;
  62.             overflow: hidden;
  63.             box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  64.             transition: all 0.3s ease;
  65.             height: 100%;
  66.         }
  68.         .category-card:hover {
  69.             transform: translateY(-5px);
  70.             box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  71.         }
  73.         .category-image {
  74.             height: 200px;
  75.             background-size: cover;
  76.             background-position: center;
  77.             position: relative;
  78.         }
  80.         .category-overlay {
  81.             position: absolute;
  82.             top: 0;
  83.             left: 0;
  84.             right: 0;
  85.             bottom: 0;
  86.             background: linear-gradient(45deg, rgba(255,162,0,0.8), rgba(232,145,10,0.8));
  87.             display: flex;
  88.             align-items: center;
  89.             justify-content: center;
  90.             opacity: 0;
  91.             transition: opacity 0.3s ease;
  92.         }
  94.         .category-card:hover .category-overlay {
  95.             opacity: 1;
  96.         }
  98.         .product-card {
  99.             background: white;
  100.             border-radius: 15px;
  101.             overflow: hidden;
  102.             box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  103.             transition: all 0.3s ease;
  104.             height: 100%;
  105.         }
  107.         .product-card:hover {
  108.             transform: translateY(-5px);
  109.             box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  110.         }
  112.         .product-image {
  113.             height: 250px;
  114.             background-size: cover;
  115.             background-position: center;
  116.             position: relative;
  117.         }
  119.         .product-badge {
  120.             position: absolute;
  121.             top: 15px;
  122.             right: 15px;
  123.             background: #ffa200;
  124.             color: white;
  125.             padding: 5px 10px;
  126.             border-radius: 20px;
  127.             font-size: 0.8rem;
  128.             font-weight: bold;
  129.         }
  131.         .product-info {
  132.             padding: 20px;
  133.         }
  135.         .product-title {
  136.             font-size: 1.2rem;
  137.             font-weight: 600;
  138.             margin-bottom: 10px;
  139.             color: #333;
  140.         }
  142.         .product-price {
  143.             font-size: 1.5rem;
  144.             font-weight: bold;
  145.             color: #ffa200;
  146.             margin-bottom: 10px;
  147.         }
  149.         .product-shop {
  150.             font-size: 0.9rem;
  151.             color: #666;
  152.             margin-bottom: 15px;
  153.         }
  155.         .btn-primary-custom {
  156.             background: #ffa200;
  157.             border: none;
  158.             color: white;
  159.             padding: 12px 30px;
  160.             border-radius: 25px;
  161.             font-weight: 500;
  162.             transition: all 0.3s ease;
  163.         }
  165.         .btn-primary-custom:hover {
  166.             background: #e8910a;
  167.             transform: translateY(-2px);
  168.             box-shadow: 0 5px 15px rgba(255, 162, 0, 0.3);
  169.         }
  171.         .section-title {
  172.             text-align: center;
  173.             margin-bottom: 50px;
  174.         }
  176.         .section-title h2 {
  177.             font-size: 2.5rem;
  178.             font-weight: bold;
  179.             color: #333;
  180.             margin-bottom: 15px;
  181.         }
  183.         .section-title p {
  184.             font-size: 1.2rem;
  185.             color: #666;
  186.             max-width: 600px;
  187.             margin: 0 auto;
  188.         }
  190.         .feature-card {
  191.             text-align: center;
  192.             padding: 30px 20px;
  193.             background: white;
  194.             border-radius: 15px;
  195.             box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  196.             transition: all 0.3s ease;
  197.             height: 100%;
  198.         }
  200.         .feature-card:hover {
  201.             transform: translateY(-5px);
  202.             box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  203.         }
  205.         .feature-icon {
  206.             width: 80px;
  207.             height: 80px;
  208.             background: linear-gradient(135deg, #ffa200, #e8910a);
  209.             border-radius: 50%;
  210.             display: flex;
  211.             align-items: center;
  212.             justify-content: center;
  213.             margin: 0 auto 20px;
  214.             font-size: 2rem;
  215.             color: white;
  216.         }
  218.         .newsletter-section {
  219.             background: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  220.             color: white;
  221.             padding: 80px 0;
  222.         }
  224.         .newsletter-form {
  225.             max-width: 500px;
  226.             margin: 0 auto;
  227.         }
  229.         .newsletter-form .form-control {
  230.             border: none;
  231.             border-radius: 25px;
  232.             padding: 15px 25px;
  233.             font-size: 1.1rem;
  234.         }
  236.         .newsletter-form .btn {
  237.             border-radius: 25px;
  238.             padding: 15px 30px;
  239.             font-weight: 500;
  240.         }
  242.         /* Responsive Styles */
  243.         @media(max-width: 991.98px) {
  244.             .hero-banner {
  245.                 padding: 60px 0;
  246.             }
  248.             .stats-number {
  249.                 font-size: 2.5rem;
  250.             }
  252.             .section-title h2 {
  253.                 font-size: 2rem;
  254.             }
  255.             
  256.             .stats-card {
  257.                 margin-bottom: 1.5rem;
  258.             }
  259.         }
  261.         @media(max-width: 767.98px) {
  262.             .hero-banner {
  263.                 padding: 40px 0;
  264.             }
  266.             .hero-content h1 {
  267.                 font-size: 1.75rem;
  268.             }
  270.             .stats-number {
  271.                 font-size: 2rem;
  272.             }
  274.             .stats-label {
  275.                 font-size: 0.9rem;
  276.             }
  278.             .section-title h2 {
  279.                 font-size: 1.75rem;
  280.             }
  282.             .section-title p {
  283.                 font-size: 1rem;
  284.             }
  285.             
  286.             .category-card,
  287.             .product-card {
  288.                 margin-bottom: 1.5rem;
  289.             }
  290.             
  291.             .category-image {
  292.                 height: 150px;
  293.             }
  294.             
  295.             .product-image {
  296.                 height: 200px;
  297.             }
  298.             
  299.             .feature-card {
  300.                 margin-bottom: 1.5rem;
  301.             }
  302.             
  303.             .newsletter-section {
  304.                 padding: 40px 0;
  305.             }
  306.         }
  308.         @media(max-width: 575.98px) {
  309.             .hero-banner {
  310.                 padding: 30px 0;
  311.             }
  313.             .hero-content h1 {
  314.                 font-size: 1.5rem;
  315.             }
  317.             .stats-card {
  318.                 padding: 1.5rem;
  319.             }
  321.             .stats-number {
  322.                 font-size: 1.75rem;
  323.             }
  325.             .section-title h2 {
  326.                 font-size: 1.5rem;
  327.             }
  328.             
  329.             .category-image {
  330.                 height: 120px;
  331.             }
  332.             
  333.             .product-image {
  334.                 height: 180px;
  335.             }
  336.             
  337.             .product-info {
  338.                 padding: 1rem;
  339.             }
  340.             
  341.             .product-title {
  342.                 font-size: 1rem;
  343.             }
  344.             
  345.             .product-price {
  346.                 font-size: 1.25rem;
  347.             }
  348.         }
  350.         /* Styles modernes pour le carousel de bannière */
  351.         .banner-area-modern {
  352.             position: relative;
  353.             width: 100%;
  354.             min-height: 500px;
  355.             background: url('{{ asset('ui/img/banner/banner-bg.jpg') }}') center center no-repeat;
  356.             background-size: cover;
  357.             overflow: hidden;
  358.             padding: 60px 0;
  359.         }
  361.         .banner-area-modern::before {
  362.             content: '';
  363.             position: absolute;
  364.             top: 0;
  365.             left: 0;
  366.             width: 100%;
  367.             height: 100%;
  368.             background: rgba(0, 0, 0, 0.1);
  369.             z-index: 1;
  370.         }
  372.         .banner-carousel-wrapper {
  373.             position: relative;
  374.             width: 100%;
  375.             height: 100%;
  376.             z-index: 2;
  377.         }
  379.         .banner-slide-item {
  380.             min-height: 500px;
  381.             display: flex;
  382.             align-items: center;
  383.             padding: 40px 0;
  384.         }
  386.         .banner-content-modern {
  387.             position: relative;
  388.             z-index: 2;
  389.             padding: 30px;
  390.             background: rgba(255, 255, 255, 0.98);
  391.             border-radius: 20px;
  392.             box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  393.             backdrop-filter: blur(10px);
  394.             animation: fadeInUp 0.8s ease;
  395.         }
  397.         @keyframes fadeInUp {
  398.             from {
  399.                 opacity: 0;
  400.                 transform: translateY(30px);
  401.             }
  402.             to {
  403.                 opacity: 1;
  404.                 transform: translateY(0);
  405.             }
  406.         }
  408.         .banner-badge {
  409.             display: inline-block;
  410.             background: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  411.             color: white;
  412.             padding: 8px 20px;
  413.             border-radius: 50px;
  414.             font-size: 0.85rem;
  415.             font-weight: 600;
  416.             margin-bottom: 20px;
  417.             box-shadow: 0 4px 15px rgba(255, 162, 0, 0.4);
  418.         }
  420.         .banner-badge i {
  421.             margin-right: 5px;
  422.         }
  424.         .banner-title-modern {
  425.             font-size: 2.0rem;
  426.             font-weight: 600;
  427.             color: #2c3e50;
  428.             margin-bottom: 20px;
  429.             line-height: 1.2;
  430.             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  431.             -webkit-background-clip: text;
  432.             -webkit-text-fill-color: transparent;
  433.             background-clip: text;
  434.         }
  436.         .banner-description-modern {
  437.             font-size: 1.1rem;
  438.             color: #555;
  439.             line-height: 1.8;
  440.             margin-bottom: 25px;
  441.         }
  443.         .banner-price-modern {
  444.             display: flex;
  445.             align-items: center;
  446.             gap: 15px;
  447.             margin-bottom: 30px;
  448.             padding: 15px 20px;
  449.             background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  450.             border-radius: 12px;
  451.             border-left: 4px solid #ffa200;
  452.         }
  454.         .banner-price-modern .price-label {
  455.             font-size: 0.9rem;
  456.             color: #666;
  457.             font-weight: 600;
  458.             text-transform: uppercase;
  459.             letter-spacing: 1px;
  460.         }
  462.         .banner-price-modern .price-value {
  463.             font-size: 1.2rem;
  464.             font-weight: 600;
  465.             color: #ffa200;
  466.         }
  468.         .banner-actions-modern {
  469.             display: flex;
  470.             gap: 15px;
  471.             flex-wrap: wrap;
  472.         }
  474.         .btn-banner-primary {
  475.             display: inline-flex;
  476.             align-items: center;
  477.             gap: 10px;
  478.             padding: 15px 35px;
  479.             background: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  480.             color: white;
  481.             text-decoration: none;
  482.             border-radius: 50px;
  483.             font-weight: 600;
  484.             font-size: 1rem;
  485.             transition: all 0.3s ease;
  486.             box-shadow: 0 4px 15px rgba(255, 162, 0, 0.4);
  487.         }
  489.         .btn-banner-primary:hover {
  490.             transform: translateY(-3px);
  491.             box-shadow: 0 8px 25px rgba(255, 162, 0, 0.6);
  492.             color: white;
  493.         }
  495.         .btn-banner-primary .btn-icon {
  496.             transition: transform 0.3s ease;
  497.         }
  499.         .btn-banner-primary:hover .btn-icon {
  500.             transform: translateX(5px);
  501.         }
  503.         .btn-banner-secondary {
  504.             display: inline-flex;
  505.             align-items: center;
  506.             gap: 8px;
  507.             padding: 15px 25px;
  508.             background: white;
  509.             color: #667eea;
  510.             text-decoration: none;
  511.             border-radius: 50px;
  512.             font-weight: 600;
  513.             font-size: 0.95rem;
  514.             border: 2px solid #667eea;
  515.             transition: all 0.3s ease;
  516.         }
  518.         .btn-banner-secondary:hover {
  519.             background: #667eea;
  520.             color: white;
  521.             transform: translateY(-3px);
  522.             box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  523.         }
  525.         .banner-image-modern {
  526.             position: relative;
  527.             height: 450px;
  528.             display: flex;
  529.             align-items: center;
  530.             justify-content: center;
  531.         }
  533.         .banner-image-wrapper {
  534.             position: relative;
  535.             width: 100%;
  536.             height: 100%;
  537.             border-radius: 20px;
  538.             overflow: hidden;
  539.             box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  540.             background: white;
  541.             padding: 20px;
  542.         }
  544.         .banner-img {
  545.             width: 100%;
  546.             height: 100%;
  547.             object-fit: contain;
  548.             border-radius: 15px;
  549.             transition: transform 0.5s ease;
  550.         }
  552.         .banner-slide-item:hover .banner-img {
  553.             transform: scale(1.05);
  554.         }
  556.         .banner-image-overlay {
  557.             position: absolute;
  558.             top: 0;
  559.             left: 0;
  560.             width: 100%;
  561.             height: 100%;
  562.             background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  563.             border-radius: 15px;
  564.             pointer-events: none;
  565.         }
  567.         /* Styles pour Owl Carousel */
  568.         .banner-area-modern .owl-nav {
  569.             position: absolute;
  570.             top: 50%;
  571.             transform: translateY(-50%);
  572.             width: 100%;
  573.             display: flex;
  574.             justify-content: space-between;
  575.             align-items: center;
  576.             padding: 0 20px;
  577.             pointer-events: none;
  578.             z-index: 10;
  579.             left: 0;
  580.             right: 0;
  581.             box-sizing: border-box;
  582.         }
  584.         .banner-area-modern .owl-nav button {
  585.             width: 60px;
  586.             height: 60px;
  587.             min-width: 60px;
  588.             min-height: 60px;
  589.             background: #ffa200 !important;
  590.             border-radius: 50% !important;
  591.             display: flex !important;
  592.             align-items: center;
  593.             justify-content: center;
  594.             color: white !important;
  595.             font-size: 24px !important;
  596.             box-shadow: 0 4px 15px rgba(255, 162, 0, 0.4);
  597.             transition: all 0.3s ease;
  598.             pointer-events: all;
  599.             border: none !important;
  600.             position: relative;
  601.             flex-shrink: 0;
  602.             margin: 0;
  603.             padding: 0;
  604.             line-height: 1;
  605.         }
  607.         .banner-area-modern .owl-nav button.owl-prev {
  608.             margin-right: auto;
  609.         }
  611.         .banner-area-modern .owl-nav button.owl-next {
  612.             margin-left: auto;
  613.         }
  615.         .banner-area-modern .owl-nav button:hover {
  616.             background: #ff6b00 !important;
  617.             color: white !important;
  618.             transform: scale(1.1);
  619.             box-shadow: 0 6px 20px rgba(255, 162, 0, 0.6);
  620.         }
  622.         .banner-area-modern .owl-nav button.disabled {
  623.             opacity: 0.5;
  624.             cursor: not-allowed;
  625.         }
  627.         .banner-area-modern .owl-nav button.disabled:hover {
  628.             transform: scale(1);
  629.         }
  631.         .banner-area-modern .owl-dots {
  632.             position: absolute;
  633.             bottom: 30px;
  634.             left: 50%;
  635.             transform: translateX(-50%);
  636.             display: flex;
  637.             gap: 10px;
  638.             z-index: 10;
  639.         }
  641.         .banner-area-modern .owl-dots button {
  642.             width: 12px;
  643.             height: 12px;
  644.             border-radius: 50%;
  645.             background: rgba(255, 255, 255, 0.6) !important;
  646.             border: 2px solid white !important;
  647.             transition: all 0.3s ease;
  648.             margin: 0 5px;
  649.         }
  651.         .banner-area-modern .owl-dots button.active {
  652.             background: #ffa200 !important;
  653.             border-color: #ffa200 !important;
  654.             width: 30px;
  655.             border-radius: 6px;
  656.         }
  658.         /* Responsive */
  659.         @media(max-width: 992px) {
  660.             .banner-area-modern {
  661.                 min-height: 450px;
  662.                 padding: 40px 0;
  663.                 background-size: cover;
  664.                 background-position: center;
  665.             }
  667.             .banner-slide-item {
  668.                 min-height: 450px;
  669.                 padding: 30px 0;
  670.             }
  672.             .banner-title-modern {
  673.                 font-size: 1.5rem;
  674.             }
  676.             .banner-description-modern {
  677.                 font-size: 1rem;
  678.             }
  680.             .banner-image-modern {
  681.                 height: 350px;
  682.                 margin-top: 30px;
  683.             }
  685.             .banner-content-modern {
  686.                 padding: 25px;
  687.             }
  688.         }
  690.         @media(max-width: 768px) {
  691.             .banner-area-modern {
  692.                 min-height: 400px;
  693.                 padding: 30px 0;
  694.                 background-size: cover;
  695.                 background-position: center;
  696.             }
  698.             .banner-slide-item {
  699.                 min-height: 400px;
  700.                 padding: 20px 0;
  701.             }
  703.             .banner-title-modern {
  704.                 font-size: 1.25rem;
  705.             }
  707.             .banner-description-modern {
  708.                 font-size: 0.95rem;
  709.             }
  711.             .banner-image-modern {
  712.                 height: 280px;
  713.                 margin-top: 20px;
  714.             }
  716.             .banner-content-modern {
  717.                 padding: 20px;
  718.             }
  720.             .banner-price-modern .price-value {
  721.                 font-size: 1.25rem;
  722.             }
  724.             .banner-actions-modern {
  725.                 flex-direction: column;
  726.             }
  728.             .btn-banner-primary,
  729.             .btn-banner-secondary {
  730.                 width: 100%;
  731.                 justify-content: center;
  732.             }
  734.             .banner-area-modern .owl-nav button {
  735.                 width: 50px;
  736.                 height: 50px;
  737.                 min-width: 50px;
  738.                 min-height: 50px;
  739.                 font-size: 20px !important;
  740.                 background: #ffa200 !important;
  741.             }
  743.             .banner-area-modern .owl-nav button:hover {
  744.                 background: #ff6b00 !important;
  745.             }
  746.         }
  748.         @media(max-width: 576px) {
  749.             .banner-area-modern {
  750.                 min-height: 350px;
  751.                 padding: 0;
  752.                 background-size: cover;
  753.                 background-position: center;
  754.             }
  756.             .banner-slide-item {
  757.                 min-height: 350px;
  758.             }
  760.             .banner-title-modern {
  761.                 font-size: 1.25rem;
  762.             }
  764.             .banner-image-modern {
  765.                 height: 220px;
  766.             }
  768.             .banner-content-modern {
  769.                 padding: 15px;
  770.             }
  771.         }
  773.         /* Styles pour les catégories de boutiques cliquables */
  774.         .shop-category-clickable {
  775.             cursor: pointer;
  776.             transition: all 0.3s ease;
  777.             height: 100%;
  778.         }
  779.         .shop-category-clickable:hover {
  780.             transform: translateY(-10px);
  781.             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  782.         }
  783.         .shop-category-clickable:hover .category-image {
  784.             transform: scale(1.1);
  785.         }
  786.         .shop-category-clickable:hover .btn-primary-custom {
  787.             background: #e8910a;
  788.             transform: translateX(5px);
  789.         }
  791.         /* Styles pour les cartes de catégories personnalisées */
  792.         .category-card-custom {
  793.             border-radius: 15px;
  794.             overflow: hidden;
  795.             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  796.             transition: transform 0.3s ease, box-shadow 0.3s ease;
  797.             background: white;
  798.             height: 100%;
  799.         }
  800.         .category-card-custom:hover {
  801.             transform: translateY(-10px);
  802.             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  803.         }
  804.         .category-image-wrapper {
  805.             position: relative;
  806.             height: 200px;
  807.             overflow: hidden;
  808.         }
  809.         .category-image {
  810.             width: 100%;
  811.             height: 100%;
  812.             background-size: cover;
  813.             background-position: center;
  814.             transition: transform 0.3s ease;
  815.         }
  816.         .category-card-custom:hover .category-image {
  817.             transform: scale(1.1);
  818.         }
  819.         .category-overlay-custom {
  820.             position: absolute;
  821.             top: 0;
  822.             left: 0;
  823.             width: 100%;
  824.             height: 100%;
  825.             background: rgba(0, 0, 0, 0.6);
  826.             display: flex;
  827.             align-items: center;
  828.             justify-content: center;
  829.             opacity: 0;
  830.             transition: opacity 0.3s ease;
  831.             color: white;
  832.         }
  833.         .category-card-custom:hover .category-overlay-custom {
  834.             opacity: 1;
  835.         }
  836.         .category-icon-wrapper {
  837.             text-align: center;
  838.         }
  839.         .category-icon-wrapper i {
  840.             color: #ffa200;
  841.             display: block;
  842.         }
  843.         .category-icon-wrapper h4 {
  844.             color: white;
  845.             margin-top: 10px;
  846.         }
  848.         /* Styles pour la galerie de produits en vedette */
  849.         .featured-products-carousel-section {
  850.             position: relative;
  851.             overflow: hidden;
  852.         }
  854.         .featured-gallery-wrapper {
  855.             position: relative;
  856.             max-width: 1400px;
  857.             margin: 0 auto;
  858.             padding: 0 15px;
  859.         }
  861.         .featured-gallery-container {
  862.             position: relative;
  863.             overflow: visible;
  864.             border-radius: 12px;
  865.         }
  867.         .featured-gallery-grid {
  868.             display: flex;
  869.             gap: 30px; /* Même espacement que dans listing (margin entre col-lg-4) */
  870.             padding: 10px 0;
  871.             overflow-x: auto;
  872.             overflow-y: hidden;
  873.             scroll-behavior: smooth;
  874.             scrollbar-width: none; /* Firefox */
  875.             -ms-overflow-style: none; /* IE/Edge */
  876.             -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
  877.             will-change: scroll-position;
  878.         }
  880.         .featured-gallery-grid::-webkit-scrollbar {
  881.             display: none; /* Chrome/Safari */
  882.         }
  884.         /* Mode OwlCarousel */
  885.         .featured-gallery-grid.owl-carousel {
  886.             display: block;
  887.             overflow: hidden;
  888.             padding: 25px 0;
  889.         }
  891.         .featured-gallery-grid.owl-carousel .owl-stage-outer {
  892.             overflow: visible;
  893.         }
  895.         .featured-gallery-grid.owl-carousel .featured-gallery-item {
  896.             opacity: 1;
  897.             transform: none;
  898.             width: auto;
  899.             max-width: none;
  900.             margin: 0 15px;
  901.         }
  903.         .featured-gallery-grid.owl-carousel .owl-stage {
  904.             display: flex;
  905.         }
  907.         .featured-gallery-item {
  908.             flex: 0 0 auto; /* Largeur automatique basée sur le contenu */
  909.             width: 100%;
  910.             max-width: 100%;
  911.             opacity: 0;
  912.             transform: translateY(20px) scale(0.95);
  913.             animation: galleryItemFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  914.             animation-delay: calc(var(--item-index, 0) * 0.05s);
  915.         }
  917.         /* Utiliser la même largeur que dans listing (col-lg-4 = ~33.33%) */
  918.         @media(min-width: 992px) {
  919.             .featured-gallery-item {
  920.                 flex: 0 0 33.333333%;
  921.                 max-width: 25%;
  922.             }
  923.         }
  925.         @media(min-width: 768px) and(max-width: 991px) {
  926.             .featured-gallery-item {
  927.                 flex: 0 0 50%;
  928.                 max-width: 50%;
  929.             }
  930.         }
  932.         @media(max-width: 767px) {
  933.             .featured-gallery-item {
  934.                 flex: 0 0 100%;
  935.                 max-width: 100%;
  936.             }
  937.         }
  939.         /* Ajustements minimaux pour single-product dans le carrousel - utiliser les styles de main.css */
  940.         .featured-gallery-item .single-product {
  941.             margin-bottom: 0; /* Override main.css margin-bottom: 50px */
  942.             min-height: 480px;
  943.             display: flex;
  944.             flex-direction: column;
  945.             padding: 20px;
  946.             background: #fff;
  947.             border-radius: 12px;
  948.             box-shadow: 0 10px 30px rgba(15, 34, 58, 0.08);
  949.             transition: transform 0.25s ease, box-shadow 0.25s ease;
  950.         }
  952.         .featured-gallery-item .single-product:hover {
  953.             transform: translateY(-4px);
  954.             box-shadow: 0 18px 40px rgba(15, 34, 58, 0.12);
  955.         }
  957.         /* S'assurer que les images s'affichent correctement - styles identiques à listing.html.twig */
  958.         .featured-gallery-item .single-product img {
  959.             margin-bottom: 20px;
  960.             width: 100%;
  961.         }
  963.         /* Styles pour product-image-container - identiques à listing.html.twig */
  964.         .featured-gallery-item .product-image-container {
  965.             position: relative;
  966.             overflow: hidden;
  967.             border-radius: 10px;
  968.             height: 260px;
  969.             display: flex;
  970.             align-items: center;
  971.             justify-content: center;
  972.             background: #f7f7fb;
  973.             margin-bottom: 18px;
  974.         }
  976.         .featured-gallery-item .product-image-container:hover .main-product-img {
  977.             transform: scale(1.05);
  978.             transition: transform 0.3s ease;
  979.         }
  981.         .featured-gallery-item .product-image-container a {
  982.             display: block;
  983.             width: 100%;
  984.             height: 100%;
  985.         }
  987.         .featured-gallery-item .main-product-img {
  988.             transition: transform 0.3s ease;
  989.             width: 100% !important;
  990.             height: 100% !important;
  991.             object-fit: cover;
  992.             object-position: center;
  993.             display: block;
  994.             will-change: transform, opacity;
  995.         }
  997.         .featured-gallery-item .main-product-img.image-fade {
  998.             animation: imageFade 0.5s ease;
  999.         }
  1001.         @keyframes imageFade {
  1002.             from {
  1003.                 opacity: 0;
  1004.                 transform: scale(1.02);
  1005.             }
  1006.             to {
  1007.                 opacity: 1;
  1008.                 transform: scale(1);
  1009.             }
  1010.         }
  1012.         .featured-gallery-item .product-details {
  1013.             display: flex;
  1014.             flex-direction: column;
  1015.             height: 100%;
  1016.         }
  1018.         .featured-gallery-item .prd-bottom {
  1019.             margin-top: auto;
  1020.         }
  1022.         /* Styles pour img-nav-btn - identiques à listing.html.twig */
  1023.         .featured-gallery-item .img-nav-btn {
  1024.             position: absolute;
  1025.             top: 50%;
  1026.             transform: translateY(-50%);
  1027.             background: rgba(0, 0, 0, 0.6);
  1028.             color: white;
  1029.             border: none;
  1030.             width: 35px;
  1031.             height: 35px;
  1032.             border-radius: 50%;
  1033.             display: flex;
  1034.             align-items: center;
  1035.             justify-content: center;
  1036.             cursor: pointer;
  1037.             transition: all 0.3s ease;
  1038.             z-index: 10;
  1039.         }
  1041.         .featured-gallery-item .img-nav-btn:hover {
  1042.             background: #095ad3;
  1043.             transform: translateY(-50%) scale(1.1);
  1044.         }
  1046.         .featured-gallery-item .img-nav-left {
  1047.             left: 10px;
  1048.         }
  1050.         .featured-gallery-item .img-nav-right {
  1051.             right: 10px;
  1052.         }
  1054.         .featured-gallery-item .img-indicators {
  1055.             position: absolute;
  1056.             bottom: 10px;
  1057.             left: 50%;
  1058.             transform: translateX(-50%);
  1059.             display: flex;
  1060.             gap: 5px;
  1061.             z-index: 10;
  1062.         }
  1064.         .featured-gallery-item .indicator {
  1065.             width: 8px;
  1066.             height: 8px;
  1067.             border-radius: 50%;
  1068.             background: rgba(255, 255, 255, 0.5);
  1069.             cursor: pointer;
  1070.             margin-bottom: 10px;
  1071.             transition: all 0.3s ease;
  1072.             border: 1px solid rgba(255, 255, 255, 0.3);
  1073.         }
  1075.         .featured-gallery-item .indicator.active {
  1076.             background: #ffa200;
  1077.             border-color: #ffa200;
  1078.             transform: scale(1.2);
  1079.         }
  1081.         .featured-gallery-item .indicator:hover {
  1082.             background: rgba(255, 255, 255, 0.8);
  1083.         }
  1085.         /* Styles pour shop-info - identiques à listing.html.twig */
  1086.         .featured-gallery-item .shop-info {
  1087.             margin: 8px 0;
  1088.             padding: 5px 0;
  1089.             border-bottom: 1px solid #f0f0f0;
  1090.         }
  1092.         .featured-gallery-item .shop-link {
  1093.             color: #007bff;
  1094.             text-decoration: none;
  1095.             font-weight: 500;
  1096.         }
  1098.         .featured-gallery-item .shop-link:hover {
  1099.             color: #ffa200;
  1100.             text-decoration: underline;
  1101.         }
  1103.         /* Les autres styles (product-details h6, price, prd-bottom, social-info) sont déjà définis dans main.css */
  1105.         @keyframes galleryItemFadeIn {
  1106.             from {
  1107.                 opacity: 0;
  1108.                 transform: translateY(20px) scale(0.95);
  1109.             }
  1110.             to {
  1111.                 opacity: 1;
  1112.                 transform: translateY(0) scale(1);
  1113.             }
  1114.         }
  1116.         .featured-gallery-card {
  1117.             display: flex;
  1118.             flex-direction: column;
  1119.             height: 100%;
  1120.             background: white;
  1121.             border-radius: 12px;
  1122.             overflow: hidden;
  1123.             box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  1124.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1125.             border: 1px solid #f0f0f0;
  1126.         }
  1128.         .featured-gallery-card:hover {
  1129.             transform: translateY(-5px);
  1130.             box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  1131.             border-color: #ffa200;
  1132.         }
  1134.         .featured-gallery-image-wrapper {
  1135.             position: relative;
  1136.             width: 100%;
  1137.             padding-top: 100%; /* Ratio 1:1 pour une galerie carrée */
  1138.             overflow: hidden;
  1139.             background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  1140.         }
  1142.         .featured-gallery-image {
  1143.             position: absolute;
  1144.             top: 0;
  1145.             left: 0;
  1146.             width: 100%;
  1147.             height: 100%;
  1148.             background-size: cover;
  1149.             background-position: center;
  1150.             transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  1151.         }
  1153.         .featured-gallery-card:hover .featured-gallery-image {
  1154.             transform: scale(1.08);
  1155.         }
  1157.         .featured-gallery-badge {
  1158.             position: absolute;
  1159.             top: 8px;
  1160.             left: 8px;
  1161.             background: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  1162.             color: white;
  1163.             padding: 4px 10px;
  1164.             border-radius: 15px;
  1165.             font-size: 12px;
  1166.             font-weight: 600;
  1167.             z-index: 2;
  1168.             box-shadow: 0 2px 8px rgba(255, 162, 0, 0.4);
  1169.         }
  1171.         .featured-gallery-overlay {
  1172.             position: absolute;
  1173.             top: 0;
  1174.             left: 0;
  1175.             width: 100%;
  1176.             height: 100%;
  1177.             background: rgba(0, 0, 0, 0.5);
  1178.             display: flex;
  1179.             align-items: center;
  1180.             justify-content: center;
  1181.             opacity: 0;
  1182.             transition: opacity 0.3s ease;
  1183.         }
  1185.         .featured-gallery-card:hover .featured-gallery-overlay {
  1186.             opacity: 1;
  1187.         }
  1189.         .featured-gallery-view-btn {
  1190.             background: white;
  1191.             color: #333;
  1192.             width: 40px;
  1193.             height: 40px;
  1194.             border-radius: 50%;
  1195.             display: flex;
  1196.             align-items: center;
  1197.             justify-content: center;
  1198.             text-decoration: none;
  1199.             font-size: 18px;
  1200.             transform: scale(0.8);
  1201.             transition: transform 0.3s ease;
  1202.         }
  1204.         .featured-gallery-card:hover .featured-gallery-view-btn {
  1205.             transform: scale(1);
  1206.         }
  1208.         .featured-gallery-info {
  1209.             padding: 12px;
  1210.             flex: 1;
  1211.             display: flex;
  1212.             flex-direction: column;
  1213.         }
  1215.         .featured-gallery-title {
  1216.             font-size: 14px;
  1217.             font-weight: 600;
  1218.             margin-bottom: 6px;
  1219.             color: #333;
  1220.             line-height: 1.3;
  1221.             display: -webkit-box;
  1222.             -webkit-line-clamp: 2;
  1223.             -webkit-box-orient: vertical;
  1224.             overflow: hidden;
  1225.             min-height: 36px;
  1226.         }
  1228.         .featured-gallery-title a {
  1229.             color: #333;
  1230.             text-decoration: none;
  1231.             transition: color 0.3s ease;
  1232.         }
  1234.         .featured-gallery-title a:hover {
  1235.             color: #ffa200;
  1236.         }
  1238.         .featured-gallery-price {
  1239.             font-size: 16px;
  1240.             font-weight: 700;
  1241.             color: #ffa200;
  1242.             margin-bottom: 6px;
  1243.         }
  1245.         .featured-gallery-rating {
  1246.             display: flex;
  1247.             align-items: center;
  1248.             gap: 3px;
  1249.             font-size: 11px;
  1250.         }
  1252.         .featured-gallery-rating .fa-star.active {
  1253.             color: #ffa200;
  1254.         }
  1256.         .featured-gallery-rating .fa-star-o {
  1257.             color: #ddd;
  1258.         }
  1260.         .featured-gallery-controls {
  1261.             display: flex;
  1262.             justify-content: center;
  1263.             gap: 20px;
  1264.             margin-top: 25px;
  1265.             padding: 0 20px;
  1266.         }
  1268.         .featured-gallery-nav-btn {
  1269.             width: 42px;
  1270.             height: 42px;
  1271.             border-radius: 50%;
  1272.             border: 1.5px solid #ffa200;
  1273.             background: white;
  1274.             color: #ffa200;
  1275.             font-size: 16px;
  1276.             cursor: pointer;
  1277.             display: flex;
  1278.             align-items: center;
  1279.             justify-content: center;
  1280.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1281.             box-shadow: 0 3px 10px rgba(255, 162, 0, 0.18);
  1282.             position: relative;
  1283.             overflow: hidden;
  1284.         }
  1286.         .featured-gallery-nav-btn.btn-ripple::after {
  1287.             content: '';
  1288.             position: absolute;
  1289.             width: 100%;
  1290.             height: 100%;
  1291.             left: 0;
  1292.             top: 0;
  1293.             border-radius: 50%;
  1294.             background: rgba(255, 162, 0, 0.2);
  1295.             animation: rippleEffect 0.35s ease;
  1296.         }
  1298.         @keyframes rippleEffect {
  1299.             from {
  1300.                 transform: scale(0.6);
  1301.                 opacity: 0.7;
  1302.             }
  1303.             to {
  1304.                 transform: scale(1.4);
  1305.                 opacity: 0;
  1306.             }
  1307.         }
  1309.         .featured-gallery-nav-btn:hover:not(:disabled) {
  1310.             background: #ffa200;
  1311.             color: white;
  1312.             transform: scale(1.1);
  1313.             box-shadow: 0 5px 18px rgba(255, 162, 0, 0.4);
  1314.         }
  1316.         .featured-gallery-nav-btn:active:not(:disabled) {
  1317.             transform: scale(0.95);
  1318.         }
  1320.         .featured-gallery-nav-btn:disabled {
  1321.             opacity: 0.3;
  1322.             cursor: not-allowed;
  1323.         }
  1325.         .featured-gallery-load-more {
  1326.             margin-top: 30px;
  1327.         }
  1329.         /* Style pour le bouton "Voir tous les produits" */
  1330.         .btn-view-all-products {
  1331.             display: inline-flex;
  1332.             align-items: center;
  1333.             gap: 12px;
  1334.             padding: 16px 40px;
  1335.             background: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  1336.             color: white;
  1337.             text-decoration: none;
  1338.             border-radius: 50px;
  1339.             font-weight: 600;
  1340.             font-size: 16px;
  1341.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1342.             box-shadow: 0 4px 15px rgba(255, 162, 0, 0.3);
  1343.             position: relative;
  1344.             overflow: hidden;
  1345.         }
  1347.         .btn-view-all-products::before {
  1348.             content: '';
  1349.             position: absolute;
  1350.             top: 0;
  1351.             left: -100%;
  1352.             width: 100%;
  1353.             height: 100%;
  1354.             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  1355.             transition: left 0.5s ease;
  1356.         }
  1358.         .btn-view-all-products:hover::before {
  1359.             left: 100%;
  1360.         }
  1362.         .btn-view-all-products:hover {
  1363.             transform: translateY(-3px);
  1364.             box-shadow: 0 8px 25px rgba(255, 162, 0, 0.5);
  1365.             color: white;
  1366.         }
  1368.         .btn-view-all-products:active {
  1369.             transform: translateY(-1px);
  1370.         }
  1372.         .btn-view-all-products i {
  1373.             font-size: 18px;
  1374.             transition: transform 0.3s ease;
  1375.         }
  1377.         .btn-view-all-products:hover i {
  1378.             transform: translateX(5px);
  1379.         }
  1381.         .btn-view-all-products span {
  1382.             position: relative;
  1383.             z-index: 1;
  1384.         }
  1386.         /* Responsive */
  1387.         @media(max-width: 767px) {
  1388.             .btn-view-all-products {
  1389.                 padding: 14px 30px;
  1390.                 font-size: 14px;
  1391.             }
  1392.         }
  1394.         /* Responsive */
  1395.         @media(max-width: 767px) {
  1396.             .featured-gallery-grid {
  1397.                 gap: 10px;
  1398.             }
  1400.             .featured-gallery-info {
  1401.                 padding: 10px;
  1402.             }
  1404.             .featured-gallery-title {
  1405.                 font-size: 13px;
  1406.                 min-height: 32px;
  1407.             }
  1409.             .featured-gallery-price {
  1410.                 font-size: 14px;
  1411.             }
  1412.         }
  1414.         /* Styles pour les grilles de produits Nouveautés */
  1415.         .latest-products-grid {
  1416.             margin-top: 30px;
  1417.         }
  1419.         .product-card-modern {
  1420.             background: white;
  1421.             border-radius: 12px;
  1422.             overflow: hidden;
  1423.             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  1424.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1425.             height: 100%;
  1426.             display: flex;
  1427.             flex-direction: column;
  1428.             border: 1px solid #f0f0f0;
  1429.         }
  1431.         .product-card-modern:hover {
  1432.             transform: translateY(-8px);
  1433.             box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  1434.             border-color: #ffa200;
  1435.         }
  1437.         .product-image-wrapper {
  1438.             position: relative;
  1439.             width: 100%;
  1440.             padding-top: 75%; /* Ratio 4:3 */
  1441.             overflow: hidden;
  1442.             background: #f8f9fa;
  1443.         }
  1445.         .product-image {
  1446.             position: absolute;
  1447.             top: 0;
  1448.             left: 0;
  1449.             width: 100%;
  1450.             height: 100%;
  1451.             background-size: cover;
  1452.             background-position: center;
  1453.             transition: transform 0.5s ease;
  1454.         }
  1456.         .product-card-modern:hover .product-image {
  1457.             transform: scale(1.1);
  1458.         }
  1460.         .product-badge-modern {
  1461.             position: absolute;
  1462.             top: 10px;
  1463.             right: 10px;
  1464.             background: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  1465.             color: white;
  1466.             padding: 6px 12px;
  1467.             border-radius: 20px;
  1468.             font-size: 12px;
  1469.             font-weight: 600;
  1470.             z-index: 2;
  1471.             box-shadow: 0 2px 8px rgba(255, 162, 0, 0.3);
  1472.         }
  1474.         .product-badge-modern.new-badge {
  1475.             background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  1476.         }
  1478.         .product-overlay {
  1479.             position: absolute;
  1480.             top: 0;
  1481.             left: 0;
  1482.             width: 100%;
  1483.             height: 100%;
  1484.             background: rgba(0, 0, 0, 0.5);
  1485.             display: flex;
  1486.             align-items: center;
  1487.             justify-content: center;
  1488.             opacity: 0;
  1489.             transition: opacity 0.3s ease;
  1490.             z-index: 1;
  1491.         }
  1493.         .product-card-modern:hover .product-overlay {
  1494.             opacity: 1;
  1495.         }
  1497.         .btn-view-product {
  1498.             background: white;
  1499.             color: #333;
  1500.             padding: 12px 24px;
  1501.             border-radius: 25px;
  1502.             text-decoration: none;
  1503.             font-weight: 600;
  1504.             display: flex;
  1505.             align-items: center;
  1506.             gap: 8px;
  1507.             transition: all 0.3s ease;
  1508.             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  1509.         }
  1511.         .btn-view-product:hover {
  1512.             background: #ffa200;
  1513.             color: white;
  1514.             transform: scale(1.05);
  1515.         }
  1517.         .product-info-modern {
  1518.             padding: 16px;
  1519.             flex-grow: 1;
  1520.             display: flex;
  1521.             flex-direction: column;
  1522.         }
  1524.         .product-title-modern {
  1525.             margin: 0 0 8px;
  1526.             font-size: 16px;
  1527.             font-weight: 600;
  1528.             line-height: 1.4;
  1529.         }
  1531.         .product-title-modern a {
  1532.             color: #333;
  1533.             text-decoration: none;
  1534.             transition: color 0.3s ease;
  1535.         }
  1537.         .product-title-modern a:hover {
  1538.             color: #ffa200;
  1539.         }
  1541.         .product-price-modern {
  1542.             font-size: 20px;
  1543.             font-weight: 700;
  1544.             color: #ffa200;
  1545.             margin-bottom: 8px;
  1546.         }
  1548.         .product-shop-modern {
  1549.             display: flex;
  1550.             align-items: center;
  1551.             gap: 6px;
  1552.             font-size: 13px;
  1553.             color: #666;
  1554.             margin-bottom: 8px;
  1555.         }
  1557.         .product-shop-modern i {
  1558.             color: #ffa200;
  1559.         }
  1561.         .shop-link {
  1562.             color: #666;
  1563.             text-decoration: none;
  1564.             transition: color 0.3s ease;
  1565.         }
  1567.         .shop-link:hover {
  1568.             color: #ffa200;
  1569.         }
  1571.         .product-rating-modern {
  1572.             display: flex;
  1573.             align-items: center;
  1574.             gap: 4px;
  1575.             margin-top: auto;
  1576.         }
  1578.         .product-rating-modern .fa-star.active {
  1579.             color: #ffc107;
  1580.         }
  1582.         .product-rating-modern .fa-star-o {
  1583.             color: #ddd;
  1584.         }
  1586.         .rating-count {
  1587.             font-size: 12px;
  1588.             color: #666;
  1589.             margin-left: 4px;
  1590.         }
  1592.         .product-views-modern {
  1593.             display: flex;
  1594.             align-items: center;
  1595.             gap: 6px;
  1596.             font-size: 12px;
  1597.             color: #666;
  1598.             margin-top: auto;
  1599.         }
  1601.         .product-views-modern i {
  1602.             color: #999;
  1603.         }
  1605.         /* Style des cartes produits */
  1606.         .product-card {
  1607.             background: white;
  1608.             border-radius: 15px;
  1609.             overflow: hidden;
  1610.             box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  1611.             transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  1612.             height: 100%;
  1613.             display: flex;
  1614.             flex-direction: column;
  1615.         }
  1617.         .product-card:hover {
  1618.             box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  1619.             transform: translateY(-5px);
  1620.         }
  1622.         .product-image {
  1623.             width: 100%;
  1624.             height: 250px;
  1625.             background-size: cover;
  1626.             background-position: center;
  1627.             position: relative;
  1628.             overflow: hidden;
  1629.         }
  1631.         .product-image::before {
  1632.             content: '';
  1633.             position: absolute;
  1634.             top: 0;
  1635.             left: -100%;
  1636.             width: 100%;
  1637.             height: 100%;
  1638.             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  1639.             transition: left 0.6s ease;
  1640.         }
  1642.         .product-card:hover .product-image::before {
  1643.             left: 100%;
  1644.         }
  1646.         .product-badge {
  1647.             position: absolute;
  1648.             top: 15px;
  1649.             right: 15px;
  1650.             background: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  1651.             color: white;
  1652.             padding: 8px 15px;
  1653.             border-radius: 20px;
  1654.             font-size: 0.85rem;
  1655.             font-weight: 600;
  1656.             box-shadow: 0 4px 10px rgba(255, 162, 0, 0.4);
  1657.             z-index: 1;
  1658.         }
  1660.         .product-info {
  1661.             padding: 20px;
  1662.             flex-grow: 1;
  1663.             display: flex;
  1664.             flex-direction: column;
  1665.         }
  1667.         .product-title {
  1668.             font-size: 1.1rem;
  1669.             font-weight: 600;
  1670.             color: #2c3e50;
  1671.             margin-bottom: 10px;
  1672.             line-height: 1.4;
  1673.             display: -webkit-box;
  1674.             -webkit-line-clamp: 2;
  1675.             -webkit-box-orient: vertical;
  1676.             overflow: hidden;
  1677.         }
  1679.         .product-price {
  1680.             font-size: 1.5rem;
  1681.             font-weight: 800;
  1682.             color: #ffa200;
  1683.             margin-bottom: 15px;
  1684.         }
  1686.         .product-shop {
  1687.             font-size: 0.9rem;
  1688.             color: #666;
  1689.             margin-bottom: 15px;
  1690.         }
  1692.         .product-shop a {
  1693.             color: #667eea;
  1694.             text-decoration: none;
  1695.             transition: color 0.3s ease;
  1696.         }
  1698.         .product-shop a:hover {
  1699.             color: #ffa200;
  1700.         }
  1702.         /* Newsletter Modern Styles */
  1703.         .newsletter-section-modern {
  1704.             background: linear-gradient(135deg, #ffa200 0%, #095ad3 100%);
  1705.             position: relative;
  1706.             overflow: hidden;
  1707.         }
  1708.         .newsletter-section-modern::before {
  1709.             content: '';
  1710.             position: absolute;
  1711.             top: -50%;
  1712.             right: -50%;
  1713.             width: 100%;
  1714.             height: 200%;
  1715.             background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  1716.             animation: pulse 3s ease-in-out infinite;
  1717.         }
  1718.         @keyframes pulse {
  1719.             0,
  1720.             100% {
  1721.                 transform: scale(1);
  1722.                 opacity: 0.5;
  1723.             }
  1724.             50% {
  1725.                 transform: scale(1.1);
  1726.                 opacity: 0.8;
  1727.             }
  1728.         }
  1729.         .newsletter-card {
  1730.             background: white;
  1731.             border-radius: 20px;
  1732.             padding: 40px;
  1733.             box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  1734.             position: relative;
  1735.             z-index: 1;
  1736.         }
  1737.         .newsletter-title {
  1738.             font-size: 2.5rem;
  1739.             font-weight: bold;
  1740.             color: #333;
  1741.         }
  1742.         .newsletter-description {
  1743.             color: #666;
  1744.             font-size: 1.1rem;
  1745.             line-height: 1.8;
  1746.         }
  1747.         .newsletter-form-modern {
  1748.             position: relative;
  1749.         }
  1750.         .newsletter-input-wrapper {
  1751.             display: flex;
  1752.             gap: 10px;
  1753.             margin-bottom: 15px;
  1754.         }
  1755.         .newsletter-input {
  1756.             flex: 1;
  1757.             padding: 18px 25px;
  1758.             border: 2px solid #e0e0e0;
  1759.             border-radius: 50px;
  1760.             font-size: 1rem;
  1761.             transition: all 0.3s ease;
  1762.         }
  1763.         .newsletter-input:focus {
  1764.             outline: none;
  1765.             border-color: #ffa200;
  1766.             box-shadow: 0 0 0 3px rgba(255, 162, 0, 0.1);
  1767.         }
  1768.         .newsletter-button {
  1769.             padding: 18px 35px;
  1770.             background: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  1771.             color: white;
  1772.             border: none;
  1773.             border-radius: 50px;
  1774.             font-weight: 600;
  1775.             font-size: 1rem;
  1776.             cursor: pointer;
  1777.             transition: all 0.3s ease;
  1778.             white-space: nowrap;
  1779.         }
  1780.         .newsletter-button:hover {
  1781.             transform: translateY(-2px);
  1782.             box-shadow: 0 5px 20px rgba(255, 162, 0, 0.4);
  1783.         }
  1784.         .newsletter-privacy {
  1785.             color: #999;
  1786.         }
  1788.         /* CTA Modern Styles */
  1789.         .cta-section-modern {
  1790.             background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  1791.         }
  1792.         .cta-card {
  1793.             background: white;
  1794.             border-radius: 25px;
  1795.             padding: 50px;
  1796.             box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
  1797.             position: relative;
  1798.             overflow: hidden;
  1799.         }
  1800.         .cta-card::before {
  1801.             content: '';
  1802.             position: absolute;
  1803.             top: -50px;
  1804.             right: -50px;
  1805.             width: 200px;
  1806.             height: 200px;
  1807.             background: linear-gradient(135deg, rgba(255,162,0,0.1) 0%, rgba(255,162,0,0.05) 100%);
  1808.             border-radius: 50%;
  1809.         }
  1810.         .cta-badge {
  1811.             display: inline-block;
  1812.             padding: 8px 20px;
  1813.             background: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  1814.             color: white;
  1815.             border-radius: 50px;
  1816.             font-size: 0.9rem;
  1817.             font-weight: 600;
  1818.             margin-bottom: 20px;
  1819.         }
  1820.         .cta-title {
  1821.             font-size: 3rem;
  1822.             font-weight: bold;
  1823.             color: #333;
  1824.             margin-bottom: 20px;
  1825.         }
  1826.         .cta-description {
  1827.             font-size: 1.2rem;
  1828.             color: #666;
  1829.             line-height: 1.8;
  1830.         }
  1831.         .cta-features {
  1832.             display: flex;
  1833.             flex-direction: column;
  1834.             gap: 15px;
  1835.         }
  1836.         .cta-feature-item {
  1837.             display: flex;
  1838.             align-items: center;
  1839.             gap: 10px;
  1840.             font-size: 1rem;
  1841.             color: #555;
  1842.         }
  1843.         .cta-feature-item i {
  1844.             color: #ffa200;
  1845.             font-size: 1.3rem;
  1846.         }
  1847.         .cta-buttons {
  1848.             display: flex;
  1849.             gap: 15px;
  1850.             flex-wrap: wrap;
  1851.         }
  1852.         .cta-button-primary {
  1853.             padding: 15px 35px;
  1854.             background: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  1855.             color: white;
  1856.             border: none;
  1857.             border-radius: 50px;
  1858.             font-weight: 600;
  1859.             font-size: 1.1rem;
  1860.             transition: all 0.3s ease;
  1861.         }
  1862.         .cta-button-primary:hover {
  1863.             transform: translateY(-3px);
  1864.             box-shadow: 0 8px 25px rgba(255, 162, 0, 0.4);
  1865.             color: white;
  1866.         }
  1867.         .cta-button-secondary {
  1868.             padding: 15px 35px;
  1869.             background: white;
  1870.             color: #ffa200;
  1871.             border: 2px solid #ffa200;
  1872.             border-radius: 50px;
  1873.             font-weight: 600;
  1874.             font-size: 1.1rem;
  1875.             transition: all 0.3s ease;
  1876.         }
  1877.         .cta-button-secondary:hover {
  1878.             background: #ffa200;
  1879.             color: white;
  1880.             transform: translateY(-3px);
  1881.             box-shadow: 0 8px 25px rgba(255, 162, 0, 0.3);
  1882.         }
  1883.         .cta-image-wrapper {
  1884.             position: relative;
  1885.         }
  1886.         .cta-decoration {
  1887.             position: absolute;
  1888.             top: -20px;
  1889.             right: -20px;
  1890.             width: 150px;
  1891.             height: 150px;
  1892.             background: linear-gradient(135deg, rgba(255,162,0,0.2) 0%, rgba(255,162,0,0.05) 100%);
  1893.             border-radius: 50%;
  1894.             z-index: 0;
  1895.         }
  1896.         .cta-image {
  1897.             position: relative;
  1898.             z-index: 1;
  1899.             max-width: 100%;
  1900.             height: auto;
  1901.             border-radius: 15px;
  1902.         }
  1904.         .home-section {
  1905.             position: relative;
  1906.             transition: background-color 0.3s ease, color 0.3s ease;
  1907.         }
  1909.         .home-section::before {
  1910.             content: '';
  1911.             position: absolute;
  1912.             inset: 0;
  1913.             pointer-events: none;
  1914.             opacity: 0;
  1915.             transition: opacity 0.3s ease;
  1916.         }
  1918.         html[data-theme="dark"] .home-section {
  1919.             background: linear-gradient(180deg, rgba(17, 24, 39, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  1920.             color: var(--mk-text) !important;
  1921.             border-top: 1px solid rgba(148, 163, 184, 0.08);
  1922.             border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  1923.         }
  1925.         html[data-theme="dark"] .home-section--alt {
  1926.             background: linear-gradient(180deg, rgba(12, 18, 30, 0.98) 0%, rgba(24, 34, 53, 0.95) 100%) !important;
  1927.         }
  1929.         html[data-theme="dark"] .home-section--alt::before {
  1930.             opacity: 1;
  1931.             background: linear-gradient(
  1932.                 180deg,
  1933.                 rgba(255, 255, 255, 0.015) 0%,
  1934.                 rgba(255, 255, 255, 0.015) 50%,
  1935.                 rgba(255, 255, 255, 0.03) 50%,
  1936.                 rgba(255, 255, 255, 0.03) 100%
  1937.             );
  1938.             background-size: 100% 12px;
  1939.         }
  1941.         html[data-theme="dark"] .home-section .section-title h2,
  1942.         html[data-theme="dark"] .home-section .category-content h5,
  1943.         html[data-theme="dark"] .home-section .product-title-modern,
  1944.         html[data-theme="dark"] .home-section .product-title-modern a,
  1945.         html[data-theme="dark"] .home-section .product-title,
  1946.         html[data-theme="dark"] .home-section .product-title a,
  1947.         html[data-theme="dark"] .home-section .featured-gallery-title,
  1948.         html[data-theme="dark"] .home-section .featured-gallery-title a,
  1949.         html[data-theme="dark"] .home-section .newsletter-title,
  1950.         html[data-theme="dark"] .home-section .cta-title,
  1951.         html[data-theme="dark"] .home-section .feature-card h5,
  1952.         html[data-theme="dark"] .home-section .banner-title-modern {
  1953.             color: var(--mk-text) !important;
  1954.             -webkit-text-fill-color: currentColor !important;
  1955.             background: none !important;
  1956.         }
  1958.         html[data-theme="dark"] .home-section .section-title p,
  1959.         html[data-theme="dark"] .home-section .category-content p,
  1960.         html[data-theme="dark"] .home-section .product-shop-modern,
  1961.         html[data-theme="dark"] .home-section .rating-count,
  1962.         html[data-theme="dark"] .home-section .product-views-modern,
  1963.         html[data-theme="dark"] .home-section .newsletter-description,
  1964.         html[data-theme="dark"] .home-section .newsletter-privacy,
  1965.         html[data-theme="dark"] .home-section .cta-description,
  1966.         html[data-theme="dark"] .home-section .cta-feature-item,
  1967.         html[data-theme="dark"] .home-section .banner-description-modern,
  1968.         html[data-theme="dark"] .home-section .price-label {
  1969.             color: var(--mk-text-soft) !important;
  1970.         }
  1972.         html[data-theme="dark"] .home-section .text-muted,
  1973.         html[data-theme="dark"] .home-section small.text-muted,
  1974.         html[data-theme="dark"] .home-section .small.text-muted {
  1975.             color: var(--mk-text-muted) !important;
  1976.         }
  1978.         html[data-theme="dark"] .home-section .stats-card,
  1979.         html[data-theme="dark"] .home-section .category-card-custom,
  1980.         html[data-theme="dark"] .home-section .product-card-modern,
  1981.         html[data-theme="dark"] .home-section .product-card,
  1982.         html[data-theme="dark"] .home-section .feature-card,
  1983.         html[data-theme="dark"] .home-section .newsletter-card,
  1984.         html[data-theme="dark"] .home-section .cta-card,
  1985.         html[data-theme="dark"] .home-section .single-product,
  1986.         html[data-theme="dark"] .home-section .banner-content-modern,
  1987.         html[data-theme="dark"] .home-section .featured-gallery-card {
  1988.             background: var(--mk-surface-strong) !important;
  1989.             color: var(--mk-text) !important;
  1990.             border-color: var(--mk-border) !important;
  1991.             box-shadow: 0 20px 45px rgba(2, 6, 23, 0.28) !important;
  1992.         }
  1994.         html[data-theme="dark"] .home-section--alt .stats-card,
  1995.         html[data-theme="dark"] .home-section--alt .category-card-custom,
  1996.         html[data-theme="dark"] .home-section--alt .product-card-modern,
  1997.         html[data-theme="dark"] .home-section--alt .product-card,
  1998.         html[data-theme="dark"] .home-section--alt .feature-card,
  1999.         html[data-theme="dark"] .home-section--alt .newsletter-card,
  2000.         html[data-theme="dark"] .home-section--alt .cta-card,
  2001.         html[data-theme="dark"] .home-section--alt .single-product,
  2002.         html[data-theme="dark"] .home-section--alt .banner-content-modern,
  2003.         html[data-theme="dark"] .home-section--alt .featured-gallery-card {
  2004.             background: rgba(31, 41, 55, 0.9) !important;
  2005.         }
  2007.         html[data-theme="dark"] .home-section .product-image-wrapper,
  2008.         html[data-theme="dark"] .home-section .featured-gallery-image-wrapper,
  2009.         html[data-theme="dark"] .home-section .product-image-container,
  2010.         html[data-theme="dark"] .home-section .banner-image-wrapper {
  2011.             background: #0f172a !important;
  2012.             border-color: var(--mk-border) !important;
  2013.         }
  2015.         html[data-theme="dark"] .home-section .shop-link,
  2016.         html[data-theme="dark"] .home-section .product-shop a,
  2017.         html[data-theme="dark"] .home-section .product-shop-modern a,
  2018.         html[data-theme="dark"] .home-section .featured-gallery-view-btn {
  2019.             color: #93c5fd !important;
  2020.         }
  2022.         html[data-theme="dark"] .home-section .shop-link:hover,
  2023.         html[data-theme="dark"] .home-section .product-shop a:hover,
  2024.         html[data-theme="dark"] .home-section .product-shop-modern a:hover {
  2025.             color: var(--mk-primary) !important;
  2026.         }
  2028.         html[data-theme="dark"] .home-section .banner-price-modern {
  2029.             background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(31, 41, 55, 0.94) 100%) !important;
  2030.             border-left-color: var(--mk-primary) !important;
  2031.         }
  2033.         html[data-theme="dark"] .home-section .newsletter-input {
  2034.             background: #0f172a !important;
  2035.             border-color: var(--mk-border) !important;
  2036.             color: var(--mk-text) !important;
  2037.         }
  2039.         html[data-theme="dark"] .home-section .newsletter-input::placeholder {
  2040.             color: var(--mk-text-muted) !important;
  2041.         }
  2043.         html[data-theme="dark"] .home-section .cta-section-modern,
  2044.         html[data-theme="dark"] .home-section.cta-section-modern,
  2045.         html[data-theme="dark"] .home-section.newsletter-section-modern {
  2046.             color: var(--mk-text) !important;
  2047.         }
  2048.     </style>
  2049. {% endblock %}
  2051. {% block body %}
  2052.     <!-- Hero Section -->
  2053.     <!-- start banner Area avec produits en vedette -->
  2054.         {% if featuredProducts|length > 0 %}
  2055.             <section class="banner-area-modern"> <div class="banner-carousel-wrapper">
  2056.                 <div class="active-banner-slider owl-carousel" style="margin-top: 100px;">
  2057.                     {% for product in featuredProducts %}
  2058.                         <!-- single-slide -->
  2059.                         <div class="banner-slide-item">
  2060.                             <div class="container">
  2061.                                 <div class="row align-items-center">
  2062.                                     <div class="col-lg-4 col-md-6 col-12">
  2063.                                         <div class="banner-content-modern">
  2064.                                             <div class="banner-badge">
  2065.                                                 <i class="lnr lnr-star"></i>
  2066.                                                 Produit en vedette
  2067.                                             </div>
  2068.                                             <h1 class="banner-title-modern">{{ product.name }}</h1>
  2069.                                             <p class="banner-description-modern">
  2070.                                                 {{ product.description ? (product.description|striptags|slice(0, 120) ~ '...') : 'Découvrez ce produit exclusif sur MaketOu' }}
  2071.                                             </p>
  2072.                                             <div class="banner-price-modern">
  2073.                                                 <span class="price-label">Prix</span>
  2074.                                                 <span class="price-value">{{ product.price|number_format(2, '.', ' ') }}
  2075.                                                     HTG</span>
  2076.                                             </div>
  2077.                                             <div class="banner-actions-modern">
  2078.                                                 <a class="btn-banner-primary" href="{{ path('ui_product_show', {'slug': product.slug}) }}">
  2079.                                                     <span class="btn-text">Voir le produit</span>
  2080.                                                     <span class="btn-icon">
  2081.                                                         <i class="lnr lnr-arrow-right"></i>
  2082.                                                     </span>
  2083.                                                 </a>
  2084.                                                 {% if product.shop %}
  2085.                                                     <a class="btn-banner-secondary" href="{{ path('ui_shop_show', {'slug': product.shop.slug}) }}">
  2086.                                                         <i class="lnr lnr-store"></i>
  2087.                                                         <span>{{ product.shop.name }}</span>
  2088.                                                     </a>
  2089.                                                 {% endif %}
  2090.                                             </div>
  2091.                                         </div>
  2092.                                     </div>
  2093.                                     <div class="col-lg-8 col-md-6 col-12">
  2094.                                         <div class="banner-image-modern">
  2095.                                             <div class="banner-image-wrapper">
  2096.                                                 {% if product.images is defined and product.images|length > 0 %}
  2097.                                                     <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 }}">
  2098.                                                 {% else %}
  2099.                                                     <img class="banner-img" src="{{ asset('ui/img/product/p' ~ loop.index ~ '.jpg') }}" alt="{{ product.name }}">
  2100.                                                 {% endif %}
  2101.                                                 <div class="banner-image-overlay"></div>
  2102.                                             </div>
  2103.                                         </div>
  2104.                                     </div>
  2105.                                 </div>
  2106.                             </div>
  2107.                         </div>
  2108.                     {% endfor %}
  2109.                 </div>
  2110.             </div>
  2111.         </section>
  2112.     {% else %}
  2113.         <!-- Banner par défaut si pas de produits en vedette -->
  2114.         <section class="banner-area-modern">
  2115.             <div class="banner-carousel-wrapper">
  2116.                 <div class="container">
  2117.                     <div class="row align-items-center justify-content-center">
  2118.                         <div class="col-lg-8 text-center">
  2119.                             <div class="banner-content-modern" style="margin-top: 140px;">
  2120.                                 <h1 class="banner-title-modern">Bienvenue sur MaketOu</h1>
  2121.                                 <p class="banner-description-modern">Votre marketplace haïtienne</p>
  2122.                             </div>
  2123.                         </div>
  2124.                     </div>
  2125.                 </div>
  2126.             </div>
  2127.         </section>
  2128.     {% endif %}
  2129.     <!-- End banner Area -->
  2131.     <!-- Catégories de produits -->
  2132.     {% if categories|length > 0 %}
  2133.         <section class="py-5 home-section">
  2134.             <div class="container">
  2135.                 <div class="section-title">
  2136.                     <h2>Nos catégories</h2>
  2137.                     <p>Explorez nos différentes catégories de produits</p>
  2138.                 </div>
  2139.                 <div class="row" id="productCategoriesContainer">
  2140.                     {% for category in categories|slice(0, 8) %}
  2141.                         <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
  2142.                             <div class="category-card-custom d-flex flex-column h-100">
  2143.                                 <div class="category-image-wrapper">
  2144.                                     <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 %}')">
  2145.                                         <div class="category-overlay-custom">
  2146.                                             <div class="category-icon-wrapper">
  2147.                                                 <i class="lnr lnr-tag" style="font-size: 3rem;"></i>
  2148.                                                 <h4 class="mt-3">{{ category.name }}</h4>
  2149.                                             </div>
  2150.                                         </div>
  2151.                                     </div>
  2152.                                 </div>
  2153.                                 <div class="category-content p-3 d-flex flex-column flex-grow-1">
  2154.                                     <h5 class="mb-2">{{ category.name }}</h5>
  2155.                                     {% if category.description %}
  2156.                                         <p class="text-muted mb-3 small">{{ category.description|striptags|slice(0, 60) }}
  2157.                                             {% if category.description|striptags|length > 60 %}...
  2158.                                             {% endif %}
  2159.                                         </p>
  2160.                                     {% endif %}
  2161.                                     <a href="{{ path('ui_listing', {'category': category.slug}) }}" class="btn btn-primary-custom btn-sm w-100 mt-auto">
  2162.                                         Voir les produits
  2163.                                     </a>
  2164.                                 </div>
  2165.                             </div>
  2166.                         </div>
  2167.                     {% endfor %}
  2168.                 </div>
  2169.             </div>
  2170.         </section>
  2171.     {% endif %}
  2173.     <!-- Catégories de boutiques -->
  2174.     {% if shopCategories|length > 0 %}
  2175.         <section class="py-5 bg-light home-section home-section--alt">
  2176.             <div class="container">
  2177.                 <div class="section-title">
  2178.                     <h2>Nos catégories de boutiques</h2>
  2179.                     <p>Explorez les différentes catégories de boutiques disponibles sur MaketOu</p>
  2180.                 </div>
  2181.                 <div class="row" id="shopCategoriesContainer">
  2182.                     {% for shopCategory in shopCategories|slice(0, 6) %}
  2183.                         <div class="col-lg-4 col-md-6 mb-4">
  2184.                             <a href="{{ path('ui_shops_list') }}?category={{ shopCategory.slug }}" class="text-decoration-none h-100" style="display: block;">
  2185.                                 <div class="category-card-custom shop-category-clickable d-flex flex-column h-100">
  2186.                                     <div class="category-image-wrapper">
  2187.                                         <div class="category-image" style="background-image: url('{% if shopCategory.bannerImage %}{{ asset(shopCategory.bannerImage) }}{% else %}{{ asset('ui/img/category/shop-' ~ loop.index ~ '.jpg') }}{% endif %}')">
  2188.                                             <div class="category-overlay-custom">
  2189.                                                 <div class="category-icon-wrapper">
  2190.                                                     <i class="lnr lnr-store" style="font-size: 3rem;"></i>
  2191.                                                     <h4 class="mt-3">{{ shopCategory.name }}</h4>
  2192.                                                     {% if shopCategory.description %}
  2193.                                                         <p class="mt-2 px-3">{{ shopCategory.description|striptags|slice(0, 100) }}
  2194.                                                             {% if shopCategory.description|striptags|length > 100 %}...
  2195.                                                             {% endif %}
  2196.                                                         </p>
  2197.                                                     {% endif %}
  2198.                                                 </div>
  2199.                                             </div>
  2200.                                         </div>
  2201.                                     </div>
  2202.                                     <div class="category-content p-3 d-flex flex-column flex-grow-1">
  2203.                                         <h5 class="mb-2">{{ shopCategory.name }}</h5>
  2204.                                         {% if shopCategory.description %}
  2205.                                             <p class="text-muted mb-3 small">{{ shopCategory.description|striptags|slice(0, 80) }}
  2206.                                                 {% if shopCategory.description|striptags|length > 80 %}...
  2207.                                                 {% endif %}
  2208.                                             </p>
  2209.                                         {% endif %}
  2210.                                         <span class="btn btn-primary-custom btn-sm w-100 mt-auto">
  2211.                                             Voir les boutiques
  2212.                                             <i class="lnr lnr-arrow-right ms-2"></i>
  2213.                                         </span>
  2214.                                     </div>
  2215.                                 </div>
  2216.                             </a>
  2217.                         </div>
  2218.                     {% endfor %}
  2219.                 </div>
  2220.                 {% if shopCategories|length > 6 %}
  2221.                     <div class="text-center mt-4">
  2222.                         <button class="btn btn-outline-primary btn-lg" onclick="showAllShopCategories()">
  2223.                             <i class="lnr lnr-store me-2"></i>
  2224.                             Voir toutes les catégories de boutiques ({{ shopCategories|length }})
  2225.                         </button>
  2226.                     </div>
  2227.                 {% endif %}
  2228.             </div>
  2229.         </section>
  2230.     {% endif %}
  2232.     <!-- Produits en vedette -->
  2233.     {% if featuredProducts|length > 0 %}
  2234.         <section class="py-5 bg-light home-section">
  2235.             <div class="container">
  2236.                 <div class="section-title text-center mb-5">
  2237.                     <h2>Produits en vedette</h2>
  2238.                     <p>Découvrez nos produits les plus populaires et les mieux notés</p>
  2239.                 </div>
  2241.                 <div class="featured-gallery-wrapper">
  2242.                     <div class="featured-gallery-container">
  2243.                         <div class="featured-gallery-grid" id="featuredGalleryGrid">
  2244.                             {% for product in featuredProducts %}
  2245.                                 <div class="featured-gallery-item">
  2246.                                     {% include 'home/_single_product_card.html.twig' with {'product': product} %}
  2247.                                 </div>
  2248.                             {% endfor %}
  2249.                         </div>
  2250.                     </div>
  2252.                     <!-- Contrôles de navigation -->
  2253.                     <div class="featured-gallery-controls">
  2254.                         <button class="featured-gallery-nav-btn featured-gallery-prev" id="featuredGalleryPrev" aria-label="Précédent">
  2255.                             <i class="lnr lnr-chevron-left"></i>
  2256.                         </button>
  2257.                         <button class="featured-gallery-nav-btn featured-gallery-next" id="featuredGalleryNext" aria-label="Suivant">
  2258.                             <i class="lnr lnr-chevron-right"></i>
  2259.                         </button>
  2260.                     </div>
  2262.                     <!-- Bouton charger plus -->
  2263.                     <div class="featured-gallery-load-more text-center mt-4" id="featuredGalleryLoadMore" style="display: none;">
  2264.                         <button class="btn btn-outline-primary" id="loadMoreFeaturedBtn">
  2265.                             <i class="lnr lnr-plus-circle me-2"></i>
  2266.                             Charger plus de produits
  2267.                         </button>
  2268.                     </div>
  2269.                 </div>
  2271.                 <div class="text-center mt-5">
  2272.                     <a href="{{ path('ui_listing') }}" class="btn-view-all-products">
  2273.                         <span>Voir tous les produits</span>
  2274.                         <i class="lnr lnr-arrow-right"></i>
  2275.                     </a>
  2276.                 </div>
  2277.             </div>
  2278.         </section>
  2279.     {% endif %}
  2281.     <!-- Nouveautés -->
  2282.     {% if latestProducts|length > 0 %}
  2283.         <section class="py-5 home-section home-section--alt">
  2284.             <div class="container">
  2285.                 <div class="section-title text-center mb-5">
  2286.                     <h2>Nouveautés</h2>
  2287.                     <p>Les derniers produits ajoutés sur MaketOu</p>
  2288.                 </div>
  2290.                 <div class="featured-gallery-wrapper">
  2291.                     <div class="featured-gallery-container">
  2292.                         <div class="featured-gallery-grid" id="latestGalleryGrid">
  2293.                             {% for product in latestProducts %}
  2294.                                 <div class="featured-gallery-item">
  2295.                                     {% include 'home/_single_product_card.html.twig' with {'product': product} %}
  2296.                                 </div>
  2297.                             {% endfor %}
  2298.                         </div>
  2299.                     </div>
  2301.                     <!-- Contrôles de navigation -->
  2302.                     <div class="featured-gallery-controls">
  2303.                         <button class="featured-gallery-nav-btn featured-gallery-prev" id="latestGalleryPrev" aria-label="Précédent">
  2304.                             <i class="lnr lnr-chevron-left"></i>
  2305.                         </button>
  2306.                         <button class="featured-gallery-nav-btn featured-gallery-next" id="latestGalleryNext" aria-label="Suivant">
  2307.                             <i class="lnr lnr-chevron-right"></i>
  2308.                         </button>
  2309.                     </div>
  2311.                     <!-- Bouton charger plus -->
  2312.                     <div class="featured-gallery-load-more text-center mt-4" id="latestGalleryLoadMore" style="display: none;">
  2313.                         <button class="btn btn-outline-primary" id="loadMoreLatestBtn">
  2314.                             <i class="lnr lnr-plus-circle me-2"></i>
  2315.                             Charger plus de produits
  2316.                         </button>
  2317.                     </div>
  2318.                 </div>
  2320.                 <div class="text-center mt-5">
  2321.                     <a href="{{ path('ui_listing') }}" class="btn-view-all-products">
  2322.                         <span>Voir tous les produits</span>
  2323.                         <i class="lnr lnr-arrow-right"></i>
  2324.                     </a>
  2325.                 </div>
  2326.             </div>
  2327.         </section>
  2328.     {% endif %}
  2330.     {% if recommendedProducts|length > 0 %}
  2331.         <section class="py-5 bg-white home-section">
  2332.             <div class="container">
  2333.                 <div class="section-title text-center mb-5">
  2334.                     <h2>Recommandés pour vous</h2>
  2335.                     <p>Suggestions basées sur votre activité récente et les tendances de MaketOu</p>
  2336.                 </div>
  2337.                 <div class="row g-4">
  2338.                     {% for product in recommendedProducts %}
  2339.                         <div class="col-12 col-sm-6 col-lg-3">
  2340.                             <div class="product-card h-100">
  2341.                                 {% set productImage = product.images[0] ?? 'ui/img/product/p1.jpg' %}
  2342.                                 <div class="product-image" style="background-image:url('{{ asset(productImage) }}');">
  2343.                                     {% if product.isFeatured %}
  2344.                                         <span class="product-badge bg-success">Populaire</span>
  2345.                                     {% endif %}
  2346.                                 </div>
  2347.                                 <div class="p-3">
  2348.                                     <h6 class="mb-2">
  2349.                                         <a href="{{ path('ui_product_show', { slug: product.slug }) }}">{{ product.name }}</a>
  2350.                                     </h6>
  2351.                                     <p class="mb-2 text-muted small">
  2352.                                         <i class="lnr lnr-store"></i>
  2353.                                         {% if product.shop %}
  2354.                                             <a href="{{ path('ui_shop_show', {'slug': product.shop.slug}) }}">{{ product.shop.name }}</a>
  2355.                                         {% else %}
  2356.                                             Boutique non spécifiée
  2357.                                         {% endif %}
  2358.                                     </p>
  2359.                                     <div class="d-flex align-items-center justify-content-between">
  2360.                                         <span class="fw-bold text-primary">{{ product.price|number_format(2, '.', ' ') }} HTG</span>
  2361.                                         <a href="javascript:void(0)" class="btn btn-sm btn-outline-primary add-to-cart" data-product-id="{{ product.id }}" data-qty="1">
  2362.                                             <i class="ti ti-bag"></i>
  2363.                                         </a>
  2364.                                     </div>
  2365.                                 </div>
  2366.                             </div>
  2367.                         </div>
  2368.                     {% endfor %}
  2369.                 </div>
  2370.             </div>
  2371.         </section>
  2372.     {% endif %}
  2374.     {% if recentlyViewedProducts|length > 0 %}
  2375.         <section class="py-5 bg-light home-section home-section--alt">
  2376.             <div class="container">
  2377.                 <div class="section-title text-center mb-5">
  2378.                     <h2>Récemment consultés</h2>
  2379.                     <p>Retrouvez les articles que vous avez explorés dernièrement</p>
  2380.                 </div>
  2381.                 <div class="featured-gallery-wrapper">
  2382.                     <div class="featured-gallery-container">
  2383.                         <div class="featured-gallery-grid">
  2384.                             {% for product in recentlyViewedProducts %}
  2385.                                 <div class="featured-gallery-item">
  2386.                                     {% include 'home/_single_product_card.html.twig' with {'product': product} %}
  2387.                                 </div>
  2388.                             {% endfor %}
  2389.                         </div>
  2390.                     </div>
  2391.                 </div>
  2392.             </div>
  2393.         </section>
  2394.     {% endif %}
  2396.     <!-- Fonctionnalités -->
  2397.     <section class="py-5 bg-light home-section">
  2398.         <div class="container">
  2399.             <div class="section-title">
  2400.                 <h2>Pourquoi choisir MaketOu ?</h2>
  2401.                 <p>Découvrez les avantages de notre plateforme</p>
  2402.             </div>
  2403.             <div class="row">
  2404.                 <div class="col-lg-3 col-md-6 mb-4">
  2405.                     <div class="feature-card">
  2406.                         <div class="feature-icon">
  2407.                             <i class="lnr lnr-rocket"></i>
  2408.                         </div>
  2409.                         <h5>Livraison rapide</h5>
  2410.                         <p>Recevez vos commandes rapidement avec notre réseau de livraison optimisé</p>
  2411.                     </div>
  2412.                 </div>
  2413.                 <div class="col-lg-3 col-md-6 mb-4">
  2414.                     <div class="feature-card">
  2415.                         <div class="feature-icon">
  2416.                             <i class="lnr lnr-lock"></i>
  2417.                         </div>
  2418.                         <h5>Paiement sécurisé</h5>
  2419.                         <p>Vos transactions sont protégées avec les dernières technologies de sécurité</p>
  2420.                     </div>
  2421.                 </div>
  2422.                 <div class="col-lg-3 col-md-6 mb-4">
  2423.                     <div class="feature-card">
  2424.                         <div class="feature-icon">
  2425.                             <i class="lnr lnr-phone"></i>
  2426.                         </div>
  2427.                         <h5>Support 24/7</h5>
  2428.                         <p>Notre équipe est disponible pour vous aider à tout moment</p>
  2429.                     </div>
  2430.                 </div>
  2431.                 <div class="col-lg-3 col-md-6 mb-4">
  2432.                     <div class="feature-card">
  2433.                         <div class="feature-icon">
  2434.                             <i class="lnr lnr-undo"></i>
  2435.                         </div>
  2436.                         <h5>Retour facile</h5>
  2437.                         <p>Politique de retour flexible pour votre tranquillité d'esprit</p>
  2438.                     </div>
  2439.                 </div>
  2440.             </div>
  2441.         </div>
  2442.     </section>
  2444.     <!-- Newsletter -->
  2445.     <section class="newsletter-section-modern py-5 home-section home-section--alt">
  2446.         <div class="container">
  2447.             <div class="row justify-content-center">
  2448.                 <div class="col-lg-10">
  2449.                     <div class="newsletter-card">
  2450.                         <div class="row align-items-center">
  2451.                             <div class="col-lg-6 text-center text-lg-start mb-4 mb-lg-0">
  2452.                                 <div class="newsletter-icon mb-3">
  2453.                                     <i class="lnr lnr-envelope" style="font-size: 4rem; color: #ffa200;"></i>
  2454.                                 </div>
  2455.                                 <h2 class="newsletter-title mb-3">Restez informé des dernières nouveautés</h2>
  2456.                                 <p class="newsletter-description mb-0">
  2457.                                     Inscrivez-vous à notre newsletter pour recevoir les offres exclusives, 
  2458.                                                                                                                                                                                 les nouveaux produits et les meilleures promotions directement dans votre boîte mail.
  2459.                                 </p>
  2460.                             </div>
  2461.                             <div class="col-lg-6">
  2462.                                 <form class="newsletter-form-modern" id="newsletterFormHome">
  2463.                                     <div class="newsletter-input-wrapper">
  2464.                                         <input type="email" class="newsletter-input" placeholder="Votre adresse email" required name="email">
  2465.                                         <button class="newsletter-button" type="submit">
  2466.                                             <i class="lnr lnr-arrow-right me-2"></i>
  2467.                                             S'abonner
  2468.                                         </button>
  2469.                                     </div>
  2470.                                     <p class="newsletter-privacy mt-3 text-center">
  2471.                                         <small>
  2472.                                             <i class="lnr lnr-lock me-1"></i>
  2473.                                             Vos données sont sécurisées. Pas de spam, désinscription facile.
  2474.                                         </small>
  2475.                                     </p>
  2476.                                 </form>
  2477.                             </div>
  2478.                         </div>
  2479.                     </div>
  2480.                 </div>
  2481.             </div>
  2482.         </div>
  2483.     </section>
  2485.     <!-- Call to Action -->
  2486.     <section class="cta-section-modern py-5 home-section">
  2487.         <div class="container">
  2488.             <div class="cta-card">
  2489.                 <div class="row align-items-center">
  2490.                     <div class="col-lg-6 mb-4 mb-lg-0">
  2491.                         <div class="cta-content">
  2492.                             <span class="cta-badge">
  2493.                                 <i class="lnr lnr-rocket me-2"></i>
  2494.                                 Commencez dès aujourd'hui
  2495.                             </span>
  2496.                             <h2 class="cta-title mb-3">Prêt à commencer ?</h2>
  2497.                             <p class="cta-description mb-4">
  2498.                                 Que vous soyez
  2499.                                 <strong>acheteur</strong>
  2500.                                 ou
  2501.                                 <strong>vendeur</strong>, MaketOu vous offre la plateforme idéale 
  2502.                                                                                                                                                                             pour vos besoins commerciaux en Haïti. Rejoignez des milliers d'utilisateurs satisfaits !
  2503.                             </p>
  2504.                             <div class="cta-features mb-4">
  2505.                                 <div class="cta-feature-item">
  2506.                                     <i class="lnr lnr-checkmark-circle"></i>
  2507.                                     <span>Plateforme 100% sécurisée</span>
  2508.                                 </div>
  2509.                                 <div class="cta-feature-item">
  2510.                                     <i class="lnr lnr-checkmark-circle"></i>
  2511.                                     <span>Support client 24/7</span>
  2512.                                 </div>
  2513.                                 <div class="cta-feature-item">
  2514.                                     <i class="lnr lnr-checkmark-circle"></i>
  2515.                                     <span>Paiements multiples</span>
  2516.                                 </div>
  2517.                             </div>
  2518.                             <div class="cta-buttons">
  2519.                                 <button type="button" class="btn cta-button-primary" onclick="openReadyModal()">
  2520.                                     <i class="lnr lnr-rocket me-2"></i>
  2521.                                     Prêt à commencer ?
  2522.                                 </button>
  2523.                                 <a href="{{ path('ui_listing') }}" class="btn cta-button-secondary">
  2524.                                     <i class="lnr lnr-magnifier me-2"></i>
  2525.                                     Voir les produits
  2526.                                 </a>
  2527.                             </div>
  2528.                         </div>
  2529.                     </div>
  2530.                     <div class="col-lg-6">
  2531.                         <div class="cta-image-wrapper">
  2532.                             <div class="cta-decoration"></div>
  2533.                             <img src="{{ asset('Start.png') }}" alt="MaketOu" class="cta-image">
  2534.                         </div>
  2535.                     </div>
  2536.                 </div>
  2537.             </div>
  2538.         </div>
  2539.     </section>
  2540. {% endblock %}
  2542. {% block javascripts %}
  2543.     <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  2544.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  2545.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
  2546.     <script src="{{ asset('ui/js/product-unified.js') }}"></script>
  2547.     <script>
  2548.         window.openReadyModal = function () {
  2549.             const modalEl = document.getElementById('readyModal');
  2550.             if (!modalEl) {
  2551.                 console.error('readyModal introuvable');
  2552.                 return;
  2553.             }
  2554.             if (typeof bootstrap === 'undefined' || !bootstrap.Modal) {
  2555.                 console.error('Bootstrap Modal non chargé');
  2556.                 return;
  2557.             }
  2558.             const modalInstance = bootstrap.Modal.getOrCreateInstance(modalEl);
  2559.             modalInstance.show();
  2560.         };
  2561.     </script>
  2562.     <script>
  2563.         // Variables globales pour la navigation des images (si pas déjà définies)
  2564. if (typeof productImages === 'undefined') {
  2565. var productImages = {};
  2566. var currentImageIndex = {};
  2567. }
  2569. // Initialisation des données d'images pour les produits "Produits en vedette"
  2570. {% if featuredProducts is defined %}
  2571. {% for product in featuredProducts %}
  2572. {% if product.images is defined and product.images|length > 0 %}
  2573. productImages[{{ product.id }}] = [{% for img in product.images %}'{{ asset(img) }}'{% if not loop.last %},{% endif %}{% endfor %}];
  2574. currentImageIndex[{{ product.id }}] = 0;{% endif %}{% endfor %}{% endif %}
  2576. // Initialisation des données d'images pour les produits "Nouveautés"
  2577. {% if latestProducts is defined %}
  2578. {% for product in latestProducts %}
  2579. {% if product.images is defined and product.images|length > 0 %}
  2580. productImages[{{ product.id }}] = [{% for img in product.images %}'{{ asset(img) }}'{% if not loop.last %},{% endif %}{% endfor %}];
  2581. currentImageIndex[{{ product.id }}] = 0;{% endif %}{% endfor %}{% endif %}
  2583. console.log('SCRIPT LOADED - Featured Gallery');
  2584. (function () {
  2585.     'use strict';
  2587.     const SECTION_CONFIGS = [
  2588.         { grid: '#featuredGalleryGrid', prev: '#featuredGalleryPrev', next: '#featuredGalleryNext' },
  2589.         { grid: '#latestGalleryGrid', prev: '#latestGalleryPrev', next: '#latestGalleryNext' }
  2590.     ];
  2592.     function triggerRipple(button) {
  2593.         button.classList.remove('btn-ripple');
  2594.         void button.offsetWidth;
  2595.         button.classList.add('btn-ripple');
  2596.         setTimeout(() => button.classList.remove('btn-ripple'), 350);
  2597.     }
  2599.     function initSectionCarousel(config) {
  2600.         const $grid = $(config.grid);
  2601.         if (!$grid.length) {
  2602.             return;
  2603.         }
  2605.         if (typeof $.fn.owlCarousel !== 'function') {
  2606.             console.warn('OwlCarousel n\'est pas chargé pour', config.grid);
  2607.             return;
  2608.         }
  2610.         if (!$grid.hasClass('owl-carousel')) {
  2611.             $grid.addClass('owl-carousel');
  2612.         }
  2614.         if ($grid.hasClass('owl-loaded')) {
  2615.             return;
  2616.         }
  2618.         const owlInstance = $grid.owlCarousel({
  2619.             loop: true,
  2620.             margin: 30,
  2621.             autoplay: true,
  2622.             autoplayTimeout: 4800,
  2623.             autoplayHoverPause: true,
  2624.             smartSpeed: 650,
  2625.             nav: false,
  2626.             dots: false,
  2627.             responsive: {
  2628.                 0: { items: 1, margin: 15 },
  2629.                 576: { items: 1.2, margin: 18 },
  2630.                 768: { items: 2, margin: 20 },
  2631.                 992: { items: 3, margin: 25 },
  2632.                 1400: { items: 4, margin: 30 }
  2633.             }
  2634.         });
  2636.         const $prev = $(config.prev);
  2637.         const $next = $(config.next);
  2639.         if ($prev.length) {
  2640.             $prev.off('click.carouselNav').on('click.carouselNav', function (e) {
  2641.                 e.preventDefault();
  2642.                 owlInstance.trigger('prev.owl.carousel');
  2643.                 triggerRipple(this);
  2644.             });
  2645.         }
  2647.         if ($next.length) {
  2648.             $next.off('click.carouselNav').on('click.carouselNav', function (e) {
  2649.                 e.preventDefault();
  2650.                 owlInstance.trigger('next.owl.carousel');
  2651.                 triggerRipple(this);
  2652.             });
  2653.         }
  2654.     }
  2656.     function ensureOwl(attempt = 0) {
  2657.         if (window.jQuery && typeof $.fn !== 'undefined' && typeof $.fn.owlCarousel === 'function') {
  2658.             SECTION_CONFIGS.forEach(initSectionCarousel);
  2659.         } else if (attempt < 15) {
  2660.             setTimeout(() => ensureOwl(attempt + 1), 200);
  2661.         } else {
  2662.             console.warn('OwlCarousel non disponible après plusieurs tentatives');
  2663.         }
  2664.     }
  2666.     document.addEventListener('DOMContentLoaded', function () {
  2667.         ensureOwl();
  2668.     });
  2669. })();
  2671. document.addEventListener('DOMContentLoaded', function () { // Animation des cartes au scroll
  2672. const observerOptions = {
  2673. threshold: 0.1,
  2674. rootMargin: '0px 0px -50px 0px'
  2675. };
  2677. const observer = new IntersectionObserver(function (entries) {
  2678. entries.forEach(entry => {
  2679. if (entry.isIntersecting) {
  2680. entry.target.style.opacity = '1';
  2681. entry.target.style.transform = 'translateY(0)';
  2682. }
  2683. });
  2684. }, observerOptions);
  2686. // Observer toutes les cartes
  2687. document.querySelectorAll('.stats-card, .category-card, .product-card, .feature-card').forEach(card => {
  2688. card.style.opacity = '0';
  2689. card.style.transform = 'translateY(30px)';
  2690. card.style.transition = 'all 0.6s ease';
  2691. observer.observe(card);
  2692. });
  2694. // Compteur animé pour les statistiques
  2695. function animateCounter(element, target, duration = 2000) {
  2696. let start = 0;
  2697. const increment = target / (duration / 16);
  2699. function updateCounter() {
  2700. start += increment;
  2701. if (start < target) {
  2702. element.textContent = Math.floor(start).toLocaleString();
  2703. requestAnimationFrame(updateCounter);
  2704. } else {
  2705. element.textContent = target.toLocaleString();
  2706. }
  2707. }
  2709. updateCounter();
  2710. }
  2712. // Animer les compteurs quand ils sont visibles
  2713. const statsObserver = new IntersectionObserver(function (entries) {
  2714. entries.forEach(entry => {
  2715. if (entry.isIntersecting) {
  2716. const numberElement = entry.target.querySelector('.stats-number');
  2717. const target = parseInt(numberElement.textContent.replace(/,/g, ''));
  2718. animateCounter(numberElement, target);
  2719. statsObserver.unobserve(entry.target);
  2720. }
  2721. });
  2722. });
  2724. document.querySelectorAll('.stats-card').forEach(card => {
  2725. statsObserver.observe(card);
  2726. });
  2728. // Gestion de la newsletter
  2729. const newsletterForm = document.querySelector('.newsletter-form');
  2730. if (newsletterForm) {
  2731. newsletterForm.addEventListener('submit', function (e) {
  2732. e.preventDefault();
  2733. const email = this.querySelector('input[type="email"]').value;
  2734. const button = this.querySelector('button');
  2735. const originalText = button.innerHTML;
  2737. // Désactiver le bouton
  2738. button.disabled = true;
  2739. button.innerHTML = '<i class="lnr lnr-spinner me-2"></i>Inscription...';
  2741. // Envoyer la requête
  2742. fetch('{{ path("ui_newsletter_subscribe") }}', {
  2743. method: 'POST',
  2744. headers: {
  2745. 'Content-Type': 'application/x-www-form-urlencoded',
  2746. 'X-Requested-With': 'XMLHttpRequest'
  2747. },
  2748. body: 'email=' + encodeURIComponent(email)
  2749. }).then(response => response.json()).then(data => {
  2750. if (data.success) {
  2751. button.innerHTML = '<i class="lnr lnr-check me-2"></i>Inscription réussie !';
  2752. button.classList.remove('btn-warning');
  2753. button.classList.add('btn-success');
  2754. this.reset();
  2755. } else {
  2756. button.innerHTML = '<i class="lnr lnr-warning me-2"></i>Erreur';
  2757. button.classList.remove('btn-warning');
  2758. button.classList.add('btn-danger');
  2759. }
  2761. setTimeout(() => {
  2762. button.innerHTML = originalText;
  2763. button.classList.remove('btn-success', 'btn-danger');
  2764. button.classList.add('btn-warning');
  2765. button.disabled = false;
  2766. }, 3000);
  2767. }).catch(error => {
  2768. console.error('Erreur:', error);
  2769. button.innerHTML = '<i class="lnr lnr-warning me-2"></i>Erreur';
  2770. button.classList.remove('btn-warning');
  2771. button.classList.add('btn-danger');
  2773. setTimeout(() => {
  2774. button.innerHTML = originalText;
  2775. button.classList.remove('btn-danger');
  2776. button.classList.add('btn-warning');
  2777. button.disabled = false;
  2778. }, 3000);
  2779. });
  2780. });
  2781. }
  2782. });
  2784. // Effet parallaxe léger pour le hero
  2785. window.addEventListener('scroll', function () {
  2786. const scrolled = window.pageYOffset;
  2787. const hero = document.querySelector('.hero-banner');
  2788. if (hero) {
  2789. hero.style.transform = `translateY(${
  2790. scrolled * 0.5
  2791. }px)`;
  2792. }
  2793. });
  2794. });
  2796. // Fonction pour afficher toutes les catégories
  2797. function showAllCategories () {
  2798. const container = document.getElementById('productCategoriesContainer');
  2799. const btn = document.getElementById('showAllCategoriesBtn');{% if allCategories|length > 8 %}{% for category in allCategories %}{% if loop.index > 8 %}const categoryHtml {{ loop.index }} = `
  2800.         <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
  2801.             <div class="category-card-custom d-flex flex-column h-100">
  2802.                 <div class="category-image-wrapper">
  2803.                     <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 %}')">
  2804.                         <div class="category-overlay-custom">
  2805.                             <div class="category-icon-wrapper">
  2806.                                 <i class="lnr lnr-tag" style="font-size: 3rem;"></i>
  2807.                                 <h4 class="mt-3">{{ category.name }}</h4>
  2808.                             </div>
  2809.                         </div>
  2810.                     </div>
  2811.                 </div>
  2812.                 <div class="category-content p-3 d-flex flex-column flex-grow-1">
  2813.                     <h5 class="mb-2">{{ category.name }}</h5>
  2814.                     {% if category.description %}
  2815.                         <p class="text-muted mb-3 small">{{ category.description|striptags|slice(0, 60) }}{% if category.description|striptags|length > 60 %}...{% endif %}</p>
  2816.                     {% endif %}
  2817.                     <a href="{{ path('ui_listing', {'category': category.slug}) }}" class="btn btn-primary-custom btn-sm w-100 mt-auto">
  2818.                         Voir les produits
  2819.                     </a>
  2820.                 </div>
  2821.             </div>
  2822.         </div>
  2823.     `;
  2824. container.insertAdjacentHTML('beforeend', categoryHtml {{ loop.index }});{% endif %}{% endfor %}{% endif %}if (btn) 
  2825. btn.style.display = 'none';
  2829. }
  2831. // Fonction pour afficher toutes les catégories de boutiques
  2832. function showAllShopCategories () {
  2833. const container = document.getElementById('shopCategoriesContainer');
  2834. const btn = document.querySelector('[onclick="showAllShopCategories()"]') ?. parentElement;{% if allShopCategories|length > 6 %}{% for shopCategory in allShopCategories %}{% if loop.index > 6 %}const shopCategoryHtml {{ loop.index }} = `
  2835.         <div class="col-lg-4 col-md-6 mb-4">
  2836.             <a href="{{ path('ui_shops_list') }}?category={{ shopCategory.slug }}" class="text-decoration-none h-100" style="display: block;">
  2837.                 <div class="category-card-custom shop-category-clickable d-flex flex-column h-100">
  2838.                     <div class="category-image-wrapper">
  2839.                         <div class="category-image" style="background-image: url('{% if shopCategory.bannerImage %}{{ asset(shopCategory.bannerImage) }}{% else %}{{ asset('ui/img/category/shop-' ~ loop.index ~ '.jpg') }}{% endif %}')">
  2840.                             <div class="category-overlay-custom">
  2841.                                 <div class="category-icon-wrapper">
  2842.                                     <i class="lnr lnr-store" style="font-size: 3rem;"></i>
  2843.                                     <h4 class="mt-3">{{ shopCategory.name }}</h4>
  2844.                                     {% if shopCategory.description %}
  2845.                                         <p class="mt-2 px-3">{{ shopCategory.description|striptags|slice(0, 100) }}{% if shopCategory.description|striptags|length > 100 %}...{% endif %}</p>
  2846.                                     {% endif %}
  2847.                                 </div>
  2848.                             </div>
  2849.                         </div>
  2850.                     </div>
  2851.                     <div class="category-content p-3 d-flex flex-column flex-grow-1">
  2852.                         <h5 class="mb-2">{{ shopCategory.name }}</h5>
  2853.                         {% if shopCategory.description %}
  2854.                             <p class="text-muted mb-3 small">{{ shopCategory.description|striptags|slice(0, 80) }}{% if shopCategory.description|striptags|length > 80 %}...{% endif %}</p>
  2855.                         {% endif %}
  2856.                         <span class="btn btn-primary-custom btn-sm w-100 mt-auto">
  2857.                             Voir les boutiques <i class="lnr lnr-arrow-right ms-2"></i>
  2858.                         </span>
  2859.                     </div>
  2860.                 </div>
  2861.             </a>
  2862.         </div>
  2863.     `;
  2864. container.insertAdjacentHTML('beforeend', shopCategoryHtml {{ loop.index }});{% endif %}{% endfor %}{% endif %}if (btn) 
  2865. btn.style.display = 'none';
  2869. }
  2871. // Initialiser les carousels
  2872. $(document).ready(function () { // Carousel bannière principale
  2873. if ($('.active-banner-slider').length) {
  2874. $('.active-banner-slider').owlCarousel({
  2875. items: 1,
  2876. loop: true,
  2877. autoplay: true,
  2878. autoplayTimeout: 6000,
  2879. autoplayHoverPause: true,
  2880. nav: true,
  2881. dots: true,
  2882. navText: [
  2883. '<i class="lnr lnr-chevron-left"></i>', '<i class="lnr lnr-chevron-right"></i>'
  2884. ],
  2885. smartSpeed: 1000,
  2886. animateOut: 'fadeOut',
  2887. animateIn: 'fadeIn',
  2888. responsive: {
  2889. 0: {
  2890. items: 1,
  2891. nav: true,
  2892. dots: true
  2893. },
  2894. 768: {
  2895. items: 1,
  2896. nav: true,
  2897. dots: true
  2898. },
  2899. 992: {
  2900. items: 1,
  2901. nav: true,
  2902. dots: true
  2903. }
  2904. }
  2905. });
  2906. }
  2908. // Animation d'apparition pour les cartes produits
  2909. const observerOptions = {
  2910. threshold: 0.1,
  2911. rootMargin: '0px 0px -50px 0px'
  2912. };
  2914. const productObserver = new IntersectionObserver(function (entries) {
  2915. entries.forEach(entry => {
  2916. if (entry.isIntersecting) {
  2917. entry.target.style.opacity = '1';
  2918. entry.target.style.transform = 'translateY(0)';
  2919. }
  2920. });
  2921. }, observerOptions);
  2923. document.querySelectorAll('.product-card-modern').forEach((card, index) => {
  2924. card.style.opacity = '0';
  2925. card.style.transform = 'translateY(20px)';
  2926. card.style.transition = `opacity 0.6s ease ${
  2927. index * 0.1
  2928. }s, transform 0.6s ease ${
  2929. index * 0.1
  2930. }s`;
  2931. productObserver.observe(card);
  2932. });
  2933. });
  2934.     </script>
  2936.     <!-- Modal "Prêt à commencer ?" -->
  2937.     <div class="modal fade" id="readyModal" tabindex="-1">
  2938.         <div class="modal-dialog modal-dialog-centered">
  2939.             <div class="modal-content">
  2940.                 <div class="modal-header">
  2941.                     <h5 class="modal-title">
  2942.                         <i class="lnr lnr-rocket me-2"></i>Prêt à commencer ?
  2943.                     </h5>
  2944.                     <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
  2945.                 </div>
  2946.                 <div class="modal-body">
  2947.                     {% if app.user %}
  2948.                         {% if app.user.kycStatus == 'approved' %}
  2949.                             <div class="text-center">
  2950.                                 <i class="lnr lnr-checkmark-circle" style="font-size: 4rem; color: #28a745;"></i>
  2951.                                 <h4 class="mt-3">Votre compte est vérifié !</h4>
  2952.                                 <p class="text-muted">Vous pouvez commencer à utiliser MaketOu en toute sérénité.</p>
  2953.                                 <div class="mt-4">
  2954.                                     <a href="{{ path('seller_index') }}" class="btn btn-primary me-2">
  2955.                                         <i class="lnr lnr-store me-1"></i>Ouvrir ma boutique
  2956.                                     </a>
  2957.                                     <a href="{{ path('ui_listing') }}" class="btn btn-outline-primary">
  2958.                                         <i class="lnr lnr-magnifier me-1"></i>Voir les produits
  2959.                                     </a>
  2960.                                 </div>
  2961.                             </div>
  2962.                         {% else %}
  2963.                             <div class="text-center">
  2964.                                 <i class="lnr lnr-shield" style="font-size: 4rem; color: #ffa200;"></i>
  2965.                                 <h4 class="mt-3">Vérification requise</h4>
  2966.                                 <p class="text-muted">Pour utiliser toutes les fonctionnalités de MaketOu, vous devez compléter votre vérification KYC.</p>
  2967.                                 <div class="mt-4">
  2968.                                     <a href="{{ path('ui_account_kyc') }}" class="btn btn-primary btn-lg">
  2969.                                         <i class="lnr lnr-checkmark-circle me-1"></i> <span class="d-none d-md-inline">Commencer la vérification</span>
  2970.                                     </a>
  2971.                                 </div>
  2972.                             </div>
  2973.                         {% endif %}
  2974.                     {% else %}
  2975.                         <div class="text-center">
  2976.                             <i class="lnr lnr-user" style="font-size: 4rem; color: #007bff;"></i>
  2977.                             <h4 class="mt-3">Connectez-vous pour commencer</h4>
  2978.                             <p class="text-muted">Créez un compte ou connectez-vous pour accéder à toutes les fonctionnalités de MaketOu.</p>
  2979.                             <div class="mt-4">
  2980.                                 <a href="{{ path('ui_app_login') }}" class="btn btn-primary btn-lg me-2">
  2981.                                     <i class="lnr lnr-enter me-1"></i>Se connecter
  2982.                                 </a>
  2983.                                 <a href="{{ path('ui_app_register') }}" class="btn btn-outline-primary btn-lg">
  2984.                                     <i class="lnr lnr-user-plus me-1"></i>S'inscrire
  2985.                                 </a>
  2986.                             </div>
  2987.                         </div>
  2988.                     {% endif %}
  2989.                 </div>
  2990.             </div>
  2991.         </div>
  2992.     </div>
  2993. {% endblock %}