/* =====================================================
   JEUX MRC MONTCALM — Design System
   Bleu profond #1e3a5f · Rouge brique #c44536 · Neutres doux
   ===================================================== */

:root {
  /* Couleurs primaires */
  --jm-blue-900: #112540;
  --jm-blue-800: #1a2f4d;
  --jm-blue-700: #1e3a5f;   /* primaire */
  --jm-blue-600: #2c4d76;
  --jm-blue-500: #3d6391;
  --jm-blue-200: #b9c8da;
  --jm-blue-100: #dde5ee;
  --jm-blue-50:  #eef2f7;

  /* Accent rouge brique */
  --jm-brick-700: #a4392c;
  --jm-brick-600: #c44536;   /* accent */
  --jm-brick-500: #d56354;
  --jm-brick-100: #f6dcd7;
  --jm-brick-50:  #fbeae6;

  /* Neutres doux (légèrement chauds) */
  --jm-cream:    #faf7f2;
  --jm-paper:    #f4efe7;
  --jm-line:     #e3dccf;
  --jm-line-2:   #ebe4d6;
  --jm-mute:     #8a8270;
  --jm-mute-2:   #a8a190;
  --jm-ink:      #2a2419;
  --jm-ink-2:    #4a4334;
  --jm-white:    #ffffff;

  /* Sémantique */
  --jm-success-700: #2f6b3f;
  --jm-success-600: #3a8050;
  --jm-success-100: #dcecdf;
  --jm-warn-700:    #8a6315;
  --jm-warn-600:    #b48526;
  --jm-warn-100:    #f5e8c7;
  --jm-danger-700: #a4392c;
  --jm-danger-600: #c44536;
  --jm-danger-100: #f6dcd7;

  /* Typographie */
  --jm-font: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --jm-font-display: "Public Sans", -apple-system, system-ui, sans-serif;

  --jm-fz-12: 12px;
  --jm-fz-13: 13px;
  --jm-fz-14: 14px;
  --jm-fz-15: 15px;
  --jm-fz-16: 16px;   /* body */
  --jm-fz-17: 17px;
  --jm-fz-18: 18px;
  --jm-fz-20: 20px;
  --jm-fz-22: 22px;
  --jm-fz-26: 26px;
  --jm-fz-32: 32px;
  --jm-fz-40: 40px;
  --jm-fz-52: 52px;
  --jm-fz-72: 72px;

  /* Espacement (4pt) */
  --jm-s-1: 4px;
  --jm-s-2: 8px;
  --jm-s-3: 12px;
  --jm-s-4: 16px;
  --jm-s-5: 20px;
  --jm-s-6: 24px;
  --jm-s-7: 32px;
  --jm-s-8: 40px;
  --jm-s-9: 56px;
  --jm-s-10: 80px;

  /* Rayons */
  --jm-r-sm: 4px;
  --jm-r-md: 6px;
  --jm-r-lg: 10px;
  --jm-r-xl: 16px;

  /* Ombres */
  --jm-sh-1: 0 1px 2px rgba(30, 58, 95, .06);
  --jm-sh-2: 0 1px 2px rgba(30, 58, 95, .06), 0 6px 18px rgba(30, 58, 95, .08);
  --jm-sh-3: 0 4px 12px rgba(30, 58, 95, .08), 0 18px 40px rgba(30, 58, 95, .12);
  --jm-sh-focus: 0 0 0 3px rgba(196, 69, 54, .25);
}

/* Reset léger */
*, *::before, *::after { box-sizing: border-box; }
.jm body, .jm-root { margin: 0; }
.jm-root {
  font-family: var(--jm-font);
  color: var(--jm-ink);
  font-size: var(--jm-fz-16);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background: var(--jm-cream);
}

.jm-root h1, .jm-root h2, .jm-root h3, .jm-root h4 {
  font-family: var(--jm-font-display);
  color: var(--jm-blue-900);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.15;
}
.jm-root h1 { font-size: var(--jm-fz-40); font-weight: 700; letter-spacing: -0.02em; }
.jm-root h2 { font-size: var(--jm-fz-26); font-weight: 700; }
.jm-root h3 { font-size: var(--jm-fz-20); font-weight: 600; }
.jm-root h4 { font-size: var(--jm-fz-17); font-weight: 600; }
.jm-root p  { margin: 0; }
.jm-root a  { color: var(--jm-blue-700); text-decoration: none; }
.jm-root a:hover { text-decoration: underline; }

