/* ==========================================================================
   /voyage — le voyage jour par jour.

   POURQUOI CE FICHIER EXISTE. Deux structures que les classes partagées de
   style.css ne couvrent pas, parce qu'elles n'existent nulle part ailleurs sur
   le site : un TRAJET (deux bornes horaires reliées par un fil, avec sa durée
   posée dessus) et une COLONNE DE JOURNÉES de trente et quelques lignes, dont
   la plupart sont vides et doivent le rester lisiblement. Tout le reste de la
   page compose `.bloc`, `.meta`, `.etiquette`, `.data-table`, `.vide`, `.pli`.

   Aucune valeur inventée : tailles, espacements, rayons et couleurs sortent des
   échelles de `:root` (DIRECTION.md §3 et §4). Chargé après style.css, depuis
   le `{% block head %}` de voyage.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LE VOL — une carte par sens.
   -------------------------------------------------------------------------- */
.vol {
  border: 1px solid var(--border);
  border-radius: var(--rayon-3);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  padding: var(--esp-5);
  margin-bottom: var(--esp-5);
}

.vol__tete {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

/* Le logo du transporteur, à sa taille d'origine (96 px) rendu en 44 : sur un
   écran à deux fois la densité, il reste net sans qu'on ait à embarquer un
   second fichier. `flex: none` l'empêche d'être écrasé par un titre long. */
.vol__logo {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--rayon-2);
  background: var(--on-accent);   /* le sigle est rouge et détouré : il lui faut
                                     un fond clair, y compris en thème sombre */
  padding: 3px;
}

.vol__titre {
  font-family: "Shippori Mincho", Georgia, serif;
  font-size: var(--fs-500);
  font-weight: 700;
  line-height: var(--lh-serre);
  margin: 0;
}

.vol__route {
  font-size: var(--fs-300);
  color: var(--muted);
  line-height: var(--lh-ui);
  margin: 2px 0 0;
}

.vol__meta { margin: var(--esp-3) 0 var(--esp-4); }

/* --------------------------------------------------------------------------
   LES TRONÇONS — un avion, une escale, un avion.

   La liste est numérotée dans le HTML (`<ol>`) parce que l'ordre EST
   l'information : on prend ces avions dans cet ordre et pas un autre. Les
   puces sont retirées parce que le numéro de vol les remplace, et qu'un
   « 1. CA862 » se lit comme deux numérotations concurrentes.
   -------------------------------------------------------------------------- */
.troncons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.troncon {
  border: 1px solid var(--border);
  border-left: 3px solid var(--torii);
  border-radius: var(--rayon-2);
  background: var(--panel-raised);
  padding: var(--esp-3) var(--esp-4);
}

.troncon__id {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin: 0 0 var(--esp-3);
}

.troncon__duree {
  font-size: var(--fs-200);
  color: var(--muted);
}

/* Les deux bornes et le fil qui les relie. En dessous de 520 px la ligne
   deviendrait trois colonnes de deux mots : on la casse alors en deux lignes
   empilées, et le fil passe à l'horizontale sous la première. */
.troncon__trajet {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--esp-3);
}

.borne {
  display: grid;
  gap: 1px;
  line-height: var(--lh-serre);
}

.borne--fin { text-align: right; }

.borne__heure {
  font-family: "Shippori Mincho", Georgia, serif;
  font-weight: 700;
  font-size: var(--fs-500);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Le code IATA est ce qu'on cherche des yeux sur un panneau d'aéroport : il
   passe en capitales espacées, comme une étiquette, et le nom complet en
   dessous pour qui ne lit pas les codes. */
.borne__code {
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--torii-dark);
}

.borne__lieu {
  font-size: var(--fs-300);
  color: var(--ink);
}

.borne__date {
  font-size: var(--fs-200);
  color: var(--muted);
}

.troncon__fil {
  display: block;
  width: clamp(24px, 8vw, 72px);
  height: 1px;
  background: var(--border);
  position: relative;
}

/* La pointe de la flèche, en pur CSS : deux traits, pas d'image ni de police
   d'icônes (aucune bibliothèque nouvelle, DIRECTION.md §0.6). */
.troncon__fil::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  transform: translateY(-50%) rotate(45deg);
}

/* --------------------------------------------------------------------------
   L'ESCALE — une ligne à part entière, pas une note.
   -------------------------------------------------------------------------- */
.escale {
  font-size: var(--fs-300);
  color: var(--muted);
  padding-left: var(--esp-5);
  border-left: 1px dashed var(--border);
  margin-left: var(--esp-4);
}

.escale__duree {
  font-family: "Shippori Mincho", Georgia, serif;
  font-weight: 700;
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   LES SIÈGES.

   `.place--lot` : une place dont la source ne dit pas à qui elle est. Elle
   s'affiche exactement comme les autres moins le nom — pas en grisé, pas en
   « inconnu » : le siège EST connu, c'est son occupant qui ne l'est pas, et le
   nom du dossier à gauche dit déjà de qui il s'agit à deux personnes près.
   -------------------------------------------------------------------------- */
.sieges {
  list-style: none;
  margin: var(--esp-3) 0 0;
  padding: var(--esp-3) 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.sieges__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-1) var(--esp-2);
}

