/* ==========================================================================
   DocSPACE — design system commun (surcharge Bootstrap 5.3, ne la remplace pas)
   Valeurs relevées sur /public/maquette-dashboard.png et maquette-landingpage.png.
   Les couleurs de marque (--theme-*) sont injectées par organisation (ThemeService) ;
   les valeurs ci-dessous sont les défauts de la maquette.
   ========================================================================== */

:root {
  /* ---- Thème de marque (surchargé par <style id="theme">) ---- */
  --theme-primary: #1f6feb;
  --theme-primary-rgb: 31, 111, 235;
  --theme-primary-hover: #1a5dc8;
  --theme-secondary: #f26522;
  --theme-secondary-rgb: 242, 101, 34;
  --theme-sidebar: #1b2436;
  --theme-sidebar-rgb: 27, 36, 54;
  --theme-sidebar-text: #c9d1de;
  --theme-sidebar-active: #2d6fe3;
  --theme-sidebar-active-rgb: 45, 111, 227;
  --theme-on-primary: #ffffff;
  --theme-on-secondary: #ffffff;
  --theme-on-sidebar-active: #ffffff;

  /* ---- Typographie ---- */
  --app-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --app-font-display: "Plus Jakarta Sans", var(--app-font);
  --app-font-size: .875rem;
  --app-font-size-sm: .8125rem;
  --app-font-size-xs: .75rem;

  /* ---- Surfaces & textes ---- */
  --app-background: #f3f5f9;
  --app-surface: #ffffff;
  --app-surface-muted: #f8fafc;
  --app-border: #e6eaf0;
  --app-border-strong: #d6dce5;
  --app-text: #1f2937;
  --app-heading: #111827;
  --app-muted: #6b7280;
  --app-subtle: #9aa3b2;

  /* ---- États ---- */
  --app-success: #16a34a;
  --app-success-soft: #e8f7ee;
  --app-warning: #f59e0b;
  --app-warning-soft: #fef4e4;
  --app-danger: #e5484d;
  --app-danger-rgb: 229, 72, 77;
  --app-danger-soft: #fdeced;
  --app-info: #1f6feb;
  --app-info-soft: #e8f1fe;
  --app-purple: #7c5cfa;
  --app-purple-soft: #efeafe;

  /* ---- Types de fichiers ---- */
  --file-folder: #f8bf2e;
  --file-pdf: #e5383b;
  --file-word: #2b5ce6;
  --file-excel: #1d9a56;
  --file-powerpoint: #f4511e;
  --file-image: #3b82f6;
  --file-video: #7c4dff;
  --file-audio: #0f9d8a;
  --file-archive: #f5b400;
  --file-text: #64748b;
  --file-publisher: #077568;
  --file-other: #94a3b8;

  /* ---- Formes ---- */
  --app-radius-sm: 6px;
  --app-radius: 8px;
  --app-radius-lg: 12px;
  --app-radius-xl: 16px;
  --app-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --app-shadow: 0 2px 8px rgba(16, 24, 40, .06);
  --app-shadow-lg: 0 16px 40px rgba(16, 24, 40, .14);
  --app-transition: .15s ease-in-out;

  /* ---- Pont Bootstrap ---- */
  --bs-body-font-family: var(--app-font);
  --bs-body-font-size: var(--app-font-size);
  --bs-body-color: var(--app-text);
  /* Surfaces Bootstrap (cartes, dropdowns, modales) blanches ; le fond gris est porté par chaque body d'espace */
  --bs-body-bg: var(--app-surface);
  --bs-tertiary-bg: var(--app-background);
  --bs-emphasis-color: var(--app-heading);
  --bs-secondary-color: var(--app-muted);
  --bs-border-color: var(--app-border);
  --bs-border-radius: var(--app-radius);
  --bs-border-radius-sm: var(--app-radius-sm);
  --bs-border-radius-lg: var(--app-radius-lg);
  --bs-primary: var(--theme-primary);
  --bs-primary-rgb: var(--theme-primary-rgb);
  --bs-danger: var(--app-danger);
  --bs-danger-rgb: var(--app-danger-rgb);
  --bs-link-color: var(--theme-primary);
  --bs-link-color-rgb: var(--theme-primary-rgb);
  --bs-link-hover-color: var(--theme-primary-hover);
  --bs-focus-ring-color: rgba(var(--theme-primary-rgb), .25);
  --bs-heading-color: var(--app-heading);
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  letter-spacing: -.01em;
}

