:root {
  --navy:#172641;
  --orange:#ed7534;
  --ink:#20304a;
  --muted:#788494;
  --line:#e7edf1;
  --bg:#f8fafb;
  --light:#dfebf0
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--bg);
  font-family:'DM Sans',sans-serif;
  color:var(--ink)
}

button,input,textarea,select {
  font:inherit
}

button {
  cursor:pointer
}

button:disabled {
  opacity:.6;
  cursor:wait
}

[hidden] {
  display:none!important
}

.brand-mark {
  font:800 27px 'Manrope',sans-serif;
  letter-spacing:.12em;
  color:var(--navy);
  text-decoration:none
}

.brand-mark span,h1 span {
  color:var(--orange)
}

.eyebrow {
  font-size:10px;
  letter-spacing:.18em;
  color:var(--orange);
  font-weight:700
}

.muted {
  color:var(--muted);
  line-height:1.8;
  font-size:14px
}

.btn {
  border:0;
  border-radius:4px;
  font-weight:700;
  font-size:12px;
  letter-spacing:.01em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:15px 18px;
  text-decoration:none;
  transition:transform .2s,background .2s
}

.btn:hover {
  transform:translateY(-2px)
}

.btn.primary {
  background:var(--navy);
  color:white
}

.btn.outline {
  background:white;
  border:1px solid #dce5ea;
  color:var(--navy)
}

.btn.ghost {
  background:transparent;
  border:1px solid #e6eaf0;
  color:var(--navy)
}

.btn.wide {
  width:100%;
  margin-top:20px
}

.login-screen {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:30px
}

.login-card {
  background:white;
  padding:clamp(28px,5vw,65px);
  width:100%;
  max-width:540px;
  border:1px solid var(--line);
  box-shadow:0 28px 90px rgba(23,38,65,.045)
}

.login-card .eyebrow {
  margin-top:40px
}

.login-card h1 {
  font:600 clamp(32px,5vw,53px)/1.12 'Manrope',sans-serif;
  letter-spacing:-.05em;
  margin:18px 0
}

.login-card .muted {
  margin-bottom:30px
}

.login-card label,.detail-dialog label {
  display:block;
  font-size:12px;
  font-weight:700;
  margin:20px 0 9px
}

.login-card input,.detail-dialog input,.detail-dialog select,.detail-dialog textarea {
  width:100%;
  padding:14px 15px;
  border:1px solid #dfe6ec;
  border-radius:4px;
  outline:0;
  background:white;
  color:var(--ink)
}

.login-card input:focus,.detail-dialog input:focus,.detail-dialog textarea:focus,.detail-dialog select:focus {
  border-color:#718eaa
}

.feedback {
  color:#a74635;
  min-height:18px;
  font-size:12px
}

.return-link {
  display:inline-block;
  margin-top:22px;
  color:var(--muted);
  font-size:12px;
  text-decoration:none
}

.app {
  min-height:100vh;
  display:flex
}

.sidebar {
  width:255px;
  flex:none;
  background:var(--navy);
  color:white;
  padding:36px 25px;
  display:flex;
  flex-direction:column;
  min-height:100vh
}

.brand-light {
  color:white
}

.studio-tag {
  font-size:10px;
  color:#9fb1c9;
  letter-spacing:.2em;
  margin:12px 0 68px
}

.nav-heading {
  font-size:10px;
  letter-spacing:.13em;
  color:#7f95b0;
  margin-bottom:15px
}

.nav-link {
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  gap:15px;
  padding:16px 14px;
  width:100%;
  text-align:left;
  color:#b6c4d5;
  border-radius:4px;
  font-size:13px
}

.nav-link.current,.nav-link:hover {
  background:#2a3e5e;
  color:white
}

.side-bottom {
  margin-top:auto;
  padding-top:26px;
  border-top:1px solid #40516a;
  font-size:11px;
  letter-spacing:.06em;
  line-height:2
}

.side-bottom small {
  color:#a4b5c9;
  font-size:10px
}

.side-dot {
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--orange);
  border-radius:50%;
  margin-right:7px
}

.content {
  flex:1;
  min-width:0;
  padding:0 clamp(20px,4vw,65px) 70px
}

.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  min-height:95px;
  border-bottom:1px solid var(--line);
  margin-bottom:60px
}

.crumb {
  font-size:11px;
  color:#8b9aaa;
  letter-spacing:.03em
}

.crumb span {
  padding:0 12px;
  color:#b8c0c9
}

.crumb b {
  color:var(--ink)
}

.top-actions {
  display:flex;
  align-items:center;
  gap:15px
}

.whoami {
  font-size:11px;
  color:var(--muted);
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis
}

.page .eyebrow span {
  color:#a0afbd;
  padding-left:7px
}