.sieges__qui {
  font-size: var(--fs-200);
  color: var(--muted);
  min-width: 12ch;
}

.place {
  display: inline-flex;
  align-items: baseline;
  gap: var(--esp-1);
  font-size: var(--fs-200);
}

.place__qui { color: var(--muted); }

.place__siege {
  font-family: "Shippori Mincho", Georgia, serif;
  font-weight: 700;
  font-size: var(--fs-300);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--rayon-1);
  padding: 1px 6px;
}

.vol-dossiers__titre {
  font-family: "Shippori Mincho", Georgia, serif;
  font-size: var(--fs-500);
  font-weight: 700;
  margin: var(--esp-6) 0 var(--esp-3);
}

/* --------------------------------------------------------------------------
   LA COLONNE DES JOURNÉES.

   Trente-quatre lignes dont trente sont vides : c'est le cas normal
   aujourd'hui, et il doit rester lisible sans se lire comme une panne. D'où
   trois traitements bien distincts — une journée avec un vol est marquée au
   vermillon, une journée hors du Japon est en encre diluée, une journée à
   remplir garde sa ligne pleine et dit ce qui manque.
   -------------------------------------------------------------------------- */
.frise-jours {
  list-style: none;
  margin: var(--esp-4) 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.jr {
  display: grid;
  grid-template-columns: 4ch 14ch 1fr;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  padding: var(--esp-2) var(--esp-2);
  border-bottom: 1px solid var(--border);
}

/* Le week-end n'est pas une décoration : plusieurs musées et jardins ferment le
   lundi, et les trains se remplissent le samedi. Un aplat très léger suffit à
   le voir sans le commenter. */
.jr--we { background: var(--panel-raised); }

.jr--vol {
  border-left: 3px solid var(--torii);
  padding-left: calc(var(--esp-2) - 3px);
}

/* Hors du Japon : les deux journées de vol depuis/vers Genève. Atténuées par la
   COULEUR, jamais par l'opacité (DIRECTION.md §2) — une journée en transit reste
   une journée du voyage, pas une ligne désactivée. */
.jr--hors .jr__date,
.jr--hors .jr__num { color: var(--usuzumi); }

.jr__num {
  font-family: "Shippori Mincho", Georgia, serif;
  font-weight: 700;
  font-size: var(--fs-300);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.jr__court {
  font-size: var(--fs-300);
  color: var(--ink);
}

.jr__quoi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  font-size: var(--fs-300);
}

/* --------------------------------------------------------------------------
   LE VOL DU JOUR — la carte compacte posée dans la colonne des journées.

   Même information que les tronçons de « Le billet », en plus dense : c'est
   une case de calendrier, pas une carte pleine largeur. `.jr-vol__num` porte
   déjà `.etiquette.etiquette--torii` (§5.4 du contrat partagé) — on ne
   redéfinit pas une seconde pastille pour la même chose.
   -------------------------------------------------------------------------- */
.jr-vol {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 3px var(--esp-2) 3px 3px;
  border: 1px solid var(--border);
  border-radius: var(--rayon-pilule);
  background: var(--panel-raised);
}

.jr-vol__num { flex: none; }

.jr-vol__borne {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: var(--lh-serre);
  gap: 1px;
}

.jr-vol__heure {
  font-family: "Shippori Mincho", Georgia, serif;
  font-weight: 700;
  font-size: var(--fs-300);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.jr-vol__code {
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--torii-dark);
}

/* Une flèche courte, en pur CSS — même principe que `.troncon__fil`, réduite à
   la taille d'une puce puisqu'elle relie deux heures sur une seule ligne. */
.jr-vol__fleche {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--border);
  position: relative;
}

.jr-vol__fleche::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  transform: translateY(-50%) rotate(45deg);
}

.jr-vol__duree,
.jr-vol__texte {
  font-size: var(--fs-200);
  color: var(--muted);
  white-space: nowrap;
}

.jr__etape {
  font-family: "Shippori Mincho", Georgia, serif;
  font-weight: 700;
  color: var(--ink);
}

/* « pas encore d'étape » : en encre diluée, qui tient 4,5:1 sur tous les fonds
   du site — lisible, mais visiblement en attente. */
.jr__attente {
  font-size: var(--fs-200);
  color: var(--usuzumi);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   ÉTROIT — sous 560 px, la grille à trois colonnes ne tient plus : le trajet
   s'empile et la journée passe le numéro et la date sur une même ligne
   au-dessus de son contenu.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .troncon__trajet {
    grid-template-columns: 1fr;
    gap: var(--esp-2);
  }
  .borne--fin { text-align: left; }
  .troncon__fil {
    width: 100%;
    justify-self: stretch;
  }
  .jr {
    grid-template-columns: 4ch 1fr;
  }
  .jr__quoi { grid-column: 1 / -1; }
  .sieges__qui { min-width: 0; }
}