@charset "UTF-8";
/* Dialog header style */
/* ==========================================================================
   Tokens semantiques — source unique des couleurs du design system.
   Utiliser ces variables plutot que des hex en dur dans le SCSS.
   ========================================================================== */
:root {
  --app-bg: #F8FAF9;
  --app-surface: #FFFFFF;
  --app-border: #E2EAE6;
  --app-divider: #ECF2EF;
  --app-text: #2D2D2D;
  --app-text-muted: #5A665F; /* gris-vert AA >=4.5:1 sur blanc */
  --app-primary: #1E7A5F;
  --app-primary-contrast: #FFFFFF;
  --app-accent: #3FBF9C; /* vert menthe - DECORATIF uniquement (bordures, carre de titre, fills) */
  --app-accent-text: #0F6B52; /* vert fonce AA pour TEXTE/icone sur fond clair */
  /* Typographie - source unique des piles de polices (chargees dans index.html).
     IBM Plex Sans porte tout (titres, labels, corps, data) ; IBM Plex Mono est
     reservee aux donnees a comparer (references, montants, numeros). */
  --app-font-sans: 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --app-font-mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
  /* Rythme fluide - le chrome suit la taille de l'ecran sans breakpoint dedie :
     padding de page 12px (portable 1280x720) -> 24px (moniteur), hauteur des
     barres (logo sidebar + MyStickyAppBar) 56 -> 72px selon la hauteur utile. */
  --app-page-pad: clamp(10px, 0.3rem + 0.6vw, 16px);
  --app-bar-h: clamp(46px, 30px + 2.5vh, 56px);
  /* Alias de compatibilite : anciens tokens Boracay (--cp-*) reroutes vers le
     systeme --app-*. Certains composants partages (MyChip, etc.) les referencent
     encore ; sans ces alias leurs styles cassent (ex. survol blanc sur blanc). */
  --cp-primary: var(--app-primary);
  --cp-primary-tint: #E7F2ED; /* tint clair du vert primaire */
  --cp-border: var(--app-border);
  --cp-dark: var(--app-text);
  --cp-white: #FFFFFF;
  --cp-success: #2E7D32;
  --cp-success-tint: #E8F5E9;
  --cp-success-border: #A5D6A7;
  --cp-danger: #C62828;
  --cp-danger-tint: #FDECEA;
  --cp-danger-border: #F5C6CB;
  --cp-warning: #B26A00;
  --cp-warning-tint: #FFF4E5;
  --cp-warning-border: #FFE0B2;
  --cp-radius-md: 12px;
}

/* Colonne marge dans les tableaux de tarification */
.pricing-margin-col {
  background-color: #f0f6ff;
}

:root {
  /*    --mud-input-border-radius: 0px;
  --mud-chip-border-radius: 8px;
  --mud-button-border-radius: 8px;
  --mud-dialog-close-button-color: white;
  --table-pager-height: 48px;
  --table-toolbar-height: 40px;
  --table-toolbar-margin: 5px;
  --highliter-color: var(--mud-palette-secondary);
  --datagrid-header-height: 32px;
  --form-spacing: 10px;
  --form-padding: 7px;
  --main-content-padding: 15px;
  --mud-drawer-width-left: 190px;*/
  --chips-primary-1: #DC2626;
  --chips-secondary-1: #FECCCF;
  --chips-primary-2: #EA580C;
  --chips-secondary-2: #FFEDD5;
  --chips-primary-3: #BE9000;
  --chips-secondary-3: #FEF6C6;
  --chips-primary-4: #5D9A06;
  --chips-secondary-4: #ecfccc;
  --chips-primary-5: #16A34A;
  --chips-secondary-5: #DCFCE7;
  --chips-primary-6: #0D9488;
  --chips-secondary-6: #CCFBF1;
  --chips-primary-7: #0991B2;
  --chips-secondary-7: #CFFAFE;
  --chips-primary-8: #208A9E;
  --chips-secondary-8: #DBEAFE;
  --chips-primary-9: #8C46E5;
  --chips-secondary-9: #EBE1FF;
  --chips-primary-10: #C027D3;
  --chips-secondary-10: #F8EAFD;
  --chips-primary-11: #FF099C;
  --chips-secondary-11: #FBDBFE;
  --chips-primary-12: #676767;
  --chips-secondary-12: #D8D8D8;
}

.icon-small {
  font-size: 1rem;
  align-self: center;
}

/* --------- Modification de style qui concerne les Datagrids ------------ */
/* Réduction des padding des datagrid dense */
.mud-table-dense * .mud-table-row .mud-table-cell {
  padding: 1px 24px 1px 16px;
}

.mud-card-header {
  padding: 10px 16px 2px 16px;
}

/* Mise en gris du fond des headers de data-grid */
.background-grey {
  background-color: var(--mud-palette-background-gray);
}
.background-grey .mud-table-row *:not(.mud-resizer) {
  background-color: var(--mud-palette-gray-lighter) !important;
  padding-bottom: 2px !important;
}
.background-grey *:not(.mud-resizer) {
  background-color: var(--mud-palette-gray-lighter);
}

