@font-face{
  font-family:'Inter Tight';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/inter-tight-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter Tight';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/inter-tight-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter Tight';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/inter-tight-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter Tight';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/inter-tight-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter Tight';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('fonts/inter-tight-latin-800-normal.woff2') format('woff2');
}
:root{
    --bg:#0a1c2e;
    --bg-elev:#0f2740;
    --bg-elev2:#132e4d;
    --line:#1e3f60;
    --line-soft:#16324f;
    --text:#eaf2f9;
    --text-dim:#7f9cb8;
    --text-dim2:#587793;
    --amber:#ffb238;
    --amber-dim:#5a4423;
    --cyan:#3fd0e8;
    --river:#173a58;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  body{
    background:var(--bg);
    background-image:
      radial-gradient(circle at 10% 0%, rgba(63,208,232,0.07), transparent 40%),
      radial-gradient(circle at 90% 100%, rgba(255,178,56,0.06), transparent 40%);
    color:var(--text);
    font-family:'Inter Tight', sans-serif;
    -webkit-font-smoothing:antialiased;
    min-height:100%;
    padding-bottom:40px;
  }
  .mono{ font-family:'Inter Tight', sans-serif; font-variant-numeric: tabular-nums; }
  a{ color:inherit; text-decoration:none; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  }

  /* ---------- Header ---------- */
  header.top{
    position:sticky; top:0; z-index:20;
    background:rgba(10,28,46,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .top-inner{
    max-width:920px; margin:0 auto;
    padding:14px 18px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand-mark{
    width:34px; height:34px; border-radius:8px;
    background:linear-gradient(160deg, var(--cyan), #1a7f96);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:13px; color:#02202a; flex-shrink:0;
  }
  .brand-text{ line-height:1.15; }
  .brand-text .t1{ font-weight:700; font-size:15px; letter-spacing:0.02em;}
  .brand-text .t2{ font-size:11px; color:var(--text-dim); letter-spacing:0.04em; text-transform:uppercase;}
  .clock{
    font-family:'Inter Tight', sans-serif;
    font-size:20px; font-weight:600;
    color:var(--amber);
    letter-spacing:0.02em;
    text-align:right;
    line-height:1.1;
  }
  .clock .day{
    font-family:'Inter Tight', sans-serif;
    font-size:10.5px; font-weight:500; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:0.08em;
  }

  main{ max-width:920px; margin:0 auto; padding:20px 16px 10px; }

  /* ---------- Home hero ---------- */
  .hero{ padding:6px 2px 18px; }
  .hero h1{
    font-size:20px; font-weight:700; letter-spacing:0.01em;
    margin-bottom:6px; line-height:1.3;
  }
  .hero p{ color:var(--text-dim); font-size:13.5px; max-width:60ch; line-height:1.5; }

  .board-label{
    display:flex; align-items:center; gap:8px;
    font-size:11px; text-transform:uppercase; letter-spacing:0.12em;
    color:var(--text-dim2); margin:22px 2px 8px;
  }
  .board-label .dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); }

  /* ---------- Departure board rows ---------- */
  .board{
    background:var(--bg-elev);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
  }
  .board-row{
    display:grid;
    grid-template-columns: 4px 30px 1fr auto;
    align-items:center;
    gap:12px;
    padding:14px 16px 14px 0;
    border-bottom:1px solid var(--line-soft);
    transition: background 0.15s ease;
  }
  .board-row:last-child{ border-bottom:none; }
  .board-row:hover{ background:var(--bg-elev2); }
  .board-row.imminent{ background:linear-gradient(90deg, rgba(255,178,56,0.10), transparent 60%); }

  .line-stripe{ align-self:stretch; border-radius:0 3px 3px 0; }

  .line-chip{
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:8px;
    font-family:'Inter Tight', sans-serif;
    font-size:10.5px; font-weight:700; color:#04121e;
    flex-shrink:0;
  }

  .route{ min-width:0; }
  .route-line{
    font-size:11px; color:var(--text-dim); margin-bottom:3px;
    display:flex; align-items:center; gap:6px;
  }
  .route-dir{ font-size:15px; font-weight:600; line-height:1.35; }
  .route-dir .arrow{ color:var(--cyan); font-weight:400; margin:0 3px; }
  .route-dir .muted{ color:var(--text-dim); font-weight:500; font-size:12.5px; display:block; margin-top:1px; }

  .time-block{
    display:flex; flex-direction:column; align-items:flex-end; gap:5px;
  }
  .depart-time{
    font-size:21px; font-weight:700; text-align:right; line-height:1;
  }
  .depart-time.past{ color:var(--text-dim2); }

  .countdown{
    font-size:10.5px; font-weight:600; text-align:center;
    padding:4px 9px; border-radius:999px;
    background:var(--line-soft); color:var(--text-dim);
    white-space:nowrap;
  }
  .countdown.imminent{ background:var(--amber-dim); color:var(--amber); }
  .countdown.soon{ background:rgba(63,208,232,0.12); color:var(--cyan); }

  /* Urgence : seule la pastille (countdown) pulse — jamais l'heure elle-même. */
  @keyframes pulse-badge{
    0%,100%{ opacity:1; }
    50%{ opacity:0.45; }
  }
  .countdown.urgent-orange{
    font-weight:700; background:#ff8c14; color:#1a0d00;
    animation:pulse-badge 1.1s ease-in-out infinite;
  }
  .countdown.urgent-red{
    font-weight:700; background:#ff3b3b; color:#1a0000;
    animation:pulse-badge 0.75s ease-in-out infinite;
  }

  /* ---------- Line grid (all lines index) ---------- */
  .lines-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:10px;
    margin-top:10px;
  }
  .line-card{
    background:var(--bg-elev);
    border:1px solid var(--line);
    border-left:4px solid var(--line);
    border-radius:12px;
    padding:14px 16px;
    display:flex; flex-direction:column; gap:6px;
    transition: border-color 0.15s ease, transform 0.15s ease;
  }
  .line-card:hover{ transform:translateY(-1px); }
  .line-card .route-dir{ font-size:14.5px; line-height:1.35; white-space:normal; }
  .line-card .sub{ font-size:11.5px; color:var(--text-dim); }
  .line-card .next-row{
    margin-top:4px; display:flex; align-items:baseline; justify-content:space-between;
    font-family:'Inter Tight', sans-serif; gap:10px;
  }
  .line-card .next-row .label{ font-size:12px; color:var(--text-dim2); font-family:'Inter Tight', sans-serif; white-space:normal; line-height:1.35; }
  .line-card .next-row b{ font-size:16px; white-space:nowrap; flex-shrink:0; }

  footer{
    max-width:920px; margin:30px auto 0; padding:16px;
    color:var(--text-dim2); font-size:11.5px; line-height:1.6;
    border-top:1px solid var(--line);
  }

  /* ---------- Detail page ---------- */
  .back-btn{
    display:inline-flex; align-items:center; gap:6px;
    font-size:12.5px; color:var(--text-dim); margin-bottom:14px;
    padding:6px 0;
  }
  .back-btn:hover{ color:var(--cyan); }

  .line-header{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    flex-wrap:wrap; margin-bottom:6px;
  }
  .line-header h1{ font-size:20px; font-weight:700; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .line-header .arrow{ color:var(--cyan); font-weight:400; }
  .badge-count{
    font-size:11px; color:var(--text-dim); background:var(--bg-elev);
    border:1px solid var(--line); padding:4px 10px; border-radius:999px;
  }

  .schedule-tabs{
    display:flex; gap:6px; flex-wrap:wrap; margin:16px 0 18px;
  }
  .schedule-tab{
    font-size:12px; padding:7px 12px; border-radius:999px;
    background:var(--bg-elev); border:1px solid var(--line); color:var(--text-dim);
    cursor:pointer;
  }
  .schedule-tab.active{ background:var(--cyan); color:#02202a; border-color:var(--cyan); font-weight:600; }
  .schedule-tab.today-mark::after{ content:"•"; color:var(--amber); margin-left:5px; }

  .directions{
    display:grid; grid-template-columns:1fr 1fr; gap:14px;
  }
  @media (max-width:640px){ .directions{ grid-template-columns:1fr; } }

  .dir-panel{
    background:var(--bg-elev);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
  }
  .dir-panel-head{
    padding:13px 16px; border-bottom:1px solid var(--line-soft);
    background:var(--bg-elev2);
  }
  .dir-panel-head .title{ font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:6px; }
  .dir-panel-head .next{ font-size:11.5px; color:var(--text-dim); margin-top:3px; }
  .dir-panel-head .next b{ color:var(--amber); font-family:'Inter Tight', sans-serif; }

  .time-grid{
    display:grid; grid-template-columns:repeat(4, 1fr);
    gap:1px; background:var(--line-soft);
  }
  @media (max-width:380px){ .time-grid{ grid-template-columns:repeat(3,1fr); } }
  .time-cell{
    background:var(--bg-elev);
    padding:9px 4px;
    text-align:center;
    font-family:'Inter Tight', sans-serif;
    font-size:13px; font-weight:500;
    color:var(--text-dim2);
  }
  .time-cell.upcoming{ color:var(--text); }
  .time-cell.next{
    color:var(--amber); font-weight:700;
    position:relative;
    background:var(--amber-dim);
  }

  .dir-panel-head .next .countdown{
    display:inline-flex; margin-left:2px; vertical-align:middle;
    padding:2px 8px; font-size:10.5px;
  }

  .disclaimer{
    margin-top:20px; font-size:11.5px; color:var(--text-dim2);
    background:var(--bg-elev); border:1px solid var(--line);
    border-radius:10px; padding:12px 14px; line-height:1.6;
  }

  /* ---------- Suspensions de service ---------- */
  #alert-banner{
    display:flex; flex-direction:column; gap:1px;
    background:var(--line-soft); border-radius:12px; overflow:hidden;
    margin-bottom:22px; border:1px solid #5a1c1c;
  }
  .alert-row{
    display:flex; align-items:center; gap:10px;
    padding:11px 14px; background:rgba(255,59,59,0.12);
    font-size:13px;
  }
  .alert-row:hover{ background:rgba(255,59,59,0.2); }
  .alert-dot{
    width:8px; height:8px; border-radius:50%; background:#ff3b3b; flex-shrink:0;
    animation:pulse-badge 1.1s ease-in-out infinite;
  }
  .alert-text{ color:var(--text); }
  .alert-text b{ color:#ff8080; }

  .board-row.suspended{
    background:rgba(255,59,59,0.10);
    border-bottom-color:rgba(255,59,59,0.25);
  }
  .board-row.suspended:hover{ background:rgba(255,59,59,0.16); }
  .board-row.suspended .line-stripe{ background:#ff3b3b !important; }
  .board-row.suspended .route-dir{ color:var(--text); font-weight:600; }
  .board-row.suspended .route-dir .warn-icon{ margin-right:2px; }
  .board-row.suspended .muted{ color:#ff9999; display:block; margin-top:1px; }

  .line-card.suspended{
    position:relative; border-color:#5a1c1c;
    background:linear-gradient(160deg, rgba(255,59,59,0.09), var(--bg-elev) 65%);
  }
  .suspended-ribbon{
    position:absolute; top:10px; right:10px;
    background:#ff3b3b; color:#1a0000; font-size:10px; font-weight:700;
    padding:3px 8px; border-radius:999px; letter-spacing:0.04em; text-transform:uppercase;
  }
  .line-card.suspended .route-line span:last-child{ color:#ff9999; }

  .suspension-banner{
    display:flex; align-items:flex-start; gap:12px;
    background:rgba(255,59,59,0.1); border:1px solid #5a1c1c;
    border-radius:12px; padding:14px 16px; margin-bottom:18px;
  }
  .suspension-dot{
    width:10px; height:10px; border-radius:50%; background:#ff3b3b;
    margin-top:4px; flex-shrink:0;
    animation:pulse-badge 1.1s ease-in-out infinite;
  }
  .suspension-title{ font-weight:700; font-size:14.5px; color:#ff8080; }
  .suspension-reason{ font-size:12.5px; color:var(--text-dim); margin-top:2px; }