/* ============================================================
   May'Kilos — résultats, détail d'un trajet, interruption

   D'après « R1 - Site recherche.dc.html ». La maquette est dessinée à
   1440 px en pixels fixes ; ici tout est fluide et se replie à 1100
   puis 820 px, aux mêmes paliers que le reste du site.

   Deux dispositions font tout le travail sur grand écran, et aucune
   n'existe sur téléphone : le rail de filtres collé à gauche des
   résultats, et l'encadré de réservation collé à droite du détail.
   ============================================================ */

/* ---------- Barre de recherche remplie ---------- */
.barre-recherche { padding-top: 20px; }
.barre-recherche form {
  background: var(--mk-card); border-radius: var(--mk-r-pill);
  padding: 10px 10px 10px 14px; display: flex; align-items: center;
  box-shadow: var(--mk-shadow-raised);
}
.barre-recherche .champ { flex: 1.3; padding: 6px 18px; min-width: 0; }
.barre-recherche .champ.court { flex: .7; }
.barre-recherche .champ .l { font: 600 12px var(--mk-font); color: var(--mk-text-2); }
.barre-recherche .champ .v {
  font: 700 17px var(--mk-font); color: var(--mk-text);
  border: 0; background: none; padding: 0; width: 100%; outline: none;
  /* Sans cette hauteur, la boîte du champ fait 23 px : un pixel sous le
     minimum de 24 × 24. Le texte ne bouge pas, seule la cible grandit. */
  min-height: 26px;
}
.barre-recherche .filet { width: 1px; height: 36px; background: var(--mk-hairline); flex: none; }
.barre-recherche .btn { height: 56px; padding: 0 32px; flex: none; }

