/* Carte de recherche (accueil, 404, panneau « Modifier ») */
.recherche {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px;
  border-radius: 26px;
  background: var(--blanc);
  color: var(--encre);
  box-shadow: 0 40px 90px -30px rgb(6 8 48 / .65);
}
.recherche-compacte { box-shadow: 0 24px 48px -32px rgb(14 18 51 / .35); }
.panneau-recherche { max-width: 560px; }

.recherche-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.recherche-titre { font-size: 26px; font-weight: 750; font-stretch: 105%; }

/* Départ et arrivée : point creux, point plein, reliés par un pointillé */
.lieux {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.js .lieux { grid-template-columns: 24px minmax(0, 1fr) 48px; }
.lieux-trait {
  position: absolute;
  left: 10px; top: 62px; bottom: 34px;
  width: 3px;
  background: repeating-linear-gradient(to bottom, var(--filet-fort) 0 5px, transparent 5px 10px);
}
.point {
  position: relative;
  z-index: 1;
  width: 24px; height: 24px;
  margin-top: 38px;
  border-radius: 50%;
}
.point-depart { border: 4px solid var(--encre); background: var(--blanc); }
.point-arrivee { border: 3px solid var(--encre); background: var(--encre); box-shadow: inset 0 0 0 5px var(--blanc); }

.inverser { display: none; }
.js .inverser {
  grid-row: span 2;
  align-self: center;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid var(--filet);
  border-radius: 50%;
  background: var(--blanc);
  color: var(--encre);
  transition: transform .6s var(--ease-swap), background .2s;
}
.inverser:hover { background: var(--papier); }
.inverser.est-tourne { transform: rotate(180deg); }

.quand legend { margin: 0 0 8px 2px; }
.quand-date { display: flex; gap: 10px; margin-top: 10px; }
.quand-date input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0 12px;
  border-radius: var(--rayon-pastille);
  background: var(--blanc);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* « Maintenant » : ni date ni heure à choisir */
.quand:has(#quand-maintenant:checked) .quand-date { display: none; }

.options { border-top: 1px solid var(--filet); }
.options summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gris);
  cursor: pointer;
  list-style: none;
}
.options summary::-webkit-details-marker { display: none; }
.options summary::after {
  content: "";
  width: 9px; height: 9px;
  margin-right: 6px;
  border-right: 2.5px solid var(--encre);
  border-bottom: 2.5px solid var(--encre);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .35s var(--ease-swap);
}
.options[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.options-in { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 4px; }
.coches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 12px; }

@media (max-width: 480px) {
  .recherche { padding: 22px 18px; border-radius: 22px; gap: 18px; }
  .recherche-tete .capitales { display: none; }
  .js .lieux { grid-template-columns: 24px minmax(0, 1fr) 44px; gap: 14px 10px; }
  .inverser { width: 44px; height: 44px; }
}

/* Champ de lieu : adresse réelle sous le champ, « Ma position », suggestions ------------ */
.champ-lieu { position: relative; }
.champ-adresse {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 7px 0 0 2px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--gris);
}
.champ-adresse svg { flex: none; margin-top: 2px; color: var(--outremer); }
.champ-etat { margin: 7px 0 0 2px; font-size: 13px; font-weight: 600; color: var(--gris); }
.champ-etat:empty { display: none; }

.ma-position {
  position: absolute;
  right: 4px;
  top: 28px; /* sous le libellé : centré dans le champ de 52 px */
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--outremer);
  transition: background .2s;
}
.ma-position:hover { background: var(--papier); }
.ma-position[aria-busy="true"] svg { animation: og-pulse 1s ease-in-out infinite alternate; }
.js .champ-avec-position input[type="text"] { padding-right: 52px; }

.suggestions {
  position: absolute;
  left: 0; right: 0;
  top: calc(26px + 52px + 6px);
  z-index: 30;
  max-height: min(340px, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1.5px solid var(--filet);
  border-radius: 16px;
  background: var(--blanc);
  box-shadow: 0 24px 48px -20px rgb(14 18 51 / .45);
}
.suggestions-titre {
  padding: 10px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}
.suggestion {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 7px 10px;
  border-radius: 11px;
  cursor: pointer;
}
.suggestion svg { justify-self: center; color: var(--gris); }
.suggestion-nom { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.suggestion-detail { display: block; font-size: 13px; line-height: 1.3; color: var(--gris); }
.suggestion:hover { background: var(--champ); }
.suggestion[aria-selected="true"] { background: var(--outremer); color: var(--blanc); }
.suggestion[aria-selected="true"] svg { color: var(--signal); }
.suggestion[aria-selected="true"] .suggestion-detail { color: var(--lavande-clair); }
.suggestions-etat { padding: 14px 10px; font-size: 14px; color: var(--gris); }