var/cache/dev/twig/ba/ba7d0602f8daf0b93d99ecac1b726ca3.php line 56

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\CoreExtension;
  7. use Twig\Extension\SandboxExtension;
  8. use Twig\Markup;
  9. use Twig\Sandbox\SecurityError;
  10. use Twig\Sandbox\SecurityNotAllowedTagError;
  11. use Twig\Sandbox\SecurityNotAllowedFilterError;
  12. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  13. use Twig\Source;
  14. use Twig\Template;
  15. use Twig\TemplateWrapper;
  17. /* home/shop.html.twig */
  18. class __TwigTemplate_7992206d50dde9eda3e4c58b92b00147 extends Template
  19. {
  20.     private Source $source;
  21.     /**
  22.      * @var array<string, Template>
  23.      */
  24.     private array $macros = [];
  26.     public function __construct(Environment $env)
  27.     {
  28.         parent::__construct($env);
  30.         $this->source = $this->getSourceContext();
  32.         $this->blocks = [
  33.             'title' => [$this, 'block_title'],
  34.             'stylesheets' => [$this, 'block_stylesheets'],
  35.             'body' => [$this, 'block_body'],
  36.             'javascripts' => [$this, 'block_javascripts'],
  37.         ];
  38.     }
  40.     protected function doGetParent(array $context): bool|string|Template|TemplateWrapper
  41.     {
  42.         // line 1
  43.         return "base_home.html.twig";
  44.     }
  46.     protected function doDisplay(array $context, array $blocks = []): iterable
  47.     {
  48.         $macros = $this->macros;
  49.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  50.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "home/shop.html.twig"));
  52.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  53.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "home/shop.html.twig"));
  55.         $this->parent = $this->load("base_home.html.twig", 1);
  56.         yield from $this->parent->unwrap()->yield($context, array_merge($this->blocks, $blocks));
  57.         
  58.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  60.         
  61.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  63.     }
  65.     // line 3
  66.     /**
  67.      * @return iterable<null|scalar|\Stringable>
  68.      */
  69.     public function block_title(array $context, array $blocks = []): iterable
  70.     {
  71.         $macros = $this->macros;
  72.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  73.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  75.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  76.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  78.         // line 4
  79.         yield "\t";
  80.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "name", [], "any", false, false, false, 4), "html", null, true);
  81.         yield "
  82. \t| MaketOu
  83. ";
  84.         
  85.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  87.         
  88.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  90.         yield from [];
  91.     }
  93.     // line 8
  94.     /**
  95.      * @return iterable<null|scalar|\Stringable>
  96.      */
  97.     public function block_stylesheets(array $context, array $blocks = []): iterable
  98.     {
  99.         $macros = $this->macros;
  100.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  101.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  103.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  104.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  106.         // line 9
  107.         yield "\t<style>
  108. \t\t/* Style pour la description formatée de la boutique */
  109. \t\t.shop-description-content {
  110. \t\t\tline-height: 1.6;
  111. \t\t\tcolor: #333;
  112. \t\t}
  113. \t\t
  114. \t\t.shop-description-content h1, 
  115. \t\t.shop-description-content h2, 
  116. \t\t.shop-description-content h3 {
  117. \t\t\tcolor: #ffa200;
  118. \t\t\tmargin-top: 1.5rem;
  119. \t\t\tmargin-bottom: 1rem;
  120. \t\t}
  121. \t\t
  122. \t\t.shop-description-content h1 { font-size: 1.75rem; }
  123. \t\t.shop-description-content h2 { font-size: 1.5rem; }
  124. \t\t.shop-description-content h3 { font-size: 1.25rem; }
  125. \t\t
  126. \t\t.shop-description-content ul, 
  127. \t\t.shop-description-content ol {
  128. \t\t\tmargin-left: 1.5rem;
  129. \t\t\tmargin-bottom: 1rem;
  130. \t\t}
  131. \t\t
  132. \t\t.shop-description-content li {
  133. \t\t\tmargin-bottom: 0.5rem;
  134. \t\t}
  135. \t\t
  136. \t\t.shop-description-content p {
  137. \t\t\tmargin-bottom: 1rem;
  138. \t\t}
  139. \t\t
  140. \t\t.shop-description-content a {
  141. \t\t\tcolor: #ffa200;
  142. \t\t\ttext-decoration: underline;
  143. \t\t}
  144. \t\t
  145. \t\t.shop-description-content a:hover {
  146. \t\t\tcolor: #e8910a;
  147. \t\t}
  148. \t\t
  149. \t\t.shop-description-content img {
  150. \t\t\tmax-width: 100%;
  151. \t\t\theight: auto;
  152. \t\t\tborder-radius: 8px;
  153. \t\t\tmargin: 1rem 0;
  154. \t\t}
  155. \t\t
  156. \t\t.shop-description-content blockquote {
  157. \t\t\tborder-left: 4px solid #ffa200;
  158. \t\t\tpadding-left: 1rem;
  159. \t\t\tmargin: 1rem 0;
  160. \t\t\tfont-style: italic;
  161. \t\t\tcolor: #666;
  162. \t\t}
  163. \t\t
  164. \t\t.shop-description-content table {
  165. \t\t\twidth: 100%;
  166. \t\t\tborder-collapse: collapse;
  167. \t\t\tmargin: 1rem 0;
  168. \t\t}
  169. \t\t
  170. \t\t.shop-description-content table th,
  171. \t\t.shop-description-content table td {
  172. \t\t\tborder: 1px solid #ddd;
  173. \t\t\tpadding: 0.5rem;
  174. \t\t}
  175. \t\t
  176. \t\t.shop-description-content table th {
  177. \t\t\tbackground-color: #f8f9fa;
  178. \t\t\tfont-weight: bold;
  179. \t\t}
  180. \t\t
  181. \t\t/* Design eBay-like intégré avec Karma - Pleine largeur */
  182. \t\t.shop-header {
  183. \t\t\tbackground: #f7f7f7;
  184. \t\t\tborder-bottom: 1px solid #e1e1e1;
  185. \t\t\tpadding: 0;
  186. \t\t\tmargin-bottom: 0;
  187. \t\t\twidth: 100%;
  188. \t\t\tposition: relative;
  189. \t\t}
  191. \t\t.shop-banner {
  192. \t\t\twidth: 100%;
  193. \t\t\theight: 350px;
  194. \t\t\tbackground-size: cover;
  195. \t\t\tbackground-position: center;
  196. \t\t\tbackground-repeat: no-repeat;
  197. \t\t\tposition: relative;
  198. \t\t\tdisplay: flex;
  199. \t\t\talign-items: center;
  200. \t\t\tjustify-content: center;
  201. \t\t}
  203. \t\t/* Carrousel eBay-style amélioré */
  204. \t\t.shop-carousel-ebay {
  205. \t\t\twidth: 100%;
  206. \t\t\theight: 450px;
  207. \t\t\tposition: relative;
  208. \t\t\toverflow: hidden;
  209. \t\t\tbackground: #f8f9fa;
  210. \t\t\tborder-radius: 8px;
  211. \t\t\tbox-sizing: border-box;
  212. \t\t\tmargin-bottom: 0;
  213. \t\t\ttransition: height 0.3s ease;
  214. \t\t}
  216. \t\t.carousel-container {
  217. \t\t\tposition: relative;
  218. \t\t\twidth: 100%;
  219. \t\t\theight: 100%;
  220. \t\t}
  222. \t\t.carousel-slide {
  223. \t\t\tposition: absolute;
  224. \t\t\ttop: 0;
  225. \t\t\tleft: 0;
  226. \t\t\twidth: 100%;
  227. \t\t\theight: 100%;
  228. \t\t\tbackground-size: cover;
  229. \t\t\tbackground-position: center;
  230. \t\t\tbackground-repeat: no-repeat;
  231. \t\t\topacity: 0;
  232. \t\t\ttransition: opacity 0.6s ease-in-out;
  233. \t\t}
  234. \t\t
  235. \t\t/* Amélioration responsive pour les images */
  236. \t\t@media (max-width: 768px) {
  237. \t\t\t.carousel-slide {
  238. \t\t\t\tbackground-size: cover;
  239. \t\t\t\tbackground-position: center center;
  240. \t\t\t}
  241. \t\t}
  243. \t\t.carousel-slide.active {
  244. \t\t\topacity: 1;
  245. \t\t}
  247. \t\t.carousel-controls {
  248. \t\t\tposition: absolute;
  249. \t\t\tbottom: 20px;
  250. \t\t\tleft: 50%;
  251. \t\t\ttransform: translateX(-50%);
  252. \t\t\tdisplay: flex;
  253. \t\t\tgap: 10px;
  254. \t\t\tz-index: 10;
  255. \t\t}
  257. \t\t.carousel-btn {
  258. \t\t\twidth: 40px;
  259. \t\t\theight: 40px;
  260. \t\t\tborder: none;
  261. \t\t\tborder-radius: 50%;
  262. \t\t\tbackground: rgba(255, 255, 255, 0.9);
  263. \t\t\tcolor: #333;
  264. \t\t\tfont-size: 16px;
  265. \t\t\tcursor: pointer;
  266. \t\t\tdisplay: flex;
  267. \t\t\talign-items: center;
  268. \t\t\tjustify-content: center;
  269. \t\t\ttransition: all 0.3s ease;
  270. \t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  271. \t\t}
  273. \t\t.carousel-btn:hover {
  274. \t\t\tbackground: white;
  275. \t\t\ttransform: scale(1.1);
  276. \t\t}
  278. \t\t.carousel-btn:disabled {
  279. \t\t\topacity: 0.5;
  280. \t\t\tcursor: not-allowed;
  281. \t\t\ttransform: none;
  282. \t\t}
  284. \t\t.carousel-pause {
  285. \t\t\tbackground: #dc3545;
  286. \t\t\tcolor: white;
  287. \t\t}
  289. \t\t.carousel-pause:hover {
  290. \t\t\tbackground: #c82333;
  291. \t\t}
  293. \t\t.carousel-indicators {
  294. \t\t\tposition: absolute;
  295. \t\t\tbottom: 70px;
  296. \t\t\tleft: 50%;
  297. \t\t\ttransform: translateX(-50%);
  298. \t\t\tdisplay: flex;
  299. \t\t\tgap: 8px;
  300. \t\t\tz-index: 10;
  301. \t\t}
  303. \t\t.carousel-indicator {
  304. \t\t\twidth: 12px;
  305. \t\t\theight: 12px;
  306. \t\t\tborder-radius: 50%;
  307. \t\t\tbackground: rgba(255, 255, 255, 0.5);
  308. \t\t\tborder: none;
  309. \t\t\tcursor: pointer;
  310. \t\t\ttransition: all 0.3s ease;
  311. \t\t}
  313. \t\t.carousel-indicator.active {
  314. \t\t\tbackground: white;
  315. \t\t\ttransform: scale(1.2);
  316. \t\t}
  318. \t\t/* Contrôles eBay-style améliorés - Positionnés en bas à droite */
  319. \t\t.carousel-controls-ebay {
  320. \t\t\tposition: absolute;
  321. \t\t\tbottom: 20px;
  322. \t\t\tright: 20px;
  323. \t\t\tdisplay: flex;
  324. \t\t\tgap: 12px;
  325. \t\t\talign-items: center;
  326. \t\t\tz-index: 10;
  327. \t\t\tpointer-events: none;
  328. \t\t}
  330. \t\t.carousel-btn-ebay {
  331. \t\t\twidth: 52px;
  332. \t\t\theight: 52px;
  333. \t\t\tborder: none;
  334. \t\t\tborder-radius: 50% !important;
  335. \t\t\tbackground: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  336. \t\t\tcolor: #333;
  337. \t\t\tfont-size: 22px;
  338. \t\t\tcursor: pointer;
  339. \t\t\tdisplay: flex;
  340. \t\t\talign-items: center;
  341. \t\t\tjustify-content: center;
  342. \t\t\ttransition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  343. \t\t\tpointer-events: all;
  344. \t\t\tbox-shadow: 0 4px 15px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
  345. \t\t\tbackdrop-filter: blur(10px);
  346. \t\t\tposition: relative;
  347. \t\t\toverflow: visible;
  348. \t\t}
  350. \t\t.carousel-btn-ebay::before {
  351. \t\t\tcontent: '';
  352. \t\t\tposition: absolute;
  353. \t\t\ttop: 50%;
  354. \t\t\tleft: 50%;
  355. \t\t\twidth: 0;
  356. \t\t\theight: 0;
  357. \t\t\tborder-radius: 50%;
  358. \t\t\tbackground: rgba(255, 255, 255, 0.3);
  359. \t\t\ttransform: translate(-50%, -50%);
  360. \t\t\ttransition: width 0.6s ease, height 0.6s ease;
  361. \t\t}
  363. \t\t.carousel-btn-ebay:hover::before {
  364. \t\t\twidth: 100%;
  365. \t\t\theight: 100%;
  366. \t\t}
  368. \t\t.carousel-btn-ebay:hover {
  369. \t\t\ttransform: translateY(-3px) scale(1.1);
  370. \t\t\tbox-shadow: 0 8px 25px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);
  371. \t\t}
  372. \t\t
  373. \t\t/* Désactiver les effets hover sur mobile pour éviter les problèmes tactiles */
  374. \t\t@media (hover: none) and (pointer: coarse) {
  375. \t\t\t.carousel-btn-ebay:hover {
  376. \t\t\t\ttransform: none;
  377. \t\t\t}
  378. \t\t\t
  379. \t\t\t.carousel-btn-ebay:active {
  380. \t\t\t\ttransform: scale(0.95);
  381. \t\t\t}
  382. \t\t\t
  383. \t\t\t.carousel-indicator-ebay:hover {
  384. \t\t\t\ttransform: none;
  385. \t\t\t}
  386. \t\t}
  388. \t\t.carousel-btn-ebay:active {
  389. \t\t\ttransform: translateY(-1px) scale(1.05);
  390. \t\t\tbox-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  391. \t\t}
  392. \t\t
  393. \t\t/* Désactiver les effets hover sur mobile pour éviter les problèmes tactiles */
  394. \t\t@media (hover: none) and (pointer: coarse) {
  395. \t\t\t.carousel-btn-ebay:hover {
  396. \t\t\t\ttransform: none;
  397. \t\t\t}
  398. \t\t\t
  399. \t\t\t.carousel-btn-ebay:active {
  400. \t\t\t\ttransform: scale(0.95);
  401. \t\t\t}
  402. \t\t\t
  403. \t\t\t.carousel-indicator-ebay:hover {
  404. \t\t\t\ttransform: none;
  405. \t\t\t}
  406. \t\t}
  408. \t\t.carousel-btn-ebay:disabled {
  409. \t\t\topacity: 0.4;
  410. \t\t\tcursor: not-allowed;
  411. \t\t\ttransform: none;
  412. \t\t}
  414. \t\t.carousel-btn-ebay i {
  415. \t\t\tposition: relative;
  416. \t\t\tz-index: 10;
  417. \t\t\ttransition: transform 0.3s ease;
  418. \t\t\tdisplay: inline-block;
  419. \t\t\tline-height: 1;
  420. \t\t}
  422. \t\t.carousel-btn-ebay:hover i {
  423. \t\t\ttransform: scale(1.15);
  424. \t\t}
  425. \t\t
  426. \t\t.carousel-btn-ebay.pause-btn i,
  427. \t\t.carousel-btn-ebay.pause-btn #pauseIcon {
  428. \t\t\tz-index: 10 !important;
  429. \t\t\tcolor: white !important;
  430. \t\t\tdisplay: inline-block !important;
  431. \t\t\tvisibility: visible !important;
  432. \t\t\topacity: 1 !important;
  433. \t\t}
  435. \t\t.carousel-btn-ebay.prev-btn,
  436. \t\t.carousel-btn-ebay.next-btn {
  437. \t\t\tbackground: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 100%);
  438. \t\t\tcolor: #333;
  439. \t\t}
  441. \t\t.carousel-btn-ebay.prev-btn:hover,
  442. \t\t.carousel-btn-ebay.next-btn:hover {
  443. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  444. \t\t\tcolor: white;
  445. \t\t}
  447. \t\t.carousel-btn-ebay.pause-btn {
  448. \t\t\tbackground: linear-gradient(135deg, rgba(220, 53, 69, 0.95) 0%, rgba(200, 35, 51, 0.95) 100%);
  449. \t\t\tcolor: white !important;
  450. \t\t}
  452. \t\t.carousel-btn-ebay.pause-btn:hover {
  453. \t\t\tbackground: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  454. \t\t\tcolor: white !important;
  455. \t\t}
  457. \t\t.carousel-btn-ebay.pause-btn.playing {
  458. \t\t\tbackground: linear-gradient(135deg, rgba(40, 167, 69, 0.95) 0%, rgba(33, 136, 56, 0.95) 100%);
  459. \t\t\tcolor: white !important;
  460. \t\t}
  462. \t\t.carousel-btn-ebay.pause-btn.playing:hover {
  463. \t\t\tbackground: linear-gradient(135deg, #28a745 0%, #218838 100%);
  464. \t\t\tcolor: white !important;
  465. \t\t}
  467. \t\t/* Style spécifique pour l'icône du bouton pause - Utilisation directe d'Unicode */
  468. \t\t.carousel-btn-ebay.pause-btn {
  469. \t\t\ttext-align: center;
  470. \t\t\tposition: relative;
  471. \t\t\tdisplay: flex;
  472. \t\t\talign-items: center;
  473. \t\t\tjustify-content: center;
  474. \t\t}
  475. \t\t
  476. \t\t.carousel-btn-ebay.pause-btn #pauseIcon,
  477. \t\t.carousel-btn-ebay.pause-btn .pause-icon-content {
  478. \t\t\tdisplay: block !important;
  479. \t\t\tcolor: white !important;
  480. \t\t\tfont-size: 24px !important;
  481. \t\t\tline-height: 1 !important;
  482. \t\t\twidth: auto !important;
  483. \t\t\theight: auto !important;
  484. \t\t\tposition: static !important;
  485. \t\t\ttext-align: center !important;
  486. \t\t\tz-index: 10 !important;
  487. \t\t\tvisibility: visible !important;
  488. \t\t\topacity: 1 !important;
  489. \t\t\tpointer-events: none !important;
  490. \t\t\tfont-family: Arial, \"Segoe UI\", sans-serif !important;
  491. \t\t\tfont-weight: normal !important;
  492. \t\t\tmargin: 0 !important;
  493. \t\t\tpadding: 0 !important;
  494. \t\t}
  496. \t\t/* Indicateurs eBay-style améliorés - Positionnés en bas à gauche */
  497. \t\t.carousel-indicators-ebay {
  498. \t\t\tposition: absolute;
  499. \t\t\tbottom: 20px;
  500. \t\t\tleft: 50%;
  501. \t\t\ttransform: translateX(-50%);
  502. \t\t\tdisplay: flex;
  503. \t\t\tgap: 10px;
  504. \t\t\tz-index: 10;
  505. \t\t\tbackground: rgba(0, 0, 0, 0.4);
  506. \t\t\tpadding: 8px 14px;
  507. \t\t\tborder-radius: 25px;
  508. \t\t\tbackdrop-filter: blur(8px);
  509. \t\t\tbox-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  510. \t\t}
  512. \t\t.carousel-indicator-ebay {
  513. \t\t\twidth: 10px;
  514. \t\t\theight: 10px;
  515. \t\t\tborder-radius: 50%;
  516. \t\t\tbackground: rgba(255, 255, 255, 0.5);
  517. \t\t\tborder: 2px solid rgba(255, 255, 255, 0.8);
  518. \t\t\tcursor: pointer;
  519. \t\t\ttransition: all 0.3s ease;
  520. \t\t}
  522. \t\t.carousel-indicator-ebay.active {
  523. \t\t\tbackground: white !important;
  524. \t\t\tborder-color: #ffa200 !important;
  525. \t\t\ttransform: scale(1.3) !important;
  526. \t\t\tbox-shadow: 0 0 8px rgba(255, 162, 0, 0.6) !important;
  527. \t\t}
  529. \t\t.carousel-indicator-ebay:hover {
  530. \t\t\tbackground: rgba(255, 255, 255, 0.8);
  531. \t\t\ttransform: scale(1.1);
  532. \t\t}
  534. \t\t/* Styles eBay-style pour les détails de boutique */
  535. \t\t.shop-avatar-container-ebay {
  536. \t\t\tposition: relative;
  537. \t\t\tmargin-right: 20px;
  538. \t\t}
  540. \t\t.shop-avatar-ebay {
  541. \t\t\twidth: 100px;
  542. \t\t\theight: 100px;
  543. \t\t\tborder-radius: 12px;
  544. \t\t\tobject-fit: cover;
  545. \t\t\tborder: 3px solid white;
  546. \t\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  547. \t\t\ttransition: transform 0.3s ease;
  548. \t\t}
  550. \t\t.shop-avatar-ebay:hover {
  551. \t\t\ttransform: scale(1.05);
  552. \t\t}
  554. \t\t.shop-avatar-placeholder {
  555. \t\t\tbackground: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
  556. \t\t\tdisplay: flex;
  557. \t\t\talign-items: center;
  558. \t\t\tjustify-content: center;
  559. \t\t\tfont-size: 2.5rem;
  560. \t\t\tcolor: #999;
  561. \t\t}
  563. \t\t.verified-badge-ebay {
  564. \t\t\tposition: absolute;
  565. \t\t\tbottom: -5px;
  566. \t\t\tright: -5px;
  567. \t\t\tbackground: #28a745;
  568. \t\t\tcolor: white;
  569. \t\t\twidth: 24px;
  570. \t\t\theight: 24px;
  571. \t\t\tborder-radius: 50%;
  572. \t\t\tdisplay: flex;
  573. \t\t\talign-items: center;
  574. \t\t\tjustify-content: center;
  575. \t\t\tfont-size: 12px;
  576. \t\t\tborder: 2px solid white;
  577. \t\t}
  579. \t\t.shop-info-ebay {
  580. \t\t\tpadding: 0;
  581. \t\t}
  583. \t\t.shop-name-section {
  584. \t\t\tmargin-bottom: 12px;
  585. \t\t}
  587. \t\t.shop-name-ebay {
  588. \t\t\tfont-size: 2.2rem;
  589. \t\t\tfont-weight: 800;
  590. \t\t\tbackground: linear-gradient(135deg, #333 0%, #555 100%);
  591. \t\t\t-webkit-background-clip: text;
  592. \t\t\t-webkit-text-fill-color: transparent;
  593. \t\t\tbackground-clip: text;
  594. \t\t\tmargin: 0;
  595. \t\t\tline-height: 1.2;
  596. \t\t\tword-wrap: break-word;
  597. \t\t\toverflow-wrap: break-word;
  598. \t\t\thyphens: auto;
  599. \t\t\tletter-spacing: -0.5px;
  600. \t\t}
  602. \t\t.verified-text {
  603. \t\t\tbackground: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  604. \t\t\t-webkit-background-clip: text;
  605. \t\t\t-webkit-text-fill-color: transparent;
  606. \t\t\tbackground-clip: text;
  607. \t\t\tfont-size: 0.9rem;
  608. \t\t\tfont-weight: 600;
  609. \t\t\tdisplay: inline-flex;
  610. \t\t\talign-items: center;
  611. \t\t\tgap: 4px;
  612. \t\t\tword-wrap: break-word;
  613. \t\t\toverflow-wrap: break-word;
  614. \t\t\tline-height: 1.4;
  615. \t\t\twhite-space: normal;
  616. \t\t\tflex-wrap: wrap;
  617. \t\t\tmax-width: 100%;
  618. \t\t}
  620. \t\t.verified-text i {
  621. \t\t\t-webkit-text-fill-color: #28a745;
  622. \t\t\tcolor: #28a745;
  623. \t\t\tflex-shrink: 0;
  624. \t\t}
  626. \t\t.shop-category-ebay {
  627. \t\t\tbackground: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  628. \t\t\tcolor: #666;
  629. \t\t\tpadding: 6px 14px;
  630. \t\t\tborder-radius: 20px;
  631. \t\t\tfont-size: 0.875rem;
  632. \t\t\tfont-weight: 500;
  633. \t\t\tdisplay: inline-block;
  634. \t\t\tborder: 1px solid #dee2e6;
  635. \t\t\tword-wrap: break-word;
  636. \t\t\toverflow-wrap: break-word;
  637. \t\t\tmax-width: 100%;
  638. \t\t\tline-height: 1.4;
  639. \t\t\twhite-space: normal;
  640. \t\t}
  642. \t\t.shop-stats-ebay {
  643. \t\t\tmargin-top: 16px;
  644. \t\t}
  646. \t\t.stat-row {
  647. \t\t\tdisplay: flex;
  648. \t\t\tgap: 32px;
  649. \t\t\tmargin-bottom: 12px;
  650. \t\t\tflex-wrap: wrap;
  651. \t\t}
  653. \t\t.stat-item-ebay {
  654. \t\t\tdisplay: flex;
  655. \t\t\tflex-direction: column;
  656. \t\t\talign-items: flex-start;
  657. \t\t\tmin-width: 100px;
  658. \t\t}
  660. \t\t.stat-percentage {
  661. \t\t\tfont-size: 1.4rem;
  662. \t\t\tfont-weight: 800;
  663. \t\t\tbackground: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  664. \t\t\t-webkit-background-clip: text;
  665. \t\t\t-webkit-text-fill-color: transparent;
  666. \t\t\tbackground-clip: text;
  667. \t\t\tline-height: 1.1;
  668. \t\t\tmargin-bottom: 4px;
  669. \t\t\tword-wrap: break-word;
  670. \t\t\toverflow-wrap: break-word;
  671. \t\t}
  673. \t\t.stat-number-ebay {
  674. \t\t\tfont-size: 1.4rem;
  675. \t\t\tfont-weight: 800;
  676. \t\t\tbackground: linear-gradient(135deg, #333 0%, #555 100%);
  677. \t\t\t-webkit-background-clip: text;
  678. \t\t\t-webkit-text-fill-color: transparent;
  679. \t\t\tbackground-clip: text;
  680. \t\t\tline-height: 1.1;
  681. \t\t\tmargin-bottom: 4px;
  682. \t\t\tword-wrap: break-word;
  683. \t\t\toverflow-wrap: break-word;
  684. \t\t}
  686. \t\t.stat-label-ebay {
  687. \t\t\tfont-size: 0.75rem;
  688. \t\t\tcolor: #6c757d;
  689. \t\t\ttext-transform: uppercase;
  690. \t\t\tletter-spacing: 0.8px;
  691. \t\t\tfont-weight: 600;
  692. \t\t\tmargin-top: 0;
  693. \t\t\tline-height: 1.3;
  694. \t\t\tword-wrap: break-word;
  695. \t\t\toverflow-wrap: break-word;
  696. \t\t\ttext-align: left;
  697. \t\t\thyphens: auto;
  698. \t\t\tmax-width: 100%;
  699. \t\t}
  701. \t\t.shop-additional-info {
  702. \t\t\tdisplay: flex;
  703. \t\t\tflex-wrap: wrap;
  704. \t\t\tgap: 12px 20px;
  705. \t\t\tfont-size: 0.875rem;
  706. \t\t\tcolor: #495057;
  707. \t\t\tmargin-top: 12px;
  708. \t\t\tpadding-top: 16px;
  709. \t\t\tborder-top: 1px solid #e9ecef;
  710. \t\t\tline-height: 1.5;
  711. \t\t\tword-wrap: break-word;
  712. \t\t\toverflow-wrap: break-word;
  713. \t\t}
  715. \t\t.member-since {
  716. \t\t\tfont-weight: 500;
  717. \t\t\tdisplay: inline-flex;
  718. \t\t\talign-items: center;
  719. \t\t\twhite-space: normal;
  720. \t\t\tpadding: 6px 12px;
  721. \t\t\tbackground: #f8f9fa;
  722. \t\t\tborder-radius: 8px;
  723. \t\t\ttransition: all 0.3s ease;
  724. \t\t\tborder: 1px solid transparent;
  725. \t\t\tword-wrap: break-word;
  726. \t\t\toverflow-wrap: break-word;
  727. \t\t\tline-height: 1.4;
  728. \t\t\tmax-width: 100%;
  729. \t\t\tflex-wrap: wrap;
  730. \t\t\ttext-align: center;
  731. \t\t}
  733. \t\t.member-since:hover {
  734. \t\t\tbackground: #e9ecef;
  735. \t\t\tborder-color: #dee2e6;
  736. \t\t\ttransform: translateY(-1px);
  737. \t\t}
  739. \t\t.member-since i {
  740. \t\t\tcolor: #ffa200;
  741. \t\t\tmargin-right: 6px;
  742. \t\t\tfont-size: 0.95rem;
  743. \t\t\ttransition: transform 0.3s ease;
  744. \t\t\tflex-shrink: 0;
  745. \t\t}
  747. \t\t.member-since:hover i {
  748. \t\t\ttransform: scale(1.2);
  749. \t\t}
  751. \t\t.location {
  752. \t\t\tdisplay: flex;
  753. \t\t\talign-items: center;
  754. \t\t}
  756. \t\t.shop-actions-ebay {
  757. \t\t\tdisplay: flex;
  758. \t\t\tflex-direction: column;
  759. \t\t\tgap: 10px;
  760. \t\t\tmin-width: 160px;
  761. \t\t}
  763. \t\t.btn-ebay {
  764. \t\t\tpadding: 10px 18px;
  765. \t\t\tfont-size: 0.9rem;
  766. \t\t\tfont-weight: 500;
  767. \t\t\tborder-radius: 6px;
  768. \t\t\ttext-align: center;
  769. \t\t\ttransition: all 0.3s ease;
  770. \t\t\tborder-width: 1px;
  771. \t\t\twhite-space: normal;
  772. \t\t\tword-wrap: break-word;
  773. \t\t\toverflow-wrap: break-word;
  774. \t\t\tline-height: 1.4;
  775. \t\t}
  777. \t\t.btn-ebay:hover {
  778. \t\t\ttransform: translateY(-2px);
  779. \t\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  780. \t\t}
  782. \t\t.btn-ebay i {
  783. \t\t\tvertical-align: middle;
  784. \t\t}
  786. \t\t.btn-ebay.following {
  787. \t\t\tbackground: #28a745;
  788. \t\t\tborder-color: #28a745;
  789. \t\t\tcolor: white;
  790. \t\t}
  792. \t\t/* Styles pour les avis */
  793. \t\t.review-stats {
  794. \t\t\tbackground: white;
  795. \t\t\tborder-radius: 12px;
  796. \t\t\tpadding: 20px;
  797. \t\t\tbox-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  798. \t\t\tmargin-bottom: 20px;
  799. \t\t}
  801. \t\t.stat-card {
  802. \t\t\tpadding: 15px;
  803. \t\t}
  805. \t\t.stat-number {
  806. \t\t\tfont-size: 2.5rem;
  807. \t\t\tfont-weight: 700;
  808. \t\t\tcolor: #333;
  809. \t\t\tmargin: 0;
  810. \t\t}
  812. \t\t.stat-label {
  813. \t\t\tcolor: #666;
  814. \t\t\tfont-size: 0.9rem;
  815. \t\t\tmargin: 5px 0 0;
  816. \t\t}
  818. \t\t.rating-stars {
  819. \t\t\tcolor: #ffc107;
  820. \t\t\tfont-size: 1.2rem;
  821. \t\t\tmargin: 10px 0;
  822. \t\t}
  824. \t\t.reviews-preview {
  825. \t\t\tbackground: white;
  826. \t\t\tborder-radius: 12px;
  827. \t\t\tpadding: 20px;
  828. \t\t\tbox-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  829. \t\t}
  831. \t\t.review-item {
  832. \t\t\tborder-bottom: 1px solid #f0f0f0;
  833. \t\t\tpadding: 15px 0;
  834. \t\t}
  836. \t\t.review-item:last-child {
  837. \t\t\tborder-bottom: none;
  838. \t\t}
  840. \t\t.review-header {
  841. \t\t\tdisplay: flex;
  842. \t\t\tjustify-content: space-between;
  843. \t\t\talign-items: flex-start;
  844. \t\t\tmargin-bottom: 10px;
  845. \t\t}
  847. \t\t.reviewer-info {
  848. \t\t\tdisplay: flex;
  849. \t\t\talign-items: center;
  850. \t\t\tgap: 10px;
  851. \t\t}
  853. \t\t.reviewer-avatar {
  854. \t\t\twidth: 40px;
  855. \t\t\theight: 40px;
  856. \t\t\tborder-radius: 50%;
  857. \t\t\tbackground: #f8f9fa;
  858. \t\t\tdisplay: flex;
  859. \t\t\talign-items: center;
  860. \t\t\tjustify-content: center;
  861. \t\t\tcolor: #666;
  862. \t\t}
  864. \t\t.reviewer-name {
  865. \t\t\tmargin: 0;
  866. \t\t\tfont-size: 1rem;
  867. \t\t\tfont-weight: 600;
  868. \t\t}
  870. \t\t.review-rating {
  871. \t\t\tcolor: #ffc107;
  872. \t\t\tfont-size: 0.9rem;
  873. \t\t}
  875. \t\t.review-meta {
  876. \t\t\ttext-align: right;
  877. \t\t}
  879. \t\t.review-date {
  880. \t\t\tcolor: #666;
  881. \t\t\tfont-size: 0.8rem;
  882. \t\t}
  884. \t\t.verified-badge {
  885. \t\t\tdisplay: inline-block;
  886. \t\t\tbackground: #28a745;
  887. \t\t\tcolor: white;
  888. \t\t\tpadding: 2px 8px;
  889. \t\t\tborder-radius: 12px;
  890. \t\t\tfont-size: 0.7rem;
  891. \t\t\tmargin-left: 10px;
  892. \t\t}
  894. \t\t.review-comment {
  895. \t\t\tmargin: 10px 0 0;
  896. \t\t\tline-height: 1.5;
  897. \t\t\tcolor: #333;
  898. \t\t}
  900. \t\t.review-actions-card {
  901. \t\t\tbackground: white;
  902. \t\t\tborder-radius: 12px;
  903. \t\t\tpadding: 20px;
  904. \t\t\tbox-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  905. \t\t\ttext-align: center;
  906. \t\t}
  908. \t\t.shop-banner-overlay {
  909. \t\t\tposition: absolute;
  910. \t\t\ttop: 0;
  911. \t\t\tleft: 0;
  912. \t\t\tright: 0;
  913. \t\t\tbottom: 0;
  914. \t\t\tbackground: rgba(0, 0, 0, 0.3);
  915. \t\t\tz-index: 1;
  916. \t\t}
  918. \t\t.shop-header-content {
  919. \t\t\tbackground: white;
  920. \t\t\tborder: 1px solid #e1e1e1;
  921. \t\t\tborder-radius: 4px;
  922. \t\t\tpadding: 20px;
  923. \t\t\tmargin: 0 20px 20px;
  924. \t\t\tbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  925. \t\t\tposition: relative;
  926. \t\t\tz-index: 2;
  927. \t\t}
  929. \t\t.shop-avatar {
  930. \t\t\twidth: 80px;
  931. \t\t\theight: 80px;
  932. \t\t\tborder-radius: 4px;
  933. \t\t\tborder: 1px solid #e1e1e1;
  934. \t\t\tobject-fit: cover;
  935. \t\t\tposition: relative;
  936. \t\t\tz-index: 3;
  937. \t\t}
  939. \t\t.shop-title {
  940. \t\t\tfont-size: 1.5rem;
  941. \t\t\tfont-weight: 600;
  942. \t\t\tcolor: #333;
  943. \t\t\tmargin-bottom: 8px;
  944. \t\t}
  946. \t\t.shop-subtitle {
  947. \t\t\tcolor: #666;
  948. \t\t\tfont-size: 0.9rem;
  949. \t\t\tmargin-bottom: 15px;
  950. \t\t}
  952. \t\t.shop-stats-row {
  953. \t\t\tdisplay: flex;
  954. \t\t\talign-items: center;
  955. \t\t\tgap: 20px;
  956. \t\t\tflex-wrap: wrap;
  957. \t\t\tmargin-bottom: 15px;
  958. \t\t}
  960. \t\t.shop-stat-item {
  961. \t\t\tdisplay: flex;
  962. \t\t\talign-items: center;
  963. \t\t\tgap: 5px;
  964. \t\t\tfont-size: 0.9rem;
  965. \t\t}
  967. \t\t.positive-feedback {
  968. \t\t\tcolor: #007bff;
  969. \t\t\tfont-weight: 600;
  970. \t\t}
  972. \t\t.items-sold {
  973. \t\t\tcolor: #666;
  974. \t\t}
  976. \t\t.followers-count {
  977. \t\t\tcolor: #666;
  978. \t\t}
  980. \t\t.shop-badges {
  981. \t\t\tdisplay: flex;
  982. \t\t\tgap: 10px;
  983. \t\t\tmargin-bottom: 15px;
  984. \t\t}
  986. \t\t.shop-badge {
  987. \t\t\tbackground: #f0f0f0;
  988. \t\t\tcolor: #333;
  989. \t\t\tpadding: 4px 8px;
  990. \t\t\tborder-radius: 3px;
  991. \t\t\tfont-size: 0.8rem;
  992. \t\t\tfont-weight: 500;
  993. \t\t}
  995. \t\t.shop-badge.verified {
  996. \t\t\tbackground: #d4edda;
  997. \t\t\tcolor: #155724;
  998. \t\t}
  1000. \t\t.shop-badge.premium {
  1001. \t\t\tbackground: #fff3cd;
  1002. \t\t\tcolor: #856404;
  1003. \t\t}
  1005. \t\t.shop-actions-row {
  1006. \t\t\tdisplay: flex;
  1007. \t\t\talign-items: center;
  1008. \t\t\tgap: 15px;
  1009. \t\t\tflex-wrap: wrap;
  1010. \t\t}
  1012. \t\t.shop-action-btn {
  1013. \t\t\tbackground: #007bff;
  1014. \t\t\tcolor: white;
  1015. \t\t\tborder: none;
  1016. \t\t\tpadding: 8px 16px;
  1017. \t\t\tborder-radius: 3px;
  1018. \t\t\tfont-size: 0.9rem;
  1019. \t\t\tfont-weight: 500;
  1020. \t\t\tcursor: pointer;
  1021. \t\t\ttransition: background-color 0.2s;
  1022. \t\t\ttext-decoration: none;
  1023. \t\t\tdisplay: inline-flex;
  1024. \t\t\talign-items: center;
  1025. \t\t\tgap: 5px;
  1026. \t\t}
  1028. \t\t.shop-action-btn:hover {
  1029. \t\t\tbackground: #0056b3;
  1030. \t\t\tcolor: white;
  1031. \t\t}
  1033. \t\t.shop-action-btn.following {
  1034. \t\t\tbackground: #28a745;
  1035. \t\t}
  1037. \t\t.shop-action-btn.following:hover {
  1038. \t\t\tbackground: #1e7e34;
  1039. \t\t}
  1041. \t\t.shop-action-btn.secondary {
  1042. \t\t\tbackground: #6c757d;
  1043. \t\t}
  1045. \t\t.shop-action-btn.secondary:hover {
  1046. \t\t\tbackground: #545b62;
  1047. \t\t}
  1049. \t\t/* Onglets eBay-style avec classes Karma */
  1050. \t\t.shop-tabs {
  1051. \t\t\tbackground: white;
  1052. \t\t\tborder: 1px solid #e1e1e1;
  1053. \t\t\tborder-top: none;
  1054. \t\t\tborder-radius: 0 0 4px 4px;
  1055. \t\t\tmargin-top: 0;
  1056. \t\t}
  1058. \t\t.shop-tabs-nav {
  1059. \t\t\tdisplay: flex;
  1060. \t\t\tborder-bottom: 1px solid #e1e1e1;
  1061. \t\t\tmargin: 0;
  1062. \t\t\tpadding: 0;
  1063. \t\t\tlist-style: none;
  1064. \t\t\tbackground: #f8f9fa;
  1065. \t\t}
  1067. \t\t.shop-tab {
  1068. \t\t\tmargin: 0;
  1069. \t\t}
  1071. \t\t.shop-tab-link {
  1072. \t\t\tdisplay: block;
  1073. \t\t\tpadding: 12px 20px;
  1074. \t\t\tcolor: #000000;
  1075. \t\t\ttext-decoration: none;
  1076. \t\t\tborder-bottom: 2px solid transparent;
  1077. \t\t\ttransition: all 0.2s;
  1078. \t\t\tfont-weight: 500;
  1079. \t\t\tfont-size: 1rem;
  1080. \t\t}
  1082. \t\t.shop-tab-link:hover,
  1083. \t\t.shop-tab-link.active {
  1084. \t\t\tcolor: #095ad3;
  1085. \t\t\tborder-bottom-color: #095ad3;
  1086. \t\t\tbackground: #ffa200;
  1087. \t\t}
  1089. \t\t.shop-tab-content {
  1090. \t\t\tpadding: 30px;
  1091. \t\t\tmin-height: 400px;
  1092. \t\t}
  1094. \t\t.shop-tab-content:not(.active) {
  1095. \t\t\tdisplay: none;
  1096. \t\t}
  1098. \t\t.shop-tab-content.active {
  1099. \t\t\tdisplay: block;
  1100. \t\t}
  1102. \t\t/* Cards d'information avec style Karma */
  1103. \t\t.shop-info-card {
  1104. \t\t\tbackground: #f8f9fa;
  1105. \t\t\tborder: 1px solid #e1e1e1;
  1106. \t\t\tborder-radius: 4px;
  1107. \t\t\tpadding: 20px;
  1108. \t\t\tmargin-bottom: 20px;
  1109. \t\t}
  1111. \t\t.shop-info-card h6 {
  1112. \t\t\tcolor: #333;
  1113. \t\t\tfont-weight: 600;
  1114. \t\t\tmargin-bottom: 15px;
  1115. \t\t\tfont-size: 1.1rem;
  1116. \t\t}
  1118. \t\t.shop-info-card p {
  1119. \t\t\tcolor: #666;
  1120. \t\t\tfont-size: 0.9rem;
  1121. \t\t\tmargin: 0;
  1122. \t\t\tline-height: 1.5;
  1123. \t\t}
  1125. \t\t.shop-contact-info {
  1126. \t\t\tdisplay: flex;
  1127. \t\t\tflex-direction: column;
  1128. \t\t\tgap: 10px;
  1129. \t\t}
  1131. \t\t.shop-contact-item {
  1132. \t\t\tdisplay: flex;
  1133. \t\t\talign-items: center;
  1134. \t\t\tgap: 10px;
  1135. \t\t\tfont-size: 0.9rem;
  1136. \t\t\tcolor: #666;
  1137. \t\t\tpadding: 5px 0;
  1138. \t\t}
  1140. \t\t.shop-contact-item i {
  1141. \t\t\twidth: 16px;
  1142. \t\t\tcolor: #007bff;
  1143. \t\t\ttext-align: center;
  1144. \t\t}
  1146. \t\t.shop-social-links {
  1147. \t\t\tdisplay: flex;
  1148. \t\t\tgap: 10px;
  1149. \t\t\tmargin-top: 15px;
  1150. \t\t\tflex-wrap: wrap;
  1151. \t\t}
  1153. \t\t.shop-social-link {
  1154. \t\t\tdisplay: inline-flex;
  1155. \t\t\talign-items: center;
  1156. \t\t\tjustify-content: center;
  1157. \t\t\twidth: 36px;
  1158. \t\t\theight: 36px;
  1159. \t\t\tbackground: #f0f0f0;
  1160. \t\t\tcolor: #666;
  1161. \t\t\tborder-radius: 4px;
  1162. \t\t\ttext-decoration: none;
  1163. \t\t\ttransition: all 0.2s;
  1164. \t\t\tfont-size: 1.1rem;
  1165. \t\t}
  1167. \t\t.shop-social-link:hover {
  1168. \t\t\tbackground: #007bff;
  1169. \t\t\tcolor: white;
  1170. \t\t\ttransform: translateY(-2px);
  1171. \t\t}
  1173. \t\t/* Produits avec style Karma */
  1174. \t\t.product-card {
  1175. \t\t\tbackground: white;
  1176. \t\t\tborder: 1px solid #e1e1e1;
  1177. \t\t\tborder-radius: 4px;
  1178. \t\t\toverflow: hidden;
  1179. \t\t\ttransition: all 0.3s ease;
  1180. \t\t\tmargin-bottom: 20px;
  1181. \t\t}
  1183. \t\t.product-card:hover {
  1184. \t\t\ttransform: translateY(-2px);
  1185. \t\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  1186. \t\t}
  1188. \t\t/* Animation de tri des produits */
  1189. \t\t.product-item {
  1190. \t\t\ttransition: all 0.3s ease;
  1191. \t\t}
  1193. \t\t.product-item.sorting {
  1194. \t\t\topacity: 0;
  1195. \t\t\ttransform: translateY(20px);
  1196. \t\t}
  1198. \t\t.product-item.sorted {
  1199. \t\t\topacity: 1;
  1200. \t\t\ttransform: translateY(0);
  1201. \t\t}
  1203. \t\t.product-image {
  1204. \t\t\theight: 200px;
  1205. \t\t\tbackground-size: cover;
  1206. \t\t\tbackground-position: center;
  1207. \t\t\tposition: relative;
  1208. \t\t\toverflow: hidden;
  1209. \t\t}
  1211. \t\t.product-info {
  1212. \t\t\tpadding: 15px;
  1213. \t\t}
  1215. \t\t.product-title {
  1216. \t\t\tfont-size: 1rem;
  1217. \t\t\tfont-weight: 600;
  1218. \t\t\tmargin-bottom: 8px;
  1219. \t\t\tcolor: #333;
  1220. \t\t\tline-height: 1.3;
  1221. \t\t}
  1223. \t\t.product-title a {
  1224. \t\t\tcolor: #333;
  1225. \t\t\ttext-decoration: none;
  1226. \t\t}
  1228. \t\t.product-title a:hover {
  1229. \t\t\tcolor: #007bff;
  1230. \t\t}
  1232. \t\t.product-price {
  1233. \t\t\tfont-size: 1.2rem;
  1234. \t\t\tfont-weight: bold;
  1235. \t\t\tcolor: #ff6b35;
  1236. \t\t\tmargin-bottom: 10px;
  1237. \t\t}
  1239. \t\t.product-meta {
  1240. \t\t\tdisplay: flex;
  1241. \t\t\tjustify-content: space-between;
  1242. \t\t\talign-items: center;
  1243. \t\t\tfont-size: 0.85rem;
  1244. \t\t\tcolor: #666;
  1245. \t\t}
  1247. \t\t.rating {
  1248. \t\t\tcolor: #ffc107;
  1249. \t\t}
  1251. \t\t/* Responsive avec classes Karma */
  1252. \t\t/* Responsive amélioré pour la page shop */
  1253. \t\t/* Tablettes et écrans moyens */
  1254. \t\t@media(max-width: 1200px) {
  1255. \t\t\t.shop-carousel-ebay {
  1256. \t\t\t\theight: 400px;
  1257. \t\t\t}
  1258. \t\t\t
  1259. \t\t\t.carousel-controls-ebay {
  1260. \t\t\t\tbottom: 18px;
  1261. \t\t\t\tright: 18px;
  1262. \t\t\t\tgap: 11px;
  1263. \t\t\t}
  1264. \t\t\t
  1265. \t\t\t.carousel-btn-ebay {
  1266. \t\t\t\twidth: 48px;
  1267. \t\t\t\theight: 48px;
  1268. \t\t\t\tfont-size: 21px;
  1269. \t\t\t}
  1270. \t\t\t
  1271. \t\t\t.carousel-indicators-ebay {
  1272. \t\t\t\tbottom: 18px;
  1273. \t\t\t\tpadding: 7px 13px;
  1274. \t\t\t}
  1275. \t\t\t
  1276. \t\t\t.carousel-indicator-ebay {
  1277. \t\t\t\twidth: 9px;
  1278. \t\t\t\theight: 9px;
  1279. \t\t\t}
  1280. \t\t}
  1281. \t\t
  1282. \t\t@media(max-width: 991.98px) {
  1283. \t\t\t.shop-carousel-ebay {
  1284. \t\t\t\tmargin: 0 10px;
  1285. \t\t\t\theight: 380px;
  1286. \t\t\t}
  1287. \t\t\t
  1288. \t\t\t.carousel-controls-ebay {
  1289. \t\t\t\tbottom: 16px;
  1290. \t\t\t\tright: 16px;
  1291. \t\t\t\tgap: 10px;
  1292. \t\t\t}
  1293. \t\t\t
  1294. \t\t\t.carousel-btn-ebay {
  1295. \t\t\t\twidth: 46px;
  1296. \t\t\t\theight: 46px;
  1297. \t\t\t\tfont-size: 20px;
  1298. \t\t\t}
  1299. \t\t\t
  1300. \t\t\t.carousel-indicators-ebay {
  1301. \t\t\t\tbottom: 16px;
  1302. \t\t\t\tleft: 50%;
  1303. \t\t\t\ttransform: translateX(-50%);
  1304. \t\t\t\tpadding: 6px 12px;
  1305. \t\t\t}
  1306. \t\t\t
  1307. \t\t\t.carousel-indicator-ebay {
  1308. \t\t\t\twidth: 9px;
  1309. \t\t\t\theight: 9px;
  1310. \t\t\t}
  1311. \t\t\t
  1312. \t\t\t.shop-header-content {
  1313. \t\t\t\tpadding: 20px;
  1314. \t\t\t\tmargin: 0 10px 20px;
  1315. \t\t\t}
  1316. \t\t\t
  1317. \t\t\t.shop-header-content .row {
  1318. \t\t\t\tflex-wrap: wrap;
  1319. \t\t\t}
  1320. \t\t\t
  1321. \t\t\t.shop-info-ebay {
  1322. \t\t\t\tmargin-top: 0;
  1323. \t\t\t\ttext-align: center;
  1324. \t\t\t}
  1326. \t\t\t.shop-name-ebay {
  1327. \t\t\t\tfont-size: 1.75rem;
  1328. \t\t\t\tline-height: 1.3;
  1329. \t\t\t}
  1331. \t\t\t.verified-text {
  1332. \t\t\t\tfont-size: 0.85rem;
  1333. \t\t\t}
  1335. \t\t\t.shop-category-ebay {
  1336. \t\t\t\tfont-size: 0.8rem;
  1337. \t\t\t\tpadding: 5px 12px;
  1338. \t\t\t}
  1340. \t\t\t.stat-row {
  1341. \t\t\t\tjustify-content: center;
  1342. \t\t\t\tgap: 20px;
  1343. \t\t\t}
  1345. \t\t\t.stat-item-ebay {
  1346. \t\t\t\talign-items: center;
  1347. \t\t\t\tmin-width: 90px;
  1348. \t\t\t}
  1350. \t\t\t.stat-percentage,
  1351. \t\t\t.stat-number-ebay {
  1352. \t\t\t\tfont-size: 1.15rem;
  1353. \t\t\t}
  1355. \t\t\t.stat-label-ebay {
  1356. \t\t\t\tfont-size: 0.75rem;
  1357. \t\t\t\ttext-align: center;
  1358. \t\t\t}
  1360. \t\t\t.shop-additional-info {
  1361. \t\t\t\tjustify-content: center;
  1362. \t\t\t\tgap: 12px 18px;
  1363. \t\t\t\tfont-size: 0.8rem;
  1364. \t\t\t}
  1366. \t\t\t.member-since {
  1367. \t\t\t\tfont-size: 0.8rem;
  1368. \t\t\t}
  1370. \t\t\t.shop-actions-ebay {
  1371. \t\t\t\tmin-width: auto;
  1372. \t\t\t}
  1373. \t\t}
  1374. \t\t
  1375. \t\t@media(max-width: 768px) {
  1376. \t\t\t.shop-banner,
  1377. \t\t\t.shop-carousel-ebay {
  1378. \t\t\t\theight: 300px;
  1379. \t\t\t\tmargin: 0;
  1380. \t\t\t\tborder-radius: 0;
  1381. \t\t\t}
  1382. \t\t\t
  1383. \t\t\t.shop-carousel-ebay .carousel-container {
  1384. \t\t\t\tborder-radius: 0;
  1385. \t\t\t}
  1387. \t\t\t.carousel-controls-ebay {
  1388. \t\t\t\tbottom: 12px;
  1389. \t\t\t\tright: 12px;
  1390. \t\t\t\tgap: 8px;
  1391. \t\t\t}
  1393. \t\t\t.carousel-btn-ebay {
  1394. \t\t\t\twidth: 40px;
  1395. \t\t\t\theight: 40px;
  1396. \t\t\t\tfont-size: 16px;
  1397. \t\t\t}
  1398. \t\t\t
  1399. \t\t\t.carousel-btn-ebay #pauseIcon,
  1400. \t\t\t.carousel-btn-ebay .pause-icon-content {
  1401. \t\t\t\tfont-size: 18px !important;
  1402. \t\t\t}
  1404. \t\t\t.carousel-indicators-ebay {
  1405. \t\t\t\tbottom: 12px;
  1406. \t\t\t\tleft: 50%;
  1407. \t\t\t\ttransform: translateX(-50%);
  1408. \t\t\t\tgap: 6px;
  1409. \t\t\t\tpadding: 5px 10px;
  1410. \t\t\t}
  1411. \t\t\t
  1412. \t\t\t.carousel-indicator-ebay {
  1413. \t\t\t\twidth: 8px;
  1414. \t\t\t\theight: 8px;
  1415. \t\t\t}
  1417. \t\t\t.shop-header-content {
  1418. \t\t\t\tpadding: 20px 16px;
  1419. \t\t\t\tmargin: 0;
  1420. \t\t\t\tborder-radius: 0;
  1421. \t\t\t}
  1423. \t\t\t.shop-header-content .row {
  1424. \t\t\t\tflex-direction: column;
  1425. \t\t\t\ttext-align: center;
  1426. \t\t\t}
  1428. \t\t\t.shop-avatar-container-ebay {
  1429. \t\t\t\tmargin: 0 auto 16px;
  1430. \t\t\t}
  1432. \t\t\t.shop-avatar-ebay {
  1433. \t\t\t\twidth: 90px;
  1434. \t\t\t\theight: 90px;
  1435. \t\t\t}
  1437. \t\t\t.shop-name-ebay {
  1438. \t\t\t\tfont-size: 1.5rem;
  1439. \t\t\t\tmargin-bottom: 8px;
  1440. \t\t\t\tline-height: 1.3;
  1441. \t\t\t\tword-break: break-word;
  1442. \t\t\t\thyphens: auto;
  1443. \t\t\t\tmax-width: 100%;
  1444. \t\t\t}
  1446. \t\t\t.shop-name-section {
  1447. \t\t\t\tmargin-bottom: 10px;
  1448. \t\t\t}
  1450. \t\t\t.verified-text {
  1451. \t\t\t\tfont-size: 0.8rem;
  1452. \t\t\t\twhite-space: normal;
  1453. \t\t\t\tjustify-content: center;
  1454. \t\t\t\tflex-wrap: wrap;
  1455. \t\t\t\tline-height: 1.4;
  1456. \t\t\t}
  1458. \t\t\t.verified-text i {
  1459. \t\t\t\tfont-size: 0.85rem;
  1460. \t\t\t}
  1462. \t\t\t.shop-category-ebay {
  1463. \t\t\t\tfont-size: 0.75rem;
  1464. \t\t\t\tpadding: 5px 10px;
  1465. \t\t\t\tmax-width: 100%;
  1466. \t\t\t\tline-height: 1.3;
  1467. \t\t\t\tword-break: break-word;
  1468. \t\t\t}
  1470. \t\t\t.shop-info-ebay {
  1471. \t\t\t\ttext-align: center;
  1472. \t\t\t}
  1474. \t\t\t.stat-row {
  1475. \t\t\t\tjustify-content: center;
  1476. \t\t\t\tgap: 10px;
  1477. \t\t\t\tflex-wrap: wrap;
  1478. \t\t\t}
  1479. \t\t\t
  1480. \t\t\t.stat-item-ebay {
  1481. \t\t\t\talign-items: center;
  1482. \t\t\t\tmin-width: 75px;
  1483. \t\t\t\tflex: 0 1 auto;
  1484. \t\t\t\tpadding: 10px 8px;
  1485. \t\t\t}
  1487. \t\t\t.stat-percentage,
  1488. \t\t\t.stat-number-ebay {
  1489. \t\t\t\tfont-size: 1rem;
  1490. \t\t\t\tline-height: 1.1;
  1491. \t\t\t\tword-break: break-word;
  1492. \t\t\t}
  1494. \t\t\t.stat-label-ebay {
  1495. \t\t\t\tfont-size: 0.65rem;
  1496. \t\t\t\ttext-align: center;
  1497. \t\t\t\tline-height: 1.2;
  1498. \t\t\t\tletter-spacing: 0.3px;
  1499. \t\t\t\tword-break: break-word;
  1500. \t\t\t\thyphens: auto;
  1501. \t\t\t}
  1503. \t\t\t.shop-additional-info {
  1504. \t\t\t\tjustify-content: center;
  1505. \t\t\t\tflex-wrap: wrap;
  1506. \t\t\t\tgap: 8px 10px;
  1507. \t\t\t\tfont-size: 0.75rem;
  1508. \t\t\t\tline-height: 1.4;
  1509. \t\t\t}
  1511. \t\t\t.member-since {
  1512. \t\t\t\tflex-direction: row;
  1513. \t\t\t\ttext-align: center;
  1514. \t\t\t\tgap: 4px;
  1515. \t\t\t\twhite-space: normal;
  1516. \t\t\t\tfont-size: 0.75rem;
  1517. \t\t\t\tline-height: 1.4;
  1518. \t\t\t\tpadding: 5px 8px;
  1519. \t\t\t\tword-break: break-word;
  1520. \t\t\t}
  1522. \t\t\t.member-since i {
  1523. \t\t\t\tmargin-right: 4px;
  1524. \t\t\t\tfont-size: 0.85rem;
  1525. \t\t\t\tflex-shrink: 0;
  1526. \t\t\t}
  1528. \t\t\t.shop-actions-ebay {
  1529. \t\t\t\tflex-direction: column;
  1530. \t\t\t\tjustify-content: center;
  1531. \t\t\t\tmin-width: auto;
  1532. \t\t\t\tmargin-top: 20px;
  1533. \t\t\t\twidth: 100%;
  1534. \t\t\t}
  1536. \t\t\t.btn-ebay {
  1537. \t\t\t\twidth: 100%;
  1538. \t\t\t\tmin-width: auto;
  1539. \t\t\t}
  1541. \t\t\t.shop-actions-ebay .d-flex {
  1542. \t\t\t\twidth: 100%;
  1543. \t\t\t}
  1545. \t\t\t.btn-shop,
  1546. \t\t\t.shop-action-btn {
  1547. \t\t\t\twidth: 100%;
  1548. \t\t\t\tmin-width: auto;
  1549. \t\t\t\theight: 45px;
  1550. \t\t\t\tfont-size: 0.9rem;
  1551. \t\t\t\tpadding: 12px 20px;
  1552. \t\t\t}
  1554. \t\t\t.shop-tabs-nav {
  1555. \t\t\t\tflex-wrap: wrap;
  1556. \t\t\t\tjustify-content: center;
  1557. \t\t\t}
  1558. \t\t\t
  1559. \t\t\t.shop-tab-link {
  1560. \t\t\t\tfont-size: 0.85rem;
  1561. \t\t\t\tpadding: 0.5rem 0.75rem;
  1562. \t\t\t\tflex: 1;
  1563. \t\t\t\tmin-width: auto;
  1564. \t\t\t}
  1565. \t\t\t
  1566. \t\t\t/* Produits responsive */
  1567. \t\t\t#products-container .product-item {
  1568. \t\t\t\tmargin-bottom: 20px;
  1569. \t\t\t}
  1570. \t\t\t
  1571. \t\t\t.product-card {
  1572. \t\t\t\tpadding: 15px;
  1573. \t\t\t}
  1574. \t\t\t
  1575. \t\t\t.product-title {
  1576. \t\t\t\tfont-size: 0.95rem;
  1577. \t\t\t}
  1578. \t\t\t
  1579. \t\t\t.product-price {
  1580. \t\t\t\tfont-size: 1.1rem;
  1581. \t\t\t}
  1582. \t\t\t
  1583. \t\t\t/* Détails de la boutique responsive */
  1584. \t\t\t.shop-info-ebay {
  1585. \t\t\t\ttext-align: center;
  1586. \t\t\t}
  1587. \t\t}
  1588. \t\t
  1589. \t\t@media(max-width: 575.98px) {
  1590. \t\t\t.shop-banner,
  1591. \t\t\t.shop-carousel-ebay {
  1592. \t\t\t\theight: 280px;
  1593. \t\t\t\tmargin: 0;
  1594. \t\t\t}
  1595. \t\t\t
  1596. \t\t\t.carousel-controls-ebay {
  1597. \t\t\t\tbottom: 10px;
  1598. \t\t\t\tright: 10px;
  1599. \t\t\t\tgap: 6px;
  1600. \t\t\t}
  1601. \t\t\t
  1602. \t\t\t.carousel-btn-ebay {
  1603. \t\t\t\twidth: 36px;
  1604. \t\t\t\theight: 36px;
  1605. \t\t\t\tfont-size: 14px;
  1606. \t\t\t}
  1607. \t\t\t
  1608. \t\t\t.carousel-btn-ebay #pauseIcon,
  1609. \t\t\t.carousel-btn-ebay .pause-icon-content {
  1610. \t\t\t\tfont-size: 16px !important;
  1611. \t\t\t}
  1612. \t\t\t
  1613. \t\t\t.carousel-indicators-ebay {
  1614. \t\t\t\tbottom: 10px;
  1615. \t\t\t\tleft: 50%;
  1616. \t\t\t\ttransform: translateX(-50%);
  1617. \t\t\t\tpadding: 4px 8px;
  1618. \t\t\t\tgap: 5px;
  1619. \t\t\t}
  1620. \t\t\t
  1621. \t\t\t.carousel-indicator-ebay {
  1622. \t\t\t\twidth: 7px;
  1623. \t\t\t\theight: 7px;
  1624. \t\t\t}
  1625. \t\t\t
  1626. \t\t\t.shop-header-content {
  1627. \t\t\t\tmargin: 0;
  1628. \t\t\t\tpadding: 16px 12px;
  1629. \t\t\t}
  1630. \t\t\t
  1631. \t\t\t.shop-avatar-ebay {
  1632. \t\t\t\twidth: 80px;
  1633. \t\t\t\theight: 80px;
  1634. \t\t\t}
  1635. \t\t\t
  1636. \t\t\t.shop-name-ebay {
  1637. \t\t\t\tfont-size: 1.3rem;
  1638. \t\t\t\tline-height: 1.3;
  1639. \t\t\t\tword-break: break-word;
  1640. \t\t\t\tletter-spacing: -0.1px;
  1641. \t\t\t\thyphens: auto;
  1642. \t\t\t\tmax-width: 100%;
  1643. \t\t\t}
  1645. \t\t\t.shop-name-section {
  1646. \t\t\t\tmargin-bottom: 8px;
  1647. \t\t\t}
  1649. \t\t\t.verified-text {
  1650. \t\t\t\tfont-size: 0.7rem;
  1651. \t\t\t\twhite-space: normal;
  1652. \t\t\t\tline-height: 1.4;
  1653. \t\t\t\tflex-wrap: wrap;
  1654. \t\t\t\tjustify-content: center;
  1655. \t\t\t\tword-break: break-word;
  1656. \t\t\t}
  1658. \t\t\t.verified-text i {
  1659. \t\t\t\tfont-size: 0.75rem;
  1660. \t\t\t\tflex-shrink: 0;
  1661. \t\t\t}
  1663. \t\t\t.shop-category-ebay {
  1664. \t\t\t\tfont-size: 0.65rem;
  1665. \t\t\t\tpadding: 4px 8px;
  1666. \t\t\t\tmax-width: 100%;
  1667. \t\t\t\tline-height: 1.3;
  1668. \t\t\t\tword-break: break-word;
  1669. \t\t\t}
  1670. \t\t\t
  1671. \t\t\t.stat-row {
  1672. \t\t\t\tgap: 6px;
  1673. \t\t\t\tflex-direction: row;
  1674. \t\t\t\tjustify-content: space-around;
  1675. \t\t\t}
  1676. \t\t\t
  1677. \t\t\t.stat-item-ebay {
  1678. \t\t\t\tflex: 1;
  1679. \t\t\t\tmin-width: 0;
  1680. \t\t\t\talign-items: center;
  1681. \t\t\t\tpadding: 8px 4px;
  1682. \t\t\t}
  1684. \t\t\t.stat-percentage,
  1685. \t\t\t.stat-number-ebay {
  1686. \t\t\t\tfont-size: 0.95rem;
  1687. \t\t\t\tline-height: 1.1;
  1688. \t\t\t\tword-break: break-word;
  1689. \t\t\t}
  1691. \t\t\t.stat-label-ebay {
  1692. \t\t\t\tfont-size: 0.6rem;
  1693. \t\t\t\ttext-align: center;
  1694. \t\t\t\tline-height: 1.2;
  1695. \t\t\t\tletter-spacing: 0.2px;
  1696. \t\t\t\tpadding: 0 2px;
  1697. \t\t\t\tword-break: break-word;
  1698. \t\t\t\thyphens: auto;
  1699. \t\t\t}
  1701. \t\t\t.shop-additional-info {
  1702. \t\t\t\tflex-direction: column;
  1703. \t\t\t\tgap: 8px;
  1704. \t\t\t\tfont-size: 0.7rem;
  1705. \t\t\t\talign-items: center;
  1706. \t\t\t\tline-height: 1.5;
  1707. \t\t\t}
  1709. \t\t\t.member-since {
  1710. \t\t\t\tfont-size: 0.7rem;
  1711. \t\t\t\tpadding: 4px 8px;
  1712. \t\t\t\tline-height: 1.4;
  1713. \t\t\t\tword-break: break-word;
  1714. \t\t\t\ttext-align: center;
  1715. \t\t\t\twidth: 100%;
  1716. \t\t\t\tmax-width: 100%;
  1717. \t\t\t\tjustify-content: center;
  1718. \t\t\t\twhite-space: normal;
  1719. \t\t\t}
  1721. \t\t\t.member-since i {
  1722. \t\t\t\tfont-size: 0.8rem;
  1723. \t\t\t\tmargin-right: 3px;
  1724. \t\t\t\tflex-shrink: 0;
  1725. \t\t\t}
  1727. \t\t\t.btn-ebay {
  1728. \t\t\t\tfont-size: 0.8rem;
  1729. \t\t\t\tpadding: 10px 14px;
  1730. \t\t\t\tline-height: 1.3;
  1731. \t\t\t}
  1733. \t\t\t.member-since i {
  1734. \t\t\t\tmargin-right: 4px;
  1735. \t\t\t\tfont-size: 0.8rem;
  1736. \t\t\t}
  1737. \t\t\t
  1738. \t\t\t.btn-ebay {
  1739. \t\t\t\tfont-size: 0.85rem;
  1740. \t\t\t\tpadding: 10px 16px;
  1741. \t\t\t}
  1742. \t\t\t
  1743. \t\t\t.member-since {
  1744. \t\t\t\tfont-size: 0.75rem;
  1745. \t\t\t}
  1746. \t\t\t
  1747. \t\t\t.shop-tab-content {
  1748. \t\t\t\tpadding: 15px 10px;
  1749. \t\t\t}
  1751. \t\t\t.shop-stats-row {
  1752. \t\t\t\tflex-direction: column;
  1753. \t\t\t\tgap: 10px;
  1754. \t\t\t\talign-items: flex-start;
  1755. \t\t\t}
  1756. \t\t}
  1758. \t\t.follow-button {
  1759. \t\t\tbackground: #ffa200;
  1760. \t\t\tborder: none;
  1761. \t\t\tcolor: white;
  1762. \t\t\tpadding: 12px 30px;
  1763. \t\t\tborder-radius: 25px;
  1764. \t\t\tfont-weight: 600;
  1765. \t\t\ttransition: all 0.3s ease;
  1766. \t\t\tcursor: pointer;
  1767. \t\t\tdisplay: inline-flex;
  1768. \t\t\talign-items: center;
  1769. \t\t\tgap: 8px;
  1770. \t\t}
  1772. \t\t.follow-button:hover {
  1773. \t\t\tbackground: #e8910a;
  1774. \t\t\ttransform: translateY(-2px);
  1775. \t\t\tbox-shadow: 0 5px 15px rgba(255, 162, 0, 0.3);
  1776. \t\t}
  1778. \t\t.follow-button.following {
  1779. \t\t\tbackground: #28a745;
  1780. \t\t}
  1782. \t\t.follow-button.following:hover {
  1783. \t\t\tbackground: #218838;
  1784. \t\t}
  1786. \t\t.follow-button:disabled {
  1787. \t\t\topacity: 0.6;
  1788. \t\t\tcursor: not-allowed;
  1789. \t\t\ttransform: none;
  1790. \t\t}
  1792. \t\t.follow-stats {
  1793. \t\t\tdisplay: flex;
  1794. \t\t\tgap: 30px;
  1795. \t\t\tmargin-top: 20px;
  1796. \t\t\tflex-wrap: wrap;
  1797. \t\t}
  1799. \t\t.follow-stat {
  1800. \t\t\ttext-align: center;
  1801. \t\t\tpadding: 15px;
  1802. \t\t\tbackground: #f8f9fa;
  1803. \t\t\tborder-radius: 10px;
  1804. \t\t\tmin-width: 120px;
  1805. \t\t}
  1807. \t\t.follow-stat-number {
  1808. \t\t\tfont-size: 1.8rem;
  1809. \t\t\tfont-weight: bold;
  1810. \t\t\tcolor: #ffa200;
  1811. \t\t\tdisplay: block;
  1812. \t\t}
  1814. \t\t.follow-stat-label {
  1815. \t\t\tcolor: #666;
  1816. \t\t\tfont-size: 0.9rem;
  1817. \t\t\ttext-transform: uppercase;
  1818. \t\t\tletter-spacing: 0.5px;
  1819. \t\t}
  1821. \t\t.shop-actions {
  1822. \t\t\tdisplay: flex;
  1823. \t\t\tgap: 15px;
  1824. \t\t\talign-items: center;
  1825. \t\t\tflex-wrap: wrap;
  1826. \t\t\tmargin-top: 20px;
  1827. \t\t}
  1829. \t\t.action-button {
  1830. \t\t\tbackground: white;
  1831. \t\t\tborder: 2px solid #ffa200;
  1832. \t\t\tcolor: #ffa200;
  1833. \t\t\tpadding: 10px 20px;
  1834. \t\t\tborder-radius: 20px;
  1835. \t\t\ttext-decoration: none;
  1836. \t\t\tfont-weight: 500;
  1837. \t\t\ttransition: all 0.3s ease;
  1838. \t\t\tdisplay: inline-flex;
  1839. \t\t\talign-items: center;
  1840. \t\t\tgap: 8px;
  1841. \t\t}
  1843. \t\t.action-button:hover {
  1844. \t\t\tbackground: #ffa200;
  1845. \t\t\tcolor: white;
  1846. \t\t\ttransform: translateY(-2px);
  1847. \t\t\tbox-shadow: 0 5px 15px rgba(255, 162, 0, 0.3);
  1848. \t\t}
  1850. \t\t.positive-feedback {
  1851. \t\t\tcolor: #28a745;
  1852. \t\t\tfont-weight: bold;
  1853. \t\t}
  1855. \t\t.items-sold {
  1856. \t\t\tcolor: #666;
  1857. \t\t\tfont-size: 0.9rem;
  1858. \t\t}
  1860. \t\t.followers-count {
  1861. \t\t\tcolor: #666;
  1862. \t\t\tfont-size: 0.9rem;
  1863. \t\t}
  1865. \t\t.shop-avatar {
  1866. \t\t\twidth: 120px;
  1867. \t\t\theight: 120px;
  1868. \t\t\tborder-radius: 50%;
  1869. \t\t\tborder: 4px solid white;
  1870. \t\t\tobject-fit: cover;
  1871. \t\t\tmargin-bottom: 20px;
  1872. \t\t}
  1874. \t\t.shop-stats {
  1875. \t\t\tbackground: white;
  1876. \t\t\tborder-radius: 10px;
  1877. \t\t\tpadding: 30px;
  1878. \t\t\tbox-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  1879. \t\t\tmargin-top: -50px;
  1880. \t\t\tposition: relative;
  1881. \t\t\tz-index: 10;
  1882. \t\t}
  1884. \t\t.stat-item {
  1885. \t\t\ttext-align: center;
  1886. \t\t\tpadding: 20px;
  1887. \t\t}
  1889. \t\t.stat-number {
  1890. \t\t\tfont-size: 2.5rem;
  1891. \t\t\tfont-weight: bold;
  1892. \t\t\tcolor: #ffa200;
  1893. \t\t\tdisplay: block;
  1894. \t\t}
  1896. \t\t.stat-label {
  1897. \t\t\tcolor: #666;
  1898. \t\t\tfont-size: 0.9rem;
  1899. \t\t\ttext-transform: uppercase;
  1900. \t\t\tletter-spacing: 1px;
  1901. \t\t}
  1903. \t\t.shop-description {
  1904. \t\t\tbackground: #f8f9fa;
  1905. \t\t\tpadding: 30px;
  1906. \t\t\tborder-radius: 10px;
  1907. \t\t\tmargin-bottom: 40px;
  1908. \t\t}
  1910. \t\t.shop-contact {
  1911. \t\t\tbackground: white;
  1912. \t\t\tborder: 1px solid #e9ecef;
  1913. \t\t\tborder-radius: 10px;
  1914. \t\t\tpadding: 25px;
  1915. \t\t\tmargin-bottom: 40px;
  1916. \t\t}
  1918. \t\t.contact-item {
  1919. \t\t\tdisplay: flex;
  1920. \t\t\talign-items: center;
  1921. \t\t\tmargin-bottom: 15px;
  1922. \t\t}
  1924. \t\t.contact-item i {
  1925. \t\t\tcolor: #ffa200;
  1926. \t\t\tmargin-right: 15px;
  1927. \t\t\twidth: 20px;
  1928. \t\t}
  1930. \t\t.product-card {
  1931. \t\t\tbackground: white;
  1932. \t\t\tborder-radius: 10px;
  1933. \t\t\toverflow: hidden;
  1934. \t\t\tbox-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  1935. \t\t\ttransition: transform 0.3s ease, box-shadow 0.3s ease;
  1936. \t\t\tmargin-bottom: 30px;
  1937. \t\t}
  1939. \t\t.product-card:hover {
  1940. \t\t\ttransform: translateY(-5px);
  1941. \t\t\tbox-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  1942. \t\t}
  1944. \t\t.product-image {
  1945. \t\t\theight: 200px;
  1946. \t\t\tbackground-size: cover;
  1947. \t\t\tbackground-position: center;
  1948. \t\t\tposition: relative;
  1949. \t\t}
  1951. \t\t.product-info {
  1952. \t\t\tpadding: 20px;
  1953. \t\t}
  1955. \t\t.product-title {
  1956. \t\t\tfont-size: 1.1rem;
  1957. \t\t\tfont-weight: 600;
  1958. \t\t\tmargin-bottom: 10px;
  1959. \t\t\tcolor: #333;
  1960. \t\t}
  1962. \t\t.product-price {
  1963. \t\t\tfont-size: 1.3rem;
  1964. \t\t\tfont-weight: bold;
  1965. \t\t\tcolor: #ffa200;
  1966. \t\t\tmargin-bottom: 15px;
  1967. \t\t}
  1969. \t\t.product-meta {
  1970. \t\t\tdisplay: flex;
  1971. \t\t\tjustify-content: space-between;
  1972. \t\t\talign-items: center;
  1973. \t\t\tfont-size: 0.9rem;
  1974. \t\t\tcolor: #666;
  1975. \t\t}
  1977. \t\t.rating {
  1978. \t\t\tcolor: #ffa200;
  1979. \t\t}
  1981. \t\t/* Boutons d'action uniformes */
  1982. \t\t.btn-shop,
  1983. \t\t.shop-action-btn {
  1984. \t\t\tbackground: #ffa200;
  1985. \t\t\tborder: 1px solid #ffa200;
  1986. \t\t\tcolor: white;
  1987. \t\t\tpadding: 12px 24px;
  1988. \t\t\tborder-radius: 6px;
  1989. \t\t\tfont-weight: 500;
  1990. \t\t\tfont-size: 0.9rem;
  1991. \t\t\ttransition: all 0.3s ease;
  1992. \t\t\ttext-decoration: none;
  1993. \t\t\tdisplay: inline-flex;
  1994. \t\t\talign-items: center;
  1995. \t\t\tjustify-content: center;
  1996. \t\t\tgap: 8px;
  1997. \t\t\tmin-width: 120px;
  1998. \t\t\theight: 44px;
  1999. \t\t\twhite-space: nowrap;
  2000. \t\t}
  2002. \t\t.btn-shop:hover,
  2003. \t\t.shop-action-btn:hover {
  2004. \t\t\tbackground: #e8910a;
  2005. \t\t\tborder-color: #e8910a;
  2006. \t\t\tcolor: white;
  2007. \t\t\ttransform: translateY(-1px);
  2008. \t\t\tbox-shadow: 0 4px 12px rgba(255, 162, 0, 0.3);
  2009. \t\t}
  2011. \t\t/* Boutons secondaires */
  2012. \t\t.shop-action-btn.secondary {
  2013. \t\t\tbackground: transparent;
  2014. \t\t\tborder: 1px solid #6c757d;
  2015. \t\t\tcolor: #6c757d;
  2016. \t\t}
  2018. \t\t.shop-action-btn.secondary:hover {
  2019. \t\t\tbackground: #6c757d;
  2020. \t\t\tborder-color: #6c757d;
  2021. \t\t\tcolor: white;
  2022. \t\t\ttransform: translateY(-1px);
  2023. \t\t\tbox-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
  2024. \t\t}
  2026. \t\t/* Responsive */
  2027. \t\t@media(max-width: 768px) {
  2028. \t\t\t.shop-header {
  2029. \t\t\t\tpadding: 100px 0 40px;
  2030. \t\t\t}
  2032. \t\t\t.shop-avatar {
  2033. \t\t\t\twidth: 80px;
  2034. \t\t\t\theight: 80px;
  2035. \t\t\t}
  2037. \t\t\t.shop-stats {
  2038. \t\t\t\tmargin-top: -30px;
  2039. \t\t\t\tpadding: 20px;
  2040. \t\t\t}
  2042. \t\t\t.stat-number {
  2043. \t\t\t\tfont-size: 2rem;
  2044. \t\t\t}
  2045. \t\t}
  2047. \t\t/* Très petits écrans */
  2048. \t\t@media(max-width: 480px) {
  2049. \t\t\t.btn-shop,
  2050. \t\t\t.shop-action-btn {
  2051. \t\t\t\tmin-width: 90px;
  2052. \t\t\t\theight: 38px;
  2053. \t\t\t\tfont-size: 0.8rem;
  2054. \t\t\t\tpadding: 8px 16px;
  2055. \t\t\t}
  2057. \t\t\t.shop-actions-row {
  2058. \t\t\t\tgap: 8px;
  2059. \t\t\t}
  2060. \t\t}
  2062. \t\t/* Styles pour la section des avis */
  2063. \t\t.review-stats-card {
  2064. \t\t\tbackground: white;
  2065. \t\t\tborder-radius: 10px;
  2066. \t\t\tpadding: 20px;
  2067. \t\t\tbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  2068. \t\t\tmargin-bottom: 20px;
  2069. \t\t}
  2071. \t\t.stats-header {
  2072. \t\t\tdisplay: flex;
  2073. \t\t\talign-items: center;
  2074. \t\t\tmargin-bottom: 20px;
  2075. \t\t}
  2077. \t\t.overall-rating {
  2078. \t\t\ttext-align: center;
  2079. \t\t\tmargin-right: 20px;
  2080. \t\t}
  2082. \t\t.rating-number {
  2083. \t\t\tfont-size: 36px;
  2084. \t\t\tfont-weight: bold;
  2085. \t\t\tcolor: #333;
  2086. \t\t\tdisplay: block;
  2087. \t\t}
  2089. \t\t.stars {
  2090. \t\t\tcolor: #ffc107;
  2091. \t\t\tfont-size: 18px;
  2092. \t\t\tmargin-top: 5px;
  2093. \t\t}
  2095. \t\t.rating-summary p {
  2096. \t\t\tmargin: 0;
  2097. \t\t\tcolor: #666;
  2098. \t\t}
  2100. \t\t.rating-breakdown {
  2101. \t\t\tmargin-top: 15px;
  2102. \t\t}
  2104. \t\t.rating-bar {
  2105. \t\t\tdisplay: flex;
  2106. \t\t\talign-items: center;
  2107. \t\t\tmargin-bottom: 8px;
  2108. \t\t}
  2110. \t\t.rating-label {
  2111. \t\t\twidth: 40px;
  2112. \t\t\tfont-size: 14px;
  2113. \t\t\tcolor: #666;
  2114. \t\t}
  2116. \t\t.rating-progress {
  2117. \t\t\tflex: 1;
  2118. \t\t\theight: 6px;
  2119. \t\t\tbackground: #e9ecef;
  2120. \t\t\tborder-radius: 3px;
  2121. \t\t\tmargin: 0 10px;
  2122. \t\t\toverflow: hidden;
  2123. \t\t}
  2125. \t\t.rating-fill {
  2126. \t\t\theight: 100%;
  2127. \t\t\tbackground: linear-gradient(45deg, #ffc107, #ff8c00);
  2128. \t\t\ttransition: width 0.3s ease;
  2129. \t\t}
  2131. \t\t.rating-count {
  2132. \t\t\twidth: 30px;
  2133. \t\t\ttext-align: right;
  2134. \t\t\tfont-size: 14px;
  2135. \t\t\tcolor: #666;
  2136. \t\t}
  2138. \t\t.reviews-preview {
  2139. \t\t\tbackground: white;
  2140. \t\t\tborder-radius: 10px;
  2141. \t\t\tpadding: 20px;
  2142. \t\t\tbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  2143. \t\t}
  2145. \t\t.review-card-preview {
  2146. \t\t\tborder-bottom: 1px solid #f0f0f0;
  2147. \t\t\tpadding-bottom: 15px;
  2148. \t\t\tmargin-bottom: 15px;
  2149. \t\t}
  2151. \t\t.review-card-preview:last-child {
  2152. \t\t\tborder-bottom: none;
  2153. \t\t\tmargin-bottom: 0;
  2154. \t\t}
  2156. \t\t.review-header {
  2157. \t\t\tdisplay: flex;
  2158. \t\t\tjustify-content: space-between;
  2159. \t\t\talign-items: center;
  2160. \t\t\tmargin-bottom: 10px;
  2161. \t\t}
  2163. \t\t.review-user {
  2164. \t\t\tdisplay: flex;
  2165. \t\t\talign-items: center;
  2166. \t\t}
  2168. \t\t.user-avatar {
  2169. \t\t\twidth: 35px;
  2170. \t\t\theight: 35px;
  2171. \t\t\tborder-radius: 50%;
  2172. \t\t\tbackground: linear-gradient(45deg, #667eea, #764ba2);
  2173. \t\t\tdisplay: flex;
  2174. \t\t\talign-items: center;
  2175. \t\t\tjustify-content: center;
  2176. \t\t\tcolor: white;
  2177. \t\t\tfont-weight: bold;
  2178. \t\t\tmargin-right: 10px;
  2179. \t\t}
  2181. \t\t.user-info h6 {
  2182. \t\t\tmargin: 0;
  2183. \t\t\tfont-size: 14px;
  2184. \t\t\tfont-weight: 600;
  2185. \t\t\tcolor: #333;
  2186. \t\t}
  2188. \t\t.user-info small {
  2189. \t\t\tcolor: #666;
  2190. \t\t\tfont-size: 12px;
  2191. \t\t}
  2193. \t\t.review-rating {
  2194. \t\t\tdisplay: flex;
  2195. \t\t\talign-items: center;
  2196. \t\t\tgap: 5px;
  2197. \t\t}
  2199. \t\t.verified-badge {
  2200. \t\t\tbackground: #28a745;
  2201. \t\t\tcolor: white;
  2202. \t\t\tpadding: 2px 4px;
  2203. \t\t\tborder-radius: 3px;
  2204. \t\t\tfont-size: 10px;
  2205. \t\t\tfont-weight: bold;
  2206. \t\t}
  2208. \t\t.review-content {
  2209. \t\t\tcolor: #666;
  2210. \t\t\tfont-size: 14px;
  2211. \t\t\tline-height: 1.5;
  2212. \t\t}
  2214. \t\t.empty-reviews {
  2215. \t\t\ttext-align: center;
  2216. \t\t\tpadding: 40px 20px;
  2217. \t\t\tcolor: #666;
  2218. \t\t}
  2220. \t\t.empty-reviews i {
  2221. \t\t\tfont-size: 48px;
  2222. \t\t\tcolor: #ddd;
  2223. \t\t\tmargin-bottom: 15px;
  2224. \t\t}
  2226. \t\t.empty-reviews h4 {
  2227. \t\t\tcolor: #333;
  2228. \t\t\tmargin-bottom: 10px;
  2229. \t\t}
  2231. \t\t.section-title h2 {
  2232. \t\t\tcolor: #333;
  2233. \t\t\tmargin-bottom: 10px;
  2234. \t\t}
  2236. \t\t.section-title p {
  2237. \t\t\tcolor: #666;
  2238. \t\t\tmargin-bottom: 30px;
  2239. \t\t}
  2241. \t\t@media(max-width: 768px) {
  2242. \t\t\t.stats-header {
  2243. \t\t\t\tflex-direction: column;
  2244. \t\t\t\ttext-align: center;
  2245. \t\t\t}
  2247. \t\t\t.overall-rating {
  2248. \t\t\t\tmargin-right: 0;
  2249. \t\t\t\tmargin-bottom: 15px;
  2250. \t\t\t}
  2252. \t\t\t.review-header {
  2253. \t\t\t\tflex-direction: column;
  2254. \t\t\t\talign-items: flex-start;
  2255. \t\t\t}
  2257. \t\t\t.review-rating {
  2258. \t\t\t\tmargin-top: 5px;
  2259. \t\t\t}
  2260. \t\t}
  2261. \t</style>
  2262. ";
  2263.         
  2264.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  2266.         
  2267.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  2269.         yield from [];
  2270.     }
  2272.     // line 2166
  2273.     /**
  2274.      * @return iterable<null|scalar|\Stringable>
  2275.      */
  2276.     public function block_body(array $context, array $blocks = []): iterable
  2277.     {
  2278.         $macros = $this->macros;
  2279.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  2280.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  2282.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  2283.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  2285.         // line 2167
  2286.         yield "
  2287. \t<!-- Shop Header eBay-style avec Karma - Pleine largeur -->
  2288. \t<section
  2289. \t\tclass=\"shop-header\">
  2290. \t\t<!-- Carrousel eBay-style -->
  2291. \t\t<div class=\"shop-carousel-ebay\">
  2292. \t\t\t<div class=\"carousel-container\">
  2293. \t\t\t\t";
  2294.         // line 2174
  2295.         $context["allBannerImages"] = CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "getAllBannerImages", [], "method", false, false, false, 2174);
  2296.         // line 2175
  2297.         yield "\t\t\t\t";
  2298.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["allBannerImages"] ?? null)) > 0)) {
  2299.             // line 2176
  2300.             yield "\t\t\t\t\t";
  2301.             $context['_parent'] = $context;
  2302.             $context['_seq'] = CoreExtension::ensureTraversable(($context["allBannerImages"] ?? null));
  2303.             $context['loop'] = [
  2304.               'parent' => $context['_parent'],
  2305.               'index0' => 0,
  2306.               'index'  => 1,
  2307.               'first'  => true,
  2308.             ];
  2309.             if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  2310.                 $length = count($context['_seq']);
  2311.                 $context['loop']['revindex0'] = $length - 1;
  2312.                 $context['loop']['revindex'] = $length;
  2313.                 $context['loop']['length'] = $length;
  2314.                 $context['loop']['last'] = 1 === $length;
  2315.             }
  2316.             foreach ($context['_seq'] as $context["_key"] => $context["image"]) {
  2317.                 // line 2177
  2318.                 yield "\t\t\t\t\t\t<div class=\"carousel-slide ";
  2319.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "first", [], "any", false, false, false, 2177)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2320.                     yield "active";
  2321.                 }
  2322.                 yield "\" style=\"background-image: url('";
  2323.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl($context["image"]), "html", null, true);
  2324.                 yield "')\">
  2325. \t\t\t\t\t\t\t<div class=\"shop-banner-overlay\"></div>
  2326. \t\t\t\t\t\t</div>
  2327. \t\t\t\t\t";
  2328.                 ++$context['loop']['index0'];
  2329.                 ++$context['loop']['index'];
  2330.                 $context['loop']['first'] = false;
  2331.                 if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  2332.                     --$context['loop']['revindex0'];
  2333.                     --$context['loop']['revindex'];
  2334.                     $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  2335.                 }
  2336.             }
  2337.             $_parent = $context['_parent'];
  2338.             unset($context['_seq'], $context['_key'], $context['image'], $context['_parent'], $context['loop']);
  2339.             $context = array_intersect_key($context, $_parent) + $_parent;
  2340.             // line 2181
  2341.             yield "\t\t\t\t";
  2342.         } else {
  2343.             // line 2182
  2344.             yield "\t\t\t\t\t<!-- Slide par défaut avec dégradé si aucune image de bannière -->
  2345. \t\t\t\t\t<div class=\"carousel-slide active\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);\">
  2346. \t\t\t\t\t\t<div class=\"shop-banner-overlay\"></div>
  2347. \t\t\t\t\t</div>
  2348. \t\t\t\t";
  2349.         }
  2350.         // line 2187
  2351.         yield "\t\t\t</div>
  2353. \t\t\t<!-- Contrôles eBay-style améliorés - toujours affichés si plusieurs images -->
  2354. \t\t\t";
  2355.         // line 2190
  2356.         $context["totalBannerImages"] = Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["allBannerImages"] ?? null));
  2357.         // line 2191
  2358.         yield "\t\t\t";
  2359.         if ((($context["totalBannerImages"] ?? null) > 1)) {
  2360.             // line 2192
  2361.             yield "\t\t\t\t<div class=\"carousel-controls-ebay\">
  2362. \t\t\t\t\t<button class=\"carousel-btn-ebay prev-btn\" onclick=\"previousSlide()\" id=\"prevBtn\" title=\"Image précédente\" aria-label=\"Image précédente\">
  2363. \t\t\t\t\t\t<i class=\"lnr lnr-chevron-left\"></i>
  2364. \t\t\t\t\t</button>
  2365. \t\t\t\t\t<button class=\"carousel-btn-ebay pause-btn\" onclick=\"toggleCarousel()\" id=\"pauseBtn\" title=\"Pause/Reprendre\" aria-label=\"Pause/Reprendre\">
  2366. \t\t\t\t\t\t<span id=\"pauseIcon\" class=\"pause-icon-content\">⏸</span>
  2367. \t\t\t\t\t</button>
  2368. \t\t\t\t\t<button class=\"carousel-btn-ebay next-btn\" onclick=\"nextSlide()\" id=\"nextBtn\" title=\"Image suivante\" aria-label=\"Image suivante\">
  2369. \t\t\t\t\t\t<i class=\"lnr lnr-chevron-right\"></i>
  2370. \t\t\t\t\t</button>
  2371. \t\t\t\t</div>
  2373. \t\t\t\t<!-- Indicateurs eBay-style améliorés -->
  2374. \t\t\t\t<div class=\"carousel-indicators-ebay\">
  2375. \t\t\t\t\t";
  2376.             // line 2206
  2377.             $context['_parent'] = $context;
  2378.             $context['_seq'] = CoreExtension::ensureTraversable(($context["allBannerImages"] ?? null));
  2379.             $context['loop'] = [
  2380.               'parent' => $context['_parent'],
  2381.               'index0' => 0,
  2382.               'index'  => 1,
  2383.               'first'  => true,
  2384.             ];
  2385.             if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  2386.                 $length = count($context['_seq']);
  2387.                 $context['loop']['revindex0'] = $length - 1;
  2388.                 $context['loop']['revindex'] = $length;
  2389.                 $context['loop']['length'] = $length;
  2390.                 $context['loop']['last'] = 1 === $length;
  2391.             }
  2392.             foreach ($context['_seq'] as $context["_key"] => $context["image"]) {
  2393.                 // line 2207
  2394.                 yield "\t\t\t\t\t\t<button class=\"carousel-indicator-ebay ";
  2395.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "first", [], "any", false, false, false, 2207)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2396.                     yield "active";
  2397.                 }
  2398.                 yield "\" onclick=\"goToSlide(";
  2399.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index0", [], "any", false, false, false, 2207), "html", null, true);
  2400.                 yield ")\" title=\"Image ";
  2401.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 2207), "html", null, true);
  2402.                 yield "\" aria-label=\"Aller à l'image ";
  2403.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 2207), "html", null, true);
  2404.                 yield "\"></button>
  2405. \t\t\t\t\t";
  2406.                 ++$context['loop']['index0'];
  2407.                 ++$context['loop']['index'];
  2408.                 $context['loop']['first'] = false;
  2409.                 if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  2410.                     --$context['loop']['revindex0'];
  2411.                     --$context['loop']['revindex'];
  2412.                     $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  2413.                 }
  2414.             }
  2415.             $_parent = $context['_parent'];
  2416.             unset($context['_seq'], $context['_key'], $context['image'], $context['_parent'], $context['loop']);
  2417.             $context = array_intersect_key($context, $_parent) + $_parent;
  2418.             // line 2209
  2419.             yield "\t\t\t\t</div>
  2420. \t\t\t";
  2421.         }
  2422.         // line 2211
  2423.         yield "\t\t</div>
  2425. \t\t<!-- Contenu de la boutique eBay-style -->
  2426. \t\t<div class=\"shop-header-content\">
  2427. \t\t\t<div class=\"row g-3 g-md-4 align-items-start align-items-md-center\">
  2428. \t\t\t\t<!-- Logo de la boutique -->
  2429. \t\t\t\t<div class=\"col-12 col-md-auto text-center text-md-start\">
  2430. \t\t\t\t\t<div class=\"shop-avatar-container-ebay\">
  2431. \t\t\t\t\t\t";
  2432.         // line 2219
  2433.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "logo", [], "any", false, false, false, 2219)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2434.             // line 2220
  2435.             yield "\t\t\t\t\t\t\t<img src=\"";
  2436.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "logo", [], "any", false, false, false, 2220)), "html", null, true);
  2437.             yield "\" alt=\"";
  2438.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "name", [], "any", false, false, false, 2220), "html", null, true);
  2439.             yield "\" class=\"shop-avatar-ebay\">
  2440. \t\t\t\t\t\t";
  2441.         } else {
  2442.             // line 2222
  2443.             yield "\t\t\t\t\t\t\t<div class=\"shop-avatar-ebay shop-avatar-placeholder\">
  2444. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\"></i>
  2445. \t\t\t\t\t\t\t</div>
  2446. \t\t\t\t\t\t";
  2447.         }
  2448.         // line 2226
  2449.         yield "\t\t\t\t\t\t";
  2450.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "isVerified", [], "any", false, false, false, 2226)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2451.             // line 2227
  2452.             yield "\t\t\t\t\t\t\t<div class=\"verified-badge-ebay\">
  2453. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  2454. \t\t\t\t\t\t\t</div>
  2455. \t\t\t\t\t\t";
  2456.         }
  2457.         // line 2231
  2458.         yield "\t\t\t\t\t</div>
  2459. \t\t\t\t</div>
  2461. \t\t\t\t<!-- Informations principales -->
  2462. \t\t\t\t<div class=\"col-12 col-md\">
  2463. \t\t\t\t\t<div class=\"shop-info-ebay\">
  2464. \t\t\t\t\t\t<!-- Nom de la boutique -->
  2465. \t\t\t\t\t\t<div class=\"shop-name-section mb-2\">
  2466. \t\t\t\t\t\t\t<h1 class=\"shop-name-ebay mb-1\">";
  2467.         // line 2239
  2468.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "name", [], "any", false, false, false, 2239), "html", null, true);
  2469.         yield "</h1>
  2470. \t\t\t\t\t\t\t<div class=\"d-flex flex-wrap align-items-center gap-2\">
  2471. \t\t\t\t\t\t\t";
  2472.         // line 2241
  2473.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "isVerified", [], "any", false, false, false, 2241)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2474.             // line 2242
  2475.             yield "\t\t\t\t\t\t\t\t<span class=\"verified-text\">
  2476. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle me-1\"></i>Vendeur vérifié
  2477. \t\t\t\t\t\t\t\t</span>
  2478. \t\t\t\t\t\t\t";
  2479.         }
  2480.         // line 2246
  2481.         yield "\t\t\t\t\t\t";
  2482.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "shopCategory", [], "any", false, false, false, 2246)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2483.             // line 2247
  2484.             yield "\t\t\t\t\t\t\t\t<span class=\"shop-category-ebay\">";
  2485.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "shopCategory", [], "any", false, false, false, 2247), "name", [], "any", false, false, false, 2247), "html", null, true);
  2486.             yield "</span>
  2487. \t\t\t\t\t\t";
  2488.         }
  2489.         // line 2249
  2490.         yield "\t\t\t\t\t\t\t</div>
  2491. \t\t\t\t\t\t</div>
  2493. \t\t\t\t\t\t<!-- Statistiques principales -->
  2494. \t\t\t\t\t\t<div class=\"shop-stats-ebay\">
  2495. \t\t\t\t\t\t\t<div class=\"stat-row mb-2\">
  2496. \t\t\t\t\t\t\t\t";
  2497.         // line 2255
  2498.         if ((CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "averageRating", [], "any", false, false, false, 2255) > 0)) {
  2499.             // line 2256
  2500.             yield "\t\t\t\t\t\t\t\t\t<div class=\"stat-item-ebay\">
  2501. \t\t\t\t\t\t\t\t\t\t<span class=\"stat-percentage\">";
  2502.             // line 2257
  2503.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "averageRating", [], "any", false, false, false, 2257), 1), "html", null, true);
  2504.             yield "%</span>
  2505. \t\t\t\t\t\t\t\t\t\t<span class=\"stat-label-ebay\">Évaluations positives</span>
  2506. \t\t\t\t\t\t\t\t\t</div>
  2507. \t\t\t\t\t\t\t\t";
  2508.         }
  2509.         // line 2261
  2510.         yield "
  2511. \t\t\t\t\t\t\t\t";
  2512.         // line 2262
  2513.         if ((CoreExtension::getAttribute($this->env, $this->source, ($context["stats"] ?? null), "totalProductSales", [], "any", false, false, false, 2262) > 0)) {
  2514.             // line 2263
  2515.             yield "\t\t\t\t\t\t\t\t\t<div class=\"stat-item-ebay\">
  2516. \t\t\t\t\t\t\t\t\t\t<span class=\"stat-number-ebay\">";
  2517.             // line 2264
  2518.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, ($context["stats"] ?? null), "totalProductSales", [], "any", false, false, false, 2264)), "html", null, true);
  2519.             yield "</span>
  2520. \t\t\t\t\t\t\t\t\t\t<span class=\"stat-label-ebay\">Articles vendus</span>
  2521. \t\t\t\t\t\t\t\t\t</div>
  2522. \t\t\t\t\t\t\t\t";
  2523.         }
  2524.         // line 2268
  2525.         yield "
  2526. \t\t\t\t\t\t\t\t";
  2527.         // line 2269
  2528.         if ((CoreExtension::getAttribute($this->env, $this->source, ($context["followStats"] ?? null), "active_follows", [], "any", false, false, false, 2269) > 0)) {
  2529.             // line 2270
  2530.             yield "\t\t\t\t\t\t\t\t\t<div class=\"stat-item-ebay\">
  2531. \t\t\t\t\t\t\t\t\t\t<span class=\"stat-number-ebay\">";
  2532.             // line 2271
  2533.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, ($context["followStats"] ?? null), "active_follows", [], "any", false, false, false, 2271)), "html", null, true);
  2534.             yield "</span>
  2535. \t\t\t\t\t\t\t\t\t\t<span class=\"stat-label-ebay\">Suiveurs</span>
  2536. \t\t\t\t\t\t\t\t\t</div>
  2537. \t\t\t\t\t\t\t\t";
  2538.         }
  2539.         // line 2275
  2540.         yield "\t\t\t\t\t\t\t</div>
  2542. \t\t\t\t\t\t\t<!-- Informations supplémentaires -->
  2543. \t\t\t\t\t\t\t<div class=\"shop-additional-info\">
  2544. \t\t\t\t\t\t\t\t<div class=\"d-flex flex-wrap gap-3 gap-md-4\">
  2545. \t\t\t\t\t\t\t\t\t";
  2546.         // line 2280
  2547.         if ((CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "averageRating", [], "any", false, false, false, 2280) > 0)) {
  2548.             // line 2281
  2549.             yield "\t\t\t\t\t\t\t\t\t\t<span class=\"member-since\">
  2550. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-thumbs-up me-1\"></i>
  2551. \t\t\t\t\t\t\t\t\t\t\t";
  2552.             // line 2283
  2553.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "averageRating", [], "any", false, false, false, 2283), 1), "html", null, true);
  2554.             yield "% positive feedback
  2555. \t\t\t\t\t\t\t\t\t\t</span>
  2556. \t\t\t\t\t\t\t\t\t";
  2557.         }
  2558.         // line 2286
  2559.         yield "\t\t\t\t\t\t\t\t\t";
  2560.         if ((CoreExtension::getAttribute($this->env, $this->source, ($context["stats"] ?? null), "totalProductSales", [], "any", false, false, false, 2286) > 0)) {
  2561.             // line 2287
  2562.             yield "\t\t\t\t\t\t\t\t\t\t<span class=\"member-since\">
  2563. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-cart me-1\"></i>
  2564. \t\t\t\t\t\t\t\t\t\t\t";
  2565.             // line 2289
  2566.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, ($context["stats"] ?? null), "totalProductSales", [], "any", false, false, false, 2289)), "html", null, true);
  2567.             yield " produit";
  2568.             yield (((CoreExtension::getAttribute($this->env, $this->source, ($context["stats"] ?? null), "totalProductSales", [], "any", false, false, false, 2289) > 1)) ? ("s") : (""));
  2569.             yield " vendu";
  2570.             yield (((CoreExtension::getAttribute($this->env, $this->source, ($context["stats"] ?? null), "totalProductSales", [], "any", false, false, false, 2289) > 1)) ? ("s") : (""));
  2571.             yield "
  2572. \t\t\t\t\t\t\t\t\t\t</span>
  2573. \t\t\t\t\t\t\t\t\t";
  2574.         }
  2575.         // line 2292
  2576.         yield "\t\t\t\t\t\t\t\t\t<span class=\"member-since\">
  2577. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-history me-1\"></i>
  2578. \t\t\t\t\t\t\t\t\t\tCréé depuis ";
  2579.         // line 2294
  2580.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatDate(CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "createdAt", [], "any", false, false, false, 2294), "M Y"), "html", null, true);
  2581.         yield "
  2582. \t\t\t\t\t\t\t\t\t</span>
  2583. \t\t\t\t\t\t\t\t</div>
  2584. \t\t\t\t\t\t\t</div>
  2585. \t\t\t\t\t\t</div>
  2586. \t\t\t\t\t</div>
  2587. \t\t\t\t</div>
  2589. \t\t\t\t<!-- Actions eBay-style -->
  2590. \t\t\t\t<div class=\"col-12 col-md-auto\">
  2591. \t\t\t\t\t<div class=\"shop-actions-ebay\">
  2592. \t\t\t\t\t\t";
  2593.         // line 2305
  2594.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 2305)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2595.             // line 2306
  2596.             yield "\t\t\t\t\t\t\t<button id=\"follow-button\" class=\"btn btn-primary btn-ebay w-100 ";
  2597.             if ((($tmp = ($context["isFollowing"] ?? null)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2598.                 yield "following";
  2599.             }
  2600.             yield "\" data-shop-id=\"";
  2601.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "id", [], "any", false, false, false, 2306), "html", null, true);
  2602.             yield "\" data-following=\"";
  2603.             yield (((($tmp = ($context["isFollowing"] ?? null)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) ? ("true") : ("false"));
  2604.             yield "\">
  2605. \t\t\t\t\t\t\t\t<span id=\"follow-text\">
  2606. \t\t\t\t\t\t\t\t\t";
  2607.             // line 2308
  2608.             if ((($tmp = ($context["isFollowing"] ?? null)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2609.                 // line 2309
  2610.                 yield "\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle me-1\"></i> Suivi
  2611. \t\t\t\t\t\t\t\t\t";
  2612.             } else {
  2613.                 // line 2311
  2614.                 yield "\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-plus me-1\"></i> Suivre
  2615. \t\t\t\t\t\t\t\t\t";
  2616.             }
  2617.             // line 2313
  2618.             yield "\t\t\t\t\t\t\t\t</span>
  2619. \t\t\t\t\t\t\t</button>
  2620. \t\t\t\t\t\t";
  2621.         } else {
  2622.             // line 2316
  2623.             yield "\t\t\t\t\t\t\t<a href=\"";
  2624.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_app_login");
  2625.             yield "\" class=\"btn btn-primary btn-ebay w-100\">
  2626. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-user me-1\"></i> Se connecter pour suivre
  2627. \t\t\t\t\t\t\t</a>
  2628. \t\t\t\t\t\t";
  2629.         }
  2630.         // line 2320
  2631.         yield "
  2632. \t\t\t\t\t\t<div class=\"d-flex gap-2 mt-2\">
  2633. \t\t\t\t\t\t\t<button class=\"btn btn-outline-secondary btn-ebay flex-fill\" onclick=\"shareShop()\" title=\"Partager\">
  2634. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-bubble\"></i>
  2635. \t\t\t\t\t\t\t\t<span class=\"d-none d-md-inline ms-1\">Partager</span>
  2636. \t\t\t\t\t\t</button>
  2638. \t\t\t\t\t\t\t<button class=\"btn btn-outline-danger btn-ebay flex-fill\" onclick=\"reportShop()\" title=\"Signaler\">
  2639. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-flag\"></i>
  2640. \t\t\t\t\t\t\t\t<span class=\"d-none d-md-inline ms-1\">Signaler</span>
  2641. \t\t\t\t\t\t</button>
  2642. \t\t\t\t\t\t</div>
  2644. \t\t\t\t\t\t";
  2645.         // line 2333
  2646.         if ((($tmp = ($context["canEdit"] ?? null)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2647.             // line 2334
  2648.             yield "\t\t\t\t\t\t\t<a href=\"";
  2649.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("seller_shop_edit", ["slug" => CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "slug", [], "any", false, false, false, 2334)]), "html", null, true);
  2650.             yield "\" class=\"btn btn-outline-primary btn-ebay w-100 mt-2\">
  2651. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-pencil me-1\"></i> Modifier la boutique
  2652. \t\t\t\t\t\t\t</a>
  2653. \t\t\t\t\t\t";
  2654.         }
  2655.         // line 2338
  2656.         yield "\t\t\t\t\t</div>
  2657. \t\t\t\t</div>
  2658. \t\t\t</div>
  2659. \t\t</div>
  2660. \t</section>
  2662. \t<!-- Shop Tabs eBay-style avec Karma -->
  2663. \t<section class=\"container\">
  2664. \t\t<div class=\"shop-tabs\">
  2665. \t\t\t<ul class=\"nav nav-tabs shop-tabs-nav\" role=\"tablist\">
  2666. \t\t\t\t<li class=\"nav-item shop-tab\">
  2667. \t\t\t\t\t<a href=\"#shop-items\" class=\"nav-link shop-tab-link active\" data-tab=\"items\" role=\"tab\">
  2668. \t\t\t\t\t\tBoutique
  2669. \t\t\t\t\t</a>
  2670. \t\t\t\t</li>
  2671. \t\t\t\t<li class=\"nav-item shop-tab\">
  2672. \t\t\t\t\t<a href=\"#shop-sale\" class=\"nav-link shop-tab-link\" data-tab=\"sale\" role=\"tab\">
  2673. \t\t\t\t\t\tPromotions
  2674. \t\t\t\t\t</a>
  2675. \t\t\t\t</li>
  2676. \t\t\t\t<li class=\"nav-item shop-tab\">
  2677. \t\t\t\t\t<a href=\"#shop-about\" class=\"nav-link shop-tab-link\" data-tab=\"about\" role=\"tab\">
  2678. \t\t\t\t\t\tÀ propos
  2679. \t\t\t\t\t</a>
  2680. \t\t\t\t</li>
  2681. \t\t\t\t<li class=\"nav-item shop-tab\">
  2682. \t\t\t\t\t<a href=\"#shop-feedback\" class=\"nav-link shop-tab-link\" data-tab=\"feedback\" role=\"tab\">
  2683. \t\t\t\t\t\tAvis (";
  2684.         // line 2365
  2685.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "getVisibleReviewsCount", [], "method", false, false, false, 2365), "html", null, true);
  2686.         yield ")
  2687. \t\t\t\t\t</a>
  2688. \t\t\t\t</li>
  2689. \t\t\t</ul>
  2691. \t\t\t<!-- Tab Content: Shop Items avec Karma -->
  2692. \t\t\t<div id=\"shop-items\" class=\"tab-content shop-tab-content active\">
  2693. \t\t\t\t<div class=\"row\">
  2694. \t\t\t\t\t<div class=\"col-lg-12\">
  2695. \t\t\t\t\t\t<div class=\"d-flex justify-content-between align-items-center mb-4\">
  2696. \t\t\t\t\t\t\t<h4 class=\"mb-0\">Produits de
  2697. \t\t\t\t\t\t\t\t";
  2698.         // line 2376
  2699.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "name", [], "any", false, false, false, 2376), "html", null, true);
  2700.         yield "</h4>
  2701. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center gap-3\">
  2702. \t\t\t\t\t\t\t\t<span style=\"font-size: 2rem; font-weight: 600; min-width: 100px; display: inline-block; text-align: center;\">
  2703. \t\t\t\t\t\t\t\t\t<span class=\"product-count\">";
  2704.         // line 2379
  2705.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["products"] ?? null))), "html", null, true);
  2706.         yield "</span>
  2708. \t\t\t\t\t\t\t\t\t<span style=\"font-size: 1rem; font-weight: 400;\">produits</span>
  2709. \t\t\t\t\t\t\t\t</span>
  2710. \t\t\t\t\t\t\t\t<select class=\"form-select\" id=\"product-sort\" style=\"width: auto;\" onchange=\"if(window.sortProducts) window.sortProducts(this.value);\">
  2711. \t\t\t\t\t\t\t\t\t<option value=\"\">Trier par</option>
  2712. \t\t\t\t\t\t\t\t\t<option value=\"price_asc\">Prix : Croissant</option>
  2713. \t\t\t\t\t\t\t\t\t<option value=\"price_desc\">Prix : Décroissant</option>
  2714. \t\t\t\t\t\t\t\t\t<option value=\"newest\">Plus récents</option>
  2715. \t\t\t\t\t\t\t\t\t<option value=\"popular\">Plus populaires</option>
  2716. \t\t\t\t\t\t\t\t\t<option value=\"name_asc\">Nom : A-Z</option>
  2717. \t\t\t\t\t\t\t\t\t<option value=\"name_desc\">Nom : Z-A</option>
  2718. \t\t\t\t\t\t\t\t</select>
  2719. \t\t\t\t\t\t\t</div>
  2720. \t\t\t\t\t\t</div>
  2722. \t\t\t\t\t\t";
  2723.         // line 2395
  2724.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["products"] ?? null)) > 0)) {
  2725.             // line 2396
  2726.             yield "\t\t\t\t\t\t\t<div class=\"row\" id=\"products-container\">
  2727. \t\t\t\t\t\t\t\t";
  2728.             // line 2397
  2729.             $context['_parent'] = $context;
  2730.             $context['_seq'] = CoreExtension::ensureTraversable(($context["products"] ?? null));
  2731.             foreach ($context['_seq'] as $context["_key"] => $context["product"]) {
  2732.                 // line 2398
  2733.                 yield "\t\t\t\t\t\t\t\t\t<div class=\"col-lg-3 col-md-4 col-sm-6 mb-4 product-item\" data-price=\"";
  2734.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "price", [], "any", false, false, false, 2398), "html", null, true);
  2735.                 yield "\" data-name=\"";
  2736.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::lower($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 2398)), "html", null, true);
  2737.                 yield "\" data-views=\"";
  2738.                 yield (((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "viewCount", [], "any", true, true, false, 2398) &&  !(null === CoreExtension::getAttribute($this->env, $this->source, $context["product"], "viewCount", [], "any", false, false, false, 2398)))) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "viewCount", [], "any", false, false, false, 2398), "html", null, true)) : (0));
  2739.                 yield "\" data-created=\"";
  2740.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatDate(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "publishedAt", [], "any", false, false, false, 2398), "Y-m-d"), "html", null, true);
  2741.                 yield "\">
  2742. \t\t\t\t\t\t\t\t\t\t<div class=\"product-card\">
  2743. \t\t\t\t\t\t\t\t\t\t\t<a href=\"";
  2744.                 // line 2400
  2745.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_product_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, $context["product"], "slug", [], "any", false, false, false, 2400)]), "html", null, true);
  2746.                 yield "\">
  2747. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"product-image\" style=\"background-image: url('";
  2748.                 // line 2401
  2749.                 if ((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", true, true, false, 2401) && (Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2401)) > 0))) {
  2750.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl((($_v0 = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 2401)) && is_array($_v0) || $_v0 instanceof ArrayAccess ? ($_v0[0] ?? null) : null)), "html", null, true);
  2751.                 } else {
  2752.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/img/product/p1.jpg"), "html", null, true);
  2753.                 }
  2754.                 yield "')\"></div>
  2755. \t\t\t\t\t\t\t\t\t\t\t</a>
  2756. \t\t\t\t\t\t\t\t\t\t\t<div class=\"product-info\">
  2757. \t\t\t\t\t\t\t\t\t\t\t\t<h6 class=\"product-title\">
  2758. \t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"";
  2759.                 // line 2405
  2760.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_product_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, $context["product"], "slug", [], "any", false, false, false, 2405)]), "html", null, true);
  2761.                 yield "\" class=\"text-decoration-none\">
  2762. \t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  2763.                 // line 2406
  2764.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 2406), "html", null, true);
  2765.                 yield "
  2766. \t\t\t\t\t\t\t\t\t\t\t\t\t</a>
  2767. \t\t\t\t\t\t\t\t\t\t\t\t</h6>
  2768. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"product-price\">";
  2769.                 // line 2409
  2770.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "price", [], "any", false, false, false, 2409), 2, ".", " "), "html", null, true);
  2771.                 yield "
  2772. \t\t\t\t\t\t\t\t\t\t\t\t\tHTG</div>
  2773. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"product-meta\">
  2774. \t\t\t\t\t\t\t\t\t\t\t\t\t<span>
  2775. \t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  2776.                 // line 2413
  2777.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "averageRating", [], "any", false, false, false, 2413)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2778.                     // line 2414
  2779.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"rating\">
  2780. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  2781.                     // line 2415
  2782.                     $context['_parent'] = $context;
  2783.                     $context['_seq'] = CoreExtension::ensureTraversable(range(1, 5));
  2784.                     foreach ($context['_seq'] as $context["_key"] => $context["i"]) {
  2785.                         // line 2416
  2786.                         yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-star";
  2787.                         if (($context["i"] <= CoreExtension::getAttribute($this->env, $this->source, $context["product"], "averageRating", [], "any", false, false, false, 2416))) {
  2788.                         } else {
  2789.                             yield "-o";
  2790.                         }
  2791.                         yield "\"></i>
  2792. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  2793.                     }
  2794.                     $_parent = $context['_parent'];
  2795.                     unset($context['_seq'], $context['_key'], $context['i'], $context['_parent']);
  2796.                     $context = array_intersect_key($context, $_parent) + $_parent;
  2797.                     // line 2418
  2798.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>
  2799. \t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  2800.                 }
  2801.                 // line 2420
  2802.                 yield "\t\t\t\t\t\t\t\t\t\t\t\t\t</span>
  2803. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"text-muted\">";
  2804.                 // line 2421
  2805.                 yield (((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "viewCount", [], "any", true, true, false, 2421) &&  !(null === CoreExtension::getAttribute($this->env, $this->source, $context["product"], "viewCount", [], "any", false, false, false, 2421)))) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "viewCount", [], "any", false, false, false, 2421), "html", null, true)) : (0));
  2806.                 yield "
  2807. \t\t\t\t\t\t\t\t\t\t\t\t\t\tvues</span>
  2808. \t\t\t\t\t\t\t\t\t\t\t\t</div>
  2809. \t\t\t\t\t\t\t\t\t\t\t</div>
  2810. \t\t\t\t\t\t\t\t\t\t</div>
  2811. \t\t\t\t\t\t\t\t\t</div>
  2812. \t\t\t\t\t\t\t\t";
  2813.             }
  2814.             $_parent = $context['_parent'];
  2815.             unset($context['_seq'], $context['_key'], $context['product'], $context['_parent']);
  2816.             $context = array_intersect_key($context, $_parent) + $_parent;
  2817.             // line 2428
  2818.             yield "\t\t\t\t\t\t\t</div>
  2819. \t\t\t\t\t\t";
  2820.         } else {
  2821.             // line 2430
  2822.             yield "\t\t\t\t\t\t\t<div class=\"text-center py-5\">
  2823. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-package\" style=\"font-size: 4rem; color: #ccc;\"></i>
  2824. \t\t\t\t\t\t\t\t<h4 class=\"mt-3\">Aucun produit disponible</h4>
  2825. \t\t\t\t\t\t\t\t<p class=\"text-muted\">Cette boutique n'a pas encore de produits en vente.</p>
  2826. \t\t\t\t\t\t\t</div>
  2827. \t\t\t\t\t\t";
  2828.         }
  2829.         // line 2436
  2830.         yield "\t\t\t\t\t</div>
  2832. \t\t\t\t</div>
  2833. \t\t\t</div>
  2835. \t\t\t<!-- Tab Content: Sale avec Karma -->
  2836. \t\t\t<div id=\"shop-sale\" class=\"tab-content shop-tab-content\">
  2837. \t\t\t\t<div class=\"text-center py-5\">
  2838. \t\t\t\t\t<i class=\"lnr lnr-tag\" style=\"font-size: 4rem; color: #ccc;\"></i>
  2839. \t\t\t\t\t<h4 class=\"mt-3\">Aucune promotion actuellement</h4>
  2840. \t\t\t\t\t<p class=\"text-muted\">Cette boutique n'a pas de promotions actives pour le moment.</p>
  2841. \t\t\t\t</div>
  2842. \t\t\t</div>
  2844. \t\t\t<!-- Tab Content: About avec Karma -->
  2845. \t\t\t<div id=\"shop-about\" class=\"tab-content shop-tab-content\">
  2846. \t\t\t\t<div class=\"row\">
  2847. \t\t\t\t\t<div class=\"col-lg-8\">
  2848. \t\t\t\t\t\t<div class=\"card\">
  2849. \t\t\t\t\t\t\t<div class=\"card-header\">
  2850. \t\t\t\t\t\t\t\t<h5 class=\"mb-0\">
  2851. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-user me-2\"></i>À propos de
  2852. \t\t\t\t\t\t\t\t\t";
  2853.         // line 2458
  2854.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "name", [], "any", false, false, false, 2458), "html", null, true);
  2855.         yield "
  2856. \t\t\t\t\t\t\t\t</h5>
  2857. \t\t\t\t\t\t\t</div>
  2858. \t\t\t\t\t\t\t<div class=\"card-body\">
  2859. \t\t\t\t\t\t\t\t";
  2860.         // line 2462
  2861.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "description", [], "any", false, false, false, 2462)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2862.             // line 2463
  2863.             yield "\t\t\t\t\t\t\t\t\t<div class=\"card-text shop-description-content\">";
  2864.             yield CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "description", [], "any", false, false, false, 2463);
  2865.             yield "</div>
  2866. \t\t\t\t\t\t\t\t";
  2867.         } else {
  2868.             // line 2465
  2869.             yield "\t\t\t\t\t\t\t\t\t<p class=\"text-muted\">Aucune description disponible.</p>
  2870. \t\t\t\t\t\t\t\t";
  2871.         }
  2872.         // line 2467
  2873.         yield "
  2874. \t\t\t\t\t\t\t\t";
  2875.         // line 2468
  2876.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "businessHours", [], "any", false, false, false, 2468)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2877.             // line 2469
  2878.             yield "\t\t\t\t\t\t\t\t\t<h6 class=\"mt-4\">
  2879. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-clock me-2\"></i>Heures d'ouverture
  2880. \t\t\t\t\t\t\t\t\t</h6>
  2881. \t\t\t\t\t\t\t\t\t<p>";
  2882.             // line 2472
  2883.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "businessHours", [], "any", false, false, false, 2472), "html", null, true);
  2884.             yield "</p>
  2885. \t\t\t\t\t\t\t\t";
  2886.         }
  2887.         // line 2474
  2888.         yield "
  2889. \t\t\t\t\t\t\t\t";
  2890.         // line 2475
  2891.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "returnPolicy", [], "any", false, false, false, 2475)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2892.             // line 2476
  2893.             yield "\t\t\t\t\t\t\t\t\t<h6 class=\"mt-4\">
  2894. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-undo me-2\"></i>Politique de retour
  2895. \t\t\t\t\t\t\t\t\t</h6>
  2896. \t\t\t\t\t\t\t\t\t<p>";
  2897.             // line 2479
  2898.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "returnPolicy", [], "any", false, false, false, 2479), "html", null, true);
  2899.             yield "</p>
  2900. \t\t\t\t\t\t\t\t";
  2901.         }
  2902.         // line 2481
  2903.         yield "\t\t\t\t\t\t\t</div>
  2904. \t\t\t\t\t\t</div>
  2905. \t\t\t\t\t</div>
  2906. \t\t\t\t\t<div class=\"col-lg-4\">
  2907. \t\t\t\t\t\t<div class=\"card shop-info-card\">
  2908. \t\t\t\t\t\t\t<div class=\"card-header\">
  2909. \t\t\t\t\t\t\t\t<h6 class=\"mb-0\">
  2910. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-chart me-2\"></i>Statistiques de la boutique
  2911. \t\t\t\t\t\t\t\t</h6>
  2912. \t\t\t\t\t\t\t</div>
  2913. \t\t\t\t\t\t\t<div class=\"card-body\">
  2914. \t\t\t\t\t\t\t\t<div class=\"row text-center\">
  2915. \t\t\t\t\t\t\t\t\t<div class=\"col-6\">
  2916. \t\t\t\t\t\t\t\t\t\t<div class=\"shop-stat-item\">
  2917. \t\t\t\t\t\t\t\t\t\t\t<span class=\"stat-number h4 text-primary\">";
  2918.         // line 2495
  2919.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["stats"] ?? null), "activeProducts", [], "any", false, false, false, 2495), "html", null, true);
  2920.         yield "</span>
  2921. \t\t\t\t\t\t\t\t\t\t\t<span class=\"stat-label d-block\">Produits actifs</span>
  2922. \t\t\t\t\t\t\t\t\t\t</div>
  2923. \t\t\t\t\t\t\t\t\t</div>
  2924. \t\t\t\t\t\t\t\t\t<div class=\"col-6\">
  2925. \t\t\t\t\t\t\t\t\t\t<div class=\"shop-stat-item\">
  2926. \t\t\t\t\t\t\t\t\t\t\t<span class=\"stat-number h4 text-info\">";
  2927.         // line 2501
  2928.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["stats"] ?? null), "shopViews", [], "any", false, false, false, 2501), "html", null, true);
  2929.         yield "</span>
  2930. \t\t\t\t\t\t\t\t\t\t\t<span class=\"stat-label d-block\">Vues boutique</span>
  2931. \t\t\t\t\t\t\t\t\t\t</div>
  2932. \t\t\t\t\t\t\t\t\t</div>
  2933. \t\t\t\t\t\t\t\t</div>
  2934. \t\t\t\t\t\t\t</div>
  2935. \t\t\t\t\t\t</div>
  2936. \t\t\t\t\t</div>
  2937. \t\t\t\t</div>
  2938. \t\t\t</div>
  2940. \t\t\t<!-- Tab Content: Feedback avec Karma -->
  2941. \t\t\t<div id=\"shop-feedback\" class=\"tab-content shop-tab-content\">
  2942. \t\t\t\t<div class=\"row\">
  2943. \t\t\t\t\t<div
  2944. \t\t\t\t\t\tclass=\"col-lg-8\">
  2945. \t\t\t\t\t\t<!-- Statistiques des avis -->
  2946. \t\t\t\t\t\t<div class=\"review-stats mb-4\">
  2947. \t\t\t\t\t\t\t<div class=\"row\">
  2948. \t\t\t\t\t\t\t\t<div class=\"col-md-4\">
  2949. \t\t\t\t\t\t\t\t\t<div class=\"stat-card text-center\">
  2950. \t\t\t\t\t\t\t\t\t\t<h3 class=\"stat-number\">";
  2951.         // line 2522
  2952.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "getAverageRating", [], "method", false, false, false, 2522), "html", null, true);
  2953.         yield "</h3>
  2954. \t\t\t\t\t\t\t\t\t\t<div class=\"rating-stars\">
  2955. \t\t\t\t\t\t\t\t\t\t\t";
  2956.         // line 2524
  2957.         $context['_parent'] = $context;
  2958.         $context['_seq'] = CoreExtension::ensureTraversable(range(1, 5));
  2959.         foreach ($context['_seq'] as $context["_key"] => $context["i"]) {
  2960.             // line 2525
  2961.             yield "\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-star";
  2962.             if (($context["i"] <= CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "getAverageRating", [], "method", false, false, false, 2525))) {
  2963.             } else {
  2964.                 yield "-empty";
  2965.             }
  2966.             yield "\"></i>
  2967. \t\t\t\t\t\t\t\t\t\t\t";
  2968.         }
  2969.         $_parent = $context['_parent'];
  2970.         unset($context['_seq'], $context['_key'], $context['i'], $context['_parent']);
  2971.         $context = array_intersect_key($context, $_parent) + $_parent;
  2972.         // line 2527
  2973.         yield "\t\t\t\t\t\t\t\t\t\t</div>
  2974. \t\t\t\t\t\t\t\t\t\t<p class=\"stat-label\">Note moyenne</p>
  2975. \t\t\t\t\t\t\t\t\t</div>
  2976. \t\t\t\t\t\t\t\t</div>
  2977. \t\t\t\t\t\t\t\t<div class=\"col-md-4\">
  2978. \t\t\t\t\t\t\t\t\t<div class=\"stat-card text-center\">
  2979. \t\t\t\t\t\t\t\t\t\t<h3 class=\"stat-number\">";
  2980.         // line 2533
  2981.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "getVisibleReviewsCount", [], "method", false, false, false, 2533), "html", null, true);
  2982.         yield "</h3>
  2983. \t\t\t\t\t\t\t\t\t\t<p class=\"stat-label\">Avis clients</p>
  2984. \t\t\t\t\t\t\t\t\t</div>
  2985. \t\t\t\t\t\t\t\t</div>
  2986. \t\t\t\t\t\t\t\t<div class=\"col-md-4\">
  2987. \t\t\t\t\t\t\t\t\t<div class=\"stat-card text-center\">
  2988. \t\t\t\t\t\t\t\t\t\t<h3 class=\"stat-number\">";
  2989.         // line 2539
  2990.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::round(((CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "getVisibleReviewsCount", [], "method", false, false, false, 2539) / 100) * 100)), "html", null, true);
  2991.         yield "%</h3>
  2992. \t\t\t\t\t\t\t\t\t\t<p class=\"stat-label\">Satisfaction</p>
  2993. \t\t\t\t\t\t\t\t\t</div>
  2994. \t\t\t\t\t\t\t\t</div>
  2995. \t\t\t\t\t\t\t</div>
  2996. \t\t\t\t\t\t</div>
  2998. \t\t\t\t\t\t<!-- Liste des avis récents -->
  2999. \t\t\t\t\t\t<div class=\"reviews-preview\">
  3000. \t\t\t\t\t\t\t<h5 class=\"mb-3\">Avis récents</h5>
  3001. \t\t\t\t\t\t\t";
  3002.         // line 2549
  3003.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "reviews", [], "any", false, false, false, 2549)) > 0)) {
  3004.             // line 2550
  3005.             yield "\t\t\t\t\t\t\t\t<div class=\"reviews-list\">
  3006. \t\t\t\t\t\t\t\t\t";
  3007.             // line 2551
  3008.             $context['_parent'] = $context;
  3009.             $context['_seq'] = CoreExtension::ensureTraversable(Twig\Extension\CoreExtension::slice($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "reviews", [], "any", false, false, false, 2551), 0, 5));
  3010.             foreach ($context['_seq'] as $context["_key"] => $context["review"]) {
  3011.                 // line 2552
  3012.                 yield "\t\t\t\t\t\t\t\t\t\t";
  3013.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["review"], "isVisible", [], "any", false, false, false, 2552)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3014.                     // line 2553
  3015.                     yield "\t\t\t\t\t\t\t\t\t\t\t<div class=\"review-item\">
  3016. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"review-header\">
  3017. \t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"reviewer-info\">
  3018. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"reviewer-avatar\">
  3019. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-user\"></i>
  3020. \t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>
  3021. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"reviewer-details\">
  3022. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h6 class=\"reviewer-name\">";
  3023.                     // line 2560
  3024.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["review"], "user", [], "any", false, false, false, 2560), "userIdentifier", [], "any", false, false, false, 2560), "html", null, true);
  3025.                     yield "</h6>
  3026. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"review-rating\">
  3027. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  3028.                     // line 2562
  3029.                     $context['_parent'] = $context;
  3030.                     $context['_seq'] = CoreExtension::ensureTraversable(range(1, 5));
  3031.                     foreach ($context['_seq'] as $context["_key"] => $context["i"]) {
  3032.                         // line 2563
  3033.                         yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-star";
  3034.                         if (($context["i"] <= CoreExtension::getAttribute($this->env, $this->source, $context["review"], "rating", [], "any", false, false, false, 2563))) {
  3035.                         } else {
  3036.                             yield "-empty";
  3037.                         }
  3038.                         yield "\"></i>
  3039. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  3040.                     }
  3041.                     $_parent = $context['_parent'];
  3042.                     unset($context['_seq'], $context['_key'], $context['i'], $context['_parent']);
  3043.                     $context = array_intersect_key($context, $_parent) + $_parent;
  3044.                     // line 2565
  3045.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>
  3046. \t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>
  3047. \t\t\t\t\t\t\t\t\t\t\t\t\t</div>
  3048. \t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"review-meta\">
  3049. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"review-date\">";
  3050.                     // line 2569
  3051.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatDate(CoreExtension::getAttribute($this->env, $this->source, $context["review"], "createdAt", [], "any", false, false, false, 2569), "d/m/Y"), "html", null, true);
  3052.                     yield "</span>
  3053. \t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  3054.                     // line 2570
  3055.                     if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["review"], "isVerified", [], "any", false, false, false, 2570)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3056.                         // line 2571
  3057.                         yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"verified-badge\">
  3058. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  3059. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tVérifié
  3060. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>
  3061. \t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  3062.                     }
  3063.                     // line 2576
  3064.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t</div>
  3065. \t\t\t\t\t\t\t\t\t\t\t\t</div>
  3067. \t\t\t\t\t\t\t\t\t\t\t\t";
  3068.                     // line 2579
  3069.                     if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["review"], "comment", [], "any", false, false, false, 2579)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3070.                         // line 2580
  3071.                         yield "\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"review-comment\">
  3072. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>";
  3073.                         // line 2581
  3074.                         yield (((Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["review"], "comment", [], "any", false, false, false, 2581)) > 150)) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape((Twig\Extension\CoreExtension::slice($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["review"], "comment", [], "any", false, false, false, 2581), 0, 150) . "..."), "html", null, true)) : ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["review"], "comment", [], "any", false, false, false, 2581), "html", null, true)));
  3075.                         yield "</p>
  3076. \t\t\t\t\t\t\t\t\t\t\t\t\t</div>
  3077. \t\t\t\t\t\t\t\t\t\t\t\t";
  3078.                     }
  3079.                     // line 2584
  3080.                     yield "\t\t\t\t\t\t\t\t\t\t\t</div>
  3081. \t\t\t\t\t\t\t\t\t\t";
  3082.                 }
  3083.                 // line 2586
  3084.                 yield "\t\t\t\t\t\t\t\t\t";
  3085.             }
  3086.             $_parent = $context['_parent'];
  3087.             unset($context['_seq'], $context['_key'], $context['review'], $context['_parent']);
  3088.             $context = array_intersect_key($context, $_parent) + $_parent;
  3089.             // line 2587
  3090.             yield "\t\t\t\t\t\t\t\t</div>
  3092. \t\t\t\t\t\t\t\t<div class=\"text-center mt-4\">
  3093. \t\t\t\t\t\t\t\t\t<a href=\"";
  3094.             // line 2590
  3095.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("shop_reviews_index", ["slug" => CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "slug", [], "any", false, false, false, 2590)]), "html", null, true);
  3096.             yield "\" class=\"btn btn-primary\">
  3097. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-star me-1\"></i>Voir tous les avis
  3098. \t\t\t\t\t\t\t\t\t</a>
  3099. \t\t\t\t\t\t\t\t</div>
  3100. \t\t\t\t\t\t\t";
  3101.         } else {
  3102.             // line 2595
  3103.             yield "\t\t\t\t\t\t\t\t<div class=\"text-center py-4\">
  3104. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-star\" style=\"font-size: 3rem; color: #ccc;\"></i>
  3105. \t\t\t\t\t\t\t\t\t<h5 class=\"mt-3\">Aucun avis pour le moment</h5>
  3106. \t\t\t\t\t\t\t\t\t<p class=\"text-muted\">Cette boutique n'a pas encore reçu d'avis clients.</p>
  3107. \t\t\t\t\t\t\t\t</div>
  3108. \t\t\t\t\t\t\t";
  3109.         }
  3110.         // line 2601
  3111.         yield "\t\t\t\t\t\t</div>
  3112. \t\t\t\t\t</div>
  3114. \t\t\t\t\t<div
  3115. \t\t\t\t\t\tclass=\"col-lg-4\">
  3116. \t\t\t\t\t\t<!-- Lien vers la page complète des avis -->
  3117. \t\t\t\t\t\t<div class=\"review-actions-card\">
  3118. \t\t\t\t\t\t\t<h5>Évaluer cette boutique</h5>
  3119. \t\t\t\t\t\t\t<p class=\"text-muted\">Partagez votre expérience avec cette boutique.</p>
  3120. \t\t\t\t\t\t\t<a href=\"";
  3121.         // line 2610
  3122.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("shop_reviews_new", ["slug" => CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "slug", [], "any", false, false, false, 2610)]), "html", null, true);
  3123.         yield "\" class=\"btn btn-primary w-100\">
  3124. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-star me-1\"></i>Laisser un avis
  3125. \t\t\t\t\t\t\t</a>
  3126. \t\t\t\t\t\t</div>
  3127. \t\t\t\t\t</div>
  3128. \t\t\t\t</div>
  3129. \t\t\t</div>
  3130. \t\t</div>
  3131. \t</section>
  3133. \t<!-- Modal de signalement -->
  3134. \t<div class=\"modal fade\" id=\"reportModal\" tabindex=\"-1\" aria-labelledby=\"reportModalLabel\" aria-hidden=\"true\">
  3135. \t\t<div class=\"modal-dialog\">
  3136. \t\t\t<div class=\"modal-content\">
  3137. \t\t\t\t<div class=\"modal-header\">
  3138. \t\t\t\t\t<h5 class=\"modal-title\" id=\"reportModalLabel\">
  3139. \t\t\t\t\t\t<i class=\"lnr lnr-flag me-2\"></i>&nbsp;Signaler cette boutique
  3140. \t\t\t\t\t</h5>
  3141. \t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
  3142. \t\t\t\t</div>
  3143. \t\t\t\t<div class=\"modal-body\">
  3144. \t\t\t\t\t<form id=\"reportForm\">
  3145. \t\t\t\t\t\t<div class=\"mb-3\">
  3146. \t\t\t\t\t\t\t<label for=\"reportReason\" class=\"form-label\">Motif du signalement *</label>
  3147. \t\t\t\t\t\t\t<select class=\"form-select\" id=\"reportReason\" required>
  3148. \t\t\t\t\t\t\t\t<option value=\"\">Sélectionnez un motif</option>
  3149. \t\t\t\t\t\t\t\t<option value=\"fake_products\">Produits contrefaits</option>
  3150. \t\t\t\t\t\t\t\t<option value=\"inappropriate_content\">Contenu inapproprié</option>
  3151. \t\t\t\t\t\t\t\t<option value=\"spam\">Spam ou publicité abusive</option>
  3152. \t\t\t\t\t\t\t\t<option value=\"fraud\">Fraude ou escroquerie</option>
  3153. \t\t\t\t\t\t\t\t<option value=\"harassment\">Harcèlement</option>
  3154. \t\t\t\t\t\t\t\t<option value=\"other\">Autre</option>
  3155. \t\t\t\t\t\t\t</select>
  3156. \t\t\t\t\t\t</div>
  3157. \t\t\t\t\t\t<div class=\"mb-3\">
  3158. \t\t\t\t\t\t\t<label for=\"reportDescription\" class=\"form-label\">Description détaillée *</label>
  3159. \t\t\t\t\t\t\t<textarea class=\"form-control\" id=\"reportDescription\" rows=\"4\" placeholder=\"Décrivez le problème rencontré...\" required></textarea>
  3160. \t\t\t\t\t\t</div>
  3161. \t\t\t\t\t\t<div class=\"mb-3\">
  3162. \t\t\t\t\t\t\t<label for=\"reportEmail\" class=\"form-label\">Votre email (optionnel)</label>
  3163. \t\t\t\t\t\t\t<input type=\"email\" class=\"form-control\" id=\"reportEmail\" placeholder=\"votre@email.com\">
  3164. \t\t\t\t\t\t\t<div class=\"form-text\">Nous pourrons vous contacter pour plus d'informations</div>
  3165. \t\t\t\t\t\t</div>
  3166. \t\t\t\t\t</form>
  3167. \t\t\t\t</div>
  3168. \t\t\t\t<div class=\"modal-footer\">
  3169. \t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Annuler</button>
  3170. \t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\" onclick=\"submitReport()\">
  3171. \t\t\t\t\t\t<i class=\"lnr lnr-flag  me-2\"></i>Envoyer le signalement
  3172. \t\t\t\t\t</button>
  3173. \t\t\t\t</div>
  3174. \t\t\t</div>
  3175. \t\t</div>
  3176. \t</div>
  3178. \t<!-- Section des avis -->
  3179. \t<div class=\"container my-5\">
  3180. \t\t<div class=\"row\">
  3181. \t\t\t<div class=\"col-12\">
  3182. \t\t\t\t<div class=\"section-title text-center\">
  3183. \t\t\t\t\t<h2>Avis clients</h2>
  3184. \t\t\t\t\t<p>Découvrez ce que pensent nos clients de cette boutique</p>
  3185. \t\t\t\t</div>
  3186. \t\t\t</div>
  3187. \t\t</div>
  3189. \t\t<div
  3190. \t\t\tclass=\"row\">
  3191. \t\t\t<!-- Statistiques des avis -->
  3192. \t\t\t<div class=\"col-md-4\">
  3193. \t\t\t\t<div class=\"review-stats-card\">
  3194. \t\t\t\t\t<div class=\"stats-header\">
  3195. \t\t\t\t\t\t<div class=\"overall-rating\">
  3196. \t\t\t\t\t\t\t<span class=\"rating-number\">";
  3197.         // line 2683
  3198.         yield (((Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "reviews", [], "any", false, false, false, 2683)) > 0)) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber((Twig\Extension\CoreExtension::reduce($this->env, Twig\Extension\CoreExtension::map($this->env, CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "reviews", [], "any", false, false, false, 2683), function ($__r__) use ($context, $macros) { $context["r"] = $__r__; return CoreExtension::getAttribute($this->env, $this->source, ($context["r"] ?? null), "rating", [], "any", false, false, false, 2683); }), function ($__a__, $__b__) use ($context, $macros) { $context["a"] = $__a__; $context["b"] = $__b__; return (($context["a"] ?? null) + ($context["b"] ?? null)); }) / Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "reviews", [], "any", false, false, false, 2683))), 1), "html", null, true)) : ("0.0"));
  3199.         yield "</span>
  3200. \t\t\t\t\t\t\t<div class=\"stars\">
  3201. \t\t\t\t\t\t\t\t";
  3202.         // line 2685
  3203.         $context["avgRating"] = (((Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "reviews", [], "any", false, false, false, 2685)) > 0)) ? ((Twig\Extension\CoreExtension::reduce($this->env, Twig\Extension\CoreExtension::map($this->env, CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "reviews", [], "any", false, false, false, 2685), function ($__r__) use ($context, $macros) { $context["r"] = $__r__; return CoreExtension::getAttribute($this->env, $this->source, ($context["r"] ?? null), "rating", [], "any", false, false, false, 2685); }), function ($__a__, $__b__) use ($context, $macros) { $context["a"] = $__a__; $context["b"] = $__b__; return (($context["a"] ?? null) + ($context["b"] ?? null)); }) / Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "reviews", [], "any", false, false, false, 2685)))) : (0));
  3204.         // line 2686
  3205.         yield "\t\t\t\t\t\t\t\t";
  3206.         $context['_parent'] = $context;
  3207.         $context['_seq'] = CoreExtension::ensureTraversable(range(1, 5));
  3208.         foreach ($context['_seq'] as $context["_key"] => $context["i"]) {
  3209.             // line 2687
  3210.             yield "\t\t\t\t\t\t\t\t\t";
  3211.             if (($context["i"] <= ($context["avgRating"] ?? null))) {
  3212.                 // line 2688
  3213.                 yield "\t\t\t\t\t\t\t\t\t\t★
  3214. \t\t\t\t\t\t\t\t\t";
  3215.             } elseif (((            // line 2689
  3216. $context["i"] - ($context["avgRating"] ?? null)) < 1)) {
  3217.                 // line 2690
  3218.                 yield "\t\t\t\t\t\t\t\t\t\t☆
  3219. \t\t\t\t\t\t\t\t\t";
  3220.             } else {
  3221.                 // line 2692
  3222.                 yield "\t\t\t\t\t\t\t\t\t\t☆
  3223. \t\t\t\t\t\t\t\t\t";
  3224.             }
  3225.             // line 2694
  3226.             yield "\t\t\t\t\t\t\t\t";
  3227.         }
  3228.         $_parent = $context['_parent'];
  3229.         unset($context['_seq'], $context['_key'], $context['i'], $context['_parent']);
  3230.         $context = array_intersect_key($context, $_parent) + $_parent;
  3231.         // line 2695
  3232.         yield "\t\t\t\t\t\t\t</div>
  3233. \t\t\t\t\t\t</div>
  3234. \t\t\t\t\t\t<div class=\"rating-summary\">
  3235. \t\t\t\t\t\t\t<p class=\"mb-1\">";
  3236.         // line 2698
  3237.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "reviews", [], "any", false, false, false, 2698)), "html", null, true);
  3238.         yield "
  3239. \t\t\t\t\t\t\t\tavis</p>
  3240. \t\t\t\t\t\t\t<p class=\"text-muted small\">Basé sur
  3241. \t\t\t\t\t\t\t\t";
  3242.         // line 2701
  3243.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::length($this->env->getCharset(), Twig\Extension\CoreExtension::filter($this->env, CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "reviews", [], "any", false, false, false, 2701), function ($__r__) use ($context, $macros) { $context["r"] = $__r__; return CoreExtension::getAttribute($this->env, $this->source, ($context["r"] ?? null), "isVerified", [], "any", false, false, false, 2701); })), "html", null, true);
  3244.         yield "
  3245. \t\t\t\t\t\t\t\tavis vérifiés</p>
  3246. \t\t\t\t\t\t</div>
  3247. \t\t\t\t\t</div>
  3249. \t\t\t\t\t<div class=\"rating-breakdown\">
  3250. \t\t\t\t\t\t";
  3251.         // line 2707
  3252.         $context['_parent'] = $context;
  3253.         $context['_seq'] = CoreExtension::ensureTraversable(range(5, 1));
  3254.         foreach ($context['_seq'] as $context["_key"] => $context["rating"]) {
  3255.             // line 2708
  3256.             yield "\t\t\t\t\t\t\t";
  3257.             $context["count"] = Twig\Extension\CoreExtension::length($this->env->getCharset(), Twig\Extension\CoreExtension::filter($this->env, CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "reviews", [], "any", false, false, false, 2708), function ($__r__) use ($context, $macros) { $context["r"] = $__r__; return (CoreExtension::getAttribute($this->env, $this->source, ($context["r"] ?? null), "rating", [], "any", false, false, false, 2708) == $context["rating"]); }));
  3258.             // line 2709
  3259.             yield "\t\t\t\t\t\t\t";
  3260.             $context["percentage"] = (((Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "reviews", [], "any", false, false, false, 2709)) > 0)) ? (((($context["count"] ?? null) / Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "reviews", [], "any", false, false, false, 2709))) * 100)) : (0));
  3261.             // line 2710
  3262.             yield "\t\t\t\t\t\t\t<div class=\"rating-bar\">
  3263. \t\t\t\t\t\t\t\t<span class=\"rating-label\">";
  3264.             // line 2711
  3265.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($context["rating"], "html", null, true);
  3266.             yield "★</span>
  3267. \t\t\t\t\t\t\t\t<div class=\"rating-progress\">
  3268. \t\t\t\t\t\t\t\t\t<div class=\"rating-fill\" style=\"width: ";
  3269.             // line 2713
  3270.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(($context["percentage"] ?? null), "html", null, true);
  3271.             yield "%\"></div>
  3272. \t\t\t\t\t\t\t\t</div>
  3273. \t\t\t\t\t\t\t\t<span class=\"rating-count\">";
  3274.             // line 2715
  3275.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(($context["count"] ?? null), "html", null, true);
  3276.             yield "</span>
  3277. \t\t\t\t\t\t\t</div>
  3278. \t\t\t\t\t\t";
  3279.         }
  3280.         $_parent = $context['_parent'];
  3281.         unset($context['_seq'], $context['_key'], $context['rating'], $context['_parent']);
  3282.         $context = array_intersect_key($context, $_parent) + $_parent;
  3283.         // line 2718
  3284.         yield "\t\t\t\t\t</div>
  3285. \t\t\t\t</div>
  3286. \t\t\t</div>
  3288. \t\t\t<!-- Aperçu des avis -->
  3289. \t\t\t<div class=\"col-md-8\">
  3290. \t\t\t\t<div class=\"reviews-preview\">
  3291. \t\t\t\t\t";
  3292.         // line 2725
  3293.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "reviews", [], "any", false, false, false, 2725)) > 0)) {
  3294.             // line 2726
  3295.             yield "\t\t\t\t\t\t";
  3296.             $context['_parent'] = $context;
  3297.             $context['_seq'] = CoreExtension::ensureTraversable(Twig\Extension\CoreExtension::slice($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "reviews", [], "any", false, false, false, 2726), 0, 3));
  3298.             foreach ($context['_seq'] as $context["_key"] => $context["review"]) {
  3299.                 // line 2727
  3300.                 yield "\t\t\t\t\t\t\t<div class=\"review-card-preview\">
  3301. \t\t\t\t\t\t\t\t<div class=\"review-header\">
  3302. \t\t\t\t\t\t\t\t\t<div class=\"review-user\">
  3303. \t\t\t\t\t\t\t\t\t\t<div class=\"user-avatar\">
  3304. \t\t\t\t\t\t\t\t\t\t\t";
  3305.                 // line 2731
  3306.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::default(Twig\Extension\CoreExtension::upper($this->env->getCharset(), Twig\Extension\CoreExtension::first($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["review"], "user", [], "any", false, false, false, 2731), "firstName", [], "any", false, false, false, 2731))), Twig\Extension\CoreExtension::upper($this->env->getCharset(), Twig\Extension\CoreExtension::first($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["review"], "user", [], "any", false, false, false, 2731), "email", [], "any", false, false, false, 2731)))), "html", null, true);
  3307.                 yield "
  3308. \t\t\t\t\t\t\t\t\t\t</div>
  3309. \t\t\t\t\t\t\t\t\t\t<div class=\"user-info\">
  3310. \t\t\t\t\t\t\t\t\t\t\t<h6>";
  3311.                 // line 2734
  3312.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(((CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["review"], "user", [], "any", false, true, false, 2734), "firstName", [], "any", true, true, false, 2734)) ? (Twig\Extension\CoreExtension::default(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["review"], "user", [], "any", false, false, false, 2734), "firstName", [], "any", false, false, false, 2734), "Utilisateur")) : ("Utilisateur")), "html", null, true);
  3313.                 yield "</h6>
  3314. \t\t\t\t\t\t\t\t\t\t\t<small>";
  3315.                 // line 2735
  3316.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["review"], "getTimeAgo", [], "method", false, false, false, 2735), "html", null, true);
  3317.                 yield "</small>
  3318. \t\t\t\t\t\t\t\t\t\t</div>
  3319. \t\t\t\t\t\t\t\t\t</div>
  3320. \t\t\t\t\t\t\t\t\t<div class=\"review-rating\">
  3321. \t\t\t\t\t\t\t\t\t\t<div class=\"stars\">";
  3322.                 // line 2739
  3323.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["review"], "getRatingStars", [], "method", false, false, false, 2739), "html", null, true);
  3324.                 yield "</div>
  3325. \t\t\t\t\t\t\t\t\t\t";
  3326.                 // line 2740
  3327.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["review"], "isVerified", [], "any", false, false, false, 2740)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3328.                     // line 2741
  3329.                     yield "\t\t\t\t\t\t\t\t\t\t\t<span class=\"verified-badge\">✓</span>
  3330. \t\t\t\t\t\t\t\t\t\t";
  3331.                 }
  3332.                 // line 2743
  3333.                 yield "\t\t\t\t\t\t\t\t\t</div>
  3334. \t\t\t\t\t\t\t\t</div>
  3335. \t\t\t\t\t\t\t\t<div class=\"review-content\">
  3336. \t\t\t\t\t\t\t\t\t";
  3337.                 // line 2746
  3338.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::slice($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["review"], "comment", [], "any", false, false, false, 2746), 0, 150), "html", null, true);
  3339.                 yield "
  3340. \t\t\t\t\t\t\t\t\t";
  3341.                 // line 2747
  3342.                 if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["review"], "comment", [], "any", false, false, false, 2747)) > 150)) {
  3343.                     yield "...
  3344. \t\t\t\t\t\t\t\t\t";
  3345.                 }
  3346.                 // line 2749
  3347.                 yield "\t\t\t\t\t\t\t\t</div>
  3348. \t\t\t\t\t\t\t</div>
  3349. \t\t\t\t\t\t";
  3350.             }
  3351.             $_parent = $context['_parent'];
  3352.             unset($context['_seq'], $context['_key'], $context['review'], $context['_parent']);
  3353.             $context = array_intersect_key($context, $_parent) + $_parent;
  3354.             // line 2752
  3355.             yield "
  3356. \t\t\t\t\t\t<div class=\"text-center mt-3\">
  3357. \t\t\t\t\t\t\t<a href=\"";
  3358.             // line 2754
  3359.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("shop_reviews_index", ["slug" => CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "slug", [], "any", false, false, false, 2754)]), "html", null, true);
  3360.             yield "\" class=\"btn btn-outline-primary\">
  3361. \t\t\t\t\t\t\t\tVoir tous les avis (";
  3362.             // line 2755
  3363.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "reviews", [], "any", false, false, false, 2755)), "html", null, true);
  3364.             yield ")
  3365. \t\t\t\t\t\t\t</a>
  3366. \t\t\t\t\t\t</div>
  3367. \t\t\t\t\t";
  3368.         } else {
  3369.             // line 2759
  3370.             yield "\t\t\t\t\t\t<div class=\"empty-reviews\">
  3371. \t\t\t\t\t\t\t<i class=\"lnr lnr-star\"></i>
  3372. \t\t\t\t\t\t\t<h4>Aucun avis pour le moment</h4>
  3373. \t\t\t\t\t\t\t<p>Soyez le premier à laisser un avis sur cette boutique !</p>
  3374. \t\t\t\t\t\t\t";
  3375.             // line 2763
  3376.             if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 2763)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  3377.                 // line 2764
  3378.                 yield "\t\t\t\t\t\t\t\t<a href=\"";
  3379.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("shop_reviews_new", ["slug" => CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "slug", [], "any", false, false, false, 2764)]), "html", null, true);
  3380.                 yield "\" class=\"btn btn-primary\">
  3381. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnraccount_recently_viewed-star\"></i>
  3382. \t\t\t\t\t\t\t\t\tLaisser un avis
  3383. \t\t\t\t\t\t\t\t</a>
  3384. \t\t\t\t\t\t\t";
  3385.             }
  3386.             // line 2769
  3387.             yield "\t\t\t\t\t\t</div>
  3388. \t\t\t\t\t";
  3389.         }
  3390.         // line 2771
  3391.         yield "\t\t\t\t</div>
  3392. \t\t\t</div>
  3393. \t\t</div>
  3394. \t</div>
  3396. ";
  3397.         
  3398.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  3400.         
  3401.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  3403.         yield from [];
  3404.     }
  3406.     // line 2778
  3407.     /**
  3408.      * @return iterable<null|scalar|\Stringable>
  3409.      */
  3410.     public function block_javascripts(array $context, array $blocks = []): iterable
  3411.     {
  3412.         $macros = $this->macros;
  3413.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  3414.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripts"));
  3416.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  3417.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripts"));
  3419.         // line 2779
  3420.         yield "\t<script>
  3421. \t\tdocument.addEventListener('DOMContentLoaded', function () {
  3422. \t\t\t// Initialisation du carrousel
  3423. \t\t\tconsole.log('DOM Content Loaded - Initializing carousel...');
  3424. \t\t\tsetTimeout(function() {
  3425. initCarousel();
  3426. \t\t\t}, 100);
  3428. // Gestion des onglets eBay-style avec Bootstrap
  3429. const tabLinks = document.querySelectorAll('.shop-tab-link');
  3430. const tabContents = document.querySelectorAll('.shop-tab-content');
  3432. tabLinks.forEach(link => {
  3433. link.addEventListener('click', function (e) {
  3434. e.preventDefault();
  3436. // Retirer la classe active de tous les liens et contenus
  3437. tabLinks.forEach(l => {
  3438. l.classList.remove('active');
  3439. l.setAttribute('aria-selected', 'false');
  3440. });
  3441. tabContents.forEach(c => c.classList.remove('active'));
  3443. // Ajouter la classe active au lien cliqué
  3444. this.classList.add('active');
  3445. this.setAttribute('aria-selected', 'true');
  3447. // Afficher le contenu correspondant
  3448. const targetTab = this.dataset.tab;
  3449. const targetContent = document.getElementById (`shop-\${targetTab}`);
  3450. if (targetContent) {
  3451. targetContent.classList.add('active');
  3452. }
  3453. });
  3454. });
  3456. // Gestion du système de follow
  3457. const followButton = document.getElementById('follow-button');
  3459. if (followButton) {
  3460. followButton.addEventListener('click', function () {
  3461. const shopId = this.dataset.shopId;
  3462. const isFollowing = this.dataset.following === 'true';
  3464. // Désactiver le bouton pendant la requête
  3465. this.disabled = true;
  3466. const originalText = this.innerHTML;
  3467. this.innerHTML = '<i class=\"lnr lnr-spinner\"></i> Loading...';
  3469. // Envoyer la requête
  3470. fetch(\"";
  3471.         // line 2829
  3472.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_api_shop_toggle_follow", ["id" => "__SHOP_ID__"]);
  3473.         yield "\".replace('__SHOP_ID__', shopId), {
  3474. method: 'POST',
  3475. headers: {
  3476. 'Content-Type': 'application/json',
  3477. 'X-Requested-With': 'XMLHttpRequest'
  3478. }
  3479. }).then(response => response.json()).then(data => {
  3480. if (data.success) { // Mettre à jour l'interface
  3481. this.dataset.following = data.isFollowing;
  3483. if (data.isFollowing) {
  3484. this.classList.add('following');
  3485. this.innerHTML = '<i class=\"lnr lnr-checkmark\"></i> Suivi';
  3486. } else {
  3487. this.classList.remove('following');
  3488. this.innerHTML = '<i class=\"lnr lnr-plus\"></i> Suivre';
  3489. }
  3491. // Mettre à jour le compteur de followers
  3492. if (followersCount && data.followersCount !== undefined) {
  3493. followersCount.textContent = data.followersCount.toLocaleString();
  3494. }
  3496. // Afficher un message de confirmation
  3497. showNotification(data.message, 'success');
  3498. } else {
  3499. showNotification(data.message, 'error');
  3500. }
  3501. }).catch(error => {
  3502. console.error('Erreur:', error);
  3503. showNotification('Une erreur est survenue', 'error');
  3504. }). finally(() => {
  3505. this.disabled = false;
  3506. });
  3507. });
  3508. }
  3510. // Fonction pour afficher les notifications
  3511. function showNotification(message, type = 'info') { // Créer l'élément de notification
  3512. const notification = document.createElement('div');
  3513. notification.className = `alert alert-\${
  3514. type === 'success' ? 'success' : type === 'error' ? 'danger' : 'info'
  3515. } alert-dismissible fade show position-fixed`;
  3516. notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
  3517. notification.innerHTML = `
  3518.             \${message}
  3519.             <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\"></button>
  3520.         `;
  3522. document.body.appendChild(notification);
  3524. // Supprimer automatiquement après 5 secondes
  3525. setTimeout(() => {
  3526. if (notification.parentNode) {
  3527. notification.remove();
  3528. }
  3529. }, 5000);
  3530. }
  3532. // Fonctions pour les actions de boutique
  3533. window.shareShop = function () { // Vérifier si l'API Web Share est disponible et si on est sur mobile
  3534. if (navigator.share && /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  3535. navigator.share({title: '";
  3536.         // line 2891
  3537.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "name", [], "any", false, false, false, 2891), "html", null, true);
  3538.         yield "- Boutique sur MaketOu', text: 'Découvrez cette boutique et ses produits sur MaketOu', url: window.location.href}).then(() => {
  3539. console.log('Partage réussi');
  3540. showNotification('Lien partagé avec succès !', 'success');
  3541. }).catch((error) => {
  3542. console.log('Erreur lors du partage:', error);
  3543. // Fallback vers la copie
  3544. copyToClipboard();
  3545. });
  3546. } else { // Sur desktop ou si Web Share n'est pas disponible, copier directement
  3547. copyToClipboard();
  3548. }
  3549. };
  3551. // Fonction pour copier le lien dans le presse-papiers
  3552. function copyToClipboard() {
  3553. const shopUrl = window.location.href;
  3554. const shopName = '";
  3555.         // line 2907
  3556.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "name", [], "any", false, false, false, 2907), "html", null, true);
  3557.         yield "';
  3558. const shareText = `Découvrez la boutique \"\${shopName}\" sur MaketOu : \${shopUrl}`;
  3560. // Utiliser directement le fallback pour éviter les conflits
  3561. fallbackCopyToClipboard(shareText);
  3562. }
  3564. // Fallback pour copier le texte
  3565. function fallbackCopyToClipboard(text) {
  3566. const textArea = document.createElement('textarea');
  3567. textArea.value = text;
  3568. textArea.style.position = 'fixed';
  3569. textArea.style.left = '-999999px';
  3570. textArea.style.top = '-999999px';
  3571. document.body.appendChild(textArea);
  3572. textArea.focus();
  3573. textArea.select();
  3575. try {
  3576. document.execCommand('copy');
  3577. showNotification('Lien copié dans le presse-papiers !', 'success');
  3578. } catch (err) {
  3579. console.error('Impossible de copier:', err);
  3580. showNotification('Impossible de copier le lien', 'error');
  3581. }
  3583. document.body.removeChild(textArea);
  3584. }
  3586. window.contactShop = function () { // Ouvrir un modal de signalement
  3587. openReportModal();
  3588. };
  3590. window.saveShop = function () { // Sauvegarder la boutique dans les favoris
  3591. showNotification('Boutique sauvegardée dans vos favoris', 'success');
  3592. };
  3594. // Fonction pour ouvrir le modal de signalement
  3595. window.openReportModal = function () {
  3596. const modal = new bootstrap.Modal(document.getElementById('reportModal'));
  3597. modal.show();
  3598. };
  3600. // Fonction pour soumettre le signalement
  3601. window.submitReport = function () {
  3602. const reason = document.getElementById('reportReason').value;
  3603. const description = document.getElementById('reportDescription').value;
  3604. const email = document.getElementById('reportEmail').value;
  3606. if (! reason || ! description) {
  3607. showNotification('Veuillez remplir tous les champs obligatoires', 'error');
  3608. return;
  3609. }
  3611. // Simuler l'envoi du signalement
  3612. const reportData = {
  3613. shopId: ";
  3614.         // line 2963
  3615.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "id", [], "any", false, false, false, 2963), "html", null, true);
  3616.         yield ",
  3617. reason: reason,
  3618. description: description,
  3619. email: email,
  3620. reportedAt: new Date().toISOString()
  3621. };
  3623. console.log('Signalement envoyé:', reportData);
  3625. // Fermer le modal
  3626. const modal = bootstrap.Modal.getInstance(document.getElementById('reportModal'));
  3627. modal.hide();
  3629. // Réinitialiser le formulaire
  3630. document.getElementById('reportForm').reset();
  3632. // Afficher la confirmation
  3633. showNotification('Signalement envoyé avec succès. Nous examinerons votre demande.', 'success');
  3634. };
  3636. // Gestion du carrousel eBay-style - Variables globales
  3637. let currentSlide = 0;
  3638. let carouselInterval = null;
  3639. let isPaused = false;
  3640. let slides = [];
  3641. let indicators = [];
  3642. let carouselInitialized = false;
  3643. let autoSlideDelay = 5000; // Délai par défaut : 5 secondes
  3644. let userInteractionTimeout = null; // Timeout pour reprendre après interaction utilisateur
  3645. let isUserInteracting = false; // Flag pour savoir si l'utilisateur interagit
  3646. let pageVisibilityHidden = false; // Flag pour savoir si la page est cachée
  3648. // Définir les fonctions globales immédiatement pour qu'elles soient disponibles pour onclick
  3649. window.nextSlide = function() {
  3650.     if (slides.length === 0) {
  3651.         console.warn('nextSlide: No slides available, initializing...');
  3652.         initCarousel();
  3653.         return;
  3654.     }
  3655.     // Marquer comme interaction utilisateur
  3656.     handleUserInteraction();
  3657.     currentSlide = (currentSlide + 1) % slides.length;
  3658.     console.log('nextSlide: Moving to slide', currentSlide);
  3659.     updateCarousel();
  3660. };
  3662. window.previousSlide = function() {
  3663.     if (slides.length === 0) {
  3664.         console.warn('previousSlide: No slides available, initializing...');
  3665.         initCarousel();
  3666.         return;
  3667.     }
  3668.     // Marquer comme interaction utilisateur
  3669.     handleUserInteraction();
  3670.     currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  3671.     console.log('previousSlide: Moving to slide', currentSlide);
  3672.     updateCarousel();
  3673. };
  3675. window.goToSlide = function(index) {
  3676.     if (slides.length === 0) {
  3677.         console.warn('goToSlide: No slides available, initializing...');
  3678.         initCarousel();
  3679.         // Attendre que l'initialisation soit terminée
  3680.         setTimeout(() => {
  3681.             if (index >= 0 && index < slides.length) {
  3682.                 currentSlide = index;
  3683.                 updateCarousel();
  3684.                 // Réinitialiser le carrousel automatique
  3685.                 handleUserInteraction();
  3686.             }
  3687.         }, 150);
  3688.         return;
  3689.     }
  3690.     if (index < 0 || index >= slides.length) {
  3691.         console.warn('goToSlide: Invalid index', index, '. Valid range: 0 to', slides.length - 1);
  3692.         return;
  3693.     }
  3694.     // Marquer comme interaction utilisateur
  3695.     handleUserInteraction();
  3696.     currentSlide = index;
  3697.     console.log('goToSlide: Moving to slide', currentSlide, 'of', slides.length);
  3698.     updateCarousel();
  3699. };
  3701. window.toggleCarousel = function() {
  3702.     if (slides.length === 0) {
  3703.         console.warn('toggleCarousel: No slides available, initializing...');
  3704.         initCarousel();
  3705.         return;
  3706.     }
  3707.     if (isPaused) {
  3708.         resumeCarousel();
  3709.     } else {
  3710.         pauseCarousel();
  3711.     }
  3712. };
  3714. function initCarousel() {
  3715.     if (carouselInitialized) {
  3716.         console.log('Carousel already initialized');
  3717.         return;
  3718.     }
  3719.     // Réinitialiser les variables
  3720.     currentSlide = 0;
  3721.     isPaused = false;
  3722.     
  3723.     // Récupérer les slides et indicateurs à nouveau
  3724.     const carouselContainer = document.querySelector('.shop-carousel-ebay');
  3725.     if (!carouselContainer) {
  3726.         console.log('Carousel container not found');
  3727.         return;
  3728.     }
  3729.     
  3730.     const allSlides = carouselContainer.querySelectorAll('.carousel-slide');
  3731.     const allIndicators = carouselContainer.querySelectorAll('.carousel-indicator-ebay');
  3732.     
  3733.     if (allSlides.length === 0) {
  3734.         // Masquer les contrôles si aucune image
  3735.         const controls = carouselContainer.querySelector('.carousel-controls-ebay');
  3736.         const indicatorsContainer = carouselContainer.querySelector('.carousel-indicators-ebay');
  3737.         if (controls) controls.style.display = 'none';
  3738.         if (indicatorsContainer) indicatorsContainer.style.display = 'none';
  3739.         return;
  3740.     }
  3741.     
  3742.     // Si une seule image, masquer les contrôles
  3743.     if (allSlides.length <= 1) {
  3744.         const controls = carouselContainer.querySelector('.carousel-controls-ebay');
  3745.         const indicatorsContainer = carouselContainer.querySelector('.carousel-indicators-ebay');
  3746.         if (controls) controls.style.display = 'none';
  3747.         if (indicatorsContainer) indicatorsContainer.style.display = 'none';
  3748.         // S'assurer que la slide unique est active
  3749.         allSlides[0].classList.add('active');
  3750.         return;
  3751.     }
  3752.     
  3753.     // Afficher les contrôles si plusieurs images
  3754.     const controls = carouselContainer.querySelector('.carousel-controls-ebay');
  3755.     const indicatorsContainer = carouselContainer.querySelector('.carousel-indicators-ebay');
  3756.     if (controls) controls.style.display = 'flex';
  3757.     if (indicatorsContainer) indicatorsContainer.style.display = 'flex';
  3758.     
  3759.     // Mettre à jour les références globales - convertir NodeList en Array
  3760.     slides = Array.from(allSlides);
  3761.     indicators = Array.from(allIndicators);
  3762.     
  3763.     console.log('initCarousel: Found', slides.length, 'slides and', indicators.length, 'indicators');
  3764.     
  3765.     // S'assurer que la première slide est active immédiatement
  3766.     currentSlide = 0;
  3767.     slides.forEach((slide, index) => {
  3768.         if (index === 0) {
  3769.             slide.classList.add('active');
  3770.             slide.style.opacity = '1';
  3771.             slide.style.zIndex = '2';
  3772.         } else {
  3773.             slide.classList.remove('active');
  3774.             slide.style.opacity = '0';
  3775.             slide.style.zIndex = '1';
  3776.         }
  3777.     });
  3778.     if (indicators.length > 0) {
  3779.         indicators.forEach((indicator, index) => {
  3780.             if (index === 0) {
  3781.                 indicator.classList.add('active');
  3782.             } else {
  3783.                 indicator.classList.remove('active');
  3784.             }
  3785.         });
  3786.     }
  3787.     
  3788.     // Démarrer le carrousel automatique immédiatement
  3789.     console.log('Initializing carousel - starting automatic rotation...');
  3790.     isPaused = false; // S'assurer que le carrousel n'est pas en pause
  3791.     startCarousel();
  3792.     
  3793.     // Gérer les événements de survol (une seule fois)
  3794.     carouselContainer.addEventListener('mouseenter', function() {
  3795.         if (!isPaused) {
  3796.             pauseCarousel();
  3797.         }
  3798.     });
  3799.     carouselContainer.addEventListener('mouseleave', function() {
  3800.         // Ne reprendre que si l'utilisateur n'a pas mis en pause manuellement
  3801.         if (!isPaused && !isUserInteracting && !pageVisibilityHidden) {
  3802.             startCarousel();
  3803.         }
  3804.     });
  3805.     
  3806.     // Gérer la visibilité de la page (pause quand la page est cachée)
  3807.     document.addEventListener('visibilitychange', function() {
  3808.         if (document.hidden) {
  3809.             pageVisibilityHidden = true;
  3810.             if (!isPaused) {
  3811.                 pauseCarousel();
  3812.             }
  3813.         } else {
  3814.             pageVisibilityHidden = false;
  3815.             // Reprendre seulement si l'utilisateur n'a pas mis en pause manuellement
  3816.             if (!isPaused && !isUserInteracting) {
  3817.                 startCarousel();
  3818.             }
  3819.         }
  3820.     });
  3821.     
  3822.     carouselInitialized = true;
  3823.     console.log('Carousel initialized with', slides.length, 'slides');
  3824. }
  3826. function startCarousel() {
  3827.     // Nettoyer l'intervalle existant
  3828.     clearInterval(carouselInterval);
  3829.     
  3830.     // Ne pas démarrer si la page est cachée ou si l'utilisateur interagit
  3831.     if (pageVisibilityHidden || isUserInteracting) {
  3832.         return;
  3833.     }
  3834.     
  3835.     if (slides.length <= 1) {
  3836.         console.log('Not enough slides to start carousel');
  3837.         return;
  3838.     }
  3839.     
  3840.     // S'assurer que isPaused est false pour démarrer
  3841.     isPaused = false;
  3842.     
  3843.     const pauseBtn = document.getElementById('pauseBtn');
  3844.     const pauseIcon = document.getElementById('pauseIcon');
  3845.     if (pauseBtn) {
  3846.         pauseBtn.classList.remove('playing');
  3847.         if (pauseIcon) {
  3848.             pauseIcon.textContent = '⏸';
  3849.             pauseIcon.className = 'pause-icon-content';
  3850.             pauseIcon.style.display = 'inline-block';
  3851.             pauseIcon.style.color = 'white';
  3852.             pauseIcon.style.fontSize = '22px';
  3853.             pauseIcon.style.visibility = 'visible';
  3854.             pauseIcon.style.opacity = '1';
  3855.         }
  3856.     }
  3857.     
  3858.     console.log('Starting carousel automatically...');
  3859.     carouselInterval = setInterval(() => {
  3860.         // Vérifier les conditions avant de changer de slide
  3861.         if (!isPaused && !isUserInteracting && !pageVisibilityHidden && slides.length > 0) {
  3862.             // Utiliser la fonction interne nextSlide pour éviter de déclencher handleUserInteraction
  3863.             currentSlide = (currentSlide + 1) % slides.length;
  3864.             console.log('Auto slide:', currentSlide);
  3865.             updateCarousel();
  3866.         }
  3867.     }, autoSlideDelay);
  3868. }
  3870. // Fonction pour gérer les interactions utilisateur
  3871. function handleUserInteraction() {
  3872.     isUserInteracting = true;
  3873.     
  3874.     // Nettoyer le timeout précédent s'il existe
  3875.     if (userInteractionTimeout) {
  3876.         clearTimeout(userInteractionTimeout);
  3877.     }
  3878.     
  3879.     // Reprendre le carrousel automatique après 3 secondes d'inactivité
  3880.     userInteractionTimeout = setTimeout(() => {
  3881.         isUserInteracting = false;
  3882.         // Reprendre seulement si l'utilisateur n'a pas mis en pause manuellement
  3883.         if (!isPaused && !pageVisibilityHidden) {
  3884.             startCarousel();
  3885.         }
  3886.     }, 3000);
  3892. }
  3894. function pauseCarousel() {
  3895. isPaused = true;
  3896. clearInterval(carouselInterval);
  3897.     
  3898.     // Nettoyer le timeout d'interaction utilisateur
  3899.     if (userInteractionTimeout) {
  3900.         clearTimeout(userInteractionTimeout);
  3901.         userInteractionTimeout = null;
  3902.     }
  3903.     
  3904.     const pauseBtn = document.getElementById('pauseBtn');
  3905. const pauseIcon = document.getElementById('pauseIcon');
  3906.     if (pauseBtn) {
  3907.         pauseBtn.classList.add('playing');
  3908. if (pauseIcon) {
  3909.             pauseIcon.textContent = '▶';
  3910.             pauseIcon.className = 'pause-icon-content';
  3911.             pauseIcon.style.display = 'inline-block';
  3912.             pauseIcon.style.color = 'white';
  3913.             pauseIcon.style.fontSize = '22px';
  3914.             pauseIcon.style.visibility = 'visible';
  3915.             pauseIcon.style.opacity = '1';
  3916.         }
  3917. }
  3918. }
  3920. function resumeCarousel() {
  3921. isPaused = false;
  3922.     isUserInteracting = false; // Réinitialiser le flag d'interaction
  3923.     
  3924.     // Nettoyer le timeout d'interaction utilisateur
  3925.     if (userInteractionTimeout) {
  3926.         clearTimeout(userInteractionTimeout);
  3927.         userInteractionTimeout = null;
  3928.     }
  3929.     
  3930.     const pauseBtn = document.getElementById('pauseBtn');
  3931. const pauseIcon = document.getElementById('pauseIcon');
  3932.     if (pauseBtn) {
  3933.         pauseBtn.classList.remove('playing');
  3934. if (pauseIcon) {
  3935.             pauseIcon.textContent = '⏸';
  3936.             pauseIcon.className = 'pause-icon-content';
  3937.             pauseIcon.style.display = 'inline-block';
  3938.             pauseIcon.style.color = 'white';
  3939.             pauseIcon.style.fontSize = '22px';
  3940.             pauseIcon.style.visibility = 'visible';
  3941.             pauseIcon.style.opacity = '1';
  3942. }
  3943.     }
  3944.     
  3945.     // Ne reprendre que si la page est visible
  3946.     if (!pageVisibilityHidden) {
  3947. startCarousel();
  3948.     }
  3949. }
  3951. function toggleCarousel() {
  3952.     const pauseBtn = document.getElementById('pauseBtn');
  3953.     const pauseIcon = document.getElementById('pauseIcon');
  3954.     
  3955. if (isPaused) {
  3956. resumeCarousel();
  3957. } else {
  3958. pauseCarousel();
  3959. }
  3960. }
  3962. function nextSlide() {
  3963.     if (slides.length === 0) {
  3964.         console.warn('No slides available');
  3965.         return;
  3966.     }
  3967. currentSlide = (currentSlide + 1) % slides.length;
  3968.     console.log('Next slide:', currentSlide);
  3969. updateCarousel();
  3970. }
  3972. function previousSlide() {
  3973.     if (slides.length === 0) {
  3974.         console.warn('No slides available');
  3975.         return;
  3976.     }
  3977. currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  3978.     console.log('Previous slide:', currentSlide);
  3979. updateCarousel();
  3980. }
  3982. // Fonction interne goToSlide (utilisée par window.goToSlide)
  3983. function goToSlide(index) {
  3984.     if (slides.length === 0) {
  3985.         console.warn('goToSlide: No slides available');
  3986.         return;
  3987.     }
  3988.     if (index < 0 || index >= slides.length) {
  3989.         console.warn('goToSlide: Invalid index', index, '. Valid range: 0 to', slides.length - 1);
  3990.         return;
  3991.     }
  3992.     // Marquer comme interaction utilisateur
  3993.     handleUserInteraction();
  3994. currentSlide = index;
  3995.     console.log('goToSlide: Moving to slide', currentSlide, 'of', slides.length);
  3996. updateCarousel();
  3997. }
  3999. function updateCarousel() {
  4000.     if (slides.length === 0) {
  4001.         console.warn('No slides to update');
  4002.         return;
  4003.     }
  4004.     
  4005.     console.log('updateCarousel: Updating to slide', currentSlide, 'of', slides.length, 'slides');
  4006.     console.log('updateCarousel: Total indicators:', indicators.length);
  4007.     
  4008.     // Masquer toutes les slides et réinitialiser leurs styles
  4009.     slides.forEach((slide, index) => {
  4010.         slide.classList.remove('active');
  4011.         if (index === currentSlide) {
  4012.             slide.classList.add('active');
  4013.             slide.style.opacity = '1';
  4014.             slide.style.zIndex = '2';
  4015.         } else {
  4016.             slide.style.opacity = '0';
  4017.             slide.style.zIndex = '1';
  4018.         }
  4019.     });
  4020.     
  4021.     // Mettre à jour tous les indicateurs - FORCER la mise à jour en deux passes distinctes
  4022.     if (indicators.length > 0) {
  4023.         console.log('updateCarousel: Updating', indicators.length, 'indicators, currentSlide:', currentSlide);
  4024.         
  4025.         // Première passe : retirer active de TOUS les indicateurs
  4026.         indicators.forEach((indicator) => {
  4027.             indicator.classList.remove('active');
  4028.         });
  4029.         
  4030.         // Deuxième passe : ajouter active à l'indicateur correspondant à currentSlide
  4031.         if (currentSlide >= 0 && currentSlide < indicators.length && indicators[currentSlide]) {
  4032.             const activeIndicator = indicators[currentSlide];
  4033.             activeIndicator.classList.add('active');
  4034.             console.log('updateCarousel: Activated indicator', currentSlide);
  4035.             
  4036.             // Vérification et forcer si nécessaire
  4037.             if (!activeIndicator.classList.contains('active')) {
  4038.                 console.warn('updateCarousel: Class not added, forcing with setAttribute');
  4039.                 activeIndicator.setAttribute('class', activeIndicator.className + ' active');
  4040.             }
  4041.         } else {
  4042.             console.error('updateCarousel: Invalid currentSlide', currentSlide, 'or indicator not found. Total indicators:', indicators.length);
  4043.         }
  4044.     } else {
  4045.         console.warn('updateCarousel: No indicators available');
  4046.     }
  4047.     
  4048.     // Afficher la slide active
  4049.     if (slides[currentSlide]) {
  4050.         slides[currentSlide].classList.add('active');
  4051.         slides[currentSlide].style.opacity = '1';
  4052.         slides[currentSlide].style.zIndex = '2';
  4053.         console.log('updateCarousel: Showing slide', currentSlide);
  4054.     } else {
  4055.         console.error('updateCarousel: Slide', currentSlide, 'not found. Total slides:', slides.length);
  4056.     }
  4057. }
  4059. // Les fonctions globales sont définies au début du script
  4061. // Gestion du tri des produits via API Symfony
  4062. console.log('=== INITIALIZING PRODUCT SORTING ===');
  4063. console.log('Shop ID:', ";
  4064.         // line 3410
  4065.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "id", [], "any", false, false, false, 3410), "html", null, true);
  4066.         yield ");
  4068. // Fonction de tri via AJAX - RENDUE GLOBALE
  4069. window.sortProducts = function (sortValue) {
  4070. console.log('=== SORT PRODUCTS CALLED ===');
  4071. console.log('Sort value:', sortValue);
  4073. const productsContainer = document.getElementById('products-container');
  4074. console.log('Products container:', productsContainer);
  4076. if (! productsContainer) {
  4077. console.error('Products container not found!');
  4078. return;
  4079. }
  4081. if (! sortValue) {
  4082. console.log('Resetting to original order');
  4083. // Recharger la page pour revenir à l'ordre original
  4084. window.location.reload();
  4085. return;
  4086. }
  4088. console.log('Showing loading spinner...');
  4089. // Afficher un indicateur de chargement
  4090. productsContainer.innerHTML = '<div class=\"col-12 text-center py-5\"><div class=\"spinner-border text-primary\" role=\"status\"><span class=\"visually-hidden\">Chargement...</span></div><p class=\"mt-3\">Tri des produits en cours...</p></div>';
  4092. // Récupérer l'ID de la boutique
  4093. const shopId = ";
  4094.         // line 3437
  4095.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["shop"] ?? null), "id", [], "any", false, false, false, 3437), "html", null, true);
  4096.         yield ";
  4097. console.log('Shop ID for request:', shopId);
  4099. const url = \"";
  4100.         // line 3440
  4101.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_api_shop_products_sort", ["id" => "__SHOP_ID__"]);
  4102.         yield "\".replace('__SHOP_ID__', shopId);
  4103. console.log('Request URL:', url);
  4105. const requestData = {
  4106. sortBy: sortValue
  4107. };
  4108. console.log('Request data:', requestData);
  4110. // Envoyer la requête AJAX
  4111. console.log('Sending AJAX request...');
  4112. fetch(url, {
  4113. method: 'POST',
  4114. headers: {
  4115. 'Content-Type': 'application/json',
  4116. 'X-Requested-With': 'XMLHttpRequest'
  4117. },
  4118. body: JSON.stringify(requestData)
  4119. }).then(response => {
  4120. console.log('Response received:', response);
  4121. console.log('Response status:', response.status);
  4122. return response.json();
  4123. }).then(data => {
  4124. console.log('Sort response data:', data);
  4126. if (data.success) {
  4127. console.log('Sort successful, updating content...');
  4128. // Mettre à jour le contenu avec le HTML retourné
  4129. productsContainer.innerHTML = data.html;
  4131. // Mettre à jour le compteur de produits
  4132. const productCount = document.querySelector('.product-count');
  4133. if (productCount) {
  4134. productCount.textContent = data.count;
  4135. }
  4137. console.log('Products sorted successfully!');
  4138. } else {
  4139. console.error('Sort failed:', data.message);
  4140. showNotification('Erreur lors du tri: ' + data.message, 'error');
  4142. // Recharger la page en cas d'erreur
  4143. window.location.reload();
  4144. }
  4145. }).catch(error => {
  4146. console.error('Sort request failed:', error);
  4147. showNotification('Erreur de connexion lors du tri', 'error');
  4149. // Recharger la page en cas d'erreur
  4150. window.location.reload();
  4151. });
  4152. };
  4154. // Attendre que le DOM soit chargé
  4155. console.log('Setting up event listeners...');
  4156. setTimeout(() => {
  4157. const sortSelect = document.getElementById('product-sort');
  4158. console.log('Sort select element:', sortSelect);
  4160. if (sortSelect) {
  4161. console.log('Adding change event listener...');
  4163. sortSelect.addEventListener('change', function () {
  4164. console.log('=== SELECT CHANGE EVENT TRIGGERED ===');
  4165. console.log('Selected value:', this.value);
  4166. console.log('Calling sortProducts...');
  4167. window.sortProducts(this.value);
  4168. });
  4170. console.log('Event listener added successfully');
  4171. } else {
  4172. console.error('Sort select element not found!');
  4173. console.log('Available elements with ID containing \"sort\":', document.querySelectorAll('[id*=\"sort\"]'));
  4174. console.log('Available elements with class containing \"form-select\":', document.querySelectorAll('.form-select'));
  4175. }
  4176. }, 100);
  4178. // Gestion du bouton \"Suivre\"
  4179. const followBtn = document.querySelector('.btn-shop');
  4180. if (followBtn) {
  4181. followBtn.addEventListener('click', function () {
  4182. if (this.innerHTML.includes('Suivre')) {
  4183. this.innerHTML = '<i class=\"lnr lnr-heart me-1\"></i> Suivi';
  4184. this.classList.remove('btn-shop');
  4185. this.classList.add('btn-success');
  4186. } else {
  4187. this.innerHTML = '<i class=\"lnr lnr-heart me-1\"></i> Suivre';
  4188. this.classList.remove('btn-success');
  4189. this.classList.add('btn-shop');
  4190. }
  4191. });
  4192. }
  4193. });
  4194. \t</script>
  4195. ";
  4196.         
  4197.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  4199.         
  4200.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  4202.         yield from [];
  4203.     }
  4205.     /**
  4206.      * @codeCoverageIgnore
  4207.      */
  4208.     public function getTemplateName(): string
  4209.     {
  4210.         return "home/shop.html.twig";
  4211.     }
  4213.     /**
  4214.      * @codeCoverageIgnore
  4215.      */
  4216.     public function isTraitable(): bool
  4217.     {
  4218.         return false;
  4219.     }
  4221.     /**
  4222.      * @codeCoverageIgnore
  4223.      */
  4224.     public function getDebugInfo(): array
  4225.     {
  4226.         return array (  4101 => 3440,  4095 => 3437,  4065 => 3410,  3615 => 2963,  3556 => 2907,  3537 => 2891,  3472 => 2829,  3420 => 2779,  3407 => 2778,  3391 => 2771,  3387 => 2769,  3378 => 2764,  3376 => 2763,  3370 => 2759,  3363 => 2755,  3359 => 2754,  3355 => 2752,  3347 => 2749,  3342 => 2747,  3338 => 2746,  3333 => 2743,  3329 => 2741,  3327 => 2740,  3323 => 2739,  3316 => 2735,  3312 => 2734,  3306 => 2731,  3300 => 2727,  3295 => 2726,  3293 => 2725,  3284 => 2718,  3275 => 2715,  3270 => 2713,  3265 => 2711,  3262 => 2710,  3259 => 2709,  3256 => 2708,  3252 => 2707,  3243 => 2701,  3237 => 2698,  3232 => 2695,  3226 => 2694,  3222 => 2692,  3218 => 2690,  3216 => 2689,  3213 => 2688,  3210 => 2687,  3205 => 2686,  3203 => 2685,  3198 => 2683,  3122 => 2610,  3111 => 2601,  3103 => 2595,  3095 => 2590,  3090 => 2587,  3084 => 2586,  3080 => 2584,  3074 => 2581,  3071 => 2580,  3069 => 2579,  3064 => 2576,  3057 => 2571,  3055 => 2570,  3051 => 2569,  3045 => 2565,  3033 => 2563,  3029 => 2562,  3024 => 2560,  3015 => 2553,  3012 => 2552,  3008 => 2551,  3005 => 2550,  3003 => 2549,  2990 => 2539,  2981 => 2533,  2973 => 2527,  2961 => 2525,  2957 => 2524,  2952 => 2522,  2928 => 2501,  2919 => 2495,  2903 => 2481,  2898 => 2479,  2893 => 2476,  2891 => 2475,  2888 => 2474,  2883 => 2472,  2878 => 2469,  2876 => 2468,  2873 => 2467,  2869 => 2465,  2863 => 2463,  2861 => 2462,  2854 => 2458,  2830 => 2436,  2822 => 2430,  2818 => 2428,  2805 => 2421,  2802 => 2420,  2798 => 2418,  2786 => 2416,  2782 => 2415,  2779 => 2414,  2777 => 2413,  2770 => 2409,  2764 => 2406,  2760 => 2405,  2749 => 2401,  2745 => 2400,  2733 => 2398,  2729 => 2397,  2726 => 2396,  2724 => 2395,  2705 => 2379,  2699 => 2376,  2685 => 2365,  2656 => 2338,  2648 => 2334,  2646 => 2333,  2631 => 2320,  2623 => 2316,  2618 => 2313,  2614 => 2311,  2610 => 2309,  2608 => 2308,  2596 => 2306,  2594 => 2305,  2580 => 2294,  2576 => 2292,  2566 => 2289,  2562 => 2287,  2559 => 2286,  2553 => 2283,  2549 => 2281,  2547 => 2280,  2540 => 2275,  2533 => 2271,  2530 => 2270,  2528 => 2269,  2525 => 2268,  2518 => 2264,  2515 => 2263,  2513 => 2262,  2510 => 2261,  2503 => 2257,  2500 => 2256,  2498 => 2255,  2490 => 2249,  2484 => 2247,  2481 => 2246,  2475 => 2242,  2473 => 2241,  2468 => 2239,  2458 => 2231,  2452 => 2227,  2449 => 2226,  2443 => 2222,  2435 => 2220,  2433 => 2219,  2423 => 2211,  2419 => 2209,  2394 => 2207,  2377 => 2206,  2361 => 2192,  2358 => 2191,  2356 => 2190,  2351 => 2187,  2344 => 2182,  2341 => 2181,  2318 => 2177,  2300 => 2176,  2297 => 2175,  2295 => 2174,  2286 => 2167,  2273 => 2166,  107 => 9,  94 => 8,  79 => 4,  66 => 3,  43 => 1,);
  4227.     }
  4229.     public function getSourceContext(): Source
  4230.     {
  4231.         return new Source("{% extends 'base_home.html.twig' %}
  4233. {% block title %}
  4234. \t{{ shop.name }}
  4235. \t| MaketOu
  4236. {% endblock %}
  4238. {% block stylesheets %}
  4239. \t<style>
  4240. \t\t/* Style pour la description formatée de la boutique */
  4241. \t\t.shop-description-content {
  4242. \t\t\tline-height: 1.6;
  4243. \t\t\tcolor: #333;
  4244. \t\t}
  4245. \t\t
  4246. \t\t.shop-description-content h1, 
  4247. \t\t.shop-description-content h2, 
  4248. \t\t.shop-description-content h3 {
  4249. \t\t\tcolor: #ffa200;
  4250. \t\t\tmargin-top: 1.5rem;
  4251. \t\t\tmargin-bottom: 1rem;
  4252. \t\t}
  4253. \t\t
  4254. \t\t.shop-description-content h1 { font-size: 1.75rem; }
  4255. \t\t.shop-description-content h2 { font-size: 1.5rem; }
  4256. \t\t.shop-description-content h3 { font-size: 1.25rem; }
  4257. \t\t
  4258. \t\t.shop-description-content ul, 
  4259. \t\t.shop-description-content ol {
  4260. \t\t\tmargin-left: 1.5rem;
  4261. \t\t\tmargin-bottom: 1rem;
  4262. \t\t}
  4263. \t\t
  4264. \t\t.shop-description-content li {
  4265. \t\t\tmargin-bottom: 0.5rem;
  4266. \t\t}
  4267. \t\t
  4268. \t\t.shop-description-content p {
  4269. \t\t\tmargin-bottom: 1rem;
  4270. \t\t}
  4271. \t\t
  4272. \t\t.shop-description-content a {
  4273. \t\t\tcolor: #ffa200;
  4274. \t\t\ttext-decoration: underline;
  4275. \t\t}
  4276. \t\t
  4277. \t\t.shop-description-content a:hover {
  4278. \t\t\tcolor: #e8910a;
  4279. \t\t}
  4280. \t\t
  4281. \t\t.shop-description-content img {
  4282. \t\t\tmax-width: 100%;
  4283. \t\t\theight: auto;
  4284. \t\t\tborder-radius: 8px;
  4285. \t\t\tmargin: 1rem 0;
  4286. \t\t}
  4287. \t\t
  4288. \t\t.shop-description-content blockquote {
  4289. \t\t\tborder-left: 4px solid #ffa200;
  4290. \t\t\tpadding-left: 1rem;
  4291. \t\t\tmargin: 1rem 0;
  4292. \t\t\tfont-style: italic;
  4293. \t\t\tcolor: #666;
  4294. \t\t}
  4295. \t\t
  4296. \t\t.shop-description-content table {
  4297. \t\t\twidth: 100%;
  4298. \t\t\tborder-collapse: collapse;
  4299. \t\t\tmargin: 1rem 0;
  4300. \t\t}
  4301. \t\t
  4302. \t\t.shop-description-content table th,
  4303. \t\t.shop-description-content table td {
  4304. \t\t\tborder: 1px solid #ddd;
  4305. \t\t\tpadding: 0.5rem;
  4306. \t\t}
  4307. \t\t
  4308. \t\t.shop-description-content table th {
  4309. \t\t\tbackground-color: #f8f9fa;
  4310. \t\t\tfont-weight: bold;
  4311. \t\t}
  4312. \t\t
  4313. \t\t/* Design eBay-like intégré avec Karma - Pleine largeur */
  4314. \t\t.shop-header {
  4315. \t\t\tbackground: #f7f7f7;
  4316. \t\t\tborder-bottom: 1px solid #e1e1e1;
  4317. \t\t\tpadding: 0;
  4318. \t\t\tmargin-bottom: 0;
  4319. \t\t\twidth: 100%;
  4320. \t\t\tposition: relative;
  4321. \t\t}
  4323. \t\t.shop-banner {
  4324. \t\t\twidth: 100%;
  4325. \t\t\theight: 350px;
  4326. \t\t\tbackground-size: cover;
  4327. \t\t\tbackground-position: center;
  4328. \t\t\tbackground-repeat: no-repeat;
  4329. \t\t\tposition: relative;
  4330. \t\t\tdisplay: flex;
  4331. \t\t\talign-items: center;
  4332. \t\t\tjustify-content: center;
  4333. \t\t}
  4335. \t\t/* Carrousel eBay-style amélioré */
  4336. \t\t.shop-carousel-ebay {
  4337. \t\t\twidth: 100%;
  4338. \t\t\theight: 450px;
  4339. \t\t\tposition: relative;
  4340. \t\t\toverflow: hidden;
  4341. \t\t\tbackground: #f8f9fa;
  4342. \t\t\tborder-radius: 8px;
  4343. \t\t\tbox-sizing: border-box;
  4344. \t\t\tmargin-bottom: 0;
  4345. \t\t\ttransition: height 0.3s ease;
  4346. \t\t}
  4348. \t\t.carousel-container {
  4349. \t\t\tposition: relative;
  4350. \t\t\twidth: 100%;
  4351. \t\t\theight: 100%;
  4352. \t\t}
  4354. \t\t.carousel-slide {
  4355. \t\t\tposition: absolute;
  4356. \t\t\ttop: 0;
  4357. \t\t\tleft: 0;
  4358. \t\t\twidth: 100%;
  4359. \t\t\theight: 100%;
  4360. \t\t\tbackground-size: cover;
  4361. \t\t\tbackground-position: center;
  4362. \t\t\tbackground-repeat: no-repeat;
  4363. \t\t\topacity: 0;
  4364. \t\t\ttransition: opacity 0.6s ease-in-out;
  4365. \t\t}
  4366. \t\t
  4367. \t\t/* Amélioration responsive pour les images */
  4368. \t\t@media (max-width: 768px) {
  4369. \t\t\t.carousel-slide {
  4370. \t\t\t\tbackground-size: cover;
  4371. \t\t\t\tbackground-position: center center;
  4372. \t\t\t}
  4373. \t\t}
  4375. \t\t.carousel-slide.active {
  4376. \t\t\topacity: 1;
  4377. \t\t}
  4379. \t\t.carousel-controls {
  4380. \t\t\tposition: absolute;
  4381. \t\t\tbottom: 20px;
  4382. \t\t\tleft: 50%;
  4383. \t\t\ttransform: translateX(-50%);
  4384. \t\t\tdisplay: flex;
  4385. \t\t\tgap: 10px;
  4386. \t\t\tz-index: 10;
  4387. \t\t}
  4389. \t\t.carousel-btn {
  4390. \t\t\twidth: 40px;
  4391. \t\t\theight: 40px;
  4392. \t\t\tborder: none;
  4393. \t\t\tborder-radius: 50%;
  4394. \t\t\tbackground: rgba(255, 255, 255, 0.9);
  4395. \t\t\tcolor: #333;
  4396. \t\t\tfont-size: 16px;
  4397. \t\t\tcursor: pointer;
  4398. \t\t\tdisplay: flex;
  4399. \t\t\talign-items: center;
  4400. \t\t\tjustify-content: center;
  4401. \t\t\ttransition: all 0.3s ease;
  4402. \t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  4403. \t\t}
  4405. \t\t.carousel-btn:hover {
  4406. \t\t\tbackground: white;
  4407. \t\t\ttransform: scale(1.1);
  4408. \t\t}
  4410. \t\t.carousel-btn:disabled {
  4411. \t\t\topacity: 0.5;
  4412. \t\t\tcursor: not-allowed;
  4413. \t\t\ttransform: none;
  4414. \t\t}
  4416. \t\t.carousel-pause {
  4417. \t\t\tbackground: #dc3545;
  4418. \t\t\tcolor: white;
  4419. \t\t}
  4421. \t\t.carousel-pause:hover {
  4422. \t\t\tbackground: #c82333;
  4423. \t\t}
  4425. \t\t.carousel-indicators {
  4426. \t\t\tposition: absolute;
  4427. \t\t\tbottom: 70px;
  4428. \t\t\tleft: 50%;
  4429. \t\t\ttransform: translateX(-50%);
  4430. \t\t\tdisplay: flex;
  4431. \t\t\tgap: 8px;
  4432. \t\t\tz-index: 10;
  4433. \t\t}
  4435. \t\t.carousel-indicator {
  4436. \t\t\twidth: 12px;
  4437. \t\t\theight: 12px;
  4438. \t\t\tborder-radius: 50%;
  4439. \t\t\tbackground: rgba(255, 255, 255, 0.5);
  4440. \t\t\tborder: none;
  4441. \t\t\tcursor: pointer;
  4442. \t\t\ttransition: all 0.3s ease;
  4443. \t\t}
  4445. \t\t.carousel-indicator.active {
  4446. \t\t\tbackground: white;
  4447. \t\t\ttransform: scale(1.2);
  4448. \t\t}
  4450. \t\t/* Contrôles eBay-style améliorés - Positionnés en bas à droite */
  4451. \t\t.carousel-controls-ebay {
  4452. \t\t\tposition: absolute;
  4453. \t\t\tbottom: 20px;
  4454. \t\t\tright: 20px;
  4455. \t\t\tdisplay: flex;
  4456. \t\t\tgap: 12px;
  4457. \t\t\talign-items: center;
  4458. \t\t\tz-index: 10;
  4459. \t\t\tpointer-events: none;
  4460. \t\t}
  4462. \t\t.carousel-btn-ebay {
  4463. \t\t\twidth: 52px;
  4464. \t\t\theight: 52px;
  4465. \t\t\tborder: none;
  4466. \t\t\tborder-radius: 50% !important;
  4467. \t\t\tbackground: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  4468. \t\t\tcolor: #333;
  4469. \t\t\tfont-size: 22px;
  4470. \t\t\tcursor: pointer;
  4471. \t\t\tdisplay: flex;
  4472. \t\t\talign-items: center;
  4473. \t\t\tjustify-content: center;
  4474. \t\t\ttransition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  4475. \t\t\tpointer-events: all;
  4476. \t\t\tbox-shadow: 0 4px 15px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
  4477. \t\t\tbackdrop-filter: blur(10px);
  4478. \t\t\tposition: relative;
  4479. \t\t\toverflow: visible;
  4480. \t\t}
  4482. \t\t.carousel-btn-ebay::before {
  4483. \t\t\tcontent: '';
  4484. \t\t\tposition: absolute;
  4485. \t\t\ttop: 50%;
  4486. \t\t\tleft: 50%;
  4487. \t\t\twidth: 0;
  4488. \t\t\theight: 0;
  4489. \t\t\tborder-radius: 50%;
  4490. \t\t\tbackground: rgba(255, 255, 255, 0.3);
  4491. \t\t\ttransform: translate(-50%, -50%);
  4492. \t\t\ttransition: width 0.6s ease, height 0.6s ease;
  4493. \t\t}
  4495. \t\t.carousel-btn-ebay:hover::before {
  4496. \t\t\twidth: 100%;
  4497. \t\t\theight: 100%;
  4498. \t\t}
  4500. \t\t.carousel-btn-ebay:hover {
  4501. \t\t\ttransform: translateY(-3px) scale(1.1);
  4502. \t\t\tbox-shadow: 0 8px 25px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);
  4503. \t\t}
  4504. \t\t
  4505. \t\t/* Désactiver les effets hover sur mobile pour éviter les problèmes tactiles */
  4506. \t\t@media (hover: none) and (pointer: coarse) {
  4507. \t\t\t.carousel-btn-ebay:hover {
  4508. \t\t\t\ttransform: none;
  4509. \t\t\t}
  4510. \t\t\t
  4511. \t\t\t.carousel-btn-ebay:active {
  4512. \t\t\t\ttransform: scale(0.95);
  4513. \t\t\t}
  4514. \t\t\t
  4515. \t\t\t.carousel-indicator-ebay:hover {
  4516. \t\t\t\ttransform: none;
  4517. \t\t\t}
  4518. \t\t}
  4520. \t\t.carousel-btn-ebay:active {
  4521. \t\t\ttransform: translateY(-1px) scale(1.05);
  4522. \t\t\tbox-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  4523. \t\t}
  4524. \t\t
  4525. \t\t/* Désactiver les effets hover sur mobile pour éviter les problèmes tactiles */
  4526. \t\t@media (hover: none) and (pointer: coarse) {
  4527. \t\t\t.carousel-btn-ebay:hover {
  4528. \t\t\t\ttransform: none;
  4529. \t\t\t}
  4530. \t\t\t
  4531. \t\t\t.carousel-btn-ebay:active {
  4532. \t\t\t\ttransform: scale(0.95);
  4533. \t\t\t}
  4534. \t\t\t
  4535. \t\t\t.carousel-indicator-ebay:hover {
  4536. \t\t\t\ttransform: none;
  4537. \t\t\t}
  4538. \t\t}
  4540. \t\t.carousel-btn-ebay:disabled {
  4541. \t\t\topacity: 0.4;
  4542. \t\t\tcursor: not-allowed;
  4543. \t\t\ttransform: none;
  4544. \t\t}
  4546. \t\t.carousel-btn-ebay i {
  4547. \t\t\tposition: relative;
  4548. \t\t\tz-index: 10;
  4549. \t\t\ttransition: transform 0.3s ease;
  4550. \t\t\tdisplay: inline-block;
  4551. \t\t\tline-height: 1;
  4552. \t\t}
  4554. \t\t.carousel-btn-ebay:hover i {
  4555. \t\t\ttransform: scale(1.15);
  4556. \t\t}
  4557. \t\t
  4558. \t\t.carousel-btn-ebay.pause-btn i,
  4559. \t\t.carousel-btn-ebay.pause-btn #pauseIcon {
  4560. \t\t\tz-index: 10 !important;
  4561. \t\t\tcolor: white !important;
  4562. \t\t\tdisplay: inline-block !important;
  4563. \t\t\tvisibility: visible !important;
  4564. \t\t\topacity: 1 !important;
  4565. \t\t}
  4567. \t\t.carousel-btn-ebay.prev-btn,
  4568. \t\t.carousel-btn-ebay.next-btn {
  4569. \t\t\tbackground: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 100%);
  4570. \t\t\tcolor: #333;
  4571. \t\t}
  4573. \t\t.carousel-btn-ebay.prev-btn:hover,
  4574. \t\t.carousel-btn-ebay.next-btn:hover {
  4575. \t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff6b00 100%);
  4576. \t\t\tcolor: white;
  4577. \t\t}
  4579. \t\t.carousel-btn-ebay.pause-btn {
  4580. \t\t\tbackground: linear-gradient(135deg, rgba(220, 53, 69, 0.95) 0%, rgba(200, 35, 51, 0.95) 100%);
  4581. \t\t\tcolor: white !important;
  4582. \t\t}
  4584. \t\t.carousel-btn-ebay.pause-btn:hover {
  4585. \t\t\tbackground: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  4586. \t\t\tcolor: white !important;
  4587. \t\t}
  4589. \t\t.carousel-btn-ebay.pause-btn.playing {
  4590. \t\t\tbackground: linear-gradient(135deg, rgba(40, 167, 69, 0.95) 0%, rgba(33, 136, 56, 0.95) 100%);
  4591. \t\t\tcolor: white !important;
  4592. \t\t}
  4594. \t\t.carousel-btn-ebay.pause-btn.playing:hover {
  4595. \t\t\tbackground: linear-gradient(135deg, #28a745 0%, #218838 100%);
  4596. \t\t\tcolor: white !important;
  4597. \t\t}
  4599. \t\t/* Style spécifique pour l'icône du bouton pause - Utilisation directe d'Unicode */
  4600. \t\t.carousel-btn-ebay.pause-btn {
  4601. \t\t\ttext-align: center;
  4602. \t\t\tposition: relative;
  4603. \t\t\tdisplay: flex;
  4604. \t\t\talign-items: center;
  4605. \t\t\tjustify-content: center;
  4606. \t\t}
  4607. \t\t
  4608. \t\t.carousel-btn-ebay.pause-btn #pauseIcon,
  4609. \t\t.carousel-btn-ebay.pause-btn .pause-icon-content {
  4610. \t\t\tdisplay: block !important;
  4611. \t\t\tcolor: white !important;
  4612. \t\t\tfont-size: 24px !important;
  4613. \t\t\tline-height: 1 !important;
  4614. \t\t\twidth: auto !important;
  4615. \t\t\theight: auto !important;
  4616. \t\t\tposition: static !important;
  4617. \t\t\ttext-align: center !important;
  4618. \t\t\tz-index: 10 !important;
  4619. \t\t\tvisibility: visible !important;
  4620. \t\t\topacity: 1 !important;
  4621. \t\t\tpointer-events: none !important;
  4622. \t\t\tfont-family: Arial, \"Segoe UI\", sans-serif !important;
  4623. \t\t\tfont-weight: normal !important;
  4624. \t\t\tmargin: 0 !important;
  4625. \t\t\tpadding: 0 !important;
  4626. \t\t}
  4628. \t\t/* Indicateurs eBay-style améliorés - Positionnés en bas à gauche */
  4629. \t\t.carousel-indicators-ebay {
  4630. \t\t\tposition: absolute;
  4631. \t\t\tbottom: 20px;
  4632. \t\t\tleft: 50%;
  4633. \t\t\ttransform: translateX(-50%);
  4634. \t\t\tdisplay: flex;
  4635. \t\t\tgap: 10px;
  4636. \t\t\tz-index: 10;
  4637. \t\t\tbackground: rgba(0, 0, 0, 0.4);
  4638. \t\t\tpadding: 8px 14px;
  4639. \t\t\tborder-radius: 25px;
  4640. \t\t\tbackdrop-filter: blur(8px);
  4641. \t\t\tbox-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  4642. \t\t}
  4644. \t\t.carousel-indicator-ebay {
  4645. \t\t\twidth: 10px;
  4646. \t\t\theight: 10px;
  4647. \t\t\tborder-radius: 50%;
  4648. \t\t\tbackground: rgba(255, 255, 255, 0.5);
  4649. \t\t\tborder: 2px solid rgba(255, 255, 255, 0.8);
  4650. \t\t\tcursor: pointer;
  4651. \t\t\ttransition: all 0.3s ease;
  4652. \t\t}
  4654. \t\t.carousel-indicator-ebay.active {
  4655. \t\t\tbackground: white !important;
  4656. \t\t\tborder-color: #ffa200 !important;
  4657. \t\t\ttransform: scale(1.3) !important;
  4658. \t\t\tbox-shadow: 0 0 8px rgba(255, 162, 0, 0.6) !important;
  4659. \t\t}
  4661. \t\t.carousel-indicator-ebay:hover {
  4662. \t\t\tbackground: rgba(255, 255, 255, 0.8);
  4663. \t\t\ttransform: scale(1.1);
  4664. \t\t}
  4666. \t\t/* Styles eBay-style pour les détails de boutique */
  4667. \t\t.shop-avatar-container-ebay {
  4668. \t\t\tposition: relative;
  4669. \t\t\tmargin-right: 20px;
  4670. \t\t}
  4672. \t\t.shop-avatar-ebay {
  4673. \t\t\twidth: 100px;
  4674. \t\t\theight: 100px;
  4675. \t\t\tborder-radius: 12px;
  4676. \t\t\tobject-fit: cover;
  4677. \t\t\tborder: 3px solid white;
  4678. \t\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  4679. \t\t\ttransition: transform 0.3s ease;
  4680. \t\t}
  4682. \t\t.shop-avatar-ebay:hover {
  4683. \t\t\ttransform: scale(1.05);
  4684. \t\t}
  4686. \t\t.shop-avatar-placeholder {
  4687. \t\t\tbackground: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
  4688. \t\t\tdisplay: flex;
  4689. \t\t\talign-items: center;
  4690. \t\t\tjustify-content: center;
  4691. \t\t\tfont-size: 2.5rem;
  4692. \t\t\tcolor: #999;
  4693. \t\t}
  4695. \t\t.verified-badge-ebay {
  4696. \t\t\tposition: absolute;
  4697. \t\t\tbottom: -5px;
  4698. \t\t\tright: -5px;
  4699. \t\t\tbackground: #28a745;
  4700. \t\t\tcolor: white;
  4701. \t\t\twidth: 24px;
  4702. \t\t\theight: 24px;
  4703. \t\t\tborder-radius: 50%;
  4704. \t\t\tdisplay: flex;
  4705. \t\t\talign-items: center;
  4706. \t\t\tjustify-content: center;
  4707. \t\t\tfont-size: 12px;
  4708. \t\t\tborder: 2px solid white;
  4709. \t\t}
  4711. \t\t.shop-info-ebay {
  4712. \t\t\tpadding: 0;
  4713. \t\t}
  4715. \t\t.shop-name-section {
  4716. \t\t\tmargin-bottom: 12px;
  4717. \t\t}
  4719. \t\t.shop-name-ebay {
  4720. \t\t\tfont-size: 2.2rem;
  4721. \t\t\tfont-weight: 800;
  4722. \t\t\tbackground: linear-gradient(135deg, #333 0%, #555 100%);
  4723. \t\t\t-webkit-background-clip: text;
  4724. \t\t\t-webkit-text-fill-color: transparent;
  4725. \t\t\tbackground-clip: text;
  4726. \t\t\tmargin: 0;
  4727. \t\t\tline-height: 1.2;
  4728. \t\t\tword-wrap: break-word;
  4729. \t\t\toverflow-wrap: break-word;
  4730. \t\t\thyphens: auto;
  4731. \t\t\tletter-spacing: -0.5px;
  4732. \t\t}
  4734. \t\t.verified-text {
  4735. \t\t\tbackground: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  4736. \t\t\t-webkit-background-clip: text;
  4737. \t\t\t-webkit-text-fill-color: transparent;
  4738. \t\t\tbackground-clip: text;
  4739. \t\t\tfont-size: 0.9rem;
  4740. \t\t\tfont-weight: 600;
  4741. \t\t\tdisplay: inline-flex;
  4742. \t\t\talign-items: center;
  4743. \t\t\tgap: 4px;
  4744. \t\t\tword-wrap: break-word;
  4745. \t\t\toverflow-wrap: break-word;
  4746. \t\t\tline-height: 1.4;
  4747. \t\t\twhite-space: normal;
  4748. \t\t\tflex-wrap: wrap;
  4749. \t\t\tmax-width: 100%;
  4750. \t\t}
  4752. \t\t.verified-text i {
  4753. \t\t\t-webkit-text-fill-color: #28a745;
  4754. \t\t\tcolor: #28a745;
  4755. \t\t\tflex-shrink: 0;
  4756. \t\t}
  4758. \t\t.shop-category-ebay {
  4759. \t\t\tbackground: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  4760. \t\t\tcolor: #666;
  4761. \t\t\tpadding: 6px 14px;
  4762. \t\t\tborder-radius: 20px;
  4763. \t\t\tfont-size: 0.875rem;
  4764. \t\t\tfont-weight: 500;
  4765. \t\t\tdisplay: inline-block;
  4766. \t\t\tborder: 1px solid #dee2e6;
  4767. \t\t\tword-wrap: break-word;
  4768. \t\t\toverflow-wrap: break-word;
  4769. \t\t\tmax-width: 100%;
  4770. \t\t\tline-height: 1.4;
  4771. \t\t\twhite-space: normal;
  4772. \t\t}
  4774. \t\t.shop-stats-ebay {
  4775. \t\t\tmargin-top: 16px;
  4776. \t\t}
  4778. \t\t.stat-row {
  4779. \t\t\tdisplay: flex;
  4780. \t\t\tgap: 32px;
  4781. \t\t\tmargin-bottom: 12px;
  4782. \t\t\tflex-wrap: wrap;
  4783. \t\t}
  4785. \t\t.stat-item-ebay {
  4786. \t\t\tdisplay: flex;
  4787. \t\t\tflex-direction: column;
  4788. \t\t\talign-items: flex-start;
  4789. \t\t\tmin-width: 100px;
  4790. \t\t}
  4792. \t\t.stat-percentage {
  4793. \t\t\tfont-size: 1.4rem;
  4794. \t\t\tfont-weight: 800;
  4795. \t\t\tbackground: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  4796. \t\t\t-webkit-background-clip: text;
  4797. \t\t\t-webkit-text-fill-color: transparent;
  4798. \t\t\tbackground-clip: text;
  4799. \t\t\tline-height: 1.1;
  4800. \t\t\tmargin-bottom: 4px;
  4801. \t\t\tword-wrap: break-word;
  4802. \t\t\toverflow-wrap: break-word;
  4803. \t\t}
  4805. \t\t.stat-number-ebay {
  4806. \t\t\tfont-size: 1.4rem;
  4807. \t\t\tfont-weight: 800;
  4808. \t\t\tbackground: linear-gradient(135deg, #333 0%, #555 100%);
  4809. \t\t\t-webkit-background-clip: text;
  4810. \t\t\t-webkit-text-fill-color: transparent;
  4811. \t\t\tbackground-clip: text;
  4812. \t\t\tline-height: 1.1;
  4813. \t\t\tmargin-bottom: 4px;
  4814. \t\t\tword-wrap: break-word;
  4815. \t\t\toverflow-wrap: break-word;
  4816. \t\t}
  4818. \t\t.stat-label-ebay {
  4819. \t\t\tfont-size: 0.75rem;
  4820. \t\t\tcolor: #6c757d;
  4821. \t\t\ttext-transform: uppercase;
  4822. \t\t\tletter-spacing: 0.8px;
  4823. \t\t\tfont-weight: 600;
  4824. \t\t\tmargin-top: 0;
  4825. \t\t\tline-height: 1.3;
  4826. \t\t\tword-wrap: break-word;
  4827. \t\t\toverflow-wrap: break-word;
  4828. \t\t\ttext-align: left;
  4829. \t\t\thyphens: auto;
  4830. \t\t\tmax-width: 100%;
  4831. \t\t}
  4833. \t\t.shop-additional-info {
  4834. \t\t\tdisplay: flex;
  4835. \t\t\tflex-wrap: wrap;
  4836. \t\t\tgap: 12px 20px;
  4837. \t\t\tfont-size: 0.875rem;
  4838. \t\t\tcolor: #495057;
  4839. \t\t\tmargin-top: 12px;
  4840. \t\t\tpadding-top: 16px;
  4841. \t\t\tborder-top: 1px solid #e9ecef;
  4842. \t\t\tline-height: 1.5;
  4843. \t\t\tword-wrap: break-word;
  4844. \t\t\toverflow-wrap: break-word;
  4845. \t\t}
  4847. \t\t.member-since {
  4848. \t\t\tfont-weight: 500;
  4849. \t\t\tdisplay: inline-flex;
  4850. \t\t\talign-items: center;
  4851. \t\t\twhite-space: normal;
  4852. \t\t\tpadding: 6px 12px;
  4853. \t\t\tbackground: #f8f9fa;
  4854. \t\t\tborder-radius: 8px;
  4855. \t\t\ttransition: all 0.3s ease;
  4856. \t\t\tborder: 1px solid transparent;
  4857. \t\t\tword-wrap: break-word;
  4858. \t\t\toverflow-wrap: break-word;
  4859. \t\t\tline-height: 1.4;
  4860. \t\t\tmax-width: 100%;
  4861. \t\t\tflex-wrap: wrap;
  4862. \t\t\ttext-align: center;
  4863. \t\t}
  4865. \t\t.member-since:hover {
  4866. \t\t\tbackground: #e9ecef;
  4867. \t\t\tborder-color: #dee2e6;
  4868. \t\t\ttransform: translateY(-1px);
  4869. \t\t}
  4871. \t\t.member-since i {
  4872. \t\t\tcolor: #ffa200;
  4873. \t\t\tmargin-right: 6px;
  4874. \t\t\tfont-size: 0.95rem;
  4875. \t\t\ttransition: transform 0.3s ease;
  4876. \t\t\tflex-shrink: 0;
  4877. \t\t}
  4879. \t\t.member-since:hover i {
  4880. \t\t\ttransform: scale(1.2);
  4881. \t\t}
  4883. \t\t.location {
  4884. \t\t\tdisplay: flex;
  4885. \t\t\talign-items: center;
  4886. \t\t}
  4888. \t\t.shop-actions-ebay {
  4889. \t\t\tdisplay: flex;
  4890. \t\t\tflex-direction: column;
  4891. \t\t\tgap: 10px;
  4892. \t\t\tmin-width: 160px;
  4893. \t\t}
  4895. \t\t.btn-ebay {
  4896. \t\t\tpadding: 10px 18px;
  4897. \t\t\tfont-size: 0.9rem;
  4898. \t\t\tfont-weight: 500;
  4899. \t\t\tborder-radius: 6px;
  4900. \t\t\ttext-align: center;
  4901. \t\t\ttransition: all 0.3s ease;
  4902. \t\t\tborder-width: 1px;
  4903. \t\t\twhite-space: normal;
  4904. \t\t\tword-wrap: break-word;
  4905. \t\t\toverflow-wrap: break-word;
  4906. \t\t\tline-height: 1.4;
  4907. \t\t}
  4909. \t\t.btn-ebay:hover {
  4910. \t\t\ttransform: translateY(-2px);
  4911. \t\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  4912. \t\t}
  4914. \t\t.btn-ebay i {
  4915. \t\t\tvertical-align: middle;
  4916. \t\t}
  4918. \t\t.btn-ebay.following {
  4919. \t\t\tbackground: #28a745;
  4920. \t\t\tborder-color: #28a745;
  4921. \t\t\tcolor: white;
  4922. \t\t}
  4924. \t\t/* Styles pour les avis */
  4925. \t\t.review-stats {
  4926. \t\t\tbackground: white;
  4927. \t\t\tborder-radius: 12px;
  4928. \t\t\tpadding: 20px;
  4929. \t\t\tbox-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  4930. \t\t\tmargin-bottom: 20px;
  4931. \t\t}
  4933. \t\t.stat-card {
  4934. \t\t\tpadding: 15px;
  4935. \t\t}
  4937. \t\t.stat-number {
  4938. \t\t\tfont-size: 2.5rem;
  4939. \t\t\tfont-weight: 700;
  4940. \t\t\tcolor: #333;
  4941. \t\t\tmargin: 0;
  4942. \t\t}
  4944. \t\t.stat-label {
  4945. \t\t\tcolor: #666;
  4946. \t\t\tfont-size: 0.9rem;
  4947. \t\t\tmargin: 5px 0 0;
  4948. \t\t}
  4950. \t\t.rating-stars {
  4951. \t\t\tcolor: #ffc107;
  4952. \t\t\tfont-size: 1.2rem;
  4953. \t\t\tmargin: 10px 0;
  4954. \t\t}
  4956. \t\t.reviews-preview {
  4957. \t\t\tbackground: white;
  4958. \t\t\tborder-radius: 12px;
  4959. \t\t\tpadding: 20px;
  4960. \t\t\tbox-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  4961. \t\t}
  4963. \t\t.review-item {
  4964. \t\t\tborder-bottom: 1px solid #f0f0f0;
  4965. \t\t\tpadding: 15px 0;
  4966. \t\t}
  4968. \t\t.review-item:last-child {
  4969. \t\t\tborder-bottom: none;
  4970. \t\t}
  4972. \t\t.review-header {
  4973. \t\t\tdisplay: flex;
  4974. \t\t\tjustify-content: space-between;
  4975. \t\t\talign-items: flex-start;
  4976. \t\t\tmargin-bottom: 10px;
  4977. \t\t}
  4979. \t\t.reviewer-info {
  4980. \t\t\tdisplay: flex;
  4981. \t\t\talign-items: center;
  4982. \t\t\tgap: 10px;
  4983. \t\t}
  4985. \t\t.reviewer-avatar {
  4986. \t\t\twidth: 40px;
  4987. \t\t\theight: 40px;
  4988. \t\t\tborder-radius: 50%;
  4989. \t\t\tbackground: #f8f9fa;
  4990. \t\t\tdisplay: flex;
  4991. \t\t\talign-items: center;
  4992. \t\t\tjustify-content: center;
  4993. \t\t\tcolor: #666;
  4994. \t\t}
  4996. \t\t.reviewer-name {
  4997. \t\t\tmargin: 0;
  4998. \t\t\tfont-size: 1rem;
  4999. \t\t\tfont-weight: 600;
  5000. \t\t}
  5002. \t\t.review-rating {
  5003. \t\t\tcolor: #ffc107;
  5004. \t\t\tfont-size: 0.9rem;
  5005. \t\t}
  5007. \t\t.review-meta {
  5008. \t\t\ttext-align: right;
  5009. \t\t}
  5011. \t\t.review-date {
  5012. \t\t\tcolor: #666;
  5013. \t\t\tfont-size: 0.8rem;
  5014. \t\t}
  5016. \t\t.verified-badge {
  5017. \t\t\tdisplay: inline-block;
  5018. \t\t\tbackground: #28a745;
  5019. \t\t\tcolor: white;
  5020. \t\t\tpadding: 2px 8px;
  5021. \t\t\tborder-radius: 12px;
  5022. \t\t\tfont-size: 0.7rem;
  5023. \t\t\tmargin-left: 10px;
  5024. \t\t}
  5026. \t\t.review-comment {
  5027. \t\t\tmargin: 10px 0 0;
  5028. \t\t\tline-height: 1.5;
  5029. \t\t\tcolor: #333;
  5030. \t\t}
  5032. \t\t.review-actions-card {
  5033. \t\t\tbackground: white;
  5034. \t\t\tborder-radius: 12px;
  5035. \t\t\tpadding: 20px;
  5036. \t\t\tbox-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  5037. \t\t\ttext-align: center;
  5038. \t\t}
  5040. \t\t.shop-banner-overlay {
  5041. \t\t\tposition: absolute;
  5042. \t\t\ttop: 0;
  5043. \t\t\tleft: 0;
  5044. \t\t\tright: 0;
  5045. \t\t\tbottom: 0;
  5046. \t\t\tbackground: rgba(0, 0, 0, 0.3);
  5047. \t\t\tz-index: 1;
  5048. \t\t}
  5050. \t\t.shop-header-content {
  5051. \t\t\tbackground: white;
  5052. \t\t\tborder: 1px solid #e1e1e1;
  5053. \t\t\tborder-radius: 4px;
  5054. \t\t\tpadding: 20px;
  5055. \t\t\tmargin: 0 20px 20px;
  5056. \t\t\tbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  5057. \t\t\tposition: relative;
  5058. \t\t\tz-index: 2;
  5059. \t\t}
  5061. \t\t.shop-avatar {
  5062. \t\t\twidth: 80px;
  5063. \t\t\theight: 80px;
  5064. \t\t\tborder-radius: 4px;
  5065. \t\t\tborder: 1px solid #e1e1e1;
  5066. \t\t\tobject-fit: cover;
  5067. \t\t\tposition: relative;
  5068. \t\t\tz-index: 3;
  5069. \t\t}
  5071. \t\t.shop-title {
  5072. \t\t\tfont-size: 1.5rem;
  5073. \t\t\tfont-weight: 600;
  5074. \t\t\tcolor: #333;
  5075. \t\t\tmargin-bottom: 8px;
  5076. \t\t}
  5078. \t\t.shop-subtitle {
  5079. \t\t\tcolor: #666;
  5080. \t\t\tfont-size: 0.9rem;
  5081. \t\t\tmargin-bottom: 15px;
  5082. \t\t}
  5084. \t\t.shop-stats-row {
  5085. \t\t\tdisplay: flex;
  5086. \t\t\talign-items: center;
  5087. \t\t\tgap: 20px;
  5088. \t\t\tflex-wrap: wrap;
  5089. \t\t\tmargin-bottom: 15px;
  5090. \t\t}
  5092. \t\t.shop-stat-item {
  5093. \t\t\tdisplay: flex;
  5094. \t\t\talign-items: center;
  5095. \t\t\tgap: 5px;
  5096. \t\t\tfont-size: 0.9rem;
  5097. \t\t}
  5099. \t\t.positive-feedback {
  5100. \t\t\tcolor: #007bff;
  5101. \t\t\tfont-weight: 600;
  5102. \t\t}
  5104. \t\t.items-sold {
  5105. \t\t\tcolor: #666;
  5106. \t\t}
  5108. \t\t.followers-count {
  5109. \t\t\tcolor: #666;
  5110. \t\t}
  5112. \t\t.shop-badges {
  5113. \t\t\tdisplay: flex;
  5114. \t\t\tgap: 10px;
  5115. \t\t\tmargin-bottom: 15px;
  5116. \t\t}
  5118. \t\t.shop-badge {
  5119. \t\t\tbackground: #f0f0f0;
  5120. \t\t\tcolor: #333;
  5121. \t\t\tpadding: 4px 8px;
  5122. \t\t\tborder-radius: 3px;
  5123. \t\t\tfont-size: 0.8rem;
  5124. \t\t\tfont-weight: 500;
  5125. \t\t}
  5127. \t\t.shop-badge.verified {
  5128. \t\t\tbackground: #d4edda;
  5129. \t\t\tcolor: #155724;
  5130. \t\t}
  5132. \t\t.shop-badge.premium {
  5133. \t\t\tbackground: #fff3cd;
  5134. \t\t\tcolor: #856404;
  5135. \t\t}
  5137. \t\t.shop-actions-row {
  5138. \t\t\tdisplay: flex;
  5139. \t\t\talign-items: center;
  5140. \t\t\tgap: 15px;
  5141. \t\t\tflex-wrap: wrap;
  5142. \t\t}
  5144. \t\t.shop-action-btn {
  5145. \t\t\tbackground: #007bff;
  5146. \t\t\tcolor: white;
  5147. \t\t\tborder: none;
  5148. \t\t\tpadding: 8px 16px;
  5149. \t\t\tborder-radius: 3px;
  5150. \t\t\tfont-size: 0.9rem;
  5151. \t\t\tfont-weight: 500;
  5152. \t\t\tcursor: pointer;
  5153. \t\t\ttransition: background-color 0.2s;
  5154. \t\t\ttext-decoration: none;
  5155. \t\t\tdisplay: inline-flex;
  5156. \t\t\talign-items: center;
  5157. \t\t\tgap: 5px;
  5158. \t\t}
  5160. \t\t.shop-action-btn:hover {
  5161. \t\t\tbackground: #0056b3;
  5162. \t\t\tcolor: white;
  5163. \t\t}
  5165. \t\t.shop-action-btn.following {
  5166. \t\t\tbackground: #28a745;
  5167. \t\t}
  5169. \t\t.shop-action-btn.following:hover {
  5170. \t\t\tbackground: #1e7e34;
  5171. \t\t}
  5173. \t\t.shop-action-btn.secondary {
  5174. \t\t\tbackground: #6c757d;
  5175. \t\t}
  5177. \t\t.shop-action-btn.secondary:hover {
  5178. \t\t\tbackground: #545b62;
  5179. \t\t}
  5181. \t\t/* Onglets eBay-style avec classes Karma */
  5182. \t\t.shop-tabs {
  5183. \t\t\tbackground: white;
  5184. \t\t\tborder: 1px solid #e1e1e1;
  5185. \t\t\tborder-top: none;
  5186. \t\t\tborder-radius: 0 0 4px 4px;
  5187. \t\t\tmargin-top: 0;
  5188. \t\t}
  5190. \t\t.shop-tabs-nav {
  5191. \t\t\tdisplay: flex;
  5192. \t\t\tborder-bottom: 1px solid #e1e1e1;
  5193. \t\t\tmargin: 0;
  5194. \t\t\tpadding: 0;
  5195. \t\t\tlist-style: none;
  5196. \t\t\tbackground: #f8f9fa;
  5197. \t\t}
  5199. \t\t.shop-tab {
  5200. \t\t\tmargin: 0;
  5201. \t\t}
  5203. \t\t.shop-tab-link {
  5204. \t\t\tdisplay: block;
  5205. \t\t\tpadding: 12px 20px;
  5206. \t\t\tcolor: #000000;
  5207. \t\t\ttext-decoration: none;
  5208. \t\t\tborder-bottom: 2px solid transparent;
  5209. \t\t\ttransition: all 0.2s;
  5210. \t\t\tfont-weight: 500;
  5211. \t\t\tfont-size: 1rem;
  5212. \t\t}
  5214. \t\t.shop-tab-link:hover,
  5215. \t\t.shop-tab-link.active {
  5216. \t\t\tcolor: #095ad3;
  5217. \t\t\tborder-bottom-color: #095ad3;
  5218. \t\t\tbackground: #ffa200;
  5219. \t\t}
  5221. \t\t.shop-tab-content {
  5222. \t\t\tpadding: 30px;
  5223. \t\t\tmin-height: 400px;
  5224. \t\t}
  5226. \t\t.shop-tab-content:not(.active) {
  5227. \t\t\tdisplay: none;
  5228. \t\t}
  5230. \t\t.shop-tab-content.active {
  5231. \t\t\tdisplay: block;
  5232. \t\t}
  5234. \t\t/* Cards d'information avec style Karma */
  5235. \t\t.shop-info-card {
  5236. \t\t\tbackground: #f8f9fa;
  5237. \t\t\tborder: 1px solid #e1e1e1;
  5238. \t\t\tborder-radius: 4px;
  5239. \t\t\tpadding: 20px;
  5240. \t\t\tmargin-bottom: 20px;
  5241. \t\t}
  5243. \t\t.shop-info-card h6 {
  5244. \t\t\tcolor: #333;
  5245. \t\t\tfont-weight: 600;
  5246. \t\t\tmargin-bottom: 15px;
  5247. \t\t\tfont-size: 1.1rem;
  5248. \t\t}
  5250. \t\t.shop-info-card p {
  5251. \t\t\tcolor: #666;
  5252. \t\t\tfont-size: 0.9rem;
  5253. \t\t\tmargin: 0;
  5254. \t\t\tline-height: 1.5;
  5255. \t\t}
  5257. \t\t.shop-contact-info {
  5258. \t\t\tdisplay: flex;
  5259. \t\t\tflex-direction: column;
  5260. \t\t\tgap: 10px;
  5261. \t\t}
  5263. \t\t.shop-contact-item {
  5264. \t\t\tdisplay: flex;
  5265. \t\t\talign-items: center;
  5266. \t\t\tgap: 10px;
  5267. \t\t\tfont-size: 0.9rem;
  5268. \t\t\tcolor: #666;
  5269. \t\t\tpadding: 5px 0;
  5270. \t\t}
  5272. \t\t.shop-contact-item i {
  5273. \t\t\twidth: 16px;
  5274. \t\t\tcolor: #007bff;
  5275. \t\t\ttext-align: center;
  5276. \t\t}
  5278. \t\t.shop-social-links {
  5279. \t\t\tdisplay: flex;
  5280. \t\t\tgap: 10px;
  5281. \t\t\tmargin-top: 15px;
  5282. \t\t\tflex-wrap: wrap;
  5283. \t\t}
  5285. \t\t.shop-social-link {
  5286. \t\t\tdisplay: inline-flex;
  5287. \t\t\talign-items: center;
  5288. \t\t\tjustify-content: center;
  5289. \t\t\twidth: 36px;
  5290. \t\t\theight: 36px;
  5291. \t\t\tbackground: #f0f0f0;
  5292. \t\t\tcolor: #666;
  5293. \t\t\tborder-radius: 4px;
  5294. \t\t\ttext-decoration: none;
  5295. \t\t\ttransition: all 0.2s;
  5296. \t\t\tfont-size: 1.1rem;
  5297. \t\t}
  5299. \t\t.shop-social-link:hover {
  5300. \t\t\tbackground: #007bff;
  5301. \t\t\tcolor: white;
  5302. \t\t\ttransform: translateY(-2px);
  5303. \t\t}
  5305. \t\t/* Produits avec style Karma */
  5306. \t\t.product-card {
  5307. \t\t\tbackground: white;
  5308. \t\t\tborder: 1px solid #e1e1e1;
  5309. \t\t\tborder-radius: 4px;
  5310. \t\t\toverflow: hidden;
  5311. \t\t\ttransition: all 0.3s ease;
  5312. \t\t\tmargin-bottom: 20px;
  5313. \t\t}
  5315. \t\t.product-card:hover {
  5316. \t\t\ttransform: translateY(-2px);
  5317. \t\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  5318. \t\t}
  5320. \t\t/* Animation de tri des produits */
  5321. \t\t.product-item {
  5322. \t\t\ttransition: all 0.3s ease;
  5323. \t\t}
  5325. \t\t.product-item.sorting {
  5326. \t\t\topacity: 0;
  5327. \t\t\ttransform: translateY(20px);
  5328. \t\t}
  5330. \t\t.product-item.sorted {
  5331. \t\t\topacity: 1;
  5332. \t\t\ttransform: translateY(0);
  5333. \t\t}
  5335. \t\t.product-image {
  5336. \t\t\theight: 200px;
  5337. \t\t\tbackground-size: cover;
  5338. \t\t\tbackground-position: center;
  5339. \t\t\tposition: relative;
  5340. \t\t\toverflow: hidden;
  5341. \t\t}
  5343. \t\t.product-info {
  5344. \t\t\tpadding: 15px;
  5345. \t\t}
  5347. \t\t.product-title {
  5348. \t\t\tfont-size: 1rem;
  5349. \t\t\tfont-weight: 600;
  5350. \t\t\tmargin-bottom: 8px;
  5351. \t\t\tcolor: #333;
  5352. \t\t\tline-height: 1.3;
  5353. \t\t}
  5355. \t\t.product-title a {
  5356. \t\t\tcolor: #333;
  5357. \t\t\ttext-decoration: none;
  5358. \t\t}
  5360. \t\t.product-title a:hover {
  5361. \t\t\tcolor: #007bff;
  5362. \t\t}
  5364. \t\t.product-price {
  5365. \t\t\tfont-size: 1.2rem;
  5366. \t\t\tfont-weight: bold;
  5367. \t\t\tcolor: #ff6b35;
  5368. \t\t\tmargin-bottom: 10px;
  5369. \t\t}
  5371. \t\t.product-meta {
  5372. \t\t\tdisplay: flex;
  5373. \t\t\tjustify-content: space-between;
  5374. \t\t\talign-items: center;
  5375. \t\t\tfont-size: 0.85rem;
  5376. \t\t\tcolor: #666;
  5377. \t\t}
  5379. \t\t.rating {
  5380. \t\t\tcolor: #ffc107;
  5381. \t\t}
  5383. \t\t/* Responsive avec classes Karma */
  5384. \t\t/* Responsive amélioré pour la page shop */
  5385. \t\t/* Tablettes et écrans moyens */
  5386. \t\t@media(max-width: 1200px) {
  5387. \t\t\t.shop-carousel-ebay {
  5388. \t\t\t\theight: 400px;
  5389. \t\t\t}
  5390. \t\t\t
  5391. \t\t\t.carousel-controls-ebay {
  5392. \t\t\t\tbottom: 18px;
  5393. \t\t\t\tright: 18px;
  5394. \t\t\t\tgap: 11px;
  5395. \t\t\t}
  5396. \t\t\t
  5397. \t\t\t.carousel-btn-ebay {
  5398. \t\t\t\twidth: 48px;
  5399. \t\t\t\theight: 48px;
  5400. \t\t\t\tfont-size: 21px;
  5401. \t\t\t}
  5402. \t\t\t
  5403. \t\t\t.carousel-indicators-ebay {
  5404. \t\t\t\tbottom: 18px;
  5405. \t\t\t\tpadding: 7px 13px;
  5406. \t\t\t}
  5407. \t\t\t
  5408. \t\t\t.carousel-indicator-ebay {
  5409. \t\t\t\twidth: 9px;
  5410. \t\t\t\theight: 9px;
  5411. \t\t\t}
  5412. \t\t}
  5413. \t\t
  5414. \t\t@media(max-width: 991.98px) {
  5415. \t\t\t.shop-carousel-ebay {
  5416. \t\t\t\tmargin: 0 10px;
  5417. \t\t\t\theight: 380px;
  5418. \t\t\t}
  5419. \t\t\t
  5420. \t\t\t.carousel-controls-ebay {
  5421. \t\t\t\tbottom: 16px;
  5422. \t\t\t\tright: 16px;
  5423. \t\t\t\tgap: 10px;
  5424. \t\t\t}
  5425. \t\t\t
  5426. \t\t\t.carousel-btn-ebay {
  5427. \t\t\t\twidth: 46px;
  5428. \t\t\t\theight: 46px;
  5429. \t\t\t\tfont-size: 20px;
  5430. \t\t\t}
  5431. \t\t\t
  5432. \t\t\t.carousel-indicators-ebay {
  5433. \t\t\t\tbottom: 16px;
  5434. \t\t\t\tleft: 50%;
  5435. \t\t\t\ttransform: translateX(-50%);
  5436. \t\t\t\tpadding: 6px 12px;
  5437. \t\t\t}
  5438. \t\t\t
  5439. \t\t\t.carousel-indicator-ebay {
  5440. \t\t\t\twidth: 9px;
  5441. \t\t\t\theight: 9px;
  5442. \t\t\t}
  5443. \t\t\t
  5444. \t\t\t.shop-header-content {
  5445. \t\t\t\tpadding: 20px;
  5446. \t\t\t\tmargin: 0 10px 20px;
  5447. \t\t\t}
  5448. \t\t\t
  5449. \t\t\t.shop-header-content .row {
  5450. \t\t\t\tflex-wrap: wrap;
  5451. \t\t\t}
  5452. \t\t\t
  5453. \t\t\t.shop-info-ebay {
  5454. \t\t\t\tmargin-top: 0;
  5455. \t\t\t\ttext-align: center;
  5456. \t\t\t}
  5458. \t\t\t.shop-name-ebay {
  5459. \t\t\t\tfont-size: 1.75rem;
  5460. \t\t\t\tline-height: 1.3;
  5461. \t\t\t}
  5463. \t\t\t.verified-text {
  5464. \t\t\t\tfont-size: 0.85rem;
  5465. \t\t\t}
  5467. \t\t\t.shop-category-ebay {
  5468. \t\t\t\tfont-size: 0.8rem;
  5469. \t\t\t\tpadding: 5px 12px;
  5470. \t\t\t}
  5472. \t\t\t.stat-row {
  5473. \t\t\t\tjustify-content: center;
  5474. \t\t\t\tgap: 20px;
  5475. \t\t\t}
  5477. \t\t\t.stat-item-ebay {
  5478. \t\t\t\talign-items: center;
  5479. \t\t\t\tmin-width: 90px;
  5480. \t\t\t}
  5482. \t\t\t.stat-percentage,
  5483. \t\t\t.stat-number-ebay {
  5484. \t\t\t\tfont-size: 1.15rem;
  5485. \t\t\t}
  5487. \t\t\t.stat-label-ebay {
  5488. \t\t\t\tfont-size: 0.75rem;
  5489. \t\t\t\ttext-align: center;
  5490. \t\t\t}
  5492. \t\t\t.shop-additional-info {
  5493. \t\t\t\tjustify-content: center;
  5494. \t\t\t\tgap: 12px 18px;
  5495. \t\t\t\tfont-size: 0.8rem;
  5496. \t\t\t}
  5498. \t\t\t.member-since {
  5499. \t\t\t\tfont-size: 0.8rem;
  5500. \t\t\t}
  5502. \t\t\t.shop-actions-ebay {
  5503. \t\t\t\tmin-width: auto;
  5504. \t\t\t}
  5505. \t\t}
  5506. \t\t
  5507. \t\t@media(max-width: 768px) {
  5508. \t\t\t.shop-banner,
  5509. \t\t\t.shop-carousel-ebay {
  5510. \t\t\t\theight: 300px;
  5511. \t\t\t\tmargin: 0;
  5512. \t\t\t\tborder-radius: 0;
  5513. \t\t\t}
  5514. \t\t\t
  5515. \t\t\t.shop-carousel-ebay .carousel-container {
  5516. \t\t\t\tborder-radius: 0;
  5517. \t\t\t}
  5519. \t\t\t.carousel-controls-ebay {
  5520. \t\t\t\tbottom: 12px;
  5521. \t\t\t\tright: 12px;
  5522. \t\t\t\tgap: 8px;
  5523. \t\t\t}
  5525. \t\t\t.carousel-btn-ebay {
  5526. \t\t\t\twidth: 40px;
  5527. \t\t\t\theight: 40px;
  5528. \t\t\t\tfont-size: 16px;
  5529. \t\t\t}
  5530. \t\t\t
  5531. \t\t\t.carousel-btn-ebay #pauseIcon,
  5532. \t\t\t.carousel-btn-ebay .pause-icon-content {
  5533. \t\t\t\tfont-size: 18px !important;
  5534. \t\t\t}
  5536. \t\t\t.carousel-indicators-ebay {
  5537. \t\t\t\tbottom: 12px;
  5538. \t\t\t\tleft: 50%;
  5539. \t\t\t\ttransform: translateX(-50%);
  5540. \t\t\t\tgap: 6px;
  5541. \t\t\t\tpadding: 5px 10px;
  5542. \t\t\t}
  5543. \t\t\t
  5544. \t\t\t.carousel-indicator-ebay {
  5545. \t\t\t\twidth: 8px;
  5546. \t\t\t\theight: 8px;
  5547. \t\t\t}
  5549. \t\t\t.shop-header-content {
  5550. \t\t\t\tpadding: 20px 16px;
  5551. \t\t\t\tmargin: 0;
  5552. \t\t\t\tborder-radius: 0;
  5553. \t\t\t}
  5555. \t\t\t.shop-header-content .row {
  5556. \t\t\t\tflex-direction: column;
  5557. \t\t\t\ttext-align: center;
  5558. \t\t\t}
  5560. \t\t\t.shop-avatar-container-ebay {
  5561. \t\t\t\tmargin: 0 auto 16px;
  5562. \t\t\t}
  5564. \t\t\t.shop-avatar-ebay {
  5565. \t\t\t\twidth: 90px;
  5566. \t\t\t\theight: 90px;
  5567. \t\t\t}
  5569. \t\t\t.shop-name-ebay {
  5570. \t\t\t\tfont-size: 1.5rem;
  5571. \t\t\t\tmargin-bottom: 8px;
  5572. \t\t\t\tline-height: 1.3;
  5573. \t\t\t\tword-break: break-word;
  5574. \t\t\t\thyphens: auto;
  5575. \t\t\t\tmax-width: 100%;
  5576. \t\t\t}
  5578. \t\t\t.shop-name-section {
  5579. \t\t\t\tmargin-bottom: 10px;
  5580. \t\t\t}
  5582. \t\t\t.verified-text {
  5583. \t\t\t\tfont-size: 0.8rem;
  5584. \t\t\t\twhite-space: normal;
  5585. \t\t\t\tjustify-content: center;
  5586. \t\t\t\tflex-wrap: wrap;
  5587. \t\t\t\tline-height: 1.4;
  5588. \t\t\t}
  5590. \t\t\t.verified-text i {
  5591. \t\t\t\tfont-size: 0.85rem;
  5592. \t\t\t}
  5594. \t\t\t.shop-category-ebay {
  5595. \t\t\t\tfont-size: 0.75rem;
  5596. \t\t\t\tpadding: 5px 10px;
  5597. \t\t\t\tmax-width: 100%;
  5598. \t\t\t\tline-height: 1.3;
  5599. \t\t\t\tword-break: break-word;
  5600. \t\t\t}
  5602. \t\t\t.shop-info-ebay {
  5603. \t\t\t\ttext-align: center;
  5604. \t\t\t}
  5606. \t\t\t.stat-row {
  5607. \t\t\t\tjustify-content: center;
  5608. \t\t\t\tgap: 10px;
  5609. \t\t\t\tflex-wrap: wrap;
  5610. \t\t\t}
  5611. \t\t\t
  5612. \t\t\t.stat-item-ebay {
  5613. \t\t\t\talign-items: center;
  5614. \t\t\t\tmin-width: 75px;
  5615. \t\t\t\tflex: 0 1 auto;
  5616. \t\t\t\tpadding: 10px 8px;
  5617. \t\t\t}
  5619. \t\t\t.stat-percentage,
  5620. \t\t\t.stat-number-ebay {
  5621. \t\t\t\tfont-size: 1rem;
  5622. \t\t\t\tline-height: 1.1;
  5623. \t\t\t\tword-break: break-word;
  5624. \t\t\t}
  5626. \t\t\t.stat-label-ebay {
  5627. \t\t\t\tfont-size: 0.65rem;
  5628. \t\t\t\ttext-align: center;
  5629. \t\t\t\tline-height: 1.2;
  5630. \t\t\t\tletter-spacing: 0.3px;
  5631. \t\t\t\tword-break: break-word;
  5632. \t\t\t\thyphens: auto;
  5633. \t\t\t}
  5635. \t\t\t.shop-additional-info {
  5636. \t\t\t\tjustify-content: center;
  5637. \t\t\t\tflex-wrap: wrap;
  5638. \t\t\t\tgap: 8px 10px;
  5639. \t\t\t\tfont-size: 0.75rem;
  5640. \t\t\t\tline-height: 1.4;
  5641. \t\t\t}
  5643. \t\t\t.member-since {
  5644. \t\t\t\tflex-direction: row;
  5645. \t\t\t\ttext-align: center;
  5646. \t\t\t\tgap: 4px;
  5647. \t\t\t\twhite-space: normal;
  5648. \t\t\t\tfont-size: 0.75rem;
  5649. \t\t\t\tline-height: 1.4;
  5650. \t\t\t\tpadding: 5px 8px;
  5651. \t\t\t\tword-break: break-word;
  5652. \t\t\t}
  5654. \t\t\t.member-since i {
  5655. \t\t\t\tmargin-right: 4px;
  5656. \t\t\t\tfont-size: 0.85rem;
  5657. \t\t\t\tflex-shrink: 0;
  5658. \t\t\t}
  5660. \t\t\t.shop-actions-ebay {
  5661. \t\t\t\tflex-direction: column;
  5662. \t\t\t\tjustify-content: center;
  5663. \t\t\t\tmin-width: auto;
  5664. \t\t\t\tmargin-top: 20px;
  5665. \t\t\t\twidth: 100%;
  5666. \t\t\t}
  5668. \t\t\t.btn-ebay {
  5669. \t\t\t\twidth: 100%;
  5670. \t\t\t\tmin-width: auto;
  5671. \t\t\t}
  5673. \t\t\t.shop-actions-ebay .d-flex {
  5674. \t\t\t\twidth: 100%;
  5675. \t\t\t}
  5677. \t\t\t.btn-shop,
  5678. \t\t\t.shop-action-btn {
  5679. \t\t\t\twidth: 100%;
  5680. \t\t\t\tmin-width: auto;
  5681. \t\t\t\theight: 45px;
  5682. \t\t\t\tfont-size: 0.9rem;
  5683. \t\t\t\tpadding: 12px 20px;
  5684. \t\t\t}
  5686. \t\t\t.shop-tabs-nav {
  5687. \t\t\t\tflex-wrap: wrap;
  5688. \t\t\t\tjustify-content: center;
  5689. \t\t\t}
  5690. \t\t\t
  5691. \t\t\t.shop-tab-link {
  5692. \t\t\t\tfont-size: 0.85rem;
  5693. \t\t\t\tpadding: 0.5rem 0.75rem;
  5694. \t\t\t\tflex: 1;
  5695. \t\t\t\tmin-width: auto;
  5696. \t\t\t}
  5697. \t\t\t
  5698. \t\t\t/* Produits responsive */
  5699. \t\t\t#products-container .product-item {
  5700. \t\t\t\tmargin-bottom: 20px;
  5701. \t\t\t}
  5702. \t\t\t
  5703. \t\t\t.product-card {
  5704. \t\t\t\tpadding: 15px;
  5705. \t\t\t}
  5706. \t\t\t
  5707. \t\t\t.product-title {
  5708. \t\t\t\tfont-size: 0.95rem;
  5709. \t\t\t}
  5710. \t\t\t
  5711. \t\t\t.product-price {
  5712. \t\t\t\tfont-size: 1.1rem;
  5713. \t\t\t}
  5714. \t\t\t
  5715. \t\t\t/* Détails de la boutique responsive */
  5716. \t\t\t.shop-info-ebay {
  5717. \t\t\t\ttext-align: center;
  5718. \t\t\t}
  5719. \t\t}
  5720. \t\t
  5721. \t\t@media(max-width: 575.98px) {
  5722. \t\t\t.shop-banner,
  5723. \t\t\t.shop-carousel-ebay {
  5724. \t\t\t\theight: 280px;
  5725. \t\t\t\tmargin: 0;
  5726. \t\t\t}
  5727. \t\t\t
  5728. \t\t\t.carousel-controls-ebay {
  5729. \t\t\t\tbottom: 10px;
  5730. \t\t\t\tright: 10px;
  5731. \t\t\t\tgap: 6px;
  5732. \t\t\t}
  5733. \t\t\t
  5734. \t\t\t.carousel-btn-ebay {
  5735. \t\t\t\twidth: 36px;
  5736. \t\t\t\theight: 36px;
  5737. \t\t\t\tfont-size: 14px;
  5738. \t\t\t}
  5739. \t\t\t
  5740. \t\t\t.carousel-btn-ebay #pauseIcon,
  5741. \t\t\t.carousel-btn-ebay .pause-icon-content {
  5742. \t\t\t\tfont-size: 16px !important;
  5743. \t\t\t}
  5744. \t\t\t
  5745. \t\t\t.carousel-indicators-ebay {
  5746. \t\t\t\tbottom: 10px;
  5747. \t\t\t\tleft: 50%;
  5748. \t\t\t\ttransform: translateX(-50%);
  5749. \t\t\t\tpadding: 4px 8px;
  5750. \t\t\t\tgap: 5px;
  5751. \t\t\t}
  5752. \t\t\t
  5753. \t\t\t.carousel-indicator-ebay {
  5754. \t\t\t\twidth: 7px;
  5755. \t\t\t\theight: 7px;
  5756. \t\t\t}
  5757. \t\t\t
  5758. \t\t\t.shop-header-content {
  5759. \t\t\t\tmargin: 0;
  5760. \t\t\t\tpadding: 16px 12px;
  5761. \t\t\t}
  5762. \t\t\t
  5763. \t\t\t.shop-avatar-ebay {
  5764. \t\t\t\twidth: 80px;
  5765. \t\t\t\theight: 80px;
  5766. \t\t\t}
  5767. \t\t\t
  5768. \t\t\t.shop-name-ebay {
  5769. \t\t\t\tfont-size: 1.3rem;
  5770. \t\t\t\tline-height: 1.3;
  5771. \t\t\t\tword-break: break-word;
  5772. \t\t\t\tletter-spacing: -0.1px;
  5773. \t\t\t\thyphens: auto;
  5774. \t\t\t\tmax-width: 100%;
  5775. \t\t\t}
  5777. \t\t\t.shop-name-section {
  5778. \t\t\t\tmargin-bottom: 8px;
  5779. \t\t\t}
  5781. \t\t\t.verified-text {
  5782. \t\t\t\tfont-size: 0.7rem;
  5783. \t\t\t\twhite-space: normal;
  5784. \t\t\t\tline-height: 1.4;
  5785. \t\t\t\tflex-wrap: wrap;
  5786. \t\t\t\tjustify-content: center;
  5787. \t\t\t\tword-break: break-word;
  5788. \t\t\t}
  5790. \t\t\t.verified-text i {
  5791. \t\t\t\tfont-size: 0.75rem;
  5792. \t\t\t\tflex-shrink: 0;
  5793. \t\t\t}
  5795. \t\t\t.shop-category-ebay {
  5796. \t\t\t\tfont-size: 0.65rem;
  5797. \t\t\t\tpadding: 4px 8px;
  5798. \t\t\t\tmax-width: 100%;
  5799. \t\t\t\tline-height: 1.3;
  5800. \t\t\t\tword-break: break-word;
  5801. \t\t\t}
  5802. \t\t\t
  5803. \t\t\t.stat-row {
  5804. \t\t\t\tgap: 6px;
  5805. \t\t\t\tflex-direction: row;
  5806. \t\t\t\tjustify-content: space-around;
  5807. \t\t\t}
  5808. \t\t\t
  5809. \t\t\t.stat-item-ebay {
  5810. \t\t\t\tflex: 1;
  5811. \t\t\t\tmin-width: 0;
  5812. \t\t\t\talign-items: center;
  5813. \t\t\t\tpadding: 8px 4px;
  5814. \t\t\t}
  5816. \t\t\t.stat-percentage,
  5817. \t\t\t.stat-number-ebay {
  5818. \t\t\t\tfont-size: 0.95rem;
  5819. \t\t\t\tline-height: 1.1;
  5820. \t\t\t\tword-break: break-word;
  5821. \t\t\t}
  5823. \t\t\t.stat-label-ebay {
  5824. \t\t\t\tfont-size: 0.6rem;
  5825. \t\t\t\ttext-align: center;
  5826. \t\t\t\tline-height: 1.2;
  5827. \t\t\t\tletter-spacing: 0.2px;
  5828. \t\t\t\tpadding: 0 2px;
  5829. \t\t\t\tword-break: break-word;
  5830. \t\t\t\thyphens: auto;
  5831. \t\t\t}
  5833. \t\t\t.shop-additional-info {
  5834. \t\t\t\tflex-direction: column;
  5835. \t\t\t\tgap: 8px;
  5836. \t\t\t\tfont-size: 0.7rem;
  5837. \t\t\t\talign-items: center;
  5838. \t\t\t\tline-height: 1.5;
  5839. \t\t\t}
  5841. \t\t\t.member-since {
  5842. \t\t\t\tfont-size: 0.7rem;
  5843. \t\t\t\tpadding: 4px 8px;
  5844. \t\t\t\tline-height: 1.4;
  5845. \t\t\t\tword-break: break-word;
  5846. \t\t\t\ttext-align: center;
  5847. \t\t\t\twidth: 100%;
  5848. \t\t\t\tmax-width: 100%;
  5849. \t\t\t\tjustify-content: center;
  5850. \t\t\t\twhite-space: normal;
  5851. \t\t\t}
  5853. \t\t\t.member-since i {
  5854. \t\t\t\tfont-size: 0.8rem;
  5855. \t\t\t\tmargin-right: 3px;
  5856. \t\t\t\tflex-shrink: 0;
  5857. \t\t\t}
  5859. \t\t\t.btn-ebay {
  5860. \t\t\t\tfont-size: 0.8rem;
  5861. \t\t\t\tpadding: 10px 14px;
  5862. \t\t\t\tline-height: 1.3;
  5863. \t\t\t}
  5865. \t\t\t.member-since i {
  5866. \t\t\t\tmargin-right: 4px;
  5867. \t\t\t\tfont-size: 0.8rem;
  5868. \t\t\t}
  5869. \t\t\t
  5870. \t\t\t.btn-ebay {
  5871. \t\t\t\tfont-size: 0.85rem;
  5872. \t\t\t\tpadding: 10px 16px;
  5873. \t\t\t}
  5874. \t\t\t
  5875. \t\t\t.member-since {
  5876. \t\t\t\tfont-size: 0.75rem;
  5877. \t\t\t}
  5878. \t\t\t
  5879. \t\t\t.shop-tab-content {
  5880. \t\t\t\tpadding: 15px 10px;
  5881. \t\t\t}
  5883. \t\t\t.shop-stats-row {
  5884. \t\t\t\tflex-direction: column;
  5885. \t\t\t\tgap: 10px;
  5886. \t\t\t\talign-items: flex-start;
  5887. \t\t\t}
  5888. \t\t}
  5890. \t\t.follow-button {
  5891. \t\t\tbackground: #ffa200;
  5892. \t\t\tborder: none;
  5893. \t\t\tcolor: white;
  5894. \t\t\tpadding: 12px 30px;
  5895. \t\t\tborder-radius: 25px;
  5896. \t\t\tfont-weight: 600;
  5897. \t\t\ttransition: all 0.3s ease;
  5898. \t\t\tcursor: pointer;
  5899. \t\t\tdisplay: inline-flex;
  5900. \t\t\talign-items: center;
  5901. \t\t\tgap: 8px;
  5902. \t\t}
  5904. \t\t.follow-button:hover {
  5905. \t\t\tbackground: #e8910a;
  5906. \t\t\ttransform: translateY(-2px);
  5907. \t\t\tbox-shadow: 0 5px 15px rgba(255, 162, 0, 0.3);
  5908. \t\t}
  5910. \t\t.follow-button.following {
  5911. \t\t\tbackground: #28a745;
  5912. \t\t}
  5914. \t\t.follow-button.following:hover {
  5915. \t\t\tbackground: #218838;
  5916. \t\t}
  5918. \t\t.follow-button:disabled {
  5919. \t\t\topacity: 0.6;
  5920. \t\t\tcursor: not-allowed;
  5921. \t\t\ttransform: none;
  5922. \t\t}
  5924. \t\t.follow-stats {
  5925. \t\t\tdisplay: flex;
  5926. \t\t\tgap: 30px;
  5927. \t\t\tmargin-top: 20px;
  5928. \t\t\tflex-wrap: wrap;
  5929. \t\t}
  5931. \t\t.follow-stat {
  5932. \t\t\ttext-align: center;
  5933. \t\t\tpadding: 15px;
  5934. \t\t\tbackground: #f8f9fa;
  5935. \t\t\tborder-radius: 10px;
  5936. \t\t\tmin-width: 120px;
  5937. \t\t}
  5939. \t\t.follow-stat-number {
  5940. \t\t\tfont-size: 1.8rem;
  5941. \t\t\tfont-weight: bold;
  5942. \t\t\tcolor: #ffa200;
  5943. \t\t\tdisplay: block;
  5944. \t\t}
  5946. \t\t.follow-stat-label {
  5947. \t\t\tcolor: #666;
  5948. \t\t\tfont-size: 0.9rem;
  5949. \t\t\ttext-transform: uppercase;
  5950. \t\t\tletter-spacing: 0.5px;
  5951. \t\t}
  5953. \t\t.shop-actions {
  5954. \t\t\tdisplay: flex;
  5955. \t\t\tgap: 15px;
  5956. \t\t\talign-items: center;
  5957. \t\t\tflex-wrap: wrap;
  5958. \t\t\tmargin-top: 20px;
  5959. \t\t}
  5961. \t\t.action-button {
  5962. \t\t\tbackground: white;
  5963. \t\t\tborder: 2px solid #ffa200;
  5964. \t\t\tcolor: #ffa200;
  5965. \t\t\tpadding: 10px 20px;
  5966. \t\t\tborder-radius: 20px;
  5967. \t\t\ttext-decoration: none;
  5968. \t\t\tfont-weight: 500;
  5969. \t\t\ttransition: all 0.3s ease;
  5970. \t\t\tdisplay: inline-flex;
  5971. \t\t\talign-items: center;
  5972. \t\t\tgap: 8px;
  5973. \t\t}
  5975. \t\t.action-button:hover {
  5976. \t\t\tbackground: #ffa200;
  5977. \t\t\tcolor: white;
  5978. \t\t\ttransform: translateY(-2px);
  5979. \t\t\tbox-shadow: 0 5px 15px rgba(255, 162, 0, 0.3);
  5980. \t\t}
  5982. \t\t.positive-feedback {
  5983. \t\t\tcolor: #28a745;
  5984. \t\t\tfont-weight: bold;
  5985. \t\t}
  5987. \t\t.items-sold {
  5988. \t\t\tcolor: #666;
  5989. \t\t\tfont-size: 0.9rem;
  5990. \t\t}
  5992. \t\t.followers-count {
  5993. \t\t\tcolor: #666;
  5994. \t\t\tfont-size: 0.9rem;
  5995. \t\t}
  5997. \t\t.shop-avatar {
  5998. \t\t\twidth: 120px;
  5999. \t\t\theight: 120px;
  6000. \t\t\tborder-radius: 50%;
  6001. \t\t\tborder: 4px solid white;
  6002. \t\t\tobject-fit: cover;
  6003. \t\t\tmargin-bottom: 20px;
  6004. \t\t}
  6006. \t\t.shop-stats {
  6007. \t\t\tbackground: white;
  6008. \t\t\tborder-radius: 10px;
  6009. \t\t\tpadding: 30px;
  6010. \t\t\tbox-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  6011. \t\t\tmargin-top: -50px;
  6012. \t\t\tposition: relative;
  6013. \t\t\tz-index: 10;
  6014. \t\t}
  6016. \t\t.stat-item {
  6017. \t\t\ttext-align: center;
  6018. \t\t\tpadding: 20px;
  6019. \t\t}
  6021. \t\t.stat-number {
  6022. \t\t\tfont-size: 2.5rem;
  6023. \t\t\tfont-weight: bold;
  6024. \t\t\tcolor: #ffa200;
  6025. \t\t\tdisplay: block;
  6026. \t\t}
  6028. \t\t.stat-label {
  6029. \t\t\tcolor: #666;
  6030. \t\t\tfont-size: 0.9rem;
  6031. \t\t\ttext-transform: uppercase;
  6032. \t\t\tletter-spacing: 1px;
  6033. \t\t}
  6035. \t\t.shop-description {
  6036. \t\t\tbackground: #f8f9fa;
  6037. \t\t\tpadding: 30px;
  6038. \t\t\tborder-radius: 10px;
  6039. \t\t\tmargin-bottom: 40px;
  6040. \t\t}
  6042. \t\t.shop-contact {
  6043. \t\t\tbackground: white;
  6044. \t\t\tborder: 1px solid #e9ecef;
  6045. \t\t\tborder-radius: 10px;
  6046. \t\t\tpadding: 25px;
  6047. \t\t\tmargin-bottom: 40px;
  6048. \t\t}
  6050. \t\t.contact-item {
  6051. \t\t\tdisplay: flex;
  6052. \t\t\talign-items: center;
  6053. \t\t\tmargin-bottom: 15px;
  6054. \t\t}
  6056. \t\t.contact-item i {
  6057. \t\t\tcolor: #ffa200;
  6058. \t\t\tmargin-right: 15px;
  6059. \t\t\twidth: 20px;
  6060. \t\t}
  6062. \t\t.product-card {
  6063. \t\t\tbackground: white;
  6064. \t\t\tborder-radius: 10px;
  6065. \t\t\toverflow: hidden;
  6066. \t\t\tbox-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  6067. \t\t\ttransition: transform 0.3s ease, box-shadow 0.3s ease;
  6068. \t\t\tmargin-bottom: 30px;
  6069. \t\t}
  6071. \t\t.product-card:hover {
  6072. \t\t\ttransform: translateY(-5px);
  6073. \t\t\tbox-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  6074. \t\t}
  6076. \t\t.product-image {
  6077. \t\t\theight: 200px;
  6078. \t\t\tbackground-size: cover;
  6079. \t\t\tbackground-position: center;
  6080. \t\t\tposition: relative;
  6081. \t\t}
  6083. \t\t.product-info {
  6084. \t\t\tpadding: 20px;
  6085. \t\t}
  6087. \t\t.product-title {
  6088. \t\t\tfont-size: 1.1rem;
  6089. \t\t\tfont-weight: 600;
  6090. \t\t\tmargin-bottom: 10px;
  6091. \t\t\tcolor: #333;
  6092. \t\t}
  6094. \t\t.product-price {
  6095. \t\t\tfont-size: 1.3rem;
  6096. \t\t\tfont-weight: bold;
  6097. \t\t\tcolor: #ffa200;
  6098. \t\t\tmargin-bottom: 15px;
  6099. \t\t}
  6101. \t\t.product-meta {
  6102. \t\t\tdisplay: flex;
  6103. \t\t\tjustify-content: space-between;
  6104. \t\t\talign-items: center;
  6105. \t\t\tfont-size: 0.9rem;
  6106. \t\t\tcolor: #666;
  6107. \t\t}
  6109. \t\t.rating {
  6110. \t\t\tcolor: #ffa200;
  6111. \t\t}
  6113. \t\t/* Boutons d'action uniformes */
  6114. \t\t.btn-shop,
  6115. \t\t.shop-action-btn {
  6116. \t\t\tbackground: #ffa200;
  6117. \t\t\tborder: 1px solid #ffa200;
  6118. \t\t\tcolor: white;
  6119. \t\t\tpadding: 12px 24px;
  6120. \t\t\tborder-radius: 6px;
  6121. \t\t\tfont-weight: 500;
  6122. \t\t\tfont-size: 0.9rem;
  6123. \t\t\ttransition: all 0.3s ease;
  6124. \t\t\ttext-decoration: none;
  6125. \t\t\tdisplay: inline-flex;
  6126. \t\t\talign-items: center;
  6127. \t\t\tjustify-content: center;
  6128. \t\t\tgap: 8px;
  6129. \t\t\tmin-width: 120px;
  6130. \t\t\theight: 44px;
  6131. \t\t\twhite-space: nowrap;
  6132. \t\t}
  6134. \t\t.btn-shop:hover,
  6135. \t\t.shop-action-btn:hover {
  6136. \t\t\tbackground: #e8910a;
  6137. \t\t\tborder-color: #e8910a;
  6138. \t\t\tcolor: white;
  6139. \t\t\ttransform: translateY(-1px);
  6140. \t\t\tbox-shadow: 0 4px 12px rgba(255, 162, 0, 0.3);
  6141. \t\t}
  6143. \t\t/* Boutons secondaires */
  6144. \t\t.shop-action-btn.secondary {
  6145. \t\t\tbackground: transparent;
  6146. \t\t\tborder: 1px solid #6c757d;
  6147. \t\t\tcolor: #6c757d;
  6148. \t\t}
  6150. \t\t.shop-action-btn.secondary:hover {
  6151. \t\t\tbackground: #6c757d;
  6152. \t\t\tborder-color: #6c757d;
  6153. \t\t\tcolor: white;
  6154. \t\t\ttransform: translateY(-1px);
  6155. \t\t\tbox-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
  6156. \t\t}
  6158. \t\t/* Responsive */
  6159. \t\t@media(max-width: 768px) {
  6160. \t\t\t.shop-header {
  6161. \t\t\t\tpadding: 100px 0 40px;
  6162. \t\t\t}
  6164. \t\t\t.shop-avatar {
  6165. \t\t\t\twidth: 80px;
  6166. \t\t\t\theight: 80px;
  6167. \t\t\t}
  6169. \t\t\t.shop-stats {
  6170. \t\t\t\tmargin-top: -30px;
  6171. \t\t\t\tpadding: 20px;
  6172. \t\t\t}
  6174. \t\t\t.stat-number {
  6175. \t\t\t\tfont-size: 2rem;
  6176. \t\t\t}
  6177. \t\t}
  6179. \t\t/* Très petits écrans */
  6180. \t\t@media(max-width: 480px) {
  6181. \t\t\t.btn-shop,
  6182. \t\t\t.shop-action-btn {
  6183. \t\t\t\tmin-width: 90px;
  6184. \t\t\t\theight: 38px;
  6185. \t\t\t\tfont-size: 0.8rem;
  6186. \t\t\t\tpadding: 8px 16px;
  6187. \t\t\t}
  6189. \t\t\t.shop-actions-row {
  6190. \t\t\t\tgap: 8px;
  6191. \t\t\t}
  6192. \t\t}
  6194. \t\t/* Styles pour la section des avis */
  6195. \t\t.review-stats-card {
  6196. \t\t\tbackground: white;
  6197. \t\t\tborder-radius: 10px;
  6198. \t\t\tpadding: 20px;
  6199. \t\t\tbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  6200. \t\t\tmargin-bottom: 20px;
  6201. \t\t}
  6203. \t\t.stats-header {
  6204. \t\t\tdisplay: flex;
  6205. \t\t\talign-items: center;
  6206. \t\t\tmargin-bottom: 20px;
  6207. \t\t}
  6209. \t\t.overall-rating {
  6210. \t\t\ttext-align: center;
  6211. \t\t\tmargin-right: 20px;
  6212. \t\t}
  6214. \t\t.rating-number {
  6215. \t\t\tfont-size: 36px;
  6216. \t\t\tfont-weight: bold;
  6217. \t\t\tcolor: #333;
  6218. \t\t\tdisplay: block;
  6219. \t\t}
  6221. \t\t.stars {
  6222. \t\t\tcolor: #ffc107;
  6223. \t\t\tfont-size: 18px;
  6224. \t\t\tmargin-top: 5px;
  6225. \t\t}
  6227. \t\t.rating-summary p {
  6228. \t\t\tmargin: 0;
  6229. \t\t\tcolor: #666;
  6230. \t\t}
  6232. \t\t.rating-breakdown {
  6233. \t\t\tmargin-top: 15px;
  6234. \t\t}
  6236. \t\t.rating-bar {
  6237. \t\t\tdisplay: flex;
  6238. \t\t\talign-items: center;
  6239. \t\t\tmargin-bottom: 8px;
  6240. \t\t}
  6242. \t\t.rating-label {
  6243. \t\t\twidth: 40px;
  6244. \t\t\tfont-size: 14px;
  6245. \t\t\tcolor: #666;
  6246. \t\t}
  6248. \t\t.rating-progress {
  6249. \t\t\tflex: 1;
  6250. \t\t\theight: 6px;
  6251. \t\t\tbackground: #e9ecef;
  6252. \t\t\tborder-radius: 3px;
  6253. \t\t\tmargin: 0 10px;
  6254. \t\t\toverflow: hidden;
  6255. \t\t}
  6257. \t\t.rating-fill {
  6258. \t\t\theight: 100%;
  6259. \t\t\tbackground: linear-gradient(45deg, #ffc107, #ff8c00);
  6260. \t\t\ttransition: width 0.3s ease;
  6261. \t\t}
  6263. \t\t.rating-count {
  6264. \t\t\twidth: 30px;
  6265. \t\t\ttext-align: right;
  6266. \t\t\tfont-size: 14px;
  6267. \t\t\tcolor: #666;
  6268. \t\t}
  6270. \t\t.reviews-preview {
  6271. \t\t\tbackground: white;
  6272. \t\t\tborder-radius: 10px;
  6273. \t\t\tpadding: 20px;
  6274. \t\t\tbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  6275. \t\t}
  6277. \t\t.review-card-preview {
  6278. \t\t\tborder-bottom: 1px solid #f0f0f0;
  6279. \t\t\tpadding-bottom: 15px;
  6280. \t\t\tmargin-bottom: 15px;
  6281. \t\t}
  6283. \t\t.review-card-preview:last-child {
  6284. \t\t\tborder-bottom: none;
  6285. \t\t\tmargin-bottom: 0;
  6286. \t\t}
  6288. \t\t.review-header {
  6289. \t\t\tdisplay: flex;
  6290. \t\t\tjustify-content: space-between;
  6291. \t\t\talign-items: center;
  6292. \t\t\tmargin-bottom: 10px;
  6293. \t\t}
  6295. \t\t.review-user {
  6296. \t\t\tdisplay: flex;
  6297. \t\t\talign-items: center;
  6298. \t\t}
  6300. \t\t.user-avatar {
  6301. \t\t\twidth: 35px;
  6302. \t\t\theight: 35px;
  6303. \t\t\tborder-radius: 50%;
  6304. \t\t\tbackground: linear-gradient(45deg, #667eea, #764ba2);
  6305. \t\t\tdisplay: flex;
  6306. \t\t\talign-items: center;
  6307. \t\t\tjustify-content: center;
  6308. \t\t\tcolor: white;
  6309. \t\t\tfont-weight: bold;
  6310. \t\t\tmargin-right: 10px;
  6311. \t\t}
  6313. \t\t.user-info h6 {
  6314. \t\t\tmargin: 0;
  6315. \t\t\tfont-size: 14px;
  6316. \t\t\tfont-weight: 600;
  6317. \t\t\tcolor: #333;
  6318. \t\t}
  6320. \t\t.user-info small {
  6321. \t\t\tcolor: #666;
  6322. \t\t\tfont-size: 12px;
  6323. \t\t}
  6325. \t\t.review-rating {
  6326. \t\t\tdisplay: flex;
  6327. \t\t\talign-items: center;
  6328. \t\t\tgap: 5px;
  6329. \t\t}
  6331. \t\t.verified-badge {
  6332. \t\t\tbackground: #28a745;
  6333. \t\t\tcolor: white;
  6334. \t\t\tpadding: 2px 4px;
  6335. \t\t\tborder-radius: 3px;
  6336. \t\t\tfont-size: 10px;
  6337. \t\t\tfont-weight: bold;
  6338. \t\t}
  6340. \t\t.review-content {
  6341. \t\t\tcolor: #666;
  6342. \t\t\tfont-size: 14px;
  6343. \t\t\tline-height: 1.5;
  6344. \t\t}
  6346. \t\t.empty-reviews {
  6347. \t\t\ttext-align: center;
  6348. \t\t\tpadding: 40px 20px;
  6349. \t\t\tcolor: #666;
  6350. \t\t}
  6352. \t\t.empty-reviews i {
  6353. \t\t\tfont-size: 48px;
  6354. \t\t\tcolor: #ddd;
  6355. \t\t\tmargin-bottom: 15px;
  6356. \t\t}
  6358. \t\t.empty-reviews h4 {
  6359. \t\t\tcolor: #333;
  6360. \t\t\tmargin-bottom: 10px;
  6361. \t\t}
  6363. \t\t.section-title h2 {
  6364. \t\t\tcolor: #333;
  6365. \t\t\tmargin-bottom: 10px;
  6366. \t\t}
  6368. \t\t.section-title p {
  6369. \t\t\tcolor: #666;
  6370. \t\t\tmargin-bottom: 30px;
  6371. \t\t}
  6373. \t\t@media(max-width: 768px) {
  6374. \t\t\t.stats-header {
  6375. \t\t\t\tflex-direction: column;
  6376. \t\t\t\ttext-align: center;
  6377. \t\t\t}
  6379. \t\t\t.overall-rating {
  6380. \t\t\t\tmargin-right: 0;
  6381. \t\t\t\tmargin-bottom: 15px;
  6382. \t\t\t}
  6384. \t\t\t.review-header {
  6385. \t\t\t\tflex-direction: column;
  6386. \t\t\t\talign-items: flex-start;
  6387. \t\t\t}
  6389. \t\t\t.review-rating {
  6390. \t\t\t\tmargin-top: 5px;
  6391. \t\t\t}
  6392. \t\t}
  6393. \t</style>
  6394. {% endblock %}
  6396. {% block body %}
  6398. \t<!-- Shop Header eBay-style avec Karma - Pleine largeur -->
  6399. \t<section
  6400. \t\tclass=\"shop-header\">
  6401. \t\t<!-- Carrousel eBay-style -->
  6402. \t\t<div class=\"shop-carousel-ebay\">
  6403. \t\t\t<div class=\"carousel-container\">
  6404. \t\t\t\t{% set allBannerImages = shop.getAllBannerImages() %}
  6405. \t\t\t\t{% if allBannerImages|length > 0 %}
  6406. \t\t\t\t\t{% for image in allBannerImages %}
  6407. \t\t\t\t\t\t<div class=\"carousel-slide {% if loop.first %}active{% endif %}\" style=\"background-image: url('{{ asset(image) }}')\">
  6408. \t\t\t\t\t\t\t<div class=\"shop-banner-overlay\"></div>
  6409. \t\t\t\t\t\t</div>
  6410. \t\t\t\t\t{% endfor %}
  6411. \t\t\t\t{% else %}
  6412. \t\t\t\t\t<!-- Slide par défaut avec dégradé si aucune image de bannière -->
  6413. \t\t\t\t\t<div class=\"carousel-slide active\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);\">
  6414. \t\t\t\t\t\t<div class=\"shop-banner-overlay\"></div>
  6415. \t\t\t\t\t</div>
  6416. \t\t\t\t{% endif %}
  6417. \t\t\t</div>
  6419. \t\t\t<!-- Contrôles eBay-style améliorés - toujours affichés si plusieurs images -->
  6420. \t\t\t{% set totalBannerImages = allBannerImages|length %}
  6421. \t\t\t{% if totalBannerImages > 1 %}
  6422. \t\t\t\t<div class=\"carousel-controls-ebay\">
  6423. \t\t\t\t\t<button class=\"carousel-btn-ebay prev-btn\" onclick=\"previousSlide()\" id=\"prevBtn\" title=\"Image précédente\" aria-label=\"Image précédente\">
  6424. \t\t\t\t\t\t<i class=\"lnr lnr-chevron-left\"></i>
  6425. \t\t\t\t\t</button>
  6426. \t\t\t\t\t<button class=\"carousel-btn-ebay pause-btn\" onclick=\"toggleCarousel()\" id=\"pauseBtn\" title=\"Pause/Reprendre\" aria-label=\"Pause/Reprendre\">
  6427. \t\t\t\t\t\t<span id=\"pauseIcon\" class=\"pause-icon-content\">⏸</span>
  6428. \t\t\t\t\t</button>
  6429. \t\t\t\t\t<button class=\"carousel-btn-ebay next-btn\" onclick=\"nextSlide()\" id=\"nextBtn\" title=\"Image suivante\" aria-label=\"Image suivante\">
  6430. \t\t\t\t\t\t<i class=\"lnr lnr-chevron-right\"></i>
  6431. \t\t\t\t\t</button>
  6432. \t\t\t\t</div>
  6434. \t\t\t\t<!-- Indicateurs eBay-style améliorés -->
  6435. \t\t\t\t<div class=\"carousel-indicators-ebay\">
  6436. \t\t\t\t\t{% for image in allBannerImages %}
  6437. \t\t\t\t\t\t<button class=\"carousel-indicator-ebay {% if loop.first %}active{% endif %}\" onclick=\"goToSlide({{ loop.index0 }})\" title=\"Image {{ loop.index }}\" aria-label=\"Aller à l'image {{ loop.index }}\"></button>
  6438. \t\t\t\t\t{% endfor %}
  6439. \t\t\t\t</div>
  6440. \t\t\t{% endif %}
  6441. \t\t</div>
  6443. \t\t<!-- Contenu de la boutique eBay-style -->
  6444. \t\t<div class=\"shop-header-content\">
  6445. \t\t\t<div class=\"row g-3 g-md-4 align-items-start align-items-md-center\">
  6446. \t\t\t\t<!-- Logo de la boutique -->
  6447. \t\t\t\t<div class=\"col-12 col-md-auto text-center text-md-start\">
  6448. \t\t\t\t\t<div class=\"shop-avatar-container-ebay\">
  6449. \t\t\t\t\t\t{% if shop.logo %}
  6450. \t\t\t\t\t\t\t<img src=\"{{ asset(shop.logo) }}\" alt=\"{{ shop.name }}\" class=\"shop-avatar-ebay\">
  6451. \t\t\t\t\t\t{% else %}
  6452. \t\t\t\t\t\t\t<div class=\"shop-avatar-ebay shop-avatar-placeholder\">
  6453. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\"></i>
  6454. \t\t\t\t\t\t\t</div>
  6455. \t\t\t\t\t\t{% endif %}
  6456. \t\t\t\t\t\t{% if shop.isVerified %}
  6457. \t\t\t\t\t\t\t<div class=\"verified-badge-ebay\">
  6458. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  6459. \t\t\t\t\t\t\t</div>
  6460. \t\t\t\t\t\t{% endif %}
  6461. \t\t\t\t\t</div>
  6462. \t\t\t\t</div>
  6464. \t\t\t\t<!-- Informations principales -->
  6465. \t\t\t\t<div class=\"col-12 col-md\">
  6466. \t\t\t\t\t<div class=\"shop-info-ebay\">
  6467. \t\t\t\t\t\t<!-- Nom de la boutique -->
  6468. \t\t\t\t\t\t<div class=\"shop-name-section mb-2\">
  6469. \t\t\t\t\t\t\t<h1 class=\"shop-name-ebay mb-1\">{{ shop.name }}</h1>
  6470. \t\t\t\t\t\t\t<div class=\"d-flex flex-wrap align-items-center gap-2\">
  6471. \t\t\t\t\t\t\t{% if shop.isVerified %}
  6472. \t\t\t\t\t\t\t\t<span class=\"verified-text\">
  6473. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle me-1\"></i>Vendeur vérifié
  6474. \t\t\t\t\t\t\t\t</span>
  6475. \t\t\t\t\t\t\t{% endif %}
  6476. \t\t\t\t\t\t{% if shop.shopCategory %}
  6477. \t\t\t\t\t\t\t\t<span class=\"shop-category-ebay\">{{ shop.shopCategory.name }}</span>
  6478. \t\t\t\t\t\t{% endif %}
  6479. \t\t\t\t\t\t\t</div>
  6480. \t\t\t\t\t\t</div>
  6482. \t\t\t\t\t\t<!-- Statistiques principales -->
  6483. \t\t\t\t\t\t<div class=\"shop-stats-ebay\">
  6484. \t\t\t\t\t\t\t<div class=\"stat-row mb-2\">
  6485. \t\t\t\t\t\t\t\t{% if shop.averageRating > 0 %}
  6486. \t\t\t\t\t\t\t\t\t<div class=\"stat-item-ebay\">
  6487. \t\t\t\t\t\t\t\t\t\t<span class=\"stat-percentage\">{{ shop.averageRating|number_format(1) }}%</span>
  6488. \t\t\t\t\t\t\t\t\t\t<span class=\"stat-label-ebay\">Évaluations positives</span>
  6489. \t\t\t\t\t\t\t\t\t</div>
  6490. \t\t\t\t\t\t\t\t{% endif %}
  6492. \t\t\t\t\t\t\t\t{% if stats.totalProductSales > 0 %}
  6493. \t\t\t\t\t\t\t\t\t<div class=\"stat-item-ebay\">
  6494. \t\t\t\t\t\t\t\t\t\t<span class=\"stat-number-ebay\">{{ stats.totalProductSales|number_format }}</span>
  6495. \t\t\t\t\t\t\t\t\t\t<span class=\"stat-label-ebay\">Articles vendus</span>
  6496. \t\t\t\t\t\t\t\t\t</div>
  6497. \t\t\t\t\t\t\t\t{% endif %}
  6499. \t\t\t\t\t\t\t\t{% if followStats.active_follows > 0 %}
  6500. \t\t\t\t\t\t\t\t\t<div class=\"stat-item-ebay\">
  6501. \t\t\t\t\t\t\t\t\t\t<span class=\"stat-number-ebay\">{{ followStats.active_follows|number_format }}</span>
  6502. \t\t\t\t\t\t\t\t\t\t<span class=\"stat-label-ebay\">Suiveurs</span>
  6503. \t\t\t\t\t\t\t\t\t</div>
  6504. \t\t\t\t\t\t\t\t{% endif %}
  6505. \t\t\t\t\t\t\t</div>
  6507. \t\t\t\t\t\t\t<!-- Informations supplémentaires -->
  6508. \t\t\t\t\t\t\t<div class=\"shop-additional-info\">
  6509. \t\t\t\t\t\t\t\t<div class=\"d-flex flex-wrap gap-3 gap-md-4\">
  6510. \t\t\t\t\t\t\t\t\t{% if shop.averageRating > 0 %}
  6511. \t\t\t\t\t\t\t\t\t\t<span class=\"member-since\">
  6512. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-thumbs-up me-1\"></i>
  6513. \t\t\t\t\t\t\t\t\t\t\t{{ shop.averageRating|number_format(1) }}% positive feedback
  6514. \t\t\t\t\t\t\t\t\t\t</span>
  6515. \t\t\t\t\t\t\t\t\t{% endif %}
  6516. \t\t\t\t\t\t\t\t\t{% if stats.totalProductSales > 0 %}
  6517. \t\t\t\t\t\t\t\t\t\t<span class=\"member-since\">
  6518. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-cart me-1\"></i>
  6519. \t\t\t\t\t\t\t\t\t\t\t{{ stats.totalProductSales|number_format }} produit{{ stats.totalProductSales > 1 ? 's' : '' }} vendu{{ stats.totalProductSales > 1 ? 's' : '' }}
  6520. \t\t\t\t\t\t\t\t\t\t</span>
  6521. \t\t\t\t\t\t\t\t\t{% endif %}
  6522. \t\t\t\t\t\t\t\t\t<span class=\"member-since\">
  6523. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-history me-1\"></i>
  6524. \t\t\t\t\t\t\t\t\t\tCréé depuis {{ shop.createdAt|date('M Y') }}
  6525. \t\t\t\t\t\t\t\t\t</span>
  6526. \t\t\t\t\t\t\t\t</div>
  6527. \t\t\t\t\t\t\t</div>
  6528. \t\t\t\t\t\t</div>
  6529. \t\t\t\t\t</div>
  6530. \t\t\t\t</div>
  6532. \t\t\t\t<!-- Actions eBay-style -->
  6533. \t\t\t\t<div class=\"col-12 col-md-auto\">
  6534. \t\t\t\t\t<div class=\"shop-actions-ebay\">
  6535. \t\t\t\t\t\t{% if app.user %}
  6536. \t\t\t\t\t\t\t<button id=\"follow-button\" class=\"btn btn-primary btn-ebay w-100 {% if isFollowing %}following{% endif %}\" data-shop-id=\"{{ shop.id }}\" data-following=\"{{ isFollowing ? 'true' : 'false' }}\">
  6537. \t\t\t\t\t\t\t\t<span id=\"follow-text\">
  6538. \t\t\t\t\t\t\t\t\t{% if isFollowing %}
  6539. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle me-1\"></i> Suivi
  6540. \t\t\t\t\t\t\t\t\t{% else %}
  6541. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-plus me-1\"></i> Suivre
  6542. \t\t\t\t\t\t\t\t\t{% endif %}
  6543. \t\t\t\t\t\t\t\t</span>
  6544. \t\t\t\t\t\t\t</button>
  6545. \t\t\t\t\t\t{% else %}
  6546. \t\t\t\t\t\t\t<a href=\"{{ path('ui_app_login') }}\" class=\"btn btn-primary btn-ebay w-100\">
  6547. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-user me-1\"></i> Se connecter pour suivre
  6548. \t\t\t\t\t\t\t</a>
  6549. \t\t\t\t\t\t{% endif %}
  6551. \t\t\t\t\t\t<div class=\"d-flex gap-2 mt-2\">
  6552. \t\t\t\t\t\t\t<button class=\"btn btn-outline-secondary btn-ebay flex-fill\" onclick=\"shareShop()\" title=\"Partager\">
  6553. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-bubble\"></i>
  6554. \t\t\t\t\t\t\t\t<span class=\"d-none d-md-inline ms-1\">Partager</span>
  6555. \t\t\t\t\t\t</button>
  6557. \t\t\t\t\t\t\t<button class=\"btn btn-outline-danger btn-ebay flex-fill\" onclick=\"reportShop()\" title=\"Signaler\">
  6558. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-flag\"></i>
  6559. \t\t\t\t\t\t\t\t<span class=\"d-none d-md-inline ms-1\">Signaler</span>
  6560. \t\t\t\t\t\t</button>
  6561. \t\t\t\t\t\t</div>
  6563. \t\t\t\t\t\t{% if canEdit %}
  6564. \t\t\t\t\t\t\t<a href=\"{{ path('seller_shop_edit', {slug: shop.slug}) }}\" class=\"btn btn-outline-primary btn-ebay w-100 mt-2\">
  6565. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-pencil me-1\"></i> Modifier la boutique
  6566. \t\t\t\t\t\t\t</a>
  6567. \t\t\t\t\t\t{% endif %}
  6568. \t\t\t\t\t</div>
  6569. \t\t\t\t</div>
  6570. \t\t\t</div>
  6571. \t\t</div>
  6572. \t</section>
  6574. \t<!-- Shop Tabs eBay-style avec Karma -->
  6575. \t<section class=\"container\">
  6576. \t\t<div class=\"shop-tabs\">
  6577. \t\t\t<ul class=\"nav nav-tabs shop-tabs-nav\" role=\"tablist\">
  6578. \t\t\t\t<li class=\"nav-item shop-tab\">
  6579. \t\t\t\t\t<a href=\"#shop-items\" class=\"nav-link shop-tab-link active\" data-tab=\"items\" role=\"tab\">
  6580. \t\t\t\t\t\tBoutique
  6581. \t\t\t\t\t</a>
  6582. \t\t\t\t</li>
  6583. \t\t\t\t<li class=\"nav-item shop-tab\">
  6584. \t\t\t\t\t<a href=\"#shop-sale\" class=\"nav-link shop-tab-link\" data-tab=\"sale\" role=\"tab\">
  6585. \t\t\t\t\t\tPromotions
  6586. \t\t\t\t\t</a>
  6587. \t\t\t\t</li>
  6588. \t\t\t\t<li class=\"nav-item shop-tab\">
  6589. \t\t\t\t\t<a href=\"#shop-about\" class=\"nav-link shop-tab-link\" data-tab=\"about\" role=\"tab\">
  6590. \t\t\t\t\t\tÀ propos
  6591. \t\t\t\t\t</a>
  6592. \t\t\t\t</li>
  6593. \t\t\t\t<li class=\"nav-item shop-tab\">
  6594. \t\t\t\t\t<a href=\"#shop-feedback\" class=\"nav-link shop-tab-link\" data-tab=\"feedback\" role=\"tab\">
  6595. \t\t\t\t\t\tAvis ({{ shop.getVisibleReviewsCount() }})
  6596. \t\t\t\t\t</a>
  6597. \t\t\t\t</li>
  6598. \t\t\t</ul>
  6600. \t\t\t<!-- Tab Content: Shop Items avec Karma -->
  6601. \t\t\t<div id=\"shop-items\" class=\"tab-content shop-tab-content active\">
  6602. \t\t\t\t<div class=\"row\">
  6603. \t\t\t\t\t<div class=\"col-lg-12\">
  6604. \t\t\t\t\t\t<div class=\"d-flex justify-content-between align-items-center mb-4\">
  6605. \t\t\t\t\t\t\t<h4 class=\"mb-0\">Produits de
  6606. \t\t\t\t\t\t\t\t{{ shop.name }}</h4>
  6607. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center gap-3\">
  6608. \t\t\t\t\t\t\t\t<span style=\"font-size: 2rem; font-weight: 600; min-width: 100px; display: inline-block; text-align: center;\">
  6609. \t\t\t\t\t\t\t\t\t<span class=\"product-count\">{{ products|length|number_format }}</span>
  6611. \t\t\t\t\t\t\t\t\t<span style=\"font-size: 1rem; font-weight: 400;\">produits</span>
  6612. \t\t\t\t\t\t\t\t</span>
  6613. \t\t\t\t\t\t\t\t<select class=\"form-select\" id=\"product-sort\" style=\"width: auto;\" onchange=\"if(window.sortProducts) window.sortProducts(this.value);\">
  6614. \t\t\t\t\t\t\t\t\t<option value=\"\">Trier par</option>
  6615. \t\t\t\t\t\t\t\t\t<option value=\"price_asc\">Prix : Croissant</option>
  6616. \t\t\t\t\t\t\t\t\t<option value=\"price_desc\">Prix : Décroissant</option>
  6617. \t\t\t\t\t\t\t\t\t<option value=\"newest\">Plus récents</option>
  6618. \t\t\t\t\t\t\t\t\t<option value=\"popular\">Plus populaires</option>
  6619. \t\t\t\t\t\t\t\t\t<option value=\"name_asc\">Nom : A-Z</option>
  6620. \t\t\t\t\t\t\t\t\t<option value=\"name_desc\">Nom : Z-A</option>
  6621. \t\t\t\t\t\t\t\t</select>
  6622. \t\t\t\t\t\t\t</div>
  6623. \t\t\t\t\t\t</div>
  6625. \t\t\t\t\t\t{% if products|length > 0 %}
  6626. \t\t\t\t\t\t\t<div class=\"row\" id=\"products-container\">
  6627. \t\t\t\t\t\t\t\t{% for product in products %}
  6628. \t\t\t\t\t\t\t\t\t<div class=\"col-lg-3 col-md-4 col-sm-6 mb-4 product-item\" data-price=\"{{ product.price }}\" data-name=\"{{ product.name|lower }}\" data-views=\"{{ product.viewCount ?? 0 }}\" data-created=\"{{ product.publishedAt|date('Y-m-d') }}\">
  6629. \t\t\t\t\t\t\t\t\t\t<div class=\"product-card\">
  6630. \t\t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_product_show', { slug: product.slug }) }}\">
  6631. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"product-image\" style=\"background-image: url('{% if product.images is defined and product.images|length > 0 %}{{ asset(product.images[0]) }}{% else %}{{ asset('ui/img/product/p1.jpg') }}{% endif %}')\"></div>
  6632. \t\t\t\t\t\t\t\t\t\t\t</a>
  6633. \t\t\t\t\t\t\t\t\t\t\t<div class=\"product-info\">
  6634. \t\t\t\t\t\t\t\t\t\t\t\t<h6 class=\"product-title\">
  6635. \t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_product_show', { slug: product.slug }) }}\" class=\"text-decoration-none\">
  6636. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ product.name }}
  6637. \t\t\t\t\t\t\t\t\t\t\t\t\t</a>
  6638. \t\t\t\t\t\t\t\t\t\t\t\t</h6>
  6639. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"product-price\">{{ product.price|number_format(2, '.', ' ') }}
  6640. \t\t\t\t\t\t\t\t\t\t\t\t\tHTG</div>
  6641. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"product-meta\">
  6642. \t\t\t\t\t\t\t\t\t\t\t\t\t<span>
  6643. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{% if product.averageRating %}
  6644. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"rating\">
  6645. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{% for i in 1..5 %}
  6646. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-star{% if i <= product.averageRating %}{% else %}-o{% endif %}\"></i>
  6647. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{% endfor %}
  6648. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>
  6649. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6650. \t\t\t\t\t\t\t\t\t\t\t\t\t</span>
  6651. \t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"text-muted\">{{ product.viewCount ?? 0 }}
  6652. \t\t\t\t\t\t\t\t\t\t\t\t\t\tvues</span>
  6653. \t\t\t\t\t\t\t\t\t\t\t\t</div>
  6654. \t\t\t\t\t\t\t\t\t\t\t</div>
  6655. \t\t\t\t\t\t\t\t\t\t</div>
  6656. \t\t\t\t\t\t\t\t\t</div>
  6657. \t\t\t\t\t\t\t\t{% endfor %}
  6658. \t\t\t\t\t\t\t</div>
  6659. \t\t\t\t\t\t{% else %}
  6660. \t\t\t\t\t\t\t<div class=\"text-center py-5\">
  6661. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-package\" style=\"font-size: 4rem; color: #ccc;\"></i>
  6662. \t\t\t\t\t\t\t\t<h4 class=\"mt-3\">Aucun produit disponible</h4>
  6663. \t\t\t\t\t\t\t\t<p class=\"text-muted\">Cette boutique n'a pas encore de produits en vente.</p>
  6664. \t\t\t\t\t\t\t</div>
  6665. \t\t\t\t\t\t{% endif %}
  6666. \t\t\t\t\t</div>
  6668. \t\t\t\t</div>
  6669. \t\t\t</div>
  6671. \t\t\t<!-- Tab Content: Sale avec Karma -->
  6672. \t\t\t<div id=\"shop-sale\" class=\"tab-content shop-tab-content\">
  6673. \t\t\t\t<div class=\"text-center py-5\">
  6674. \t\t\t\t\t<i class=\"lnr lnr-tag\" style=\"font-size: 4rem; color: #ccc;\"></i>
  6675. \t\t\t\t\t<h4 class=\"mt-3\">Aucune promotion actuellement</h4>
  6676. \t\t\t\t\t<p class=\"text-muted\">Cette boutique n'a pas de promotions actives pour le moment.</p>
  6677. \t\t\t\t</div>
  6678. \t\t\t</div>
  6680. \t\t\t<!-- Tab Content: About avec Karma -->
  6681. \t\t\t<div id=\"shop-about\" class=\"tab-content shop-tab-content\">
  6682. \t\t\t\t<div class=\"row\">
  6683. \t\t\t\t\t<div class=\"col-lg-8\">
  6684. \t\t\t\t\t\t<div class=\"card\">
  6685. \t\t\t\t\t\t\t<div class=\"card-header\">
  6686. \t\t\t\t\t\t\t\t<h5 class=\"mb-0\">
  6687. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-user me-2\"></i>À propos de
  6688. \t\t\t\t\t\t\t\t\t{{ shop.name }}
  6689. \t\t\t\t\t\t\t\t</h5>
  6690. \t\t\t\t\t\t\t</div>
  6691. \t\t\t\t\t\t\t<div class=\"card-body\">
  6692. \t\t\t\t\t\t\t\t{% if shop.description %}
  6693. \t\t\t\t\t\t\t\t\t<div class=\"card-text shop-description-content\">{{ shop.description|raw }}</div>
  6694. \t\t\t\t\t\t\t\t{% else %}
  6695. \t\t\t\t\t\t\t\t\t<p class=\"text-muted\">Aucune description disponible.</p>
  6696. \t\t\t\t\t\t\t\t{% endif %}
  6698. \t\t\t\t\t\t\t\t{% if shop.businessHours %}
  6699. \t\t\t\t\t\t\t\t\t<h6 class=\"mt-4\">
  6700. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-clock me-2\"></i>Heures d'ouverture
  6701. \t\t\t\t\t\t\t\t\t</h6>
  6702. \t\t\t\t\t\t\t\t\t<p>{{ shop.businessHours }}</p>
  6703. \t\t\t\t\t\t\t\t{% endif %}
  6705. \t\t\t\t\t\t\t\t{% if shop.returnPolicy %}
  6706. \t\t\t\t\t\t\t\t\t<h6 class=\"mt-4\">
  6707. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-undo me-2\"></i>Politique de retour
  6708. \t\t\t\t\t\t\t\t\t</h6>
  6709. \t\t\t\t\t\t\t\t\t<p>{{ shop.returnPolicy }}</p>
  6710. \t\t\t\t\t\t\t\t{% endif %}
  6711. \t\t\t\t\t\t\t</div>
  6712. \t\t\t\t\t\t</div>
  6713. \t\t\t\t\t</div>
  6714. \t\t\t\t\t<div class=\"col-lg-4\">
  6715. \t\t\t\t\t\t<div class=\"card shop-info-card\">
  6716. \t\t\t\t\t\t\t<div class=\"card-header\">
  6717. \t\t\t\t\t\t\t\t<h6 class=\"mb-0\">
  6718. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-chart me-2\"></i>Statistiques de la boutique
  6719. \t\t\t\t\t\t\t\t</h6>
  6720. \t\t\t\t\t\t\t</div>
  6721. \t\t\t\t\t\t\t<div class=\"card-body\">
  6722. \t\t\t\t\t\t\t\t<div class=\"row text-center\">
  6723. \t\t\t\t\t\t\t\t\t<div class=\"col-6\">
  6724. \t\t\t\t\t\t\t\t\t\t<div class=\"shop-stat-item\">
  6725. \t\t\t\t\t\t\t\t\t\t\t<span class=\"stat-number h4 text-primary\">{{ stats.activeProducts }}</span>
  6726. \t\t\t\t\t\t\t\t\t\t\t<span class=\"stat-label d-block\">Produits actifs</span>
  6727. \t\t\t\t\t\t\t\t\t\t</div>
  6728. \t\t\t\t\t\t\t\t\t</div>
  6729. \t\t\t\t\t\t\t\t\t<div class=\"col-6\">
  6730. \t\t\t\t\t\t\t\t\t\t<div class=\"shop-stat-item\">
  6731. \t\t\t\t\t\t\t\t\t\t\t<span class=\"stat-number h4 text-info\">{{ stats.shopViews }}</span>
  6732. \t\t\t\t\t\t\t\t\t\t\t<span class=\"stat-label d-block\">Vues boutique</span>
  6733. \t\t\t\t\t\t\t\t\t\t</div>
  6734. \t\t\t\t\t\t\t\t\t</div>
  6735. \t\t\t\t\t\t\t\t</div>
  6736. \t\t\t\t\t\t\t</div>
  6737. \t\t\t\t\t\t</div>
  6738. \t\t\t\t\t</div>
  6739. \t\t\t\t</div>
  6740. \t\t\t</div>
  6742. \t\t\t<!-- Tab Content: Feedback avec Karma -->
  6743. \t\t\t<div id=\"shop-feedback\" class=\"tab-content shop-tab-content\">
  6744. \t\t\t\t<div class=\"row\">
  6745. \t\t\t\t\t<div
  6746. \t\t\t\t\t\tclass=\"col-lg-8\">
  6747. \t\t\t\t\t\t<!-- Statistiques des avis -->
  6748. \t\t\t\t\t\t<div class=\"review-stats mb-4\">
  6749. \t\t\t\t\t\t\t<div class=\"row\">
  6750. \t\t\t\t\t\t\t\t<div class=\"col-md-4\">
  6751. \t\t\t\t\t\t\t\t\t<div class=\"stat-card text-center\">
  6752. \t\t\t\t\t\t\t\t\t\t<h3 class=\"stat-number\">{{ shop.getAverageRating() }}</h3>
  6753. \t\t\t\t\t\t\t\t\t\t<div class=\"rating-stars\">
  6754. \t\t\t\t\t\t\t\t\t\t\t{% for i in 1..5 %}
  6755. \t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-star{% if i <= shop.getAverageRating() %}{% else %}-empty{% endif %}\"></i>
  6756. \t\t\t\t\t\t\t\t\t\t\t{% endfor %}
  6757. \t\t\t\t\t\t\t\t\t\t</div>
  6758. \t\t\t\t\t\t\t\t\t\t<p class=\"stat-label\">Note moyenne</p>
  6759. \t\t\t\t\t\t\t\t\t</div>
  6760. \t\t\t\t\t\t\t\t</div>
  6761. \t\t\t\t\t\t\t\t<div class=\"col-md-4\">
  6762. \t\t\t\t\t\t\t\t\t<div class=\"stat-card text-center\">
  6763. \t\t\t\t\t\t\t\t\t\t<h3 class=\"stat-number\">{{ shop.getVisibleReviewsCount() }}</h3>
  6764. \t\t\t\t\t\t\t\t\t\t<p class=\"stat-label\">Avis clients</p>
  6765. \t\t\t\t\t\t\t\t\t</div>
  6766. \t\t\t\t\t\t\t\t</div>
  6767. \t\t\t\t\t\t\t\t<div class=\"col-md-4\">
  6768. \t\t\t\t\t\t\t\t\t<div class=\"stat-card text-center\">
  6769. \t\t\t\t\t\t\t\t\t\t<h3 class=\"stat-number\">{{ ((shop.getVisibleReviewsCount() / 100) * 100)|round }}%</h3>
  6770. \t\t\t\t\t\t\t\t\t\t<p class=\"stat-label\">Satisfaction</p>
  6771. \t\t\t\t\t\t\t\t\t</div>
  6772. \t\t\t\t\t\t\t\t</div>
  6773. \t\t\t\t\t\t\t</div>
  6774. \t\t\t\t\t\t</div>
  6776. \t\t\t\t\t\t<!-- Liste des avis récents -->
  6777. \t\t\t\t\t\t<div class=\"reviews-preview\">
  6778. \t\t\t\t\t\t\t<h5 class=\"mb-3\">Avis récents</h5>
  6779. \t\t\t\t\t\t\t{% if shop.reviews|length > 0 %}
  6780. \t\t\t\t\t\t\t\t<div class=\"reviews-list\">
  6781. \t\t\t\t\t\t\t\t\t{% for review in shop.reviews|slice(0, 5) %}
  6782. \t\t\t\t\t\t\t\t\t\t{% if review.isVisible %}
  6783. \t\t\t\t\t\t\t\t\t\t\t<div class=\"review-item\">
  6784. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"review-header\">
  6785. \t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"reviewer-info\">
  6786. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"reviewer-avatar\">
  6787. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-user\"></i>
  6788. \t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>
  6789. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"reviewer-details\">
  6790. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h6 class=\"reviewer-name\">{{ review.user.userIdentifier }}</h6>
  6791. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"review-rating\">
  6792. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{% for i in 1..5 %}
  6793. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-star{% if i <= review.rating %}{% else %}-empty{% endif %}\"></i>
  6794. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{% endfor %}
  6795. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>
  6796. \t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>
  6797. \t\t\t\t\t\t\t\t\t\t\t\t\t</div>
  6798. \t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"review-meta\">
  6799. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"review-date\">{{ review.createdAt|date('d/m/Y') }}</span>
  6800. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{% if review.isVerified %}
  6801. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"verified-badge\">
  6802. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  6803. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tVérifié
  6804. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>
  6805. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6806. \t\t\t\t\t\t\t\t\t\t\t\t\t</div>
  6807. \t\t\t\t\t\t\t\t\t\t\t\t</div>
  6809. \t\t\t\t\t\t\t\t\t\t\t\t{% if review.comment %}
  6810. \t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"review-comment\">
  6811. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>{{ review.comment|length > 150 ? review.comment|slice(0, 150) ~ '...' : review.comment }}</p>
  6812. \t\t\t\t\t\t\t\t\t\t\t\t\t</div>
  6813. \t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  6814. \t\t\t\t\t\t\t\t\t\t\t</div>
  6815. \t\t\t\t\t\t\t\t\t\t{% endif %}
  6816. \t\t\t\t\t\t\t\t\t{% endfor %}
  6817. \t\t\t\t\t\t\t\t</div>
  6819. \t\t\t\t\t\t\t\t<div class=\"text-center mt-4\">
  6820. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('shop_reviews_index', {'slug': shop.slug}) }}\" class=\"btn btn-primary\">
  6821. \t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-star me-1\"></i>Voir tous les avis
  6822. \t\t\t\t\t\t\t\t\t</a>
  6823. \t\t\t\t\t\t\t\t</div>
  6824. \t\t\t\t\t\t\t{% else %}
  6825. \t\t\t\t\t\t\t\t<div class=\"text-center py-4\">
  6826. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-star\" style=\"font-size: 3rem; color: #ccc;\"></i>
  6827. \t\t\t\t\t\t\t\t\t<h5 class=\"mt-3\">Aucun avis pour le moment</h5>
  6828. \t\t\t\t\t\t\t\t\t<p class=\"text-muted\">Cette boutique n'a pas encore reçu d'avis clients.</p>
  6829. \t\t\t\t\t\t\t\t</div>
  6830. \t\t\t\t\t\t\t{% endif %}
  6831. \t\t\t\t\t\t</div>
  6832. \t\t\t\t\t</div>
  6834. \t\t\t\t\t<div
  6835. \t\t\t\t\t\tclass=\"col-lg-4\">
  6836. \t\t\t\t\t\t<!-- Lien vers la page complète des avis -->
  6837. \t\t\t\t\t\t<div class=\"review-actions-card\">
  6838. \t\t\t\t\t\t\t<h5>Évaluer cette boutique</h5>
  6839. \t\t\t\t\t\t\t<p class=\"text-muted\">Partagez votre expérience avec cette boutique.</p>
  6840. \t\t\t\t\t\t\t<a href=\"{{ path('shop_reviews_new', {'slug': shop.slug}) }}\" class=\"btn btn-primary w-100\">
  6841. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-star me-1\"></i>Laisser un avis
  6842. \t\t\t\t\t\t\t</a>
  6843. \t\t\t\t\t\t</div>
  6844. \t\t\t\t\t</div>
  6845. \t\t\t\t</div>
  6846. \t\t\t</div>
  6847. \t\t</div>
  6848. \t</section>
  6850. \t<!-- Modal de signalement -->
  6851. \t<div class=\"modal fade\" id=\"reportModal\" tabindex=\"-1\" aria-labelledby=\"reportModalLabel\" aria-hidden=\"true\">
  6852. \t\t<div class=\"modal-dialog\">
  6853. \t\t\t<div class=\"modal-content\">
  6854. \t\t\t\t<div class=\"modal-header\">
  6855. \t\t\t\t\t<h5 class=\"modal-title\" id=\"reportModalLabel\">
  6856. \t\t\t\t\t\t<i class=\"lnr lnr-flag me-2\"></i>&nbsp;Signaler cette boutique
  6857. \t\t\t\t\t</h5>
  6858. \t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
  6859. \t\t\t\t</div>
  6860. \t\t\t\t<div class=\"modal-body\">
  6861. \t\t\t\t\t<form id=\"reportForm\">
  6862. \t\t\t\t\t\t<div class=\"mb-3\">
  6863. \t\t\t\t\t\t\t<label for=\"reportReason\" class=\"form-label\">Motif du signalement *</label>
  6864. \t\t\t\t\t\t\t<select class=\"form-select\" id=\"reportReason\" required>
  6865. \t\t\t\t\t\t\t\t<option value=\"\">Sélectionnez un motif</option>
  6866. \t\t\t\t\t\t\t\t<option value=\"fake_products\">Produits contrefaits</option>
  6867. \t\t\t\t\t\t\t\t<option value=\"inappropriate_content\">Contenu inapproprié</option>
  6868. \t\t\t\t\t\t\t\t<option value=\"spam\">Spam ou publicité abusive</option>
  6869. \t\t\t\t\t\t\t\t<option value=\"fraud\">Fraude ou escroquerie</option>
  6870. \t\t\t\t\t\t\t\t<option value=\"harassment\">Harcèlement</option>
  6871. \t\t\t\t\t\t\t\t<option value=\"other\">Autre</option>
  6872. \t\t\t\t\t\t\t</select>
  6873. \t\t\t\t\t\t</div>
  6874. \t\t\t\t\t\t<div class=\"mb-3\">
  6875. \t\t\t\t\t\t\t<label for=\"reportDescription\" class=\"form-label\">Description détaillée *</label>
  6876. \t\t\t\t\t\t\t<textarea class=\"form-control\" id=\"reportDescription\" rows=\"4\" placeholder=\"Décrivez le problème rencontré...\" required></textarea>
  6877. \t\t\t\t\t\t</div>
  6878. \t\t\t\t\t\t<div class=\"mb-3\">
  6879. \t\t\t\t\t\t\t<label for=\"reportEmail\" class=\"form-label\">Votre email (optionnel)</label>
  6880. \t\t\t\t\t\t\t<input type=\"email\" class=\"form-control\" id=\"reportEmail\" placeholder=\"votre@email.com\">
  6881. \t\t\t\t\t\t\t<div class=\"form-text\">Nous pourrons vous contacter pour plus d'informations</div>
  6882. \t\t\t\t\t\t</div>
  6883. \t\t\t\t\t</form>
  6884. \t\t\t\t</div>
  6885. \t\t\t\t<div class=\"modal-footer\">
  6886. \t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Annuler</button>
  6887. \t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\" onclick=\"submitReport()\">
  6888. \t\t\t\t\t\t<i class=\"lnr lnr-flag  me-2\"></i>Envoyer le signalement
  6889. \t\t\t\t\t</button>
  6890. \t\t\t\t</div>
  6891. \t\t\t</div>
  6892. \t\t</div>
  6893. \t</div>
  6895. \t<!-- Section des avis -->
  6896. \t<div class=\"container my-5\">
  6897. \t\t<div class=\"row\">
  6898. \t\t\t<div class=\"col-12\">
  6899. \t\t\t\t<div class=\"section-title text-center\">
  6900. \t\t\t\t\t<h2>Avis clients</h2>
  6901. \t\t\t\t\t<p>Découvrez ce que pensent nos clients de cette boutique</p>
  6902. \t\t\t\t</div>
  6903. \t\t\t</div>
  6904. \t\t</div>
  6906. \t\t<div
  6907. \t\t\tclass=\"row\">
  6908. \t\t\t<!-- Statistiques des avis -->
  6909. \t\t\t<div class=\"col-md-4\">
  6910. \t\t\t\t<div class=\"review-stats-card\">
  6911. \t\t\t\t\t<div class=\"stats-header\">
  6912. \t\t\t\t\t\t<div class=\"overall-rating\">
  6913. \t\t\t\t\t\t\t<span class=\"rating-number\">{{ shop.reviews|length > 0 ? (shop.reviews|map(r => r.rating)|reduce((a, b) => a + b) / shop.reviews|length)|number_format(1) : '0.0' }}</span>
  6914. \t\t\t\t\t\t\t<div class=\"stars\">
  6915. \t\t\t\t\t\t\t\t{% set avgRating = shop.reviews|length > 0 ? (shop.reviews|map(r => r.rating)|reduce((a, b) => a + b) / shop.reviews|length) : 0 %}
  6916. \t\t\t\t\t\t\t\t{% for i in 1..5 %}
  6917. \t\t\t\t\t\t\t\t\t{% if i <= avgRating %}
  6918. \t\t\t\t\t\t\t\t\t\t★
  6919. \t\t\t\t\t\t\t\t\t{% elseif i - avgRating < 1 %}
  6920. \t\t\t\t\t\t\t\t\t\t☆
  6921. \t\t\t\t\t\t\t\t\t{% else %}
  6922. \t\t\t\t\t\t\t\t\t\t☆
  6923. \t\t\t\t\t\t\t\t\t{% endif %}
  6924. \t\t\t\t\t\t\t\t{% endfor %}
  6925. \t\t\t\t\t\t\t</div>
  6926. \t\t\t\t\t\t</div>
  6927. \t\t\t\t\t\t<div class=\"rating-summary\">
  6928. \t\t\t\t\t\t\t<p class=\"mb-1\">{{ shop.reviews|length }}
  6929. \t\t\t\t\t\t\t\tavis</p>
  6930. \t\t\t\t\t\t\t<p class=\"text-muted small\">Basé sur
  6931. \t\t\t\t\t\t\t\t{{ shop.reviews|filter(r => r.isVerified)|length }}
  6932. \t\t\t\t\t\t\t\tavis vérifiés</p>
  6933. \t\t\t\t\t\t</div>
  6934. \t\t\t\t\t</div>
  6936. \t\t\t\t\t<div class=\"rating-breakdown\">
  6937. \t\t\t\t\t\t{% for rating in 5..1 %}
  6938. \t\t\t\t\t\t\t{% set count = shop.reviews|filter(r => r.rating == rating)|length %}
  6939. \t\t\t\t\t\t\t{% set percentage = shop.reviews|length > 0 ? (count / shop.reviews|length * 100) : 0 %}
  6940. \t\t\t\t\t\t\t<div class=\"rating-bar\">
  6941. \t\t\t\t\t\t\t\t<span class=\"rating-label\">{{ rating }}★</span>
  6942. \t\t\t\t\t\t\t\t<div class=\"rating-progress\">
  6943. \t\t\t\t\t\t\t\t\t<div class=\"rating-fill\" style=\"width: {{ percentage }}%\"></div>
  6944. \t\t\t\t\t\t\t\t</div>
  6945. \t\t\t\t\t\t\t\t<span class=\"rating-count\">{{ count }}</span>
  6946. \t\t\t\t\t\t\t</div>
  6947. \t\t\t\t\t\t{% endfor %}
  6948. \t\t\t\t\t</div>
  6949. \t\t\t\t</div>
  6950. \t\t\t</div>
  6952. \t\t\t<!-- Aperçu des avis -->
  6953. \t\t\t<div class=\"col-md-8\">
  6954. \t\t\t\t<div class=\"reviews-preview\">
  6955. \t\t\t\t\t{% if shop.reviews|length > 0 %}
  6956. \t\t\t\t\t\t{% for review in shop.reviews|slice(0, 3) %}
  6957. \t\t\t\t\t\t\t<div class=\"review-card-preview\">
  6958. \t\t\t\t\t\t\t\t<div class=\"review-header\">
  6959. \t\t\t\t\t\t\t\t\t<div class=\"review-user\">
  6960. \t\t\t\t\t\t\t\t\t\t<div class=\"user-avatar\">
  6961. \t\t\t\t\t\t\t\t\t\t\t{{ review.user.firstName|first|upper|default(review.user.email|first|upper) }}
  6962. \t\t\t\t\t\t\t\t\t\t</div>
  6963. \t\t\t\t\t\t\t\t\t\t<div class=\"user-info\">
  6964. \t\t\t\t\t\t\t\t\t\t\t<h6>{{ review.user.firstName|default('Utilisateur') }}</h6>
  6965. \t\t\t\t\t\t\t\t\t\t\t<small>{{ review.getTimeAgo() }}</small>
  6966. \t\t\t\t\t\t\t\t\t\t</div>
  6967. \t\t\t\t\t\t\t\t\t</div>
  6968. \t\t\t\t\t\t\t\t\t<div class=\"review-rating\">
  6969. \t\t\t\t\t\t\t\t\t\t<div class=\"stars\">{{ review.getRatingStars() }}</div>
  6970. \t\t\t\t\t\t\t\t\t\t{% if review.isVerified %}
  6971. \t\t\t\t\t\t\t\t\t\t\t<span class=\"verified-badge\">✓</span>
  6972. \t\t\t\t\t\t\t\t\t\t{% endif %}
  6973. \t\t\t\t\t\t\t\t\t</div>
  6974. \t\t\t\t\t\t\t\t</div>
  6975. \t\t\t\t\t\t\t\t<div class=\"review-content\">
  6976. \t\t\t\t\t\t\t\t\t{{ review.comment|slice(0, 150) }}
  6977. \t\t\t\t\t\t\t\t\t{% if review.comment|length > 150 %}...
  6978. \t\t\t\t\t\t\t\t\t{% endif %}
  6979. \t\t\t\t\t\t\t\t</div>
  6980. \t\t\t\t\t\t\t</div>
  6981. \t\t\t\t\t\t{% endfor %}
  6983. \t\t\t\t\t\t<div class=\"text-center mt-3\">
  6984. \t\t\t\t\t\t\t<a href=\"{{ path('shop_reviews_index', {'slug': shop.slug}) }}\" class=\"btn btn-outline-primary\">
  6985. \t\t\t\t\t\t\t\tVoir tous les avis ({{ shop.reviews|length }})
  6986. \t\t\t\t\t\t\t</a>
  6987. \t\t\t\t\t\t</div>
  6988. \t\t\t\t\t{% else %}
  6989. \t\t\t\t\t\t<div class=\"empty-reviews\">
  6990. \t\t\t\t\t\t\t<i class=\"lnr lnr-star\"></i>
  6991. \t\t\t\t\t\t\t<h4>Aucun avis pour le moment</h4>
  6992. \t\t\t\t\t\t\t<p>Soyez le premier à laisser un avis sur cette boutique !</p>
  6993. \t\t\t\t\t\t\t{% if app.user %}
  6994. \t\t\t\t\t\t\t\t<a href=\"{{ path('shop_reviews_new', {'slug': shop.slug}) }}\" class=\"btn btn-primary\">
  6995. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnraccount_recently_viewed-star\"></i>
  6996. \t\t\t\t\t\t\t\t\tLaisser un avis
  6997. \t\t\t\t\t\t\t\t</a>
  6998. \t\t\t\t\t\t\t{% endif %}
  6999. \t\t\t\t\t\t</div>
  7000. \t\t\t\t\t{% endif %}
  7001. \t\t\t\t</div>
  7002. \t\t\t</div>
  7003. \t\t</div>
  7004. \t</div>
  7006. {% endblock %}
  7008. {% block javascripts %}
  7009. \t<script>
  7010. \t\tdocument.addEventListener('DOMContentLoaded', function () {
  7011. \t\t\t// Initialisation du carrousel
  7012. \t\t\tconsole.log('DOM Content Loaded - Initializing carousel...');
  7013. \t\t\tsetTimeout(function() {
  7014. initCarousel();
  7015. \t\t\t}, 100);
  7017. // Gestion des onglets eBay-style avec Bootstrap
  7018. const tabLinks = document.querySelectorAll('.shop-tab-link');
  7019. const tabContents = document.querySelectorAll('.shop-tab-content');
  7021. tabLinks.forEach(link => {
  7022. link.addEventListener('click', function (e) {
  7023. e.preventDefault();
  7025. // Retirer la classe active de tous les liens et contenus
  7026. tabLinks.forEach(l => {
  7027. l.classList.remove('active');
  7028. l.setAttribute('aria-selected', 'false');
  7029. });
  7030. tabContents.forEach(c => c.classList.remove('active'));
  7032. // Ajouter la classe active au lien cliqué
  7033. this.classList.add('active');
  7034. this.setAttribute('aria-selected', 'true');
  7036. // Afficher le contenu correspondant
  7037. const targetTab = this.dataset.tab;
  7038. const targetContent = document.getElementById (`shop-\${targetTab}`);
  7039. if (targetContent) {
  7040. targetContent.classList.add('active');
  7041. }
  7042. });
  7043. });
  7045. // Gestion du système de follow
  7046. const followButton = document.getElementById('follow-button');
  7048. if (followButton) {
  7049. followButton.addEventListener('click', function () {
  7050. const shopId = this.dataset.shopId;
  7051. const isFollowing = this.dataset.following === 'true';
  7053. // Désactiver le bouton pendant la requête
  7054. this.disabled = true;
  7055. const originalText = this.innerHTML;
  7056. this.innerHTML = '<i class=\"lnr lnr-spinner\"></i> Loading...';
  7058. // Envoyer la requête
  7059. fetch(\"{{ path('ui_api_shop_toggle_follow', {id: '__SHOP_ID__'}) }}\".replace('__SHOP_ID__', shopId), {
  7060. method: 'POST',
  7061. headers: {
  7062. 'Content-Type': 'application/json',
  7063. 'X-Requested-With': 'XMLHttpRequest'
  7064. }
  7065. }).then(response => response.json()).then(data => {
  7066. if (data.success) { // Mettre à jour l'interface
  7067. this.dataset.following = data.isFollowing;
  7069. if (data.isFollowing) {
  7070. this.classList.add('following');
  7071. this.innerHTML = '<i class=\"lnr lnr-checkmark\"></i> Suivi';
  7072. } else {
  7073. this.classList.remove('following');
  7074. this.innerHTML = '<i class=\"lnr lnr-plus\"></i> Suivre';
  7075. }
  7077. // Mettre à jour le compteur de followers
  7078. if (followersCount && data.followersCount !== undefined) {
  7079. followersCount.textContent = data.followersCount.toLocaleString();
  7080. }
  7082. // Afficher un message de confirmation
  7083. showNotification(data.message, 'success');
  7084. } else {
  7085. showNotification(data.message, 'error');
  7086. }
  7087. }).catch(error => {
  7088. console.error('Erreur:', error);
  7089. showNotification('Une erreur est survenue', 'error');
  7090. }). finally(() => {
  7091. this.disabled = false;
  7092. });
  7093. });
  7094. }
  7096. // Fonction pour afficher les notifications
  7097. function showNotification(message, type = 'info') { // Créer l'élément de notification
  7098. const notification = document.createElement('div');
  7099. notification.className = `alert alert-\${
  7100. type === 'success' ? 'success' : type === 'error' ? 'danger' : 'info'
  7101. } alert-dismissible fade show position-fixed`;
  7102. notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
  7103. notification.innerHTML = `
  7104.             \${message}
  7105.             <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\"></button>
  7106.         `;
  7108. document.body.appendChild(notification);
  7110. // Supprimer automatiquement après 5 secondes
  7111. setTimeout(() => {
  7112. if (notification.parentNode) {
  7113. notification.remove();
  7114. }
  7115. }, 5000);
  7116. }
  7118. // Fonctions pour les actions de boutique
  7119. window.shareShop = function () { // Vérifier si l'API Web Share est disponible et si on est sur mobile
  7120. if (navigator.share && /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  7121. navigator.share({title: '{{ shop.name }}- Boutique sur MaketOu', text: 'Découvrez cette boutique et ses produits sur MaketOu', url: window.location.href}).then(() => {
  7122. console.log('Partage réussi');
  7123. showNotification('Lien partagé avec succès !', 'success');
  7124. }).catch((error) => {
  7125. console.log('Erreur lors du partage:', error);
  7126. // Fallback vers la copie
  7127. copyToClipboard();
  7128. });
  7129. } else { // Sur desktop ou si Web Share n'est pas disponible, copier directement
  7130. copyToClipboard();
  7131. }
  7132. };
  7134. // Fonction pour copier le lien dans le presse-papiers
  7135. function copyToClipboard() {
  7136. const shopUrl = window.location.href;
  7137. const shopName = '{{ shop.name }}';
  7138. const shareText = `Découvrez la boutique \"\${shopName}\" sur MaketOu : \${shopUrl}`;
  7140. // Utiliser directement le fallback pour éviter les conflits
  7141. fallbackCopyToClipboard(shareText);
  7142. }
  7144. // Fallback pour copier le texte
  7145. function fallbackCopyToClipboard(text) {
  7146. const textArea = document.createElement('textarea');
  7147. textArea.value = text;
  7148. textArea.style.position = 'fixed';
  7149. textArea.style.left = '-999999px';
  7150. textArea.style.top = '-999999px';
  7151. document.body.appendChild(textArea);
  7152. textArea.focus();
  7153. textArea.select();
  7155. try {
  7156. document.execCommand('copy');
  7157. showNotification('Lien copié dans le presse-papiers !', 'success');
  7158. } catch (err) {
  7159. console.error('Impossible de copier:', err);
  7160. showNotification('Impossible de copier le lien', 'error');
  7161. }
  7163. document.body.removeChild(textArea);
  7164. }
  7166. window.contactShop = function () { // Ouvrir un modal de signalement
  7167. openReportModal();
  7168. };
  7170. window.saveShop = function () { // Sauvegarder la boutique dans les favoris
  7171. showNotification('Boutique sauvegardée dans vos favoris', 'success');
  7172. };
  7174. // Fonction pour ouvrir le modal de signalement
  7175. window.openReportModal = function () {
  7176. const modal = new bootstrap.Modal(document.getElementById('reportModal'));
  7177. modal.show();
  7178. };
  7180. // Fonction pour soumettre le signalement
  7181. window.submitReport = function () {
  7182. const reason = document.getElementById('reportReason').value;
  7183. const description = document.getElementById('reportDescription').value;
  7184. const email = document.getElementById('reportEmail').value;
  7186. if (! reason || ! description) {
  7187. showNotification('Veuillez remplir tous les champs obligatoires', 'error');
  7188. return;
  7189. }
  7191. // Simuler l'envoi du signalement
  7192. const reportData = {
  7193. shopId: {{ shop.id }},
  7194. reason: reason,
  7195. description: description,
  7196. email: email,
  7197. reportedAt: new Date().toISOString()
  7198. };
  7200. console.log('Signalement envoyé:', reportData);
  7202. // Fermer le modal
  7203. const modal = bootstrap.Modal.getInstance(document.getElementById('reportModal'));
  7204. modal.hide();
  7206. // Réinitialiser le formulaire
  7207. document.getElementById('reportForm').reset();
  7209. // Afficher la confirmation
  7210. showNotification('Signalement envoyé avec succès. Nous examinerons votre demande.', 'success');
  7211. };
  7213. // Gestion du carrousel eBay-style - Variables globales
  7214. let currentSlide = 0;
  7215. let carouselInterval = null;
  7216. let isPaused = false;
  7217. let slides = [];
  7218. let indicators = [];
  7219. let carouselInitialized = false;
  7220. let autoSlideDelay = 5000; // Délai par défaut : 5 secondes
  7221. let userInteractionTimeout = null; // Timeout pour reprendre après interaction utilisateur
  7222. let isUserInteracting = false; // Flag pour savoir si l'utilisateur interagit
  7223. let pageVisibilityHidden = false; // Flag pour savoir si la page est cachée
  7225. // Définir les fonctions globales immédiatement pour qu'elles soient disponibles pour onclick
  7226. window.nextSlide = function() {
  7227.     if (slides.length === 0) {
  7228.         console.warn('nextSlide: No slides available, initializing...');
  7229.         initCarousel();
  7230.         return;
  7231.     }
  7232.     // Marquer comme interaction utilisateur
  7233.     handleUserInteraction();
  7234.     currentSlide = (currentSlide + 1) % slides.length;
  7235.     console.log('nextSlide: Moving to slide', currentSlide);
  7236.     updateCarousel();
  7237. };
  7239. window.previousSlide = function() {
  7240.     if (slides.length === 0) {
  7241.         console.warn('previousSlide: No slides available, initializing...');
  7242.         initCarousel();
  7243.         return;
  7244.     }
  7245.     // Marquer comme interaction utilisateur
  7246.     handleUserInteraction();
  7247.     currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  7248.     console.log('previousSlide: Moving to slide', currentSlide);
  7249.     updateCarousel();
  7250. };
  7252. window.goToSlide = function(index) {
  7253.     if (slides.length === 0) {
  7254.         console.warn('goToSlide: No slides available, initializing...');
  7255.         initCarousel();
  7256.         // Attendre que l'initialisation soit terminée
  7257.         setTimeout(() => {
  7258.             if (index >= 0 && index < slides.length) {
  7259.                 currentSlide = index;
  7260.                 updateCarousel();
  7261.                 // Réinitialiser le carrousel automatique
  7262.                 handleUserInteraction();
  7263.             }
  7264.         }, 150);
  7265.         return;
  7266.     }
  7267.     if (index < 0 || index >= slides.length) {
  7268.         console.warn('goToSlide: Invalid index', index, '. Valid range: 0 to', slides.length - 1);
  7269.         return;
  7270.     }
  7271.     // Marquer comme interaction utilisateur
  7272.     handleUserInteraction();
  7273.     currentSlide = index;
  7274.     console.log('goToSlide: Moving to slide', currentSlide, 'of', slides.length);
  7275.     updateCarousel();
  7276. };
  7278. window.toggleCarousel = function() {
  7279.     if (slides.length === 0) {
  7280.         console.warn('toggleCarousel: No slides available, initializing...');
  7281.         initCarousel();
  7282.         return;
  7283.     }
  7284.     if (isPaused) {
  7285.         resumeCarousel();
  7286.     } else {
  7287.         pauseCarousel();
  7288.     }
  7289. };
  7291. function initCarousel() {
  7292.     if (carouselInitialized) {
  7293.         console.log('Carousel already initialized');
  7294.         return;
  7295.     }
  7296.     // Réinitialiser les variables
  7297.     currentSlide = 0;
  7298.     isPaused = false;
  7299.     
  7300.     // Récupérer les slides et indicateurs à nouveau
  7301.     const carouselContainer = document.querySelector('.shop-carousel-ebay');
  7302.     if (!carouselContainer) {
  7303.         console.log('Carousel container not found');
  7304.         return;
  7305.     }
  7306.     
  7307.     const allSlides = carouselContainer.querySelectorAll('.carousel-slide');
  7308.     const allIndicators = carouselContainer.querySelectorAll('.carousel-indicator-ebay');
  7309.     
  7310.     if (allSlides.length === 0) {
  7311.         // Masquer les contrôles si aucune image
  7312.         const controls = carouselContainer.querySelector('.carousel-controls-ebay');
  7313.         const indicatorsContainer = carouselContainer.querySelector('.carousel-indicators-ebay');
  7314.         if (controls) controls.style.display = 'none';
  7315.         if (indicatorsContainer) indicatorsContainer.style.display = 'none';
  7316.         return;
  7317.     }
  7318.     
  7319.     // Si une seule image, masquer les contrôles
  7320.     if (allSlides.length <= 1) {
  7321.         const controls = carouselContainer.querySelector('.carousel-controls-ebay');
  7322.         const indicatorsContainer = carouselContainer.querySelector('.carousel-indicators-ebay');
  7323.         if (controls) controls.style.display = 'none';
  7324.         if (indicatorsContainer) indicatorsContainer.style.display = 'none';
  7325.         // S'assurer que la slide unique est active
  7326.         allSlides[0].classList.add('active');
  7327.         return;
  7328.     }
  7329.     
  7330.     // Afficher les contrôles si plusieurs images
  7331.     const controls = carouselContainer.querySelector('.carousel-controls-ebay');
  7332.     const indicatorsContainer = carouselContainer.querySelector('.carousel-indicators-ebay');
  7333.     if (controls) controls.style.display = 'flex';
  7334.     if (indicatorsContainer) indicatorsContainer.style.display = 'flex';
  7335.     
  7336.     // Mettre à jour les références globales - convertir NodeList en Array
  7337.     slides = Array.from(allSlides);
  7338.     indicators = Array.from(allIndicators);
  7339.     
  7340.     console.log('initCarousel: Found', slides.length, 'slides and', indicators.length, 'indicators');
  7341.     
  7342.     // S'assurer que la première slide est active immédiatement
  7343.     currentSlide = 0;
  7344.     slides.forEach((slide, index) => {
  7345.         if (index === 0) {
  7346.             slide.classList.add('active');
  7347.             slide.style.opacity = '1';
  7348.             slide.style.zIndex = '2';
  7349.         } else {
  7350.             slide.classList.remove('active');
  7351.             slide.style.opacity = '0';
  7352.             slide.style.zIndex = '1';
  7353.         }
  7354.     });
  7355.     if (indicators.length > 0) {
  7356.         indicators.forEach((indicator, index) => {
  7357.             if (index === 0) {
  7358.                 indicator.classList.add('active');
  7359.             } else {
  7360.                 indicator.classList.remove('active');
  7361.             }
  7362.         });
  7363.     }
  7364.     
  7365.     // Démarrer le carrousel automatique immédiatement
  7366.     console.log('Initializing carousel - starting automatic rotation...');
  7367.     isPaused = false; // S'assurer que le carrousel n'est pas en pause
  7368.     startCarousel();
  7369.     
  7370.     // Gérer les événements de survol (une seule fois)
  7371.     carouselContainer.addEventListener('mouseenter', function() {
  7372.         if (!isPaused) {
  7373.             pauseCarousel();
  7374.         }
  7375.     });
  7376.     carouselContainer.addEventListener('mouseleave', function() {
  7377.         // Ne reprendre que si l'utilisateur n'a pas mis en pause manuellement
  7378.         if (!isPaused && !isUserInteracting && !pageVisibilityHidden) {
  7379.             startCarousel();
  7380.         }
  7381.     });
  7382.     
  7383.     // Gérer la visibilité de la page (pause quand la page est cachée)
  7384.     document.addEventListener('visibilitychange', function() {
  7385.         if (document.hidden) {
  7386.             pageVisibilityHidden = true;
  7387.             if (!isPaused) {
  7388.                 pauseCarousel();
  7389.             }
  7390.         } else {
  7391.             pageVisibilityHidden = false;
  7392.             // Reprendre seulement si l'utilisateur n'a pas mis en pause manuellement
  7393.             if (!isPaused && !isUserInteracting) {
  7394.                 startCarousel();
  7395.             }
  7396.         }
  7397.     });
  7398.     
  7399.     carouselInitialized = true;
  7400.     console.log('Carousel initialized with', slides.length, 'slides');
  7401. }
  7403. function startCarousel() {
  7404.     // Nettoyer l'intervalle existant
  7405.     clearInterval(carouselInterval);
  7406.     
  7407.     // Ne pas démarrer si la page est cachée ou si l'utilisateur interagit
  7408.     if (pageVisibilityHidden || isUserInteracting) {
  7409.         return;
  7410.     }
  7411.     
  7412.     if (slides.length <= 1) {
  7413.         console.log('Not enough slides to start carousel');
  7414.         return;
  7415.     }
  7416.     
  7417.     // S'assurer que isPaused est false pour démarrer
  7418.     isPaused = false;
  7419.     
  7420.     const pauseBtn = document.getElementById('pauseBtn');
  7421.     const pauseIcon = document.getElementById('pauseIcon');
  7422.     if (pauseBtn) {
  7423.         pauseBtn.classList.remove('playing');
  7424.         if (pauseIcon) {
  7425.             pauseIcon.textContent = '⏸';
  7426.             pauseIcon.className = 'pause-icon-content';
  7427.             pauseIcon.style.display = 'inline-block';
  7428.             pauseIcon.style.color = 'white';
  7429.             pauseIcon.style.fontSize = '22px';
  7430.             pauseIcon.style.visibility = 'visible';
  7431.             pauseIcon.style.opacity = '1';
  7432.         }
  7433.     }
  7434.     
  7435.     console.log('Starting carousel automatically...');
  7436.     carouselInterval = setInterval(() => {
  7437.         // Vérifier les conditions avant de changer de slide
  7438.         if (!isPaused && !isUserInteracting && !pageVisibilityHidden && slides.length > 0) {
  7439.             // Utiliser la fonction interne nextSlide pour éviter de déclencher handleUserInteraction
  7440.             currentSlide = (currentSlide + 1) % slides.length;
  7441.             console.log('Auto slide:', currentSlide);
  7442.             updateCarousel();
  7443.         }
  7444.     }, autoSlideDelay);
  7445. }
  7447. // Fonction pour gérer les interactions utilisateur
  7448. function handleUserInteraction() {
  7449.     isUserInteracting = true;
  7450.     
  7451.     // Nettoyer le timeout précédent s'il existe
  7452.     if (userInteractionTimeout) {
  7453.         clearTimeout(userInteractionTimeout);
  7454.     }
  7455.     
  7456.     // Reprendre le carrousel automatique après 3 secondes d'inactivité
  7457.     userInteractionTimeout = setTimeout(() => {
  7458.         isUserInteracting = false;
  7459.         // Reprendre seulement si l'utilisateur n'a pas mis en pause manuellement
  7460.         if (!isPaused && !pageVisibilityHidden) {
  7461.             startCarousel();
  7462.         }
  7463.     }, 3000);
  7469. }
  7471. function pauseCarousel() {
  7472. isPaused = true;
  7473. clearInterval(carouselInterval);
  7474.     
  7475.     // Nettoyer le timeout d'interaction utilisateur
  7476.     if (userInteractionTimeout) {
  7477.         clearTimeout(userInteractionTimeout);
  7478.         userInteractionTimeout = null;
  7479.     }
  7480.     
  7481.     const pauseBtn = document.getElementById('pauseBtn');
  7482. const pauseIcon = document.getElementById('pauseIcon');
  7483.     if (pauseBtn) {
  7484.         pauseBtn.classList.add('playing');
  7485. if (pauseIcon) {
  7486.             pauseIcon.textContent = '▶';
  7487.             pauseIcon.className = 'pause-icon-content';
  7488.             pauseIcon.style.display = 'inline-block';
  7489.             pauseIcon.style.color = 'white';
  7490.             pauseIcon.style.fontSize = '22px';
  7491.             pauseIcon.style.visibility = 'visible';
  7492.             pauseIcon.style.opacity = '1';
  7493.         }
  7494. }
  7495. }
  7497. function resumeCarousel() {
  7498. isPaused = false;
  7499.     isUserInteracting = false; // Réinitialiser le flag d'interaction
  7500.     
  7501.     // Nettoyer le timeout d'interaction utilisateur
  7502.     if (userInteractionTimeout) {
  7503.         clearTimeout(userInteractionTimeout);
  7504.         userInteractionTimeout = null;
  7505.     }
  7506.     
  7507.     const pauseBtn = document.getElementById('pauseBtn');
  7508. const pauseIcon = document.getElementById('pauseIcon');
  7509.     if (pauseBtn) {
  7510.         pauseBtn.classList.remove('playing');
  7511. if (pauseIcon) {
  7512.             pauseIcon.textContent = '⏸';
  7513.             pauseIcon.className = 'pause-icon-content';
  7514.             pauseIcon.style.display = 'inline-block';
  7515.             pauseIcon.style.color = 'white';
  7516.             pauseIcon.style.fontSize = '22px';
  7517.             pauseIcon.style.visibility = 'visible';
  7518.             pauseIcon.style.opacity = '1';
  7519. }
  7520.     }
  7521.     
  7522.     // Ne reprendre que si la page est visible
  7523.     if (!pageVisibilityHidden) {
  7524. startCarousel();
  7525.     }
  7526. }
  7528. function toggleCarousel() {
  7529.     const pauseBtn = document.getElementById('pauseBtn');
  7530.     const pauseIcon = document.getElementById('pauseIcon');
  7531.     
  7532. if (isPaused) {
  7533. resumeCarousel();
  7534. } else {
  7535. pauseCarousel();
  7536. }
  7537. }
  7539. function nextSlide() {
  7540.     if (slides.length === 0) {
  7541.         console.warn('No slides available');
  7542.         return;
  7543.     }
  7544. currentSlide = (currentSlide + 1) % slides.length;
  7545.     console.log('Next slide:', currentSlide);
  7546. updateCarousel();
  7547. }
  7549. function previousSlide() {
  7550.     if (slides.length === 0) {
  7551.         console.warn('No slides available');
  7552.         return;
  7553.     }
  7554. currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  7555.     console.log('Previous slide:', currentSlide);
  7556. updateCarousel();
  7557. }
  7559. // Fonction interne goToSlide (utilisée par window.goToSlide)
  7560. function goToSlide(index) {
  7561.     if (slides.length === 0) {
  7562.         console.warn('goToSlide: No slides available');
  7563.         return;
  7564.     }
  7565.     if (index < 0 || index >= slides.length) {
  7566.         console.warn('goToSlide: Invalid index', index, '. Valid range: 0 to', slides.length - 1);
  7567.         return;
  7568.     }
  7569.     // Marquer comme interaction utilisateur
  7570.     handleUserInteraction();
  7571. currentSlide = index;
  7572.     console.log('goToSlide: Moving to slide', currentSlide, 'of', slides.length);
  7573. updateCarousel();
  7574. }
  7576. function updateCarousel() {
  7577.     if (slides.length === 0) {
  7578.         console.warn('No slides to update');
  7579.         return;
  7580.     }
  7581.     
  7582.     console.log('updateCarousel: Updating to slide', currentSlide, 'of', slides.length, 'slides');
  7583.     console.log('updateCarousel: Total indicators:', indicators.length);
  7584.     
  7585.     // Masquer toutes les slides et réinitialiser leurs styles
  7586.     slides.forEach((slide, index) => {
  7587.         slide.classList.remove('active');
  7588.         if (index === currentSlide) {
  7589.             slide.classList.add('active');
  7590.             slide.style.opacity = '1';
  7591.             slide.style.zIndex = '2';
  7592.         } else {
  7593.             slide.style.opacity = '0';
  7594.             slide.style.zIndex = '1';
  7595.         }
  7596.     });
  7597.     
  7598.     // Mettre à jour tous les indicateurs - FORCER la mise à jour en deux passes distinctes
  7599.     if (indicators.length > 0) {
  7600.         console.log('updateCarousel: Updating', indicators.length, 'indicators, currentSlide:', currentSlide);
  7601.         
  7602.         // Première passe : retirer active de TOUS les indicateurs
  7603.         indicators.forEach((indicator) => {
  7604.             indicator.classList.remove('active');
  7605.         });
  7606.         
  7607.         // Deuxième passe : ajouter active à l'indicateur correspondant à currentSlide
  7608.         if (currentSlide >= 0 && currentSlide < indicators.length && indicators[currentSlide]) {
  7609.             const activeIndicator = indicators[currentSlide];
  7610.             activeIndicator.classList.add('active');
  7611.             console.log('updateCarousel: Activated indicator', currentSlide);
  7612.             
  7613.             // Vérification et forcer si nécessaire
  7614.             if (!activeIndicator.classList.contains('active')) {
  7615.                 console.warn('updateCarousel: Class not added, forcing with setAttribute');
  7616.                 activeIndicator.setAttribute('class', activeIndicator.className + ' active');
  7617.             }
  7618.         } else {
  7619.             console.error('updateCarousel: Invalid currentSlide', currentSlide, 'or indicator not found. Total indicators:', indicators.length);
  7620.         }
  7621.     } else {
  7622.         console.warn('updateCarousel: No indicators available');
  7623.     }
  7624.     
  7625.     // Afficher la slide active
  7626.     if (slides[currentSlide]) {
  7627.         slides[currentSlide].classList.add('active');
  7628.         slides[currentSlide].style.opacity = '1';
  7629.         slides[currentSlide].style.zIndex = '2';
  7630.         console.log('updateCarousel: Showing slide', currentSlide);
  7631.     } else {
  7632.         console.error('updateCarousel: Slide', currentSlide, 'not found. Total slides:', slides.length);
  7633.     }
  7634. }
  7636. // Les fonctions globales sont définies au début du script
  7638. // Gestion du tri des produits via API Symfony
  7639. console.log('=== INITIALIZING PRODUCT SORTING ===');
  7640. console.log('Shop ID:', {{ shop.id }});
  7642. // Fonction de tri via AJAX - RENDUE GLOBALE
  7643. window.sortProducts = function (sortValue) {
  7644. console.log('=== SORT PRODUCTS CALLED ===');
  7645. console.log('Sort value:', sortValue);
  7647. const productsContainer = document.getElementById('products-container');
  7648. console.log('Products container:', productsContainer);
  7650. if (! productsContainer) {
  7651. console.error('Products container not found!');
  7652. return;
  7653. }
  7655. if (! sortValue) {
  7656. console.log('Resetting to original order');
  7657. // Recharger la page pour revenir à l'ordre original
  7658. window.location.reload();
  7659. return;
  7660. }
  7662. console.log('Showing loading spinner...');
  7663. // Afficher un indicateur de chargement
  7664. productsContainer.innerHTML = '<div class=\"col-12 text-center py-5\"><div class=\"spinner-border text-primary\" role=\"status\"><span class=\"visually-hidden\">Chargement...</span></div><p class=\"mt-3\">Tri des produits en cours...</p></div>';
  7666. // Récupérer l'ID de la boutique
  7667. const shopId = {{ shop.id }};
  7668. console.log('Shop ID for request:', shopId);
  7670. const url = \"{{ path('ui_api_shop_products_sort', {id: '__SHOP_ID__'}) }}\".replace('__SHOP_ID__', shopId);
  7671. console.log('Request URL:', url);
  7673. const requestData = {
  7674. sortBy: sortValue
  7675. };
  7676. console.log('Request data:', requestData);
  7678. // Envoyer la requête AJAX
  7679. console.log('Sending AJAX request...');
  7680. fetch(url, {
  7681. method: 'POST',
  7682. headers: {
  7683. 'Content-Type': 'application/json',
  7684. 'X-Requested-With': 'XMLHttpRequest'
  7685. },
  7686. body: JSON.stringify(requestData)
  7687. }).then(response => {
  7688. console.log('Response received:', response);
  7689. console.log('Response status:', response.status);
  7690. return response.json();
  7691. }).then(data => {
  7692. console.log('Sort response data:', data);
  7694. if (data.success) {
  7695. console.log('Sort successful, updating content...');
  7696. // Mettre à jour le contenu avec le HTML retourné
  7697. productsContainer.innerHTML = data.html;
  7699. // Mettre à jour le compteur de produits
  7700. const productCount = document.querySelector('.product-count');
  7701. if (productCount) {
  7702. productCount.textContent = data.count;
  7703. }
  7705. console.log('Products sorted successfully!');
  7706. } else {
  7707. console.error('Sort failed:', data.message);
  7708. showNotification('Erreur lors du tri: ' + data.message, 'error');
  7710. // Recharger la page en cas d'erreur
  7711. window.location.reload();
  7712. }
  7713. }).catch(error => {
  7714. console.error('Sort request failed:', error);
  7715. showNotification('Erreur de connexion lors du tri', 'error');
  7717. // Recharger la page en cas d'erreur
  7718. window.location.reload();
  7719. });
  7720. };
  7722. // Attendre que le DOM soit chargé
  7723. console.log('Setting up event listeners...');
  7724. setTimeout(() => {
  7725. const sortSelect = document.getElementById('product-sort');
  7726. console.log('Sort select element:', sortSelect);
  7728. if (sortSelect) {
  7729. console.log('Adding change event listener...');
  7731. sortSelect.addEventListener('change', function () {
  7732. console.log('=== SELECT CHANGE EVENT TRIGGERED ===');
  7733. console.log('Selected value:', this.value);
  7734. console.log('Calling sortProducts...');
  7735. window.sortProducts(this.value);
  7736. });
  7738. console.log('Event listener added successfully');
  7739. } else {
  7740. console.error('Sort select element not found!');
  7741. console.log('Available elements with ID containing \"sort\":', document.querySelectorAll('[id*=\"sort\"]'));
  7742. console.log('Available elements with class containing \"form-select\":', document.querySelectorAll('.form-select'));
  7743. }
  7744. }, 100);
  7746. // Gestion du bouton \"Suivre\"
  7747. const followBtn = document.querySelector('.btn-shop');
  7748. if (followBtn) {
  7749. followBtn.addEventListener('click', function () {
  7750. if (this.innerHTML.includes('Suivre')) {
  7751. this.innerHTML = '<i class=\"lnr lnr-heart me-1\"></i> Suivi';
  7752. this.classList.remove('btn-shop');
  7753. this.classList.add('btn-success');
  7754. } else {
  7755. this.innerHTML = '<i class=\"lnr lnr-heart me-1\"></i> Suivre';
  7756. this.classList.remove('btn-success');
  7757. this.classList.add('btn-shop');
  7758. }
  7759. });
  7760. }
  7761. });
  7762. \t</script>
  7763. {% endblock %}
  7764. ", "home/shop.html.twig", "/home/u540977899/domains/maketou-ht.com/public_html/templates/home/shop.html.twig");
  7765.     }
  7766. }