.section-bg {
  background-color: white;
  padding: 16px;
  border-radius: 8px;
}

.blury-background-dialog {
  backdrop-filter: blur(10px);
}

.fullwidth-table .mud-table-container {
  width: 100% !important;
  overflow: hidden;
}

.role-assign {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.role-assign-label {
  font-size: 12px;
  color: var(--app-text-muted);
}

.role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.role-empty {
  font-size: 13px;
  font-style: italic;
  color: var(--app-text-muted);
}

.role-add {
  max-width: 360px;
  margin-top: 4px;
}

.minwidthtable-column .mud-table .mud-table-container {
  width: auto !important;
  white-space: nowrap;
}

.minwidthtable-column .mud-table-dense * .mud-table-row .mud-table-cell {
  padding: 4px 1px 4px 5px;
}

.my-fixed-grid {
  height: 400px !important;
  display: flex;
  flex-direction: column;
}

.my-fixed-grid .mud-data-grid {
  height: 100% !important;
}

.my-fixed-grid .mud-table-cell {
  white-space: normal !important;
}

.my-fixed-grid .mud-table-container {
  overflow-x: hidden !important;
}

.my-fixed-grid .mud-table-head .mud-table-cell {
  white-space: nowrap !important;
}

.my-fixed-grid .mud-table-body .mud-table-cell {
  white-space: normal !important;
}

.uppercase-input input {
  text-transform: uppercase;
}

.TabPanelClass-bg-White {
  background-color: var(--mud-palette-surface);
}

.mud-table-sticky-header * .mud-table-root .mud-table-head.mud-table-dense .filter-header-cell {
  top: 37px;
  padding-top: 5px;
}

.mud-data-grid {
  /*.mud-table-root {
      table-layout: fixed;
  }*/
}
.mud-data-grid .text-truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0;
}
.mud-data-grid {
  /*.mud-table-cell .mud-resizer {
      bottom: 0;
      z-index: 2;
  }*/
  /*.cell-truncate {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }*/
}
.mud-data-grid .mud-table-root {
  width: 100% !important;
}
.mud-data-grid thead tr th.mud-table-cell:last-child,
.mud-data-grid tbody tr td.mud-table-cell:last-child {
  width: auto !important;
}
.mud-data-grid .mud-table {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mud-data-grid .mud-table-container {
  flex: 1;
  min-height: 0;
  height: unset !important;
  overflow-y: auto !important;
  overflow-x: auto;
  width: 100% !important;
}
.mud-data-grid td.mud-table-cell .mud-button-root {
  white-space: nowrap;
}
.mud-data-grid td.mud-table-cell.app-cell-rich {
  overflow: visible;
  white-space: normal;
  max-width: none;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.mud-data-grid td.mud-table-cell:has(.mud-chip) {
  min-width: 10em;
}
.mud-data-grid th.mud-table-cell .mud-resizer {
  opacity: 0;
  transition: opacity 0.1s;
}
.mud-data-grid th.mud-table-cell:hover .mud-resizer {
  opacity: 1;
}
.mud-data-grid th.mud-table-cell .column-header {
  overflow: hidden;
  width: inherit;
  min-width: 40px;
}
.mud-data-grid th.mud-table-cell .column-header .sortable-column-header {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 2em;
}

/* ── Pages avec MyMainContentStack : page fixe, contenu scrolle en interne ──
   Le marker `.app-list-page` est ajoute par MyMainContentStack. Active la
   contrainte page-fixe meme quand le stack est imbrique (ex : SalesQuoteDetail
   ou MyMainContentStack est dans un MyTabPanel). */
.app-content:has(.app-list-page) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-content > .app-list-page {
  height: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
.app-content > .app-list-page > .mud-stack:has(> .mud-data-grid) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
}

.app-list-page .mud-stack > .mud-data-grid {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex;
  flex-direction: column;
}

.app-list-page .mud-stack > .mud-data-grid .mud-table-container {
  flex: 1 1 auto;
  min-height: 0;
}

.app-list-page:has(> .mud-tabs),
.app-list-page:has(> .mud-form > .mud-tabs) {
  margin: 0 !important;
}

.app-list-page > .mud-form,
.app-list-page > form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.app-list-page .mud-tabs {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.app-list-page .mud-tabs > .mud-tabs-toolbar {
  flex: 0 0 auto;
}

.app-list-page .mud-tabs .mud-tabs-panels {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-list-page .mud-tabs .mud-tab-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-list-page .mud-tabs .mud-tabs-panels > .mud-tab-panel > * {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
}

/* ── Master listes (MyDataGrid) — look back-office sobre ────────────────── */
.mud-data-grid {
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px #e6e6e6;
}
.mud-data-grid .background-grey,
.mud-data-grid .background-grey *:not(.mud-resizer) {
  background-color: #f7f7f7 !important;
}
.mud-data-grid .mud-table-head {
  border-bottom: 1px solid #e6e6e6;
}
.mud-data-grid .mud-table-head .mud-table-cell {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  vertical-align: middle;
}
.mud-data-grid .mud-table-head .filter-header-cell {
  top: 38px !important;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}
.mud-data-grid .mud-table-head .filter-header-cell .mud-input-control {
  margin-top: 0 !important;
}
.mud-data-grid .mud-table-head .filter-header-cell .mud-input.mud-input-text {
  margin-top: 0 !important;
}
.mud-data-grid .mud-table-head .filter-header-cell input.mud-input-slot {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  font-size: 0.8125rem;
}
.mud-data-grid .mud-table-head .column-header {
  font-weight: 600;
  color: var(--cp-dark, #1E7A5F);
}
.mud-data-grid tbody .mud-table-cell {
  border-bottom: 1px solid #f0f0f0;
}
.mud-data-grid tbody .mud-table-row:nth-of-type(even) > .mud-table-cell {
  background-color: #fafbfc;
}
.mud-data-grid tbody .mud-table-row:hover > .mud-table-cell {
  background-color: rgba(30, 122, 95, 0.05) !important;
}
.mud-data-grid tbody .mud-table-row.selected > .mud-table-cell {
  background-color: rgba(30, 122, 95, 0.1) !important;
}
.mud-data-grid .mud-table-pagination {
  border-top: 1px solid #e6e6e6;
  background-color: #f7f7f7;
}
.mud-data-grid .mud-table-container::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.mud-data-grid .mud-table-container::-webkit-scrollbar-track {
  background: transparent;
}
.mud-data-grid .mud-table-container::-webkit-scrollbar-thumb {
  background: #d0d0d0;
  border-radius: 5px;
  border: 2px solid #fff;
}
.mud-data-grid .mud-table-container::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

.grid-lines-table tr:not(:hover) .row-actions-hover {
  visibility: hidden;
}

/* ==========================================================================
   Layout neutre — app-shell, sidebar, topbar
   Couleurs : primaire #1E7A5F / #14523F, texte #2D2D2D, tint #E7F2ED
   ========================================================================== */
.app-shell,
.app-shell input,
.app-shell button,
.app-shell a {
  font-family: var(--app-font-sans);
}

/* Donnees a comparer visuellement (references dossier, montants, numeros de facture) */
.app-mono {
  font-family: var(--app-font-mono);
  font-size: 0.9em;
}

.app-shell {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  color: var(--app-text);
  transition: grid-template-columns 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.app-shell.shell-mini {
  grid-template-columns: 76px minmax(0, 1fr);
}

@media (prefers-reduced-motion: reduce) {
  .app-shell {
    transition: none;
  }
}
/* ---------- Sidebar ---------- */
.app-sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: visible;
  background-color: #FFFFFF;
  border-right: 1px solid #d8dbe2;
  box-shadow: 4px 0 18px rgba(45, 45, 45, 0.06);
  z-index: 60;
  position: relative;
}

.app-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--app-bar-h);
  padding: 0 14px;
  border-bottom: 1px solid #ecedf2;
  background: linear-gradient(180deg, #E7F2ED 0%, #FFFFFF 100%);
}

.app-brand-img {
  width: auto;
  height: auto;
  max-width: 80%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Wordmark texte (BrandText de MyNavSidebar) — remplace les logos images */
.app-brand-text {
  font-family: var(--app-font-sans);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  /* Compense visuellement le letter-spacing porte par la derniere lettre */
  margin-right: -0.16em;
  color: var(--app-primary);
  line-height: 1;
  user-select: none;
}

.app-brand-text-mini {
  font-size: 1.35rem;
  letter-spacing: 0;
  margin-right: 0;
}

.app-brand-img-mini {
  height: 38px;
  width: 38px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 0 50%;
  display: block;
}

.app-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 12px 12px;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}

.app-nav::-webkit-scrollbar {
  width: 6px;
}

.app-nav::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 3px;
}

.app-sidebar.is-mini .app-nav {
  padding: 16px 0;
}

/* Section labels */
.app-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 8px;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 1.8px;
  color: var(--app-primary);
  text-transform: uppercase;
  user-select: none;
}

.app-section-label:not(:first-child) {
  padding-top: 18px;
}

.app-section-bullet {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1E7A5F 0%, #14523F 100%);
  box-shadow: 0 0 0 3px rgba(30, 122, 95, 0.15);
}

/* Nav links */
.app-navlink {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 3px 0;
  padding: 12px 14px;
  border: none;
  background: transparent;
  border-radius: 12px;
  color: var(--app-text);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.1px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  box-sizing: border-box;
}

.app-navlink .mud-icon-root.app-navlink-icon {
  flex: 0 0 auto;
  color: var(--app-text-muted);
  font-size: 22px !important;
  width: 22px;
  height: 22px;
  transition: color 0.18s ease;
}

.app-navlink-text {
  flex: 1 1 auto;
  color: inherit;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-navlink:hover {
  background-color: #E7F2ED;
  color: var(--app-primary);
  transform: translateX(2px);
}

.app-navlink:hover .mud-icon-root.app-navlink-icon {
  color: #1E7A5F;
}

.app-navlink.active {
  background: linear-gradient(135deg, #1E7A5F 0%, #14523F 100%);
  color: #FFFFFF !important;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(30, 122, 95, 0.4);
  transform: none;
}

.app-navlink.active .app-navlink-text {
  color: #FFFFFF !important;
}

.app-navlink.active .mud-icon-root.app-navlink-icon {
  color: #FFFFFF !important;
}

.app-navlink.active:hover {
  transform: none;
}

/* Group with submenu */
.app-group {
  display: block;
}

.app-group-trigger.has-active {
  color: #1E7A5F;
}

.app-group-trigger.has-active .mud-icon-root.app-navlink-icon {
  color: #1E7A5F;
}

.app-group-trigger .mud-icon-root.app-group-chev {
  flex: 0 0 auto;
  color: var(--app-text-muted);
  font-size: 18px !important;
  width: 18px;
  height: 18px;
  transition: transform 0.22s ease, color 0.18s ease;
}

.app-group.is-expanded .app-group-trigger .mud-icon-root.app-group-chev {
  transform: rotate(180deg);
  color: var(--app-primary);
}

.app-submenu {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  margin-left: 22px;
  padding-left: 12px;
  border-left: 2px solid #E7F2ED;
  transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* L'enfant unique de la grille masque son overflow pour que le contenu
   soit reellement clippe pendant que la ligne passe de 0fr a 1fr. */
.app-submenu-inner {
  min-height: 0;
  overflow: hidden;
}

.app-group.is-expanded .app-submenu {
  grid-template-rows: 1fr;
  padding-top: 4px;
  padding-bottom: 6px;
}

.app-sublink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin: 2px 0;
  border-radius: 10px;
  color: var(--app-text-muted);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s ease;
}

.app-sublink-bullet {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #d4d6e0;
  flex: 0 0 auto;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.app-sublink-text {
  color: inherit;
}

.app-sublink:hover {
  background-color: #E7F2ED;
  color: var(--app-primary);
  transform: translateX(2px);
}

.app-sublink:hover .app-sublink-bullet {
  background-color: #1E7A5F;
  transform: scale(1.3);
}

.app-sublink.active {
  background: linear-gradient(135deg, #1E7A5F 0%, #14523F 100%);
  color: #FFFFFF !important;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(30, 122, 95, 0.35);
  transform: none;
}

.app-sublink.active .app-sublink-text {
  color: #FFFFFF !important;
}

.app-sublink.active .app-sublink-bullet {
  background-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

/* Mini mode */
.app-sidebar.is-mini .app-navlink {
  width: 52px;
  height: 52px;
  margin: 4px auto;
  padding: 0;
  border-radius: 14px;
  justify-content: center;
}

.app-sidebar.is-mini .app-navlink:hover {
  transform: none;
}

.app-sidebar.is-mini .app-navlink.active {
  transform: none;
}

.app-mini-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}

/* Footer : carte utilisateur */
.app-footer {
  flex: 0 0 auto;
  padding: 12px;
  border-top: 1px solid #ecedf2;
  background-color: #fafbfd;
  position: relative;
}

.app-sidebar.is-mini .app-footer {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-user-wrap {
  position: relative;
}

.app-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background-color: #FFFFFF;
  border: 1.5px solid #e0e2e8;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
  box-shadow: 0 2px 8px rgba(45, 45, 45, 0.04);
  box-sizing: border-box;
}

.app-user-card:hover {
  border-color: #1E7A5F;
  background-color: #E7F2ED;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(30, 122, 95, 0.16);
}

.app-user-card.mini {
  width: 52px;
  height: 52px;
  padding: 0;
  justify-content: center;
  border-radius: 14px;
}

.app-user-text {
  flex: 1 1 auto;
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  align-items: flex-start;
}

.app-user-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--app-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.app-user-mail {
  font-size: 0.72rem;
  color: var(--app-text-muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: 1px;
}

.app-user-card .mud-icon-root.app-user-chev {
  color: var(--app-text-muted);
  font-size: 18px !important;
  flex: 0 0 auto;
  transition: color 0.18s ease;
}

.app-user-card:hover .mud-icon-root.app-user-chev {
  color: #1E7A5F;
}

.app-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1E7A5F 0%, #14523F 100%);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.4px;
  flex: 0 0 auto;
  box-shadow: 0 4px 12px rgba(30, 122, 95, 0.3);
}

.app-avatar-lg {
  width: 52px;
  height: 52px;
  font-size: 1rem;
  box-shadow: 0 6px 18px rgba(30, 122, 95, 0.35);
}

.app-version-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 6px 2px;
}

.app-version-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--app-text-muted);
  text-transform: uppercase;
}

.app-version-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background-color: #E7F2ED;
  color: var(--app-primary);
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 999px;
  letter-spacing: 0.2px;
  border: 1px solid rgba(30, 122, 95, 0.25);
}

/* User popover */
.app-user-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background-color: #FFFFFF;
  border: 1px solid #e0e2e8;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(45, 45, 45, 0.22);
  overflow: hidden;
  z-index: 1000;
}

.app-user-popover-mini {
  left: calc(100% + 12px);
  right: auto;
  bottom: 0;
  width: 280px;
}

.app-user-popover-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 16px;
  background: linear-gradient(135deg, #E7F2ED 0%, #FFFFFF 100%);
  border-bottom: 1px solid #f5f5f5;
}

.app-user-popover-info {
  flex: 1 1 auto;
  overflow: hidden;
  min-width: 0;
}

.app-user-popover-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--app-text);
  line-height: 1.25;
}

