/* =============================================================================
   Diapason — feuille de style unique, sans dépendance ni étape de compilation.

   Panneau sombre flottant à gauche, contenu dans un grand cadre blanc arrondi,
   accent violet. Les couleurs, les rayons et les ombres sont tous en variables
   en tête de fichier : c'est là qu'on change l'allure, pas plus bas.
   ========================================================================== */

:root {
  color-scheme: light;

  --bg: #f4f4f8;
  --surface: #ffffff;
  --surface-2: #f7f8fc;
  --sidebar-bg: #191a2c;
  --sidebar-ink: #b6bad2;        /* 8,7:1 sur le panneau sombre */
  --sidebar-ink-dim: #8b90ad;    /* 5,3:1 — libellés de groupe */
  --sidebar-ink-strong: #ffffff;

  --ink: #15182a;
  --ink-soft: #595f78;
  --ink-faint: #767c94;
  --steel: #e6e8f0;
  --steel-soft: #eff0f6;

  --accent: #6d5efc;
  --accent-ink: #5848e8;
  --accent-soft: #eeecff;
  --accent-line: #d6d0ff;
  --on-accent: #ffffff;

  --settled: #117a53;  --settled-soft: #e6f6ef;  --settled-line: #b7e3d0;
  --late:    #be3a35;  --late-soft:    #fdecea;  --late-line:    #f6c9c5;
  --indigo:  #4a52a8;  --indigo-soft:  #eceefb;
  --teal:    #0f7490;  --teal-soft:    #e6f5f9;
  --brass:   #9a6a16;  --brass-soft:   #fdf3e2;  --brass-line:   #f3dcb2;

  /* Alias conservés pour les styles en ligne des gabarits. */
  --line: var(--steel-soft);
  --line-strong: var(--steel);
  --brand: var(--accent);
  --brand-dark: var(--accent-ink);
  --brand-soft: var(--accent-soft);
  --green: var(--settled);      --green-soft: var(--settled-soft);
  --amber: var(--brass);        --amber-soft: var(--brass-soft);
  --red: var(--late);           --red-soft: var(--late-soft);
  --violet: var(--indigo);      --violet-soft: var(--indigo-soft);
  --cyan: var(--teal);          --cyan-soft: var(--teal-soft);
  --blue: var(--indigo);        --blue-soft: var(--indigo-soft);
  --slate: var(--ink-soft);     --slate-soft: var(--surface-2);

  /* Arrondis généreux, gradués selon la taille de l'objet. */
  --r-panel: 20px;
  --r-card: 16px;
  --r-control: 12px;
  --r-round: 999px;

  --shadow-sm: 0 1px 2px rgba(17, 20, 45, .05);
  --shadow: 0 1px 2px rgba(17, 20, 45, .04), 0 10px 28px -14px rgba(17, 20, 45, .18);
  --shadow-lg: 0 18px 50px -18px rgba(17, 20, 45, .3);

  --sidebar: 250px;
  --gutter: 1.75rem;
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-control); }

h1, h2, h3, h4 { margin: 0 0 .35rem; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.0625rem; }
h3 { font-size: .9375rem; }
p { margin: 0 0 .75rem; }
p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ Layout */

.shell { display: flex; min-height: 100vh; gap: 12px; padding: 12px; background: var(--bg); }

.sidebar {
  width: var(--sidebar); flex: 0 0 var(--sidebar);
  background: var(--sidebar-bg);
  padding: 1.1rem .75rem 1rem;
  display: flex; flex-direction: column; gap: 1rem;
  position: sticky; top: 12px; height: calc(100vh - 24px); overflow-y: auto;
  border: 0; border-radius: var(--r-panel);
  background: linear-gradient(170deg, #22233c 0%, #15162a 60%);
}

.brand { display: flex; align-items: center; gap: .6rem; padding: .25rem .5rem .1rem; }
.brand-mark {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--accent); color: var(--on-accent);
}
.brand-mark svg { display: block; }
.brand-name { color: var(--sidebar-ink-strong); font-weight: 800; font-size: 1.0625rem; letter-spacing: -.03em; }

