/* thesr. — brand layer, loaded last on every page shell.
 *
 * thesr_tokens.css names the colours; the stylesheets were remapped to them at
 * source. What is left for this file is the handful of places where a colour
 * comes from a framework default instead of from us: links, focus, text
 * selection, form controls, and the success / warning / danger / info states of
 * Bootstrap's alerts and badges. Low specificity on purpose and no !important:
 * a page that styles its own state keeps it.
 */

:root {
  --bs-primary: var(--thesr-blue-600);
  --bs-primary-rgb: 43, 93, 215;
  --bs-link-color: var(--thesr-blue-600);
  --bs-link-color-rgb: 43, 93, 215;
  --bs-link-hover-color: var(--thesr-blue-800);
  --bs-link-hover-color-rgb: 26, 55, 126;
  --bs-success: var(--thesr-green-600);
  --bs-success-rgb: 0, 129, 79;
  --bs-warning: var(--thesr-amber-400);
  --bs-warning-rgb: 242, 187, 49;
  --bs-danger: var(--thesr-red-600);
  --bs-danger-rgb: 195, 35, 36;
  --bs-info: var(--thesr-blue-500);
  --bs-info-rgb: 67, 119, 240;
  --bs-body-color: var(--thesr-text);
  --bs-border-color: var(--thesr-line);
  --bs-focus-ring-color: rgba(43, 93, 215, 0.28);
}

::selection {
  background: var(--thesr-blue-100);
  color: var(--thesr-encre);
}

input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: var(--thesr-blue-600);
}

.form-control:focus,
.form-select:focus,
.custom-select:focus,
.custom-control-input:focus ~ .custom-control-label::before {
  border-color: var(--thesr-blue-400);
  box-shadow: var(--focus-ring);
}
.btn:focus,
.btn.focus,
.btn:focus-visible {
  box-shadow: var(--focus-ring);
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--thesr-blue-600);
  border-color: var(--thesr-blue-600);
}
.progress-bar {
  background-color: var(--thesr-blue-600);
}
.page-item.active .page-link {
  background-color: var(--thesr-marine);
  border-color: var(--thesr-marine);
  color: #fff;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--thesr-marine);
  color: #fff;
}

/* Alerts: pale ground, a line, readable ink. */
.alert-success {
  background: var(--success-soft);
  border-color: var(--success-line);
  color: var(--success-ink);
}
.alert-warning {
  background: var(--warning-soft);
  border-color: var(--warning-line);
  color: var(--warning-ink);
}
.alert-danger {
  background: var(--danger-soft);
  border-color: var(--danger-line);
  color: var(--danger-ink);
}
.alert-info {
  background: var(--info-soft);
  border-color: var(--info-line);
  color: var(--info-ink);
}

/* Badges (Bootstrap 4 contextual classes and Bootstrap 5 *-subtle helpers). */
.badge-primary,
.badge-info {
  background: var(--info-soft);
  color: var(--info-ink);
}
.badge-success {
  background: var(--success-soft);
  color: var(--success-ink);
}
.badge-warning {
  background: var(--warning-soft);
  color: var(--warning-ink);
}
.badge-danger {
  background: var(--danger-soft);
  color: var(--danger-ink);
}
.badge-secondary,
.badge-light {
  background: var(--sunken);
  color: var(--ink-2);
}
.bg-primary-subtle { background-color: var(--info-soft) !important; }
.text-primary { color: var(--thesr-blue-600) !important; }
.text-success { color: var(--success-ink) !important; }
.text-warning { color: var(--warning-ink) !important; }
.text-danger { color: var(--danger) !important; }
.border-primary { border-color: var(--thesr-blue-600) !important; }

