/* TOPCHRONO — components. Based on design-system components/bundle.css: same classes, values from css/tokens.css.
   Changes vs bundle.css: brand text uses --green-ink and primary actions use --action/--on-action so the dark theme works;
   form fields use --field-line (3:1); icons are <svg class="i"><use href="assets/icons/sprite.svg#name"/></svg>. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--text-base)/1.5 var(--font-body)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
button:disabled{opacity:.55;cursor:not-allowed}
h1,h2,h3,h4,p{margin:0}
h1{font-size:var(--text-xl);font-weight:900;letter-spacing:-1.1px;line-height:1.25}
h2,h3{font-size:var(--text-lg);line-height:1.4}
small,.muted{color:var(--muted)}
a{color:var(--green-ink)}
[hidden]{display:none!important}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
h1[tabindex]:focus,h1[tabindex]:focus-visible,h2[tabindex]:focus,h2[tabindex]:focus-visible{outline:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Icons (Lucide 0.468.0, local sprite) */
.i{width:19px;height:19px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.i.sm{width:15px;height:15px}.i.xs{width:14px;height:14px}.i.md{width:16px;height:16px}.i.lg{width:22px;height:22px}.i.xl{width:26px;height:26px}.i.xxl{width:32px;height:32px}

.eyebrow{font-size:var(--text-xs);letter-spacing:1.4px;font-weight:700;margin-bottom:var(--space-3);color:var(--muted);text-transform:uppercase}

/* Logo (files from the design system; dark variant declared in HANDOFF.md) */
.logo{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.logo img{display:block;height:auto}
.logo .logo-dark{display:none}
/* Written name: J and T in the brand colour (design system: accent never as text on a light background, so green-ink there) */
.brand-name{white-space:nowrap}
.brand-jt{color:var(--green-ink)}
.recommend-card .brand-jt{color:var(--accent)}
.primary .brand-jt,button .brand-jt{color:inherit}
[data-theme="dark"] .logo .logo-light{display:none}
[data-theme="dark"] .logo .logo-dark{display:block}
.tagline{display:block;font-size:var(--text-xs);letter-spacing:1.3px;font-weight:500;color:var(--muted)}

/* Buttons */
.primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);background:var(--action);color:var(--on-action);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);min-height:48px;font-size:var(--text-sm);font-weight:700;text-decoration:none;text-align:center}
.primary:hover{background:var(--action-hover)}
.primary.block{display:flex;width:100%}
.primary.lg{min-height:52px;font-size:.95rem;padding:var(--space-3) 22px}
.primary.accent,.recommend-card .primary{background:var(--accent);color:var(--green)}
.primary.accent:hover,.recommend-card .primary:hover{background:var(--accent-hover)}
.secondary{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);border:1px solid var(--field-line);color:var(--ink);background:transparent;padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);min-height:48px;font-size:var(--text-sm);font-weight:700;text-decoration:none;text-align:center}
.secondary:hover{background:var(--soft)}
.secondary.block{display:flex;width:100%}
.primary.sm,.secondary.sm{min-height:44px;padding:var(--space-2) var(--space-4);gap:var(--space-2)}
.secondary[disabled]{opacity:.7;cursor:default}
.text-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-weight:700;font-size:var(--text-xs);min-height:44px;color:var(--green-ink);text-decoration:none}
.text-button .i{width:14px;height:14px}
.text-button.sm{font-size:var(--text-sm)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:var(--radius-sm);color:var(--muted)}
.icon-btn:hover{background:var(--soft);color:var(--green-ink)}
.icon-btn.saved{color:var(--saved)}.icon-btn.saved .i{fill:var(--saved-fill)}

/* Mode switch */
.modes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.mode{display:flex;align-items:center;gap:var(--space-2);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);min-height:44px;color:var(--muted)}
.mode:hover{background:var(--soft);color:var(--ink)}
.mode.active,.mode[aria-pressed="true"]{background:var(--action);color:var(--on-action);font-weight:700}
.modes-hint{margin-left:auto;font-size:var(--text-xs);color:var(--muted)}

