/* ============================================================================
   ekonea-ui.css — feuille de style commune EKONEA / NEEDE (CSS pur, zéro dépendance)
   Charte : _docs/UI_GUIDE.md. À copier dans le static/ de chaque outil et <link>-er.
   Réutiliser les tokens ci-dessous ; ne pas réinventer une charte par outil.
   ============================================================================ */

:root{
  --ink:#1d2430; --muted:#6b7480; --line:#e4e7ec; --bg:#f6f7f9; --card:#fff;
  --radius:14px; --shadow:0 1px 3px rgba(20,30,50,.07),0 8px 24px rgba(20,30,50,.06);
  --ann:#1f7a5a; --ann-d:#145440;                 /* accent marque NEEDE */
  /* accents par outil (liseré de carte / pastille) — identité stable */
  --kms:#2e7d52; --sce:#6b46c1; --pil:#1f6f8b; --ann-tool:#1f7a5a; --med:#a5641b; --crc:#8a5a9c;
  --ok:#1b6b43; --ok-bg:#e6f4ec; --err:#a12626; --err-bg:#fdecec; --warn:#8a5a1c; --warn-bg:#fbf1e2;
}

*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
     color:var(--ink);background:var(--bg);font-size:16px;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ---------- En-tête ---------- */
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:0 24px;height:60px;
        display:flex;align-items:center;gap:12px}
.topbar img.logo{height:28px;width:auto;display:block}
.topbar .sep{width:1px;height:26px;background:var(--line)}
.topbar .kicker{font-weight:700;color:var(--muted);letter-spacing:.14em;font-size:11px;text-transform:uppercase}
.topbar .sp{flex:1}

/* ---------- Chip profil ---------- */
.userbox{position:relative}
.userbtn{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);
         border-radius:999px;padding:5px 12px 5px 5px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--ann);color:#fff;display:flex;
        align-items:center;justify-content:center;font-weight:700;font-size:13px;text-transform:uppercase}
.usermenu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);
          border-radius:10px;box-shadow:var(--shadow);min-width:190px;padding:6px;z-index:20}
.usermenu a{display:block;padding:9px 12px;border-radius:7px;font-size:14px}
.usermenu a:hover{background:var(--bg)}

/* ---------- Layout ---------- */
main{max-width:1000px;margin:0 auto;padding:32px 24px 80px}
h1{font-size:29px;margin:.1em 0 .3em} h2{font-size:20px;margin:2em 0 .6em} h3{font-size:18px;margin:.4em 0 .1em}

/* ---------- Cartes ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
      box-shadow:var(--shadow);padding:22px}
.card.accent{border-top:4px solid var(--ac,var(--line))}   /* --ac : couleur d'outil */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 17px;border-radius:10px;
     font-weight:700;font-size:14.5px;border:1px solid transparent;cursor:pointer;background:var(--ann);color:#fff}
.btn:hover{filter:brightness(.92)}
.btn.ghost{background:#eef1f4;color:#48505c} .btn.ghost:hover{background:#e2e6ea;filter:none}
.btn.off{background:#eef1f4;color:#9aa2ad;cursor:default;border-color:var(--line)}
.btn.warn{background:#eef1f4;color:var(--err)}

/* ---------- Pastilles ---------- */
.badge{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
       padding:4px 9px;border-radius:999px;white-space:nowrap}
.badge.live{background:var(--ok-bg);color:var(--ok)}
.badge.local{background:#eef1f4;color:#5b6672}
.badge.soon{background:var(--warn-bg);color:var(--warn)}

/* ---------- Formulaires ---------- */
label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin:14px 0 5px}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:15px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ann);box-shadow:0 0 0 3px #e6f1ec}
.msg{border-radius:9px;padding:10px 12px;font-size:14px;margin-top:12px}
.msg.ok{background:var(--ok-bg);color:var(--ok)} .msg.err{background:var(--err-bg);color:var(--err)}

/* ---------- Tableaux ---------- */
.table-wrap{overflow-x:auto}                 /* jamais de scroll horizontal du body */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);font-size:14px}
th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em}

/* ---------- Accordéon ---------- */
details{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;
        padding:0 18px;box-shadow:var(--shadow)}
details>summary{cursor:pointer;font-weight:700;padding:15px 0;list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"▸";color:var(--ann);margin-right:10px;display:inline-block;transition:.15s}
details[open]>summary::before{transform:rotate(90deg)}

/* ---------- Responsive ---------- */
@media (max-width:680px){
  main{padding:22px 16px 60px}
  .grid{grid-template-columns:1fr}
  h1{font-size:24px}
  .topbar{padding:0 14px}
  .userbtn span:not(.avatar){display:none}   /* mobile : avatar seul */
}