a {
  text-decoration: none;
}

.text-muted,
.text-secondary {
  color: var(--app-muted) !important;
}

.small, small {
  font-size: var(--app-font-size-sm);
}

.fw-medium {
  font-weight: 500 !important;
}

/* Accessibilité : focus toujours visible au clavier */
:focus-visible {
  outline: 2px solid rgba(var(--theme-primary-rgb), .6);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  padding: .5rem 1rem;
  border-radius: var(--app-radius);
  background: var(--app-surface);
  color: var(--app-heading);
  box-shadow: var(--app-shadow-lg);
  font-weight: 600;
}

.skip-link:focus {
  top: 1rem;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
}

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn {
  --bs-btn-font-size: var(--app-font-size);
  --bs-btn-font-weight: 500;
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: .5rem;
  --bs-btn-border-radius: var(--app-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.btn-sm {
  --bs-btn-font-size: var(--app-font-size-sm);
  --bs-btn-padding-x: .75rem;
  --bs-btn-padding-y: .375rem;
}

.btn-lg {
  --bs-btn-font-size: 1rem;
  --bs-btn-padding-x: 1.375rem;
  --bs-btn-padding-y: .75rem;
  --bs-btn-border-radius: var(--app-radius);
}

.btn-primary {
  --bs-btn-color: var(--theme-on-primary);
  --bs-btn-bg: var(--theme-primary);
  --bs-btn-border-color: var(--theme-primary);
  --bs-btn-hover-color: var(--theme-on-primary);
  --bs-btn-hover-bg: var(--theme-primary-hover);
  --bs-btn-hover-border-color: var(--theme-primary-hover);
  --bs-btn-active-color: var(--theme-on-primary);
  --bs-btn-active-bg: var(--theme-primary-hover);
  --bs-btn-active-border-color: var(--theme-primary-hover);
  --bs-btn-disabled-color: var(--theme-on-primary);
  --bs-btn-disabled-bg: var(--theme-primary);
  --bs-btn-disabled-border-color: var(--theme-primary);
  --bs-btn-focus-shadow-rgb: var(--theme-primary-rgb);
}

/* Bouton de marque (secondaire) : CTA du site public */
.btn-brand {
  --bs-btn-color: var(--theme-on-secondary);
  --bs-btn-bg: var(--theme-secondary);
  --bs-btn-border-color: var(--theme-secondary);
  --bs-btn-hover-color: var(--theme-on-secondary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--theme-secondary) 88%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--theme-secondary) 88%, #000);
  --bs-btn-active-color: var(--theme-on-secondary);
  --bs-btn-active-bg: color-mix(in srgb, var(--theme-secondary) 80%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--theme-secondary) 80%, #000);
  --bs-btn-disabled-color: var(--theme-on-secondary);
  --bs-btn-disabled-bg: var(--theme-secondary);
  --bs-btn-disabled-border-color: var(--theme-secondary);
  --bs-btn-focus-shadow-rgb: var(--theme-secondary-rgb);
  box-shadow: 0 6px 16px rgba(var(--theme-secondary-rgb), .25);
}

/* Bouton blanc bordé (« Nouveau dossier », « Sélectionner des fichiers ») */
.btn-outline-secondary,
.btn-white {
  --bs-btn-color: var(--app-heading);
  --bs-btn-bg: var(--app-surface);
  --bs-btn-border-color: var(--app-border-strong);
  --bs-btn-hover-color: var(--app-heading);
  --bs-btn-hover-bg: var(--app-surface-muted);
  --bs-btn-hover-border-color: #c3cbd6;
  --bs-btn-active-color: var(--app-heading);
  --bs-btn-active-bg: #eef1f5;
  --bs-btn-active-border-color: #c3cbd6;
  --bs-btn-disabled-color: var(--app-subtle);
  --bs-btn-disabled-bg: var(--app-surface);
  --bs-btn-disabled-border-color: var(--app-border);
  --bs-btn-focus-shadow-rgb: var(--theme-primary-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--theme-primary);
  --bs-btn-border-color: rgba(var(--theme-primary-rgb), .45);
  --bs-btn-hover-color: var(--theme-on-primary);
  --bs-btn-hover-bg: var(--theme-primary);
  --bs-btn-hover-border-color: var(--theme-primary);
  --bs-btn-active-bg: var(--theme-primary-hover);
  --bs-btn-active-border-color: var(--theme-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--theme-primary-rgb);
}

.btn-danger {
  --bs-btn-bg: var(--app-danger);
  --bs-btn-border-color: var(--app-danger);
  --bs-btn-hover-bg: #cf3a3f;
  --bs-btn-hover-border-color: #cf3a3f;
  --bs-btn-active-bg: #b93237;
  --bs-btn-active-border-color: #b93237;
  --bs-btn-disabled-bg: var(--app-danger);
  --bs-btn-disabled-border-color: var(--app-danger);
}

/* Bouton icône carré (barres d'actions, vues liste/grille) */
.btn-icon {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  width: 2.375rem;
  height: 2.375rem;
  flex: 0 0 auto;
}

.btn-icon.btn-sm {
  width: 2rem;
  height: 2rem;
}

.btn-ghost {
  --bs-btn-color: var(--app-muted);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--app-heading);
  --bs-btn-hover-bg: #eef1f5;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--app-heading);
  --bs-btn-active-bg: #e6eaf0;
  --bs-btn-active-border-color: transparent;
}