/* Sélecteur d'espace */
.switcher { position: relative; }
.switcher summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .65rem; border-radius: var(--r-card);
  background: rgba(255, 255, 255, .07);
  border: 1px solid transparent;
}
.switcher summary::-webkit-details-marker { display: none; }
.switcher summary:hover { background: rgba(255, 255, 255, .12); }
.switcher-mark {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 30px;
  display: grid; place-items: center;
  color: #fff; font-size: .72rem; font-weight: 700;
}
.switcher-text { min-width: 0; flex: 1; }
.switcher-name {
  display: block; color: var(--sidebar-ink-strong); font-size: .9375rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.015em;
}
.switcher-role { display: block; color: var(--sidebar-ink-dim); font-size: .78rem; }
.switcher-caret { color: var(--sidebar-ink-dim); font-size: .7rem; }

.switcher-menu {
  position: absolute; left: 0; right: 0; z-index: 40;
  margin-top: .4rem; padding: .35rem;
  background: #22233c; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-card); box-shadow: var(--shadow-lg);
}
.switcher-menu a {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .55rem; border-radius: 9px;
  color: var(--sidebar-ink); font-size: .9375rem; text-decoration: none;
}
.switcher-menu a:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.switcher-menu a.current { color: #fff; font-weight: 700; }
.switcher-menu .check { margin-left: auto; color: #a99bff; }
.switcher-sep { height: 1px; background: rgba(255, 255, 255, .12); margin: .3rem 0; }

.space-tag { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--ink-soft); }

/* ------------------------------------------------------------- Navigation */

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label {
  font-size: .8125rem; color: var(--sidebar-ink-dim); font-weight: 600;
  padding: .9rem .65rem .3rem;
}
.nav a {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .65rem; border-radius: var(--r-control);
  color: var(--sidebar-ink); font-size: .9375rem; font-weight: 500; text-decoration: none;
}
.nav a:hover { background: rgba(255, 255, 255, .07); color: var(--sidebar-ink-strong); text-decoration: none; }
.nav a.active { background: var(--accent); color: #fff; font-weight: 700; }

.sidebar-foot { margin-top: auto; padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.sidebar-foot > a { color: var(--sidebar-ink); border-radius: var(--r-control); }
.me { display: flex; align-items: center; gap: .6rem; padding: .4rem .5rem; border-radius: var(--r-control); }
.me:hover { background: rgba(255, 255, 255, .07); }
.me-name { color: var(--sidebar-ink-strong); font-size: .9rem; font-weight: 600; }
.me-role { color: var(--sidebar-ink-dim); font-size: .78rem; }

/* Pas d'`overflow: hidden` ici : il casserait tout positionnement collant
   à l'intérieur. Les coins sont arrondis sur les enfants de bord. */
.main {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-panel);
}

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--steel-soft);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  padding: 1.15rem var(--gutter);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.topbar h1 { margin: 0; }
.topbar .spacer { flex: 1; }

.content { padding: var(--gutter); max-width: 1400px; width: 100%; }

/* ------------------------------------------------------------------- Cards */

.card {
  background: var(--surface);
  border: 1px solid var(--steel-soft);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow);
}
.card + .card { margin-top: 1.1rem; }
.grid > .card + .card { margin-top: 0; }
.card-head {
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--steel-soft);
  display: flex; align-items: center; gap: .75rem;
}
.card-head h2, .card-head h3 { margin: 0; }
.card-head .spacer { flex: 1; }
.card-body { padding: 1.25rem; }
.card-body.tight { padding: .7rem 1.25rem; }
.card.waiting { box-shadow: var(--shadow), inset 3px 0 0 var(--accent); }

