/* ══════════════════════════════════════════════════════════════════════
   app.css — Charte de Jalon.
   Grammaire visuelle inspirée des modules de Potav : cartes claires,
   puces d'état, barres d'avancement, échéancier. Accent propre à Jalon.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#eef2f7; --white:#fff; --soft:#f8fafc;
  --line:#e2e8f0; --line2:#cbd5e1;
  --t:#0f172a; --t2:#475569; --t3:#94a3b8;

  --acc:#a16207; --accsoft:#fdf3d7; --accline:#e6cf94;

  --green:#15803d; --greensoft:#dcfce7;
  --orange:#c2410c; --orangesoft:#ffedd5;
  --red:#b91c1c;    --redsoft:#fee2e2;
  --blue:#1d4ed8;   --bluesoft:#dbeafe;
  --purple:#6d28d9; --purplesoft:#ede9fe;
  --grey:#475569;   --greysoft:#f1f5f9;

  --r:14px;
  --sh:0 1px 3px rgba(15,23,42,.07), 0 2px 8px rgba(15,23,42,.04);
  --sh2:0 6px 24px rgba(15,23,42,.14), 0 2px 8px rgba(15,23,42,.08);
  --mono:ui-monospace,'Cascadia Mono',Consolas,'Segoe UI Mono',monospace;
}

*{box-sizing:border-box}
html{font-size:15px}
body{
  margin:0; background:var(--bg); color:var(--t); min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
input,select,textarea,button{font-family:inherit; font-size:inherit}
a{color:inherit}

/* ══ Écrans de connexion ══════════════════════════════════════════ */
.gate-body{display:flex; align-items:center; justify-content:center; padding:24px}
.gate{width:100%; max-width:400px}
.gate-brand{text-align:center; margin-bottom:26px}
.gate-logo{display:block; font-size:26px; font-weight:800; letter-spacing:.12em; color:var(--t)}
.gate-tag{display:block; font-size:13px; color:var(--t2); margin-top:5px}
.gate-card{background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh); padding:26px 24px}
.gate-card h1{font-size:18px; margin:0 0 6px; letter-spacing:-.2px}
.gate-lead{font-size:13.5px; color:var(--t2); line-height:1.55; margin:0 0 18px}
.gate-card form{display:flex; flex-direction:column; gap:6px}
.gate-card label{font-size:12px; font-weight:700; color:var(--t2); margin-top:10px}
.gate-card input{padding:11px 12px; border:1px solid var(--line2); border-radius:10px;
  background:var(--white); color:var(--t)}