/* ---------- Bandeau des sept jours ---------- */
.jours-ligne { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 18px; }
.jour-ligne {
  min-height: 76px; border-radius: var(--mk-r-card); background: var(--mk-card);
  box-shadow: var(--mk-shadow-card); border: 1px solid var(--mk-hairline-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-decoration: none; padding: 8px;
}
.jour-ligne .j { font: 600 13px var(--mk-font); color: var(--mk-text-2); }
.jour-ligne .p { font: 800 18px var(--mk-font); color: var(--mk-text); margin-top: 4px; }
/* L'ordinal du 1er : en exposant plein format il chevauchait le prix.
   Réduit et désaligné du haut, il tient sur la même ligne. */
.jour-ligne sup { font-size: .7em; vertical-align: .35em; line-height: 0; }
.jour-ligne.on { background: var(--mk-primary-surface); border-color: transparent; box-shadow: none; }
.jour-ligne.on .j { color: rgba(255, 255, 255, .75); }
.jour-ligne.on .p { color: #fff; }

/* ---------- La grille à deux colonnes ---------- */
.recherche-grille {
  display: grid; grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px; align-items: start; margin-top: 24px; padding-bottom: 48px;
}

/* ---------- Le rail de filtres ---------- */
.filtres {
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  border-radius: var(--mk-r-card); padding: 22px; box-shadow: var(--mk-shadow-card);
  /* Collé : sur une longue liste de résultats, remonter chercher un filtre
     coûte un aller-retour à chaque essai. */
  position: sticky; top: 92px;
  max-height: calc(100dvh - 112px); overflow-y: auto;
}
.filtres-tete { display: flex; align-items: center; justify-content: space-between; }
.filtres-tete h2 { font: 800 19px var(--mk-font); color: var(--mk-primary); }
.filtres-tete button {
  min-height: 44px; padding: 0 6px; background: none; border: 0;
  font: 700 14px var(--mk-font); color: var(--mk-primary); cursor: pointer;
}
.filtres h3 { font: 600 13px var(--mk-font); color: var(--mk-text-2); margin-top: 14px; }
.filtres .sep { height: 1px; background: var(--mk-hairline); margin: 20px 0; }
.filtres .aide { font: 400 13px/1.5 var(--mk-font); color: var(--mk-text-2); }

.bornes { display: flex; justify-content: space-between; font: 700 16px var(--mk-font); color: var(--mk-text); margin-top: 6px; }
.curseur { position: relative; height: 6px; border-radius: var(--mk-r-pill); background: var(--mk-star-vide); margin: 14px 0 6px; }
.curseur i { position: absolute; top: 0; bottom: 0; border-radius: var(--mk-r-pill); background: var(--mk-action); }
.curseur b {
  position: absolute; top: -9px; width: 24px; height: 24px; border-radius: var(--mk-r-pill);
  background: var(--mk-card); box-shadow: 0 2px 8px rgba(46, 58, 140, .18);
  border: 1px solid var(--mk-hairline);
}

/* .pastilles / .pastille vivent dans site.css : le tunnel s'en sert aussi. */

.coches { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.coche { min-height: 44px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.coche input { position: absolute; opacity: 0; width: 0; height: 0; }
.coche .case {
  width: 22px; height: 22px; border-radius: 8px; flex: none;
  box-shadow: inset 0 0 0 2px var(--mk-hairline-fort);
  display: grid; place-items: center;
}
.coche.rond .case { border-radius: var(--mk-r-pill); }
.coche .case svg { opacity: 0; }
.coche input:checked + .case { background: var(--mk-action); box-shadow: none; }
.coche input:checked + .case svg { opacity: 1; }
.coche input:focus-visible + .case { outline: 3px solid var(--mk-primary); outline-offset: 2px; }
.coche .lib { flex: 1; font: 500 15px var(--mk-font); color: var(--mk-text); }
.coche .nb { font: 400 13px var(--mk-font); color: var(--mk-text-2); }

/* ---------- L'en-tête des résultats ---------- */
.res-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.res-tete h1 { font: 800 clamp(21px, 2vw, 26px) var(--mk-font); color: var(--mk-primary); letter-spacing: -.8px; }
.tris { display: flex; gap: 8px; flex-wrap: wrap; }
.tri {
  min-height: 44px; padding: 0 18px; border-radius: var(--mk-r-pill);
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  box-shadow: var(--mk-shadow-card);
  display: inline-flex; align-items: center; font: 600 14px var(--mk-font);
  color: var(--mk-text); text-decoration: none; cursor: pointer;
}
.tri.on { background: var(--mk-primary-surface); border-color: transparent; color: #fff; font-weight: 700; box-shadow: none; }

/* ---------- La carte d'un trajet ---------- */
.resultats { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.trajet-c {
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  border-radius: var(--mk-r-card); padding: 24px; box-shadow: var(--mk-shadow-card);
  display: grid; grid-template-columns: minmax(0, 300px) 1px minmax(0, 1fr) 180px;
  gap: 28px; align-items: stretch;
}
.trajet-c .filet-v { background: var(--mk-hairline); }
.voyageur-c { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.avatar {
  width: 44px; height: 44px; border-radius: var(--mk-r-pill); background: var(--mk-avatar);
  flex: none; display: grid; place-items: center;
  font: 800 17px var(--mk-font); color: var(--mk-avatar-text);
}
.avatar.grand { width: 76px; height: 76px; font-size: 30px; }
.voyageur-c .nom { font: 700 16px var(--mk-font); color: var(--mk-text); }
.marques-c { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.verifie {
  min-height: 22px; padding: 2px 9px; border-radius: var(--mk-r-pill);
  background: var(--mk-mint); font: 600 11px var(--mk-font); color: var(--mk-mint-text);
}
.note-c { font: 600 13px var(--mk-font); color: var(--mk-text-2); }

.kilos-t { font: 800 20px var(--mk-font); color: var(--mk-mint-text); letter-spacing: -.4px; }
.jauge-s { display: flex; gap: 3px; margin-top: 10px; }
.jauge-s i { flex: 1; height: 12px; border-radius: 3px; background: var(--mk-primary-surface); }
.jauge-s i.libre { background: var(--mk-action); }
.tags { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.tag {
  min-height: 32px; padding: 4px 12px; border-radius: var(--mk-r-pill);
  background: var(--mk-mint); display: inline-flex; align-items: center;
  font: 600 13px var(--mk-font); color: var(--mk-mint-text);
}
.sequestre { display: flex; align-items: center; gap: 8px; margin-top: 16px; font: 500 13px var(--mk-font); color: var(--mk-text-2); }
.prix-c { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 16px; }
.prix-c .v { font: 800 40px var(--mk-font); color: var(--mk-primary); letter-spacing: -1.6px; text-align: right; }
.prix-c .u { font: 400 13px var(--mk-font); color: var(--mk-text-2); text-align: right; }

/* ---------- L'état vide ---------- */
.vide {
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  border-radius: var(--mk-r-card); padding: clamp(28px, 4vw, 56px);
  box-shadow: var(--mk-shadow-card); display: flex; gap: 44px; align-items: center; flex-wrap: wrap;
}
.vide h1 { font: 800 clamp(24px, 3vw, 34px)/1.15 var(--mk-font); color: var(--mk-primary); letter-spacing: -1.2px; text-wrap: balance; }
.vide p { font: 400 17px/1.6 var(--mk-font); color: var(--mk-text-2); margin-top: 14px; }
.vide .actions { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.vide .voisines { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

/* ============================================================
   Détail d'un trajet
   ============================================================ */
.fil { display: flex; align-items: center; gap: 8px; padding-top: 20px; font: 500 13px var(--mk-font); color: var(--mk-text-2); flex-wrap: wrap; }
/* Les maillons du fil ne font que 18 px de haut sans cette hauteur, sous le
   minimum de 24 × 24. La ligne de base ne bouge pas, la cible seule grandit. */
.fil a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.fil a:hover { color: var(--mk-primary); text-decoration: underline; }
.fil .ici { color: var(--mk-text); font-weight: 700; }

.detail-grille {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: 32px; align-items: start; padding: 20px 0 56px;
}
.detail-col { display: flex; flex-direction: column; gap: 16px; }

.bandeau-vol { background: var(--mk-primary-surface); border-radius: var(--mk-r-card); padding: clamp(20px, 3vw, 32px); }
.bandeau-vol h1 { font: 800 clamp(24px, 2.8vw, 34px) var(--mk-font); color: #fff; letter-spacing: -1.2px; }
.bandeau-vol .direct {
  min-height: 34px; padding: 4px 16px; border-radius: var(--mk-r-pill);
  background: rgba(255, 255, 255, .16); display: inline-flex; align-items: center;
  font: 600 14px var(--mk-font); color: #fff; flex: none;
}
.frise { display: flex; gap: 20px; margin-top: 26px; }
.frise .rail { width: 16px; display: flex; flex-direction: column; align-items: center; padding-top: 8px; flex: none; }
.frise .rail .d { width: 13px; height: 13px; border-radius: var(--mk-r-pill); box-shadow: inset 0 0 0 3px var(--mk-action); flex: none; }
.frise .rail .t { flex: 1; width: 2px; background: rgba(255, 255, 255, .28); }
.frise .rail .a { width: 13px; height: 13px; border-radius: 3px; background: var(--mk-action); flex: none; }
.frise .ville { font: 700 clamp(18px, 1.8vw, 22px) var(--mk-font); color: #fff; }
.frise .heure { font: 800 24px var(--mk-font); color: #fff; letter-spacing: -.6px; }
.frise .det { font: 400 15px var(--mk-font); color: rgba(255, 255, 255, .68); }
.frise .ligne-f { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.carte-b {
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  border-radius: var(--mk-r-card); padding: clamp(20px, 2.4vw, 28px); box-shadow: var(--mk-shadow-card);
}
.carte-b h2 { font: 800 clamp(19px, 1.8vw, 22px) var(--mk-font); color: var(--mk-primary); letter-spacing: -.5px; }

.profil-t { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.profil-t .nom { font: 800 26px var(--mk-font); color: var(--mk-primary); letter-spacing: -.7px; }
.profil-t .sous { font: 400 15px var(--mk-font); color: var(--mk-text-2); margin-top: 4px; }

.notes-2 { display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.note-b { flex: 1; min-width: 220px; padding: 18px 20px; border-radius: var(--mk-r-card); background: var(--mk-bg); }
.note-b .l { font: 500 13px var(--mk-font); color: var(--mk-text-2); }
.note-b .v { font: 800 30px var(--mk-font); color: var(--mk-primary); letter-spacing: -.8px; }
/* Les étoiles sont décoratives : la note chiffrée est juste à côté, en gros.
   Elles portent aria-hidden pour que le lecteur d'écran ne les épelle pas. */
.etoiles { font: 600 15px var(--mk-font); color: var(--mk-star); letter-spacing: 1px; }
.etoiles .creuse { color: var(--mk-star-vide); }

.avis-l { display: flex; gap: 24px; margin-top: 22px; flex-wrap: wrap; }
.avis-i { flex: 1; min-width: 240px; }
.avis-i .qui { display: flex; align-items: baseline; gap: 10px; }
.avis-i .qui .n { font: 700 15px var(--mk-font); color: var(--mk-text); }
.avis-i .qui .d { font: 400 13px var(--mk-font); color: var(--mk-text-2); }
.avis-i p { font: 400 15px/1.55 var(--mk-font); color: var(--mk-text); margin-top: 8px; }
.avis-i .signale { color: var(--mk-text-2); }

.deux-listes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.liste-oui, .liste-non { list-style: none; display: grid; gap: 12px; margin-top: 18px; }
.liste-oui li, .liste-non li { position: relative; padding-left: 32px; font: 400 15px/1.5 var(--mk-font); color: var(--mk-text); }
.liste-oui li::before, .liste-non li::before {
  content: ''; position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: var(--mk-r-pill);
}
.liste-oui li::before { background: var(--mk-mint); }
.liste-non li::before { background: var(--mk-refus-bg); }
.liste-oui li::after, .liste-non li::after {
  content: ''; position: absolute; left: 5px; top: 7px; width: 12px; height: 10px;
  -webkit-mask: var(--mk-coche) center / 12px 10px no-repeat;
          mask: var(--mk-coche) center / 12px 10px no-repeat;
}
.liste-oui li::after { background: var(--mk-mint-text); }
.liste-non li::after {
  background: var(--mk-refus-text);
  -webkit-mask: var(--mk-croix) center / 11px 11px no-repeat;
          mask: var(--mk-croix) center / 11px 11px no-repeat;
  left: 6px; top: 7px; width: 11px; height: 11px;
}

.remise-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.remise-c { padding: 18px 20px; border-radius: var(--mk-r-card); background: var(--mk-bg); }
.remise-c.code { background: var(--mk-mint); }
.remise-c .l { font: 500 13px var(--mk-font); color: var(--mk-text-2); }
.remise-c.code .l { color: var(--mk-mint-text); }
.remise-c .t { font: 700 16px/1.4 var(--mk-font); color: var(--mk-text); margin-top: 4px; }
.remise-c .s { font: 400 13px/1.5 var(--mk-font); color: var(--mk-text-2); margin-top: 8px; }
.remise-c.code .s { color: var(--mk-mint-text); }
.cases-code { display: flex; gap: 8px; margin-top: 10px; }
.cases-code i {
  width: 38px; height: 46px; border-radius: 12px; background: var(--mk-card);
  display: grid; place-items: center;
}
.cases-code i::after { content: ''; width: 6px; height: 6px; border-radius: var(--mk-r-pill); background: var(--mk-mint-text); }

.rdv { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; }
.plan {
  border-radius: var(--mk-r-card); overflow: hidden; min-height: 260px;
  background:
    linear-gradient(var(--mk-hairline) 1px, transparent 1px) 0 0 / 100% 64px,
    linear-gradient(90deg, var(--mk-hairline) 1px, transparent 1px) 0 0 / 88px 100%,
    var(--mk-bg);
  position: relative;
}
.plan .eau { position: absolute; left: 0; right: 0; top: 58%; height: 26px; background: var(--mk-mint); opacity: .8; }
.plan .pt { position: absolute; width: 18px; height: 18px; border-radius: var(--mk-r-pill); border: 3px solid var(--mk-card); }
.plan .pt.a { background: var(--mk-action); left: 22%; top: 34%; }
.plan .pt.b { background: var(--mk-primary-surface); left: 62%; top: 72%; }
.rdv-l { display: grid; gap: 12px; align-content: start; }
.rdv-i { padding: 14px 16px; border-radius: var(--mk-r-card); background: var(--mk-bg); }
.rdv-i .t { font: 700 15px var(--mk-font); color: var(--mk-text); display: flex; align-items: center; gap: 8px; }
.rdv-i .t::before { content: ''; width: 10px; height: 10px; border-radius: var(--mk-r-pill); background: var(--mk-action); flex: none; }
.rdv-i.b .t::before { background: var(--mk-primary-surface); }
.rdv-i .s { font: 400 13px/1.5 var(--mk-font); color: var(--mk-text-2); margin-top: 4px; }
.rdv .note-p { font: 400 13px/1.5 var(--mk-font); color: var(--mk-text-2); grid-column: 1 / -1; }

/* ---------- L'encadré de réservation ---------- */
.reserver {
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  border-radius: var(--mk-r-card); padding: 24px; box-shadow: var(--mk-shadow-raised);
  /* Collé : on veut pouvoir lire les avis, les conditions et la carte sans
     jamais perdre de vue le prix ni le bouton. */
  position: sticky; top: 92px;
}
.reserver .prix-t { display: flex; align-items: baseline; gap: 8px; }
.reserver .prix-t .v { font: 800 32px var(--mk-font); color: var(--mk-primary); letter-spacing: -1px; }
.reserver .prix-t .u { font: 400 14px var(--mk-font); color: var(--mk-text-2); }
.reserver .dispo { font: 600 14px var(--mk-font); color: var(--mk-mint-text); margin-top: 4px; }

.compteur { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0; }
.compteur button {
  width: 52px; height: 52px; border-radius: var(--mk-r-pill); border: 0; flex: none;
  background: var(--mk-bg); color: var(--mk-text); font: 400 26px var(--mk-font);
  cursor: pointer; display: grid; place-items: center;
}
.compteur button.plus { background: var(--mk-action); color: var(--mk-on-action); }
.compteur button:disabled { opacity: .4; cursor: not-allowed; }
.compteur .val { text-align: center; }
.compteur .val .n { font: 800 30px var(--mk-font); color: var(--mk-text); }
.compteur .val .m { font: 400 12px var(--mk-font); color: var(--mk-text-2); }

.calcul { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--mk-hairline); }
.calcul .l { display: flex; justify-content: space-between; gap: 12px; font: 400 15px var(--mk-font); color: var(--mk-text-2); }
.calcul .l b { font-weight: 600; color: var(--mk-text); }
.calcul .tot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--mk-hairline); }
.calcul .tot .l2 { font: 700 17px var(--mk-font); color: var(--mk-text); }
.calcul .tot .v { font: 800 26px var(--mk-font); color: var(--mk-text); letter-spacing: -.8px; }
.qui-paie { font: 400 13px/1.5 var(--mk-font); color: var(--mk-text-2); margin-top: 10px; }
.rassure { display: grid; gap: 10px; margin-top: 14px; }
.rassure li { display: flex; gap: 10px; font: 400 13px/1.45 var(--mk-font); color: var(--mk-text-2); }
.rassure svg { flex: none; margin-top: 1px; }
.sans-compte { font: 400 12px var(--mk-font); color: var(--mk-text-2); text-align: center; margin-top: 12px; }

/* ---------- L'interruption ---------- */
/* ============================================================
   Adaptation
   ============================================================ */
@media (max-width: 1100px) {
  /* Le rail passe au-dessus des résultats : à 1024 px, 280 px de filtres
     laissent des cartes trop étroites pour que l'horaire tienne. */
  .recherche-grille { grid-template-columns: 1fr; }
  .filtres { position: static; max-height: none; }
  .detail-grille { grid-template-columns: 1fr; }
  .reserver { position: static; }
  .trajet-c { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); }
  .trajet-c .prix-c { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .trajet-c .prix-c .v, .trajet-c .prix-c .u { text-align: left; }
  .rdv { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .barre-recherche form { flex-direction: column; align-items: stretch; border-radius: var(--mk-r-card); padding: 8px; }
  .barre-recherche .filet { width: auto; height: 1px; }
  .barre-recherche .champ { padding: 12px 16px; }
  .barre-recherche .btn { width: 100%; margin-top: 8px; }
  .jours-ligne { grid-template-columns: repeat(4, 1fr); }
  .trajet-c { grid-template-columns: 1fr; gap: 18px; }
  .trajet-c .filet-v { height: 1px; width: auto; }
  .deux-listes, .remise-3 { grid-template-columns: 1fr; }
  .vide { gap: 24px; }
  .vide svg { display: none; }
  /* « Élargir aux dates voisines · ± 3 jours » ne se coupe pas : .btn est en
     nowrap, et ce seul bouton réclamait 348 px de large. La colonne suivait,
     la page se décalait latéralement à 390 px. Ici le texte a le droit de
     passer à la ligne, et les deux boutons prennent toute la largeur. */
  .vide .actions { flex-direction: column; align-items: stretch; }
  .vide .actions .btn { white-space: normal; padding: 12px 20px; text-align: center; }
}