/* ==== Transpo'Vélo – Form simulateur ==== */
.tvelo-sim{
  --c-primary:#ff9703; --c-dark:#181b3c; --c-text:#1b1b1b; --c-muted:#6b7280;
  --c-border:#e5e7eb; --c-bg:#fafafa; --r:14px; --gap:16px; --shadow:0 10px 30px rgba(0,0,0,.08);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Conteneur du formulaire */
.tvelo-sim form#tvelo-sim-form{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap) calc(var(--gap) * 1.2);
  background:#fff;
  padding: clamp(18px, 3.2vw, 28px);
  border:1px solid var(--c-border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

/* Pleine largeur pour certains champs */
.tvelo-sim form #tvelo-to-city,
.tvelo-sim form #tvelo-calc{
  grid-column: 1 / -1;
}

/* Groupes de champ */
.tvelo-sim form > div{
  display:flex; flex-direction:column; gap:8px;
}

/* Labels */
.tvelo-sim label{
  font-weight: 650; color: var(--c-dark);
  font-size: clamp(13px, 1.4vw, 15px);
}

/* Inputs & selects */
.tvelo-sim input[type="number"],
.tvelo-sim input[type="text"],
.tvelo-sim input:not([type]),
.tvelo-sim select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%;
  background: #fff;
  border:1px solid var(--c-border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: clamp(15px, 1.6vw, 16px);
  line-height: 1.35;
  color: var(--c-text);
  transition: border-color .2s ease, box-shadow .2s ease, transform .02s ease;
}

/* Focus states */
.tvelo-sim input:focus, .tvelo-sim select:focus{
  outline:none;
  border-color: color-mix(in srgb, var(--c-primary) 60%, #0000);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 20%, #0000);
}

/* Placeholder */
.tvelo-sim input::placeholder{ color:#9ca3af; }

/* Bouton principal */
.tvelo-sim #tvelo-calc{
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--c-primary);
  color:#fff; border:none; border-radius: 12px;
  padding: 14px 18px; font-weight:700; letter-spacing:.2px;
  cursor:pointer; text-align:center;
  font-size: clamp(15px, 1.7vw, 17px);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
.tvelo-sim #tvelo-calc:hover{ filter:brightness(1.03); box-shadow: 0 10px 22px rgba(255,151,3,.22); }
.tvelo-sim #tvelo-calc:active{ transform: translateY(1px); }

/* Astuce : aligner visuellement les colonnes */
.tvelo-sim form > div:nth-child(odd){ margin-right: 6px; }
.tvelo-sim form > div:nth-child(even){ margin-left: 6px; }

/* Résultats */
.tvelo-sim #tvelo-results{
  margin-top: 18px;
  background: linear-gradient(180deg, #fff, #fff0);
  padding: clamp(12px, 2.6vw, 16px);
  border-radius: var(--r);
}
.tvelo-sim .tvelo-cards{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.tvelo-sim .tvelo-card{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:8px;
}
.tvelo-sim .tvelo-card h4{
  margin:0; font-size:18px; color:var(--c-dark);
}
.tvelo-sim .tvelo-card .price{
  font-size: clamp(22px, 2.4vw, 26px); font-weight:800; color:var(--c-primary);
}
.tvelo-sim .tvelo-card .meta{ color:var(--c-muted); font-size:14px; }

/* Bouton “Expédier un vélo” */
.tvelo-sim #tvelo-ship{
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color: var(--c-primary);
  border:2px solid var(--c-primary); border-radius: 12px;
  padding: 12px 16px; font-weight:700; cursor:pointer;
  transition: background .2s ease, color .2s ease, transform .06s ease;
}
.tvelo-sim #tvelo-ship:hover{ background: var(--c-primary); color:#fff; }
.tvelo-sim #tvelo-ship:active{ transform: translateY(1px); }

/* Messages d'erreur natifs (HTML5) */
.tvelo-sim input:invalid, .tvelo-sim select:invalid{
  border-color:#f87171;
}
.tvelo-sim input:invalid:focus, .tvelo-sim select:invalid:focus{
  box-shadow:0 0 0 4px rgba(248,113,113,.25);
}

/* Petites améliorations UX : curseur, transitions subtiles */
.tvelo-sim input, .tvelo-sim select{ cursor:text; }
.tvelo-sim select{ cursor:pointer; }
.tvelo-sim input:hover, .tvelo-sim select:hover{ border-color:#d1d5db; }

/* Responsive : une seule colonne sous 720px */
@media (max-width: 720px){
  .tvelo-sim form#tvelo-sim-form{
    grid-template-columns: 1fr;
  }
  .tvelo-sim form > div:nth-child(odd),
  .tvelo-sim form > div:nth-child(even){
    margin:0;
  }
}


/* --- Desktop : CP d’arrivée + Localité sur la même ligne --- */
@media (min-width: 900px){
  /* Annule la pleine largeur appliquée plus haut au select de localité */
  .tvelo-sim form #tvelo-to-city{ grid-column: auto; }

  /* Place explicitement les 2 groupes sur la même rangée */
  .tvelo-sim form#tvelo-sim-form > div:nth-of-type(4){ /* Code postal d’arrivée */
    grid-column: 1;
  }
  .tvelo-sim form#tvelo-sim-form > div:nth-of-type(5){ /* Localité d’arrivée */
    grid-column: 2;
  }

}
