astro-island,astro-slot,astro-static-slot{display:contents}
#fern-toc,#fern-sidebar[data-state="sticky"],#fern-sidebar[data-state="fixed"],#fern-sidebar-spacer{visibility:hidden;width:0;overflow:hidden;display:none;}.fern-main:has(>#fern-sidebar[data-viewport="desktop"][data-state="sticky"]){min-height:0!important;}

        .product-browser {
          width: 100%;
          padding: 2rem 0;
        }

        .browser-header {
          margin-bottom: 2rem;
        }

        .browser-title {
          font-size: 28px;
          font-weight: 700;
          margin-bottom: 1.5rem;
          color: var(--nv-color-text, #000);
        }

        .dark .browser-title {
          color: var(--nv-color-white, #fff);
        }

        .search-container {
          position: relative;
          max-width: 100%;
        }

        .search-icon {
          position: absolute;
          left: 1rem;
          top: 50%;
          transform: translateY(-50%);
          color: var(--nv-light-grey-5, #999);
          pointer-events: none;
        }

        .search-input {
          width: 100%;
          padding: 0.625rem 1rem 0.625rem 3rem;
          background-color: var(--nv-color-bg-default, #fff);
          border: 1px solid var(--border, #ddd);
          border-radius: 30px;
          font-size: 16px;
          color: var(--nv-color-text, #000);
          outline: none;
          transition: all 0.2s ease;
        }

        .dark .search-input {
          background-color: var(--nv-dark-grey-2, #1a1a1a);
          border-color: var(--nv-dark-grey-4, #333);
          color: var(--nv-color-white, #fff);
        }

        .search-input:focus {
          border-color: var(--nv-color-green, #76B900);
          box-shadow: 0 0 0 2px rgba(118, 185, 0, 0.1);
        }

        .search-input::placeholder {
          color: var(--nv-light-grey-5, #999);
        }

        .selected-filters {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: 1rem;
          margin-top: 1rem;
        }

        .filter-pills-wrapper {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;
          flex: 1;
          min-width: 0;
        }

        .filter-pill {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.375rem 0.75rem;
          background: var(--accent-a3, rgba(118, 185, 0, 0.20));
          border: 0.973px solid var(--accent-a6, rgba(118, 185, 0, 0.50));
          border-radius: 6.25rem;
          color: var(--accent-a11, #76B900);
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .filter-pill:hover {
          background: var(--accent-a4, rgba(118, 185, 0, 0.30));
          border-color: var(--accent-a7, rgba(118, 185, 0, 0.65));
        }

        .filter-pill svg {
          flex-shrink: 0;
        }

        .clear-filters-btn {
          padding: 0.375rem 0.75rem;
          background-color: transparent;
          border-radius: 6.25rem;
          color: var(--nv-color-text, #000);
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .dark .clear-filters-btn {
          border-color: var(--nv-dark-grey-4, #333);
          color: var(--nv-color-white, #fff);
        }

        .clear-filters-btn:hover {
          border-color: var(--nv-color-green, #76B900);
          color: var(--nv-color-green, #76B900);
        }

        .browser-content {
          display: flex;
          gap: 2rem;
          margin-top: 2rem;
        }

        .browser-sidebar {
          width: 240px;
          flex-shrink: 0;
          overflow-y: auto;
          max-height: 100vh;
          padding-right: 1rem;
          scrollbar-width: thin;
          scrollbar-color: transparent transparent;
          transition: scrollbar-color 0.2s ease;
        }

        .browser-sidebar:hover {
          scrollbar-color: var(--nv-light-grey-4, #ccc) transparent;
        }

        .dark .browser-sidebar:hover {
          scrollbar-color: var(--nv-dark-grey-4, #333) transparent;
        }

        .browser-sidebar::-webkit-scrollbar {
          width: 6px;
        }

        .browser-sidebar::-webkit-scrollbar-track {
          background: transparent;
        }

        .browser-sidebar::-webkit-scrollbar-thumb {
          background: transparent;
          border-radius: 3px;
          transition: background 0.2s ease;
        }

        .browser-sidebar:hover::-webkit-scrollbar-thumb {
          background: var(--nv-light-grey-4, #ccc);
        }

        .dark .browser-sidebar:hover::-webkit-scrollbar-thumb {
          background: var(--nv-dark-grey-4, #333);
        }

        .browser-main {
          flex: 1;
          min-width: 0;
        }

        .filter-group {
          margin-bottom: 1.5rem;
        }

        .filter-group-header {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0.75rem 0;
          background: none;
          border: none;
          font-size: 16px;
          font-weight: 600;
          color: var(--nv-color-text, #000);
          cursor: pointer;
          text-align: left;
        }

        .dark .filter-group-header {
          color: var(--nv-color-white, #fff);
        }

        .filter-group-header svg {
          color: var(--nv-light-grey-5, #999);
        }

        .filter-group-items {
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
          margin-top: 0.5rem;
        }

        .filter-item {
          padding: 0.375rem 0.75rem;
          background: transparent;
          border: none;
          border-radius: 6px;
          color: var(--nv-color-text, #000);
          font-size: 14px;
          font-weight: 600;
          text-align: left;
          cursor: pointer;
          transition: color 0.2s ease;
        }

        .dark .filter-item {
          color: var(--nv-light-grey-2, #eee);
        }

        .filter-item:hover {
          background-color: transparent;
          color: var(--nv-color-green, #76B900);
        }

        .filter-item.active {
          background-color: transparent;
          color: var(--nv-color-green, #76B900);
        }

        .products-grid {
          display: grid;
          gap: 1.5rem;
          margin-bottom: 2rem;
          grid-auto-rows: 1fr;
        }

        @media (max-width: 1024px) {
          .products-grid {
            grid-template-columns: 1fr !important;
          }
        }

        .product-card {
          display: flex;
          flex-direction: column;
          gap: 1rem;
          padding: 1.5rem;
          background-color: var(--nv-color-bg-default, #fff);
          border: 1px solid var(--border, #ddd);
          border-radius: 12px;
          text-decoration: none;
          transition: all 0.2s ease;
          cursor: pointer;
          height: 100%;
          min-width: 280px;
        }

        .dark .product-card {
          background-color: var(--nv-dark-grey-2, #1a1a1a);
          border-color: var(--nv-dark-grey-4, #333);
        }

        .product-card:hover {
          border-color: var(--nv-color-green, #76B900);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          transform: translateY(-2px);
        }

        .dark .product-card:hover {
          box-shadow: 0 4px 12px rgba(118, 185, 0, 0.2);
        }

        .card-icon {
          flex-shrink: 0;
          width: 48px;
          height: 48px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: var(--nv-light-grey-1, #f7f7f7);
          border-radius: 8px;
          align-self: flex-start;
          font-size: 24px;
          color: var(--nv-color-green, #76B900);
        }

        .dark .card-icon {
          background-color: var(--nv-dark-grey-3, #222);
        }

        .card-icon i {
          line-height: 1;
        }

        .card-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          min-height: 0;
        }

        .card-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
        }

        .card-title {
          font-size: 16px;
          font-weight: 600;
          color: var(--nv-color-text, #000);
          margin: 0;
        }

        .dark .card-title {
          color: var(--nv-color-white, #fff);
        }

        .card-description {
          font-size: 14px;
          color: var(--nv-light-grey-5, #999);
          margin: 0;
          line-height: 1.4;
        }

        .dark .card-description {
          color: var(--nv-dark-grey-5, #666);
        }

        .card-tags {
          display: flex;
          gap: 0.5rem;
          flex-wrap: wrap;
          margin-top: 0.25rem;
        }

        .tag {
          padding: 0.25rem 0.625rem;
          font-size: 12px;
          font-weight: 500;
          border-radius: var(--rounded);
          border: 1px solid var(--nv-light-grey-3, #ddd);
          color: var(--nv-color-text, #000);
          background-color: transparent;
        }

        .dark .tag {
          border-color: var(--nv-dark-grey-4, #333);
          color: var(--nv-color-white, #fff);
        }

        .no-results {
          text-align: center;
          padding: 4rem 2rem;
          color: var(--nv-light-grey-5, #999);
        }

        .dark .no-results {
          color: var(--nv-dark-grey-5, #666);
        }

        .load-more-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 1rem;
          margin-top: 3rem;
        }

        .load-more-button {
          display: flex;
          align-items: center;
          padding: 0.3rem 0.5rem;
          background-color: transparent;
          border: 1px solid var(--border, #ddd);
          border-radius: var(--rounded);
          color: var(--nv-color-text, #000);
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .dark .load-more-button {
          border-color: var(--nv-dark-grey-4, #333);
          color: var(--nv-color-white, #fff);
        }

        .load-more-button:hover {
          border-color: var(--nv-color-green, #76B900);
          background-color: rgba(118, 185, 0, 0.05);
          color: var(--nv-color-green, #76B900);
        }

        .results-count {
          font-size: 14px;
          color: var(--nv-light-grey-5, #999);
          margin: 0;
        }

        .dark .results-count {
          color: var(--nv-dark-grey-5, #666);
        }

        /* Contrôles de Filtre Mobile */
        .mobile-filter-controls {
          display: none;
          margin-bottom: 1.5rem;
        }

        .mobile-filters-button {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.375rem 0.75rem;
          background-color: transparent;
          border: 1px solid var(--border, #ddd);
          border-radius: 8px;
          color: var(--nv-color-text, #000);
          font-size: 12px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .dark .mobile-filters-button {
          border-color: var(--nv-dark-grey-4, #333);
          color: var(--nv-color-white, #fff);
        }

        .mobile-filters-button:hover {
          border-color: var(--nv-color-green, #76B900);
        }

        .filter-badge {
          display: flex;
          align-items: center;
          justify-content: center;
          min-width: 20px;
          height: 20px;
          padding: 0 6px;
          background-color: var(--nv-color-green, #76B900);
          color: white;
          border-radius: 10px;
          font-size: 12px;
          font-weight: 700;
        }

        .mobile-filters-overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(0, 0, 0, 0.5);
          z-index: 999;
          animation: fadeIn 0.2s ease;
        }

        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }

        @keyframes slideUp {
          from { transform: translateY(100%); }
          to { transform: translateY(0); }
        }

        .mobile-filters-modal {
          position: fixed;
          left: 0;
          right: 0;
          bottom: 0;
          max-height: 85vh;
          height: auto;
          background-color: var(--nv-color-bg-default, #fff);
          border-radius: 16px 16px 0 0;
          z-index: 1000;
          display: flex;
          flex-direction: column;
          animation: slideUp 0.3s ease;
          box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        }

        .dark .mobile-filters-modal {
          background-color: var(--nv-dark-grey-1, #111);
        }

        .modal-header {
          flex-shrink: 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 1.5rem;
          border-bottom: 1px solid var(--border, #ddd);
        }

        .dark .modal-header {
          border-bottom-color: var(--nv-dark-grey-4, #333);
        }

        .modal-header h3 {
          margin: 0;
          font-size: 20px;
          font-weight: 700;
          color: var(--nv-color-text, #000);
        }

        .dark .modal-header h3 {
          color: var(--nv-color-white, #fff);
        }

        .close-filters-button {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          background: transparent;
          border: none;
          color: var(--nv-light-grey-5, #999);
          cursor: pointer;
          transition: color 0.2s ease;
        }

        .close-filters-button:hover {
          color: var(--nv-color-text, #000);
        }

        .dark .close-filters-button:hover {
          color: var(--nv-color-white, #fff);
        }

        .modal-content {
          flex: 1 1 auto;
          overflow-y: auto;
          overflow-x: hidden;
          padding: 0 1.5rem;
          min-height: 0;
          -webkit-overflow-scrolling: touch;
        }
        


        .modal-footer {
          flex-shrink: 0;
          padding: 1rem 1.5rem;
          padding-bottom: max(1rem, env(safe-area-inset-bottom));
          border-top: 1px solid var(--border, #ddd);
          background-color: var(--nv-color-bg-default, #fff);
        }

        .dark .modal-footer {
          border-top-color: var(--nv-dark-grey-4, #333);
          background-color: var(--nv-dark-grey-1, #111);
        }

        .apply-filters-button {
          width: 100%;
          padding: 0.875rem 1rem;
          background-color: transparent;
          border: 1px solid var(--border, #ddd);
          border-radius: 8px;
          color: var(--nv-color-text, #000);
          font-size: 16px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
          text-transform: uppercase;
          touch-action: manipulation;
        }

        .dark .apply-filters-button {
          border-color: var(--nv-dark-grey-4, #333);
          color: var(--nv-color-white, #fff);
        }

        .apply-filters-button:hover {
          border-color: var(--nv-color-green, #76B900);
          background-color: rgba(118, 185, 0, 0.05);
          color: var(--nv-color-green, #76B900);
        }
        
        .apply-filters-button:active {
          transform: scale(0.98);
        }

        @media (max-width: 1024px) {
          .browser-content {
            flex-direction: column;
          }

          .mobile-filter-controls {
            display: block;
          }

          .desktop-sidebar {
            display: none !important;
          }

          .filter-pill {
            padding: 0.25rem 0.5rem;
            font-size: 12px;
            gap: 0.375rem;
            border-radius: 6.25rem;
          }

          .filter-pill svg {
            width: 12px;
            height: 12px;
          }

          .clear-filters-btn {
            padding: 0.25rem 0.5rem;
            font-size: 12px;
            white-space: nowrap;
          }

          .filter-group {
            margin-bottom: 1.5rem;
          }

          .modal-content .filter-group {
            margin-bottom: 0;
            border-bottom: 1px solid var(--border, #ddd);
          }

          .dark .modal-content .filter-group {
            border-bottom-color: var(--nv-dark-grey-4, #333);
          }

          .modal-content .filter-group:last-child {
            border-bottom: none;
          }

          .modal-content .filter-group-header {
            padding: 1.25rem 0;
            font-size: 16px;
          }

          .modal-content .filter-group-items {
            padding-bottom: 1.25rem;
          }

          .modal-content .filter-item {
            padding: 0.875rem 0;
            font-size: 15px;
          }

          .mobile-filters-modal {
            max-height: 80vh;
          }

          .modal-header {
            padding: 1rem 1.5rem;
          }

          .modal-header h3 {
            font-size: 18px;
          }

          .modal-content {
            padding: 0 1.5rem;
            max-height: calc(80vh - 130px);
          }

          .modal-footer {
            padding: 1rem 1.5rem;
            padding-bottom: calc(1rem + env(safe-area-inset-bottom));
          }
        }