/*
 * Nodema : couche d'interface v2 (chargée en dernier).
 * Reprend les codes des simulations du site nodema.fr : soulignement jaune, fenêtres blanches,
 * pastilles d'état, icônes en tuiles teintées. Contient aussi les styles des nouveaux écrans :
 * page client, explorateur de fichiers, visionneuse de validation, sites, discussions, démo.
 * Pour revenir en arrière : retirer le <link> de cette feuille dans les fichiers HTML.
 */

:root {
  --nd-ink: #020b42;
  --nd-canvas: #f3f5fa;
  --nd-surface: #fff;
  --nd-line: #e1e5ef;
  --nd-line-strong: #d3d8e6;
  --nd-muted: #62688a;
  --nd-soft-yellow: #d4fbef;
  --nd-yellow: var(--yellow, #13f5bb);
  --nd-ease: cubic-bezier(.2, .8, .2, 1);
  --nd-shadow: 0 18px 50px rgba(2, 11, 66, .07), 0 0 0 1px rgba(2, 11, 66, .05);
  --nd-shadow-pop: 0 24px 70px rgba(2, 11, 66, .18), 0 0 0 1px rgba(2, 11, 66, .06);
  --nd-field-h: 44px;
  --nd-t-green: #dbe6d9; --nd-c-green: #36623f;
  --nd-t-amber: #f2e4c6; --nd-c-amber: #7d5200;
  --nd-t-blue: #dbe5ec;  --nd-c-blue: #2b5470;
  --nd-t-violet: #e6e1ee; --nd-c-violet: #574a73;
  --nd-t-gray: #ebebe6;  --nd-c-gray: #4d5257;
  --nd-t-red: #f6dcdc;   --nd-c-red: #8c2a2a;
}
body[data-dashboard-theme="dark"] {
  --nd-canvas: #0b1236;
  --nd-surface: #111a47;
  --nd-line: rgba(255, 255, 255, .09);
  --nd-line-strong: rgba(255, 255, 255, .16);
  --nd-muted: #a4aacb;
  --nd-soft-yellow: rgba(19, 245, 187, .16);
  --nd-shadow: 0 0 0 1px rgba(255, 255, 255, .07);
  --nd-shadow-pop: 0 24px 70px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .1);
  --nd-t-green: rgba(120, 190, 130, .16); --nd-c-green: #9fd3a8;
  --nd-t-amber: rgba(19, 245, 187, .16); --nd-c-amber: #f6cf6c;
  --nd-t-blue: rgba(120, 170, 210, .16); --nd-c-blue: #a9cbe4;
  --nd-t-violet: rgba(170, 150, 210, .16); --nd-c-violet: #c8bce4;
  --nd-t-gray: rgba(255, 255, 255, .08); --nd-c-gray: #c9cdd1;
  --nd-t-red: rgba(220, 90, 90, .18); --nd-c-red: #f2a9a9;
}

