/* ============================================================
   Trade Air — Simulateur de location de voiture (styles)
   Réutilise les tokens globaux de styles.css (--navy, --yellow…).
   Tout est préfixé .cs- pour éviter les collisions.
   ============================================================ */

.cs-section{padding:56px 0}
.cs-section .wrap{max-width:var(--maxw, 1200px)}

/* ---- Barre de recherche ---- */
.cs-search{
  background:#fff;border:1px solid var(--line,#e4ebf5);border-radius:var(--radius,18px);
  box-shadow:var(--shadow,0 8px 24px rgba(10,26,51,.1));padding:22px;
}
.cs-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.cs-grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.cs-grid{grid-template-columns:repeat(3,1fr)}}
.cs-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.cs-field.full{grid-column:1/-1}
.cs-field label{font-family:"Sora",sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3,#647187)}
.cs-field input,.cs-field select{
  width:100%;padding:13px 14px;border:1px solid var(--line,#e4ebf5);border-radius:12px;
  font:inherit;font-size:16px;color:var(--ink,#0a1a33);background:var(--paper,#f4f8fd);
  outline:none;transition:.15s;min-height:48px;
}
.cs-field input:focus,.cs-field select:focus{border-color:var(--blue-500,#1f74e6);background:#fff;box-shadow:0 0 0 3px rgba(31,116,230,.15)}
.cs-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.cs-err{color:#b62b2f;font-weight:600;font-size:14px}
.cs-err[hidden]{display:none}

/* ---- États ---- */
.cs-state{text-align:center;padding:40px 20px;color:var(--ink-3,#647187)}
.cs-state h3{font-size:20px;color:var(--ink,#0a1a33);margin:10px 0 6px}
.cs-loading .spin{
  display:inline-block;width:18px;height:18px;border:2.5px solid rgba(31,116,230,.25);
  border-top-color:var(--blue-500,#1f74e6);border-radius:50%;animation:cs-spin .7s linear infinite;vertical-align:-3px;margin-right:8px;
}
@keyframes cs-spin{to{transform:rotate(360deg)}}
.cs-empty svg{color:var(--blue-400,#5b95f2)}

/* ---- Résultats ---- */
.cs-resulthead{font-size:15px;color:var(--ink-3,#647187);margin:26px 0 14px}
.cs-resulthead strong{color:var(--navy-900,#052555)}
.cs-offers{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:760px){.cs-offers{grid-template-columns:1fr 1fr}}

.cs-card{
  background:#fff;border:1px solid var(--line,#e4ebf5);border-radius:var(--radius,18px);
  box-shadow:var(--shadow,0 8px 24px rgba(10,26,51,.1));padding:22px;display:flex;flex-direction:column;
  animation:cs-rise .45s var(--ease,cubic-bezier(.2,.7,.2,1)) both;
}
@keyframes cs-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cs-card .head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.cs-route{display:flex;align-items:center;gap:8px;font-family:"Sora",sans-serif;font-weight:800;color:var(--navy-900,#052555);font-size:16px;flex-wrap:wrap}
.cs-route svg{width:18px;height:18px;color:var(--blue-500,#1f74e6);flex:none}
.cs-cat{background:var(--paper-2,#eaf1fb);color:var(--blue-600,#1559c0);font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap}
.cs-veh{font-weight:700;color:var(--ink,#0a1a33);margin-bottom:12px}
.cs-dates{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:var(--paper,#f4f8fd);border-radius:12px;padding:12px;margin-bottom:12px}
.cs-leg .lab{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3,#647187);font-weight:700}
.cs-leg .d{font-weight:700;color:var(--navy-900,#052555);font-size:14px}
.cs-meta{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.cs-meta .r{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2,#33445f)}
.cs-meta .r svg{width:16px;height:16px;color:var(--green,#16b364);flex:none}
.cs-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line,#e4ebf5);flex-wrap:wrap}
.cs-price{font-family:"Sora",sans-serif;font-weight:800;color:var(--navy-900,#052555);font-size:24px;line-height:1}
.cs-price .per{display:block;font-size:12px;font-weight:600;color:var(--ink-3,#647187);margin-top:3px}
.cs-stock{font-size:12px;color:#0e6b3e;font-weight:700}

/* ---- Modale de réservation ---- */
.cs-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:flex-start;justify-content:center;
  background:rgba(4,18,43,.55);backdrop-filter:blur(3px);padding:5vh 16px;overflow-y:auto}
.cs-modal.open{display:flex}
.cs-modal-box{background:#fff;border-radius:var(--radius-lg,28px);box-shadow:var(--shadow-lg,0 30px 70px -20px rgba(6,26,58,.45));
  width:100%;max-width:560px;padding:28px;position:relative;animation:cs-rise .35s var(--ease,ease) both}
.cs-close{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;background:var(--paper,#f4f8fd);
  display:grid;place-items:center;color:var(--ink,#0a1a33);border:none;cursor:pointer}
.cs-close:hover{background:var(--paper-2,#eaf1fb)}
.cs-modal-box h2{font-family:"Sora",sans-serif;font-size:22px;color:var(--navy-900,#052555);margin:0 0 4px}
.cs-modal-box .sub{color:var(--ink-3,#647187);font-size:14px;margin-bottom:16px}

/* Récapitulatif non modifiable */
.cs-recap{background:var(--paper,#f4f8fd);border:1px solid var(--line,#e4ebf5);border-radius:14px;padding:14px 16px;margin-bottom:18px}
.cs-recap .rh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.cs-recap .rh .route{font-family:"Sora",sans-serif;font-weight:800;color:var(--navy-900,#052555)}
.cs-recap .rh .price{font-family:"Sora",sans-serif;font-weight:800;color:var(--navy-900,#052555)}
.cs-recap .rr{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:3px 0}
.cs-recap .rr .k{color:var(--ink-3,#647187)}
.cs-recap .rr .v{color:var(--ink,#0a1a33);font-weight:600;text-align:right}

.cs-form .f{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.cs-form .frow{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.cs-form label{font-family:"Sora",sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3,#647187)}
.cs-form input,.cs-form textarea{width:100%;padding:12px 14px;border:1px solid var(--line,#e4ebf5);border-radius:12px;font:inherit;font-size:16px;background:var(--paper,#f4f8fd);outline:none;transition:.15s}
.cs-form input:focus,.cs-form textarea:focus{border-color:var(--blue-500,#1f74e6);background:#fff;box-shadow:0 0 0 3px rgba(31,116,230,.15)}
.cs-form textarea{resize:vertical;min-height:80px}
.cs-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cs-note{display:flex;align-items:center;gap:8px;color:var(--ink-3,#647187);font-size:13px;margin-top:12px}
.cs-feedback{margin-top:14px;font-weight:600;font-size:14px;border-radius:12px;padding:12px 14px;display:none}
.cs-feedback.show{display:block}
.cs-feedback.ok{background:rgba(22,179,100,.12);color:#0e6b3e}
.cs-feedback.ko{background:rgba(229,72,77,.1);color:#b62b2f}