:root{
      --blue:#2F6FE4;
      --blue-600:#1f58c7;
      --green:#31C76A;
      --green-600:#22a455;
      --bg:#f6f8fb;
      --card:#ffffff;
      --text:#1d2330;
      --muted:#6b7280;
      --ring:#e5e7eb;
      --radius:14px;
      --shadow:0 8px 24px rgba(0,0,0,0.08);
      --shadow-sm:0 4px 12px rgba(0,0,0,0.06);
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue","Noto Sans",Arial}
    a{color:inherit;text-decoration:none}
    .container{max-width:1100px;margin:10px auto;padding:24px;padding-top:110px}



    /* Barre de recherche */
    .search-bar{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 14px 8px;display:grid;grid-template-columns:1fr 1fr 180px 150px;gap:10px;align-items:center;top:90px;z-index:5}
    .field{position:relative}
    .field input{width:100%;border:1px solid var(--ring);background:#fff;border-radius:12px;padding:12px 14px 12px 40px;outline:none;transition:border .15s}
    .field input:focus{border-color:var(--blue)}
    .field .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--muted)}
    .btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;font-weight:700;cursor:pointer;transition:transform .02s ease, background .2s ease;user-select:none}
    .btn:active{transform:translateY(1px)}
    .btn-primary{background:var(--blue);color:#fff;height:44px}
    .btn-primary:hover{background:var(--blue-600)}
    .btn-success{background:var(--green);color:#fff}
    .btn-success:hover{background:var(--green-600)}
    /* Filtres */
    .filters{margin-top:14px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;display:grid;grid-template-columns:repeat(4,1fr) 210px;gap:16px;align-items:center}
    .filters h4{margin:0 0 6px 0;font-size:13px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
    .segmented{display:flex;gap:8px;flex-wrap:wrap}
    .segmented#timeGroup{background:var(--card);border:1px solid var(--ring);border-radius:12px;padding:6px}
    .chip{padding:8px 12px;border:1px solid var(--ring);border-radius:999px;background:#fff;cursor:pointer}
    .chip.active{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);color:var(--blue);font-weight:700}
    .range{display:flex;gap:10px;align-items:center}
    .range input[type=range]{width:100%}
    .rating{display:flex;gap:4px;align-items:center}
    .star{font-size:20px;cursor:pointer;color:#d1d5db}
    .star.active{color:#f59e0b}
    .sorter{display:flex;flex-direction:column}
    .sorter select{border:1px solid var(--ring);border-radius:12px;padding:10px 12px;background:#fff}
    /* Résultats */
    .results{margin-top:18px;display:grid;gap:12px;justify-items:center}
    .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:14px;display:grid;grid-template-columns:64px 1fr auto auto;gap:16px;align-items:center;border:1px solid transparent;width:100%;max-width:920px}
    .card:hover{border-color:var(--ring)}
    .avatar{width:64px;height:64px;border-radius:50%;background:#eef2ff;display:grid;place-items:center;font-weight:800;color:var(--blue)}
    .driver{display:flex;flex-direction:column;gap:2px}
    .driver .name{font-weight:800}
    .driver .sub{color:var(--muted);font-size:14px}
    .route{font-weight:700}
    .time{color:var(--muted);font-size:14px}
    .price{font-size:22px;font-weight:900;text-align:right}
    .price-reserve{display:flex;flex-direction:column;gap:8px;align-items:center}
    .reserve{display:flex;gap:8px;justify-content:center;align-items:center}
    .btn-heart{background:none;border:none;font-size:24px;cursor:pointer;transition:transform .2s ease;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center}
    .btn-heart:hover{transform:scale(1.2)}
    .empty{padding:30px;text-align:center;color:var(--muted);background:#fff;border-radius:var(--radius);border:1px dashed var(--ring)}
    /* Modale détails */
    .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;padding:24px}
    .modal{background:#fff;border-radius:18px;max-width:560px;width:100%;padding:18px;box-shadow:var(--shadow)}
    .modal header{margin:0 0 8px 0}
    .modal footer{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
    .hidden{display:none}
    /* Desktop first, mais on garde une adaptabilité simple */
    @media (max-width: 980px){
      .search-bar{grid-template-columns:1fr 1fr 1fr 140px}
      .filters{grid-template-columns:1fr 1fr}
      .card{grid-template-columns:56px 1fr 120px 120px}
    }
    @media (max-width: 680px){
      .search-bar{grid-template-columns:1fr; gap:8px; position:static}
      .filters{grid-template-columns:1fr}
      .card{grid-template-columns:1fr; text-align:left}
      .price-reserve{align-items:flex-start}
      .price,.reserve{justify-content:flex-start}
    }