/* Segmented control */
.segmented{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.segmented button{min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);border:1px solid var(--field-line);background:var(--surface);color:var(--ink)}
.segmented button[aria-pressed="true"]{background:var(--action);border-color:var(--action);color:var(--on-action);font-weight:700}
.segmented button .i{margin-right:6px}
.access-row{margin-top:var(--space-3)}
.access-box h3{display:flex;align-items:center;gap:var(--space-2);margin:0}
.lang-switch{display:flex;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.lang-switch button{min-width:44px;min-height:44px;font-size:var(--text-xs);font-weight:700;color:var(--muted)}
.lang-switch button[aria-pressed="true"]{background:var(--action);color:var(--on-action)}

/* Search panel and fields */
.search-panel{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-2xl);padding:var(--space-5);box-shadow:var(--shadow-panel)}
.field{border:1px solid var(--field-line);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);min-width:0;background:var(--field)}
.field label{font-size:var(--text-xs);color:var(--muted);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.input-row{display:flex;align-items:center;gap:var(--space-2)}.input-row>.i{width:16px;height:16px}
.field select,.field input{flex:1;width:100%;min-width:0;background:transparent;border:0;color:var(--ink);font-size:var(--text-sm);font-weight:700;height:38px;outline-offset:0}
.input-row .icon-btn{min-width:44px;min-height:44px}
.form-field{display:flex;flex-direction:column;gap:var(--space-2)}
.form-field>label,.form-label{font-size:var(--text-sm);font-weight:700}
.input,.form-field select{width:100%;min-height:48px;padding:0 var(--space-3);border:1px solid var(--field-line);border-radius:var(--radius-md);background:var(--bg);color:var(--ink);font-size:var(--text-sm)}
.input::placeholder{color:var(--muted)}
.input-group{display:flex;align-items:center;border:1px solid var(--field-line);border-radius:var(--radius-md);background:var(--bg)}
.input-group .input{border:0;background:transparent;min-height:46px}
.input-group:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.input-group .input:focus-visible{outline:none}
.code-input{min-height:56px;font-size:1.6rem;font-weight:900;letter-spacing:10px;font-variant-numeric:tabular-nums}
.check-row{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-sm);min-height:44px;cursor:pointer}
.check-row input{width:22px;height:22px;margin:0;flex:0 0 auto;accent-color:var(--focus)}
.hint{font-size:var(--text-xs);color:var(--muted)}

/* Filter chips */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.filter{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);font-size:var(--text-xs);border:1px solid var(--line);border-radius:var(--radius-pill);min-height:44px;background:var(--surface);color:var(--ink)}
.filter.active,.filter[aria-pressed="true"]{background:var(--filter-active);color:var(--green-ink);border-color:var(--filter-active-line);font-weight:700}
.filter .i{width:14px;height:14px}

/* Tag and line badge */
.tag{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-xs);color:var(--green-ink);font-weight:700}
.tag.warning{color:var(--warning)}.tag .i{width:14px;height:14px}
.tag.neutral{color:var(--muted)}
.line-badge{display:inline-block;background:var(--badge-bg);color:var(--badge-ink);padding:var(--space-1) var(--space-2);border-radius:var(--radius-xs);font-weight:900;min-width:24px;text-align:center;font-size:var(--text-xs);line-height:1.4}
.line-badge.blue{background:var(--badge-blue-bg);color:var(--badge-blue-ink)}
.line-badge.red{background:var(--badge-red-bg);color:var(--badge-red-ink)}

/* Journey card */
.journey{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-xl);margin-bottom:var(--space-3);overflow:hidden;box-shadow:var(--shadow-panel)}
.journey.recommended{border-color:var(--recommended-line)}
.journey-top{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4) 0;gap:var(--space-2)}
.journey-body{padding:var(--space-1) var(--space-5) var(--space-4)}
.time-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4)}
.time-pair{font-size:var(--text-lg);font-weight:900;letter-spacing:-.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.time-pair span{color:var(--time-arrow);font-weight:400;padding:0 var(--space-2)}
.duration{margin-left:auto;text-align:right;font-size:var(--text-lg);font-weight:700;font-variant-numeric:tabular-nums}
.journey small{font-size:var(--text-xs);font-weight:400}.duration small{display:block;color:var(--muted)}
.route-strip{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-3);font-size:var(--text-xs);flex-wrap:wrap}.route-strip .i{width:16px;height:16px}
/* Indicative price (js/fares.js): a line under the route, a box in the detail. Tabular figures, as the times. */
.fare-line{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-2) 0 0;font-size:var(--text-xs);color:var(--muted);font-variant-numeric:tabular-nums}.fare-line .i{width:16px;height:16px}
.fare-box{border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-4);margin:var(--space-4) 0}.fare-box ul{list-style:none;margin:0;padding:0}
.fare-box .eyebrow{display:flex;align-items:center;gap:var(--space-2);margin:0}.fare-box .eyebrow .i{width:16px;height:16px}
.fare-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3)}.fare-row>span:first-child{display:grid;gap:2px}.fare-row small{color:var(--muted);font-size:var(--text-xs)}
.fare-price{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.fare-total{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:var(--space-3);margin:0;font-variant-numeric:tabular-nums}
.route-name{margin-left:var(--space-1);color:var(--muted)}
.journey-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;border-top:1px solid var(--line-soft);padding:var(--space-1) var(--space-4);font-size:var(--text-xs);background:var(--field);gap:var(--space-2)}
.journey-bottom>span{color:var(--muted)}