.grid { display: grid; gap: 1.1rem; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.side { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }

/* -------------------------------------------------------------------- Stats */

.stat { padding: 1.15rem 1.25rem 1.25rem; }
.stat-label { font-size: .875rem; color: var(--ink-faint); font-weight: 600; }
.stat-value { font-size: 1.875rem; font-weight: 800; letter-spacing: -.035em; margin-top: .25rem; line-height: 1.1; }
.stat-hint { font-size: .85rem; color: var(--ink-faint); margin-top: .25rem; }

/* ------------------------------------------------------------------ Tables */

table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
thead th {
  text-align: left; font-weight: 600; font-size: .85rem; color: var(--ink-faint);
  padding: .65rem 1.25rem; border-bottom: 1px solid var(--steel-soft); white-space: nowrap;
}
tbody td { padding: .8rem 1.25rem; border-bottom: 1px solid var(--steel-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; white-space: nowrap; }
tfoot td { padding: .8rem 1.25rem; border-top: 1px solid var(--steel); font-weight: 700; }
.table-wrap { overflow-x: auto; }

/* ------------------------------------------------------------------ Badges */

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem; border-radius: var(--r-round);
  font-size: .8125rem; font-weight: 600; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-soft);
}
.badge.green  { background: var(--settled-soft); color: var(--settled); }
.badge.amber  { background: var(--brass-soft);   color: var(--brass); }
.badge.red    { background: var(--late-soft);    color: var(--late); }
.badge.blue,
.badge.violet { background: var(--indigo-soft);  color: var(--indigo); }
.badge.cyan   { background: var(--teal-soft);    color: var(--teal); }
.badge.slate  { background: var(--surface-2);    color: var(--ink-soft); }

.dot { width: 8px; height: 8px; border-radius: var(--r-round); display: inline-block; flex: 0 0 8px; }

.avatar {
  width: 32px; height: 32px; border-radius: var(--r-round);
  background: var(--accent-soft); color: var(--accent-ink);
  display: grid; place-items: center; font-size: .78rem; font-weight: 700; flex: 0 0 32px;
}
.avatar.dark { background: var(--accent); color: var(--on-accent); }

/* ----------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .52rem .95rem; border-radius: var(--r-control);
  border: 1px solid var(--steel); background: var(--surface); color: var(--ink);
  font-size: .9375rem; font-weight: 600; cursor: pointer; text-decoration: none;
  font-family: inherit; line-height: 1.4; box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-ink); }
.btn.danger { color: var(--late); border-color: var(--late-line); background: var(--late-soft); }
.btn.danger:hover { background: var(--late-line); }
.btn.small { padding: .3rem .7rem; font-size: .85rem; }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--surface-2); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------- Forms */