/* ─── Boutons ─────────────────────────────────── */
.jm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jm-s-2);
  height: 44px;
  padding: 0 var(--jm-s-6);
  border-radius: var(--jm-r-md);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--jm-fz-15);
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, transform .04s;
  white-space: nowrap;
  user-select: none;
}
.jm-btn:active { transform: translateY(1px); }
.jm-btn:focus-visible { outline: none; box-shadow: var(--jm-sh-focus); }

.jm-btn-primary {
  background: var(--jm-brick-600);
  color: #fff;
  border-color: var(--jm-brick-700);
}
.jm-btn-primary:hover { background: var(--jm-brick-700); }
.jm-btn-primary:disabled,
.jm-btn-primary[aria-disabled="true"] {
  background: var(--jm-blue-200);
  border-color: var(--jm-blue-200);
  color: #fff;
  cursor: not-allowed;
}

.jm-btn-secondary {
  background: var(--jm-white);
  color: var(--jm-blue-700);
  border-color: var(--jm-line);
}
.jm-btn-secondary:hover { border-color: var(--jm-blue-700); background: var(--jm-blue-50); }

.jm-btn-ghost {
  background: transparent;
  color: var(--jm-blue-700);
  border-color: transparent;
}
.jm-btn-ghost:hover { background: var(--jm-blue-50); }

.jm-btn-danger {
  background: var(--jm-white);
  color: var(--jm-brick-700);
  border-color: var(--jm-brick-100);
}
.jm-btn-danger:hover { background: var(--jm-brick-50); border-color: var(--jm-brick-500); }

.jm-btn-sm { height: 34px; padding: 0 var(--jm-s-4); font-size: var(--jm-fz-14); }
.jm-btn-lg { height: 52px; padding: 0 var(--jm-s-7); font-size: var(--jm-fz-17); }
.jm-btn-block { width: 100%; }

/* ─── Champs ─────────────────────────────────── */
.jm-field { display: flex; flex-direction: column; gap: 6px; }
.jm-label {
  font-size: var(--jm-fz-14);
  font-weight: 600;
  color: var(--jm-ink);
  letter-spacing: 0.005em;
}
.jm-help { font-size: var(--jm-fz-13); color: var(--jm-mute); }
.jm-error { font-size: var(--jm-fz-13); color: var(--jm-brick-700); display: flex; align-items: center; gap: 6px; }

.jm-input,
.jm-select,
.jm-textarea {
  height: 44px;
  padding: 0 var(--jm-s-4);
  font-family: inherit;
  font-size: var(--jm-fz-16);
  color: var(--jm-ink);
  background: var(--jm-white);
  border: 1px solid var(--jm-line);
  border-radius: var(--jm-r-md);
  transition: border-color .12s, box-shadow .12s;
  width: 100%;
  outline: none;
}
.jm-textarea { height: auto; min-height: 96px; padding: var(--jm-s-3) var(--jm-s-4); resize: vertical; line-height: 1.45; }
.jm-input:hover, .jm-select:hover, .jm-textarea:hover { border-color: var(--jm-blue-500); }
.jm-input:focus, .jm-select:focus, .jm-textarea:focus { border-color: var(--jm-blue-700); box-shadow: var(--jm-sh-focus); }
.jm-input::placeholder, .jm-textarea::placeholder { color: var(--jm-mute-2); }

.jm-input.is-error, .jm-select.is-error, .jm-textarea.is-error { border-color: var(--jm-brick-600); }
.jm-input.is-success { border-color: var(--jm-success-600); }

.jm-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M3 5l4 4 4-4' fill='none' stroke='%231e3a5f' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.jm-input:disabled, .jm-select:disabled, .jm-textarea:disabled {
  background: var(--jm-paper); color: var(--jm-mute); cursor: not-allowed;
}

.jm-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--jm-s-3);
  cursor: pointer;
  font-size: var(--jm-fz-15);
  line-height: 1.4;
  color: var(--jm-ink);
}
.jm-checkbox input { display: none; }
.jm-checkbox .box {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border: 1.5px solid var(--jm-blue-500);
  border-radius: 4px;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
  transition: background .1s, border-color .1s;
}
.jm-checkbox input:checked + .box { background: var(--jm-blue-700); border-color: var(--jm-blue-700); }
.jm-checkbox input:checked + .box::after {
  content: ""; width: 6px; height: 11px; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(45deg); margin-bottom: 3px;
}

