/* =====================================================================
   Design « Doudapp » — le système de design Doudapp Dense.
   Structure du design Dense (densité, Poppins, coins discrets, en-tête foncé)
   avec les couleurs Ledger : les règles de couleur de light.css et dark.css
   s'appliquent telles quelles, ce fichier ne fixe que les jetons.
   Source des valeurs : système de design « Doudapp Dense » (tokens.json).
   Tout est sous html[data-design='doudapp'].
   ===================================================================== */

/* Jetons communs aux deux thèmes. */
html[data-design='doudapp'] {
  --radius: 8px;
  --radius-s: 6px;
  --radius-dialog: 10px;
  --radius-pill: 999px;
  --font: Poppins, Arial, sans-serif;
  --shadow-menu: 0 8px 28px #0000002e;
  --shadow-dialog: 0 20px 60px #00000040;
  --shadow-focus: 0 0 0 2px #c8935f55;
  --on-accent: #fff;
  --scrim: #2e2014; /* voile derrière les feuilles et les fenêtres (50 % d'opacité à l'usage) */
  --field-border: color-mix(in srgb, var(--border) 75%, var(--muted));
  --field-border-hover: var(--muted);
  --field-hover: color-mix(in srgb, var(--field-surface, var(--field)) 65%, var(--hover-control));
  --selection-background: var(--pressed);
  --selection-border: var(--blue);
  --selection-text: var(--text);
  --field-focus: var(--blue);
  --field-disabled: var(--page);
  --field-bg: var(--field);
  --dialog-bg: var(--paper);
  --profile-avatar-size: 6rem;
  --progress-chroma: 1.35; /* barres de progression : même teinte que --accent, couleur plus soutenue */
  --app-rail-width: 3.75rem;
  --app-navigation-width: 13.75rem;
  --shell-toolbar-height: 3.25rem;
  --rail-control-size: 2.75rem;
  --envelope-column-width: 18.75rem;
  --account-grid-gap: 8px;
  --month-picker-width: 248px;
  --calendar-gap: 4px;
  --calendar-padding: 8px;
  --accent-deep: #3d2c1e;
  --nav-text: #ece6dc;
  --nav-muted: #a39178;
  --nav-active: #5a4330;
  --nav-hover: #4a3827;
  --nav-pressed: #664b36;
  --nav-line: #4d3a29;
  --topbar: var(--sidebar);
  --topbar-text: #f6f0e4;
  --topbar-muted: #cdb99c;
}