.gate-card input:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--accsoft)}
.gate-card button{margin-top:18px; padding:12px 16px; border:0; border-radius:10px;
  background:var(--t); color:#fff; font-weight:700; cursor:pointer}
.gate-card button:hover{background:#1e293b}
.gate-err{background:var(--redsoft); color:var(--red); border:1px solid #fecaca;
  border-radius:10px; padding:10px 12px; font-size:13px; margin-bottom:14px}
.gate-note{font-size:12px; color:var(--t3); line-height:1.55; margin:18px 0 0}
.gate-note code{font-family:var(--mono); font-size:11.5px}

/* ══ Barre supérieure ═════════════════════════════════════════════ */
.topbar{position:sticky; top:0; z-index:50; background:var(--white);
  border-bottom:1px solid var(--line); box-shadow:0 1px 4px rgba(15,23,42,.05)}
.topbar-in{max-width:1240px; margin:0 auto; padding:0 16px; height:56px;
  display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{text-decoration:none; display:flex; align-items:baseline; gap:9px; min-width:0}
.brand-name{font-size:16px; font-weight:800; letter-spacing:.1em}
.brand-tag{font-size:12px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar-right{display:flex; align-items:center; gap:14px; flex-shrink:0}
.save-status{font-size:11.5px; color:var(--t3); white-space:nowrap}
.save-status.saving{color:var(--acc)}
.save-status.error{color:var(--red); font-weight:700}
.logout{font-size:12.5px; color:var(--t2); text-decoration:none; white-space:nowrap}
.logout:hover{color:var(--t); text-decoration:underline}

/* ══ Coque ════════════════════════════════════════════════════════ */
.app{max-width:1240px; margin:0 auto; padding:18px 16px 64px}
.page-head{display:flex; justify-content:space-between; align-items:flex-start;
  gap:14px; flex-wrap:wrap; margin:6px 0 16px}
.page-head h1{font-size:22px; margin:0 0 4px; letter-spacing:-.4px}
.page-head p{margin:0; color:var(--t2); font-size:13px}

/* ══ Sélecteur de portefeuille ════════════════════════════════════ */
.pfbar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.pf{padding:8px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--white); color:var(--t2); font-size:13px; font-weight:700;
  cursor:pointer; display:inline-flex; align-items:center; gap:7px}
.pf:hover{border-color:var(--line2); color:var(--t)}
.pf.on{background:var(--t); color:#fff; border-color:var(--t)}
.pf i{width:8px; height:8px; border-radius:50%; display:inline-block}
.pf .n{font-size:11px; opacity:.75; font-variant-numeric:tabular-nums}

/* ══ Onglets ══════════════════════════════════════════════════════ */
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.tab{padding:9px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--white); color:var(--t2); font-size:13px; font-weight:700; cursor:pointer}
.tab:hover{border-color:var(--line2); color:var(--t)}
.tab.on{background:var(--t); color:#fff; border-color:var(--t)}
.panel{display:none}
.panel.on{display:block}

/* ══ Boutons ══════════════════════════════════════════════════════ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 16px; border-radius:10px; border:1px solid transparent; cursor:pointer;
  font-size:13px; font-weight:700; white-space:nowrap; text-decoration:none}
.btn-primary{background:var(--t); color:#fff}
.btn-primary:hover{background:#1e293b}
.btn-light{background:var(--white); border-color:var(--line); color:var(--t2)}
.btn-light:hover{background:var(--bg); color:var(--t)}
.btn-danger{background:var(--redsoft); color:var(--red); border-color:#fecaca}
.btn-danger:hover{background:#fecaca}
.btn-sm{padding:6px 12px; font-size:12px; border-radius:9px}
.btn-wa{background:var(--greensoft); color:#087a3f; border-color:#a7e8c3}
.btn-wa:hover{background:#c7f5da}
.iconbtn{border:1px solid var(--line); background:var(--white); border-radius:8px;
  padding:5px 9px; cursor:pointer; color:var(--t2); font-size:12px}
.iconbtn:hover{background:var(--bg); color:var(--t); border-color:var(--line2)}
.iconbtn.danger:hover{background:var(--redsoft); color:var(--red); border-color:#fecaca}
.toolbar{display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:14px}
.tgroup{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* ══ Cartes et grilles ════════════════════════════════════════════ */
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh); padding:16px 18px; margin-bottom:14px}
.card > *:last-child{margin-bottom:0}
.sect{display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin-bottom:12px; flex-wrap:wrap}
.sect h2{font-size:15px; font-weight:800; margin:0; letter-spacing:-.2px}
.small{font-size:12px; color:var(--t2)}
.empty{padding:24px; text-align:center; color:var(--t3); font-size:13px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.grid2 > *{min-width:0}

.stats{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:14px}
.stat{background:var(--white); border:1px solid var(--line); border-top:3px solid var(--line2);
  border-radius:var(--r); box-shadow:var(--sh); padding:13px 12px; min-height:88px;
  display:flex; flex-direction:column; justify-content:center}
.stat .lab{font-size:10.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  color:var(--t2); line-height:1.3}
.stat .val{font-size:22px; font-weight:800; letter-spacing:-.5px; margin-top:6px;
  font-variant-numeric:tabular-nums}
.stat.b{border-top-color:#3b82f6} .stat.b .val{color:var(--blue)}
.stat.g{border-top-color:#22c55e} .stat.g .val{color:var(--green)}
.stat.o{border-top-color:#f97316} .stat.o .val{color:var(--orange)}
.stat.r{border-top-color:#ef4444} .stat.r .val{color:var(--red)}
.stat.a{border-top-color:var(--acc)} .stat.a .val{color:var(--acc)}

/* ══ Puces ════════════════════════════════════════════════════════ */
.chip{display:inline-flex; align-items:center; gap:5px; border-radius:999px;
  padding:3px 9px; font-size:11.5px; font-weight:700; white-space:nowrap;
  background:var(--greysoft); color:var(--t2); border:1px solid var(--line)}
.chip.red{background:var(--redsoft); color:var(--red); border-color:#fecaca}
.chip.orange{background:var(--orangesoft); color:var(--orange); border-color:#fed7aa}
.chip.green{background:var(--greensoft); color:var(--green); border-color:#bbf7d0}
.chip.blue{background:var(--bluesoft); color:var(--blue); border-color:#bfdbfe}
.chip.purple{background:var(--purplesoft); color:var(--purple); border-color:#ddd6fe}
.chip.acc{background:var(--accsoft); color:var(--acc); border-color:var(--accline)}
.dot{width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0}

/* ══ Filtres et formulaires ═══════════════════════════════════════ */
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.filters input,.filters select{flex:1 1 160px; max-width:260px}
input,select,textarea{width:100%; padding:9px 11px; border:1px solid var(--line2);
  border-radius:10px; background:var(--white); color:var(--t)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--acc);
  box-shadow:0 0 0 3px var(--accsoft)}
textarea{min-height:70px; resize:vertical}
input[type=checkbox]{width:auto; padding:0}
label.fld{display:flex; flex-direction:column; gap:5px; font-size:12px;
  font-weight:700; color:var(--t2)}
label.fld > input,label.fld > select,label.fld > textarea{font-weight:400; color:var(--t)}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.fgrid .full{grid-column:1/-1}

/* ══ Tableaux ═════════════════════════════════════════════════════ */
.twrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; min-width:560px}
th,td{text-align:left; padding:10px 9px; border-bottom:1px solid #eef2f7;
  font-size:13px; vertical-align:top}
th{color:#7c8aa0; font-size:10px; text-transform:uppercase; letter-spacing:.55px;
  font-weight:800; white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover td{background:var(--soft)}

/* ══ Barres d'avancement ══════════════════════════════════════════ */
.progress{height:8px; background:#e2e8f0; border-radius:99px; overflow:hidden}
.progress > span{display:block; height:100%; border-radius:99px; background:var(--acc)}
.catline{display:grid; grid-template-columns:1fr auto; gap:4px 10px; margin-bottom:11px}
.catline .cn{font-size:12.5px; font-weight:700}
.catline .cv{font-size:11.5px; color:var(--t2); font-variant-numeric:tabular-nums}
.catline .progress{grid-column:1/-1}

/* ══ Cartes de chantier ═══════════════════════════════════════════ */
.chgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px}
.chcard{background:var(--white); border:1px solid var(--line); border-left:4px solid var(--pc,var(--acc));
  border-radius:12px; box-shadow:var(--sh); padding:14px 15px; cursor:pointer}
.chcard:hover{box-shadow:var(--sh2); transform:translateY(-1px)}
.chcard-top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.chcard-t{font-size:14px; font-weight:800; letter-spacing:-.2px; line-height:1.3}
.chcard-c{font-size:11.5px; color:var(--t3); margin-top:3px}
.chcard-d{font-size:12.5px; color:var(--t2); margin:9px 0 0; line-height:1.45}
.chcard-p{display:flex; align-items:center; gap:9px; margin:11px 0 9px}
.chcard-p .progress{flex:1}
.chcard-pct{font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; min-width:34px; text-align:right}
.chcard-m{display:flex; gap:6px; flex-wrap:wrap}

/* ══ Kanban ═══════════════════════════════════════════════════════ */
.kanban{display:grid; grid-template-columns:repeat(5,minmax(160px,1fr)); gap:10px}
.kcol{background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:10px}
.kcol-h{display:flex; justify-content:space-between; align-items:center;
  font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
  margin-bottom:9px}
.kmini{background:var(--white); border:1px solid var(--line);
  border-left:3px solid var(--pc,var(--acc)); border-radius:9px;
  padding:9px 10px; margin-bottom:7px; cursor:pointer}
.kmini:hover{box-shadow:var(--sh)}
.kmini-t{font-size:12.5px; font-weight:700; line-height:1.35}
.kmini-m{display:flex; justify-content:space-between; align-items:center;
  gap:6px; margin-top:7px; font-size:11px; color:var(--t2)}

/* ══ Échéancier ═══════════════════════════════════════════════════ */
.tl-row{display:grid; grid-template-columns:180px 1fr; gap:12px;
  align-items:center; padding:5px 0; cursor:pointer}
.tl-row:hover .tl-name{color:var(--acc)}
.tl-name{font-size:12.5px; font-weight:700; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.tl-track{position:relative; height:24px; background:var(--soft);
  border:1px solid var(--line); border-radius:7px}
.tl-bar{position:absolute; top:3px; bottom:3px; background:var(--pc,var(--acc));
  border-radius:5px; color:#fff; font-size:10.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; min-width:6px}
.tl-today{position:absolute; top:-2px; bottom:-2px; width:2px; background:#ef4444}
.tl-scale{display:grid; grid-template-columns:180px 1fr; gap:12px; margin-top:8px;
  font-size:10.5px; color:var(--t3)}

/* ══ Journal ══════════════════════════════════════════════════════ */
.jline{display:grid; grid-template-columns:88px 1fr auto; gap:12px;
  padding:10px 0; border-top:1px solid var(--line)}
.jline:first-child{border-top:none; padding-top:0}
.jdate{font-family:var(--mono); font-size:11.5px; color:var(--t3); padding-top:2px}
.jbody{font-size:13px; line-height:1.5; min-width:0}
.jbody strong{font-size:12.5px}

/* ══ Lignes d'alerte et de contact ════════════════════════════════ */
.line{display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px 0; border-top:1px solid var(--line)}
.line:first-child{border-top:none; padding-top:0}
.line-n{font-size:13px; font-weight:700; line-height:1.35}
.line-r{font-size:12px; color:var(--t2); margin-top:3px}
.line-a{display:flex; gap:6px; flex-shrink:0}

/* ══ Tâches dans la fiche ═════════════════════════════════════════ */
.lot-h{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  color:var(--t3); margin:16px 0 8px; padding-bottom:5px; border-bottom:1px solid var(--line)}
.task{display:grid; grid-template-columns:auto 1fr auto; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--line); align-items:start}
.task:last-child{border-bottom:none}
.task-t{font-size:13px; font-weight:650; line-height:1.4}
.task.is-done .task-t{text-decoration:line-through; color:var(--t3)}
.task-m{display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; align-items:center}
.task-edit{grid-column:1/-1; background:var(--soft); border:1px solid var(--line);
  border-radius:10px; padding:12px; margin-top:8px}
.inline-add{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.inline-add input{flex:1 1 200px}

/* ══ Modale ═══════════════════════════════════════════════════════ */
.backdrop{position:fixed; inset:0; background:rgba(15,23,42,.55);
  display:none; align-items:flex-start; justify-content:center;
  padding:24px 14px; z-index:100; overflow-y:auto}
.backdrop.on{display:flex}
.modal{background:var(--white); border-radius:16px; box-shadow:var(--sh2);
  width:100%; max-width:760px; padding:20px 22px 24px}
.modal-h{display:flex; justify-content:space-between; align-items:flex-start;
  gap:12px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line)}
.modal-h h2{font-size:17px; margin:0 0 3px; letter-spacing:-.3px}
.modal-close{border:0; background:var(--greysoft); border-radius:9px;
  width:32px; height:32px; cursor:pointer; color:var(--t2); font-size:15px; flex-shrink:0}
.modal-close:hover{background:var(--line); color:var(--t)}
.sub{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  color:var(--acc); margin:22px 0 10px}
.modal-foot{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:22px; padding-top:16px; border-top:1px solid var(--line)}

/* ══ Adaptation aux petits écrans ═════════════════════════════════ */
@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2{grid-template-columns:1fr}
  .kanban{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:1fr}
  .tl-row,.tl-scale{grid-template-columns:110px 1fr}
  .jline{grid-template-columns:70px 1fr; }
  .jline .line-a{grid-column:1/-1}
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr 1fr}
  .kanban{grid-template-columns:1fr}
  .brand-tag{display:none}
  .app{padding:14px 12px 56px}
  .modal{padding:16px 15px 20px}
}

@media print{
  .topbar,.tabs,.pfbar,.toolbar,.filters,.backdrop{display:none !important}
  .panel{display:block !important}
  .card{box-shadow:none; break-inside:avoid}
  body{background:#fff}
}