:root {
  /* DA CRONOS v1 — bleu ciel / noir / blanc */
  --sky: #8FD6FF;           /* primaire : boutons, actif */
  --blue: #3AA8E8;          /* accents, liens, icônes (sky-deep) */
  --blue-dark: #2589C9;
  --blue-soft: #D9F1FF;     /* sky-pale */
  --blue-softer: #EAF7FF;
  --bg: #F2F4F7;
  --panel: #ffffff;
  --line: #E3E7EE;
  --text: #0B0F14;
  --muted: #6B7280;
  --ok: #1FA971;
  --warn: #F5A524;
  --shadow: 0 1px 3px rgba(10, 20, 30, .08), 0 1px 2px rgba(10, 20, 30, .05);
  --shadow-lift: 0 6px 16px rgba(58, 168, 232, .20);
  --input-bg: #ffffff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font: 14px/1.45 "Inter Tight", "Inter", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(1200px 400px at 15% -10%, rgba(58, 168, 232, .10), transparent),
    var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------------------------------------------------------------- topbar */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  flex-wrap: wrap;
  z-index: 5;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 9px;
  white-space: nowrap;
}
.brand img {
  height: 26px;
  display: block;
  align-self: center;
}
.brand-sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.topbar input[type=search] {
  flex: 1;
  min-width: 180px;
  max-width: 420px;
  border-radius: 999px;
  padding-left: 14px;
}
input, select, textarea {
  font: inherit;
  color: inherit;
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 10px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(29, 58, 181, .12);
}