.app-user-popover-mail {
  font-size: 0.8rem;
  color: var(--app-text-muted);
  margin-top: 2px;
  font-weight: 500;
}

.app-user-popover-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  background-color: #1E7A5F;
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(30, 122, 95, 0.3);
}

.app-user-popover-body {
  padding: 6px;
}

.app-popover-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 10px;
  color: var(--app-text);
  font-size: 0.88rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.app-popover-item .mud-icon-root.app-popover-icon {
  color: var(--app-text-muted);
  font-size: 18px !important;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.app-popover-item:hover {
  background-color: #E7F2ED;
  color: #1E7A5F;
}

.app-popover-item:hover .mud-icon-root.app-popover-icon {
  color: #1E7A5F;
}

.app-popover-danger {
  color: #dc3545 !important;
}

.app-popover-danger .mud-icon-root.app-popover-icon {
  color: #dc3545 !important;
}

.app-popover-danger:hover {
  background-color: #fef2f2 !important;
  color: #dc3545 !important;
}

.app-popover-danger:hover .mud-icon-root.app-popover-icon {
  color: #dc3545 !important;
}

.app-popover-sep {
  height: 1px;
  margin: 6px 4px;
  background-color: #ecedf2;
}

.app-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  /* Sous le sidebar (z-index 60) pour ne pas recouvrir le popover utilisateur
     (dont le z-index 1000 est confine au contexte d'empilement du sidebar),
     mais au-dessus du contenu principal pour fermer le menu au clic exterieur. */
  z-index: 59;
}

