/*
 * Accueil visiteur « La Journée » (docs/ux/LA_JOURNEE.md).
 * Une scène qui reste à l'écran (sticky) dans une section haute : le défilement
 * fait passer la journée de 06:00 à 23:00. Chargée seulement par
 * app/views/home/_la_journee.html.erb. Aucun style en ligne : le contrôleur ne
 * pose que des propriétés CSSOM (position des cibles et de la fiche,
 * --jy-nav) et des classes/attributs d'état.
 *
 * Sans JavaScript (@media (scripting: none)) : page lisible, chapitres empilés.
 * Fichier .css.erb pour la seule URL d'asset de l'image d'attente (aube.png).
 */

/* Police des titres et de l'horloge : le fichier Inter du site (inter-font), en
   `font-display: optional` (revue v3 n° 5). Prête au premier affichage, elle
   sert ; sinon la police système reste pour toute la visite. Un titre ne se
   recompose donc jamais à l'arrivée de la police (le texte ne saute pas). Le
   texte courant et la mono gardent les polices du site (swap) : elles ne
   changent aucune hauteur (ville sur une ligne, rubriques d'une ligne). */
@font-face {
  font-family: 'JY Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url(/assets/Inter-roman.latin.var-4b87a3d384ea557b10afa9570b753eda868b12b5e51eea0977ffa6e641998f6a.woff2) format('woff2');
  unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
}
@font-face {
  font-family: 'JY Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url(/assets/Inter-roman.latin-ext.var-46bc23ba7e33ea447579cd95b95f34665d7560377065b72f3a77df8bca4b0e5c.woff2) format('woff2');
  unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20C0,U+2113,U+2C7C,U+2C7F,U+A7FF;
}
@font-face {
  font-family: 'JY Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url(/assets/Inter-roman.cyrillic.var-8aa524d3da3b8fd4a03ff2d0d41ea50520113fb2e8ae57c15079dabea44b3529.woff2) format('woff2');
  unicode-range: U+0400-049E,U+04A0-0500,U+052F,U+20B4,U+2116,U+2DFF,U+A69F;
}
@font-face {
  font-family: 'JY Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url(/assets/Inter-roman.greek.var-1134a39060691474b0f57b2de5e09977a31a8c06df90960b982314f58a5b4c63.woff2) format('woff2');
  unicode-range: U+0370-0378,U+037A-0380,U+0384-038B,U+038C,U+038E-03A2,U+03A3-03E2,U+03F0-0400,U+1F00-1F16,U+1F18-1F1E,U+1F20-1F46,U+1F48-1F4E,U+1F50-1F58,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7E,U+1F80-1FB5,U+1FB6-1FC5,U+1FC6-1FD4,U+1FD6-1FDC,U+1FDD-1FF0,U+1FF2-1FF5,U+1FF6-1FFF;
}

.jy {
  --jy-ground: #faf7f2;
  --jy-fg: #0a0a0a;
  --jy-muted: #5b6270;          /* 5,74:1 sur crème (la maquette : #6b7280, 4,52:1) */
  --jy-signal: #d8611f;
  --jy-on-signal: #0a0a0a;
  --jy-signal-text: #b34a0e;    /* 5,04:1 sur crème */
  --jy-rule: #0a0a0a;
  --jy-card: #faf7f2;
  --jy-card-fg: #0a0a0a;
  --jy-nav: 67px;               /* en-tête du site (h-16 + bordure) ; mesuré par le contrôleur */
  --jy-display: 'JY Inter', system-ui, sans-serif; /* titres et horloge : jamais échangés (voir les @font-face) */
  --jy-text: Inter, 'Inter var', system-ui, sans-serif;
  --jy-mono: 'Space Mono', 'IBM Plex Mono', ui-monospace, monospace;
  position: relative;
  color: var(--jy-fg);
  background: var(--jy-ground);
  font-family: var(--jy-text);
  overflow-wrap: normal;
}

/* Après 19 h : encre. L'interface bascule d'un coup, textes et fonds ensemble :
   aucune couleur n'est mise en transition dans cette feuille, le contraste reste
   AA à chaque instant. La ville, elle, passe par le crépuscule (canvas). */
