/* ============================================================
   Ternah Systems — Portail v2 · Design system partagé
   Réf. tokens : kit de marque Stitch, adapté au récit Ternah.
   Utilisé par : index (v2), catalogue, fiches produit, accès.
   ============================================================ */
:root{
  --bg:#0b1120; --bg-2:#0d1c2f; --surface:#131b2e; --surface-2:#1b2438;
  --border:#243049; --border-soft:#1c2740;
  --text:#e6e9f2; --text-2:#aab3c5; --text-3:#7c839b;
  --primary:#bec6e0; --teal:#66d8d2; --teal-dim:rgba(102,216,210,.12);
  --or:#c9a961; --or-dim:rgba(201,169,97,.12);
  --radius:12px; --radius-lg:16px; --max:1240px;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.mono{font-family:var(--mono)}

/* ---------- HEADER ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(11,17,32,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-soft)}
.nav{display:flex;align-items:center;gap:32px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:.02em}
.logo .badge-ico{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#1b2438,#0d1c2f);border:1px solid var(--border);display:grid;place-items:center;font-size:18px}
.logo b{color:var(--text)} .logo span{color:var(--teal)}
.nav-links{display:flex;gap:26px;margin-left:8px}
.nav-links a{color:var(--text-2);font-size:14px;font-weight:500;padding:6px 0;transition:color .15s}
.nav-links a:hover,.nav-links a.actif{color:var(--text)}
.nav-links a.actif{border-bottom:2px solid var(--teal)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.lang{color:var(--text-3);font-size:13px}
.lang-switcher{display:flex;gap:2px}
.lang-btn{background:none;border:0;color:var(--text-3);font-size:12px;font-weight:600;padding:5px 7px;border-radius:5px;cursor:pointer;font-family:var(--sans)}
.lang-btn.active{color:var(--teal)} .lang-btn:hover{color:var(--text)}
.hamb{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.hamb span{width:24px;height:2px;background:var(--text);border-radius:2px}

/* ---------- BOUTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;font-weight:600;font-size:14px;padding:10px 18px;cursor:pointer;border:1px solid transparent;transition:.15s;white-space:nowrap}
.btn-primary{background:var(--primary);color:#0d1c2f} .btn-primary:hover{background:#d4dbef}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)} .btn-ghost:hover{border-color:var(--text-3);background:var(--surface)}
.btn-teal{background:var(--teal);color:#003735} .btn-teal:hover{background:#7ee3dd}

/* ---------- SECTIONS ---------- */
section.blk{padding:84px 0}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.h1{font-size:clamp(34px,4.6vw,54px);font-weight:700;line-height:1.08;letter-spacing:-.02em}
.h1 em,.h2 em{font-style:normal;color:var(--teal)}
.h2{font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-.01em;line-height:1.15}
.lead{color:var(--text-2);font-size:16px;max-width:640px;margin-top:14px}
.sec-head{margin-bottom:44px}

/* ---------- CARTES CATALOGUE ---------- */
.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:26px;display:flex;flex-direction:column;transition:.18s}
.card:hover{border-color:var(--border);transform:translateY(-3px);box-shadow:0 20px 44px -28px rgba(0,0,0,.85)}
.card .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.card .ico{width:46px;height:46px;border-radius:12px;background:var(--bg-2);border:1px solid var(--border);display:grid;place-items:center;font-size:22px}
.card h3{font-size:20px;font-weight:600;margin-bottom:8px}
.card p{color:var(--text-2);font-size:14px;flex:1;margin-bottom:20px}
.card .foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border-soft);padding-top:16px}
.card .status{font-family:var(--mono);font-size:12px;color:var(--teal);display:flex;align-items:center;gap:7px}
.card .status .dot{width:7px;height:7px;border-radius:50%;background:var(--teal)}
.card .status.soon{color:var(--or)} .card .status.soon .dot{background:var(--or)}
.card .go{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px}
.card .go.dl{color:var(--teal)} .card .go.dl:hover{color:#7ee3dd}
.card.ghost{border-style:dashed;align-items:center;justify-content:center;text-align:center;color:var(--text-3);min-height:220px}
.card.ghost .ico{margin:0 auto 14px}

/* ---------- TAGS / PASTILLES ---------- */
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;padding:4px 9px;border-radius:6px;text-transform:uppercase;font-weight:500}
.tag.gov{background:var(--teal-dim);color:var(--teal)}
.tag.edu{background:rgba(190,198,224,.12);color:var(--primary)}
.tag.soon{background:var(--or-dim);color:var(--or)}
.tag.sante{background:rgba(255,180,171,.12);color:#ffb4ab}
.tag.foncier{background:rgba(153,204,153,.14);color:#9c9}
.tag.commerce{background:rgba(240,180,100,.13);color:#f0b464}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--border-soft);padding:44px 0;color:var(--text-3);font-size:13px}
.foot-grid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a:hover{color:var(--text-2)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .nav-links,.lang{display:none}
  .hamb{display:flex}
}
@media(max-width:600px){
  .wrap{padding:0 20px}
  section.blk{padding:56px 0}
}