/* Edge toggle */
.app-edge-toggle {
  position: absolute;
  top: 56px;
  right: -14px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e0e2e8;
  border-radius: 50%;
  background-color: #FFFFFF;
  color: var(--app-text);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(45, 45, 45, 0.12);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  z-index: 70;
  padding: 0;
}

.app-sidebar:hover .app-edge-toggle,
.app-edge-toggle:focus-visible {
  opacity: 1;
  transform: translateX(0);
}

.app-edge-toggle:hover {
  background-color: #E7F2ED;
  border-color: #1E7A5F;
  color: var(--app-primary);
}

/* Main column */
.app-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
  background-color: #f4f5f8;
}

/* Topbar */
.app-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: 72px;
  background-color: #ffffff;
  z-index: 50;
  border-bottom: 1px solid #d8dbe2;
  box-shadow: 0 6px 18px rgba(45, 45, 45, 0.06);
  position: sticky;
  top: 0;
}

.app-title-block {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  gap: 2px;
  margin-left: 8px;
}

.app-subtitle {
  margin: 2px 0 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--app-text-muted);
  letter-spacing: 0;
}

.app-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--app-text);
  margin: 0;
  letter-spacing: -0.4px;
}

.app-spacer {
  flex: 1 1 auto;
}

.app-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* Boutons topbar */
.app-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border: 1.5px solid #e0e2e8;
  border-radius: 10px;
  background-color: #ffffff;
  color: var(--app-text);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--app-font-sans);
}

