/* Page de résultats : barre de pilotage, filtres, curseurs, volet latéral, visite guidée.
   Feuille 07 sur 08 : les pages les chargent dans l’ordre des numéros, qui est celui
   de la cascade. Une règle peut corriger une feuille précédente, jamais une suivante. */

/* Page résultats : la recherche devient une barre de pilotage persistante. */
body.results-page {
  background: var(--cream);
}
body.results-page .site-header {
  border-bottom: 0;
}
body.results-page main {
  width: 100%;
  margin: 0;
  padding-bottom: 80px;
}
body.results-page .home-search-panel {
  position: sticky;
  z-index: 35;
  top: 0;
  padding: 10px 24px 14px;
  background: var(--ink);
  border-bottom: 0;
  box-shadow: none;
  transition: box-shadow 0.22s ease;
}
body.results-page.is-scrolled .home-search-panel {
  box-shadow: 0 18px 34px rgba(16, 42, 67, 0.22);
}
body.results-page .home-search-panel-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}
body.results-page .search-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.results-page .search-heading {
  display: none;
}
body.results-page .search-toolbar {
  margin: 9px 0 0;
}
body.results-page .toolbar-select select {
  min-height: 34px;
  padding: 6px 12px;
  border-color: rgba(255, 255, 255, 0.42);
  background: transparent;
  color: #fff;
}
body.results-page .comparator-bar {
  grid-template-columns: 2.1fr 1.4fr 1fr 1fr auto 58px;
  border-radius: var(--r-md);
  box-shadow: none;
}
body.results-page.is-scrolled .comparator-bar {
  box-shadow: 0 14px 28px rgba(3, 18, 31, 0.2);
}
body.results-page .bar-origins .field,
body.results-page .bar-field {
  min-height: 62px;
  background: var(--paper);
}
body.results-page .bar-origins .field:first-child {
  border-radius: var(--r-md) 0 0 var(--r-md);
}
body.results-page .brand {
  color: #fff;
}
body.results-page .account-entry {
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
}
body.results-page .account-entry:hover,
body.results-page .account-entry:focus-visible {
  border-color: var(--coral);
  color: var(--coral);
}
body.results-page .search-button {
  min-width: 140px;
  min-height: 62px;
  margin-left: 0;
  border-radius: 0;
}
@media (min-width: 701px) {
  body.results-page .date-picker {
    top: calc(100% - 6px);
  }
}
body.results-page .results {
  width: min(1180px, calc(100% - 48px));
  margin: 24px auto 0;
}
body.results-page .results[hidden] {
  display: none;
}
body.results-page .results-topline {
  align-items: flex-start;
}
body.results-page .results-topline h2 {
  font-size: 30px;
}
body.results-page .destination-grid {
  align-items: start;
}
@media (max-width: 900px) {
  body.results-page .home-search-panel {
    padding: 10px 16px 12px;
  }
  body.results-page .comparator-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    background: transparent;
    box-shadow: none;
  }
  body.results-page .bar-origins {
    grid-column: 1 / -1;
  }
  body.results-page .bar-origins .field,
  body.results-page .bar-origins .field + .field,
  body.results-page .bar-field {
    min-height: 58px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
  }
  body.results-page .search-button {
    min-height: 50px;
    margin: 0;
  }
  body.results-page .search-favorite-button {
    width: auto;
    min-width: 0;
    min-height: 50px;
    margin: 0;
  }
}
@media (max-width: 700px) {
  body.results-page .site-header {
    padding: 0 16px;
  }
  body.results-page .home-search-panel {
    top: 0;
  }
  body.results-page .date-picker {
    bottom: 84px;
    max-height: calc(100dvh - 100px);
  }
  body.results-page .search-heading {
    display: none;
  }
  body.results-page .search-toolbar {
    margin: 8px 0 0;
  }
  body.results-page .toolbar-select select {
    width: 100%;
  }
  body.results-page .comparator-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  body.results-page .bar-origins {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  body.results-page .bar-origins .field,
  body.results-page .bar-origins .field + .field,
  body.results-page .bar-field {
    min-height: 56px;
    padding: 9px 11px;
  }
  body.results-page .bar-field input,
  body.results-page .bar-origins .field input {
    font-size: 16px;
  }
  body.results-page .search-button {
    width: 100%;
    min-height: 48px;
  }
  body.results-page .results {
    width: calc(100% - 32px);
    margin: 18px auto 0;
  }
  body.results-page .results-topline {
    gap: 16px;
  }
}

body.results-page .results-intro {
  margin: 0;
}
body.results-page .results-intro .eyebrow {
  margin-bottom: 4px;
}
body.results-page .results-intro h1:focus {
  outline: none;
}
body.results-page .results-intro h1 {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 34px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: 0;
}
body.results-page .results-intro h1::after {
  content: '';
  display: block;
  width: 42px;
  height: 3px;
  margin-top: 8px;
  border-radius: var(--r-pill);
  background: var(--coral);
}
body.results-page .search-favorite-button {
  align-self: stretch;
  display: grid;
  place-items: center;
  width: 58px;
  min-width: 58px;
  min-height: 62px;
  margin-left: 0;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: #fff;
  color: var(--coral);
  box-shadow: 0 10px 24px rgba(3, 18, 31, 0.16);
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}
body.results-page .search-favorite-button svg {
  width: 22px;
  height: 22px;
  display: block;
}
body.results-page .search-favorite-button:hover,
body.results-page .search-favorite-button:focus-visible {
  border-color: #fff0e8;
  background: #fff0e8;
  color: var(--coral);
  box-shadow: 0 12px 26px rgba(3, 18, 31, 0.2);
  outline: none;
}
body.results-page .search-favorite-button.is-saved {
  border-color: var(--coral);
  background: var(--coral);
  color: #fff;
}
body.results-page .results {
  margin-top: 20px;
}
body.results-page .favorite-status:empty {
  display: none;
}
body.results-page .favorite-status.is-toast {
  position: fixed;
  z-index: 140;
  left: 50%;
  bottom: 28px;
  min-height: 0;
  margin: 0;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  box-shadow: 0 14px 38px rgba(6, 17, 30, 0.28);
  font-size: 13px;
  transform: translateX(-50%);
  animation: favorite-toast-in 0.2s ease-out;
}
@keyframes favorite-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
body.results-page .results-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  align-items: start;
  gap: 16px;
  margin: 0 0 24px;
  padding-top: 20px;
}
body.results-page .results-controls .filters-panel {
  margin: 0;
}
body.results-page .results-controls .filters-content {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  column-gap: 24px;
  row-gap: 18px;
}
body.results-page .results-controls .filter-field {
  grid-column: span 3;
}
body.results-page .results-controls .clear-filters {
  grid-column: 1 / -1;
  justify-self: start;
  width: auto;
}
body.results-page .results-controls .filter-field {
  min-width: 0;
}
.time-filters {
  grid-column: 1 / -1;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.time-filters-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 8px 0 10px;
}
.time-filters-heading strong,
.time-filters-heading span {
  display: block;
}
.time-filters-heading strong {
  color: var(--ink);
  font-size: 14px;
}
.time-filters-heading span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.origin-time-filters {
  display: grid;
  gap: 8px;
}
.origin-time-filter {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #f7f9fa;
}
.origin-time-filter > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.origin-time-filter > summary::-webkit-details-marker {
  display: none;
}
.origin-time-filter > summary::before {
  content: '+';
  width: 18px;
  color: var(--coral);
  font-size: 18px;
  font-weight: 400;
}
.origin-time-filter[open] > summary::before {
  content: '–';
}
.origin-time-filter > summary span {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}
.time-leg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 8px 8px;
}
.time-leg {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--paper);
}
.time-leg h4 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Modèle unique de curseur, partagé par les horaires et les plafonds.
   Piste grise, segment corail entre les poignées, poignées blanches cerclées :
   sans le cercle blanc, une poignée corail sur un segment corail devient invisible. */