/* Tempo (recommend) card */
.recommend-card{background:var(--green);border:1px solid var(--card-line);border-radius:var(--radius-2xl);color:var(--on-green);padding:var(--space-6);position:relative}
.recommend-card .eyebrow{color:var(--on-green-eyebrow);display:flex;align-items:center;gap:var(--space-2);letter-spacing:1px}
.recommend-card h2{font-weight:500;font-size:var(--text-base)}
.countdown{font-size:clamp(2.4rem,3.4vw,3.4rem);font-weight:900;line-height:1.2;letter-spacing:-1.8px;font-variant-numeric:tabular-nums;margin:var(--space-2) 0;color:var(--accent);overflow-wrap:anywhere}
.countdown small{color:var(--accent);font-size:var(--text-lg);font-weight:500;letter-spacing:0}
.countdown.late{color:var(--critical-ink);background:var(--critical-bg);border-radius:var(--radius-sm);padding-inline:var(--space-3);display:inline-block}
.countdown.late small{color:inherit}
.leave-times{font-variant-numeric:tabular-nums;font-weight:700}
.recommend-card p.for-dep{font-size:var(--text-lg);font-weight:700;font-variant-numeric:tabular-nums}
.late-chrono,.recommend-card p.late-chrono{color:var(--critical-ink);background:var(--critical-bg);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:700;font-variant-numeric:tabular-nums}
.countdown.word{font-size:clamp(1.8rem,2.6vw,2.4rem);letter-spacing:-.5px}
/* In the side column: sized on the column (« 00:05:24 » is about 4.6 em wide), on one line. */
.side-col .countdown:not(.word){font-size:clamp(1.9rem,calc((100cqi - 56px) / 4.6),3.4rem);white-space:nowrap;overflow-wrap:normal}
.side-col .countdown.word{font-size:clamp(1.6rem,calc((100cqi - 56px) / 6),2.4rem)}
.recommend-card p{color:var(--on-green-muted);font-size:var(--text-xs)}
.recommend-card .lead{color:var(--on-green-text);font-size:var(--text-sm)}
/* « En avion »: start again, or back to the board's list, under the trip button. */
.flight-again{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-3) 0}
.flight-again .secondary{flex:1 1 auto;min-height:44px}
.recommend-card .flight-again .secondary{color:var(--on-green-text);border-color:var(--on-green-muted)}
.recommend-card .flight-again .secondary:hover{background:var(--on-green-line)}
.breakdown{margin:var(--space-5) 0;border-top:1px solid var(--on-green-line);padding-top:var(--space-4);display:grid;gap:var(--space-3)}
.breakdown div{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--on-green-text)}
.breakdown b{margin-left:auto;color:var(--on-green);text-align:right}.breakdown .i{width:16px;height:16px}
.recommend-card .primary{width:100%}
.recommend-card .caveat{font-size:var(--text-xs);margin-top:var(--space-3);color:var(--on-green-muted)}
.recommend-card .secondary{color:var(--on-green);border-color:var(--on-green-muted);width:100%;margin-top:var(--space-3)}
.recommend-card .secondary:hover{background:#ffffff14}
.departure-board{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);border-block:1px solid var(--on-green-line);padding-block:var(--space-5);margin-block:var(--space-5)}
.departure-board small{display:block;color:var(--on-green-muted);font-size:var(--text-xs);letter-spacing:.8px;text-transform:uppercase}
.departure-board strong{display:block;font-size:var(--text-xl);font-variant-numeric:tabular-nums}

/* Info card */
.info-card{padding:var(--space-5);background:var(--info);border:1px solid var(--info-line);border-radius:var(--radius-xl)}
.info-card h3{font-size:var(--text-lg);font-weight:700}
.info-card>p{font-size:var(--text-sm);color:var(--ink);margin-top:var(--space-3)}
.mini-steps{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-5);color:var(--green-ink);font-size:var(--text-xs)}
.mini-steps span{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}