.app-action-btn:hover:not(:disabled) {
  background-color: #E7F2ED;
  border-color: #1E7A5F;
  color: var(--app-primary);
  transform: translateY(-1px);
}

.app-action-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.app-action-btn-primary {
  background: linear-gradient(135deg, #1E7A5F 0%, #14523F 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(30, 122, 95, 0.3);
}

.app-action-btn-primary:hover:not(:disabled) {
  color: #ffffff;
  background: linear-gradient(135deg, #455a64 0%, #1c272b 100%);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(30, 122, 95, 0.4);
}

.app-action-btn .mud-icon-root {
  font-size: 18px !important;
  width: 18px;
  height: 18px;
}

/* Content area */
.app-content {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Padding de page fluide - remplace pa-6 sur les conteneurs de pages :
   12px sur un portable 1280x720, 24px sur un moniteur. */
.app-page-pad {
  padding: var(--app-page-pad);
}

/* ==========================================================================
   Adaptations desktop - portable (<=1440px / <=820px de haut) vs moniteur
   ========================================================================== */
@media (max-width: 1440px) {
  .app-shell {
    grid-template-columns: 232px minmax(0, 1fr);
  }
}
@media (max-width: 1536px) {
  .mud-data-grid.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 1px 12px;
  }
}
@media (max-height: 820px) {
  .app-nav {
    padding: 10px 12px 8px;
  }
  .app-navlink {
    padding: 8px 14px;
    margin: 2px 0;
  }
  .app-section-label:not(:first-child) {
    padding-top: 10px;
  }
}
/* ===========================================================================
   Cartes (composant MyCard) — design system harmonise
   Accent menthe (--app-accent) sur le carre de titre.
   =========================================================================== */
.acc-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(45, 45, 45, 0.04), 0 6px 20px rgba(45, 45, 45, 0.05);
  padding: 14px 18px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.acc-card:hover {
  border-color: #DDE2E4;
  box-shadow: 0 1px 2px rgba(45, 45, 45, 0.05), 0 10px 28px rgba(45, 45, 45, 0.07);
}

.acc-card--row {
  padding: 12px 16px;
}

/* Titre de section d'une carte */
.acc-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--app-text);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--app-divider);
}

