/* =========================================================================
   style.css - Feuille de style de l'interface (design sobre et ergonomique)
   Palette : bleu IDFM, gris neutres, accents verts/rouges pour les indicateurs.
   ========================================================================= */
:root{
  --bg:#f4f6fb; --card:#ffffff; --ink:#1b2437; --muted:#6b7690;
  --line:#e5e9f2; --brand:#0f4c9c; --brand-2:#1e6fd9;
  --good:#1f9d55; --warn:#e08a1e; --bad:#d64545;
  --shadow:0 2px 10px rgba(20,40,80,.06), 0 1px 2px rgba(20,40,80,.05);
  --radius:14px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.5;
}
a{color:var(--brand-2); text-decoration:none}

/* -------- Barre supérieure -------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 20px; background:var(--card);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0}
.logo-img{height:46px; width:auto; display:block; flex:none}
.brand-title{font-weight:700; font-size:1.05rem; color:var(--ink); line-height:1.2}

/* Menu déroulant (bouton 3 traits) */
.menu-btn{
  flex:none; width:46px; height:46px; border:1px solid var(--line); background:var(--card);
  border-radius:12px; cursor:pointer; display:grid; place-content:center; gap:5px; padding:0;
}
.menu-btn span{display:block; width:24px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .2s, opacity .2s}
.menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mainnav{
  display:none; position:absolute; top:calc(100% + 8px); right:16px;
  flex-direction:column; gap:4px; padding:8px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); min-width:220px; z-index:40;
}
.mainnav.open{display:flex}
.mainnav a{
  padding:12px 16px; border-radius:10px; color:var(--ink); font-weight:600;
  font-size:.95rem; white-space:nowrap;
}
.mainnav a:hover{background:var(--bg)}
.mainnav a.active{background:var(--brand); color:#fff}

/* -------- Conteneur -------- */
.container{max-width:1120px; margin:26px auto; padding:0 22px}
.footer{
  text-align:center; color:var(--muted); font-size:.82rem;
  padding:26px 0 40px;
}

/* -------- Cartes -------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px 24px; margin-bottom:22px;
}
.card h2{margin:0 0 4px; font-size:1.12rem}
.card .hint{color:var(--muted); font-size:.86rem; margin:0 0 18px}

/* -------- Formulaire de période -------- */
.period-form{display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:.8rem; font-weight:600; color:var(--muted)}
.field input{
  padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  font-size:.95rem; background:#fff; color:var(--ink); min-width:170px;
}
.quick{display:flex; gap:8px; flex-wrap:wrap; margin-top:4px}
.quick button{
  border:1px solid var(--line); background:#fff; color:var(--brand);
  padding:7px 12px; border-radius:20px; font-size:.82rem; cursor:pointer;
}
.quick button:hover{background:var(--bg)}
.btn-primary{
  padding:11px 22px; border:none; border-radius:10px; cursor:pointer;
  background:var(--brand); color:#fff; font-weight:700; font-size:.95rem;
}
.btn-primary:hover{background:var(--brand-2)}

/* -------- KPI (grands chiffres) -------- */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px}
.kpi{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow);
}
.kpi .label{font-size:.82rem; color:var(--muted); font-weight:600}
.kpi .value{font-size:2rem; font-weight:800; margin-top:6px}
.kpi .value.good{color:var(--good)} .kpi .value.warn{color:var(--warn)} .kpi .value.bad{color:var(--bad)}
.kpi .sub{font-size:.8rem; color:var(--muted); margin-top:2px}