/* Notices */
.disclosure{display:flex;gap:var(--space-2);align-items:flex-start;font-size:var(--text-xs);color:var(--disclosure-ink)}.disclosure .i{width:15px;height:15px;margin-top:2px}
.demo{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border:1px solid var(--demo-line);border-radius:var(--radius-pill);font-size:var(--text-xs);background:var(--demo-bg);color:var(--demo-ink)}
.demo>span{width:6px;height:6px;background:var(--demo-dot);border-radius:var(--radius-round)}
.alert-box{background:var(--alert-bg);color:var(--alert-ink);border-radius:var(--radius-sm);padding:var(--space-3);font-size:var(--text-xs)}
.alert-box.critical{background:var(--critical-bg);color:var(--critical-ink);font-size:var(--text-sm)}
.alert-box.ok{background:var(--soft);color:var(--green-ink);font-size:var(--text-sm)}
.connection{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--alert-bg);color:var(--notice-ink);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-xs)}
.connection.ready{background:var(--soft);color:var(--green-ink)}.connection .i{width:15px;height:15px}
.event-message{background:var(--event-bg);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);color:var(--notice-ink);font-size:var(--text-sm)}
.event-message p{font-size:var(--text-xs);margin-block:var(--space-1)}.event-message small{font-size:var(--text-xs);color:inherit}
.event-message.critical{background:var(--critical-bg);color:var(--critical-ink)}
.status{font-size:var(--text-sm);color:var(--warning)}
.status:empty{display:none}
.status.ok{color:var(--green-ink)}

/* Navigation */
.nav{display:flex;align-items:center;gap:var(--space-3);text-align:left;min-height:48px;padding:var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--muted);width:100%;white-space:nowrap;text-decoration:none}
.nav.active,.nav[aria-current="page"]{background:var(--soft);color:var(--green-ink);font-weight:700}
.nav:hover{background:var(--bg);color:var(--ink)}
.nav.active:hover,.nav[aria-current="page"]:hover{background:var(--soft);color:var(--green-ink)}
.nav .badge{margin-left:auto;font-size:var(--text-xs)}
.quiet-card{padding:var(--space-4);background:var(--bg);border-radius:var(--radius-lg)}
.quiet-card .i{color:var(--green-ink);margin-bottom:var(--space-3);width:26px;height:26px}
.quiet-card strong{display:block;font-size:var(--text-sm)}.quiet-card p{font-size:var(--text-xs);color:var(--muted);margin-top:var(--space-2)}
.avatar{width:36px;height:36px;border-radius:var(--radius-round);background:var(--avatar);color:var(--ink);display:grid;place-items:center;font-weight:700;flex:0 0 auto}

/* Empty state */
.empty{background:var(--surface);border:1px dashed var(--empty-line);border-radius:var(--radius-xl);padding:var(--space-10) var(--space-6);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.empty .i{width:32px;height:32px;color:var(--muted)}
.empty p{font-size:var(--text-sm);color:var(--muted);max-width:52ch}

/* Timeline */
.timeline{margin:var(--space-3) 0}
.timeline-step{display:grid;grid-template-columns:55px 1fr;gap:var(--space-4);padding:var(--space-3) 0;font-size:var(--text-sm)}
.timeline-step>b{font-variant-numeric:tabular-nums}
.timeline-step>div{border-left:2px solid var(--timeline);padding-left:var(--space-4);min-width:0}
.timeline-step small{display:block;margin-top:var(--space-1);font-size:var(--text-xs)}

/* Panels shared by tracking and live */
.panel{padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-panel)}
.panel h3{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}
.toggle-row{display:flex;justify-content:space-between;gap:var(--space-3);align-items:center;font-size:var(--text-sm);font-weight:700;min-height:44px;cursor:pointer}
.toggle-row input{width:22px;height:22px;accent-color:var(--focus);flex:0 0 auto}
.placeholder{font-size:var(--text-sm);background:var(--bg);padding:var(--space-4);border-radius:var(--radius-sm);color:var(--muted)}
.feed{display:grid;gap:var(--space-2);margin-top:var(--space-3)}

/* Favorites */
.favorite-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-4);gap:var(--space-3)}
.favorite-row small{display:block;font-size:var(--text-xs)}
.favorite-row .actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* Dialog */
dialog{border:1px solid var(--line);border-radius:var(--radius-dialog);padding:var(--space-6);width:calc(100% - 32px);max-width:520px;max-height:calc(var(--vh) * 90);overflow:auto;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-dialog)}
dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(3px)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4);gap:var(--space-4)}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* The Premium offer (js/service.js): a plain comparison table, every cell says Included or Not included in words. */
.offer-compare{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.offer-compare th,.offer-compare td{padding:var(--space-2) var(--space-1);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.offer-compare td{color:var(--muted);white-space:nowrap}
.offer-compare thead th{color:var(--muted);font-weight:700}
.offer .onboard-points{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.offer .onboard-points li{display:flex;gap:var(--space-2)}
.offer .onboard-points .i{flex:0 0 auto;width:18px;height:18px;color:var(--green-ink)}

/* « Signaler une erreur » (js/report.js): one reason per line, 44 px high. */
#report-form fieldset{border:0;margin:0;padding:0;min-width:0}
#report-form legend{font-weight:700;margin-bottom:var(--space-2);padding:0}
.radio-row{display:flex;align-items:center;gap:var(--space-3);min-height:44px}
.radio-row input{width:20px;height:20px;accent-color:var(--action);flex:0 0 auto}