.jy[data-theme='ink'] {
  --jy-ground: #0a0a0a;
  --jy-fg: #faf7f2;
  --jy-muted: #a1a1aa;          /* 7,72:1 sur encre */
  --jy-signal-text: #d8611f;    /* 5,33:1 sur encre */
  --jy-rule: #faf7f2;
  color-scheme: dark;
}

@media (min-width: 1024px) {
  .jy { --jy-nav: 83px; }       /* h-20 + bordure */
}

.jy *,
.jy *::before,
.jy *::after { box-sizing: border-box; }

/* Mode de la page, lu par le contrôleur (jamais mesuré) : scène, flux ou page. */
.jy { --jy-mode: scene; }
@media (min-width: 340px) and (max-width: 860px) and (min-height: 640px) { .jy { --jy-mode: flow; } }
@media (max-width: 339px), (max-height: 639px) { .jy { --jy-mode: page; } }

/* `hidden` l'emporte toujours (revue v3 n° 6 : le repère en display:flex restait visible). */
.jy [hidden] { display: none !important; }

.jy a { color: inherit; }

.jy :focus-visible {
  outline: 3px solid var(--jy-signal);
  outline-offset: 3px;
}

.jy-mono {
  font-family: var(--jy-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  line-height: 1.4;
}

.jy-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- La journée : section haute, scène collante ---------------------------- */

.jy-day { height: 620svh; }

.jy-stage {
  position: sticky;
  top: var(--jy-nav);
  height: calc(100svh - var(--jy-nav));
  min-height: 480px;
  overflow: hidden;
  isolation: isolate;
}

/* L'en-tête du site reste au-dessus de la scène, comme la barre de la maquette.
   Classe posée par le contrôleur (et retirée à sa déconnexion) : pas de :has(),
   qui ferait réévaluer les styles de toute la page à chaque minute affichée. */
.jy-sticky-header {
  position: sticky;
  top: 0;
}

.jy-city {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
  z-index: 0;
}

/* --- Le texte de l'heure ---------------------------------------------------- */

.jy-say {
  position: absolute;
  z-index: 4;
  inset-inline-start: 0;
  background: var(--jy-ground); /* le texte repose sur un fond qui bascule avec lui, jamais sur le canvas */
  --jy-say-top: clamp(20px, 4.5svh, 48px);
  top: var(--jy-say-top);
  width: min(34vw, 520px);
  padding-inline: max(24px, env(safe-area-inset-left, 0px)) 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Grand texte (préférence de taille de police) : le texte défile dans son
     cadre au lieu de passer sous le pied. Jamais de bascule mesurée. */
  max-height: calc(100% - var(--jy-say-top) - var(--jy-dep-h, 76px) - 12px);
  overflow-y: auto;
}

.jy-clock {
  margin: 0 0 0 -.04em;
  font-family: var(--jy-display);
  font-weight: 900;
  font-size: clamp(72px, 10.5vw, 168px);
  line-height: .86;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.jy-clock .jy-colon { color: var(--jy-signal-text); }

/* « AM/PM » des locales à 12 h : petit, à la base des chiffres. */
.jy-clock .jy-period {
  margin-inline: .12em;
  font-family: var(--jy-mono);
  font-size: .2em;
  font-weight: 700;
  letter-spacing: .08em;
  vertical-align: baseline;
}

.jy-where {
  margin: -6px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  color: var(--jy-muted);
}

.jy-where strong { color: var(--jy-fg); font-weight: 700; }

/* Une seule ligne, quelle que soit la police (chargée ou de repli) : la hauteur
   de l'heure et de la ville ne change pas quand les polices arrivent (CLS).
   Le libellé se tronque, le lien « Autres villes » jamais. */
.jy-where { flex-wrap: nowrap; white-space: nowrap; }
.jy-where > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.jy-where > a { flex: none; }

.jy-where a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -14px;
  font-weight: 700;
  color: var(--jy-fg);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.jy-where a:hover { color: var(--jy-signal-text); }

.jy-chapter {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Enveloppes du mode flux (mobile) ; sans effet ailleurs. */
.jy-now,
.jy-chapter-in { display: contents; }

.jy-rub {
  margin: 0;
  font-weight: 700;
  color: var(--jy-signal-text);
  display: flex;
  gap: 10px;
  align-items: center;
}

.jy-rub::before {
  content: '';
  flex: none;
  width: 28px;
  height: 3px;
  background: var(--jy-signal);
}

.jy-title {
  margin: 0;
  font-family: var(--jy-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(30px, 3.7vw, 60px);
  line-height: .95;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.jy-title em {
  font-style: normal;
  color: var(--jy-signal-text);
}

.jy-title:focus { outline: none; }
.jy-title:focus-visible { outline: 3px solid var(--jy-signal); outline-offset: 6px; }

.jy-lead {
  margin: 0;
  max-width: 34em;
  font-weight: 500;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.45;
}

.jy-src {
  margin: 0;
  max-width: 44em;
  color: var(--jy-muted);
  letter-spacing: .06em;
}

.jy-src a,
.jy-dep-empty a {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* cible de 44 × 44 px au moins (exigence du propriétaire) */
  min-width: 44px;
  color: var(--jy-fg);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.jy-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 6px;
}

.jy-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  font-family: var(--jy-display);
  font-weight: 900;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--jy-on-signal);
  background: var(--jy-signal);
  border: 3px solid var(--jy-fg);
  box-shadow: 6px 6px 0 var(--jy-fg);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.jy a.jy-btn { color: var(--jy-on-signal); }
.jy-btn:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--jy-fg); }
.jy-btn:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--jy-fg); }
.jy-btn .jy-arrow { display: inline-block; }
.jy-btn--alt,
.jy a.jy-btn--alt { background: var(--jy-ground); color: var(--jy-fg); }

