/* ============================================================
   Mollitia Consulting — Expert Roster
   Design system "Resilience" — institutional, evidence-driven
   Anchored on the Mollitia brand (navy / teal / sand)
   Signature motif: topographic contour lines (adaptation maps)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* --- Brand palette --- */
  --abyss:      #0E2A3B;   /* deep ocean — headers, ink on light */
  --navy:       #244666;   /* Mollitia brand navy */
  --teal:       #43B2C1;   /* Mollitia brand teal */
  --teal-deep:  #1E7F8C;   /* accessible teal for text/links on light */
  --sand:       #E4C7A2;   /* logo sand/gold — warm accent */
  --sand-deep:  #B98A50;   /* accessible sand for text on light */

  /* --- Neutrals --- */
  --paper:      #F5F8F9;   /* app background */
  --surface:    #FFFFFF;
  --surface-2:  #FAFCFD;
  --line:       #E2E9ED;
  --line-soft:  #EEF3F5;
  --ink:        #17323f;   /* primary text */
  --muted:      #5C6E78;   /* secondary text */
  --faint:      #8598A2;   /* tertiary text */

  /* --- Semantic --- */
  --ok:      #1E9E6A;  --ok-bg:   #E7F6EF;
  --warn:    #C98A1E;  --warn-bg: #FBF2E1;
  --stop:    #D0483C;  --stop-bg: #FBEAE8;
  --info:    var(--teal-deep); --info-bg: #E4F3F5;

  /* --- Type --- */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* --- Radius / shadow / motion --- */
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-pill: 999px;
  --sh-sm: 0 1px 2px rgba(14,42,59,.06), 0 1px 3px rgba(14,42,59,.05);
  --sh:    0 4px 14px rgba(14,42,59,.07), 0 1px 3px rgba(14,42,59,.05);
  --sh-lg: 0 18px 48px rgba(14,42,59,.14);
  --sh-teal: 0 10px 26px rgba(30,127,140,.28);
  --ease: cubic-bezier(.2,.7,.3,1);

  --nav-h: 62px;
  --container: 1360px;
}

/* Contour-line signature motif (elevation map), used as a background layer */
:root {
  --contours:
    radial-gradient(120% 90% at 12% -10%, rgba(67,178,193,.16), transparent 46%),
    radial-gradient(120% 90% at 108% 120%, rgba(228,199,162,.14), transparent 44%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='420' viewBox='0 0 560 420'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='1.1'%3E%3Cpath d='M-40 120 C 90 60 190 190 300 130 C 410 70 500 170 620 110'/%3E%3Cpath d='M-40 160 C 90 100 190 230 300 170 C 410 110 500 210 620 150'/%3E%3Cpath d='M-40 200 C 90 140 190 270 300 210 C 410 150 500 250 620 190'/%3E%3Cpath d='M-40 240 C 90 180 190 310 300 250 C 410 190 500 290 620 230'/%3E%3Cpath d='M-40 280 C 90 220 190 350 300 290 C 410 230 500 330 620 270'/%3E%3Cpath d='M-40 320 C 90 260 190 390 300 330 C 410 270 500 370 620 310'/%3E%3C/g%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { color: var(--abyss); font-weight: 600; line-height: 1.2; }

a { color: var(--teal-deep); text-decoration: none; }
a:hover { color: var(--navy); }

::selection { background: rgba(67,178,193,.28); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal-deep);
}

/* ============================================================
   TOP BAR  (brand row)
   ============================================================ */
.header, .app-header {
  position: relative;
  background: linear-gradient(120deg, var(--abyss) 0%, var(--navy) 62%, #21506a 100%);
  color: #fff;
  padding: 0 clamp(16px, 3vw, 30px);
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: none;
  overflow: hidden;
}
.header::after, .app-header::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--contours);
  background-size: cover, cover, 560px 420px;
  pointer-events: none; opacity: .9;
}
.header > *, .app-header > * { position: relative; z-index: 1; }

.logo { display: flex; align-items: center; gap: 12px; }
.logo-img, .logo-icon {
  width: 38px; height: 38px; object-fit: contain;
  background: #fff; border-radius: 9px; padding: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.logo h1 {
  color: #fff; font-family: var(--sans);
  font-size: 17px; font-weight: 600; letter-spacing: .01em;
}
.logo .logo-subtitle, .logo-subtitle {
  display: block; font-family: var(--mono);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--teal); opacity: .95; margin-top: 1px;
}