/* ================================================================ Titres soulignés */
mark.nd-hl {
  color: inherit;
  padding: 0 .06em;
  margin: 0 -.02em;
  background: linear-gradient(transparent 60%, var(--nd-yellow) 60%, var(--nd-yellow) 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@keyframes nd-hl-draw { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.page.active mark.nd-hl, body:not(.backoffice) mark.nd-hl { animation: nd-hl-draw .9s var(--nd-ease) .25s both; }
body[data-dashboard-theme="dark"] mark.nd-hl { color: #020b42; }
body.backoffice .hero h1 { font-family: var(--font-heading, "Nunito", system-ui, sans-serif); font-weight: 900; font-size: clamp(30px, 3vw, 40px); letter-spacing: -.03em; }

/* ================================================================ Champs : une seule hauteur et un seul style */
body .input, body .select, body .textarea {
  border: 1px solid var(--nd-line-strong);
  border-radius: 12px;
  background-color: var(--nd-surface);
  color: inherit;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 0;
  font-weight: 600;
  transition: border-color .16s, box-shadow .16s;
}
body .input, body .select { min-height: var(--nd-field-h); height: var(--nd-field-h); padding: 0 14px; }
body .textarea { padding: 11px 14px; line-height: 1.5; }
body .input[type="file"] { padding: 8px 10px; height: auto; min-height: var(--nd-field-h); line-height: 1.6; }
body .input[type="file"]::file-selector-button { margin-right: 12px; border: 0; border-radius: 9px; padding: 6px 12px; background: var(--nd-canvas); color: inherit; font: inherit; font-weight: 800; cursor: pointer; }
body .input[type="color"] { padding: 6px; }
body .select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f757a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  text-overflow: ellipsis;
}
body .input:hover, body .select:hover, body .textarea:hover { border-color: #c4c4bd; }
body .input:focus, body .select:focus, body .textarea:focus { outline: none; border-color: var(--nd-ink); box-shadow: 0 0 0 4px rgba(2, 11, 66, .08); }
body[data-dashboard-theme="dark"] .input:focus, body[data-dashboard-theme="dark"] .select:focus, body[data-dashboard-theme="dark"] .textarea:focus { border-color: var(--nd-yellow); box-shadow: 0 0 0 4px rgba(19, 245, 187, .18); }
body .filter-select { width: auto; min-width: 190px; }
body .toolbar { align-items: center; gap: 10px; }
body .search .input { padding-left: 40px; }
body.backoffice .segmented { min-height: var(--nd-field-h); align-items: stretch; padding: 4px; border-radius: 12px; }
body.backoffice .segmented button { padding: 0 14px; border-radius: 9px; font-weight: 800; font-size: 13px; }
body.backoffice .segmented.is-disabled { opacity: .45; pointer-events: none; }
body.backoffice .global-search .input { height: 40px; min-height: 40px; }
body.backoffice .topbar .btn-sm { min-height: 40px; }
body .check-row input[type="checkbox"] { accent-color: var(--nd-yellow); width: 18px; height: 18px; }
@media (max-width: 760px) { body .filter-select { min-width: 0; width: 100%; } }

/* ================================================================ Cartes */
body.backoffice :is(.card, .metric, .site-card, .usage-card) { background: var(--nd-surface); border: 0; box-shadow: var(--nd-shadow); }
body.backoffice .card { border-radius: 20px; }
body.backoffice .card-head { border-bottom: 1px solid var(--nd-line); }

/* Pas d'effet de survol sur ce qui ne se clique pas */
body.backoffice :is(.metric, .usage-card, .site-card, .knowledge-card):hover { transform: none !important; box-shadow: var(--nd-shadow) !important; }
body.backoffice .table tbody tr:hover { background: transparent; }
body.backoffice .table tbody tr.is-clickable { cursor: pointer; }
body.backoffice .table tbody tr.is-clickable:hover { background: color-mix(in srgb, var(--nd-canvas) 75%, transparent); }
body.backoffice .table tbody tr.is-clickable:focus-visible { outline: 2px solid var(--nd-ink); outline-offset: -2px; }
body.backoffice .table .amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.backoffice .table th.amount { text-align: right; }
.row-chevron { color: var(--nd-muted); font-size: 20px; text-align: right; width: 30px; }

/* ================================================================ Chiffres clés */
body.backoffice .metric { position: relative; overflow: hidden; }
body.backoffice .metric-top { align-items: center; }
body.backoffice .metric-top .metric-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-weight: 900; }
body.backoffice .overview-metrics .metric:nth-child(1) .metric-icon, .metric-icon.is-amber { background: var(--nd-t-amber) !important; color: var(--nd-c-amber) !important; }
body.backoffice .overview-metrics .metric:nth-child(2) .metric-icon, .metric-icon.is-blue { background: var(--nd-t-blue) !important; color: var(--nd-c-blue) !important; }
body.backoffice .overview-metrics .metric:nth-child(3) .metric-icon, .metric-icon.is-green { background: var(--nd-t-green) !important; color: var(--nd-c-green) !important; }
body.backoffice .overview-metrics .metric:nth-child(4) .metric-icon { background: var(--nd-soft-yellow); color: var(--nd-c-amber); }
.metric-icon.is-red { background: var(--nd-t-red) !important; color: var(--nd-c-red) !important; }
body.backoffice .metric-value { font-family: var(--font-heading, "Nunito", system-ui, sans-serif); font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body.backoffice .metric-result { background: var(--nd-ink) !important; color: #f3f5fa; }
body.backoffice .metric-result .metric-top span:first-child, body.backoffice .metric-result .metric-note { color: rgba(243, 245, 250, .65); }
body.backoffice .metric-result .metric-icon { background: rgba(255, 255, 255, .1) !important; color: var(--nd-yellow) !important; }

/* ================================================================ Pastilles */
.badge { border-radius: 8px !important; padding: 4px 10px !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: 0; border: 0 !important; white-space: nowrap; }
.badge.green { background: var(--nd-t-green) !important; color: var(--nd-c-green) !important; }
.badge.amber { background: var(--nd-t-amber) !important; color: var(--nd-c-amber) !important; }
.badge.blue { background: var(--nd-t-blue) !important; color: var(--nd-c-blue) !important; }
.badge.gray { background: var(--nd-t-gray) !important; color: var(--nd-c-gray) !important; }
.badge.red { background: var(--nd-t-red) !important; color: var(--nd-c-red) !important; }

/* ================================================================ Navigation et barre du haut */
body.backoffice .nav-item.active { background: var(--nd-soft-yellow); color: var(--nd-ink); box-shadow: none; font-weight: 900; }
body[data-dashboard-theme="dark"] .nav-item.active { color: #f3f5fa; }
body.backoffice .icon-button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--nd-line-strong); background: var(--nd-surface); color: var(--nd-ink); padding: 0; }
body[data-dashboard-theme="dark"] .icon-button { color: #f3f5fa; }
.bell-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body.backoffice .icon-button:hover { border-color: var(--nd-ink); }
body.backoffice .notification-count { background: #d23c2a; border-color: var(--nd-surface); min-width: 19px; height: 19px; font-size: 10px; top: -6px; right: -6px; }

/* Résultats de recherche : type, titre, client et projet */
body.backoffice .search-results { width: 400px; padding: 8px; border-radius: 16px; box-shadow: var(--nd-shadow-pop); border: 0; background: var(--nd-surface); }
body.backoffice .search-results button { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; }
.search-type { flex: none; min-width: 84px; padding: 4px 8px; border-radius: 7px; font-size: 11px; font-weight: 900; text-align: center; background: var(--nd-t-gray); color: var(--nd-c-gray); }
.search-type.is-client { background: var(--nd-soft-yellow); color: var(--nd-c-amber); }
.search-type.is-project { background: var(--nd-t-blue); color: var(--nd-c-blue); }
.search-type.is-task { background: var(--nd-t-green); color: var(--nd-c-green); }
.search-type.is-file { background: var(--nd-t-violet); color: var(--nd-c-violet); }
.search-copy { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.search-copy strong { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-copy small { color: var(--nd-muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Notifications */
.notification-item { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; border: 0; background: transparent; padding: 12px; border-radius: 12px; color: inherit; font: inherit; cursor: pointer; }
.notification-item:hover { background: var(--nd-canvas); }
.notification-item.unread { background: color-mix(in srgb, var(--nd-soft-yellow) 55%, transparent); }
.notification-item strong { display: block; font-weight: 700; line-height: 1.4; }
.notification-item small { color: var(--nd-muted); font-size: 12px; }
.notification-icon { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; background: var(--nd-t-gray); color: var(--nd-c-gray); }
.notification-icon.is-mention { background: var(--nd-soft-yellow); color: var(--nd-c-amber); }
.notification-icon.is-validation_approved { background: var(--nd-t-green); color: var(--nd-c-green); }
.notification-icon.is-validation_rejected, .notification-icon.is-annotation { background: var(--nd-t-amber); color: var(--nd-c-amber); }
.notification-icon.is-comment { background: var(--nd-t-blue); color: var(--nd-c-blue); }

/* ================================================================ Pied de page : toujours en bas de l'écran */
body.backoffice .main { display: flex; flex-direction: column; min-height: 100vh; }
body.backoffice .content { flex: 1; display: flex; flex-direction: column; width: 100%; }
body.backoffice .app-footer {
  margin-top: auto !important;
  padding: 22px 0 6px !important;
  border-top: 1px solid var(--nd-line);
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  color: var(--nd-muted);
  font-size: 13px;
}
body.backoffice .page.active + .page ~ .app-footer, body.backoffice .app-footer { padding-top: 22px; }
body.backoffice .content > .page.active { margin-bottom: 48px; }
body.backoffice .app-footer .saas-credit { display: flex !important; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
body.backoffice .app-footer .saas-credit > span:first-child { width: 30px !important; height: 30px !important; border-radius: 9px; background: var(--nd-ink) !important; display: grid !important; place-items: center; padding: 0 !important; }
body.backoffice .app-footer .saas-credit .nodema-mark { height: 14px !important; color: var(--nd-yellow); }
.app-footer-brand { display: flex; flex-direction: column; line-height: 1.25; }
.app-footer-brand strong { color: var(--nd-ink); font-weight: 900; font-size: 13.5px; }
body[data-dashboard-theme="dark"] .app-footer-brand strong { color: #f3f5fa; }
.app-footer-brand small { font-size: 12px; }
.app-footer-links { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.app-footer-links :is(a, button) { border: 0; background: none; color: inherit; font: inherit; font-weight: 700; padding: 6px 10px; border-radius: 8px; text-decoration: none; cursor: pointer; }
.app-footer-links :is(a, button):hover { background: var(--nd-canvas); color: var(--nd-ink); }
.app-footer-meta { font-size: 12px; text-align: right; }
@media (max-width: 900px) {
  body.backoffice .app-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 10px; padding-bottom: 96px !important; }
  .app-footer-meta { text-align: center; }
}

/* ================================================================ Listes, flux, vue d'ensemble */
body.backoffice .card-body > .list-row, body.backoffice .card-body > .workload-row {
  border: 1px solid var(--nd-line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; background: transparent;
}
body.backoffice .card-body > .list-row:last-child, body.backoffice .card-body > .workload-row:last-child { margin-bottom: 0; }
body.backoffice .list-button { cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; transition: transform .2s var(--nd-ease), box-shadow .2s var(--nd-ease), border-color .2s; }
body.backoffice .card-body > .list-button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(2, 11, 66, .07); border-color: transparent; }
body.backoffice .list-row .metric-icon { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; font-weight: 900; background: var(--nd-t-blue); color: var(--nd-c-blue); }
body.backoffice #pending-validations .metric-icon { background: var(--nd-t-amber); color: var(--nd-c-amber); }
body.backoffice #recent-projects .metric-icon { background: var(--nd-soft-yellow); color: var(--nd-c-amber); }
body.backoffice .list-main strong { font-weight: 800; }
body.backoffice .workload-row { display: grid; gap: 10px; }
body.backoffice .workload-row .progress { height: 8px; border-radius: 99px; background: var(--nd-canvas); }
body.backoffice .workload-row .progress i { border-radius: 99px; background: var(--nd-yellow) !important; }
.nd-live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 8px; background: var(--nd-t-green); color: var(--nd-c-green); font-size: 12.5px; font-weight: 900; white-space: nowrap; }
.nd-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: nd-live-pulse 1.8s ease-in-out infinite; }
@keyframes nd-live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
.nd-feed { display: flex; flex-direction: column; gap: 8px; }
.nd-feed-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--nd-line); background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; animation: nd-feed-in .5s var(--nd-ease) both; animation-delay: calc(var(--i, 0) * 90ms + .15s); transition: transform .2s var(--nd-ease), box-shadow .2s var(--nd-ease), border-color .2s; }
.nd-feed-item:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(2, 11, 66, .07); border-color: transparent; }
@keyframes nd-feed-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.nd-feed-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.nd-feed-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nd-feed-icon.is-green { background: var(--nd-t-green); color: var(--nd-c-green); }
.nd-feed-icon.is-amber { background: var(--nd-t-amber); color: var(--nd-c-amber); }
.nd-feed-icon.is-blue { background: var(--nd-t-blue); color: var(--nd-c-blue); }
.nd-feed-icon.is-violet { background: var(--nd-t-violet); color: var(--nd-c-violet); }
.nd-feed-icon.is-gray { background: var(--nd-t-gray); color: var(--nd-c-gray); }
.nd-feed-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nd-feed-copy strong { font-weight: 800; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.nd-feed-copy small { color: var(--nd-muted); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1180px) { .nd-grid-3 { grid-template-columns: 1fr 1fr; } .nd-grid-3 > :last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .nd-grid-3 { grid-template-columns: 1fr; } }
body.backoffice .quick-action { border: 0; background: var(--nd-surface); box-shadow: var(--nd-shadow); border-radius: 12px; font-weight: 800; font-size: 13px; padding: 10px 14px; transition: transform .16s var(--nd-ease), box-shadow .2s; }
body.backoffice .quick-action:hover { transform: translateY(-1px); box-shadow: var(--nd-shadow-pop); }
.inline-link, .eyebrow-link { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.eyebrow-link { text-decoration: none; letter-spacing: inherit; text-transform: inherit; font-weight: inherit; }
.eyebrow-link:hover { text-decoration: underline; }

/* ================================================================ Tâches et kanban */
body.backoffice .task-list .task-row { border: 1px solid var(--nd-line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; }
body.backoffice .task-list .task-row:last-child { margin-bottom: 0; }
body.backoffice .task-check { border-radius: 7px; transition: background-color .2s, border-color .2s, transform .2s var(--nd-ease); }
body.backoffice .task-check:hover { transform: scale(1.08); }
body.backoffice .task-check.checked { background: #3f8f52; border-color: #3f8f52; }
body.backoffice .work-section-heading.top-gap { margin-top: 48px; }
body.backoffice .task-kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
body.backoffice .kanban-column { background: var(--nd-canvas); border: 2px dashed transparent; border-radius: 16px; padding: 12px; min-height: 260px; transition: border-color .15s, background-color .15s; }
body.backoffice .kanban-column.is-drop-target { border-color: var(--nd-yellow); background: color-mix(in srgb, var(--nd-soft-yellow) 60%, var(--nd-canvas)); }
body.backoffice .kanban-cards { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.kanban-empty { border: 1.5px dashed var(--nd-line-strong); border-radius: 12px; padding: 18px 12px; text-align: center; font-size: 12.5px; color: var(--nd-muted); font-weight: 700; }
body.backoffice .kanban-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; }
body.backoffice .kanban-head strong { font-family: var(--font-heading, "Nunito", sans-serif); font-weight: 900; }
body.backoffice .kanban-head span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 8px; background: var(--nd-surface); font-size: 12px; font-weight: 900; }
body.backoffice .kanban-column .task-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 6px 10px; margin: 0; background: var(--nd-surface); border: 0; border-radius: 12px; box-shadow: 0 1px 2px rgba(2, 11, 66, .06), 0 6px 16px rgba(2, 11, 66, .05); padding: 12px; cursor: grab; transition: transform .2s var(--nd-ease), box-shadow .2s, opacity .2s; }
body.backoffice .kanban-column .task-row:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(2, 11, 66, .1); }
body.backoffice .kanban-column .task-row:active { cursor: grabbing; }
body.backoffice .kanban-column .task-row.is-dragging { opacity: .35; transform: rotate(1.5deg); }
body.backoffice .kanban-column .task-row .task-copy { grid-column: 2 / 4; }
body.backoffice .kanban-column .task-row .task-copy strong { display: block; line-height: 1.3; }
body.backoffice .kanban-column .task-row .task-copy span { display: block; margin-top: 3px; line-height: 1.4; }
body.backoffice .kanban-column .task-row time { grid-column: 2; grid-row: 2; align-self: center; display: inline-flex; width: max-content; padding: 3px 8px; border-radius: 7px; background: var(--nd-canvas); font-size: 11.5px; font-weight: 800; color: var(--nd-muted); }
body.backoffice .kanban-column .task-row .priority-dot { display: none; }
body.backoffice .kanban-column .task-row > .btn { grid-column: 3; grid-row: 2; padding: 4px 8px; min-height: 0; font-size: 12px; border: 0; background: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
body.backoffice .kanban-column .kanban-head strong::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: #b5b8bb; }
body.backoffice .kanban-column[data-kanban-status="in_progress"] .kanban-head strong::before { background: var(--nd-yellow); }
body.backoffice .kanban-column[data-kanban-status="review"] .kanban-head strong::before { background: #5c86a3; }
body.backoffice .kanban-column[data-kanban-status="done"] .kanban-head strong::before { background: #3f8f52; }
@media (max-width: 1100px) { body.backoffice .task-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { body.backoffice .task-kanban { grid-template-columns: 1fr; } }
body.backoffice .progress { border-radius: 99px; }
body.backoffice .progress > i { border-radius: 99px; }

/* ================================================================ Calendrier */
body.backoffice .calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
body.backoffice .calendar-day { min-width: 0; }
body.backoffice .calendar-day.today > strong { background: var(--nd-yellow); color: #020b42; }
body.backoffice .calendar-event { font-size: 11px; font-weight: 800; line-height: 1.25; border-radius: 7px; padding: 5px 7px; margin-top: 5px; background: var(--nd-t-blue); color: var(--nd-c-blue); box-shadow: inset 3px 0 0 currentColor; transition: filter .16s; }
body.backoffice .calendar-event:hover { filter: brightness(.96); }
body.backoffice .calendar-event.livraison { background: var(--nd-t-green); color: var(--nd-c-green); }
body.backoffice .calendar-event.task { background: var(--nd-t-amber); color: var(--nd-c-amber); }
body.backoffice .calendar-event.deadline { background: var(--nd-t-violet); color: var(--nd-c-violet); }
body.backoffice .calendar-legend i { border-radius: 50%; background: var(--nd-c-blue); }
body.backoffice .calendar-legend i.task { background: #e1a32a; }
body.backoffice .calendar-legend i.deadline { background: #7a6a9c; }
body.backoffice .calendar-date-chip { border-radius: 11px; background: var(--nd-soft-yellow); color: var(--nd-c-amber); }
@media (max-width: 760px) { body.backoffice .calendar-event { font-size: 0; height: 6px; padding: 0; box-shadow: none; } }

/* ================================================================ Page client */
.client-hero-bar { align-items: center; }
.client-identity { display: flex; align-items: center; gap: 18px; min-width: 0; }
.client-identity .eyebrow { display: flex; align-items: center; gap: 8px; }
.client-identity p { margin: 6px 0 0; color: var(--nd-muted); }
.client-identity p a { color: inherit; }
.client-logo { width: 68px; height: 68px; border-radius: 18px; flex: none; display: grid; place-items: center; background: var(--nd-ink); color: var(--nd-yellow); font-weight: 900; font-size: 22px; overflow: hidden; box-shadow: var(--nd-shadow); }
.client-logo.has-logo { background: #fff; padding: 8px; }
.client-logo img { width: 100%; height: 100%; object-fit: contain; }
.client-kpis, body.backoffice .project-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; }
.client-kpis article, body.backoffice .project-kpis article { background: var(--nd-surface); border-radius: 18px; padding: 16px 18px; box-shadow: var(--nd-shadow); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.client-kpis span, body.backoffice .project-kpis span { color: var(--nd-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.client-kpis strong, body.backoffice .project-kpis strong { font-family: var(--font-heading, "Nunito", sans-serif); font-size: 24px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.client-kpis small, body.backoffice .project-kpis small { color: var(--nd-muted); font-size: 12.5px; font-weight: 600; }
.client-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; margin-top: 18px; align-items: start; }
.client-side { display: flex; flex-direction: column; gap: 14px; }
.client-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.client-projects > .empty { grid-column: 1 / -1; }
.client-project { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--nd-line); background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: transform .2s var(--nd-ease), box-shadow .2s, border-color .2s; }
.client-project:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(2, 11, 66, .08); border-color: transparent; }
.client-project-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.client-project-top strong { font-weight: 900; }
.client-project .progress { height: 6px; background: var(--nd-canvas); display: block; border-radius: 99px; overflow: hidden; }
.client-project .progress i { display: block; height: 100%; background: var(--nd-ink); }
.client-project-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--nd-muted); font-size: 12.5px; font-weight: 700; }
.client-facts { margin: 0; display: grid; gap: 10px; }
.client-facts div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; }
.client-facts dt { color: var(--nd-muted); font-size: 12.5px; font-weight: 700; }
.client-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.client-notes { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--nd-canvas); }
.client-notes p { margin: 4px 0 0; white-space: pre-line; color: var(--nd-muted); }
.client-cell { display: flex; align-items: center; gap: 12px; }
.client-cell > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.client-avatar { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--nd-soft-yellow); color: var(--nd-c-amber); font-weight: 900; font-size: 13px; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--nd-c-red) 40%, transparent); }
.danger-zone div { display: flex; flex-direction: column; gap: 2px; }
.danger-zone span { color: var(--nd-muted); font-size: 12.5px; }
.form-danger { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--nd-line); }
@media (max-width: 1100px) { .client-layout { grid-template-columns: 1fr; } .client-kpis, body.backoffice .project-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .client-identity { align-items: flex-start; } .client-logo { width: 52px; height: 52px; border-radius: 14px; } }
.back-link { border: 0; background: none; color: var(--nd-muted); font: inherit; font-weight: 800; padding: 6px 0; margin-bottom: 6px; cursor: pointer; }
.back-link:hover { color: var(--nd-ink); }

/* Interrupteur (partage avec le client) */
.switch { position: relative; display: inline-flex; width: 42px; height: 24px; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--nd-line-strong); transition: background-color .2s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s var(--nd-ease); }
.switch input:checked + span { background: #3f8f52; }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--nd-ink); outline-offset: 2px; }
.switch-lg { width: 52px; height: 30px; }
.switch-lg span::after { width: 24px; height: 24px; }
.switch-lg input:checked + span::after { transform: translateX(22px); }

/* ================================================================ Sites */
body.backoffice .site-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
body.backoffice .site-grid > .empty-state-card { grid-column: 1 / -1; }
@media (max-width: 1000px) { body.backoffice .site-grid { grid-template-columns: 1fr; } }
body.backoffice .site-card { grid-column: auto !important; border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
body.backoffice .site-card-top { display: flex; align-items: center; gap: 12px; }
body.backoffice .site-favicon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--nd-t-blue); color: var(--nd-c-blue); font-weight: 900; flex: none; }
body.backoffice .site-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
body.backoffice .site-title strong { font-weight: 900; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.backoffice .site-title span { color: var(--nd-muted); font-size: 12.5px; }
.site-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.site-kpis div { background: var(--nd-canvas); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.site-kpis span { color: var(--nd-muted); font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-kpis strong { font-family: var(--font-heading, "Nunito", sans-serif); font-weight: 900; font-size: 17px; font-variant-numeric: tabular-nums; }
body.backoffice .site-chart { min-height: 120px; }
.site-chart-loading { height: 120px; border-radius: 12px; background: linear-gradient(90deg, var(--nd-canvas), color-mix(in srgb, var(--nd-canvas) 40%, #fff), var(--nd-canvas)); background-size: 200% 100%; animation: nd-shimmer 1.3s linear infinite; }
@keyframes nd-shimmer { to { background-position: -200% 0; } }
.site-chart-empty { display: grid; place-items: center; min-height: 110px; border-radius: 12px; background: var(--nd-canvas); color: var(--nd-muted); font-size: 13px; font-weight: 700; }
.site-svg { position: relative; width: 100%; user-select: none; touch-action: pan-y; cursor: crosshair; }
.site-svg svg { display: block; width: 100%; height: auto; overflow: visible; }
.site-line { fill: none; stroke: var(--nd-ink); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
body[data-dashboard-theme="dark"] .site-line { stroke: var(--nd-yellow); }
.site-area { fill: color-mix(in srgb, var(--nd-yellow) 26%, transparent); }
.site-grid-line { stroke: var(--nd-line); stroke-dasharray: 3 5; }
.site-cursor { position: absolute; top: 0; bottom: 22px; width: 1px; background: var(--nd-line-strong); pointer-events: none; }
.site-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--nd-yellow); border: 2px solid var(--nd-ink); pointer-events: none; }
.site-tip { position: absolute; top: -8px; transform: translateY(-100%); background: var(--nd-ink); color: #f3f5fa; border-radius: 10px; padding: 8px 11px; display: flex; flex-direction: column; gap: 1px; font-size: 12px; line-height: 1.35; white-space: nowrap; pointer-events: none; box-shadow: 0 12px 30px rgba(0, 0, 0, .2); z-index: 3; }
.site-tip strong { font-size: 13.5px; }
.site-tip span { opacity: .8; }
.site-tip small { opacity: .6; text-transform: capitalize; }
.site-axis { display: flex; justify-content: space-between; color: var(--nd-muted); font-size: 11.5px; font-weight: 700; margin-top: 6px; }
.site-card-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--nd-line); }
.site-card-foot .btn { margin-left: auto; }
.site-host { color: var(--nd-muted); font-size: 12.5px; font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.site-host:hover { color: var(--nd-ink); text-decoration: underline; }
.site-visibility { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--nd-muted); }
.site-visibility::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nd-line-strong); }
.site-visibility.is-on { color: var(--nd-c-green); }
.site-visibility.is-on::before { background: #3f8f52; }
.site-visibility-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: var(--nd-surface); box-shadow: var(--nd-shadow); border-left: 4px solid var(--nd-line-strong); }
.site-visibility-card.is-on { border-left-color: #3f8f52; }
.site-visibility-card div { display: flex; flex-direction: column; gap: 3px; }
.site-visibility-card span { color: var(--nd-muted); font-size: 13px; }
.site-range { margin: 18px 0 0; display: inline-flex; }
.site-hero p a { color: var(--nd-muted); }
.bar-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(60px, 1fr) auto; gap: 12px; align-items: center; padding: 7px 0; }
.bar-label { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 8px; border-radius: 99px; background: var(--nd-canvas); overflow: hidden; }
.bar-track i { display: block; height: 100%; border-radius: 99px; background: var(--nd-yellow); }
.bar-row strong { font-variant-numeric: tabular-nums; font-size: 13px; }
.maintenance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.maintenance-grid div { background: var(--nd-canvas); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.maintenance-grid span { color: var(--nd-muted); font-size: 12px; font-weight: 700; }
.maintenance-grid strong { font-weight: 900; }
.maintenance-grid small { color: var(--nd-muted); font-size: 12px; }
@media (max-width: 760px) { .site-kpis, .maintenance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================================================================ Discussions */
body.backoffice .collaboration-layout { grid-template-columns: 300px minmax(0, 1fr); }
body.backoffice #channel-title { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
body.backoffice #channel-title > span { color: var(--nd-muted); }
body.backoffice #channel-title small { width: 100%; color: var(--nd-muted); font-size: 12.5px; font-weight: 700; font-family: inherit; letter-spacing: 0; }
.channel-item.active { border-color: var(--nd-ink) !important; }
.channel-count { color: var(--nd-muted); font-size: 12px; font-weight: 800; }
.channel-mention { padding: 3px 8px; border-radius: 8px; background: var(--nd-yellow); color: #020b42; font-size: 12px; font-weight: 900; }
body.backoffice .channel-messages { display: flex; flex-direction: column; gap: 2px; max-height: min(62vh, 640px); min-height: 280px; overflow-y: auto; padding: 4px 4px 12px; scroll-behavior: smooth; }
.channel-day { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; color: var(--nd-muted); font-size: 12px; font-weight: 800; }
.channel-day::before, .channel-day::after { content: ""; flex: 1; height: 1px; background: var(--nd-line); }
.channel-empty { margin: auto; text-align: center; display: flex; flex-direction: column; gap: 4px; color: var(--nd-muted); padding: 40px 10px; }
.channel-empty strong { color: var(--nd-ink); }
.message { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-radius: 12px; animation: nd-feed-in .35s var(--nd-ease) both; }
.message:hover { background: color-mix(in srgb, var(--nd-canvas) 60%, transparent); }
.message.is-grouped { padding-top: 0; }
.message.is-grouped .message-avatar, .message.is-grouped header { visibility: hidden; height: 0; }
.message.is-grouped header { display: none; }
.message-avatar { width: 36px !important; height: 36px !important; border-radius: 11px !important; font-size: 12px; font-weight: 900; display: grid !important; place-items: center; background: var(--nd-t-blue); color: var(--nd-c-blue); overflow: hidden; }
.message.is-mine .message-avatar { background: var(--nd-soft-yellow); color: var(--nd-c-amber); }
.message-avatar img { width: 100%; height: 100%; object-fit: cover; }
.message-content header { display: flex; align-items: baseline; gap: 8px; }
.message-content header strong { font-weight: 900; font-size: 14px; }
.message-content header time { color: var(--nd-muted); font-size: 11.5px; font-weight: 700; }
.message-content p { margin: 2px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
mark.mention { background: var(--nd-soft-yellow); color: var(--nd-c-amber); font-weight: 900; padding: 0 3px; border-radius: 5px; }
.message-image { display: block; margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--nd-muted); font-size: 12px; }
.message-image img { display: block; max-width: min(320px, 100%); max-height: 240px; border-radius: 12px; box-shadow: var(--nd-shadow); background: var(--nd-canvas); min-width: 80px; min-height: 60px; object-fit: cover; }
.message-image span { display: block; margin-top: 4px; }
.message-file { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 14px 10px 10px; border-radius: 12px; border: 1px solid var(--nd-line); background: var(--nd-surface); cursor: pointer; font: inherit; color: inherit; text-align: left; max-width: 100%; }
.message-file:hover { border-color: var(--nd-ink); }
.message-file strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.message-file small { color: var(--nd-muted); font-size: 12px; }
.message-file-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--nd-t-violet); color: var(--nd-c-violet); font-size: 10.5px; font-weight: 900; flex: none; }
body.backoffice .channel-compose { position: relative; display: block !important; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--nd-line); }
body.backoffice .channel-compose.hidden { display: none !important; }
.compose-row { display: flex; align-items: flex-end; gap: 8px; }
.compose-row .textarea { flex: 1; min-height: var(--nd-field-h); max-height: 160px; resize: none; padding-top: 11px; }
.compose-row .btn { min-height: var(--nd-field-h); }
.compose-attach { width: var(--nd-field-h); height: var(--nd-field-h); border-radius: 12px; border: 1px solid var(--nd-line-strong); display: grid; place-items: center; cursor: pointer; flex: none; color: var(--nd-muted); }
.compose-attach:hover { border-color: var(--nd-ink); color: var(--nd-ink); }
.compose-attach svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.compose-attachment { margin-bottom: 8px; }
.compose-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 10px; background: var(--nd-canvas); font-size: 13px; }
.compose-chip small { color: var(--nd-muted); }
.compose-chip button { border: 0; background: var(--nd-surface); width: 24px; height: 24px; border-radius: 7px; cursor: pointer; font-size: 16px; line-height: 1; }
.mention-popup { position: absolute; left: 52px; bottom: calc(100% - 4px); width: min(320px, calc(100% - 60px)); padding: 6px; border-radius: 14px; background: var(--nd-surface); box-shadow: var(--nd-shadow-pop); z-index: 5; display: flex; flex-direction: column; gap: 2px; }
.mention-popup.hidden { display: none; }
.mention-popup button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.mention-popup button.is-active, .mention-popup button:hover { background: var(--nd-soft-yellow); }
.mention-popup .avatar { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; display: grid; place-items: center; overflow: hidden; background: var(--nd-t-blue); color: var(--nd-c-blue); font-weight: 900; }
.mention-popup .avatar img { width: 100%; height: 100%; object-fit: cover; }
.mention-popup strong { display: block; font-size: 13.5px; }
.mention-popup small { color: var(--nd-muted); font-size: 12px; }
@media (max-width: 900px) { body.backoffice .collaboration-layout { grid-template-columns: 1fr; } }

/* ================================================================ Facturation */
.finance-toolbar { flex-wrap: wrap; }
.finance-toolbar #finance-tabs { margin-right: auto; }
.expense-breakdown { padding: 16px 18px 6px; }
.expense-breakdown:empty { display: none; }
.expense-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 2px; }
.expense-bar i, .expense-legend b { background: hsl(calc(42 + var(--i) * 38) 55% calc(52% + var(--i) * 4%)); }
.expense-bar i:first-child, .expense-legend span:first-child b { background: var(--nd-yellow); }
.expense-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12.5px; color: var(--nd-muted); font-weight: 700; }
.expense-legend span { display: inline-flex; align-items: center; gap: 6px; }
.expense-legend b { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.expense-legend strong { color: var(--nd-ink); }
.category-pill { display: inline-flex; padding: 4px 9px; border-radius: 8px; background: var(--nd-canvas); font-size: 12px; font-weight: 800; white-space: nowrap; }

/* ================================================================ Abonnement */
body.backoffice .subscription-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
body.backoffice .subscription-overview > article { background: var(--nd-surface); border-radius: 18px; padding: 16px 18px; box-shadow: var(--nd-shadow); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
body.backoffice .subscription-overview > article > span { color: var(--nd-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
body.backoffice .subscription-overview strong { font-family: var(--font-heading, "Nunito", sans-serif); font-size: 22px; font-weight: 900; }
body.backoffice .usage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
body.backoffice .usage-card { border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.usage-label { color: var(--nd-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.usage-value { display: block; font-family: var(--font-heading, "Nunito", sans-serif); font-size: 26px; font-weight: 900; letter-spacing: -.02em; margin-top: 4px; }
.usage-max { display: block; color: var(--nd-muted); font-size: 13px; font-weight: 700; margin-bottom: 10px; }
body.backoffice .usage-card .progress { height: 8px; background: var(--nd-canvas); border-radius: 99px; overflow: hidden; }
body.backoffice .usage-card .progress i { display: block; height: 100%; background: var(--nd-ink); }
body.backoffice .usage-card .progress.is-unlimited i { background: repeating-linear-gradient(45deg, var(--nd-t-green) 0 6px, transparent 6px 12px); }
body.backoffice .usage-card small { display: block; margin-top: 10px; color: var(--nd-muted); font-size: 12px; line-height: 1.45; }
.services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.service-item { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--nd-line); border-radius: 14px; }
.service-item div { display: flex; flex-direction: column; gap: 2px; }
.service-item span:not(.service-check) { color: var(--nd-muted); font-size: 12.5px; }
.service-check { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--nd-t-green); color: var(--nd-c-green); font-weight: 900; }
@media (max-width: 1000px) { body.backoffice .usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { body.backoffice .subscription-overview, body.backoffice .usage-grid, .services-grid { grid-template-columns: 1fr; } }

/* ================================================================ Connaissances */
body.backoffice .knowledge-card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
body.backoffice .knowledge-card-footer small { flex: 1 1 100%; color: var(--nd-muted); font-weight: 700; }
.knowledge-a4:not(.is-letterhead) .knowledge-a4-brand { display: none; }
.rich-toolbar button { min-height: 34px; }

/* ================================================================ Explorateur de fichiers (ndx) */
.ndx-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ndx { display: flex; flex-direction: column; }
.ndx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 0; flex-wrap: wrap; }
.ndx-title h3 { margin: 0; font-family: var(--font-heading, "Nunito", sans-serif); font-weight: 900; font-size: 18px; }
.ndx-title p { margin: 4px 0 0; color: var(--nd-muted); font-size: 13px; }
.ndx-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ndx-actions .btn .ndx-icon { width: 16px; height: 16px; }
.ndx-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 0; flex-wrap: wrap; }
.ndx-crumbs { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }
.ndx-crumb { border: 0; background: none; font: inherit; font-weight: 800; color: var(--nd-muted); padding: 6px 8px; border-radius: 8px; cursor: pointer; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ndx-crumb:hover { background: var(--nd-canvas); color: var(--nd-ink); }
.ndx-crumb.is-current { color: var(--nd-ink); cursor: default; background: none; }
.ndx-crumb-sep { color: var(--nd-line-strong); display: inline-flex; }
.ndx-crumb-sep .ndx-icon { width: 14px; height: 14px; }
.ndx-search { position: relative; display: flex; align-items: center; width: min(280px, 100%); }
.ndx-search .ndx-icon { position: absolute; left: 12px; color: var(--nd-muted); pointer-events: none; }
.ndx-search input { width: 100%; height: 40px; border-radius: 11px; border: 1px solid var(--nd-line-strong); background: var(--nd-surface); padding: 0 12px 0 38px; font: inherit; font-weight: 600; color: inherit; }
.ndx-search input:focus { outline: none; border-color: var(--nd-ink); box-shadow: 0 0 0 4px rgba(2, 11, 66, .08); }
.ndx-filters { display: flex; gap: 6px; padding: 12px 20px 0; flex-wrap: wrap; }
.ndx-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--nd-line); background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.ndx-chip span { color: var(--nd-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.ndx-chip:hover { border-color: var(--nd-line-strong); }
.ndx-chip.is-active { background: var(--nd-ink); border-color: var(--nd-ink); color: #f3f5fa; }
.ndx-chip.is-active span { color: rgba(243, 245, 250, .65); }
.ndx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nd-c-gray); }
.ndx-dot.is-amber { background: #e1a32a; } .ndx-dot.is-green { background: #3f8f52; } .ndx-dot.is-blue { background: #5c86a3; } .ndx-dot.is-gray { background: #959bb6; }
.ndx-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 20px 0; padding: 10px 12px; border-radius: 14px; background: var(--nd-ink); color: #f3f5fa; animation: nd-feed-in .25s var(--nd-ease) both; }
.ndx-bulk strong { margin-right: 6px; }
.ndx-bulk .btn-secondary { background: rgba(255, 255, 255, .1); color: #f3f5fa; border-color: transparent; }
.ndx-bulk .ndx-link { color: rgba(243, 245, 250, .75); }
.ndx-link { border: 0; background: none; padding: 0; color: inherit; font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ndx-drop { position: relative; padding: 14px 20px 20px; min-height: 160px; }
.ndx-drop-hint { position: absolute; inset: 8px; border-radius: 16px; border: 2px dashed var(--nd-yellow); background: color-mix(in srgb, var(--nd-soft-yellow) 85%, transparent); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; z-index: 2; color: var(--nd-c-amber); }
.ndx-drop-hint .ndx-icon { width: 34px; height: 34px; }
.ndx-drop.is-over .ndx-drop-hint { display: flex; }
.ndx-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ndx-folder { display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 12px; border-radius: 14px; border: 1px solid var(--nd-line); cursor: pointer; transition: border-color .15s, box-shadow .2s, transform .2s var(--nd-ease); min-width: 0; }
.ndx-folder:hover { border-color: transparent; box-shadow: 0 10px 24px rgba(2, 11, 66, .08); transform: translateY(-1px); }
.ndx-folder:focus-visible { outline: 2px solid var(--nd-ink); outline-offset: 2px; }
.ndx-folder.is-target { border-color: var(--nd-yellow); background: var(--nd-soft-yellow); }
.ndx-folder-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--nd-soft-yellow); color: var(--nd-c-amber); flex: none; }
.ndx-folder.is-project .ndx-folder-icon { background: var(--nd-t-blue); color: var(--nd-c-blue); }
.ndx-folder-icon .ndx-icon { width: 22px; height: 22px; }
.ndx-folder-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ndx-folder-copy strong { font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndx-folder-copy small { color: var(--nd-muted); font-size: 12px; font-weight: 700; }
.ndx-icon-btn { width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; display: grid; place-items: center; color: var(--nd-muted); cursor: pointer; flex: none; }
.ndx-icon-btn:hover:not(:disabled) { background: var(--nd-canvas); color: var(--nd-ink); }
.ndx-icon-btn:disabled { opacity: .35; cursor: default; }
.ndx-list { display: flex; flex-direction: column; border: 1px solid var(--nd-line); border-radius: 14px; overflow: hidden; }
.ndx-row { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 6px 8px 6px 4px; border-top: 1px solid var(--nd-line); background: var(--nd-surface); }
.ndx-row:first-child { border-top: 0; }
.ndx-row:hover { background: color-mix(in srgb, var(--nd-canvas) 55%, var(--nd-surface)); }
.ndx-row.is-selected { background: color-mix(in srgb, var(--nd-soft-yellow) 70%, var(--nd-surface)); }
.ndx-row-flag { position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.ndx-row-flag.is-amber { background: #e1a32a; } .ndx-row-flag.is-green { background: #3f8f52; } .ndx-row-flag.is-blue { background: #5c86a3; }
.ndx-check { display: grid; place-items: center; width: 34px; height: 34px; cursor: pointer; }
.ndx-check input { width: 17px; height: 17px; accent-color: var(--nd-ink); cursor: pointer; }
.ndx-row-main { display: flex; align-items: center; gap: 12px; min-width: 0; border: 0; background: none; padding: 4px; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: 10px; }
.ndx-row-main:focus-visible { outline: 2px solid var(--nd-ink); }
.ndx-row-copy { display: flex; flex-direction: column; min-width: 0; }
.ndx-row-copy strong { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndx-row-copy small { color: var(--nd-muted); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndx-row-actions { display: flex; gap: 2px; }
.ndx-file-icon { position: relative; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--nd-t-gray); color: var(--nd-c-gray); }
.ndx-file-icon.is-image { background: var(--nd-t-violet); color: var(--nd-c-violet); }
.ndx-file-icon.is-pdf { background: var(--nd-t-red); color: var(--nd-c-red); }
.ndx-file-icon em { position: absolute; bottom: -4px; right: -6px; font-style: normal; font-size: 9px; font-weight: 900; padding: 1px 4px; border-radius: 5px; background: var(--nd-surface); box-shadow: 0 0 0 1px var(--nd-line); color: var(--nd-ink); max-width: 38px; overflow: hidden; }
.ndx-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 34px 16px; border-radius: 16px; border: 1.5px dashed var(--nd-line-strong); color: var(--nd-muted); }
.ndx-empty strong { color: var(--nd-ink); }
.ndx-empty-icon { width: 32px; height: 32px; color: var(--nd-line-strong); }
.ndx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ndx-card { display: flex; flex-direction: column; text-align: left; border: 1px solid var(--nd-line); border-radius: 16px; background: var(--nd-surface); padding: 0; overflow: hidden; cursor: pointer; font: inherit; color: inherit; transition: transform .2s var(--nd-ease), box-shadow .2s, border-color .2s; }
.ndx-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(2, 11, 66, .09); border-color: transparent; }
.ndx-card.is-waiting { border-color: color-mix(in srgb, #e1a32a 60%, transparent); }
.ndx-card-thumb { position: relative; height: 96px; display: grid; place-items: center; background: var(--nd-canvas); color: var(--nd-c-gray); }
.ndx-card-thumb.is-image { background: var(--nd-t-violet); color: var(--nd-c-violet); }
.ndx-card-thumb.is-pdf { background: var(--nd-t-red); color: var(--nd-c-red); }
.ndx-card-thumb .ndx-icon { width: 32px; height: 32px; }
.ndx-card-thumb em { position: absolute; left: 12px; bottom: 10px; font-style: normal; font-size: 10.5px; font-weight: 900; padding: 2px 6px; border-radius: 6px; background: var(--nd-surface); color: var(--nd-ink); }
.ndx-new { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 900; padding: 3px 8px; border-radius: 7px; background: var(--nd-ink); color: #f3f5fa; }
.ndx-card-copy { padding: 12px 14px 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ndx-card-copy strong { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndx-card-copy small { color: var(--nd-muted); font-size: 12px; }
.ndx-card-foot { padding: 6px 14px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ndx-card-cta { font-size: 12.5px; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .ndx-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .ndx-row-status { grid-column: 2; grid-row: 2; padding-left: 56px; margin-top: -4px; }
  .ndx-search { width: 100%; }
}

/* Feuilles (fenêtres légères de l'explorateur) */
.ndx-sheet-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(4, 8, 40, .42); display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity .18s; }
.ndx-sheet-backdrop.is-open { opacity: 1; }
.ndx-sheet-backdrop.is-leaving { opacity: 0; }
.ndx-sheet { width: min(480px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--nd-surface); color: var(--nd-ink); border-radius: 22px; box-shadow: var(--nd-shadow-pop); transform: translateY(10px) scale(.98); transition: transform .24s var(--nd-ease); }
body[data-dashboard-theme="dark"] .ndx-sheet { color: #f3f5fa; }
.ndx-sheet.is-wide { width: min(760px, 100%); }
.ndx-sheet-backdrop.is-open .ndx-sheet { transform: none; }
.ndx-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 0; }
.ndx-sheet-head h3 { margin: 2px 0 0; font-family: var(--font-heading, "Nunito", sans-serif); font-weight: 900; font-size: 20px; }
.ndx-sheet-body { padding: 16px 22px; overflow-y: auto; }
.ndx-sheet-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 22px 20px; border-top: 1px solid var(--nd-line); }
.ndx-upload-summary { margin-right: auto; color: var(--nd-muted); font-size: 13px; font-weight: 700; }
.ndx-upload-step { margin: 0 0 10px; font-weight: 900; font-size: 13px; color: var(--nd-muted); text-transform: uppercase; letter-spacing: .06em; }
.ndx-upload-step:not(:first-child) { margin-top: 20px; }
.ndx-dests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ndx-dest { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: 16px; border: 2px solid var(--nd-line); background: var(--nd-surface); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, background-color .15s, transform .2s var(--nd-ease); }
.ndx-dest:hover { border-color: var(--nd-line-strong); transform: translateY(-1px); }
.ndx-dest strong { font-size: 15px; font-weight: 900; }
.ndx-dest small { color: var(--nd-muted); font-size: 12.5px; line-height: 1.45; }
.ndx-dest-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 4px; }
.ndx-dest-icon .ndx-icon { width: 21px; height: 21px; }
.ndx-dest.is-amber .ndx-dest-icon { background: var(--nd-t-amber); color: var(--nd-c-amber); }
.ndx-dest.is-gray .ndx-dest-icon { background: var(--nd-t-gray); color: var(--nd-c-gray); }
.ndx-dest.is-green .ndx-dest-icon { background: var(--nd-t-green); color: var(--nd-c-green); }
.ndx-dest.is-active { border-color: var(--nd-ink); background: color-mix(in srgb, var(--nd-canvas) 55%, var(--nd-surface)); }
.ndx-dest-check { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--nd-ink); color: #fff; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s var(--nd-ease); }
.ndx-dest-check .ndx-icon { width: 13px; height: 13px; stroke-width: 3; }
.ndx-dest.is-active .ndx-dest-check { opacity: 1; transform: none; }
.ndx-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; border-radius: 16px; border: 2px dashed var(--nd-line-strong); text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.ndx-pick:hover, .ndx-pick.is-over { border-color: var(--nd-yellow); background: color-mix(in srgb, var(--nd-soft-yellow) 55%, transparent); }
.ndx-pick-icon { width: 30px; height: 30px; color: var(--nd-muted); }
.ndx-pick span { color: var(--nd-muted); font-size: 13.5px; }
.ndx-pick small { color: var(--nd-muted); font-size: 12px; }
.ndx-queue { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-height: 260px; overflow-y: auto; }
.ndx-q { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; border-radius: 12px; background: var(--nd-canvas); }
.ndx-q-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ndx-q-copy strong { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndx-q-copy small { color: var(--nd-muted); font-size: 12px; }
.ndx-q-copy small b { color: var(--nd-c-red); }
.ndx-q-bar { height: 4px; border-radius: 99px; background: var(--nd-surface); overflow: hidden; display: none; }
.ndx-q.is-sending .ndx-q-bar, .ndx-q.is-done .ndx-q-bar { display: block; }
.ndx-q-bar b { display: block; height: 100%; background: var(--nd-ink); transition: width .2s; }
.ndx-q.is-done .ndx-q-bar b { background: #3f8f52; }
.ndx-q-ok { color: #3f8f52; width: 20px; height: 20px; stroke-width: 2.6; }
.ndx-q.is-error { background: var(--nd-t-red); }
.ndx-form .field { margin: 0; }
.ndx-move-list { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }
.ndx-move-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px calc(12px + var(--depth) * 18px); border: 0; border-radius: 10px; background: transparent; text-align: left; font: inherit; font-weight: 700; color: inherit; cursor: pointer; }
.ndx-move-item:hover { background: var(--nd-soft-yellow); }
.ndx-menu { position: absolute; z-index: 95; min-width: 230px; padding: 6px; border-radius: 14px; background: var(--nd-surface); color: var(--nd-ink); box-shadow: var(--nd-shadow-pop); display: flex; flex-direction: column; animation: nd-feed-in .16s var(--nd-ease) both; }
body[data-dashboard-theme="dark"] .ndx-menu { color: #f3f5fa; }
.ndx-menu button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 9px; background: none; text-align: left; font: inherit; font-weight: 700; color: inherit; cursor: pointer; }
.ndx-menu button:hover, .ndx-menu button:focus-visible { background: var(--nd-canvas); outline: none; }
.ndx-menu button.is-danger { color: var(--nd-c-red); }
.ndx-menu hr { border: 0; border-top: 1px solid var(--nd-line); margin: 4px 6px; }
@media (max-width: 700px) { .ndx-dests { grid-template-columns: 1fr; } .ndx-dest { flex-direction: row; align-items: center; flex-wrap: wrap; } .ndx-dest small { flex-basis: 100%; } }

/* ================================================================ Visionneuse et validation (ndv) */
html.ndv-lock { overflow: hidden; }
.ndv-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(4, 8, 40, .5); opacity: 0; transition: opacity .2s; display: flex; padding: 14px; }
.ndv-backdrop.is-open { opacity: 1; }
.ndv { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--nd-surface); color: var(--nd-ink); border-radius: 22px; overflow: hidden; box-shadow: var(--nd-shadow-pop); transform: scale(.985); transition: transform .25s var(--nd-ease); }
body[data-dashboard-theme="dark"] .ndv { color: #f3f5fa; }
.ndv-backdrop.is-open .ndv { transform: none; }
.ndv-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--nd-line); }
.ndv-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ndv-title strong { font-weight: 900; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndv-title small { color: var(--nd-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndv-head-actions { display: flex; align-items: center; gap: 6px; }
.ndv-next .ndx-icon { transform: rotate(180deg); }
.ndv-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.ndv-stage { position: relative; min-height: 0; overflow: auto; background: var(--nd-canvas); display: flex; flex-direction: column; align-items: center; padding: 24px; gap: 12px; }
.ndv-canvas-wrap { width: 100%; flex: 1; display: flex; align-items: flex-start; justify-content: center; }
.ndv-page { position: relative; display: inline-block; max-width: 100%; box-shadow: 0 18px 50px rgba(2, 11, 66, .16); border-radius: 6px; overflow: visible; background: #fff; cursor: crosshair; line-height: 0; }
.ndv-page img, .ndv-page canvas { display: block; max-width: 100%; max-height: calc(100vh - 210px); height: auto; border-radius: 6px; user-select: none; }
.ndv-page canvas { max-height: none; }
.ndv-pins { position: absolute; inset: 0; pointer-events: none; }
.ndv-pin { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50% 50% 50% 6px; border: 3px solid #fff; background: var(--nd-yellow); color: #020b42; font-weight: 900; font-size: 13px; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); pointer-events: auto; cursor: pointer; animation: ndv-pin .4s cubic-bezier(.2, 1.6, .4, 1) both; line-height: 1; padding: 0; }
.ndv-pin.is-agency { background: var(--nd-ink); color: #fff; }
.ndv-pin.is-resolved { background: #3f8f52; color: #fff; opacity: .75; }
.ndv-pin.is-new { background: #fff; color: var(--nd-ink); border-color: var(--nd-yellow); }
.ndv-pin.is-highlight { transform: scale(1.25); z-index: 2; }
@keyframes ndv-pin { from { transform: scale(0); } to { transform: scale(1); } }
.ndv-hint { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; background: var(--nd-surface); box-shadow: var(--nd-shadow); color: var(--nd-muted); font-size: 12.5px; font-weight: 700; }
.ndv-hint .ndx-icon { width: 16px; height: 16px; color: var(--nd-c-amber); }
.ndv-pager { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 99px; background: var(--nd-surface); box-shadow: var(--nd-shadow); font-size: 13px; font-weight: 800; }
.ndv-pager[hidden] { display: none; }
.ndv-loading { padding: 80px 20px; color: var(--nd-muted); font-weight: 700; }
.ndv-generic { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 60px 20px; max-width: 360px; }
.ndv-generic span { color: var(--nd-muted); }
.ndv-generic-icon { width: 48px; height: 48px; color: var(--nd-muted); }
.ndv-side { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--nd-line); }
.ndv-tabs { display: flex; gap: 4px; padding: 10px 12px 0; border-bottom: 1px solid var(--nd-line); }
.ndv-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px; border: 0; background: none; font: inherit; font-weight: 800; color: var(--nd-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.ndv-tabs button .ndx-icon { width: 16px; height: 16px; }
.ndv-tabs button span { padding: 1px 7px; border-radius: 7px; background: var(--nd-canvas); font-size: 11.5px; }
.ndv-tabs button.is-active { color: var(--nd-ink); border-bottom-color: var(--nd-ink); }
body[data-dashboard-theme="dark"] .ndv-tabs button.is-active { color: #f3f5fa; border-bottom-color: var(--nd-yellow); }
.ndv-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ndv-note { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 14px; background: var(--nd-canvas); transition: box-shadow .2s; }
.ndv-note.is-highlight { box-shadow: 0 0 0 2px var(--nd-yellow); }
.ndv-note.is-resolved { opacity: .65; }
.ndv-note.is-draft { background: var(--nd-soft-yellow); }
.ndv-note-n { width: 28px; height: 28px; border-radius: 50% 50% 50% 5px; display: grid; place-items: center; background: var(--nd-yellow); color: #020b42; font-weight: 900; font-size: 12px; border: 0; cursor: pointer; padding: 0; }
.ndv-note-n.is-agency { background: var(--nd-ink); color: #fff; }
.ndv-note-label { display: block; font-size: 12.5px; font-weight: 900; margin-bottom: 6px; }
.ndv-note header, .ndv-msg header { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ndv-note header strong, .ndv-msg header strong { font-size: 13px; font-weight: 900; }
.ndv-note time, .ndv-msg time { color: var(--nd-muted); font-size: 11.5px; }
.ndv-note p, .ndv-msg p { margin: 4px 0 6px; line-height: 1.5; overflow-wrap: anywhere; }
.ndv-note .textarea { width: 100%; background: var(--nd-surface); }
.ndv-note-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 8px; }
.ndv-resolved { color: var(--nd-c-green); font-weight: 800; }
.ndv-msg { padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: var(--nd-canvas); max-width: 92%; }
.ndv-msg.is-mine { align-self: flex-end; background: var(--nd-soft-yellow); border-radius: 14px 4px 14px 14px; }
.ndv-empty { margin: auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 30px 10px; color: var(--nd-muted); }
.ndv-empty strong { color: var(--nd-ink); }
body[data-dashboard-theme="dark"] .ndv-empty strong { color: #f3f5fa; }
.ndv-empty-icon { width: 30px; height: 30px; color: var(--nd-line-strong); }
.ndv-compose { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--nd-line); }
.ndv-compose .textarea { flex: 1; min-height: 44px; resize: none; }
.ndv-compose .btn { min-height: 44px; }
.ndv-decision { padding: 14px; border-top: 1px solid var(--nd-line); background: color-mix(in srgb, var(--nd-t-amber) 55%, var(--nd-surface)); }
.ndv-decision p { margin: 0 0 10px; font-weight: 800; font-size: 13.5px; }
.ndv-decision-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ndv-decision-actions .btn { min-height: 46px; justify-content: center; font-weight: 900; }
.ndv-approve { background: #3f8f52 !important; color: #fff !important; border: 0; display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; }
.ndv-approve .ndx-icon { width: 18px; height: 18px; stroke-width: 2.6; }
.ndv-done { padding: 14px; border-top: 1px solid var(--nd-line); font-weight: 800; color: var(--nd-muted); display: flex; align-items: center; gap: 8px; }
.ndv-done.is-ok { color: var(--nd-c-green); background: var(--nd-t-green); }
.ndv-destinations { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--nd-line); }
.ndv-destinations > span { width: 100%; color: var(--nd-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.ndv-dest { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--nd-line); background: transparent; font: inherit; font-size: 13px; font-weight: 800; color: inherit; cursor: pointer; }
.ndv-dest .ndx-icon { width: 16px; height: 16px; }
.ndv-dest:hover { border-color: var(--nd-line-strong); }
.ndv-dest.is-active.is-amber { background: var(--nd-t-amber); color: var(--nd-c-amber); border-color: transparent; }
.ndv-dest.is-active.is-gray { background: var(--nd-t-gray); color: var(--nd-c-gray); border-color: transparent; }
.ndv-dest.is-active.is-green { background: var(--nd-t-green); color: var(--nd-c-green); border-color: transparent; }
@media (max-width: 900px) {
  .ndv-backdrop { padding: 0; }
  .ndv { border-radius: 0; }
  .ndv-body { grid-template-columns: 1fr; grid-template-rows: minmax(260px, 1fr) minmax(0, 1fr); }
  .ndv-side { border-left: 0; border-top: 1px solid var(--nd-line); }
  .ndv-head .btn { padding: 0 10px; font-size: 0; gap: 0; }
  .ndv-head .btn .ndx-icon { width: 18px; height: 18px; }
  .ndv-stage { padding: 14px; }
  .ndv-status { display: none; }
}

/* ================================================================ Mode démo */
.demo-banner { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 9px 16px; background: var(--nd-ink); color: #f3f5fa; font-size: 13.5px; font-weight: 700; text-align: center; }
.demo-banner strong { color: var(--nd-yellow); }
.demo-banner button, .demo-banner a { border: 0; background: rgba(255, 255, 255, .12); color: #f3f5fa; font: inherit; font-weight: 800; font-size: 12.5px; padding: 5px 11px; border-radius: 8px; cursor: pointer; text-decoration: none; }
.demo-banner a.is-primary { background: var(--nd-yellow); color: #020b42; }
body.is-demo .sidebar .profile-menu-button, body.is-demo .sidebar [data-logout], body.is-demo #account-menu, body.is-demo #mobile-account-menu, body.is-demo .logout-link, body.is-demo .sidebar-profile, body.is-demo [data-action="new-team"], body.is-demo [data-team-edit] { display: none !important; }
body.is-demo .sidebar { top: var(--demo-h, 50px); height: calc(100vh - var(--demo-h, 50px)); }
@media (max-width: 760px) { body.is-demo .sidebar { top: auto; height: auto; } .demo-banner { font-size: 12.5px; } }

/* Visite guidée */
.tour-backdrop { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(4, 8, 40, .55); opacity: 0; transition: opacity .25s; }
.tour-backdrop.is-open { opacity: 1; }
.tour { width: min(560px, 100%); background: var(--nd-surface); color: var(--nd-ink); border-radius: 26px; box-shadow: var(--nd-shadow-pop); overflow: hidden; transform: translateY(14px) scale(.98); transition: transform .35s var(--nd-ease); }
.tour-backdrop.is-open .tour { transform: none; }
.tour-visual { position: relative; height: 230px; background: var(--nd-canvas); overflow: hidden; display: grid; place-items: center; }
.tour-body { padding: 22px 26px 8px; }
.tour-body .eyebrow { margin-bottom: 4px; }
.tour-body h3 { margin: 0 0 8px; font-family: var(--font-heading, "Nunito", sans-serif); font-weight: 900; font-size: 24px; letter-spacing: -.02em; }
.tour-body p { margin: 0; color: var(--nd-muted); line-height: 1.55; }
.tour-foot { display: flex; align-items: center; gap: 10px; padding: 18px 26px 24px; }
.tour-dots { display: flex; gap: 6px; margin-right: auto; }
.tour-dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--nd-line-strong); transition: width .3s var(--nd-ease), background-color .3s; }
.tour-dots i.is-active { width: 24px; background: var(--nd-ink); }
.tour-skip { border: 0; background: none; font: inherit; font-weight: 800; color: var(--nd-muted); cursor: pointer; padding: 8px; }
.tour-slide { animation: tour-in .45s var(--nd-ease) both; }
@keyframes tour-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.tv-card { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; color: #020b42; box-shadow: 0 16px 40px rgba(2, 11, 66, .14); font-weight: 800; font-size: 13.5px; white-space: nowrap; animation: tv-float 5s ease-in-out infinite; }
.tv-card small { display: block; font-weight: 600; color: #6b7194; font-size: 12px; }
.tv-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; font-weight: 900; }
@keyframes tv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.tv-pin { position: absolute; width: 30px; height: 30px; border-radius: 50% 50% 50% 6px; background: var(--nd-yellow); border: 3px solid #fff; display: grid; place-items: center; font-weight: 900; font-size: 13px; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); animation: ndv-pin .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.tv-poster { position: absolute; width: 150px; height: 190px; border-radius: 10px; background: #24394a; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .2); }
.tv-poster::before { content: ""; position: absolute; left: 25px; top: 30px; width: 100px; height: 100px; border-radius: 50%; background: #f28c5a; }
.tv-poster::after { content: ""; position: absolute; left: -20px; right: -20px; top: 120px; height: 120px; border-radius: 50%; background: #1a2a37; }
.tv-col { position: absolute; top: 34px; width: 120px; padding: 10px; border-radius: 14px; background: #e6e9f2; display: flex; flex-direction: column; gap: 8px; }
.tv-col b { font-size: 12px; }
.tv-col span { display: block; height: 30px; border-radius: 9px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.tv-moving { animation: tv-move 3.2s var(--nd-ease) infinite; position: relative; z-index: 2; }
@keyframes tv-move { 0%, 20% { transform: translate(0, 0); } 55%, 100% { transform: translate(140px, 0); } }
.tv-bars { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 10px; height: 120px; }
.tv-bars i { width: 26px; border-radius: 8px 8px 3px 3px; background: var(--nd-yellow); animation: tv-grow 1.2s var(--nd-ease) both; }
@keyframes tv-grow { from { height: 0; } }

/* ================================================================ Préchargement : logo Nodema puis logo de l'agence */
.nd-preload { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #f3f5fa; transition: opacity .5s var(--nd-ease), transform .7s var(--nd-ease); }
body[data-dashboard-theme="dark"] .nd-preload { background: #070d33; }
.nd-preload.is-leaving { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.nd-preload-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.nd-preload-logos { display: flex; align-items: center; gap: 22px; height: 70px; }
.nd-preload-mark { height: 58px; width: auto; color: var(--nd-yellow); overflow: visible; }
.nd-preload-mark .nd-pl-wave, .nd-preload-mark .nd-pl-dot { fill: var(--nd-mint, #13f5bb); }
.nd-preload-mark .nd-pl-wipe { transform-box: fill-box; transform-origin: 0 50%; animation: nd-wipe .75s cubic-bezier(.65, 0, .35, 1) both; }
.nd-preload-mark .nd-pl-dot { transform-box: fill-box; transform-origin: 50% 100%; animation: nd-dot-drop .6s cubic-bezier(.2, 1.5, .4, 1) .55s both, nd-dot-bob 1.4s ease-in-out 1.3s infinite; }
.nd-preload-word { display: block; height: 26px; width: auto; }
.nd-preload-word path { fill: var(--nd-ink, #020b42); }
body[data-dashboard-theme="dark"] .nd-preload-word path { fill: #fafcff; }
@keyframes nd-wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nd-dot-drop { 0% { transform: translateY(-34px) scale(.4); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes nd-dot-bob { 0%, 100% { transform: none; } 45% { transform: translateY(-7px) scaleY(1.04); } 55% { transform: translateY(-7px); } 80% { transform: translateY(0) scale(1.06, .94); } }
@keyframes nd-seg { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
.nd-preload-plus { width: 0; overflow: hidden; color: #959bb6; font-weight: 900; font-size: 22px; opacity: 0; transition: width .4s var(--nd-ease), opacity .3s; }
.nd-preload-brand { height: 0; width: 0; opacity: 0; display: grid; place-items: center; transition: width .45s var(--nd-ease), height .45s var(--nd-ease), opacity .4s; overflow: hidden; }
.nd-preload-brand img { max-height: 58px; max-width: 160px; object-fit: contain; }
.nd-preload.has-brand .nd-preload-plus { width: 18px; opacity: 1; }
.nd-preload.has-brand .nd-preload-brand { width: 160px; height: 64px; opacity: 1; }
.nd-preload-name { font-family: var(--font-heading, "Nunito", sans-serif); font-weight: 900; font-size: 20px; color: #020b42; letter-spacing: -.01em; animation: nd-feed-in .6s var(--nd-ease) .35s both; }
body[data-dashboard-theme="dark"] .nd-preload-name { color: #f3f5fa; }
.nd-preload-bar { width: 160px; height: 4px; border-radius: 99px; background: rgba(2, 11, 66, .1); overflow: hidden; }
.nd-preload-bar i { display: block; height: 100%; width: 40%; border-radius: 99px; background: var(--nd-yellow); animation: nd-bar 1.1s ease-in-out infinite; }
@keyframes nd-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ================================================================ Portail client */
body:not(.backoffice) :is(.card, .portal-card) { box-shadow: var(--nd-shadow); border: 0; }
body:not(.backoffice) .comment { border-radius: 4px 14px 14px 14px; }
body:not(.backoffice) .portal-project-item .progress > i, body:not(.backoffice) .portal-project-item .progress > span { background: var(--nd-yellow) !important; }
.portal-explorer-card { padding: 0 !important; overflow: hidden; }
.portal-explorer-card .ndx-head { padding-top: 20px; }

@media (prefers-reduced-motion: reduce) {
  mark.nd-hl, .nd-feed-item, .nd-live::before, .message, .ndv-pin, .tv-card, .tv-moving, .tv-bars i, .nd-preload-mark .nd-pl-wipe, .nd-preload-mark .nd-pl-dot, .nd-preload-bar i, .tour-slide { animation: none !important; }
  .ndx-sheet, .ndv, .tour { transition: none !important; }
}

/* Corrections : pied de page et listes vides compactes */
body.backoffice .app-footer .saas-credit > span.app-footer-brand { width: auto !important; height: auto !important; background: none !important; display: flex !important; overflow: visible; font-size: inherit; color: inherit; border-radius: 0; }
body.backoffice .app-footer .saas-credit > span:first-child img { width: 100%; height: 100%; object-fit: contain; }
.client-side .empty, .client-main .empty.compact-empty, body.backoffice .card-body > .empty.compact-empty { padding: 18px 12px !important; min-height: 0 !important; font-size: 13.5px; }
.site-tip[hidden], .site-cursor[hidden], .site-dot[hidden] { display: none !important; }
.site-svg .site-cursor { bottom: 0; }
.site-svg:has(.site-axis) .site-cursor { bottom: 24px; }

/* Pied de page du portail */
body:not(.backoffice) .portal-footer { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 22px max(20px, calc((100vw - 1180px) / 2)); background: transparent !important; color: var(--nd-muted); border-top: 1px solid var(--nd-line); font-size: 13px; }
body:not(.backoffice) .portal-footer a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 700; }
body:not(.backoffice) .portal-footer a strong { color: #020b42; }
body:not(.backoffice) #portal-footer-logo { display: inline-flex; height: 16px !important; }
body:not(.backoffice) #portal-footer-logo .nodema-mark { height: 16px; color: var(--nd-yellow); }
body:not(.backoffice) .portal-shell { min-height: 100vh; display: flex; flex-direction: column; }
body:not(.backoffice) .portal-main { flex: 1; width: 100%; }
.portal-chart { margin: 14px 0 6px; }
.portal-site-split { margin-top: 14px; gap: 18px; }
.portal-site-split h4 { margin: 0 0 6px; font-size: 14px; }

/* Logo d'agence dans la barre latérale : toujours contenu dans son cadre */
.sidebar .brand-mark.has-logo { height: 54px !important; width: 100% !important; display: flex !important; align-items: center; justify-content: flex-start; background: transparent !important; overflow: visible; }
.sidebar .brand-mark.has-logo img { width: auto !important; height: 100% !important; max-width: 176px; object-fit: contain; object-position: left center; }
body.is-demo [data-client-logout], body.is-demo .profile-logout { display: none !important; }
.tour-foot [hidden] { display: none !important; }
@media (max-width: 560px) { .tour-foot { flex-wrap: wrap; padding: 16px 20px 20px; } .tour-dots { flex-basis: 100%; margin-bottom: 4px; } .tour-foot .btn { flex: 1; } .tour-skip { padding-left: 0; } .tour-visual { height: 190px; } .tour-body { padding: 18px 20px 4px; } }

/* ===== 21/10 après-midi : pied de page en trois colonnes, badge, icônes qui se soulèvent ===== */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.backoffice .app-footer { display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center; gap: 16px; }
body.backoffice .app-footer .app-footer-logo { justify-self: start; display: inline-flex !important; align-items: center; width: auto; padding: 6px; margin-left: -6px; border-radius: 10px; color: var(--nd-ink); text-decoration: none; }
body.backoffice .app-footer .app-footer-logo > span:first-child { width: auto !important; height: auto !important; background: none !important; border-radius: 0; display: inline-flex !important; }
body.backoffice .app-footer .app-footer-logo .nodema-mark { height: 22px !important; width: auto; color: var(--nd-ink); transition: color .2s, transform .3s cubic-bezier(.2,1.4,.4,1); }
body.backoffice .app-footer .app-footer-logo:hover .nodema-mark { color: var(--nd-yellow-deep, #e0a400); transform: translateY(-2px) rotate(-6deg); }
body[data-dashboard-theme="dark"] .app-footer .app-footer-logo .nodema-mark { color: #f3f5fa; }
.app-footer-links { justify-self: center; }
.app-footer-meta { justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; text-align: right; }
.app-footer-flag { display: inline-flex; height: 10px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.app-footer-flag i { width: 5px; height: 10px; }
.app-footer-flag i:nth-child(1) { background: #2b4ea2; } .app-footer-flag i:nth-child(2) { background: #fff; } .app-footer-flag i:nth-child(3) { background: #e2453c; }
@media (max-width: 900px) {
  body.backoffice .app-footer { grid-template-columns: 1fr !important; justify-items: center; text-align: center; }
  body.backoffice .app-footer .app-footer-logo { justify-self: center; margin-left: 0; }
  .app-footer-meta { justify-self: center; text-align: center; }
}

/* Badge de notifications : chiffre bien centré dans sa pastille */
body.backoffice .notification-count, .notification-count { display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box; min-width: 20px; height: 20px; padding: 0 5px; line-height: 1 !important; font-size: 10.5px; font-weight: 900; font-variant-numeric: tabular-nums; top: -7px; right: -7px; border-width: 2px; }

/* Icônes qui se soulèvent au survol de leur ligne (comme sur nodema.fr), pas de toute la carte */
:is(.metric-icon, .ndx-folder-icon, .ndx-file-icon, .ndx-dest-icon, .nd-feed-icon, .nd-feed-thumb, .notification-icon, .site-favicon, .entity-logo, .file-thumb, .platform-notice-icon, .storage-banner-icon, .kb-choice-icon, .portal-question-icon) { transition: transform .32s cubic-bezier(.2,1.4,.4,1); }
:is(.list-row, .nd-feed-item, .ndx-row, .ndx-folder, .ndx-card, .ndx-dest, .kb-choice, .notification-item, tr, .metric-top, .portal-project-row, .portal-validation-card, .platform-notice, .storage-banner):hover > :is(.metric-icon, .ndx-folder-icon, .ndx-dest-icon, .nd-feed-icon, .nd-feed-thumb, .notification-icon, .site-favicon, .entity-logo, .file-thumb, .platform-notice-icon, .storage-banner-icon, .kb-choice-icon),
:is(.list-row, .ndx-row, .ndx-card, tr, .portal-validation-card):hover :is(.ndx-row-main, .client-cell, .ndx-card-media, .portal-validation-media) > :is(.ndx-file-icon, .entity-logo, .file-thumb, .ndx-card-thumb),
.portal-question-card .portal-question:hover .portal-question-icon { transform: translateY(-3px) rotate(-6deg) scale(1.06); }
:is(.ndx-card, .portal-validation-card):hover :is(.ndx-card-thumb, .portal-validation-media .file-thumb) { transform: none; }
@media (prefers-reduced-motion: reduce) { :is(.metric-icon, .ndx-folder-icon, .ndx-file-icon, .nd-feed-icon, .nd-feed-thumb, .entity-logo, .file-thumb, .kb-choice-icon) { transition: none !important; transform: none !important; } }

/* Miniatures de fichiers */
.has-thumb { background: var(--thumb) top center / cover no-repeat, #fff !important; box-shadow: inset 0 0 0 1px var(--nd-line); }
.has-thumb > svg { opacity: 0; }
.ndx-card-media { position: relative; display: block; }
.ndx-card-media .ndx-card-thumb { width: 100%; }
.file-thumb { position: relative; width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--nd-t-gray); color: var(--nd-c-gray); }
.file-thumb.is-image { background: var(--nd-t-violet); color: var(--nd-c-violet); }
.file-thumb.is-pdf { background: var(--nd-t-red); color: var(--nd-c-red); }
.file-thumb .ndx-icon { width: 18px; height: 18px; }
.file-thumb em { position: absolute; bottom: -4px; right: -6px; font-style: normal; font-size: 9px; font-weight: 900; padding: 1px 4px; border-radius: 5px; background: var(--nd-surface); box-shadow: 0 0 0 1px var(--nd-line); color: var(--nd-ink); }

/* Logo client (projets et clients) */
.entity-logo { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; overflow: hidden; background: var(--nd-soft-yellow); color: var(--nd-c-amber); font-weight: 900; font-size: 13px; letter-spacing: -.02em; box-shadow: inset 0 0 0 1px rgba(2, 11, 66,.06); }
.entity-logo.has-logo { background: #fff; }
.entity-logo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.entity-logo.is-sm { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; }
.entity-logo.is-internal { background: var(--nd-canvas); color: var(--nd-muted); }
.title-cell-flex { display: flex; align-items: center; gap: 12px; }
.nd-feed-thumb { position: relative; flex: none; }
.nd-feed-thumb > i { position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--nd-surface); box-shadow: 0 0 0 2px var(--nd-surface); }
.nd-feed-thumb > i svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.nd-feed-thumb > i.is-green { color: var(--nd-c-green); } .nd-feed-thumb > i.is-amber { color: var(--nd-c-amber); }
.nd-feed-thumb .file-thumb em { display: none; }

/* =====================================================================
 * Documents (connaissances) : feuille A4, modèles, lecteur, éditeur
 * ===================================================================== */
.nd-doc { --doc-accent: var(--nd-yellow, #13f5bb); --doc-ink: #020b42; position: relative; box-sizing: border-box; width: 740px; max-width: 100%; min-height: 1046px; margin: 0 auto; padding: 64px 72px 96px; background: #fff; color: var(--doc-ink); border-radius: 4px; box-shadow: 0 1px 2px rgba(2, 11, 66,.06), 0 18px 50px rgba(2, 11, 66,.1); font-family: var(--font-body, "Nunito Sans", "Segoe UI", system-ui, sans-serif); font-size: 14.5px; line-height: 1.65; text-align: left; overflow: hidden; }
.nd-doc-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 44px; color: #6f7479; font-size: 12px; font-weight: 700; }
.nd-doc-head img { max-height: 40px; max-width: 180px; object-fit: contain; display: block; }
.nd-doc-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 99px; background: color-mix(in srgb, var(--doc-accent) 22%, #fff); color: var(--doc-ink); font-weight: 900; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.nd-doc-company { font-weight: 800; color: #3f4448; }
.nd-doc-company img { max-height: 30px; }
.nd-doc-title { margin: 0 0 10px; font-family: var(--font-heading, "Nunito", sans-serif); font-weight: 900; font-size: 34px; line-height: 1.12; letter-spacing: -.025em; color: var(--doc-ink); }
.nd-doc-placeholder { color: #b8bbb7; }
.nd-doc-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 30px; color: #6b7194; font-size: 12.5px; font-weight: 700; }
.nd-doc-meta span + span::before { content: "·"; margin-right: 18px; color: #c3c5c1; }
.nd-doc-body { min-height: 300px; outline: none; }
.nd-doc-body > :first-child { margin-top: 0; }
.nd-doc-body h2 { margin: 30px 0 10px; font-family: var(--font-heading, "Nunito", sans-serif); font-size: 19px; font-weight: 900; letter-spacing: -.01em; }
.nd-doc-body h3 { margin: 20px 0 6px; font-size: 15.5px; font-weight: 900; }
.nd-doc-body p { margin: 0 0 12px; }
.nd-doc-body ul, .nd-doc-body ol { margin: 0 0 14px; padding-left: 22px; }
.nd-doc-body li { margin: 4px 0; }
.nd-doc-body a { color: inherit; text-decoration-color: var(--doc-accent); text-decoration-thickness: 2px; }
.nd-doc-body blockquote { margin: 16px 0; padding: 14px 18px; border-radius: 12px; background: #f6f5f0; border-left: 4px solid var(--doc-accent); }
.nd-doc-body blockquote.kb-warning { background: #fdf0ec; border-left-color: #e2683c; }
.nd-doc-body blockquote.kb-decision { background: #eef6f1; border-left-color: #3f7d6e; }
.nd-doc-body blockquote.kb-tip { background: #eef2fb; border-left-color: #4a63a8; }
.nd-doc-body blockquote.kb-highlight { padding: 18px 22px; background: color-mix(in srgb, var(--doc-accent) 20%, #fff); border: 0; font-size: 16px; font-weight: 800; }
.nd-doc-body ul.kb-checklist { list-style: none; padding-left: 0; }
.nd-doc-body ul.kb-checklist li { position: relative; padding-left: 30px; }
.nd-doc-body ul.kb-checklist li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border: 2px solid #c7ccdb; border-radius: 5px; }
.nd-doc-body ol.kb-steps { list-style: none; padding-left: 0; counter-reset: kb-step; }
.nd-doc-body ol.kb-steps li { position: relative; counter-increment: kb-step; padding: 2px 0 12px 46px; margin: 0; }
.nd-doc-body ol.kb-steps li::before { content: counter(kb-step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--doc-ink); color: #fff; font-weight: 900; font-size: 13px; }
.nd-doc-body ol.kb-steps li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 34px; bottom: 2px; width: 2px; background: #e2e6f0; }
.nd-doc-body table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: 13.5px; }
.nd-doc-body th, .nd-doc-body td { padding: 9px 12px; border-bottom: 1px solid #e8e8e2; text-align: left; vertical-align: top; }
.nd-doc-body thead th { background: #f3f5fa; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #5b6064; }
.nd-doc-body table.kb-meta th { width: 130px; color: #6b7194; font-weight: 800; }
.nd-doc-body hr { border: 0; border-top: 1px solid #e2e6f0; margin: 24px 0; }
.nd-doc-foot { position: absolute; left: 72px; right: 72px; bottom: 32px; display: flex; justify-content: space-between; gap: 20px; padding-top: 12px; border-top: 1px solid #e8ebf3; color: #a2a6a3; font-size: 10.5px; font-weight: 700; }
.nd-doc-foot span:last-child { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
/* Papier à en-tête */
.nd-doc.is-letterhead { padding-top: 0; }
.nd-doc.is-letterhead::before { content: ""; display: block; height: 10px; margin: 0 -72px 44px; background: var(--doc-accent); }
.nd-doc.is-letterhead .nd-doc-head { align-items: flex-start; padding-bottom: 22px; border-bottom: 1px solid #e8ebf3; margin-bottom: 40px; }
.nd-doc-brand strong { font-family: var(--font-heading, "Nunito", sans-serif); font-size: 22px; font-weight: 900; color: var(--doc-ink); }
.nd-doc-sender { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.nd-doc-sender strong { color: var(--doc-ink); font-size: 13px; }
.nd-doc.is-letterhead .nd-doc-title { font-size: 24px; }
.nd-doc.is-letterhead .nd-doc-foot { border-top: 2px solid var(--doc-accent); }
/* Procédure */
.nd-doc.is-procedure { padding-top: 0; }
.nd-doc.is-procedure .nd-doc-head { margin: 0 -72px 40px; padding: 26px 72px; background: var(--doc-ink); color: #c7ccdb; }
.nd-doc.is-procedure .nd-doc-badge { background: var(--doc-accent); }
.nd-doc.is-procedure .nd-doc-company { color: #f3f5fa; }
.nd-doc.is-procedure .nd-doc-company img { filter: brightness(0) invert(1); }
/* Compte rendu */
.nd-doc.is-report .nd-doc-head { padding-bottom: 20px; border-bottom: 3px solid var(--doc-ink); }
.nd-doc-date { display: flex; align-items: baseline; gap: 6px; color: var(--doc-ink); font-size: 13px; font-weight: 800; }
.nd-doc-date b { font-family: var(--font-heading, "Nunito", sans-serif); font-size: 30px; font-weight: 900; line-height: 1; }
.nd-doc.is-report .nd-doc-body h2 { padding-bottom: 6px; border-bottom: 1px solid #e8ebf3; }
/* Guide client */
.nd-doc.is-guide { padding-top: 0; }
.nd-doc.is-guide .nd-doc-head { margin: 0 -72px 0; padding: 30px 72px 0; background: color-mix(in srgb, var(--doc-accent) 16%, #fff); }
.nd-doc.is-guide .nd-doc-title { margin: 0 -72px; padding: 22px 72px 18px; background: color-mix(in srgb, var(--doc-accent) 16%, #fff); font-size: 36px; }
.nd-doc.is-guide .nd-doc-meta { margin: 0 -72px 36px; padding: 0 72px 30px; background: color-mix(in srgb, var(--doc-accent) 16%, #fff); border-radius: 0 0 36px 36px; }
.nd-doc.is-guide .nd-doc-badge { background: #fff; }
.nd-doc.is-guide .nd-doc-body h2 { display: inline-block; padding: 2px 10px; margin-left: -10px; border-radius: 8px; background: linear-gradient(transparent 55%, color-mix(in srgb, var(--doc-accent) 45%, transparent) 55%); }
/* Note interne */
.nd-doc.is-note::before { content: ""; position: absolute; top: 0; right: 72px; width: 70px; height: 26px; background: color-mix(in srgb, var(--doc-accent) 70%, #fff); opacity: .8; transform: translateY(-6px) rotate(-2deg); border-radius: 2px; }
.nd-doc.is-note .nd-doc-title { font-size: 28px; }
.nd-doc.is-note { background: #f7fffc; }

/* Miniature de document */
.kb-thumb { position: relative; height: 210px; overflow: hidden; background: linear-gradient(180deg, #f1f1ec, #e6e9f2); border-bottom: 1px solid var(--nd-line); }
.kb-thumb-inner { position: absolute; left: 50%; top: 18px; width: 740px; transform: translateX(-50%) scale(.34); transform-origin: top center; pointer-events: none; }
.kb-thumb-inner .nd-doc { box-shadow: 0 30px 70px rgba(2, 11, 66,.18); }
.kb-thumb::after { content: ""; position: absolute; inset: auto 0 0; height: 40px; background: linear-gradient(transparent, rgba(233,233,227,.9)); }
.knowledge-card.is-clickable { cursor: pointer; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
body.backoffice .knowledge-card.is-clickable:hover { transform: translateY(-4px) !important; box-shadow: 0 18px 40px rgba(2, 11, 66,.1) !important; }
.knowledge-card.is-clickable:hover .kb-thumb-inner { transform: translateX(-50%) translateY(-6px) scale(.35); }
.kb-thumb-inner { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.knowledge-card-body { padding: 16px 18px 6px; }
.knowledge-card-body h3 { margin: 8px 0 4px; font-size: 17px; font-weight: 900; letter-spacing: -.01em; }
.knowledge-card-body small { color: var(--nd-muted); font-weight: 700; font-size: 12.5px; }
body.backoffice .knowledge-card .knowledge-card-footer { padding: 12px 18px 16px; background: none; border-top: 0; flex-wrap: nowrap; }
body.backoffice .knowledge-card .knowledge-card-footer .row-actions { display: flex; gap: 8px; }
.kb-delete { color: var(--nd-muted) !important; padding-inline: 4px !important; background: none !important; border: 0 !important; }
.kb-delete:hover { color: #c0392b !important; }
.kb-card-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-style: normal; font-size: 11.5px; font-weight: 800; background: var(--nd-t-gray); color: var(--nd-c-gray); }
.kb-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kb-badge.is-green { background: var(--nd-t-green); color: var(--nd-c-green); }
.kb-badge.is-amber { background: var(--nd-soft-yellow); color: var(--nd-c-amber); }
.kb-badge.is-blue { background: var(--nd-t-blue); color: var(--nd-c-blue); }
.kb-filters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.kb-empty { grid-column: 1 / -1; }

/* Lecteur plein écran */
body.kb-reading { overflow: hidden; }
.kb-reader { position: fixed; inset: 0; z-index: 130; display: flex; flex-direction: column; background: rgba(28, 30, 33, .72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s; }
.kb-reader.is-open { opacity: 1; }
.kb-reader-bar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: var(--nd-surface, #fff); box-shadow: 0 1px 0 var(--nd-line); }
.kb-reader-close { width: 40px; height: 40px; flex: none; border: 0; border-radius: 12px; background: var(--nd-canvas); color: var(--nd-ink); display: grid; place-items: center; cursor: pointer; }
.kb-reader-close:hover { background: var(--nd-line); }
.kb-reader-title { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.kb-reader-title strong { font-size: 16px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--nd-ink); }
.kb-reader-title span { display: flex; gap: 6px; flex-wrap: wrap; }
.kb-reader-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.kb-reader-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
.kb-reader-canvas { flex: 1; overflow: auto; padding: 34px 20px 60px; }
.kb-reader-canvas .nd-doc { animation: kb-rise .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes kb-rise { from { opacity: 0; transform: translateY(18px); } }
@media (max-width: 760px) {
  .kb-reader-bar { flex-wrap: wrap; }
  .kb-reader-actions { width: 100%; justify-content: stretch; }
  .kb-reader-actions .btn { flex: 1; justify-content: center; }
  .kb-reader-canvas { padding: 16px 10px 40px; }
  .nd-doc { padding: 40px 26px 80px; min-height: 0; font-size: 14px; }
  .nd-doc.is-letterhead::before { margin-inline: -26px; }
  .nd-doc.is-procedure .nd-doc-head, .nd-doc.is-guide .nd-doc-head, .nd-doc.is-guide .nd-doc-title, .nd-doc.is-guide .nd-doc-meta { margin-inline: -26px; padding-inline: 26px; }
  .nd-doc-foot { left: 26px; right: 26px; }
  .nd-doc-title { font-size: 27px; }
}

/* Éditeur */
.modal.modal-wide { width: min(1240px, calc(100vw - 32px)) !important; max-width: none !important; }
.kb-editor-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 22px; align-items: start; }
.kb-editor-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; }
.kb-step { display: flex; align-items: center; gap: 9px; margin-top: 8px; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--nd-ink); }
.kb-step span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--nd-ink); color: #fff; font-size: 11px; letter-spacing: 0; }
.kb-choices { display: grid; gap: 8px; }
.kb-choices-template_key { grid-template-columns: 1fr 1fr; }
.kb-choice { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; border: 1.5px solid var(--nd-line); background: var(--nd-surface); cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
.kb-choices-visibility .kb-choice { flex-direction: row; align-items: center; }
.kb-choice input { position: absolute; opacity: 0; pointer-events: none; }
.kb-choice:hover { border-color: var(--nd-line-strong, #cdd2e0); }
.kb-choice.is-active { border-color: var(--nd-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nd-yellow) 45%, transparent); background: color-mix(in srgb, var(--nd-yellow) 7%, var(--nd-surface)); }
.kb-choice:focus-within { outline: 2px solid var(--nd-ink); outline-offset: 2px; }
.kb-choice-icon { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--nd-canvas); color: var(--nd-ink); }
.kb-choice.is-active .kb-choice-icon { background: var(--nd-yellow); }
.kb-choice-icon.is-client { background: var(--nd-t-blue); color: var(--nd-c-blue); }
.kb-choice-icon.is-team { background: var(--nd-t-gray); }
.kb-choice-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kb-choice-copy strong { font-size: 13.5px; font-weight: 900; color: var(--nd-ink); }
.kb-choice-copy small { font-size: 11.5px; line-height: 1.35; color: var(--nd-muted); }
.kb-editor-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.kb-toolbar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-radius: 12px; background: var(--nd-surface); box-shadow: 0 0 0 1px var(--nd-line), 0 8px 18px rgba(2, 11, 66,.05); }
.kb-toolbar button { border: 0; background: none; padding: 7px 10px; border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--nd-ink); cursor: pointer; }
.kb-toolbar button:hover { background: var(--nd-canvas); }
.kb-sep { width: 1px; margin: 4px 2px; background: var(--nd-line); }
.kb-editor-canvas { padding: 26px 18px; border-radius: 16px; background: #e6e9f2; max-height: 68vh; overflow: auto; }
.kb-editor-canvas .nd-doc { width: 100%; max-width: 740px; min-height: 900px; }
.kb-editor-canvas .rich-editor { border: 0 !important; padding: 0 !important; min-height: 420px; background: transparent !important; box-shadow: none !important; cursor: text; }
.kb-editor-canvas .rich-editor:focus { outline: none; }
@media (max-width: 980px) { .kb-editor-layout { grid-template-columns: 1fr; } .kb-editor-side { position: static; } }

/* Portail : ressources en cartes */
.portal-kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.portal-kb-card { padding: 0; border: 1px solid var(--nd-line); border-radius: 18px; overflow: hidden; background: var(--nd-surface); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.portal-kb-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(2, 11, 66,.1); }
.portal-kb-card .kb-thumb { height: 170px; }
.portal-kb-card .kb-thumb-inner { transform: translateX(-50%) scale(.3); }
.portal-kb-card-copy { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; }
.portal-kb-card-copy strong { font-size: 15px; font-weight: 900; }
.portal-kb-card-copy small { color: var(--nd-muted); font-weight: 700; font-size: 12px; }
.kb-reader-actions .btn { min-height: 38px; padding: 0 14px; border-radius: 11px; font-weight: 800; }
.kb-reader-actions .btn-secondary { background: var(--nd-canvas) !important; border: 1px solid var(--nd-line) !important; color: var(--nd-ink) !important; }
.kb-reader-actions .btn-secondary:hover { background: var(--nd-line) !important; }

/* ===== Visite guidée (démo) : halo, cercle animé et bulle ===== */
.guide-layer { position: fixed; inset: 0; z-index: 140; pointer-events: none; }
.guide-blocker { position: absolute; inset: 0; pointer-events: auto; }
.guide-spot { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(4, 8, 40, .58); outline: 3px solid var(--nd-yellow, #13f5bb); outline-offset: 0; transition: top .45s cubic-bezier(.2,.8,.2,1), left .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1); animation: guide-glow 2s ease-in-out infinite; pointer-events: none; }
@keyframes guide-glow { 0%, 100% { outline-color: var(--nd-yellow, #13f5bb); } 50% { outline-color: rgba(19, 245, 187, .45); } }
.guide-ring { position: fixed; width: 0; height: 0; pointer-events: none; transition: top .45s cubic-bezier(.2,.8,.2,1), left .45s cubic-bezier(.2,.8,.2,1); }
.guide-ring[hidden] { display: none; }
.guide-ring i { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--nd-yellow, #13f5bb); animation: guide-ring 1.6s cubic-bezier(.2,.8,.2,1) infinite; }
.guide-ring i:nth-child(2) { animation-delay: .8s; }
@keyframes guide-ring { from { transform: scale(.55); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.guide-pop { position: fixed; pointer-events: auto; box-sizing: border-box; padding: 18px 20px 16px; border-radius: 18px; background: var(--nd-surface, #fff); color: var(--nd-ink, #020b42); box-shadow: 0 24px 60px rgba(0,0,0,.28); transition: top .45s cubic-bezier(.2,.8,.2,1), left .45s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.guide-pop.is-hidden { opacity: 0; }
.guide-pop.is-pop { animation: guide-pop .4s cubic-bezier(.2,1.3,.4,1); }
@keyframes guide-pop { from { transform: translateY(8px) scale(.97); } }
.guide-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.guide-count { font-size: 11.5px; font-weight: 900; letter-spacing: .1em; color: #8a6a00; }
.guide-skip { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--nd-muted); cursor: pointer; padding: 4px; }
.guide-skip:hover { color: var(--nd-ink); }
.guide-title { margin: 0 0 6px; font-family: var(--font-heading, "Nunito", sans-serif); font-size: 19px; font-weight: 900; letter-spacing: -.01em; }
.guide-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--nd-muted); }
.guide-progress { height: 4px; margin: 14px 0 12px; border-radius: 4px; background: var(--nd-canvas); overflow: hidden; }
.guide-progress i { display: block; height: 100%; background: var(--nd-yellow, #13f5bb); border-radius: 4px; transition: width .45s cubic-bezier(.2,.8,.2,1); }
.guide-actions { display: flex; justify-content: flex-end; gap: 8px; }
.guide-actions [hidden] { display: none; }
.guide-layer.is-leaving { opacity: 0; transition: opacity .25s; }
@media (max-width: 640px) { .guide-pop { left: 12px !important; right: 12px; width: auto !important; top: auto !important; bottom: 12px; } }
@media (prefers-reduced-motion: reduce) { .guide-spot, .guide-ring i, .guide-pop { animation: none !important; transition: none !important; } }

/* =====================================================================
 * Portail client : même structure que l'espace agence (barre latérale, pages)
 * ===================================================================== */
body.portal-app { --portal-accent: var(--nd-yellow, #13f5bb); }
body.portal-app .agency-sidebar-brand .brand-mark:not(.has-logo) { width: 44px !important; height: 44px !important; border-radius: 13px; background: var(--nd-ink) !important; color: var(--nd-yellow); font-family: var(--font-heading, "Nunito", sans-serif); font-weight: 900; font-size: 18px !important; display: grid !important; place-items: center; }
body.portal-app .agency-sidebar-brand .brand-word { display: none; }
body.portal-app .agency-sidebar-brand.has-text-brand .brand-word { display: inline; font-size: 17px; font-weight: 900; color: var(--nd-ink); }
.portal-client-chip { display: flex; align-items: center; gap: 11px; margin: 4px 0 18px; padding: 10px 12px; border-radius: 14px; background: var(--nd-canvas); }
.portal-client-chip .entity-logo { width: 36px; height: 36px; }
.portal-client-chip small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--nd-muted); }
.portal-client-chip strong { display: block; font-size: 14px; font-weight: 900; color: var(--nd-ink); line-height: 1.2; }
.nav-item { position: relative; }
.nav-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 900; line-height: 1; background: var(--nd-t-green); color: var(--nd-c-green); }
.nav-count.is-alert { background: var(--portal-accent); color: var(--portal-on-accent, #020b42); }
.nav-count.hidden { display: none; }
.portal-secure { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 99px; background: var(--nd-t-green); color: var(--nd-c-green); font-size: 12.5px; font-weight: 800; }
.portal-secure svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.hero-date { color: var(--nd-muted); font-weight: 700; font-size: 14px; text-transform: capitalize; align-self: end; }
.portal-metrics { margin-bottom: 18px; }
button.metric.is-link { font: inherit; text-align: left; cursor: pointer; width: 100%; color: inherit; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
body.backoffice button.metric.is-link:hover { transform: translateY(-3px) !important; box-shadow: 0 16px 36px rgba(2, 11, 66,.09) !important; }
.metric-value-text { font-size: 28px !important; text-transform: capitalize; }
.portal-overview-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; }
.portal-overview-grid .list-row .badge { flex: none; }
.portal-all-good { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 16px; background: var(--nd-t-green); color: var(--nd-c-green); }
.portal-all-good > span { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; font-weight: 900; font-size: 18px; }
.portal-all-good strong { display: block; color: var(--nd-ink); font-weight: 900; }
.portal-all-good small { color: var(--nd-muted); font-weight: 700; }
.nd-new-dot { width: 9px; height: 9px; flex: none; margin-left: auto; border-radius: 50%; background: var(--portal-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--portal-accent) 25%, transparent); }
.portal-project-rows { display: grid; gap: 10px; }
.portal-project-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 1px solid var(--nd-line); border-radius: 16px; background: var(--nd-surface); font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .2s, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.portal-project-row:hover { border-color: var(--nd-line-strong, #cdd2e0); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(2, 11, 66,.07); }
.portal-project-ring { position: relative; width: 50px; height: 50px; flex: none; border-radius: 50%; background: conic-gradient(var(--portal-accent) var(--p), var(--nd-canvas) 0); display: grid; place-items: center; transition: transform .32s cubic-bezier(.2,1.4,.4,1); }
.portal-project-row:hover .portal-project-ring { transform: translateY(-2px) rotate(-6deg) scale(1.05); }
.portal-project-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--nd-surface); }
.portal-project-ring b { position: relative; font-size: 11.5px; font-weight: 900; }
.portal-project-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.portal-project-copy strong { font-weight: 900; font-size: 15px; color: var(--nd-ink); }
.portal-project-copy small { color: var(--nd-muted); font-weight: 700; font-size: 12.5px; }
.portal-projects-stack { display: grid; gap: 18px; }
.portal-project-card { padding: 26px 28px !important; scroll-margin-top: 90px; }
.portal-project-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 16px; }
.portal-project-card-head h3 { margin: 10px 0 4px; font-size: 24px; font-weight: 900; letter-spacing: -.02em; }
.portal-project-card-head p { margin: 0; color: var(--nd-muted); }
.portal-project-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.portal-project-big { text-align: right; }
.portal-project-big strong { display: block; font-family: var(--font-heading, "Nunito", sans-serif); font-size: 40px; font-weight: 900; line-height: 1; }
.portal-project-big span { color: var(--nd-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.portal-project-card .portal-progress { height: 8px; margin-bottom: 18px; border-radius: 8px; background: var(--nd-canvas); overflow: hidden; }
.portal-project-card .portal-progress i { background: var(--portal-accent); }
.portal-project-card .portal-phases-horizontal { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.portal-project-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--nd-line); }
.portal-next-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.portal-next-steps span { font-size: 11.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--nd-muted); margin-right: 4px; }
.portal-next-steps em { font-style: normal; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 99px; background: var(--nd-canvas); }
.portal-validation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.portal-validation-card { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--nd-line); border-radius: 18px; overflow: hidden; background: var(--nd-surface); font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.portal-validation-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(2, 11, 66,.1); }
.portal-validation-media .file-thumb { width: 100%; height: 170px; border-radius: 0; }
.portal-validation-media .file-thumb .ndx-icon { width: 36px; height: 36px; }
.portal-validation-media .file-thumb em { right: 12px; bottom: 12px; font-size: 11px; padding: 2px 7px; }
.portal-validation-copy { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.portal-validation-copy strong { font-weight: 900; }
.portal-validation-copy small { color: var(--nd-muted); font-weight: 700; }
.portal-validation-copy .badge { align-self: flex-start; margin-top: 6px; }
.portal-question { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px; height: 100%; box-sizing: border-box; }
.portal-question h3 { margin: 0 0 4px; }
.portal-question p { margin: 0; color: var(--nd-muted); }
.portal-question-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--portal-accent) 25%, #fff); transition: transform .32s cubic-bezier(.2,1.4,.4,1); }
.portal-question-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--nd-ink); stroke-width: 1.8; }
.portal-site-card .card-head { flex-wrap: wrap; gap: 12px; }
body.portal-app .btn-primary { background: var(--portal-accent) !important; border-color: var(--portal-accent) !important; color: var(--portal-on-accent, #020b42) !important; }
.app-footer-agency { justify-self: start; font-size: 12.5px; font-weight: 800; color: var(--nd-muted); }
.portal-powered { display: inline-flex; align-items: center; gap: 7px; color: var(--nd-muted); text-decoration: none; font-size: 12px; }
.portal-powered small { font-size: 12px; font-weight: 700; }
.portal-powered strong { color: var(--nd-ink); font-weight: 900; }
.portal-powered .nodema-mark { height: 14px; width: auto; color: var(--nd-ink); }
.portal-powered:hover .nodema-mark { transform: translateY(-2px) rotate(-6deg); transition: transform .3s cubic-bezier(.2,1.4,.4,1); }
@media (max-width: 1100px) { .portal-overview-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .portal-secure span { display: none; }
  .portal-project-card { padding: 20px !important; }
  .portal-project-card-head { flex-direction: column; }
  .portal-project-big { text-align: left; }
  .portal-project-foot { flex-direction: column; align-items: flex-start; }
  .hero-date { display: none; }
}
.portal-project-card .portal-progress i, .portal-progress i { background: var(--portal-accent) !important; }
/* Barre de navigation mobile : seulement les rubriques (pas de logo ni de fiche client) */
@media (max-width: 900px) {
  body.backoffice .sidebar > .brand, body.backoffice .sidebar .brand-logo-only, .portal-client-chip { display: none !important; }
  body.backoffice .sidebar .nav-item { position: relative; }
  body.backoffice .sidebar .nav-count { position: absolute; top: 2px; left: 50%; margin-left: 6px; min-width: 17px; height: 17px; font-size: 10px; padding: 0 4px; }
  body.backoffice .sidebar .nav-count.hidden { display: none; }
}
/* Écran d'accès du portail : carte centrée */
body.portal-app .login-shell:not(.hidden) { display: grid !important; place-items: center; grid-template-columns: 1fr !important; min-height: 100vh; padding: 24px; }
body.portal-app .login-shell.hidden { display: none !important; }
body.portal-app .login-shell .login-card { width: min(470px, 100%); margin: 0 auto; padding: 38px; background: var(--nd-surface, #fff); border: 1px solid var(--nd-line); border-radius: 24px; box-shadow: 0 24px 70px rgba(2, 11, 66,.08); }
body.portal-app .login-shell .brand-logo-only { margin-bottom: 26px; }
body.portal-app #login-mark .nodema-mark { height: 30px; width: auto; color: var(--nd-ink); }

/* ===== Pied de page unique (agence, démo, portail) : une ligne simple, sans effet sur le logo ===== */
body.backoffice .app-footer, body.backoffice .app-footer.portal-app-footer { display: flex !important; grid-template-columns: none !important; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 40px; padding: 18px 0 6px !important; border-top: 1px solid var(--nd-line, #e6e3dc); color: var(--nd-muted, #6f726c); font-size: 12.5px; text-align: left; }
body.backoffice .app-footer > * { justify-self: auto !important; margin: 0 !important; }
body.backoffice .app-footer .app-footer-logo, body.backoffice .app-footer .app-footer-logo:hover { display: inline-flex !important; align-items: center; gap: 8px; padding: 0 !important; background: none !important; color: var(--nd-ink, #020b42); text-decoration: none; transform: none !important; }
body.backoffice .app-footer .app-footer-logo > span:first-child { width: auto !important; height: auto !important; background: none !important; padding: 0 !important; }
body.backoffice .app-footer .app-footer-logo .nodema-mark, body.backoffice .app-footer .app-footer-logo:hover .nodema-mark { height: 18px !important; width: auto; color: currentColor !important; transform: none !important; transition: none !important; }
body.backoffice .app-footer .app-footer-logo .visually-hidden { position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; white-space: nowrap; font-weight: 900; font-size: 13px; }
body.backoffice .app-footer .app-footer-links { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
body.backoffice .app-footer .app-footer-links :is(a, button) { padding: 4px 8px; font-weight: 700; font-size: 12.5px; color: inherit; background: none !important; border-radius: 6px; }
body.backoffice .app-footer .app-footer-links :is(a, button):hover { color: var(--nd-ink, #020b42); text-decoration: underline; text-underline-offset: 3px; }
body.backoffice .app-footer .app-footer-meta, body.backoffice .app-footer .app-footer-agency { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: inherit; text-decoration: none; text-align: right; }
body.backoffice .app-footer .portal-powered small { font-size: 12.5px; font-weight: 700; }
body.backoffice .app-footer .portal-powered .nodema-mark { height: 13px; width: auto; color: var(--nd-ink, #020b42); }
body.backoffice .app-footer .portal-powered strong { color: var(--nd-ink, #020b42); font-weight: 900; }
body.backoffice .app-footer .is-off { display: none !important; }
body[data-dashboard-theme="dark"] .app-footer :is(.app-footer-logo, .portal-powered strong, .portal-powered .nodema-mark) { color: #f3f5fa !important; }
@media (max-width: 900px) {
  body.backoffice .app-footer, body.backoffice .app-footer.portal-app-footer { flex-direction: column; justify-content: center; text-align: center; padding-bottom: 96px !important; }
  body.backoffice .app-footer .app-footer-meta { text-align: center; }
}

/* ===== Repère provisoire (notification ouverte, élément ciblé) ===== */
@keyframes nd-flash-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nd-yellow, #13f5bb) 80%, transparent), 0 0 0 0 transparent; } 25% { box-shadow: 0 0 0 3px var(--nd-yellow, #13f5bb), 0 0 0 9px color-mix(in srgb, var(--nd-yellow, #13f5bb) 22%, transparent); } 80% { box-shadow: 0 0 0 3px var(--nd-yellow, #13f5bb), 0 0 0 9px color-mix(in srgb, var(--nd-yellow, #13f5bb) 12%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.nd-flash { animation: nd-flash-ring 2.6s ease both !important; border-radius: 12px; position: relative; z-index: 1; }
.ndv-pin.nd-flash-pin { animation: nd-pin-pulse .8s ease 3; }
@keyframes nd-pin-pulse { 50% { transform: scale(1.35); } }

/* ===== Sélection multiple : fichiers et dossiers ===== */
.ndx-bulk { background: transparent; color: inherit; padding: 4px 8px 4px 2px; margin: 10px 20px 0; animation: none; min-height: 40px; }
.ndx-bulk.is-active { background: var(--nd-ink); color: #f3f5fa; padding: 6px 10px 6px 4px; animation: nd-feed-in .25s var(--nd-ease) both; }
.ndx-check-all { width: auto; height: auto; display: inline-flex; gap: 8px; padding: 6px 8px; font-size: 13px; font-weight: 700; color: var(--nd-muted); }
.ndx-bulk.is-active .ndx-check-all { color: #f3f5fa; }
.ndx-bulk.is-active .ndx-check input { accent-color: var(--nd-yellow); }
.ndx-bulk-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.ndx-bulk .btn-danger { background: #c94a3f; border-color: #c94a3f; color: #fff; }
.ndx-folder { position: relative; }
.ndx-folder-check { width: 26px; height: 26px; margin: -4px -4px -4px -6px; }
.ndx-folder.is-selected { border-color: var(--nd-ink); background: color-mix(in srgb, var(--nd-soft-yellow) 70%, var(--nd-surface)); }
.ndx-version { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--nd-t-blue); color: var(--nd-c-blue); font-style: normal; font-size: 10.5px; font-weight: 900; vertical-align: 2px; }
.ndx-rename { display: flex; flex-direction: column; gap: 8px; }
.ndx-rename-tools { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--nd-line); margin-bottom: 4px; }
.ndx-rename-tools label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 800; flex: 1; min-width: 180px; }
.ndx-rename-row { display: flex; align-items: center; gap: 10px; }
.ndx-rename-row .ndx-icon { width: 20px; height: 20px; color: var(--nd-muted); flex: none; }
.ndx-rename-row .input { flex: 1; }

/* ===== Nouvelle version ===== */
.ndx-version-upload { display: flex; flex-direction: column; gap: 14px; }
.ndx-version-upload .ndx-pick { margin: 0; }
.ndx-toggle { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--nd-line); border-radius: 14px; cursor: pointer; }
.ndx-toggle input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--nd-ink); flex: none; }
.ndx-toggle span { display: flex; flex-direction: column; gap: 2px; }
.ndx-toggle small { color: var(--nd-muted); font-size: 12.5px; }
.ndx-version-info { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--nd-soft-yellow); color: var(--nd-c-amber); font-size: 13px; font-weight: 700; }
.ndx-version-info .ndx-icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* ===== Visionneuse : versions, réponses, remarques internes ===== */
.ndv-version-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--nd-line-strong); background: var(--nd-surface); color: var(--nd-ink); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.ndv-version-chip .ndx-icon { width: 15px; height: 15px; }
.ndv-version-chip .ndv-chip-caret { transform: rotate(90deg); width: 13px; height: 13px; }
.ndv-version-chip.is-old { background: var(--nd-soft-yellow); border-color: transparent; color: var(--nd-c-amber); }
.ndv-old-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 16px 0; padding: 10px 14px; border-radius: 12px; background: var(--nd-soft-yellow); color: var(--nd-c-amber); font-size: 13px; font-weight: 700; }
.ndv-old-banner.is-new { background: var(--nd-t-blue); color: var(--nd-c-blue); }
.ndv-old-banner .ndx-icon { width: 17px; height: 17px; flex: none; }
.ndv-old-banner em { font-style: normal; opacity: .85; }
.ndv-old-banner .ndx-link { margin-left: auto; }
.ndv-versions-menu { width: min(420px, calc(100vw - 24px)); max-height: 60vh; overflow-y: auto; z-index: 1300 !important; }
.ndv-versions-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; border-bottom: 1px solid var(--nd-line); margin-bottom: 4px; }
.ndv-versions-head .ndx-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; text-decoration: none; }
.ndv-versions-head .ndx-icon { width: 15px; height: 15px; }
.ndv-version-item { display: grid !important; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px !important; text-align: left; }
.ndv-version-item.is-active { background: var(--nd-soft-yellow) !important; }
.ndv-version-n { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--nd-t-blue); color: var(--nd-c-blue); font-weight: 900; font-size: 12px; }
.ndv-version-copy { display: flex; flex-direction: column; min-width: 0; }
.ndv-version-copy small { color: var(--nd-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndv-version-del { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--nd-muted); }
.ndv-version-del:hover { background: var(--nd-t-red); color: var(--nd-c-red); }
.ndv-version-del .ndx-icon { width: 15px; height: 15px; }
.ndv-internal { display: flex; gap: 10px; align-items: flex-start; margin: 12px 14px 0; padding: 10px 12px; border-radius: 12px; background: var(--nd-canvas); font-size: 12.5px; line-height: 1.45; color: var(--nd-muted); }
.ndv-internal .ndx-icon { width: 17px; height: 17px; flex: none; color: var(--nd-ink); }
.ndv-internal strong { color: var(--nd-ink); }
.ndv-internal-tag { margin-left: auto; padding: 1px 7px; border-radius: 6px; background: var(--nd-t-gray); color: var(--nd-c-gray); font-size: 10.5px; font-weight: 900; }
.ndv-tab-help { margin: 6px 16px 0; color: var(--nd-muted); font-size: 12px; font-weight: 600; }
.ndv-compose[hidden] { display: none !important; }
.ndv-replies { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 2px; padding-left: 12px; border-left: 2px solid var(--nd-line-strong); }
.ndv-reply header { display: flex; gap: 8px; align-items: baseline; }
.ndv-reply header strong { font-size: 13px; }
.ndv-reply header time { color: var(--nd-muted); font-size: 11px; }
.ndv-reply p { margin: 2px 0 0; font-size: 13.5px; }
.ndv-note-foot { display: flex; gap: 14px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.ndv-note-foot .ndx-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.ndv-note-foot .ndx-icon { width: 14px; height: 14px; }
.ndv-reply-form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }

/* Comparaison de versions */
.ndv { position: relative; }
.ndv-compare { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; background: var(--nd-surface); border-radius: inherit; animation: nd-feed-in .2s var(--nd-ease) both; }
.ndv-compare-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--nd-line); }
.ndv-compare-head > strong { font-weight: 900; font-size: 16px; margin-right: auto; }
.ndv-compare-pick { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--nd-muted); }
.ndv-compare-pick .select { min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: 13px; max-width: 260px; }
.ndv-compare-modes { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--nd-canvas); }
.ndv-compare-modes button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 800; color: var(--nd-muted); cursor: pointer; }
.ndv-compare-modes button.is-active { background: var(--nd-surface); color: var(--nd-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.ndv-compare-body { flex: 1; min-height: 0; overflow: auto; padding: 18px; background: var(--nd-canvas); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ndv-compare-side { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.ndv-compare-side figure { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ndv-compare-side figcaption { font-size: 13px; font-weight: 900; }
.ndv-compare-frame { background: var(--nd-surface); border-radius: 14px; padding: 10px; box-shadow: 0 6px 20px rgba(2, 11, 66, .06); display: grid; place-items: center; }
.ndv-compare-frame img, .ndv-compare-stack img { display: block; max-width: 100%; max-height: 68vh; object-fit: contain; }
.ndv-compare-missing { padding: 40px 20px; color: var(--nd-muted); font-weight: 700; text-align: center; }
.ndv-compare-slider { width: min(1000px, 100%); display: flex; flex-direction: column; gap: 10px; }
.ndv-compare-stack { position: relative; display: grid; background: var(--nd-surface); border-radius: 14px; overflow: hidden; cursor: ew-resize; touch-action: none; user-select: none; box-shadow: 0 6px 20px rgba(2, 11, 66, .06); }
.ndv-compare-stack > img, .ndv-compare-top { grid-area: 1 / 1; }
.ndv-compare-stack > img { width: 100%; }
.ndv-compare-top { clip-path: inset(0 calc(100% - var(--split)) 0 0); background: var(--nd-surface); }
.ndv-compare-top img { width: 100%; }
.ndv-compare-handle { position: absolute; top: 0; bottom: 0; left: var(--split); width: 0; pointer-events: none; }
.ndv-compare-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--nd-yellow, #13f5bb); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.ndv-compare-handle i { position: absolute; top: 50%; left: -18px; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: var(--nd-yellow, #13f5bb); box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.ndv-compare-handle i::before, .ndv-compare-handle i::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border: solid #020b42; border-width: 0 0 2.5px 2.5px; }
.ndv-compare-handle i::before { left: 8px; transform: translateY(-50%) rotate(45deg); }
.ndv-compare-handle i::after { right: 8px; transform: translateY(-50%) rotate(-135deg); }
.ndv-compare-tag { position: absolute; top: 12px; padding: 4px 10px; border-radius: 8px; background: rgba(2, 11, 66, .78); color: #fff; font-size: 12px; font-weight: 800; pointer-events: none; max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndv-compare-tag.is-left { left: 12px; }
.ndv-compare-tag.is-right { right: 12px; }
.ndv-compare-slider input[type="range"] { width: 100%; accent-color: var(--nd-ink); }
.ndv-compare-pager { position: static; }
@media (max-width: 760px) { .ndv-compare-side { grid-template-columns: 1fr; } .ndv-compare-head > strong { width: 100%; } }

/* ===== Discussions unifiées ===== */
body.backoffice .discussions-layout { grid-template-columns: 360px minmax(0, 1fr); align-items: start; }
.discussions-list-card .card-body { padding: 6px; max-height: min(70vh, 720px); overflow-y: auto; }
.discussions-list-head { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 10px; }
.discussion-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.discussion-filter { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--nd-line); background: var(--nd-surface); font: inherit; font-size: 13px; font-weight: 800; color: inherit; cursor: pointer; }
.discussion-filter span { color: var(--nd-muted); font-size: 11.5px; }
.discussion-filter em { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--nd-yellow); color: #020b42; font-size: 11px; display: grid; place-items: center; }
.discussion-filter.is-active { background: var(--nd-ink); border-color: var(--nd-ink); color: #f3f5fa; }
.discussion-filter.is-active span { color: rgba(243, 245, 250, .6); }
.discussion-search input { width: 100%; height: 38px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--nd-line); background: var(--nd-canvas); font: inherit; font-size: 13.5px; color: inherit; }
.thread-item { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px; border: 0; border-radius: 14px; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.thread-item + .thread-item { margin-top: 2px; }
.thread-item:hover { background: var(--nd-canvas); }
.thread-item.active { background: var(--nd-soft-yellow); }
.thread-item.has-unread .thread-top strong { font-weight: 900; }
.thread-avatar { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; flex: none; font-weight: 900; }
.thread-avatar.is-team { background: var(--nd-t-gray); color: var(--nd-c-gray); font-size: 17px; }
.thread-avatar.is-client { background: var(--nd-t-blue); color: var(--nd-c-blue); font-size: 13px; }
.thread-avatar.is-client > * { width: 100%; height: 100%; border-radius: inherit; }
.thread-avatar.is-client img { object-fit: contain; background: #fff; }
.thread-avatar.is-file .thread-thumb { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--nd-t-violet) var(--thumb) center / cover no-repeat; color: var(--nd-c-violet); position: relative; }
.thread-avatar.is-file .thread-thumb.has-thumb .ndx-icon, .thread-avatar.is-file .thread-thumb.has-thumb em { opacity: 0; }
.thread-avatar.is-file .thread-thumb em { display: none; }
.thread-avatar.is-file .thread-thumb .ndx-icon { width: 20px; height: 20px; }
.thread-copy { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.thread-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.thread-top strong { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-top time { color: var(--nd-muted); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.thread-copy small { color: var(--nd-muted); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-last { color: var(--nd-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-flags { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.thread-scope { font-style: normal; display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 900; white-space: nowrap; }
.thread-scope.is-client { background: var(--nd-t-blue); color: var(--nd-c-blue); }
.thread-scope.is-team { background: var(--nd-t-gray); color: var(--nd-c-gray); }
.thread-scope.is-file { background: var(--nd-t-violet); color: var(--nd-c-violet); }
.thread-unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--nd-yellow); color: #020b42; font-size: 11.5px; font-weight: 900; display: grid; place-items: center; }
.discussion-thread-head { display: flex !important; align-items: center !important; justify-content: space-between; gap: 12px; }
body.backoffice #channel-title { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; min-width: 0; }
body.backoffice #channel-title > div { min-width: 0; }
body.backoffice #channel-title h3 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.backoffice #channel-title small { width: auto; display: block; margin-top: 3px; }
.thread-back { display: none; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--nd-line); background: var(--nd-surface); font-size: 22px; line-height: 1; cursor: pointer; flex: none; }
.discussion-head-actions { display: flex; gap: 6px; flex: none; }
.message.is-client .message-avatar { background: var(--nd-t-blue); color: var(--nd-c-blue); }
.message.is-client .message-avatar img { object-fit: contain; background: #fff; }
.message-avatar > span, .message-avatar > .entity-logo { width: 100%; height: 100%; display: grid; place-items: center; border-radius: inherit; }
.message-content header .thread-scope { align-self: center; }
.message.is-request .message-content { padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--nd-t-blue) 60%, var(--nd-surface)); }
.message-request { display: inline-block; margin: 4px 0 2px; padding: 2px 8px; border-radius: 7px; background: var(--nd-c-blue); color: #fff; font-size: 11.5px; font-weight: 900; }
.message-doc { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; padding: 8px 14px 8px 8px; max-width: min(420px, 100%); border-radius: 14px; border: 1px solid var(--nd-line); background: var(--nd-surface); cursor: pointer; font: inherit; color: inherit; text-align: left; }
.message-doc:hover { border-color: var(--nd-ink); }
.message-doc-thumb { width: 52px; height: 52px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--nd-t-violet) var(--thumb) center / cover no-repeat; color: var(--nd-c-violet); }
.message-doc-thumb.has-thumb > * { opacity: 0; }
.message-doc-thumb em { display: none; }
.message-doc > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.message-doc strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.message-doc small { display: flex; align-items: center; gap: 8px; color: var(--nd-muted); font-size: 12px; font-weight: 700; }
.message-remark { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 2px; padding: 3px 10px 3px 4px; border-radius: 9px; border: 0; background: var(--nd-soft-yellow); color: var(--nd-c-amber); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.message-remark b { width: 20px; height: 20px; border-radius: 50% 50% 50% 4px; background: var(--nd-yellow); color: #020b42; display: grid; place-items: center; font-size: 11px; }
.message-remark.is-reply { background: var(--nd-canvas); color: var(--nd-muted); }
.compose-doc { background: transparent; }
.compose-chip.is-doc .ndx-icon { width: 16px; height: 16px; }
.compose-scope { margin: 6px 2px 0; color: var(--nd-muted); font-size: 12px; font-weight: 600; }
.doc-pick-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; max-height: 50vh; overflow-y: auto; }
.doc-pick-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border: 0; border-radius: 12px; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.doc-pick-item:hover { background: var(--nd-canvas); }
.doc-pick-item > span { display: flex; flex-direction: column; min-width: 0; }
.doc-pick-item strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-pick-item small { color: var(--nd-muted); font-size: 12px; }
.doc-pick-thumb { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--nd-t-violet) var(--thumb) center / cover no-repeat; color: var(--nd-c-violet); }
.doc-pick-thumb.has-thumb > * { opacity: 0; }
.doc-pick-thumb em { display: none; }
.overview-threads { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.overview-thread { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; border: 1px solid var(--nd-line); background: var(--nd-surface); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.overview-thread:hover { border-color: var(--nd-ink); }
.overview-thread.has-unread { border-color: color-mix(in srgb, var(--nd-yellow) 70%, transparent); background: color-mix(in srgb, var(--nd-soft-yellow) 50%, var(--nd-surface)); }
.overview-thread > span:not(.thread-avatar) { display: flex; flex-direction: column; min-width: 0; }
.overview-thread strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overview-thread small { color: var(--nd-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overview-thread time { color: var(--nd-muted); font-size: 11.5px; font-weight: 700; }
.overview-threads-note { margin: 10px 2px 0; }
.client-discussions .overview-thread + .overview-thread { margin-top: 6px; }
.client-discussions .overview-thread { width: 100%; }
.choice-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.choice-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1.5px solid var(--nd-line); border-radius: 16px; cursor: pointer; }
.choice-card input { position: absolute; opacity: 0; }
.choice-card:has(input:checked) { border-color: var(--nd-ink); background: color-mix(in srgb, var(--nd-soft-yellow) 55%, var(--nd-surface)); }
.choice-card-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--nd-canvas); font-size: 18px; font-weight: 900; margin-bottom: 4px; }
.choice-card small { color: var(--nd-muted); font-size: 12.5px; line-height: 1.4; }
@media (max-width: 900px) {
  body.backoffice .discussions-layout { grid-template-columns: 1fr; }
  .discussions-layout.has-thread .discussions-list-card { display: none; }
  .discussions-layout:not(.has-thread) .discussion-thread-card { display: none; }
  .thread-back { display: grid; place-items: center; }
  .choice-cards { grid-template-columns: 1fr; }
}

/* ===== Portail : messages ===== */
.portal-messages-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.portal-threads-card .card-body { padding: 6px; max-height: min(70vh, 700px); overflow-y: auto; }
.portal-thread-head { display: flex !important; align-items: center !important; justify-content: space-between; gap: 12px; }
#portal-thread-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
#portal-thread-title h3 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#portal-thread-title small { display: block; color: var(--nd-muted); font-size: 12.5px; font-weight: 700; margin-top: 2px; }
body.portal-app .channel-messages { display: flex; flex-direction: column; gap: 2px; max-height: min(60vh, 620px); min-height: 260px; overflow-y: auto; padding: 4px 4px 12px; }
body.portal-app .channel-compose { position: relative; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--nd-line); }
body.portal-app .channel-compose.hidden { display: none !important; }
body.portal-app .message.is-mine .message-avatar { background: color-mix(in srgb, var(--portal-accent) 30%, #fff); color: #020b42; }
.portal-messages-card .overview-thread { width: 100%; }
.portal-messages-card .overview-thread + .overview-thread { margin-top: 6px; }
.thread-avatar.is-client img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
@media (max-width: 900px) {
  .portal-messages-layout { grid-template-columns: 1fr; }
  .portal-messages-layout.has-thread .portal-threads-card { display: none; }
  .portal-messages-layout:not(.has-thread) .portal-thread-card { display: none; }
}
body.backoffice .app-footer .nd-foot-brand, body.backoffice .app-footer .nd-foot-brand:hover { display: inline-flex; align-items: center; gap: 8px; color: var(--nd-ink, #020b42); text-decoration: none; font-weight: 900; font-size: 13.5px; }
body.backoffice .app-footer .nd-foot-brand .nodema-mark { height: 16px; width: auto; color: currentColor; transition: none; transform: none; }
body.backoffice .app-footer .nd-foot-brand.is-off { display: none !important; }
body[data-dashboard-theme="dark"] .app-footer .nd-foot-brand { color: #f3f5fa; }
body.portal-app .hero .eyebrow, body.portal-app .portal-main .eyebrow { color: var(--nd-yellow-deep, #8a6810); }
#question-button { white-space: nowrap; }
@media (max-width: 640px) {
  .portal-thread-head, .discussion-thread-head { flex-wrap: wrap; }
  #portal-thread-actions, .discussion-head-actions { width: 100%; }
  #portal-thread-actions .btn, .discussion-head-actions .btn { width: 100%; }
}

/* Les fenêtres légères (nouvelle version, déplacer, renommer…) passent toujours au-dessus de la visionneuse. */
.ndx-sheet-backdrop { z-index: 1200 !important; }
.ndx-menu { z-index: 1250 !important; }
.toast { z-index: 1400 !important; }
.notification-row { position: relative; display: flex; align-items: stretch; gap: 4px; transition: opacity .16s, transform .16s; }
.notification-row .notification-item { flex: 1; min-width: 0; }
.notification-row.is-leaving { opacity: 0; transform: translateX(16px); }
.notification-dismiss { flex: none; width: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--nd-muted); font-size: 18px; cursor: pointer; opacity: .55; }
.notification-row:hover .notification-dismiss, .notification-dismiss:focus-visible { opacity: 1; }
.notification-dismiss:hover { background: var(--nd-t-red); color: var(--nd-c-red); }
.notification-actions { flex-wrap: wrap; }
@media (max-width: 640px) { .notification-actions .btn { flex: 1 1 auto; } .notification-dismiss { opacity: 1; } }

/* Gestion des messages et pièces jointes */
.message-delete, .ndv-del { margin-left: auto; width: 24px; height: 24px; border: 0; border-radius: 7px; background: transparent; color: var(--nd-muted); font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; }
.message:hover .message-delete, .message-delete:focus-visible, .ndv-msg:hover .ndv-del, .ndv-note:hover .ndv-del, .ndv-del:focus-visible { opacity: 1; }
.message-delete:hover, .ndv-del:hover { background: var(--nd-t-red); color: var(--nd-c-red); }
@media (hover: none) { .message-delete, .ndv-del { opacity: .6; } }
.message-content header { flex-wrap: wrap; }
.thread-more { font-size: 20px; font-weight: 900; }
.ndv-author-photo { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; align-self: center; }
.ndv-msg header, .ndv-note header, .ndv-reply header { display: flex; align-items: center; gap: 8px; }
.ndv-msg header time, .ndv-note header time { margin-left: 0; }
.ndv-attachment, .ndv-docref { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 10px; border-radius: 9px; border: 1px solid var(--nd-line); background: var(--nd-surface); font: inherit; font-size: 12.5px; font-weight: 800; color: inherit; cursor: pointer; max-width: 100%; }
.ndv-attachment .ndx-icon, .ndv-docref .ndx-icon { width: 15px; height: 15px; flex: none; }
.ndv-docref { cursor: default; background: var(--nd-canvas); }
.ndv-compose { flex-wrap: wrap; }
.ndv-attach { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--nd-line-strong); display: grid; place-items: center; cursor: pointer; color: var(--nd-muted); flex: none; align-self: flex-end; }
.ndv-attach:hover { color: var(--nd-ink); border-color: var(--nd-ink); }
.ndv-attach .ndx-icon { width: 18px; height: 18px; }
.ndv-compose-chip { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-radius: 10px; background: var(--nd-canvas); font-size: 12.5px; }
.ndv-compose-chip[hidden] { display: none; }
.ndv-compose-chip small { color: var(--nd-muted); }
.ndv-compose-chip button { margin-left: auto; border: 0; background: var(--nd-surface); width: 24px; height: 24px; border-radius: 7px; cursor: pointer; }
.ndv-compose-chip .ndx-icon { width: 15px; height: 15px; }
.metric-icon .glyph-svg, .portal-all-good .glyph-svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.list-row .metric-icon .glyph-svg { width: 17px; height: 17px; }

/* Portail : messages et validations au même niveau */
.portal-priority-grid { grid-template-columns: 1fr 1fr !important; }
.portal-priority-card { min-height: 100%; }
.card-head-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; border-radius: 9px; vertical-align: -8px; font-size: 14px; }
.card-head-icon.is-amber { background: color-mix(in srgb, #e1a32a 18%, #fff); color: #9a6a00; }
.card-head-icon.is-blue { background: var(--nd-t-blue); color: var(--nd-c-blue); }
.card-head-icon .glyph-svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body.portal-app .metric.has-alert { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--portal-accent) 70%, transparent); }
body.portal-app .metric.has-alert .metric-value { color: var(--nd-ink); }
.portal-top-messages { position: relative; display: inline-flex; align-items: center; gap: 7px; }
.portal-top-messages svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.portal-top-messages .nav-count { position: static; margin-left: 2px; }
@media (max-width: 900px) {
  .portal-priority-grid { grid-template-columns: 1fr !important; }
  .portal-top-label { display: none; }
}

/* ===== Création : cartes de choix, étapes, aperçu en direct ===== */
.modal.modal-wide:has(.nd-create) { width: min(1080px, calc(100vw - 32px)) !important; }
.nd-create { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
.nd-create-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.nd-step .kb-step { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-weight: 900; font-size: 15px; }
.nd-step .kb-step span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--nd-ink); color: #fff; font-size: 12.5px; flex: none; }
.nd-step-hint { margin: -6px 0 10px 36px; color: var(--nd-muted); font-size: 12.5px; }
.nd-step .field { margin-bottom: 12px; }
.nd-step .form-grid { gap: 0 12px; }
.nd-cards { display: grid; gap: 10px; }
.nd-cards.nd-cards-2 { grid-template-columns: repeat(2, 1fr); }
.nd-cards.nd-cards-3 { grid-template-columns: repeat(3, 1fr); }
.nd-cards.nd-cards-4 { grid-template-columns: repeat(4, 1fr); }
.nd-cards.nd-cards-5 { grid-template-columns: repeat(5, 1fr); }
.nd-cards .kb-choice { padding: 14px 12px; gap: 10px; }
.nd-cards .kb-choice-copy { display: flex; flex-direction: column; gap: 2px; }
.nd-cards .kb-choice-copy strong { font-size: 13.5px; font-weight: 900; }
.nd-cards .kb-choice-copy small { color: var(--nd-muted); font-size: 12px; line-height: 1.35; }
.nd-cards .kb-choice.is-active .kb-choice-icon { background: var(--nd-yellow); color: #020b42; }
.kb-choice-icon.is-urgent, .kb-choice-icon.is-bug { color: #b4473c; }
.kb-choice-icon.is-high { color: #b4701c; }
.nd-create-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: var(--nd-canvas); }
.nd-create-label { font-size: 11.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--nd-muted); }
.nd-create-note { margin: 0; color: var(--nd-muted); font-size: 12px; }
.pv-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; background: var(--nd-surface); box-shadow: 0 10px 30px rgba(2, 11, 66, .08); animation: nd-feed-in .25s var(--nd-ease) both; }
.pv-card strong { font-size: 16px; font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
.pv-card small { color: var(--nd-muted); font-size: 12.5px; }
.pv-card p { margin: 0; font-size: 13px; color: var(--nd-muted); line-height: 1.45; }
.pv-type { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 9px; border-radius: 8px; background: var(--nd-soft-yellow); color: var(--nd-c-amber); font-size: 12px; font-weight: 800; }
.pv-rdv { flex-direction: row; align-items: flex-start; gap: 14px; }
.pv-date { width: 54px; flex: none; padding: 8px 0; border-radius: 12px; background: var(--nd-ink); color: #fff; display: flex; flex-direction: column; align-items: center; }
.pv-date strong { font-size: 22px; color: #fff; }
.pv-date small { color: rgba(255,255,255,.75); text-transform: uppercase; font-weight: 800; }
.pv-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pv-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: var(--nd-muted); font-size: 12px; font-weight: 700; }
.pv-avatar { width: 28px !important; height: 28px !important; border-radius: 9px !important; font-size: 11px; display: grid !important; place-items: center; overflow: hidden; background: var(--nd-t-blue); color: var(--nd-c-blue); }
.pv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pv-task.is-urgent { box-shadow: inset 3px 0 0 #c94a3f, 0 10px 30px rgba(2, 11, 66, .08); }
.pv-task.is-high { box-shadow: inset 3px 0 0 #e1a32a, 0 10px 30px rgba(2, 11, 66, .08); }
.pv-head { display: flex; align-items: center; gap: 12px; }
.pv-head > div { display: flex; flex-direction: column; min-width: 0; }
.pv-client, .pv-member { align-items: center; text-align: center; }
.pv-client .pv-type, .pv-member .pv-type { align-self: center; }
.pv-logo { width: 64px !important; height: 64px !important; border-radius: 18px !important; font-size: 20px !important; }
.pv-avatar-lg { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--nd-t-blue); color: var(--nd-c-blue); font-weight: 900; font-size: 20px; }
.pv-favicon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--nd-ink); color: var(--nd-yellow); font-weight: 900; }
.pv-chart { display: flex; align-items: flex-end; gap: 3px; height: 48px; }
.pv-chart i { flex: 1; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--nd-yellow) 70%, #fff); }
.pv-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--nd-surface); font-size: 12.5px; color: var(--nd-muted); }
@media (max-width: 900px) {
  .nd-create { grid-template-columns: 1fr; }
  .nd-create-side { position: static; order: -1; }
  .nd-cards.nd-cards-4, .nd-cards.nd-cards-5, .nd-cards.nd-cards-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) { .nd-cards.nd-cards-2 { grid-template-columns: 1fr; } }
.pv-amount { font-size: 26px; font-weight: 900; letter-spacing: -.02em; }

/* ===== Graphiques des sites ===== */
.site-chart { position: relative; width: 100%; }
.site-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12.5px; font-weight: 800; color: var(--nd-muted); }
.site-legend span { display: inline-flex; align-items: center; gap: 7px; }
.site-legend i { width: 14px; height: 4px; border-radius: 2px; background: var(--nd-ink); }
.site-legend .is-views i { background: none; border-top: 2px dashed var(--nd-c-blue, #4a63a8); height: 0; }
.site-legend-total { margin-left: auto; color: var(--nd-ink); }
.site-plot { position: relative; display: flex; }
.site-chart:not(.is-compact) .site-plot { padding-left: 38px; }
.site-yaxis { position: absolute; left: 0; top: 0; bottom: 0; width: 32px; pointer-events: none; }
.site-yaxis span { position: absolute; right: 0; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: var(--nd-muted); font-variant-numeric: tabular-nums; }
.site-plot .site-svg { flex: 1; min-width: 0; }
.site-line { fill: none; stroke: var(--nd-ink); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.site-views-line { fill: none; stroke: var(--nd-c-blue, #4a63a8); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: .7; }
.site-area { stroke: none; }
.site-grad-top { stop-color: var(--nd-yellow, #13f5bb); stop-opacity: .45; }
.site-grad-bottom { stop-color: var(--nd-yellow, #13f5bb); stop-opacity: .02; }
.site-grid-line { stroke: var(--nd-line); stroke-width: 1; stroke-dasharray: 2 6; }
.site-grid-line.is-base { stroke-dasharray: none; stroke: var(--nd-line-strong, #d8d6cf); }
.site-chart:not(.is-compact) .site-svg .site-cursor { top: 0; bottom: 0 !important; }
.site-xaxis { position: relative; height: 22px; margin-top: 8px; margin-left: 38px; }
.site-xaxis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font-size: 11.5px; font-weight: 700; color: var(--nd-muted); }
.site-xaxis span.is-first { transform: none; }
.site-xaxis span.is-last { transform: translateX(-100%); }
.site-dot { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--nd-surface, #fff); border: 3px solid var(--nd-ink); box-shadow: 0 0 0 5px color-mix(in srgb, var(--nd-yellow) 40%, transparent); }
.site-tip { min-width: 140px; }
.site-tip small { order: -1; }
body[data-dashboard-theme="dark"] .site-line { stroke: var(--nd-yellow); }
body[data-dashboard-theme="dark"] .site-legend i { background: var(--nd-yellow); }
.site-chart.is-compact .site-plot { padding-left: 0; }
.bar-row { grid-template-columns: minmax(0, 1.1fr) minmax(80px, 1fr) 56px !important; }
.bar-row strong { text-align: right; }
.bar-track { height: 8px !important; border-radius: 6px; }
.bar-track i { border-radius: 6px; }

/* Visite guidée : chapitres */
.tour:has(.tour-chapters) { width: min(640px, 100%); }
.tour:has(.tour-chapters) .tour-visual { height: 170px; }
.tour-chapters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.tour-chapter { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--nd-line); background: var(--nd-surface); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, transform .2s; }
.tour-chapter:hover { border-color: var(--nd-ink); transform: translateY(-1px); }
.tour-chapter > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.tour-chapter strong { font-size: 13.5px; font-weight: 900; }
.tour-chapter small { color: var(--nd-muted); font-size: 12px; }
.tour-chapter-n { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--nd-canvas); font-weight: 900; font-size: 12.5px; }
.tour-chapter.is-done .tour-chapter-n { background: #dfeae6; color: #2f6b4e; }
.guide-pop-head { flex-wrap: wrap; }
.guide-chapter { font-size: 11.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--nd-c-amber, #9a6a00); margin-right: auto; }
.guide-count { font-size: 12px; font-weight: 800; color: var(--nd-muted); }
@media (max-width: 560px) { .tour-chapters { grid-template-columns: 1fr; } .tour:has(.tour-chapters) .tour-visual { display: none; } }
.ndv-compose .textarea { flex: 1 1 160px; min-width: 0; min-height: 44px; }
@media (max-width: 900px) {
  .nd-create-side { order: 2 !important; }
  body.portal-app .portal-metrics { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  body.portal-app .portal-metrics .metric { padding: 14px; }
  body.portal-app .portal-metrics .metric-value { font-size: 26px; }
  body.portal-app .portal-metrics .metric-top span:first-child { font-size: 10.5px; }
}
@media (max-width: 900px) { body.portal-app .portal-metrics .metric { grid-column: auto !important; } }

/* ===== Sites : extension Nodema Sites, détails enrichis (2026-10-26) ===== */
.maintenance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.maintenance-grid a { color: inherit; }
.site-kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.site-alert { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; padding: 14px 18px; border-radius: 16px; background: #e9fdf7; border: 1px solid #f3dc9b; }
.site-alert strong { font-weight: 900; }
.site-alert span { flex: 1 1 320px; color: var(--nd-muted); font-size: 13.5px; }
.site-alert.is-down { background: #fbebe7; border-color: #f0c4b9; }
.site-alert.is-down strong { color: #8f2c1d; }
.site-goals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.site-goals div { padding: 14px 16px; border-radius: 16px; background: var(--nd-surface); box-shadow: var(--nd-shadow); }
.site-goals span { display: block; color: var(--nd-muted); font-size: 12px; font-weight: 800; }
.site-goals strong { font-family: var(--font-heading, "Nunito", sans-serif); font-size: 22px; font-weight: 900; }
.site-hours { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.site-hours span { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.site-hours i { display: block; width: 100%; border-radius: 4px 4px 2px 2px; background: var(--nd-ink); opacity: .82; }
.site-hours span:hover i { background: var(--nd-yellow); opacity: 1; }
.site-hours-axis, .uptime-legend { display: flex; justify-content: space-between; margin-top: 6px; color: var(--nd-muted); font-size: 11.5px; font-weight: 700; }
.seo-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.seo-checks li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; }
.seo-checks li > span { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 900; }
.seo-checks li.is-ok > span { background: #e7f4ec; color: #1f8a5b; }
.seo-checks li.is-ko > span { background: #fbebe7; color: #c2412d; }
.seo-checks small { margin-left: auto; color: var(--nd-muted); font-weight: 800; font-variant-numeric: tabular-nums; }
.uptime-strip { display: flex; gap: 3px; height: 38px; }
.uptime-strip i { flex: 1; border-radius: 4px; background: #39a56f; }
.uptime-strip i.is-down { background: #d2553f; }
.plugin-updates { display: grid; gap: 6px; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: #e9fdf7; }
.plugin-updates > strong { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #7d5200; }
.plugin-updates div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; font-weight: 700; }
.plugin-updates small { color: var(--nd-muted); font-variant-numeric: tabular-nums; }
.site-key-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; background: var(--nd-canvas); }
.site-key-row strong { display: block; font-weight: 900; }
.site-key-row span { color: var(--nd-muted); font-size: 13px; }
.site-connect-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.site-connect-steps li { display: flex; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--nd-canvas); }
.site-connect-steps strong { display: block; font-weight: 900; font-size: 15px; }
.site-connect-steps p { margin: 4px 0 10px; color: var(--nd-muted); font-size: 13.5px; line-height: 1.5; }
.site-connect-steps li > div { flex: 1; min-width: 0; }
.site-connect-num { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--nd-yellow); color: #020b42; font-weight: 900; }
.site-connect-code { display: flex; gap: 8px; }
.site-connect-code .input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.site-connect-details { margin-top: 14px; color: var(--nd-muted); }
.site-connect-details summary { cursor: pointer; font-weight: 800; font-size: 13px; }
.pv-wpwidget { padding: 0 !important; overflow: hidden; }
.pv-wp-bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; background: #1d2327; color: #c3c4c7; font-size: 11px; font-weight: 700; }
.pv-wp-bar i { width: 7px; height: 7px; border-radius: 50%; background: #50575e; }
.pv-wp-bar span { margin-left: 6px; }
.pv-wp-widget { padding: 16px; display: grid; gap: 12px; }
.pv-wp-head { display: flex; gap: 12px; align-items: center; }
.pv-wp-head strong { display: block; font-weight: 900; }
.pv-wp-head small { color: var(--nd-muted); font-size: 12px; }
.pv-wp-contact { display: grid; gap: 4px; font-size: 12.5px; font-weight: 700; }
@media (max-width: 1100px) {
  .site-kpis-5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .site-kpis-5, .site-goals { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-3 { grid-template-columns: 1fr; }
  .maintenance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
a.btn, a.btn:hover { text-decoration: none; }

/* ===== Brief client ===== */
.card-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.brief-list { display: grid; gap: 10px; }
.brief-empty-state { padding: 18px; border: 1px dashed var(--nd-line); border-radius: 14px; color: var(--nd-muted); text-align: center; font-weight: 700; }
.brief-item { border: 1px solid var(--nd-line); border-radius: 16px; overflow: hidden; background: var(--nd-surface); }
.brief-item-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.brief-item-head:hover { background: var(--nd-canvas); }
.brief-item-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--nd-yellow); color: #020b42; }
.brief-item-title { flex: 1; min-width: 0; }
.brief-item-title strong { display: block; font-weight: 900; }
.brief-item-title small { color: var(--nd-muted); font-size: 12.5px; }
.brief-progress { flex: none; width: 90px; height: 6px; border-radius: 99px; background: var(--nd-canvas); overflow: hidden; }
.brief-progress i { display: block; height: 100%; border-radius: inherit; background: var(--nd-ink); }
.brief-chevron { flex: none; font-size: 20px; color: var(--nd-muted); transition: transform .2s var(--nd-ease); }
.brief-item.is-open .brief-chevron { transform: rotate(90deg); }
.brief-item-body { display: none; padding: 4px 18px 18px 68px; }
.brief-item.is-open .brief-item-body { display: block; }
.brief-intro { margin: 0 0 12px; color: var(--nd-muted); font-size: 13.5px; }
.brief-answers { margin: 0; display: grid; gap: 0; }
.brief-answer { padding: 12px 0; border-top: 1px solid var(--nd-line); }
.brief-answer dt { font-weight: 900; font-size: 13.5px; }
.brief-answer dt em { margin-left: 3px; color: #c2412d; font-style: normal; }
.brief-answer dd { margin: 4px 0 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.brief-answer dd a { color: inherit; font-weight: 700; }
.brief-empty { color: var(--nd-muted); font-style: italic; font-size: 13px; }
.brief-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.brief-chips span { padding: 4px 10px; border-radius: 999px; background: var(--nd-canvas); font-size: 12.5px; font-weight: 800; }
.brief-files { display: flex; flex-wrap: wrap; gap: 8px; }
.brief-file { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 7px 12px; border: 1px solid var(--nd-line); border-radius: 12px; background: var(--nd-surface); font: inherit; font-size: 13px; font-weight: 700; color: inherit; cursor: pointer; }
.brief-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brief-file:hover { border-color: var(--nd-ink); }
.brief-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.link-button { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--nd-ink); font: inherit; font-size: 13px; font-weight: 800; text-decoration: underline; cursor: pointer; }
.brief-template-list { display: grid; gap: 8px; margin: 12px 0 16px; }
.brief-template-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--nd-canvas); }
.brief-template-row > div { flex: 1; min-width: 0; }
.brief-template-row strong { display: block; font-weight: 900; }
.brief-template-row small { color: var(--nd-muted); }
.brief-q-list { display: grid; gap: 10px; margin-bottom: 12px; }
.brief-q { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--nd-line); border-radius: 14px; background: var(--nd-surface); }
.brief-q-top { display: flex; gap: 8px; align-items: center; }
.brief-q-handle { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--nd-canvas); }
.brief-q-type { flex: 0 0 150px; }
.brief-q-label { flex: 1; min-width: 0; font-weight: 700; }
.brief-q-tools { display: flex; gap: 2px; }
.brief-q-tools .icon-btn { width: 30px; height: 30px; border: 0; border-radius: 9px; background: none; cursor: pointer; font-weight: 900; color: var(--nd-muted); }
.brief-q-tools .icon-btn:hover { background: var(--nd-canvas); color: var(--nd-ink); }
.brief-q-more { display: flex; gap: 10px; align-items: center; padding-left: 40px; }
.brief-q-help { flex: 1; min-width: 0; font-size: 13px; }
.brief-q-req { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; font-weight: 700; }
.brief-q-options { margin-left: 40px; width: calc(100% - 40px); font-size: 13px; }
.pv-brief { display: grid; gap: 8px; }
.pv-eyebrow { color: var(--nd-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pv-brief-title { font-family: var(--font-heading, "Nunito", sans-serif); font-size: 19px; font-weight: 900; }
.pv-brief p { margin: 0; color: var(--nd-muted); font-size: 12.5px; line-height: 1.45; }
.pv-brief ol { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pv-brief li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--nd-canvas); font-size: 12.5px; font-weight: 700; }
.pv-brief li > span { display: grid; place-items: center; flex: none; }
.pv-brief small { color: var(--nd-muted); font-weight: 700; }
@media (max-width: 760px) {
  .brief-item-body { padding: 4px 14px 16px; }
  .brief-progress { display: none; }
  .brief-q-top { flex-wrap: wrap; }
  .brief-q-type { flex: 1 1 120px; }
  .brief-q-label { flex: 1 1 100%; order: 3; }
  .brief-q-more, .brief-q-options { padding-left: 0; margin-left: 0; width: 100%; }
}

/* ===== Portail : questionnaires (brief) ===== */
.portal-brief-banner { display: flex; align-items: center; gap: 18px; margin: 0 0 18px; padding: 20px 22px; border-radius: 22px; background: var(--nd-ink); color: #fff; box-shadow: var(--nd-shadow); }
.portal-brief-banner + .portal-brief-banner { margin-top: -6px; }
.portal-brief-icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 15px; background: var(--accent, var(--nd-yellow)); color: var(--accent-ink, #020b42); }
.portal-brief-copy { flex: 1; min-width: 0; display: grid; gap: 3px; }
.portal-brief-banner .portal-brief-copy > span:not(.portal-brief-eyebrow) { color: rgba(255, 255, 255, .72); font-size: 13.5px; }
.portal-brief-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; opacity: .7; }
.portal-brief-banner strong { font-family: var(--font-heading, "Nunito", sans-serif); font-size: 20px; font-weight: 900; }
.portal-brief-progress { max-width: 280px; background: rgba(255, 255, 255, .16); }
.portal-brief-progress i { background: var(--accent, var(--nd-yellow)); }
.portal-brief-list { display: grid; gap: 10px; }
.portal-brief-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.portal-brief-row strong { font-weight: 900; }
.portal-brief-row .portal-brief-copy > span { color: var(--nd-muted); font-size: 13px; }
.brief-page-hero { margin-bottom: 8px; }
.brief-status-bar { position: sticky; top: 72px; z-index: 5; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--nd-surface) 92%, transparent); backdrop-filter: blur(8px); box-shadow: var(--nd-shadow); font-size: 13px; font-weight: 800; }
.brief-status-bar .progress { flex: 1 1 200px; margin: 0; height: 7px; }
.brief-status-bar .progress i { background: var(--accent, var(--nd-ink)); transition: width .3s var(--nd-ease); }
.brief-done { display: grid; gap: 4px; margin: 0 0 16px; padding: 16px 18px; border-radius: 16px; background: #e7f4ec; color: #145c3c; }
.brief-done span { color: #2d6b4f; font-size: 13.5px; }
.brief-form { display: grid; gap: 12px; }
.brief-field { padding: 20px 22px; transition: box-shadow .2s ease; }
.brief-field.is-missing { box-shadow: 0 0 0 2px #d2553f, var(--nd-shadow); }
.brief-field-head { display: flex; gap: 12px; margin-bottom: 12px; }
.brief-num { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--nd-canvas); font-weight: 900; font-size: 13px; }
.brief-field label { display: block; font-weight: 900; font-size: 15.5px; line-height: 1.35; }
.brief-field label em { margin-left: 4px; color: #c2412d; font-style: normal; }
.brief-field-head p { margin: 3px 0 0; color: var(--nd-muted); font-size: 13px; }
.brief-field .input, .brief-field .textarea { width: 100%; }
.brief-date { max-width: 220px; }
.brief-options { display: flex; flex-wrap: wrap; gap: 8px; }
.brief-option { position: relative; cursor: pointer; }
.brief-option input { position: absolute; opacity: 0; }
.brief-option span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid var(--nd-line); border-radius: 999px; background: var(--nd-surface); font-size: 13.5px; font-weight: 700; transition: background .15s ease, border-color .15s ease; }
.brief-option.is-check span::before { content: ""; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 4px; opacity: .45; }
.brief-option input:checked + span { background: var(--nd-ink); border-color: var(--nd-ink); color: #fff; }
.brief-option.is-check input:checked + span::before { opacity: 1; background: var(--accent, var(--nd-yellow)); border-color: transparent; }
.brief-option input:focus-visible + span { outline: 2px solid var(--nd-ink); outline-offset: 2px; }
.brief-other { margin-top: 10px; max-width: 420px; }
.brief-files-box { display: grid; gap: 10px; }
.brief-file-list { display: flex; flex-wrap: wrap; gap: 8px; }
.brief-file-list:empty { display: none; }
.brief-file-chip { display: inline-flex; align-items: center; max-width: 100%; border-radius: 12px; background: var(--nd-canvas); font-size: 13px; font-weight: 700; }
.brief-file-chip.is-uploading { padding: 8px 12px; color: var(--nd-muted); }
.brief-file-name { overflow: hidden; max-width: 260px; padding: 8px 4px 8px 12px; border: 0; background: none; font: inherit; color: inherit; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.brief-file-remove { padding: 8px 10px; border: 0; background: none; color: var(--nd-muted); font-size: 16px; line-height: 1; cursor: pointer; }
.brief-file-remove:hover { color: #c2412d; }
.brief-drop { position: relative; display: grid; gap: 2px; place-items: center; padding: 20px; border: 1.5px dashed var(--nd-line); border-radius: 16px; text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.brief-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.brief-drop:hover, .brief-drop.is-over { border-color: var(--nd-ink); background: var(--nd-canvas); }
.brief-drop span { color: var(--nd-muted); font-size: 12.5px; }
.brief-form.is-readonly .brief-option span { cursor: default; }
.brief-submit-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border-radius: 18px; background: var(--nd-surface); box-shadow: 0 18px 50px rgba(2, 11, 66, .14), 0 0 0 1px rgba(2, 11, 66, .06); }
@media (max-width: 760px) {
  .portal-brief-banner { flex-wrap: wrap; padding: 18px; }
  .portal-brief-banner .btn { width: 100%; justify-content: center; }
  .brief-field { padding: 16px; }
  .brief-status-bar { top: 60px; }
  .brief-submit-bar { bottom: 76px; }
  .brief-submit-bar .btn { width: 100%; justify-content: center; }
}
.brief-option input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; pointer-events: none; }
.brief-drop { display: flex !important; flex-direction: column; align-items: center; justify-content: center; }
.brief-q-options { min-height: 92px; }

/* ===== Planning de charge ===== */
.plan-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.plan-week-nav { display: flex; align-items: center; gap: 8px; }
.plan-week-nav strong { font-family: var(--font-heading, "Nunito", sans-serif); font-size: 17px; font-weight: 900; }
.plan-week-nav .icon-button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--nd-line); border-radius: 50%; background: var(--nd-surface); font-size: 18px; font-weight: 900; cursor: pointer; color: var(--nd-ink); }
.plan-week-nav .icon-button:hover { border-color: var(--nd-ink); }
.plan-mode { color: var(--nd-muted); font-size: 12.5px; font-weight: 800; }
.plan-alert { display: grid; gap: 3px; margin: 0 0 12px; padding: 13px 16px; border-radius: 14px; background: #fbebe7; border: 1px solid #f0c4b9; }
.plan-alert strong { color: #8f2c1d; font-weight: 900; }
.plan-alert span { color: #6d3a2f; font-size: 13px; }
.plan-alert.is-soft { background: #e9fdf7; border-color: #f3dc9b; }
.plan-alert.is-soft strong { color: #7d5200; }
.plan-alert.is-soft span { color: #6b5520; }
.plan-board { overflow-x: auto; border-radius: 20px; background: var(--nd-surface); box-shadow: var(--nd-shadow); }
.plan-head, .plan-row { display: grid; grid-template-columns: 240px repeat(5, minmax(150px, 1fr)); min-width: 990px; }
.plan-head > div { padding: 12px 10px; border-bottom: 1px solid var(--nd-line); text-align: center; }
.plan-head span { display: block; color: var(--nd-muted); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.plan-head strong { font-family: var(--font-heading, "Nunito", sans-serif); font-size: 19px; font-weight: 900; }
.plan-head .is-today strong { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--nd-yellow); }
.plan-row { border-bottom: 1px solid var(--nd-line); }
.plan-row:last-child { border-bottom: 0; }
.plan-row.is-unassigned { background: color-mix(in srgb, var(--nd-canvas) 55%, transparent); }
.plan-person { position: sticky; left: 0; z-index: 2; display: flex; gap: 10px; align-items: flex-start; padding: 14px; background: inherit; background-color: var(--nd-surface); border-right: 1px solid var(--nd-line); }
.plan-row.is-unassigned .plan-person { background-color: var(--nd-canvas); }
.plan-person-main { min-width: 0; flex: 1; display: grid; gap: 4px; }
.plan-person-main strong { font-weight: 900; font-size: 14px; }
.plan-person-main small { color: var(--nd-muted); font-size: 12px; }
.plan-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; overflow: hidden; border-radius: 50%; background: var(--nd-ink); color: #fff; font-size: 12px; font-weight: 900; }
.plan-avatar img { width: 100%; height: 100%; object-fit: cover; }
.plan-avatar.is-empty { background: var(--nd-line); color: var(--nd-muted); }
.plan-load { display: grid; gap: 3px; }
.plan-load-bar { display: block; height: 6px; border-radius: 99px; background: var(--nd-canvas); overflow: hidden; }
.plan-load-bar i { display: block; height: 100%; border-radius: inherit; background: #39a56f; }
.plan-load.is-near .plan-load-bar i { background: #e6a817; }
.plan-load.is-over .plan-load-bar i { background: #d2553f; }
.plan-load.is-over small { color: #b33e2a; font-weight: 800; }
.plan-load.is-solo .plan-load-bar i { background: var(--nd-ink); }
.plan-weekend { color: #7d5200 !important; font-weight: 800; }
.plan-cell { display: flex; flex-direction: column; gap: 6px; min-height: 92px; padding: 8px; border-right: 1px solid var(--nd-line); transition: background .15s ease; }
.plan-cell:last-child { border-right: 0; }
.plan-cell.is-today { background: color-mix(in srgb, var(--nd-yellow) 9%, transparent); }
.plan-cell.is-over-drop, .plan-backlog.is-over-drop { background: color-mix(in srgb, var(--nd-yellow) 22%, transparent); outline: 2px dashed var(--nd-ink); outline-offset: -4px; border-radius: 10px; }
.plan-chip { display: grid; gap: 1px; width: 100%; padding: 7px 9px 7px 11px; border: 1px solid var(--nd-line); border-left: 3px solid #8aa0c8; border-radius: 10px; background: var(--nd-surface); text-align: left; font: inherit; color: inherit; cursor: grab; box-shadow: 0 1px 2px rgba(2, 11, 66, .05); }
.plan-chip:hover { border-color: var(--nd-ink); }
.plan-chip strong { overflow: hidden; font-size: 12.5px; font-weight: 800; line-height: 1.3; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.plan-chip small { overflow: hidden; color: var(--nd-muted); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.plan-chip.is-high { border-left-color: #e6a817; }
.plan-chip.is-urgent { border-left-color: #d2553f; }
.plan-chip.is-low { border-left-color: #b7bcc1; }
.plan-chip.is-done { opacity: .5; }
.plan-chip.is-done strong { text-decoration: line-through; }
.plan-chip.is-unestimated small { color: #b33e2a; font-weight: 800; }
.plan-chip.is-dragging { opacity: .35; }
.plan-backlog { display: grid; gap: 14px; min-height: 80px; }
.plan-backlog-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.plan-backlog-group > span { grid-column: 1 / -1; color: var(--nd-muted); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.plan-horizon { display: grid; grid-template-columns: minmax(80px, 1fr) repeat(var(--weeks), minmax(48px, 1fr)); gap: 6px; align-items: center; }
.plan-horizon-week { padding: 0; border: 0; background: none; color: var(--nd-muted); font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.plan-horizon-name { overflow: hidden; font-size: 13px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.plan-heat { height: 34px; border: 0; border-radius: 9px; background: var(--nd-canvas); color: var(--nd-muted); font: inherit; font-size: 11.5px; font-weight: 900; cursor: pointer; }
.plan-heat.is-ok { background: #dff1e7; color: #1f6b45; }
.plan-heat.is-near { background: #fbecc4; color: #7d5200; }
.plan-heat.is-over { background: #f7d4cc; color: #8f2c1d; }
.plan-capacity-list { display: grid; gap: 8px; margin-top: 12px; }
.plan-capacity-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 110px 110px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--nd-canvas); }
.plan-capacity-row strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.plan-capacity-row label { display: grid; gap: 2px; color: var(--nd-muted); font-size: 11px; font-weight: 800; }
@media (max-width: 760px) {
  .plan-head, .plan-row { grid-template-columns: 170px repeat(5, minmax(140px, 1fr)); min-width: 870px; }
  .plan-capacity-row { grid-template-columns: 34px 1fr; }
  .plan-capacity-row label { grid-column: span 1; }
}
.plan-bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
.plan-horizon { grid-template-columns: minmax(64px, .9fr) repeat(var(--weeks), minmax(40px, 1fr)); }
@media (max-width: 1000px) { .plan-bottom { grid-template-columns: 1fr !important; } }

/* ===== Abonnement en ligne ===== */
.billing-card { padding: 0; }
.billing-current { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 22px 24px; }
.billing-current > div:first-child { flex: 1 1 320px; }
.billing-eyebrow { color: var(--nd-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.billing-current h3 { margin: 4px 0 4px; font-family: var(--font-heading, "Nunito", sans-serif); font-size: 26px; font-weight: 900; letter-spacing: -.02em; }
.billing-current h3 small { color: var(--nd-muted); font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: 0; }
.billing-current p { margin: 0; color: var(--nd-muted); font-size: 14px; }
.billing-current p.is-alert { color: #b33e2a; font-weight: 800; }
.billing-cardline { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--nd-canvas); }
.billing-cardicon { display: grid; place-items: center; min-width: 54px; height: 34px; padding: 0 8px; border-radius: 8px; background: var(--nd-ink); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .03em; }
.billing-cardline strong { display: block; font-variant-numeric: tabular-nums; font-weight: 900; }
.billing-cardline small { color: var(--nd-muted); font-size: 12px; }
.billing-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.billing-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.billing-plan { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--nd-line); border-radius: 18px; background: var(--nd-surface); }
.billing-plan.is-current { border-color: var(--nd-ink); box-shadow: 0 0 0 1px var(--nd-ink); }
.billing-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.billing-plan-head strong { font-family: var(--font-heading, "Nunito", sans-serif); font-size: 19px; font-weight: 900; }
.billing-plan > p { margin: 0; color: var(--nd-muted); font-size: 13px; min-height: 2.6em; }
.billing-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.billing-price b { font-family: var(--font-heading, "Nunito", sans-serif); font-size: 32px; font-weight: 900; letter-spacing: -.02em; }
.billing-price span { color: var(--nd-muted); font-weight: 800; font-size: 13px; }
.billing-price small { flex-basis: 100%; color: #1f6b45; font-weight: 800; font-size: 12px; }
.billing-plan ul { flex: 1; margin: 4px 0 6px; padding: 0; list-style: none; display: grid; gap: 6px; }
.billing-plan li { position: relative; padding-left: 20px; font-size: 13px; }
.billing-plan li::before { content: "✓"; position: absolute; left: 0; color: #1f8a5b; font-weight: 900; }
.btn-block { width: 100%; justify-content: center; }
.billing-interval button { min-width: 84px; }
.text-right { text-align: right; }
.profile-billing { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--nd-line); }
.profile-billing:empty { display: none; }
.profile-billing h4 { margin: 0 0 10px; }
.profile-billing-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid rgba(2, 11, 66, .08); box-shadow: 0 6px 18px rgba(2, 11, 66, .05); }
.profile-billing-row strong { display: block; font-weight: 900; }
.profile-billing-row span { color: var(--nd-muted); font-size: 12.5px; }
.profile-billing-links { display: flex; gap: 16px; margin-top: 4px; }
.billing-card + .card + .subscription-overview, .billing-card + .subscription-overview { margin-top: 18px; }
.stripe-card { margin-bottom: 18px; }
.stripe-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; }
.stripe-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: s; }
.stripe-steps li { position: relative; padding: 0 0 0 40px; counter-increment: s; }
.stripe-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--nd-canvas, #f3f5fa); font-weight: 900; font-size: 12px; }
.stripe-steps li.is-done::before { content: "✓"; background: #dff1e7; color: #1f6b45; }
.stripe-steps strong { display: block; font-weight: 900; }
.stripe-steps span { color: var(--nd-muted, #62688a); font-size: 13px; line-height: 1.6; }
.stripe-steps code { padding: 1px 6px; border-radius: 6px; background: var(--nd-canvas, #f3f5fa); font-size: 12px; overflow-wrap: anywhere; }
.stripe-form { display: grid; gap: 12px; align-content: start; }
.stripe-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) { .stripe-body { grid-template-columns: 1fr; } }

/* ===== Démarrage : liste et assistant ===== */
.onb-checklist { margin-top: 18px; padding: 20px 22px; }
.onb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.onb-eyebrow { color: var(--nd-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.onb-head h3 { margin: 3px 0 0; font-family: var(--font-heading, "Nunito", sans-serif); font-size: 20px; font-weight: 900; }
.onb-head-actions { display: flex; gap: 6px; }
.onb-progress { margin: 14px 0 16px; height: 6px; }
.onb-progress i { background: var(--nd-yellow); }
.onb-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.onb-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--nd-canvas); }
.onb-item > div { flex: 1; min-width: 0; }
.onb-item strong { display: block; font-size: 13.5px; font-weight: 900; }
.onb-item span:not(.onb-check) { display: block; color: var(--nd-muted); font-size: 12px; }
.onb-check { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 2px solid var(--nd-line); border-radius: 50%; background: var(--nd-surface); color: #fff; font-size: 12px; font-weight: 900; }
.onb-item.is-done { opacity: .6; }
.onb-item.is-done .onb-check { border-color: #1f8a5b; background: #1f8a5b; }
.onb-item.is-done strong { text-decoration: line-through; }
.onb-settings-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.onb-wizard { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 20px; background: rgba(2, 11, 66, .55); backdrop-filter: blur(6px); animation: nd-feed-in .25s var(--nd-ease) both; }
.onb-card { display: flex; flex-direction: column; width: min(720px, 100%); max-height: calc(100vh - 40px); overflow: hidden; border-radius: 26px; background: var(--nd-surface); box-shadow: 0 40px 120px rgba(0, 0, 0, .3); }
.onb-top { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--nd-line); }
.onb-steps { flex: 1; display: flex; gap: 6px; overflow-x: auto; }
.onb-steps span { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 999px; color: var(--nd-muted); font-size: 12px; font-weight: 800; white-space: nowrap; }
.onb-steps i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--nd-canvas); font-style: normal; font-size: 11px; }
.onb-steps em { font-style: normal; }
.onb-steps .is-current { background: var(--nd-canvas); color: var(--nd-ink); }
.onb-steps .is-current i { background: var(--nd-yellow); color: #020b42; }
.onb-steps .is-done i { background: #1f8a5b; color: #fff; }
.onb-close { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--nd-canvas); font-size: 18px; cursor: pointer; color: var(--nd-ink); }
.onb-body { display: grid; gap: 14px; padding: 26px 30px; overflow-y: auto; }
.onb-body h2 { margin: 0; font-family: var(--font-heading, "Nunito", sans-serif); font-size: 30px; font-weight: 900; letter-spacing: -.03em; }
.onb-body > p { margin: -6px 0 4px; color: var(--nd-muted); font-size: 14.5px; }
.onb-drop { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px; border: 1.5px dashed var(--nd-line); border-radius: 16px; cursor: pointer; }
.onb-drop:hover { border-color: var(--nd-ink); }
.onb-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.onb-drop-img { display: grid; place-items: center; flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 16px; background: var(--nd-canvas); font-size: 24px; font-weight: 900; }
.onb-drop-img img { width: 100%; height: 100%; object-fit: contain; }
.onb-drop strong { display: block; }
.onb-drop small { color: var(--nd-muted); }
.onb-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.onb-swatch { position: relative; width: 42px; height: 42px; border: 3px solid var(--nd-surface); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--nd-line); cursor: pointer; }
.onb-swatch.is-active { box-shadow: 0 0 0 3px var(--nd-ink); }
.onb-swatch.is-custom { background: conic-gradient(#ff6b4a, #13f5bb, #1f8a5b, #2f80ed, #8b5cf6, #e0457b, #ff6b4a); overflow: hidden; }
.onb-swatch.is-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.onb-preview { display: flex; height: 150px; overflow: hidden; border: 1px solid var(--nd-line); border-radius: 18px; background: #f3f5fa; }
.onb-preview-side { display: grid; align-content: start; gap: 8px; width: 70px; padding: 14px 12px; background: #fff; border-right: 1px solid #e1e5ef; }
.onb-preview-logo { display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; border-radius: 10px; background: #020b42; color: var(--onb-accent); font-weight: 900; }
.onb-preview-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.onb-preview-side i { height: 8px; border-radius: 4px; background: #ececea; }
.onb-preview-side i.is-active { background: color-mix(in srgb, var(--onb-accent) 45%, #fff); }
.onb-preview-main { flex: 1; display: grid; align-content: start; gap: 10px; padding: 16px; }
.onb-preview-main b { font-family: var(--font-heading, "Nunito", sans-serif); font-size: 22px; font-weight: 900; color: #020b42; }
.onb-preview-main mark { background: none; color: var(--onb-accent); }
.onb-preview-btn { justify-self: start; padding: 6px 12px; border-radius: 999px; background: var(--onb-accent); color: #020b42; font-size: 12px; font-weight: 900; }
.onb-preview-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.onb-preview-cards i { height: 34px; border-radius: 10px; background: #fff; }
.onb-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.onb-type { display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--nd-line); border-radius: 16px; background: var(--nd-surface); font: inherit; font-size: 12.5px; font-weight: 800; color: inherit; cursor: pointer; }
.onb-type.is-active { border-color: var(--nd-ink); box-shadow: 0 0 0 1px var(--nd-ink); background: color-mix(in srgb, var(--nd-yellow) 12%, var(--nd-surface)); }
.onb-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--nd-line); }
.onb-foot > div { display: flex; gap: 8px; }
.onb-done { display: grid; justify-items: center; gap: 10px; text-align: center; }
.onb-done-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--nd-yellow); font-size: 28px; font-weight: 900; }
.onb-next { display: grid; gap: 8px; width: 100%; margin-top: 6px; }
.onb-next-item { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--nd-line); border-radius: 16px; background: var(--nd-surface); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.onb-next-item:hover { border-color: var(--nd-ink); }
.onb-next-item strong { font-weight: 900; }
.onb-next-item span { color: var(--nd-muted); font-size: 13px; }
@media (max-width: 760px) {
  .onb-items { grid-template-columns: 1fr; }
  .onb-wizard { padding: 0; place-items: stretch; }
  .onb-card { max-height: 100vh; border-radius: 0; }
  .onb-steps em { display: none; }
  .onb-steps .is-current em { display: inline; }
  .onb-body { padding: 20px; }
  .onb-body h2 { font-size: 24px; }
  .onb-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.onb-preview-label { color: var(--nd-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: -6px; }
@media (max-width: 760px) { .onb-card { height: 100vh; height: 100dvh; } .onb-body { flex: 1; align-content: start; } }
.tour-new-account { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 12px 14px; border: 1.5px dashed var(--nd-ink); border-radius: 14px; background: color-mix(in srgb, var(--nd-yellow) 14%, var(--nd-surface)); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: transform .2s; }
.tour-new-account:hover { transform: translateY(-1px); }
.tour-new-account strong { display: block; font-weight: 900; }
.tour-new-account small { color: var(--nd-muted); font-size: 12px; }
.tour-new-account .tour-chapter-n { background: var(--nd-yellow); color: #020b42; }
.tour-extra-note { margin: 8px 0 0; color: var(--nd-muted); font-size: 13px; }
.billing-plan.is-featured { box-shadow: 0 0 0 1px var(--nd-yellow); border-color: var(--nd-yellow); }
.billing-plan.is-current { border-color: var(--nd-ink); box-shadow: 0 0 0 1px var(--nd-ink); }
.billing-plan.is-unavailable { opacity: .6; }
.billing-price s { color: var(--nd-muted); font-size: 18px; font-weight: 800; }
.billing-promo { padding: 8px 10px; border-radius: 10px; background: #e2fcf4; color: #7d5200; font-size: 12.5px; font-weight: 800; }
.billing-trial { color: #1f6b45; font-size: 12.5px; font-weight: 800; }
.billing-plan-options { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--nd-canvas); }
.billing-plan-options span { color: var(--nd-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.billing-plan-options em { font-style: normal; font-size: 12.5px; font-weight: 700; }
.billing-options { display: grid; gap: 8px; }
.billing-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--nd-line); border-radius: 14px; }
.billing-option > div { flex: 1; min-width: 0; }
.billing-option strong { display: block; font-weight: 900; }
.billing-option span:not(.badge):not(.billing-option-price) { color: var(--nd-muted); font-size: 12.5px; }
.billing-option.is-on { background: color-mix(in srgb, #39a56f 6%, var(--nd-surface)); }
.billing-option-price { font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== Super-admin : catalogue ===== */
#catalog-root { margin-bottom: 18px; }
.cat-tabs { margin: 0 0 14px; width: max-content; max-width: 100%; }
.cat-tabs em { margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: var(--nd-yellow); color: #020b42; font-style: normal; font-size: 11px; }
.cat-sync-line { margin: 0 0 14px; color: var(--nd-muted); font-size: 13px; font-weight: 700; }
.cat-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cat-plan { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 20px; background: var(--nd-surface); box-shadow: var(--nd-shadow); }
.cat-plan.is-featured { box-shadow: 0 0 0 2px var(--nd-yellow), var(--nd-shadow); }
.cat-plan.is-archived { opacity: .55; }
.cat-plan header { display: flex; justify-content: space-between; gap: 10px; }
.cat-plan h3 { margin: 2px 0 0; font-family: var(--font-heading, "Nunito", sans-serif); font-size: 21px; font-weight: 900; }
.cat-code { color: var(--nd-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cat-flags { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; justify-content: flex-end; }
.cat-flag { padding: 3px 8px; border-radius: 99px; background: #dff1e7; color: #1f6b45; font-size: 11px; font-weight: 800; }
.cat-flag.is-off { background: var(--nd-canvas); color: var(--nd-muted); }
.cat-desc { margin: 0; color: var(--nd-muted); font-size: 13px; }
.cat-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cat-prices > div { padding: 10px 12px; border-radius: 12px; background: var(--nd-canvas); }
.cat-prices > div.is-off { opacity: .45; }
.cat-prices span { display: block; color: var(--nd-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.cat-prices strong { font-family: var(--font-heading, "Nunito", sans-serif); font-size: 20px; font-weight: 900; }
.cat-prices s { color: var(--nd-muted); font-size: 14px; }
.cat-prices small { display: block; color: #1f6b45; font-size: 11.5px; font-weight: 800; }
.cat-promo { padding: 6px 10px; border-radius: 10px; background: #e2fcf4; color: #7d5200; font-size: 12.5px; font-weight: 800; }
.cat-limits { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-limits span { padding: 4px 9px; border-radius: 99px; background: var(--nd-canvas); font-size: 12px; font-weight: 700; }
.cat-services { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-services span { padding: 4px 9px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.cat-services .is-inc { background: #dff1e7; color: #1f6b45; }
.cat-services .is-opt { background: #e8eefc; color: #2f4f9a; }
.cat-plan footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--nd-line); color: var(--nd-muted); font-size: 12.5px; font-weight: 700; }
.cat-promos { display: grid; gap: 8px; }
.cat-promo-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--nd-line); border-radius: 14px; }
.cat-promo-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.cat-promo-main strong { font-weight: 900; }
.cat-promo-main strong em { margin-left: 6px; color: #b33e2a; font-style: normal; }
.cat-promo-main span { color: var(--nd-muted); font-size: 12.5px; }
.cat-code-tag { justify-self: start; padding: 2px 8px; border-radius: 6px; background: var(--nd-ink); color: #fff !important; font-family: ui-monospace, monospace; font-size: 11.5px !important; }
.cat-code-tag.is-auto { background: var(--nd-canvas); color: var(--nd-muted) !important; font-family: inherit; }
.cat-error { color: #b33e2a !important; font-weight: 700; }
.cat-key { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; padding: 12px 14px; border-radius: 14px; background: var(--nd-canvas); }
.cat-key > div { flex: 1; min-width: 0; }
.cat-key span { display: block; color: var(--nd-muted); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.cat-key code { font-size: 13px; overflow-wrap: anywhere; }
.cat-steps { margin: 0 0 14px; padding-left: 18px; color: var(--nd-muted); font-size: 13px; line-height: 1.7; }
.cat-site-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cat-ping { font-size: 12.5px; font-weight: 800; }
.cat-ping.is-ok { color: #1f6b45; }
.cat-ping.is-ko { color: #b33e2a; }
.cat-modal .modal-body { max-height: calc(100vh - 190px); overflow-y: auto; }
.cat-modal .modal-actions { align-items: center; }
.cat-modal-note { margin-right: auto; }
.cat-editor { display: grid; gap: 22px; }
.cat-editor section { display: grid; gap: 12px; }
.cat-editor h4 { margin: 0; font-family: var(--font-heading, "Nunito", sans-serif); font-size: 16px; font-weight: 900; }
.cat-toggles { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.cat-toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; flex-wrap: wrap; }
.cat-toggle input { position: absolute; opacity: 0; }
.cat-toggle span { position: relative; width: 38px; height: 22px; flex: none; border-radius: 99px; background: #d8d8d1; transition: background .2s; }
.cat-toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.cat-toggle input:checked + span { background: var(--nd-ink); }
.cat-toggle input:checked + span::after { transform: translateX(16px); }
.cat-toggle input:focus-visible + span { outline: 2px solid var(--nd-ink); outline-offset: 2px; }
.cat-toggle b { font-size: 13.5px; }
.cat-toggle small { flex-basis: 100%; padding-left: 48px; margin-top: -6px; color: var(--nd-muted); font-size: 12px; }
.cat-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cat-price-box { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 16px; background: var(--nd-canvas); }
.cat-price-box small { color: var(--nd-muted); font-size: 12px; }
.cat-yearly-info { color: #1f6b45 !important; font-weight: 800; }
.cat-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--nd-muted); }
.cat-quick button { padding: 4px 9px; border: 1px solid var(--nd-line); border-radius: 99px; background: var(--nd-surface); font: inherit; color: var(--nd-ink); cursor: pointer; }
.cat-quick button:hover { border-color: var(--nd-ink); }
.cat-migrate { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: #e2fcf4; font-size: 13px; }
.cat-limits-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.cat-svcs { display: grid; gap: 8px; }
.cat-svc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--nd-line); border-radius: 14px; }
.cat-svc strong { display: block; font-weight: 900; }
.cat-svc small { color: var(--nd-muted); font-size: 12px; }
.cat-svc-price { grid-column: 1 / -1; display: flex; gap: 10px; }
.cat-svc-price label { display: flex; align-items: center; gap: 8px; color: var(--nd-muted); font-size: 12px; font-weight: 800; }
.cat-svc-price .input { width: 110px; }
.cat-inline { display: flex; gap: 8px; }
.cat-inline .select { width: 80px; }
.cat-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 700; }
.cat-checks label { display: inline-flex; gap: 6px; align-items: center; }
.cat-promo-preview:empty { display: none; }
.cat-promo-preview { display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--nd-canvas); }
.cat-promo-preview span { color: var(--nd-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.cat-promo-preview s { color: var(--nd-muted); }
.cat-promo-preview b { font-size: 18px; }
.cat-promo-preview small { color: #7d5200; font-weight: 800; }
@media (max-width: 900px) {
  .cat-price-grid { grid-template-columns: 1fr; }
  .cat-limits-grid { grid-template-columns: 1fr 1fr !important; }
  .cat-svc { grid-template-columns: 1fr; }
}
.cat-modal .modal-body { max-height: calc(100vh - 260px) !important; }

.cat-signup { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 6px; margin: 16px 0; display: grid; gap: 10px; }
.cat-signup legend { padding: 0 6px; font-weight: 800; font-size: 14px; }
.login-foot a { color: var(--ink); font-weight: 800; margin-left: 4px; }

/* Super-admin : envoi des emails */
.mail-card { margin-bottom: 18px; }
.mail-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.mail-test-to { max-width: 260px; }
.mail-last { margin: 12px 0 0; font-size: 13px; font-weight: 700; }
.mail-last.is-ok { color: #2f7a4a; }
.mail-last.is-ko { color: #b33e2a; }

/* Super-admin : coût Cloudflare */
.cf-card { margin: 18px 0; }
.cf-head-actions { display: flex; gap: 6px; }
.cf-intro { margin: 0 0 14px; }
.cf-steps { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.cf-actions { display: flex; gap: 10px; margin-top: 6px; }
.cf-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cf-totals > div { padding: 16px; border-radius: 14px; background: var(--canvas); display: grid; gap: 2px; }
.cf-totals span { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cf-totals strong { font-size: 26px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cf-totals small { color: var(--muted); font-size: 12.5px; }
.cf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cf-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 800; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.cf-table td { padding: 10px 6px; border-bottom: 1px solid var(--line); }
.cf-table td:nth-child(n+3), .cf-table th:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
.cf-subs { margin-top: 16px; display: grid; gap: 6px; }
.cf-subs > span { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cf-subs p { margin: 0; display: flex; gap: 8px; } .cf-subs b { margin-left: auto; }
.cf-error { color: #b33e2a; font-weight: 700; margin: 0 0 12px; }
@media (max-width: 760px) { .cf-totals { grid-template-columns: 1fr; } .cf-table { display: block; overflow-x: auto; } }

/* Super-admin : services */
.svc-card { margin-bottom: 18px; }
.svc-core { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.svc-core-item { display: grid; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--nd-line); background: var(--nd-surface, #fff); font: inherit; color: inherit; cursor: pointer; }
.svc-core-item:hover { border-color: var(--nd-ink); }
.svc-core-item strong { font-weight: 900; }
.svc-core-item span { color: var(--nd-muted); font-size: 13px; line-height: 1.4; }
.svc-core-item em, .svc-flag { font-style: normal; font-size: 11px; font-weight: 800; color: #9a3522; display: inline-block; margin-right: 8px; }
.svc-table-wrap { overflow-x: auto; }
.svc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.svc-table th { text-align: left; font-size: 12px; color: var(--nd-muted); font-weight: 800; padding: 8px 10px; border-bottom: 1px solid var(--nd-line); white-space: nowrap; }
.svc-table td { padding: 12px 10px; border-bottom: 1px solid var(--nd-line); vertical-align: middle; }
.svc-table td:first-child { min-width: 260px; }
.svc-table td strong { display: block; font-weight: 900; }
.svc-table td small { display: block; color: var(--nd-muted); font-size: 12.5px; margin-top: 2px; }
.svc-table tr.is-off td { opacity: .55; }
.svc-chip { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.svc-chip.is-in { background: var(--nd-t-green); color: var(--nd-c-green); }
.svc-chip.is-opt { background: var(--nd-t-amber); color: var(--nd-c-amber); }
.svc-chip.is-off { background: var(--nd-t-gray); color: var(--nd-c-gray); }

/* Version et nouveautés */
.nd-version { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.nd-version span { font-variant-numeric: tabular-nums; font-weight: 800; padding: 2px 7px; border-radius: 7px; background: var(--nd-canvas, #f3f5fa); color: var(--nd-ink, #020b42); font-size: 11.5px; }
.nd-version-dot { width: 8px; height: 8px; border-radius: 50%; background: #d2553f; display: inline-block; }
.nd-version-wrap { padding: 10px 14px 0; font-size: 13px; color: var(--nd-muted, #62688a); }
.nd-version-modal { width: min(620px, calc(100% - 32px)); }
.nd-version-modal .modal-body { max-height: min(70vh, 640px); overflow-y: auto; display: grid; gap: 18px; }
.nd-release { padding-bottom: 16px; border-bottom: 1px solid var(--nd-line, #e1e5ef); }
.nd-release:last-child { border-bottom: 0; padding-bottom: 0; }
.nd-release-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nd-release-head strong { font-weight: 900; }
.nd-release-head > span:last-child { margin-left: auto; color: var(--nd-muted, #62688a); font-size: 13px; }
.nd-release h4 { margin: 6px 0 8px; font-size: 15px; }
.nd-release ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; }
.nd-release:not(.is-current) { opacity: .8; }
/* État de la plateforme et audit de sécurité (super-admin) */
body.backoffice .health-dot.bad{background:#d64545;box-shadow:0 0 0 4px rgba(214,69,69,.12)}
.health-links{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px}
.health-links a{font-size:12px;font-weight:600;color:var(--accent,#2563eb);text-decoration:none}
.health-links a:hover{text-decoration:underline}
.sec-card{margin-top:20px}
.sec-score{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;padding:14px 16px;border-radius:14px;background:rgba(47,155,98,.08);margin-bottom:16px}
.sec-score.is-warn{background:rgba(231,166,37,.1)}
.sec-score.is-fail{background:rgba(214,69,69,.08)}
.sec-score strong{font-size:34px;line-height:1;font-weight:750}
.sec-score span{font-weight:600;opacity:.6}
.sec-score p{flex-basis:100%;margin:4px 0 0;font-size:13px;opacity:.75}
.sec-group{margin-top:14px}
.sec-group h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;opacity:.6}
.sec-check{display:flex;gap:10px;padding:8px 0;border-top:1px solid rgba(127,127,127,.15)}
.sec-check i{flex:0 0 20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;color:#fff;background:#2f9b62;margin-top:1px}
.sec-check.is-warn i{background:#e7a625}
.sec-check.is-fail i{background:#d64545}
.sec-check div{display:flex;flex-direction:column;gap:2px;min-width:0}
.sec-check strong{font-size:14px}
.sec-check span{font-size:13px;opacity:.75;overflow-wrap:anywhere}
.sec-check em{font-size:12px;font-style:normal;font-weight:600;color:#b4560c}
.sec-ok{margin-top:16px}
.sec-ok summary{cursor:pointer;font-size:13px;font-weight:600;opacity:.75}
.sec-allgood{margin:0;font-weight:600;color:#2f9b62}
.sec-check .sec-action{align-self:flex-start;margin-top:6px}

/* =========================================================================
   Verre (comme sur le site) : halos de fond, barre du haut et menu latéral
   translucides, menus flottants, fenêtres et notifications.
   Le flou est porté par un calque ::before pour ne pas casser les éléments fixes.
   ========================================================================= */
body.backoffice { --nd-glass: rgba(250, 252, 255, .62); --nd-glass-strong: rgba(250, 252, 255, .86); --nd-glass-line: rgba(255, 255, 255, .75); --nd-blur: saturate(170%) blur(18px); }
body.backoffice[data-dashboard-theme="dark"] { --nd-glass: rgba(11, 18, 54, .62); --nd-glass-strong: rgba(14, 22, 64, .88); --nd-glass-line: rgba(255, 255, 255, .08); }

/* Halos menthe et marine, fixes derrière l'interface */
body.backoffice::before { content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none; background:
  radial-gradient(36vmax 28vmax at 92% 4%, rgba(19, 245, 187, .16), transparent 70%),
  radial-gradient(30vmax 26vmax at 18% 96%, rgba(19, 245, 187, .09), transparent 70%),
  radial-gradient(34vmax 30vmax at 4% 20%, rgba(2, 11, 66, .05), transparent 70%); }
body.backoffice[data-dashboard-theme="dark"]::before { background:
  radial-gradient(36vmax 28vmax at 92% 4%, rgba(19, 245, 187, .12), transparent 70%),
  radial-gradient(30vmax 26vmax at 18% 96%, rgba(19, 245, 187, .07), transparent 70%); }
body.backoffice { background-color: var(--nd-canvas, #f3f5fa); }
body.backoffice :is(.app, .main, .content) { background: transparent !important; }

/* Barre du haut */
body.backoffice .topbar { background: transparent !important; isolation: isolate; border-bottom-color: transparent !important; }
body.backoffice .topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--nd-glass); -webkit-backdrop-filter: var(--nd-blur); backdrop-filter: var(--nd-blur); border-bottom: 1px solid var(--nd-glass-line); box-shadow: 0 1px 0 rgba(2, 11, 66, .04); }

/* Menu latéral */
body.backoffice .sidebar { background: transparent !important; isolation: isolate; }
body.backoffice .sidebar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--nd-glass); -webkit-backdrop-filter: var(--nd-blur); backdrop-filter: var(--nd-blur); border-right: 1px solid var(--nd-glass-line); }
body.backoffice .sidebar .nav-item.active { box-shadow: inset 0 0 0 1px rgba(19, 245, 187, .35); }

/* Menus flottants : recherche, notifications, menus « … », versions */
body.backoffice :is(.search-results, .notification-popover, .ndx-menu, .ndv-versions-menu) { background: var(--nd-glass-strong) !important; -webkit-backdrop-filter: var(--nd-blur); backdrop-filter: var(--nd-blur); border: 1px solid var(--nd-glass-line) !important; }

/* Fenêtres : fond voilé de marine et flouté, la fenêtre reste pleine pour la lecture */
.modal-backdrop { background: rgba(2, 11, 66, .26) !important; -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); }
body.backoffice .modal { box-shadow: 0 40px 100px rgba(2, 11, 66, .22), inset 0 0 0 1px rgba(255, 255, 255, .6); }

/* Notifications toast */
.toast { background: rgba(255, 255, 255, .86) !important; color: var(--nd-navy, #020b42) !important; -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); border: 1px solid rgba(2, 11, 66, .1) !important; box-shadow: 0 18px 44px rgba(2, 11, 66, .16), inset 0 1px 0 rgba(255, 255, 255, .9) !important; font-weight: 700; }
.toast .toast-dot { box-shadow: 0 0 0 4px rgba(19, 245, 187, .18); }

/* Bouton principal : reflet au survol */
body.backoffice .btn-primary { position: relative; overflow: hidden; isolation: isolate; }
body.backoffice .btn-primary::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); transition: left .7s var(--nd-ease); pointer-events: none; }
body.backoffice .btn-primary:hover::after { left: 120%; }

/* Écran de connexion et d'inscription : carte de formulaire légèrement vitrée */
body.backoffice .login-shell { background: transparent; }

@media (prefers-reduced-motion: reduce) { body.backoffice .btn-primary::after { display: none; } }
@media (prefers-reduced-transparency: reduce) { body.backoffice :is(.topbar, .sidebar)::before { background: var(--nd-surface, #fff); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.backoffice :is(.topbar, .sidebar)::before { background: var(--nd-surface, #fff); } body.backoffice :is(.search-results, .notification-popover, .ndx-menu) { background: var(--nd-surface, #fff) !important; } }

/* Pied de page : liens et bouton de version sur une même ligne, même hauteur */
body.backoffice .app-footer .app-footer-links { align-items: center; }
body.backoffice .app-footer .app-footer-links > :is(a, button) { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; line-height: 1; vertical-align: middle; box-sizing: border-box; }
body.backoffice .app-footer .app-footer-links .nd-version span { padding: 3px 6px; line-height: 1; font-size: 11px; }
body.backoffice .app-footer .app-footer-links .nd-version-dot { width: 7px; height: 7px; }
.pending-note { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; padding: 14px 18px; border-radius: 16px; background: rgba(19, 245, 187, .1); border: 1px solid rgba(19, 245, 187, .35); font-size: 14px; line-height: 1.45; }
.pending-note.hidden { display: none; }
.auto-settings { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--nd-line); display: grid; gap: 6px; }
.auto-days { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--nd-muted); padding-left: 28px; }
.auto-days .select { width: auto; min-width: 110px; height: 36px; }
/* Rentabilité d'un projet */
.profit-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 18px; align-items: start; }
.profit-top > div { display: grid; gap: 2px; }
.profit-top span { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--nd-muted); }
.profit-top strong { font-family: var(--font-heading, "Montserrat Alternates", sans-serif); font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.profit-top small { color: var(--nd-muted); font-size: 12.5px; }
.profit-pill { align-self: center; padding: 6px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 800; background: var(--nd-t-gray); color: var(--nd-c-gray); white-space: nowrap; text-transform: none !important; letter-spacing: 0 !important; }
.profit-card.is-ok .profit-pill { background: rgba(19, 245, 187, .18); color: #056a51; }
.profit-card.is-near .profit-pill { background: var(--nd-t-amber); color: var(--nd-c-amber); }
.profit-card.is-over .profit-pill { background: var(--nd-t-red); color: var(--nd-c-red); }
.profit-gauge { position: relative; height: 12px; margin-top: 18px; border-radius: 99px; background: var(--nd-canvas); overflow: hidden; display: flex; }
.profit-gauge i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #13f5bb, #0fd9a5); transition: width .6s var(--nd-ease); }
.profit-card.is-near .profit-gauge i { background: linear-gradient(90deg, #13f5bb, #e7a625); }
.profit-card.is-over .profit-gauge i { background: linear-gradient(90deg, #e7a625, #d2553f); }
.profit-gauge b { position: absolute; right: 0; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, rgba(210, 85, 63, .35) 0 6px, rgba(210, 85, 63, .15) 6px 12px); }
.profit-gauge em { position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(2, 11, 66, .25); }
@media (max-width: 760px) { .profit-top { grid-template-columns: 1fr 1fr; } .profit-pill { grid-column: 1 / -1; justify-self: start; } }
/* Carte « Aujourd'hui » */
.today-card { margin-top: 18px; margin-bottom: 18px; padding: 22px 24px; background: linear-gradient(135deg, rgba(19, 245, 187, .14), rgba(255, 255, 255, .0) 55%), var(--nd-surface); }
.today-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.today-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--nd-sable, #067a5d); }
.today-head h3 { margin: 4px 0 0; font-family: var(--font-heading, "Montserrat Alternates", sans-serif); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.today-date { font-size: 13px; font-weight: 700; color: var(--nd-muted); text-transform: capitalize; white-space: nowrap; }
.today-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.today-col { padding: 14px; border-radius: 16px; background: var(--nd-canvas); display: grid; gap: 6px; align-content: start; min-width: 0; }
.today-col-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--nd-muted); margin-bottom: 2px; }
.today-col-head b { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; display: inline-grid; place-items: center; background: var(--nd-surface); color: var(--nd-ink); font-size: 12px; letter-spacing: 0; }
.today-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 11px; border: 0; background: var(--nd-surface); color: var(--nd-ink); font: inherit; font-size: 13.5px; font-weight: 700; text-align: left; cursor: pointer; min-width: 0; }
div.today-item { cursor: default; }
.today-item span { display: grid; min-width: 0; }
.today-item span, .today-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-item small { font-size: 12px; font-weight: 600; color: var(--nd-muted); }
.today-item time { flex: none; font-variant-numeric: tabular-nums; font-weight: 800; padding: 3px 7px; border-radius: 7px; background: var(--nd-canvas); font-size: 12px; }
.today-item.is-next time { background: #13f5bb; color: #020b42; }
.today-item.is-late small { color: var(--nd-c-red); }
.today-item .task-check { flex: none; }
.today-empty { margin: 4px 2px; font-size: 13px; color: var(--nd-muted); }
.today-answers { display: flex; gap: 8px; flex-wrap: wrap; }
.today-answers span { font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px; }
.today-answers .is-ok { background: rgba(19, 245, 187, .2); color: #056a51; }
.today-answers .is-remark { background: var(--nd-t-amber); color: var(--nd-c-amber); }
body[data-dashboard-theme="dark"] .today-answers .is-ok { color: #13f5bb; }
@media (max-width: 900px) { .today-grid { grid-template-columns: 1fr; } .today-head { flex-direction: column; } }
/* Annonce de la plateforme en fenêtre */
.announce-modal { width: min(520px, calc(100% - 32px)); overflow: hidden; }
.announce-art { height: 120px; display: grid; place-items: center; background: radial-gradient(60% 90% at 80% 0%, rgba(19, 245, 187, .35), transparent 70%), #020b42; }
.announce-art svg { height: 54px; width: auto; fill: #13f5bb; animation: nd-dot-drop .7s cubic-bezier(.2, 1.5, .4, 1) both; }
.announce-modal .modal-body { display: grid; gap: 8px; padding-top: 22px; }
.announce-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--nd-sable, #067a5d); }
.announce-modal h3 { margin: 0; font-family: var(--font-heading, "Montserrat Alternates", sans-serif); font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.announce-modal p { margin: 0; color: var(--nd-muted); line-height: 1.6; }
.cf-cost-line { margin-top: 6px; }
.cf-cost-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 0; border-radius: 99px; background: rgba(19, 245, 187, .16); color: var(--nd-ink); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cf-cost-pill b { font-weight: 800; }
#platform-health [data-health="security"] { cursor: pointer; }
#platform-health [data-health="security"]:hover { background: rgba(19, 245, 187, .08); }
#security-page-body .sec-card, #storage-page-body .cf-card { margin-top: 0; }

/* Boutons secondaires bien visibles sur fond blanc, et jamais coupés sur deux lignes */
body.backoffice .btn { white-space: nowrap; }
body.backoffice :is(.btn-secondary, .btn-dark):not(.ndx-bulk .btn-secondary) { border: 1px solid #d3d8e6; box-shadow: 0 1px 2px rgba(2, 11, 66, .04); }
body.backoffice :is(.btn-secondary, .btn-dark):hover { border-color: #b9c0d6; }
body[data-dashboard-theme="dark"].backoffice :is(.btn-secondary, .btn-dark) { border-color: rgba(255, 255, 255, .16); }
body.backoffice .modal .btn-danger { white-space: nowrap; }
.cf-cost-pill { white-space: nowrap; }
/* Projets épinglés dans la barre du haut */
body.backoffice .topbar { gap: 14px; }
.pinned-projects { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; overflow: hidden; margin-right: auto; }
.pinned-projects.hidden { display: none; }
.pin-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; max-width: 190px; padding: 0 12px 0 5px; border: 1px solid rgba(2, 11, 66, .08); border-radius: 99px; background: rgba(255, 255, 255, .7); color: var(--nd-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; flex: none; transition: background .2s, border-color .2s, transform .2s; }
.pin-chip:hover { background: #fff; border-color: rgba(19, 245, 187, .7); transform: translateY(-1px); }
.pin-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-chip .entity-logo { width: 24px !important; height: 24px !important; min-width: 24px; border-radius: 99px !important; font-size: 9.5px !important; flex: none; overflow: hidden; display: inline-grid; place-items: center; }
.pin-chip .entity-logo img { width: 100%; height: 100%; object-fit: cover; }
.pin-chip .entity-logo svg { width: 13px; height: 13px; }
.pin-chip.pin-more { padding: 0 12px; }
body[data-dashboard-theme="dark"] .pin-chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
.pin-check { margin-top: 14px; flex-wrap: wrap; }
.pin-check small { color: var(--nd-muted); font-weight: 600; }
@media (max-width: 1100px) { .pinned-projects { display: none !important; } }

/* Portail client : statistiques du site */
.portal-traffic-kpis small { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--nd-muted); }
.portal-traffic-kpis .kpi-trend.is-up { color: #067a5d; }
.portal-traffic-kpis .kpi-trend.is-down { color: #c2412d; }
.portal-site-split { margin-top: 22px; }
.portal-site-split h4 { margin: 0 0 12px; }
.portal-hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; align-items: end; height: 130px; padding-bottom: 20px; position: relative; }
.portal-hour { position: relative; height: 100%; display: flex; align-items: flex-end; }
.portal-hour i { display: block; width: 100%; border-radius: 6px 6px 2px 2px; background: var(--portal-accent, var(--nd-mint, #13f5bb)); opacity: .85; }
.portal-hour:hover i { opacity: 1; }
.portal-hour span { position: absolute; left: 0; bottom: -20px; font-size: 11px; font-weight: 700; color: var(--nd-muted); white-space: nowrap; }
@media (max-width: 640px) { .portal-hours { gap: 2px; } }

/* Aperçu de création : toujours un espace entre les blocs empilés */
.nd-create-preview { display: flex; flex-direction: column; gap: 12px; }
.nd-create-preview > * { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Code de suivi des sites Shopify / sur mesure */
.platform-hint { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--nd-canvas); color: var(--nd-muted); font-size: 13.5px; line-height: 1.5; }
.platform-hint b { color: var(--nd-ink); }
.platform-hint code, .site-connect-steps code { font-size: 12.5px; padding: 1px 6px; border-radius: 6px; background: rgba(2, 11, 66, .07); color: var(--nd-ink); }
.tracker-code { border-radius: 18px; background: #020b42; color: #e9edf8; padding: 16px 18px; margin-bottom: 18px; }
.tracker-code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tracker-code-head strong { color: #fafcff; }
.tracker-code pre { margin: 0; white-space: pre-wrap; word-break: break-all; font-size: 13px; line-height: 1.55; color: #7ff9d9; user-select: all; }
.tracker-title { margin: 0 0 10px; }
.tracker-note { margin-top: 12px; }

/* Sélecteur client / projet avec logos */
.nd-pick { position: relative; min-width: 0; }
.nd-pick .nd-pick-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.nd-pick-btn { display: flex !important; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 12px 6px 8px !important; text-align: left; cursor: pointer; background-image: none !important; }
.nd-pick-btn:disabled { cursor: not-allowed; opacity: .6; }
.nd-pick-btn .entity-logo, .nd-pick-opt .entity-logo { width: 30px; height: 30px; flex: none; font-size: 11px; border-radius: 9px; }
.nd-pick-text { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.nd-pick-text strong { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-pick-text small { font-size: 12px; color: var(--nd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-pick-chev { flex: none; color: var(--nd-muted); transition: transform .2s; }
.nd-pick.is-open .nd-pick-chev { transform: rotate(180deg); }
.nd-pick-pop { position: fixed; z-index: 2000; max-height: 320px; display: flex; flex-direction: column; padding: 8px; border-radius: 16px; background: #fff; border: 1px solid var(--nd-line, #e1e5ef); box-shadow: 0 24px 50px rgba(2, 11, 66, .16); }
.nd-pick-search { margin-bottom: 6px; min-height: 40px; }
.nd-pick-list { overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.nd-pick-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; color: var(--nd-ink); font: inherit; }
.nd-pick-opt:hover, .nd-pick-opt:focus-visible { background: var(--nd-canvas); outline: none; }
.nd-pick-opt.is-selected { background: rgba(19, 245, 187, .16); }
.nd-pick-opt.is-special { border-bottom: 1px dashed var(--nd-line, #e1e5ef); border-radius: 10px 10px 0 0; margin-bottom: 4px; }
.nd-pick-opt[hidden] { display: none; }
.message-content header .message-agent { font-size: 12px; font-weight: 700; color: var(--nd-muted); margin-left: 6px; }
.ndv-msg header .message-agent, .ndv-note header .message-agent, .ndv-reply header .message-agent { font-size: 11.5px; font-weight: 700; color: var(--nd-muted); margin-left: 5px; }

/* Discussions : pièce jointe et mention de fichier l'une au-dessus de l'autre, avec une explication au survol */
.compose-row { align-items: flex-end; }
.compose-tools { display: flex; flex-direction: column; gap: 6px; flex: none; }
.compose-tools .compose-attach { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 10px); width: max-content; max-width: 260px; padding: 9px 12px; border-radius: 12px; background: var(--nd-ink, #020b42); color: #fafcff; font: 700 12.5px/1.4 var(--font-body, "Nunito", sans-serif); white-space: normal; text-align: left; box-shadow: 0 12px 30px rgba(2, 11, 66, .2); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .15s, transform .15s; z-index: 30; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none) { [data-tip]::after { display: none; } }

/* Temps et rentabilité */
.input-suffix { display: flex; align-items: center; gap: 10px; }
.input-suffix .input { max-width: 140px; }
.input-suffix span { color: var(--nd-muted); font-weight: 700; font-size: 13.5px; }
.profit-settings[hidden] { display: none; }
.time-ask-task { margin: -4px 0 14px; font-weight: 700; }
.time-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.time-chip input { position: absolute; opacity: 0; pointer-events: none; }
.time-chip span { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 14px; border: 1.5px solid var(--nd-line, #e1e5ef); font-family: var(--font-heading, inherit); font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s; }
.time-chip span:hover { border-color: var(--nd-ink); }
.time-chip input:checked + span { background: var(--nd-mint, #13f5bb); border-color: var(--nd-mint, #13f5bb); color: var(--nd-ink); }
.time-chip input:focus-visible + span { outline: 2px solid var(--nd-ink); outline-offset: 2px; }
.time-custom { margin-top: 14px; }

/* Notifications du navigateur */
.browser-notif { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--nd-canvas); }
.browser-notif strong { display: block; }
.browser-notif.is-on .btn { background: #d7f6ea; color: #067a5d; border-color: transparent; }
.nd-version-more { margin-top: 8px; width: 100%; }
.portal-brief-icon.is-small { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(19, 245, 187, .16); color: var(--nd-ink); }

/* ===== 2.8.1 : formule, limites, visite guidée ===== */
body.backoffice .billing-card + .subscription-overview { margin-top: 16px; }
body.backoffice .subscription-overview > article.is-ending strong { color: var(--nd-c-amber, #9a6a00); }
.billing-price-now { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 15px; font-weight: 700; color: var(--nd-muted); }
.billing-price-now b { color: var(--nd-ink, #020b42); font-weight: 900; }
.billing-price-now s { color: var(--nd-muted); font-weight: 600; }
.billing-price-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--nd-muted); }
.billing-price-note .billing-promo { padding: 5px 10px; }
.service-item { align-items: center; }
.service-item > div:not(.service-side) { flex: 1; min-width: 0; }
.service-side { flex-direction: row !important; align-items: center; gap: 8px !important; flex: none; margin-left: auto; }
.service-item .service-side .billing-option-price { color: var(--nd-ink, #020b42); font-weight: 800; font-size: 13px; white-space: nowrap; }
.service-item.is-off { border-style: dashed; }
.service-item.is-off .service-check { background: var(--nd-canvas); color: var(--nd-muted); }
@media (max-width: 640px) { .service-item { flex-wrap: wrap; } .service-side { width: 100%; justify-content: flex-end; } }
.plan-hidden { display: none !important; }
.page.is-plan-locked > :not(.plan-lock) { display: none !important; }
.plan-lock { display: grid; place-items: center; min-height: 60vh; padding: 24px 0; }
.plan-lock-card { max-width: 520px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 32px; border-radius: 24px; background: var(--nd-surface, #fff); box-shadow: var(--nd-shadow); }
.plan-lock-card h2 { margin: 0; font-family: var(--font-heading, "Nunito", sans-serif); font-size: 26px; font-weight: 900; letter-spacing: -.01em; }
.plan-lock-card p { margin: 0; color: var(--nd-muted); line-height: 1.55; }
.plan-lock-card .plan-lock-note { font-size: 13.5px; padding: 12px 14px; border-radius: 14px; background: var(--nd-canvas); }
.plan-lock-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--nd-t-amber, #fff3d6); color: var(--nd-c-amber, #9a6a00); }
.plan-lock-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plan-lock-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.plan-limit-box { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.plan-limit-box p { margin: 0; line-height: 1.6; }
.plan-limit-meter { width: 100%; display: flex; align-items: center; gap: 12px; }
.plan-limit-meter .progress { flex: 1; }
.plan-limit-meter .progress i { background: var(--nd-c-amber, #e0a100); }
.plan-limit-meter span { font-size: 13px; font-weight: 800; white-space: nowrap; }
.plan-limit-box .modal-actions { width: 100%; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; align-items: center; }
.usage-card.is-full .usage-max { color: var(--nd-c-amber, #9a6a00); font-weight: 800; }
.usage-card.is-full .progress i { background: var(--nd-c-amber, #e0a100); }
.modal:has(.plan-limit-box) { max-width: 560px !important; }
.plan-limit-meter .progress i { background: var(--nd-c-amber, #e0a100) !important; }
.plan-limit-box .modal-actions { border-top: 0 !important; padding-top: 0 !important; }
.retention-banner { align-items: center; }
.retention-banner > div:not(.retention-actions) { flex: 1; }
.retention-actions { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }
#subscription-content > .retention-banner { margin-bottom: 16px; }
.export-card .card-head { align-items: center; gap: 16px; }
@media (max-width: 640px) { .export-card .card-head { flex-direction: column; align-items: flex-start; } .retention-banner { flex-wrap: wrap; } }
body.backoffice .storage-banner .storage-banner-icon { background: var(--st-pending-fg); color: #fff; }
body.backoffice .storage-banner.critical .storage-banner-icon { background: var(--st-alert-fg); }
body.backoffice .retention-banner > .retention-actions { display: flex; flex: none; gap: 8px; }
body.backoffice .retention-banner > .retention-actions .btn { white-space: nowrap; }

/* ===== 2.9.0 ===== */
.field-hint { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--nd-muted); }
.leave-confirm { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(2, 11, 66, .38); animation: leave-in .16s ease-out; }
.leave-confirm-card { width: min(480px, 100%); padding: 24px; border-radius: 20px; background: var(--nd-surface, #fff); box-shadow: 0 24px 60px rgba(2, 11, 66, .28); display: flex; flex-direction: column; gap: 8px; }
.leave-confirm-card strong { font-family: var(--font-heading, "Nunito", sans-serif); font-size: 19px; font-weight: 800; }
.leave-confirm-card p { margin: 0 0 10px; color: var(--nd-muted); line-height: 1.5; }
.leave-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.leave-confirm-actions .btn { flex: 1 1 auto; white-space: nowrap; }
@keyframes leave-in { from { opacity: 0; } }
.form-intro { margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: var(--nd-canvas, #f3f5fa); color: var(--nd-muted); font-size: 14px; line-height: 1.55; }
/* Icône des sites : favicon ou logo du client */
body.backoffice .site-favicon.has-img { background: #fff; border: 1px solid var(--nd-line); overflow: hidden; padding: 5px; }
body.backoffice .site-favicon.has-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Page Sites : résumé et choix de l'affichage */
.sites-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sites-toolbar:empty { display: none; }
.sites-summary { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13.5px; font-weight: 700; color: var(--nd-muted); }
.sites-dot { display: inline-flex; align-items: center; gap: 7px; }
.sites-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--nd-c-green, #1f8a5b); }
.sites-dot.is-warn::before { background: var(--nd-c-amber, #c48a00); }
.sites-dot.is-down::before { background: var(--nd-c-red, #d2553f); }
.sites-view button { position: relative; }
.sites-view [data-tip]::after { left: auto; right: 0; }
body.backoffice #sites-grid.is-simple, #sites-grid.is-simple { display: flex !important; flex-direction: column; gap: 8px; }
.site-row { display: grid; grid-template-columns: 40px minmax(160px, 1fr) minmax(0, 2fr) auto; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border: 0; border-radius: 16px; background: var(--nd-surface, #fff); box-shadow: var(--nd-shadow); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.site-row:hover { box-shadow: 0 0 0 2px var(--nd-line), var(--nd-shadow); }
.site-row-main { display: flex; flex-direction: column; min-width: 0; }
.site-row-main strong { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-row-main small { color: var(--nd-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-row-issues { display: flex; flex-wrap: wrap; gap: 6px; }
.site-row-issues em { font-style: normal; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--nd-canvas); color: var(--nd-muted); }
.site-row-issues em.is-red { background: var(--nd-t-red); color: var(--nd-c-red); }
.site-row-issues em.is-amber { background: var(--nd-t-amber); color: var(--nd-c-amber); }
.site-row-issues em.is-ok { background: var(--nd-t-green); color: var(--nd-c-green); }
.site-row-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; white-space: nowrap; }
.site-row-state i { width: 10px; height: 10px; border-radius: 50%; background: var(--nd-c-green, #1f8a5b); box-shadow: 0 0 0 4px var(--nd-t-green); }
.site-row-state.is-warn i { background: var(--nd-c-amber); box-shadow: 0 0 0 4px var(--nd-t-amber); }
.site-row-state.is-down i { background: var(--nd-c-red); box-shadow: 0 0 0 4px var(--nd-t-red); animation: site-pulse 1.6s ease-in-out infinite; }
@keyframes site-pulse { 50% { box-shadow: 0 0 0 7px var(--nd-t-red); } }
@media (max-width: 760px) { .site-row { grid-template-columns: 40px 1fr auto; } .site-row-issues { grid-column: 1 / -1; } }
/* Réglages › Sections du menu : interrupteurs appliqués tout de suite */
#nav-section-picker.nav-section-picker { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nav-toggle { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--nd-line); cursor: pointer; background: var(--nd-surface, #fff); }
.nav-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle-switch { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: var(--nd-line, #dfe3ee); transition: background .2s; }
.nav-toggle-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(2, 11, 66, .25); transition: transform .2s; }
.nav-toggle input:checked + .nav-toggle-switch { background: var(--nd-mint, #13f5bb); }
.nav-toggle input:checked + .nav-toggle-switch::after { transform: translateX(16px); }
.nav-toggle input:focus-visible + .nav-toggle-switch { outline: 2px solid var(--nd-ink, #020b42); outline-offset: 2px; }
.nav-toggle-text { display: flex; flex-direction: column; min-width: 0; }
.nav-toggle-text strong { font-weight: 800; font-size: 14px; }
.nav-toggle-text small { color: var(--nd-muted); font-size: 12.5px; }
.nav-toggle.is-locked { cursor: not-allowed; opacity: .6; }
.nav-toggle-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12.5px; color: var(--nd-muted); }
@media (max-width: 640px) { #nav-section-picker.nav-section-picker { grid-template-columns: 1fr; } }
/* Récurrences */
.recurring-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 18px 22px 0; }
.recurring-summary:empty { display: none; }
.recurring-summary > div { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--nd-canvas); }
.recurring-summary span { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--nd-muted); }
.recurring-summary strong { font-family: var(--font-heading, "Nunito", sans-serif); font-size: 22px; font-weight: 800; }
.recurring-summary strong.is-neg { color: var(--nd-c-red); }
.recurring-summary small { font-size: 12px; color: var(--nd-muted); }
#recurring-list { display: flex; flex-direction: column; gap: 8px; }
.recurring-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 1px solid var(--nd-line); border-radius: 14px; background: var(--nd-surface, #fff); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.recurring-row:hover { border-color: var(--nd-ink, #020b42); }
.recurring-row.is-paused { opacity: .55; }
.recurring-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; background: var(--nd-t-green); color: var(--nd-c-green); }
.recurring-icon.is-cost { background: var(--nd-t-red); color: var(--nd-c-red); }
.recurring-main { display: flex; flex-direction: column; min-width: 0; }
.recurring-main strong { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recurring-main small { color: var(--nd-muted); font-size: 12.5px; }
.recurring-next { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; font-weight: 700; color: var(--nd-muted); white-space: nowrap; }
.recurring-next small { font-weight: 600; font-size: 12px; }
.recurring-amount { font-family: var(--font-heading, "Nunito", sans-serif); font-weight: 800; font-size: 16px; color: var(--nd-c-green); white-space: nowrap; }
.recurring-amount.is-cost { color: var(--nd-c-red); }
.recurring-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px; border-radius: 16px; background: var(--nd-canvas); }
.recurring-empty span { color: var(--nd-muted); }
.btn.is-danger-text { color: var(--nd-c-red); margin-right: auto; }
@media (max-width: 760px) { .recurring-summary { grid-template-columns: 1fr; } .recurring-row { grid-template-columns: 40px 1fr auto; } .recurring-next { grid-column: 2 / -1; align-items: flex-start; } }

/* 2.10.0 : portail en marque blanche (aucune trace de Nodema au chargement) */
.portal-login-mark:not(.has-logo) { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--nd-canvas, #f3f5fa); }
.portal-login-mark:not(.has-logo) svg { width: 26px; height: 26px; fill: none; stroke: var(--nd-ink, #020b42); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.portal-login-mark.has-logo img { max-height: 56px; max-width: 200px; object-fit: contain; display: block; }
.nd-preload.is-neutral { background: #fff; }
.nd-preload.is-neutral .nd-preload-brand { transition: none; }
.nd-preload.is-neutral .nd-preload-name { font-size: 18px; }
.nd-preload.is-neutral .nd-preload-bar i { background: var(--portal-accent, var(--nd-ink, #020b42)); }

/* 2.10.0 : application installable */
.app-install-link span { display: inline-block; width: 1em; text-align: center; font-weight: 900; }
.app-install-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 16px; border-radius: 18px; background: #fff; border: 1px solid var(--nd-line, #e1e5ef); box-shadow: 0 10px 28px rgba(2, 11, 66, .07); }
.app-install-banner img { width: 44px; height: 44px; border-radius: 12px; flex: none; object-fit: cover; }
.app-install-banner > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.app-install-banner strong { font-size: 14.5px; }
.app-install-banner span { font-size: 13px; color: var(--nd-muted, #62688a); line-height: 1.35; }
.app-install-banner .btn { flex: none; }
.app-install-close { flex: none; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--nd-muted, #62688a); cursor: pointer; padding: 4px; }
.app-install-modal { width: min(480px, calc(100% - 32px)); }
.app-install-app { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: var(--nd-canvas, #f3f5fa); margin-bottom: 14px; }
.app-install-app img { width: 56px; height: 56px; border-radius: 14px; flex: none; }
.app-install-app div { display: grid; gap: 2px; }
.app-install-app span { font-size: 13px; color: var(--nd-muted, #62688a); }
.app-install-steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; line-height: 1.5; }
.app-install-key { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 8px; background: var(--nd-canvas, #f3f5fa); font-weight: 800; white-space: nowrap; }
.app-install-key svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-install-note { margin: 12px 0 0; font-size: 13px; color: var(--nd-muted, #62688a); }
body[data-dashboard-theme="dark"] .app-install-banner { background: #0d1440; border-color: rgba(255, 255, 255, .08); }

/* 2.10.0 : nouveautés classées par type */
.nd-release-group { display: grid; gap: 6px; margin-top: 10px; }
.nd-release-group:first-of-type { margin-top: 2px; }
.nd-release-type { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .01em; background: var(--nd-canvas, #f3f5fa); color: var(--nd-ink, #020b42); }
.nd-release-type::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nd-release-group.is-new .nd-release-type { background: rgba(19, 245, 187, .18); color: #04745a; }
.nd-release-group.is-fix .nd-release-type { background: rgba(255, 176, 32, .16); color: #8a5a00; }
.nd-release-group.is-design .nd-release-type { background: rgba(124, 92, 255, .13); color: #4b33b8; }
.nd-release-internal { font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: var(--nd-canvas, #f3f5fa); color: var(--nd-muted, #62688a); margin-left: 4px; }
body[data-dashboard-theme="dark"] .nd-release-group.is-new .nd-release-type { color: #6ff7d0; }
body[data-dashboard-theme="dark"] .nd-release-group.is-fix .nd-release-type { color: #ffc960; }
body[data-dashboard-theme="dark"] .nd-release-group.is-design .nd-release-type { color: #b9a8ff; }

/* Administration : écran de chargement inversé (fond bleu nuit) avec l'étiquette « Admin » */
.nd-preload.is-tagged { background: #020b42; }
.nd-preload.is-tagged .nd-preload-word path { fill: #fafcff; }
.nd-preload.is-tagged .nd-preload-bar { background: rgba(250, 252, 255, .14); }
.nd-preload.is-tagged .nd-preload-bar i { background: var(--nd-mint, #13f5bb); }
.nd-preload-tag { margin-top: -10px; padding: 4px 12px; border-radius: 99px; background: var(--nd-mint, #13f5bb); color: #020b42; font-family: var(--font-heading, "Nunito", sans-serif); font-weight: 900; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; animation: nd-feed-in .6s var(--nd-ease) .5s both; }

/* Raccourcis de la barre du bas (téléphone) */
.tabbar-modal { width: min(460px, calc(100% - 24px)); }
.tabbar-intro { margin: 0 0 14px; color: var(--nd-muted, #62688a); line-height: 1.45; }
.tabbar-preview { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 8px; margin-bottom: 14px; border-radius: 18px; background: var(--nd-canvas, #f3f5fa); }
.tabbar-slot { display: grid; justify-items: center; gap: 4px; padding: 8px 2px 6px; border-radius: 12px; min-width: 0; }
.tabbar-slot svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar-slot i { width: 20px; height: 20px; border-radius: 7px; border: 1.5px dashed #b8bdd3; }
.tabbar-slot small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 800; color: var(--nd-muted, #62688a); }
.tabbar-slot.is-filled { background: #fff; color: #020b42; box-shadow: 0 4px 12px rgba(2, 11, 66, .06); }
.tabbar-slot.is-filled small { color: #020b42; }
.tabbar-slot.is-more { color: var(--nd-muted, #62688a); }
.tabbar-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: min(46vh, 420px); overflow: auto; padding: 2px; }
.tabbar-option { position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; min-width: 0; min-height: 78px; padding: 12px 3px 10px; border: 1px solid var(--nd-line, #e1e5ef); border-radius: 16px; background: #fff; color: #020b42; font-weight: 800; text-align: center; transition: background .15s, border-color .15s, transform .15s; }
.tabbar-option:active { transform: scale(.97); }
.tabbar-option-icon { display: grid; place-items: center; }
.tabbar-option-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar-option-label { max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 11.5px; line-height: 1.2; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; letter-spacing: -.01em; }
.tabbar-option-num { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 99px; font-size: 11.5px; font-weight: 900; }
.tabbar-option:not(.is-on) .tabbar-option-num { display: none; }
.tabbar-option.is-on { background: #eafff8; border-color: var(--nd-mint, #13f5bb); }
.tabbar-option.is-on .tabbar-option-num { background: #020b42; color: #fff; }
body[data-dashboard-theme="dark"] .tabbar-slot.is-filled, body[data-dashboard-theme="dark"] .tabbar-option { background: #0d1645; color: #f3f5fa; }
body[data-dashboard-theme="dark"] .tabbar-slot.is-filled small { color: #f3f5fa; }
body[data-dashboard-theme="dark"] .tabbar-preview { background: #070d33; }
body[data-dashboard-theme="dark"] .tabbar-option.is-on { background: rgba(19, 245, 187, .12); }
body.portal-app .tabbar-option.is-on { background: color-mix(in srgb, var(--portal-accent, #13f5bb) 12%, #fff); border-color: var(--portal-accent, #13f5bb); }

/* =========================================================================
 * Style « verre et 3D » (2.12.0)
 * Icônes : forme pleine (--ndg-solid) derrière, verre (--ndg-glass) devant.
 * ========================================================================= */
body { --ndg-solid: #13f5bb; --ndg-glass: #0b1660; --ndg-glass-light: #c3c8e6; --ndg-bleed: .85; }
body.portal-app { --ndg-solid: var(--portal-accent, #13f5bb); }
.ndg { display: block; width: 100%; height: 100%; overflow: visible; --ndg-g: var(--ndg-glass); }
.ndg-back .b, .ndg-bleed .b { fill: var(--ndg-solid); }
.ndg-back .bs, .ndg-bleed .bs { fill: none; stroke: var(--ndg-solid); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ndg-frost .f { fill: var(--ndg-g); }
.ndg-bleed { opacity: var(--ndg-bleed); }
.ndg-shine { opacity: .5; }
.ndg-detail .d { fill: #fff; }
.ndg-detail .ds { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.ndg-detail .dt { fill: #fff; font: 900 15px var(--font-heading, "Nunito"), sans-serif; }

/* Menu : verre clair au repos, verre foncé sur la section active */
body.backoffice .sidebar .nav-item .nav-icon, body.backoffice .mobile-more-panel .nav-item .nav-icon { width: 24px; height: 24px; flex: none; display: grid; place-items: center; }
body.backoffice .sidebar .nav-item .nav-icon svg.ndg, body.backoffice .mobile-more-panel .nav-item .nav-icon svg.ndg { width: 24px; height: 24px; }
body.backoffice .sidebar .nav-item .ndg, body.backoffice .mobile-more-panel .ndg { --ndg-g: var(--ndg-glass-light); }
body.backoffice .sidebar .nav-item .ndg .ndg-shine { opacity: .8; }
body.backoffice .sidebar .nav-item.active .ndg { --ndg-g: var(--ndg-glass); }
body.backoffice .sidebar .nav-item.active .ndg .ndg-shine { opacity: .5; }
body.backoffice:not([data-dashboard-theme="dark"]) .sidebar .nav-item.active { background: #fff !important; border-color: transparent !important; color: #020b42 !important; box-shadow: 0 1px 0 #fff inset, 0 10px 24px -10px rgba(2, 11, 66, .28), 0 2px 6px rgba(2, 11, 66, .06) !important; }
body[data-dashboard-theme="dark"] { --ndg-glass: #1d2a7a; --ndg-glass-light: #3a4691; }

/* Cloche, boutons rapides, chiffres clés */
#notifications-button .bell-glass { display: block; width: 22px; height: 22px; }
body.backoffice .quick-action .nav-icon { width: 28px !important; height: 28px !important; }
body.backoffice .metric .metric-icon.has-glass, body.backoffice .overview-metrics .metric:nth-child(n) .metric-icon.has-glass { width: 44px !important; height: 44px !important; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; filter: drop-shadow(0 8px 10px rgba(2, 11, 66, .22)); }
body.backoffice .metric { transition: transform .35s var(--nd-ease); }
body.backoffice .metric:hover { transform: perspective(900px) rotateX(4deg) translateY(-3px); }

/* Relief : cartes (thème clair) ; boutons simplement posés, avec une ombre douce */
body.backoffice:not([data-dashboard-theme="dark"]) :is(.card, .metric) { border-color: rgba(255, 255, 255, .9) !important; box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(2, 11, 66, .05), 0 24px 48px -28px rgba(2, 11, 66, .28), 0 4px 12px -6px rgba(2, 11, 66, .06) !important; }
body.backoffice:not([data-dashboard-theme="dark"]) .quick-action { border-radius: 16px; background: linear-gradient(180deg, #fff, #f7f8fc) !important; border-color: #fff !important; box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(2, 11, 66, .06), 0 10px 22px -12px rgba(2, 11, 66, .3) !important; transition: transform .25s var(--nd-ease), box-shadow .25s; }
body.backoffice:not([data-dashboard-theme="dark"]) .quick-action:hover { transform: translateY(-2px); }
body.backoffice:not(.portal-app) .btn-primary { box-shadow: 0 6px 14px -8px rgba(16, 200, 152, .55) !important; }
body.portal-app .btn-primary { box-shadow: 0 6px 14px -8px rgba(2, 11, 66, .35) !important; }

/* Bien démarrer : barre en tube, étapes faites en billes */
body.backoffice .onb-progress { height: 12px !important; border-radius: 99px !important; background: linear-gradient(180deg, #e3e6f0, #f4f5f9) !important; box-shadow: inset 0 2px 3px rgba(2, 11, 66, .12) !important; }
body.backoffice .onb-progress > i { border-radius: 99px !important; background: linear-gradient(180deg, #5bffd6, #13f5bb 50%, #0fcf9f) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 3px 8px -2px rgba(16, 200, 152, .6) !important; }
body.backoffice .onb-item.is-done .onb-check { background: radial-gradient(circle at 35% 30%, #c9fff0 0, #3cf7c8 32%, #10cf9e 70%, #0a9c78 100%) !important; box-shadow: 0 4px 8px -2px rgba(10, 156, 120, .55), inset 0 -2px 3px rgba(0, 0, 0, .12) !important; border: 0 !important; color: #020b42 !important; }
body[data-dashboard-theme="dark"] .onb-progress { background: rgba(255, 255, 255, .08) !important; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .3) !important; }

/* Aujourd'hui : notes punaisées */
.today-col { position: relative; transition: transform .4s var(--nd-ease); }
.today-col-icon { display: inline-block; width: 22px; height: 22px; vertical-align: -6px; margin-right: 8px; font-style: normal; }
.nd-pin { position: absolute; top: -12px; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; z-index: 3; box-shadow: 0 7px 9px -2px rgba(2, 11, 66, .35), inset -3px -4px 6px rgba(0, 0, 0, .22), inset 3px 3px 5px rgba(255, 255, 255, .55); }
.nd-pin::after { content: ""; position: absolute; left: 6px; top: 4px; width: 7px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .85); filter: blur(.6px); transform: rotate(-30deg); }
.today-col:nth-child(1) .nd-pin { background: radial-gradient(circle at 40% 35%, #ff9a6b, #ff5a1f 60%, #c73a0c); }
.today-col:nth-child(2) .nd-pin { background: radial-gradient(circle at 40% 35%, #8ea0ff, #3352ff 60%, #1a2dc0); }
.today-col:nth-child(3) .nd-pin { background: radial-gradient(circle at 40% 35%, #8bffe0, #13f5bb 60%, #079b76); }
body.backoffice:not([data-dashboard-theme="dark"]) .today-col { border-radius: 22px !important; border: 1px solid rgba(255, 255, 255, .9) !important; box-shadow: 0 1px 0 #fff inset, 0 22px 40px -22px rgba(2, 11, 66, .32), 0 3px 10px -4px rgba(2, 11, 66, .08) !important; }
body.backoffice:not([data-dashboard-theme="dark"]) .today-col:nth-child(1) { background: linear-gradient(160deg, #fff4ec, #ffe9dc) !important; transform: rotate(-1.2deg); }
body.backoffice:not([data-dashboard-theme="dark"]) .today-col:nth-child(2) { background: linear-gradient(160deg, #eef0ff, #e1e6ff) !important; transform: rotate(.7deg) translateY(4px); }
body.backoffice:not([data-dashboard-theme="dark"]) .today-col:nth-child(3) { background: linear-gradient(160deg, #e9fff8, #d6fbef) !important; transform: rotate(-.5deg); }
body.backoffice .today-col:hover { transform: rotate(0) translateY(-3px); }
body.backoffice .today-grid { padding-top: 10px; }

/* Vue d'ensemble : dossiers en relief qui flottent */
.nd-hero-art { display: none; }
@media (min-width: 1180px) {
  .hero:has(.nd-hero-art) { position: relative; }
  .nd-hero-art { display: block; position: absolute; right: 0; top: -18px; width: 300px; height: 170px; pointer-events: none; }
  .nd-hero-art svg { width: 100%; height: 100%; overflow: visible; }
  .hero:has(.nd-hero-art) .hero-date { visibility: hidden; }
}
.nd-float { animation: nd-float 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.nd-float.is-mid { animation-delay: -2s; } .nd-float.is-late { animation-delay: -4s; }
@keyframes nd-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

/* Téléphone : barre du bas en verre dépoli */
@media (max-width: 900px) {
  body.backoffice:not([data-dashboard-theme="dark"]) .sidebar { background: rgba(255, 255, 255, .78) !important; backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-top: 1px solid rgba(255, 255, 255, .9) !important; box-shadow: 0 -12px 30px -16px rgba(2, 11, 66, .25) !important; }
  body.backoffice .sidebar .nav-item .nav-icon, body.backoffice .sidebar .nav-item .nav-icon svg.ndg { width: 27px; height: 27px; }
  body.backoffice .today-col { transform: none !important; }
}
.tabbar-slot .ndg { width: 22px; height: 22px; } .tabbar-option-icon .ndg { width: 26px; height: 26px; }

@media (prefers-reduced-motion: reduce) {
  .nd-float { animation: none; }
  body.backoffice .metric:hover, body.backoffice .today-col:hover { transform: none; }
}
svg.ndg { fill: none !important; stroke: none !important; stroke-width: 0 !important; }
svg.ndg .ndg-back .bs, svg.ndg .ndg-bleed .bs { stroke: var(--ndg-solid) !important; stroke-width: 6 !important; }
svg.ndg .ndg-detail .ds { stroke: #fff !important; stroke-width: 2.6 !important; }

/* Mode sombre : textes restés foncés (tâches du jour, compteurs, projets épinglés, prénom surligné) */
body[data-dashboard-theme="dark"] .today-item > span, body[data-dashboard-theme="dark"] .today-item > span > b { color: #eef0fa !important; }
body[data-dashboard-theme="dark"] .today-item small { color: #a9afcf; }
body[data-dashboard-theme="dark"] .today-item.is-late small { color: #ff9b85 !important; }
body[data-dashboard-theme="dark"] .today-col-head b { color: #fafcff !important; background: rgba(255, 255, 255, .1) !important; }
body[data-dashboard-theme="dark"] .pin-chip, body[data-dashboard-theme="dark"] .pin-chip span { color: #eef0fa !important; }
body[data-dashboard-theme="dark"] mark.nd-hl { color: #fafcff !important; }
body[data-dashboard-theme="dark"] .task-check { background: transparent !important; border-color: rgba(255, 255, 255, .35) !important; }

/* Bandeau « nouvelle version disponible » */
.nd-fresh { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 300; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px); padding: 10px 10px 10px 18px; border-radius: 999px; background: #020b42; color: #fafcff; font-weight: 700; font-size: 14px; box-shadow: 0 18px 40px -12px rgba(2, 11, 66, .55); animation: nd-feed-in .5s var(--nd-ease) both; }
.nd-fresh .btn { flex: none; }
.nd-fresh-close { flex: none; border: 0; background: none; color: #a9afcf; font-size: 20px; line-height: 1; padding: 4px 6px; cursor: pointer; }
@media (max-width: 900px) { .nd-fresh { bottom: calc(86px + env(safe-area-inset-bottom)); border-radius: 18px; font-size: 13px; } }

/* =========================================================================
 * Téléphone : barre du bas en bulle flottante (façon iOS), en verre dépoli,
 * décollée des bords ; ses arrondis suivent ceux de l'écran.
 * ========================================================================= */
@media (max-width: 900px) {
  body.backoffice { --nd-dock-gap: 14px; --nd-dock-h: 64px; --nd-dock-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) - 8px)); }
  body.backoffice .sidebar {
    left: var(--nd-dock-gap) !important; right: var(--nd-dock-gap) !important; bottom: var(--nd-dock-bottom) !important; top: auto !important;
    width: auto !important; min-height: var(--nd-dock-h); padding: 6px !important;
    border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, .75) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(244, 246, 252, .84)) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
    box-shadow: 0 0 0 1px rgba(2, 11, 66, .07), 0 22px 44px -12px rgba(2, 11, 66, .42), 0 4px 12px rgba(2, 11, 66, .08), inset 0 1px 0 #fff !important;
  }
  body.backoffice .sidebar nav { align-items: center; }
  body.backoffice .sidebar::before { border-radius: inherit !important; border: 0 !important; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  body.backoffice .sidebar .nav-item { min-height: 52px !important; border-radius: 999px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; transition: background .25s, box-shadow .25s, transform .2s; }
  body.backoffice .sidebar .nav-item:active { transform: scale(.94); }
  body.backoffice .sidebar .nav-item.active { background: #fff !important; box-shadow: 0 0 0 1px rgba(2, 11, 66, .05), 0 6px 16px -6px rgba(2, 11, 66, .3), inset 0 1px 0 #fff !important; }
  body.backoffice .sidebar .nav-count { top: 4px; right: 10%; }
  body[data-dashboard-theme="dark"].backoffice .sidebar { background: rgba(14, 22, 72, .74) !important; border-color: rgba(255, 255, 255, .12) !important; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1) !important; }
  body[data-dashboard-theme="dark"].backoffice .sidebar .nav-item.active { background: rgba(255, 255, 255, .14) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12) !important; }

  /* Panneau « Plus » : même verre, posé au-dessus de la bulle */
  body.backoffice .mobile-more-panel { left: var(--nd-dock-gap) !important; right: var(--nd-dock-gap) !important; bottom: calc(var(--nd-dock-bottom) + var(--nd-dock-h) + 10px) !important; border-radius: 28px !important; border: 1px solid rgba(255, 255, 255, .75) !important; background: rgba(255, 255, 255, .78) !important; -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: 0 24px 50px -18px rgba(2, 11, 66, .4), inset 0 1px 0 #fff !important; }
  body[data-dashboard-theme="dark"].backoffice .mobile-more-panel { background: rgba(14, 22, 72, .8) !important; border-color: rgba(255, 255, 255, .12) !important; }
  body.backoffice .mobile-more-panel .nav-item { border-radius: 16px; }

  /* Le contenu, les notifications et les bandeaux ne passent jamais sous la bulle */
  body.backoffice .content { padding-bottom: calc(var(--nd-dock-bottom) + var(--nd-dock-h) + 28px) !important; }
  body.backoffice .toast { left: var(--nd-dock-gap); right: var(--nd-dock-gap) !important; bottom: calc(var(--nd-dock-bottom) + var(--nd-dock-h) + 12px) !important; justify-content: center; }
  .nd-fresh { bottom: calc(var(--nd-dock-bottom, 12px) + 64px + 12px) !important; }
}
/* Écran bord à bord (viewport-fit=cover) : la barre du haut reste sous l'encoche */
@supports (padding-top: env(safe-area-inset-top)) {
  body.backoffice .topbar { padding-top: env(safe-area-inset-top, 0px); min-height: calc(var(--topbar-height, 72px) + env(safe-area-inset-top, 0px)); }
  body.backoffice .login-shell { padding-top: max(var(--space-5, 20px), env(safe-area-inset-top, 0px)); }
}
/* En-têtes de carte : le bouton ne se rétrécit jamais (il passe à la ligne si besoin) */
body.backoffice .card-head > .btn, body.backoffice .card-head > button.btn { flex: none; white-space: nowrap; }
@media (max-width: 520px) { body.backoffice .card-head { flex-wrap: wrap; row-gap: 10px; } }

/* Chiffres : choix de la période et bénéfice */
.period-switch { display: inline-flex; gap: 2px; margin-top: 10px; padding: 3px; border-radius: 999px; background: var(--nd-canvas, #f3f5fa); box-shadow: inset 0 1px 2px rgba(2, 11, 66, .08); }
.period-switch button { border: 0; background: none; padding: 4px 10px; border-radius: 999px; font: inherit; font-size: 11.5px; font-weight: 800; color: var(--nd-muted, #62688a); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.period-switch button:hover { color: #020b42; }
.period-switch button.active { background: #fff; color: #020b42; box-shadow: 0 2px 6px -2px rgba(2, 11, 66, .25); }
body[data-dashboard-theme="dark"] .period-switch { background: rgba(255, 255, 255, .06); }
body[data-dashboard-theme="dark"] .period-switch button.active { background: rgba(255, 255, 255, .14); color: #fafcff; }
.metric-value.is-negative { color: #d9452b !important; }
body.backoffice .metric-result .ndg { --ndg-g: var(--ndg-glass-light); } body.backoffice .metric-result .ndg .ndg-detail .d { fill: #020b42; } body.backoffice .metric-result .ndg .ndg-detail .ds { stroke: #020b42 !important; }

/* Visionneuse côté client : devis et factures */
.ndv-side.is-finance { display: block; padding: 18px; overflow: auto; }
.ndv-fin { display: grid; gap: 14px; }
.ndv-fin-head { display: flex; align-items: center; gap: 12px; }
.ndv-fin-head > svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--nd-canvas, #f3f5fa); stroke: currentColor; fill: none; stroke-width: 1.8; }
.ndv-fin-head strong { display: block; font-size: 16px; }
.ndv-fin-head span { display: block; font-size: 13px; color: var(--nd-muted, #62688a); }
.ndv-fin-amount { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--nd-canvas, #f3f5fa); }
.ndv-fin-amount span { font-size: 13px; font-weight: 700; color: var(--nd-muted, #62688a); }
.ndv-fin-amount strong { font-family: var(--font-heading, "Nunito"), sans-serif; font-size: 22px; font-weight: 900; }
.ndv-fin-help { margin: 0; color: var(--nd-muted, #62688a); line-height: 1.5; }
.ndv-sign { display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: color-mix(in srgb, var(--nd-t-amber, #fff3d6) 70%, var(--nd-surface, #fff)); }
.ndv-sign p { margin: 0; line-height: 1.5; }
.ndv-sign small { color: var(--nd-muted, #62688a); }
.ndv-sign-btn { justify-content: center; min-height: 46px; cursor: pointer; font-weight: 800; }
.ndv-sign-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.ndv-sign-btn.is-busy { opacity: .6; pointer-events: none; }
.ndv-side.is-finance .ndv-done { border: 0; border-radius: 14px; }
.ndv-fin-dl { justify-self: start; display: inline-flex; align-items: center; gap: 8px; }
.ndv-fin-dl svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* =========================================================================
 * Icônes en verre : animation au survol. L'icône se soulève et pivote légèrement,
 * la forme pleine glisse derrière le verre (sa lueur suit), la cloche se balance.
 * ========================================================================= */
svg.ndg { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); transform-origin: 50% 60%; }
svg.ndg .ndg-back, svg.ndg .ndg-bleed { transition: transform .55s cubic-bezier(.34, 1.56, .64, 1); transform-box: view-box; transform-origin: 24px 24px; }
svg.ndg .ndg-shine { transition: opacity .4s ease; }
:is(.nav-item, .quick-action, .metric, .tabbar-option, .today-col-head, .mobile-more-panel .nav-item):hover svg.ndg { transform: translateY(-2px) rotate(-6deg) scale(1.08); }
:is(.nav-item, .quick-action, .metric, .tabbar-option, .today-col-head):hover svg.ndg :is(.ndg-back, .ndg-bleed) { transform: translate(3px, -3px) scale(1.06); }
:is(.nav-item, .quick-action, .metric, .tabbar-option, .today-col-head):hover svg.ndg .ndg-shine { opacity: .85; }
.metric:hover svg.ndg { transform: translateY(-3px) rotate(-8deg) scale(1.1); }
#notifications-button:hover .bell-glass svg.ndg { animation: ndg-ring .9s ease-in-out; }
@keyframes ndg-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
.nav-item:active svg.ndg, .quick-action:active svg.ndg { transform: scale(.92); transition-duration: .15s; }
@media (hover: none) { :is(.nav-item, .quick-action, .metric, .tabbar-option, .today-col-head):hover svg.ndg, :is(.nav-item, .quick-action, .metric, .tabbar-option, .today-col-head):hover svg.ndg :is(.ndg-back, .ndg-bleed) { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  svg.ndg, svg.ndg .ndg-back, svg.ndg .ndg-bleed { transition: none !important; animation: none !important; }
  :is(.nav-item, .quick-action, .metric, .tabbar-option, .today-col-head):hover svg.ndg, :is(.nav-item, .quick-action, .metric, .tabbar-option, .today-col-head):hover svg.ndg :is(.ndg-back, .ndg-bleed) { transform: none !important; }
}