/* État de chargement (ButtonLoader) */
.btn.is-loading {
  cursor: progress;
  pointer-events: none;
}

.btn .spinner-border {
  --bs-spinner-width: 1rem;
  --bs-spinner-height: 1rem;
  --bs-spinner-border-width: .15em;
}

/* ==========================================================================
   Formulaires
   ========================================================================== */
.form-label {
  font-weight: 500;
  color: var(--app-heading);
  margin-bottom: .375rem;
}

/* Légende d'un groupe de champs utilisée comme libellé : même taille qu'un libellé (Bootstrap lui donne celle d'un titre) */
legend.form-label {
  font-size: var(--bs-body-font-size);
  line-height: var(--bs-body-line-height);
}

.form-control,
.form-select {
  --bs-border-color: var(--app-border-strong);
  font-size: var(--app-font-size);
  padding: .5625rem .875rem;
  border-radius: var(--app-radius);
  color: var(--app-heading);
}

.form-control::placeholder {
  color: var(--app-subtle);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: rgba(var(--theme-primary-rgb), .6);
  box-shadow: 0 0 0 .2rem rgba(var(--theme-primary-rgb), .15);
}

.form-check-input {
  border-color: #c3cbd6;
}

/* :indeterminate limité aux cases à cocher : un groupe de boutons radio sans sélection y répond aussi */
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

.form-text {
  color: var(--app-muted);
  font-size: var(--app-font-size-sm);
}

.input-icon {
  position: relative;
}

.input-icon > .fa-solid,
.input-icon > .fa-regular {
  position: absolute;
  left: .875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--app-subtle);
  pointer-events: none;
}

.input-icon > .form-control {
  padding-left: 2.5rem;
}

.input-icon > .form-control.has-action {
  padding-right: 2.75rem;
}

/* Action dans le champ (afficher le mot de passe…) */
.input-icon > .input-action {
  position: absolute;
  right: .375rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--app-radius);
  background: transparent;
  color: var(--app-subtle);
}

.input-icon > .input-action:hover,
.input-icon > .input-action:focus-visible {
  color: var(--theme-primary);
  background: rgba(var(--theme-primary-rgb), .08);
}

/* ==========================================================================
   Cartes, tableaux, listes
   ========================================================================== */
.card {
  --bs-card-border-color: var(--app-border);
  --bs-card-border-radius: var(--app-radius-lg);
  --bs-card-inner-border-radius: calc(var(--app-radius-lg) - 1px);
  --bs-card-cap-bg: var(--app-surface);
  --bs-card-spacer-x: 1.25rem;
  --bs-card-spacer-y: 1.125rem;
  box-shadow: var(--app-shadow-sm);
}

.card-header {
  font-weight: 600;
  color: var(--app-heading);
}

.card-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0;
}

.table {
  --bs-table-color: var(--app-text);
  --bs-table-border-color: #eef1f5;
  --bs-table-hover-bg: #f7f9fc;
  --bs-table-hover-color: var(--app-text);
  --bs-table-active-bg: rgba(var(--theme-primary-rgb), .06);
  margin-bottom: 0;
  font-size: var(--app-font-size);
}

.table > thead th {
  font-size: var(--app-font-size-sm);
  font-weight: 500;
  color: var(--app-muted);
  white-space: nowrap;
  padding-top: .75rem;
  padding-bottom: .75rem;
  border-bottom-color: var(--app-border);
}

.table > :not(caption) > * > * {
  padding: .625rem .75rem;
  vertical-align: middle;
}