/* Thème clair : couleurs Ledger (light.css et :root de style.css). */
html[data-design='doudapp']:not([data-theme='dark']) {
  color-scheme: light;
  --app-background: #e6dccd;
  --page: #ece4d6;
  --paper: #faf6ee;
  --field: color-mix(in srgb, #fff 72%, var(--app-background));
  --month-past-color: #315c88;
  --month-past-background: #dbe8f4;
  --month-future-color: #925214;
  --month-future-background: #f6e2c7;
  --border: #ccbca2;
  --text: #35271b;
  --text-secondary: #54432f;
  --muted: #614f3d;
  --red: #b03c3c;
  --green: #3a7625;
  --olive: #9a4f12;
  --blue: #9a5b32;
  --sidebar: #3d2c1e;
  --app-rail-background: #2c1f15;
  --danger-bg: #f8e5e5;
  --danger-solid: #b03c3c;
  --danger-solid-hover: #9a3232;
  --hover-surface: #f5eee1;
  --hover-control: #f1e8d8;
  --pressed: #e8dcc5;
  --hover-button: #e2d2b4;
  --pressed-button: #d8c39d;
  --accent: #7a4524;
  --accent-line: #7a4524;
  --accent-hover: #94572f;
  --accent-pressed: #5c3318;
  --topbar-line: #5a4028;
}

/* Thème sombre : couleurs Ledger (dark.css). */
html[data-design='doudapp'][data-theme='dark'] {
  color-scheme: dark;
  --scrim: #0a0805;
  --app-background: #16120e;
  --page: #231c15;
  --paper: #2f271e;
  --field: #3c3226;
  --month-past-color: #a8c8ed;
  --month-past-background: #293e56;
  --month-future-color: #efb566;
  --month-future-background: #4d3523;
  --border: #564838;
  --text: #e2d6bf;
  --text-secondary: #c8b498;
  --muted: #af997b;
  --red: #e69090;
  --green: #94c874;
  --olive: #e3a672;
  --blue: #d3a068;
  --sidebar: #33271c;
  --app-rail-background: #251c14;
  --danger-bg: #3d2b2c;
  --danger-solid: #b3363f;
  --danger-solid-hover: #c24049;
  --hover-surface: #362c22;
  --hover-control: #463b2d;
  --pressed: #483b2c;
  --hover-button: #584733;
  --pressed-button: #695540;
  --accent: #8f5428;
  --accent-line: #a5642f;
  --accent-hover: #a5642f;
  --accent-pressed: #7a4521;
  --topbar: var(--sidebar);
  --topbar-line: #4a3a2a;
}

/* ---- Structure (reprise du design Dense) ---- */
/* Couleurs de sens lisibles (contraste ≥ 4,5:1) sur fond clair comme sur fond pointé. */
html[data-design='doudapp']:not([data-theme='dark']) :is(.type-expense, .type-transfer-debit) { color: var(--red); }
html[data-design='doudapp']:not([data-theme='dark']) :is(.type-income, .type-transfer-credit, .type-transfer:not(.type-transfer-debit)) { color: var(--green); }
html[data-design='doudapp']:not([data-theme='dark']) :is(.type-deferred, .amount-cell.checked-deferred) { color: var(--olive); }

/* En-tête foncé : les boutons sont intégrés à la barre (pleine hauteur, sans marge), séparés par un filet. */
html[data-design='doudapp'] .topbar {
  background: var(--topbar);
  border-bottom: 1px solid var(--topbar-line);
  color: var(--topbar-text);
  padding: 0;
  gap: 0;
}
html[data-design='doudapp'] :is(.topbar-left, .topbar-right) {
  gap: 0;
  align-self: stretch;
}
html[data-design='doudapp'] .topbar-pop {
  display: flex;
  align-self: stretch;
}
html[data-design='doudapp'] .topbar-button {
  height: auto;
  align-self: stretch;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid var(--topbar-line);
  border-radius: 0;
  background: transparent;
  color: var(--topbar-text);
}
html[data-design='doudapp'] .topbar-pop-right .topbar-button {
  border-right: 0;
  border-left: 1px solid var(--topbar-line);
}
@media (hover: hover) {
html[data-design='doudapp'] .topbar-button:hover {
  background: #ffffff14;
}
}
html[data-design='doudapp'] :is(.topbar-button:active, .topbar-button[aria-expanded='true']) {
  background: #ffffff24;
}
html[data-design='doudapp'] .topbar .app-clock {
  padding: 0 14px;
  color: var(--topbar-muted);
}
html[data-design='doudapp'] .topbar .app-clock .clock-time {
  color: var(--topbar-text);
}
html[data-design='doudapp'] .topbar .topbar-menu {
  top: 100%;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Typographie : Poppins, chiffres tabulaires. */
html[data-design='doudapp'] :not(.icon) {
  font-family: var(--font) !important;
}
html[data-design='doudapp'] :is(.kpi-number, .amount-cell, .forecast-amount, .stat b, .ls-row b, .envelope-rest strong,
  .budget-cell b, .account-table-amount, .clock-time, .envelope-top strong) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum', 'cv11';
  letter-spacing: -0.01em;
}
html[data-design='doudapp'] body {
  font-size: 14px;
}
html[data-design='doudapp'] :is(td, th) {
  font-size: 12px !important;
}
html[data-design='doudapp'] th {
  font-weight: 500;
  letter-spacing: 0.01em;
}
html[data-design='doudapp'] :is(.nav-item, .nav-heading, .breadcrumb) {
  font-size: 14px;
}
html[data-design='doudapp'] :is(button, input, select) {
  font-size: 14px;
}
html[data-design='doudapp'] .kpi-title {
  font-size: 12px;
  color: var(--muted);
}
html[data-design='doudapp'] .available-kpi .kpi-number {
  font-size: 21px;
  font-weight: 600;
}
html[data-design='doudapp'] .kpi-pair .kpi-number {
  font-size: 15px;
}

/* Densité : espaces réduits. */
html[data-design='doudapp'] .workspace {
  padding: 8px;
  gap: 8px;
}
html[data-design='doudapp'] :is(.work-grid, .left-column, .kpi-strip) {
  gap: 8px;
}
html[data-design='doudapp'] .kpi-strip {
  min-height: 64px;
}
html[data-design='doudapp'] .kpi-strip .kpi-card {
  padding: 7px 11px;
  border: 1px solid var(--border) !important;
}
html[data-design='doudapp'] td {
  height: var(--row-height, 32px) !important;
}
html[data-design='doudapp'] th {
  height: var(--head-height, 30px) !important;
}
/* Le fond de la colonne triée remplit toute la hauteur de l'en-tête. */
html[data-design='doudapp'] th .column-sort {
  height: var(--head-height, 30px);
}
html[data-design='doudapp'] :is(.operations-toolbar, .panel-heading) {
  height: var(--bar-height, 36px);
  min-height: var(--bar-height, 36px);
}
html[data-design='doudapp'] .month-controls {
  height: 30px !important;
}
html[data-design='doudapp'] .sidebar .nav-item {
  height: 34px;
}
html[data-design='doudapp'] .sidebar .nav-heading {
  height: 26px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nav-muted);
}
html[data-design='doudapp'] :is(.row-action, .icon-action, td button, .forecast-table button) {
  min-height: 28px !important;
}
html[data-design='doudapp'] .forecast-actions > button,
html[data-design='doudapp'] .dialog-actions button,
html[data-design='doudapp'] .config-row > button,
html[data-design='doudapp'] .allocation-editor button {
  padding: 5px 10px;
}
html[data-design='doudapp'] .new-operation {
  height: auto;
  padding: 0 10px;
}
html[data-design='doudapp'] .icon {
  font-size: 18px;
}

