/* dashboard.digitalnomade.be — bureau : barre latérale bleu nuit, contenu clair, cartes blanches */
:root { /* charte de l'app ia.digitalnomade.be (thème « Nomade ») */
  --c1: #3f6652; --c2: #2f3e46; --c3: #c9a35a; --navy: #2f3e46; --navy-2: #3b4d56; --bg: #f1ede4; --paper: #fbf8f2; --ink: #2f3e46; --muted: #66767a; --line: rgba(47, 62, 70, .10);
  --accent: #c9a35a; --sage: #9fc2b4; --deep: #3f6652; --love: #cf8a96;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); font-weight: 500; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

.shell { display: grid; grid-template-columns: 216px 1fr; min-height: 100vh; }
.side { background: var(--navy); color: #e6ece9; display: flex; flex-direction: column; padding: 22px 14px; position: sticky; top: 0; height: 100vh; }
.brand { padding: 4px 10px 22px; }
.brand b { display: block; font-size: 16px; color: #fff; letter-spacing: -.01em; }
.brand small { color: #8FA6BF; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.nav-it { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 14px; border-radius: 10px; text-decoration: none; color: #C7D4E2; font-weight: 600; background: none; border: 0; width: 100%; cursor: pointer; text-align: left; }
.nav-it svg { width: 20px; height: 20px; flex: none; }
.nav-it:hover { background: var(--navy-2); color: #fff; }
.nav-it.on { background: var(--paper); color: var(--ink); }
.nav-it.small { font-size: 13px; font-weight: 500; color: #8FA6BF; padding: 8px 12px; }
.side-foot { margin-top: auto; display: grid; gap: 2px; }
.main { padding: 18px 28px 48px; min-width: 0; width: 100%; }
.crumbs { display: flex; gap: 14px; align-items: center; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.crumbs .back { text-transform: none; letter-spacing: 0; text-decoration: none; font-weight: 600; }
.crumbs .back:hover { color: var(--ink); }
@media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; } .side nav { display: flex; gap: 4px; } .side-foot { margin: 0 0 0 auto; display: flex; } .brand { padding: 0 10px; } .main { padding: 16px; } }

.login { min-height: 100vh; display: grid; place-items: center; background: var(--navy); }
.login-card { background: #fff; border-radius: 20px; padding: 32px; width: min(380px, 92vw); display: grid; gap: 12px; }
.login-card h1 { margin: 0; font-size: 26px; }
.login-card p { margin: 0 0 6px; color: var(--muted); }
.login-card input { border: 1px solid #d6dee5; border-radius: 10px; padding: 12px; font-size: 15px; }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 40px); opacity: 0; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; transition: .25s; z-index: 99; pointer-events: none; max-width: 90vw; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
:focus-visible { outline: 3px solid #3f6652; outline-offset: 2px; }