:root {
        --bg: #f4f7fb;
        --card: #ffffff;
        --muted: #6b7a90;
        --primary: #1a2a3c;
        --accent: #4c74b9;
        --accent-2: #46b17b;
        --danger: #d9534f;
        --glass: rgba(255, 255, 255, 0.7);
        --radius: 14px;
      }

      * {
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
      }
      body {
        margin: 0;
        font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
          Arial, sans-serif;
        background: linear-gradient(180deg, var(--bg), #eef3f9);
        color: var(--primary);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        line-height: 1.45;
      }

      header {
        background: linear-gradient(135deg, #5aab7a 0%, #4a9668 50%, #3d8456 100%);
        color: #fff;
        padding: 0;
        border-bottom: 3px solid #4caf50;
        box-shadow: 0 4px 20px rgba(20, 30, 50, 0.12);
        margin-bottom: 20px;
        position: relative;
        overflow: hidden;
      }

      .hero-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
        pointer-events: none;
      }

      .hero-wrapper {
        position: relative;
        z-index: 2;
        max-width: 1400px;
        margin: 0 auto;
        padding: 32px 24px;
      }

      .hero-content {
        display: block;
      }

      .hero-text h1 {
        margin: 0 0 12px 0;
        font-size: clamp(32px, 5vw, 52px);
        font-weight: 800;
        color: #fff;
        line-height: 1.2;
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .title-logo {
        height: clamp(32px, 5vw, 52px);
        width: auto;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
      }

      .hero-subtitle {
        margin: 0 0 16px 0;
        font-size: clamp(18px, 3vw, 28px);
        font-weight: 600;
        color: rgba(255, 255, 255, 0.95);
        line-height: 1.3;
        
      }

      .hero-description {
        margin: 0 0 28px 0;
        font-size: clamp(14px, 1.8vw, 18px);
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.6;
      }

      .hero-button {
        padding: 14px 32px;
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
        border: 2px solid rgba(255, 255, 255, 0.4);
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .hero-button:hover {
        background: rgba(255, 255, 255, 0.35);
        border-color: rgba(255, 255, 255, 0.6);
        transform: translateY(-2px);
      }

      @media (max-width: 768px) {
        .hero-wrapper {
          padding: 40px 20px;
        }
      }

      header .container {
        max-width: 1200px;
      }

      .header-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
      }

      .header-logo-section {
        flex-shrink: 0;
      }

      .header-logo {
        width: clamp(100px, 12vw, 160px);
        height: auto;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
      }

      .header-text-section {
        flex: 1;
        min-width: 280px;
        text-align: left;
      }

      header h1 {
        margin: 0 0 6px 0;
        font-weight: 700;
        letter-spacing: -0.5px;
        font-size: clamp(20px, 2.5vw, 32px);
        color: #fff;
      }

      .header-tagline {
        margin: 0 0 4px 0;
        font-size: clamp(13px, 1.8vw, 16px);
        font-weight: 600;
        color: #a8d5b8;
        letter-spacing: 0.2px;
      }

      .header-subtitle {
        margin: 0;
        font-size: clamp(11px, 1.3vw, 13px);
        opacity: 0.85;
        color: rgba(255, 255, 255, 0.85);
        line-height: 1.4;
      }

      /* Removed orphaned header styles */

      .container {
        max-width: 1800px;
        margin: 0 auto;
        padding: 0 20px 40px;
      }

      .container--no-bottom-padding {
        padding-bottom: 0;
      }

      .panel {
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.9),
          rgba(248, 250, 253, 0.9)
        );
        border-left: 6px solid rgba(76, 116, 185, 0.16);
        padding: 20px;
        margin: 8px 0 24px;
        border-radius: 12px;
        box-shadow: 0 6px 22px rgba(40, 60, 90, 0.04);
      }

      .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        align-items: start;
      }

      .main-content {
        display: grid;
        grid-template-columns: 310px 1fr;
        gap: 20px;
        align-items: start;
      }

      .filters-column {
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: sticky;
        top: 20px;
      }

      .filter-toggle {
        display: none;
        padding: 12px 16px;
        background: #27ae60;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 600;
        font-size: 14px;
        width: 100%;
        margin-bottom: 16px;
      }

      @media (max-width: 768px) {
        .main-content {
          grid-template-columns: 1fr;
          gap: 0;
        }

        .filter-toggle {
          display: block;
          grid-column: 1 / -1;
          order: -1;
        }

        .filters-column {
          display: none;
          grid-column: 1 / -1;
          position: static;
          background: #f9fdf9;
          padding: 16px;
          border-radius: 8px;
          margin-bottom: 16px;
        }

        .filters-column.active {
          display: flex;
        }

        /* Expanded row grid - stack on mobile */
        .expanded-content-grid {
          display: grid !important;
          grid-template-columns: 1fr !important;
          gap: 20px !important;
          align-items: start !important;
        }
      }

      .card {
        background: var(--card);
        border-radius: var(--radius);
        padding: 18px;
        box-shadow: 0 10px 30px rgba(20, 30, 50, 0.06);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
      }
      .card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(20, 30, 50, 0.08);
      }

      h2 {
        margin: 0 0 12px 0;
        font-size: 18px;
        color: var(--primary);
      }

      /* filters */
      .filters {
        display: flex;
        gap: 12px;
        flex-direction: column;
        align-items: stretch;
      }
      .field {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: var(--muted);
        text-align: left;
      }

      .field:has(#surfaceSlider) {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }

      .field:has(#noiseSlider) {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }
      
      .field label {
        flex-shrink: 0;
        white-space: nowrap;
      }
      
      .field select,
      .field input[type="search"] {
        flex: 1;
      }
      select,
      input[type="search"] {
        padding: 8px 10px;
        border-radius: 10px;
        border: 1px solid #e6eef6;
        background: #fff;
        width: 100%;
        font-size: 14px;
        color: var(--primary);
        outline: none;
        box-shadow: 0 6px 14px rgba(20, 30, 50, 0.02);
      }
      label.inline {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: var(--muted);
      }

      /* table */
      .table-wrap {
        overflow: auto;
        border-radius: 10px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
      }
      thead th {
        background: linear-gradient(90deg, #f1f6fb, #f8fbff);
        color: var(--primary);
        position: sticky;
        top: 0;
        padding: 12px;
        border-bottom: 1px solid #eaf0f7;
      }
      th,
      td {
        padding: 12px;
        border-bottom: 1px solid #d0d8e0;
        text-align: left;
      }
      tbody tr {
        transition: background 0.16s ease;
        cursor: pointer;
      }

      /* Main products table - normal state */
      #modelsTable tbody tr {
        background: transparent;
      }

      /* Main products table - hover state */
      #modelsTable tbody tr:hover {
        background: #dbe9f8;
        
      }

      /* Main products table - selected state */
      #modelsTable tbody tr.selected {
        background: #a8d4ff;
      }

      /* Main products table - selected + hover state */
      #modelsTable tbody tr.selected:hover {
        background: #c5e1ff;
      }

      /* Expanded row grid - default 2 columns on desktop */
      .expanded-content-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: start;
      }

      .model-cell {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .model-meta {
        display: flex;
        flex-direction: column;
      }
      .model-name {
        font-weight: 600;
      }
      .muted {
        color: var(--muted);
        font-size: 13px;
      }

      /* badges */
      .badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        height: 24px;
        line-height: 16px;
        white-space: nowrap;
      }
      .badge.eu {
        background: rgba(70, 177, 123, 0.12);
        color: var(--accent-2);
      }
      .badge.imp {
        background: rgba(217, 83, 79, 0.1);
        color: var(--danger);
      }
      .badge.status-new {
        background: rgba(52, 168, 219, 0.12);
        color: #22a6ff;
        animation: pulse-new 2s infinite;
      }
      .badge.status-legacy {
        background: rgba(150, 150, 150, 0.12);
        color: #777;
      }

      @keyframes pulse-new {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
      }

      /* map */
      #map {
        width: 100%;
        height: 320px;
        min-height: 220px;
        border-radius: 12px;
        margin-top: 12px;
        display: none;
      }

      #co2Info {
        font-size: 14px;
        color: var(--muted);
        margin-bottom: 10px;
        line-height: 1.5;
      }

      footer {
        background: var(--primary);
        color: white;
        text-align: center;
        padding: 40px 20px;
        margin-top: 60px;
      }

      footer p {
        margin: 10px 0;
      }

      /* responsive */
      @media (max-width: 1000px) {
        .grid {
          grid-template-columns: 1fr;
        }
        #map {
          height: 44vh;
        }
      }

      /* Equivalent products table styling */
      .expanded-row tbody tr.equiv-product {
        transition: background-color 0.3s ease, border 0.3s ease;
        cursor: pointer;
        background: transparent;
      }

      /* Equivalent products - hover state */
      .expanded-row tbody tr.equiv-product:hover {
        background-color: #e9f1e8 !important;
      }

      /* Equivalent products - selected state */
      .expanded-row tbody tr.equiv-product.selected {
        background-color: #9bd4a8 !important;
      }

      /* Equivalent products - selected + hover state */
      .expanded-row tbody tr.equiv-product.selected:hover {
        background-color: #9bd4a8 !important;
      }

      .controls {
        display: flex;
        gap: 8px;
        align-items: center;
      }
      .pill {
        background: var(--glass);
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 13px;
        color: var(--muted);
      }

      a.icon img {
        width: 18px;
        height: 18px;
      }

      /* bloc du modèle sélectionné */
      .selected-model {
        background: #f1f6ff;
        padding: 10px 14px;
        border-left: 4px solid var(--accent);
        border-radius: 8px;
        margin-bottom: 10px;
      }

      .selected-model-title {
        font-size: 15px;
        font-weight: 600;
        color: var(--primary);
      }

      /* Tooltip pour détail CO2 */
      .co2-tooltip {
        position: relative;
        border-bottom: 1px dotted var(--accent);
        cursor: help;
      }

      .co2-tooltip[title] {
        position: relative;
      }

      .co2-tooltip:hover::after {
        content: attr(title);
        position: absolute;
        bottom: 125%;
        left: 0;
        background: var(--primary);
        color: white;
        padding: 10px 12px;
        border-radius: 8px;
        font-size: 12px;
        white-space: pre-wrap;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        font-weight: 500;
        width: max-content;
        max-width: 280px;
        word-wrap: break-word;
        white-space: normal;
        line-height: 1.4;
      }

      .co2-tooltip:hover::before {
        content: "";
        position: absolute;
        bottom: 115%;
        left: 8px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid var(--primary);
        z-index: 1000;
      }

      /* Sortable table headers - main products table */
      #modelsTable thead th[data-sort-column] {
        cursor: pointer;
        user-select: none;
        transition: background-color 0.2s ease;
      }

      #modelsTable thead th[data-sort-column]:hover {
        background-color: rgba(76, 116, 185, 0.08);
      }

      #modelsTable thead th[data-sort-column]:active {
        background-color: rgba(76, 116, 185, 0.12);
      }

      /* Hover effects for clickable elements */
      a {
        transition: background-color 0.2s ease, color 0.2s ease;
      }

      a:not(.icon) {
        text-decoration: none;
      }

      a:hover:not(.icon) {
        opacity: 0.8;
      }

      /* Range slider styling */
      .range-slider {
        position: relative;
        height: 8px;
        margin: 10px 0;
      }

      .range-slider input[type="range"] {
        position: absolute;
        width: 100%;
        height: 6px;
        top: 1px;
        margin: 0;
        padding: 0;
        pointer-events: none;
        background: none;
        border: none;
      }

      .range-slider input[type="range"]::-webkit-slider-runnable-track {
        background: transparent;
        height: 6px;
        border-radius: 3px;
      }

      .range-slider input[type="range"]::-moz-range-track {
        background: transparent;
        height: 6px;
        border-radius: 3px;
        border: none;
      }

      .range-slider input[type="range"]::-webkit-slider-thumb {
        appearance: none;
        pointer-events: auto;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #27ae60;
        border: 2px solid white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        cursor: pointer;
      }

      .range-slider input[type="range"]::-moz-range-thumb {
        pointer-events: auto;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #27ae60;
        border: 2px solid white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        cursor: pointer;
      }

      .range-slider input[type="range"]::-moz-range-track {
        background: none;
        border: none;
      }
    }

    /* noUiSlider specific styles */
    .field #surfaceSlider {
      width: 100%;
      height: 10px;
      margin: 0;
    }

    .field #noiseSlider {
      width: 100%;
      height: 10px;
      margin: 0;
    }

    .field #priceSlider {
      width: 100%;
      height: 10px;
      margin: 0;
    }

    /* Slider container with integrated label */
    .slider-wrapper {
      position: relative;
      width: 100%;
    }

    .slider-label-inline {
      font-size: 12px;
      color: #333;
      font-weight: 600;
      display: block;
      margin-bottom: 8px;
      word-spacing: 2px;
    }

    .slider-label-inline span {
      color: #27ae60;
      font-weight: 700;
    }

    .noUi-target {
      background: #ddd;
      border-radius: 5px;
      border: none;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      outline: none;
      height: 10px;
    }

    .noUi-target.noUi-touch {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .noUi-base {
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }

    .noUi-connects {
      border-radius: 5px;
    }

    .noUi-connect {
      background: #27ae60;
      border-radius: 5px;
    }

    .noUi-draggable {
      cursor: grab;
    }

    .noUi-active {
      cursor: grabbing;
    }

    .noUi-handle {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #27ae60;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
      border: 3px solid white;
      top: -5px;
      right: -12px;
      outline: none;
    }

    .noUi-handle:before,
    .noUi-handle:after {
      display: none;
    }

    .noUi-handle:focus {
      outline: none;
      box-shadow: 0 3px 12px rgba(39, 174, 96, 0.4);
    }

    .noUi-touch-area {
      height: 40px;
    }

    .noUi-horizontal .noUi-handle {
      width: 24px;
      height: 24px;
      right: -12px;
      top: -5px;
    }

      .range-slider #filterSurfaceMin {
        z-index: 5;
      }

      .range-slider #filterSurfaceMax {
        z-index: 6;
      }

      button {
        transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
      }

      button:hover:not(:disabled) {
        filter: brightness(0.95);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      button:active:not(:disabled) {
        transform: scale(0.98);
      }

      button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      /* Removed duplicate tbody styling - consolidated in main products table section above */

      /* Hover for tag/badge links */
      a[href*="target"] span,
      a[target="_blank"] span {
        transition: background-color 0.2s ease, transform 0.1s ease;
      }

      a[href*="target"]:hover span,
      a[target="_blank"]:hover span {
        filter: brightness(1.1);
      }

      /* Wizard buttons */
      .wizard-btn {
        transition: all 0.2s ease;
      }

      .wizard-btn:hover:not([disabled]) {
        filter: brightness(0.95);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
      }

      .wizard-btn:active:not([disabled]) {
        transform: translateY(0);
      }

      /* General button hover for wizard form */
      #wizardForm button:hover {
        filter: brightness(0.92);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        transform: translateY(-2px) !important;
      }

      #wizardForm button:active {
        transform: translateY(0) !important;
      }

      /* Navigation de retour */
      .back-nav {
        background: var(--primary);
        padding: 0 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        height: 50px;
      }

      .back-nav > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100%;
      }

      .back-link {
        color: white;
        text-decoration: none;
        font-size: 0.95em;
        display: inline-flex;
        align-items: center;
        transition: opacity 0.3s ease;
        opacity: 0.9;
        height: 100%;
      }

      .back-link:hover {
        opacity: 1;
      }

      /* Language Switcher */
      .lang-switcher {
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
      }

      .lang-btn {
        padding: 6px 12px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.9em;
        font-weight: 500;
        height: 32px;
        display: flex;
        align-items: center;
      }

      .lang-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.5);
      }

      .lang-btn.active {
        background: rgba(255, 255, 255, 0.3);
        border-color: white;
        font-weight: 600;
      }