/* Surfaces : coins légèrement arrondis, bordure fine, pas d'ombre sauf menus. */
html[data-design='doudapp'] :is(.kpi-card, .envelopes-panel, .operations-panel, .savings-chart, .config-panel, .linked-savings, .auth-card,
  .app-card, .tasks-panel, .forecast-account, .account-group, .forecast-group) {
  border-radius: var(--radius);
}
html[data-design='doudapp'] :is(.envelopes-panel, .operations-panel, .savings-chart, .tasks-panel, .auth-card) {
  overflow: hidden;
}
html[data-design='doudapp'] .month-controls {
  border-radius: var(--radius-s);
  overflow: hidden;
}
html[data-design='doudapp'] #account-heading.account-heading {
  background: transparent !important;
}
html[data-design='doudapp'] :is(.forecast-actions > button, .dialog-actions button, .config-row > button, .allocation-editor button,
  .admin-inline-form > button, .danger-button, .save-button, .forecast-apply, .topbar-button, .m-today,
  .app-card-actions button, .shell-continue, .ds-design, #editor-delete-popover button) {
  border-radius: var(--radius-s);
}
html[data-design='doudapp'] :is(input:not([type='checkbox']):not([type='radio']), select, textarea, .search, .choice-trigger,
  .category-search, .icon-picker summary) {
  border-radius: var(--radius-s);
}
html[data-design='doudapp'] :is(.role-badge, .account-chip, .forecast-added, .forecast-tab-count, .no-date) {
  border-radius: var(--radius-pill);
}
html[data-design='doudapp'] :is(.type-badge, .info-btn) {
  border-radius: var(--radius-s);
}
html[data-design='doudapp'] .forecast-tab {
  border-radius: var(--radius-s) var(--radius-s) 0 0;
}
html[data-design='doudapp'] :is(.progress, .progress span) {
  border-radius: 3px;
}
html[data-design='doudapp'] .envelope-card {
  border-radius: var(--radius-s);
}
html[data-design='doudapp'] .new-operation {
  border-radius: 0;
}
html[data-design='doudapp'] .sidebar {
  background: var(--sidebar);
  padding-top: 6px;
}
html[data-design='doudapp'] .sidebar .nav-item {
  width: calc(100% - 12px);
  margin: 1px 6px;
  border-radius: var(--radius-s);
}
html[data-design='doudapp'] .sidebar .nav-item.active {
  background: var(--app-background);
  width: 100%
}
html[data-design='doudapp'] .sidebar .nav-item.active,
html[data-design='doudapp'] .sidebar .nav-item.active .icon {
  color: var(--nav-active);
  font-weight: 600;
}
/* Mode sombre : l'élément actif prend le fond de la page (très sombre), le texte doit rester clair. */
html[data-design='doudapp'][data-theme='dark'] .sidebar .nav-item.active {
  color: var(--text);
}
html[data-design='doudapp'][data-theme='dark'] .sidebar .nav-item.active .icon {
  color: var(--accent-line, var(--text));
}
html[data-design='doudapp'] #dropdown-menu button,
html[data-design='doudapp'] .topbar-menu .menu-item {
  border-radius: var(--radius-s);
}
html[data-design='doudapp'] :is(dialog, #editor-dialog, #release-dialog, #import-dialog) {
  border-radius: var(--radius-dialog);
  box-shadow: var(--shadow-dialog);
}
html[data-design='doudapp'] dialog::backdrop {
  backdrop-filter: blur(2px);
}
html[data-design='doudapp'] #tooltip {
  border-radius: var(--radius-s);
  font-size: 12px;
  background: var(--text);
  color: var(--paper);
}
html[data-design='doudapp'] .m-panel {
  border-radius: 14px 14px 0 0;
}
html[data-design='doudapp'] :is(.m-months button, .m-today) {
  border-radius: var(--radius-s);
}

/* Boutons groupés : le survol suit l'arrondi du groupe, et les listes arrondissent leurs lignes. */
html[data-design='doudapp'] .month-controls button:first-child {
  border-radius: calc(var(--radius-s) - 1px) 0 0 calc(var(--radius-s) - 1px);
}
html[data-design='doudapp'] .month-controls button:last-of-type {
  border-radius: 0 calc(var(--radius-s) - 1px) calc(var(--radius-s) - 1px) 0;
}
html[data-design='doudapp'] :is(.choice-options button, .icon-picker-options button, .action-list button, .month-fallback-menu button,
  .sort-menu button, .sort-menu select) {
  border-radius: var(--radius-s);
}

/* Lignes de virement et de paiement en plusieurs fois : deux lignes de texte (compte associé, « Paiement 1/3 »), donc un peu plus d'air. */
html[data-design='doudapp'] #operation-rows tr:is(:has(.type-badge.type-transfer), :has(.op-plan)):not(.group-row) > td {
  padding-top: 7px;
  padding-bottom: 7px;
}