.table tr.is-selected > * {
  --bs-table-bg-state: rgba(var(--theme-primary-rgb), .06);
}

.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   Badges, avatars, icônes
   ========================================================================== */
.badge {
  --bs-badge-font-weight: 500;
  --bs-badge-padding-x: .5rem;
  --bs-badge-padding-y: .3125rem;
  --bs-badge-border-radius: 999px;
}

.badge-soft-success { color: var(--app-success); background: var(--app-success-soft); }
.badge-soft-warning { color: #b45309; background: var(--app-warning-soft); }
.badge-soft-danger { color: #c62f34; background: var(--app-danger-soft); }
.badge-soft-info { color: var(--theme-primary); background: rgba(var(--theme-primary-rgb), .1); }
.badge-soft-purple { color: var(--app-purple); background: var(--app-purple-soft); }
.badge-soft-secondary { color: var(--app-muted); background: #eef1f5; }

.avatar {
  --avatar-size: 2.5rem;
  width: var(--avatar-size);
  height: var(--avatar-size);
  flex: 0 0 var(--avatar-size);
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--theme-primary-rgb), .12);
  color: var(--theme-primary);
  font-weight: 600;
  font-size: calc(var(--avatar-size) * .38);
  line-height: 1;
  user-select: none;
}

.avatar-sm { --avatar-size: 2rem; }
.avatar-xs { --avatar-size: 1.625rem; }
.avatar-lg { --avatar-size: 3.5rem; }

.avatar-stack {
  display: flex;
  align-items: center;
}

.avatar-stack > .avatar {
  border: 2px solid var(--app-surface);
  margin-left: -.5rem;
}

.avatar-stack > .avatar:first-child {
  margin-left: 0;
}

/* Tuile d'icône colorée (cartes statistiques, fonctionnalités) */
.icon-tile {
  --tile-size: 3.125rem;
  --tile-color: var(--theme-primary);
  --tile-bg: rgba(var(--theme-primary-rgb), .1);
  width: var(--tile-size);
  height: var(--tile-size);
  flex: 0 0 var(--tile-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--app-radius-lg);
  background: var(--tile-bg);
  color: var(--tile-color);
  font-size: calc(var(--tile-size) * .42);
}

.icon-tile-sm { --tile-size: 2.25rem; border-radius: var(--app-radius); }
.icon-tile-primary { --tile-color: var(--theme-primary); --tile-bg: rgba(var(--theme-primary-rgb), .1); }
.icon-tile-success { --tile-color: var(--app-success); --tile-bg: var(--app-success-soft); }
.icon-tile-purple { --tile-color: var(--app-purple); --tile-bg: var(--app-purple-soft); }
.icon-tile-warning { --tile-color: var(--app-warning); --tile-bg: var(--app-warning-soft); }
.icon-tile-danger { --tile-color: var(--app-danger); --tile-bg: var(--app-danger-soft); }
.icon-tile-secondary { --tile-color: var(--theme-secondary); --tile-bg: rgba(var(--theme-secondary-rgb), .1); }

/* Icône de fichier par type */
.file-icon {
  --file-color: var(--file-other);
  color: var(--file-color);
  font-size: 1.25rem;
  width: 1.5rem;
  text-align: center;
  flex: 0 0 auto;
}

.file-icon-lg { font-size: 2.5rem; width: 3rem; }
.file-icon-folder { --file-color: var(--file-folder); }
.file-icon-pdf { --file-color: var(--file-pdf); }
.file-icon-word { --file-color: var(--file-word); }
.file-icon-excel { --file-color: var(--file-excel); }
.file-icon-powerpoint { --file-color: var(--file-powerpoint); }
.file-icon-image { --file-color: var(--file-image); }
.file-icon-video { --file-color: var(--file-video); }
.file-icon-audio { --file-color: var(--file-audio); }
.file-icon-archive { --file-color: var(--file-archive); }
.file-icon-text { --file-color: var(--file-text); }
.file-icon-publisher { --file-color: var(--file-publisher); }

/* ==========================================================================
   Navigation Bootstrap : breadcrumb, onglets, dropdowns, modales, pagination
   ========================================================================== */
.breadcrumb {
  --bs-breadcrumb-margin-bottom: 0;
  --bs-breadcrumb-item-padding-x: .625rem;
  --bs-breadcrumb-divider-color: var(--app-subtle);
  --bs-breadcrumb-item-active-color: var(--app-heading);
  --bs-breadcrumb-divider: "\f105";
  font-size: var(--app-font-size-sm);
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  font-size: .75rem;
}

.breadcrumb-item {
  white-space: nowrap;
}

.breadcrumb-item a {
  color: var(--app-muted);
}

.breadcrumb-item a:hover {
  color: var(--theme-primary);
}

.breadcrumb-item.active {
  font-weight: 600;
}

.breadcrumb-home {
  font-size: 1.05rem;
}

.nav-underline {
  --bs-nav-underline-gap: 1.5rem;
  --bs-nav-link-color: var(--app-muted);
  --bs-nav-link-hover-color: var(--app-heading);
  --bs-nav-underline-link-active-color: var(--theme-primary);
  --bs-nav-link-font-weight: 500;
  border-bottom: 1px solid var(--app-border);
}

.nav-underline .nav-link {
  padding-bottom: .75rem;
}

.dropdown-menu {
  --bs-dropdown-border-color: var(--app-border);
  --bs-dropdown-border-radius: var(--app-radius-lg);
  --bs-dropdown-box-shadow: var(--app-shadow-lg);
  --bs-dropdown-font-size: var(--app-font-size);
  --bs-dropdown-link-color: var(--app-text);
  --bs-dropdown-link-hover-bg: #f3f5f9;
  --bs-dropdown-link-active-bg: rgba(var(--theme-primary-rgb), .1);
  --bs-dropdown-link-active-color: var(--theme-primary);
  --bs-dropdown-item-padding-y: .5rem;
  --bs-dropdown-padding-x: .375rem;
  box-shadow: var(--bs-dropdown-box-shadow);
}

.dropdown-item {
  border-radius: var(--app-radius-sm);
  display: flex;
  align-items: center;
  gap: .625rem;
}

.dropdown-item > i {
  width: 1rem;
  text-align: center;
  color: var(--app-muted);
}

.dropdown-item.text-danger > i {
  color: inherit;
}

.modal {
  --bs-modal-border-radius: var(--app-radius-xl);
  --bs-modal-border-color: transparent;
  --bs-modal-box-shadow: var(--app-shadow-lg);
  --bs-modal-header-border-color: var(--app-border);
  --bs-modal-footer-border-color: var(--app-border);
}

.modal-title {
  font-size: 1.0625rem;
  font-weight: 600;
}

.offcanvas {
  --bs-offcanvas-border-color: var(--app-border);
}

.pagination {
  --bs-pagination-color: var(--app-text);
  --bs-pagination-border-color: var(--app-border);
  --bs-pagination-hover-bg: #f3f5f9;
  --bs-pagination-hover-color: var(--app-heading);
  --bs-pagination-active-bg: var(--theme-primary);
  --bs-pagination-active-border-color: var(--theme-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--theme-primary-rgb), .15);
  --bs-pagination-font-size: var(--app-font-size-sm);
  margin-bottom: 0;
}