/* Toggle */
.jm-toggle { display: inline-flex; align-items: center; gap: var(--jm-s-3); cursor: pointer; }
.jm-toggle input { display: none; }
.jm-toggle .track {
  width: 40px; height: 22px; border-radius: 11px; background: var(--jm-blue-200); position: relative; transition: background .15s;
}
.jm-toggle .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.jm-toggle input:checked + .track { background: var(--jm-blue-700); }
.jm-toggle input:checked + .track::after { left: 20px; }

/* ─── Badges ─────────────────────────────────── */
.jm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--jm-fz-13);
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--jm-blue-50);
  color: var(--jm-blue-800);
  border: 1px solid var(--jm-blue-100);
  white-space: nowrap;
}
.jm-badge.is-success { background: var(--jm-success-100); color: var(--jm-success-700); border-color: rgba(58,128,80,.25); }
.jm-badge.is-warn { background: var(--jm-warn-100); color: var(--jm-warn-700); border-color: rgba(180,133,38,.25); }
.jm-badge.is-danger { background: var(--jm-danger-100); color: var(--jm-danger-700); border-color: rgba(196,69,54,.25); }
.jm-badge.is-mute { background: var(--jm-paper); color: var(--jm-mute); border-color: var(--jm-line); }
.jm-badge.is-solid { background: var(--jm-blue-700); color: #fff; border-color: var(--jm-blue-700); }
.jm-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }

/* ─── Cartes ─────────────────────────────────── */
.jm-card {
  background: var(--jm-white);
  border: 1px solid var(--jm-line);
  border-radius: var(--jm-r-lg);
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.jm-card.is-hover:hover { border-color: var(--jm-blue-500); box-shadow: var(--jm-sh-2); }
.jm-card-body { padding: var(--jm-s-6); }
.jm-card-strip { height: 6px; background: var(--jm-blue-700); }

/* ─── Tableaux ─────────────────────────────────── */
.jm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--jm-fz-15);
}
.jm-table th, .jm-table td {
  padding: var(--jm-s-3) var(--jm-s-4);
  text-align: left;
  border-bottom: 1px solid var(--jm-line);
  vertical-align: middle;
}
.jm-table th {
  font-weight: 600;
  font-size: var(--jm-fz-13);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--jm-mute);
  background: var(--jm-paper);
  border-bottom: 1px solid var(--jm-line);
}
.jm-table tbody tr:hover { background: var(--jm-blue-50); }
.jm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.jm-table .pos { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--jm-blue-900); width: 50px; }

/* ─── Modal ─────────────────────────────────── */
.jm-modal-bg {
  position: absolute; inset: 0;
  background: rgba(17, 37, 64, .45);
  display: flex; align-items: center; justify-content: center;
  padding: var(--jm-s-6);
  z-index: 50;
}
.jm-modal {
  background: var(--jm-white);
  border-radius: var(--jm-r-lg);
  box-shadow: var(--jm-sh-3);
  width: 100%;
  max-width: 480px;
  overflow: hidden;
}
.jm-modal-hd { padding: var(--jm-s-6); border-bottom: 1px solid var(--jm-line); display: flex; justify-content: space-between; align-items: center; gap: var(--jm-s-4); }
.jm-modal-hd h3 { font-size: var(--jm-fz-20); }
.jm-modal-bd { padding: var(--jm-s-6); display: flex; flex-direction: column; gap: var(--jm-s-4); }
.jm-modal-ft { padding: var(--jm-s-4) var(--jm-s-6); border-top: 1px solid var(--jm-line); display: flex; justify-content: flex-end; gap: var(--jm-s-3); background: var(--jm-cream); }