.title-row {
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:center;
  margin-bottom:45px
}

.page h1 {
  font:650 clamp(32px,4vw,46px)/1.15 'Manrope',sans-serif;
  letter-spacing:-.05em;
  margin:18px 0 10px
}

.stat-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-bottom:58px
}

.stat-card {
  padding:27px 30px;
  border:1px solid var(--line);
  background:white;
  min-height:170px;
  display:flex;
  flex-direction:column
}

.stat-card span {
  font-size:12px;
  color:#7a8796
}

.stat-card strong {
  font:700 37px 'Manrope',sans-serif;
  letter-spacing:-.07em;
  margin:15px 0 4px
}

.stat-card small {
  font-size:11px;
  color:#9ca7b1
}

.table-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:18px
}

.table-heading h2 {
  font:700 19px 'Manrope',sans-serif
}

.search {
  width:260px;
  max-width:100%;
  border:1px solid var(--line);
  padding:12px 16px;
  background:white;
  color:var(--ink);
  border-radius:4px;
  font-size:12px
}

.table-wrap {
  background:white;
  border:1px solid var(--line);
  overflow-x:auto
}

table {
  border-collapse:collapse;
  width:100%;
  min-width:650px;
  text-align:left
}

th {
  background:#fcfdfd;
  color:#85919f;
  font-weight:700;
  letter-spacing:.06em;
  font-size:10px;
  padding:19px 22px
}

td {
  font-size:12px;
  border-top:1px solid #edf1f3;
  padding:20px 22px;
  vertical-align:middle
}

td strong {
  display:block;
  font-size:13px
}

td small {
  display:block;
  margin-top:5px;
  color:#9ca7b1
}

.status {
  border-radius:3px;
  padding:8px 10px;
  display:inline-flex;
  font-size:11px;
  font-weight:700;
  background:#e8f2f6;
  color:#53788f;
  white-space:nowrap
}

.status.contacte,.status.validation {
  background:#f1effb;
  color:#75659a
}

.status.accepte,.status.termine {
  background:#e6f4e9;
  color:#47795b
}

.status.archive {
  background:#f0f1f3;
  color:#868b93
}

.status.a_faire {
  background:#fff0e7;
  color:#a96c3b
}

.row-button {
  border:1px solid #dce6ed;
  border-radius:4px;
  background:white;
  color:var(--navy);
  padding:9px 12px;
  font-size:11px;
  font-weight:700
}

.empty-cell {
  padding:35px 24px;
  text-align:center;
  color:var(--muted)
}

.error-banner {
  background:#ffede8;
  color:#9a3527;
  padding:16px 20px;
  margin-bottom:25px;
  font-size:13px
}

.detail-dialog {
  width:min(560px,calc(100vw - 30px));
  max-height:calc(100vh - 40px);
  overflow:auto;
  border:1px solid var(--line);
  background:#fff;
  padding:30px 35px 35px;
  box-shadow:0 30px 90px rgba(23,38,65,.2)
}

.detail-dialog::backdrop {
  background:rgba(20,37,59,.62)
}

.dialog-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  margin-bottom:25px;
  padding-bottom:20px
}

.dialog-top h2 {
  font:650 27px 'Manrope',sans-serif;
  margin:10px 0 0
}

.close-dialog {
  border:0;
  background:#f4f7f9;
  font-size:28px;
  width:38px;
  height:38px;
  line-height:1
}

.details p {
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin:13px 0;
  font-size:12px
}

.details b {
  color:var(--muted)
}

.details span,.details a {
  text-align:right;
  color:var(--ink);
  overflow-wrap:anywhere
}

.detail-dialog h3 {
  font-size:13px;
  margin:26px 0 12px
}

.message-box {
  white-space:pre-wrap;
  background:#f6f9fb;
  color:#536276;
  padding:17px;
  line-height:1.8;
  font-size:13px;
  max-height:220px;
  overflow:auto
}

@media(max-width:900px) {
  .app {
    flex-direction:column
  }

  .sidebar {
    min-height:0;
    width:100%;
    padding:20px
  }

  .studio-tag {
    margin-bottom:15px
  }

  .nav-heading,.side-bottom {
    display:none
  }

  .side-nav {
    display:flex
  }

  .nav-link {
    width:auto
  }

  .content {
    padding:0 20px 50px
  }

  .topbar {
    margin-bottom:35px;
    min-height:80px
  }

  .whoami {
    display:none
  }

}

@media(max-width:650px) {
  .stat-grid {
    grid-template-columns:1fr
  }

  .title-row,.table-heading {
    align-items:flex-start;
    flex-direction:column
  }

  .stat-card {
    min-height:130px
  }

  .detail-dialog {
    padding:22px
  }

  .crumb span {
    padding:0 4px
  }

  .top-actions {
    gap:5px
  }

}