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.         /* Styles pour les catégories personnalisées */
  243.         .category-card-custom {
  244.             background: white;
  245.             border-radius: 15px;
  246.             overflow: hidden;
  247.             box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  248.             transition: all 0.3s ease;
  249.             height: 100%;
  250.             display: flex;
  251.             flex-direction: column;
  252.         }
  254.         .category-card-custom:hover {
  255.             transform: translateY(-5px);
  256.             box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  257.         }
  259.         .category-image-wrapper {
  260.             position: relative;
  261.             overflow: hidden;
  262.         }
  264.         .category-image {
  265.             height: 200px;
  266.             background-size: cover;
  267.             background-position: center;
  268.             position: relative;
  269.             transition: transform 0.5s ease;
  270.         }
  272.         .category-card-custom:hover .category-image {
  273.             transform: scale(1.1);
  274.         }
  276.         .category-overlay-custom {
  277.             position: absolute;
  278.             top: 0;
  279.             left: 0;
  280.             right: 0;
  281.             bottom: 0;
  282.             background: rgba(0, 0, 0, 0.5);
  283.             display: flex;
  284.             align-items: center;
  285.             justify-content: center;
  286.             opacity: 0;
  287.             transition: opacity 0.3s ease;
  288.         }
  290.         .category-card-custom:hover .category-overlay-custom {
  291.             opacity: 1;
  292.         }
  294.         .category-icon-wrapper {
  295.             text-align: center;
  296.             color: white;
  297.             transform: translateY(20px);
  298.             transition: transform 0.3s ease;
  299.         }
  301.         .category-card-custom:hover .category-icon-wrapper {
  302.             transform: translateY(0);
  303.         }
  305.         .category-content {
  306.             flex-grow: 1;
  307.             display: flex;
  308.             flex-direction: column;
  309.         }
  311.         .category-content .btn {
  312.             margin-top: auto;
  313.         }
  315.         /* Responsive Styles */
  316.         @media(max-width: 991.98px) {
  317.             .hero-banner {
  318.                 padding: 60px 0;
  319.             }
  321.             .stats-number {
  322.                 font-size: 2.5rem;
  323.             }
  325.             .section-title h2 {
  326.                 font-size: 2rem;
  327.             }
  328.             
  329.             .stats-card {
  330.                 margin-bottom: 1.5rem;
  331.             }
  332.         }
  334.         @media(max-width: 767.98px) {
  335.             .hero-banner {
  336.                 padding: 40px 0;
  337.             }
  339.             .hero-content h1 {
  340.                 font-size: 1.75rem;
  341.             }
  343.             .stats-number {
  344.                 font-size: 2rem;
  345.             }
  347.             .stats-label {
  348.                 font-size: 0.9rem;
  349.             }
  351.             .section-title h2 {
  352.                 font-size: 1.75rem;
  353.             }
  355.             .section-title p {
  356.                 font-size: 1rem;
  357.             }
  358.             
  359.             .category-card,
  360.             .product-card {
  361.                 margin-bottom: 1.5rem;
  362.             }
  363.             
  364.             .category-image {
  365.                 height: 150px;
  366.             }
  367.             
  368.             .product-image {
  369.                 height: 200px;
  370.             }
  371.             
  372.             .feature-card {
  373.                 margin-bottom: 1.5rem;
  374.             }
  375.             
  376.             .newsletter-section {
  377.                 padding: 40px 0;
  378.             }
  379.         }
  381.         @media(max-width: 575.98px) {
  382.             .hero-banner {
  383.                 padding: 30px 0;
  384.             }
  386.             .hero-content h1 {
  387.                 font-size: 1.5rem;
  388.             }
  390.             .stats-card {
  391.                 padding: 1.5rem;
  392.             }
  394.             .stats-number {
  395.                 font-size: 1.75rem;
  396.             }
  398.             .section-title h2 {
  399.                 font-size: 1.5rem;
  400.             }
  401.             
  402.             .category-image {
  403.                 height: 120px;
  404.             }
  405.             
  406.             .product-image {
  407.                 height: 180px;
  408.             }
  409.             
  410.             .product-info {
  411.                 padding: 1rem;
  412.             }
  413.             
  414.             .product-title {
  415.                 font-size: 1rem;
  416.             }
  417.             
  418.             .product-price {
  419.                 font-size: 1.25rem;
  420.             }
  421.         }
  423.         /* Styles modernes pour le carousel de bannière */
  424.         .banner-area-modern {
  425.             position: relative;
  426.             width: 100%;
  427.             min-height: 500px;
  428.             background: url('{{ asset('ui/img/banner/banner-bg.jpg') }}') center center no-repeat;
  429.             background-size: cover;
  430.             overflow: hidden;
  431.             padding: 60px 0;
  432.         }
  434.         .banner-area-modern::before {
  435.             content: '';
  436.             position: absolute;
  437.             top: 0;
  438.             left: 0;
  439.             width: 100%;
  440.             height: 100%;
  441.             background: rgba(0, 0, 0, 0.1);
  442.             z-index: 1;
  443.         }
  445.         .banner-carousel-wrapper {
  446.             position: relative;
  447.             width: 100%;
  448.             height: 100%;
  449.             z-index: 2;
  450.         }
  452.         .banner-slide-item {
  453.             min-height: 500px;
  454.             display: flex;
  455.             align-items: center;
  456.             padding: 40px 0;
  457.         }
  459.         .banner-content-modern {
  460.             position: relative;
  461.             z-index: 2;
  462.             padding: 30px;
  463.             background: rgba(255, 255, 255, 0.98);
  464.             border-radius: 20px;
  465.             box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  466.             backdrop-filter: blur(10px);
  467.             animation: fadeInUp 0.8s ease;
  468.         }
  470.         @keyframes fadeInUp {
  471.             from {
  472.                 opacity: 0;
  473.                 transform: translateY(30px);
  474.             }
  475.             to {
  476.                 opacity: 1;
  477.                 transform: translateY(0);
  478.             }
  479.         }
  481.         .banner-badge {
  482.             display: inline-block;
  483.             background: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  484.             color: white;
  485.             padding: 8px 20px;
  486.             border-radius: 50px;
  487.             font-size: 0.85rem;
  488.             font-weight: 600;
  489.             margin-bottom: 20px;
  490.             box-shadow: 0 4px 15px rgba(255, 162, 0, 0.4);
  491.         }
  493.         .banner-badge i {
  494.             margin-right: 5px;
  495.         }
  497.         .banner-title-modern {
  498.             font-size: 2.0rem;
  499.             font-weight: 600;
  500.             color: #2c3e50;
  501.             margin-bottom: 20px;
  502.             line-height: 1.2;
  503.             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  504.             -webkit-background-clip: text;
  505.             -webkit-text-fill-color: transparent;
  506.             background-clip: text;
  507.         }
  509.         .banner-description-modern {
  510.             font-size: 1.1rem;
  511.             color: #555;
  512.             line-height: 1.8;
  513.             margin-bottom: 25px;
  514.         }
  516.         .banner-price-modern {
  517.             display: flex;
  518.             align-items: center;
  519.             gap: 15px;
  520.             margin-bottom: 30px;
  521.             padding: 15px 20px;
  522.             background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  523.             border-radius: 12px;
  524.             border-left: 4px solid #ffa200;
  525.         }
  527.         .banner-price-modern .price-label {
  528.             font-size: 0.9rem;
  529.             color: #666;
  530.             font-weight: 600;
  531.             text-transform: uppercase;
  532.             letter-spacing: 1px;
  533.         }
  535.         .banner-price-modern .price-value {
  536.             font-size: 1.2rem;
  537.             font-weight: 600;
  538.             color: #ffa200;
  539.         }
  541.         .banner-actions-modern {
  542.             display: flex;
  543.             gap: 15px;
  544.             flex-wrap: wrap;
  545.         }
  547.         .btn-banner-primary {
  548.             display: inline-flex;
  549.             align-items: center;
  550.             gap: 10px;
  551.             padding: 15px 35px;
  552.             background: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  553.             color: white;
  554.             text-decoration: none;
  555.             border-radius: 50px;
  556.             font-weight: 600;
  557.             font-size: 1rem;
  558.             transition: all 0.3s ease;
  559.             box-shadow: 0 4px 15px rgba(255, 162, 0, 0.4);
  560.         }
  562.         .btn-banner-primary:hover {
  563.             transform: translateY(-3px);
  564.             box-shadow: 0 8px 25px rgba(255, 162, 0, 0.6);
  565.             color: white;
  566.         }
  568.         .btn-banner-primary .btn-icon {
  569.             transition: transform 0.3s ease;
  570.         }
  572.         .btn-banner-primary:hover .btn-icon {
  573.             transform: translateX(5px);
  574.         }
  576.         .btn-banner-secondary {
  577.             display: inline-flex;
  578.             align-items: center;
  579.             gap: 8px;
  580.             padding: 15px 25px;
  581.             background: white;
  582.             color: #667eea;
  583.             text-decoration: none;
  584.             border-radius: 50px;
  585.             font-weight: 600;
  586.             font-size: 0.95rem;
  587.             border: 2px solid #667eea;
  588.             transition: all 0.3s ease;
  589.         }
  591.         .btn-banner-secondary:hover {
  592.             background: #667eea;
  593.             color: white;
  594.             transform: translateY(-3px);
  595.             box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  596.         }
  598.         .banner-image-modern {
  599.             position: relative;
  600.             height: 450px;
  601.             display: flex;
  602.             align-items: center;
  603.             justify-content: center;
  604.         }
  606.         .banner-image-wrapper {
  607.             position: relative;
  608.             width: 100%;
  609.             height: 100%;
  610.             border-radius: 20px;
  611.             overflow: hidden;
  612.             box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  613.             background: white;
  614.             padding: 20px;
  615.         }
  617.         .banner-img {
  618.             width: 100%;
  619.             height: 100%;
  620.             object-fit: contain;
  621.             border-radius: 15px;
  622.             transition: transform 0.5s ease;
  623.         }
  625.         .banner-slide-item:hover .banner-img {
  626.             transform: scale(1.05);
  627.         }
  629.         .banner-image-overlay {
  630.             position: absolute;
  631.             top: 0;
  632.             left: 0;
  633.             width: 100%;
  634.             height: 100%;
  635.             background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  636.             border-radius: 15px;
  637.             pointer-events: none;
  638.         }
  640.         /* Styles pour Owl Carousel */
  641.         .banner-area-modern .owl-nav {
  642.             position: absolute;
  643.             top: 50%;
  644.             transform: translateY(-50%);
  645.             width: 100%;
  646.             display: flex;
  647.             justify-content: space-between;
  648.             align-items: center;
  649.             padding: 0 20px;
  650.             pointer-events: none;
  651.             z-index: 10;
  652.             left: 0;
  653.             right: 0;
  654.             box-sizing: border-box;
  655.         }
  657.         .banner-area-modern .owl-nav button {
  658.             width: 60px;
  659.             height: 60px;
  660.             min-width: 60px;
  661.             min-height: 60px;
  662.             background: #ffa200 !important;
  663.             border-radius: 50% !important;
  664.             display: flex !important;
  665.             align-items: center;
  666.             justify-content: center;
  667.             color: white !important;
  668.             font-size: 24px !important;
  669.             box-shadow: 0 4px 15px rgba(255, 162, 0, 0.4);
  670.             transition: all 0.3s ease;
  671.             pointer-events: all;
  672.             border: none !important;
  673.             position: relative;
  674.             flex-shrink: 0;
  675.             margin: 0;
  676.             padding: 0;
  677.             line-height: 1;
  678.         }
  680.         .banner-area-modern .owl-nav button.owl-prev {
  681.             margin-right: auto;
  682.         }
  684.         .banner-area-modern .owl-nav button.owl-next {
  685.             margin-left: auto;
  686.         }
  688.         .banner-area-modern .owl-nav button:hover {
  689.             background: #ff6b00 !important;
  690.             color: white !important;
  691.             transform: scale(1.1);
  692.             box-shadow: 0 6px 20px rgba(255, 162, 0, 0.6);
  693.         }
  695.         .banner-area-modern .owl-nav button.disabled {
  696.             opacity: 0.5;
  697.             cursor: not-allowed;
  698.         }
  700.         .banner-area-modern .owl-nav button.disabled:hover {
  701.             transform: scale(1);
  702.         }
  704.         .banner-area-modern .owl-dots {
  705.             position: absolute;
  706.             bottom: 30px;
  707.             left: 50%;
  708.             transform: translateX(-50%);
  709.             display: flex;
  710.             gap: 10px;
  711.             z-index: 10;
  712.         }
  714.         .banner-area-modern .owl-dots button {
  715.             width: 12px;
  716.             height: 12px;
  717.             border-radius: 50%;
  718.             background: rgba(255, 255, 255, 0.6) !important;
  719.             border: 2px solid white !important;
  720.             transition: all 0.3s ease;
  721.             margin: 0 5px;
  722.         }
  724.         .banner-area-modern .owl-dots button.active {
  725.             background: #ffa200 !important;
  726.             border-color: #ffa200 !important;
  727.             width: 30px;
  728.             border-radius: 6px;
  729.         }
  731.         /* Responsive */
  732.         @media(max-width: 992px) {
  733.             .banner-area-modern {
  734.                 min-height: 450px;
  735.                 padding: 40px 0;
  736.                 background-size: cover;
  737.                 background-position: center;
  738.             }
  740.             .banner-slide-item {
  741.                 min-height: 450px;
  742.                 padding: 30px 0;
  743.             }
  745.             .banner-title-modern {
  746.                 font-size: 1.5rem;
  747.             }
  749.             .banner-description-modern {
  750.                 font-size: 1rem;
  751.             }
  753.             .banner-image-modern {
  754.                 height: 350px;
  755.                 margin-top: 30px;
  756.             }
  758.             .banner-content-modern {
  759.                 padding: 25px;
  760.             }
  761.         }
  763.         @media(max-width: 768px) {
  764.             .banner-area-modern {
  765.                 min-height: 400px;
  766.                 padding: 30px 0;
  767.                 background-size: cover;
  768.                 background-position: center;
  769.             }
  771.             .banner-slide-item {
  772.                 min-height: 400px;
  773.                 padding: 20px 0;
  774.             }
  776.             .banner-title-modern {
  777.                 font-size: 1.25rem;
  778.             }
  780.             .banner-description-modern {
  781.                 font-size: 0.95rem;
  782.             }
  784.             .banner-image-modern {
  785.                 height: 280px;
  786.                 margin-top: 20px;
  787.             }
  789.             .banner-content-modern {
  790.                 padding: 20px;
  791.             }
  793.             .banner-price-modern .price-value {
  794.                 font-size: 1.25rem;
  795.             }
  797.             .banner-actions-modern {
  798.                 flex-direction: column;
  799.             }
  801.             .btn-banner-primary,
  802.             .btn-banner-secondary {
  803.                 width: 100%;
  804.                 justify-content: center;
  805.             }
  807.             .banner-area-modern .owl-nav button {
  808.                 width: 50px;
  809.                 height: 50px;
  810.                 min-width: 50px;
  811.                 min-height: 50px;
  812.                 font-size: 20px !important;
  813.                 background: #ffa200 !important;
  814.             }
  816.             .banner-area-modern .owl-nav button:hover {
  817.                 background: #ff6b00 !important;
  818.             }
  819.         }
  821.         @media(max-width: 576px) {
  822.             .banner-area-modern {
  823.                 min-height: 350px;
  824.                 padding: 0;
  825.                 background-size: cover;
  826.                 background-position: center;
  827.             }
  829.             .banner-slide-item {
  830.                 min-height: 350px;
  831.             }
  833.             .banner-title-modern {
  834.                 font-size: 1.25rem;
  835.             }
  837.             .banner-image-modern {
  838.                 height: 220px;
  839.             }
  841.             .banner-content-modern {
  842.                 padding: 15px;
  843.             }
  844.         }
  846.         /* Styles pour les catégories de boutiques cliquables */
  847.         .shop-category-clickable {
  848.             cursor: pointer;
  849.             transition: all 0.3s ease;
  850.             height: 100%;
  851.         }
  852.         .shop-category-clickable:hover {
  853.             transform: translateY(-10px);
  854.             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  855.         }
  856.         .shop-category-clickable:hover .category-image {
  857.             transform: scale(1.1);
  858.         }
  859.         .shop-category-clickable:hover .btn-primary-custom {
  860.             background: #e8910a;
  861.             transform: translateX(5px);
  862.         }
  864.         /* Styles pour les cartes de catégories personnalisées */
  865.         .category-card-custom {
  866.             border-radius: 15px;
  867.             overflow: hidden;
  868.             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  869.             transition: transform 0.3s ease, box-shadow 0.3s ease;
  870.             background: white;
  871.             height: 100%;
  872.         }
  873.         .category-card-custom:hover {
  874.             transform: translateY(-10px);
  875.             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  876.         }
  877.         .category-image-wrapper {
  878.             position: relative;
  879.             height: 200px;
  880.             overflow: hidden;
  881.         }
  882.         .category-image {
  883.             width: 100%;
  884.             height: 100%;
  885.             background-size: cover;
  886.             background-position: center;
  887.             transition: transform 0.3s ease;
  888.         }
  889.         .category-card-custom:hover .category-image {
  890.             transform: scale(1.1);
  891.         }
  892.         .category-overlay-custom {
  893.             position: absolute;
  894.             top: 0;
  895.             left: 0;
  896.             width: 100%;
  897.             height: 100%;
  898.             background: rgba(0, 0, 0, 0.6);
  899.             display: flex;
  900.             align-items: center;
  901.             justify-content: center;
  902.             opacity: 0;
  903.             transition: opacity 0.3s ease;
  904.             color: white;
  905.         }
  906.         .category-card-custom:hover .category-overlay-custom {
  907.             opacity: 1;
  908.         }
  909.         .category-icon-wrapper {
  910.             text-align: center;
  911.         }
  912.         .category-icon-wrapper i {
  913.             color: #ffa200;
  914.             display: block;
  915.         }
  916.         .category-icon-wrapper h4 {
  917.             color: white;
  918.             margin-top: 10px;
  919.         }
  921.         /* Styles pour la galerie de produits en vedette */
  922.         .featured-products-carousel-section {
  923.             position: relative;
  924.             overflow: hidden;
  925.         }
  927.         .featured-gallery-wrapper {
  928.             position: relative;
  929.             max-width: 1400px;
  930.             margin: 0 auto;
  931.             padding: 0 15px;
  932.         }
  934.         .featured-gallery-container {
  935.             position: relative;
  936.             overflow: visible;
  937.             border-radius: 12px;
  938.         }
  940.         .featured-gallery-grid {
  941.             display: flex;
  942.             gap: 30px;
  943.             padding: 15px 0;
  944.             overflow-x: auto;
  945.             overflow-y: hidden;
  946.             scroll-behavior: smooth;
  947.             scroll-behavior: smooth;
  948.             scrollbar-width: none; /* Firefox */
  949.             -ms-overflow-style: none; /* IE/Edge */
  950.             -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
  951.             will-change: scroll-position;
  952.         }
  954.         .featured-gallery-grid::-webkit-scrollbar {
  955.             display: none; /* Chrome/Safari */
  956.         }
  958.         /* Mode OwlCarousel */
  959.         .featured-gallery-grid.owl-carousel {
  960.             display: block;
  961.             overflow: hidden;
  962.             padding: 25px 0;
  963.         }
  965.         .featured-gallery-grid.owl-carousel .owl-stage-outer {
  966.             overflow: visible;
  967.         }
  969.         .featured-gallery-grid.owl-carousel .featured-gallery-item {
  970.             opacity: 1;
  971.             transform: none;
  972.             width: auto;
  973.             max-width: none;
  974.             margin: 0 15px;
  975.         }
  977.         .featured-gallery-grid.owl-carousel .owl-stage {
  978.             display: flex;
  979.         }
  981.         .featured-gallery-item {
  982.             flex: 0 0 auto; /* Largeur automatique basée sur le contenu */
  983.             width: 100%;
  984.             max-width: 100%;
  985.             opacity: 0;
  986.             transform: translateY(20px) scale(0.95);
  987.             animation: galleryItemFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  988.             animation-delay: calc(var(--item-index, 0) * 0.05s);
  989.         }
  991.         /* Produits plus larges et esthétiques - 3 par ligne sur grands écrans */
  992.         @media(min-width: 1200px) {
  993.             .featured-gallery-item {
  994.                 flex: 0 0 calc(33.333333% - 20px);
  995.                 max-width: calc(33.333333% - 20px);
  996.             }
  997.         }
  999.         @media(min-width: 992px) and (max-width: 1199px) {
  1000.             .featured-gallery-item {
  1001.                 flex: 0 0 calc(33.333333% - 20px);
  1002.                 max-width: calc(33.333333% - 20px);
  1003.             }
  1004.         }
  1006.         @media(min-width: 768px) and (max-width: 991px) {
  1007.             .featured-gallery-item {
  1008.                 flex: 0 0 calc(50% - 15px);
  1009.                 max-width: calc(50% - 15px);
  1010.             }
  1011.         }
  1013.         @media(max-width: 767px) {
  1014.             .featured-gallery-item {
  1015.                 flex: 0 0 100%;
  1016.                 max-width: 100%;
  1017.             }
  1018.         }
  1020.         /* Design amélioré pour single-product - plus large et esthétique */
  1021.         .featured-gallery-item .single-product {
  1022.             margin-bottom: 0;
  1023.             min-height: 520px;
  1024.             display: flex;
  1025.             flex-direction: column;
  1026.             padding: 25px;
  1027.             background: #fff;
  1028.             border-radius: 16px;
  1029.             box-shadow: 0 8px 25px rgba(15, 34, 58, 0.1);
  1030.             transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  1031.             border: 1px solid rgba(0, 0, 0, 0.05);
  1032.             position: relative;
  1033.             overflow: hidden;
  1034.         }
  1036.         .featured-gallery-item .single-product::before {
  1037.             content: '';
  1038.             position: absolute;
  1039.             top: 0;
  1040.             left: 0;
  1041.             right: 0;
  1042.             height: 4px;
  1043.             background: linear-gradient(90deg, #ffa200 0%, #ff6b00 100%);
  1044.             transform: scaleX(0);
  1045.             transform-origin: left;
  1046.             transition: transform 0.4s ease;
  1047.         }
  1049.         .featured-gallery-item .single-product:hover {
  1050.             transform: translateY(-8px);
  1051.             box-shadow: 0 20px 50px rgba(15, 34, 58, 0.15);
  1052.             border-color: rgba(255, 162, 0, 0.3);
  1053.         }
  1055.         .featured-gallery-item .single-product:hover::before {
  1056.             transform: scaleX(1);
  1057.         }
  1059.         /* S'assurer que les images s'affichent correctement - styles identiques à listing.html.twig */
  1060.         .featured-gallery-item .single-product img {
  1061.             margin-bottom: 20px;
  1062.             width: 100%;
  1063.         }
  1065.         /* Styles améliorés pour product-image-container - plus large et esthétique */
  1066.         .featured-gallery-item .product-image-container {
  1067.             position: relative;
  1068.             overflow: hidden;
  1069.             border-radius: 14px;
  1070.             height: 320px;
  1071.             display: flex;
  1072.             align-items: center;
  1073.             justify-content: center;
  1074.             background: linear-gradient(135deg, #f7f7fb 0%, #e8ecf1 100%);
  1075.             margin-bottom: 22px;
  1076.             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  1077.         }
  1079.         .featured-gallery-item .product-image-container:hover {
  1080.             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  1081.         }
  1083.         .featured-gallery-item .product-image-container:hover .main-product-img {
  1084.             transform: scale(1.08);
  1085.             transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  1086.         }
  1088.         .featured-gallery-item .product-image-container a {
  1089.             display: block;
  1090.             width: 100%;
  1091.             height: 100%;
  1092.         }
  1094.         .featured-gallery-item .main-product-img {
  1095.             transition: transform 0.3s ease;
  1096.             width: 100% !important;
  1097.             height: 100% !important;
  1098.             object-fit: cover;
  1099.             object-position: center;
  1100.             display: block;
  1101.             will-change: transform, opacity;
  1102.         }
  1104.         .featured-gallery-item .main-product-img.image-fade {
  1105.             animation: imageFade 0.5s ease;
  1106.         }
  1108.         @keyframes imageFade {
  1109.             from {
  1110.                 opacity: 0;
  1111.                 transform: scale(1.02);
  1112.             }
  1113.             to {
  1114.                 opacity: 1;
  1115.                 transform: scale(1);
  1116.             }
  1117.         }
  1119.         .featured-gallery-item .product-details {
  1120.             display: flex;
  1121.             flex-direction: column;
  1122.             height: 100%;
  1123.             padding: 0 5px;
  1124.         }
  1126.         .featured-gallery-item .product-details h6 {
  1127.             font-size: 1.1rem;
  1128.             font-weight: 600;
  1129.             margin-bottom: 12px;
  1130.             line-height: 1.4;
  1131.             color: #2c3e50;
  1132.             min-height: 48px;
  1133.         }
  1135.         .featured-gallery-item .product-details h6 a {
  1136.             color: #2c3e50;
  1137.             text-decoration: none;
  1138.             transition: color 0.3s ease;
  1139.         }
  1141.         .featured-gallery-item .product-details h6 a:hover {
  1142.             color: #ffa200;
  1143.         }
  1145.         .featured-gallery-item .prd-bottom {
  1146.             margin-top: auto;
  1147.         }
  1149.         /* Styles pour img-nav-btn - identiques à listing.html.twig */
  1150.         .featured-gallery-item .img-nav-btn {
  1151.             position: absolute;
  1152.             top: 50%;
  1153.             transform: translateY(-50%);
  1154.             background: rgba(0, 0, 0, 0.6);
  1155.             color: white;
  1156.             border: none;
  1157.             width: 35px;
  1158.             height: 35px;
  1159.             border-radius: 50%;
  1160.             display: flex;
  1161.             align-items: center;
  1162.             justify-content: center;
  1163.             cursor: pointer;
  1164.             transition: all 0.3s ease;
  1165.             z-index: 10;
  1166.         }
  1168.         .featured-gallery-item .img-nav-btn:hover {
  1169.             background: #095ad3;
  1170.             transform: translateY(-50%) scale(1.1);
  1171.         }
  1173.         .featured-gallery-item .img-nav-left {
  1174.             left: 10px;
  1175.         }
  1177.         .featured-gallery-item .img-nav-right {
  1178.             right: 10px;
  1179.         }
  1181.         .featured-gallery-item .img-indicators {
  1182.             position: absolute;
  1183.             bottom: 10px;
  1184.             left: 50%;
  1185.             transform: translateX(-50%);
  1186.             display: flex;
  1187.             gap: 5px;
  1188.             z-index: 10;
  1189.         }
  1191.         .featured-gallery-item .indicator {
  1192.             width: 8px;
  1193.             height: 8px;
  1194.             border-radius: 50%;
  1195.             background: rgba(255, 255, 255, 0.5);
  1196.             cursor: pointer;
  1197.             margin-bottom: 10px;
  1198.             transition: all 0.3s ease;
  1199.             border: 1px solid rgba(255, 255, 255, 0.3);
  1200.         }
  1202.         .featured-gallery-item .indicator.active {
  1203.             background: #ffa200;
  1204.             border-color: #ffa200;
  1205.             transform: scale(1.2);
  1206.         }
  1208.         .featured-gallery-item .indicator:hover {
  1209.             background: rgba(255, 255, 255, 0.8);
  1210.         }
  1212.         /* Styles pour shop-info - identiques à listing.html.twig */
  1213.         .featured-gallery-item .shop-info {
  1214.             margin: 10px 0 15px 0;
  1215.             padding: 8px 0;
  1216.             border-bottom: 1px solid #f0f0f0;
  1217.         }
  1219.         .featured-gallery-item .shop-info small {
  1220.             font-size: 0.9rem;
  1221.         }
  1223.         .featured-gallery-item .shop-link {
  1224.             color: #007bff;
  1225.             text-decoration: none;
  1226.             font-weight: 500;
  1227.         }
  1229.         .featured-gallery-item .shop-link:hover {
  1230.             color: #ffa200;
  1231.             text-decoration: underline;
  1232.         }
  1234.         /* Styles améliorés pour le prix */
  1235.         .featured-gallery-item .price {
  1236.             margin-bottom: 18px;
  1237.         }
  1239.         .featured-gallery-item .price h6 {
  1240.             font-size: 1.4rem;
  1241.             font-weight: 700;
  1242.             color: #ffa200;
  1243.             margin-bottom: 5px;
  1244.         }
  1246.         .featured-gallery-item .price h6.l-through {
  1247.             font-size: 1rem;
  1248.             color: #95a5a6;
  1249.             text-decoration: line-through;
  1250.             font-weight: 500;
  1251.         }
  1253.         /* Les autres styles (prd-bottom, social-info) sont déjà définis dans main.css */
  1255.         @keyframes galleryItemFadeIn {
  1256.             from {
  1257.                 opacity: 0;
  1258.                 transform: translateY(20px) scale(0.95);
  1259.             }
  1260.             to {
  1261.                 opacity: 1;
  1262.                 transform: translateY(0) scale(1);
  1263.             }
  1264.         }
  1266.         .featured-gallery-card {
  1267.             display: flex;
  1268.             flex-direction: column;
  1269.             height: 100%;
  1270.             background: white;
  1271.             border-radius: 12px;
  1272.             overflow: hidden;
  1273.             box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  1274.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1275.             border: 1px solid #f0f0f0;
  1276.         }
  1278.         .featured-gallery-card:hover {
  1279.             transform: translateY(-5px);
  1280.             box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  1281.             border-color: #ffa200;
  1282.         }
  1284.         .featured-gallery-image-wrapper {
  1285.             position: relative;
  1286.             width: 100%;
  1287.             padding-top: 100%; /* Ratio 1:1 pour une galerie carrée */
  1288.             overflow: hidden;
  1289.             background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  1290.         }
  1292.         .featured-gallery-image {
  1293.             position: absolute;
  1294.             top: 0;
  1295.             left: 0;
  1296.             width: 100%;
  1297.             height: 100%;
  1298.             background-size: cover;
  1299.             background-position: center;
  1300.             transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  1301.         }
  1303.         .featured-gallery-card:hover .featured-gallery-image {
  1304.             transform: scale(1.08);
  1305.         }
  1307.         .featured-gallery-badge {
  1308.             position: absolute;
  1309.             top: 8px;
  1310.             left: 8px;
  1311.             background: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  1312.             color: white;
  1313.             padding: 4px 10px;
  1314.             border-radius: 15px;
  1315.             font-size: 12px;
  1316.             font-weight: 600;
  1317.             z-index: 2;
  1318.             box-shadow: 0 2px 8px rgba(255, 162, 0, 0.4);
  1319.         }
  1321.         .featured-gallery-overlay {
  1322.             position: absolute;
  1323.             top: 0;
  1324.             left: 0;
  1325.             width: 100%;
  1326.             height: 100%;
  1327.             background: rgba(0, 0, 0, 0.5);
  1328.             display: flex;
  1329.             align-items: center;
  1330.             justify-content: center;
  1331.             opacity: 0;
  1332.             transition: opacity 0.3s ease;
  1333.         }
  1335.         .featured-gallery-card:hover .featured-gallery-overlay {
  1336.             opacity: 1;
  1337.         }
  1339.         .featured-gallery-view-btn {
  1340.             background: white;
  1341.             color: #333;
  1342.             width: 40px;
  1343.             height: 40px;
  1344.             border-radius: 50%;
  1345.             display: flex;
  1346.             align-items: center;
  1347.             justify-content: center;
  1348.             text-decoration: none;
  1349.             font-size: 18px;
  1350.             transform: scale(0.8);
  1351.             transition: transform 0.3s ease;
  1352.         }
  1354.         .featured-gallery-card:hover .featured-gallery-view-btn {
  1355.             transform: scale(1);
  1356.         }
  1358.         .featured-gallery-info {
  1359.             padding: 12px;
  1360.             flex: 1;
  1361.             display: flex;
  1362.             flex-direction: column;
  1363.         }
  1365.         .featured-gallery-title {
  1366.             font-size: 14px;
  1367.             font-weight: 600;
  1368.             margin-bottom: 6px;
  1369.             color: #333;
  1370.             line-height: 1.3;
  1371.             display: -webkit-box;
  1372.             -webkit-line-clamp: 2;
  1373.             -webkit-box-orient: vertical;
  1374.             overflow: hidden;
  1375.             min-height: 36px;
  1376.         }
  1378.         .featured-gallery-title a {
  1379.             color: #333;
  1380.             text-decoration: none;
  1381.             transition: color 0.3s ease;
  1382.         }
  1384.         .featured-gallery-title a:hover {
  1385.             color: #ffa200;
  1386.         }
  1388.         .featured-gallery-price {
  1389.             font-size: 16px;
  1390.             font-weight: 700;
  1391.             color: #ffa200;
  1392.             margin-bottom: 6px;
  1393.         }
  1395.         .featured-gallery-rating {
  1396.             display: flex;
  1397.             align-items: center;
  1398.             gap: 3px;
  1399.             font-size: 11px;
  1400.         }
  1402.         .featured-gallery-rating .fa-star.active {
  1403.             color: #ffa200;
  1404.         }
  1406.         .featured-gallery-rating .fa-star-o {
  1407.             color: #ddd;
  1408.         }
  1410.         .featured-gallery-controls {
  1411.             display: flex;
  1412.             justify-content: center;
  1413.             gap: 20px;
  1414.             margin-top: 25px;
  1415.             padding: 0 20px;
  1416.         }
  1418.         .featured-gallery-nav-btn {
  1419.             width: 42px;
  1420.             height: 42px;
  1421.             border-radius: 50%;
  1422.             border: 1.5px solid #ffa200;
  1423.             background: white;
  1424.             color: #ffa200;
  1425.             font-size: 16px;
  1426.             cursor: pointer;
  1427.             display: flex;
  1428.             align-items: center;
  1429.             justify-content: center;
  1430.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1431.             box-shadow: 0 3px 10px rgba(255, 162, 0, 0.18);
  1432.             position: relative;
  1433.             overflow: hidden;
  1434.         }
  1436.         .featured-gallery-nav-btn.btn-ripple::after {
  1437.             content: '';
  1438.             position: absolute;
  1439.             width: 100%;
  1440.             height: 100%;
  1441.             left: 0;
  1442.             top: 0;
  1443.             border-radius: 50%;
  1444.             background: rgba(255, 162, 0, 0.2);
  1445.             animation: rippleEffect 0.35s ease;
  1446.         }
  1448.         @keyframes rippleEffect {
  1449.             from {
  1450.                 transform: scale(0.6);
  1451.                 opacity: 0.7;
  1452.             }
  1453.             to {
  1454.                 transform: scale(1.4);
  1455.                 opacity: 0;
  1456.             }
  1457.         }
  1459.         .featured-gallery-nav-btn:hover:not(:disabled) {
  1460.             background: #ffa200;
  1461.             color: white;
  1462.             transform: scale(1.1);
  1463.             box-shadow: 0 5px 18px rgba(255, 162, 0, 0.4);
  1464.         }
  1466.         .featured-gallery-nav-btn:active:not(:disabled) {
  1467.             transform: scale(0.95);
  1468.         }
  1470.         .featured-gallery-nav-btn:disabled {
  1471.             opacity: 0.3;
  1472.             cursor: not-allowed;
  1473.         }
  1475.         .featured-gallery-load-more {
  1476.             margin-top: 30px;
  1477.         }
  1479.         /* Style pour le bouton "Voir tous les produits" */
  1480.         .btn-view-all-products {
  1481.             display: inline-flex;
  1482.             align-items: center;
  1483.             gap: 12px;
  1484.             padding: 16px 40px;
  1485.             background: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  1486.             color: white;
  1487.             text-decoration: none;
  1488.             border-radius: 50px;
  1489.             font-weight: 600;
  1490.             font-size: 16px;
  1491.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1492.             box-shadow: 0 4px 15px rgba(255, 162, 0, 0.3);
  1493.             position: relative;
  1494.             overflow: hidden;
  1495.         }
  1497.         .btn-view-all-products::before {
  1498.             content: '';
  1499.             position: absolute;
  1500.             top: 0;
  1501.             left: -100%;
  1502.             width: 100%;
  1503.             height: 100%;
  1504.             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  1505.             transition: left 0.5s ease;
  1506.         }
  1508.         .btn-view-all-products:hover::before {
  1509.             left: 100%;
  1510.         }
  1512.         .btn-view-all-products:hover {
  1513.             transform: translateY(-3px);
  1514.             box-shadow: 0 8px 25px rgba(255, 162, 0, 0.5);
  1515.             color: white;
  1516.         }
  1518.         .btn-view-all-products:active {
  1519.             transform: translateY(-1px);
  1520.         }
  1522.         .btn-view-all-products i {
  1523.             font-size: 18px;
  1524.             transition: transform 0.3s ease;
  1525.         }
  1527.         .btn-view-all-products:hover i {
  1528.             transform: translateX(5px);
  1529.         }
  1531.         .btn-view-all-products span {
  1532.             position: relative;
  1533.             z-index: 1;
  1534.         }
  1536.         /* Responsive */
  1537.         @media(max-width: 767px) {
  1538.             .btn-view-all-products {
  1539.                 padding: 14px 30px;
  1540.                 font-size: 14px;
  1541.             }
  1542.         }
  1544.         /* Responsive */
  1545.         @media(max-width: 767px) {
  1546.             .featured-gallery-grid {
  1547.                 gap: 10px;
  1548.             }
  1550.             .featured-gallery-info {
  1551.                 padding: 10px;
  1552.             }
  1554.             .featured-gallery-title {
  1555.                 font-size: 13px;
  1556.                 min-height: 32px;
  1557.             }
  1559.             .featured-gallery-price {
  1560.                 font-size: 14px;
  1561.             }
  1562.         }
  1564.         /* Styles pour les grilles de produits Nouveautés */
  1565.         .latest-products-grid {
  1566.             margin-top: 30px;
  1567.         }
  1569.         .product-card-modern {
  1570.             background: white;
  1571.             border-radius: 12px;
  1572.             overflow: hidden;
  1573.             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  1574.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1575.             height: 100%;
  1576.             display: flex;
  1577.             flex-direction: column;
  1578.             border: 1px solid #f0f0f0;
  1579.         }
  1581.         .product-card-modern:hover {
  1582.             transform: translateY(-8px);
  1583.             box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  1584.             border-color: #ffa200;
  1585.         }
  1587.         .product-image-wrapper {
  1588.             position: relative;
  1589.             width: 100%;
  1590.             padding-top: 75%; /* Ratio 4:3 */
  1591.             overflow: hidden;
  1592.             background: #f8f9fa;
  1593.         }
  1595.         .product-image {
  1596.             position: absolute;
  1597.             top: 0;
  1598.             left: 0;
  1599.             width: 100%;
  1600.             height: 100%;
  1601.             background-size: cover;
  1602.             background-position: center;
  1603.             transition: transform 0.5s ease;
  1604.         }
  1606.         .product-card-modern:hover .product-image {
  1607.             transform: scale(1.1);
  1608.         }
  1610.         .product-badge-modern {
  1611.             position: absolute;
  1612.             top: 10px;
  1613.             right: 10px;
  1614.             background: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  1615.             color: white;
  1616.             padding: 6px 12px;
  1617.             border-radius: 20px;
  1618.             font-size: 12px;
  1619.             font-weight: 600;
  1620.             z-index: 2;
  1621.             box-shadow: 0 2px 8px rgba(255, 162, 0, 0.3);
  1622.         }
  1624.         .product-badge-modern.new-badge {
  1625.             background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  1626.         }
  1628.         .product-overlay {
  1629.             position: absolute;
  1630.             top: 0;
  1631.             left: 0;
  1632.             width: 100%;
  1633.             height: 100%;
  1634.             background: rgba(0, 0, 0, 0.5);
  1635.             display: flex;
  1636.             align-items: center;
  1637.             justify-content: center;
  1638.             opacity: 0;
  1639.             transition: opacity 0.3s ease;
  1640.             z-index: 1;
  1641.         }
  1643.         .product-card-modern:hover .product-overlay {
  1644.             opacity: 1;
  1645.         }
  1647.         .btn-view-product {
  1648.             background: white;
  1649.             color: #333;
  1650.             padding: 12px 24px;
  1651.             border-radius: 25px;
  1652.             text-decoration: none;
  1653.             font-weight: 600;
  1654.             display: flex;
  1655.             align-items: center;
  1656.             gap: 8px;
  1657.             transition: all 0.3s ease;
  1658.             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  1659.         }
  1661.         .btn-view-product:hover {
  1662.             background: #ffa200;
  1663.             color: white;
  1664.             transform: scale(1.05);
  1665.         }
  1667.         .product-info-modern {
  1668.             padding: 16px;
  1669.             flex-grow: 1;
  1670.             display: flex;
  1671.             flex-direction: column;
  1672.         }
  1674.         .product-title-modern {
  1675.             margin: 0 0 8px;
  1676.             font-size: 16px;
  1677.             font-weight: 600;
  1678.             line-height: 1.4;
  1679.         }
  1681.         .product-title-modern a {
  1682.             color: #333;
  1683.             text-decoration: none;
  1684.             transition: color 0.3s ease;
  1685.         }
  1687.         .product-title-modern a:hover {
  1688.             color: #ffa200;
  1689.         }
  1691.         .product-price-modern {
  1692.             font-size: 20px;
  1693.             font-weight: 700;
  1694.             color: #ffa200;
  1695.             margin-bottom: 8px;
  1696.         }
  1698.         .product-shop-modern {
  1699.             display: flex;
  1700.             align-items: center;
  1701.             gap: 6px;
  1702.             font-size: 13px;
  1703.             color: #666;
  1704.             margin-bottom: 8px;
  1705.         }
  1707.         .product-shop-modern i {
  1708.             color: #ffa200;
  1709.         }
  1711.         .shop-link {
  1712.             color: #666;
  1713.             text-decoration: none;
  1714.             transition: color 0.3s ease;
  1715.         }
  1717.         .shop-link:hover {
  1718.             color: #ffa200;
  1719.         }
  1721.         .product-rating-modern {
  1722.             display: flex;
  1723.             align-items: center;
  1724.             gap: 4px;
  1725.             margin-top: auto;
  1726.         }
  1728.         .product-rating-modern .fa-star.active {
  1729.             color: #ffc107;
  1730.         }
  1732.         .product-rating-modern .fa-star-o {
  1733.             color: #ddd;
  1734.         }
  1736.         .rating-count {
  1737.             font-size: 12px;
  1738.             color: #666;
  1739.             margin-left: 4px;
  1740.         }
  1742.         .product-views-modern {
  1743.             display: flex;
  1744.             align-items: center;
  1745.             gap: 6px;
  1746.             font-size: 12px;
  1747.             color: #666;
  1748.             margin-top: auto;
  1749.         }
  1751.         .product-views-modern i {
  1752.             color: #999;
  1753.         }
  1755.         /* Style des cartes produits */
  1756.         .product-card {
  1757.             background: white;
  1758.             border-radius: 15px;
  1759.             overflow: hidden;
  1760.             box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  1761.             transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  1762.             height: 100%;
  1763.             display: flex;
  1764.             flex-direction: column;
  1765.         }
  1767.         .product-card:hover {
  1768.             box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  1769.             transform: translateY(-5px);
  1770.         }
  1772.         .product-image {
  1773.             width: 100%;
  1774.             height: 250px;
  1775.             background-size: cover;
  1776.             background-position: center;
  1777.             position: relative;
  1778.             overflow: hidden;
  1779.         }
  1781.         .product-image::before {
  1782.             content: '';
  1783.             position: absolute;
  1784.             top: 0;
  1785.             left: -100%;
  1786.             width: 100%;
  1787.             height: 100%;
  1788.             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  1789.             transition: left 0.6s ease;
  1790.         }
  1792.         .product-card:hover .product-image::before {
  1793.             left: 100%;
  1794.         }
  1796.         .product-badge {
  1797.             position: absolute;
  1798.             top: 15px;
  1799.             right: 15px;
  1800.             background: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  1801.             color: white;
  1802.             padding: 8px 15px;
  1803.             border-radius: 20px;
  1804.             font-size: 0.85rem;
  1805.             font-weight: 600;
  1806.             box-shadow: 0 4px 10px rgba(255, 162, 0, 0.4);
  1807.             z-index: 1;
  1808.         }
  1810.         .product-info {
  1811.             padding: 20px;
  1812.             flex-grow: 1;
  1813.             display: flex;
  1814.             flex-direction: column;
  1815.         }
  1817.         .product-title {
  1818.             font-size: 1.1rem;
  1819.             font-weight: 600;
  1820.             color: #2c3e50;
  1821.             margin-bottom: 10px;
  1822.             line-height: 1.4;
  1823.             display: -webkit-box;
  1824.             -webkit-line-clamp: 2;
  1825.             -webkit-box-orient: vertical;
  1826.             overflow: hidden;
  1827.         }
  1829.         .product-price {
  1830.             font-size: 1.5rem;
  1831.             font-weight: 800;
  1832.             color: #ffa200;
  1833.             margin-bottom: 15px;
  1834.         }
  1836.         .product-shop {
  1837.             font-size: 0.9rem;
  1838.             color: #666;
  1839.             margin-bottom: 15px;
  1840.         }
  1842.         .product-shop a {
  1843.             color: #667eea;
  1844.             text-decoration: none;
  1845.             transition: color 0.3s ease;
  1846.         }
  1848.         .product-shop a:hover {
  1849.             color: #ffa200;
  1850.         }
  1852.         /* Newsletter Modern Styles */
  1853.         .newsletter-section-modern {
  1854.             background: linear-gradient(135deg, #ffa200 0%, #095ad3 100%);
  1855.             position: relative;
  1856.             overflow: hidden;
  1857.         }
  1858.         .newsletter-section-modern::before {
  1859.             content: '';
  1860.             position: absolute;
  1861.             top: -50%;
  1862.             right: -50%;
  1863.             width: 100%;
  1864.             height: 200%;
  1865.             background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  1866.             animation: pulse 3s ease-in-out infinite;
  1867.         }
  1868.         @keyframes pulse {
  1869.             0,
  1870.             100% {
  1871.                 transform: scale(1);
  1872.                 opacity: 0.5;
  1873.             }
  1874.             50% {
  1875.                 transform: scale(1.1);
  1876.                 opacity: 0.8;
  1877.             }
  1878.         }
  1879.         .newsletter-card {
  1880.             background: white;
  1881.             border-radius: 20px;
  1882.             padding: 40px;
  1883.             box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  1884.             position: relative;
  1885.             z-index: 1;
  1886.         }
  1887.         .newsletter-title {
  1888.             font-size: 2.5rem;
  1889.             font-weight: bold;
  1890.             color: #333;
  1891.         }
  1892.         .newsletter-description {
  1893.             color: #666;
  1894.             font-size: 1.1rem;
  1895.             line-height: 1.8;
  1896.         }
  1897.         .newsletter-form-modern {
  1898.             position: relative;
  1899.         }
  1900.         .newsletter-input-wrapper {
  1901.             display: flex;
  1902.             gap: 10px;
  1903.             margin-bottom: 15px;
  1904.         }
  1905.         .newsletter-input {
  1906.             flex: 1;
  1907.             padding: 18px 25px;
  1908.             border: 2px solid #e0e0e0;
  1909.             border-radius: 50px;
  1910.             font-size: 1rem;
  1911.             transition: all 0.3s ease;            background: #fff;
  1912.             color: #333;
  1913.         }
  1914.         .newsletter-input::placeholder {
  1915.             color: #777;
  1916.         }
  1917.         .newsletter-input:focus {
  1918.             outline: none;
  1919.             border-color: #ffa200;
  1920.             box-shadow: 0 0 0 3px rgba(255, 162, 0, 0.1);
  1921.         }
  1922.         .newsletter-button {
  1923.             padding: 18px 35px;
  1924.             background: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  1925.             color: white;
  1926.             border: none;
  1927.             border-radius: 50px;
  1928.             font-weight: 600;
  1929.             font-size: 1rem;
  1930.             cursor: pointer;
  1931.             transition: all 0.3s ease;
  1932.             white-space: nowrap;
  1933.         }
  1934.         .newsletter-button:hover {
  1935.             transform: translateY(-2px);
  1936.             box-shadow: 0 5px 20px rgba(255, 162, 0, 0.4);
  1937.         }
  1938.         .newsletter-privacy {
  1939.             color: #999;
  1940.         }
  1942.         /* CTA Modern Styles */
  1943.         .cta-section-modern {
  1944.             background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  1945.         }
  1946.         .cta-card {
  1947.             background: white;
  1948.             border-radius: 25px;
  1949.             padding: 50px;
  1950.             box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
  1951.             position: relative;
  1952.             overflow: hidden;
  1953.         }
  1954.         .cta-card::before {
  1955.             content: '';
  1956.             position: absolute;
  1957.             top: -50px;
  1958.             right: -50px;
  1959.             width: 200px;
  1960.             height: 200px;
  1961.             background: linear-gradient(135deg, rgba(255,162,0,0.1) 0%, rgba(255,162,0,0.05) 100%);
  1962.             border-radius: 50%;
  1963.         }
  1964.         .cta-badge {
  1965.             display: inline-block;
  1966.             padding: 8px 20px;
  1967.             background: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  1968.             color: white;
  1969.             border-radius: 50px;
  1970.             font-size: 0.9rem;
  1971.             font-weight: 600;
  1972.             margin-bottom: 20px;
  1973.         }
  1974.         .cta-title {
  1975.             font-size: 3rem;
  1976.             font-weight: bold;
  1977.             color: #333;
  1978.             margin-bottom: 20px;
  1979.         }
  1980.         .cta-description {
  1981.             font-size: 1.2rem;
  1982.             color: #666;
  1983.             line-height: 1.8;
  1984.         }
  1985.         .cta-features {
  1986.             display: flex;
  1987.             flex-direction: column;
  1988.             gap: 15px;
  1989.         }
  1990.         .cta-feature-item {
  1991.             display: flex;
  1992.             align-items: center;
  1993.             gap: 10px;
  1994.             font-size: 1rem;
  1995.             color: #555;
  1996.         }
  1997.         .cta-feature-item i {
  1998.             color: #ffa200;
  1999.             font-size: 1.3rem;
  2000.         }
  2001.         .cta-buttons {
  2002.             display: flex;
  2003.             gap: 15px;
  2004.             flex-wrap: wrap;
  2005.         }
  2006.         .cta-button-primary {
  2007.             padding: 15px 35px;
  2008.             background: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  2009.             color: white;
  2010.             border: none;
  2011.             border-radius: 50px;
  2012.             font-weight: 600;
  2013.             font-size: 1.1rem;
  2014.             transition: all 0.3s ease;
  2015.         }
  2016.         .cta-button-primary:hover {
  2017.             transform: translateY(-3px);
  2018.             box-shadow: 0 8px 25px rgba(255, 162, 0, 0.4);
  2019.             color: white;
  2020.         }
  2021.         .cta-button-secondary {
  2022.             padding: 15px 35px;
  2023.             background: white;
  2024.             color: #ffa200;
  2025.             border: 2px solid #ffa200;
  2026.             border-radius: 50px;
  2027.             font-weight: 600;
  2028.             font-size: 1.1rem;
  2029.             transition: all 0.3s ease;
  2030.         }
  2031.         .cta-button-secondary:hover {
  2032.             background: #ffa200;
  2033.             color: white;
  2034.             transform: translateY(-3px);
  2035.             box-shadow: 0 8px 25px rgba(255, 162, 0, 0.3);
  2036.         }
  2037.         .cta-image-wrapper {
  2038.             position: relative;
  2039.         }
  2040.         .cta-decoration {
  2041.             position: absolute;
  2042.             top: -20px;
  2043.             right: -20px;
  2044.             width: 150px;
  2045.             height: 150px;
  2046.             background: linear-gradient(135deg, rgba(255,162,0,0.2) 0%, rgba(255,162,0,0.05) 100%);
  2047.             border-radius: 50%;
  2048.             z-index: 0;
  2049.         }
  2050.         .cta-image {
  2051.             position: relative;
  2052.             z-index: 1;
  2053.             max-width: 100%;
  2054.             height: auto;
  2055.             border-radius: 15px;
  2056.         }
  2057.     </style>
  2058. {% endblock %}
  2060. {% block body %}
  2061.     <!-- Hero Section -->
  2062.     <!-- start banner Area avec produits en vedette -->
  2063.         {% if bannerProducts is defined and bannerProducts|length > 0 %}
  2064.             <section class="banner-area-modern"> <div class="banner-carousel-wrapper">
  2065.                 <div class="active-banner-slider owl-carousel" style="margin-top: 100px;">
  2066.                     {% for product in bannerProducts %}
  2067.                         <!-- single-slide -->
  2068.                         <div class="banner-slide-item">
  2069.                             <div class="container">
  2070.                                 <div class="row align-items-center">
  2071.                                     <div class="col-lg-4 col-md-6 col-12">
  2072.                                         <div class="banner-content-modern">
  2073.                                             <div class="banner-badge">
  2074.                                                 <i class="lnr lnr-star"></i>
  2075.                                                 Produit en vedette
  2076.                                             </div>
  2077.                                             <h1 class="banner-title-modern">{{ product.name }}</h1>
  2078.                                             <p class="banner-description-modern">
  2079.                                                 {{ product.description ? (product.description|striptags|slice(0, 120) ~ '...') : 'Découvrez ce produit exclusif sur MaketOu' }}
  2080.                                             </p>
  2081.                                             <div class="banner-price-modern">
  2082.                                                 <span class="price-label">Prix</span>
  2083.                                                 <span class="price-value">{{ product.price|number_format(2, '.', ' ') }}
  2084.                                                     HTG</span>
  2085.                                             </div>
  2086.                                             <div class="banner-actions-modern">
  2087.                                                 <a class="btn-banner-primary" href="{{ path('ui_product_show', {'slug': product.slug}) }}">
  2088.                                                     <span class="btn-text">Voir le produit</span>
  2089.                                                     <span class="btn-icon">
  2090.                                                         <i class="lnr lnr-arrow-right"></i>
  2091.                                                     </span>
  2092.                                                 </a>
  2093.                                                 {% if product.shop %}
  2094.                                                     <a class="btn-banner-secondary" href="{{ path('ui_shop_show', {'slug': product.shop.slug}) }}">
  2095.                                                         <i class="lnr lnr-store"></i>
  2096.                                                         <span>{{ product.shop.name }}</span>
  2097.                                                     </a>
  2098.                                                 {% endif %}
  2099.                                             </div>
  2100.                                         </div>
  2101.                                     </div>
  2102.                                     <div class="col-lg-8 col-md-6 col-12">
  2103.                                         <div class="banner-image-modern">
  2104.                                             <div class="banner-image-wrapper">
  2105.                                                 {% if product.images is defined and product.images|length > 0 %}
  2106.                                                     <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 }}">
  2107.                                                 {% else %}
  2108.                                                     <img class="banner-img" src="{{ asset('ui/img/product/p' ~ loop.index ~ '.jpg') }}" alt="{{ product.name }}">
  2109.                                                 {% endif %}
  2110.                                                 <div class="banner-image-overlay"></div>
  2111.                                             </div>
  2112.                                         </div>
  2113.                                     </div>
  2114.                                 </div>
  2115.                             </div>
  2116.                         </div>
  2117.                     {% endfor %}
  2118.                 </div>
  2119.             </div>
  2120.         </section>
  2121.     {% else %}
  2122.         <!-- Banner par défaut si pas de produits en vedette -->
  2123.         <section class="banner-area-modern">
  2124.             <div class="banner-carousel-wrapper">
  2125.                 <div class="container">
  2126.                     <div class="row align-items-center justify-content-center">
  2127.                         <div class="col-lg-8 text-center">
  2128.                             <div class="banner-content-modern" style="margin-top: 140px;">
  2129.                                 <h1 class="banner-title-modern">Bienvenue sur MaketOu</h1>
  2130.                                 <p class="banner-description-modern">Votre marketplace haïtienne</p>
  2131.                             </div>
  2132.                         </div>
  2133.                     </div>
  2134.                 </div>
  2135.             </div>
  2136.         </section>
  2137.     {% endif %}
  2138.     <!-- End banner Area -->
  2140.     <!-- Catégories de produits -->
  2141.     {% if categories|length > 0 %}
  2142.         <section class="py-5">
  2143.             <div class="container">
  2144.                 <div class="section-title">
  2145.                     <h2>Nos catégories</h2>
  2146.                     <p>Explorez nos différentes catégories de produits</p>
  2147.                 </div>
  2148.                 <div class="row" id="productCategoriesContainer">
  2149.                     {% for category in categories|slice(0, 8) %}
  2150.                         <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
  2151.                             <div class="category-card-custom">
  2152.                                 <div class="category-image-wrapper">
  2153.                                     <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 %}')">
  2154.                                         <div class="category-overlay-custom">
  2155.                                             <div class="category-icon-wrapper">
  2156.                                                 <i class="lnr lnr-tag" style="font-size: 3rem;"></i>
  2157.                                                 <h4 class="mt-3">{{ category.name }}</h4>
  2158.                                             </div>
  2159.                                         </div>
  2160.                                     </div>
  2161.                                 </div>
  2162.                                 <div class="category-content p-3">
  2163.                                     <h5 class="mb-2">{{ category.name }}</h5>
  2164.                                     {% if category.description %}
  2165.                                         <p class="text-muted mb-3 small">{{ category.description|striptags|slice(0, 60) }}
  2166.                                             {% if category.description|striptags|length > 60 %}...
  2167.                                             {% endif %}
  2168.                                         </p>
  2169.                                     {% endif %}
  2170.                                     <a href="{{ path('ui_listing', {'category': category.slug}) }}" class="btn btn-primary-custom btn-sm w-100">
  2171.                                         Voir les produits
  2172.                                     </a>
  2173.                                 </div>
  2174.                             </div>
  2175.                         </div>
  2176.                     {% endfor %}
  2177.                 </div>
  2178.             </div>
  2179.         </section>
  2180.     {% endif %}
  2182.     <!-- Catégories de boutiques -->
  2183.     {% if shopCategories|length > 0 %}
  2184.         <section class="py-5 bg-light">
  2185.             <div class="container">
  2186.                 <div class="section-title">
  2187.                     <h2>Nos catégories de boutiques</h2>
  2188.                     <p>Explorez les différentes catégories de boutiques disponibles sur MaketOu</p>
  2189.                 </div>
  2190.                 <div class="row" id="shopCategoriesContainer">
  2191.                     {% for shopCategory in shopCategories|slice(0, 6) %}
  2192.                         <div class="col-lg-4 col-md-6 mb-4">
  2193.                             <a href="{{ path('ui_shops_list') }}?category={{ shopCategory.slug }}" class="text-decoration-none" style="display: block;">
  2194.                                 <div class="category-card-custom shop-category-clickable">
  2195.                                     <div class="category-image-wrapper">
  2196.                                         <div class="category-image" style="background-image: url('{% if shopCategory.bannerImage %}{{ asset(shopCategory.bannerImage) }}{% else %}{{ asset('ui/img/category/shop-' ~ loop.index ~ '.jpg') }}{% endif %}')">
  2197.                                             <div class="category-overlay-custom">
  2198.                                                 <div class="category-icon-wrapper">
  2199.                                                     <i class="lnr lnr-store" style="font-size: 3rem;"></i>
  2200.                                                     <h4 class="mt-3">{{ shopCategory.name }}</h4>
  2201.                                                     {% if shopCategory.description %}
  2202.                                                         <p class="mt-2 px-3">{{ shopCategory.description|striptags|slice(0, 100) }}
  2203.                                                             {% if shopCategory.description|striptags|length > 100 %}...
  2204.                                                             {% endif %}
  2205.                                                         </p>
  2206.                                                     {% endif %}
  2207.                                                 </div>
  2208.                                             </div>
  2209.                                         </div>
  2210.                                     </div>
  2211.                                     <div class="category-content p-3">
  2212.                                         <h5 class="mb-2">{{ shopCategory.name }}</h5>
  2213.                                         {% if shopCategory.description %}
  2214.                                             <p class="text-muted mb-3 small">{{ shopCategory.description|striptags|slice(0, 80) }}
  2215.                                                 {% if shopCategory.description|striptags|length > 80 %}...
  2216.                                                 {% endif %}
  2217.                                             </p>
  2218.                                         {% endif %}
  2219.                                         <span class="btn btn-primary-custom btn-sm w-100">
  2220.                                             Voir les boutiques
  2221.                                             <i class="lnr lnr-arrow-right ms-2"></i>
  2222.                                         </span>
  2223.                                     </div>
  2224.                                 </div>
  2225.                             </a>
  2226.                         </div>
  2227.                     {% endfor %}
  2228.                 </div>
  2229.                 {% if shopCategories|length > 6 %}
  2230.                     <div class="text-center mt-4">
  2231.                         <button class="btn btn-outline-primary btn-lg" onclick="showAllShopCategories()">
  2232.                             <i class="lnr lnr-store me-2"></i>
  2233.                             Voir toutes les catégories de boutiques ({{ shopCategories|length }})
  2234.                         </button>
  2235.                     </div>
  2236.                 {% endif %}
  2237.             </div>
  2238.         </section>
  2239.     {% endif %}
  2241.     <!-- Produits en vedette -->
  2242.     {% if featuredProducts|length > 0 %}
  2243.         <section class="py-5">
  2244.             <div class="container">
  2245.                 <div class="section-title text-center mb-5">
  2246.                     <h2>Produits en vedette</h2>
  2247.                     <p>Découvrez nos produits les plus populaires et les mieux notés</p>
  2248.                 </div>
  2250.                 <div class="featured-gallery-wrapper">
  2251.                     <div class="featured-gallery-container">
  2252.                         <div class="featured-gallery-grid" id="featuredGalleryGrid">
  2253.                             {% for product in featuredProducts %}
  2254.                                 <div class="featured-gallery-item">
  2255.                                     <div class="single-product">
  2256.                                         <div class="product-image-container" onmouseenter="showImageNav({{ product.id }})" onmouseleave="hideImageNav({{ product.id }})">
  2257.                                             <a href="{{ path('ui_product_show', { slug: product.slug }) }}">
  2258.                                                 {% if product.images is defined and product.images|length > 0 %}
  2259.                                                     <img 
  2260.                                                         class="img-fluid main-product-img" 
  2261.                                                         id="main-img-{{ product.id }}" 
  2262.                                                         src="{{ asset(product.images[0]) }}" 
  2263.                                                         alt="{{ product.name }}"
  2264.                                                         onerror="this.onerror=null;this.src='{{ asset('ui/img/product/p1.jpg') }}';"
  2265.                                                     >
  2266.                                                 {% else %}
  2267.                                                     <img class="img-fluid main-product-img" id="main-img-{{ product.id }}" src="{{ asset('ui/img/product/p1.jpg') }}" alt="{{ product.name }}">
  2268.                                                 {% endif %}
  2269.                                             </a>
  2271.                                             <!-- Boutons de navigation (visibles au survol) -->
  2272.                                             {% if product.images is defined and product.images|length > 1 %}
  2273.                                                 <button class="img-nav-btn img-nav-left" id="img-left-{{ product.id }}" onclick="prevImage({{ product.id }})" style="display: none;">
  2274.                                                     <span class="lnr lnr-chevron-left"></span>
  2275.                                                 </button>
  2276.                                                 <button class="img-nav-btn img-nav-right" id="img-right-{{ product.id }}" onclick="nextImage({{ product.id }})" style="display: none;">
  2277.                                                     <span class="lnr lnr-chevron-right"></span>
  2278.                                                 </button>
  2280.                                                 <!-- Indicateurs de position -->
  2281.                                                 <div class="img-indicators" id="img-indicators-{{ product.id }}" style="display: none;">
  2282.                                                     {% for img in product.images %}
  2283.                                                         <span class="indicator" id="indicator-{{ product.id }}-{{ loop.index0 }}" onclick="showImage({{ product.id }}, {{ loop.index0 }})"></span>
  2284.                                                     {% endfor %}
  2285.                                                 </div>
  2286.                                             {% endif %}
  2287.                                         </div>
  2289.                                         <div class="product-details">
  2290.                                             <a href="{{ path('ui_product_show', { slug: product.slug }) }}">
  2291.                                                 <h6>{{ product.name }}</h6>
  2292.                                             </a>
  2294.                                             <!-- Affichage de la boutique -->
  2295.                                             <div class="shop-info">
  2296.                                                 <small class="text-muted">
  2297.                                                     <i class="lnr lnr-store"></i>
  2298.                                                     Vendu par :
  2299.                                                     {% if product.shop is defined and product.shop %}
  2300.                                                         <a href="{{ path('ui_shop_show', {'slug': product.shop.slug}) }}" class="shop-link">
  2301.                                                             {{ product.shop.name }}
  2302.                                                         </a>
  2303.                                                     {% else %}
  2304.                                                         <span class="text-muted">Boutique inconnue</span>
  2305.                                                     {% endif %}
  2306.                                                 </small>
  2307.                                             </div>
  2309.                                             <div class="price">
  2310.                                                 <h6>{{ product.price|number_format(2, '.', ' ') }}
  2311.                                                     HTG</h6>
  2312.                                                 {% if product.compareAtPrice %}
  2313.                                                     <h6 class="l-through">{{ product.compareAtPrice|number_format(2, '.', ' ') }}
  2314.                                                         HTG</h6>
  2315.                                                 {% endif %}
  2316.                                             </div>
  2317.                                             <div class="prd-bottom">
  2318.                                                 <a href="javascript:void(0)" class="social-info add-to-cart" data-product-id="{{ product.id }}" data-qty="1">
  2319.                                                     <span class="ti-bag"></span>
  2320.                                                     <p class="hover-text">+ panier</p>
  2321.                                                 </a>
  2322.                                                 <a href="#" class="social-info wishlist-btn" data-product-id="{{ product.id }}" {% if app.user %} onclick="toggleWishlist({{ product.id }}, this); return false;" {% else %} onclick="alert('Vous devez être connecté pour ajouter aux favoris'); return false;" {% endif %}>
  2323.                                                     <span class="lnr lnr-heart"></span>
  2324.                                                     <p class="hover-text">Favoris</p>
  2325.                                                 </a>
  2326.                                                 <a href="#" class="social-info comparison-btn" data-product-id="{{ product.id }}" {% if app.user %} onclick="toggleComparison({{ product.id }}, this); return false;" {% else %} onclick="alert('Vous devez être connecté pour comparer des produits'); return false;" {% endif %}>
  2327.                                                     <span class="lnr lnr-sync"></span>
  2328.                                                     <p class="hover-text">Comparer</p>
  2329.                                                 </a>
  2330.                                                 <a href="{{ path('ui_product_show', { slug: product.slug }) }}" class="social-info">
  2331.                                                     <span class="lnr lnr-move"></span>
  2332.                                                     <p class="hover-text">Voir plus</p>
  2333.                                                 </a>
  2334.                                             </div>
  2335.                                         </div>
  2336.                                     </div>
  2337.                                 </div>
  2338.                             {% endfor %}
  2339.                         </div>
  2340.                     </div>
  2342.                     <!-- Contrôles de navigation -->
  2343.                     <div class="featured-gallery-controls">
  2344.                         <button class="featured-gallery-nav-btn featured-gallery-prev" id="featuredGalleryPrev" aria-label="Précédent">
  2345.                             <i class="lnr lnr-chevron-left"></i>
  2346.                         </button>
  2347.                         <button class="featured-gallery-nav-btn featured-gallery-next" id="featuredGalleryNext" aria-label="Suivant">
  2348.                             <i class="lnr lnr-chevron-right"></i>
  2349.                         </button>
  2350.                     </div>
  2352.                     <!-- Bouton charger plus -->
  2353.                     <div class="featured-gallery-load-more text-center mt-4" id="featuredGalleryLoadMore" style="display: none;">
  2354.                         <button class="btn btn-outline-primary" id="loadMoreFeaturedBtn">
  2355.                             <i class="lnr lnr-plus-circle me-2"></i>
  2356.                             Charger plus de produits
  2357.                         </button>
  2358.                     </div>
  2359.                 </div>
  2361.                 <div class="text-center mt-5">
  2362.                     <a href="{{ path('ui_listing') }}" class="btn-view-all-products">
  2363.                         <span>Voir tous les produits</span>
  2364.                         <i class="lnr lnr-arrow-right"></i>
  2365.                     </a>
  2366.                 </div>
  2367.             </div>
  2368.         </section>
  2369.     {% endif %}
  2371.     <!-- Nouveautés -->
  2372.     {% if latestProducts|length > 0 %}
  2373.         <section class="py-5 bg-light">
  2374.             <div class="container">
  2375.                 <div class="section-title text-center mb-5">
  2376.                     <h2>Nouveautés</h2>
  2377.                     <p>Les derniers produits ajoutés sur MaketOu</p>
  2378.                 </div>
  2380.                 <div class="featured-gallery-wrapper">
  2381.                     <div class="featured-gallery-container">
  2382.                         <div class="featured-gallery-grid" id="latestGalleryGrid">
  2383.                             {% for product in latestProducts %}
  2384.                                 <div class="featured-gallery-item">
  2385.                                     <div class="single-product">
  2386.                                         <div class="product-image-container" onmouseenter="showImageNav({{ product.id }})" onmouseleave="hideImageNav({{ product.id }})">
  2387.                                             <a href="{{ path('ui_product_show', { slug: product.slug }) }}">
  2388.                                                 {% if product.images is defined and product.images|length > 0 %}
  2389.                                                     <img class="img-fluid main-product-img" id="main-img-{{ product.id }}" src="{{ asset(product.images[0]) }}" alt="{{ product.name }}">
  2390.                                                 {% else %}
  2391.                                                     <img class="img-fluid main-product-img" id="main-img-{{ product.id }}" src="{{ asset('ui/img/product/p1.jpg') }}" alt="{{ product.name }}">
  2392.                                                 {% endif %}
  2393.                                             </a>
  2395.                                             <!-- Boutons de navigation (visibles au survol) -->
  2396.                                             {% if product.images is defined and product.images|length > 1 %}
  2397.                                                 <button class="img-nav-btn img-nav-left" id="img-left-{{ product.id }}" onclick="prevImage({{ product.id }})" style="display: none;">
  2398.                                                     <span class="lnr lnr-chevron-left"></span>
  2399.                                                 </button>
  2400.                                                 <button class="img-nav-btn img-nav-right" id="img-right-{{ product.id }}" onclick="nextImage({{ product.id }})" style="display: none;">
  2401.                                                     <span class="lnr lnr-chevron-right"></span>
  2402.                                                 </button>
  2404.                                                 <!-- Indicateurs de position -->
  2405.                                                 <div class="img-indicators" id="img-indicators-{{ product.id }}" style="display: none;">
  2406.                                                     {% for img in product.images %}
  2407.                                                         <span class="indicator" id="indicator-{{ product.id }}-{{ loop.index0 }}" onclick="showImage({{ product.id }}, {{ loop.index0 }})"></span>
  2408.                                                     {% endfor %}
  2409.                                                 </div>
  2410.                                             {% endif %}
  2411.                                         </div>
  2413.                                         <div class="product-details">
  2414.                                             <a href="{{ path('ui_product_show', { slug: product.slug }) }}">
  2415.                                                 <h6>{{ product.name }}</h6>
  2416.                                             </a>
  2418.                                             <!-- Affichage de la boutique -->
  2419.                                             <div class="shop-info">
  2420.                                                 <small class="text-muted">
  2421.                                                     <i class="lnr lnr-store"></i>
  2422.                                                     Vendu par :
  2423.                                                     {% if product.shop is defined and product.shop %}
  2424.                                                         <a href="{{ path('ui_shop_show', {'slug': product.shop.slug}) }}" class="shop-link">
  2425.                                                             {{ product.shop.name }}
  2426.                                                         </a>
  2427.                                                     {% else %}
  2428.                                                         <span class="text-muted">Boutique inconnue</span>
  2429.                                                     {% endif %}
  2430.                                                 </small>
  2431.                                             </div>
  2433.                                             <div class="price">
  2434.                                                 <h6>{{ product.price|number_format(2, '.', ' ') }}
  2435.                                                     HTG</h6>
  2436.                                                 {% if product.compareAtPrice %}
  2437.                                                     <h6 class="l-through">{{ product.compareAtPrice|number_format(2, '.', ' ') }}
  2438.                                                         HTG</h6>
  2439.                                                 {% endif %}
  2440.                                             </div>
  2441.                                             <div class="prd-bottom">
  2442.                                                 <a href="javascript:void(0)" class="social-info add-to-cart" data-product-id="{{ product.id }}" data-qty="1">
  2443.                                                     <span class="ti-bag"></span>
  2444.                                                     <p class="hover-text">+ panier</p>
  2445.                                                 </a>
  2446.                                                 <a href="#" class="social-info wishlist-btn" data-product-id="{{ product.id }}" {% if app.user %} onclick="toggleWishlist({{ product.id }}, this); return false;" {% else %} onclick="alert('Vous devez être connecté pour ajouter aux favoris'); return false;" {% endif %}>
  2447.                                                     <span class="lnr lnr-heart"></span>
  2448.                                                     <p class="hover-text">Favoris</p>
  2449.                                                 </a>
  2450.                                                 <a href="#" class="social-info comparison-btn" data-product-id="{{ product.id }}" {% if app.user %} onclick="toggleComparison({{ product.id }}, this); return false;" {% else %} onclick="alert('Vous devez être connecté pour comparer des produits'); return false;" {% endif %}>
  2451.                                                     <span class="lnr lnr-sync"></span>
  2452.                                                     <p class="hover-text">Comparer</p>
  2453.                                                 </a>
  2454.                                                 <a href="{{ path('ui_product_show', { slug: product.slug }) }}" class="social-info">
  2455.                                                     <span class="lnr lnr-move"></span>
  2456.                                                     <p class="hover-text">Voir plus</p>
  2457.                                                 </a>
  2458.                                             </div>
  2459.                                         </div>
  2460.                                     </div>
  2461.                                 </div>
  2462.                             {% endfor %}
  2463.                         </div>
  2464.                     </div>
  2466.                     <!-- Contrôles de navigation -->
  2467.                     <div class="featured-gallery-controls">
  2468.                         <button class="featured-gallery-nav-btn featured-gallery-prev" id="latestGalleryPrev" aria-label="Précédent">
  2469.                             <i class="lnr lnr-chevron-left"></i>
  2470.                         </button>
  2471.                         <button class="featured-gallery-nav-btn featured-gallery-next" id="latestGalleryNext" aria-label="Suivant">
  2472.                             <i class="lnr lnr-chevron-right"></i>
  2473.                         </button>
  2474.                     </div>
  2476.                     <!-- Bouton charger plus -->
  2477.                     <div class="featured-gallery-load-more text-center mt-4" id="latestGalleryLoadMore" style="display: none;">
  2478.                         <button class="btn btn-outline-primary" id="loadMoreLatestBtn">
  2479.                             <i class="lnr lnr-plus-circle me-2"></i>
  2480.                             Charger plus de produits
  2481.                         </button>
  2482.                     </div>
  2483.                 </div>
  2485.                 <div class="text-center mt-5">
  2486.                     <a href="{{ path('ui_listing') }}" class="btn-view-all-products">
  2487.                         <span>Voir tous les produits</span>
  2488.                         <i class="lnr lnr-arrow-right"></i>
  2489.                     </a>
  2490.                 </div>
  2491.             </div>
  2492.         </section>
  2493.     {% endif %}
  2495.     {% if recommendedProducts|length > 0 %}
  2496.         <section class="py-5">
  2497.             <div class="container">
  2498.                 <div class="section-title text-center mb-5">
  2499.                     <h2>Recommandés pour vous</h2>
  2500.                     <p>Suggestions basées sur votre activité récente et les tendances de MaketOu</p>
  2501.                 </div>
  2502.                 <div class="row g-4">
  2503.                     {% for product in recommendedProducts %}
  2504.                         <div class="col-12 col-sm-6 col-lg-3">
  2505.                             <div class="product-card h-100">
  2506.                                 {% set productImage = product.images[0] ?? 'ui/img/product/p1.jpg' %}
  2507.                                 <div class="product-image" style="background-image:url('{{ asset(productImage) }}');">
  2508.                                     {% if product.isFeatured %}
  2509.                                         <span class="product-badge bg-success">Populaire</span>
  2510.                                     {% endif %}
  2511.                                 </div>
  2512.                                 <div class="p-3">
  2513.                                     <h6 class="mb-2">
  2514.                                         <a href="{{ path('ui_product_show', { slug: product.slug }) }}">{{ product.name }}</a>
  2515.                                     </h6>
  2516.                                     <p class="mb-2 text-muted small">
  2517.                                         <i class="lnr lnr-store"></i>
  2518.                                         {% if product.shop %}
  2519.                                             <a href="{{ path('ui_shop_show', {'slug': product.shop.slug}) }}">{{ product.shop.name }}</a>
  2520.                                         {% else %}
  2521.                                             Boutique non spécifiée
  2522.                                         {% endif %}
  2523.                                     </p>
  2524.                                     <div class="d-flex align-items-center justify-content-between">
  2525.                                         <span class="fw-bold text-primary">{{ product.price|number_format(2, '.', ' ') }} HTG</span>
  2526.                                         <a href="javascript:void(0)" class="btn btn-sm btn-outline-primary add-to-cart" data-product-id="{{ product.id }}" data-qty="1">
  2527.                                             <i class="ti ti-bag"></i>
  2528.                                         </a>
  2529.                                     </div>
  2530.                                 </div>
  2531.                             </div>
  2532.                         </div>
  2533.                     {% endfor %}
  2534.                 </div>
  2535.             </div>
  2536.         </section>
  2537.     {% endif %}
  2539.     {% if recentlyViewedProducts|length > 0 %}
  2540.         <section class="py-5 bg-light">
  2541.             <div class="container">
  2542.                 <div class="section-title text-center mb-5">
  2543.                     <h2>Récemment consultés</h2>
  2544.                     <p>Retrouvez les articles que vous avez explorés dernièrement</p>
  2545.                 </div>
  2546.                 <div class="featured-gallery-wrapper">
  2547.                     <div class="featured-gallery-container">
  2548.                         <div class="featured-gallery-grid">
  2549.                             {% for product in recentlyViewedProducts %}
  2550.                                 <div class="featured-gallery-item">
  2551.                                     <div class="single-product">
  2552.                                         <div class="product-image-container">
  2553.                                             <a href="{{ path('ui_product_show', { slug: product.slug }) }}">
  2554.                                                 {% if product.images is defined and product.images|length > 0 %}
  2555.                                                     <img class="img-fluid main-product-img" src="{{ asset(product.images[0]) }}" alt="{{ product.name }}">
  2556.                                                 {% else %}
  2557.                                                     <img class="img-fluid main-product-img" src="{{ asset('ui/img/product/p1.jpg') }}" alt="{{ product.name }}">
  2558.                                                 {% endif %}
  2559.                                             </a>
  2560.                                         </div>
  2561.                                         <div class="product-details">
  2562.                                             <a href="{{ path('ui_product_show', { slug: product.slug }) }}">
  2563.                                                 <h6>{{ product.name }}</h6>
  2564.                                             </a>
  2565.                                             <div class="price">
  2566.                                                 <h6>{{ product.price|number_format(2, '.', ' ') }} HTG</h6>
  2567.                                             </div>
  2568.                                             <div class="prd-bottom">
  2569.                                                 <a href="javascript:void(0)" class="social-info add-to-cart" data-product-id="{{ product.id }}" data-qty="1">
  2570.                                                     <span class="ti-bag"></span>
  2571.                                                     <p class="hover-text">+ panier</p>
  2572.                                                 </a>
  2573.                                                 <a href="{{ path('ui_product_show', { slug: product.slug }) }}" class="social-info">
  2574.                                                     <span class="lnr lnr-move"></span>
  2575.                                                     <p class="hover-text">Voir</p>
  2576.                                                 </a>
  2577.                                             </div>
  2578.                                         </div>
  2579.                                     </div>
  2580.                                 </div>
  2581.                             {% endfor %}
  2582.                         </div>
  2583.                     </div>
  2584.                 </div>
  2585.             </div>
  2586.         </section>
  2587.     {% endif %}
  2589.     <!-- Fonctionnalités -->
  2590.     <section class="py-5">
  2591.         <div class="container">
  2592.             <div class="section-title">
  2593.                 <h2>Pourquoi choisir MaketOu ?</h2>
  2594.                 <p>Découvrez les avantages de notre plateforme</p>
  2595.             </div>
  2596.             <div class="row">
  2597.                 <div class="col-lg-3 col-md-6 mb-4">
  2598.                     <div class="feature-card">
  2599.                         <div class="feature-icon">
  2600.                             <i class="lnr lnr-rocket"></i>
  2601.                         </div>
  2602.                         <h5>Livraison rapide</h5>
  2603.                         <p>Recevez vos commandes rapidement avec notre réseau de livraison optimisé</p>
  2604.                     </div>
  2605.                 </div>
  2606.                 <div class="col-lg-3 col-md-6 mb-4">
  2607.                     <div class="feature-card">
  2608.                         <div class="feature-icon">
  2609.                             <i class="lnr lnr-lock"></i>
  2610.                         </div>
  2611.                         <h5>Paiement sécurisé</h5>
  2612.                         <p>Vos transactions sont protégées avec les dernières technologies de sécurité</p>
  2613.                     </div>
  2614.                 </div>
  2615.                 <div class="col-lg-3 col-md-6 mb-4">
  2616.                     <div class="feature-card">
  2617.                         <div class="feature-icon">
  2618.                             <i class="lnr lnr-phone"></i>
  2619.                         </div>
  2620.                         <h5>Support 24/7</h5>
  2621.                         <p>Notre équipe est disponible pour vous aider à tout moment</p>
  2622.                     </div>
  2623.                 </div>
  2624.                 <div class="col-lg-3 col-md-6 mb-4">
  2625.                     <div class="feature-card">
  2626.                         <div class="feature-icon">
  2627.                             <i class="lnr lnr-undo"></i>
  2628.                         </div>
  2629.                         <h5>Retour facile</h5>
  2630.                         <p>Politique de retour flexible pour votre tranquillité d'esprit</p>
  2631.                     </div>
  2632.                 </div>
  2633.             </div>
  2634.         </div>
  2635.     </section>
  2637.     <!-- Newsletter -->
  2638.     <section class="newsletter-section-modern py-5">
  2639.         <div class="container">
  2640.             <div class="row justify-content-center">
  2641.                 <div class="col-lg-10">
  2642.                     <div class="newsletter-card">
  2643.                         <div class="row align-items-center">
  2644.                             <div class="col-lg-6 text-center text-lg-start mb-4 mb-lg-0">
  2645.                                 <div class="newsletter-icon mb-3">
  2646.                                     <i class="lnr lnr-envelope" style="font-size: 4rem; color: #ffa200;"></i>
  2647.                                 </div>
  2648.                                 <h2 class="newsletter-title mb-3">Restez informé des dernières nouveautés</h2>
  2649.                                 <p class="newsletter-description mb-0">
  2650.                                     Inscrivez-vous à notre newsletter pour recevoir les offres exclusives, 
  2651.                                                                                                                                                                                 les nouveaux produits et les meilleures promotions directement dans votre boîte mail.
  2652.                                 </p>
  2653.                             </div>
  2654.                             <div class="col-lg-6">
  2655.                                 <form class="newsletter-form-modern" id="newsletterFormHome">
  2656.                                     <div class="newsletter-input-wrapper">
  2657.                                         <input type="email" class="newsletter-input" placeholder="Votre adresse email" required name="email">
  2658.                                         <button class="newsletter-button" type="submit">
  2659.                                             <i class="lnr lnr-arrow-right me-2"></i>
  2660.                                             S'abonner
  2661.                                         </button>
  2662.                                     </div>
  2663.                                     <p class="newsletter-privacy mt-3 text-center">
  2664.                                         <small>
  2665.                                             <i class="lnr lnr-lock me-1"></i>
  2666.                                             Vos données sont sécurisées. Pas de spam, désinscription facile.
  2667.                                         </small>
  2668.                                     </p>
  2669.                                 </form>
  2670.                             </div>
  2671.                         </div>
  2672.                     </div>
  2673.                 </div>
  2674.             </div>
  2675.         </div>
  2676.     </section>
  2678.     <!-- Call to Action -->
  2679.     <section class="cta-section-modern py-5">
  2680.         <div class="container">
  2681.             <div class="cta-card">
  2682.                 <div class="row align-items-center">
  2683.                     <div class="col-lg-6 mb-4 mb-lg-0">
  2684.                         <div class="cta-content">
  2685.                             <span class="cta-badge">
  2686.                                 <i class="lnr lnr-rocket me-2"></i>
  2687.                                 Commencez dès aujourd'hui
  2688.                             </span>
  2689.                             <h2 class="cta-title mb-3">Prêt à commencer ?</h2>
  2690.                             <p class="cta-description mb-4">
  2691.                                 Que vous soyez
  2692.                                 <strong>acheteur</strong>
  2693.                                 ou
  2694.                                 <strong>vendeur</strong>, MaketOu vous offre la plateforme idéale 
  2695.                                                                                                                                                                             pour vos besoins commerciaux en Haïti. Rejoignez des milliers d'utilisateurs satisfaits !
  2696.                             </p>
  2697.                             <div class="cta-features mb-4">
  2698.                                 <div class="cta-feature-item">
  2699.                                     <i class="lnr lnr-checkmark-circle"></i>
  2700.                                     <span>Plateforme 100% sécurisée</span>
  2701.                                 </div>
  2702.                                 <div class="cta-feature-item">
  2703.                                     <i class="lnr lnr-checkmark-circle"></i>
  2704.                                     <span>Support client 24/7</span>
  2705.                                 </div>
  2706.                                 <div class="cta-feature-item">
  2707.                                     <i class="lnr lnr-checkmark-circle"></i>
  2708.                                     <span>Paiements multiples</span>
  2709.                                 </div>
  2710.                             </div>
  2711.                             <div class="cta-buttons">
  2712.                                 <button type="button" class="btn cta-button-primary" onclick="openReadyModal()">
  2713.                                     <i class="lnr lnr-rocket me-2"></i>
  2714.                                     Prêt à commencer ?
  2715.                                 </button>
  2716.                                 <a href="{{ path('ui_listing') }}" class="btn cta-button-secondary">
  2717.                                     <i class="lnr lnr-magnifier me-2"></i>
  2718.                                     Voir les produits
  2719.                                 </a>
  2720.                             </div>
  2721.                         </div>
  2722.                     </div>
  2723.                     <div class="col-lg-6">
  2724.                         <div class="cta-image-wrapper">
  2725.                             <div class="cta-decoration"></div>
  2726.                             <img src="{{ asset('Start.png') }}" alt="MaketOu" class="cta-image">
  2727.                         </div>
  2728.                     </div>
  2729.                 </div>
  2730.             </div>
  2731.         </div>
  2732.     </section>
  2733. {% endblock %}
  2735. {% block javascripts %}
  2736.     <script src="{{ asset('ui/js/product-unified.js') }}"></script>
  2737.     <script>
  2738.         window.openReadyModal = function () {
  2739.             const modalEl = document.getElementById('readyModal');
  2740.             if (!modalEl) {
  2741.                 console.error('readyModal introuvable');
  2742.                 return;
  2743.             }
  2744.             if (typeof bootstrap === 'undefined' || !bootstrap.Modal) {
  2745.                 console.error('Bootstrap Modal non chargé');
  2746.                 return;
  2747.             }
  2748.             const modalInstance = bootstrap.Modal.getOrCreateInstance(modalEl);
  2749.             modalInstance.show();
  2750.         };
  2751.     </script>
  2752.     <script>
  2753.         // Variables globales pour la navigation des images (si pas déjà définies)
  2754.         if (typeof productImages === 'undefined') {
  2755.             window.productImages = {};
  2756.             window.currentImageIndex = {};
  2757.         }
  2759. // Initialisation des données d'images pour les produits "Produits en vedette"
  2760. {% if featuredProducts is defined %}
  2761. {% for product in featuredProducts %}
  2762. {% if product.images is defined and product.images|length > 0 %}
  2763. productImages[{{ product.id }}] = [{% for img in product.images %}'{{ asset(img) }}'{% if not loop.last %},{% endif %}{% endfor %}];
  2764. currentImageIndex[{{ product.id }}] = 0;{% endif %}{% endfor %}{% endif %}
  2766. // Initialisation des données d'images pour les produits "Nouveautés"
  2767. {% if latestProducts is defined %}
  2768. {% for product in latestProducts %}
  2769. {% if product.images is defined and product.images|length > 0 %}
  2770. productImages[{{ product.id }}] = [{% for img in product.images %}'{{ asset(img) }}'{% if not loop.last %},{% endif %}{% endfor %}];
  2771. currentImageIndex[{{ product.id }}] = 0;{% endif %}{% endfor %}{% endif %}
  2773. console.log('SCRIPT LOADED - Featured Gallery');
  2774. (function () {
  2775.     'use strict';
  2777.     const SECTION_CONFIGS = [
  2778.         { grid: '#featuredGalleryGrid', prev: '#featuredGalleryPrev', next: '#featuredGalleryNext' },
  2779.         { grid: '#latestGalleryGrid', prev: '#latestGalleryPrev', next: '#latestGalleryNext' }
  2780.     ];
  2782.     function triggerRipple(button) {
  2783.         button.classList.remove('btn-ripple');
  2784.         void button.offsetWidth;
  2785.         button.classList.add('btn-ripple');
  2786.         setTimeout(() => button.classList.remove('btn-ripple'), 350);
  2787.     }
  2789.     function initSectionCarousel(config) {
  2790.         const $grid = $(config.grid);
  2791.         if (!$grid.length) {
  2792.             console.warn('Grid not found:', config.grid);
  2793.             return;
  2794.         }
  2796.         if (typeof $.fn.owlCarousel !== 'function') {
  2797.             console.warn('OwlCarousel n\'est pas chargé pour', config.grid);
  2798.             return;
  2799.         }
  2801.         // Si déjà initialisé, récupérer l'instance existante
  2802.         let owlInstance;
  2803.         if ($grid.hasClass('owl-loaded')) {
  2804.             owlInstance = $grid.data('owl.carousel');
  2805.             console.log('OwlCarousel already initialized for', config.grid, owlInstance);
  2806.         } else {
  2807.             if (!$grid.hasClass('owl-carousel')) {
  2808.                 $grid.addClass('owl-carousel');
  2809.             }
  2811.             owlInstance = $grid.owlCarousel({
  2812.                 loop: true,
  2813.                 margin: 30,
  2814.                 autoplay: true,
  2815.                 autoplayTimeout: 4800,
  2816.                 autoplayHoverPause: true,
  2817.                 smartSpeed: 650,
  2818.                 nav: false,
  2819.                 dots: false,
  2820.                 responsive: {
  2821.                     0: { items: 1, margin: 15 },
  2822.                     576: { items: 1.2, margin: 18 },
  2823.                     768: { items: 2, margin: 20 },
  2824.                     992: { items: 3, margin: 25 },
  2825.                     1400: { items: 4, margin: 30 }
  2826.                 }
  2827.             });
  2828.             console.log('OwlCarousel initialized for', config.grid, owlInstance);
  2829.         }
  2831.         const $prev = $(config.prev);
  2832.         const $next = $(config.next);
  2834.         if ($prev.length) {
  2835.             $prev.off('click.carouselNav').on('click.carouselNav', function (e) {
  2836.                 e.preventDefault();
  2837.                 e.stopPropagation();
  2838.                 console.log('Prev clicked for', config.grid, 'Instance:', owlInstance);
  2839.                 if (owlInstance) {
  2840.                     try {
  2841.                         $grid.trigger('prev.owl.carousel');
  2842.                         triggerRipple(this);
  2843.                     } catch (err) {
  2844.                         console.error('Error triggering prev:', err);
  2845.                     }
  2846.                 } else {
  2847.                     console.error('OwlCarousel instance not available');
  2848.                 }
  2849.             });
  2850.         } else {
  2851.             console.warn('Prev button not found:', config.prev);
  2852.         }
  2854.         if ($next.length) {
  2855.             $next.off('click.carouselNav').on('click.carouselNav', function (e) {
  2856.                 e.preventDefault();
  2857.                 e.stopPropagation();
  2858.                 console.log('Next clicked for', config.grid, 'Instance:', owlInstance);
  2859.                 if (owlInstance) {
  2860.                     try {
  2861.                         $grid.trigger('next.owl.carousel');
  2862.                         triggerRipple(this);
  2863.                     } catch (err) {
  2864.                         console.error('Error triggering next:', err);
  2865.                     }
  2866.                 } else {
  2867.                     console.error('OwlCarousel instance not available');
  2868.                 }
  2869.             });
  2870.         } else {
  2871.             console.warn('Next button not found:', config.next);
  2872.         }
  2873.     }
  2875.     function ensureOwl(attempt = 0) {
  2876.         if (window.jQuery && typeof $.fn !== 'undefined' && typeof $.fn.owlCarousel === 'function') {
  2877.             SECTION_CONFIGS.forEach(initSectionCarousel);
  2878.         } else if (attempt < 15) {
  2879.             setTimeout(() => ensureOwl(attempt + 1), 200);
  2880.         } else {
  2881.             console.warn('OwlCarousel non disponible après plusieurs tentatives');
  2882.         }
  2883.     }
  2885.     document.addEventListener('DOMContentLoaded', function () {
  2886.         ensureOwl();
  2887.     });
  2888. })();
  2890. document.addEventListener('DOMContentLoaded', function () { // Animation des cartes au scroll
  2891. const observerOptions = {
  2892. threshold: 0.1,
  2893. rootMargin: '0px 0px -50px 0px'
  2894. };
  2896. const observer = new IntersectionObserver(function (entries) {
  2897. entries.forEach(entry => {
  2898. if (entry.isIntersecting) {
  2899. entry.target.style.opacity = '1';
  2900. entry.target.style.transform = 'translateY(0)';
  2901. }
  2902. });
  2903. }, observerOptions);
  2905. // Observer toutes les cartes
  2906. document.querySelectorAll('.stats-card, .category-card, .product-card, .feature-card').forEach(card => {
  2907. card.style.opacity = '0';
  2908. card.style.transform = 'translateY(30px)';
  2909. card.style.transition = 'all 0.6s ease';
  2910. observer.observe(card);
  2911. });
  2913. // Compteur animé pour les statistiques
  2914. function animateCounter(element, target, duration = 2000) {
  2915. let start = 0;
  2916. const increment = target / (duration / 16);
  2918. function updateCounter() {
  2919. start += increment;
  2920. if (start < target) {
  2921. element.textContent = Math.floor(start).toLocaleString();
  2922. requestAnimationFrame(updateCounter);
  2923. } else {
  2924. element.textContent = target.toLocaleString();
  2925. }
  2926. }
  2928. updateCounter();
  2929. }
  2931. // Animer les compteurs quand ils sont visibles
  2932. const statsObserver = new IntersectionObserver(function (entries) {
  2933. entries.forEach(entry => {
  2934. if (entry.isIntersecting) {
  2935. const numberElement = entry.target.querySelector('.stats-number');
  2936. const target = parseInt(numberElement.textContent.replace(/,/g, ''));
  2937. animateCounter(numberElement, target);
  2938. statsObserver.unobserve(entry.target);
  2939. }
  2940. });
  2941. });
  2943. document.querySelectorAll('.stats-card').forEach(card => {
  2944. statsObserver.observe(card);
  2945. });
  2947. // Gestion de la newsletter
  2948. const newsletterForm = document.querySelector('.newsletter-form');
  2949. if (newsletterForm) {
  2950. newsletterForm.addEventListener('submit', function (e) {
  2951. e.preventDefault();
  2952. const email = this.querySelector('input[type="email"]').value;
  2953. const button = this.querySelector('button');
  2954. const originalText = button.innerHTML;
  2956. // Désactiver le bouton
  2957. button.disabled = true;
  2958. button.innerHTML = '<i class="lnr lnr-spinner me-2"></i>Inscription...';
  2960. // Envoyer la requête
  2961. fetch('{{ path("ui_newsletter_subscribe") }}', {
  2962. method: 'POST',
  2963. headers: {
  2964. 'Content-Type': 'application/x-www-form-urlencoded',
  2965. 'X-Requested-With': 'XMLHttpRequest'
  2966. },
  2967. body: 'email=' + encodeURIComponent(email)
  2968. }).then(response => response.json()).then(data => {
  2969. if (data.success) {
  2970. button.innerHTML = '<i class="lnr lnr-check me-2"></i>Inscription réussie !';
  2971. button.classList.remove('btn-warning');
  2972. button.classList.add('btn-success');
  2973. this.reset();
  2974. } else {
  2975. button.innerHTML = '<i class="lnr lnr-warning me-2"></i>Erreur';
  2976. button.classList.remove('btn-warning');
  2977. button.classList.add('btn-danger');
  2978. }
  2980. setTimeout(() => {
  2981. button.innerHTML = originalText;
  2982. button.classList.remove('btn-success', 'btn-danger');
  2983. button.classList.add('btn-warning');
  2984. button.disabled = false;
  2985. }, 3000);
  2986. }).catch(error => {
  2987. console.error('Erreur:', error);
  2988. button.innerHTML = '<i class="lnr lnr-warning me-2"></i>Erreur';
  2989. button.classList.remove('btn-warning');
  2990. button.classList.add('btn-danger');
  2992. setTimeout(() => {
  2993. button.innerHTML = originalText;
  2994. button.classList.remove('btn-danger');
  2995. button.classList.add('btn-warning');
  2996. button.disabled = false;
  2997. }, 3000);
  2998. });
  2999. });
  3000. }
  3001. });
  3003. // Effet parallaxe léger pour le hero
  3004. window.addEventListener('scroll', function () {
  3005. const scrolled = window.pageYOffset;
  3006. const hero = document.querySelector('.hero-banner');
  3007. if (hero) {
  3008. hero.style.transform = `translateY(${
  3009. scrolled * 0.5
  3010. }px)`;
  3011. }
  3012. });
  3013. });
  3015. // Fonction pour afficher toutes les catégories
  3016. function showAllCategories () {
  3017. const container = document.getElementById('productCategoriesContainer');
  3018. const btn = document.getElementById('showAllCategoriesBtn');{% if allCategories|length > 8 %}{% for category in allCategories %}{% if loop.index > 8 %}const categoryHtml {{ loop.index }} = `
  3019.         <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
  3020.             <div class="category-card-custom">
  3021.                 <div class="category-image-wrapper">
  3022.                     <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 %}')">
  3023.                         <div class="category-overlay-custom">
  3024.                             <div class="category-icon-wrapper">
  3025.                                 <i class="lnr lnr-tag" style="font-size: 3rem;"></i>
  3026.                                 <h4 class="mt-3">{{ category.name }}</h4>
  3027.                             </div>
  3028.                         </div>
  3029.                     </div>
  3030.                 </div>
  3031.                 <div class="category-content p-3">
  3032.                     <h5 class="mb-2">{{ category.name }}</h5>
  3033.                     {% if category.description %}
  3034.                         <p class="text-muted mb-3 small">{{ category.description|striptags|slice(0, 60) }}{% if category.description|striptags|length > 60 %}...{% endif %}</p>
  3035.                     {% endif %}
  3036.                     <a href="{{ path('ui_listing', {'category': category.slug}) }}" class="btn btn-primary-custom btn-sm w-100">
  3037.                         Voir les produits
  3038.                     </a>
  3039.                 </div>
  3040.             </div>
  3041.         </div>
  3042.     `;
  3043. container.insertAdjacentHTML('beforeend', categoryHtml {{ loop.index }});{% endif %}{% endfor %}{% endif %}if (btn) 
  3044. btn.style.display = 'none';
  3048. }
  3050. // Fonction pour afficher toutes les catégories de boutiques
  3051. function showAllShopCategories () {
  3052. const container = document.getElementById('shopCategoriesContainer');
  3053. const btn = document.querySelector('[onclick="showAllShopCategories()"]') ?. parentElement;{% if allShopCategories|length > 6 %}{% for shopCategory in allShopCategories %}{% if loop.index > 6 %}const shopCategoryHtml {{ loop.index }} = `
  3054.         <div class="col-lg-4 col-md-6 mb-4">
  3055.             <a href="{{ path('ui_shops_list') }}?category={{ shopCategory.slug }}" class="text-decoration-none" style="display: block;">
  3056.                 <div class="category-card-custom shop-category-clickable">
  3057.                     <div class="category-image-wrapper">
  3058.                         <div class="category-image" style="background-image: url('{% if shopCategory.bannerImage %}{{ asset(shopCategory.bannerImage) }}{% else %}{{ asset('ui/img/category/shop-' ~ loop.index ~ '.jpg') }}{% endif %}')">
  3059.                             <div class="category-overlay-custom">
  3060.                                 <div class="category-icon-wrapper">
  3061.                                     <i class="lnr lnr-store" style="font-size: 3rem;"></i>
  3062.                                     <h4 class="mt-3">{{ shopCategory.name }}</h4>
  3063.                                     {% if shopCategory.description %}
  3064.                                         <p class="mt-2 px-3">{{ shopCategory.description|striptags|slice(0, 100) }}{% if shopCategory.description|striptags|length > 100 %}...{% endif %}</p>
  3065.                                     {% endif %}
  3066.                                 </div>
  3067.                             </div>
  3068.                         </div>
  3069.                     </div>
  3070.                     <div class="category-content p-3">
  3071.                         <h5 class="mb-2">{{ shopCategory.name }}</h5>
  3072.                         {% if shopCategory.description %}
  3073.                             <p class="text-muted mb-3 small">{{ shopCategory.description|striptags|slice(0, 80) }}{% if shopCategory.description|striptags|length > 80 %}...{% endif %}</p>
  3074.                         {% endif %}
  3075.                         <span class="btn btn-primary-custom btn-sm w-100">
  3076.                             Voir les boutiques <i class="lnr lnr-arrow-right ms-2"></i>
  3077.                         </span>
  3078.                     </div>
  3079.                 </div>
  3080.             </a>
  3081.         </div>
  3082.     `;
  3083. container.insertAdjacentHTML('beforeend', shopCategoryHtml {{ loop.index }});{% endif %}{% endfor %}{% endif %}if (btn) 
  3084. btn.style.display = 'none';
  3088. }
  3090.     // Initialiser les carousels
  3091.     <script src="{{ asset('ui/js/product-unified.js') }}"></script>
  3092.     <script>
  3093.         document.addEventListener('DOMContentLoaded', function() {
  3094.             // Init featured products images
  3095.             {% if featuredProducts is defined %}
  3096.                 {% for product in featuredProducts %}
  3097.                     {% if product.images is defined and product.images|length > 0 %}
  3098.                         if (typeof initProductImages === 'function') {
  3099.                             initProductImages({{ product.id }}, {{ product.images|json_encode|raw }});
  3100.                         }
  3101.                     {% endif %}
  3102.                 {% endfor %}
  3103.             {% endif %}
  3105.             // Init latest products images
  3106.             {% if latestProducts is defined %}
  3107.                 {% for product in latestProducts %}
  3108.                     {% if product.images is defined and product.images|length > 0 %}
  3109.                         if (typeof initProductImages === 'function') {
  3110.                             initProductImages({{ product.id }}, {{ product.images|json_encode|raw }});
  3111.                         }
  3112.                     {% endif %}
  3113.                 {% endfor %}
  3114.             {% endif %}
  3115.         });
  3116.     </script>
  3117.     <script>
  3118.     $(document).ready(function () { // Carousel bannière principale
  3119. if ($('.active-banner-slider').length) {
  3120. $('.active-banner-slider').owlCarousel({
  3121. items: 1,
  3122. loop: true,
  3123. autoplay: true,
  3124. autoplayTimeout: 6000,
  3125. autoplayHoverPause: true,
  3126. nav: true,
  3127. dots: true,
  3128. navText: [
  3129. '<i class="lnr lnr-chevron-left"></i>', '<i class="lnr lnr-chevron-right"></i>'
  3130. ],
  3131. smartSpeed: 1000,
  3132. animateOut: 'fadeOut',
  3133. animateIn: 'fadeIn',
  3134. responsive: {
  3135. 0: {
  3136. items: 1,
  3137. nav: true,
  3138. dots: true
  3139. },
  3140. 768: {
  3141. items: 1,
  3142. nav: true,
  3143. dots: true
  3144. },
  3145. 992: {
  3146. items: 1,
  3147. nav: true,
  3148. dots: true
  3149. }
  3150. }
  3151. });
  3152. }
  3154. // Animation d'apparition pour les cartes produits
  3155. const observerOptions = {
  3156. threshold: 0.1,
  3157. rootMargin: '0px 0px -50px 0px'
  3158. };
  3160. const productObserver = new IntersectionObserver(function (entries) {
  3161. entries.forEach(entry => {
  3162. if (entry.isIntersecting) {
  3163. entry.target.style.opacity = '1';
  3164. entry.target.style.transform = 'translateY(0)';
  3165. }
  3166. });
  3167. }, observerOptions);
  3169. document.querySelectorAll('.product-card-modern').forEach((card, index) => {
  3170. card.style.opacity = '0';
  3171. card.style.transform = 'translateY(20px)';
  3172. card.style.transition = `opacity 0.6s ease ${
  3173. index * 0.1
  3174. }s, transform 0.6s ease ${
  3175. index * 0.1
  3176. }s`;
  3177. productObserver.observe(card);
  3178. });
  3179. });
  3180.     </script>
  3182.     <!-- Modal "Prêt à commencer ?" -->
  3183.     <div class="modal fade" id="readyModal" tabindex="-1">
  3184.         <div class="modal-dialog modal-dialog-centered">
  3185.             <div class="modal-content">
  3186.                 <div class="modal-header">
  3187.                     <h5 class="modal-title">
  3188.                         <i class="lnr lnr-rocket me-2"></i>Prêt à commencer ?
  3189.                     </h5>
  3190.                     <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
  3191.                 </div>
  3192.                 <div class="modal-body">
  3193.                     {% if app.user %}
  3194.                         {% if app.user.kycStatus == 'verified' %}
  3195.                             <div class="text-center">
  3196.                                 <i class="lnr lnr-checkmark-circle" style="font-size: 4rem; color: #28a745;"></i>
  3197.                                 <h4 class="mt-3">Votre compte est vérifié !</h4>
  3198.                                 <p class="text-muted">Vous pouvez commencer à utiliser MaketOu en toute sérénité.</p>
  3199.                                 <div class="mt-4">
  3200.                                     <a href="{{ path('seller_index') }}" class="btn btn-primary me-2">
  3201.                                         <i class="lnr lnr-store me-1"></i>Ouvrir ma boutique
  3202.                                     </a>
  3203.                                     <a href="{{ path('ui_listing') }}" class="btn btn-outline-primary">
  3204.                                         <i class="lnr lnr-magnifier me-1"></i>Voir les produits
  3205.                                     </a>
  3206.                                 </div>
  3207.                             </div>
  3208.                         {% else %}
  3209.                             <div class="text-center">
  3210.                                 <i class="lnr lnr-shield" style="font-size: 4rem; color: #ffa200;"></i>
  3211.                                 <h4 class="mt-3">Vérification requise</h4>
  3212.                                 <p class="text-muted">Pour utiliser toutes les fonctionnalités de MaketOu, vous devez compléter votre vérification KYC.</p>
  3213.                                 <div class="mt-4">
  3214.                                     <a href="{{ path('ui_account_kyc') }}" class="btn btn-primary btn-lg">
  3215.                                         <i class="lnr lnr-checkmark-circle me-1"></i> <span class="d-none d-md-inline">Commencer la vérification</span>
  3216.                                     </a>
  3217.                                 </div>
  3218.                             </div>
  3219.                         {% endif %}
  3220.                     {% else %}
  3221.                         <div class="text-center">
  3222.                             <i class="lnr lnr-user" style="font-size: 4rem; color: #007bff;"></i>
  3223.                             <h4 class="mt-3">Connectez-vous pour commencer</h4>
  3224.                             <p class="text-muted">Créez un compte ou connectez-vous pour accéder à toutes les fonctionnalités de MaketOu.</p>
  3225.                             <div class="mt-4">
  3226.                                 <a href="{{ path('ui_app_login') }}" class="btn btn-primary btn-lg me-2">
  3227.                                     <i class="lnr lnr-enter me-1"></i> Se connecter
  3228.                                 </a>
  3229.                                 <a href="{{ path('ui_app_register') }}" class="btn btn-outline-primary btn-lg">
  3230.                                     <i class="lnr lnr-user-plus me-1"></i> S'inscrire
  3231.                                 </a>
  3232.                             </div>
  3233.                         </div>
  3234.                     {% endif %}
  3235.                 </div>
  3236.             </div>
  3237.         </div>
  3238.     </div>
  3239. {% endblock %}