.field { margin-bottom: 1rem; }
.field label, .label { display: block; font-size: .9rem; font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
.field .hint, .hint { font-size: .85rem; color: var(--ink-faint); margin-top: .35rem; line-height: 1.45; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="month"], input[type="url"],
input[type="tel"], input[type="search"], select, textarea {
  width: 100%; padding: .6rem .8rem;
  border: 1px solid var(--steel); border-radius: var(--r-control);
  font-size: .9375rem; font-family: inherit; color: var(--ink); background: var(--surface);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
textarea { min-height: 100px; resize: vertical; line-height: 1.55; }
input[type="color"] { width: 48px; height: 38px; padding: 3px; border: 1px solid var(--steel); border-radius: var(--r-control); background: var(--surface); }

.check { display: flex; align-items: center; gap: .55rem; font-size: .9375rem; color: var(--ink); }
.check input { width: auto; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.4rem; }
.form-grid .full { grid-column: 1 / -1; }

.filters { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; }
.filters .field { margin-bottom: 0; min-width: 150px; }

/* ------------------------------------------------------------------- Flash */

.flash {
  padding: .85rem 1.1rem; border-radius: var(--r-card); margin-bottom: 1.1rem;
  font-size: .9375rem; border: 1px solid var(--steel); background: var(--surface);
}
.flash.success { background: var(--settled-soft); border-color: var(--settled-line); color: var(--settled); }
.flash.error   { background: var(--late-soft);    border-color: var(--late-line);    color: var(--late); }
.flash.warn    { background: var(--brass-soft);   border-color: var(--brass-line);   color: var(--brass); }
.flash a { color: inherit; text-decoration: underline; }

/* -------------------------------------------------------- Feed & comments */

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid var(--steel-soft); font-size: .9375rem; }
.feed li:last-child { border-bottom: 0; }
.feed time { color: var(--ink-faint); font-size: .85rem; flex: 0 0 4.75rem; }

.thread { display: flex; flex-direction: column; gap: .9rem; }
.msg { display: flex; gap: .7rem; }
.msg-body { flex: 1; min-width: 0; }
.msg-meta { font-size: .85rem; color: var(--ink-faint); margin-bottom: .2rem; }
.msg-meta strong { color: var(--ink); font-weight: 700; }
.msg-text {
  background: var(--surface-2); padding: .65rem .85rem; border-radius: var(--r-card);
  white-space: pre-wrap; word-break: break-word; font-size: .9375rem;
}
.msg.internal .msg-text { background: var(--brass-soft); }

.file-row { display: flex; align-items: center; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid var(--steel-soft); font-size: .9375rem; }
.file-row:last-child { border-bottom: 0; }
.file-row .spacer { flex: 1; }
.file-name { font-weight: 600; word-break: break-all; }

/* ---------------------------------------------------------------- Calendar */

.calendar {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
  background: var(--steel-soft); border: 1px solid var(--steel-soft);
  border-radius: var(--r-card); overflow: hidden;
}
.calendar .dow { background: var(--surface-2); padding: .5rem .6rem; font-size: .85rem; font-weight: 600; color: var(--ink-faint); text-align: center; }
.cal-day { background: var(--surface); min-height: 110px; padding: .4rem .45rem; display: flex; flex-direction: column; gap: .3rem; }
.cal-day.out { background: var(--surface-2); }
.cal-day.today .cal-num { background: var(--accent); color: var(--on-accent); }
.cal-num { font-size: .85rem; font-weight: 700; color: var(--ink-soft); width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--r-round); }
.cal-day.out .cal-num { color: var(--ink-faint); font-weight: 500; }
.cal-add { margin-top: auto; font-size: .85rem; color: var(--ink-faint); opacity: 0; text-align: center; }
.cal-day:hover .cal-add, .cal-day:focus-within .cal-add { opacity: 1; }

.pill {
  display: block; padding: .22rem .5rem; border-radius: 8px;
  font-size: .8125rem; line-height: 1.3; color: #fff; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none;
}
.pill:hover { text-decoration: none; opacity: .88; }
.pill.late { box-shadow: inset 0 0 0 2px var(--late); }

/* ------------------------------------------------------------------ Kanban */

.board { display: grid; grid-template-columns: repeat(7, minmax(185px, 1fr)); gap: .75rem; overflow-x: auto; padding-bottom: .5rem; }
.board-col { background: var(--surface-2); border-radius: var(--r-card); padding: .6rem; min-height: 150px; }
.board-col h3 { font-size: .85rem; font-weight: 700; color: var(--ink-soft); margin-bottom: .6rem; display: flex; justify-content: space-between; gap: .4rem; }
.board-col.waiting { background: var(--accent-soft); }
.board-card {
  background: var(--surface); border-radius: var(--r-control);
  padding: .65rem .7rem; margin-bottom: .55rem; font-size: .9rem;
  display: block; color: inherit; box-shadow: var(--shadow-sm);
}
.board-card:hover { text-decoration: none; box-shadow: var(--shadow); }
.board-card .t { display: block; font-weight: 700; margin-bottom: .2rem; letter-spacing: -.01em; }
.board-card .m { display: block; font-size: .85rem; color: var(--ink-faint); }

/* -------------------------------------------------------------------- Misc */

