:root{
  --bg: #ffffff;
  --fg: #0f172a;          /* slate-900 */
  --muted: #475569;       /* slate-600 */
  --card: #f8fafc;        /* slate-50 */
  --border: #e2e8f0;      /* slate-200 */
  --accent: #0ea5e9;      /* sky-500 */
  --accent-ink: #0b4a6f;
  --focus: #22c55e;       /* green-500 */
  --radius: 14px;
  --shadow: 0 10px 20px rgba(2,6,23,.06), 0 2px 8px rgba(2,6,23,.06);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220; --fg:#e2e8f0; --muted:#94a3b8;
    --card:#0f172a; --border:#1f2937; --accent:#38bdf8; --accent-ink:#042233; --focus:#22c55e;
    --shadow: 0 10px 20px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.3);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--fg);
  background:var(--bg);
  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.container{max-width: 920px; margin: 0 auto; padding: 24px;}
.site-header, .site-footer{padding: 16px 24px}
.site-header h1{margin:0 0 4px 0}
.site-footer{color:var(--muted); border-top:1px solid var(--border)}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  margin:14px 0;
  box-shadow: var(--shadow);
}
.grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.field-group{margin:0; padding:0; border:0}
.field-group > legend{font-weight:600; margin-bottom:6px}
label{display:block; margin:4px 0 6px}
select, input[type="time"], input[type="number"]{
  width:100%; padding:10px 12px; border:1px solid var(--border);
  border-radius:10px; background:#fff;
}
@media (prefers-color-scheme: dark){
  select, input[type="time"], input[type="number"]{ background:#0b1323; color:var(--fg); }
}
.btn{
  padding:10px 14px; border-radius:10px; border:1px solid var(--accent);
  background:linear-gradient(180deg, var(--accent), #0991cc);
  color:#fff; cursor:pointer; font-weight:600;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform: translateY(1px)}
.inline{display:flex; gap:8px; align-items:center}
.help{color:var(--muted); margin:.35rem 0 0}
.result{margin-top:.25rem}
.mono code{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em}
ul{margin:.5rem 0 0 .75rem}
#timetable ul{margin-left:1rem}
#journeyDetails{margin-top:.5rem}
.visually-separated{border-top:1px dashed var(--border); padding-top:.5rem}
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}
:focus{outline: 3px solid var(--focus); outline-offset: 2px}
:focus:not(:focus-visible){outline:none}
.alert{border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:12px; padding:10px 12px; margin:10px 0; background:var(--card)}
.alert-title{font-weight:600; margin-bottom:4px}
.alert-meta{color:var(--muted); font-size:.95rem; margin-bottom:4px}
.alert-body{margin-top:4px}
.install-tip{
  margin-top:.5rem; padding:.5rem .75rem;
  border:1px dashed var(--border); border-radius:10px;
  background:var(--card); color:var(--fg);
}
.btn-link{background:none;border:none;color:var(--accent);cursor:pointer;font-weight:600;padding:0}
.btn-link:hover{text-decoration:underline}
.alert-detail{margin:.35rem 0 0 .75rem;border-left:2px solid var(--border);padding-left:.5rem}
.alert-subtitle{font-weight:600;margin-top:.25rem}
select:hover,
input[type="time"]:hover,
input[type="number"]:hover,
select:focus,
input[type="time"]:focus,
input[type="number"]:focus {
  border-color: var(--accent);
  background: #f0f9ff; /* léger bleu clair */
}
@media (prefers-color-scheme: dark) {
  select:hover,
  input[type="time"]:hover,
  input[type="number"]:hover,
  select:focus,
  input[type="time"]:focus,
  input[type="number"]:focus {
    border-color: var(--accent);
    background: #1e293b; /* slate-800 foncé mais contrasté */
  }
}

a {
  color: var(--accent);
}
a:hover {
  text-decoration: underline;
}
@media (prefers-color-scheme: dark) {
  a {
    color: #38bdf8; /* sky-400/500 clair */
  }
}

#permalinkPretty,
#permalinkTech {
  display: inline-block;
  max-width: 100%;
  line-break: anywhere; /* casse les très longues URLs */
  overflow-wrap: anywhere;
}
/* Résumé de planification */
.plan-list { margin:.25rem 0 .5rem 1rem; }
.plan-list .badge{
  display:inline-block; font-weight:600; font-size:.9rem;
  padding:.15rem .45rem; border-radius:999px; margin-right:.35rem;
  background:var(--accent); color:#fff;
}
@media (prefers-color-scheme: dark){
  .plan-list .badge{ background:var(--accent); color:#0b1323; }
}
#planResult { margin-top: .75rem; }
.grid > #xferBlock { grid-column: 1 / -1; }
#arrivee-card > #planResult {
  display: block;
  margin-top: .75rem;
}
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.site-header, .site-footer {
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

@media (pointer:coarse){
  .btn { padding: 12px 16px; }
  select, input[type="time"], input[type="number"] { padding: 12px 14px; }
}
.btn{
  background-color: var(--accent);
  background-image: linear-gradient(180deg, var(--accent), #0991cc);
  color:#fff;
}
@media (prefers-color-scheme: dark){
  .btn{
    background-color: var(--accent);
    background-image: linear-gradient(180deg, var(--accent), #0991cc);
  }
}
@media (forced-colors: active){
  .btn{
    background: ButtonFace;         /* fond système */
    color: ButtonText;              /* texte système */
    border: 1px solid ButtonText;   /* bord visible */
  }
  .btn:hover{ outline: 2px solid ButtonText; }
  :focus{ outline: 2px solid ButtonText; outline-offset: 2px; }
}
[inert] { pointer-events:none; }
[inert] * { pointer-events:none !important; }