/* app.css — layout du shell intranet. Consomme la charte UTTOP (tokens --uttop-*).
   Import de la charte via le symlink vendor-uttop-charte (pattern écosystème). */
@import url('../vendor-uttop-charte/css/uttop-charte.css');

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--uttop-font-body);
  background: var(--uttop-bg);
  color: var(--uttop-ink);
  line-height: var(--uttop-lh-body);
}

#shell { min-height: 100vh; display: flex; flex-direction: column; }

.sh-rainbow { height: 4px; background: var(--uttop-rainbow); }

/* ---- Topbar ---- */
.sh-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--uttop-s4);
  padding: var(--uttop-s4) var(--uttop-s6);
  background: var(--uttop-surface); border-bottom: 1px solid var(--uttop-line);
}
.sh-brand { display: flex; flex-direction: column; line-height: 1.1; }
.sh-brand strong { font-family: var(--uttop-font-display); font-size: var(--uttop-fs-lg); letter-spacing: var(--uttop-tracking-display); }
.sh-sub { font-size: var(--uttop-fs-xs); color: var(--uttop-ink-soft); }
.sh-actions { display: flex; align-items: center; gap: var(--uttop-s3); flex-wrap: wrap; }

.sh-sis, .sh-official, .sh-icon, .sh-btn {
  font: inherit; font-size: var(--uttop-fs-sm); cursor: pointer;
  border: 1px solid var(--uttop-line-strong); background: var(--uttop-surface);
  color: var(--uttop-ink); border-radius: var(--uttop-r-pill); padding: .34rem .8rem;
  transition: var(--uttop-t);
}
.sh-icon { padding: .34rem .5rem; }
.sh-official { border-color: var(--uttop-accent); color: var(--uttop-accent-ink); font-weight: var(--uttop-fw-medium); }
.sh-official.ok { background: var(--uttop-accent-soft); }
.sh-btn { background: var(--uttop-accent); color: var(--uttop-on-accent); border-color: transparent; }
.sh-btn:hover, .sh-official:hover, .sh-icon:hover, .sh-sis:hover { box-shadow: var(--uttop-sh-sm); }
.sh-net { font-size: var(--uttop-fs-xs); color: var(--uttop-ink-soft); }
.sh-net.on { color: var(--uttop-green-ink); font-weight: var(--uttop-fw-medium); }

/* ---- Nav ---- */
.sh-nav { display: flex; gap: var(--uttop-s2); padding: var(--uttop-s3) var(--uttop-s6); background: var(--uttop-surface-2); border-bottom: 1px solid var(--uttop-line); flex-wrap: wrap; }
.sh-navitem { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; color: var(--uttop-ink-2);
  padding: .4rem .9rem; border-radius: var(--uttop-r-pill); font-size: var(--uttop-fs-sm); transition: var(--uttop-t); }
.sh-navitem:hover { background: var(--uttop-surface-3); }
.sh-navitem.active { background: var(--uttop-navy); color: #fff; }
.sh-navicon { opacity: .8; }

/* ---- Main / widgets ---- */
.sh-main { flex: 1; padding: var(--uttop-s6); max-width: 1200px; width: 100%; margin: 0 auto; }
.sh-h1 { font-family: var(--uttop-font-display); font-size: var(--uttop-fs-2xl); letter-spacing: var(--uttop-tracking-display); margin: 0 0 var(--uttop-s5); }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--uttop-s4); }
.sh-card { background: var(--uttop-surface); border: 1px solid var(--uttop-line); border-radius: var(--uttop-r-md); padding: var(--uttop-s5); box-shadow: var(--uttop-sh-sm); }
.sh-card-lg { max-width: 640px; }
.sh-cardh { font-family: var(--uttop-font-display); font-weight: var(--uttop-fw-medium); margin-bottom: var(--uttop-s2); }
.sh-muted { color: var(--uttop-ink-soft); font-size: var(--uttop-fs-sm); margin: 0; }
.sh-clock { text-align: center; }
.sh-time { font-family: var(--uttop-font-display); font-size: var(--uttop-fs-3xl); font-weight: var(--uttop-fw-bold); letter-spacing: var(--uttop-tracking-display); }
.sh-chip { display: inline-block; font-size: var(--uttop-fs-xs); background: var(--uttop-info-soft); color: var(--uttop-info-ink);
  padding: .2rem .6rem; border-radius: var(--uttop-r-pill); margin-right: .4rem; }

/* Desktop-first : rappel discret sous ~720px (interface mobile dédiée à venir) */
@media (max-width: 720px) { .sh-main::before { content: '↦ Optimisé desktop — interface mobile dédiée à venir.'; display: block; color: var(--uttop-warning-ink); font-size: var(--uttop-fs-xs); margin-bottom: var(--uttop-s4); } }