/* ─── Layout ─────────────────────────────────── */
.jm-row { display: flex; gap: var(--jm-s-4); }
.jm-col { display: flex; flex-direction: column; gap: var(--jm-s-4); }
.jm-stack-1 { display: flex; flex-direction: column; gap: var(--jm-s-1); }
.jm-stack-2 { display: flex; flex-direction: column; gap: var(--jm-s-2); }
.jm-stack-3 { display: flex; flex-direction: column; gap: var(--jm-s-3); }
.jm-stack-4 { display: flex; flex-direction: column; gap: var(--jm-s-4); }
.jm-stack-5 { display: flex; flex-direction: column; gap: var(--jm-s-5); }
.jm-stack-6 { display: flex; flex-direction: column; gap: var(--jm-s-6); }
.jm-stack-7 { display: flex; flex-direction: column; gap: var(--jm-s-7); }
.jm-stack-8 { display: flex; flex-direction: column; gap: var(--jm-s-8); }

/* ─── Wordmark ─────────────────────────────────── */
.jm-wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--jm-blue-900); }
.jm-wordmark .crest {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jm-blue-700); border-radius: 6px;
  position: relative; flex: 0 0 auto;
}
.jm-wordmark .crest::after {
  content: ""; position: absolute; inset: 6px;
  border: 1.5px solid var(--jm-cream);
  border-radius: 4px;
  background:
    linear-gradient(135deg, transparent 47%, var(--jm-cream) 47%, var(--jm-cream) 53%, transparent 53%),
    linear-gradient(45deg, transparent 47%, var(--jm-cream) 47%, var(--jm-cream) 53%, transparent 53%),
    var(--jm-brick-600);
}
.jm-wordmark .wm-text {
  display: flex; flex-direction: column; line-height: 1; gap: 2px; min-width: 0;
}
.jm-wordmark .wm-1 { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.jm-wordmark .wm-2 { font-size: 11px; color: var(--jm-mute); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.jm-wordmark.lg .crest { width: 44px; height: 44px; border-radius: 8px; }
.jm-wordmark.lg .wm-1 { font-size: 18px; }
.jm-wordmark.lg .wm-2 { font-size: 12px; }
.jm-wordmark.inv { color: #fff; }
.jm-wordmark.inv .crest { background: rgba(255,255,255,.12); }
.jm-wordmark.inv .wm-2 { color: rgba(255,255,255,.7); }

/* ─── Sidebar admin ─────────────────────────────────── */
.jm-sidebar {
  background: var(--jm-blue-900);
  color: rgba(255,255,255,.85);
  width: 240px;
  padding: var(--jm-s-5) var(--jm-s-3);
  display: flex; flex-direction: column; gap: var(--jm-s-1);
  flex: 0 0 auto;
}
.jm-sidebar .nav-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.5); padding: var(--jm-s-3) var(--jm-s-3) var(--jm-s-1); font-weight: 600;
}
.jm-sidebar .nav-item {
  display: flex; align-items: center; gap: var(--jm-s-3);
  padding: 9px var(--jm-s-3); border-radius: var(--jm-r-md);
  color: rgba(255,255,255,.78);
  font-size: var(--jm-fz-14); font-weight: 500;
  cursor: pointer;
  transition: background .1s, color .1s;
}
.jm-sidebar .nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.jm-sidebar .nav-item.active { background: var(--jm-blue-700); color: #fff; }
.jm-sidebar .nav-item .ic { width: 18px; height: 18px; flex: 0 0 auto; opacity: .85; }

/* ─── Topbar admin ─────────────────────────────────── */
.jm-topbar {
  height: 64px;
  background: var(--jm-white);
  border-bottom: 1px solid var(--jm-line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--jm-s-7);
  flex: 0 0 auto;
}

/* ─── Page chrome (public) ─────────────────────────────────── */
.jm-public-header {
  background: var(--jm-cream);
  border-bottom: 1px solid var(--jm-line-2);
}
.jm-public-header .inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--jm-s-5) var(--jm-s-7);
  display: flex; align-items: center; justify-content: space-between; gap: var(--jm-s-5);
}
.jm-public-header nav { display: flex; gap: var(--jm-s-6); }
.jm-public-header nav a {
  color: var(--jm-ink-2); font-weight: 500; font-size: var(--jm-fz-15);
}
.jm-public-header nav a.active { color: var(--jm-blue-900); font-weight: 600; }