.muted { color: var(--ink-faint); }
.small { font-size: .85rem; }
.mono { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .85rem; }
.mt-2 { margin-top: 1.4rem; }
.mb-1 { margin-bottom: .85rem; }
.empty { padding: 2.5rem 1rem; text-align: center; color: var(--ink-faint); font-size: .9375rem; }
.divider { height: 1px; background: var(--steel-soft); margin: 1.1rem 0; border: 0; }

.tabs { display: flex; gap: .3rem; margin-bottom: 1.1rem; background: var(--surface-2); padding: .25rem; border-radius: var(--r-control); width: fit-content; }
.tabs a { padding: .4rem .85rem; font-size: .9375rem; font-weight: 600; color: var(--ink-soft); border-radius: 8px; }
.tabs a:hover { text-decoration: none; color: var(--ink); }
.tabs a.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; font-size: .9375rem; margin: 0; }
.kv dt { color: var(--ink-faint); }
.kv dd { margin: 0; font-weight: 600; }

.count-badge {
  background: var(--accent); color: var(--on-accent); border-radius: var(--r-round);
  font-size: .78rem; font-weight: 700; padding: 0 .4rem; min-width: 20px; height: 20px;
  display: inline-grid; place-items: center;
}

/* ------------------------------------------------------------------- Login */

.login-page { min-height: 100vh; display: grid; place-items: center; background: var(--bg); padding: 1.5rem; }
.login-card { background: var(--surface); border-radius: 22px; border: 1px solid var(--steel-soft); padding: 2.25rem; width: 100%; max-width: 400px; box-shadow: var(--shadow-lg); }
.login-card h1 { font-size: 1.375rem; margin-bottom: .3rem; }

/* ------------------------------------------------------------- Responsive */