.user-menu { display: flex; align-items: center; gap: 14px; }
.user-menu .user-name, .user-badge {
  font-size: 13px; color: rgba(255,255,255,.86);
  display: flex; align-items: center; gap: 8px;
}
.user-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(67,178,193,.25); }

.btn-logout, .btn-back {
  background: rgba(255,255,255,.10);
  color: #fff; border: 1px solid rgba(255,255,255,.22);
  padding: 8px 14px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; font-family: var(--sans);
  cursor: pointer; transition: all .2s var(--ease);
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
}
.btn-logout:hover, .btn-back:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* ============================================================
   NAV BAR (horizontal command bar)
   ============================================================ */
.nav-bar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 0 clamp(12px, 3vw, 30px);
  display: flex; align-items: center; gap: 2px;
  overflow-x: auto; scrollbar-width: none;
}
.nav-bar::-webkit-scrollbar { display: none; }
.nav-item {
  position: relative; white-space: nowrap;
  color: var(--muted); text-decoration: none;
  font-size: 14px; font-weight: 500;
  padding: 15px 14px 13px; border-bottom: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.nav-item:hover { color: var(--navy); background: transparent; border-bottom-color: var(--line); }
.nav-item.active { color: var(--navy); border-bottom-color: var(--teal); font-weight: 600; }
.nav-sep { width: 1px; height: 18px; background: var(--line); margin: 0 6px; flex: none; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container, .page {
  max-width: var(--container);
  margin: clamp(20px, 3.5vw, 34px) auto;
  padding: 0 clamp(16px, 3vw, 30px);
}
.page-head { margin-bottom: 24px; }
.page-head h1, .page-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -.01em; color: var(--abyss);
}
.page-head p, .page-sub { color: var(--muted); font-size: 15px; margin-top: 4px; }

.grid { display: grid; gap: 18px; }
.stats-grid, .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 18px; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: clamp(20px, 2.4vw, 28px);
}
.card-title { font-family: var(--display); font-weight: 500; font-size: 20px; color: var(--abyss); }