.acc-card-title::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--app-accent);
  flex: 0 0 auto;
}

/* Variante avec icone : l'icone Material remplace le carre menthe */
.acc-card-title--icon::before {
  content: none;
}

.acc-card-title__icon {
  width: 20px;
  height: 20px;
  color: var(--app-accent);
  flex: 0 0 auto;
}

/* ==========================================================================
   Sections de formulaire (MyFormSection) — icone + libelle + filet.
   Segmentent les champs d'une carte (Identite, Contact, Acte, Honoraires…)
   pour une lecture en un coup d'oeil, sans conteneur supplementaire.
   ========================================================================== */
.app-form-section {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
}

/* Dans une grille de formulaire, la section respire au-dessus des champs
   soulignes qui la precedent (le label flottant du champ suivant monte
   haut : sans cet ecart, le titre de section semble colle au champ). */
.mud-grid-item > .app-form-section {
  margin-top: 10px;
}

.app-form-section__icon {
  width: 18px;
  height: 18px;
  color: var(--app-primary);
  flex: 0 0 auto;
}

.app-form-section__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--app-primary);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.app-form-section__rule {
  flex: 1;
  border-top: 1px solid var(--app-divider);
}

/* ==========================================================================
   Champs de saisie — MyTextField, MyNumericField, MySelect, MyAutocomplete,
   MyDatePicker.

   UN SEUL MARQUEUR POUR LES CINQ : .my-field
   Chaque composant le pose lui-meme dans OnParametersSet. Il y avait un
   marqueur par type (.my-tf, .my-nf, .my-sel, .my-ac, .my-dp), ce qui
   obligeait a repeter chaque regle cinq fois et a n'en oublier aucune lors
   d'un ajout. Les variantes sont des modificateurs : --gridcell (saisie en
   cellule de tableau), --gridcell-number (alignement a droite des nombres),
   --chips (liste dont la valeur est une etiquette).
   ========================================================================== */
/* Champ outlined avec libelle (login, cellules) : l'encoche (legend) ne
   reserve que la largeur du trou dans la bordure, son texte ne s'affiche
   jamais ; le libelle flottant masque le trait derriere lui. */
.my-field .mud-input-outlined-border legend {
  visibility: hidden;
}

.my-field .mud-input-label-outlined {
  background-color: var(--mud-palette-surface);
  padding-left: 4px;
  padding-right: 4px;
}

/* Arrondi plus doux que le defaut MudBlazor, anguleux a cette taille. 6px =
   rounded.md de DESIGN.md, le meme rayon que MyCard : le design system source
   posait 8px, hors de l'echelle HOLO. */
.my-field .mud-input-outlined .mud-input-outlined-border,
.my-field .mud-input.mud-input-outlined {
  border-radius: 6px;
}

/* Centre verticalement un ChildContent compose (MudStack/MudText) dans un
   MySelect ferme — sans cette regle, un contenu personnalise se cale en haut. */
.my-field .mud-select-input,
.my-field .mud-input-slot.mud-select-input {
  display: flex;
  align-items: center;
}

/* Champ souligne dense : les marges verticales du controle tombent (la gouttiere
   de grille et la reserve du libelle flottant suffisent a separer les rangees).
   DEUX SELECTEURS OBLIGATOIRES : sur un champ texte / nombre / liste, .my-field
   est porte par le .mud-input-control lui-meme ; sur un date picker, il est
   porte par le .mud-picker et le controle est un descendant — avec un seul des
   deux, les pickers gardent leurs marges et les traits ne s'alignent plus.
   La geometrie interne du champ (reserve du libelle 16px, paddings) reste celle
   de MudBlazor : elle calibre la position du libelle au repos.
   Le login (Margin.Normal) n'est pas concerne. */
.my-field.mud-input-control-margin-dense,
.my-field .mud-input-control-margin-dense {
  margin-top: 0;
  margin-bottom: 0;
}

/* Reserve la place de l'icone de fin sous le libelle non reduit. Par defaut
   MudBlazor autorise le libelle a occuper toute la largeur moins 14px, ce qui
   le fait passer sous l'icone — quel que soit le variant (outlined ou souligne). */
.my-field .mud-input.mud-input-adorned-end ~ label.mud-input-label-outlined,
.my-field .mud-input.mud-input-adorned-end ~ label.mud-input-label-inputcontrol {
  max-width: calc(100% - 50px);
}

/* --------------------------------------------------------------------------
   Champ en cellule de tableau (MyVariant.MyGridCell)
   Hauteur reduite et bordure effacee au repos : dans une grille, un cadre par
   cellule produit un quadrillage illisible. Le cadre reapparait au survol et
   au focus, donc l'utilisateur voit qu'il peut saisir des qu'il approche.
   -------------------------------------------------------------------------- */
.my-field--gridcell .mud-input.mud-input-outlined {
  min-height: 24px;
  border-radius: 4px;
}