/* Buttons the app has not restyled itself. */
.btn-success {
  background-color: var(--success);
  border-color: var(--success);
  color: #fff;
}
.btn-success:hover {
  background-color: var(--thesr-green-700);
  border-color: var(--thesr-green-700);
}
.btn-danger {
  background-color: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-danger:hover {
  background-color: var(--thesr-red-700);
  border-color: var(--thesr-red-700);
}
.btn-warning {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.btn-warning:hover {
  background-color: var(--thesr-amber-300);
  border-color: var(--thesr-amber-300);
}
.btn-info {
  background-color: var(--info);
  border-color: var(--info);
  color: #fff;
}
.btn-info:hover {
  background-color: var(--thesr-blue-700);
  border-color: var(--thesr-blue-700);
}
.btn-outline-danger {
  color: var(--danger);
  border-color: var(--danger-line);
}
.btn-outline-danger:hover {
  background-color: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-outline-success {
  color: var(--success);
  border-color: var(--success-line);
}
.btn-outline-success:hover {
  background-color: var(--success);
  border-color: var(--success);
  color: #fff;
}

/* The landing and the pages that borrow its language: one warm note, one blue
   one. Marine stays the colour of every button. */
.l-tag {
  background: var(--thesr-blue-50);
  border-color: var(--thesr-blue-200);
  color: var(--thesr-blue-700);
}
.l-tag--light {
  background: var(--thesr-blue-50);
  border-color: var(--thesr-blue-200);
  color: var(--thesr-blue-800);
}
.l-metric__suf {
  color: var(--thesr-amber-600);
}

/* ── Colour on the landing (18 October) ─────────────────────────
   Marine stays the colour of every button and every heading. The rest of the
   palette says what a thing is: blue for what you do, amber for what is
   highlighted, green for what is safe and done. Tiles, not fills: a tinted
   ground and a darker ink of the same family, never a saturated block. */
.l-uc__grid > .l-uccard:nth-child(1) .l-uccard__icon,
.l-seccard:nth-child(1) .l-seccard__icon,
.l-seccard:nth-child(4) .l-seccard__icon,
.l-connect__card:nth-child(1) .l-connect__card-icon,
.l-feature__num {
  background: var(--thesr-blue-50);
  color: var(--thesr-blue-700);
  box-shadow: inset 0 0 0 1px var(--thesr-blue-200);
}
.l-uc__grid > .l-uccard:nth-child(2) .l-uccard__icon,
.l-seccard:nth-child(2) .l-seccard__icon,
.l-connect__card:nth-child(2) .l-connect__card-icon {
  background: var(--thesr-amber-50);
  color: var(--thesr-amber-700);
  box-shadow: inset 0 0 0 1px var(--thesr-amber-200);
}
.l-uc__grid > .l-uccard:nth-child(3) .l-uccard__icon,
.l-seccard:nth-child(3) .l-seccard__icon {
  background: var(--thesr-green-50);
  color: var(--thesr-green-700);
  box-shadow: inset 0 0 0 1px var(--thesr-green-200);
}
.l-uc__grid > .l-uccard:nth-child(2) .l-uccard__tag { color: var(--thesr-amber-700); }
.l-uc__grid > .l-uccard:nth-child(3) .l-uccard__tag { color: var(--thesr-green-700); }
.l-uc__grid > .l-uccard:nth-child(1) .l-uccard__tag { color: var(--thesr-blue-700); }
.l-pcard__badge { background: var(--thesr-amber-400); color: var(--thesr-marine); }
.l-feature__num { font-variant-numeric: tabular-nums; }
.l-faq .l-faq__item[open],
.l-faq details[open] { border-left: 3px solid var(--thesr-blue-500); }

/* In the steps of « Comment ça marche », the bar that counts is blue. */
.l-how__layout.is-moving .l-how__step.is-on .l-how__bar::after { background: var(--thesr-blue-500); }
.l-pcard__feats li > i { color: var(--thesr-green-600); }
.l-pcard--featured .l-pcard__feats li > i,
.l-pcard--enterprise .l-pcard__feats li > i { color: var(--thesr-green-200); }

/* ── In the application ─────────────────────────────────────────
   The interface was navy on paper from end to end. Colour now says what a
   thing is, the way it does on the landing: blue for where you are and what
   you do, amber for what you file, green for what is shared and done, red for
   what is wrong. Icons and small tiles carry it, never large fills; the ink
   stays Marine. */

/* The rail: every icon in the logo's Marine, so the rail reads as one mark; the place you are
   in is the tinted chip (--t-tint, app_shell.css), not a colour of its own. The assistants'
   mark keeps its shimmer only while one is at work (.is-live, ai_room.js). */
body.app-body[data-app-page="app"] #app-sidebar .sidebar-link .icon i { color: var(--thesr-marine); }
body.app-body[data-app-page="app"] #app-sidebar #nav-ai:not(.is-live) .icon i {
  background: none !important;
  -webkit-text-fill-color: var(--thesr-marine);
  color: var(--thesr-marine) !important;
}
body.app-body[data-app-page="app"] .sidebar-link:hover .icon i { filter: saturate(1.15); }

/* Home. */
body.app-body .dashboard-hero__welcome { color: var(--thesr-blue-600); }
body.app-body .dashboard-stat__icon { border-radius: 10px; }
body.app-body .dashboard-stat:nth-child(1) .dashboard-stat__icon { background: var(--thesr-blue-50); color: var(--thesr-blue-700); }
body.app-body .dashboard-stat:nth-child(2) .dashboard-stat__icon { background: var(--thesr-amber-50); color: var(--thesr-amber-700); }
body.app-body .dashboard-stat:nth-child(3) .dashboard-stat__icon { background: var(--thesr-green-50); color: var(--thesr-green-700); }
body.app-body .dashboard-getting-started__heading > div > span { color: var(--thesr-amber-700); }
body.app-body .dashboard-getting-started__steps li:nth-child(1) .dashboard-getting-started__check { background: var(--thesr-blue-50); color: var(--thesr-blue-700); }
body.app-body .dashboard-getting-started__steps li:nth-child(2) .dashboard-getting-started__check { background: var(--thesr-amber-50); color: var(--thesr-amber-700); }
body.app-body .dashboard-getting-started__steps li:nth-child(3) .dashboard-getting-started__check { background: var(--thesr-green-50); color: var(--thesr-green-700); }
body.app-body .dashboard-getting-started__steps li.is-complete .dashboard-getting-started__check { background: var(--thesr-green-500); color: #FFFFFF; }
body.app-body .dashboard-card--tasks .dashboard-card__header h5 i { color: var(--thesr-blue-600); }
body.app-body .dashboard-card--activity .dashboard-card__header h5 i { color: var(--thesr-amber-600); }

/* Documents: the file's kind in its icon, the library and its folders in theirs.
   The 2026 stylesheet had painted every file icon navy with !important, so
   these have to say so too. */
body.app-body[data-app-page="app"] #docs-table .doc-file-icon--pdf { color: var(--thesr-red-600) !important; }
body.app-body[data-app-page="app"] #docs-table .doc-file-icon--text { color: var(--thesr-blue-600) !important; }
body.app-body[data-app-page="app"] #docs-table .doc-file-icon--sheet { color: var(--thesr-green-600) !important; }
body.app-body[data-app-page="app"] #docs-table .doc-file-icon--slides,
body.app-body[data-app-page="app"] #docs-table .doc-file-icon--mail { color: var(--thesr-amber-600) !important; }
body.app-body[data-app-page="app"] #docs-table .doc-file-icon--image,
body.app-body[data-app-page="app"] #docs-table .doc-file-icon--note { color: var(--thesr-green-600) !important; }
body.app-body[data-app-page="app"] #docs-table .doc-file-icon--other { color: var(--thesr-text-3) !important; }
body.app-body[data-app-page="app"] .doc-tree .category-node .label-text .fa-book,
body.app-body[data-app-page="app"] #docs-tree .category-node .label-text .fa-book { color: var(--thesr-blue-600) !important; }
body.app-body[data-app-page="app"] .doc-tree .category-node .label-text .fa-folder,
body.app-body[data-app-page="app"] .doc-tree .category-node .label-text .fa-folder-open,
body.app-body[data-app-page="app"] #docs-tree .category-node .label-text .fa-folder,
body.app-body[data-app-page="app"] #docs-tree .category-node .label-text .fa-folder-open { color: var(--thesr-amber-500) !important; }
body.app-body[data-app-page="app"] .doc-tree .category-node .label-text .fa-globe,
body.app-body[data-app-page="app"] #docs-tree .category-node .label-text .fa-globe { color: var(--thesr-blue-500) !important; }
body.app-body[data-app-page="app"] .doc-state--running { background: var(--thesr-blue-50); border-color: var(--thesr-blue-200); color: var(--thesr-blue-700); }
body.app-body[data-app-page="app"] #docs-table tbody tr:hover .doc-title { color: var(--thesr-blue-700); }

/* Workspaces: each tile has its own tint, so a list of cases is not a row of identical boxes. */
body.app-body .ws-tile__mark { transition: background-color 0.2s ease; }
/* Recent workspaces: the same Marine mark on a light tile, whatever the position. */
body.app-body .ws-tile .ws-tile__mark { background: var(--thesr-blue-50); color: var(--thesr-marine); }
body.app-body .ws-tile:hover { border-color: var(--thesr-blue-300); }
body.app-body .ws-shared { background: var(--thesr-green-50); color: var(--thesr-green-700); }
body.app-body .ws-activity-line i { color: var(--thesr-blue-500); }

/* Inside a workspace: the four figures each in their colour, links in blue. */
body.app-body .ws-home__tile-icon { border-radius: 8px; width: 1.8rem; height: 1.8rem; display: inline-grid; place-items: center; }
body.app-body .ws-home__tile:nth-child(1) .ws-home__tile-icon { background: var(--thesr-blue-50); color: var(--thesr-blue-700); }
body.app-body .ws-home__tile:nth-child(2) .ws-home__tile-icon { background: var(--thesr-green-50); color: var(--thesr-green-700); }
body.app-body .ws-home__tile:nth-child(3) .ws-home__tile-icon { background: var(--thesr-amber-50); color: var(--thesr-amber-700); }
body.app-body .ws-home__tile:nth-child(4) .ws-home__tile-icon { background: var(--thesr-red-50); color: var(--thesr-red-600); }
body.app-body .ws-home__tile:hover { border-color: var(--thesr-blue-300); background: var(--thesr-blue-50); }
body.app-body .ws-home__link { color: var(--thesr-blue-600); }
body.app-body .ws-home__link:hover { color: var(--thesr-blue-800); }
body.app-body .ws-home__priority .ws-home__h::before,
body.app-body .ws-home__block .ws-home__h::before {
  content: ""; display: inline-block; width: 4px; height: 0.95em; margin-right: 0.5rem;
  border-radius: 2px; vertical-align: -0.1em; background: var(--thesr-amber-400);
}
body.app-body .ws-home__block:nth-of-type(odd) .ws-home__h::before { background: var(--thesr-blue-500); }

/* ── The rail (21 October) ─────────────────────────────────────────
   Icons only by default, as it already could be; pointed at, it opens over the
   page rather than pushing it aside, names each place, and the name is added
   beside the mark - only then. */
@media (min-width: 992px) {
  body.app-body[data-app-page="app"] .app-shell.sidebar-collapsed.sidebar-hover-open {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }
  body.app-body[data-app-page="app"] .app-shell.sidebar-collapsed #app-sidebar {
    z-index: 1000;
    transition: width 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  }
  body.app-body[data-app-page="app"] .app-shell.sidebar-collapsed.sidebar-hover-open #app-sidebar {
    width: 248px !important;
    max-width: 248px !important;
    background: #FFFFFF;
    box-shadow: 16px 0 44px -20px rgba(11, 20, 51, 0.38);
    border-radius: 0 18px 18px 0;
  }
  body.app-body[data-app-page="app"] .app-shell.sidebar-collapsed.sidebar-hover-open #app-sidebar .sidebar-brand {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start !important;
    gap: 0.6rem;
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
  }
  body.app-body[data-app-page="app"] .app-shell.sidebar-collapsed.sidebar-hover-open #app-sidebar .sidebar-title {
    display: inline-block !important;
    color: var(--thesr-marine) !important;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-transform: none;
    white-space: nowrap;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    position: static !important;
  }
  body.app-body[data-app-page="app"] .app-shell.sidebar-collapsed.sidebar-hover-open #app-sidebar .sidebar-link {
    flex-direction: row;
    gap: 0.75rem;
    text-align: left;
  }
  body.app-body[data-app-page="app"] .app-shell.sidebar-collapsed.sidebar-hover-open #app-sidebar .sidebar-section-title {
    color: var(--thesr-text-3) !important;
  }
}

