templates/blo/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>{% block title %}BLO — Achat en ligne{% endblock %}</title>
  7.     <link rel="preconnect" href="https://fonts.googleapis.com">
  8.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  9.     <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
  10.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  11.     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
  12.     <style>
  13.         :root {
  14.             --blo-bg: #f7f9f6;
  15.             --blo-bg-white: #ffffff;
  16.             --blo-header-bg: #ffffff;
  17.             --blo-header-search-bg: #5db85b;
  18.             --blo-header-search-hover: #4cae4c;
  19.             --blo-nav-bg: #388e3c;
  20.             --blo-text: #333333;
  21.             --blo-text-muted: #777777;
  22.             --blo-link: #388e3c;
  23.             --blo-link-hover: #2e7d32;
  24.             --blo-price: #e53935;
  25.             --blo-border: #e0e0e0;
  26.             --blo-card-bg: #fff;
  27.             --blo-bg-card: #fff;
  28.             --blo-bg-elevated: #f3f3f3;
  29.             --blo-radius: 6px;
  30.         }
  31.         * { box-sizing: border-box; }
  32.         body { font-family: 'Nunito', -apple-system, sans-serif; background: var(--blo-bg); color: var(--blo-text); min-height: 100vh; display: flex; flex-direction: column; margin: 0; }
  33.         main { flex: 1 0 auto; }
  34.         a { color: var(--blo-link); text-decoration: none; }
  35.         a:hover { color: var(--blo-link-hover); }
  36.         /* Header type Greenweez */
  37.         .blo-header-top {
  38.             background: var(--blo-header-bg);
  39.             color: var(--blo-text);
  40.             padding: 0.5rem 0;
  41.             border-bottom: 1px solid var(--blo-border);
  42.         }
  43.         .blo-header-top .container { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
  44.         .blo-logo { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--blo-nav-bg) !important; font-weight: 700; font-size: 1.5rem; padding: 0.5rem 0.5rem 0.5rem 0; letter-spacing: 0.02em; }
  45.         .blo-logo:hover { color: var(--blo-link-hover) !important; opacity: 0.95; }
  46.         .blo-logo-icon { width: 36px; height: 36px; background: var(--blo-nav-bg); color: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
  47.         .blo-logo-text { line-height: 1; }
  48.         .blo-search-form { flex: 1; min-width: 200px; max-width: 600px; display: flex; border-radius: 50px; overflow: hidden; border: 2px solid var(--blo-header-search-bg); background: #fff;}
  49.         .blo-search-form .form-select { width: auto; min-width: 150px; border: none; border-radius: 50px 0 0 50px; background: transparent; font-size: 0.9rem; padding-right: 2rem; font-weight: 600; color: var(--blo-text-muted); }
  50.         .blo-search-form .form-select:focus { box-shadow: none; }
  51.         .blo-search-form .form-control { border: none; border-radius: 0; font-size: 0.95rem; box-shadow: none !important;}
  52.         .blo-search-form .btn-search { background: var(--blo-header-search-bg); border: none; padding: 0.5rem 1.25rem; color: #fff; border-radius: 0 50px 50px 0; font-weight: bold;}
  53.         .blo-search-form .btn-search:hover { background: var(--blo-header-search-hover); color: #fff; }
  54.         .blo-header-cart { color: var(--blo-text); display: flex; align-items: center; gap: 0.35rem; padding: 0.5rem; border-radius: var(--blo-radius); position: relative; }
  55.         .blo-header-cart:hover { color: var(--blo-link); outline: 1px solid var(--blo-border); }
  56.         .blo-header-cart i { font-size: 1.5rem; }
  57.         .blo-header-cart .blo-cart-badge { position: absolute; top: 2px; left: 50%; margin-left: 8px; min-width: 1.1rem; height: 1.1rem; padding: 0 0.25rem; font-size: 0.7rem; font-weight: 700; line-height: 1.1rem; text-align: center; background: var(--blo-header-search-bg); color: #fff; border-radius: 50%; }
  58.         .blo-header-cart .blo-cart-badge:empty { display: none; }
  59.         .blo-nav-bar { background: var(--blo-nav-bg); padding: 0.6rem 0; }
  60.         .blo-nav-bar .nav-link { color: rgba(255,255,255,0.95) !important; padding: 0.4rem 0.8rem !important; font-size: 0.95rem; font-weight: 600; transition: color 0.15s; }
  61.         .blo-nav-bar .nav-link:hover { color: #fff !important; background: rgba(255,255,255,0.1); border-radius: 20px;}
  62.         .blo-nav-bar .dropdown-menu { background: var(--blo-card-bg); border: 1px solid var(--blo-border); border-radius: var(--blo-radius); }
  63.         .blo-nav-bar .dropdown-item:hover { background: #f0f0f0; }
  64.         .blo-header-cat-btn { background: transparent !important; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; border-radius: var(--blo-radius); transition: background 0.15s; color: var(--blo-text) !important; }
  65.         .blo-header-cat-btn i { color: var(--blo-text); }
  66.         .blo-header-cat-btn:hover { background: rgba(0,0,0,0.05) !important; }
  67.         .blo-cat-dropdown .nav-link { background: rgba(255,255,255,0.1); border-radius: var(--blo-radius); font-weight: 600; }
  68.         .blo-cat-dropdown .nav-link:hover { background: rgba(255,255,255,0.2); }
  69.         .blo-cat-menu { min-width: 280px; padding: 0.5rem 0; max-height: 70vh; overflow-y: auto; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
  70.         .blo-cat-menu .dropdown-item { padding: 0.45rem 1rem; }
  71.         .blo-cat-menu .dropdown-item:active { background: var(--blo-header-search-bg); color: var(--blo-text); }
  72.         /* Cartes produit type Greenweez */
  73.         .blo-product-box {
  74.             background: var(--blo-card-bg);
  75.             padding: 1.5rem;
  76.             height: 100%;
  77.             border-radius: 12px;
  78.             transition: all 0.2s ease-in-out;
  79.             border: 1px solid #eaeaea;
  80.             position: relative;
  81.         }
  82.         .blo-product-box:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.06); border-color: transparent; transform: translateY(-3px); }
  83.         .blo-product-box .img-wrap { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; border-radius: 8px; position: relative; }
  84.         .blo-product-box .img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
  85.         .blo-product-box .img-wrap .bi-image { font-size: 2.5rem; opacity: 0.6; }
  86.         .blo-product-box { display: flex; flex-direction: column; }
  87.         .blo-product-box > a { display: flex !important; flex-direction: column; flex: 1; }
  88.         .blo-product-box .title { font-size: 0.95rem; line-height: 1.4; color: var(--blo-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; margin-bottom: 0.5rem; min-height: calc(0.95rem * 1.4 * 2); }
  89.         .blo-product-box .price { font-size: 1.15rem; font-weight: 800; color: var(--blo-text); margin: auto 0 0.5rem 0; padding-right: 60px; min-height: 40px; display: block; line-height: 1.2; white-space: normal; }
  90.         .blo-product-box .price del { display: block; font-size: 0.8rem; color: var(--blo-text-muted); font-weight: 500; margin: 0 0 2px 0; }
  91.         p.price, .blo-catalog-card .price { white-space: normal; }
  92.         
  93.         .blo-product-add-btn {
  94.             display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; 
  95.             background: var(--blo-header-search-bg); color: #fff; border-radius: 50%;
  96.             border: none; position: absolute; bottom: 1.5rem; right: 1.5rem; transition: background 0.2s;
  97.             box-shadow: 0 4px 6px rgba(93,184,91,0.25);
  98.         }
  99.         .blo-product-add-btn:hover { background: var(--blo-header-search-hover); color: #fff; transform: scale(1.05); }
  100.         .blo-section-box { background: var(--blo-card-bg); padding: 1.25rem; border-radius: var(--blo-radius); margin-bottom: 1.5rem; }
  101.         .blo-section-box h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--blo-text); }
  102.         .blo-footer { background: var(--blo-nav-bg); color: rgba(255,255,255,0.8); padding: 2rem 0 1rem; margin-top: 2rem; flex-shrink: 0; }
  103.         .blo-footer a { color: rgba(255,255,255,0.9); }
  104.         .blo-footer a:hover { color: #fff; text-decoration: underline; }
  105.         .blo-footer h6 { color: #fff; font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; }
  106.         .blo-footer ul { list-style: none; padding: 0; margin: 0; font-size: 0.85rem; }
  107.         .blo-footer ul li { margin-bottom: 0.35rem; }
  108.         .blo-footer-bottom { background: #131a22; padding: 1rem 0; margin-top: 1rem; font-size: 0.8rem; text-align: center; }
  109.         .form-control:focus, .form-select:focus { border-color: var(--blo-header-search-bg); box-shadow: 0 0 0 2px rgba(254,189,105,0.4); }
  110.         .btn-blo-primary { background: var(--blo-header-search-bg); color: var(--blo-text); border: none; font-weight: 600; padding: 0.5rem 1rem; border-radius: var(--blo-radius); }
  111.         .btn-blo-primary:hover { background: var(--blo-header-search-hover); color: var(--blo-text); }
  112.         .breadcrumb { background: transparent; font-size: 0.85rem; }
  113.         .breadcrumb-item a { color: var(--blo-link); }
  114.         .table thead th { background: #f3f3f3; font-weight: 600; }
  115.         .pagination .page-link { color: var(--blo-text); }
  116.         .pagination .page-item.active .page-link { background: var(--blo-header-bg); border-color: var(--blo-header-bg); }
  117.         .blo-card { background: var(--blo-card-bg); border: 1px solid var(--blo-border); border-radius: var(--blo-radius); }
  118.         .btn-blo-outline { background: transparent; color: var(--blo-text); border: 1px solid var(--blo-border); border-radius: var(--blo-radius); }
  119.         .btn-blo-outline:hover { border-color: var(--blo-header-search-bg); color: var(--blo-text); background: #fff8f0; }
  120.         .blo-section-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blo-text-muted); }
  121.         .blo-section-title { font-size: 1.25rem; font-weight: 700; color: var(--blo-text); }
  122.         .blo-kpi-card { background: var(--blo-card-bg); border: 1px solid var(--blo-border); border-radius: var(--blo-radius); padding: 1rem; }
  123.         .blo-kpi-card .label { font-size: 0.8rem; color: var(--blo-text-muted); }
  124.         .blo-kpi-card .value { font-weight: 700; font-size: 1.25rem; }
  126.         /* ============================================
  127.            BOUTONS MULTI-COLOR 3D (BLO)
  128.            N'affecte PAS les menus (header, navbar, dropdowns, search)
  129.            Cible uniquement les boutons dans <main> et les formulaires
  130.            ============================================ */
  131.         main .btn:not(.blo-product-add-btn):not(.btn-search),
  132.         main button.btn:not(.blo-product-add-btn):not(.btn-search),
  133.         main a.btn:not(.blo-product-add-btn):not(.btn-search),
  134.         main input.btn:not(.blo-product-add-btn):not(.btn-search),
  135.         main button[type="submit"]:not(.blo-product-add-btn):not(.btn-search),
  136.         main input[type="submit"]:not(.blo-product-add-btn):not(.btn-search),
  137.         .blo-card .btn:not(.blo-product-add-btn):not(.btn-search),
  138.         .blo-section-box .btn:not(.blo-product-add-btn):not(.btn-search),
  139.         .blo-product-box .btn:not(.blo-product-add-btn):not(.btn-search) {
  140.             background: linear-gradient(135deg, #4169E1 0%, #8B00FF 50%, #8B4513 100%) !important;
  141.             color: #FFFFFF !important;
  142.             border: none !important;
  143.             border-radius: 6px !important;
  144.             padding: 8px 18px !important;
  145.             font-weight: 600 !important;
  146.             text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
  147.             box-shadow:
  148.                 0 4px 0 #2c3e50,
  149.                 0 6px 8px rgba(0, 0, 0, 0.3),
  150.                 inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  151.             transition: all 0.15s ease-in-out !important;
  152.             transform: translateY(0) !important;
  153.             position: relative !important;
  154.         }
  155.         main .btn:hover,
  156.         main button.btn:hover,
  157.         main a.btn:hover,
  158.         .blo-card .btn:hover,
  159.         .blo-section-box .btn:hover,
  160.         .blo-product-box .btn:hover {
  161.             background: linear-gradient(135deg, #5a7af0 0%, #a020f0 50%, #a0522d 100%) !important;
  162.             color: #FFFFFF !important;
  163.             transform: translateY(-2px) !important;
  164.             box-shadow:
  165.                 0 6px 0 #2c3e50,
  166.                 0 10px 14px rgba(0, 0, 0, 0.35),
  167.                 inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  168.         }
  169.         main .btn:active,
  170.         main button.btn:active,
  171.         main a.btn:active,
  172.         .blo-card .btn:active,
  173.         .blo-section-box .btn:active,
  174.         .blo-product-box .btn:active {
  175.             transform: translateY(3px) !important;
  176.             box-shadow:
  177.                 0 1px 0 #2c3e50,
  178.                 0 2px 4px rgba(0, 0, 0, 0.3),
  179.                 inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  180.         }
  182.         /* Variantes de couleur 3D */
  183.         main .btn-success, .blo-card .btn-success {
  184.             background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
  185.             box-shadow: 0 4px 0 #0a5d56, 0 6px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4) !important;
  186.         }
  187.         main .btn-danger, .blo-card .btn-danger {
  188.             background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%) !important;
  189.             box-shadow: 0 4px 0 #8b1a1a, 0 6px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4) !important;
  190.         }
  191.         main .btn-warning, .blo-card .btn-warning {
  192.             background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%) !important;
  193.             box-shadow: 0 4px 0 #7a4a00, 0 6px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4) !important;
  194.         }
  195.         main .btn-info, .blo-card .btn-info {
  196.             background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%) !important;
  197.             box-shadow: 0 4px 0 #003a80, 0 6px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4) !important;
  198.         }
  199.         main .btn-primary, .blo-card .btn-primary {
  200.             background: linear-gradient(135deg, #4169E1 0%, #8B00FF 100%) !important;
  201.             box-shadow: 0 4px 0 #1d2d6b, 0 6px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4) !important;
  202.         }
  203.         main .btn-secondary, .blo-card .btn-secondary {
  204.             background: linear-gradient(135deg, #654ea3 0%, #eaafc8 100%) !important;
  205.             box-shadow: 0 4px 0 #3a2a60, 0 6px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4) !important;
  206.         }
  208.         /* Sécurité : annuler tout style 3D dans les menus / header / navbar / dropdowns */
  209.         .blo-header-top .btn,
  210.         .blo-header-top button,
  211.         .blo-nav-bar .btn,
  212.         .blo-nav-bar button,
  213.         .navbar .btn,
  214.         .navbar button,
  215.         .dropdown-menu .btn,
  216.         .dropdown-menu button,
  217.         .blo-search-form .btn,
  218.         .blo-search-form button,
  219.         .blo-header-cat-btn,
  220.         .blo-product-add-btn {
  221.             background-image: none;
  222.             box-shadow: none !important;
  223.             transform: none !important;
  224.             text-shadow: none !important;
  225.         }
  226.         /* Garder le bouton rond "+" vert des produits intact */
  227.         .blo-product-add-btn {
  228.             background: var(--blo-header-search-bg) !important;
  229.             color: #fff !important;
  230.             border-radius: 50% !important;
  231.             padding: 0 !important;
  232.             position: absolute !important;
  233.             bottom: 1.5rem !important;
  234.             right: 1.5rem !important;
  235.             left: auto !important;
  236.             top: auto !important;
  237.             width: 40px !important;
  238.             height: 40px !important;
  239.             display: flex !important;
  240.             align-items: center !important;
  241.             justify-content: center !important;
  242.             border: none !important;
  243.             box-shadow: 0 4px 6px rgba(93,184,91,0.25) !important;
  244.             text-shadow: none !important;
  245.             font-weight: normal !important;
  246.         }
  247.         .blo-product-add-btn:hover {
  248.             background: var(--blo-header-search-hover) !important;
  249.         }
  250.         /* Garder le bouton de recherche vert */
  251.         .blo-search-form .btn-search {
  252.             background: var(--blo-header-search-bg) !important;
  253.             color: #fff !important;
  254.             border-radius: 0 50px 50px 0 !important;
  255.         }
  256.         .blo-search-form .btn-search:hover {
  257.             background: var(--blo-header-search-hover) !important;
  258.         }
  260.         /* ============================================
  261.            FOOTER MULTI-COLOR 3D (BLO)
  262.            ============================================ */
  263.         .blo-footer {
  264.             background: linear-gradient(135deg, #4169E1 0%, #8B00FF 25%, #ff416c 50%, #f7971e 75%, #11998e 100%) !important;
  265.             background-size: 200% 200% !important;
  266.             animation: bloFooterGradient 8s ease infinite !important;
  267.             color: #FFFFFF !important;
  268.             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
  269.             border-top: 3px solid rgba(255, 255, 255, 0.3) !important;
  270.             box-shadow:
  271.                 0 -4px 0 rgba(0, 0, 0, 0.3),
  272.                 0 -8px 20px rgba(0, 0, 0, 0.4),
  273.                 inset 0 2px 0 rgba(255, 255, 255, 0.4),
  274.                 inset 0 -2px 0 rgba(0, 0, 0, 0.3) !important;
  275.             letter-spacing: 0.5px !important;
  276.         }
  277.         .blo-footer h6,
  278.         .blo-footer a,
  279.         .blo-footer ul li,
  280.         .blo-footer p,
  281.         .blo-footer span {
  282.             color: #FFFFFF !important;
  283.             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
  284.         }
  285.         .blo-footer-bottom {
  286.             background: rgba(0, 0, 0, 0.35) !important;
  287.             color: #FFFFFF !important;
  288.             text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  289.         }
  290.         @keyframes bloFooterGradient {
  291.             0%   { background-position: 0% 50%; }
  292.             50%  { background-position: 100% 50%; }
  293.             100% { background-position: 0% 50%; }
  294.         }
  295.     </style>
  296.     {% block stylesheets %}{% endblock %}
  297. </head>
  298. <body>
  299.     <header class="blo-header-top">
  300.         <div class="container">
  301.             <a class="blo-logo" href="{{ path('app_blo_home_index') }}" aria-label="BLO Accueil">
  302.                 {% set site_logo = blo_logo() %}
  303.                 {% if site_logo %}
  304.                     <img src="{{ site_logo }}" alt="BLO" style="max-height: 60px; max-width: 250px; object-fit: contain;">
  305.                 {% else %}
  306.                     <span class="blo-logo-icon"><i class="bi bi-bag-heart-fill"></i></span>
  307.                     <span class="blo-logo-text">BLO</span>
  308.                 {% endif %}
  309.             </a>
  310.             <div class="dropdown d-none d-md-inline-block">
  311.                 <button class="btn btn-sm text-white border-0 dropdown-toggle py-1 px-2 blo-header-cat-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
  312.                     <i class="bi bi-list" style="font-size: 1.2rem;"></i>
  313.                 </button>
  314.                 <ul class="dropdown-menu blo-cat-menu">
  315.                     <li><a class="dropdown-item fw-semibold" href="{{ path('blo_catalog') }}"><i class="bi bi-grid me-2"></i>Toutes les catégories</a></li>
  316.                     {% set headerCats = blo_nav_categories() %}
  317.                     {% if headerCats|length > 0 %}
  318.                     <li><hr class="dropdown-divider my-1"></li>
  319.                     {% for cat in headerCats %}
  320.                     <li>
  321.                         <a class="dropdown-item d-flex align-items-center" href="{{ path('blo_catalog', { category: cat.id }) }}">
  322.                             <strong>{{ cat.name }}</strong>
  323.                         </a>
  324.                     </li>
  325.                     {% if cat.children|length > 0 %}
  326.                     {% for sub in cat.children %}
  327.                     <li>
  328.                         <a class="dropdown-item text-muted" href="{{ path('blo_catalog', { category: sub.id }) }}" style="font-size: 0.85rem; padding-left: 2rem;">
  329.                             {{ sub.name }}
  330.                         </a>
  331.                     </li>
  332.                     {% endfor %}
  333.                     {% endif %}
  334.                     {% endfor %}
  335.                     {% endif %}
  336.                 </ul>
  337.             </div>
  338.             <form action="{{ path('blo_catalog') }}" method="get" class="blo-search-form">
  339.                 <select name="category" class="form-select" aria-label="Catégorie">
  340.                     <option value="" {{ app.request.query.get('category') == '' ? 'selected' }}>Toutes catégories</option>
  341.                     {% for cat in blo_nav_categories() %}
  342.                     <option value="{{ cat.id }}" {{ app.request.query.getInt('category') == cat.id ? 'selected' }}>{{ cat.name }}</option>
  343.                     {% endfor %}
  344.                 </select>
  345.                 <input type="search" name="q" class="form-control" placeholder="Rechercher sur BLO" value="{{ app.request.query.get('q', '') }}" aria-label="Recherche">
  346.                 <button type="submit" class="btn btn-search"><i class="bi bi-search"></i></button>
  347.             </form>
  348.             <div class="dropdown d-none d-md-inline-block">
  349.                 <button class="btn btn-sm border-0 dropdown-toggle py-1 px-2" type="button" data-bs-toggle="dropdown" aria-expanded="false" style="background: transparent; font-size: 0.85rem; color: var(--blo-text);">
  350.                     <i class="bi bi-currency-exchange me-1"></i>{{ blo_currency_label(blo_current_currency) }}
  351.                 </button>
  352.                 <ul class="dropdown-menu dropdown-menu-end" style="min-width: 220px;">
  353.                     <li class="px-3 py-1"><small class="text-muted fw-semibold">Choisir une devise</small></li>
  354.                     <li><hr class="dropdown-divider my-1"></li>
  355.                     {% for code, label in blo_currencies %}
  356.                     <li>
  357.                         <form action="{{ path('blo_currency_switch') }}" method="post" class="d-inline w-100">
  358.                             <input type="hidden" name="currency" value="{{ code }}">
  359.                             <button type="submit" class="dropdown-item d-flex justify-content-between align-items-center{{ blo_current_currency == code ? ' active' : '' }}">
  360.                                 <span>{{ blo_currency_label(code) }} <small class="text-muted">— {{ label }}</small></span>
  361.                                 {% if blo_current_currency == code %}<i class="bi bi-check-lg"></i>{% endif %}
  362.                             </button>
  363.                         </form>
  364.                     </li>
  365.                     {% endfor %}
  366.                 </ul>
  367.             </div>
  368.             {% set cart_count = blo_cart_count() %}
  369.             <a href="{{ path('blo_cart') }}" class="blo-header-cart" aria-label="Panier ({{ cart_count }} article{{ cart_count > 1 ? 's' : '' }})">
  370.                 <span class="position-relative">
  371.                     <i class="bi bi-cart3"></i>
  372.                     {% if cart_count > 0 %}
  373.                     <span class="blo-cart-badge">{{ cart_count > 99 ? '99+' : cart_count }}</span>
  374.                     {% endif %}
  375.                 </span>
  376.                 <span class="d-none d-md-inline">Panier{% if cart_count > 0 %} ({{ cart_count }}){% endif %}</span>
  377.             </a>
  378.         </div>
  379.     </header>
  380.     <nav class="navbar navbar-expand-lg navbar-dark blo-nav-bar py-0">
  381.         <div class="container">
  382.             <button class="navbar-toggler border-light" type="button" data-bs-toggle="collapse" data-bs-target="#bloNav" aria-label="Menu"><span class="navbar-toggler-icon"></span></button>
  383.             <div class="collapse navbar-collapse" id="bloNav">
  384.                 <ul class="navbar-nav me-auto">
  385.                     <li class="nav-item"><a class="nav-link" href="{{ path('app_blo_home_index') }}">Accueil</a></li>
  386.                     <li class="nav-item"><a class="nav-link" href="{{ path('blo_catalog') }}">Catalogue</a></li>
  387.                     <li class="nav-item dropdown blo-cat-dropdown">
  388.                         <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-grid-fill me-1"></i>Toutes les catégories</a>
  389.                         <ul class="dropdown-menu blo-cat-menu">
  390.                             <li><a class="dropdown-item fw-semibold" href="{{ path('blo_catalog') }}"><i class="bi bi-grid me-2"></i>Toutes les catégories</a></li>
  391.                             {% set navCats = blo_nav_categories() %}
  392.                             {% if navCats|length > 0 %}
  393.                             <li><hr class="dropdown-divider my-1"></li>
  394.                             {% for cat in navCats %}
  395.                             <li>
  396.                                 <a class="dropdown-item d-flex align-items-center" href="{{ path('blo_catalog', { category: cat.id }) }}">
  397.                                     <i class="bi bi-chevron-right me-2 text-muted" style="font-size: 0.7rem;"></i>
  398.                                     <strong>{{ cat.name }}</strong>
  399.                                 </a>
  400.                             </li>
  401.                             {% if cat.children|length > 0 %}
  402.                             {% for sub in cat.children %}
  403.                             <li>
  404.                                 <a class="dropdown-item ps-5 text-muted" href="{{ path('blo_catalog', { category: sub.id }) }}" style="font-size: 0.85rem;">
  405.                                     {{ sub.name }}
  406.                                 </a>
  407.                             </li>
  408.                             {% endfor %}
  409.                             {% endif %}
  410.                             {% endfor %}
  411.                             {% endif %}
  412.                         </ul>
  413.                     </li>
  414.                     <li class="nav-item"><a class="nav-link" href="{{ path('blo_catalog') }}?promo=1">Promotions</a></li>
  415.                     <li class="nav-item"><a class="nav-link" href="{{ path('blo_catalog') }}?newest=1">Nouveautés</a></li>
  416.                     {% if is_granted('ROLE_ADMIN') %}
  417.                     <li class="nav-item"><a class="nav-link" href="{{ path('blo_admin_dashboard') }}">Admin</a></li>
  418.                     {% endif %}
  419.                     <li class="nav-item"><a class="nav-link" href="{{ path('blo_contact') }}">Contact</a></li>
  420.                     <li class="nav-item"><a class="nav-link" href="{{ path('blo_faq') }}">FAQ</a></li>
  421.                 </ul>
  422.                 <ul class="navbar-nav">
  423.                     <li class="nav-item dropdown d-md-none">
  424.                         <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"><i class="bi bi-currency-exchange me-1"></i>{{ blo_currency_label(blo_current_currency) }}</a>
  425.                         <ul class="dropdown-menu">
  426.                             {% for code, label in blo_currencies %}
  427.                             <li>
  428.                                 <form action="{{ path('blo_currency_switch') }}" method="post" class="d-inline w-100">
  429.                                     <input type="hidden" name="currency" value="{{ code }}">
  430.                                     <button type="submit" class="dropdown-item{{ blo_current_currency == code ? ' active' : '' }}">{{ blo_currency_label(code) }} — {{ label }}</button>
  431.                                 </form>
  432.                             </li>
  433.                             {% endfor %}
  434.                         </ul>
  435.                     </li>
  436.                     {% if app.user %}
  437.                     <li class="nav-item dropdown">
  438.                         {% set displayName = (app.user.prenom|default('') ~ ' ' ~ app.user.name|default(''))|trim %}
  439.                         {% if displayName == '' %}{% set displayName = app.user.userIdentifier %}{% endif %}
  440.                         <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">{{ displayName }}</a>
  441.                         <ul class="dropdown-menu dropdown-menu-end">
  442.                             <li><a class="dropdown-item" href="{{ path('blo_orders') }}">Mes commandes</a></li>
  443.                             <li><a class="dropdown-item" href="{{ path('blo_account_change_password') }}"><i class="bi bi-key me-2"></i>Changer mon mot de passe</a></li>
  444.                             <li><hr class="dropdown-divider"></li>
  445.                             <li><a class="dropdown-item" href="{{ path('app_logout') }}">Déconnexion</a></li>
  446.                         </ul>
  447.                     </li>
  448.                     {% else %}
  449.                     <li class="nav-item"><a class="nav-link" href="{{ path('login') }}">Connexion</a></li>
  450.                     <li class="nav-item"><a class="nav-link" href="{{ path('blo_register') }}">Inscription</a></li>
  451.                     {% endif %}
  452.                 </ul>
  453.             </div>
  454.         </div>
  455.     </nav>
  457.     <main class="py-3">
  458.         {% for type, messages in app.flashes %}
  459.             {% for msg in messages %}
  460.             <div class="container mb-2">
  461.                 <div class="alert alert-{{ type == 'error' ? 'danger' : type }} alert-dismissible fade show py-2" role="alert">
  462.                     {{ msg }}
  463.                     <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="alert"></button>
  464.                 </div>
  465.             </div>
  466.             {% endfor %}
  467.         {% endfor %}
  468.         {% block body %}{% endblock %}
  469.     </main>
  471.     <footer class="blo-footer">
  472.         <div class="container">
  473.             <div class="row g-4">
  474.                 <div class="col-6 col-md-3">
  475.                     <h6>À propos</h6>
  476.                     <ul>
  477.                         <li><a href="{{ path('blo_contact') }}">Contact</a></li>
  478.                         <li><a href="{{ path('blo_faq') }}">FAQ</a></li>
  479.                         <li><a href="{{ path('blo_cgu') }}">CGU</a></li>
  480.                         <li><a href="{{ path('blo_confidentialite') }}">Confidentialité</a></li>
  481.                     </ul>
  482.                 </div>
  483.                 <div class="col-6 col-md-3">
  484.                     <h6>Compte</h6>
  485.                     <ul>
  486.                         <li><a href="{{ path('blo_orders') }}">Mes commandes</a></li>
  487.                         <li><a href="{{ path('blo_cart') }}">Panier</a></li>
  488.                         {% if not app.user %}<li><a href="{{ path('login') }}">Connexion</a></li>{% endif %}
  489.                     </ul>
  490.                 </div>
  491.                 <div class="col-6 col-md-3">
  492.                     <h6>Langue & devise</h6>
  493.                     <p class="small mb-2">Français · {{ blo_currency_label(blo_current_currency) }}</p>
  494.                     <form action="{{ path('blo_currency_switch') }}" method="post">
  495.                         <select name="currency" class="form-select form-select-sm bg-dark text-white border-secondary" style="max-width: 180px; font-size: 0.8rem;" onchange="this.form.submit()">
  496.                             {% for code, label in blo_currencies %}
  497.                             <option value="{{ code }}" {{ blo_current_currency == code ? 'selected' : '' }}>{{ blo_currency_label(code) }} — {{ label }}</option>
  498.                             {% endfor %}
  499.                         </select>
  500.                     </form>
  501.                 </div>
  502.             </div>
  503.             <div class="blo-footer-bottom">
  504.                 &copy; {{ 'now'|date('Y') }} GLOBAL BUSINESS AFRICA. Tous droits réservés.
  505.             </div>
  506.         </div>
  507.     </footer>
  509.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  510.     {% block javascripts %}{% endblock %}
  512.     <!-- WhatsApp Chatbox Widget -->
  513.     <div style="position:fixed;bottom:24px;right:24px;z-index:999999;font-family:Segoe UI,sans-serif;">
  514.         <!-- Popup -->
  515.         <div id="wachat-popup" style="display:none;position:absolute;bottom:75px;right:0;width:320px;border-radius:16px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,0.25);">
  516.             <div style="background:#075E54;padding:14px 16px;display:flex;align-items:center;gap:12px;">
  517.                 <div style="width:44px;height:44px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
  518.                     <svg viewBox="0 0 24 24" style="width:26px;height:26px;fill:white;"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
  519.                 </div>
  520.                 <div style="flex:1;">
  521.                     <strong style="display:block;font-size:15px;color:white;">DONDONROU</strong>
  522.                     <span style="font-size:12px;color:#b2dfdb;">&#x25cf; En ligne</span>
  523.                 </div>
  524.                 <span onclick="document.getElementById('wachat-popup').style.display='none'" style="cursor:pointer;font-size:22px;color:rgba(255,255,255,0.8);line-height:1;">&times;</span>
  525.             </div>
  526.             <div style="background:#ECE5DD;padding:16px;">
  527.                 <div style="background:white;border-radius:0 10px 10px 10px;padding:10px 14px;font-size:13.5px;color:#333;line-height:1.5;box-shadow:0 1px 3px rgba(0,0,0,0.1);">
  528.                     Bonjour !<br>Comment pouvons-nous vous aider ? Envoyez-nous un message sur WhatsApp.
  529.                 </div>
  530.                 <div style="text-align:right;font-size:11px;color:#888;margin-top:4px;">Maintenant</div>
  531.                 <a href="https://wa.me/22378614333?text=Bonjour%2C%20je%20souhaite%20avoir%20plus%20d%27informations."
  532.                    target="_blank" rel="noopener noreferrer"
  533.                    style="display:block;margin-top:14px;background:#25D366;color:white;text-align:center;padding:10px;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none;">
  534.                     Demarrer la conversation
  535.                 </a>
  536.             </div>
  537.         </div>
  538.         <!-- Bouton flottant -->
  539.         <div onclick="var p=document.getElementById('wachat-popup');var b=document.getElementById('wachat-badge');if(p.style.display==='block'){p.style.display='none'}else{p.style.display='block';if(b)b.style.display='none'}"
  540.              style="position:relative;width:60px;height:60px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px rgba(37,211,102,0.5);">
  541.             <div id="wachat-badge" style="position:absolute;top:-4px;right:-4px;background:#ff3b30;color:white;font-size:11px;font-weight:bold;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;">1</div>
  542.             <svg viewBox="0 0 24 24" style="width:34px;height:34px;fill:white;"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
  543.         </div>
  544.     </div>
  546. </body>
  547. </html>