/* Ilypsis — Design system "Direction E" raffiné, appliqué aux écrans réels.
   Topbar marine, corps clair aéré, cartes blanches en relief, accent bleu. */

:root {
  --navy-900:#0a2540; --navy-800:#102f50; --navy-700:#163e63; --navy-600:#1d4f7c;
  --blue-700:#255d97; --blue-600:#2f6fb0; --blue-500:#3b80c4; --blue-400:#5b9bd8;
  --blue-soft:#eaf2fb;

  --steel-50:#f6f8fb; --steel-100:#eef2f7; --steel-150:#e2e9f1; --steel-200:#d3dde9;
  --steel-300:#b6c4d4; --steel-400:#90a1b5;

  --paper:#f4f6f9; --surface:#ffffff;

  --ink:#11233a; --ink-2:#33455c; --muted:#5d6f86; --muted-2:#7e8da0;

  --ok:#2e7d52; --ok-soft:#e7f3ec; --ok-ink:#1f5e3c;
  --warn:#b9772a; --warn-soft:#fbf1e3; --warn-ink:#8a5717;
  --err:#c0392b; --err-soft:#fbeceb;
  --rp:#c8920f; --rp-soft:#fbf3dc; /* badge "RP / référence" laiton */

  --shadow-1:0 1px 2px rgba(10,37,64,.05);
  --shadow-2:0 10px 26px -18px rgba(10,37,64,.40), 0 2px 6px -4px rgba(10,37,64,.10);
  --shadow-3:0 22px 48px -24px rgba(10,37,64,.50), 0 4px 12px -6px rgba(10,37,64,.14);

  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  --font-display:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  --ease:cubic-bezier(.22,1,.36,1);
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p { margin:0; }
button { font:inherit; color:inherit; cursor:pointer; border:none; background:none; }
/* Liens = boutons/cartes habillés dans ce design : pas de soulignement ni de couleur
   d'état (le bleu/violet/rouge par défaut du navigateur, dont le rouge sur :active). */
a { color:inherit; text-decoration:none; }
i.fa-solid, i.fa-regular, i.fa-brands { display:inline-block; }
::selection { background:var(--blue-soft); color:var(--navy-900); }

/* ============ TOPBAR (bandeau marine) ============ */
.topbar {
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:20px;
  height:74px; padding:0 32px;
  background:var(--navy-900); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 6px 20px -12px rgba(10,37,64,.6);
}
.tb-brand { display:flex; align-items:center; gap:14px; flex-shrink:0; }
/* Logo Ilypsis — emplacement réservé (à remplacer par le vrai logo) */
.tb-logo {
  width:46px; height:46px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(145deg,#fff,#dfe8f2);
  display:grid; place-items:center; position:relative;
  box-shadow:0 2px 6px -2px rgba(0,0,0,.35);
}
.tb-logo::after { /* petit losange marine, placeholder discret */
  content:''; width:18px; height:18px; border-radius:5px;
  background:var(--navy-900); transform:rotate(45deg);
}
.tb-logo[data-ph]::before {
  content:attr(data-ph);
  position:absolute; bottom:-16px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:8px; letter-spacing:.1em;
  color:rgba(255,255,255,.45); white-space:nowrap;
}
.tb-titles h1 { font-family:var(--font-display); font-size:20px; font-weight:800; letter-spacing:-.01em; line-height:1.05; }
.tb-titles p { font-size:12.5px; color:rgba(255,255,255,.6); margin-top:2px; }

.tb-mid { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.tb-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }

.tb-btn {
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 16px; border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.94);
  font-size:13.5px; font-weight:600; white-space:nowrap;
  transition:background .15s var(--ease), border-color .15s var(--ease);
}
.tb-btn i { font-size:13px; color:var(--blue-400); }
.tb-btn:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4); }
.tb-btn.solid { background:#fff; color:var(--navy-900); border-color:#fff; }
.tb-btn.solid i { color:var(--blue-600); }
.tb-btn.solid:hover { background:var(--steel-100); }
.tb-btn.danger:hover { background:rgba(192,57,43,.22); border-color:rgba(255,150,140,.5); }

/* puces de contexte (Session active, Vue client, Identifiants OK…) */
.tb-chip {
  display:inline-flex; align-items:center; gap:8px;
  height:38px; padding:0 14px; border-radius:var(--r-pill);
  font-size:13px; font-weight:600; white-space:nowrap;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.16);
}
.tb-chip .dot { width:8px; height:8px; border-radius:50%; background:var(--blue-400); }
.tb-chip.ok { background:rgba(46,125,82,.22); border-color:rgba(110,200,150,.4); color:#d6f3e2; }
.tb-chip.ok .dot { background:#5fd29a; }
.tb-chip.toggle { background:transparent; }
.tb-chip.toggle:hover { background:rgba(255,255,255,.08); }
.tb-chip.toggle.on { background:#fff; color:var(--navy-900); border-color:#fff; }

/* fade-in + reduced-motion (repris de styles.css) */
.fade-in { animation:fadeIn .25s var(--ease); }
@keyframes fadeIn { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}