/* Every category tree says the same thing in the same colours - the Organiser
   dialog, the « add to a workspace » picker, the folder pickers - not only the
   one in the sidebar: folders amber, libraries blue. */
body.app-body .ux-tree .category-node .label-text .fa-folder,
body.app-body .ux-tree .category-node .label-text .fa-folder-open,
body.app-body #cat-manager-tree .label-text .fa-folder,
body.app-body #cat-manager-tree .label-text .fa-folder-open { color: var(--thesr-amber-500) !important; }
body.app-body .ux-tree .library-node > .label-text .fa-book,
body.app-body #cat-manager-tree .library-node > .label-text .fa-book { color: var(--thesr-blue-600) !important; }

/* Document list, two small repairs (22 octobre).
   1. The title row aligned its children to the top, so the file icon, the
      title and the provider's badge (28px, taller than the text) sat on three
      different lines. Everything is centred on the row, and the badge is the
      size of the text beside it.
   2. The « open » action went navy with a grey book on a hover (an older layer
      painted it that way and the grey icon colour stayed): a pale blue square
      with a blue book, a little deeper under the pointer itself. */
html body.app-body[data-app-page="app"] #docs-table .doc-title-row { align-items: center; }
html body.app-body[data-app-page="app"] #docs-table .doc-remote-link {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  line-height: 1;
}
html body.app-body[data-app-page="app"] #docs-table .doc-remote-link i { font-size: 0.82rem; line-height: 1; margin: 0; }

html body.app-body[data-app-page="app"] #docs-table tr:hover .doc-action-btn.action-primary,
html body.app-body[data-app-page="app"] #docs-table tr:focus-within .doc-action-btn.action-primary,
html body.app-body[data-app-page="app"] #docs-table .doc-action-btn.action-primary:hover,
html body.app-body[data-app-page="app"] #docs-table .doc-action-btn.action-primary:focus-visible {
  background-image: none !important;
  background-color: var(--thesr-blue-50) !important;
  border-color: var(--thesr-blue-200) !important;
  color: var(--thesr-blue-600) !important;
  box-shadow: none !important;
}
html body.app-body[data-app-page="app"] #docs-table .doc-action-btn.action-primary:hover,
html body.app-body[data-app-page="app"] #docs-table .doc-action-btn.action-primary:focus-visible {
  background-color: var(--thesr-blue-100) !important;
  color: var(--thesr-blue-700) !important;
}

/* The footer's address and its links touched each other once a link was added. */
.saas-footer .footer-links { margin-left: 2.5rem; }
@media (max-width: 767px) { .saas-footer .footer-links { margin-left: 0; } }