/* Stat tile — data instrument look */
.stat-card {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-sm); padding: 20px 22px; overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.stat-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--teal);
}
.stat-card.primary::before { background: var(--navy); }
.stat-card.success::before { background: var(--ok); }
.stat-card.accent::before  { background: var(--sand-deep); }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--sh); }
.stat-card .stat-value {
  font-family: var(--mono); font-weight: 600;
  font-size: 34px; letter-spacing: -.02em; color: var(--abyss); line-height: 1;
}
.stat-card .stat-label {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin-top: 8px;
}
/* Lignes clé-valeur (ex. carte Statistiques de la fiche expert) — PAS le gros chiffre */
.stat-item { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.stat-item:last-child { border-bottom: none; }
.stat-item .stat-label {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; color: var(--faint);
  margin: 0; white-space: nowrap; flex: none;
}
.stat-item .stat-value {
  font-family: var(--sans); font-size: 14px; font-weight: 600; line-height: 1.35;
  color: var(--navy); letter-spacing: normal; text-align: right; min-width: 0;
  overflow-wrap: anywhere;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border: 1px solid transparent; border-radius: var(--r-sm);
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: all .2s var(--ease);
  line-height: 1;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--abyss); color: #fff; transform: translateY(-1px); box-shadow: var(--sh); }
.btn-teal { background: var(--teal-deep); color: #fff; }
.btn-teal:hover { background: #186672; color: #fff; transform: translateY(-1px); box-shadow: var(--sh-teal); }
.btn-secondary, .btn-ghost {
  background: var(--surface); color: var(--navy); border-color: var(--line);
}
.btn-secondary:hover, .btn-ghost:hover { border-color: var(--teal); color: var(--teal-deep); background: var(--surface-2); }
.btn-sand { background: var(--sand); color: var(--abyss); }
.btn-sand:hover { background: #d8b585; color: var(--abyss); }
.btn-danger { background: var(--stop); color: #fff; }
.btn-danger:hover { background: #b33a30; color: #fff; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ============================================================
   BADGES / CHIPS
   ============================================================ */
.badge, .status-badge, .tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .04em; padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid transparent; line-height: 1;
}
.badge .dot, .status-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-ok,   .badge-available,   .status-available   { color: var(--ok);   background: var(--ok-bg);   border-color: rgba(30,158,106,.18); }
.badge-warn, .badge-prospect,    .status-prospect    { color: var(--warn); background: var(--warn-bg); border-color: rgba(201,138,30,.18); }
.badge-stop, .badge-unavailable, .status-unavailable { color: var(--stop); background: var(--stop-bg); border-color: rgba(208,72,60,.18); }
.badge-info, .status-active                          { color: var(--info); background: var(--info-bg); border-color: rgba(30,127,140,.18); }
.badge-muted, .status-inactive, .status-archived     { color: var(--muted); background: #EEF2F4; border-color: var(--line); }

/* Skill / sector chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--navy); font-weight: 500;
}
.chip-teal { background: var(--info-bg); border-color: rgba(30,127,140,.2); color: var(--teal-deep); }
.chip-sand { background: #FBF4E9; border-color: rgba(185,138,80,.25); color: var(--sand-deep); }

/* Quality score meter */
.score { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 600; }
.score-bar { width: 64px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.score-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--teal-deep)); }

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
table, .table { width: 100%; border-collapse: collapse; }
.table thead th, table thead th {
  text-align: left; font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); padding: 14px 18px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table tbody td, table tbody td {
  padding: 15px 18px; border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px; color: var(--ink); vertical-align: middle;
}
.table tbody tr, table tbody tr { transition: background .15s var(--ease); }
.table tbody tr:hover, table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: none; }

/* Person cell */
.person { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 14px;
  background: linear-gradient(135deg, var(--navy), var(--teal-deep)); font-family: var(--sans);
}
.person .name { font-weight: 600; color: var(--abyss); }
.person .sub { font-size: 12.5px; color: var(--muted); }

/* ============================================================
   FORMS
   ============================================================ */
label { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; color: var(--navy); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="url"], input[type="tel"], input[type="date"], input[type="search"],
select, textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--surface);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(67,178,193,.14);
}
.form-group { margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.help { font-size: 12.5px; color: var(--faint); margin-top: 6px; }
.field-required::after { content: " *"; color: var(--stop); }

/* ============================================================
   ALERTS
   ============================================================ */
.alert { padding: 13px 16px; border-radius: var(--r-sm); font-size: 14px; border: 1px solid transparent; display: flex; gap: 10px; align-items: flex-start; }
.alert-success { color: #12603f; background: var(--ok-bg); border-color: rgba(30,158,106,.25); }
.alert-error,.alert-danger { color: #8f2b22; background: var(--stop-bg); border-color: rgba(208,72,60,.25); }
.alert-info { color: #12545e; background: var(--info-bg); border-color: rgba(30,127,140,.22); }
.alert-warn { color: #7c5410; background: var(--warn-bg); border-color: rgba(201,138,30,.25); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty { text-align: center; padding: 56px 24px; color: var(--muted); }
.empty .glyph { font-size: 34px; opacity: .5; margin-bottom: 10px; }
.empty h3 { font-family: var(--display); font-weight: 500; color: var(--navy); margin-bottom: 6px; }

/* ============================================================
   MISC
   ============================================================ */
.divider { height: 1px; background: var(--line); border: 0; margin: 22px 0; }
.spinner { display: inline-block; width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: mc-spin .7s linear infinite; }
.spinner-dark { border-color: rgba(36,70,102,.25); border-top-color: var(--navy); }
@keyframes mc-spin { to { transform: rotate(360deg); } }

.text-center { text-align: center; } .text-mono { font-family: var(--mono); }
.mb-10{margin-bottom:10px}.mb-20{margin-bottom:20px}.mb-30{margin-bottom:30px}.mt-20{margin-top:20px}.mt-30{margin-top:30px}

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

@media (max-width: 720px) {
  .form-row { grid-template-columns: 1fr; }
  .logo h1 { font-size: 15px; }
  .user-menu .user-name { display: none; }
}

/* Print (used by the one-pager export) */
@media print {
  .nav-bar, .header, .app-header, .no-print { display: none !important; }
  body { background: #fff; }
}

/* ============================================================
   APP SHELL  (sidebar + topbar) — interface pro
   ============================================================ */
.app { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh;
  background: linear-gradient(180deg, var(--abyss) 0%, var(--navy) 78%, #21506a 100%);
  color: #fff; display: flex; flex-direction: column; overflow: hidden;
}
.sidebar::after { content:""; position:absolute; inset:0; background-image: var(--contours); background-size: cover,cover,560px 420px; opacity:.6; pointer-events:none; }
.sidebar > * { position: relative; z-index: 1; }
.sidebar .brand { display:flex; align-items:center; gap:11px; padding: 20px 20px 18px; }
.sidebar .brand img { width:38px; height:38px; background:#fff; border-radius:9px; padding:5px; }
.sidebar .brand .n { font-weight:600; font-size:15px; line-height:1.1; }
.sidebar .brand .s { font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); }
.side-nav { flex:1; overflow-y:auto; padding: 6px 12px; scrollbar-width:thin; }
.side-label { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.4); padding: 16px 12px 7px; }
.side-item {
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px;
  color:rgba(255,255,255,.75); text-decoration:none; font-size:14px; font-weight:500;
  transition: background .15s var(--ease), color .15s var(--ease); position:relative; margin-bottom:2px;
}
.side-item .ic { width:18px; text-align:center; opacity:.9; font-size:15px; }
.side-item:hover { background:rgba(255,255,255,.08); color:#fff; }
.side-item.active { background:rgba(67,178,193,.16); color:#fff; }
.side-item.active::before { content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--teal); }
.side-item .badge-count { margin-left:auto; font-family:var(--mono); font-size:11px; background:var(--sand); color:var(--abyss); padding:1px 7px; border-radius:999px; font-weight:600; }
.side-foot { padding:14px; border-top:1px solid rgba(255,255,255,.1); display:flex; align-items:center; gap:10px; }
.side-foot .av { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--teal-deep)); display:grid; place-items:center; font-weight:600; font-size:13px; flex:none; }
.side-foot .who { min-width:0; flex:1; }
.side-foot .who .nm { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-foot .who .rl { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); }
.side-foot .out { background:rgba(255,255,255,.08); border:none; color:rgba(255,255,255,.8); width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:14px; transition:all .15s var(--ease); }
.side-foot .out:hover { background:#fff; color:var(--navy); }

.main { display:flex; flex-direction:column; min-width:0; background:var(--paper); }
.topbar {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px;
  padding: 14px clamp(18px,3vw,34px); background:rgba(245,248,249,.86);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line);
}
.topbar .titl { flex:1; min-width:0; }
.topbar .titl .eyebrow { margin-bottom:2px; }
.topbar .titl h1 { font-family:var(--display); font-weight:500; font-size:clamp(20px,2.4vw,26px); letter-spacing:-.01em; color:var(--abyss); }
.topbar .search { position:relative; }
.topbar .search input { width:220px; padding:9px 14px 9px 34px; font-size:13.5px; border-radius:var(--r-pill); background:var(--surface); }
.topbar .search .mag { position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.5; font-size:13px; }
.topbar .menu-toggle { display:none; background:var(--surface); border:1px solid var(--line); width:38px; height:38px; border-radius:9px; font-size:16px; cursor:pointer; }
.content { padding: clamp(20px,3vw,32px) clamp(18px,3vw,34px); max-width:1280px; width:100%; min-width:0; }

.action-card {
  display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:18px; text-decoration:none; transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.action-card:hover { transform:translateY(-3px); box-shadow:var(--sh); border-color:var(--teal); }
.action-icon { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-size:20px; background:var(--info-bg); margin-bottom:12px; }
.action-title { font-weight:600; color:var(--abyss); font-size:15px; margin-bottom:4px; }
.action-desc { font-size:12.5px; color:var(--muted); line-height:1.5; }
.quick-actions { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }

.section-title { font-family:var(--display); font-weight:500; font-size:19px; color:var(--abyss); margin:6px 0 14px; }

@media (max-width: 900px) {
  .app { grid-template-columns:1fr; }
  .sidebar { position:fixed; left:0; top:0; width:264px; z-index:60; transform:translateX(-100%); transition:transform .25s var(--ease); box-shadow:var(--sh-lg); }
  .sidebar.open { transform:none; }
  .topbar .menu-toggle { display:block; }
  .topbar .search input { width:150px; }
  .sidebar-scrim { position:fixed; inset:0; background:rgba(14,42,59,.4); z-index:55; opacity:0; pointer-events:none; transition:opacity .25s; }
  .sidebar-scrim.show { opacity:1; pointer-events:auto; }
}

/* App-shell: neutralise le wrapper hérité imbriqué dans .content */
.content > .container, .content > .page, .content > main.container { max-width: 100%; margin: 0; padding: 0; }
.content .welcome { margin-bottom: 22px; }