/* Les groupes arrondis rognent leur contenu : bandeaux et boutons d'en-tête suivent l'arrondi. */
html[data-design='doudapp'] :is(.account-group, .forecast-group, .forecast-account, .linked-savings, .forecast-overview) {
  overflow: hidden;
}

/* Page Prévisionnel : le conteneur général prend le fond de la page, seuls les tableaux sont blancs. */
html[data-design='doudapp'] :is(.forecast-account, .forecast-panels) {
  background: var(--page) !important;
}


/* Pages Opérations et Livrets : lignes ordinaires un peu plus aérées (le tableau de bord reste compact). */
html[data-design='doudapp'] .work-grid.single-panel #operation-rows tr:not(.group-row):not(.empty-row) > td {
  padding-top: 7px;
  padding-bottom: 7px;
}

/* Refonte : menu latéral un peu plus large, aligné sur le bloc logo + application de l'en-tête (210 px). */
@media (min-width: 1051px) {
  html[data-design='doudapp'] .app {
    grid-template-columns: 210px minmax(0, 1fr);
  }
}

/* Boutons : graisse 600 pour une meilleure lisibilité (boutons d'action, pas les listes ni les icônes). */
html[data-design='doudapp'] :is(button.save-button, .danger-button, .new-operation, .panel-add, .forecast-actions > button,
  .forecast-apply, .dialog-actions button, .account-group-heading > button, .operations-toolbar > button,
  .month-controls [data-month='current'], .ctx-today, .m-btn, .m-today, #add-allocation, .m-alloc-toggle, .m-see-all,
  .app-card-actions button, .shell-continue, .auth-card button, .admin-inline-form > button, #editor-delete-popover button,
  .topbar-switch, #import-confirm, #import-cancel, .kpi-validate, .m-summary b) {
  font-weight: 600 !important;
}

/* Catégories d'articles : une teinte (angle de couleur) par catégorie, composée en pastille par .cat-icon dans ui.css. */
html[data-design='doudapp'] {
  --tone-1: 8;
  --tone-2: 28;
  --tone-3: 48;
  --tone-4: 88;
  --tone-5: 120;
  --tone-6: 150;
  --tone-7: 170;
  --tone-8: 190;
  --tone-9: 205;
  --tone-10: 225;
  --tone-11: 245;
  --tone-12: 265;
  --tone-13: 285;
  --tone-14: 305;
  --tone-15: 325;
  --tone-16: 345;
  --tone-17: 15;
  --tone-18: 355;
  --tone-19: 65;
  --tone-20: 135;
}

/* =====================================================================
   Palette « Sauge et crème » : même style, seuls les jetons de couleur changent.
   Activée par html[data-palette='sauge'] (choix dans le menu du profil).
   ===================================================================== */