/* Volet dépliant du budget, calqué sur celui des horaires. */
.filter-group {
  grid-column: 1 / -1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #f7f9fa;
}
.filter-group > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.filter-group > summary::-webkit-details-marker {
  display: none;
}
.filter-group > summary::after {
  content: '+';
  margin-left: auto;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 400;
}
.filter-group[open] > summary::after {
  content: '−';
}
.filter-group > summary:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: -3px;
}
.filter-group-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--coral);
}
.filter-group-body {
  display: grid;
  gap: 14px;
  padding: 12px 12px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.filter-origin-icon {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  color: var(--coral);
  vertical-align: -2px;
  transform: rotate(45deg);
}
/* Au maximum, un curseur ne filtre rien : pas d'étiquette du tout plutôt qu'un « sans limite ». */
.time-range-heading output:empty,
.origin-time-filter > summary span:empty {
  display: none;
}
.limit-field {
  --limit-fill: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  align-items: center;
  gap: 2px 12px;
}
.limit-field .filter-label {
  grid-column: 1;
  line-height: 1.3;
}
/* Réservée uniquement là où deux champs se partagent une ligne. */
@media (min-width: 701px) {
  body.results-page .filters-content > .range-field .filter-label {
    min-height: 2.6em;
  }
}
/* Fourchette : deux poignées sur une piste, deux cases pour taper les bornes.
   Le segment coloré est ce qui est retenu ; le gris, ce qui est écarté. */
.range-field {
  --range-start: 0%;
  --range-end: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
}
.range-field[hidden] {
  display: none;
}
.range-field .filter-label {
  grid-column: 1;
  line-height: 1.3;
}
.range-value {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
}
.range-value:focus-within {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(255, 106, 19, 0.18);
}
.range-input {
  width: 9ch;
  field-sizing: content;
  min-width: 5ch;
  max-width: 11ch;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font:
    700 0.75rem 'DM Sans',
    Arial,
    sans-serif;
  text-align: center;
  appearance: textfield;
}
.range-input::-webkit-outer-spin-button,
.range-input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
.range-input:focus {
  outline: none;
}
.time-input {
  min-height: 0;
  field-sizing: content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font:
    700 0.75rem 'DM Sans',
    Arial,
    sans-serif;
}
.time-input::-webkit-calendar-picker-indicator {
  display: none;
}
.time-input:focus {
  outline: none;
}
.range-sep,
.range-unit {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
}
.range-slider {
  position: relative;
  grid-column: 1 / -1;
  height: 28px;
}
.range-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  height: 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(
    to right,
    var(--line) 0 var(--range-start),
    var(--coral) var(--range-start) var(--range-end),
    var(--line) var(--range-end) 100%
  );
}
.range-slider input[type='range'],
.time-range-slider input[type='range'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 28px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
}
.range-slider input[type='range']:disabled {
  opacity: 0.45;
}
.range-slider input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}
.range-slider input[type='range']::-moz-range-track {
  height: 4px;
  background: transparent;
}
.time-range {
  --time-start: 0%;
  --time-end: 100%;
}
.time-range + .time-range {
  margin-top: 16px;
}
.time-range-heading,
.time-range-limits {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.time-range-heading > span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}
.time-range-heading output {
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: #fff3ea;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
}
.time-range-slider {
  position: relative;
  height: 28px;
  margin-top: 4px;
}
.time-range-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  height: 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(
    to right,
    var(--line) 0 var(--time-start),
    var(--coral) var(--time-start) var(--time-end),
    var(--line) var(--time-end) 100%
  );
}
.time-range-slider input[type='range'] {
  z-index: 2;
  pointer-events: none;
}
.time-range-slider input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}
.range-slider input[type='range']::-webkit-slider-thumb,
.time-range-slider input[type='range']::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 2px solid var(--coral);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 4px rgba(16, 42, 67, 0.28);
  cursor: grab;
  pointer-events: auto;
}
.time-range-slider input[type='range']::-moz-range-track {
  height: 4px;
  background: transparent;
}
.range-slider input[type='range']::-moz-range-thumb,
.time-range-slider input[type='range']::-moz-range-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 2px solid var(--coral);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 4px rgba(16, 42, 67, 0.28);
  cursor: grab;
  pointer-events: auto;
}
.time-range-slider input[type='range']:focus-visible::-webkit-slider-thumb {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.time-range-slider input[type='range']:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.08);
}
.time-range-limits {
  margin-top: 1px;
  color: var(--muted);
  font-size: 0.6875rem;
}
body.results-page .results-controls .sort-control {
  position: relative;
  min-width: 0;
}
body.results-page .results-controls .sort-control label {
  position: absolute;
  left: 0;
  top: -24px;
  margin: 0;
}
body.results-page .results-controls .sort-control select {
  width: 100%;
  min-height: 52px;
  padding-left: 16px;
  border-radius: var(--r-md);
  font-weight: 700;
}
@media (max-width: 900px) {
  body.results-page .results-controls {
    grid-template-columns: 1fr;
  }
  body.results-page .results-controls .filters-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.results-page .results-controls .filter-field {
    grid-column: span 1;
  }
  body.results-page .results-controls .sort-control label {
    position: static;
    display: block;
    margin: 0 0 4px;
  }
}
/* Grand écran : les filtres quittent le haut de page pour un volet latéral toujours déplié,
   calé sous la barre de recherche pendant le défilement (hauteur de la barre lue dans app.js).
   Mobile et tablette gardent le panneau repliable. */