.jm-footer {
  background: var(--jm-blue-900);
  color: rgba(255,255,255,.75);
  padding: var(--jm-s-9) var(--jm-s-7) var(--jm-s-7);
}
.jm-footer .inner { max-width: 1200px; margin: 0 auto; }
.jm-footer h4 { color: #fff; font-size: var(--jm-fz-15); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--jm-s-3); }
.jm-footer a { color: rgba(255,255,255,.85); }

/* ─── Hero motif (motif géométrique civique) ─────────────────────────────────── */
.jm-hero {
  position: relative;
  background: var(--jm-blue-900);
  color: #fff;
  overflow: hidden;
}
.jm-hero .bg-motif {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 8% 20%, rgba(196,69,54,.18) 0, transparent 28%),
    radial-gradient(circle at 92% 80%, rgba(255,255,255,.05) 0, transparent 30%);
  pointer-events: none;
}

/* SVG placeholder strié */
.jm-placeholder {
  background:
    repeating-linear-gradient(135deg,
      var(--jm-paper) 0, var(--jm-paper) 8px,
      var(--jm-cream) 8px, var(--jm-cream) 16px);
  border: 1px solid var(--jm-line);
  border-radius: var(--jm-r-lg);
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--jm-fz-13);
  color: var(--jm-mute);
  text-align: center; padding: var(--jm-s-4);
}

/* ─── Mobile chrome (status bar etc.) ─────────────────────────────────── */
.jm-mobile-status {
  height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px;
  font-size: 14px; font-weight: 600; color: var(--jm-ink);
  background: var(--jm-cream);
}
.jm-mobile-status.dark { background: var(--jm-blue-900); color: #fff; }

/* Utilities */
.jm-mute { color: var(--jm-mute); }
.jm-ink-2 { color: var(--jm-ink-2); }
.jm-tabular { font-variant-numeric: tabular-nums; }
.jm-divider { height: 1px; background: var(--jm-line); margin: var(--jm-s-5) 0; }
.jm-pill {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 12px;
  background: var(--jm-blue-50); color: var(--jm-blue-800);
  border-radius: 999px; font-size: 13px; font-weight: 600;
}

/* Tabs */
.jm-tabs { display: flex; gap: var(--jm-s-1); border-bottom: 1px solid var(--jm-line); }
.jm-tab {
  padding: 10px var(--jm-s-4);
  font-size: var(--jm-fz-15); font-weight: 600;
  color: var(--jm-mute); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.jm-tab:hover { color: var(--jm-ink); }
.jm-tab.active { color: var(--jm-blue-700); border-bottom-color: var(--jm-brick-600); }

/* KPI */
.jm-kpi {
  background: var(--jm-white);
  border: 1px solid var(--jm-line);
  border-radius: var(--jm-r-lg);
  padding: var(--jm-s-5) var(--jm-s-6);
  display: flex; flex-direction: column; gap: 6px;
}
.jm-kpi .v { font-size: var(--jm-fz-32); font-weight: 700; color: var(--jm-blue-900); letter-spacing: -.02em; line-height: 1; }
.jm-kpi .l { font-size: var(--jm-fz-13); color: var(--jm-mute); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-kpi .delta { font-size: var(--jm-fz-13); color: var(--jm-success-700); font-weight: 600; }

/* Banner */
.jm-banner {
  border-radius: var(--jm-r-md);
  padding: var(--jm-s-3) var(--jm-s-4);
  font-size: var(--jm-fz-14);
  display: flex; align-items: center; gap: var(--jm-s-3);
  border: 1px solid;
}
.jm-banner.is-warn { background: var(--jm-warn-100); color: var(--jm-warn-700); border-color: rgba(180,133,38,.3); }
.jm-banner.is-success { background: var(--jm-success-100); color: var(--jm-success-700); border-color: rgba(58,128,80,.3); }
.jm-banner.is-info { background: var(--jm-blue-50); color: var(--jm-blue-800); border-color: var(--jm-blue-100); }

/* Frames (pour design canvas) */
.jm-frame-desktop {
  width: 1280px; height: 800px;
  background: var(--jm-cream);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.jm-frame-mobile {
  width: 375px; height: 800px;
  background: var(--jm-cream);
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* Hide scrollbars inside frames so canvas previews stay clean */
.jm-frame-desktop ::-webkit-scrollbar, .jm-frame-mobile ::-webkit-scrollbar { display: none; }
.jm-frame-desktop, .jm-frame-mobile { scrollbar-width: none; }

/* Geometric civic motif backgrounds */
.jm-geo-stripe {
  background:
    linear-gradient(180deg, var(--jm-blue-900) 0, var(--jm-blue-800) 100%);
}