html[data-design='doudapp'][data-palette='sauge'] {
  --shadow-focus: 0 0 0 2px #7fb08f55;
  --scrim: #1a2b22;
  --accent-deep: #23382d;
  --nav-text: #e6ede7;
  --nav-muted: #93a898;
  --nav-active: #3a5646;
  --nav-hover: #2f4a3b;
  --nav-pressed: #45654f;
  --nav-line: #355043;
  --topbar-text: #f0f5f1;
  --topbar-muted: #aec4b5;
}
html[data-design='doudapp'][data-palette='sauge']:not([data-theme='dark']) {
  --app-background: #e3e8e0;
  --page: #eaeee6;
  --paper: #f9fbf7;
  --field: color-mix(in srgb, #fff 72%, var(--app-background));
  --border: #b8c5af;
  --text: #1f2b22;
  --text-secondary: #3a4a3f;
  --muted: #4e5b51;
  --blue: #3f6b4f;
  --sidebar: #23382d;
  --app-rail-background: #1a2b22;
  --hover-surface: #eff4ec;
  --hover-control: #e9f0e5;
  --pressed: #dde8d8;
  --hover-button: #d3e2cd;
  --pressed-button: #c4d8bd;
  --accent: #3d6b4f;
  --accent-line: #3d6b4f;
  --accent-hover: #4d8062;
  --accent-pressed: #2f5440;
  --topbar-line: #2f4a3b;
}
html[data-design='doudapp'][data-palette='sauge'][data-theme='dark'] {
  --scrim: #040a06;
  --app-background: #0f1511;
  --page: #17201a;
  --paper: #202b24;
  --field: #29362e;
  --border: #3c4f43;
  --text: #cbdbcd;
  --text-secondary: #a7bcad;
  --muted: #8ba292;
  --blue: #86b896;
  --sidebar: #22342a;
  --app-rail-background: #18241d;
  --hover-surface: #243029;
  --hover-control: #304036;
  --pressed: #34473b;
  --hover-button: #3f5648;
  --pressed-button: #4d6857;
  --accent: #3f7a57;
  --accent-line: #4b8b66;
  --accent-hover: #4b8b66;
  --accent-pressed: #336548;
  --topbar-line: #2f4539;
}

/* =====================================================================
   Palette « Violet et lilas » : même style, seuls les jetons de couleur changent.
   ===================================================================== */
html[data-design='doudapp'][data-palette='violet'] {
  --shadow-focus: 0 0 0 2px #a98bd855;
  --scrim: #1c1230;
  --accent-deep: #33244a;
  --nav-text: #ebe6f2;
  --nav-muted: #a597bb;
  --nav-active: #4d3a70;
  --nav-hover: #40305e;
  --nav-pressed: #5a4580;
  --nav-line: #44345f;
  --topbar-text: #f4f0f9;
  --topbar-muted: #bcaed2;
}
html[data-design='doudapp'][data-palette='violet']:not([data-theme='dark']) {
  --app-background: #e6e1ea;
  --page: #ece8f0;
  --paper: #faf8fc;
  --field: color-mix(in srgb, #fff 72%, var(--app-background));
  --border: #c7bbd3;
  --text: #261c33;
  --text-secondary: #453a56;
  --muted: #5d516d;
  --blue: #6b4a9a;
  --sidebar: #33244a;
  --app-rail-background: #261a38;
  --hover-surface: #f3eff7;
  --hover-control: #eee8f4;
  --pressed: #e2d9ec;
  --hover-button: #d8cce7;
  --pressed-button: #cbbadf;
  --accent: #5b3d8a;
  --accent-line: #5b3d8a;
  --accent-hover: #70499f;
  --accent-pressed: #47306e;
  --topbar-line: #46346a;
}
html[data-design='doudapp'][data-palette='violet'][data-theme='dark'] {
  --scrim: #05030a;
  --app-background: #110e17;
  --page: #1f1827;
  --paper: #2a2337;
  --field: #362d4a;
  --border: #50416b;
  --text: #dad0e8;
  --text-secondary: #bdafd1;
  --muted: #a394bb;
  --blue: #ab90d2;
  --sidebar: #2b2140;
  --app-rail-background: #1d1630;
  --hover-surface: #302840;
  --hover-control: #403557;
  --pressed: #3b3050;
  --hover-button: #4a3d63;
  --pressed-button: #594a77;
  --accent: #6d49a3;
  --accent-line: #7e58b8;
  --accent-hover: #7e58b8;
  --accent-pressed: #593a8a;
  --topbar-line: #3a2d55;
}

/* Icônes d'application (SVG monochromes, shell/app-icons.js) : la tuile et le motif prennent la couleur d'accent de la palette. */
html[data-design='doudapp'] {
  --app-icon: var(--accent);
}
.icon.app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  font-family: inherit;
  font-feature-settings: normal;
  font-variation-settings: normal;
}
.icon.app-icon > svg {
  display: block;
  width: 1.3em;
  height: 1.3em;
}
/* Teintes du motif des icônes d'application : crème de la palette (clair, moyen, ombre) et encre. */
html[data-design='doudapp'] {
  --app-icon-light: #f7f1e4;
  --app-icon-mid: #e3d7c0;
  --app-icon-dark: #c9b898;
  --app-icon-ink: #2e2014;
}
html[data-design='doudapp'][data-palette='sauge'] {
  --app-icon-light: #eef4ec;
  --app-icon-mid: #d3e0d0;
  --app-icon-dark: #b0c6ac;
  --app-icon-ink: #14241a;
}
html[data-design='doudapp'][data-palette='violet'] {
  --app-icon-light: #f4f0f9;
  --app-icon-mid: #ddd3ea;
  --app-icon-dark: #bfb0d5;
  --app-icon-ink: #1f1530;
}

/* =====================================================================
   Palette « Graphite et blanc cassé » : neutres classiques, ni blanc pur ni noir pur.
   ===================================================================== */
html[data-design='doudapp'][data-palette='graphite'] {
  --shadow-focus: 0 0 0 2px #8b93a655;
  --scrim: #0e0f12;
  --accent-deep: #23252b;
  --nav-text: #e8e9ec;
  --nav-muted: #9a9ca6;
  --nav-active: #3a3d46;
  --nav-hover: #2f3238;
  --nav-pressed: #444854;
  --nav-line: #34373f;
  --topbar-text: #f2f2f4;
  --topbar-muted: #b4b6bf;
  --app-icon-light: #f5f5f6;
  --app-icon-mid: #dcdce0;
  --app-icon-dark: #bfc0c8;
  --app-icon-ink: #1a1b1f;
}
html[data-design='doudapp'][data-palette='graphite']:not([data-theme='dark']) {
  --app-background: #e8e8ea;
  --page: #eeeeef;
  --paper: #fafafa;
  --field: #fdfdfd;
  --border: var(--nav-line); /* essai : même couleur que les filets du menu et de l’en-tête */
  --text: #1d1d20;
  --text-secondary: #3f3f45;
  --muted: #585860;
  --blue: #3d4656;
  --sidebar: #23252b;
  --app-rail-background: #191b20;
  --hover-surface: #f3f3f4;
  --hover-control: #eeeef0;
  --pressed: #e3e3e7;
  --hover-button: #d9d9de;
  --pressed-button: #cbcbd2;
  --accent: #2f3440;
  --accent-line: #2f3440;
  --accent-hover: #454b59;
  --accent-pressed: #1f232b;
  --topbar-line: #34373f;
  --progress-fill: #3f6ea8; /* graphite : l'accent est un gris sans teinte, la barre prend un bleu ardoise pour ressortir */
}
/* Essai (28/10/2026), toutes palettes : en clair, menu de gauche et en-tête plus clairs (dans la teinte de la palette) ; le rail des applications reste foncé (il reprend les valeurs de navigation foncées de la palette). */
html[data-design='doudapp']:not([data-palette]):not([data-theme='dark']) {
  --sidebar: #f4eee3;
  --topbar: #f4eee3;
  --nav-text: #4a3a2b;
  --nav-muted: #7a6650;
  --nav-active: #7a4524;
  --nav-hover: #e9dfcd;
  --nav-pressed: #ddd0b8;
  --nav-line: #d9cdb6;
  --topbar-text: #35271b;
  --topbar-muted: #614f3d;
  --topbar-line: #d9cdb6;
}
html[data-design='doudapp']:not([data-palette]):not([data-theme='dark']) .app-rail {
  --nav-text: #ece6dc;
  --nav-muted: #a39178;
  --nav-active: #5a4330;
  --nav-hover: #4a3827;
  --nav-pressed: #664b36;
  --nav-line: #4d3a29;
}
html[data-design='doudapp'][data-palette='sauge']:not([data-theme='dark']) {
  --sidebar: #eef2ea;
  --topbar: #eef2ea;
  --nav-text: #2f4034;
  --nav-muted: #5f6e63;
  --nav-active: #3d6b4f;
  --nav-hover: #e1e9dc;
  --nav-pressed: #d3dfcc;
  --nav-line: #cfdac8;
  --topbar-text: #1f2b22;
  --topbar-muted: #4e5b51;
  --topbar-line: #cfdac8;
}
html[data-design='doudapp'][data-palette='sauge']:not([data-theme='dark']) .app-rail {
  --nav-text: #e6ede7;
  --nav-muted: #93a898;
  --nav-active: #3a5646;
  --nav-hover: #2f4a3b;
  --nav-pressed: #45654f;
  --nav-line: #355043;
}
html[data-design='doudapp'][data-palette='violet']:not([data-theme='dark']) {
  --sidebar: #f1edf6;
  --topbar: #f1edf6;
  --nav-text: #3a2f4d;
  --nav-muted: #6b5e80;
  --nav-active: #6d49a3;
  --nav-hover: #e6dfee;
  --nav-pressed: #d9cfe6;
  --nav-line: #d8cfe3;
  --topbar-text: #271c38;
  --topbar-muted: #5a4d70;
  --topbar-line: #d8cfe3;
}
html[data-design='doudapp'][data-palette='violet']:not([data-theme='dark']) .app-rail {
  --nav-text: #ebe6f2;
  --nav-muted: #a597bb;
  --nav-active: #4d3a70;
  --nav-hover: #40305e;
  --nav-pressed: #5a4580;
  --nav-line: #44345f;
}
html[data-design='doudapp'][data-palette='graphite']:not([data-theme='dark']) {
  --sidebar: #f1f2f4;
  --topbar: #f1f2f4;
  --nav-text: #2f3238;
  --nav-muted: #6b6e78;
  --nav-active: #2f3440;
  --nav-hover: #e4e5e9;
  --nav-pressed: #d8dade;
  --nav-line: #d4d6db;
  --topbar-text: #1d1d20;
  --topbar-muted: #585860;
  --topbar-line: #d4d6db;
}
html[data-design='doudapp'][data-palette='graphite']:not([data-theme='dark']) .app-rail {
  --nav-text: #e8e9ec;
  --nav-muted: #9a9ca6;
  --nav-active: #3a3d46;
  --nav-hover: #2f3238;
  --nav-pressed: #444854;
  --nav-line: #34373f;
}
html[data-design='doudapp']:not([data-theme='dark']) .topbar {
  --app-icon-tile: var(--app-icon);
}
/* Élément sélectionné du menu (clair et sombre) : même bordure que les blocs, sans côté droit (il rejoint la page), tracée vers l'intérieur pour ne rien décaler. Le sélecteur est volontairement plus précis que la règle « box-shadow: none » de la navigation de la coque. */
html[data-design='doudapp']:not(.shell-navigation-none) body .sidebar .nav-item.active {
  box-shadow: inset 1px 0 0 var(--border), inset 0 1px 0 var(--border), inset 0 -1px 0 var(--border) !important;
}
@media (hover: hover) and (pointer: fine) {
/* Éléments de menu non actifs : un peu atténués (clair et sombre) ; le survol les remet en pleine couleur. */
html[data-design='doudapp'] .sidebar .nav-item:not(.active):not(:hover),
html[data-design='doudapp'] .sidebar .nav-item:not(.active):not(:hover) .icon {
  color: color-mix(in srgb, var(--nav-text) 65%, var(--sidebar));
}
}
@media (hover: none) {
/* Éléments de menu non actifs : un peu atténués (clair et sombre) ; le survol les remet en pleine couleur. */
html[data-design='doudapp'] .sidebar .nav-item:not(.active),
html[data-design='doudapp'] .sidebar .nav-item:not(.active) .icon {
  color: color-mix(in srgb, var(--nav-text) 65%, var(--sidebar));
}
}
html[data-design='doudapp'][data-palette='graphite'][data-theme='dark'] {
  --scrim: #000;
  --app-background: #0f0f10;
  --page: #1a1a1e;
  --paper: #26262b;
  --field: #323239;
  --border: #484852;
  --text: #d5d5d9;
  --text-secondary: #b3b3bc;
  --muted: #9b9ba4;
  --blue: #a0aabd;
  --sidebar: #1b1c20;
  --app-rail-background: #131316;
  --hover-surface: #2c2c32;
  --hover-control: #3b3b43;
  --pressed: #35353c;
  --hover-button: #44444c;
  --pressed-button: #53535c;
  --accent: #4b5365;
  --accent-line: #5b647a;
  --accent-hover: #5b647a;
  --accent-pressed: #3a4150;
  --topbar-line: #2c2d33;
  --progress-fill: #7f9fca;
}

/* Tuile de l'icône d'application : pleine sur fond clair, absente sur fond sombre (rail, en-tête, mode sombre) où l'octogone se suffit. */
html[data-design='doudapp'] {
  --app-icon-tile: var(--app-icon);
}
html[data-design='doudapp'][data-theme='dark'],
html[data-design='doudapp'] :is(.app-rail, .topbar) {
  --app-icon-tile: transparent;
}
html[data-design='doudapp']:not([data-theme='dark']) .topbar :is(.topbar-menu, .sheet-body, .sheet-head) {
  --app-icon-tile: var(--app-icon);
}

/* Surfaces claires : pictogrammes foncés sans tuile, avec les facettes de la palette.
   Le rail conserve ses pictogrammes clairs sur son fond sombre. */
html[data-design='doudapp']:not([data-theme='dark']) .icon.app-icon:not(:where(.app-rail *)) {
  --app-icon-tile: transparent;
  --app-icon: var(--app-background);
  --app-icon-light: var(--accent-deep);
  --app-icon-mid: color-mix(in srgb, var(--accent-deep) 78%, var(--paper));
  --app-icon-dark: color-mix(in srgb, var(--accent-deep) 58%, var(--paper));
  --app-icon-ink: var(--accent-deep);
}

/* Changement de palette : les couleurs passent en fondu (la classe est posée 0,9 s par shared/designs.js). */
html.palette-fading,
html.palette-fading *,
html.palette-fading *::before,
html.palette-fading *::after {
  transition: background-color 0.7s ease, border-color 0.7s ease, color 0.7s ease, fill 0.7s ease, stroke 0.7s ease, box-shadow 0.7s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.palette-fading,
  html.palette-fading *,
  html.palette-fading *::before,
  html.palette-fading *::after {
    transition: none !important;
  }
}

/* Barres de progression (enveloppes) : une couleur de remplissage plus vive que l'accent, pour chaque palette (graphite la définit dans son propre bloc).
   Mode sombre : la teinte claire de la palette (--blue) ressort sur le fond de la barre. */
html[data-design='doudapp']:not([data-theme='dark']) { --progress-fill: #b4622c; }
html[data-design='doudapp'][data-palette='sauge']:not([data-theme='dark']) { --progress-fill: #4f9a6a; }
html[data-design='doudapp'][data-palette='violet']:not([data-theme='dark']) { --progress-fill: #8a5cd0; }
html[data-design='doudapp'][data-theme='dark'] { --progress-fill: color-mix(in srgb, var(--blue) 88%, var(--paper)); }

/* Brun & blanc cassé : crème très pâle, proche du blanc, avec les mêmes accents bruns. */
html[data-design='doudapp'][data-palette='brun-blanc'] {
  --shadow-focus: 0 0 0 2px #9c7b5b55;
  --scrim: #211a15;
  --accent-deep: #3b2d24;
  --nav-text: #efece5;
  --nav-muted: #b5a89b;
  --nav-active: #604635;
  --nav-hover: #4b382c;
  --nav-pressed: #71503b;
  --nav-line: #574335;
  --topbar-text: #f6f3eb;
  --topbar-muted: #c6b8a7;
  --app-icon-light: #f6f3eb;
  --app-icon-mid: #ded7ca;
  --app-icon-dark: #bfb2a0;
  --app-icon-ink: #2b211b;
}
html[data-design='doudapp'][data-palette='brun-blanc']:not([data-theme='dark']) {
  --app-background: #f5f0e7;
  --page: #faf7f1;
  --paper: #fffdf8;
  --field: color-mix(in srgb, #fff 72%, var(--app-background));
  --border: #e1d4c1;
  --text: #342c26;
  --text-secondary: #574b40;
  --muted: #756f66;
  --blue: #79543c;
  --sidebar: #f8f3e9;
  --app-rail-background: #2b211b;
  --hover-surface: #f5efe4;
  --hover-control: #eee5d6;
  --pressed: #e5d7c1;
  --hover-button: #e8dcc8;
  --pressed-button: #dac8aa;
  --accent: #6b4938;
  --accent-line: #6b4938;
  --accent-hover: #7d5943;
  --accent-pressed: #533728;
  --nav-text: #4d3c30;
  --nav-muted: #7a6d60;
  --nav-active: #6b4938;
  --nav-hover: #eee5d6;
  --nav-pressed: #e5d7c1;
  --nav-line: #e1d4c1;
  --topbar: #f8f3e9;
  --topbar-text: #342c26;
  --topbar-muted: #756f66;
  --topbar-line: #e1d4c1;
}
html[data-design='doudapp'][data-palette='brun-blanc']:not([data-theme='dark']) .app-rail {
  --nav-text: #efece5;
  --nav-muted: #b5a89b;
  --nav-active: #604635;
  --nav-hover: #4b382c;
  --nav-pressed: #71503b;
  --nav-line: #574335;
}
html[data-design='doudapp'][data-palette='brun-blanc'][data-theme='dark'] {
  --scrim: #080706;
  --app-background: #181614;
  --page: #201d19;
  --paper: #2a2621;
  --field: #34302a;
  --border: #4a433a;
  --text: #eee9df;
  --text-secondary: #c8beb0;
  --muted: #a69c8d;
  --blue: #d1b391;
  --sidebar: #2a241e;
  --app-rail-background: #211b16;
  --hover-surface: #322c25;
  --hover-control: #3d342b;
  --pressed: #493c30;
  --hover-button: #4c3f32;
  --pressed-button: #5a4938;
  --accent: #886247;
  --accent-line: #aa8260;
  --accent-hover: #92694c;
  --accent-pressed: #6b4938;
  --topbar: #2a241e;
  --topbar-line: #493c30;
}

/* Bordeaux & ivoire : accents lie-de-vin, ivoire clair et variante sombre prune. */
html[data-design='doudapp'][data-palette='bordeaux'] {
  --shadow-focus: 0 0 0 2px #b7677c55;
  --scrim: #29151b;
  --accent-deep: #431c29;
  --nav-text: #f3e7e6;
  --nav-muted: #c4a4ab;
  --nav-active: #713344;
  --nav-hover: #512531;
  --nav-pressed: #854356;
  --nav-line: #66303e;
  --topbar-text: #faf0e9;
  --topbar-muted: #d6b8b8;
  --app-icon-light: #faf0e5;
  --app-icon-mid: #e4cdd0;
  --app-icon-dark: #c69da5;
  --app-icon-ink: #30191f;
}
html[data-design='doudapp'][data-palette='bordeaux']:not([data-theme='dark']) {
  --app-background: #f1ece9;
  --page: #f8f4ee;
  --paper: #fffaf3;
  --field: color-mix(in srgb, #fff 72%, var(--app-background));
  --border: #d7c5c2;
  --text: #3c252a;
  --text-secondary: #63474b;
  --muted: #7d6669;
  --blue: #8b354b;
  --sidebar: #f4ebe6;
  --app-rail-background: #30191f;
  --hover-surface: #f2e8e3;
  --hover-control: #eadbd8;
  --pressed: #dfc7ca;
  --hover-button: #e5ced0;
  --pressed-button: #d5b2b9;
  --accent: #782d40;
  --accent-line: #782d40;
  --accent-hover: #903b51;
  --accent-pressed: #5c2030;
  --nav-text: #57313c;
  --nav-muted: #85646d;
  --nav-active: #782d40;
  --nav-hover: #eadbd8;
  --nav-pressed: #dfc7ca;
  --nav-line: #d7c5c2;
  --topbar: #f4ebe6;
  --topbar-text: #3c252a;
  --topbar-muted: #7d6669;
  --topbar-line: #d7c5c2;
  --progress-fill: #b64c65;
}
html[data-design='doudapp'][data-palette='bordeaux']:not([data-theme='dark']) .app-rail {
  --nav-text: #f3e7e6;
  --nav-muted: #c4a4ab;
  --nav-active: #713344;
  --nav-hover: #512531;
  --nav-pressed: #854356;
  --nav-line: #66303e;
}
html[data-design='doudapp'][data-palette='bordeaux'][data-theme='dark'] {
  --scrim: #0c0508;
  --app-background: #1b1116;
  --page: #24171d;
  --paper: #302029;
  --field: #3d2b34;
  --border: #583c48;
  --text: #f0e3e4;
  --text-secondary: #d0b5bc;
  --muted: #b3939d;
  --blue: #e0a7b1;
  --sidebar: #2d1b24;
  --app-rail-background: #21131b;
  --hover-surface: #392630;
  --hover-control: #49313d;
  --pressed: #573644;
  --hover-button: #603b4a;
  --pressed-button: #734858;
  --accent: #934057;
  --accent-line: #b45971;
  --accent-hover: #a34863;
  --accent-pressed: #782d40;
  --topbar: #2d1b24;
  --topbar-line: #50303e;
}