@media (min-width: 1100px) {
  body.results-page .results {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 28px;
    align-items: start;
  }
  body.results-page .results-controls {
    display: contents;
  }
  body.results-page .results-intro {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }
  body.results-page .favorite-status {
    grid-column: 2;
  }
  body.results-page .results-controls .sort-control {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-self: end;
    width: 230px;
  }
  body.results-page .results-controls .sort-control label {
    position: static;
    display: block;
    margin: 0 0 4px;
  }
  body.results-page .destination-grid {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 24px;
  }
  body.results-page .data-note {
    grid-column: 2;
    grid-row: 3;
  }
  body.results-page .results-controls .filters-panel {
    position: sticky;
    z-index: 36;
    top: 96px;
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 0;
    border-radius: var(--r-md);
    max-height: calc(100dvh - 112px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Au-dessus de la barre (z-index 35), le volet échappe à son ombre portée ; il repasse
     dessous dès qu'une liste de suggestions ou le calendrier s'ouvre sur lui. */
  body.results-page:has(
      .home-search-panel .suggestions:not([hidden]),
      .home-search-panel .date-picker:not([hidden])
    )
    .results-controls
    .filters-panel {
    z-index: auto;
  }
  body.results-page .filters-panel > summary {
    cursor: default;
  }
  body.results-page .filters-panel > summary::after {
    content: none;
  }
  /* Volet resserré pour en montrer le plus possible sous la barre de recherche. */
  body.results-page .filters-panel > summary {
    min-height: 44px;
  }
  body.results-page .results-controls .filters-content {
    grid-template-columns: 1fr;
    row-gap: 12px;
    padding: 14px 16px 16px;
  }
  body.results-page .filters-panel .filter-field select {
    min-height: 42px;
  }
  body.results-page .filters-panel .time-filters {
    padding-top: 0;
  }
  body.results-page .filters-panel .time-filters-heading {
    margin: 10px 0 8px;
  }
  body.results-page .filters-panel .clear-filters {
    min-height: 36px;
  }
  body.results-page .filters-panel .origin-time-filter > summary {
    min-height: 40px;
  }
  body.results-page .results-controls .filter-field,
  body.results-page .results-controls .clear-filters {
    grid-column: 1;
  }
  body.results-page .results-controls .clear-filters {
    width: 100%;
  }
  body.results-page .filters-content > .range-field .filter-label {
    min-height: 0;
  }
  body.results-page .filters-panel .range-field .filter-label,
  body.results-page .filters-panel .range-field .range-value {
    grid-column: 1 / -1;
    justify-self: start;
  }
  body.results-page .filters-panel .range-field .range-value {
    margin-top: 4px;
  }
  body.results-page .filters-panel .time-leg-grid {
    grid-template-columns: 1fr;
    padding: 0 6px 6px;
  }
  body.results-page .filters-panel .time-leg {
    padding: 10px 8px;
  }
}
@media (max-width: 700px) {
  body.results-page .results-intro h1 {
    font-size: 29px;
  }
  body.results-page .search-favorite-button {
    min-height: 48px;
  }
  body.results-page .results-controls .filters-content {
    grid-template-columns: 1fr;
  }
  body.results-page .results-controls .filter-field {
    grid-column: 1;
  }
  .time-leg-grid {
    grid-template-columns: 1fr;
  }
  .origin-time-filter:not([open]) > summary {
    min-height: 48px;
  }
  .time-range + .time-range {
    margin-top: 18px;
  }
  .time-range-slider {
    height: 34px;
  }
  .time-range-track {
    top: 15px;
  }
  .range-slider {
    height: 34px;
  }
  .range-track {
    top: 15px;
  }
  .range-slider input[type='range'],
  .time-range-slider input[type='range'] {
    height: 34px;
  }
  .time-range-slider input[type='range']::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    margin-top: -10px;
  }
}

/* Résultats mobile : le volet s'ouvre sur demande et se replie en descendant. Son ouverture
   agrandit réellement le haut de la page et repousse les résultats, sans superposition. */
.search-summary {
  display: none;
}
@media (max-width: 700px) {
  body.results-page .home-search-panel {
    min-height: 60px;
    padding: 0;
  }
  body.results-page .search-summary {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    min-height: 60px;
    padding: 0 12px 0 16px;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.2s ease,
      visibility 0.2s;
  }
  body.results-page.is-search-compact .search-summary {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .search-summary-trigger {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 60px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
  }
  .search-summary-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
  }
  .search-summary-copy strong {
    overflow: hidden;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .search-summary-copy small {
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
    font-weight: 600;
  }
  .search-summary-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--coral);
    color: #fff;
  }
  .search-summary-icon svg {
    width: 18px;
    height: 18px;
  }
  .search-summary-trigger:focus-visible,
  .compact-search-favorite:focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: -3px;
  }
  .compact-search-favorite {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--coral);
  }
  .compact-search-favorite svg {
    width: 20px;
    height: 20px;
  }
  .compact-search-favorite.is-saved {
    border-color: var(--coral);
    background: var(--coral);
    color: #fff;
  }

  body.results-page .home-search-panel-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-height: 760px;
    padding: 10px 16px 14px;
    overflow: visible;
    background: var(--ink);
    opacity: 1;
    transition:
      max-height 0.38s cubic-bezier(0.33, 1, 0.68, 1),
      padding 0.38s cubic-bezier(0.33, 1, 0.68, 1),
      opacity 0.2s ease;
  }
  body.results-page.is-search-compact .home-search-panel-inner {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body.results-page .comparator-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
  }
  body.results-page .bar-origins,
  body.results-page .bar-field {
    grid-column: 1 / -1;
  }
  body.results-page .search-button {
    grid-column: 1;
    order: 0;
    width: auto;
    border-radius: var(--r-md) 0 0 var(--r-md);
  }
  body.results-page .search-favorite-button {
    grid-column: 2;
    order: 0;
    width: 58px;
    border-radius: 0 var(--r-md) var(--r-md) 0;
  }
  body.results-page .favorite-status.is-toast {
    bottom: 94px;
    max-width: calc(100% - 32px);
    white-space: nowrap;
  }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  body.results-page .search-summary,
  body.results-page .home-search-panel-inner {
    transition: none;
  }
}