.my-field--gridcell .mud-input-outlined .mud-input-outlined-border {
  border-color: transparent;
}

.my-field--gridcell:hover .mud-input-outlined .mud-input-outlined-border,
.my-field--gridcell .mud-input:focus-within ~ .mud-input-outlined-border {
  border-color: var(--app-border);
}

/*  LA VALEUR N'EST PAS TOUJOURS DANS UN input
    Un champ de texte, un nombre et une date rendent leur valeur dans un
    <input>. Une liste de choix la rend dans un <div>, l'input n'y servant qu'a
    porter la valeur soumise. Viser les seuls input laisserait le select a
    18,5px de marge interne, soit 56px de haut la ou les autres champs tombent
    a 24. .mud-input-slot porte les deux formes.
    Valeurs forcees : MudBlazor pose les siennes avec une specificite
    superieure. */
.my-field--gridcell .mud-input-slot {
  font-size: 0.75rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.my-field--gridcell input {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/*  L'ALIGNEMENT A DROITE N'APPARTIENT QU'AUX NOMBRES
    On aligne a droite une quantite ou un montant, pour que les unites se
    superposent d'une ligne a l'autre — jamais une designation. C'est donc
    MyNumericField qui pose ce second marqueur, en plus du premier. */
.my-field--gridcell-number input {
  text-align: right;
}

/* --------------------------------------------------------------------------
   Liste dont la valeur est une etiquette (MyVariant.MyChips)
   Le composant demande Variant.Text : un cadre contour donnerait deux cadres
   imbriques, la boite du champ et l'etiquette dedans avec son propre bord.
   Seule garde necessaire ici : MudBlazor met la boite de valeur en
   overflow: hidden et lui donne la hauteur d'une ligne de texte, ce qui
   rognerait le bas arrondi d'une etiquette un peu plus grande. La hauteur,
   elle, n'est pas touchee : la passer a auto ferait tomber le trait du champ
   plus bas que celui de ses voisins dans une meme rangee.
   Le selecteur nomme la balise et deux classes parce que MudBlazor coupe cette
   boite par une regle a trois classes.
   -------------------------------------------------------------------------- */
.my-field--chips div.mud-input-slot.mud-select-input {
  overflow: visible;
}

/* --------------------------------------------------------------------------
   MyAutocomplete — etiquettes des valeurs retenues, au-dessus du champ.
   La hauteur est bornee : au-dela d'une dizaine de valeurs, la liste defile au
   lieu de repousser le reste du formulaire.
   -------------------------------------------------------------------------- */
.my-autocomplete-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
  max-height: 120px;
  overflow-y: auto;
}

/* --------------------------------------------------------------------------
   MyReadOnlyTextField — couple libelle / valeur en texte (porte du design
   system). Seule la couleur du libelle est posee ici.
   -------------------------------------------------------------------------- */
.my-readonly-field-label {
  color: var(--app-text-muted);
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   MyQuantityStepper — trois elements accoles formant un seul controle : le
   cadre est porte par le conteneur, pas par la zone de saisie (porte du
   design system, tokens --my-* traduits en --app-*).
   -------------------------------------------------------------------------- */
.my-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1.5px solid var(--app-divider);
  border-radius: 999px;
  background: var(--app-surface);
  color: var(--app-text);
}

.my-stepper--disabled {
  opacity: 0.5;
}

.my-stepper .mud-icon-button.my-stepper-btn {
  width: 30px;
  height: 30px;
}

.my-stepper-input {
  width: 52px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--app-text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.my-stepper-input:disabled {
  color: var(--app-text-muted);
}

.my-stepper-input:focus {
  outline: none;
}

/* Les fleches natives feraient doublon avec les deux boutons. */
.my-stepper-input::-webkit-outer-spin-button,
.my-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.my-stepper-input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* --------------------------------------------------------------------------
   MyRangeSlider — deux champs de type range superposes sur un rail commun.
   Les champs sont rendus transparents : seules les poignees restent visibles,
   le rail et la portion selectionnee etant dessines par les elements dedies
   (porte du design system, tokens --my-* traduits en --app-*).
   -------------------------------------------------------------------------- */
.my-slider-skeleton {
  display: flex;
  align-items: center;
}

.my-slider {
  position: relative;
}

.my-slider-bubbles {
  position: relative;
  height: 28px;
  margin-bottom: 4px;
}

/* Bulle de valeur : fond plein et texte clair, avec une pointe vers la poignee. */
.my-slider-bubble {
  position: absolute;
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  transition: left 0.05s;
}

.my-slider-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
}

.my-slider-bubble--primary {
  background: var(--app-primary);
  color: var(--app-primary-contrast);
}

.my-slider-bubble--primary::after {
  border-top-color: var(--app-primary);
}

.my-slider-bubble--secondary {
  background: var(--app-accent);
  color: #FFFFFF;
}

.my-slider-bubble--secondary::after {
  border-top-color: var(--app-accent);
}

.my-slider-track {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
}

.my-slider-rail,
.my-slider-fill {
  position: absolute;
  height: 4px;
  border-radius: 10px;
  pointer-events: none;
}

.my-slider-rail {
  left: 0;
  right: 0;
  background: var(--app-divider);
  z-index: 1;
}

.my-slider-fill {
  z-index: 2;
}

.my-slider-fill--primary {
  background: var(--app-primary);
}

.my-slider-fill--secondary {
  background: var(--app-accent);
}

.my-slider-input {
  position: absolute;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  /* Le champ ne recoit les clics que sur sa poignee : ailleurs, il laisserait
     passer un clic sur le rail qui deplacerait la mauvaise borne. */
  pointer-events: none;
  z-index: 5;
}

.my-slider-input:focus {
  outline: none;
}

/* Ordre de superposition : la poignee qui peut encore s'eloigner passe devant. */
.my-slider-input--top {
  z-index: 6 !important;
}

/* Pastille CLAIRE cerclee de couleur : c'est ce qui la distingue de la portion
   selectionnee, qui est pleine. */
.my-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--app-primary);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.my-slider-input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--app-primary);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.my-slider-input--secondary::-webkit-slider-thumb {
  border-color: var(--app-accent);
}

