/* ARIANE  Onglet Recherche : barre de recherche, cartes produit, modal historique */

        /* Search Product Button */
        .search-product-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 14px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-decoration: none;
            border-radius: 8px;
            text-align: center;
            font-weight: 600;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
            border: none;
            cursor: pointer;
        }

        html.dark-mode .search-product-btn {
            background: transparent;
            color: #00d4ff;
            border: 1px solid #00d4ff;
            box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
        }

        html.dark-mode .search-product-btn:hover {
            background: rgba(0, 212, 255, 0.2);
        }        html.dark-mode .prediction-card {
            background: var(--card-bg);
            border-color: rgba(0, 212, 255, 0.3);
            color: var(--text-primary);
        }

        html.dark-mode .prediction-card:hover {
            border-color: #00d4ff;
            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2);
        }

        html.dark-mode .breakdown-container-pred {
            background: var(--card-bg);
            border-color: rgba(0, 212, 255, 0.3);
            color: var(--text-primary);
        }

        html.dark-mode .all-title-pred {
            color: #00d4ff;
        }

        html.dark-mode .windows-section-pred h3 {
            color: #00d4ff;
        }

        html.dark-mode .window-item-pred {
            background: rgba(0, 212, 255, 0.05);
            border-left-color: #00d4ff;
            color: var(--text-primary);
        }

        html.dark-mode .window-item-pred:hover {
            background: rgba(0, 212, 255, 0.15);
            border-left-color: #00d4ff;
        }

        html.dark-mode .window-time-pred {
            color: #ffffff;
        }

        html.dark-mode .window-details-pred {
            color: #aaa;
        }

        html.dark-mode .window-percent-pred {
            color: #00d4ff;
        }

        html.dark-mode .window-count-pred {
            color: #aaa;
        }

        html.dark-mode .history-item-pred {
            background: rgba(0, 212, 255, 0.05);
            border-left-color: #00d4ff;
            color: var(--text-primary);
        }

        html.dark-mode .history-item-pred:hover {
            background: rgba(0, 212, 255, 0.15);
            border-left-color: #00d4ff;
        }

        html.dark-mode .history-user-pred {
            color: #ffffff;
        }

        html.dark-mode .history-timestamp {
            color: #aaa;
        }

        html.dark-mode .history-ago {
            background: rgba(0, 212, 255, 0.2);
            color: #00d4ff;
        }

        html.dark-mode .validation-stat-box {
            background: linear-gradient(135deg, #0d3b66 0%, #0a2540 100%);
        }

        html.dark-mode .validation-details {
            background: var(--card-bg);
            border-color: rgba(0, 212, 255, 0.3);
        }

        html.dark-mode .validation-details h4 {
            color: #00d4ff;
        }

        html.dark-mode .deviation-item {
            background: rgba(0, 212, 255, 0.08);
            border-left-color: #00d4ff;
            color: var(--text-primary);
        }

        html.dark-mode .deviation-label {
            color: #aaa;
        }

        html.dark-mode .deviation-value {
            color: #00d4ff;
        }

        html.dark-mode .sub-title {
            color: #aaa;
        }

        html.dark-mode .sub-box {
            background: rgba(0, 212, 255, 0.05);
            border-color: rgba(0, 212, 255, 0.3);
            color: var(--text-primary);
        }

        html.dark-mode .sub-box:hover {
            border-color: #00d4ff;
            background: rgba(0, 212, 255, 0.15);
        }

        html.dark-mode .sub-time {
            color: #00d4ff;
        }

        html.dark-mode .sub-info {
            color: #aaa;
        }

        html.dark-mode .pred-stats {
            border-top-color: var(--border-color);
            color: var(--text-primary);
        }

        html.dark-mode .pred-stat-label {
            color: #aaa;
        }

        html.dark-mode .pred-stat-value {
            color: #00d4ff;
        }

        html.dark-mode .card-header {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 212, 255, 0.05) 100%);
            color: var(--text-primary);
        }

        html.dark-mode .card-header h3 {
            color: #00d4ff;
        }

        html.dark-mode .heatmap-cell {
            color: #e0e0e0;
            border-color: rgba(0, 212, 255, 0.3);
        }

        html.dark-mode .heatmap-cell:hover {
            border-color: #00d4ff;
            box-shadow: 0 8px 20px rgba(0, 212, 255, 0.4);
        }

        html.dark-mode .tab-content {
            color: var(--text-primary);
        }

        html.dark-mode .grid {
            color: var(--text-primary);
        }

        html.dark-mode .breakdown-container-pred {
            background: var(--card-bg);
            color: var(--text-primary);
        }

        html.dark-mode .all-windows-pred {
            background: transparent;
            color: var(--text-primary);
            border-color: transparent;
        }

        html.dark-mode .window-card {
            background: rgba(0, 212, 255, 0.05);
            border-color: rgba(0, 212, 255, 0.3);
            color: var(--text-primary);
        }

        html.dark-mode .window-card h4 {
            color: #00d4ff;
        }

/*  Cartes cliquables + Search Cards  */

        /* Clickable Card */
        .clickable-card {
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .clickable-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }

        html.dark-mode .clickable-card:hover {
            box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
        }

        /* Search Cards */
        .search-card {
            padding: 14px 16px;
            background: transparent;
            border: 1px solid rgba(0, 212, 255, 0.3);
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: all 0.3s ease;
        }

        .search-card:hover {
            border-color: #00d4ff;
            box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
        }

        .search-card-label {
            color: var(--text-secondary);
            font-weight: 500;
            font-size: 0.9em;
            margin-bottom: 8px;
        }

        .search-card-value {
            font-weight: 600;
            color: var(--text-primary);
        }

        .search-card-value-emphasis {
            font-weight: 700;
            color: #00d4ff;
            font-size: 1.1em;
        }

        html.dark-mode .search-card {
            background: transparent;
            border: 1px solid rgba(0, 212, 255, 0.3);
        }

        html.dark-mode .search-card:hover {
            border-color: #00d4ff;
            box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
        }