.progress {
  --bs-progress-height: .375rem;
  --bs-progress-bg: #e7ebf1;
  --bs-progress-bar-bg: var(--theme-primary);
  --bs-progress-border-radius: 999px;
}

.alert {
  --bs-alert-border-radius: var(--app-radius-lg);
}

/* ==========================================================================
   États : vide, erreur, skeleton, overlay
   ========================================================================== */
.state-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  gap: .375rem;
}

.state-block .state-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.625rem;
  margin-bottom: .75rem;
  background: rgba(var(--theme-primary-rgb), .08);
  color: var(--theme-primary);
}

.state-block.is-error .state-icon {
  background: var(--app-danger-soft);
  color: var(--app-danger);
}

.state-block .state-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--app-heading);
  margin: 0;
}

.state-block .state-text {
  color: var(--app-muted);
  max-width: 28rem;
  margin: 0 0 .75rem;
}

.skeleton {
  display: block;
  border-radius: var(--app-radius-sm);
  background: linear-gradient(90deg, #eef1f5 25%, #f7f9fc 37%, #eef1f5 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  min-height: .875rem;
}

.skeleton-row {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .75rem 0;
}

@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.is-overlay-host {
  position: relative;
}

.loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  border-radius: inherit;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(1px);
  color: var(--app-muted);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   Marque
   ========================================================================== */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  color: inherit;
  min-width: 0;
}