/* La case en cours de saisie s'allume : bordure corail, halo doux et étiquette corail.
   Le focus clavier garde son propre contour par-dessus — la couleur seule ne suffit pas. */
body .bar-origins .field:focus-within,
body .bar-field:focus-within,
body .bar-origins .field.is-active-field,
body .bar-field.is-active-field {
  position: relative;
  z-index: 3;
  border: 1px solid var(--coral);
  box-shadow: 0 0 0 3px rgba(255, 106, 19, 0.18);
}
body .bar-origins .field:focus-within > span,
body .bar-field:focus-within > span,
body .bar-origins .field.is-active-field > span,
body .bar-field.is-active-field > span {
  color: var(--coral);
}
body .bar-origins .field input:focus-visible,
body .bar-field input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .bar-origins .field,
  .bar-field {
    transition:
      border-color 0.15s ease,
      box-shadow 0.15s ease;
  }
}

/* Le « ? » du bandeau et la visite guidée de la barre de recherche. */
.header-help {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-left: auto;
  margin-right: 12px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font:
    700 16px 'DM Sans',
    Arial,
    sans-serif;
  line-height: 1;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}
.header-help:hover {
  border-color: var(--coral);
  background: rgba(255, 255, 255, 0.14);
}
.header-help:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
}
.site-header .header-help + .account-entry {
  margin-left: 0;
}
.tour-scrim {
  position: fixed;
  z-index: 110;
  inset: 0;
  background: rgba(6, 17, 30, 0.62);
}
body.is-touring .home-search-panel,
body.is-touring .search-card {
  position: relative;
  z-index: 120;
}
.is-tour-target {
  position: relative;
  z-index: 121;
}
.tour-bubble {
  position: fixed;
  z-index: 130;
  width: min(330px, calc(100vw - 24px));
  padding: 18px 20px 16px;
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(6, 17, 30, 0.42);
}
.tour-bubble::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: var(--r-xs) 0 0 0;
  background: var(--paper);
  transform: rotate(45deg);
}
.tour-bubble.is-above::before {
  top: auto;
  bottom: -7px;
  border-radius: 0 0 var(--r-xs) 0;
}
.tour-bubble .tour-step {
  margin: 0;
  color: var(--coral);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tour-bubble h2 {
  margin: 9px 0 0;
  font-size: 20px;
  letter-spacing: -0.025em;
}
.tour-bubble .tour-copy {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.tour-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.tour-actions button {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font:
    700 13px 'DM Sans',
    Arial,
    sans-serif;
}
.tour-actions .tour-skip {
  margin-right: auto;
  border-color: transparent;
  color: var(--muted);
  padding-left: 0;
}
.tour-actions .tour-skip:hover {
  color: var(--ink);
}
.tour-actions .tour-next {
  border-color: var(--coral);
  background: var(--coral);
  color: #fff;
}
.tour-actions .tour-next:hover {
  border-color: var(--ink);
  background: var(--ink);
}
.tour-actions button:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
}
@media (max-width: 700px) {
  .header-help {
    width: 36px;
    height: 36px;
    margin-right: 10px;
  }
  .tour-bubble {
    padding: 16px 16px 14px;
  }
  .tour-bubble h2 {
    font-size: 18px;
  }
}