@media (max-width: 1100px) {
  :root { --gutter: 1.25rem; }
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.side, .grid.cols-3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .grid.cols-2, .grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
  .shell { flex-direction: column; padding: 0; gap: 0; }
  .main { border-radius: 0; }
  .sidebar {
    width: auto; flex: none; height: auto; flex-direction: row; align-items: center; gap: .7rem;
    padding: .6rem .75rem; border-bottom: 1px solid rgba(255, 255, 255, .1);
    overflow-x: auto; overflow-y: visible; position: sticky; top: 0; z-index: 30;
    border-radius: 0; margin: 0;
  }
  .sidebar .brand { flex: 0 0 auto; }
  .brand-name { display: none; }
  .switcher { flex: 0 0 auto; min-width: 180px; }
  .nav { flex-direction: row; gap: .25rem; flex: 1 1 auto; }
  .nav a { white-space: nowrap; min-height: 40px; }
  .nav-label { display: none; }
  .sidebar-foot { margin-top: 0; border-top: 0; padding-top: 0; display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
  .me-name, .me-role { display: none !important; }
  .topbar { border-radius: 0; }
  .topbar h1 { flex: 1 0 100%; }
  .cal-day { min-height: 74px; }
  .table-wrap table { min-width: 34rem; }
}

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

/* ------------------------------------------------------------------- Print */

@media print {
  :root { --gutter: 0; }
  .sidebar, .topbar, .no-print { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .shell { padding: 0; gap: 0; }
  .main { border-radius: 0; background: #fff; }
  .grid > .card.stat { background: #fff !important; }
  .grid > .card.stat .stat-value { color: #000 !important; }
  .content { padding: 0; max-width: none; }
  .card { border: 0; border-radius: 0; box-shadow: none; background: #fff; }
  .card + .card { margin-top: 0; }
  .card-head { border-bottom: 1px solid #000; }
  thead th { background: transparent; border-bottom: 1px solid #000; color: #000; }
  tbody td { border-bottom: 1px solid #ccc; }
  .badge { color: #000; background: transparent; border: 1px solid #999; }
  a { color: #000; text-decoration: none; }
}

/* ------------------------------------------------- Couleur sur les chiffres */
/* Les cartes d'indicateurs prennent chacune leur teinte : c'est ce qui donne
   sa couleur à la page sans la salir, puisque ce sont les seuls grands aplats. */
.grid > .card.stat { border: 0; }
.grid > .card.stat:nth-child(1) { background: var(--tint-1); }
.grid > .card.stat:nth-child(2) { background: var(--tint-2); }
.grid > .card.stat:nth-child(3) { background: var(--tint-3); }
.grid > .card.stat:nth-child(4) { background: var(--tint-4, var(--tint-1)); }
.grid > .card.stat:nth-child(1) .stat-value { color: var(--tint-1-ink); }
.grid > .card.stat:nth-child(2) .stat-value { color: var(--tint-2-ink); }
.grid > .card.stat:nth-child(3) .stat-value { color: var(--tint-3-ink); }
.grid > .card.stat:nth-child(4) .stat-value { color: var(--tint-4-ink, var(--tint-1-ink)); }
.grid > .card.stat .stat-label { color: var(--ink-soft); font-weight: 700; }

:root {
  --tint-1: #efecff; --tint-1-ink: #4f3fd6;
  --tint-2: #e7f3ff; --tint-2-ink: #1264a3;
  --tint-3: #e9f7f0; --tint-3-ink: #0f7049;
  --tint-4: #fdf1e6; --tint-4-ink: #9a5a16;
}

.brand-mark { background: linear-gradient(140deg, #8a7dff, #5848e8); }

/* ======================================================= Écran du jour
   Trois niveaux d'urgence dans une seule carte, séparés par un filet.
   Pas de colonnes : une liste se lit de haut en bas, et l'ordre porte
   déjà l'information — ce qui est en retard est en haut. */
.today-group { padding: 1rem 1.25rem 1.1rem; }
.today-group + .today-group { border-top: 1px solid var(--steel-soft); }
.today-group > h3 {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .35rem; font-size: .9375rem;
}

.today { list-style: none; margin: 0; padding: 0; }
.today li {
  display: flex; gap: .9rem; align-items: baseline;
  padding: .62rem 0; border-bottom: 1px solid var(--steel-soft);
}
.today li:last-child { border-bottom: 0; padding-bottom: 0; }
.today .when {
  flex: 0 0 7.5rem; font-size: .85rem; color: var(--ink-faint);
}
.today .what { flex: 1; min-width: 0; }
.today .what .t { font-weight: 700; letter-spacing: -.01em; }
.today .what .d { display: block; font-size: .875rem; color: var(--ink-soft); margin-top: .12rem; }
.today .kind { flex: 0 0 auto; }

@media (max-width: 720px) {
  /* Sur un téléphone, la réserve de 7,5 rem mangerait la moitié de la
     largeur : l'échéance et la nature remontent sur une ligne à elles, et le
     titre récupère toute la largeur plutôt que de s'enrouler autour. */
  .today li { flex-wrap: wrap; gap: .2rem .9rem; }
  .today .when { flex: 1 1 auto; order: -2; }
  .today .kind { order: -1; margin-left: auto; }
  .today .what { flex: 1 0 100%; }
}

/* ===========================================================================
   L'ALLURE SOMBRE
   ---------------------------------------------------------------------------
   Tout tient dans les variables : aucune règle ci-dessus n'a besoin d'être
   dupliquée. Le panneau latéral, lui, ne change pas — il était déjà sombre,
   et c'est ce qui fait tenir la continuité entre les deux allures.

   « Comme l'appareil » est résolu par le petit script de l'en-tête, qui
   remplace l'attribut par « sombre » ou « clair ». Ainsi un seul bloc suffit
   ici, au lieu d'un second identique dans une requête média.
   ========================================================================= */
:root[data-theme="sombre"] {
  color-scheme: dark;

  --bg: #0b0c14;
  --surface: #16182a;
  --surface-2: #1e2136;

  --ink: #e9eaf5;
  --ink-soft: #abb0ca;      /* 7,3:1 sur --surface */
  --ink-faint: #8b90ab;     /* 5,1:1 — mentions secondaires */
  --steel: #2c3049;
  --steel-soft: #242741;

  /* Le violet d'origine (#6d5efc) tombe à 3:1 sur fond sombre : on l'éclaircit
     pour le texte, en gardant la teinte qui fait l'identité de l'outil. */
  --accent: #8b7dff;
  --accent-ink: #a99bff;
  --accent-soft: #241f47;
  --accent-line: #3b3272;

  --settled: #62d6a6;  --settled-soft: #0f2a20;  --settled-line: #1f4a38;
  --late:    #ff8f88;  --late-soft:    #2e1718;  --late-line:    #4e2726;
  --indigo:  #9ba4f2;  --indigo-soft:  #1e2040;
  --teal:    #5fc6e0;  --teal-soft:    #10272f;
  --brass:   #e3b662;  --brass-soft:   #2c2312;  --brass-line:   #4d3b1a;

  /* Sur fond sombre, une ombre ne se voit plus : c'est la bordure qui
     détache les cartes. On garde des ombres très profondes pour les
     éléments réellement flottants (menus, modales). */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px -16px rgba(0, 0, 0, .8);
  --shadow-lg: 0 20px 55px -20px rgba(0, 0, 0, .9);
}

:root[data-theme="sombre"] .card,
:root[data-theme="sombre"] .login-card { border-color: var(--steel); }
:root[data-theme="sombre"] .main {
  /* Un ton en dessous des cartes : sans cet écart, le cadre et son contenu
     se confondent et la page paraît plate. */
  background: #101222;
}

/* Les cartes d'indicateurs : mêmes teintes, posées sur du sombre. */
:root[data-theme="sombre"] {
  --tint-1: #221f3e; --tint-1-ink: #b3a8ff;
  --tint-2: #15283c; --tint-2-ink: #7fc3f5;
  --tint-3: #13302a; --tint-3-ink: #6fd3a6;
  --tint-4: #2f2416; --tint-4-ink: #e8bc74;
}
:root[data-theme="sombre"] .grid > .card.stat .stat-label { color: var(--ink-soft); }

/* ---------------------------------------------------------------- Impression
   Une facture s'imprime en noir sur blanc, quelle que soit l'allure choisie.
   Sans ce bloc, les textes gris clair du mode sombre partiraient en blanc sur
   blanc — invisible à l'écran de prévisualisation comme sur le papier. */
@media print {
  :root[data-theme="sombre"] {
    color-scheme: light;
    --bg: #ffffff; --surface: #ffffff; --surface-2: #ffffff;
    --ink: #000000; --ink-soft: #333333; --ink-faint: #555555;
    --steel: #cccccc; --steel-soft: #dddddd;
    --accent: #000000; --accent-ink: #000000; --accent-soft: #ffffff;
    --settled: #000; --late: #000; --indigo: #000; --teal: #000; --brass: #000;
    --shadow: none; --shadow-sm: none; --shadow-lg: none;
  }
}

/* ------------------------------------------------- Le choix dans le profil */
.themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.theme-choix {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .7rem; border: 1px solid var(--steel); border-radius: var(--r-card);
  cursor: pointer; background: var(--surface);
}
.theme-choix:hover { border-color: var(--accent-line); }
/* Le liseré suit le bouton réellement coché, pas celui que le serveur avait
   rendu : sans `:has()`, cliquer une carte ne déplaçait rien et on doutait
   d'avoir cliqué. `.retenu` reste pour l'affichage initial. */
.theme-choix.retenu,
.theme-choix:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.theme-choix.retenu:not(:has(input:checked)) { border-color: var(--steel); box-shadow: none; }
.theme-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.theme-nom { font-weight: 700; font-size: .9375rem; }

/* Un aperçu dessiné en CSS : deux rectangles, le panneau et le contenu.
   Il montre le contraste réel sans charger la moindre image. */
.theme-apercu {
  display: flex; gap: 3px; height: 42px; padding: 4px;
  border-radius: 9px; border: 1px solid var(--steel-soft); overflow: hidden;
}
.theme-apercu .p { flex: 0 0 11px; border-radius: 4px; background: #191a2c; }
.theme-apercu .c { flex: 1; border-radius: 4px; padding: 5px; display: flex;
  flex-direction: column; gap: 4px; justify-content: center; }
.theme-apercu .c i { display: block; height: 4px; border-radius: 2px; }
.theme-apercu .c i.court { width: 55%; }
.theme-apercu.clair .c { background: #ffffff; }
.theme-apercu.clair .c i { background: #d7d9e6; }
.theme-apercu.sombre .c { background: #16182a; }
.theme-apercu.sombre .c i { background: #3b3f5e; }
.theme-apercu.systeme .c { background: linear-gradient(110deg, #ffffff 0 50%, #16182a 50% 100%); }
.theme-apercu.systeme .c i { background: linear-gradient(110deg, #d7d9e6 0 50%, #3b3f5e 50% 100%); }

/* En mode sombre, le fond de l'aperçu « Sombre » et celui de la carte sont la
   même couleur — c'est exact, et illisible. Le cadre redevient visible pour
   qu'on distingue la miniature de ce qui l'entoure. */
:root[data-theme="sombre"] .theme-apercu { border-color: var(--steel); }

@media (max-width: 720px) {
  .themes { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   LA VISITE GUIDÉE ET LES ÉCRANS VIDES
   ========================================================================= */

/* Le voile assombrit tout ; la « fenêtre » rend sa place à l'élément montré.
   L'astuce tient à l'ombre portée démesurée : c'est elle qui fait le voile,
   et le trou se découpe tout seul, sans masque ni calque. */
.visite-voile { position: fixed; inset: 0; z-index: 900; }
.visite-trou {
  position: fixed; z-index: 901; pointer-events: none;
  border-radius: var(--r-control);
  box-shadow: 0 0 0 9999px rgba(10, 11, 24, .62), 0 0 0 2px var(--accent);
  transition: all .22s ease;
}
.visite-bulle {
  position: fixed; z-index: 902; width: min(23rem, calc(100vw - 2rem));
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--steel); border-radius: var(--r-card);
  box-shadow: var(--shadow-lg); padding: 1.1rem 1.2rem;
  transition: top .22s ease, left .22s ease;
}
.visite-bulle h3 { margin: .15rem 0 .35rem; font-size: 1rem; }
.visite-bulle p { font-size: .9375rem; color: var(--ink-soft); margin-bottom: .9rem; }
.visite-compteur {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-ink);
}
.visite-boutons { display: flex; align-items: center; gap: .5rem; }
.visite-boutons .spacer { flex: 1; }
body.visite-en-cours { overflow: hidden; }

/* La cible n'a **rien** à faire pour être vue : la fenêtre est un trou, et
   ce qui se trouve dessous se voit au travers. Une version précédente
   remontait tous les éléments `[data-visite]` au-dessus du voile — résultat,
   le menu entier échappait à l'assombrissement et la fenêtre ne se
   distinguait plus de rien. Une barre latérale collante crée de surcroît son
   propre contexte d'empilement : un enfant n'en sort pas en montant son
   `z-index`. Mieux vaut ne pas s'y frotter du tout. */

/* --------------------------------------------------------- Écrans vides
   Un tableau vide ne dit pas ce qu'on attend de vous. Ces blocs remplacent
   « Aucun élément » par ce qu'il y a à faire, et disparaissent d'eux-mêmes
   dès qu'il y a une ligne. */
.vide { padding: 2.6rem 1.5rem; text-align: center; max-width: 34rem; margin: 0 auto; }
.vide-titre { font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; }
.vide-texte { color: var(--ink-faint); font-size: .9375rem; margin: .4rem 0 1.1rem; line-height: 1.5; }
.vide .btn { margin: 0 .2rem; }
.vide-aide { font-size: .85rem; color: var(--ink-faint); margin-top: .9rem; }
.vide-aide a { color: var(--accent-ink); text-decoration: underline; }