.brand-logo {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.brand-name {
  display: block;
  font-family: var(--app-font-display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.brand-tagline {
  display: block;
  font-size: var(--app-font-size-xs);
  opacity: .8;
  white-space: nowrap;
}

/* ==========================================================================
   Toaster (plugin existant) : alignement sur la typographie du produit
   ========================================================================== */
.toaster-container {
  font-family: var(--app-font);
}

/* ==========================================================================
   Utilitaires absents de Bootstrap
   ========================================================================== */
.min-w-0 {
  min-width: 0;
}

/* ==========================================================================
   Champs enrichis (core/fields.js) : Modern Select et Flatpickr aux couleurs de l'organisation
   ========================================================================== */
.ms-wrapper.ms-theme-app {
  --ms-color: var(--theme-primary);
  --ms-color-hover: var(--theme-primary-hover);
  --ms-color-soft: rgba(var(--theme-primary-rgb), .06);
  --ms-color-soft-2: rgba(var(--theme-primary-rgb), .12);
  --ms-color-ring: rgba(var(--theme-primary-rgb), .15);
  --ms-text: var(--app-heading);
  --ms-text-muted: var(--app-subtle);
  --ms-border-strong: var(--app-border-strong);
  --ms-radius: var(--app-radius);
  font-size: var(--app-font-size);
}

/* Même hauteur et même bordure qu'un .form-select Bootstrap */
.ms-wrapper.ms-theme-app .ms-control {
  min-height: calc(1.5em + 1.125rem + 2px);
  padding: .5625rem .875rem;
  font-size: var(--app-font-size);
  border-color: var(--app-border-strong);
  border-radius: var(--app-radius);
}

.form-select-sm + .ms-wrapper.ms-theme-app .ms-control {
  min-height: calc(1.5em + .5rem + 2px);
  padding: .25rem .625rem;
  font-size: var(--app-font-size-sm);
}

.ms-wrapper.is-invalid .ms-control {
  border-color: var(--app-danger);
}

.ms-wrapper.is-invalid ~ .invalid-feedback {
  display: block;
}

/* Les listes ouvertes dans une modale ou un tableau passent au-dessus du contenu voisin */
.ms-wrapper.ms-open {
  z-index: 1060;
}

.flatpickr-calendar {
  font-family: inherit;
  border-radius: var(--app-radius);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: var(--theme-primary);
  border-color: var(--theme-primary);
}

.flatpickr-day.today {
  border-color: rgba(var(--theme-primary-rgb), .6);
}

/* Champ visible de Flatpickr (altInput) : lecture seule native, mais il doit garder l'apparence d'un champ actif */
.form-control.flatpickr-input[readonly]:not([disabled]) {
  background-color: var(--app-surface);
}

/* Erreur rendue côté serveur (@error) sur le select d'origine */
.ms-native.is-invalid + .ms-wrapper .ms-control {
  border-color: var(--app-danger);
}

/* Liste placée dans une ligne flex (filtres compacts) : largeur du contenu */
.d-flex > .ms-wrapper {
  width: auto;
  min-width: 11rem;
}

/* ==========================================================================
   Lot 20 — aperçu intégré (espace de travail et liens de partage publics)
   ========================================================================== */

/* Aperçu intégré : PDF (iframe), image, texte, Markdown */
.preview-modal .modal-body {
  min-height: 60vh;
  padding: 0;
  display: flex;
  background: var(--bs-tertiary-bg);
}

.preview-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  position: relative;
}

.preview-frame {
  width: 100%;
  height: 75vh;
  border: 0;
  background: #fff;
}

.preview-image {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  margin: 1rem;
  box-shadow: var(--app-shadow-sm, 0 1px 2px rgba(16, 24, 40, .08));
  background: repeating-conic-gradient(#f1f3f5 0% 25%, #fff 0% 50%) 50% / 16px 16px;
}

.preview-text {
  align-self: stretch;
  width: 100%;
  max-height: 75vh;
  overflow: auto;
  margin: 0;
  padding: 1.25rem 1.5rem;
  font-size: .8125rem;
  white-space: pre-wrap;
  word-break: break-word;
  background: #fff;
}

.preview-markdown {
  align-self: stretch;
  width: 100%;
  max-height: 75vh;
  overflow: auto;
  padding: 1.5rem 2rem;
  background: #fff;
}

.preview-markdown img {
  max-width: 100%;
}

.preview-markdown pre {
  padding: .75rem 1rem;
  border-radius: var(--app-radius-sm, 6px);
  background: var(--bs-tertiary-bg);
}

@media (max-width: 575.98px) {
  .preview-frame,
  .preview-text,
  .preview-markdown {
    height: calc(100vh - 8rem);
    max-height: none;
  }
}