/* -------- Tableaux -------- */
table{width:100%; border-collapse:collapse; font-size:.9rem}
th,td{padding:11px 12px; text-align:left; border-bottom:1px solid var(--line)}
th{font-size:.76rem; text-transform:uppercase; letter-spacing:.4px; color:var(--muted)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
.badge{padding:3px 9px; border-radius:20px; font-size:.78rem; font-weight:700}
.badge.good{background:#e6f6ec; color:var(--good)}
.badge.warn{background:#fdf1e0; color:var(--warn)}
.badge.bad{background:#fbe6e6; color:var(--bad)}
.section-title{margin:26px 0 10px; font-size:.9rem; color:var(--muted); font-weight:700;
  text-transform:uppercase; letter-spacing:.5px}

/* -------- Graphiques -------- */
.chart-wrap{position:relative; height:340px}
.grid-2{display:grid; grid-template-columns:1fr; gap:22px}
@media(min-width:900px){ .grid-2{grid-template-columns:1fr 1fr} }

/* -------- Divers -------- */
.muted{color:var(--muted)}
.spinner{display:inline-block; width:18px; height:18px; border:3px solid var(--line);
  border-top-color:var(--brand); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{padding:40px; text-align:center; color:var(--muted)}

/* =========================================================================
   Écrans d'attente (prochains passages) — style « afficheur d'arrêt »
   ========================================================================= */
.boards-grid{display:grid; grid-template-columns:1fr; gap:20px; margin-top:4px}
@media(min-width:760px){ .boards-grid{grid-template-columns:1fr 1fr} }

.board{
  background:#0f1b2d; border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); border:1px solid #0b1420;
}
.board-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:14px 18px; background:linear-gradient(135deg,#12315f,#1e6fd9);
}
.board-stop{color:#fff; font-weight:800; font-size:1.1rem; letter-spacing:.3px}
.board-dir{color:#eaf2ff; font-size:1.05rem; font-weight:800}
.board-body{padding:8px 10px 12px}

.dep-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:12px; padding:12px 12px; border-bottom:1px solid #1c2a3f;
}
.dep-row:last-child{border-bottom:none}
.dep-line{
  display:grid; place-items:center; min-width:52px; height:34px; padding:0 8px;
  background:#f4c531; color:#0f1b2d; font-weight:800; border-radius:8px; font-size:1rem;
}
.dep-dest{color:#f2f6fc; font-weight:700; font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dep-wait{
  color:#7ee0a6; font-weight:800; font-size:1.25rem; min-width:92px; text-align:right;
  font-variant-numeric:tabular-nums;
}
.dep-wait.supp{color:#ff6b6b; font-size:1.05rem; letter-spacing:.3px}
.dep-row.cancelled .dep-dest{color:#b7c2d4; text-decoration:line-through; text-decoration-color:#ff6b6b}
.dep-row.cancelled .dep-line{background:#5a6270; color:#e8eef8}
.dep-empty{padding:22px; text-align:center; color:#8ba0c0}

.updated{text-align:center; color:var(--muted); font-size:.82rem; margin-top:18px}

/* =========================================================================
   Responsive — adaptation téléphone
   ========================================================================= */
@media (max-width: 700px){
  .topbar{padding:8px 12px; gap:10px}
  .brand{flex:1 1 auto}
  .logo-img{height:38px}
  .brand-title{font-size:.9rem}
  .menu-btn{width:42px; height:42px}
  .mainnav{left:10px; right:10px; min-width:0}

  .container{margin:16px auto; padding:0 12px}
  .card{padding:16px 14px}
  .card h2{font-size:1.05rem}

  .kpi-grid{grid-template-columns:1fr 1fr; gap:10px}
  .kpi{padding:14px 14px}
  .kpi .value{font-size:1.6rem}

  /* Formulaire de période : champs pleine largeur */
  .period-form{gap:10px}
  .field{flex:1 1 100%}
  .field input{min-width:0; width:100%}
  .btn-primary{width:100%}

  /* Tableaux : défilement horizontal au lieu de déborder */
  .card table{display:block; overflow-x:auto; white-space:nowrap; font-size:.82rem}
  th, td{padding:9px 8px}

  /* Écrans d'attente : une colonne, texte adapté */
  .boards-grid{grid-template-columns:1fr}
  .board-head{padding:12px 14px}
  .board-stop{font-size:1.02rem}
  .board-dir{font-size:.98rem}
  .dep-row{gap:10px; padding:11px 12px}
  .dep-line{min-width:46px; height:32px; font-size:.95rem}
  .dep-dest{font-size:1rem}
  .dep-wait{font-size:1.1rem; min-width:72px}
  .chart-wrap{height:280px}
}