[dir='rtl'] .jy .jy-arrow { transform: scaleX(-1); }

.jy-hint {
  margin: 0;
  color: var(--jy-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

.jy-hint::after {
  content: '↓';
  font-size: 16px;
  color: var(--jy-fg);
}

/* Une seule heure à l'écran (le contrôleur déplace .is-on). */
@media (scripting: enabled) {
  .jy-chapter:not(.is-on) { display: none; }
  .jy-hint[data-off] { display: none; }
}

/* --- La navigation : un horaire -------------------------------------------- */

.jy-rail {
  position: absolute;
  z-index: 5;
  inset-inline-end: max(20px, env(safe-area-inset-right, 0px));
  top: 50%;
  transform: translateY(-58%);
}

.jy-rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jy-rail button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  padding-inline-start: 12px;
  font: inherit;
  color: var(--jy-muted);
  background: var(--jy-ground);
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.jy-rail button b {
  font-weight: 700;
  font-size: 13px;
  color: var(--jy-fg);
  padding: 2px 6px;
  white-space: nowrap;
}

.jy-rail button::after {
  content: '';
  flex: none;
  width: 14px;
  height: 3px;
  background: var(--jy-fg);
  transition: width 160ms ease-out; /* jamais de couleur en transition : contraste AA à chaque instant */
}

.jy-rail button span { font-size: 12px; }
.jy-rail button:hover span { color: var(--jy-fg); }
.jy-rail button:hover::after { width: 22px; }
.jy-rail button[aria-current='step'] b { background: var(--jy-signal); color: var(--jy-on-signal); }
.jy-rail button[aria-current='step']::after { width: 30px; background: var(--jy-signal); }
.jy-rail button[aria-current='step'] span { color: var(--jy-fg); }
.jy-rail button:focus-visible { outline-offset: 0; }

/* Progression de la journée : un trait plein qui avance entre les heures. */
.jy-rail-progress {
  position: absolute;
  inset-inline-end: 0;
  top: 22px;
  bottom: 22px;
  width: 3px;
  background: var(--jy-rule);
  opacity: .14;
  pointer-events: none;
}

/* --- Lieux : cibles clavier/pointeur posées sur la ville -------------------- */

.jy-hits {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.jy-hit {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;  /* = HIT dans controller.js ; jamais de chevauchement (render.js#spreadTargets) */
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.jy-hit:focus-visible { outline: 3px solid var(--jy-signal); outline-offset: 0; }

.jy-hit-tag {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  display: none;
  padding: 6px 10px;
  white-space: nowrap;
  color: var(--jy-card-fg);
  background: var(--jy-card);
  border: 3px solid #0a0a0a;
  box-shadow: 4px 4px 0 #0a0a0a;
  font-family: var(--jy-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}

.jy-hit:hover .jy-hit-tag,
.jy-hit:focus-visible .jy-hit-tag { display: block; }
.jy-hit[aria-expanded='true'] .jy-hit-tag { display: none; }

/* --- Repère du lieu présenté : tuile orange, heure du prochain départ ------- */

.jy-marker {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 7px;
  font-weight: 700;
  color: #0a0a0a;
  background: var(--jy-signal);
  border: 2px solid #0a0a0a;
  box-shadow: 4px 4px 0 var(--jy-fg);
  pointer-events: none;
  white-space: nowrap;
}

/* --- Fiche du lieu ----------------------------------------------------------- */

.jy-card {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  width: 280px;
  color: var(--jy-card-fg);
  background: var(--jy-card);
  border: 3px solid var(--jy-fg);   /* encre sur crème, crème sur encre */
  box-shadow: 8px 8px 0 var(--jy-signal);
}

/* Mise en page invisible, le temps d'être mesurée et posée (aucun saut visible). */
.jy-card[data-placing] { visibility: hidden; }

.jy-card-hd {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background: var(--jy-signal);
  color: var(--jy-on-signal);
  border-bottom: 3px solid #0a0a0a;
}

.jy-card-hd p {
  margin: 0;
  align-self: center;
  padding: 8px 14px;
  font-weight: 700;
}

.jy-card-close {
  flex: none;
  width: 44px;
  min-height: 44px;
  padding: 0;
  font: 900 20px/1 var(--jy-mono);
  color: #0a0a0a;
  background: transparent;
  border: 0;
  border-inline-start: 3px solid #0a0a0a;
  border-radius: 0;
  cursor: pointer;
}

.jy-card-close:hover { background: #0a0a0a; color: #faf7f2; }
.jy-card-close:focus-visible { outline: 3px solid #0a0a0a; outline-offset: -6px; }

.jy-card-bd {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jy-card h2 {
  margin: 0;
  font-family: var(--jy-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.03em;
  font-size: 21px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.jy-card h2:focus { outline: none; }
.jy-card-act { color: #4b5563; }
.jy-card-addr { color: #4b5563; letter-spacing: .06em; }
.jy-card-px { margin-top: 6px; font-family: var(--jy-mono); font-weight: 700; font-size: 14px; }
.jy-card-px small { display: block; font-weight: 400; font-size: 12px; }

.jy-card-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  font-weight: 700;
  text-decoration: none;
  color: #faf7f2;
  background: #0a0a0a;
}

.jy a.jy-card-link { color: #faf7f2; }
.jy a.jy-card-link:hover { background: var(--jy-signal); color: #0a0a0a; }
.jy-card-link:focus-visible { outline: 3px solid var(--jy-signal); outline-offset: -6px; }

/* --- Pied : les prochains départs ------------------------------------------- */

.jy-dep {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  padding-inline: max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--jy-ground);
  border-top: 3px solid var(--jy-rule);
}

.jy-dep-lbl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 170px;
  padding-block: 10px;
  padding-inline: 0 20px;
  border-inline-end: 3px solid var(--jy-rule);
}

.jy-dep-lbl h2 {
  margin: 0;
  font: inherit;
  font-weight: 700;
}

.jy-dep-lbl span { color: var(--jy-muted); }
.jy-dep-scope-short { display: none; }

.jy-dep ol {
  flex: 1;
  min-width: 0;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jy-dep li {
  flex: 1;
  min-width: 0;
  display: flex;
  border-inline-end: 2px solid var(--jy-rule);
}

.jy-dep li > a,
.jy-dep li > p {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-content: center;
  text-decoration: none;
}

.jy-dep li > a:hover { background: var(--jy-signal); color: var(--jy-on-signal); }
.jy-dep li > a:hover small,
.jy-dep li > a:hover .jy-dep-day { color: var(--jy-on-signal); }
.jy-dep li > a:focus-visible { outline-offset: -3px; }

.jy-dep li b {
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--jy-display);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.jy-dep-what {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jy-dep li small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--jy-muted);
  font-family: var(--jy-mono);
  font-size: 12px;
  letter-spacing: .06em;
}

.jy-dep-day { color: var(--jy-signal-text); font-weight: 700; }

.jy-dep-empty a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.jy-dep-note p { color: var(--jy-muted); align-content: center; }

.jy-dep-meter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 190px;
  padding-block: 10px;
  padding-inline: 20px 0;
  text-align: end;
}

.jy-dep-meter b {
  font-family: var(--jy-display);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.jy-dep-meter span { color: var(--jy-muted); }

.jy-src-short { display: none; }
/* Texte du moment « Créneaux » : il parle de la ville animée (orange, heure affichée) ; en mode page et sans JS, sa variante. */
.jy-lead-page { display: none; }

/* Ordinateur peu haut (portables 1280 × 720, 1366 × 768, 1024 × 768) : les
   tailles suivent aussi la hauteur, pour que le plus long des moments tienne
   au-dessus du pied (sinon : mode page). */
@media (min-width: 861px) and (max-height: 940px) {
  .jy-say { --jy-say-top: clamp(14px, 2.6svh, 32px); gap: 12px; }
  .jy-chapter { gap: 12px; }
  .jy-clock { font-size: clamp(60px, min(10.5vw, 14svh), 150px); }
  .jy-title { font-size: clamp(26px, min(3.7vw, 5.4svh), 56px); }
  .jy-lead { font-size: clamp(15px, min(1.25vw, 2.1svh), 18px); }
  .jy-acts { margin-top: 0; }
}

@media (min-width: 861px) and (max-width: 1279px) {
  .jy-say { width: min(38vw, 520px); }
}

/* Ordinateur bas (portable 1366 × 768 : fenêtre d'environ 650 px) : citation
   courte, comme sur mobile, pour que « La source » tienne sans défiler. */
@media (min-width: 861px) and (max-height: 760px) {
  .jy-src-full { display: none; }
  .jy-src-short { display: inline; }
}

/* Ordinateur très bas (≤ 700 px de haut) : titres et espacements resserrés, pour
   que le plus long des moments tienne dans toutes les langues sans défiler. */
@media (min-width: 861px) and (max-height: 700px) {
  .jy-say { gap: 10px; }
  .jy-chapter { gap: 10px; }
  .jy-title { font-size: clamp(24px, min(3.3vw, 4.9svh), 44px); }
}

/* Pied plus étroit (< 1280 px) : l'heure au-dessus, comme la maquette. */
@media (max-width: 1279px) {
  .jy-dep li > a,
  .jy-dep li > p { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
  .jy-dep li b { align-self: flex-start; font-size: 22px; }
  .jy-dep-lbl { min-width: 150px; }
  .jy-dep-meter { min-width: 150px; }
}

/* Ordinateur étroit : fiche compacte, la ville reste lisible. */
@media (min-width: 861px) and (max-width: 1179px) {
  .jy-card { width: 240px; }
  .jy-card-addr { display: none; }
  .jy-card h2 { font-size: 18px; }
}

/* --- Mobile (≤ 860 px) : texte en haut, ville au milieu, départ en bas ------ */

@media (max-width: 860px) {
  .jy-say {
    top: 52px;
    width: 100%;
    gap: 10px;
    padding: 14px max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px));
    background: var(--jy-ground);
    border-bottom: 3px solid var(--jy-rule);
  }

  .jy-chapter { gap: 10px; }
  .jy-clock { font-size: 64px; }
  /* Citation courte sur mobile : auteurs, revue, tableau et page ; le lien mène à l'article. */
  .jy-src-full { display: none; }
  .jy-src-short { display: inline; }
  .jy-where { margin-top: -2px; }
  .jy-title { font-size: 28px; }
  .jy-lead { font-size: 15px; }
  .jy-hint { display: none; }

  .jy-btn {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 13px;
    box-shadow: 4px 4px 0 var(--jy-fg);
  }

  .jy-rail {
    top: 0;
    inset-inline: 0;
    transform: none;
    /* 7 boutons de 44 px au moins dès 320 px : aucune marge latérale hors zone sûre. */
    padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
    background: var(--jy-ground);
    border-bottom: 3px solid var(--jy-rule);
  }

  .jy-rail ol { flex-direction: row; justify-content: space-between; gap: 0; }
  .jy-rail li { flex: 1; }
  .jy-rail button { justify-content: center; padding: 0; min-height: 48px; min-width: 44px; }
  .jy-rail button span,
  .jy-rail button::after,
  .jy-rail-progress { display: none; }

  /* Fiche compacte, posée au-dessus du pied. */
  .jy-card {
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    top: auto;
    bottom: calc(var(--jy-dep-h, 64px) + 12px);
    width: auto;
    box-shadow: 6px 6px 0 var(--jy-signal);
  }

  .jy-card-bd { padding: 10px 14px; }
  .jy-card h2 { font-size: 18px; }
  .jy-card-addr { display: none; }

  .jy-dep { padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
  .jy-dep-lbl { min-width: 0; max-width: 8.5em; padding-inline-end: 12px; }
  /* Mobile : la semaine repliée reste dite (« 7 prochains jours »), en court. */
  .jy-dep-lbl .jy-dep-scope { display: none; }
  .jy-dep-lbl .jy-dep-scope-short { display: block; }
  /* Un seul départ sur mobile : le premier vrai départ (ou l'état vide). */
  .jy-dep li { display: none; border-inline-end: 0; }
  .jy-dep li:nth-child(1 of .jy-dep-go),
  .jy-dep li.jy-dep-empty { display: flex; }
  .jy-dep li > a,
  .jy-dep li > p { padding-inline: 12px; }
  .jy-dep-meter { min-width: 0; padding-inline-start: 12px; }
  .jy-dep-meter span { display: none; }
}

/* --- Mode flux (mobile et tablette, ≤ 860 px) -----------------------------------
   Revue ASTRA v2 n° 5 : la ville reste à l'écran sur les mobiles courants. Une
   bande de ville collée sous le rail, l'heure collée dessous, puis les sept
   moments dans le flux de la page : chaque texte reste collé pendant son heure
   (bloc de son cran de rail au suivant : classes jy-hNN rendues par le serveur) ;
   le plus long n'a plus à tenir dans l'écran. Le pied reste collé en bas.
   Mode choisi par les seules media queries, avant le premier rendu (revue v3
   n° 5) : le contrôleur lit --jy-mode, il ne mesure rien pour basculer.
   À partir de 340 × 640, la ville et ses cibles tiennent dans la bande (testé
   pour toute disposition) ; en dessous, mode page. */
@media (min-width: 340px) and (max-width: 860px) and (min-height: 640px) {
.jy[data-la-journee-root] {
  --jy-band: clamp(190px, 32svh, 320px);
  --jy-band-top: calc(var(--jy-nav) + var(--jy-rail-h, 51px));
  --jy-read: calc(var(--jy-band-top) + var(--jy-band) + var(--jy-now-h, 56px));
}
.jy[data-la-journee-root] .jy-day { height: auto; }
.jy[data-la-journee-root] .jy-stage {
  position: relative;
  top: auto;
  height: auto;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
.jy[data-la-journee-root] .jy-rail { position: sticky; top: var(--jy-nav); order: 1; }
.jy[data-la-journee-root] .jy-city,
.jy[data-la-journee-root] .jy-hits {
  position: sticky;
  inset: auto;
  top: var(--jy-band-top);
  height: var(--jy-band);
  flex: none;
}
.jy[data-la-journee-root] .jy-city {
    order: 2;
    z-index: 1;
    /* Revue ASTRA v2 n° 6 : la scène démarre après le chargement de la page ;
       d'ici son premier dessin, la bande montre une ville à l'aube (image fixe,
       illustration sans lieu, préchargée : home/_la_journee). Le dessin la recouvre. */
    background: var(--jy-ground) url(/assets/la_journee/aube-f18c162fa764274a8f467b5b5e74effa038afdb4f6f0568aa208f26dd4c035a0.png) center / cover no-repeat;
  }
.jy[data-la-journee-root] .jy-hits { order: 3; z-index: 3; margin-top: calc(-1 * var(--jy-band)); }
.jy[data-la-journee-root] .jy-say {
  position: relative;
  max-height: none;
  overflow: visible; /* jamais un conteneur de défilement : l'heure et les textes y restent collés */
  order: 4;
  top: auto;
  z-index: 0;
  width: auto;
  padding-block: 0;
  border-bottom: 0;
  gap: 0;
}
.jy[data-la-journee-root] .jy-now {
  position: sticky;
  top: calc(var(--jy-band-top) + var(--jy-band));
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 14px;
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
  background: var(--jy-ground);
  border-block: 3px solid var(--jy-rule);
}
.jy[data-la-journee-root] .jy-clock { font-size: 40px; }
.jy[data-la-journee-root] .jy-where { margin: 0; }
.jy[data-la-journee-root] .jy-chapter {
  display: flex;
  min-height: calc(var(--jy-hours, 2) * clamp(120px, 24svh, 260px));
  padding-block: 20px 28px;
}
.jy[data-la-journee-root] .jy-chapter + .jy-chapter { border-top: 2px solid var(--jy-rule); }
/* Après le dernier moment : la ville et le pied restent collés jusqu'à la fin de la journée. */
.jy[data-la-journee-root] .jy-say::after { content: ""; display: block; height: max(0px, calc(100svh - var(--jy-read) - var(--jy-dep-h, 104px))); }
.jy[data-la-journee-root] .jy-chapter-in {
  position: sticky;
  top: calc(var(--jy-read) + 16px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Focus au clavier (WCAG 2.4.11) : un lien du texte n'arrive jamais sous la ville ni sous le pied. */
.jy[data-la-journee-root] .jy-say a,
.jy[data-la-journee-root] .jy-say button,
.jy[data-la-journee-root] .jy-title {
  scroll-margin-top: calc(var(--jy-read) + 8px);
  scroll-margin-bottom: calc(var(--jy-dep-h, 104px) + 8px);
}
/* Texte plus haut que l'écran libre (grand texte) : il défile, rien n'est caché. */
.jy[data-la-journee-root] .jy-chapter.is-tall .jy-chapter-in { position: static; }
.jy[data-la-journee-root] .jy-dep { position: sticky; bottom: 0; order: 6; }
.jy[data-la-journee-root] .jy-card { position: fixed; z-index: 7; }
}

.jy-h10 { --jy-hours: 1; }
.jy-h20 { --jy-hours: 2; }
.jy-h25 { --jy-hours: 2.5; }
.jy-h30 { --jy-hours: 3; }
.jy-h40 { --jy-hours: 4; }

/* Tablette : deux départs. */
@media (min-width: 600px) and (max-width: 860px) {
  .jy-dep li:nth-child(2 of .jy-dep-go) { display: flex; border-inline-start: 2px solid var(--jy-rule); }
}

/* Écrans bas (paysage, petits téléphones) : on resserre le texte. */
@media (max-width: 860px) and (max-height: 700px) {
  .jy-say { gap: 8px; padding-block: 10px; }
  .jy-chapter { gap: 8px; }
  .jy-clock { font-size: 46px; }
  .jy-title { font-size: 23px; }
  .jy-lead { font-size: 14px; line-height: 1.4; }
}

@media (max-width: 380px) {
  .jy-rail button b { font-size: 12px; padding-inline: 3px; }
  .jy-dep-lbl h2 { font-size: 11px; }
}

/* --- Mouvement réduit : rien ne glisse ni ne s'anime -------------------------- */

@media (prefers-reduced-motion: reduce) {
  .jy,
  .jy *,
  .jy *::before,
  .jy *::after { transition: none !important; }
  .jy-btn:hover,
  .jy-btn:active { transform: none; }
}

/* --- Sans JavaScript : une page lisible, chapitres empilés -------------------- */

@media (scripting: none) {
  .jy-lead-scene { display: none; }
  .jy-lead-page { display: inline; }
  .jy-day { height: auto; }
  .jy-stage { position: static; height: auto; min-height: 0; overflow: visible; }
  .jy-city,
  .jy-rail,
  .jy-hits,
  .jy-card,
  .jy-hint,
  .jy-clock,
  .jy-dep-meter { display: none; }
  .jy-say { position: static; max-height: none; overflow: visible; width: auto; max-width: 52rem; padding: 48px 24px; gap: 48px; background: none; border: 0; }
  .jy-dep { position: static; flex-wrap: wrap; }
  .jy-dep ol { flex-basis: 100%; flex-wrap: wrap; }
  .jy-dep li { display: flex; }
}

/* Sans JavaScript, sur mobile : lecture empilée, ni collage ni blocs horaires. */
@media (scripting: none) and (min-width: 340px) and (max-width: 860px) and (min-height: 640px) {
  .jy[data-la-journee-root] .jy-stage,
  .jy[data-la-journee-root] .jy-say,
  .jy[data-la-journee-root] .jy-now,
  .jy[data-la-journee-root] .jy-chapter-in,
  .jy[data-la-journee-root] .jy-dep { position: static; }
  .jy[data-la-journee-root] .jy-chapter { min-height: 0; padding-block: 0; }
  .jy[data-la-journee-root] .jy-chapter + .jy-chapter { border-top: 0; }
  .jy[data-la-journee-root] .jy-say::after { content: none; }
}

/* --- Mode page (repli : moins de 340 px de large ou moins de 640 px de haut ;
   paysage, zoom 200 %, petits portables) --------------------------------------------
   Media queries seulement, dès le premier rendu : jamais de bascule après
   chargement (revue v3 n° 5). Mêmes règles que sans JavaScript, les sept
   moments empilés, rien ne se recouvre (WCAG 1.4.10). */
@media (max-width: 339px), (max-height: 639px) {
  .jy[data-la-journee-root] .jy-day { height: auto; }
  .jy[data-la-journee-root] .jy-stage { position: static; height: auto; min-height: 0; overflow: visible; }
  .jy[data-la-journee-root] .jy-rail,
  .jy[data-la-journee-root] .jy-hits,
  .jy[data-la-journee-root] .jy-card,
  .jy[data-la-journee-root] .jy-marker,
  .jy[data-la-journee-root] .jy-hint,
  .jy[data-la-journee-root] .jy-clock,
  .jy[data-la-journee-root] .jy-dep-meter { display: none; }
  .jy[data-la-journee-root] .jy-say { position: static; max-height: none; overflow: visible; width: auto; max-width: 52rem; padding: 32px 16px; gap: 40px; border: 0; }
  .jy[data-la-journee-root] .jy-chapter:not(.is-on) { display: flex; }
  .jy[data-la-journee-root] .jy-dep { position: static; flex-wrap: wrap; }
  .jy[data-la-journee-root] .jy-dep-lbl { max-width: none; border-inline-end: 0; }
  .jy[data-la-journee-root] .jy-dep-lbl .jy-dep-scope { display: block; }
  .jy[data-la-journee-root] .jy-dep-lbl .jy-dep-scope-short { display: none; }
  .jy[data-la-journee-root] .jy-dep ol { flex-basis: 100%; flex-direction: column; }
  .jy[data-la-journee-root] .jy-dep li { display: flex; border-inline-end: 0; border-top: 2px solid var(--jy-rule); }
  .jy[data-la-journee-root] .jy-lead-scene { display: none; }
  .jy[data-la-journee-root] .jy-lead-page { display: inline; }
  /* La ville reste présente, en image fixe (l'aube, sans lieu) en tête de page :
     jamais dessinée ici, la toile laisse voir son fond (premier affichage, LCP). */
  .jy[data-la-journee-root] .jy-city {
    position: static;
    height: clamp(140px, 28svh, 240px);
    background: var(--jy-ground) url(/assets/la_journee/aube-f18c162fa764274a8f467b5b5e74effa038afdb4f6f0568aa208f26dd4c035a0.png) center / cover no-repeat;
  }
}