.my-slider-input--secondary::-moz-range-thumb {
  border-color: var(--app-accent);
}

.my-slider-input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(30, 122, 95, 0.25);
}

/* Le rail natif est masque : celui affiche est dessine par .my-slider-rail. */
.my-slider-input::-webkit-slider-runnable-track,
.my-slider-input::-moz-range-track {
  background: transparent;
  border: none;
}

/* --------------------------------------------------------------------------
   MyPhoneInput — un champ unique : un drapeau cliquable a gauche, qui
   n'apparait qu'une fois un numero saisi, ouvre un menu de recherche de pays
   (porte du design system, tokens --my-* traduits en --app-*).
   -------------------------------------------------------------------------- */
.my-phone {
  width: 100%;
}

.my-phone-champ-cadre {
  position: relative;
}

.my-phone-number {
  width: 100%;
}

/* Le drapeau chevauche le bord gauche du champ, comme l'adornment de depart
   d'un champ MudBlazor. Positionne sur la hauteur du champ lui-meme et non sur
   celle du conteneur : celui-ci inclut aussi le texte d'aide sous le champ. */
.my-phone-drapeau {
  position: absolute;
  left: 8px;
  top: 28px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
}

.my-phone-drapeau svg {
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--app-border);
}

.my-phone-drapeau:hover:not(:disabled) {
  background: var(--app-bg);
}

.my-phone-drapeau:disabled {
  cursor: default;
}

.my-phone .my-phone-number input {
  /* Laisse la place au drapeau plutot que de l'en chevaucher. */
  padding-left: 36px;
}

.my-phone-menu-liste {
  overflow-y: auto;
  max-height: 15em;
}

.my-phone-menu-drapeau svg {
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--app-border);
}

/* --------------------------------------------------------------------------
   MyDatePicker — le calendrier est rendu dans un conteneur detache du champ :
   il ne peut pas etre cible depuis .my-field, d'ou ces selecteurs globaux.
   -------------------------------------------------------------------------- */
/* 10px = rounded.lg, et ombre de la famille "carte detachee" (blur >= 18px,
   alpha <= 0.08 — regle Ombre-Diffuse de DESIGN.md). */
.mud-picker.mud-picker-paper {
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(45, 45, 45, 0.08);
}

/* Jour courant : contour seul, pour ne pas etre confondu avec le jour choisi. */
.mud-picker-calendar .mud-day.mud-current:not(.mud-selected) {
  color: var(--app-primary);
  border: 1px solid var(--app-primary);
}

.mud-picker-calendar .mud-day.mud-selected {
  background-color: var(--app-primary);
  color: var(--app-primary-contrast);
}

.mud-picker-calendar .mud-day:hover:not(.mud-disabled):not(.mud-selected) {
  background-color: rgba(30, 122, 95, 0.1);
}

/* ==========================================================================
   Densite — chrome compact (boutons, alertes, gouttieres, barre sticky).
   ========================================================================== */
/* Boutons standards resserres (les MyIconButton gardent leur taille) */
.mud-button-root.mud-button {
  padding: 4px 12px;
  min-height: 30px;
}

/* Alertes info compactes (bandeaux d'aide dans les formulaires) */
.mud-alert {
  padding: 2px 12px;
}

.mud-alert .mud-alert-position {
  padding: 4px 0;
}

/* Utilitaire hauteur pleine (cartes de meme hauteur dans une grille) */
.h-100 {
  height: 100%;
}

/* Pastille d'icone de la barre sticky, alignee sur la barre reduite
   (le <style> du composant MyStickyAppBar fixe 38px, on le surcharge) */
.my-appbar .my-appbar__icon-pill {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

/* Les gouttieres de grilles restent celles de MudBlazor : les champs soulignes
   (Variant.Text) ont besoin de cet air vertical entre les rangees — les
   gouttieres resserrees de l'epoque des champs outlined denses nuisaient
   a la lisibilite. */
/* ==========================================================================
   Accessibilite — respect de prefers-reduced-motion.
   Coupe transitions, animations et scroll anime pour les utilisateurs
   ayant demande une reduction des mouvements.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}