button, .btn-link {
  font: inherit;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 9px;
  padding: 7px 13px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
button:hover, .btn-link:hover { border-color: #b6c1e2; background: var(--blue-softer); }
button.primary {
  background: var(--sky);
  border-color: var(--sky);
  color: #000;
  font-weight: 600;
}
button.primary:hover {
  background: color-mix(in srgb, var(--sky) 82%, var(--blue));
  box-shadow: var(--shadow-lift);
}
button.ghost { background: transparent; }
button.danger { color: #b91c1c; border-color: #f0c4c4; }
button.danger:hover { background: #fdf1f1; border-color: #e3a5a5; }

.view-toggle { display: flex; }
.view-toggle button { border-radius: 0; margin-left: -1px; }
.view-toggle button:first-child { border-radius: 9px 0 0 9px; margin-left: 0; }
.view-toggle button:last-child { border-radius: 0 9px 9px 0; }
.view-toggle button.active {
  background: color-mix(in srgb, var(--tab, var(--blue)) 13%, var(--panel));
  border-color: var(--tab, var(--blue));
  color: var(--tab, var(--blue));
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.view-toggle button:hover {
  border-color: color-mix(in srgb, var(--tab, var(--blue)) 55%, var(--line));
  background: color-mix(in srgb, var(--tab, var(--blue)) 7%, var(--panel));
}
html[data-theme="dark"] .view-toggle button.active {
  background: color-mix(in srgb, var(--tab, var(--blue)) 24%, var(--panel));
  color: color-mix(in srgb, var(--tab, var(--blue)) 55%, white);
}
#btn-archives.active {
  background: #fef3c7;
  border-color: var(--warn);
  color: var(--warn);
  font-weight: 600;
}
.user-chip {
  background: var(--sky);
  border-color: var(--sky);
  color: #000;
  font-weight: 600;
  border-radius: 999px;
}
.user-chip:hover { background: color-mix(in srgb, var(--sky) 82%, var(--blue)); }

/* ----------------------------------------------------------------- board */
.board {
  flex: 1;
  display: flex;
  gap: 12px;
  padding: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: stretch;
}
.col {
  flex: 0 0 272px;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--line);
  border-radius: 14px;
  max-height: 100%;
  backdrop-filter: blur(2px);
}
.col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px 9px;
  font-weight: 700;
  font-size: 13px;
  border-top: 4px solid var(--col-color, var(--muted));
  border-radius: 14px 14px 0 0;
}
.col-count {
  margin-left: auto;
  background: var(--col-color, var(--muted));
  color: #fff;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 11px;
  line-height: 18px;
  font-weight: 700;
}
.col-cards {
  flex: 1;
  overflow-y: auto;
  padding: 4px 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 40px;
}
.col.drag-over {
  outline: 2px dashed var(--blue);
  outline-offset: -5px;
  background: var(--blue-softer);
}

.card {
  background: var(--panel);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 11px 13px;
  cursor: url("/static/cursor-pan.svg?v=da3") 13 11, grab;
  border: 1px solid transparent;
  border-left: 4px solid var(--col-color, var(--muted));
  transition: transform .1s, box-shadow .12s, border-color .12s;
}
.card:active { cursor: url("/static/cursor-pan-actif.svg?v=da3") 13 13, grabbing; }
.card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
  border-color: var(--line);
  border-left-color: var(--col-color, var(--muted));
}
.card .name { font-weight: 700; }
.card .sub {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.card .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  align-items: center;
}
.badge {
  font-size: 11px;
  border-radius: 999px;
  padding: 1px 8px;
  background: #eef1f8;
  color: var(--muted);
  font-weight: 600;
}
.badge.regie { background: var(--blue-soft); color: var(--blue); }
.badge.signature { background: #fef3c7; color: #92400e; }
.badge.pose { background: #dcfce7; color: #15803d; }
.badge.late { background: #fee2e2; color: #b91c1c; }
.badge.assigne { background: #f1eafd; color: #6d28d9; }
.badge.poseur {
  background: color-mix(in srgb, var(--p-color, #64748b) 14%, white);
  color: var(--p-color, #64748b);
}
.badge.controle {
  background: color-mix(in srgb, var(--c-color, #be185d) 14%, white);
  color: color-mix(in srgb, var(--c-color, #be185d) 80%, black);
}
.chip-creneau {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 0 8px;
  background: color-mix(in srgb, var(--c-color, #64748b) 16%, white);
  color: color-mix(in srgb, var(--c-color, #64748b) 85%, black);
  white-space: nowrap;
}
.mini-progress {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

/* ----------------------------------------------------------------- table */
.table-view { flex: 1; overflow: auto; padding: 14px; }
.table-view table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.table-view th, .table-view td {
  padding: 10px 13px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table-view th {
  background: var(--blue-softer);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--blue);
  position: sticky;
  top: 0;
  z-index: 1;
}
.table-view td.num, .table-view th.num { text-align: right; }
.table-view tbody tr { cursor: pointer; }
.table-view tbody tr:hover { background: var(--blue-softer); }
.statut-pill {
  font-size: 12px;
  border-radius: 999px;
  padding: 2px 10px;
  color: #fff;
  font-weight: 600;
  background: var(--col-color, var(--muted));
  white-space: nowrap;
}

/* -------------------------------------------------------- tableau de bord */
.dash-view { flex: 1; overflow-y: auto; padding: 14px; }
.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.stat-tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.stat-tile.alert { border-color: #fca5a5; background: #fef5f5; }
.stat-num { font-size: 22px; font-weight: 800; color: var(--blue-dark); }
.stat-tile.alert .stat-num { color: #b91c1c; }
.stat-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.dash-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  align-items: start;
}
.dash-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.dash-panel h3 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--blue);
}
.dash-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.dash-row:hover { background: var(--blue-softer); }
.dash-sub { color: var(--muted); font-size: 12px; }
.dash-extra { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--blue-dark); white-space: nowrap; }
.dash-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  cursor: pointer;
}
.dash-bar-label { flex: 0 0 190px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-bar-track { flex: 1; background: #eef1f8; border-radius: 999px; height: 10px; overflow: hidden; }
.dash-bar { display: block; height: 100%; border-radius: 999px; }
.dash-bar-num { flex: 0 0 22px; text-align: right; font-size: 12px; font-weight: 700; color: var(--muted); }


/* ------------------------------------------------------------------ liens */
.link-row { display: flex; gap: 6px; }
.link-row input { flex: 1; min-width: 0; }
.link-open { display: flex; align-items: center; font-weight: 700; color: var(--blue); }

/* ------------------------------------------------------------ calendrier */
.cal-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px;
  overflow: hidden;
}
.cal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.cal-head h2 {
  margin: 0;
  font-size: 17px;
  color: var(--blue-dark);
  min-width: 170px;
  text-align: center;
}
.cal-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(118px, auto);
  gap: 6px;
  overflow-y: auto;
  align-content: start;
}
.cal-dow {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--blue);
  padding: 2px 6px;
}
.cal-day {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 5px 6px;
  overflow: hidden;
}
.cal-day.off { background: transparent; border: none; }
.cal-day.today { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(29, 58, 181, .18); }
.cal-num { font-size: 11px; font-weight: 700; color: var(--muted); }
.cal-day.today .cal-num { color: var(--blue); }
.cal-chip {
  border-left: 3px solid var(--p-color, var(--muted));
  background: color-mix(in srgb, var(--p-color, #64748b) 10%, white);
  border-radius: 6px;
  padding: 2px 6px;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.3;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cal-chip:hover { box-shadow: var(--shadow); }
.cal-chip b { display: block; overflow: hidden; text-overflow: ellipsis; }
.cal-chip span { color: var(--p-color, var(--muted)); font-weight: 600; }

.cal-grid.week { grid-auto-rows: minmax(320px, 1fr); }
.wk-day { overflow-y: auto; }
.wk-head {
  font-size: 12px;
  font-weight: 800;
  color: var(--blue);
  text-transform: capitalize;
  padding: 2px 2px 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.wk-ev {
  border-left: 3px solid var(--p-color, var(--muted));
  background: color-mix(in srgb, var(--p-color, #64748b) 8%, var(--panel));
  border-radius: 9px;
  padding: 7px 9px;
  margin-top: 7px;
  cursor: pointer;
  font-size: 12px;
  transition: box-shadow .12s, transform .1s;
}
.wk-ev:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.wk-title { font-weight: 700; margin-bottom: 2px; }
.wk-line {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}
.wk-detail {
  color: var(--text);
  font-size: 12px;
  margin-top: 3px;
  padding: 4px 6px;
  background: color-mix(in srgb, var(--p-color, #64748b) 6%, var(--panel));
  border-radius: 6px;
  white-space: pre-wrap;      /* texte complet, jamais tronqué */
}
.wk-warn { color: #b45309; font-weight: 700; }
html[data-theme="dark"] .wk-ev {
  background: color-mix(in srgb, var(--p-color, #64748b) 16%, #1a2130);
}
html[data-theme="dark"] .wk-warn { color: #fbbf24; }

/* -------------------------------------------------------------- réglages */
.modal.settings { width: min(560px, 100%); }
.settings-body { overflow-y: auto; padding: 6px 20px 20px; }
.settings-body section { margin-top: 14px; }
.settings-body h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--blue);
  margin: 10px 0 6px;
}
.set-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
}
.set-row .set-label { flex: 1; }
.set-move { display: flex; flex-direction: column; }
.set-move .mv {
  padding: 0 6px;
  font-size: 9px;
  line-height: 13px;
  border-radius: 4px;
  border: none;
  background: none;
  color: var(--muted);
}
.set-move .mv:hover:not(:disabled) { color: var(--blue); background: var(--blue-soft); }
.set-move .mv:disabled { opacity: .25; cursor: default; }
.set-color, input[type=color] {
  padding: 1px 2px;
  width: 34px;
  height: 30px;
  cursor: pointer;
  flex-shrink: 0;
}
.set-del {
  border: none;
  background: none;
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 6px;
}
.set-del:hover { color: #b91c1c; background: #fdf0f0; }
.settings-add {
  display: flex;
  gap: 7px;
  margin-top: 6px;
}
.settings-add input:not([type=color]) { flex: 1; }

/* ----------------------------------------------------------------- modal */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 32, 58, .5);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
.modal {
  background: var(--panel);
  border-radius: 16px;
  width: min(1060px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(23, 32, 58, .35);
}
.modal.small { width: 390px; padding: 22px; gap: 8px; }
.modal.small input { width: 100%; }
.modal.small h2 { margin: 0 0 4px; }
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--blue-softer);
  border-radius: 16px 16px 0 0;
}
.modal-head h2 { margin: 0; font-size: 17px; color: var(--blue-dark); }
.modal-head-right { display: flex; gap: 8px; align-items: center; }
.modal-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* accès rapides en tête de fiche : Qhare, CEE, DocuSign */
.fiche-acces { display: flex; gap: 6px; align-items: center; flex: none; }
.acces-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
            background: #fff; border: 1px solid var(--line); cursor: pointer; padding: 0;
            text-decoration: none; transition: transform .12s, box-shadow .12s; }
.acces-ic:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.15); }
.acces-ic img { width: 22px; height: 22px; border-radius: 5px; display: block; }
.acces-ic svg { width: 16px; height: 16px; }
.acces-txt { font-size: 11px; font-weight: 800; color: #0d9488; width: auto; padding: 0 8px; }
.fiche-acces button.acces-ds { background: #fff; border: 1px solid var(--line); }
.fiche-acces button.acces-ds img { width: 20px; height: 20px; border-radius: 0; }
[data-theme="dark"] .fiche-acces button.acces-ds { background: #fff; }
.acces-ic[hidden] { display: none; }
[data-theme="dark"] .acces-ic { background: #1c1c1c; }
.statut-select { font-weight: 700; }
.modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow-y: auto;
}
.modal-col { padding: 14px 20px 20px; }
.modal-col:first-child { border-right: 1px solid var(--line); }
.modal-col h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--blue);
  margin: 18px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-col h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.modal-col h3:first-child { margin-top: 0; }
.grid2, .grid3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px 10px;
}
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid2 > *, .grid3 > * { min-width: 0; }
.grid2 label, .grid3 label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.grid2 .span2 { grid-column: span 2; }
/* bouton DocuSign dans la fiche */
.docusign-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.btn-docusign { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px;
                font-weight: 600; padding: 8px 14px; border-radius: 22px; cursor: pointer;
                background: #000; color: var(--sky, #8FD6FF); border: 0;
                transition: filter .12s, box-shadow .12s; }
.btn-docusign img { width: 16px; height: 16px; }
.btn-docusign:hover { filter: brightness(1.15); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.docusign-hint { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px;
                 color: var(--muted); }
.chip-copie { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 14px; cursor: pointer;
              background: var(--sky-pale, #D9F1FF); color: #000; border: 1px solid var(--sky, #8FD6FF); }
.chip-copie:hover { background: var(--sky, #8FD6FF); }
/* 2ᵉ dossier MPR : bouton ＋ à côté du n° MPR */
.ref-ligne { display: flex; gap: 6px; align-items: stretch; }
.ref-ligne input { flex: 1; min-width: 0; }
.btn-plus { flex: none; width: 34px; border-radius: 10px; cursor: pointer;
            border: 1px dashed var(--sky-deep, #3AA8E8); background: transparent;
            color: var(--sky-deep, #3AA8E8); font-size: 18px; line-height: 1; padding: 0; }
.btn-plus:hover { background: var(--sky-pale, #D9F1FF); }
.btn-plus[hidden] { display: none; }
.modal-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 18px;
}
.save-status { color: var(--ok); font-size: 12px; font-weight: 600; }
.meta-line { color: var(--muted); font-size: 11px; margin-top: 10px; }
.hint { color: var(--muted); font-size: 12px; }

/* ------------------------------------------------------------- checklist */
.check-group { margin-bottom: 8px; }
.check-group-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 10px 0 3px;
}
.check-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 9px;
  border-radius: 9px;
  cursor: pointer;
  user-select: none;
}
.check-item:hover { background: var(--blue-softer); }
.check-item input { accent-color: var(--blue); width: 16px; height: 16px; flex-shrink: 0; }
.check-item.done {
  background: rgba(22, 163, 74, .12);   /* stabilo vert transparent */
}
.check-item.done:hover { background: rgba(22, 163, 74, .18); }
.check-item.done span { color: inherit; }
html[data-theme="dark"] .check-item.done { background: rgba(74, 222, 128, .14); }
html[data-theme="dark"] .check-item.done:hover { background: rgba(74, 222, 128, .2); }
.check-group-title.custom { color: #0d9488; }
.check-del {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--muted);
  padding: 0 5px;
  font-size: 12px;
  border-radius: 6px;
}
.check-del:hover { color: #b91c1c; background: #fdf0f0; }
.custom-add {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.custom-add input { flex: 1; }
.custom-add button { padding: 7px 14px; font-weight: 800; }
.progress-badge {
  background: var(--blue);
  color: #fff;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

/* ----------------------------------------------------------------- notes */
.note-add { display: flex; gap: 8px; align-items: flex-end; }
.note-add textarea { flex: 1; resize: vertical; }
.note {
  background: var(--blue-softer);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 9px 11px;
  margin-top: 8px;
}
.note-head {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 3px;
}
.note-head b { color: var(--blue); }
.note-del {
  margin-left: auto;
  cursor: pointer;
  border: 0;
  background: none;
  color: var(--muted);
  padding: 0 4px;
}
.note-del:hover { color: #b91c1c; }
.note-text { white-space: pre-wrap; }

.history-toggle { cursor: pointer; }
#history { font-size: 12px; color: var(--muted); }
#history .h-line { padding: 3px 0; border-bottom: 1px dashed var(--line); }

/* ----------------------------------------------------------------- toast */
.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue-dark);
  color: #fff;
  border-radius: 999px;
  padding: 10px 20px;
  z-index: 100;
  font-weight: 600;
  box-shadow: var(--shadow-lift);
}

.empty-state {
  color: var(--muted);
  text-align: center;
  padding: 30px 10px;
  font-size: 12px;
}

@media (max-width: 900px) {
  .modal-body { grid-template-columns: 1fr; }
  .modal-col:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* --------------------------------------------------------------- mode nuit */
html[data-theme="dark"] {
  --bg: #0F1114;
  --panel: #1A1C20;
  --input-bg: #141619;
  --line: #2A2D33;
  --text: #F2F4F7;
  --muted: #9AA0AA;
  --sky: #8FD6FF;
  --blue: #5BB9EF;
  --blue-dark: #7CC8F5;
  --blue-soft: #0B2A3D;
  --blue-softer: #10222E;
  --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-lift: 0 6px 16px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] body {
  background:
    radial-gradient(1200px 400px at 15% -10%, rgba(143, 214, 255, .07), transparent),
    var(--bg);
}
html[data-theme="dark"] .brand-word { color: #fff; }
html[data-theme="dark"] button.primary,
html[data-theme="dark"] .user-chip { color: #000; }
html[data-theme="dark"] button.danger { color: #f87171; border-color: #5b2727; }
html[data-theme="dark"] button.danger:hover { background: #2a1616; border-color: #7c3434; }
html[data-theme="dark"] #btn-archives.active { background: #3a2f12; color: #fbbf24; border-color: #7c5f16; }
html[data-theme="dark"] .col { background: rgba(26, 33, 48, .55); }
html[data-theme="dark"] .badge { background: #232c40; }
html[data-theme="dark"] .badge.regie { background: var(--blue-soft); color: #9db1ff; }
html[data-theme="dark"] .badge.pose { background: #143323; color: #4ade80; }
html[data-theme="dark"] .badge.late { background: #3d1a1a; color: #f87171; }
html[data-theme="dark"] .badge.assigne { background: #2c2347; color: #c4b5fd; }
html[data-theme="dark"] .badge.poseur,
html[data-theme="dark"] .cal-chip {
  background: color-mix(in srgb, var(--p-color, #64748b) 24%, #1a2130);
}
html[data-theme="dark"] .badge.controle {
  background: color-mix(in srgb, var(--c-color, #be185d) 26%, #1a2130);
  color: color-mix(in srgb, var(--c-color, #be185d) 60%, white);
}
html[data-theme="dark"] .chip-creneau {
  background: color-mix(in srgb, var(--c-color, #64748b) 28%, #1a2130);
  color: color-mix(in srgb, var(--c-color, #64748b) 65%, white);
}
html[data-theme="dark"] .cal-chip span { filter: brightness(1.5); }
html[data-theme="dark"] .dash-bar-track, html[data-theme="dark"] .regie-track { background: #232c40; }
html[data-theme="dark"] .stat-num,
html[data-theme="dark"] .dash-extra,
html[data-theme="dark"] .modal-head h2,
html[data-theme="dark"] .cal-head h2 { color: #b9c6ff; }
html[data-theme="dark"] .toast { background: #313c55; }

/* ============================================================ pack polish */

/* barres de défilement fines */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: #b6c1e2; }
*::-webkit-scrollbar-track { background: transparent; }

/* jauge d'avancement des cartes */
.card-prog {
  height: 4px;
  background: #eef1f8;
  border-radius: 999px;
  margin-top: 8px;
  overflow: hidden;
}
.card-prog-fill { display: block; height: 100%; border-radius: 999px; transition: width .3s; }
html[data-theme="dark"] .card-prog { background: #232c40; }

/* avatars à initiales */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  margin-right: 4px;
  vertical-align: -3px;
  flex-shrink: 0;
}
.note-head .avatar { width: 18px; height: 18px; font-size: 10px; }

/* badge Nouveau (< 24 h) */
.badge.new { background: #fdf4ff; color: #a21caf; }
html[data-theme="dark"] .badge.new { background: #3b1440; color: #e879f9; }

/* surlignage de la recherche */
mark { background: #fde047; color: inherit; border-radius: 3px; padding: 0 1px; }
html[data-theme="dark"] mark { background: #a16207; color: #fff; }

/* transitions douces */
.modal { animation: modal-in .18s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.dash-panel, .stat-tile { animation: fade-up .3s ease backwards; }
.dash-stats .stat-tile:nth-child(2) { animation-delay: .04s; }
.dash-stats .stat-tile:nth-child(3) { animation-delay: .08s; }
.dash-stats .stat-tile:nth-child(4) { animation-delay: .12s; }
.dash-stats .stat-tile:nth-child(5) { animation-delay: .16s; }
.dash-panels .dash-panel:nth-child(2) { animation-delay: .05s; }
.dash-panels .dash-panel:nth-child(3) { animation-delay: .1s; }
.dash-panels .dash-panel:nth-child(4) { animation-delay: .15s; }
.dash-panels .dash-panel:nth-child(5) { animation-delay: .2s; }
.dash-panels .dash-panel:nth-child(6) { animation-delay: .25s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }

/* tuiles avec icône */
.stat-tile { display: flex; align-items: center; gap: 11px; }
.stat-ico {
  font-size: 20px;
  background: var(--blue-softer);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* total € au pied des colonnes */
.col-foot {
  padding: 7px 13px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  border-top: 1px dashed var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* calendrier : week-ends grisés + numéros de semaine */
.cal-day.we { background: color-mix(in srgb, var(--panel) 55%, var(--bg)); }
.cal-wnum {
  font-size: 9px;
  font-weight: 800;
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 5px;
}

/* confettis */
.confetti { position: fixed; top: -20px; z-index: 200; border-radius: 2px; pointer-events: none; }

/* ---- « Bien joué ! » : photo + bulle près du dossier payé ---- */
.bravo { position: fixed; z-index: 210; display: flex; align-items: center; gap: 10px;
         pointer-events: none; opacity: 0; transform: scale(.6) translateY(14px);
         transition: opacity .28s ease, transform .42s cubic-bezier(.34,1.56,.64,1); }
.bravo.visible { opacity: 1; transform: scale(1) translateY(0); }
.bravo.sortie { opacity: 0; transform: scale(.85) translateY(-18px);
                transition: opacity .5s ease, transform .5s ease; }
.bravo.a-gauche { flex-direction: row-reverse; }
.bravo-photo { flex: none; display: grid; place-items: center;
               animation: bravo-danse 1.1s ease-in-out infinite; transform-origin: 50% 90%; }
.bravo-photo img { height: 170px; width: 195px; object-fit: contain; display: block;
                   filter: drop-shadow(0 12px 16px rgba(0,0,0,.35)); }
.bravo-photo span { display: none; font-size: 46px; line-height: 1; }
.bravo-photo.sans-photo { width: 96px; height: 96px; border-radius: 50%;
                          border: 4px solid var(--sky, #8FD6FF);
                          background: var(--sky-pale, #D9F1FF);
                          box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.bravo-photo.sans-photo img { display: none; }
.bravo-photo.sans-photo span { display: block; }
.bravo-bulle { position: relative; background: #000; color: #fff; padding: 10px 16px;
               border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,.25);
               max-width: 230px; }
.bravo-bulle b { display: block; font-family: Anton, Impact, sans-serif; font-weight: 400;
                 font-size: 22px; letter-spacing: .02em; color: var(--sky, #8FD6FF);
                 line-height: 1.05; }
.bravo-bulle small { display: block; font-size: 12px; opacity: .85; margin-top: 3px;
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bravo-bulle::before { content: ""; position: absolute; top: 50%; left: -8px; margin-top: -8px;
                       border: 8px solid transparent; border-right-color: #000; border-left: 0; }
.bravo.a-gauche .bravo-bulle::before { left: auto; right: -8px; border-right: 0;
                                       border-left: 8px solid #000; }
@keyframes bravo-danse { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .bravo-photo { animation: none; } }


/* skeleton de chargement */
.skel-line, .skel-card {
  background: linear-gradient(90deg, var(--line), var(--blue-softer), var(--line));
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
  border-radius: 8px;
}
.skel-line { height: 14px; margin: 14px 12px 10px; width: 55%; }
.skel-card { height: 74px; margin: 0 9px 9px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* mode compact */
body.compact .card { padding: 7px 10px; }
body.compact .card .sub { display: none; }
body.compact .card .badges { margin-top: 4px; }
body.compact .badge { font-size: 10px; padding: 0 6px; }
body.compact .card-prog { margin-top: 5px; }
body.compact .col { flex-basis: 238px; }
body.compact .col-cards { gap: 6px; }
#btn-compact.active { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }

/* impression : feuille de route propre */
@media print {
  .topbar, .cal-head button, .cal-head .view-toggle, .cal-head .hint,
  .toast, .overlay, .confetti { display: none !important; }
  html, body { overflow: visible !important; height: auto; background: #fff !important; }
  html[data-theme="dark"] {
    --bg: #fff; --panel: #fff; --text: #111; --muted: #444; --line: #bbb;
    --blue: #3AA8E8; --blue-dark: #162d92; --blue-softer: #fff; --blue-soft: #eee;
    --input-bg: #fff;
  }
  .cal-view, .board, .table-view, .dash-view { overflow: visible !important; padding: 0; }
  .cal-grid, .wk-day, .col-cards { overflow: visible !important; }
  .cal-grid.week { grid-auto-rows: auto; }
  .wk-ev, .cal-day, .card { break-inside: avoid; box-shadow: none; }
}

/* ------------------------------------------------------------ liens utiles */
.links-view { flex: 1; overflow-y: auto; padding: 18px; }
.links-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.links-head h2 { margin: 0; font-size: 17px; color: var(--blue-dark); }
.links-head .hint { flex: 1; }
.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 14px;
  max-width: 1100px;
}
.link-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text);
  padding: 12px;
  transition: transform .12s, box-shadow .12s, border-color .12s;
  animation: fade-up .25s ease backwards;
}
.link-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--blue);
}
.link-tile img { width: 42px; height: 42px; border-radius: 10px; }
.link-emoji { font-size: 36px; }
.link-nom {
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.link-del {
  position: absolute;
  top: 6px;
  right: 6px;
  border: 0;
  background: none;
  color: var(--muted);
  border-radius: 6px;
  padding: 2px 6px;
  opacity: 0;
  transition: opacity .12s;
}
.link-tile:hover .link-del { opacity: 1; }
.link-del:hover { color: #b91c1c; background: #fdf0f0; }
html[data-theme="dark"] .link-del:hover { background: #2a1616; color: #f87171; }
html[data-theme="dark"] .link-tile img { background: #fff; padding: 3px; }

/* ------------------------------------------------- glisser-déposer élégant */
.card.dragging {
  opacity: .35;
  border-style: dashed;
  border-color: var(--blue);
  box-shadow: none;
  transform: none;
}
.drag-float {
  position: fixed;
  left: -9999px;
  top: -9999px;
  z-index: 300;
  pointer-events: none;
  transform: rotate(3deg) scale(1.04);
  box-shadow: 0 18px 40px rgba(23, 32, 58, .35);
  border-radius: 12px;
  background: var(--panel);
}
html[data-theme="dark"] .drag-float { box-shadow: 0 18px 40px rgba(0, 0, 0, .6); }
@keyframes drop-pop {
  0% { transform: scale(.9); box-shadow: 0 0 0 4px var(--blue-soft); }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.card.dropped { animation: drop-pop .35s ease; }

/* --------------------------- champs importants vides : surbrillance jaune */
.a-remplir-vide {
  background: #fef9c3 !important;
  border-color: #fde047 !important;
}
.a-remplir-vide::placeholder { color: #a16207; opacity: .7; }
html[data-theme="dark"] .a-remplir-vide {
  background: #35300f !important;
  border-color: #856a10 !important;
}
html[data-theme="dark"] .a-remplir-vide::placeholder { color: #d9b44a; }

/* ------------------------------------------- menu de choix feuille de route */
.cal-head { position: relative; }
.route-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lift);
  padding: 6px;
  z-index: 60;
  min-width: 250px;
  animation: modal-in .15s ease;
}
.route-menu-titre {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--blue);
  padding: 6px 10px;
}
.route-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: none;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: left;
}
.route-item:hover { background: var(--blue-softer); }
.route-item span { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 600; }
.route-menu-note { padding: 6px 10px; font-size: 11px; color: var(--warn); }

/* lien Google Maps dans la vue semaine */
a.wk-maps { display: block; text-decoration: none; }
a.wk-maps:hover { color: var(--blue); text-decoration: underline; }

/* --------------------------------------- tableau de bord : panneaux colorés */
.dash-panel { border-top: 3px solid var(--dp, var(--line)); }
.dash-panel h3 { color: var(--dp, var(--blue)); }
.dp-pipeline  { --dp: #3AA8E8; }
.dp-poses     { --dp: #0d9488; }
.dp-controles { --dp: #be185d; }
.dp-inactifs  { --dp: #d97706; }
.dp-paiements { --dp: #16a34a; }
.dp-regies    { --dp: #7c3aed; }
html[data-theme="dark"] .dp-pipeline  { --dp: #8aa2ff; }
html[data-theme="dark"] .dp-poses     { --dp: #2dd4bf; }
html[data-theme="dark"] .dp-controles { --dp: #f472b6; }
html[data-theme="dark"] .dp-inactifs  { --dp: #fbbf24; }
html[data-theme="dark"] .dp-paiements { --dp: #4ade80; }
html[data-theme="dark"] .dp-regies    { --dp: #c4b5fd; }

/* listes : lignes nettes à deux niveaux, zébrage, hauteur bornée */
#dash-poses, #dash-controles, #dash-inactifs, #dash-paiements, #dash-regies {
  max-height: 350px;
  overflow-y: auto;
}
.dash-row { display: flex; align-items: center; gap: 10px; }
.dash-row:nth-child(even) { background: color-mix(in srgb, var(--dp, #64748b) 5%, transparent); }
.dash-row:hover { background: color-mix(in srgb, var(--dp, #64748b) 12%, transparent); }
.dash-main { flex: 1; min-width: 0; }
.dash-main b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-main .dash-sub {
  display: block;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-extra { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }

/* pastilles montants */
.chip-mpr, .chip-cee {
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.chip-mpr { background: var(--blue-soft); color: var(--blue); }
.chip-cee { background: #dcfce7; color: #15803d; }
html[data-theme="dark"] .chip-cee { background: #143323; color: #4ade80; }

/* ------------------------- classement des régies : grille bien alignée */
.dash-row.regie-row {
  display: grid;
  grid-template-columns: minmax(80px, 150px) 78px 1fr 84px;
  align-items: center;
  gap: 8px;
}
.regie-row b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.regie-row .dash-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}
.regie-row .dash-bar-track { width: 100%; height: 9px; }
.regie-row .dash-extra {
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ tâches du jour */
.tasks-view { flex: 1; overflow-y: auto; padding: 18px; }
.tasks-badge {
  background: #dc2626;
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  padding: 0 6px;
  margin-left: 5px;
  vertical-align: 2px;
}
.tasks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  align-items: start;
}
.tache-cat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--tc, var(--blue));
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  animation: fade-up .25s ease backwards;
}
.tache-cat-titre {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tc, var(--blue));
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.tache-cat-count {
  background: var(--tc, var(--blue));
  color: #fff;
  border-radius: 999px;
  padding: 0 7px;
  font-size: 11px;
  line-height: 17px;
}
.tache {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 9px;
}
.tache:hover { background: color-mix(in srgb, var(--tc, #64748b) 7%, transparent); }
.tache input[type=checkbox] { accent-color: var(--tc, var(--blue)); width: 16px; height: 16px; margin-top: 2px; }
.tache-main { flex: 1; min-width: 0; }
.tache-texte { display: block; }
.tache.faite .tache-texte { color: var(--muted); text-decoration: line-through; }
.tache-client {
  border: 0;
  background: var(--blue-soft);
  color: var(--blue);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 3px;
  cursor: pointer;
}
.tache-client:hover { background: var(--blue); color: #fff; }
.tache-meta { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.tache-del {
  border: 0;
  background: none;
  color: var(--muted);
  border-radius: 6px;
  padding: 2px 6px;
  opacity: 0;
}
.tache:hover .tache-del { opacity: 1; }
.tache-del:hover { color: #b91c1c; background: #fdf0f0; }
html[data-theme="dark"] .tache-del:hover { background: #2a1616; color: #f87171; }
.tache-add { display: flex; gap: 6px; margin-top: 10px; }
.tache-add-texte { flex: 2; min-width: 0; }
.tache-add-client { flex: 1.2; min-width: 0; font-size: 12px; }
.tache-add-btn { padding: 7px 12px; font-weight: 800; }

/* suppression d'un groupe entier de cases personnalisées */
.check-group-title.custom { display: flex; align-items: center; gap: 6px; }
.group-del {
  border: 0;
  background: none;
  color: var(--muted);
  border-radius: 5px;
  padding: 0 5px;
  font-size: 11px;
  opacity: 0;
}
.check-group-title.custom:hover .group-del { opacity: 1; }
.group-del:hover { color: #b91c1c; background: #fdf0f0; }
html[data-theme="dark"] .group-del:hover { background: #2a1616; color: #f87171; }

/* --------------------------------------------------- tableau : tri colonnes */
#table-view th[data-cle] { cursor: pointer; user-select: none; }
#table-view th[data-cle]:hover { color: var(--blue-dark); }
#table-view th.tri-asc::after { content: " ▲"; font-size: 9px; }
#table-view th.tri-desc::after { content: " ▼"; font-size: 9px; }
#table-view th.tri-asc, #table-view th.tri-desc {
  color: var(--blue-dark);
  background: color-mix(in srgb, var(--blue) 10%, var(--panel));
}

/* ------------------------------ tableau : pastilles de validation ✍️ / 🧾 */
.val-th { text-align: center !important; white-space: nowrap; }
.val-td { text-align: center; }
button.val {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--panel);
  color: transparent;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
}
button.val:hover { border-color: #16a34a; background: rgba(22, 163, 74, .1); }
button.val.ok {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
button.val.ok:hover { background: #15803d; }
html[data-theme="dark"] button.val.ok { background: #16a34a; }

/* ================================================================ MOBILE */
@media (max-width: 700px) {
  /* barre du haut compacte : recherche et onglets sur leur propre ligne */
  .topbar { padding: 8px 10px; gap: 6px; }
  .brand img { height: 20px; }
  .brand-sub { display: none; }
  .topbar input[type=search] { order: 10; flex-basis: 100%; max-width: none; }
  #filter-regie, #filter-assigne, #filter-poseur {
    order: 10;                 /* leur propre ligne, sous la recherche */
    flex: 1 1 30%;
    min-width: 0;
    padding: 6px 4px;
  }
  .view-toggle {
    order: 11; flex-basis: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .view-toggle button { flex: 1 0 auto; padding: 8px 9px; font-size: 12px; }
  #btn-archives, #btn-settings { padding: 6px 8px; font-size: 12px; }
  .btn-link, #btn-compact { display: none; }   /* CSV & compact : sur ordinateur */
  #btn-new { flex: 1; }

  /* les champs à 16px : évite le zoom automatique d'iPhone à la saisie */
  input, select, textarea, button { font-size: 16px; }
  #filter-regie, #filter-assigne, #filter-poseur, .view-toggle button,
  #btn-archives, #btn-settings { font-size: 12px; }

  /* pipeline : une colonne par écran, glissement magnétique */
  .board { scroll-snap-type: x mandatory; gap: 10px; padding: 10px; }
  .col { flex: 0 0 85vw; scroll-snap-align: center; }

  /* fiche quasi plein écran */
  .overlay { padding: 5px; }
  .modal { max-height: 97vh; border-radius: 12px; width: 100%; }
  .modal-head { padding: 10px 12px; }
  .modal-head h2 { font-size: 15px; }
  .statut-select { max-width: 45vw; }
  .modal-col { padding: 10px 12px 14px; }
  .grid2, .grid3 { gap: 7px 8px; }

  /* calendrier : mois compact, semaine empilée jour par jour */
  .cal-head { gap: 6px; }
  .cal-head .hint { display: none; }
  .cal-head h2 { font-size: 14px; min-width: 0; }
  .cal-grid:not(.week) { gap: 3px; grid-auto-rows: minmax(58px, auto); }
  .cal-grid:not(.week) .cal-chip { font-size: 9px; padding: 1px 3px; }
  .cal-grid:not(.week) .cal-chip span { display: none; }
  .cal-wnum { display: none; }
  .cal-view { overflow-x: auto; }
  .cal-grid.week { min-width: 760px; }

  /* vues pleine largeur */
  .dash-view, .tasks-view, .links-view, .table-view, .cal-view { padding: 10px; }
  .dash-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-num { font-size: 18px; }
  .dash-bar-label { flex: 0 0 120px; font-size: 11px; }
  .dash-row.regie-row { grid-template-columns: minmax(60px, 1fr) 58px 1fr 72px; gap: 5px; }
  .links-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
  .tache-add { flex-wrap: wrap; }
  .tache-add-texte { flex-basis: 100%; }

  /* réglages : lignes plus denses */
  .modal.settings { width: 100%; }
  .set-row { gap: 5px; }
}

/* ------------------------------------- raccourcis liens utiles (barre haut) */
.quick-links { display: flex; gap: 5px; align-items: center; }
.qlink {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  text-decoration: none;
  font-size: 14px;
  transition: transform .1s, box-shadow .12s, border-color .12s;
}
.qlink:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--blue);
}
.qlink img { width: 26px; height: 26px; border-radius: 6px; }
html[data-theme="dark"] .qlink img { background: #fff; padding: 1px; }
@media (max-width: 700px) {
  .quick-links { display: none; }   /* sur mobile : passer par l'onglet Liens */
}

/* ------------------------------------------------------- toasts typés */
.toast.ok { background: #14532d; color: #dcfce7; }
.toast.err { background: #7f1d1d; color: #fee2e2; }
.toast { animation: toast-in .25s ease; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }

/* -------------------------------------------------- dialogues maison */
.modal.dlg { width: min(360px, 92vw); padding: 20px 22px; }
.modal.dlg h2 { margin: 0 0 6px; font-size: 16px; }
.dlg-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 10px;
}
.dlg-actions { justify-content: flex-end; }

/* ------------------------------------------- fondu entre les onglets */
.board, .table-view, .dash-view, .cal-view, .links-view, .tasks-view {
  animation: vue-in .18s ease;
}
@keyframes vue-in { from { opacity: 0; transform: translateY(5px); } }

/* -------------------------------- ombres de bord du pipeline (scroll) */
.board::before, .board::after {
  content: "";
  position: sticky;
  z-index: 4;
  flex: 0 0 16px;
  pointer-events: none;
  align-self: stretch;
}
.board::before {
  left: 0;
  margin-right: -28px;
  background: linear-gradient(90deg, var(--bg), transparent);
}
.board::after {
  right: 0;
  margin-left: -28px;
  background: linear-gradient(270deg, var(--bg), transparent);
}

/* ------------------------------------------- écran « Qui êtes-vous ? » */
#user-overlay {
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(29, 58, 181, .35), transparent),
    radial-gradient(900px 500px at 80% 90%, rgba(13, 148, 136, .3), transparent),
    rgba(15, 23, 42, .55);
}
.accueil-carte { text-align: center; }
.accueil-logo { height: 34px; margin: 2px auto 8px; display: block; }
html[data-theme="dark"] .accueil-logo { filter: brightness(1.9) saturate(.85); }

/* -------------------------------------------------------- import assisté */
.imp-col {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.imp-row .imp-champ { flex: 1; min-width: 0; font-size: 12px; }
#imp-fichier { width: 100%; }

/* --------------------------------------- planning semaine par poseur */
.cal-grid.week {
  display: grid;
  grid-template-columns: 190px repeat(7, 1fr);
  grid-auto-rows: auto;
  gap: 6px;
  align-content: start;
}
.pl-corner {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  align-self: end;
  padding: 4px 6px;
}
.pl-jour {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
  text-transform: capitalize;
  padding: 4px 2px;
  border-radius: 8px;
}
.pl-jour b { font-size: 18px; margin-left: 5px; }
.pl-jour.today { background: var(--blue-soft); }
.pl-jour.we { color: var(--muted); }
.pl-label {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 700;
  font-size: 13px;
  min-height: 58px;
}
.pl-label .avatar { width: 26px; height: 26px; font-size: 12px; }
.pl-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-count {
  background: color-mix(in srgb, var(--p-color, #64748b) 15%, var(--panel));
  color: var(--p-color, #64748b);
  border-radius: 999px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 19px;
}
.pl-label.pl-ctrl { border-left: 3px solid #be185d; }
.pl-cell {
  background: color-mix(in srgb, var(--panel) 62%, var(--bg));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pl-cell.drag-over {
  outline: 2px dashed var(--blue);
  outline-offset: -4px;
  background: var(--blue-softer);
}
.pl-chip.dragging { opacity: .35; border-style: dashed; }
.pl-cell.today { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.pl-cell.we { background: color-mix(in srgb, var(--panel) 38%, var(--bg)); }
.pl-chip {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--p-color, var(--muted));
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 13px;
  cursor: url("/static/cursor-pan.svg?v=da3") 13 11, grab;
  line-height: 1.4;
  transition: transform .1s, box-shadow .12s;
}
.pl-chip:active { cursor: url("/static/cursor-pan-actif.svg?v=da3") 13 13, grabbing; }
.pl-label { min-height: 130px; font-size: 14px; }
.pl-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.pl-chip b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-chip span { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-sign { color: #b45309 !important; font-weight: 700; }
html[data-theme="dark"] .pl-sign { color: #fbbf24 !important; }
.pl-chip.ctrl {
  border-left-color: var(--c-color, #be185d);
  background: color-mix(in srgb, var(--c-color, #be185d) 8%, var(--panel));
}
.pl-heure {
  font-size: 15px;
  color: color-mix(in srgb, var(--c-color, #be185d) 80%, black);
  white-space: nowrap;
}
html[data-theme="dark"] .pl-heure { color: color-mix(in srgb, var(--c-color, #be185d) 60%, white); }
.pl-ctrl-nom { color: var(--text) !important; font-weight: 700; }

.set-agrement { flex: 1; min-width: 0; font-size: 12px; }

.set-eprel { flex: 1; min-width: 0; font-size: 12px; }

/* ------------------------------------------------ pan latéral du pipeline */
.board,
.board .card,
.board .card:active {
  cursor: url("/static/cursor-fleche.svg?v=da3") 7 3, default;
}
.board.panning { user-select: none; }
.board.panning, .board.panning * {
  cursor: url("/static/cursor-pan-actif.svg?v=da3") 13 13, grabbing !important;
}


/* flèche ACL2R par défaut sur tout le site */
html, body {
  cursor: url("/static/cursor-fleche.svg?v=da3") 7 3, default;
}

/* --------------------------------------------------- wordmark CRONOS */
.brand-word {
  font-family: Anton, Impact, "Arial Narrow", sans-serif;
  font-size: 21px;
  letter-spacing: .02em;
  line-height: 1;
  color: #000;
  display: flex;
  align-items: center;
  gap: .05em;
  align-self: center;
}
.brand-word svg { width: .78em; height: .78em; margin-top: -.04em; color: var(--blue); }
html[data-theme="dark"] .brand-word svg { color: var(--sky); }

/* =========================================================
   CRONOS+ — DA poussée validée par Enzo (02/09/2026) :
   header noir, onglets languettes, KPI Anton, colonnes épurées.
   ========================================================= */

/* ---------- header noir ---------- */
.topbar { background: #000; border-bottom: 0; box-shadow: none; padding-bottom: 8px; }
.topbar .brand-word { color: #fff; }
.topbar .brand-word svg { color: var(--sky); }
.topbar .brand-sub { color: #9AA0AA; }
.topbar input[type=search], .topbar select {
  background: #1C1C1C; border-color: #1C1C1C; color: #fff; border-radius: 999px;
}
.topbar input[type=search]::placeholder { color: #8A8F98; }
.topbar button.ghost, .topbar .btn-link {
  background: #1C1C1C; border-color: #1C1C1C; color: #fff; border-radius: 999px;
}
.topbar button.ghost:hover, .topbar .btn-link:hover { background: #2A2A2A; }
.topbar button.primary { border-radius: 999px; }
.topbar #btn-archives.active { background: #3a2f12; color: #fbbf24; }

/* onglets : languettes — l'actif se fond dans le fond de page */
.topbar .view-toggle button {
  background: transparent; border-color: transparent; color: #CFD3DA;
  border-radius: 12px 12px 0 0; font-weight: 500; margin-left: 0;
}
.topbar .view-toggle button.active {
  background: var(--bg); color: var(--text); border-color: transparent; font-weight: 600;
}
.topbar .view-toggle button:hover:not(.active) { color: #fff; border-color: transparent; }
.tasks-badge { background: #E5484D; color: #fff; }

/* ---------- KPI accueil : chiffres Anton, 1re tuile noire, 2e ciel ---------- */
.stat-tile { border-radius: 16px; border: 0; box-shadow: var(--shadow); padding: 14px 16px; }
.stat-num {
  font-family: Anton, Impact, "Arial Narrow", sans-serif;
  font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: .01em;
  color: var(--text);
}
.dash-stats .stat-tile:first-child { background: #000; }
.dash-stats .stat-tile:first-child .stat-num { color: #fff; }
.dash-stats .stat-tile:first-child .stat-label { color: #9AA0AA; }
.dash-stats .stat-tile:first-child .stat-ico { background: #1C1C1C; }
.dash-stats .stat-tile:nth-child(2) { background: var(--sky); }
.dash-stats .stat-tile:nth-child(2) .stat-num,
.dash-stats .stat-tile:nth-child(2) .stat-label { color: #000; }
.dash-stats .stat-tile:nth-child(2) .stat-ico { background: rgba(255,255,255,.5); }

/* panneaux du tableau de bord */
.dash-panel { border-radius: 16px; border: 0; }

/* ---------- pipeline : colonnes épurées, cartes fond de page ---------- */
.col { background: var(--panel); border: 0; border-radius: 16px; box-shadow: var(--shadow); }
.col-head { border-radius: 16px 16px 0 0; }
.card { background: var(--bg); box-shadow: none; border-radius: 12px; }
.card:hover { box-shadow: var(--shadow-lift); }
html[data-theme="dark"] .col { background: var(--panel); }
html[data-theme="dark"] .card { background: #101216; }

/* ---------- boutons en pills ---------- */
button.primary, .links-head .primary { border-radius: 999px; }

/* ---------- calendrier : segment Mois/Semaine ---------- */
.cal-head .view-toggle button {
  border-radius: 999px; margin-left: 2px; border-color: transparent;
  background: var(--panel);
}
.cal-head .view-toggle button.active { background: #000; color: #fff; }

/* pictos ligne du menu (DA Cronos) */
.tab-ic {
  width: 15px;
  height: 15px;
  vertical-align: -2.5px;
  margin-right: 3px;
}

/* ============================================================
   CRONOS mobile — maquette d'Enzo (02/09) : header empilé façon
   app, boutons ronds, et DÉZOOM des vues denses (pipeline,
   tableau, calendrier). Accueil et Liens gardent leur taille.
   ============================================================ */
@media (max-width: 700px) {
  .topbar { padding: 12px 12px 0; gap: 8px; }

  /* rangée 1 : marque (wordmark + sous-titre) à gauche, boutons ronds à droite */
  .brand { order: 0; margin-right: auto; flex-direction: column;
           align-items: flex-start; gap: 2px; }
  .brand-word { font-size: 19px; }
  .brand-sub { display: block; font-size: 9px; color: #9AA0AA;
               letter-spacing: .04em; }
  #btn-archives, #btn-settings, #btn-theme, #btn-logout {
    order: 1; width: 34px; height: 34px; padding: 0; border-radius: 50%;
    font-size: 0; display: grid; place-items: center;
  }
  #user-chip { order: 2; height: 34px; padding: 0 12px; font-size: 13px; }

  /* bouton principal pleine largeur, puis recherche, puis filtres */
  #btn-new { order: 3; flex-basis: 100%; padding: 12px; font-size: 15px; }
  .topbar input[type=search] { order: 4; }
  #filter-regie, #filter-assigne, #filter-poseur { order: 5; border-radius: 12px; }

  /* onglets languettes collés au bas du header noir */
  .view-toggle { order: 6; margin: 2px -12px 0; padding: 0 12px;
                 flex-basis: calc(100% + 24px); }
  .view-toggle button { font-size: 12px; }

  /* --------- dézoom des vues denses --------- */
  .board { zoom: .78; }
  .table-view { zoom: .56; }
  .cal-view { zoom: .60; }
  /* fiche client : dézoomée, pleine largeur, défilement vertical uniquement */
  #modal-overlay { overflow: hidden; padding: 4px; }
  #modal-overlay .modal {
    zoom: .60;
    width: 166.6%;              /* compense le zoom : rendu = pleine largeur */
    max-width: 166.6%;
    overflow-x: hidden;
    touch-action: pan-y;
  }
  #modal-overlay .modal-body {
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
  }
  #modal-overlay .modal input,
  #modal-overlay .modal select,
  #modal-overlay .modal textarea { min-width: 0; max-width: 100%; }
}

/* -------------------------------------- éditeur de checklist (Réglages) */
.chk-groupe {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.chk-gtitre {
  width: 100%;
  font-weight: 700;
  margin-bottom: 8px;
  border-color: transparent;
  background: var(--blue-softer);
}
.chk-gtitre:hover, .chk-gtitre:focus { border-color: var(--line); }
.chk-lock { padding: 0 9px; opacity: .7; }

/* bouton ✏️ d'édition de la checklist dans la fiche */
.chk-toggle { margin-left: auto; padding: 3px 9px; font-size: 13px; }
.chk-toggle.active { background: var(--sky); border-color: var(--sky); color: #000; }
.modal .chk-groupe { background: var(--blue-softer); border: 0; }

/* ----------------------------------------- tâches terminées (repliées) */
.tache-terminees { grid-column: 1 / -1; opacity: .92; }
.tache-term-toggle { cursor: pointer; user-select: none; }
.term-chevron { font-size: 12px; width: 14px; display: inline-block; }
.tache-cat-chip {
  font-size: 10px;
  font-weight: 600;
  background: var(--blue-softer);
  color: var(--muted);
  border-radius: 999px;
  padding: 2px 8px;
}


/* =========================================================
   Menu latéral (ordinateur uniquement, body.has-sidebar) :
   66 px d'icônes, 176 px au survol, transition fluide.
   ========================================================= */
body.has-sidebar { flex-direction: row; }
body.has-sidebar .main-zone {
  flex: 1; min-width: 0; height: 100vh; margin-left: 66px;
  display: flex; flex-direction: column; overflow: hidden;
}
body.has-sidebar .sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 40;
  width: 66px; background: #000; color: #fff;
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px 8px 12px; box-sizing: border-box; overflow: hidden;
  transition: width .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
body.has-sidebar .sidebar:hover,
body.has-sidebar .sidebar:focus-within { width: 176px; box-shadow: 14px 0 34px rgba(0,0,0,.28); }

/* marque : cadran seul, puis CR◔NOS + sous-titre */
body.has-sidebar .sidebar .brand {
  flex-direction: column; align-items: flex-start; gap: 0;
  padding-left: 10px; height: 44px; justify-content: center;
}
body.has-sidebar .sidebar .brand-word {
  color: #fff; font-size: 0; gap: .05em;
  transition: font-size .22s ease;
}
body.has-sidebar .sidebar .brand-word svg {
  width: 30px; height: 30px; margin: 0; color: var(--sky);
  transition: width .22s ease, height .22s ease;
}
body.has-sidebar .sidebar .brand-sub {
  display: block; font-size: 8px; letter-spacing: .04em; color: #9AA0AA;
  opacity: 0; max-height: 0; overflow: hidden; white-space: nowrap;
  transition: opacity .2s ease, max-height .2s ease;
}
body.has-sidebar .sidebar:hover .brand-word,
body.has-sidebar .sidebar:focus-within .brand-word { font-size: 21px; }
body.has-sidebar .sidebar:hover .brand-word svg,
body.has-sidebar .sidebar:focus-within .brand-word svg { width: .78em; height: .78em; }
body.has-sidebar .sidebar:hover .brand-sub,
body.has-sidebar .sidebar:focus-within .brand-sub { opacity: 1; max-height: 14px; }

/* onglets en colonne */
body.has-sidebar .sidebar .view-toggle { display: flex; flex-direction: column; gap: 4px; }
body.has-sidebar .sidebar .view-toggle button {
  position: relative; width: 100%; margin: 0; display: flex; align-items: center;
  justify-content: flex-start; gap: 11px; padding: 10px 0 10px 15px;
  border: 0; border-radius: 11px; background: transparent; color: #CFD3DA;
  font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden;
  transition: background .15s ease, color .15s ease;
}
body.has-sidebar .sidebar .view-toggle button:hover { background: #1C1C1C; color: #fff; }
body.has-sidebar .sidebar .view-toggle button.active { background: var(--sky); color: #000; font-weight: 600; }
body.has-sidebar .sidebar .tab-ic { width: 19px; height: 19px; margin: 0; flex: none; }
body.has-sidebar .sidebar .sb-lbl { opacity: 0; transition: opacity .18s ease; }
body.has-sidebar .sidebar:hover .sb-lbl,
body.has-sidebar .sidebar:focus-within .sb-lbl { opacity: 1; transition-delay: .06s; }
body.has-sidebar .sidebar .tasks-badge {
  position: absolute; top: 5px; left: 32px; margin: 0; font-size: 9px; padding: 0 5px;
  transition: left .28s cubic-bezier(.2,.7,.2,1);
}
body.has-sidebar .sidebar:hover .tasks-badge,
body.has-sidebar .sidebar:focus-within .tasks-badge { left: auto; right: 12px; top: 11px; }

/* bas : profil + déconnexion */
body.has-sidebar .sb-bas { margin-top: auto; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
body.has-sidebar .sb-bas #user-chip {
  position: relative; height: 36px; min-width: 36px; padding: 0 0 0 36px; border-radius: 18px;
  font-size: 0; overflow: hidden; white-space: nowrap; display: flex; align-items: center;
  background: var(--sky); color: #000; border: 0;
  transition: font-size .2s ease, padding .28s cubic-bezier(.2,.7,.2,1);
}
body.has-sidebar .sb-bas #user-chip::before {
  content: attr(data-ini); position: absolute; left: 0; top: 0; width: 36px; height: 36px;
  display: grid; place-items: center; font-size: 14px; font-weight: 800;
}
body.has-sidebar .sidebar:hover .sb-bas #user-chip,
body.has-sidebar .sidebar:focus-within .sb-bas #user-chip { font-size: 12px; padding-right: 12px; }
body.has-sidebar .sb-bas #btn-logout {
  width: 36px; height: 36px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: #1C1C1C; border-color: #1C1C1C; color: #fff; margin-left: 7px;
}
body.has-sidebar .sb-bas #btn-logout svg { display: block; }

/* barre du haut sans la marque : plus basse, pleine largeur */
body.has-sidebar .topbar { padding: 10px 16px; }
body.has-sidebar .topbar input[type=search] { max-width: 420px; }

/* tableau : lignes alternées blanc / bleu ciel pâle pour la lisibilité */
.table-view tbody tr:nth-child(even) td { background: #EAF6FF; }
.table-view tbody tr:hover td { background: #D9F1FF; }
html[data-theme="dark"] .table-view tbody tr:nth-child(even) td { background: #16232e; }
html[data-theme="dark"] .table-view tbody tr:hover td { background: #1d3040; }

/* ---------- mode nuit : menu latéral, tableau, tuiles ---------- */
html[data-theme="dark"] body.has-sidebar .sidebar {
  background: #000; border-right: 1px solid #23272E;
}
html[data-theme="dark"] body.has-sidebar .sidebar:hover,
html[data-theme="dark"] body.has-sidebar .sidebar:focus-within {
  box-shadow: 14px 0 34px rgba(0,0,0,.6); border-right-color: #2E333B;
}
html[data-theme="dark"] body.has-sidebar .sidebar .view-toggle button:hover { background: #17191D; }
html[data-theme="dark"] body.has-sidebar .sidebar .view-toggle button.active { background: var(--sky); color: #000; }
html[data-theme="dark"] body.has-sidebar .sb-bas #btn-logout { background: #17191D; border-color: #23272E; }
html[data-theme="dark"] body.has-sidebar .topbar { border-bottom: 1px solid #23272E; }
/* tableau : alternance visible mais douce sur fond sombre */
html[data-theme="dark"] .table-view tbody tr:nth-child(odd) td { background: #1A1C20; }
html[data-theme="dark"] .table-view tbody tr:nth-child(even) td { background: #141B22; }
html[data-theme="dark"] .table-view tbody tr:hover td { background: #1B2A38; }
/* tuile noire de l'accueil : un liseré pour se détacher du fond */
html[data-theme="dark"] .dash-stats .stat-tile:first-child { border: 1px solid #2A2D33; }
html[data-theme="dark"] .stat-tile { border: 1px solid #23272E; }


/* =========================================================
   Effets (03/09/2026) : glisser-déposer, transitions de vue,
   indicateur du menu, coches, écrans vides, ascenseurs, cartes,
   bouton Déconnexion.
   ========================================================= */

/* 1. colonne cible pendant le glisser : halo bleu ciel */
.col { transition: background .18s ease, box-shadow .18s ease; }
.col.drag-over {
  outline: 2px dashed var(--sky-deep, #3AA8E8); outline-offset: -5px;
  background: var(--sky-pale, #D9F1FF);
  box-shadow: inset 0 0 0 4px rgba(58,168,232,.15), 0 0 0 3px rgba(143,214,255,.45);
}
html[data-theme="dark"] .col.drag-over { background: #0B2A3D; }

/* 2. la vue qui arrive : fondu + léger glissement */
@keyframes vue-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vue-in { animation: vue-in .24s ease-out; }

/* 3. menu latéral : pastille active qui glisse */
body.has-sidebar .sidebar .view-toggle { position: relative; }
body.has-sidebar .sidebar .sb-ind {
  position: absolute; left: 0; right: 0; top: 0; height: 0; border-radius: 11px;
  background: var(--sky); z-index: 0; pointer-events: none;
}
body.has-sidebar .sidebar .sb-ind.pret { transition: top .3s cubic-bezier(.2,.7,.2,1), height .2s ease; }
body.has-sidebar .sidebar .view-toggle button { z-index: 1; }
body.has-sidebar .sidebar .view-toggle button.active,
body.has-sidebar .sidebar .view-toggle button.active:hover { background: transparent; }

/* 5. coches de la checklist qui se dessinent */
.check-item input {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0;
  border: 2px solid var(--line); border-radius: 5px; background: var(--panel);
  position: relative; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.check-item input:hover { border-color: var(--sky-deep, #3AA8E8); }
.check-item input:checked { background: #16a34a; border-color: #16a34a; }
.check-item input::after {
  content: ""; position: absolute; left: 4.5px; top: 0.5px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; opacity: 0;
  transform: rotate(45deg) scale(0);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .12s ease;
}
.check-item input:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }
.check-item input:active { transform: scale(.9); }
@keyframes prog-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
  50% { box-shadow: 0 0 10px 2px rgba(22,163,74,.6); }
}
.card-prog.complet { overflow: visible; animation: prog-glow 1.5s ease-in-out 3; }

/* 7. écrans vides illustrés */
.empty-state svg {
  display: block; width: 64px; height: 48px; margin: 0 auto 8px;
  fill: none; stroke: var(--sky-deep, #3AA8E8); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; opacity: .75;
}
.empty-state { padding: 26px 10px 30px; }

/* 9. ascenseurs aux couleurs CRONOS */
* { scrollbar-width: thin; scrollbar-color: #8FD6FF transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #8FD6FF; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #3AA8E8; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* 10. cartes qui se soulèvent au survol */
.card { transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, border-color .12s; }
.card:hover:not(.dragging) {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08);
}
html[data-theme="dark"] .card:hover:not(.dragging) {
  box-shadow: 0 14px 28px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
}

/* bouton Déconnexion : même rangée que les onglets, libellé au survol */
body.has-sidebar .sb-bas { align-items: stretch; }
body.has-sidebar .sb-bas #btn-logout {
  width: 100%; height: 38px; margin: 0; border-radius: 11px; padding: 0 0 0 15px;
  display: flex; align-items: center; justify-content: flex-start; gap: 11px;
  background: transparent; border: 0; color: #CFD3DA; font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; transition: background .15s ease, color .15s ease;
}
body.has-sidebar .sb-bas #btn-logout svg { width: 19px; height: 19px; flex: none; }
body.has-sidebar .sb-bas #btn-logout:hover { background: #3a1517; color: #ff8a8f; }
html[data-theme="dark"] body.has-sidebar .sb-bas #btn-logout { background: transparent; border: 0; }

/* ---- contrôle renforcé : courrier MaPrimeRénov ---- */
.bloc-courrier { border: 1px dashed #f59e0b; background: #fffbeb; border-radius: 12px; padding: 10px 12px 12px; }
.bloc-courrier-titre { font-size: 12px; font-weight: 700; color: #92400e; margin-bottom: 8px; }
.bloc-courrier .grid2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
html[data-theme="dark"] .bloc-courrier { background: #2a1f08; border-color: #b45309; }
html[data-theme="dark"] .bloc-courrier-titre { color: #fbbf24; }
.badge.courrier-non { background: #fee2e2; color: #991b1b; }
.badge.courrier-ok { background: #dcfce7; color: #166534; }
.badge.courrier-code { background: #e0e7ff; color: #3730a3; }
.badge.courrier-attente { background: #fef3c7; color: #92400e; border: 1px dashed #f59e0b; }

/* ---- checklist progressive ---- */
.check-group.locked { opacity: .55; }
.check-group.locked .check-group-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; cursor: default; }
.check-group.locked .check-group-title small { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--muted); }
.check-group.en-cours { border-left: 3px solid var(--sky, #8FD6FF); padding-left: 8px; margin-left: -11px; border-radius: 0 8px 8px 0; }
.chk-now { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
           background: var(--sky, #8FD6FF); color: #000; border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; }
.card-next { font-size: 11.5px; color: var(--muted); margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-next.ok { color: #16a34a; }
.chk-depuis-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin: 4px 0 6px; }
.chk-depuis-row select { font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--input-bg, #fff); color: var(--text); }

/* état MPR sur la carte */
.badge.mpr-non { background: #fee2e2; color: #991b1b; }
.badge.mpr-attente { background: #fef3c7; color: #92400e; }
.badge.mpr-ok { background: #dcfce7; color: #166534; }

/* barre de recherche en bleu ciel : visible sur le bandeau noir */
.topbar input[type=search] {
  background: var(--sky, #8FD6FF); border-color: var(--sky, #8FD6FF); color: #000;
  font-weight: 500; transition: background .15s ease, box-shadow .15s ease;
}
.topbar input[type=search]::placeholder { color: #0f3a52; opacity: .8; }
.topbar input[type=search]:focus {
  background: #fff; border-color: #fff; outline: none;
  box-shadow: 0 0 0 3px rgba(143,214,255,.55);
}

/* badge « Devis » cliquable sur la carte (Pose planifiée → Contrôle renforcé) */
button.badge.devis { font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; border: 1px solid transparent;
                     line-height: 1.5; transition: transform .12s ease, filter .12s ease; }
button.badge.devis:hover { transform: translateY(-1px); filter: brightness(.96); }
button.badge.devis:active { transform: scale(.96); }
.badge.devis-non { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.badge.devis-envoye { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.badge.devis-signe { background: #dcfce7; color: #166534; border-color: #bbf7d0; }

/* ---- chaîne d'étapes ---- */
#etape-suivante { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px;
                  padding: 10px 12px; border-radius: 12px; background: #dcfce7; color: #166534; font-weight: 600; font-size: 13px; }
#etape-suivante button.primary { padding: 7px 14px; font-size: 13px; }
html[data-theme="dark"] #etape-suivante { background: #14532d; color: #dcfce7; }
.chk-tache { font: inherit; font-size: 13px; background: transparent; border: 1px solid var(--line); border-radius: 8px;
             padding: 2px 6px; cursor: pointer; opacity: .45; }
.chk-tache.on { opacity: 1; background: var(--sky-pale, #D9F1FF); border-color: var(--sky, #8FD6FF); }
.tache-lien { font-size: 11px; opacity: .7; margin-left: 4px; }