/* =============================================================================
   STOCK-SOFT : design system (app-ui)

   Chargée APRÈS toutes les autres feuilles (style.css, mobile.css, style_pos.css,
   style_login.css). Elle porte la seule source de vérité des couleurs, rayons,
   ombres et durées de l'application.

   Règle d'or : aucune valeur de couleur, de rayon, d'ombre ou de durée hors des
   blocs de jetons (sections 1 à 5). Le nouveau code n'utilise que --app-*.

   1. Jetons canoniques, thème clair
   2. Jetons du thème sombre   [data-bs-theme="dark"] sur <html>, écran seulement
   3. Contraste renforcé       (prefers-contrast), thème clair seulement
   4. Alias historiques        (--primary-green, --rt-*, --pos-*, --aide-*, --cam-*)
   5. Pont Bootstrap 5.3       --bs-*
   6. Base et coque            fond de page, barre haute, menu, bouton de thème
   7. Thème sombre : composants Bootstrap et écrans existants
   8. Thème sombre : composants tiers (SweetAlert, dselect, Select2, Quill…)
   9. Impression               toujours en clair

   Le thème est posé sur <html data-bs-theme="light|dark"> avant le premier
   rendu par le script en ligne de <head>, puis piloté par assets/js/app-theme.js.

   Les jetons sombres sont dans @media screen : à l'impression, les jetons clairs
   s'appliquent d'office, quel que soit le thème choisi à l'écran.

   Contraintes WebView Android (terminaux Sunmi, Chromium ancien) : pas de
   clamp()/min()/max(), pas de gap en flexbox, pas d'inset ni de :has.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Jetons canoniques, thème clair
   ----------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  /* Marque */
  --app-primary: #4a2d7a;
  --app-primary-2: #6b42a8;
  --app-primary-3: #7c52bf;
  --app-primary-hover: #3d2566;
  --app-primary-active: #2d1b4e;
  --app-primary-solid: #4a2d7a;          /* aplats en texte blanc : 10,8:1 */
  --app-primary-soft: #f2edfa;
  --app-primary-rgb: 74, 45, 122;
  --app-accent: #8b6cc1;                 /* icônes, filets, puces : jamais du texte */

  /* États : couleur pleine · fond doux · texte · filet */
  --app-success: #38ad46;
  --app-success-soft: #e3f6e8;
  --app-success-text: #1c7c34;
  --app-success-border: #b7e1c1;
  --app-warning: #ffc107;
  --app-warning-soft: #fef3c7;
  --app-warning-text: #92400e;
  --app-warning-border: #fcd34d;
  /* Critique : entre danger et warning (alerte d approvisionnement, stock < moitié du seuil) */
  --app-critical: #fd7e14;
  --app-critical-soft: #fdebd9;
  --app-critical-text: #b54708;
  --app-critical-border: #f9c08f;
  --app-danger: #dc3545;
  --app-danger-soft: #fdeaea;
  --app-danger-text: #b32020;
  --app-danger-border: #f5c2c7;
  --app-info: #2196f3;
  --app-info-soft: #e2f1fd;
  --app-info-text: #0d6a9e;
  --app-info-border: #b6dcf7;
  --app-success-solid: #1c7c34;          /* aplats en texte blanc : 5,3:1 */
  --app-danger-solid: #b32020;           /* aplats en texte blanc : 6,7:1 */
  --app-success-solid-hover: #166a2c;
  --app-danger-solid-hover: #952020;
  --app-info-solid: #0d6a9e;           /* aplats info en texte blanc : 5,9:1 */
  --app-info-solid-hover: #0a5783;
  --app-warning-hover: #e0a800;

  /* Surfaces */
  --app-bg: #e8e3f0;
  --app-surface: #ffffff;
  --app-surface-2: #f3eff8;
  --app-surface-3: #e8e3f0;
  --app-surface-hover: #f2edfa;

  /* Texte */
  --app-text: #2d1b4e;
  --app-text-secondary: #5b5270;
  --app-text-muted: #6b6283;             /* 4,5:1 sur le fond de page */
  --app-text-on-primary: #ffffff;

  /* Filets et saisie */
  --app-border: #ebe8f2;
  --app-border-strong: #d8cfe6;
  --app-input-bg: #ffffff;
  --app-input-border: #8f82ab;           /* 3,5:1 : limite de composant */

  /* Coque (barre haute et menu violet foncé conservés) */
  --app-topbar-bg: #2d1b4e;
  --app-topbar-text: #ffffff;
  --app-topbar-hover: rgba(255, 255, 255, 0.12);
  --app-topbar-line: rgba(255, 255, 255, 0.22);
  --app-sidebar-bg: #2d1b4e;
  --app-sidebar-text: #e3dcf3;
  --app-sidebar-hover: #3d2566;
  --app-sidebar-active-bg: #4a2d7a;
  --app-sidebar-active-text: #ffffff;
  --app-sidebar-line: #8b6cc1;
  --app-backdrop: rgba(20, 12, 35, 0.5);
  --app-scroll-shadow: rgba(45, 27, 78, 0.16);
  --app-text-on-warning: #2d1b4e;       /* texte sur aplat jaune : 9,4:1 */
  /* Pastilles d avatar (texte blanc, 5:1 minimum) */
  --app-avatar-1: #4a2d7a;
  --app-avatar-2: #0369a1;
  --app-avatar-3: #b45309;
  --app-avatar-4: #15803d;
  --app-avatar-5: #b91c1c;
  --app-avatar-6: #6d28d9;
  --app-avatar-7: #be185d;
  --app-avatar-8: #0e7490;

  /* Géométrie */
  --app-radius-sm: 6px;
  --app-radius: 8px;
  --app-radius-lg: 12px;
  --app-radius-pill: 999px;
  --app-space-1: 4px;
  --app-space-2: 8px;
  --app-space-3: 12px;
  --app-space-4: 16px;
  --app-space-5: 24px;
  --app-space-6: 32px;
  --app-space-7: 48px;
  --app-topbar-h: 60px;
  --app-sidebar-w: 268px;
  --app-sidebar-w-mini: 76px;

  /* Élévation */
  --app-shadow-xs: 0 1px 2px rgba(45, 27, 78, 0.06);
  --app-shadow-sm: 0 1px 3px rgba(45, 27, 78, 0.08), 0 1px 2px rgba(45, 27, 78, 0.04);
  --app-shadow-md: 0 4px 12px rgba(45, 27, 78, 0.10);
  --app-shadow-lg: 0 12px 32px rgba(45, 27, 78, 0.16);

  /* Interaction */
  --app-focus-ring: 0 0 0 3px rgba(74, 45, 122, 0.30);
  --app-disabled-bg: #e8e3f0;
  --app-disabled-text: #8a809f;

  /* Typographie */
  --app-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --app-font-mono: SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Mouvement */
  --app-ease: cubic-bezier(0.2, 0, 0, 1);
  --app-dur-fast: 150ms;
  --app-dur: 200ms;
  --app-dur-slow: 300ms;
  --app-transition: var(--app-dur) var(--app-ease);

  /* Triplets RVB exigés par Bootstrap (rgba(var(--bs-…-rgb), a)) */
  --app-text-rgb: 45, 27, 78;
  --app-surface-rgb: 255, 255, 255;
  --app-surface-2-rgb: 243, 239, 248;
  --app-text-secondary-rgb: 91, 82, 112;
  --app-link-rgb: 74, 45, 122;
  --app-link-hover-rgb: 61, 37, 102;
  --app-success-rgb: 28, 124, 52;
  --app-info-rgb: 13, 106, 158;          /* aplat .bg-info sous texte blanc */
  --app-warning-rgb: 255, 193, 7;
  --app-danger-rgb: 220, 53, 69;

  color-scheme: light;
}

/* -----------------------------------------------------------------------------
   2. Jetons du thème sombre (écran seulement : l'impression reste en clair)
   Les aplats de marque gardent un violet soutenu (texte blanc 7,1:1) ; la
   marque en tant que texte passe au violet clair (7,3:1 sur la surface).
   ----------------------------------------------------------------------------- */
@media screen {
  [data-bs-theme="dark"] {
    --app-primary: #b69ceb;
    --app-primary-2: #6b42a8;
    --app-primary-3: #9d7fd6;
    --app-primary-hover: #7c52bf;
    --app-primary-active: #5a3a91;
    --app-primary-solid: #6b42a8;
    --app-primary-soft: #2a2342;
    --app-primary-rgb: 182, 156, 235;
    --app-accent: #8b6cc1;

    --app-success: #4ade80;
    --app-success-soft: #16311f;
    --app-success-text: #86efac;
    --app-success-border: #245c35;
    --app-warning: #fbbf24;
    --app-warning-soft: #3a2c0c;
    --app-warning-text: #fcd34d;
    --app-warning-border: #6b5314;
    --app-critical: #fb923c;
    --app-critical-soft: #3a220d;
    --app-critical-text: #fdba74;
    --app-critical-border: #6b3d14;
    --app-danger: #f87171;
    --app-danger-soft: #3a1717;
    --app-danger-text: #fca5a5;
    --app-danger-border: #6b2a2a;
    --app-info: #60a5fa;
    --app-info-soft: #102a43;
    --app-info-text: #93c5fd;
    --app-info-border: #1e4a73;
    --app-success-solid: #1f7a37;        /* texte blanc : 5,4:1 */
    --app-danger-solid: #b02a37;         /* texte blanc : 6,5:1 */
    --app-success-solid-hover: #186a30;
    --app-danger-solid-hover: #8f2330;
    --app-info-solid: #1d5fa8;
    --app-info-solid-hover: #174f8c;
    --app-warning-hover: #f59e0b;

    --app-bg: #151122;
    --app-surface: #1d1830;
    --app-surface-2: #251f3b;
    --app-surface-3: #2e2748;
    --app-surface-hover: #2a2342;

    --app-text: #ece8f5;
    --app-text-secondary: #b9b0cf;
    --app-text-muted: #9a90b3;
    --app-text-on-primary: #ffffff;

    --app-border: #342c4d;
    --app-border-strong: #463c66;
    --app-input-bg: #151122;
    --app-input-border: #6f6390;

    --app-topbar-bg: #1d1830;
    --app-topbar-text: #ece8f5;
    --app-topbar-hover: rgba(255, 255, 255, 0.08);
    --app-topbar-line: rgba(255, 255, 255, 0.12);
    --app-sidebar-bg: #120e1d;
    --app-sidebar-text: #d6cfe8;
    --app-sidebar-hover: #251f3b;
    --app-sidebar-active-bg: #6b42a8;
    --app-sidebar-active-text: #ffffff;
    --app-sidebar-line: #8b6cc1;
    --app-backdrop: rgba(0, 0, 0, 0.6);
    --app-scroll-shadow: rgba(0, 0, 0, 0.55);
    --app-text-on-warning: #1d1830;

    --app-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
    --app-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.25);
    --app-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --app-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

    --app-focus-ring: 0 0 0 3px rgba(182, 156, 235, 0.40);
    --app-disabled-bg: #251f3b;
    --app-disabled-text: #7d7396;

    --app-text-rgb: 236, 232, 245;
    --app-surface-rgb: 29, 24, 48;
    --app-surface-2-rgb: 37, 31, 59;
    --app-text-secondary-rgb: 185, 176, 207;
    --app-link-rgb: 182, 156, 235;
    --app-link-hover-rgb: 208, 192, 243;
    --app-success-rgb: 31, 122, 55;
    --app-info-rgb: 29, 95, 168;
    --app-warning-rgb: 251, 191, 36;
    --app-danger-rgb: 220, 53, 69;

    color-scheme: dark;
  }
}

/* -----------------------------------------------------------------------------
   3. Contraste renforcé : déclinaison violette du bloc de style.css (qui
   repassait l'application en vert). Thème clair seulement.
   ----------------------------------------------------------------------------- */
@media (prefers-contrast: more), (prefers-contrast: high) {
  :root:not([data-bs-theme="dark"]) {
    --app-primary: #2d1b4e;
    --app-primary-2: #3d2566;
    --app-primary-3: #4a2d7a;
    --app-primary-solid: #2d1b4e;
    --app-primary-hover: #1f1236;
    --app-primary-active: #000000;
    --app-accent: #4a2d7a;
    --app-surface: #ffffff;
    --app-text: #000000;
    --app-text-secondary: #2d1b4e;
    --app-text-muted: #3d3552;
    --app-border: #8f82ab;
    --app-border-strong: #4a2d7a;
    --app-input-border: #2d1b4e;
  }
}

/* -----------------------------------------------------------------------------
   4. Alias historiques : l'ancien CSS suit la palette sans duplication.
   Les espacements et largeurs de style.css (--spacing-*, --sidebar-width,
   --header-height) ne sont PAS repris : style.css les redéfinit par media
   query et un alias ici écraserait ces variantes.
   ----------------------------------------------------------------------------- */
:root {
  /* style.css / style_login.css (noms « green » hérités, marque violette) */
  --primary-green: var(--app-primary);
  --secondary-green: var(--app-primary-2);
  --other-secondary-green: var(--app-primary-3);
  --accent-green: var(--app-accent);
  --accent-light-green: var(--app-primary-soft);   /* utilisé sans jamais avoir été défini */
  --dark-forest: var(--app-primary-active);
  --sage-gray: var(--app-surface-3);
  --natural-white: var(--app-surface);
  --earth-brown: var(--app-text);
  --golden-yellow: var(--app-warning);
  --wheat-gold: var(--app-warning-border);
  --sky-blue: var(--app-info-solid);
  --water-blue: var(--app-info-text);   /* surtout du texte : 5,9:1 */
  --success-green: var(--app-success);
  --error-red: var(--app-danger);
  --warning-orange: var(--app-warning);

  --border-radius: var(--app-radius);
  --border-radius-sm: var(--app-radius-sm);
  --border-radius-lg: var(--app-radius-lg);
  --shadow-sm: var(--app-shadow-sm);
  --shadow-md: var(--app-shadow-md);
  --shadow-lg: var(--app-shadow-lg);
  --transition-fast: var(--app-dur-fast) var(--app-ease);
  --transition-normal: var(--app-dur) var(--app-ease);
  --transition-slow: var(--app-dur-slow) var(--app-ease);

  /* Module Retours (rt-) */
  --rt-primary: var(--app-primary);
  --rt-primary-2: var(--app-primary-2);
  --rt-primary-soft: var(--app-primary-soft);
  --rt-primary-line: var(--app-border-strong);
  --rt-ink: var(--app-text);
  --rt-muted: var(--app-text-muted);
  --rt-line: var(--app-border);
  --rt-surface: var(--app-surface);
  --rt-bg: var(--app-surface-2);
  --rt-radius: var(--app-radius-lg);

  /* Caisses autonomes (style_pos.css) */
  --pos-primary: var(--app-primary);
  --pos-secondary: var(--app-primary-2);
  --pos-accent: var(--app-accent);
  --pos-dark: var(--app-primary-active);
  --pos-light: var(--app-surface-2);
  --pos-white: var(--app-surface);
  --pos-gray: var(--app-text-muted);
  --pos-border: var(--app-border-strong);
  --pos-success: var(--app-success);
  --pos-danger: var(--app-danger);
}

/* En sombre, les anciennes variables servent à la fois de fond (texte blanc
   posé dessus) et de couleur de texte. Les aplats gardent un violet soutenu ;
   les emplois en texte sont repris en section 7. */
@media screen {
  [data-bs-theme="dark"] {
    --primary-green: var(--app-primary-solid);
    --secondary-green: var(--app-primary-2);
    --dark-forest: var(--app-text);
    /* --natural-white sert surtout de texte blanc sur un aplat (57 emplois) ;
       ses emplois en fond (cartes…) sont repris en section 7 bis. */
    --natural-white: var(--app-text-on-primary);
    --rt-primary: var(--app-primary-solid);
    --pos-primary: var(--app-primary-solid);
    --pos-dark: var(--app-text);
  }
}

/* Centre d'aide : aide-assistant.css est chargée dans <body>, donc après cette
   feuille ; html:root l'emporte par la spécificité, pas par l'ordre. */
html:root {
  --aide-violet: var(--app-primary);
  --aide-violet-fonce: var(--app-primary-active);
  --aide-violet-clair: var(--app-primary-soft);
  --aide-bordure: var(--app-border);
  --aide-texte: var(--app-text);
  --aide-muted: var(--app-text-muted);
}

/* En sombre, --aide-violet et --aide-violet-fonce restent des violets soutenus :
   ils peignent l'en-tête, les bulles, les liens et le bouton Envoyer sous un
   texte blanc. Leurs emplois en couleur de texte sont repris juste après. */
@media screen {
  html:root[data-bs-theme="dark"] {
    --aide-violet: var(--app-primary-solid);
    --aide-violet-fonce: var(--app-primary-active);
    --aide-violet-clair: var(--app-primary-soft);
  }

  html[data-bs-theme="dark"] .aide-contexte,
  html[data-bs-theme="dark"] .aide-carte .aide-module,
  html[data-bs-theme="dark"] .aide-carte ul.aide-tirets li::before,
  html[data-bs-theme="dark"] .dropdown-item.aide-toggle[aria-expanded="true"] {
    color: var(--app-primary);
  }

  html[data-bs-theme="dark"] .aide-carte h3,
  html[data-bs-theme="dark"] .aide-suggestions .aide-suggestion,
  html[data-bs-theme="dark"] .aide-actions-secondaires .aide-bouton-secondaire {
    color: var(--app-text);
  }

  html[data-bs-theme="dark"] .aide-suggestions .aide-suggestion,
  html[data-bs-theme="dark"] .aide-actions-secondaires .aide-bouton-secondaire {
    background-color: var(--app-surface-2);
    border-color: var(--app-border-strong);
  }

  html[data-bs-theme="dark"] .aide-suggestions .aide-suggestion:hover,
  html[data-bs-theme="dark"] .aide-suggestions .aide-suggestion:focus-visible,
  html[data-bs-theme="dark"] .aide-suggestions .aide-suggestion.module,
  html[data-bs-theme="dark"] .aide-actions-secondaires .aide-bouton-secondaire:hover,
  html[data-bs-theme="dark"] .aide-actions-secondaires .aide-bouton-secondaire:focus-visible {
    background-color: var(--app-primary-soft);
    border-color: var(--app-primary);
    color: var(--app-text);
  }

  html[data-bs-theme="dark"] .aide-actions-secondaires .aide-bouton-secondaire.danger {
    color: var(--app-danger-text);
  }

  html[data-bs-theme="dark"] .aide-actions-secondaires .aide-bouton-secondaire.danger:hover {
    background-color: var(--app-danger-soft);
    border-color: var(--app-danger-border);
  }

  html[data-bs-theme="dark"] .aide-carte .aide-notes {
    background-color: var(--app-warning-soft);
    border-left-color: var(--app-warning);
    color: var(--app-text);
  }

  html[data-bs-theme="dark"] .aide-composer textarea::placeholder {
    color: var(--app-text-muted);
  }

  html[data-bs-theme="dark"] .aide-panel {
    box-shadow: var(--app-shadow-lg);
  }
}

/* Module Camion : aligné sur la structure commune (2026-09-22). Ses styles sont
   dans style.css, section « Gestion camion (cam-) », et n'utilisent que les
   jetons --app-* : plus d'alias --cam-* ni de feuille camion.css. Les règles
   « .cam-module … » qui subsistent en section 7 bis ne visent plus rien. */

/* -----------------------------------------------------------------------------
   5. Pont Bootstrap 5.3 : utilitaires et composants suivent le système.
   Déclaré sur :root, [data-bs-theme] pour primer sur les valeurs que Bootstrap
   pose lui-même sur [data-bs-theme=dark]. Les valeurs passent par des var() :
   elles suivent donc le thème sans être redéclarées.
   ----------------------------------------------------------------------------- */
:root,
[data-bs-theme] {
  --bs-primary: var(--app-primary-solid);
  --bs-primary-rgb: 74, 45, 122;
  --bs-success: var(--app-success-text);
  --bs-success-rgb: var(--app-success-rgb);
  --bs-info: var(--app-info-solid);
  --bs-info-rgb: var(--app-info-rgb);
  --bs-warning: var(--app-warning);
  --bs-warning-rgb: var(--app-warning-rgb);
  --bs-danger: var(--app-danger);
  --bs-danger-rgb: var(--app-danger-rgb);

  --bs-primary-text-emphasis: var(--app-primary);
  --bs-success-text-emphasis: var(--app-success-text);
  --bs-info-text-emphasis: var(--app-info-text);
  --bs-warning-text-emphasis: var(--app-warning-text);
  --bs-danger-text-emphasis: var(--app-danger-text);
  --bs-primary-bg-subtle: var(--app-primary-soft);
  --bs-success-bg-subtle: var(--app-success-soft);
  --bs-info-bg-subtle: var(--app-info-soft);
  --bs-warning-bg-subtle: var(--app-warning-soft);
  --bs-danger-bg-subtle: var(--app-danger-soft);
  --bs-primary-border-subtle: var(--app-border-strong);
  --bs-success-border-subtle: var(--app-success-border);
  --bs-info-border-subtle: var(--app-info-border);
  --bs-warning-border-subtle: var(--app-warning-border);
  --bs-danger-border-subtle: var(--app-danger-border);

  --bs-body-font-family: var(--app-font);
  --bs-font-monospace: var(--app-font-mono);
  --bs-body-color: var(--app-text);
  --bs-body-color-rgb: var(--app-text-rgb);
  /* Bootstrap 5.3 peint cartes, modales, menus, champs et tableaux avec
     --bs-body-bg : c'est la surface. Le fond de page est posé en section 6. */
  --bs-body-bg: var(--app-surface);
  --bs-body-bg-rgb: var(--app-surface-rgb);
  --bs-emphasis-color: var(--app-text);
  --bs-secondary-color: var(--app-text-muted);
  --bs-secondary-color-rgb: var(--app-text-secondary-rgb);
  --bs-secondary-bg: var(--app-surface-3);
  --bs-secondary-bg-rgb: var(--app-surface-2-rgb);
  --bs-tertiary-color: var(--app-text-muted);
  --bs-tertiary-bg: var(--app-surface-2);
  --bs-tertiary-bg-rgb: var(--app-surface-2-rgb);
  --bs-heading-color: inherit;
  --bs-border-color: var(--app-border);
  --bs-border-color-translucent: 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-border-radius-pill: var(--app-radius-pill);
  --bs-link-color: var(--app-primary);
  --bs-link-color-rgb: var(--app-link-rgb);
  --bs-link-hover-color: var(--app-primary-hover);
  --bs-link-hover-color-rgb: var(--app-link-hover-rgb);
  --bs-focus-ring-color: rgba(var(--app-primary-rgb), 0.30);
  --bs-form-valid-color: var(--app-success-text);
  --bs-form-valid-border-color: var(--app-success);
  --bs-form-invalid-color: var(--app-danger-text);
  --bs-form-invalid-border-color: var(--app-danger);
}

@media screen {
  [data-bs-theme="dark"] {
    --bs-primary-rgb: 107, 66, 168;      /* aplats .bg-primary : texte blanc */
    --bs-link-hover-color: #d0c0f3;
  }
}

/* -----------------------------------------------------------------------------
   6. Base et coque
   ----------------------------------------------------------------------------- */
body {
  background-color: var(--app-bg);
  color: var(--app-text);
}

.header {
  background-color: var(--app-topbar-bg);
}

.sidebar {
  background-color: var(--app-sidebar-bg);
}

/* Bouton de thème de la barre haute (lune en clair, soleil en sombre) */
.app-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--app-radius-pill);
  background: transparent;
  color: var(--app-topbar-text);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--app-transition);
}

.app-theme-toggle:hover {
  background-color: var(--app-topbar-hover);
}

.app-theme-toggle:focus-visible {
  outline: 0;
  box-shadow: var(--app-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .app-theme-toggle {
    transition: none;
  }
}

/* -----------------------------------------------------------------------------
   6 bis. Coque : barre haute et menu latéral (lot 3)
   Sélecteurs par id (#header, #sidebar) : ils priment sur style.css et sur les
   reprises générées de la section 7 bis sans recourir à !important.
   Menu : en-tête fixe · liste (seule zone qui défile) · pied fixe.
   À partir de 1200 px : menu fixe, réductible (html[data-app-sidebar="mini"]).
   En dessous : tiroir par la gauche (body.toggle-sidebar) au-dessus d'un voile.
   Déplacements par « left » et « width », jamais par transform (WebView).
   ----------------------------------------------------------------------------- */

/* Le translateZ(0) hérité de style.css créait un bloc conteneur : tout élément
   en position fixe placé dans #main (menus de listes, panneaux) y était enfermé. */
.sidebar,
.header,
#main {
  transform: none;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

/* ---- Barre haute ---- */
#header.header {
  height: var(--app-topbar-h);
  background-color: var(--app-topbar-bg);
  border-bottom: 1px solid var(--app-topbar-line);
  box-shadow: var(--app-shadow-sm);
}

.app-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--app-radius);
  background: transparent;
  color: var(--app-topbar-text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--app-transition);
}

.app-icon-btn:hover {
  background-color: var(--app-topbar-hover);
}

.app-icon-btn:focus-visible,
#header .nav-profile:focus-visible {
  outline: 0;
  box-shadow: var(--app-focus-ring);
}

#header .app-sidebar-toggle {
  margin-left: 6px;
}

#header .dropdown-header .app-profile-role {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--app-text-muted);
}

@media (min-width: 1200px) {
  #header .logo {
    width: calc(var(--app-sidebar-w) - 20px);
  }

  html[data-app-sidebar="mini"] #header .logo {
    width: auto;
  }
}

/* ---- Menu latéral : structure ---- */
#sidebar.sidebar {
  display: flex;
  flex-direction: column;
  top: var(--app-topbar-h);
  width: var(--app-sidebar-w);
  padding: 0;
  overflow: hidden;
  background-color: var(--app-sidebar-bg);
  color: var(--app-sidebar-text);
  border-right: 1px solid var(--app-topbar-line);
  box-shadow: none;
  transition: none;
}

#sidebar .app-sidebar__head {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  min-height: var(--app-topbar-h);
  padding: 0 16px;
  border-bottom: 1px solid var(--app-topbar-line);
  color: var(--app-sidebar-active-text);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
}

#sidebar .app-sidebar__head img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

#sidebar .app-sidebar__head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sidebar .app-sidebar__nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px 12px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--app-sidebar-hover) transparent;
  -webkit-overflow-scrolling: touch;
}

#sidebar .app-sidebar__nav::-webkit-scrollbar {
  width: 6px;
  background: transparent;
}

#sidebar .app-sidebar__nav::-webkit-scrollbar-thumb {
  background: var(--app-sidebar-hover);
  border-radius: var(--app-radius-pill);
}

#sidebar .app-sidebar__foot {
  display: flex;
  flex: 0 0 auto;
  padding: 8px 10px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--app-topbar-line);
}

#sidebar .app-sidebar__foot-link {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0 2px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--app-radius);
  background: transparent;
  color: var(--app-sidebar-text);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

#sidebar .app-sidebar__foot-link i {
  margin-right: 8px;
  font-size: 1.05rem;
}

#sidebar .app-sidebar__foot-link:hover {
  background-color: var(--app-sidebar-hover);
  color: var(--app-sidebar-active-text);
}

#sidebar .app-sidebar__foot-link:focus-visible {
  outline: 0;
  box-shadow: var(--app-focus-ring);
}

/* ---- Menu latéral : entrées ---- */
#sidebar .sidebar-nav .nav-item {
  margin-bottom: 2px;
}

#sidebar .sidebar-nav .nav-heading {
  margin: 16px 10px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-sidebar-text);
  opacity: 0.6;
}

#sidebar .sidebar-nav > .nav-heading:first-child {
  margin-top: 4px;
}

#sidebar .sidebar-nav .nav-link,
#sidebar .sidebar-nav .nav-link.collapsed {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: var(--app-radius);
  background: transparent;
  color: var(--app-sidebar-text);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transform: none;
  box-shadow: none;
  transition: background-color var(--app-transition), color var(--app-transition);
}

#sidebar .sidebar-nav .nav-link i,
#sidebar .sidebar-nav .nav-link.collapsed i {
  flex-shrink: 0;
  width: 22px;
  margin-right: 10px;
  font-size: 1.1rem;
  text-align: center;
  color: var(--app-sidebar-line);
}

#sidebar .sidebar-nav .nav-link span {
  flex: 1 1 auto;
  min-width: 0;
}

#sidebar .sidebar-nav .nav-link .bi-chevron-down {
  width: auto;
  margin: 0 0 0 8px;
  font-size: 0.75rem;
  color: var(--app-sidebar-text);
  opacity: 0.7;
  transition: transform var(--app-transition);
}

#sidebar .sidebar-nav .nav-link:hover,
#sidebar .sidebar-nav .nav-link[aria-expanded="true"] {
  background-color: var(--app-sidebar-hover);
  color: var(--app-sidebar-active-text);
}

#sidebar .sidebar-nav .nav-link:hover i {
  color: var(--app-sidebar-active-text);
}

#sidebar .sidebar-nav .nav-link:focus-visible,
#sidebar .sidebar-nav .nav-content a:focus-visible {
  outline: 0;
  box-shadow: var(--app-focus-ring);
}

/* Page active : aplat, texte clair et filet d'accent */
#sidebar .sidebar-nav .nav-link.active,
#sidebar .sidebar-nav .nav-content a.active {
  background-color: var(--app-sidebar-active-bg);
  color: var(--app-sidebar-active-text);
  box-shadow: inset 3px 0 0 var(--app-sidebar-line);
}

#sidebar .sidebar-nav .nav-link.active i,
#sidebar .sidebar-nav .is-active-group > .nav-link i {
  color: var(--app-sidebar-active-text);
}

#sidebar .sidebar-nav .is-active-group > .nav-link {
  color: var(--app-sidebar-active-text);
}

#sidebar .sidebar-nav .nav-content {
  margin: 0;
  padding: 2px 0 6px;
}

#sidebar .sidebar-nav .nav-content a {
  display: flex;
  align-items: center;
  min-height: 36px;
  margin: 1px 0;
  padding: 6px 12px 6px 44px;
  border: 0;
  border-radius: var(--app-radius);
  color: var(--app-sidebar-text);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color var(--app-transition), color var(--app-transition);
}

#sidebar .sidebar-nav .nav-content a i {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  font-size: 0;
  line-height: 0;
  border-radius: 50%;
  background-color: var(--app-sidebar-line);
}

#sidebar .sidebar-nav .nav-content a:hover {
  background-color: var(--app-sidebar-hover);
  color: var(--app-sidebar-active-text);
}

#sidebar .sidebar-nav .nav-content a.active {
  font-weight: 600;
}

#sidebar .sidebar-nav .nav-content a.active i {
  background-color: var(--app-sidebar-active-text);
}

/* ---- Ordinateur (≥ 1200 px) : menu fixe, réductible ---- */
@media (min-width: 1200px) {
  #sidebar.sidebar,
  .toggle-sidebar #sidebar.sidebar {
    left: 0;
  }

  #main,
  #footer,
  .toggle-sidebar #main,
  .toggle-sidebar #footer {
    margin-left: var(--app-sidebar-w);
  }

  html[data-app-sidebar="mini"] #sidebar.sidebar {
    width: var(--app-sidebar-w-mini);
  }

  html[data-app-sidebar="mini"] #main,
  html[data-app-sidebar="mini"] #footer,
  html[data-app-sidebar="mini"] .toggle-sidebar #main,
  html[data-app-sidebar="mini"] .toggle-sidebar #footer {
    margin-left: var(--app-sidebar-w-mini);
  }

  html[data-app-sidebar="mini"] #sidebar .app-sidebar__nav {
    padding: 10px 10px 14px;
  }

  /* Les intitulés de rubrique deviennent de simples séparateurs */
  html[data-app-sidebar="mini"] #sidebar .sidebar-nav .nav-heading {
    height: 1px;
    margin: 10px 8px;
    overflow: hidden;
    font-size: 0;
    opacity: 1;
    background-color: var(--app-topbar-line);
  }

  html[data-app-sidebar="mini"] #sidebar .sidebar-nav .nav-link {
    justify-content: center;
    padding: 10px 0;
  }

  html[data-app-sidebar="mini"] #sidebar .sidebar-nav .nav-link i {
    margin-right: 0;
    font-size: 1.25rem;
  }

  html[data-app-sidebar="mini"] #sidebar .sidebar-nav .nav-link span,
  html[data-app-sidebar="mini"] #sidebar .sidebar-nav .nav-link .bi-chevron-down,
  html[data-app-sidebar="mini"] #sidebar .app-sidebar__foot-link span {
    display: none;
  }

  /* Sous-menus : ouverts dans le panneau flottant, jamais en accordéon */
  html[data-app-sidebar="mini"] #sidebar .sidebar-nav .nav-content {
    display: none !important;
  }

  html[data-app-sidebar="mini"] #sidebar .sidebar-nav .is-active-group > .nav-link {
    background-color: var(--app-sidebar-active-bg);
    box-shadow: inset 3px 0 0 var(--app-sidebar-line);
  }

  html[data-app-sidebar="mini"] #sidebar .app-sidebar__foot {
    flex-direction: column;
  }

  html[data-app-sidebar="mini"] #sidebar .app-sidebar__foot-link {
    margin: 2px 0;
  }

  html[data-app-sidebar="mini"] #sidebar .app-sidebar__foot-link i {
    margin-right: 0;
  }

  html.app-shell-pret #sidebar.sidebar {
    transition: width var(--app-dur) var(--app-ease);
  }

  html.app-shell-pret #main,
  html.app-shell-pret #footer {
    transition: margin-left var(--app-dur) var(--app-ease);
  }
}

/* ---- Téléphone et tablette (< 1200 px) : tiroir ---- */
@media (max-width: 1199.98px) {
  #sidebar.sidebar {
    top: 0;
    left: -110%;
    width: var(--app-sidebar-w);
    max-width: 86vw;
    z-index: 1000;
  }

  .toggle-sidebar #sidebar.sidebar {
    left: 0;
    box-shadow: var(--app-shadow-lg);
  }

  #sidebar .app-sidebar__head {
    display: flex;
  }

  #sidebar .sidebar-nav .nav-link,
  #sidebar .sidebar-nav .nav-link.collapsed {
    min-height: 46px;
  }

  #sidebar .sidebar-nav .nav-content a {
    min-height: 42px;
  }

  #sidebarOverlay.app-backdrop {
    top: 0;
    z-index: 999;
    background-color: var(--app-backdrop);
  }

  /* Tiroir ouvert : la page ne défile plus derrière */
  body.toggle-sidebar {
    overflow: hidden;
  }

  html.app-shell-pret #sidebar.sidebar {
    transition: left var(--app-dur) var(--app-ease);
  }
}

/* ---- Recherche globale (Ctrl+K) ---- */
.app-search {
  position: relative;
  width: 320px;
  margin-left: 16px;
}

.app-search__icon {
  position: absolute;
  top: 50%;
  left: 12px;
  margin-top: -0.5em;
  line-height: 1;
  color: var(--app-topbar-text);
  opacity: 0.75;
  pointer-events: none;
}

#header .app-search__input {
  width: 100%;
  height: 38px;
  padding: 0 64px 0 36px;
  border: 1px solid var(--app-topbar-line);
  border-radius: var(--app-radius);
  background-color: var(--app-topbar-hover);
  color: var(--app-topbar-text);
  font-size: 0.875rem;
  outline: 0;
  transition: background-color var(--app-transition), border-color var(--app-transition);
}

#header .app-search__input::placeholder {
  color: var(--app-topbar-text);
  opacity: 0.7;
}

#header .app-search__input:focus {
  border-color: var(--app-sidebar-line);
  box-shadow: var(--app-focus-ring);
}

#header .app-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.app-search__kbd {
  position: absolute;
  top: 50%;
  right: 8px;
  margin-top: -10px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--app-topbar-line);
  border-radius: var(--app-radius-sm);
  background: transparent;
  color: var(--app-topbar-text);
  font-family: var(--app-font);
  font-size: 0.68rem;
  line-height: 18px;
  opacity: 0.8;
}

.app-search__results {
  position: absolute;
  top: 44px;
  left: 0;
  z-index: 1002;
  width: 100%;
  min-width: 300px;
  max-height: 360px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  background-color: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-lg);
}

.app-search__results [role="option"] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--app-radius);
  color: var(--app-text);
  font-size: 0.875rem;
  cursor: pointer;
}

.app-search__results [role="option"][aria-selected="true"],
.app-search__results [role="option"]:hover {
  background-color: var(--app-primary-soft);
}

.app-search__nom {
  font-weight: 600;
  margin-right: 10px;
}

.app-search__module {
  flex-shrink: 0;
  color: var(--app-text-muted);
  font-size: 0.75rem;
}

.app-search__vide {
  padding: 10px;
  color: var(--app-text-muted);
  font-size: 0.85rem;
}

.app-search-open-item {
  display: none;
}

@media (max-width: 991.98px) {
  .app-search {
    width: 220px;
  }

  .app-search__kbd {
    display: none;
  }

  #header .app-search__input {
    padding-right: 12px;
  }
}

/* Téléphone : la loupe ouvre le champ sous la barre haute */
@media (max-width: 767.98px) {
  .app-search {
    display: none;
  }

  .app-search-open-item {
    display: block;
  }

  .app-search.app-search--ouverte {
    display: block;
    position: fixed;
    top: var(--app-topbar-h);
    left: 0;
    right: 0;
    z-index: 997;
    width: auto;
    margin: 0;
    padding: 8px 12px;
    background-color: var(--app-topbar-bg);
    border-bottom: 1px solid var(--app-topbar-line);
    box-shadow: var(--app-shadow-md);
  }

  .app-search--ouverte .app-search__icon {
    left: 24px;
  }

  .app-search--ouverte .app-search__results {
    position: static;
    min-width: 0;
    margin-top: 6px;
  }
}

/* ---- Cloche d'alertes de stock ---- */
.app-bell {
  position: relative;
}

.app-bell__count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--app-radius-pill);
  background-color: var(--app-danger-solid);
  color: var(--app-text-on-primary);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--app-topbar-bg);
}

.app-bell__count[hidden] {
  display: none;
}

#header .app-bell__menu {
  width: 340px;
  max-width: 92vw;
  padding: 0;
  overflow: hidden;
}

.app-bell__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--app-border);
  color: var(--app-text);
  font-size: 0.9rem;
}

.app-bell__resume {
  margin-left: 10px;
  color: var(--app-text-muted);
  font-size: 0.75rem;
  text-align: right;
}

.app-bell__liste {
  max-height: 320px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.app-bell__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--app-border);
}

.app-bell__produit {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 10px;
}

.app-bell__nom {
  display: block;
  overflow: hidden;
  color: var(--app-text);
  font-size: 0.85rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-bell__code {
  display: block;
  color: var(--app-text-muted);
  font-size: 0.72rem;
}

.app-bell__niveau {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.app-bell__chiffres {
  margin-bottom: 3px;
  color: var(--app-text-secondary);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

/* Intégrité du stock : bloc rouge en tête de la cloche (models/ControleStock.php) */
.app-bell__integrite {
  padding: 10px 14px 6px;
  background: var(--app-danger-soft);
  border-bottom: 1px solid var(--app-danger-border);
  color: var(--app-danger-text);
}

.app-bell__integrite-titre {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 0.86rem;
  font-weight: 700;
}

.app-bell__anomalie {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  font-size: 0.78rem;
  color: var(--app-text);
  border-top: 1px solid var(--app-danger-border);
}

.app-bell__anomalie strong {
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.app-bell__anomalie span {
  color: var(--app-text-secondary);
}

.app-bell__anomalie--aide span {
  font-style: italic;
  color: var(--app-danger-text);
}

#header .app-bell__count.app-bell__count--danger {
  background: var(--app-danger-solid);
}

.app-bell__vide,
.app-bell__plus {
  padding: 14px;
  color: var(--app-text-muted);
  font-size: 0.85rem;
}

.app-bell__plus {
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 0.78rem;
}

.app-bell__vide i {
  margin-right: 6px;
  color: var(--app-success-text);
}

#header .app-bell__pied {
  display: block;
  padding: 10px 14px;
  border-top: 1px solid var(--app-border);
  color: var(--app-primary);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

#header .app-bell__pied:hover,
#header .app-bell__pied:focus-visible {
  outline: 0;
  background-color: var(--app-surface-hover);
}

/* ---- Menus de la barre haute : alertes et profil (refonte) ----
   Ordinateur : menus ancrés sous leur bouton. Téléphone (< 576 px) : panneau
   pleine largeur sous la barre haute, marges de 8 px, contenu jamais coupé.
   Le panneau neutralise le placement de Popper (inset / transform en ligne) :
   pas de transform sur un calque fixe ouvert (WebView Android). */

/* Alertes : liste lisible, noms sur deux lignes au lieu d'être tronqués */
#header .app-bell__menu {
  width: 380px;
  max-width: 94vw;
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-lg);
}

#header .app-bell__entete {
  display: block;
  padding: 14px 16px 12px;
  font-size: 1rem;
}

#header .app-bell__resume {
  display: block;
  margin: 2px 0 0;
  font-size: .8rem;
  text-align: left;
}

#header .app-bell__liste {
  max-height: 360px;
}

#header .app-bell__ligne {
  align-items: flex-start;
  padding: 10px 16px;
}

#header .app-bell__nom {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  text-overflow: clip;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#header .app-bell__code {
  margin-top: 2px;
  font-size: .75rem;
}

#header .app-bell__chiffres {
  font-size: .8rem;
  font-weight: 600;
}

#header .app-bell__pied {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-size: .9rem;
}

/* Profil : en-tête avec photo, entrées à hauteur de doigt, sortie à part */
#header .app-menu-profil {
  width: 280px;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-lg);
}

#header .app-menu-profil.dropdown-menu-arrow::before {
  display: none;
}

#header .app-menu-profil__entete {
  display: flex;
  align-items: center;
  margin: 0 0 6px;
  padding: 10px 10px 14px;
  border-bottom: 1px solid var(--app-border);
  text-align: left;
  white-space: normal;
}

#header .app-menu-profil__photo {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-right: 12px;
  object-fit: cover;
  border-radius: 50%;
  background-color: var(--app-surface-2);
  box-shadow: 0 0 0 2px var(--app-primary-soft);
}

#header .app-menu-profil__identite {
  min-width: 0;
}

#header .app-menu-profil__identite .profile-name {
  display: block;
  color: var(--app-text);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#header .app-menu-profil .app-profile-role {
  margin-top: 2px;
  color: var(--app-text-muted);
  font-size: .8rem;
}

#header .app-menu-profil .dropdown-item {
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--app-radius);
  color: var(--app-text);
  font-size: .9rem;
  cursor: pointer;
}

#header .app-menu-profil .dropdown-item i {
  width: 1.5rem;
  margin-right: 10px;
  color: var(--app-text-muted);
  font-size: 1.05rem;
  line-height: 1;
}

#header .app-menu-profil .dropdown-item:hover,
#header .app-menu-profil .dropdown-item:focus-visible {
  background-color: var(--app-surface-hover);
  color: var(--app-text);
}

#header .app-menu-profil .dropdown-item:hover i {
  color: var(--app-primary);
}

#header .app-menu-profil .dropdown-divider {
  margin: 6px 0;
  border-color: var(--app-border);
}

#header .app-menu-profil .app-menu-profil__sortie,
#header .app-menu-profil .app-menu-profil__sortie i {
  color: var(--app-danger-text);
}

#header .app-menu-profil .app-menu-profil__sortie:hover {
  background-color: var(--app-danger-soft);
  color: var(--app-danger-text);
}

/* Bouton profil de la barre haute : photo cerclée, nom + rôle, chevron */
#header .app-profil-bouton {
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  color: var(--app-topbar-text);
  transition: background-color var(--app-transition);
}

#header .app-profil-bouton:hover,
#header .app-profil-bouton[aria-expanded="true"] {
  background-color: var(--app-topbar-hover);
}

#header .app-profil-bouton .profile-image {
  flex: 0 0 auto;            /* jamais écrasée par la barre : reste un cercle */
  width: 36px;
  height: 36px;
  min-width: 36px;
  max-height: none;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* Téléphone et petite tablette : seule la photo est affichée, le bouton
   devient un cercle ajusté à elle (plus de pilule autour) */
@media (max-width: 767.98px) {
  #header .app-profil-bouton {
    gap: 0;
    padding: 2px;
    border-radius: 50%;
  }

  #header .app-profil-bouton .profile-image {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
}

@media (max-width: 575.98px) {
  #header .app-profil-bouton .profile-image {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }
}

#header .app-profil-bouton__texte {
  flex-direction: column;
  min-width: 0;
  max-width: 180px;
  line-height: 1.15;
  text-align: left;
}

#header .app-profil-bouton__texte .profile-name {
  overflow: hidden;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--app-topbar-text);
}

#header .app-profil-bouton__role {
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--app-topbar-text);
  opacity: 0.72;
}

#header .app-profil-bouton__chevron {
  font-size: 0.75rem;
  opacity: 0.8;
  transition: transform var(--app-transition);
}

#header .app-profil-bouton[aria-expanded="true"] .app-profil-bouton__chevron {
  transform: rotate(180deg);
}

/* Menu : en-tête enrichi (login, rôle, mode) et entrées décrites */
#header .app-menu-profil {
  width: 300px;
}

#header .app-menu-profil .app-menu-profil__photo {
  width: 52px;
  height: 52px;
}

#header .app-menu-profil__login {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--app-text-muted);
  overflow-wrap: anywhere;
}

#header .app-menu-profil__etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

#header .app-menu-profil__etiquette {
  padding: 1px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--app-primary);
  background: var(--app-primary-soft);
  border: 1px solid var(--app-border-strong);
  border-radius: 999px;
}

#header .app-menu-profil__etiquette--mode {
  color: var(--app-text-secondary);
  background: var(--app-surface-2);
  border-color: var(--app-border);
}

#header .app-menu-profil .app-menu-profil__item {
  display: flex;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  white-space: normal;
}

#header .app-menu-profil .app-menu-profil__item > i {
  margin-top: 2px;
}

#header .app-menu-profil__libelle {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-weight: 600;
  line-height: 1.3;
}

#header .app-menu-profil__libelle small {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--app-text-muted);
}

#header .app-menu-profil__pastille {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--app-text-muted);
}

#header .app-menu-profil__pastille--success { background: var(--app-success); }
#header .app-menu-profil__pastille--info { background: var(--app-info); }
#header .app-menu-profil__pastille--warning { background: var(--app-warning); }
#header .app-menu-profil__pastille--danger { background: var(--app-danger); }

#header .app-menu-profil .app-menu-profil__sortie .app-menu-profil__libelle {
  align-self: center;
}

@media (prefers-reduced-motion: reduce) {
  #header .app-profil-bouton__chevron {
    transition: none;
  }
}

/* Téléphone : panneaux pleine largeur sous la barre haute */
@media (max-width: 575.98px) {
  #header .app-bell__menu.show,
  #header .app-menu-profil.show {
    position: fixed !important;
    top: calc(var(--app-topbar-h) + 6px) !important;
    right: 8px !important;
    bottom: auto !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }

  #header .app-bell__menu.show {
    display: flex !important;
    flex-direction: column;
    max-height: 80vh;
    max-height: calc(100vh - var(--app-topbar-h) - 24px);
  }

  #header .app-bell__menu .app-bell__liste {
    flex: 1 1 auto;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #header .app-bell__entete,
  #header .app-bell__pied {
    flex: 0 0 auto;
  }
}

/* ---- Fenêtre « Mon profil » (#modalModifProfil, header.php) : carte d'identité
   en tête, trois sections légères, pied fixe. Jetons uniquement : clair et
   sombre sans règle dédiée. ---- */
.app-profil .modal-header {
  align-items: flex-start;
}

.app-profil__sous-titre {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--app-text-muted);
}

.app-profil__identite {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px;
  margin-bottom: 8px;
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
}

.app-profil__avatar {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
}

.app-profil__avatar .profile-preview {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--app-surface);
  box-shadow: var(--app-shadow-sm);
  background: var(--app-surface);
}

.app-profil__avatar-btn {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  font-size: 0.95rem;
  color: var(--app-text-on-primary);
  background: var(--app-primary-solid);
  border: 2px solid var(--app-surface);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.app-profil__avatar-btn:hover {
  background: var(--app-primary-solid-hover, var(--app-primary-2));
}

.app-profil__qui {
  flex: 1 1 auto;
  min-width: 0;
}

.app-profil__nom {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--app-text);
  overflow-wrap: anywhere;
}

.app-profil__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--app-text-secondary);
}

.app-profil__role {
  padding: 1px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--app-primary);
  background: var(--app-primary-soft);
  border: 1px solid var(--app-border-strong);
  border-radius: 999px;
}

.app-profil__photo {
  margin-top: 10px;
  max-width: 360px;
}

.app-profil__photo .form-label {
  margin-bottom: 4px;
  font-size: 0.78rem;
}

.app-profil__section {
  padding: 16px 0 4px;
  border-top: 1px solid var(--app-border);
  margin-top: 12px;
}

.app-profil__identite + .app-profil__section {
  border-top: 0;
  margin-top: 4px;
}

.app-profil__titre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--app-primary);
}

.app-profil__aide {
  margin: -6px 0 12px;
  font-size: 0.82rem;
  color: var(--app-text-muted);
}

.app-profil__option {
  margin-left: 4px;
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--app-text-muted);
}

.app-profil .password-strength .strength-text {
  display: block;
  margin-top: 4px;
  font-size: 0.76rem;
}

.app-profil .modal-footer .btn {
  min-height: 42px;
  padding-left: 1.1rem;
  padding-right: 1.1rem;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .app-profil__identite {
    flex-direction: column;
    text-align: center;
  }

  .app-profil__meta {
    justify-content: center;
  }

  .app-profil__photo {
    max-width: none;
    text-align: left;
  }

  .app-profil .modal-footer {
    flex-wrap: nowrap;
  }

  .app-profil .modal-footer .btn {
    flex: 1 1 0;
  }
}

/* ---- Fenêtre « Abonnement » (#modalAbonnement, header.php) : état en tête
   (compteur de jours + phrase), détails en liste, conseil de renouvellement.
   Teinte par état via --abo-* : jetons uniquement, clair et sombre. ---- */
.app-abo .modal-header {
  align-items: flex-start;
}

.app-abo__sous-titre {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--app-text-muted);
}

.app-abo__etat {
  --abo-fond: var(--app-surface-2);
  --abo-texte: var(--app-text-secondary);
  --abo-filet: var(--app-border);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  background: var(--abo-fond);
  border: 1px solid var(--abo-filet);
  border-left: 4px solid var(--abo-texte);
  border-radius: var(--app-radius-lg);
}

.app-abo__etat--success { --abo-fond: var(--app-success-soft); --abo-texte: var(--app-success-text); --abo-filet: var(--app-success-border); }
.app-abo__etat--info    { --abo-fond: var(--app-info-soft);    --abo-texte: var(--app-info-text);    --abo-filet: var(--app-info-border); }
.app-abo__etat--warning { --abo-fond: var(--app-warning-soft); --abo-texte: var(--app-warning-text); --abo-filet: var(--app-warning-border); }
.app-abo__etat--danger  { --abo-fond: var(--app-danger-soft);  --abo-texte: var(--app-danger-text);  --abo-filet: var(--app-danger-border); }

.app-abo__compteur {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 96px;
  padding: 8px;
  color: var(--abo-texte);
  background: var(--app-surface);
  border: 1px solid var(--abo-filet);
  border-radius: var(--app-radius-lg);
}

.app-abo__nombre {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.app-abo__unite {
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 600;
}

.app-abo__icone-seule {
  font-size: 2.2rem;
}

.app-abo__texte {
  min-width: 0;
}

.app-abo__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--abo-texte);
  background: var(--app-surface);
  border: 1px solid var(--abo-filet);
  border-radius: 999px;
}

.app-abo__phrase {
  margin: 8px 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--app-text);
}

.app-abo__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 0;
}

.app-abo__details > div {
  padding: 12px 14px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
}

.app-abo__details dt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--app-text-muted);
}

.app-abo__details dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--app-text);
  overflow-wrap: anywhere;
}

.app-abo__details dd span {
  margin-left: 4px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--app-text-muted);
}

.app-abo__conseil {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  font-size: 0.86rem;
  color: var(--app-text-secondary);
  background: var(--app-surface-2);
  border: 1px dashed var(--app-border-strong);
  border-radius: var(--app-radius);
}

.app-abo__conseil i {
  margin-top: 1px;
  color: var(--app-warning-text);
}

.app-abo .modal-footer .btn {
  min-height: 42px;
  padding-left: 1.1rem;
  padding-right: 1.1rem;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .app-abo__etat {
    flex-direction: column;
    text-align: center;
  }

  .app-abo__details {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-abo .modal-footer .btn {
    flex: 1 1 auto;
  }
}

/* ---- Badge d'état doux : fond -soft, texte -text, filet -border, toujours
   accompagné d'un libellé (jamais une couleur seule) ---- */
.app-badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: var(--app-radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.app-badge--danger {
  background-color: var(--app-danger-soft);
  border-color: var(--app-danger-border);
  color: var(--app-danger-text);
}

.app-badge--warning {
  background-color: var(--app-warning-soft);
  border-color: var(--app-warning-border);
  color: var(--app-warning-text);
}

.app-badge--success {
  background-color: var(--app-success-soft);
  border-color: var(--app-success-border);
  color: var(--app-success-text);
}

.app-badge--info {
  background-color: var(--app-info-soft);
  border-color: var(--app-info-border);
  color: var(--app-info-text);
}

/* ---- Panneau flottant du menu réduit ---- */
.app-flyout {
  position: fixed;
  z-index: 1001;
  min-width: 200px;
  max-width: 280px;
  padding: 6px;
  background-color: var(--app-surface);
  color: var(--app-text);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-lg);
}

.app-flyout[hidden] {
  display: none;
}

.app-flyout__title {
  display: block;
  padding: 8px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--app-text);
}

a.app-flyout__title--link {
  border-radius: var(--app-radius);
  text-decoration: none;
}

.app-flyout__list {
  margin: 2px 0 0;
  padding: 4px 0 0;
  list-style: none;
  border-top: 1px solid var(--app-border);
}

.app-flyout__list a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--app-radius);
  color: var(--app-text-secondary);
  font-size: 0.875rem;
  text-decoration: none;
}

.app-flyout__list a:hover,
.app-flyout__list a:focus-visible,
a.app-flyout__title--link:hover,
a.app-flyout__title--link:focus-visible {
  outline: 0;
  background-color: var(--app-surface-hover);
  color: var(--app-text);
}

.app-flyout__list a.active,
a.app-flyout__title--link.active {
  background-color: var(--app-primary-soft);
  color: var(--app-primary);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--app-primary);
}

@media (prefers-reduced-motion: reduce) {
  html.app-shell-pret #sidebar.sidebar,
  html.app-shell-pret #main,
  html.app-shell-pret #footer,
  #sidebar .sidebar-nav .nav-link,
  #sidebar .sidebar-nav .nav-content a,
  .app-icon-btn {
    transition: none;
  }
}

/* -----------------------------------------------------------------------------
   6 ter. Boutons et contrastes (les deux thèmes)
   Un seul système de boutons : principal violet (plus de bleu Bootstrap),
   annulation neutre (plus de rouge ni de gris Bootstrap), aplats d'état
   assombris pour porter un texte blanc au niveau AA. Préfixe « :root body »
   pour primer sur les couleurs écrites en dur dans style.css et sur les
   reprises générées de la section 7 bis.
   ----------------------------------------------------------------------------- */

/* ---- Principal ---- */
:root body .btn-primary {
  --bs-btn-color: var(--app-text-on-primary);
  --bs-btn-bg: var(--app-primary-solid);
  --bs-btn-border-color: var(--app-primary-solid);
  --bs-btn-hover-color: var(--app-text-on-primary);
  --bs-btn-hover-bg: var(--app-primary-hover);
  --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-active-color: var(--app-text-on-primary);
  --bs-btn-active-bg: var(--app-primary-active);
  --bs-btn-active-border-color: var(--app-primary-active);
  --bs-btn-disabled-color: var(--app-text-on-primary);
  --bs-btn-disabled-bg: var(--app-primary-solid);
  --bs-btn-disabled-border-color: var(--app-primary-solid);
  --bs-btn-focus-shadow-rgb: var(--app-primary-rgb);
}

/* Boutons maison de l'application (btnPage, btnModSave…) : même principal */
:root body .btnPage,
:root body .btnHeader,
:root body .btnParam,
:root body .btnModSave {
  background: var(--app-primary-solid);
  color: var(--app-text-on-primary);
  border: 1px solid var(--app-primary-solid);
}

:root body .btnPage:hover,
:root body .btnHeader:hover,
:root body .btnParam:hover,
:root body .btnModSave:hover {
  background: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
  color: var(--app-text-on-primary);
}

/* ---- Neutre : Annuler, Fermer, Retour ---- */
:root body .btn-secondary {
  --bs-btn-color: var(--app-text);
  --bs-btn-bg: var(--app-surface-2);
  --bs-btn-border-color: var(--app-border-strong);
  --bs-btn-hover-color: var(--app-text);
  --bs-btn-hover-bg: var(--app-surface-3);
  --bs-btn-hover-border-color: var(--app-input-border);
  --bs-btn-active-color: var(--app-text);
  --bs-btn-active-bg: var(--app-surface-3);
  --bs-btn-active-border-color: var(--app-input-border);
  --bs-btn-disabled-color: var(--app-disabled-text);
  --bs-btn-disabled-bg: var(--app-disabled-bg);
  --bs-btn-disabled-border-color: var(--app-border-strong);
  --bs-btn-focus-shadow-rgb: var(--app-primary-rgb);
}

:root body .btnModClose,
:root body .btnPageReturn {
  background: var(--app-surface-2);
  color: var(--app-text);
  border: 1px solid var(--app-border-strong);
}

:root body .btnModClose:hover,
:root body .btnPageReturn:hover {
  background: var(--app-surface-3);
  border-color: var(--app-input-border);
  color: var(--app-text);
}

/* ---- Aplats d'état ---- */
:root body .btn-success {
  --bs-btn-color: var(--app-text-on-primary);
  --bs-btn-bg: var(--app-success-solid);
  --bs-btn-border-color: var(--app-success-solid);
  --bs-btn-hover-color: var(--app-text-on-primary);
  --bs-btn-hover-bg: var(--app-success-solid-hover);
  --bs-btn-hover-border-color: var(--app-success-solid-hover);
  --bs-btn-active-color: var(--app-text-on-primary);
  --bs-btn-active-bg: var(--app-success-solid-hover);
  --bs-btn-active-border-color: var(--app-success-solid-hover);
  --bs-btn-disabled-color: var(--app-text-on-primary);
  --bs-btn-disabled-bg: var(--app-success-solid);
  --bs-btn-disabled-border-color: var(--app-success-solid);
}

:root body .btn-danger {
  --bs-btn-color: var(--app-text-on-primary);
  --bs-btn-bg: var(--app-danger-solid);
  --bs-btn-border-color: var(--app-danger-solid);
  --bs-btn-hover-color: var(--app-text-on-primary);
  --bs-btn-hover-bg: var(--app-danger-solid-hover);
  --bs-btn-hover-border-color: var(--app-danger-solid-hover);
  --bs-btn-active-color: var(--app-text-on-primary);
  --bs-btn-active-bg: var(--app-danger-solid-hover);
  --bs-btn-active-border-color: var(--app-danger-solid-hover);
  --bs-btn-disabled-color: var(--app-text-on-primary);
  --bs-btn-disabled-bg: var(--app-danger-solid);
  --bs-btn-disabled-border-color: var(--app-danger-solid);
}

:root body .btn-info {
  --bs-btn-color: var(--app-text-on-primary);
  --bs-btn-bg: var(--app-info-solid);
  --bs-btn-border-color: var(--app-info-solid);
  --bs-btn-hover-color: var(--app-text-on-primary);
  --bs-btn-hover-bg: var(--app-info-solid-hover);
  --bs-btn-hover-border-color: var(--app-info-solid-hover);
  --bs-btn-active-color: var(--app-text-on-primary);
  --bs-btn-active-bg: var(--app-info-solid-hover);
  --bs-btn-active-border-color: var(--app-info-solid-hover);
  --bs-btn-disabled-color: var(--app-text-on-primary);
  --bs-btn-disabled-bg: var(--app-info-solid);
  --bs-btn-disabled-border-color: var(--app-info-solid);
}

:root body .btn-warning {
  --bs-btn-color: var(--app-text-on-warning);
  --bs-btn-bg: var(--app-warning);
  --bs-btn-border-color: var(--app-warning);
  --bs-btn-hover-color: var(--app-text-on-warning);
  --bs-btn-hover-bg: var(--app-warning-hover);
  --bs-btn-hover-border-color: var(--app-warning-hover);
  --bs-btn-active-color: var(--app-text-on-warning);
  --bs-btn-active-bg: var(--app-warning-hover);
  --bs-btn-active-border-color: var(--app-warning-hover);
  --bs-btn-disabled-color: var(--app-text-on-warning);
  --bs-btn-disabled-bg: var(--app-warning);
  --bs-btn-disabled-border-color: var(--app-warning);
}

/* ---- Contours : texte d'état lisible, aplat plein au survol ---- */
:root body .btn-outline-primary {
  --bs-btn-color: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-color: var(--app-text-on-primary);
  --bs-btn-hover-bg: var(--app-primary-solid);
  --bs-btn-hover-border-color: var(--app-primary-solid);
  --bs-btn-active-color: var(--app-text-on-primary);
  --bs-btn-active-bg: var(--app-primary-active);
  --bs-btn-active-border-color: var(--app-primary-active);
  color: var(--app-primary);
  border-color: var(--app-primary);
}

:root body .btn-outline-secondary {
  --bs-btn-color: var(--app-text-secondary);
  --bs-btn-border-color: var(--app-border-strong);
  --bs-btn-hover-color: var(--app-text);
  --bs-btn-hover-bg: var(--app-surface-2);
  --bs-btn-hover-border-color: var(--app-input-border);
  --bs-btn-active-color: var(--app-text);
  --bs-btn-active-bg: var(--app-surface-3);
  --bs-btn-active-border-color: var(--app-input-border);
  color: var(--app-text-secondary);
  border-color: var(--app-border-strong);
}

:root body .btn-outline-success {
  --bs-btn-color: var(--app-success-text);
  --bs-btn-border-color: var(--app-success-text);
  --bs-btn-hover-color: var(--app-text-on-primary);
  --bs-btn-hover-bg: var(--app-success-solid);
  --bs-btn-hover-border-color: var(--app-success-solid);
  --bs-btn-active-color: var(--app-text-on-primary);
  --bs-btn-active-bg: var(--app-success-solid-hover);
  --bs-btn-active-border-color: var(--app-success-solid-hover);
  color: var(--app-success-text);
  border-color: var(--app-success-text);
}

:root body .btn-outline-danger {
  --bs-btn-color: var(--app-danger-text);
  --bs-btn-border-color: var(--app-danger-text);
  --bs-btn-hover-color: var(--app-text-on-primary);
  --bs-btn-hover-bg: var(--app-danger-solid);
  --bs-btn-hover-border-color: var(--app-danger-solid);
  --bs-btn-active-color: var(--app-text-on-primary);
  --bs-btn-active-bg: var(--app-danger-solid-hover);
  --bs-btn-active-border-color: var(--app-danger-solid-hover);
  color: var(--app-danger-text);
  border-color: var(--app-danger-text);
}

:root body .btn-outline-info {
  --bs-btn-color: var(--app-info-text);
  --bs-btn-border-color: var(--app-info-text);
  --bs-btn-hover-color: var(--app-text-on-primary);
  --bs-btn-hover-bg: var(--app-info-solid);
  --bs-btn-hover-border-color: var(--app-info-solid);
  --bs-btn-active-color: var(--app-text-on-primary);
  --bs-btn-active-bg: var(--app-info-solid-hover);
  --bs-btn-active-border-color: var(--app-info-solid-hover);
  color: var(--app-info-text);
  border-color: var(--app-info-text);
}

:root body .btn-outline-warning {
  --bs-btn-color: var(--app-warning-text);
  --bs-btn-border-color: var(--app-warning-text);
  --bs-btn-hover-color: var(--app-text-on-warning);
  --bs-btn-hover-bg: var(--app-warning);
  --bs-btn-hover-border-color: var(--app-warning);
  --bs-btn-active-color: var(--app-text-on-warning);
  --bs-btn-active-bg: var(--app-warning-hover);
  --bs-btn-active-border-color: var(--app-warning-hover);
  color: var(--app-warning-text);
  border-color: var(--app-warning-text);
}

:root body .btn-outline-primary:hover,
:root body .btn-outline-success:hover,
:root body .btn-outline-danger:hover,
:root body .btn-outline-info:hover {
  color: var(--app-text-on-primary);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

:root body .btn-outline-secondary:hover,
:root body .btn-outline-warning:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

/* Focus visible commun */
:root body .btn:focus-visible,
:root body .btnPage:focus-visible,
:root body .btnHeader:focus-visible,
:root body .btnParam:focus-visible,
:root body .btnModSave:focus-visible,
:root body .btnModClose:focus-visible,
:root body .btnPageReturn:focus-visible {
  outline: 0;
  box-shadow: var(--app-focus-ring);
}

/* ---- Fenêtres SweetAlert : les écrans passent des couleurs en dur
   (confirmButtonColor / cancelButtonColor), posées en style en ligne.
   Validation : violet de la marque, sauf sens explicite (danger, succès,
   alerte) conservé dans les couleurs du thème. Annulation : toujours neutre. */
.swal2-popup .swal2-actions .swal2-styled.swal2-confirm {
  background-color: var(--app-primary-solid) !important;
  color: var(--app-text-on-primary) !important;
  border: 1px solid transparent !important;
}

.swal2-popup .swal2-actions .swal2-styled.swal2-confirm[style*="rgb(221, 51, 51)"],
.swal2-popup .swal2-actions .swal2-styled.swal2-confirm[style*="rgb(220, 53, 69)"],
.swal2-popup .swal2-actions .swal2-styled.swal2-confirm[style*="rgb(220, 38, 38)"],
.swal2-popup .swal2-actions .swal2-styled.swal2-confirm[style*="rgb(192, 57, 43)"],
.swal2-popup .swal2-actions .swal2-styled.swal2-confirm[style*="rgb(239, 68, 68)"] {
  background-color: var(--app-danger-solid) !important;
}

/* Confirmation destructive déclarée explicitement (AppDialog.confirmer({danger}),
   confirmAndDelete) */
.swal2-popup .swal2-actions .swal2-styled.swal2-confirm.app-swal-danger {
  background-color: var(--app-danger-solid) !important;
}

.swal2-popup .swal2-actions .swal2-styled.swal2-confirm[style*="rgb(40, 167, 69)"],
.swal2-popup .swal2-actions .swal2-styled.swal2-confirm[style*="rgb(56, 173, 70)"],
.swal2-popup .swal2-actions .swal2-styled.swal2-confirm[style*="rgb(25, 135, 84)"] {
  background-color: var(--app-success-solid) !important;
}

.swal2-popup .swal2-actions .swal2-styled.swal2-confirm[style*="rgb(255, 193, 7)"] {
  background-color: var(--app-warning) !important;
  color: var(--app-text-on-warning) !important;
}

.swal2-popup .swal2-actions .swal2-styled.swal2-cancel,
.swal2-popup .swal2-actions .swal2-styled.swal2-deny {
  background-color: var(--app-surface-2) !important;
  color: var(--app-text) !important;
  border: 1px solid var(--app-border-strong) !important;
}

.swal2-popup .swal2-actions .swal2-styled:focus-visible,
.swal2-popup .swal2-actions .swal2-styled:focus {
  box-shadow: var(--app-focus-ring) !important;
}

/* ---- Contrastes AA de textes hérités ---- */
/* Fil d'Ariane et sous-titres de carte : #899bbd (2,2:1) remplacé */
:root body .breadcrumb,
:root body .breadcrumb-item,
:root body .breadcrumb-item.active,
:root body .breadcrumb-item + .breadcrumb-item::before,
:root body .card-title span {
  color: var(--app-text-muted);
}

:root body .breadcrumb a {
  color: var(--app-primary);
}

:root body .card-header,
:root body .card-footer {
  color: var(--app-text-secondary);
  border-color: var(--app-border);
}

/* Jaune et bleu clair illisibles en texte sur fond clair (1,6:1 et 3,1:1) */
:root body .text-warning:not([class*="bg-"]) {
  color: var(--app-warning-text) !important;
}

:root body .text-info:not([class*="bg-"]) {
  color: var(--app-info-text) !important;
}

/* Alertes Bootstrap : teinte douce de l'état, texte foncé de l'état, filet.
   style.css écrivait le texte dans la couleur vive (jaune 1,6:1, vert 2,9:1,
   bleu 3,1:1) et un dégradé sur .alert-success. */
:root body .alert-success {
  background: var(--app-success-soft);
  color: var(--app-success-text);
  border: 1px solid var(--app-success-border);
}

:root body .alert-danger {
  background: var(--app-danger-soft);
  color: var(--app-danger-text);
  border: 1px solid var(--app-danger-border);
}

:root body .alert-warning {
  background: var(--app-warning-soft);
  color: var(--app-warning-text);
  border: 1px solid var(--app-warning-border);
}

:root body .alert-info {
  background: var(--app-info-soft);
  color: var(--app-info-text);
  border: 1px solid var(--app-info-border);
}

:root body .alert-success .alert-heading,
:root body .alert-danger .alert-heading,
:root body .alert-warning .alert-heading,
:root body .alert-info .alert-heading,
:root body .alert-success h6,
:root body .alert-danger h6,
:root body .alert-warning h6,
:root body .alert-info h6 {
  color: inherit;
}

/* Gris hérités écrits en dur (#6c757d, #888, #9ca3af, #7b839a…) sur fond clair :
   en-têtes de tableau du tableau de bord, libellés, console SQL, inventaire */
:root body.page-dashboard-dashboard-admin .dashboard .table thead th,
:root body .stat-mini .stat-label,
:root body .dashboard .activity .activity-item .activite-label,
:root body .inv-toolbar .form-label,
:root body .inv-sub,
:root body .cs-table-item .cs-compte,
:root body .cs-raccourci {
  color: var(--app-text-muted);
}

/* Pastilles grises posées en style en ligne (#6b7280 sur #f3f4f6 : 4,4:1) */
:root body [style*="color:#6b7280" i],
:root body [style*="color: #6b7280" i] {
  color: var(--app-text-muted) !important;
}

/* Badges jaunes : texte foncé, jamais blanc */
:root body .badge.bg-warning,
:root body .badge.text-bg-warning {
  color: var(--app-text-on-warning) !important;
}

/* -----------------------------------------------------------------------------
   6 quater. Structure des pages (lot 4), les deux thèmes
   En-tête de page · cartes · modales · formulaires · animations.
   ----------------------------------------------------------------------------- */

/* ---- En-tête de page : titre, fil d'Ariane, action principale ---- */
:root body .pagetitle {
  margin-bottom: var(--app-space-5);
}

:root body .pagetitle h1 {
  margin-bottom: var(--app-space-1);
  color: var(--app-text);
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

:root body .pagetitle h1 > i {
  color: var(--app-primary);
}

:root body .pagetitle .breadcrumb {
  margin-bottom: 0;
  font-family: var(--app-font);
  font-size: 0.8125rem;
  font-weight: 500;
}

:root body .pagetitle .breadcrumb a {
  text-decoration: none;
}

:root body .pagetitle .breadcrumb a:hover {
  text-decoration: underline;
}

:root body .pagetitle .breadcrumb-item.active {
  color: var(--app-text-secondary);
}

/* ---- Cartes ---- */
:root body .card {
  background-color: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-sm);
}

:root body .card > .card-header:first-child {
  border-radius: var(--app-radius-lg) var(--app-radius-lg) 0 0;
}

:root body .card-title {
  color: var(--app-text);
  font-weight: 600;
}

/* ---- Modales : en-tête sobre, largeur standard ~580 px ---- */
:root body .modal {
  --bs-modal-width: 580px;
}

:root body .modal-content {
  background-color: var(--app-surface);
  color: var(--app-text);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-lg);
}

/* Les en-têtes colorés volontairement (bg-primary, bg-danger…, fond posé en
   style en ligne) gardent leur aplat */
:root body .modal-header:not([style*="background"]):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-dark):not(.bg-secondary):not(.bg-warning) {
  padding: 16px 20px;
  background-color: var(--app-surface);
  color: var(--app-text);
  border-bottom: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg) var(--app-radius-lg) 0 0;
}

:root body .modal-header:not([style*="background"]):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-dark):not(.bg-secondary):not(.bg-warning) .modal-title {
  color: var(--app-text);
  font-size: 1.05rem;
  font-weight: 700;
}

:root body .modal-header:not([style*="background"]):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-dark):not(.bg-secondary):not(.bg-warning) .modal-title > i {
  color: var(--app-primary);
}

/* Bouton de fermeture : sombre sur l'en-tête clair, clair sur un aplat coloré */
:root body .modal-header:not([style*="background"]):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-dark):not(.bg-secondary):not(.bg-warning) .btn-close,
:root body .modal-header:not([style*="background"]):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-dark):not(.bg-secondary):not(.bg-warning) .btn-close-white {
  filter: none;
  opacity: 0.6;
}

:root body .modal-header:not([style*="background"]):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-dark):not(.bg-secondary):not(.bg-warning) .btn-close:hover,
:root body .modal-header:not([style*="background"]):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-dark):not(.bg-secondary):not(.bg-warning) .btn-close-white:hover {
  opacity: 1;
}

:root body .modal-header[style*="gradient"] .btn-close,
:root body .modal-header.bg-primary .btn-close,
:root body .modal-header.bg-success .btn-close,
:root body .modal-header.bg-danger .btn-close,
:root body .modal-header.bg-info .btn-close,
:root body .modal-header.bg-dark .btn-close,
:root body .modal-header.bg-secondary .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.85;
}

:root body .modal-footer {
  padding: 12px 20px;
  background-color: var(--app-surface);
  border-top: 1px solid var(--app-border);
  border-radius: 0 0 var(--app-radius-lg) var(--app-radius-lg);
}

@media screen {
  :root[data-bs-theme="dark"] body .modal-header:not([style*="background"]):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-dark):not(.bg-secondary):not(.bg-warning) .btn-close,
  :root[data-bs-theme="dark"] body .modal-header:not([style*="background"]):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-dark):not(.bg-secondary):not(.bg-warning) .btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
  }
}

/* ---- Formulaires : libellé au-dessus, bord contrasté, focus visible ---- */
:root body .form-label {
  margin-bottom: 6px;
  color: var(--app-text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
}

:root body .form-control,
:root body .form-select {
  border-color: var(--app-input-border);
  border-radius: var(--app-radius);
}

:root body .form-control:focus,
:root body .form-select:focus,
:root body .form-check-input:focus {
  border-color: var(--app-primary);
  box-shadow: var(--app-focus-ring);
  outline: 0;
}

:root body .form-text,
:root body small.text-muted {
  color: var(--app-text-muted);
}

:root body .invalid-feedback {
  color: var(--app-danger-text);
}

:root body .form-control.is-invalid,
:root body .form-select.is-invalid {
  border-color: var(--app-danger);
}

:root body .form-control.is-valid,
:root body .form-select.is-valid {
  border-color: var(--app-success);
}

:root body .form-check-input:checked {
  background-color: var(--app-primary-solid);
  border-color: var(--app-primary-solid);
}

/* ---- Animations : fondu seul, sans transform conservé ----
   style.css animait tous les menus déroulants avec translateY et « both » :
   le transform restait posé après l'animation, ce qui enferme les éléments
   en position fixe et peut écraser le positionnement calculé par Bootstrap. */
@keyframes app-fondu {
  from { opacity: 0; }
  to { opacity: 1; }
}

:root body .dropdown-menu {
  animation: app-fondu var(--app-dur-fast) var(--app-ease) backwards;
}

/* Apparitions de style.css (slideUp, slideInUp, fadeInUp, acrApparition) :
   même fondu, sans translateY. Durées et courbes d'origine conservées. */
:root body .slide-up,
:root body .step-content.active,
:root body .responsive-pdf-viewer,
:root body .acr-anim {
  animation-name: app-fondu;
  animation-fill-mode: backwards;
}

@media (prefers-reduced-motion: reduce) {
  :root body .dropdown-menu,
  :root body .fade-in,
  :root body .slide-up,
  :root body .step-content.active,
  :root body .responsive-pdf-viewer,
  :root body .acr-anim {
    animation: none;
  }
}

/* Listes dselect : un libellé plus long que la liste (« Tous les utilisateurs »
   sur téléphone ou tablette) se termine par des points de suspension au lieu
   de passer sous la flèche ou de sortir du champ. */
.dselect-wrapper .dselect-bouton {
  min-width: 0;
  overflow: hidden;
}

.dselect-wrapper .dselect-bouton > span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Boutons d'action rangés par deux sur téléphone (mobile.css §4) : une colonne
   ne fait qu'environ 140 px à 360 px de large ; avec white-space: nowrap, un
   libellé comme « Gestion des statuts » ou « Dépenses PDF » sortait du bouton.
   Le libellé passe désormais à la ligne, centré, et le bouton grandit en
   hauteur. La grille de deux par rangée est conservée. */
@media (max-width: 767.98px) {
  .card-header > .float-end > .btn,
  .card-header > .float-end > .btn-group > .btn,
  .card-header > .float-end > .dropdown > .btn,
  .tab-pane .d-flex.flex-wrap > .btn,
  .tab-pane .d-flex.flex-wrap > .btnPage,
  .card-body .d-flex.flex-wrap > .btn,
  .card-body .d-flex.flex-wrap > .btnPage,
  .tab-pane .d-flex.justify-content-end > .btn,
  .card-body .d-flex.justify-content-end > .btn,
  .modal-body .d-flex.justify-content-end > .btn {
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.25;
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .card-header > .float-end {
    white-space: normal;
  }
}

/* Ombre de défilement des tableaux sur téléphone (mobile.css §2) : les caches
   qui masquent l'ombre en fin de course prennent la couleur de la surface au
   lieu du blanc, sinon une bande claire apparaît entre les cartes en sombre.
   Rendu identique en clair. */
@media (max-width: 767.98px) {
  .table-responsive {
    background:
      linear-gradient(to right, var(--app-surface) 30%, rgba(var(--app-surface-rgb), 0)) 0 0,
      linear-gradient(to left, var(--app-surface) 30%, rgba(var(--app-surface-rgb), 0)) 100% 0,
      radial-gradient(farthest-side at 0 50%, var(--app-scroll-shadow), transparent) 0 0,
      radial-gradient(farthest-side at 100% 50%, var(--app-scroll-shadow), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 44px 100%, 44px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* Barre haute des caisses autonomes (point_de_vente, point_vente_guichet) :
   même rendu que la barre de l'application (aplat --app-topbar-bg, logo et nom,
   boutons-icônes transparents). La hauteur de 56 px est conservée : la mise en
   page des caisses la soustrait (calc(100vh - 56px)). */
.pos-topbar {
  background: var(--app-topbar-bg);
  color: var(--app-topbar-text);
  box-shadow: var(--app-shadow-sm);
}

.pos-topbar .pos-brand-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 4px;
}

.pos-topbar .pos-brand-logo img {
  width: 32px;
  height: 32px;
  object-fit: cover;
}

.pos-topbar .pos-brand .pos-brand-app {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0;
}

.pos-topbar .pos-brand .pos-brand-page {
  margin-left: 2px;
  padding-left: 10px;
  border-left: 1px solid var(--app-topbar-line);
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0.85;
  letter-spacing: 0;
}

.pos-topbar .pos-info-item {
  opacity: 1;
}

.pos-topbar .pos-avatar {
  width: 28px;
  height: 28px;
  object-fit: cover;
  flex-shrink: 0;
}

.pos-topbar .pos-actions .btn-pos {
  background: transparent;
  border-color: transparent;
  color: var(--app-topbar-text);
  touch-action: manipulation;
}

.pos-topbar .pos-actions .btn-pos:not(.btn-pos-icon) {
  border-color: var(--app-topbar-line);
}

.pos-topbar .pos-actions .btn-pos:hover {
  background: var(--app-topbar-hover);
  color: var(--app-topbar-text);
  transform: none;
}

.pos-topbar .pos-actions .btn-pos:focus-visible {
  outline: 0;
  box-shadow: var(--app-focus-ring);
}

.pos-notification-dot {
  background: var(--app-danger);
}

/* Barre haute des caisses au téléphone (< 768 px). Sept éléments se
   serraient sur une ligne : nom du caissier tronqué (« WEB ... »), deux
   boutons vers l'accueil (logo et Dashboard), compteur « En cours » masqué
   avec les libellés. Désormais : logo, nom de l'écran et caissier sur deux
   lignes, état du réseau en pastille-icône, « En cours » avec son compteur
   (seulement s'il y a des factures), puis le menu « Plus d'actions »
   (partials/pos_menu_mobile.php) : Tableau de bord, Retour, Thème, Plein
   écran. Tablette et ordinateur inchangés. Pas de gap flex (WebView). */
.pos-topbar .pos-brand .pos-brand-mobile,
.pos-topbar .pos-menu-mobile {
  display: none;
}

@media (max-width: 767.98px) {
  .pos-topbar {
    gap: 0;
    padding: 0 6px 0 10px;
  }

  .pos-topbar .pos-brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0;
    margin-right: 6px;
  }

  .pos-topbar .pos-brand .pos-brand-app,
  .pos-topbar .pos-brand .pos-brand-page {
    display: none;
  }

  .pos-topbar .pos-brand-logo {
    margin-right: 10px;
  }

  .pos-topbar .pos-brand .pos-brand-mobile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.2;
  }

  .pos-topbar .pos-brand .pos-brand-mobile__titre,
  .pos-topbar .pos-brand .pos-brand-mobile__nom {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pos-topbar .pos-brand .pos-brand-mobile__titre {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
  }

  .pos-topbar .pos-brand .pos-brand-mobile__nom {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    opacity: 0.8;
  }

  /* Caissier déjà sous le nom de l'écran ; date et heure déjà masquées */
  .pos-topbar .pos-info {
    flex: 0 0 auto;
    margin-right: 2px;
  }

  .pos-topbar .pos-info .pos-info-item:nth-child(1) {
    display: none;
  }

  /* État du réseau : pastille ronde, icône seule (libellé lu au survol) */
  .pos-topbar .pos-network-status {
    display: flex;
  }

  .pos-topbar .pos-net-label {
    display: none;
  }

  .pos-topbar .pos-net-badge,
  .pos-topbar .pos-network-status .badge {
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
  }

  .pos-topbar .pos-net-badge i,
  .pos-topbar .pos-network-status .badge i {
    font-size: 0.95rem;
  }

  .pos-topbar .pos-network-status .badge {
    display: inline-flex;
    align-items: center;
  }

  .pos-topbar .pos-actions {
    gap: 0;
  }

  .pos-topbar .pos-actions > .pos-action-large {
    display: none;
  }

  .pos-topbar .pos-actions > .btn-pos,
  .pos-topbar .pos-actions > .btn-pos:not(.btn-pos-icon),
  .pos-topbar .pos-menu-mobile > .btn-pos {
    justify-content: center;
    min-width: 40px;
    height: 40px;
    margin-left: 2px;
    padding: 0 9px;
    border-color: transparent;
  }

  .pos-topbar .pos-actions .btn-pos i {
    font-size: 1.1rem;
  }

  .pos-topbar .pos-actions .btn-pos .pos-libelle {
    display: none;
  }

  /* Compteur « En cours » : visible seulement s'il y a des factures */
  .pos-topbar .pos-actions .btn-pos .badge {
    display: none;
  }

  .pos-topbar .pos-actions .btn-pos .badge.est-visible {
    display: inline-block;
    min-width: 18px;
    margin-left: 3px;
    padding: 2px 5px;
    border-radius: 9px;
    font-size: 0.68rem;
    line-height: 1.1;
  }

  .pos-topbar .pos-menu-mobile {
    display: block;
  }

  .pos-topbar .pos-menu-mobile__liste {
    min-width: 13rem;
  }

  .pos-topbar .pos-menu-mobile__liste .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    touch-action: manipulation;
  }

  .pos-topbar .pos-menu-mobile__liste .dropdown-item i {
    width: 1.25rem;
    margin-right: 0.75rem;
    font-size: 1.05rem;
    text-align: center;
  }
}

/* -----------------------------------------------------------------------------
   6 quinquies. Alerte d'approvisionnement (assets/js/alerte-stock.js)
   Styles autrefois injectés par le script avec des couleurs en dur : ils
   suivent maintenant les jetons, donc le thème. Gravité toujours portée par
   un libellé (pastilles, filet et pourcentage ne font que la doubler).
   WebView SUNMI : pas de gap flex (marges), pas de min() sans repli.
   ----------------------------------------------------------------------------- */
.swal2-popup.als-popup {
  width: 94vw;
  max-width: 640px;
  padding-bottom: 1.2em;
}

.als-entete {
  display: flex;
  align-items: center;
  text-align: left;
  margin: 0 0 .35rem;
}

.als-entete-icone {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--app-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-right: .65rem;
  background: var(--app-critical-soft);
  color: var(--app-critical-text);
  border: 1px solid var(--app-critical-border);
}

.als-entete-titre {
  font-weight: 700;
  color: var(--app-text);
  font-size: 1.12rem;
  line-height: 1.25;
}

.als-entete-sous {
  color: var(--app-text-secondary);
  font-size: .85rem;
}

.als-resume {
  display: flex;
  flex-wrap: wrap;
  margin: .6rem 0 .35rem;
}

.als-chip {
  display: inline-flex;
  align-items: center;
  padding: .28rem .65rem;
  margin: 0 .4rem .4rem 0;
  border-radius: var(--app-radius-pill);
  border: 1px solid transparent;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1;
}

.als-chip i {
  font-size: .85rem;
  margin-right: .35rem;
}

.als-chip-rupture {
  background: var(--app-danger-soft);
  color: var(--app-danger-text);
  border-color: var(--app-danger-border);
}

.als-chip-critique {
  background: var(--app-critical-soft);
  color: var(--app-critical-text);
  border-color: var(--app-critical-border);
}

.als-chip-bas {
  background: var(--app-warning-soft);
  color: var(--app-warning-text);
  border-color: var(--app-warning-border);
}

/* max-height en deux temps : 48vh compris partout, min() sur navigateurs récents */
.als-liste {
  max-height: 48vh;
  max-height: min(48vh, 420px);
  overflow-y: auto;
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius-lg);
  background: var(--app-surface);
}

.als-liste-entete {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  padding: .45rem .8rem;
  background: var(--app-surface-2);
  color: var(--app-text-secondary);
  border-bottom: 1px solid var(--app-border-strong);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.als-ligne {
  display: flex;
  align-items: center;
  padding: .55rem .8rem;
  border-top: 1px solid var(--app-border);
  border-left: 4px solid transparent;
  text-align: left;
}

.als-ligne:first-of-type {
  border-top: 0;
}

.als-ligne.als-rupture { border-left-color: var(--app-danger); }
.als-ligne.als-critique { border-left-color: var(--app-critical); }
.als-ligne.als-bas { border-left-color: var(--app-warning); }

.als-produit {
  flex: 1 1 55%;
  min-width: 0;
  padding-right: .75rem;
}

.als-nom {
  display: block;
  font-weight: 600;
  color: var(--app-text);
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.als-code {
  display: block;
  color: var(--app-text-muted);
  font-size: .74rem;
}

.als-niveau {
  flex: 1 1 45%;
  min-width: 120px;
}

.als-chiffres {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .8rem;
  color: var(--app-text-secondary);
  margin-bottom: .2rem;
  font-variant-numeric: tabular-nums;
}

.als-chiffres strong {
  font-size: .92rem;
  color: var(--app-text);
}

.als-pct {
  font-weight: 700;
  font-size: .74rem;
}

.als-rupture .als-chiffres strong,
.als-rupture .als-pct { color: var(--app-danger-text); }
.als-critique .als-pct { color: var(--app-critical-text); }
.als-bas .als-pct { color: var(--app-warning-text); }

.als-barre {
  height: 6px;
  border-radius: var(--app-radius-pill);
  background: var(--app-surface-3);
  overflow: hidden;
}

.als-barre-remplie {
  height: 100%;
  border-radius: var(--app-radius-pill);
  min-width: 3px;
}

.als-rupture .als-barre-remplie { background: var(--app-danger); }
.als-critique .als-barre-remplie { background: var(--app-critical); }
.als-bas .als-barre-remplie { background: var(--app-warning); }

/* Téléphone : fenêtre compacte, titre sur une ligne, boutons empilés
   pleine largeur (action principale en premier), liste qui défile. */
@media (max-width: 575.98px) {
  :root body .swal2-popup.als-popup {
    padding: 1em .85em 1em !important;
  }

  .als-entete-icone {
    width: 2.2rem;
    height: 2.2rem;
    margin-right: .55rem;
    font-size: 1.1rem;
  }

  .als-entete-titre {
    font-size: 1rem;
  }

  .als-entete-sous {
    font-size: .8rem;
    line-height: 1.35;
  }

  .als-chip {
    margin: 0 .3rem .3rem 0;
    padding: .25rem .55rem;
    font-size: .75rem;
  }

  .als-liste {
    max-height: 46vh;
  }

  :root body .swal2-popup.als-popup .swal2-actions {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: .9em 0 0 !important;
    padding: 0 !important;
  }

  :root body .swal2-popup.als-popup .swal2-actions > button {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 46px;
    margin: .3em 0 !important;
  }
}

/* Petits écrans : le nom garde toute la largeur, le niveau passe dessous */
@media (max-width: 480px) {
  .als-ligne { flex-wrap: wrap; }
  .als-produit { flex: 1 1 100%; padding-right: 0; margin-bottom: .3rem; }
  .als-nom { white-space: normal; }
  .als-niveau { flex: 1 1 100%; min-width: 0; }
  .als-liste-entete { display: none; }
}

/* -----------------------------------------------------------------------------
   6 sexies. Tableaux de données (lot 5), les deux thèmes
   En-tête sobre, cellules plates (pas de dégradé), chiffres à droite en
   chiffres tabulaires, rôles de cellule posés par main.js (app-cell-*),
   état vide, pagination commune (assets/js/app-pager.js).
   Cartes sous 992 px : mécanisme existant de main.js (mobile-card-table),
   style.css « Tableaux responsives globaux » ; ici seulement les rôles.
   ----------------------------------------------------------------------------- */
:root body .table {
  --bs-table-bg: var(--app-surface);
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--app-border);
  --bs-table-striped-bg: var(--app-surface-2);
  --bs-table-striped-color: var(--app-text);
  --bs-table-hover-bg: var(--app-surface-hover);
  --bs-table-hover-color: var(--app-text);
  border-color: var(--app-border);
}

/* style.css posait overflow: hidden sur tous les tableaux : cela empêchait
   l'en-tête collant (le tableau devenait son propre conteneur de défilement). */
:root body table.table:not(.table-responsive) {
  overflow: visible;
}

:root body .table > thead > tr > th,
:root body .table > thead > tr > td {
  background-color: var(--app-surface-2);
  color: var(--app-text-secondary);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  vertical-align: middle;
  border-bottom: 1px solid var(--app-border-strong);
}

:root body .table > :not(caption) > * > * {
  padding: .6rem .75rem;
  border-color: var(--app-border);
}

:root body .table-sm > :not(caption) > * > * {
  padding: .4rem .55rem;
}

:root body .table > tbody > tr:hover {
  background-color: transparent;
}

:root body .table.table-hover > tbody > tr:hover > *,
:root body .table:not(.table-striped) > tbody > tr:hover > * {
  --bs-table-bg-state: var(--app-surface-hover);
}

/* Rôles de cellule */
:root body .table .app-cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

:root body .table .app-cell-index {
  width: 1%;
  white-space: nowrap;
  color: var(--app-text-muted);
  font-variant-numeric: tabular-nums;
}

:root body .table td.app-cell-title {
  font-weight: 600;
  color: var(--app-text);
}

:root body .table td.app-cell-actions {
  white-space: nowrap;
}

/* État vide : ligne de message posée par les écrans (« Aucun client trouvé ») */
:root body .table tr.app-empty-row > td {
  padding: var(--app-space-6) var(--app-space-4);
  text-align: center;
  color: var(--app-text-muted);
  background-color: var(--app-surface);
}

:root body .table tr.app-empty-row > td::before {
  content: "\f42d";
  display: block;
  margin-bottom: var(--app-space-2);
  font-family: "bootstrap-icons";
  font-size: 1.75rem;
  line-height: 1;
  color: var(--app-border-strong);
}

/* Petits ordinateurs : le tableau garde ses colonnes et défile dans son bloc.
   Le formulaire, les filtres et la pagination ne défilent pas avec lui. */
.app-table-tools[hidden] { display: none !important; }
.app-table-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--app-space-2) 0;
  color: var(--app-text-muted);
  font-size: .8rem;
}
.app-table-tools__buttons { display: flex; margin-left: var(--app-space-2); }
.app-table-tools__buttons .btn { min-width: 36px; min-height: 36px; margin-left: var(--app-space-1); }
@media (min-width: 992px) {
  #main .card, #main .card-body, #main .tab-content, #main .tab-pane,
  #main .row > [class*="col-"], .modal-body { min-width: 0; }
  .app-table-scroll {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: auto;
    scrollbar-color: var(--app-text-muted) var(--app-surface-2);
  }
  .app-table-scroll:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }
  .app-table-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
  .app-table-scroll::-webkit-scrollbar-thumb { background: var(--app-text-muted); border: 3px solid var(--app-surface-2); border-radius: var(--app-radius-pill); }
  .app-table-scroll::-webkit-scrollbar-track { background: var(--app-surface-2); }
  :root body .app-data-table > thead > tr > th { vertical-align: middle; }
  :root body .app-data-table > tbody > tr > td { vertical-align: middle; }
  :root body .app-data-table .app-cell-title {
    min-width: 11rem;
    max-width: 24rem;
    white-space: normal;
    overflow-wrap: break-word;
  }
  :root body .app-data-table .app-cell-reference {
    min-width: 12rem;
    max-width: 22rem;
    overflow-wrap: break-word;
  }
  :root body .app-data-table .app-cell-actions { white-space: nowrap; }
  :root body .app-data-table .app-cell-actions .btn-group { flex-wrap: nowrap; }
}
@media (min-width: 992px) and (max-width: 1399.98px) {
  :root body .app-data-table > :not(caption) > * > * { padding: .5rem .6rem; font-size: .85rem; }
  .datatable-top, .datatable-bottom, .dataTables_wrapper .row { flex-wrap: wrap; }
  .datatable-input { max-width: 100%; }
}
@media (max-width: 991.98px), print {
  .app-table-tools { display: none; }
}
@media print {
  .app-table-scroll { max-width: none; overflow: visible; }
}

/* En-tête collant dans les tableaux à défilement (ordinateur) */
@media (min-width: 992px) {
  :root body .table-responsive > .table > thead > tr > th,
  :root body .table-container > .table > thead > tr > th,
  :root body .modal-body .table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
  }
}

/* Cartes (sous 992 px) : le titre en tête de carte, le n° en coin, les
   actions en bas. La ligne devient une colonne flexible pour l'ordre. */
@media (max-width: 991.98px) {
  :root body table.app-cards tbody tr:not(.mobile-table-message-row) {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  :root body table.app-cards tbody td.app-cell-title {
    order: -1;
    display: block !important;
    padding: .7rem 3.5rem .6rem .8rem !important;
    text-align: left !important;
    font-size: .95rem;
    background-color: var(--app-surface-2) !important;
  }

  :root body table.app-cards tbody td.app-cell-title::before {
    display: none;
  }

  :root body table.app-cards tbody td.app-cell-index {
    position: absolute;
    top: .55rem;
    right: .75rem;
    z-index: 1;
    display: block !important;
    width: auto !important;
    min-height: 0;
    padding: 0 !important;
    font-size: .75rem;
    border: 0 !important;
    background: transparent !important;
  }

  :root body table.app-cards tbody td.app-cell-index::before {
    display: none;
  }

  :root body table.app-cards tbody tr:not(.app-row-titled) td.app-cell-index {
    position: static;
    display: grid !important;
    width: 100% !important;
    padding: .55rem .75rem !important;
  }

  :root body table.app-cards tbody tr:not(.app-row-titled) td.app-cell-index::before {
    display: block;
  }

  :root body table.app-cards tbody td.app-cell-actions {
    order: 99;
    white-space: normal;
  }

  :root body table.app-cards tbody td.app-cell-actions .btn,
  :root body table.app-cards tbody td.app-cell-actions button {
    min-height: 38px;
    min-width: 38px;
  }

  :root body table.app-cards tbody td.app-cell-num {
    text-align: right !important;
  }
}

/* Badges doux (lot 5, 8.2) : compléments du badge .app-badge de la coque
   (section 6 bis). Toujours accompagnés d'un libellé : la couleur ne porte
   jamais seule l'information (état du stock, sens d'un mouvement). */
.app-badge > .bi {
  margin-right: .3rem;
  font-size: .9em;
}

.app-badge + .app-badge {
  margin-left: .25rem;
}

:root body .table .app-badge {
  font-size: .75rem;
  vertical-align: middle;
}

.app-badge--primary {
  background-color: var(--app-primary-soft);
  border-color: var(--app-border-strong);
  color: var(--app-primary);
}

.app-badge--neutral {
  background-color: var(--app-surface-2);
  border-color: var(--app-border-strong);
  color: var(--app-text-secondary);
}

/* Table enfant dépliée (DataLoader, bouton « œil » : permissions d'un module).
   Bloc sur fond de surface secondaire, titre à gauche, recherche et
   « Ajouter » sur une ligne, lignes simples (le tableau n'est pas converti
   en cartes : data-no-cards). La ligne qui le porte (.app-child-row) n'est
   plus traitée comme un état vide. Pas de gap flex (WebView). */
.app-enfant {
  margin: 4px 0;
  padding: 12px 14px;
  text-align: left;
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
}

.app-enfant__titre {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--app-text);
}

.app-enfant__outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 10px;
}

.app-enfant__recherche {
  flex: 1 1 220px;
  max-width: 420px;
  min-width: 0;
}

.app-enfant__recherche .input-group {
  flex-wrap: nowrap;
}

.app-enfant__recherche .input-group > .btn {
  padding: 0 10px;
  border-width: 1px;
}

.app-enfant__ajouter {
  order: 2;
  margin-left: auto;
  padding-left: 8px;
}

.app-enfant__table {
  background: transparent;
}

:root body .app-enfant__table > :not(caption) > * > * {
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
  background: transparent;
  border-color: var(--app-border);
}

:root body .app-enfant__table thead th {
  font-size: 0.75rem;
  color: var(--app-text-muted);
}

:root body .app-enfant__table td:last-child,
:root body .app-enfant__table th:last-child {
  text-align: right;
  white-space: nowrap;
}

/* La ligne qui porte le bloc, dans une liste en cartes : pleine largeur,
   alignée à gauche (et non centrée comme un message). */
table.mobile-card-table tbody tr.app-child-row td {
  padding: 8px !important;
  text-align: left !important;
}

/* Liste en cartes (< 992 px) : le tableau enfant est DANS le tableau parent
   converti en cartes, dont les règles (ligne en carte à filet violet,
   cellules en grille étiquette / valeur) s'appliquaient aussi à ses lignes.
   Elles sont neutralisées ; chaque élément devient une ligne simple : n°
   masqué (1re colonne), premier champ en titre, suivants atténués dessous,
   actions à droite (dernière colonne). */
@media (max-width: 991.98px) {
  .app-enfant__recherche {
    flex-basis: 0;
    max-width: none;
  }

  /* Pas d'ombre de défilement horizontal : le contenu tient en largeur. */
  :root body .app-enfant .table-responsive {
    background: none !important;
    overflow: visible;
  }

  :root body table .app-enfant__table thead {
    display: none !important;
  }

  :root body table .app-enfant__table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin: 0 !important;
    padding: 8px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--app-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  :root body table .app-enfant__table tbody tr:last-child {
    border-bottom: 0 !important;
  }

  :root body table .app-enfant__table tbody td {
    display: block !important;
    grid-column: 1;
    min-height: 0 !important;
    line-height: 1.35;
    padding: 0 !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    overflow-wrap: anywhere;
  }

  :root body table .app-enfant__table tbody td::before {
    display: none !important;
  }

  :root body table .app-enfant__table tbody td:first-child {
    display: none !important;
  }

  :root body table .app-enfant__table tbody td:nth-child(n+3):not(:last-child) {
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--app-text-muted);
  }

  :root body table .app-enfant__table tbody td:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding-left: 10px !important;
    text-align: right !important;
  }

  /* Ligne de chargement ou de message (une seule cellule) : visible. */
  :root body table .app-enfant__table tbody td:only-child {
    display: block !important;
    grid-column: 1 / -1;
    text-align: center !important;
  }
}

/* Cartes des tableaux au téléphone : la cellule est une grille à deux
   colonnes ; une pastille posée directement dedans s'étirait sur toute la
   colonne de la valeur. Elle reste à sa taille, calée à droite. */
table.mobile-card-table td > .app-badge:only-child {
  justify-self: end;
  align-self: center;
}

/* Quantité suivie de son état (dépôts) */
.app-qte-etat .app-badge {
  margin-left: .35rem;
}

/* Pagination commune : Lignes [10] · 1 à 10 sur 134 · ‹ 1 2 3 … 14 › */
.app-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--app-space-3);
  padding-top: var(--app-space-3);
  border-top: 1px solid var(--app-border);
  color: var(--app-text-secondary);
  font-size: .85rem;
}

.app-pager > * {
  margin: var(--app-space-1) 0;
}

.app-pager__size {
  display: flex;
  align-items: center;
}

.app-pager__size label {
  margin: 0 var(--app-space-2) 0 0;
  color: var(--app-text-secondary);
}

.app-pager__size .form-select {
  width: auto;
  min-width: 4.5rem;
}

.app-pager__info {
  flex: 1 1 auto;
  margin-left: var(--app-space-4);
  margin-right: var(--app-space-4);
  font-variant-numeric: tabular-nums;
}

.app-pager__pages {
  margin: 0;
  flex-wrap: wrap;
}

.app-pager .page-link {
  min-width: 2.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--app-primary);
  background-color: var(--app-surface);
  border-color: var(--app-border-strong);
}

.app-pager .page-link:hover {
  background-color: var(--app-surface-hover);
  color: var(--app-primary);
}

.app-pager .page-link:focus {
  box-shadow: var(--app-focus-ring);
}

.app-pager .page-item.active .page-link {
  background-color: var(--app-primary-solid);
  border-color: var(--app-primary-solid);
  color: var(--app-text-on-primary);
}

.app-pager .page-item.disabled .page-link {
  background-color: var(--app-surface);
  color: var(--app-disabled-text);
  border-color: var(--app-border);
}

.app-pager.is-loading .app-pager__pages {
  opacity: .6;
  pointer-events: none;
}

/* Une seule page : seul le compteur reste */
.app-pager--seule .app-pager__pages {
  display: none;
}

@media (max-width: 575.98px) {
  .app-pager__info {
    order: -1;
    flex: 1 1 100%;
    margin: 0 0 var(--app-space-1);
  }

  /* Téléphone : page courante et flèches seulement */
  .app-pager__pages .page-item:not(.active):not(.app-pager__prev):not(.app-pager__next) {
    display: none;
  }

  .app-pager .page-link {
    min-width: 2.6rem;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* -----------------------------------------------------------------------------
   6 septies. Composants harmonisés (lot 6), les deux thèmes
   Listes de sélection (dselect, seul composant), barre d'outils des listes
   (.app-toolbar / .app-search), indicateurs chiffrés du tableau de bord.
   ----------------------------------------------------------------------------- */

/* <select> natif équipé automatiquement par app-select.js : masqué
   visuellement (et non en display:none) pour garder la validation native. */
:root body select.app-select-natif,
:root body select.form-select.app-select-natif {
  position: absolute !important;
  width: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.dselect-wrapper {
  width: 100%;
}

.dselect-wrapper > .form-select {
  text-align: left;
  background-color: var(--app-input-bg);
  color: var(--app-text);
  border-color: var(--app-input-border);
  border-radius: var(--app-radius);
}

.dselect-wrapper > .form-select:focus,
.dselect-wrapper > .form-select.show {
  border-color: var(--app-primary);
  box-shadow: var(--app-focus-ring);
}

.dselect-wrapper > .form-select:disabled {
  background-color: var(--app-disabled-bg);
  color: var(--app-disabled-text);
}

/* Largeur : celle du champ, posée par app-select.js à l'ouverture (le menu
   est en position fixe, un pourcentage se calculerait sur la fenêtre) */
.dselect-wrapper .dropdown-menu {
  min-width: 12rem;
  max-width: 94vw;
  padding: var(--app-space-2);
  background-color: var(--app-surface);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-md);
}

/* Menu ouvert toujours au premier plan (app-select.js) : le menu est en
   position fixe et ses ancêtres positionnés passent devant leurs voisins le
   temps de l'ouverture (au-dessus des modales 1055 et de SweetAlert 1060). */
:root body .app-dropdown-hote {
  z-index: 1065 !important;
}

:root body .dselect-wrapper .dropdown-menu.show {
  z-index: 1070;
}

.dselect-wrapper .dropdown-menu > .d-flex > .form-control {
  margin-bottom: var(--app-space-2);
}

.dselect-wrapper .dropdown-item {
  border-radius: var(--app-radius-sm);
  color: var(--app-text);
  white-space: normal;
}

.dselect-wrapper .dropdown-item:hover,
.dselect-wrapper .dropdown-item:focus {
  background-color: var(--app-surface-hover);
  color: var(--app-text);
}

.dselect-wrapper .dropdown-item.active {
  background-color: var(--app-primary-solid);
  color: var(--app-text-on-primary);
}

.dselect-wrapper .dselect-placeholder {
  color: var(--app-text-muted);
}

.dselect-wrapper .dselect-no-results {
  padding: var(--app-space-2) var(--app-space-3);
  color: var(--app-text-muted);
  font-size: .875rem;
}

/* Validation : l'état invalide du <select> se voit sur la liste */
.was-validated select:invalid + .dselect-wrapper > .form-select,
select.is-invalid + .dselect-wrapper > .form-select {
  border-color: var(--app-danger);
}

.was-validated select:valid + .dselect-wrapper > .form-select,
select.is-valid + .dselect-wrapper > .form-select {
  border-color: var(--app-success);
}

.was-validated select:invalid + .dselect-wrapper ~ .invalid-feedback,
select.is-invalid + .dselect-wrapper ~ .invalid-feedback {
  display: block;
}

/* ---- Listes à recherche au-dessus du clavier (téléphone, tablette tactile) ----
   app-select.js pose .app-dd-panneau sur le menu ouvert et écrit sa place dans
   --app-dd-* d'après la zone visible (clavier déduit). !important : Popper
   réécrit position et transform en ligne à chaque défilement. Pas de
   transform sur ce menu fixe ouvert (WebView Android), pas d'inset ni de gap. */
:root body .dselect-wrapper .dropdown-menu.show.app-dd-panneau {
  position: fixed !important;
  top: var(--app-dd-haut, 8px) !important;
  left: var(--app-dd-gauche, 8px) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--app-dd-largeur, 94vw) !important;
  max-width: none;
  max-height: var(--app-dd-hauteur, 80vh);
  margin: 0 !important;
  transform: none !important;
  /* Sans transition : la place suit le clavier d'un coup et se mesure juste */
  transition: none !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1072;
}

.dselect-wrapper .dropdown-menu.app-dd-panneau > .d-flex {
  flex: 1 1 auto;
  min-height: 0;
}

.dselect-wrapper .dropdown-menu.app-dd-panneau > .d-flex > .form-control {
  flex: 0 0 auto;
  min-height: 44px;
  font-size: 16px; /* 16 px : iOS n'agrandit pas la page à la prise de focus */
}

:root body .dselect-wrapper .dropdown-menu.app-dd-panneau .dselect-items {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.dselect-wrapper .dropdown-menu.app-dd-panneau .dropdown-item {
  min-height: 44px;
  padding: .6rem .75rem;
  touch-action: manipulation;
}

/* En-tête (téléphone seulement) : nom du champ et fermeture */
.dselect-wrapper .app-dd-entete {
  display: none;
}

.dselect-wrapper .app-dd-panneau--plein > .app-dd-entete {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  margin-bottom: var(--app-space-2);
  padding-left: var(--app-space-1);
}

.dselect-wrapper .app-dd-titre {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: var(--app-space-2);
  overflow: hidden;
  font-weight: 600;
  color: var(--app-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dselect-wrapper .app-dd-entete > .btn-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  background-size: 14px;
  touch-action: manipulation;
}

/* Listes à recherche serveur (dselect-distant.js) : libellé tronqué dans le
   champ, ligne secondaire sous le nom, messages d'état. Ici et non dans
   style.css : les caisses autonomes ne chargent pas style.css. */
.dselect-distant .dselect-bouton {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dselect-distant .dropdown-item {
  white-space: normal;
}

.dselect-distant .dselect-sous {
  display: block;
  font-size: 0.78em;
  opacity: 0.7;
}

.dselect-distant .dselect-etat,
.dselect-distant .dselect-no-results {
  padding: 0.4rem 1rem;
  font-size: 0.85em;
  color: var(--app-text-muted);
}

/* Caisses autonomes au téléphone : champs de liste (Dépôt, Client), bouton
   « Nouveau client » et recherche de produits à la hauteur des autres écrans
   (44 px, texte 16 px : iOS n'agrandit pas la page à la saisie). */
@media (max-width: 767.98px) {
  .pos-depot-selector .dselect-wrapper > .form-select,
  .pos-cart-client .dselect-wrapper > .form-select {
    min-height: 44px;
  }

  .pos-cart-client .btn-add-client {
    width: 44px;
    min-width: 44px;
    height: 44px;
    touch-action: manipulation;
  }

  .pos-search-bar input {
    min-height: 44px;
    font-size: 16px;
  }
}

/* Voile derrière le panneau du téléphone : un toucher ferme la liste */
.dselect-wrapper > .app-dd-voile {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1071;
  background-color: rgba(20, 14, 35, .45);
  touch-action: none;
}

/* ---- Barre d'outils des listes : recherche à gauche, actions à droite ---- */
.app-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--app-space-4);
}

.app-toolbar > * {
  margin-top: var(--app-space-1);
  margin-bottom: var(--app-space-1);
}

.app-toolbar .app-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 280px;
  max-width: 520px;
  /* margin-left : la recherche globale de la barre haute porte le même nom
     (.app-search, marge gauche de 16 px) ; ici le champ s'aligne sur la
     carte, comme les boutons et le tableau. */
  margin-left: 0;
  margin-right: var(--app-space-3);
}

.app-toolbar .app-search__icone {
  position: absolute;
  left: .75rem;
  top: 50%;
  margin-top: -.5em;
  line-height: 1;
  color: var(--app-text-muted);
  pointer-events: none;
}

:root body .app-toolbar .app-search > .form-control {
  padding-left: 2.25rem;
  padding-right: 4.75rem;
  border-radius: var(--app-radius);
}

.app-toolbar .app-search__effacer,
.app-toolbar .app-search__lancer {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-top: -1rem;
  padding: 0;
  border: 0;
  border-radius: var(--app-radius-sm);
  background: transparent;
  color: var(--app-text-muted);
}

.app-toolbar .app-search__effacer { right: 2.4rem; }
.app-toolbar .app-search__lancer { right: .25rem; }
/* Bouton × propre à l'écran (sans loupe à côté) */
.app-toolbar .app-search__effacer--ecran { right: .25rem; }

.app-toolbar .app-search__effacer:hover,
.app-toolbar .app-search__lancer:hover {
  background-color: var(--app-surface-hover);
  color: var(--app-text);
}

.app-toolbar .app-search__effacer:focus-visible,
.app-toolbar .app-search__lancer:focus-visible {
  outline: 0;
  box-shadow: var(--app-focus-ring);
}

.app-toolbar .app-search:not(.has-value) .app-search__effacer {
  display: none;
}

.app-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

.app-toolbar__actions > * {
  margin-left: var(--app-space-2);
}

@media (max-width: 575.98px) {
  .app-toolbar .app-search {
    flex-basis: 100%;
    max-width: none;
    margin-right: 0;
  }

  .app-toolbar__actions {
    width: 100%;
    justify-content: stretch;
  }

  .app-toolbar__actions > * {
    flex: 1 1 auto;
    margin-left: 0;
    text-align: center;
  }

  .app-toolbar__actions > * + * {
    margin-left: var(--app-space-2);
  }

  /* Bouton d'ajout (souvent enveloppé d'un <span>) : toute la largeur */
  .app-toolbar__actions > span {
    display: flex;
  }

  .app-toolbar__actions > span > .btnPage,
  .app-toolbar__actions > .btnPage {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  .app-toolbar__actions > span > .btnPage + .btnPage {
    margin-left: var(--app-space-2);
  }
}

/* ---- Indicateurs chiffrés du tableau de bord ---- */
:root body .kpi-value,
:root body .stat-mini .stat-value,
:root body .app-kpi__valeur {
  font-variant-numeric: tabular-nums;
}

.app-kpi__variation {
  font-size: .8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.app-kpi__variation--hausse { color: var(--app-success-text); }
.app-kpi__variation--baisse { color: var(--app-danger-text); }

/* -----------------------------------------------------------------------------
   6 octies. Pages d'accueil, 403 et 404 (les deux thèmes)
   Principe : la page sert à se mettre au travail. Un en-tête calme (qui,
   quand), un seul élément fort (« Pour commencer », action principale en
   violet plein), puis le répertoire des écrans, dense et lisible.
   Composants : views/include/ecrans_autorises.php.
   WebView SUNMI : marges plutôt que gap flex, pas de min()/clamp().
   ----------------------------------------------------------------------------- */

.app-section-titre {
  margin: 0 0 var(--app-space-3);
  color: var(--app-text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

:root body .app-carte-section {
  margin-bottom: var(--app-space-5);
}

:root body .app-carte-section > .card-body {
  padding: var(--app-space-5);
}

/* ---- En-tête de la journée ---- */
.app-journee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--app-space-4);
  padding: var(--app-space-5) var(--app-space-6);
  background-color: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-xs);
}

.app-journee__qui {
  display: flex;
  align-items: center;
  flex: 1 1 360px;
  min-width: 0;
}

.app-journee__avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  margin-right: var(--app-space-4);
  object-fit: cover;
  border-radius: 50%;
  background-color: var(--app-surface-2);
  box-shadow: 0 0 0 3px var(--app-primary-soft);
}

.app-journee__identite {
  min-width: 0;
}

:root body .app-journee__salut {
  margin: 0 0 var(--app-space-2);
  color: var(--app-text);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.app-journee__etat {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--app-text-secondary);
  font-size: .875rem;
}

.app-journee__etat li {
  display: flex;
  align-items: center;
  margin: 0 var(--app-space-4) var(--app-space-1) 0;
}

.app-journee__etat .bi {
  margin-right: .35rem;
  color: var(--app-text-muted);
}

.app-journee__etat .is-en-ligne .bi { color: var(--app-success-text); }
.app-journee__etat .is-hors-ligne .bi { color: var(--app-warning-text); }

.app-journee__quand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: var(--app-space-5);
  text-align: right;
}

.app-journee__date {
  color: var(--app-text-secondary);
  font-size: .875rem;
}

.app-journee__heure {
  color: var(--app-text);
  font-size: 2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

/* ---- Signal : produits au seuil d'alerte ---- */
.app-signal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--app-space-5);
  padding: var(--app-space-3) var(--app-space-4);
  background-color: var(--app-warning-soft);
  border: 1px solid var(--app-warning-border);
  border-left: 4px solid var(--app-warning);
  border-radius: var(--app-radius);
  color: var(--app-text);
}

.app-signal > .bi {
  flex: 0 0 auto;
  margin-right: var(--app-space-3);
  color: var(--app-warning-text);
  font-size: 1.2rem;
}

.app-signal__texte {
  flex: 1 1 240px;
  margin: 0;
  font-size: .9rem;
}

:root body .app-signal__lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: var(--app-space-3);
  padding: 0 var(--app-space-2);
  color: var(--app-warning-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Pour commencer / Pour repartir : l'élément fort de la page ---- */
.app-depart {
  margin-bottom: var(--app-space-5);
}

.app-depart__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: var(--app-space-3);
  gap: var(--app-space-3);
  animation: app-fondu var(--app-dur-slow) var(--app-ease) backwards;
}

:root body .app-depart__action {
  display: flex;
  align-items: flex-start;
  min-height: 92px;
  padding: var(--app-space-4);
  background-color: var(--app-surface);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius-lg);
  color: var(--app-text);
  text-decoration: none;
  touch-action: manipulation;
  transition: border-color var(--app-dur-fast) var(--app-ease),
              background-color var(--app-dur-fast) var(--app-ease);
}

.app-depart__action > .bi {
  flex: 0 0 auto;
  margin: .1rem var(--app-space-3) 0 0;
  color: var(--app-primary);
  font-size: 1.4rem;
  line-height: 1;
}

.app-depart__texte {
  min-width: 0;
}

.app-depart__titre {
  display: block;
  margin-bottom: .2rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.app-depart__aide {
  display: block;
  color: var(--app-text-muted);
  font-size: .85rem;
  line-height: 1.4;
}

:root body .app-depart__action:hover {
  border-color: var(--app-primary);
  background-color: var(--app-surface-hover);
  color: var(--app-text);
}

:root body .app-depart__action:focus-visible {
  outline: 0;
  box-shadow: var(--app-focus-ring);
}

:root body .app-depart__action:active {
  background-color: var(--app-primary-soft);
}

/* Action principale : violet plein, texte blanc (contraste AA) */
:root body .app-depart__action--principale {
  background-color: var(--app-primary-solid);
  border-color: var(--app-primary-solid);
  color: var(--app-text-on-primary);
}

.app-depart__action--principale > .bi,
.app-depart__action--principale .app-depart__aide {
  color: var(--app-text-on-primary);
}

.app-depart__action--principale .app-depart__aide {
  opacity: .85;
}

:root body .app-depart__action--principale:hover,
:root body .app-depart__action--principale:active {
  background-color: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
  color: var(--app-text-on-primary);
}

/* ---- Répertoire des écrans : une ligne par module ---- */
.app-repertoire__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--app-space-3);
}

.app-repertoire__entete .app-section-titre {
  margin-bottom: .15rem;
}

.app-repertoire__sous-titre {
  margin: 0 var(--app-space-4) var(--app-space-2) 0;
  color: var(--app-text-muted);
  font-size: .85rem;
}

.app-repertoire__filtre {
  position: relative;
  flex: 0 1 320px;
  margin-bottom: var(--app-space-2);
}

.app-repertoire__filtre .bi {
  position: absolute;
  top: 50%;
  left: .8rem;
  margin-top: -.5em;
  line-height: 1;
  color: var(--app-text-muted);
  pointer-events: none;
}

:root body .app-repertoire__filtre .form-control {
  min-height: 42px;
  padding-left: 2.3rem;
}

.app-repertoire__liste {
  border-top: 1px solid var(--app-border);
}

.app-rubrique {
  display: grid;
  grid-template-columns: 240px 1fr;
  padding: var(--app-space-3) 0 var(--app-space-2);
  border-bottom: 1px solid var(--app-border);
}

.app-rubrique[hidden] {
  display: none !important;
}

:root body .app-rubrique__nom {
  display: flex;
  align-items: center;
  align-self: start;
  min-height: 36px;
  margin: 0 var(--app-space-4) 0 0;
  color: var(--app-text);
  font-size: .95rem;
  font-weight: 700;
}

.app-rubrique__nom > .bi {
  flex: 0 0 auto;
  width: 1.5rem;
  margin-right: var(--app-space-2);
  color: var(--app-primary);
  font-size: 1.05rem;
}

.app-rubrique__ecrans {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-rubrique__ecrans li {
  margin: 0 var(--app-space-2) var(--app-space-2) 0;
}

.app-rubrique__ecrans li[hidden] {
  display: none;
}

:root body .app-rubrique__ecrans a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: .35rem .85rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-pill);
  background-color: var(--app-surface-2);
  color: var(--app-text-secondary);
  font-size: .875rem;
  text-decoration: none;
  touch-action: manipulation;
  transition: background-color var(--app-dur-fast) var(--app-ease),
              border-color var(--app-dur-fast) var(--app-ease),
              color var(--app-dur-fast) var(--app-ease);
}

:root body .app-rubrique__ecrans a:hover {
  border-color: var(--app-primary);
  background-color: var(--app-primary-soft);
  color: var(--app-primary);
}

:root body .app-rubrique__ecrans a:focus-visible {
  outline: 0;
  box-shadow: var(--app-focus-ring);
}

.app-repertoire__vide,
.app-repertoire__aucun {
  margin: var(--app-space-3) 0 0;
  padding: var(--app-space-5);
  border: 1px dashed var(--app-border-strong);
  border-radius: var(--app-radius);
  color: var(--app-text-muted);
  text-align: center;
}

.app-repertoire__aucun[hidden] {
  display: none;
}

/* ---- Pages d'état 403 / 404 ---- */
.app-etat {
  margin-bottom: var(--app-space-5);
  padding: var(--app-space-6);
  background-color: var(--app-surface);
  border: 1px solid var(--app-border);
  border-left: 4px solid var(--app-primary);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-xs);
}

.app-etat--refus {
  border-left-color: var(--app-danger);
}

.app-etat__code {
  display: flex;
  align-items: center;
  margin: 0 0 var(--app-space-2);
  color: var(--app-primary);
  font-size: .85rem;
  font-weight: 600;
}

.app-etat--refus .app-etat__code {
  color: var(--app-danger-text);
}

.app-etat__code > .bi {
  margin-right: .4rem;
  font-size: 1rem;
}

:root body .app-etat__titre {
  margin: 0 0 var(--app-space-3);
  color: var(--app-text);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.app-etat__texte {
  max-width: 65ch;
  margin: 0 0 var(--app-space-3);
  color: var(--app-text-secondary);
  line-height: 1.6;
}

.app-etat__texte strong {
  color: var(--app-text);
}

.app-etat__adresse {
  margin: 0 0 var(--app-space-5);
  color: var(--app-text-secondary);
  font-size: .9rem;
  overflow-wrap: anywhere;
}

:root body .app-etat__adresse code {
  padding: .15rem .45rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background-color: var(--app-surface-2);
  color: var(--app-text);
  font-family: var(--app-font-mono);
  font-size: .85rem;
}

.app-etat__actions {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.app-etat__actions > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0 var(--app-space-2) var(--app-space-2) 0;
}

.app-etat__actions > .btn > .bi {
  margin-right: .45rem;
}

.app-etat__aide {
  margin: var(--app-space-3) 0 0;
  color: var(--app-text-muted);
  font-size: .85rem;
}

.app-etat__ecrans .app-repertoire__entete {
  margin-top: var(--app-space-2);
}

/* ---- Blocs repliables (« À propos », « Tous vos écrans ») ---- */
.app-apropos {
  margin-bottom: var(--app-space-4);
  background-color: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
}

.app-apropos > summary {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: var(--app-space-3) var(--app-space-5);
  color: var(--app-text);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.app-apropos > summary::-webkit-details-marker {
  display: none;
}

.app-apropos > summary > .bi:first-child {
  margin-right: var(--app-space-2);
  color: var(--app-primary);
}

.app-apropos > summary:hover {
  background-color: var(--app-surface-hover);
  border-radius: var(--app-radius-lg);
}

.app-apropos > summary:focus-visible {
  outline: 0;
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-focus-ring);
}

.app-apropos__chevron {
  margin-left: auto;
  color: var(--app-text-muted);
  transition: transform var(--app-dur) var(--app-ease);
}

.app-apropos[open] .app-apropos__chevron {
  transform: rotate(180deg);
}

.app-apropos__corps {
  padding: 0 var(--app-space-5) var(--app-space-5);
  color: var(--app-text-secondary);
  font-size: .9rem;
  line-height: 1.6;
}

:root body .app-apropos__titre {
  display: flex;
  align-items: center;
  margin: var(--app-space-5) 0 var(--app-space-3);
  color: var(--app-text);
  font-size: .95rem;
  font-weight: 700;
}

.app-apropos__titre > .bi {
  margin-right: var(--app-space-2);
}

.app-apropos__liste {
  margin: 0;
  padding-left: 1.1rem;
  column-count: 2;
  column-gap: var(--app-space-6);
}

.app-apropos__liste li {
  margin-bottom: var(--app-space-2);
  break-inside: avoid;
}

.app-apropos__liste strong {
  color: var(--app-text);
}

.app-apropos__liste--icones {
  padding-left: 0;
  list-style: none;
}

.app-apropos__liste--icones .bi {
  margin-right: var(--app-space-2);
  color: var(--app-primary);
}

.app-apropos__modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--app-space-4);
  gap: var(--app-space-4);
}

.app-apropos__mode {
  padding: 0 var(--app-space-4) var(--app-space-2);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background-color: var(--app-surface-2);
}

.app-apropos__mode .app-apropos__liste {
  column-count: 1;
}

.app-apropos__mode--en-ligne .app-apropos__titre > .bi { color: var(--app-success-text); }
.app-apropos__mode--hors-ligne .app-apropos__titre > .bi { color: var(--app-warning-text); }

.app-apropos__fin {
  margin: var(--app-space-5) 0 0;
  padding: var(--app-space-3) var(--app-space-4);
  border-radius: var(--app-radius);
  background-color: var(--app-primary-soft);
  color: var(--app-text);
}

@media (prefers-reduced-motion: reduce) {
  .app-depart__liste {
    animation: none;
  }

  .app-apropos__chevron {
    transition: none;
  }
}

/* ---- Tablette ---- */
@media (max-width: 991.98px) {
  .app-journee {
    padding: var(--app-space-5);
  }

  .app-depart__liste {
    grid-template-columns: 1fr 1fr;
  }

  .app-rubrique {
    grid-template-columns: 190px 1fr;
  }
}

/* ---- Téléphone ---- */
@media (max-width: 575.98px) {
  .app-journee {
    padding: var(--app-space-4);
  }

  .app-journee__qui {
    flex-basis: 100%;
  }

  .app-journee__avatar {
    width: 48px;
    height: 48px;
    margin-right: var(--app-space-3);
  }

  :root body .app-journee__salut {
    font-size: 1.3rem;
  }

  .app-journee__quand {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    margin: var(--app-space-3) 0 0;
    padding-top: var(--app-space-3);
    border-top: 1px solid var(--app-border);
    text-align: left;
  }

  .app-journee__heure {
    font-size: 1.25rem;
  }

  .app-signal__lien {
    margin-left: 0;
  }

  .app-depart__liste {
    grid-template-columns: 1fr;
  }

  :root body .app-depart__action {
    min-height: 0;
  }

  :root body .app-carte-section > .card-body {
    padding: var(--app-space-4);
  }

  .app-repertoire__filtre {
    flex: 1 1 100%;
  }

  .app-rubrique {
    grid-template-columns: 1fr;
    padding-top: var(--app-space-4);
  }

  :root body .app-rubrique__nom {
    min-height: 0;
    margin-bottom: var(--app-space-3);
  }

  :root body .app-rubrique__ecrans a {
    min-height: 44px;
  }

  .app-etat {
    padding: var(--app-space-5) var(--app-space-4);
  }

  :root body .app-etat__titre {
    font-size: 1.35rem;
  }

  .app-etat__actions > .btn {
    flex: 1 1 100%;
    margin-right: 0;
  }

  .app-apropos > summary {
    padding: var(--app-space-3) var(--app-space-4);
  }

  .app-apropos__corps {
    padding: 0 var(--app-space-4) var(--app-space-4);
  }

  .app-apropos__liste {
    column-count: 1;
  }

  .app-apropos__modes {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------------
   6 nonies. Permissions d'un rôle (configuration/roles, #modalListePermission)
   Pas de gap sur flexbox (WebView Android) : espacements par marges.
   ----------------------------------------------------------------------------- */
.perm-role [hidden] {
  display: none !important;
}

.perm-role__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}

.perm-role__entete .modal-title {
  margin: 0 var(--app-space-3) 0 0;
}

.perm-role__nom {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--app-radius-pill);
  background: var(--app-primary-soft);
  color: var(--app-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.perm-role__barre {
  padding: var(--app-space-3) var(--app-space-4);
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface-2);
}

.perm-role__compte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--app-text-muted);
}

.perm-role__compte strong {
  color: var(--app-text);
  font-variant-numeric: tabular-nums;
}

.perm-role__modifie {
  color: var(--app-critical-text);
  font-weight: 600;
  font-size: 0.8125rem;
}

.perm-role__modifie .bi {
  font-size: 1.25rem;
  line-height: 0;
  vertical-align: middle;
}

.perm-role__jauge {
  height: 6px;
  margin-top: var(--app-space-2);
  border-radius: var(--app-radius-pill);
  background: var(--app-surface-3);
  overflow: hidden;
}

.perm-role__jauge span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--app-primary);
  transition: width var(--app-dur) var(--app-ease);
}

.perm-role__verrou {
  display: flex;
  align-items: flex-start;
  margin-top: var(--app-space-3);
  padding: var(--app-space-2) var(--app-space-3);
  border: 1px solid var(--app-info-border);
  border-radius: var(--app-radius-sm);
  background: var(--app-info-soft);
  color: var(--app-info-text);
  font-size: 0.875rem;
}

.perm-role__verrou .bi {
  margin-right: var(--app-space-2);
}

.perm-role .perm-role__outils {
  margin: var(--app-space-3) 0 0;
  flex-wrap: wrap;
}

.perm-role__outils .app-search {
  flex: 1 1 240px;
  margin: 0 var(--app-space-2) var(--app-space-2) 0;
}

.perm-role__actions {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--app-space-2);
}

.perm-role__actions .btn {
  margin: 0 var(--app-space-2) 0 0;
  min-height: 36px;
  touch-action: manipulation;
}

.perm-role__actions .btn:last-child {
  margin-right: 0;
}

.perm-role__corps {
  padding: var(--app-space-3) var(--app-space-4);
}

.perm-role__etat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--app-space-6) var(--app-space-4);
  color: var(--app-text-muted);
  text-align: center;
}

.perm-role__etat .bi {
  font-size: 1.75rem;
  margin-bottom: var(--app-space-2);
}

/* Carte d'un module */
.perm-mod {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-surface);
  margin-bottom: var(--app-space-2);
  overflow: hidden;
  transition: border-color var(--app-dur-fast) var(--app-ease);
}

.perm-mod:last-child {
  margin-bottom: 0;
}

.perm-mod.is-ouvert {
  border-color: var(--app-border-strong);
}

.perm-mod__tete {
  display: flex;
  align-items: center;
  padding-left: var(--app-space-3);
}

.perm-mod__tete .module-checkbox {
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  margin: 0;
  cursor: pointer;
}

.perm-mod__bascule {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: var(--app-space-2) var(--app-space-3);
  border: 0;
  background: transparent;
  color: var(--app-text);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.perm-mod__bascule:hover {
  background: var(--app-surface-hover);
}

.perm-mod__bascule:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--app-focus-ring);
}

.perm-mod__icone {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-right: var(--app-space-3);
  border-radius: var(--app-radius-sm);
  background: var(--app-primary-soft);
  color: var(--app-primary);
  text-align: center;
  font-size: 1rem;
}

.perm-mod__nom {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.perm-mod__compte {
  flex: 0 0 auto;
  margin: 0 var(--app-space-3);
  padding: 1px 8px;
  border-radius: var(--app-radius-pill);
  background: var(--app-surface-3);
  color: var(--app-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.perm-mod__compte.is-partiel {
  background: var(--app-primary-soft);
  color: var(--app-primary);
}

.perm-mod__compte.is-complet {
  background: var(--app-success-soft);
  color: var(--app-success-text);
}

.perm-mod__chevron {
  flex: 0 0 auto;
  color: var(--app-text-muted);
  transition: transform var(--app-dur-fast) var(--app-ease);
}

.perm-mod.is-ouvert .perm-mod__chevron {
  transform: rotate(180deg);
}

.perm-mod__liste {
  list-style: none;
  margin: 0;
  padding: var(--app-space-1) 0;
  border-top: 1px solid var(--app-border);
  background: var(--app-surface-2);
}

.perm-item .form-check {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: var(--app-space-2) var(--app-space-4) var(--app-space-2) var(--app-space-3);
  min-height: 44px;
}

.perm-item + .perm-item .form-check {
  border-top: 1px dashed var(--app-border);
}

.perm-item .form-check-input {
  flex: 0 0 auto;
  float: none;
  margin: 2px var(--app-space-3) 0 0;
  cursor: pointer;
}

.perm-item .form-check-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  cursor: pointer;
}

.perm-item__nom {
  font-weight: 500;
  color: var(--app-text);
  word-break: break-word;
}

.perm-item__code {
  align-self: flex-start;
  margin-top: 2px;
  padding: 0 6px;
  border-radius: var(--app-radius-sm);
  background: var(--app-surface-3);
  color: var(--app-text-muted);
  font-family: var(--app-font-mono);
  font-size: 0.75rem;
}

.perm-role .form-check-input:checked,
.perm-role .form-check-input:indeterminate {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
}

.perm-role .btnModSave:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.perm-role .form-check-input:disabled,
.perm-role .form-check-input:disabled ~ .form-check-label {
  cursor: not-allowed;
}

@media (max-width: 575.98px) {
  .perm-role__barre,
  .perm-role__corps {
    padding-left: var(--app-space-3);
    padding-right: var(--app-space-3);
  }

  .perm-role__outils .app-search {
    flex-basis: 100%;
    margin-right: 0;
  }

  .perm-role__actions .btn {
    flex: 1 1 auto;
    margin-bottom: var(--app-space-2);
  }
}

/* -----------------------------------------------------------------------------
   6 decies. Connexion (views/login.php) sur tablette et téléphone
   Tablette (576-1024) : photo d'entrepôt sous voile violet, bandeau de marque
   en ligne au-dessus d'une carte nette de 480 px.
   Téléphone (< 576) : tout tient sur un écran, sans défilement : bandeau
   (logo, nom, bascule de thème), titre sur la photo, formulaire en carte,
   pied en vague (état du réseau, copyright).
   Pas de gap flex (WebView Android), dvh avec repli vh, pas d'inset ni de :has.
   ----------------------------------------------------------------------------- */
body.page-login .login-pied,
body.page-login .login-note {
  display: none;
}

body.page-login .mobile-brand-texte {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.page-login .mobile-brand-tagline {
  display: block;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.3;
}

body.page-login .login-theme {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--app-radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

body.page-login .login-theme .bi {
  margin-right: 6px;
}

body.page-login .login-theme:hover {
  background: rgba(255, 255, 255, 0.18);
}

body.page-login .login-theme:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

body.page-login .login-reseau {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: var(--app-radius-pill);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

body.page-login .login-reseau__point {
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: #5fd08a;
  box-shadow: 0 0 0 3px rgba(95, 208, 138, 0.25);
}

body.page-login .login-reseau.is-hors-ligne .login-reseau__point {
  background: #ffb547;
  box-shadow: 0 0 0 3px rgba(255, 181, 71, 0.25);
}

/* ---- Tablette et téléphone : fond, bandeau, formulaire ---- */
@media (max-width: 1024px) {
  body.page-login .login-bg,
  body.page-login .login-bg-overlay {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  /* Photo nette (le flou coûte cher en GPU), voile violet de la marque */
  body.page-login .login-bg {
    filter: brightness(0.55);
    transform: none;
  }

  body.page-login .login-bg-overlay {
    background: linear-gradient(180deg, rgba(45, 27, 78, 0.78) 0%, rgba(45, 27, 78, 0.9) 100%);
  }

  body.page-login .particles {
    display: none;
  }

  /* Bandeau : logo en tuile, nom et description, bascule de thème à droite */
  body.page-login .mobile-brand-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    animation: none;
  }

  body.page-login .mobile-brand-header > * {
    margin: 0;
  }

  body.page-login .mobile-brand-logo,
  body.page-login .mobile-brand-logo-default {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    margin-right: 14px;
    padding: 6px;
    border: 0;
    border-radius: 14px;
    object-fit: contain;
    box-shadow: 0 6px 18px rgba(12, 6, 24, 0.35);
    filter: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.page-login .mobile-brand-logo-default {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }

  /* Tuile toujours blanche, y compris en sombre (le logo est souvent foncé) */
  html body.page-login .mobile-brand-header .mobile-brand-logo,
  html body.page-login .mobile-brand-header .mobile-brand-logo-default {
    background-color: #ffffff;
    color: #4a2d7a;
  }

  body.page-login .mobile-brand-texte {
    flex: 1 1 auto;
    align-items: flex-start;
    margin-right: 12px;
  }

  /* Nom de la société (paramétrable) : deux lignes au plus, coupure entre
     les mots ; un nom long (> 18 caractères, classe posée côté PHP) est
     écrit plus petit. Le nom complet reste dans l'infobulle. */
  body.page-login .mobile-brand-name {
    display: block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-width: 100%;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
    line-height: 1.25;
  }

  body.page-login .mobile-brand-name.is-long {
    font-size: 1rem;
  }

  body.page-login .field-highlight {
    display: none;
  }

  body.page-login .mobile-brand-tagline {
    margin-top: 2px;
  }

  /* Carte : nette, alignée à gauche, sans liseré animé */
  body.page-login .login-card {
    background: var(--app-surface);
  }

  body.page-login .login-card::before {
    display: none;
  }

  body.page-login .card-header-section {
    text-align: left;
    margin-bottom: 24px;
  }

  body.page-login .card-title {
    font-size: 1.5rem;
    color: var(--app-text);
    margin-bottom: 4px;
  }

  body.page-login .card-subtitle {
    font-size: 0.9375rem;
    color: var(--app-text-muted);
    opacity: 1;
  }

  body.page-login #alertContainer {
    margin-bottom: 16px;
  }

  body.page-login .form-field {
    margin-bottom: 16px;
  }

  body.page-login .form-control {
    min-height: 54px;
    padding: 14px 48px 14px 44px;
    font-size: 1rem;
    border-width: 1.5px;
    background: var(--app-surface);
    color: var(--app-text);
  }

  /* #loginForm : passe devant « :root body .form-control » et le sélecteur
     sombre des champs, plus spécifiques */
  body.page-login #loginForm .form-control:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px var(--app-focus-ring);
    outline: 0;
  }

  body.page-login #loginForm .form-control.error {
    border-color: var(--app-danger);
  }

  body.page-login #loginForm .form-control.error:focus {
    box-shadow: 0 0 0 3px rgba(var(--app-danger-rgb), 0.25);
  }

  body.page-login .field-icon {
    left: 15px;
    font-size: 1.1rem;
    color: var(--app-text-muted);
  }

  body.page-login .field-label {
    left: 44px;
    font-size: 1rem;
  }

  body.page-login .form-control:focus ~ .field-label,
  body.page-login .form-control:not(:placeholder-shown) ~ .field-label {
    left: 12px;
    font-size: 0.75rem;
    color: var(--app-primary);
    background: var(--app-surface);
  }

  body.page-login .toggle-password {
    right: 4px;
    color: var(--app-text-muted);
  }

  body.page-login .form-options {
    margin-bottom: 20px;
  }

  body.page-login .checkbox-text {
    font-size: 0.9375rem;
    color: var(--app-text);
  }

  body.page-login .checkmark {
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--app-input-border);
    background: var(--app-surface);
  }

  body.page-login .custom-checkbox input:checked ~ .checkmark {
    background: var(--app-primary-solid, #4a2d7a);
    border-color: var(--app-primary-solid, #4a2d7a);
  }

  /* Bouton : aplat violet de la marque, sans reflet ni soulèvement */
  body.page-login .btn-login {
    min-height: 54px;
    border-radius: 12px;
    font-size: 1rem;
    background: var(--app-primary-solid, #4a2d7a) !important;
    box-shadow: none;
    transform: none;
  }

  body.page-login .btn-login::before,
  body.page-login .btn-login .btn-arrow {
    display: none;
  }

  body.page-login .btn-login:hover,
  body.page-login .btn-login:active {
    transform: none;
    box-shadow: none;
    background: var(--app-primary-solid-hover, #3b2363) !important;
  }

  body.page-login .btn-login .btn-spinner {
    margin-left: 10px;
  }

  body.page-login .btn-login.success {
    background: var(--app-success-solid) !important;
  }

  body.page-login .login-note {
    display: flex;
    align-items: center;
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--app-primary-soft);
    color: var(--app-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
  }

  body.page-login .login-note .bi {
    flex: 0 0 auto;
    margin-right: 8px;
    font-size: 1rem;
  }

  body.page-login .card-footer-section {
    padding-top: 20px;
    border-top: 1px solid var(--app-border);
    text-align: left;
  }

  body.page-login .card-footer-section p {
    font-size: 0.75rem;
    color: var(--app-text-muted);
    opacity: 1;
  }
}

/* ---- Tablette ---- */
@media (min-width: 576px) and (max-width: 1024px) {
  body.page-login .login-wrapper {
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    padding-top: calc(32px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }

  body.page-login .login-form-panel {
    width: 100%;
    max-width: 480px;
    padding: 0;
  }

  body.page-login .mobile-brand-header {
    margin: 0 0 20px;
    padding: 0 4px;
  }

  body.page-login .login-card {
    max-width: none;
    padding: 36px 36px 24px;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(12, 6, 24, 0.45);
    animation: loginCardRise 0.4s ease both;
  }

  body.page-login .card-footer-section {
    margin-top: 24px;
  }
}

/* Tablette couchée, peu de hauteur : carte plus compacte */
@media (min-width: 576px) and (max-width: 1024px) and (max-height: 720px) {
  body.page-login .login-wrapper {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  body.page-login .login-card {
    padding: 24px 32px 16px;
  }

  body.page-login .card-header-section {
    margin-bottom: 16px;
  }

  body.page-login .login-note {
    display: none;
  }

  body.page-login .card-footer-section {
    margin-top: 12px;
    padding-top: 12px;
  }
}

/* ---- Téléphone : un seul écran ---- */
@media (max-width: 575.98px) and (orientation: portrait) {
  body.page-login .login-wrapper {
    display: block;
    min-height: 100vh;
  }

  body.page-login .login-form-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 0;
  }

  @supports (height: 100dvh) {
    body.page-login .login-wrapper,
    body.page-login .login-form-panel {
      min-height: 100dvh;
    }
  }

  body.page-login .mobile-brand-header {
    flex: 0 0 auto;
    margin: 0;
    padding: 14px 16px 10px;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
  }

  body.page-login .mobile-brand-logo,
  body.page-login .mobile-brand-logo-default {
    width: 46px;
    height: 46px;
    margin-right: 12px;
    border-radius: 12px;
  }

  body.page-login .mobile-brand-name {
    font-size: 1.0625rem;
  }

  body.page-login .mobile-brand-name.is-long {
    font-size: 0.9375rem;
    line-height: 1.2;
  }

  /* Nom long : la bascule de thème passe en icône seule (cible 40 px) */
  body.page-login .mobile-brand-header.is-nom-long .login-theme {
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
  }

  body.page-login .mobile-brand-header.is-nom-long .login-theme .bi {
    margin-right: 0;
  }

  body.page-login .mobile-brand-header.is-nom-long .login-theme__texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  body.page-login .mobile-brand-tagline {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
  }

  /* La carte devient un simple conteneur : titre sur la photo, formulaire en carte */
  body.page-login .login-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px 16px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    animation: loginCardRise 0.4s ease both;
  }

  html body.page-login .login-form-panel .login-card {
    background-color: transparent;
  }

  body.page-login .card-header-section {
    margin-bottom: 14px;
  }

  html body.page-login .login-card .card-title {
    font-size: 1.375rem;
    color: #ffffff;
    margin-bottom: 2px;
  }

  html body.page-login .login-card .card-subtitle {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
  }

  body.page-login #loginForm {
    padding: 16px 16px 14px;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: var(--app-surface);
    box-shadow: 0 16px 40px rgba(12, 6, 24, 0.35);
  }

  /* Libellés au-dessus des champs (plus de libellé flottant) */
  body.page-login .field-wrapper {
    padding-top: 24px;
  }

  body.page-login #loginForm .field-label,
  body.page-login #loginForm .form-control:focus ~ .field-label,
  body.page-login #loginForm .form-control:not(:placeholder-shown) ~ .field-label {
    top: 0;
    left: 2px;
    transform: none;
    padding: 0;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--app-text);
  }

  body.page-login .field-icon,
  body.page-login .toggle-password {
    top: calc(50% + 12px);
  }

  body.page-login .form-control {
    min-height: 48px;
    padding-top: 11px;
    padding-bottom: 11px;
  }

  body.page-login .form-field {
    margin-bottom: 12px;
  }

  body.page-login .invalid-feedback {
    margin-top: 4px;
  }

  body.page-login .form-options {
    margin: 2px 0 12px;
  }

  body.page-login .btn-login {
    min-height: 50px;
  }

  body.page-login .login-note {
    margin-top: 12px;
  }

  /* Le copyright passe dans le pied */
  body.page-login .card-footer-section {
    display: none;
  }

  /* Pied : vague aux couleurs de la marque, état du réseau et copyright */
  body.page-login .login-pied {
    display: block;
    position: relative;
    flex: 0 0 auto;
    height: 64px;
  }

  body.page-login .login-pied__vague {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    fill: rgba(139, 108, 193, 0.35);
  }

  body.page-login .login-pied__contenu {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 18px 16px 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  body.page-login .login-pied__copyright {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
  }
}

/* Petits écrans en hauteur (ou clavier ouvert) : l'essentiel seulement */
@media (max-width: 575.98px) and (orientation: portrait) and (max-height: 680px) {
  body.page-login .mobile-brand-tagline,
  body.page-login .card-subtitle {
    display: none;
  }

  body.page-login .card-header-section {
    margin-bottom: 10px;
  }

  body.page-login .login-note {
    display: none;
  }

  body.page-login .login-pied {
    height: 52px;
  }
}

/* Sombre : voile plus profond, carte du formulaire détachée */
@media screen and (max-width: 1024px) {
  [data-bs-theme="dark"] body.page-login .login-bg-overlay {
    background: linear-gradient(180deg, rgba(34, 21, 58, 0.82) 0%, rgba(21, 17, 34, 0.94) 100%);
  }

  [data-bs-theme="dark"] body.page-login .login-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
}

@media screen and (max-width: 575.98px) and (orientation: portrait) {
  [data-bs-theme="dark"] body.page-login .login-card {
    border: 0;
  }

  [data-bs-theme="dark"] body.page-login #loginForm {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  }

  [data-bs-theme="dark"] body.page-login .login-pied__vague {
    fill: rgba(182, 156, 235, 0.16);
  }
}

@media (max-width: 359.98px) {
  body.page-login .login-theme__texte {
    display: none;
  }

  body.page-login .login-theme .bi {
    margin-right: 0;
  }
}

/* -----------------------------------------------------------------------------
   6 undecies. Connexion : la page tient dans l'écran, sans défilement
   (téléphone debout ou couché, tablette, ordinateur).
   1. Les alertes flottent en haut de l'écran : elles ne poussent plus le formulaire.
   2. La place des messages d'erreur des champs est réservée : leur apparition
      ne change pas la hauteur.
   3. Écran peu haut et couché (téléphone en paysage) : marque à gauche,
      formulaire à droite.
   4. Ordinateur peu haut : marges resserrées, atouts masqués si besoin.
   ----------------------------------------------------------------------------- */
@keyframes loginToastFondu {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 1. Alerte flottante (pas de transform : WebView Android, élément fixed).
   L'entrée de la carte passe en fondu seul : une animation en translate
   laisse un transform qui ferait de la carte le repère de l'alerte. */
html body.page-login .login-card {
  animation-name: loginToastFondu;
}

body.page-login #alertContainer {
  position: fixed;
  top: 12px;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 12px;
  right: 12px;
  z-index: 1080;
  max-width: 440px;
  margin: 0 auto !important;
  animation: loginToastFondu 0.2s ease both;
}

body.page-login #alertContainer .alert {
  margin: 0;
  box-shadow: 0 12px 32px rgba(12, 6, 24, 0.35);
}

/* 2. Messages d'erreur dans une place réservée sous chaque champ */
body.page-login #loginForm .form-field {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 20px;
}

body.page-login #loginForm .invalid-feedback {
  position: absolute;
  left: 2px;
  right: 0;
  bottom: 2px;
  margin: 0;
  font-size: 0.75rem;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3. Écran peu haut et couché : deux colonnes */
@media (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  body.page-login .login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 12px 24px;
    padding-left: calc(24px + env(safe-area-inset-left, 0px));
    padding-right: calc(24px + env(safe-area-inset-right, 0px));
  }

  body.page-login .login-form-panel {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 820px;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
  }

  body.page-login .mobile-brand-header {
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 34%;
    width: auto;
    margin: 0 28px 0 0;
    padding: 0;
  }

  body.page-login .mobile-brand-logo,
  body.page-login .mobile-brand-logo-default {
    margin: 0 0 12px;
  }

  body.page-login .mobile-brand-texte {
    flex: 0 0 auto;
    width: 100%;
    margin: 0 0 12px;
  }

  body.page-login .login-card {
    flex: 1 1 auto;
    max-width: 440px;
    margin: 0;
    padding: 18px 22px 12px;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(12, 6, 24, 0.45);
  }

  body.page-login .card-header-section {
    margin-bottom: 10px;
  }

  body.page-login .card-title {
    font-size: 1.25rem;
    margin-bottom: 0;
  }

  body.page-login .card-subtitle,
  body.page-login .login-note,
  body.page-login .card-footer-section,
  body.page-login .login-pied {
    display: none;
  }

  body.page-login .form-control {
    min-height: 44px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  body.page-login .form-options {
    margin: 0 0 10px;
  }

  body.page-login .custom-checkbox {
    min-height: 32px;
  }

  body.page-login .btn-login {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

@media (max-width: 1024px) and (max-height: 360px) and (orientation: landscape) {
  body.page-login .card-header-section,
  body.page-login .mobile-brand-tagline {
    display: none;
  }

  body.page-login .login-card {
    padding-top: 14px;
  }
}

/* Téléphone debout très petit (320 x 568) */
@media (max-width: 575.98px) and (orientation: portrait) and (max-height: 600px) {
  body.page-login .mobile-brand-header {
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-bottom: 6px;
  }

  body.page-login .mobile-brand-logo,
  body.page-login .mobile-brand-logo-default {
    width: 40px;
    height: 40px;
  }

  body.page-login .login-card {
    padding-top: 6px;
    padding-bottom: 8px;
  }

  html body.page-login .login-card .card-title {
    font-size: 1.25rem;
  }

  body.page-login #loginForm {
    padding: 12px 14px 12px;
  }

  body.page-login .field-wrapper {
    padding-top: 22px;
  }

  body.page-login .field-icon,
  body.page-login .toggle-password {
    top: calc(50% + 11px);
  }

  body.page-login .form-control {
    min-height: 44px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  body.page-login .btn-login {
    min-height: 46px;
  }

  body.page-login .login-pied {
    height: 44px;
  }

  body.page-login .login-pied__contenu {
    padding-top: 10px;
  }
}

/* 4. Ordinateur (> 1024 px) peu haut */
@media (min-width: 1025px) and (max-height: 820px) {
  body.page-login .login-wrapper {
    min-height: 100vh;
  }

  body.page-login .login-brand-panel {
    padding: 28px 40px;
  }

  body.page-login .login-form-panel {
    padding: 20px 32px;
  }

  body.page-login .login-card {
    padding: 28px 32px 18px;
  }

  body.page-login .login-logo {
    margin-bottom: 10px;
  }

  body.page-login .card-header-section {
    margin-bottom: 18px;
  }

  body.page-login .card-footer-section {
    margin-top: 16px;
    padding-top: 12px;
  }

  body.page-login .brand-logo-wrapper {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
  }

  body.page-login .brand-title {
    font-size: 2.3rem;
  }

  body.page-login .brand-tagline {
    margin-bottom: 20px;
  }

  body.page-login .brand-separator {
    margin-bottom: 20px;
  }

  body.page-login .feature-item {
    padding: 10px 16px;
  }
}

@media (min-width: 1025px) and (max-height: 680px) {
  body.page-login .brand-separator,
  body.page-login .brand-features {
    display: none;
  }

  body.page-login .login-logo {
    display: none;
  }

  body.page-login .form-control {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  body.page-login .form-options {
    margin-bottom: 14px;
  }

  body.page-login .btn-login {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* -----------------------------------------------------------------------------
   6 duodecies. Préchargeur (views/include/preloader.php)
   Fond de page de l'appli, logo de la société en tuile, nom paramétré, trois
   barres de niveau de stock qui montent tour à tour, une ligne d'état.
   Remplace le rendu de style.css et mobile.css (cercles, orbite, dégradés).
   Pas de transform sur l'élément fixed (WebView Android), fondu seul.
   ----------------------------------------------------------------------------- */
html body .stock-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 100vh;
  padding: 24px;
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--app-font);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

html body .stock-preloader::before,
html body .stock-preloader::after {
  display: none;
}

html body .stock-preloader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html body .stock-preloader__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 280px;
  transition: opacity 0.3s ease;
}

html body .stock-preloader.is-leaving .stock-preloader__content {
  opacity: 0;
  transform: none;
}

.app-preloader__marque {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-bottom: 18px;
  padding: 10px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(45, 27, 78, 0.14), 0 0 0 1px rgba(45, 27, 78, 0.06);
}

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

.app-preloader__marque--defaut {
  background: var(--app-primary-solid, #4a2d7a);
  color: #ffffff;
  font-size: 32px;
}

.app-preloader__nom {
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 100%;
  overflow: hidden;
  margin-bottom: 20px;
  color: var(--app-text);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Trois niveaux de stock qui montent l'un après l'autre */
.app-preloader__niveaux {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 26px;
  margin-bottom: 12px;
}

.app-preloader__niveaux span {
  display: block;
  width: 7px;
  height: 100%;
  margin: 0 3px;
  border-radius: 3px 3px 1px 1px;
  background: var(--app-primary);
  transform-origin: center bottom;
  animation: appPreloaderNiveau 0.9s ease-in-out infinite alternate;
}

.app-preloader__niveaux span:nth-child(1) {
  height: 50%;
}

.app-preloader__niveaux span:nth-child(2) {
  height: 75%;
  animation-delay: 0.15s;
}

.app-preloader__niveaux span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes appPreloaderNiveau {
  from {
    transform: scaleY(0.3);
    opacity: 0.45;
  }

  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

html body .stock-preloader__status {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
}

@media (max-width: 575.98px) {
  html body .stock-preloader {
    padding: 16px;
  }

  .app-preloader__marque {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }

  .app-preloader__nom {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-preloader__niveaux span {
    animation: none;
  }
}

/* Page de déconnexion (views/deconnexion.php) : seul le préchargeur s'affiche */
body.page-deconnexion {
  margin: 0;
  background: var(--app-bg);
}

/* Sombre : tuile du logo toujours blanche (logo souvent foncé), ombre plus dense */
@media screen {
  [data-bs-theme="dark"] .app-preloader__marque {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
  }

  [data-bs-theme="dark"] .app-preloader__marque:not(.app-preloader__marque--defaut) {
    background: #ffffff;
  }
}

/* -----------------------------------------------------------------------------
   6 terdecies. Chargement du contenu des pages connectées
   (views/include/chargement_contenu.php, piloté par app-shell.js)
   Couvre seulement la zone de contenu : sous la barre haute, à droite du menu
   (niveau 995, la barre et le menu sont à 996). Fine barre de progression en
   haut de la zone, trois barres de niveau au centre.
   - is-initial : arrivée sur la page, visible dès le premier affichage ;
   - is-navigation : départ vers une autre page ; la barre part tout de suite,
     le voile n'apparaît qu'après 150 ms (une navigation rapide ne clignote pas).
   Pas de transform sur l'élément fixed (WebView Android) : seuls ses enfants
   s'animent.
   ----------------------------------------------------------------------------- */
.app-chargement {
  position: fixed;
  top: var(--app-topbar-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 995;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 8vh;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

@media (min-width: 1200px) {
  .app-chargement {
    left: var(--app-sidebar-w);
  }

  html[data-app-sidebar="mini"] .app-chargement {
    left: var(--app-sidebar-w-mini);
  }
}

.app-chargement.is-actif {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.15s ease, visibility 0s;
}

/* Voile : fond de page, sous la barre et l'indicateur */
.app-chargement::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--app-bg);
}

.app-chargement__centre {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-chargement__niveaux {
  height: 22px;
  margin: 0;
}

.app-chargement__niveaux span {
  width: 6px;
}

/* Arrivée : tout est visible d'emblée, sans fondu */
.app-chargement.is-initial {
  transition: none;
  /* Filet de sécurité si le script ne s'exécute pas : retrait après 15 s */
  animation: appChargementSecours 0s linear 15s forwards;
}

@keyframes appChargementSecours {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* Départ : le voile et l'indicateur attendent 150 ms, la barre part aussitôt */
.app-chargement.is-navigation::before,
.app-chargement.is-navigation .app-chargement__centre {
  animation: appChargementVoile 0.2s ease 0.15s both;
}

@keyframes appChargementVoile {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Barre de progression indéterminée, en haut de la zone de contenu */
.app-chargement__barre {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 3px;
  overflow: hidden;
  background: var(--app-primary-soft);
}

.app-chargement__barre span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 0 3px 3px 0;
  background: var(--app-primary);
  animation: appChargementBarre 1.1s ease-in-out infinite;
}

@keyframes appChargementBarre {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
  .app-chargement__barre span {
    width: 100%;
    animation: none;
  }
}

@media print {
  .app-chargement {
    display: none !important;
  }
}

/* Transition entre pages (Chrome / Edge 126+, Safari 18.2+ ; ignorée ailleurs).
   La barre haute et le menu, nommés le temps de la transition par
   app-shell.js, restent immobiles ; le reste passe en fondu bref. */
@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 0.18s;
}

::view-transition-group(app-topbar),
::view-transition-group(app-sidebar),
::view-transition-new(app-topbar),
::view-transition-new(app-sidebar) {
  animation: none;
}

::view-transition-old(app-topbar),
::view-transition-old(app-sidebar) {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* -----------------------------------------------------------------------------
   6 quattuordecies. Tablette et petit ordinateur (768 à 1399 px) : barres
   d'onglets et d'actions en haut des écrans.

   Entre le téléphone (mobile.css) et le grand écran, la zone de contenu ne
   fait que 700 à 1000 px (le menu latéral en prend une part dès 1200 px) :
     1. les boutons flottants à droite de l'en-tête de carte (Réinitialiser,
        Ajouter client, Ajouter vente, Rapports…) écrasaient les onglets, qui
        s'empilaient en colonne ; ils forment désormais une rangée à part,
        alignée à droite, au-dessus des onglets ;
     2. les onglets tiennent sur une seule ligne (libellés resserrés) ; s'ils
        manquent encore de place, la ligne défile latéralement au lieu de se
        replier sur deux ou trois lignes ;
     3. sous-navigation du module Retours : une seule ligne ;
     4. périodes rapides du tableau de bord : une seule rangée de six.
   Rien ne change sous 768 px (mobile.css) ni à partir de 1400 px.
   Pas de :has, de gap flex ni de min()/max() (WebView des terminaux).
   ----------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1399.98px) {
  /* 1. Actions de l'en-tête de carte : rangée propre au-dessus des onglets. */
  .card-header > .float-end {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    /* important : la vue pose .justify-content-between (utilitaire !important). */
    justify-content: flex-end !important;
    align-items: center;
    width: 100%;
    margin: 0 0 var(--app-space-3);
    padding-bottom: var(--app-space-3);
    border-bottom: 1px solid var(--app-border);
    text-align: initial;
  }

  .card-header > .float-end > .btn,
  .card-header > .float-end > .btn-group,
  .card-header > .float-end > .dropdown {
    margin: var(--app-space-1) 0 var(--app-space-1) var(--app-space-2);
    min-height: 38px;
    white-space: nowrap;
  }

  .card-header > .float-end > .btn {
    display: inline-flex;
    align-items: center;
  }

  .card-header > .float-end > .btn > .bi {
    margin-right: var(--app-space-1);
  }

  /* 2. Onglets sur une seule ligne. */
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* produits.php pose .overflow-auto (important) : la barre verticale
     parasite qui apparaissait à droite des onglets disparaît. */
  .nav-tabs.overflow-auto {
    overflow-y: hidden !important;
  }

  .nav-tabs::-webkit-scrollbar {
    height: 4px;
  }

  .nav-tabs::-webkit-scrollbar-thumb {
    background: var(--app-border-strong);
    border-radius: 4px;
  }

  .nav-tabs > .nav-item {
    flex: 0 0 auto;
  }

  .nav-tabs .nav-link {
    white-space: nowrap;
    padding: var(--app-space-2) var(--app-space-3);
    min-height: 40px;
    font-size: .875rem;
  }

  /* 3. Sous-navigation des retours. */
  .rt-subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .rt-subnav::-webkit-scrollbar {
    display: none;
  }

  .rt-subnav__link {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* 5. Barre haute des caisses autonomes (point_de_vente, point_vente_guichet).
   Entre 900 et 1300 px, style_pos.css ne resserre que les marges : logo, nom
   de l'application, nom de l'écran, caissier, date, heure, réseau et cinq
   boutons se disputaient la ligne et tout finissait tronqué (« STOCK-... »,
   « 12:4... »). On garde l'essentiel en clair (logo, nom de l'écran, caissier,
   heure, En cours) ; le nom de l'application (redit par le logo) et la date
   disparaissent, le réseau et l'accueil passent en icône seule (le libellé
   reste lu par les lecteurs d'écran). */
@media (min-width: 768px) and (max-width: 1299.98px) {
  .pos-topbar .pos-brand .pos-brand-app {
    display: none;
  }

  .pos-topbar .pos-brand .pos-brand-page {
    margin-left: 0;
    font-size: 0.9rem;
    opacity: 1;
  }

  .pos-topbar .pos-info .pos-info-item:nth-child(2) {
    display: none;
  }

  .pos-topbar .pos-info {
    flex-shrink: 1;
  }

  .pos-topbar .pos-net-label {
    display: none;
  }

  .pos-topbar .pos-actions > a.btn-pos:not(.btn-pos-icon) {
    font-size: 0;
    padding-left: 10px;
    padding-right: 10px;
  }

  .pos-topbar .pos-actions > a.btn-pos:not(.btn-pos-icon) > .bi {
    font-size: 0.95rem;
  }
}

/* Le tableau de bord passe en grille de trois sous 1200 px
   (dashboard.admin.css) : sur tablette, les six périodes tiennent sur une
   rangée, l'étiquette au-dessus. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  /* body : dashboard.admin.css est chargée après cette feuille. */
  body .dashboard-admin .dashboard-periods {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Listes à recherche (dselect) : un libellé plus long que le champ (« Toutes
   les années », « Toutes les catégories ») se termine par des points de
   suspension au lieu de faire grandir le champ sur deux ou trois lignes. */
.dselect-wrapper > button.form-select {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Croix « Effacer la sélection » des listes dselect. dselect.min.css n'est
   chargée que par les deux caisses : ailleurs la croix tombait sous la liste
   (36 px de plus par liste) et restait visible sans sélection. Reprise ici
   des seules règles de la bibliothèque qui la placent dans le champ, à gauche
   de la flèche, et la masquent tant que rien n'est choisi. */
.dselect-wrapper {
  position: relative;
}

.dselect-wrapper > .form-select.dselect-clearable {
  padding-right: 3.25rem;
}

.dselect-wrapper > .dselect-clear {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2.25rem;
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--app-text-muted);
  cursor: pointer;
}

.dselect-wrapper > .dselect-clear:hover {
  color: var(--app-text);
}

.dselect-wrapper > .dselect-clear svg {
  width: 0.625rem;
  height: 0.625rem;
}

.dselect-wrapper > [data-dselect-text=""] ~ .dselect-clear,
.dselect-wrapper > .form-select:not([data-dselect-text]) ~ .dselect-clear {
  display: none;
}

/* Champs de saisie des écrans : une seule hauteur et un seul corps de texte.
   Les filtres mélangeaient trois tailles : recherche et dates à 38 px, listes
   créées en petite taille (dselectConfigFilter / dselectConfigLimited de
   config.js, form-select-sm, input-group-sm : 30 à 31 px, texte 13,6 à 14 px)
   et groupes étirés à 45 px par leur bouton (recherche de l'inventaire).
   Tout champ de #main prend la taille normale : 38 px, 44 px au téléphone
   (mobile.css). Restent petits, exprès : les champs saisis dans les lignes
   d'un tableau et le choix du nombre de lignes du pager. Les caisses
   autonomes n'ont pas de #main : non concernées. */
#main .form-control-sm:not(textarea),
#main .input-group-sm > .form-control {
  min-height: 38px;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
}

#main .form-select-sm,
#main .input-group-sm > .form-select {
  min-height: 38px;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 1rem;
}

#main .form-control-sm:not(textarea),
#main .form-select-sm {
  border-radius: var(--app-radius);
}

#main .input-group-sm > .input-group-text,
#main .input-group-sm > .btn {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
}

/* Le bouton accolé à un champ (Effacer, Rechercher) ne l'étire plus : ses
   marges verticales de bouton (10 px) portaient le groupe à 45 px. */
#main .input-group > .btn {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

@media (min-width: 768px) {
  #main .input-group > .btn {
    min-height: 38px;
  }
}

/* Tableau de bord : dashboard.admin.css met ses filtres à 0,85 rem et fixe
   38 px, y compris au téléphone. */
#main .dashboard-filters .form-control,
#main .dashboard-filters .form-select {
  font-size: 1rem;
}

@media (max-width: 767.98px) {
  #main .dashboard-filters .form-control,
  #main .dashboard-filters .form-select {
    min-height: 44px;
  }
}

@media (max-width: 767.98px) {
  #main .form-control-sm:not(textarea),
  #main .form-select-sm,
  #main .input-group-sm > .form-control,
  #main .input-group-sm > .form-select,
  #main .input-group-sm > .btn {
    min-height: 44px;
  }
}

/* Zones de filtres (.app-filtres, posée sur la rangée dans chaque vue) : tous
   les champs ont la même largeur. Chaque écran avait sa grille (colonnes de
   2, 3, 4 ou 6 douzièmes) : 158 px à côté de 316 px dans une même zone. À
   partir de 768 px, la rangée devient une grille de cases égales d'au moins
   210 px qui se répartissent la largeur et passent à la ligne régulièrement ;
   une colonne « col-12 » seule (boutons, cases à cocher) prend toute la
   ligne. Sous 768 px, la grille Bootstrap d'origine reste (téléphone inchangé).
   Grille et gap de grille : pris en charge par les WebView des terminaux. */
@media (min-width: 768px) {
  #main .app-filtres {
    display: grid;
    /* auto-fit : sur grand écran, les colonnes vides disparaissent et les
       cases s'étirent (plus de vide à droite quand la zone a peu de champs). */
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    grid-gap: 16px;
    gap: 16px;
    /* Haut : une case peut contenir plus que son champ (menu de liste masqué,
       aide). Les vues qui alignent par le bas posent .align-items-end. */
    align-items: start;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
  }

  #main .app-filtres > * {
    width: auto;
    max-width: none;
    flex: none;
    min-width: 0;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  #main .app-filtres > [class~="col-12"]:not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]),
  #main .app-filtres > .w-100 {
    grid-column: 1 / -1;
  }

  /* Un bouton seul dans sa case (Réinitialiser, Filtrer) remplit la case. */
  #main .app-filtres > * > .btn:only-of-type {
    width: 100%;
  }

  /* Case d'actions à plusieurs boutons, ou champ principal (recherche) :
     deux cases de large. */
  #main .app-filtres > .app-filtres__actions,
  #main .app-filtres > .app-filtres__large {
    grid-column: span 2;
  }

  /* Boutons de la zone à la hauteur des champs : 45 px (dépassaient le bas
     des champs voisins) ou 29 px (btn-sm de Camions) auparavant. */
  #main .app-filtres .btn:not(.dselect-clear):not(.dropdown-item),
  #main .app-filtres .btnPage {
    min-height: 38px;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  #main .app-filtres .btn-sm {
    font-size: 0.875rem;
  }

  /* Cases qui alignent leur contenu en bas (case à cocher, Réinitialiser de
     l'inventaire) : elles occupent toute la hauteur de la ligne. */
  #main .app-filtres > .d-flex {
    align-self: stretch;
  }

  /* Leur marge basse mb-2 (réglage de l'ancienne hauteur des champs) les
     laissait 8 px au-dessus du bas des champs voisins. */
  #main .app-filtres > .d-flex > .mb-2 {
    margin-bottom: 0 !important;
  }
}

/* Exceptions : lignes de tableau et pager gardent la petite taille. */
#main table .form-control-sm,
#main table .form-select-sm,
#main table .input-group-sm > .form-control,
#main table .input-group-sm > .form-select,
#main .app-pager .form-select-sm {
  min-height: calc(1.5em + 0.5rem + 2px);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
}

#main table .form-control-sm,
#main table .input-group-sm > .form-control {
  padding-right: 0.5rem;
}

#main table .form-select-sm,
#main table .input-group-sm > .form-select,
#main .app-pager .form-select-sm {
  padding-right: 2rem;
}

#main table .input-group-sm > .input-group-text,
#main table .input-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

@media (max-width: 767.98px) {
  #main table .form-control-sm,
  #main table .form-select-sm,
  #main .app-pager .form-select-sm {
    min-height: 38px;
  }
}

/* -----------------------------------------------------------------------------
   7. Thème sombre : composants Bootstrap et écrans existants.
   Les couleurs écrites en dur dans style.css (blanc, gris Bootstrap…) sont
   reprises ici par les jetons ; rien n'est retiré de style.css.
   ----------------------------------------------------------------------------- */
@media screen {
  /* Liens de texte seulement : les liens habillés en bouton gardent leur style */
  [data-bs-theme="dark"] a:not([class]) {
    color: var(--app-primary);
  }

  [data-bs-theme="dark"] .text-primary:not([class*="bg-"]) {
    color: var(--app-primary) !important;
  }

  /* text-dark sur un aplat clair (bg-warning, bg-light…) reste sombre */
  [data-bs-theme="dark"] .text-dark:not([class*="bg-"]),
  [data-bs-theme="dark"] .text-black:not([class*="bg-"]),
  [data-bs-theme="dark"] .text-body {
    color: var(--app-text) !important;
  }

  [data-bs-theme="dark"] .text-muted,
  [data-bs-theme="dark"] .text-secondary {
    color: var(--app-text-muted) !important;
  }

  [data-bs-theme="dark"] .text-success { color: var(--app-success-text) !important; }
  [data-bs-theme="dark"] .text-danger { color: var(--app-danger-text) !important; }
  [data-bs-theme="dark"] .text-warning { color: var(--app-warning-text) !important; }
  [data-bs-theme="dark"] .text-info { color: var(--app-info-text) !important; }

  [data-bs-theme="dark"] .bg-white,
  [data-bs-theme="dark"] .bg-body {
    background-color: var(--app-surface) !important;
  }

  [data-bs-theme="dark"] .bg-light,
  [data-bs-theme="dark"] .bg-body-tertiary,
  [data-bs-theme="dark"] .bg-body-secondary {
    background-color: var(--app-surface-2) !important;
    color: var(--app-text);
  }

  [data-bs-theme="dark"] .border,
  [data-bs-theme="dark"] .border-top,
  [data-bs-theme="dark"] .border-bottom,
  [data-bs-theme="dark"] .border-start,
  [data-bs-theme="dark"] .border-end {
    border-color: var(--app-border) !important;
  }

  [data-bs-theme="dark"] .card,
  [data-bs-theme="dark"] .modal-content,
  [data-bs-theme="dark"] .dropdown-menu,
  [data-bs-theme="dark"] .list-group-item,
  [data-bs-theme="dark"] .offcanvas,
  [data-bs-theme="dark"] .popover,
  [data-bs-theme="dark"] .accordion-item,
  [data-bs-theme="dark"] .accordion-button {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
  }

  [data-bs-theme="dark"] .card-header,
  [data-bs-theme="dark"] .card-footer,
  [data-bs-theme="dark"] .modal-footer,
  [data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--app-surface-2);
    color: var(--app-text);
    border-color: var(--app-border);
  }

  [data-bs-theme="dark"] .card-title,
  [data-bs-theme="dark"] .pagetitle h1,
  [data-bs-theme="dark"] h1,
  [data-bs-theme="dark"] h2,
  [data-bs-theme="dark"] h3,
  [data-bs-theme="dark"] h4,
  [data-bs-theme="dark"] h5,
  [data-bs-theme="dark"] h6 {
    color: var(--app-text);
  }

  [data-bs-theme="dark"] .breadcrumb,
  [data-bs-theme="dark"] .breadcrumb-item,
  [data-bs-theme="dark"] .breadcrumb-item.active,
  [data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--app-text-muted);
  }

  [data-bs-theme="dark"] .dropdown-item {
    color: var(--app-text);
  }

  [data-bs-theme="dark"] .dropdown-item:hover,
  [data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--app-surface-hover);
    color: var(--app-text);
  }

  [data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--app-border);
  }

  [data-bs-theme="dark"] .form-control,
  [data-bs-theme="dark"] .form-select,
  [data-bs-theme="dark"] .input-group-text,
  [data-bs-theme="dark"] textarea,
  [data-bs-theme="dark"] select,
  [data-bs-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]) {
    background-color: var(--app-input-bg);
    color: var(--app-text);
    border-color: var(--app-input-border);
  }

  [data-bs-theme="dark"] .input-group-text {
    background-color: var(--app-surface-2);
  }

  [data-bs-theme="dark"] .form-control::placeholder,
  [data-bs-theme="dark"] input::placeholder,
  [data-bs-theme="dark"] textarea::placeholder {
    color: var(--app-text-muted);
  }

  [data-bs-theme="dark"] .form-control:disabled,
  [data-bs-theme="dark"] .form-control[readonly],
  [data-bs-theme="dark"] .form-select:disabled {
    background-color: var(--app-disabled-bg);
    color: var(--app-disabled-text);
  }

  [data-bs-theme="dark"] .form-check-input {
    background-color: var(--app-input-bg);
    border-color: var(--app-input-border);
  }

  [data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--app-primary-solid);
    border-color: var(--app-primary-solid);
  }

  [data-bs-theme="dark"] .table {
    --bs-table-bg: var(--app-surface);
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
    --bs-table-striped-bg: var(--app-surface-2);
    --bs-table-striped-color: var(--app-text);
    --bs-table-hover-bg: var(--app-surface-hover);
    --bs-table-hover-color: var(--app-text);
    --bs-table-active-bg: var(--app-surface-hover);
    --bs-table-active-color: var(--app-text);
    color: var(--app-text);
    border-color: var(--app-border);
  }

  [data-bs-theme="dark"] .table > :not(caption) > * > * {
    border-color: var(--app-border);
  }

  [data-bs-theme="dark"] .table thead th,
  [data-bs-theme="dark"] .table-light,
  [data-bs-theme="dark"] .table-light > * > * {
    --bs-table-bg: var(--app-surface-2);
    --bs-table-color: var(--app-text);
    background-color: var(--app-surface-2);
    color: var(--app-text);
    border-color: var(--app-border-strong);
  }

  /* Lignes en promotion (table-success : listes de produits et paniers de vente).
     Bootstrap fixe un vert clair + texte noir qui ne suit pas le thème, et le prix
     promo (text-success, vert clair en sombre) y devenait illisible. */
  [data-bs-theme="dark"] .table-success,
  [data-bs-theme="dark"] .table-success > * {
    --bs-table-bg: var(--app-success-soft);
    --bs-table-color: var(--app-text);
    --bs-table-striped-bg: var(--app-success-soft);
    --bs-table-striped-color: var(--app-text);
    --bs-table-hover-bg: var(--app-success-border);
    --bs-table-hover-color: var(--app-text);
    --bs-table-active-bg: var(--app-success-border);
    --bs-table-active-color: var(--app-text);
    --bs-table-border-color: var(--app-success-border);
    color: var(--app-text);
    border-color: var(--app-success-border);
  }

  [data-bs-theme="dark"] .form-control.border-success {
    border-color: var(--app-success) !important;
  }

  /* Point de vente : prix promo du panier */
  [data-bs-theme="dark"] .pos-cart-item .item-badge-promo {
    background: var(--app-success-solid);
  }

  [data-bs-theme="dark"] .pos-cart-item .item-prix-barre {
    color: var(--app-text-muted);
  }

  [data-bs-theme="dark"] .pos-cart-item .item-prix-saisie {
    background: var(--app-surface);
    border-color: var(--app-border-strong);
    color: var(--app-text);
  }

  [data-bs-theme="dark"] .pos-cart-item .item-prix-promo {
    color: var(--app-success-text);
  }

  [data-bs-theme="dark"] .pos-cart-item .item-prix-saisie.item-prix-promo {
    border-color: var(--app-success-border);
    background: var(--app-success-soft);
  }

  [data-bs-theme="dark"] .pos-product-card .promo-price {
    color: var(--app-success-text);
  }

  /* Point de vente : modales (paiement, client, facture) et confirmation.
     Les couleurs suivent déjà les jetons (style_pos.css) ; ici, les aplats
     violets passent au violet soutenu et les ombres au noir. */
  [data-bs-theme="dark"] .pos-pay-modal,
  [data-bs-theme="dark"] .pos-modal {
    border: 1px solid var(--app-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  }

  [data-bs-theme="dark"] .pos-pay-entete,
  [data-bs-theme="dark"] .pos-pay-btn-calc,
  [data-bs-theme="dark"] .pos-pay-btn--encaisser.btn,
  [data-bs-theme="dark"] .pos-conf__icone,
  [data-bs-theme="dark"] .pos-conf__resume {
    background: linear-gradient(135deg, var(--app-primary-solid) 0%, var(--app-primary-2) 100%);
  }

  [data-bs-theme="dark"] .pos-pay-btn-calc,
  [data-bs-theme="dark"] .pos-pay-btn--encaisser.btn {
    box-shadow: none;
  }

  [data-bs-theme="dark"] .pos-pay-lien.btn {
    color: var(--app-primary);
  }

  [data-bs-theme="dark"] .pos-pay-lien--recu.btn {
    color: var(--app-success-text);
  }

  [data-bs-theme="dark"] .pos-pay-date {
    color-scheme: dark;
  }

  [data-bs-theme="dark"] .pos-conf__ligne--remise {
    color: var(--app-danger-text);
  }

  /* Crédits commerciaux : KPI, badges, boutons et fiche client */
  [data-bs-theme="dark"] .cc-kpi--info .kpi-bar { background: var(--app-info); }
  [data-bs-theme="dark"] .cc-kpi--info .kpi-icon { background: var(--app-info-soft); color: var(--app-info-text); }
  [data-bs-theme="dark"] .cc-kpi--warning .kpi-bar { background: var(--app-warning); }
  [data-bs-theme="dark"] .cc-kpi--warning .kpi-icon { background: var(--app-warning-soft); color: var(--app-warning-text); }
  [data-bs-theme="dark"] .cc-kpi--danger .kpi-bar,
  [data-bs-theme="dark"] .cc-kpi--alerte .kpi-bar { background: var(--app-danger); }
  [data-bs-theme="dark"] .cc-kpi--danger .kpi-icon,
  [data-bs-theme="dark"] .cc-kpi--alerte .kpi-icon { background: var(--app-danger-soft); color: var(--app-danger-text); }
  [data-bs-theme="dark"] .cc-kpi--success .kpi-bar { background: var(--app-success); }
  [data-bs-theme="dark"] .cc-kpi--success .kpi-icon { background: var(--app-success-soft); color: var(--app-success-text); }
  [data-bs-theme="dark"] .cc-kpi--primary .kpi-bar { background: var(--app-primary); }
  [data-bs-theme="dark"] .cc-kpi--primary .kpi-icon { background: var(--app-primary-soft); color: var(--app-primary); }

  [data-bs-theme="dark"] .badge-aucun,
  [data-bs-theme="dark"] .badge-type {
    background: var(--app-surface-2);
    color: var(--app-text-secondary);
    border: 1px solid var(--app-border);
  }

  [data-bs-theme="dark"] .cc-btn-situation.btn {
    background: var(--app-primary-soft);
    color: var(--app-primary);
    border-color: var(--app-border-strong);
  }

  [data-bs-theme="dark"] .cc-btn-situation.btn:hover,
  [data-bs-theme="dark"] .cc-btn-situation.btn:focus-visible {
    background: var(--app-surface-hover);
    color: var(--app-text);
    border-color: var(--app-primary);
  }

  [data-bs-theme="dark"] .cc-btn-payer.btn {
    background: var(--app-success-soft);
    color: var(--app-success-text);
    border-color: var(--app-success-border);
  }

  [data-bs-theme="dark"] .cc-btn-payer.btn:hover,
  [data-bs-theme="dark"] .cc-btn-payer.btn:focus-visible {
    background: var(--app-success-border);
    color: var(--app-text);
    border-color: var(--app-success);
  }

  [data-bs-theme="dark"] .cc-num,
  [data-bs-theme="dark"] .mini-kpi .mk-val--engage {
    color: var(--app-primary);
  }

  [data-bs-theme="dark"] .fiche-taux {
    color: var(--app-success-text);
  }

  [data-bs-theme="dark"] .fiche-header,
  [data-bs-theme="dark"] .cc-modal-entete,
  [data-bs-theme="dark"] .cc-btn-valider.btn {
    background: linear-gradient(135deg, var(--app-primary-solid), var(--app-primary-2));
  }

  [data-bs-theme="dark"] .fiche-header .fiche-btn.btn {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
  }

  [data-bs-theme="dark"] .cc-btn-detail.btn,
  [data-bs-theme="dark"] .cc-btn-recu.btn {
    color: var(--app-primary);
    border-color: var(--app-border-strong);
  }

  [data-bs-theme="dark"] .cc-btn-detail.btn:hover,
  [data-bs-theme="dark"] .cc-btn-detail.btn:focus-visible,
  [data-bs-theme="dark"] .cc-btn-recu.btn:hover,
  [data-bs-theme="dark"] .cc-btn-recu.btn:focus-visible {
    color: var(--app-text);
    background: var(--app-surface-hover);
    border-color: var(--app-primary);
  }

  [data-bs-theme="dark"] tr.cc-detail-ligne > td {
    background: var(--app-surface-2) !important;
  }

  [data-bs-theme="dark"] .cc-detail {
    border-left-color: var(--app-primary);
  }

  [data-bs-theme="dark"] .cc-detail__resume span,
  [data-bs-theme="dark"] .cc-detail__paiements th {
    color: var(--app-text-muted);
  }

  [data-bs-theme="dark"] .cc-detail__titre {
    color: var(--app-primary);
  }

  [data-bs-theme="dark"] .fiche-alerte__action.btn {
    color: var(--app-danger-text);
    background: transparent;
    border-color: var(--app-danger-border);
  }

  [data-bs-theme="dark"] .fiche-alerte__action.btn:hover,
  [data-bs-theme="dark"] .fiche-alerte__action.btn:focus-visible {
    color: #fff;
    background: var(--app-danger-solid);
    border-color: var(--app-danger-solid);
  }

  [data-bs-theme="dark"] .fiche-header .fiche-btn.btn:hover,
  [data-bs-theme="dark"] .fiche-header .fiche-btn.btn:focus-visible {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
  }

  /* Ventes : barre d'actions du formulaire */
  [data-bs-theme="dark"] .vente-actions {
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.45);
  }

  [data-bs-theme="dark"] .vente-actions__valider {
    box-shadow: none;
  }

  [data-bs-theme="dark"] .nav-tabs {
    border-color: var(--app-border);
  }

  [data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--app-text-secondary);
  }

  [data-bs-theme="dark"] .nav-tabs .nav-link.active,
  [data-bs-theme="dark"] .nav-tabs .nav-item.show .nav-link {
    background-color: var(--app-surface);
    color: var(--app-primary);
    border-color: var(--app-border) var(--app-border) var(--app-surface);
  }

  [data-bs-theme="dark"] .btn-light,
  [data-bs-theme="dark"] .btn-outline-light {
    background-color: var(--app-surface-2);
    color: var(--app-text);
    border-color: var(--app-border-strong);
  }

  [data-bs-theme="dark"] .btn-outline-secondary,
  [data-bs-theme="dark"] .btn-outline-dark {
    color: var(--app-text-secondary);
    border-color: var(--app-border-strong);
  }

  [data-bs-theme="dark"] .btn-outline-secondary:hover,
  [data-bs-theme="dark"] .btn-outline-dark:hover {
    background-color: var(--app-surface-hover);
    color: var(--app-text);
  }

  [data-bs-theme="dark"] .btn-outline-primary {
    color: var(--app-primary);
    border-color: var(--app-primary);
  }

  [data-bs-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--app-primary-solid);
    color: var(--app-text-on-primary);
  }

  [data-bs-theme="dark"] .page-link {
    background-color: var(--app-surface);
    color: var(--app-primary);
    border-color: var(--app-border);
  }

  [data-bs-theme="dark"] .page-item.active .page-link {
    background-color: var(--app-primary-solid);
    border-color: var(--app-primary-solid);
    color: var(--app-text-on-primary);
  }

  [data-bs-theme="dark"] .alert-success { background-color: var(--app-success-soft); color: var(--app-success-text); border-color: var(--app-success-border); }
  [data-bs-theme="dark"] .alert-danger { background-color: var(--app-danger-soft); color: var(--app-danger-text); border-color: var(--app-danger-border); }
  [data-bs-theme="dark"] .alert-warning { background-color: var(--app-warning-soft); color: var(--app-warning-text); border-color: var(--app-warning-border); }
  [data-bs-theme="dark"] .alert-info { background-color: var(--app-info-soft); color: var(--app-info-text); border-color: var(--app-info-border); }
  [data-bs-theme="dark"] .alert-primary,
  [data-bs-theme="dark"] .alert-secondary,
  [data-bs-theme="dark"] .alert-light {
    background-color: var(--app-primary-soft);
    color: var(--app-text);
    border-color: var(--app-border-strong);
  }

  [data-bs-theme="dark"] .badge.bg-light,
  [data-bs-theme="dark"] .badge.text-bg-light {
    background-color: var(--app-surface-3) !important;
    color: var(--app-text) !important;
  }

  [data-bs-theme="dark"] .progress {
    background-color: var(--app-surface-3);
  }

  [data-bs-theme="dark"] .modal-header .btn-close:not(.btn-close-white) {
    filter: invert(1) grayscale(100%) brightness(200%);
  }

  [data-bs-theme="dark"] .footer {
    border-color: var(--app-border);
    color: var(--app-text-muted);
  }

  [data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--app-surface-2);
  }

  [data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--app-border-strong);
  }
}

/* -----------------------------------------------------------------------------
   7 bis. Thème sombre : reprises des feuilles existantes (relevé automatique)
   Relevé de style.css, mobile.css, style_pos.css, dashboard.admin.css,
   camion.css, aide-assistant.css et style_login.css : chaque règle qui peint un
   fond clair écrit en dur (#fff, gris clair, teinte douce) ou via
   --natural-white, un fond --dark-forest, ou un texte violet, gris foncé ou
   d'état, est reprise ici par le jeton qui convient en sombre. Rien n'est
   modifié dans ces feuilles.
   ----------------------------------------------------------------------------- */
@media screen {
  [data-bs-theme="dark"] .bg-secondary-light,
  [data-bs-theme="dark"] .bg-dark-light,
  [data-bs-theme="dark"] .card-header,
  [data-bs-theme="dark"] .card-footer,
  [data-bs-theme="dark"] .dashboard .activity .activity-item .activity-badge,
  [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
  [data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--disabled .select2-selection,
  [data-bs-theme="dark"] .inv-toolbar,
  [data-bs-theme="dark"] .inv-chip,
  [data-bs-theme="dark"] .rt-bulk .rt-btn,
  [data-bs-theme="dark"] .recouvrement-card,
  [data-bs-theme="dark"] .pdf-frame,
  [data-bs-theme="dark"] .pdf-loading,
  [data-bs-theme="dark"] .credit-page .mini-kpi,
  [data-bs-theme="dark"] .pxd-kpi,
  [data-bs-theme="dark"] .cs-editeur,
  [data-bs-theme="dark"] .cs-resultat,
  [data-bs-theme="dark"] .acr-fait,
  [data-bs-theme="dark"] .acr-tuile,
  [data-bs-theme="dark"] .acr-vide,
  [data-bs-theme="dark"] .dashboard-filters,
  [data-bs-theme="dark"] .dashboard-filters .form-control,
  [data-bs-theme="dark"] .dashboard-filters .form-select,
  [data-bs-theme="dark"] .period-btn,
  [data-bs-theme="dark"] .stat-mini,
  [data-bs-theme="dark"] .checkmark::after,
  [data-bs-theme="dark"] .btn-spinner {
    border-color: var(--app-border);
  }

  @media (max-width: 767.98px) {
    [data-bs-theme="dark"] .inv-toolbar .form-switch {
      border-color: var(--app-border);
    }
  }

  @media (max-width: 991.98px) {
    [data-bs-theme="dark"] #grillePrix tbody tr,
    [data-bs-theme="dark"] .pxd-promos-panel .table-responsive {
      border-color: var(--app-border);
    }
  }

  @media (max-width: 900px) {
    [data-bs-theme="dark"] .pos-cart-fab .pos-cart-fab-badge {
      border-color: var(--app-border);
    }
  }

  @media (min-width: 768px) {
    [data-bs-theme="dark"] .dropdown-menu-arrow::before {
      border-top-color: var(--app-border);
    }
  }

  [data-bs-theme="dark"] .contact .php-email-form .loading:before,
  [data-bs-theme="dark"] .acr-actions,
  [data-bs-theme="dark"] .btn-spinner {
    border-top-color: var(--app-border);
  }

  [data-bs-theme="dark"] .nav-tabs-bordered,
  [data-bs-theme="dark"] .cc-table thead th,
  [data-bs-theme="dark"] .cc-tabs .nav-link.active,
  [data-bs-theme="dark"] .dash-debiteur-row,
  [data-bs-theme="dark"] .credit-page .cc-table thead th,
  [data-bs-theme="dark"] .pos-cart-item,
  [data-bs-theme="dark"] .dashboard .table thead th {
    border-bottom-color: var(--app-border);
  }

  @media (max-width: 767.98px) {
    [data-bs-theme="dark"] #inventaireTabsContent .inv-table tbody td:nth-child(2) {
      border-bottom-color: var(--app-border);
    }
  }

  @media (max-width: 575.98px) {
    [data-bs-theme="dark"] .table:not(.mobile-card-table):not(:has(> thead)) tr {
      border-bottom-color: var(--app-border);
    }
  }

  @media (max-width: 991.98px) {
    [data-bs-theme="dark"] table.mobile-card-table tbody td {
      border-bottom-color: var(--app-border) !important;
    }
  }

  [data-bs-theme="dark"] .cs-resultat thead th {
    border-bottom-color: var(--app-border) !important;
  }

  @media (min-width: 768px) {
    [data-bs-theme="dark"] .dropdown-menu-arrow::before {
      border-left-color: var(--app-border);
    }
  }

  [data-bs-theme="dark"] .steps-progress,
  [data-bs-theme="dark"] .step-number,
  [data-bs-theme="dark"] .promotion-info,
  [data-bs-theme="dark"] .card.border-primary,
  [data-bs-theme="dark"] .inv-skeleton span,
  [data-bs-theme="dark"] .rt-skeleton span,
  [data-bs-theme="dark"] .pos-cart-summary,
  [data-bs-theme="dark"] .dashboard-filters {
    background-image: none;
    background-color: var(--app-surface);
  }

  [data-bs-theme="dark"] .alert.alert-success {
    background-image: none;
    background-color: var(--app-success-soft);
  }

  [data-bs-theme="dark"] .alert.alert-warning {
    background-image: none;
    background-color: var(--app-warning-soft);
  }

  [data-bs-theme="dark"] .cam-module .btn-cam.entree,
  [data-bs-theme="dark"] .cam-module .cam-barre .piste.entree > span {
    background-color: var(--app-success-solid);
  }

  [data-bs-theme="dark"] .cam-module .btn-cam.sortie,
  [data-bs-theme="dark"] .cam-module .cam-barre .piste > span {
    background-color: var(--app-danger-solid);
  }

  [data-bs-theme="dark"] .badge-annule,
  [data-bs-theme="dark"] .badge-retard,
  [data-bs-theme="dark"] .dash-stat-pill.down,
  [data-bs-theme="dark"] .cs-nature-structure {
    background-color: var(--app-danger-soft);
  }

  [data-bs-theme="dark"] .rt-chip--warning,
  [data-bs-theme="dark"] .badge-partiel,
  [data-bs-theme="dark"] .dash-stat-pill.up,
  [data-bs-theme="dark"] .cs-nature-ecriture {
    background-color: var(--app-warning-soft);
  }

  [data-bs-theme="dark"] #grillePrix tr.pxd-modifie {
    background-color: var(--app-warning-soft) !important;
  }

  [data-bs-theme="dark"] .badge-solde,
  [data-bs-theme="dark"] .dash-stat-pill.ok,
  [data-bs-theme="dark"] .cs-nature-lecture {
    background-color: var(--app-success-soft);
  }

  [data-bs-theme="dark"] .badge-encours {
    background-color: var(--app-info-soft);
  }

  [data-bs-theme="dark"] .step.error .step-label,
  [data-bs-theme="dark"] .rt-chip--danger,
  [data-bs-theme="dark"] .rt-iconbtn--danger:hover,
  [data-bs-theme="dark"] .badge-annule,
  [data-bs-theme="dark"] .badge-retard,
  [data-bs-theme="dark"] .dash-stat-pill.down,
  [data-bs-theme="dark"] .dash-debiteur-row .montant,
  [data-bs-theme="dark"] .cs-nature-structure,
  [data-bs-theme="dark"] .evolution-value.negative,
  [data-bs-theme="dark"] .aide-actions-secondaires .aide-bouton-secondaire.danger {
    color: var(--app-danger-text);
  }

  [data-bs-theme="dark"] .rt-chip--warning,
  [data-bs-theme="dark"] .badge-partiel,
  [data-bs-theme="dark"] .dash-stat-pill.up,
  [data-bs-theme="dark"] #grillePrix tr.pxd-modifie .pxd-vente,
  [data-bs-theme="dark"] .cs-nature-ecriture,
  [data-bs-theme="dark"] .cam-module-modal .cam-montant-fiche.sortie {
    color: var(--app-warning-text);
  }

  [data-bs-theme="dark"] .rt-chip--success,
  [data-bs-theme="dark"] .rt-iconbtn--success:hover,
  [data-bs-theme="dark"] .badge-solde,
  [data-bs-theme="dark"] .dash-stat-pill.ok,
  [data-bs-theme="dark"] .cs-nature-lecture,
  [data-bs-theme="dark"] .cam-module-modal .cam-montant-fiche.entree {
    color: var(--app-success-text);
  }

  [data-bs-theme="dark"] .rt-chip--info,
  [data-bs-theme="dark"] .rt-iconbtn--info:hover,
  [data-bs-theme="dark"] .badge-encours,
  [data-bs-theme="dark"] .credit-page .cc-kpi .kpi-val,
  [data-bs-theme="dark"] .credit-page .dash-title,
  [data-bs-theme="dark"] .section-header h5,
  [data-bs-theme="dark"] .dashboard .card .card-title,
  [data-bs-theme="dark"] .stat-mini .stat-value {
    color: var(--app-info-text);
  }

  @media (min-width: 768px) {
    [data-bs-theme="dark"] .dropdown-menu-arrow::before {
      background-color: var(--app-surface);
    }
  }

  [data-bs-theme="dark"] .card,
  [data-bs-theme="dark"] .card-header,
  [data-bs-theme="dark"] .card-footer,
  [data-bs-theme="dark"] .card-img-overlay,
  [data-bs-theme="dark"] .nav-tabs-bordered .nav-link.active,
  [data-bs-theme="dark"] .iconslist .icon,
  [data-bs-theme="dark"] .contact .info-box,
  [data-bs-theme="dark"] .contact .php-email-form .loading,
  [data-bs-theme="dark"] .footer,
  [data-bs-theme="dark"] .search-results-tables,
  [data-bs-theme="dark"] .permissions-container,
  [data-bs-theme="dark"] #addMultipleProductsToDepotModal .table-container,
  [data-bs-theme="dark"] .step,
  [data-bs-theme="dark"] .step:hover,
  [data-bs-theme="dark"] .step-content,
  [data-bs-theme="dark"] .file-preview,
  [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single,
  [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple,
  [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown,
  [data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--disabled .select2-selection,
  [data-bs-theme="dark"] .promotion-card,
  [data-bs-theme="dark"] .pdf-container,
  [data-bs-theme="dark"] .responsive-pdf-frame,
  [data-bs-theme="dark"] .pdf-loading,
  [data-bs-theme="dark"] .pdf-error,
  [data-bs-theme="dark"] .inv-toolbar,
  [data-bs-theme="dark"] .rt-subnav,
  [data-bs-theme="dark"] .rt-kpi,
  [data-bs-theme="dark"] .rt-card,
  [data-bs-theme="dark"] .rt-toolbar .input-group-text,
  [data-bs-theme="dark"] .rt-segment,
  [data-bs-theme="dark"] .rt-btn--ghost,
  [data-bs-theme="dark"] .rt-iconbtn,
  [data-bs-theme="dark"] .rt-block,
  [data-bs-theme="dark"] .rt-minitable,
  [data-bs-theme="dark"] .cc-table thead th,
  [data-bs-theme="dark"] .cc-table tbody tr:hover,
  [data-bs-theme="dark"] .recouvrement-card,
  [data-bs-theme="dark"] .pdf-frame,
  [data-bs-theme="dark"] .cc-tabs .nav-link.active,
  [data-bs-theme="dark"] .dash-debiteur-row .nbc,
  [data-bs-theme="dark"] .credit-page .cc-table thead th,
  [data-bs-theme="dark"] .credit-page .mini-kpi,
  [data-bs-theme="dark"] .credit-page .mini-kpi:hover,
  [data-bs-theme="dark"] .pxd-regle,
  [data-bs-theme="dark"] .pxd-kpi,
  [data-bs-theme="dark"] .pxd-promos-panel,
  [data-bs-theme="dark"] .pxd-promos-panel .table,
  [data-bs-theme="dark"] .cs-editeur,
  [data-bs-theme="dark"] .cs-editeur:focus,
  [data-bs-theme="dark"] .cs-resultat thead th,
  [data-bs-theme="dark"] .cs-table-item:hover,
  [data-bs-theme="dark"] .cs-colonne:hover,
  [data-bs-theme="dark"] .acr-fait,
  [data-bs-theme="dark"] .acr-tuile,
  [data-bs-theme="dark"] .acr-vide,
  [data-bs-theme="dark"] .pos-depot-selector select,
  [data-bs-theme="dark"] .pos-search-bar input,
  [data-bs-theme="dark"] .pos-category-btn:not(.active),
  [data-bs-theme="dark"] .pos-product-card,
  [data-bs-theme="dark"] .pos-cart-panel,
  [data-bs-theme="dark"] .pos-cart-client select,
  [data-bs-theme="dark"] .pos-cart-item .qty-btn,
  [data-bs-theme="dark"] .cart-search-input-wrapper input:focus,
  [data-bs-theme="dark"] .period-btn,
  [data-bs-theme="dark"] .dashboard-loading::after,
  [data-bs-theme="dark"] .stat-mini,
  [data-bs-theme="dark"] .stat-mini:hover,
  [data-bs-theme="dark"] .cam-module .cam-plaque,
  [data-bs-theme="dark"] .cam-module .cam-carte,
  [data-bs-theme="dark"] .cam-module .cam-filtres,
  [data-bs-theme="dark"] .cam-module .btn-cam.discret,
  [data-bs-theme="dark"] .cam-module .cam-chip,
  [data-bs-theme="dark"] .cam-module .cam-livre,
  [data-bs-theme="dark"] .cam-module-modal .cam-signature,
  [data-bs-theme="dark"] .cam-module .cam-tuile,
  [data-bs-theme="dark"] .aide-panel,
  [data-bs-theme="dark"] .aide-messages,
  [data-bs-theme="dark"] .aide-msg.assistant .aide-carte,
  [data-bs-theme="dark"] .aide-carte .aide-notes,
  [data-bs-theme="dark"] .aide-suggestions .aide-suggestion,
  [data-bs-theme="dark"] .aide-saisie,
  [data-bs-theme="dark"] .aide-composer,
  [data-bs-theme="dark"] .aide-actions-secondaires .aide-bouton-secondaire,
  [data-bs-theme="dark"] .login-card,
  [data-bs-theme="dark"] .form-control,
  [data-bs-theme="dark"] .form-control:focus ~ .field-label,
  [data-bs-theme="dark"] .form-control:not(:placeholder-shown) ~ .field-label,
  [data-bs-theme="dark"] .form-control:focus {
    background-color: var(--app-surface);
  }

  @media (max-width: 1199px) {
    [data-bs-theme="dark"] .header .search-bar {
      background-color: var(--app-surface);
    }
  }

  @media (prefers-contrast: high) {
    [data-bs-theme="dark"] .steps-progress,
    [data-bs-theme="dark"] .step-number {
      background-color: var(--app-surface);
    }
  }

  @media (max-width: 767.98px) {
    [data-bs-theme="dark"] body:has(#inventaireTabsNav) .pagetitle .btn-group,
    [data-bs-theme="dark"] .inv-toolbar .form-switch,
    [data-bs-theme="dark"] #inventaireTabsContent .inv-table tbody tr,
    [data-bs-theme="dark"] #depotPlaceholder {
      background-color: var(--app-surface);
    }
  }

  @media (hover: none) and (pointer: coarse) {
    [data-bs-theme="dark"] .pos-cart-item .item-remove {
      background-color: var(--app-surface);
    }
  }

  @media (max-width: 768px) {
    [data-bs-theme="dark"] .mobile-brand-logo,
    [data-bs-theme="dark"] .mobile-brand-logo-default,
    [data-bs-theme="dark"] .login-card {
      background-color: var(--app-surface);
    }
  }

  [data-bs-theme="dark"] .bg-natural-white,
  [data-bs-theme="dark"] tr.row-retard td {
    background-color: var(--app-surface) !important;
  }

  @media (max-width: 991.98px) {
    [data-bs-theme="dark"] #grillePrix tbody tr,
    [data-bs-theme="dark"] #grillePrix tbody tr.pxd-modifie {
      background-color: var(--app-surface) !important;
    }
  }

  [data-bs-theme="dark"] .bg-secondary-light,
  [data-bs-theme="dark"] .inv-table tbody tr:hover,
  [data-bs-theme="dark"] .rt-table tbody tr.is-selected > td,
  [data-bs-theme="dark"] .rt-chip--primary,
  [data-bs-theme="dark"] .rt-chip--info,
  [data-bs-theme="dark"] .rt-chip--success,
  [data-bs-theme="dark"] .rt-chip--danger,
  [data-bs-theme="dark"] .rt-chip--neutral,
  [data-bs-theme="dark"] .rt-iconbtn--success:hover,
  [data-bs-theme="dark"] .rt-iconbtn--danger:hover,
  [data-bs-theme="dark"] .rt-iconbtn--info:hover,
  [data-bs-theme="dark"] .recouvrement-track,
  [data-bs-theme="dark"] .dash-recouv-track,
  [data-bs-theme="dark"] .badge.pxd-promo-produit,
  [data-bs-theme="dark"] .cs-nature-script,
  [data-bs-theme="dark"] .cs-nature-inconnue,
  [data-bs-theme="dark"] .cs-raccourci kbd,
  [data-bs-theme="dark"] .acr-tuile i,
  [data-bs-theme="dark"] .pos-cart-item .item-remove:hover,
  [data-bs-theme="dark"] .cam-module .cam-etiquette.cat,
  [data-bs-theme="dark"] .aide-actions-secondaires .aide-bouton-secondaire.danger:hover {
    background-color: var(--app-surface-2);
  }

  /* Cartes des tableaux (main.js, mode cartes sous 992 px depuis le lot 5) */
  @media (max-width: 991.98px) {
    [data-bs-theme="dark"] table.mobile-card-table tbody tr {
      background-color: var(--app-surface);
    }

    [data-bs-theme="dark"] table.mobile-card-table tbody td::before {
      color: var(--app-text-muted);
    }

    [data-bs-theme="dark"] table.mobile-card-table tbody td[data-label*="Action"],
    [data-bs-theme="dark"] table.mobile-card-table tbody td[data-label="Détail"] {
      background-color: var(--app-surface-2) !important;
    }
  }

  [data-bs-theme="dark"] .back-to-top:hover,
  [data-bs-theme="dark"] .header,
  [data-bs-theme="dark"] .sidebar,
  [data-bs-theme="dark"] .btnPageReturn:hover,
  [data-bs-theme="dark"] .btnModClose:hover,
  [data-bs-theme="dark"] .btn-outline-dark:hover,
  [data-bs-theme="dark"] .footer2,
  [data-bs-theme="dark"] .backError,
  [data-bs-theme="dark"] #prevBtn:hover,
  [data-bs-theme="dark"] .custom-tooltip::after,
  [data-bs-theme="dark"] .inv-table thead th,
  [data-bs-theme="dark"] .cam-module .cam-jauge-piste {
    background-color: var(--app-topbar-bg);
  }

  [data-bs-theme="dark"] .dropdown-menu .dropdown-footer a:hover,
  [data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover,
  [data-bs-theme="dark"] .header-nav .notifications .notification-item i,
  [data-bs-theme="dark"] .header-nav .profile .dropdown-item i,
  [data-bs-theme="dark"] .header-nav .profile .dropdown-item:hover,
  [data-bs-theme="dark"] .sidebar-nav .nav-content a:hover,
  [data-bs-theme="dark"] .sidebar-nav .nav-content a.active,
  [data-bs-theme="dark"] .dashboard .filter .icon:hover,
  [data-bs-theme="dark"] .dashboard .filter .icon:focus,
  [data-bs-theme="dark"] .dashboard .customers-card .card-icon,
  [data-bs-theme="dark"] .btn-outline,
  [data-bs-theme="dark"] .btn-outline-primary,
  [data-bs-theme="dark"] .btn-outline-secondary,
  [data-bs-theme="dark"] .breadcrumb a,
  [data-bs-theme="dark"] .breadcrumb a:hover,
  [data-bs-theme="dark"] .nav-tabs-bordered .nav-link:hover,
  [data-bs-theme="dark"] .nav-tabs-bordered .nav-link:focus,
  [data-bs-theme="dark"] .nav-tabs-bordered .nav-link.active,
  [data-bs-theme="dark"] .accordion-button:not(.collapsed),
  [data-bs-theme="dark"] .iconslist i,
  [data-bs-theme="dark"] .profile .profile-card h3,
  [data-bs-theme="dark"] .profile .profile-card .social-links a:hover,
  [data-bs-theme="dark"] .profile .profile-overview .label,
  [data-bs-theme="dark"] .profile .profile-edit label,
  [data-bs-theme="dark"] .contact .info-box i,
  [data-bs-theme="dark"] .error-404 h1,
  [data-bs-theme="dark"] .footer2 .credits a:hover,
  [data-bs-theme="dark"] .display-1,
  [data-bs-theme="dark"] .display-2,
  [data-bs-theme="dark"] .logoAccueil span,
  [data-bs-theme="dark"] .dashboard .news h4 a:hover,
  [data-bs-theme="dark"] .step.active .step-label,
  [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted,
  [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove,
  [data-bs-theme="dark"] .pdf-loading .spinner-border,
  [data-bs-theme="dark"] .rt-subnav__link:hover,
  [data-bs-theme="dark"] .rt-segment:hover,
  [data-bs-theme="dark"] .rt-ref,
  [data-bs-theme="dark"] .rt-chip--primary,
  [data-bs-theme="dark"] .rt-btn--ghost,
  [data-bs-theme="dark"] .rt-btn--ghost:hover,
  [data-bs-theme="dark"] .rt-iconbtn--primary:hover,
  [data-bs-theme="dark"] .rt-total__value,
  [data-bs-theme="dark"] .cc-table thead th,
  [data-bs-theme="dark"] .cc-tabs .nav-link,
  [data-bs-theme="dark"] .cc-tabs .nav-link.active,
  [data-bs-theme="dark"] .pxd-kpi .v,
  [data-bs-theme="dark"] #grillePrix .pxd-vente,
  [data-bs-theme="dark"] .cs-nature-script,
  [data-bs-theme="dark"] .cs-resultat thead th,
  [data-bs-theme="dark"] .cs-table-item:hover,
  [data-bs-theme="dark"] .cs-colonne:hover,
  [data-bs-theme="dark"] .cs-histo-requete:hover,
  [data-bs-theme="dark"] .cs-raccourci kbd,
  [data-bs-theme="dark"] .pos-product-card .product-price,
  [data-bs-theme="dark"] .pos-cart-item .item-total,
  [data-bs-theme="dark"] .pos-calc-expression,
  [data-bs-theme="dark"] .cam-module .cam-chiffre.resultat .val,
  [data-bs-theme="dark"] .cam-module .btn-cam.discret,
  [data-bs-theme="dark"] .cam-module .btn-cam.discret:hover,
  [data-bs-theme="dark"] .cam-module .cam-chip,
  [data-bs-theme="dark"] .cam-module .cam-etiquette.cat,
  [data-bs-theme="dark"] .cam-module .cam-tuile.resultat .val,
  [data-bs-theme="dark"] .dropdown-item.aide-toggle[aria-expanded="true"],
  [data-bs-theme="dark"] .aide-contexte,
  [data-bs-theme="dark"] .aide-carte .aide-module,
  [data-bs-theme="dark"] .aide-carte ul.aide-tirets li::before,
  [data-bs-theme="dark"] .form-control:focus ~ .field-label,
  [data-bs-theme="dark"] .form-control:not(:placeholder-shown) ~ .field-label,
  [data-bs-theme="dark"] .form-control:focus ~ .field-icon,
  [data-bs-theme="dark"] .form-control:focus + .field-icon,
  [data-bs-theme="dark"] .field-wrapper:focus-within .field-icon,
  [data-bs-theme="dark"] .toggle-password:hover,
  [data-bs-theme="dark"] .custom-checkbox:hover .checkbox-text {
    color: var(--app-primary);
  }

  @media (prefers-contrast: high) {
    [data-bs-theme="dark"] .step-number {
      color: var(--app-primary);
    }
  }

  @media (max-width: 768px) {
    [data-bs-theme="dark"] .mobile-brand-logo-default {
      color: var(--app-primary);
    }
  }

  [data-bs-theme="dark"] .text-primary-green,
  [data-bs-theme="dark"] .text-secondary-green {
    color: var(--app-primary) !important;
  }

  [data-bs-theme="dark"] .step-label,
  [data-bs-theme="dark"] .dash-debiteur-row .nom,
  [data-bs-theme="dark"] .badge.pxd-src-produit,
  [data-bs-theme="dark"] .badge.pxd-promo-produit,
  [data-bs-theme="dark"] .cs-editeur,
  [data-bs-theme="dark"] .cs-table-item,
  [data-bs-theme="dark"] .cs-histo-requete,
  [data-bs-theme="dark"] .period-btn,
  [data-bs-theme="dark"] .cam-module .cam-plaque,
  [data-bs-theme="dark"] .cam-module-modal .form-label,
  [data-bs-theme="dark"] .cam-module-modal .cam-signature,
  [data-bs-theme="dark"] .field-label {
    color: var(--app-text);
  }

  [data-bs-theme="dark"] .header-nav .notifications .notification-item p,
  [data-bs-theme="dark"] .header-nav .messages .message-item p,
  [data-bs-theme="dark"] .header-nav .profile .dropdown-header span,
  [data-bs-theme="dark"] .dashboard .activity .activity-item .activite-label,
  [data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--disabled .select2-selection,
  [data-bs-theme="dark"] .inv-toolbar .form-label,
  [data-bs-theme="dark"] .inv-chip button,
  [data-bs-theme="dark"] .inv-sub,
  [data-bs-theme="dark"] .inv-empty,
  [data-bs-theme="dark"] .rt-chip--neutral,
  [data-bs-theme="dark"] .cc-kpi .kpi-label,
  [data-bs-theme="dark"] .cc-kpi .kpi-unit,
  [data-bs-theme="dark"] .mini-kpi .mk-label,
  [data-bs-theme="dark"] .pdf-loading,
  [data-bs-theme="dark"] .dash-card .dash-title,
  [data-bs-theme="dark"] .dash-card .dash-sub,
  [data-bs-theme="dark"] .dash-debiteur-row .nbc,
  [data-bs-theme="dark"] .dash-empty,
  [data-bs-theme="dark"] .credit-page .cc-kpi .kpi-label,
  [data-bs-theme="dark"] .credit-page .cc-kpi .kpi-unit,
  [data-bs-theme="dark"] .credit-page .cc-table thead th,
  [data-bs-theme="dark"] .pxd-kpi .l,
  [data-bs-theme="dark"] #grillePrix .pxd-produit-prix,
  [data-bs-theme="dark"] .cs-nature-inconnue,
  [data-bs-theme="dark"] .cs-nul,
  [data-bs-theme="dark"] .cs-table-item .cs-compte,
  [data-bs-theme="dark"] .cs-colonne,
  [data-bs-theme="dark"] .cs-raccourci,
  [data-bs-theme="dark"] .acr-fait .acr-etiquette,
  [data-bs-theme="dark"] .acr-titre-section span,
  [data-bs-theme="dark"] .acr-tuile-module,
  [data-bs-theme="dark"] .acr-vide,
  [data-bs-theme="dark"] .acr-note,
  [data-bs-theme="dark"] .dashboard-filters .form-label,
  [data-bs-theme="dark"] .kpi-card .kpi-label,
  [data-bs-theme="dark"] .stat-mini .stat-label,
  [data-bs-theme="dark"] .dashboard .table thead th,
  [data-bs-theme="dark"] .cam-module .cam-livre tbody tr.annulee td,
  [data-bs-theme="dark"] .cam-module-modal .cam-fiche th,
  [data-bs-theme="dark"] .aide-composer textarea::placeholder {
    color: var(--app-text-muted);
  }

  @media (max-width: 767.98px) {
    [data-bs-theme="dark"] #inventaireTabsContent .inv-table tbody td:nth-child(1)::before,
    [data-bs-theme="dark"] #inventaireGeneralTableBody td:nth-child(6)::before,
    [data-bs-theme="dark"] #inventaireDepotTableBody td:nth-child(5)::before,
    [data-bs-theme="dark"] #inventaireAlertesTableBody td:nth-child(5)::before,
    [data-bs-theme="dark"] .datatable-info {
      color: var(--app-text-muted);
    }
  }

  @media (max-width: 991.98px) {
    [data-bs-theme="dark"] #grillePrix tbody td::before {
      color: var(--app-text-muted);
    }
  }

  @media (max-width: 575.98px) {
    [data-bs-theme="dark"] .table:not(.mobile-card-table):not(:has(> thead)) th {
      color: var(--app-text-muted);
    }
  }
}

/* -----------------------------------------------------------------------------
   7 ter. Thème sombre : couleurs écrites dans les attributs style="" des vues
   et des scripts (fonds clairs, textes foncés). Repris par attribut, avec
   !important puisque le style en ligne prime sinon. Les formes rgb() couvrent
   les styles posés par JavaScript, que le navigateur réécrit ainsi.
   ----------------------------------------------------------------------------- */
@media screen {
  [data-bs-theme="dark"] [style*="background:#fff" i],
  [data-bs-theme="dark"] [style*="background: #fff" i],
  [data-bs-theme="dark"] [style*="background-color:#fff" i],
  [data-bs-theme="dark"] [style*="background-color: #fff" i],
  [data-bs-theme="dark"] [style*="background:rgb(255, 255, 255)" i],
  [data-bs-theme="dark"] [style*="background: rgb(255, 255, 255)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(255, 255, 255)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(255, 255, 255)" i],
  [data-bs-theme="dark"] [style*="background:#ffffff" i],
  [data-bs-theme="dark"] [style*="background: #ffffff" i],
  [data-bs-theme="dark"] [style*="background-color:#ffffff" i],
  [data-bs-theme="dark"] [style*="background-color: #ffffff" i],
  [data-bs-theme="dark"] [style*="background:rgb(255, 255, 255)" i],
  [data-bs-theme="dark"] [style*="background: rgb(255, 255, 255)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(255, 255, 255)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(255, 255, 255)" i],
  [data-bs-theme="dark"] [style*="background:white" i],
  [data-bs-theme="dark"] [style*="background: white" i],
  [data-bs-theme="dark"] [style*="background-color:white" i],
  [data-bs-theme="dark"] [style*="background-color: white" i],
  [data-bs-theme="dark"] [style*="background:rgb(255, 255, 255)" i],
  [data-bs-theme="dark"] [style*="background: rgb(255, 255, 255)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(255, 255, 255)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(255, 255, 255)" i] {
    background-color: var(--app-surface) !important;
  }

  [data-bs-theme="dark"] [style*="background:#f3eff8" i],
  [data-bs-theme="dark"] [style*="background: #f3eff8" i],
  [data-bs-theme="dark"] [style*="background-color:#f3eff8" i],
  [data-bs-theme="dark"] [style*="background-color: #f3eff8" i],
  [data-bs-theme="dark"] [style*="background:rgb(243, 239, 248)" i],
  [data-bs-theme="dark"] [style*="background: rgb(243, 239, 248)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(243, 239, 248)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(243, 239, 248)" i],
  [data-bs-theme="dark"] [style*="background:#f8f9fa" i],
  [data-bs-theme="dark"] [style*="background: #f8f9fa" i],
  [data-bs-theme="dark"] [style*="background-color:#f8f9fa" i],
  [data-bs-theme="dark"] [style*="background-color: #f8f9fa" i],
  [data-bs-theme="dark"] [style*="background:rgb(248, 249, 250)" i],
  [data-bs-theme="dark"] [style*="background: rgb(248, 249, 250)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(248, 249, 250)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(248, 249, 250)" i],
  [data-bs-theme="dark"] [style*="background:#f3f4f6" i],
  [data-bs-theme="dark"] [style*="background: #f3f4f6" i],
  [data-bs-theme="dark"] [style*="background-color:#f3f4f6" i],
  [data-bs-theme="dark"] [style*="background-color: #f3f4f6" i],
  [data-bs-theme="dark"] [style*="background:rgb(243, 244, 246)" i],
  [data-bs-theme="dark"] [style*="background: rgb(243, 244, 246)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(243, 244, 246)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(243, 244, 246)" i],
  [data-bs-theme="dark"] [style*="background:#e8e3f0" i],
  [data-bs-theme="dark"] [style*="background: #e8e3f0" i],
  [data-bs-theme="dark"] [style*="background-color:#e8e3f0" i],
  [data-bs-theme="dark"] [style*="background-color: #e8e3f0" i],
  [data-bs-theme="dark"] [style*="background:rgb(232, 227, 240)" i],
  [data-bs-theme="dark"] [style*="background: rgb(232, 227, 240)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(232, 227, 240)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(232, 227, 240)" i],
  [data-bs-theme="dark"] [style*="background:#f8f9fc" i],
  [data-bs-theme="dark"] [style*="background: #f8f9fc" i],
  [data-bs-theme="dark"] [style*="background-color:#f8f9fc" i],
  [data-bs-theme="dark"] [style*="background-color: #f8f9fc" i],
  [data-bs-theme="dark"] [style*="background:rgb(248, 249, 252)" i],
  [data-bs-theme="dark"] [style*="background: rgb(248, 249, 252)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(248, 249, 252)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(248, 249, 252)" i],
  [data-bs-theme="dark"] [style*="background:#ede9fe" i],
  [data-bs-theme="dark"] [style*="background: #ede9fe" i],
  [data-bs-theme="dark"] [style*="background-color:#ede9fe" i],
  [data-bs-theme="dark"] [style*="background-color: #ede9fe" i],
  [data-bs-theme="dark"] [style*="background:rgb(237, 233, 254)" i],
  [data-bs-theme="dark"] [style*="background: rgb(237, 233, 254)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(237, 233, 254)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(237, 233, 254)" i],
  [data-bs-theme="dark"] [style*="background:#e9ecef" i],
  [data-bs-theme="dark"] [style*="background: #e9ecef" i],
  [data-bs-theme="dark"] [style*="background-color:#e9ecef" i],
  [data-bs-theme="dark"] [style*="background-color: #e9ecef" i],
  [data-bs-theme="dark"] [style*="background:rgb(233, 236, 239)" i],
  [data-bs-theme="dark"] [style*="background: rgb(233, 236, 239)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(233, 236, 239)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(233, 236, 239)" i],
  [data-bs-theme="dark"] [style*="background:#f0f0f0" i],
  [data-bs-theme="dark"] [style*="background: #f0f0f0" i],
  [data-bs-theme="dark"] [style*="background-color:#f0f0f0" i],
  [data-bs-theme="dark"] [style*="background-color: #f0f0f0" i],
  [data-bs-theme="dark"] [style*="background:rgb(240, 240, 240)" i],
  [data-bs-theme="dark"] [style*="background: rgb(240, 240, 240)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(240, 240, 240)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(240, 240, 240)" i],
  [data-bs-theme="dark"] [style*="background:#faf9fd" i],
  [data-bs-theme="dark"] [style*="background: #faf9fd" i],
  [data-bs-theme="dark"] [style*="background-color:#faf9fd" i],
  [data-bs-theme="dark"] [style*="background-color: #faf9fd" i],
  [data-bs-theme="dark"] [style*="background:rgb(250, 249, 253)" i],
  [data-bs-theme="dark"] [style*="background: rgb(250, 249, 253)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(250, 249, 253)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(250, 249, 253)" i],
  [data-bs-theme="dark"] [style*="background:#f5f4fa" i],
  [data-bs-theme="dark"] [style*="background: #f5f4fa" i],
  [data-bs-theme="dark"] [style*="background-color:#f5f4fa" i],
  [data-bs-theme="dark"] [style*="background-color: #f5f4fa" i],
  [data-bs-theme="dark"] [style*="background:rgb(245, 244, 250)" i],
  [data-bs-theme="dark"] [style*="background: rgb(245, 244, 250)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(245, 244, 250)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(245, 244, 250)" i] {
    background-color: var(--app-surface-2) !important;
  }

  [data-bs-theme="dark"] [style*="background:#fee2e2" i],
  [data-bs-theme="dark"] [style*="background: #fee2e2" i],
  [data-bs-theme="dark"] [style*="background-color:#fee2e2" i],
  [data-bs-theme="dark"] [style*="background-color: #fee2e2" i],
  [data-bs-theme="dark"] [style*="background:rgb(254, 226, 226)" i],
  [data-bs-theme="dark"] [style*="background: rgb(254, 226, 226)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(254, 226, 226)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(254, 226, 226)" i],
  [data-bs-theme="dark"] [style*="background:#ffe9e9" i],
  [data-bs-theme="dark"] [style*="background: #ffe9e9" i],
  [data-bs-theme="dark"] [style*="background-color:#ffe9e9" i],
  [data-bs-theme="dark"] [style*="background-color: #ffe9e9" i],
  [data-bs-theme="dark"] [style*="background:rgb(255, 233, 233)" i],
  [data-bs-theme="dark"] [style*="background: rgb(255, 233, 233)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(255, 233, 233)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(255, 233, 233)" i],
  [data-bs-theme="dark"] [style*="background:#fdeaea" i],
  [data-bs-theme="dark"] [style*="background: #fdeaea" i],
  [data-bs-theme="dark"] [style*="background-color:#fdeaea" i],
  [data-bs-theme="dark"] [style*="background-color: #fdeaea" i],
  [data-bs-theme="dark"] [style*="background:rgb(253, 234, 234)" i],
  [data-bs-theme="dark"] [style*="background: rgb(253, 234, 234)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(253, 234, 234)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(253, 234, 234)" i],
  [data-bs-theme="dark"] [style*="background:#f8d7da" i],
  [data-bs-theme="dark"] [style*="background: #f8d7da" i],
  [data-bs-theme="dark"] [style*="background-color:#f8d7da" i],
  [data-bs-theme="dark"] [style*="background-color: #f8d7da" i],
  [data-bs-theme="dark"] [style*="background:rgb(248, 215, 218)" i],
  [data-bs-theme="dark"] [style*="background: rgb(248, 215, 218)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(248, 215, 218)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(248, 215, 218)" i] {
    background-color: var(--app-danger-soft) !important;
  }

  [data-bs-theme="dark"] [style*="background:#dcfce7" i],
  [data-bs-theme="dark"] [style*="background: #dcfce7" i],
  [data-bs-theme="dark"] [style*="background-color:#dcfce7" i],
  [data-bs-theme="dark"] [style*="background-color: #dcfce7" i],
  [data-bs-theme="dark"] [style*="background:rgb(220, 252, 231)" i],
  [data-bs-theme="dark"] [style*="background: rgb(220, 252, 231)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(220, 252, 231)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(220, 252, 231)" i],
  [data-bs-theme="dark"] [style*="background:#e8f5e9" i],
  [data-bs-theme="dark"] [style*="background: #e8f5e9" i],
  [data-bs-theme="dark"] [style*="background-color:#e8f5e9" i],
  [data-bs-theme="dark"] [style*="background-color: #e8f5e9" i],
  [data-bs-theme="dark"] [style*="background:rgb(232, 245, 233)" i],
  [data-bs-theme="dark"] [style*="background: rgb(232, 245, 233)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(232, 245, 233)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(232, 245, 233)" i],
  [data-bs-theme="dark"] [style*="background:#d4edda" i],
  [data-bs-theme="dark"] [style*="background: #d4edda" i],
  [data-bs-theme="dark"] [style*="background-color:#d4edda" i],
  [data-bs-theme="dark"] [style*="background-color: #d4edda" i],
  [data-bs-theme="dark"] [style*="background:rgb(212, 237, 218)" i],
  [data-bs-theme="dark"] [style*="background: rgb(212, 237, 218)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(212, 237, 218)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(212, 237, 218)" i],
  [data-bs-theme="dark"] [style*="background:#e3f6e8" i],
  [data-bs-theme="dark"] [style*="background: #e3f6e8" i],
  [data-bs-theme="dark"] [style*="background-color:#e3f6e8" i],
  [data-bs-theme="dark"] [style*="background-color: #e3f6e8" i],
  [data-bs-theme="dark"] [style*="background:rgb(227, 246, 232)" i],
  [data-bs-theme="dark"] [style*="background: rgb(227, 246, 232)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(227, 246, 232)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(227, 246, 232)" i] {
    background-color: var(--app-success-soft) !important;
  }

  [data-bs-theme="dark"] [style*="background:#fff3cd" i],
  [data-bs-theme="dark"] [style*="background: #fff3cd" i],
  [data-bs-theme="dark"] [style*="background-color:#fff3cd" i],
  [data-bs-theme="dark"] [style*="background-color: #fff3cd" i],
  [data-bs-theme="dark"] [style*="background:rgb(255, 243, 205)" i],
  [data-bs-theme="dark"] [style*="background: rgb(255, 243, 205)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(255, 243, 205)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(255, 243, 205)" i],
  [data-bs-theme="dark"] [style*="background:#fef3c7" i],
  [data-bs-theme="dark"] [style*="background: #fef3c7" i],
  [data-bs-theme="dark"] [style*="background-color:#fef3c7" i],
  [data-bs-theme="dark"] [style*="background-color: #fef3c7" i],
  [data-bs-theme="dark"] [style*="background:rgb(254, 243, 199)" i],
  [data-bs-theme="dark"] [style*="background: rgb(254, 243, 199)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(254, 243, 199)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(254, 243, 199)" i],
  [data-bs-theme="dark"] [style*="background:#fff8e1" i],
  [data-bs-theme="dark"] [style*="background: #fff8e1" i],
  [data-bs-theme="dark"] [style*="background-color:#fff8e1" i],
  [data-bs-theme="dark"] [style*="background-color: #fff8e1" i],
  [data-bs-theme="dark"] [style*="background:rgb(255, 248, 225)" i],
  [data-bs-theme="dark"] [style*="background: rgb(255, 248, 225)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(255, 248, 225)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(255, 248, 225)" i] {
    background-color: var(--app-warning-soft) !important;
  }

  [data-bs-theme="dark"] [style*="background:#e8f4fd" i],
  [data-bs-theme="dark"] [style*="background: #e8f4fd" i],
  [data-bs-theme="dark"] [style*="background-color:#e8f4fd" i],
  [data-bs-theme="dark"] [style*="background-color: #e8f4fd" i],
  [data-bs-theme="dark"] [style*="background:rgb(232, 244, 253)" i],
  [data-bs-theme="dark"] [style*="background: rgb(232, 244, 253)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(232, 244, 253)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(232, 244, 253)" i],
  [data-bs-theme="dark"] [style*="background:#e0f2fe" i],
  [data-bs-theme="dark"] [style*="background: #e0f2fe" i],
  [data-bs-theme="dark"] [style*="background-color:#e0f2fe" i],
  [data-bs-theme="dark"] [style*="background-color: #e0f2fe" i],
  [data-bs-theme="dark"] [style*="background:rgb(224, 242, 254)" i],
  [data-bs-theme="dark"] [style*="background: rgb(224, 242, 254)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(224, 242, 254)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(224, 242, 254)" i],
  [data-bs-theme="dark"] [style*="background:#add8e6" i],
  [data-bs-theme="dark"] [style*="background: #add8e6" i],
  [data-bs-theme="dark"] [style*="background-color:#add8e6" i],
  [data-bs-theme="dark"] [style*="background-color: #add8e6" i],
  [data-bs-theme="dark"] [style*="background:rgb(173, 216, 230)" i],
  [data-bs-theme="dark"] [style*="background: rgb(173, 216, 230)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(173, 216, 230)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(173, 216, 230)" i],
  [data-bs-theme="dark"] [style*="background:#e2f1fd" i],
  [data-bs-theme="dark"] [style*="background: #e2f1fd" i],
  [data-bs-theme="dark"] [style*="background-color:#e2f1fd" i],
  [data-bs-theme="dark"] [style*="background-color: #e2f1fd" i],
  [data-bs-theme="dark"] [style*="background:rgb(226, 241, 253)" i],
  [data-bs-theme="dark"] [style*="background: rgb(226, 241, 253)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(226, 241, 253)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(226, 241, 253)" i],
  [data-bs-theme="dark"] [style*="background:#cff4fc" i],
  [data-bs-theme="dark"] [style*="background: #cff4fc" i],
  [data-bs-theme="dark"] [style*="background-color:#cff4fc" i],
  [data-bs-theme="dark"] [style*="background-color: #cff4fc" i],
  [data-bs-theme="dark"] [style*="background:rgb(207, 244, 252)" i],
  [data-bs-theme="dark"] [style*="background: rgb(207, 244, 252)" i],
  [data-bs-theme="dark"] [style*="background-color:rgb(207, 244, 252)" i],
  [data-bs-theme="dark"] [style*="background-color: rgb(207, 244, 252)" i] {
    background-color: var(--app-info-soft) !important;
  }

  [data-bs-theme="dark"] [style*="color:#2d1b4e" i]:not([style*="background-color:#2d1b4e" i]):not([style*="border-color:#2d1b4e" i]),
  [data-bs-theme="dark"] [style*="color: #2d1b4e" i]:not([style*="background-color: #2d1b4e" i]):not([style*="border-color: #2d1b4e" i]),
  [data-bs-theme="dark"] [style*="color:rgb(45, 27, 78)" i]:not([style*="background-color:rgb(45, 27, 78)" i]):not([style*="border-color:rgb(45, 27, 78)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(45, 27, 78)" i]:not([style*="background-color: rgb(45, 27, 78)" i]):not([style*="border-color: rgb(45, 27, 78)" i]),
  [data-bs-theme="dark"] [style*="color:#212529" i]:not([style*="background-color:#212529" i]):not([style*="border-color:#212529" i]),
  [data-bs-theme="dark"] [style*="color: #212529" i]:not([style*="background-color: #212529" i]):not([style*="border-color: #212529" i]),
  [data-bs-theme="dark"] [style*="color:rgb(33, 37, 41)" i]:not([style*="background-color:rgb(33, 37, 41)" i]):not([style*="border-color:rgb(33, 37, 41)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(33, 37, 41)" i]:not([style*="background-color: rgb(33, 37, 41)" i]):not([style*="border-color: rgb(33, 37, 41)" i]),
  [data-bs-theme="dark"] [style*="color:#374151" i]:not([style*="background-color:#374151" i]):not([style*="border-color:#374151" i]),
  [data-bs-theme="dark"] [style*="color: #374151" i]:not([style*="background-color: #374151" i]):not([style*="border-color: #374151" i]),
  [data-bs-theme="dark"] [style*="color:rgb(55, 65, 81)" i]:not([style*="background-color:rgb(55, 65, 81)" i]):not([style*="border-color:rgb(55, 65, 81)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(55, 65, 81)" i]:not([style*="background-color: rgb(55, 65, 81)" i]):not([style*="border-color: rgb(55, 65, 81)" i]),
  [data-bs-theme="dark"] [style*="color:#495057" i]:not([style*="background-color:#495057" i]):not([style*="border-color:#495057" i]),
  [data-bs-theme="dark"] [style*="color: #495057" i]:not([style*="background-color: #495057" i]):not([style*="border-color: #495057" i]),
  [data-bs-theme="dark"] [style*="color:rgb(73, 80, 87)" i]:not([style*="background-color:rgb(73, 80, 87)" i]):not([style*="border-color:rgb(73, 80, 87)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(73, 80, 87)" i]:not([style*="background-color: rgb(73, 80, 87)" i]):not([style*="border-color: rgb(73, 80, 87)" i]),
  [data-bs-theme="dark"] [style*="color:#545454" i]:not([style*="background-color:#545454" i]):not([style*="border-color:#545454" i]),
  [data-bs-theme="dark"] [style*="color: #545454" i]:not([style*="background-color: #545454" i]):not([style*="border-color: #545454" i]),
  [data-bs-theme="dark"] [style*="color:rgb(84, 84, 84)" i]:not([style*="background-color:rgb(84, 84, 84)" i]):not([style*="border-color:rgb(84, 84, 84)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(84, 84, 84)" i]:not([style*="background-color: rgb(84, 84, 84)" i]):not([style*="border-color: rgb(84, 84, 84)" i]),
  [data-bs-theme="dark"] [style*="color:#444" i]:not([style*="background-color:#444" i]):not([style*="border-color:#444" i]),
  [data-bs-theme="dark"] [style*="color: #444" i]:not([style*="background-color: #444" i]):not([style*="border-color: #444" i]),
  [data-bs-theme="dark"] [style*="color:rgb(68, 68, 68)" i]:not([style*="background-color:rgb(68, 68, 68)" i]):not([style*="border-color:rgb(68, 68, 68)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(68, 68, 68)" i]:not([style*="background-color: rgb(68, 68, 68)" i]):not([style*="border-color: rgb(68, 68, 68)" i]),
  [data-bs-theme="dark"] [style*="color:#333" i]:not([style*="background-color:#333" i]):not([style*="border-color:#333" i]),
  [data-bs-theme="dark"] [style*="color: #333" i]:not([style*="background-color: #333" i]):not([style*="border-color: #333" i]),
  [data-bs-theme="dark"] [style*="color:rgb(51, 51, 51)" i]:not([style*="background-color:rgb(51, 51, 51)" i]):not([style*="border-color:rgb(51, 51, 51)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(51, 51, 51)" i]:not([style*="background-color: rgb(51, 51, 51)" i]):not([style*="border-color: rgb(51, 51, 51)" i]),
  [data-bs-theme="dark"] [style*="color:#000" i]:not([style*="background-color:#000" i]):not([style*="border-color:#000" i]),
  [data-bs-theme="dark"] [style*="color: #000" i]:not([style*="background-color: #000" i]):not([style*="border-color: #000" i]),
  [data-bs-theme="dark"] [style*="color:rgb(0, 0, 0)" i]:not([style*="background-color:rgb(0, 0, 0)" i]):not([style*="border-color:rgb(0, 0, 0)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(0, 0, 0)" i]:not([style*="background-color: rgb(0, 0, 0)" i]):not([style*="border-color: rgb(0, 0, 0)" i]),
  [data-bs-theme="dark"] [style*="color:black" i]:not([style*="background-color:black" i]):not([style*="border-color:black" i]),
  [data-bs-theme="dark"] [style*="color: black" i]:not([style*="background-color: black" i]):not([style*="border-color: black" i]),
  [data-bs-theme="dark"] [style*="color:rgb(0, 0, 0)" i]:not([style*="background-color:rgb(0, 0, 0)" i]):not([style*="border-color:rgb(0, 0, 0)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(0, 0, 0)" i]:not([style*="background-color: rgb(0, 0, 0)" i]):not([style*="border-color: rgb(0, 0, 0)" i]) {
    color: var(--app-text) !important;
  }

  [data-bs-theme="dark"] [style*="color:#6c757d" i]:not([style*="background-color:#6c757d" i]):not([style*="border-color:#6c757d" i]),
  [data-bs-theme="dark"] [style*="color: #6c757d" i]:not([style*="background-color: #6c757d" i]):not([style*="border-color: #6c757d" i]),
  [data-bs-theme="dark"] [style*="color:rgb(108, 117, 125)" i]:not([style*="background-color:rgb(108, 117, 125)" i]):not([style*="border-color:rgb(108, 117, 125)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(108, 117, 125)" i]:not([style*="background-color: rgb(108, 117, 125)" i]):not([style*="border-color: rgb(108, 117, 125)" i]),
  [data-bs-theme="dark"] [style*="color:#6b7280" i]:not([style*="background-color:#6b7280" i]):not([style*="border-color:#6b7280" i]),
  [data-bs-theme="dark"] [style*="color: #6b7280" i]:not([style*="background-color: #6b7280" i]):not([style*="border-color: #6b7280" i]),
  [data-bs-theme="dark"] [style*="color:rgb(107, 114, 128)" i]:not([style*="background-color:rgb(107, 114, 128)" i]):not([style*="border-color:rgb(107, 114, 128)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(107, 114, 128)" i]:not([style*="background-color: rgb(107, 114, 128)" i]):not([style*="border-color: rgb(107, 114, 128)" i]),
  [data-bs-theme="dark"] [style*="color:#666" i]:not([style*="background-color:#666" i]):not([style*="border-color:#666" i]),
  [data-bs-theme="dark"] [style*="color: #666" i]:not([style*="background-color: #666" i]):not([style*="border-color: #666" i]),
  [data-bs-theme="dark"] [style*="color:rgb(102, 102, 102)" i]:not([style*="background-color:rgb(102, 102, 102)" i]):not([style*="border-color:rgb(102, 102, 102)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(102, 102, 102)" i]:not([style*="background-color: rgb(102, 102, 102)" i]):not([style*="border-color: rgb(102, 102, 102)" i]),
  [data-bs-theme="dark"] [style*="color:#777" i]:not([style*="background-color:#777" i]):not([style*="border-color:#777" i]),
  [data-bs-theme="dark"] [style*="color: #777" i]:not([style*="background-color: #777" i]):not([style*="border-color: #777" i]),
  [data-bs-theme="dark"] [style*="color:rgb(119, 119, 119)" i]:not([style*="background-color:rgb(119, 119, 119)" i]):not([style*="border-color:rgb(119, 119, 119)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(119, 119, 119)" i]:not([style*="background-color: rgb(119, 119, 119)" i]):not([style*="border-color: rgb(119, 119, 119)" i]),
  [data-bs-theme="dark"] [style*="color:#888" i]:not([style*="background-color:#888" i]):not([style*="border-color:#888" i]),
  [data-bs-theme="dark"] [style*="color: #888" i]:not([style*="background-color: #888" i]):not([style*="border-color: #888" i]),
  [data-bs-theme="dark"] [style*="color:rgb(136, 136, 136)" i]:not([style*="background-color:rgb(136, 136, 136)" i]):not([style*="border-color:rgb(136, 136, 136)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(136, 136, 136)" i]:not([style*="background-color: rgb(136, 136, 136)" i]):not([style*="border-color: rgb(136, 136, 136)" i]),
  [data-bs-theme="dark"] [style*="color:#999" i]:not([style*="background-color:#999" i]):not([style*="border-color:#999" i]),
  [data-bs-theme="dark"] [style*="color: #999" i]:not([style*="background-color: #999" i]):not([style*="border-color: #999" i]),
  [data-bs-theme="dark"] [style*="color:rgb(153, 153, 153)" i]:not([style*="background-color:rgb(153, 153, 153)" i]):not([style*="border-color:rgb(153, 153, 153)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(153, 153, 153)" i]:not([style*="background-color: rgb(153, 153, 153)" i]):not([style*="border-color: rgb(153, 153, 153)" i]),
  [data-bs-theme="dark"] [style*="color:#aaa" i]:not([style*="background-color:#aaa" i]):not([style*="border-color:#aaa" i]),
  [data-bs-theme="dark"] [style*="color: #aaa" i]:not([style*="background-color: #aaa" i]):not([style*="border-color: #aaa" i]),
  [data-bs-theme="dark"] [style*="color:rgb(170, 170, 170)" i]:not([style*="background-color:rgb(170, 170, 170)" i]):not([style*="border-color:rgb(170, 170, 170)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(170, 170, 170)" i]:not([style*="background-color: rgb(170, 170, 170)" i]):not([style*="border-color: rgb(170, 170, 170)" i]),
  [data-bs-theme="dark"] [style*="color:#8a8598" i]:not([style*="background-color:#8a8598" i]):not([style*="border-color:#8a8598" i]),
  [data-bs-theme="dark"] [style*="color: #8a8598" i]:not([style*="background-color: #8a8598" i]):not([style*="border-color: #8a8598" i]),
  [data-bs-theme="dark"] [style*="color:rgb(138, 133, 152)" i]:not([style*="background-color:rgb(138, 133, 152)" i]):not([style*="border-color:rgb(138, 133, 152)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(138, 133, 152)" i]:not([style*="background-color: rgb(138, 133, 152)" i]):not([style*="border-color: rgb(138, 133, 152)" i]),
  [data-bs-theme="dark"] [style*="color:#6b6880" i]:not([style*="background-color:#6b6880" i]):not([style*="border-color:#6b6880" i]),
  [data-bs-theme="dark"] [style*="color: #6b6880" i]:not([style*="background-color: #6b6880" i]):not([style*="border-color: #6b6880" i]),
  [data-bs-theme="dark"] [style*="color:rgb(107, 104, 128)" i]:not([style*="background-color:rgb(107, 104, 128)" i]):not([style*="border-color:rgb(107, 104, 128)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(107, 104, 128)" i]:not([style*="background-color: rgb(107, 104, 128)" i]):not([style*="border-color: rgb(107, 104, 128)" i]) {
    color: var(--app-text-muted) !important;
  }

  [data-bs-theme="dark"] [style*="color:#4a2d7a" i]:not([style*="background-color:#4a2d7a" i]):not([style*="border-color:#4a2d7a" i]),
  [data-bs-theme="dark"] [style*="color: #4a2d7a" i]:not([style*="background-color: #4a2d7a" i]):not([style*="border-color: #4a2d7a" i]),
  [data-bs-theme="dark"] [style*="color:rgb(74, 45, 122)" i]:not([style*="background-color:rgb(74, 45, 122)" i]):not([style*="border-color:rgb(74, 45, 122)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(74, 45, 122)" i]:not([style*="background-color: rgb(74, 45, 122)" i]):not([style*="border-color: rgb(74, 45, 122)" i]),
  [data-bs-theme="dark"] [style*="color:#7c3aed" i]:not([style*="background-color:#7c3aed" i]):not([style*="border-color:#7c3aed" i]),
  [data-bs-theme="dark"] [style*="color: #7c3aed" i]:not([style*="background-color: #7c3aed" i]):not([style*="border-color: #7c3aed" i]),
  [data-bs-theme="dark"] [style*="color:rgb(124, 58, 237)" i]:not([style*="background-color:rgb(124, 58, 237)" i]):not([style*="border-color:rgb(124, 58, 237)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(124, 58, 237)" i]:not([style*="background-color: rgb(124, 58, 237)" i]):not([style*="border-color: rgb(124, 58, 237)" i]),
  [data-bs-theme="dark"] [style*="color:#1f4e79" i]:not([style*="background-color:#1f4e79" i]):not([style*="border-color:#1f4e79" i]),
  [data-bs-theme="dark"] [style*="color: #1f4e79" i]:not([style*="background-color: #1f4e79" i]):not([style*="border-color: #1f4e79" i]),
  [data-bs-theme="dark"] [style*="color:rgb(31, 78, 121)" i]:not([style*="background-color:rgb(31, 78, 121)" i]):not([style*="border-color:rgb(31, 78, 121)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(31, 78, 121)" i]:not([style*="background-color: rgb(31, 78, 121)" i]):not([style*="border-color: rgb(31, 78, 121)" i]),
  [data-bs-theme="dark"] [style*="color:#6b42a8" i]:not([style*="background-color:#6b42a8" i]):not([style*="border-color:#6b42a8" i]),
  [data-bs-theme="dark"] [style*="color: #6b42a8" i]:not([style*="background-color: #6b42a8" i]):not([style*="border-color: #6b42a8" i]),
  [data-bs-theme="dark"] [style*="color:rgb(107, 66, 168)" i]:not([style*="background-color:rgb(107, 66, 168)" i]):not([style*="border-color:rgb(107, 66, 168)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(107, 66, 168)" i]:not([style*="background-color: rgb(107, 66, 168)" i]):not([style*="border-color: rgb(107, 66, 168)" i]) {
    color: var(--app-primary) !important;
  }

  [data-bs-theme="dark"] [style*="color:#198754" i]:not([style*="background-color:#198754" i]):not([style*="border-color:#198754" i]),
  [data-bs-theme="dark"] [style*="color: #198754" i]:not([style*="background-color: #198754" i]):not([style*="border-color: #198754" i]),
  [data-bs-theme="dark"] [style*="color:rgb(25, 135, 84)" i]:not([style*="background-color:rgb(25, 135, 84)" i]):not([style*="border-color:rgb(25, 135, 84)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(25, 135, 84)" i]:not([style*="background-color: rgb(25, 135, 84)" i]):not([style*="border-color: rgb(25, 135, 84)" i]),
  [data-bs-theme="dark"] [style*="color:#166534" i]:not([style*="background-color:#166534" i]):not([style*="border-color:#166534" i]),
  [data-bs-theme="dark"] [style*="color: #166534" i]:not([style*="background-color: #166534" i]):not([style*="border-color: #166534" i]),
  [data-bs-theme="dark"] [style*="color:rgb(22, 101, 52)" i]:not([style*="background-color:rgb(22, 101, 52)" i]):not([style*="border-color:rgb(22, 101, 52)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(22, 101, 52)" i]:not([style*="background-color: rgb(22, 101, 52)" i]):not([style*="border-color: rgb(22, 101, 52)" i]),
  [data-bs-theme="dark"] [style*="color:#2e7d32" i]:not([style*="background-color:#2e7d32" i]):not([style*="border-color:#2e7d32" i]),
  [data-bs-theme="dark"] [style*="color: #2e7d32" i]:not([style*="background-color: #2e7d32" i]):not([style*="border-color: #2e7d32" i]),
  [data-bs-theme="dark"] [style*="color:rgb(46, 125, 50)" i]:not([style*="background-color:rgb(46, 125, 50)" i]):not([style*="border-color:rgb(46, 125, 50)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(46, 125, 50)" i]:not([style*="background-color: rgb(46, 125, 50)" i]):not([style*="border-color: rgb(46, 125, 50)" i]),
  [data-bs-theme="dark"] [style*="color:#1b5e20" i]:not([style*="background-color:#1b5e20" i]):not([style*="border-color:#1b5e20" i]),
  [data-bs-theme="dark"] [style*="color: #1b5e20" i]:not([style*="background-color: #1b5e20" i]):not([style*="border-color: #1b5e20" i]),
  [data-bs-theme="dark"] [style*="color:rgb(27, 94, 32)" i]:not([style*="background-color:rgb(27, 94, 32)" i]):not([style*="border-color:rgb(27, 94, 32)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(27, 94, 32)" i]:not([style*="background-color: rgb(27, 94, 32)" i]):not([style*="border-color: rgb(27, 94, 32)" i]),
  [data-bs-theme="dark"] [style*="color:#16a34a" i]:not([style*="background-color:#16a34a" i]):not([style*="border-color:#16a34a" i]),
  [data-bs-theme="dark"] [style*="color: #16a34a" i]:not([style*="background-color: #16a34a" i]):not([style*="border-color: #16a34a" i]),
  [data-bs-theme="dark"] [style*="color:rgb(22, 163, 74)" i]:not([style*="background-color:rgb(22, 163, 74)" i]):not([style*="border-color:rgb(22, 163, 74)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(22, 163, 74)" i]:not([style*="background-color: rgb(22, 163, 74)" i]):not([style*="border-color: rgb(22, 163, 74)" i]),
  [data-bs-theme="dark"] [style*="color:#28a745" i]:not([style*="background-color:#28a745" i]):not([style*="border-color:#28a745" i]),
  [data-bs-theme="dark"] [style*="color: #28a745" i]:not([style*="background-color: #28a745" i]):not([style*="border-color: #28a745" i]),
  [data-bs-theme="dark"] [style*="color:rgb(40, 167, 69)" i]:not([style*="background-color:rgb(40, 167, 69)" i]):not([style*="border-color:rgb(40, 167, 69)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(40, 167, 69)" i]:not([style*="background-color: rgb(40, 167, 69)" i]):not([style*="border-color: rgb(40, 167, 69)" i]),
  [data-bs-theme="dark"] [style*="color:#1c7c34" i]:not([style*="background-color:#1c7c34" i]):not([style*="border-color:#1c7c34" i]),
  [data-bs-theme="dark"] [style*="color: #1c7c34" i]:not([style*="background-color: #1c7c34" i]):not([style*="border-color: #1c7c34" i]),
  [data-bs-theme="dark"] [style*="color:rgb(28, 124, 52)" i]:not([style*="background-color:rgb(28, 124, 52)" i]):not([style*="border-color:rgb(28, 124, 52)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(28, 124, 52)" i]:not([style*="background-color: rgb(28, 124, 52)" i]):not([style*="border-color: rgb(28, 124, 52)" i]) {
    color: var(--app-success-text) !important;
  }

  [data-bs-theme="dark"] [style*="color:#dc3545" i]:not([style*="background-color:#dc3545" i]):not([style*="border-color:#dc3545" i]),
  [data-bs-theme="dark"] [style*="color: #dc3545" i]:not([style*="background-color: #dc3545" i]):not([style*="border-color: #dc3545" i]),
  [data-bs-theme="dark"] [style*="color:rgb(220, 53, 69)" i]:not([style*="background-color:rgb(220, 53, 69)" i]):not([style*="border-color:rgb(220, 53, 69)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(220, 53, 69)" i]:not([style*="background-color: rgb(220, 53, 69)" i]):not([style*="border-color: rgb(220, 53, 69)" i]),
  [data-bs-theme="dark"] [style*="color:#dc2626" i]:not([style*="background-color:#dc2626" i]):not([style*="border-color:#dc2626" i]),
  [data-bs-theme="dark"] [style*="color: #dc2626" i]:not([style*="background-color: #dc2626" i]):not([style*="border-color: #dc2626" i]),
  [data-bs-theme="dark"] [style*="color:rgb(220, 38, 38)" i]:not([style*="background-color:rgb(220, 38, 38)" i]):not([style*="border-color:rgb(220, 38, 38)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(220, 38, 38)" i]:not([style*="background-color: rgb(220, 38, 38)" i]):not([style*="border-color: rgb(220, 38, 38)" i]),
  [data-bs-theme="dark"] [style*="color:#b02a37" i]:not([style*="background-color:#b02a37" i]):not([style*="border-color:#b02a37" i]),
  [data-bs-theme="dark"] [style*="color: #b02a37" i]:not([style*="background-color: #b02a37" i]):not([style*="border-color: #b02a37" i]),
  [data-bs-theme="dark"] [style*="color:rgb(176, 42, 55)" i]:not([style*="background-color:rgb(176, 42, 55)" i]):not([style*="border-color:rgb(176, 42, 55)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(176, 42, 55)" i]:not([style*="background-color: rgb(176, 42, 55)" i]):not([style*="border-color: rgb(176, 42, 55)" i]),
  [data-bs-theme="dark"] [style*="color:#b32020" i]:not([style*="background-color:#b32020" i]):not([style*="border-color:#b32020" i]),
  [data-bs-theme="dark"] [style*="color: #b32020" i]:not([style*="background-color: #b32020" i]):not([style*="border-color: #b32020" i]),
  [data-bs-theme="dark"] [style*="color:rgb(179, 32, 32)" i]:not([style*="background-color:rgb(179, 32, 32)" i]):not([style*="border-color:rgb(179, 32, 32)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(179, 32, 32)" i]:not([style*="background-color: rgb(179, 32, 32)" i]):not([style*="border-color: rgb(179, 32, 32)" i]),
  [data-bs-theme="dark"] [style*="color:#c0392b" i]:not([style*="background-color:#c0392b" i]):not([style*="border-color:#c0392b" i]),
  [data-bs-theme="dark"] [style*="color: #c0392b" i]:not([style*="background-color: #c0392b" i]):not([style*="border-color: #c0392b" i]),
  [data-bs-theme="dark"] [style*="color:rgb(192, 57, 43)" i]:not([style*="background-color:rgb(192, 57, 43)" i]):not([style*="border-color:rgb(192, 57, 43)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(192, 57, 43)" i]:not([style*="background-color: rgb(192, 57, 43)" i]):not([style*="border-color: rgb(192, 57, 43)" i]) {
    color: var(--app-danger-text) !important;
  }

  [data-bs-theme="dark"] [style*="color:#856404" i]:not([style*="background-color:#856404" i]):not([style*="border-color:#856404" i]),
  [data-bs-theme="dark"] [style*="color: #856404" i]:not([style*="background-color: #856404" i]):not([style*="border-color: #856404" i]),
  [data-bs-theme="dark"] [style*="color:rgb(133, 100, 4)" i]:not([style*="background-color:rgb(133, 100, 4)" i]):not([style*="border-color:rgb(133, 100, 4)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(133, 100, 4)" i]:not([style*="background-color: rgb(133, 100, 4)" i]):not([style*="border-color: rgb(133, 100, 4)" i]),
  [data-bs-theme="dark"] [style*="color:#8a6d00" i]:not([style*="background-color:#8a6d00" i]):not([style*="border-color:#8a6d00" i]),
  [data-bs-theme="dark"] [style*="color: #8a6d00" i]:not([style*="background-color: #8a6d00" i]):not([style*="border-color: #8a6d00" i]),
  [data-bs-theme="dark"] [style*="color:rgb(138, 109, 0)" i]:not([style*="background-color:rgb(138, 109, 0)" i]):not([style*="border-color:rgb(138, 109, 0)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(138, 109, 0)" i]:not([style*="background-color: rgb(138, 109, 0)" i]):not([style*="border-color: rgb(138, 109, 0)" i]),
  [data-bs-theme="dark"] [style*="color:#c85a08" i]:not([style*="background-color:#c85a08" i]):not([style*="border-color:#c85a08" i]),
  [data-bs-theme="dark"] [style*="color: #c85a08" i]:not([style*="background-color: #c85a08" i]):not([style*="border-color: #c85a08" i]),
  [data-bs-theme="dark"] [style*="color:rgb(200, 90, 8)" i]:not([style*="background-color:rgb(200, 90, 8)" i]):not([style*="border-color:rgb(200, 90, 8)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(200, 90, 8)" i]:not([style*="background-color: rgb(200, 90, 8)" i]):not([style*="border-color: rgb(200, 90, 8)" i]),
  [data-bs-theme="dark"] [style*="color:#e65100" i]:not([style*="background-color:#e65100" i]):not([style*="border-color:#e65100" i]),
  [data-bs-theme="dark"] [style*="color: #e65100" i]:not([style*="background-color: #e65100" i]):not([style*="border-color: #e65100" i]),
  [data-bs-theme="dark"] [style*="color:rgb(230, 81, 0)" i]:not([style*="background-color:rgb(230, 81, 0)" i]):not([style*="border-color:rgb(230, 81, 0)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(230, 81, 0)" i]:not([style*="background-color: rgb(230, 81, 0)" i]):not([style*="border-color: rgb(230, 81, 0)" i]),
  [data-bs-theme="dark"] [style*="color:#92400e" i]:not([style*="background-color:#92400e" i]):not([style*="border-color:#92400e" i]),
  [data-bs-theme="dark"] [style*="color: #92400e" i]:not([style*="background-color: #92400e" i]):not([style*="border-color: #92400e" i]),
  [data-bs-theme="dark"] [style*="color:rgb(146, 64, 14)" i]:not([style*="background-color:rgb(146, 64, 14)" i]):not([style*="border-color:rgb(146, 64, 14)" i]),
  [data-bs-theme="dark"] [style*="color: rgb(146, 64, 14)" i]:not([style*="background-color: rgb(146, 64, 14)" i]):not([style*="border-color: rgb(146, 64, 14)" i]) {
    color: var(--app-warning-text) !important;
  }

  [data-bs-theme="dark"] [style*="linear-gradient(135deg, #e8f5e9" i],
  [data-bs-theme="dark"] [style*="linear-gradient(135deg,#e8f5e9" i] {
    background-image: none !important;
    background-color: var(--app-success-soft) !important;
  }

  [data-bs-theme="dark"] [style*="solid #f3eff8" i],
  [data-bs-theme="dark"] [style*="border-color:#f3eff8" i],
  [data-bs-theme="dark"] [style*="border-color: #f3eff8" i],
  [data-bs-theme="dark"] [style*="solid rgb(243, 239, 248)" i],
  [data-bs-theme="dark"] [style*="border-color:rgb(243, 239, 248)" i],
  [data-bs-theme="dark"] [style*="border-color: rgb(243, 239, 248)" i],
  [data-bs-theme="dark"] [style*="solid #d8cfe6" i],
  [data-bs-theme="dark"] [style*="border-color:#d8cfe6" i],
  [data-bs-theme="dark"] [style*="border-color: #d8cfe6" i],
  [data-bs-theme="dark"] [style*="solid rgb(216, 207, 230)" i],
  [data-bs-theme="dark"] [style*="border-color:rgb(216, 207, 230)" i],
  [data-bs-theme="dark"] [style*="border-color: rgb(216, 207, 230)" i],
  [data-bs-theme="dark"] [style*="solid #ced4da" i],
  [data-bs-theme="dark"] [style*="border-color:#ced4da" i],
  [data-bs-theme="dark"] [style*="border-color: #ced4da" i],
  [data-bs-theme="dark"] [style*="solid rgb(206, 212, 218)" i],
  [data-bs-theme="dark"] [style*="border-color:rgb(206, 212, 218)" i],
  [data-bs-theme="dark"] [style*="border-color: rgb(206, 212, 218)" i],
  [data-bs-theme="dark"] [style*="solid #e9ecef" i],
  [data-bs-theme="dark"] [style*="border-color:#e9ecef" i],
  [data-bs-theme="dark"] [style*="border-color: #e9ecef" i],
  [data-bs-theme="dark"] [style*="solid rgb(233, 236, 239)" i],
  [data-bs-theme="dark"] [style*="border-color:rgb(233, 236, 239)" i],
  [data-bs-theme="dark"] [style*="border-color: rgb(233, 236, 239)" i],
  [data-bs-theme="dark"] [style*="solid #f1eef7" i],
  [data-bs-theme="dark"] [style*="border-color:#f1eef7" i],
  [data-bs-theme="dark"] [style*="border-color: #f1eef7" i],
  [data-bs-theme="dark"] [style*="solid rgb(241, 238, 247)" i],
  [data-bs-theme="dark"] [style*="border-color:rgb(241, 238, 247)" i],
  [data-bs-theme="dark"] [style*="border-color: rgb(241, 238, 247)" i],
  [data-bs-theme="dark"] [style*="solid #eee" i],
  [data-bs-theme="dark"] [style*="border-color:#eee" i],
  [data-bs-theme="dark"] [style*="border-color: #eee" i],
  [data-bs-theme="dark"] [style*="solid rgb(238, 238, 238)" i],
  [data-bs-theme="dark"] [style*="border-color:rgb(238, 238, 238)" i],
  [data-bs-theme="dark"] [style*="border-color: rgb(238, 238, 238)" i],
  [data-bs-theme="dark"] [style*="solid #e8e3f0" i],
  [data-bs-theme="dark"] [style*="border-color:#e8e3f0" i],
  [data-bs-theme="dark"] [style*="border-color: #e8e3f0" i],
  [data-bs-theme="dark"] [style*="solid rgb(232, 227, 240)" i],
  [data-bs-theme="dark"] [style*="border-color:rgb(232, 227, 240)" i],
  [data-bs-theme="dark"] [style*="border-color: rgb(232, 227, 240)" i],
  [data-bs-theme="dark"] [style*="solid #d9d9d9" i],
  [data-bs-theme="dark"] [style*="border-color:#d9d9d9" i],
  [data-bs-theme="dark"] [style*="border-color: #d9d9d9" i],
  [data-bs-theme="dark"] [style*="solid rgb(217, 217, 217)" i],
  [data-bs-theme="dark"] [style*="border-color:rgb(217, 217, 217)" i],
  [data-bs-theme="dark"] [style*="border-color: rgb(217, 217, 217)" i],
  [data-bs-theme="dark"] [style*="solid #dee2e6" i],
  [data-bs-theme="dark"] [style*="border-color:#dee2e6" i],
  [data-bs-theme="dark"] [style*="border-color: #dee2e6" i],
  [data-bs-theme="dark"] [style*="solid rgb(222, 226, 230)" i],
  [data-bs-theme="dark"] [style*="border-color:rgb(222, 226, 230)" i],
  [data-bs-theme="dark"] [style*="border-color: rgb(222, 226, 230)" i],
  [data-bs-theme="dark"] [style*="solid #ddd" i],
  [data-bs-theme="dark"] [style*="border-color:#ddd" i],
  [data-bs-theme="dark"] [style*="border-color: #ddd" i],
  [data-bs-theme="dark"] [style*="solid rgb(221, 221, 221)" i],
  [data-bs-theme="dark"] [style*="border-color:rgb(221, 221, 221)" i],
  [data-bs-theme="dark"] [style*="border-color: rgb(221, 221, 221)" i],
  [data-bs-theme="dark"] [style*="solid #e6e1f0" i],
  [data-bs-theme="dark"] [style*="border-color:#e6e1f0" i],
  [data-bs-theme="dark"] [style*="border-color: #e6e1f0" i],
  [data-bs-theme="dark"] [style*="solid rgb(230, 225, 240)" i],
  [data-bs-theme="dark"] [style*="border-color:rgb(230, 225, 240)" i],
  [data-bs-theme="dark"] [style*="border-color: rgb(230, 225, 240)" i],
  [data-bs-theme="dark"] [style*="solid #ece9f3" i],
  [data-bs-theme="dark"] [style*="border-color:#ece9f3" i],
  [data-bs-theme="dark"] [style*="border-color: #ece9f3" i],
  [data-bs-theme="dark"] [style*="solid rgb(236, 233, 243)" i],
  [data-bs-theme="dark"] [style*="border-color:rgb(236, 233, 243)" i],
  [data-bs-theme="dark"] [style*="border-color: rgb(236, 233, 243)" i],
  [data-bs-theme="dark"] [style*="solid #ebe8f2" i],
  [data-bs-theme="dark"] [style*="border-color:#ebe8f2" i],
  [data-bs-theme="dark"] [style*="border-color: #ebe8f2" i],
  [data-bs-theme="dark"] [style*="solid rgb(235, 232, 242)" i],
  [data-bs-theme="dark"] [style*="border-color:rgb(235, 232, 242)" i],
  [data-bs-theme="dark"] [style*="border-color: rgb(235, 232, 242)" i] {
    border-color: var(--app-border) !important;
  }
}

/* -----------------------------------------------------------------------------
   8. Thème sombre : composants tiers
   ----------------------------------------------------------------------------- */
@media screen {
  /* SweetAlert2 (y compris le repli injecté par pos-swal-compat.js) */
  [data-bs-theme="dark"] .swal2-popup,
  [data-bs-theme="dark"] .swal2-toast {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    box-shadow: var(--app-shadow-lg);
  }

  [data-bs-theme="dark"] .swal2-title,
  [data-bs-theme="dark"] .swal2-html-container,
  [data-bs-theme="dark"] .swal2-content {
    color: var(--app-text) !important;
  }

  [data-bs-theme="dark"] .swal2-input,
  [data-bs-theme="dark"] .swal2-textarea,
  [data-bs-theme="dark"] .swal2-select,
  [data-bs-theme="dark"] .swal2-file {
    background: var(--app-input-bg) !important;
    color: var(--app-text) !important;
    border-color: var(--app-input-border) !important;
  }

  [data-bs-theme="dark"] .swal2-validation-message {
    background: var(--app-surface-2) !important;
    color: var(--app-text) !important;
  }

  [data-bs-theme="dark"] .swal2-footer {
    border-color: var(--app-border) !important;
    color: var(--app-text-muted) !important;
  }

  [data-bs-theme="dark"] .swal2-timer-progress-bar {
    background: var(--app-primary) !important;
  }

  [data-bs-theme="dark"] .swal2-close {
    color: var(--app-text-muted) !important;
  }

  /* dselect (liste de sélection de l'application) */
  [data-bs-theme="dark"] .dselect-wrapper .form-select,
  [data-bs-theme="dark"] .dselect-wrapper .dropdown-menu {
    background-color: var(--app-input-bg);
    color: var(--app-text);
    border-color: var(--app-input-border);
  }

  [data-bs-theme="dark"] .dselect-wrapper .dropdown-menu {
    background-color: var(--app-surface);
  }

  [data-bs-theme="dark"] .dselect-wrapper .dselect-placeholder {
    color: var(--app-text-muted);
  }

  [data-bs-theme="dark"] .dselect-wrapper .dropdown-item,
  [data-bs-theme="dark"] .dselect-wrapper .dselect-option {
    color: var(--app-text);
  }

  [data-bs-theme="dark"] .dselect-wrapper .dropdown-item:hover,
  [data-bs-theme="dark"] .dselect-wrapper .dropdown-item.active,
  [data-bs-theme="dark"] .dselect-wrapper .dselect-option:hover {
    background-color: var(--app-surface-hover);
    color: var(--app-text);
  }

  [data-bs-theme="dark"] .dselect-wrapper .dselect-tag {
    background-color: var(--app-primary-soft);
    color: var(--app-text);
  }

  /* Select2 (plus chargé depuis le lot 6 ; règles sans effet, conservées) */
  [data-bs-theme="dark"] .select2-container .select2-selection,
  [data-bs-theme="dark"] .select2-dropdown,
  [data-bs-theme="dark"] .select2-search__field {
    background-color: var(--app-input-bg);
    color: var(--app-text);
    border-color: var(--app-input-border);
  }

  [data-bs-theme="dark"] .select2-results__option {
    color: var(--app-text);
  }

  [data-bs-theme="dark"] .select2-results__option--highlighted {
    background-color: var(--app-surface-hover) !important;
    color: var(--app-text) !important;
  }

  /* Quill et TinyMCE (éditeurs) */
  [data-bs-theme="dark"] .ql-toolbar,
  [data-bs-theme="dark"] .ql-container {
    background-color: var(--app-input-bg);
    color: var(--app-text);
    border-color: var(--app-input-border);
  }

  [data-bs-theme="dark"] .ql-stroke {
    stroke: var(--app-text-secondary);
  }

  [data-bs-theme="dark"] .ql-fill {
    fill: var(--app-text-secondary);
  }

  /* simple-datatables (chargé, conservé au cas où) */
  [data-bs-theme="dark"] .datatable-input,
  [data-bs-theme="dark"] .datatable-selector {
    background-color: var(--app-input-bg);
    color: var(--app-text);
    border-color: var(--app-input-border);
  }

  /* ApexCharts : infobulles et légendes */
  [data-bs-theme="dark"] .apexcharts-tooltip,
  [data-bs-theme="dark"] .apexcharts-xaxistooltip,
  [data-bs-theme="dark"] .apexcharts-menu {
    background: var(--app-surface-2) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
  }

  [data-bs-theme="dark"] .apexcharts-tooltip-title {
    background: var(--app-surface-3) !important;
    border-color: var(--app-border) !important;
  }

  /* Champs date et heure natifs : icône du calendrier lisible */
  [data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
  [data-bs-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
  [data-bs-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
  [data-bs-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
  }
}

/* Suivi des paiements : filtres, synthèse et registre des encaissements. */
.paiements-page { font-variant-numeric: tabular-nums; }
.paiements-page__intro { color: var(--app-text-secondary); font-size: .9rem; margin: var(--app-space-2) 0; }
.paiements-page .section > .row > .col-lg-12 > .card {
  border: 1px solid var(--app-border-strong);
  box-shadow: none;
}
.paiements-page .section > .row > .col-lg-12 > .card > .card-body { padding: var(--app-space-5); }
.paiements-page__entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--app-space-4);
  margin-bottom: var(--app-space-4);
  border-bottom: 1px solid var(--app-border);
}
.paiements-page__entete .card-title { padding: 0; font-size: 1.1rem; margin: var(--app-space-2) var(--app-space-3) var(--app-space-2) 0 !important; }
.paiements-page__outils { display: flex; flex-wrap: wrap; }
.paiements-page__outils .btn { margin: var(--app-space-1) var(--app-space-2) var(--app-space-1) 0; }
.paiements-page__filtres .form-label { font-size: .85rem; font-weight: 600; }
.paiements-page__synthese {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  margin: 0 0 var(--app-space-5);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius);
  background: var(--app-surface-2);
}
.paiements-page__synthese > div { padding: var(--app-space-4); min-width: 0; }
.paiements-page__synthese > div + div { border-left: 1px solid var(--app-border-strong); }
.paiements-page__synthese dt { color: var(--app-text-secondary); font-size: .85rem; font-weight: 400; margin-bottom: var(--app-space-2); }
.paiements-page__synthese dd { font-size: 1.5rem; font-weight: 700; color: var(--app-text); margin: 0; overflow-wrap: anywhere; }
.paiements-page__encaisse dd { color: var(--app-primary); }
.paiements-page__devise { font-size: .875rem; font-weight: 600; }
.paiements-page__graphique h2 { font-size: 1rem; font-weight: 600; color: var(--app-text); }
.paiements-page__canvas { position: relative; height: 230px; }
.paiements-page__total {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--app-space-3) var(--app-space-4);
  margin-bottom: var(--app-space-4);
  border-left: 3px solid var(--app-primary);
  background: var(--app-primary-soft);
  color: var(--app-text);
  font-size: .9rem;
}
.paiements-page__total > span { margin: var(--app-space-1) var(--app-space-2) var(--app-space-1) 0; }
.paiements-page__total strong { font-weight: 700; }
.paiements-page__table > :not(caption) > * > * { padding: var(--app-space-3); font-size: .875rem; }
.paiements-page__table thead th { white-space: nowrap; text-transform: none; letter-spacing: normal; }
.paiements-page__table td:nth-child(3) { font-weight: 600; min-width: 170px; overflow-wrap: anywhere; }
.paiements-page__table td:nth-child(4), .paiements-page__table td:nth-child(5) { min-width: 120px; }
.paiements-page__table td:last-child { overflow-wrap: anywhere; }
@media (max-width: 1199.98px) {
  .paiements-page__rapports { flex: 0 0 100%; width: 100%; margin-top: var(--app-space-2); }
  .paiements-page__rapports > .btn { width: 100%; min-height: 44px; }
  .paiements-page__rapports > .dropdown-menu { width: 100%; }
  .paiements-page__rapports .dropdown-item { white-space: normal; }
}
@media (max-width: 991.98px) {
  .paiements-page__synthese { grid-template-columns: repeat(2, 1fr); }
  .paiements-page__synthese > div:nth-child(3) { border-left: 0; }
  .paiements-page__synthese > div:nth-child(n+3) { border-top: 1px solid var(--app-border-strong); }
}
@media (max-width: 575.98px) {
  .paiements-page .section > .row > .col-lg-12 > .card > .card-body { padding: var(--app-space-4); }
  .paiements-page__synthese > div { padding: var(--app-space-3); }
  .paiements-page__synthese dd { font-size: 1.15rem; }
  .paiements-page__canvas { height: 210px; }
}

/* Détail de vente : même document dans Ventes, Guichet et Caisse. */
.vente-detail {
  padding-top: var(--app-space-5);
  font-variant-numeric: tabular-nums;
}
.vente-detail__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--app-space-4);
  margin-bottom: var(--app-space-5);
  border-bottom: 2px solid var(--app-primary);
}
.vente-detail__identite {
  min-width: 0;
  margin: 0 var(--app-space-4) var(--app-space-2) 0;
}
.vente-detail__entete h2 {
  color: var(--app-text);
  font-family: var(--app-font);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
  margin-bottom: var(--app-space-1);
}
.vente-detail__entete h2 i { color: var(--app-primary); }
.vente-detail__entete p { font-size: .875rem; }
.vente-detail__statut {
  font-size: .875rem;
  padding: var(--app-space-2) var(--app-space-3);
  margin-bottom: var(--app-space-2);
}
.vente-detail .vente-detail__fiche,
.vente-detail .vente-detail__table {
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius);
  box-shadow: none;
  background: var(--app-surface);
  margin-bottom: 0;
}
.vente-detail .vente-detail__fiche > .card-body {
  padding: var(--app-space-4) !important;
}
.vente-detail .vente-detail__fiche .card-title {
  font-size: 1rem;
  padding: 0 0 var(--app-space-3);
  margin: 0 0 var(--app-space-3) !important;
  border-bottom: 1px solid var(--app-border);
}
.vente-detail__fiche .row.small { font-size: .9rem; line-height: 1.7; }
.vente-detail__fiche .col-7 { overflow-wrap: anywhere; }
.vente-detail__montants { margin: 0; font-size: .9rem; }
.vente-detail__montants > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--app-space-1) 0;
}
.vente-detail__montants dt {
  color: var(--app-text-secondary);
  font-weight: 400;
  margin-right: var(--app-space-3);
}
.vente-detail__montants dd {
  margin: 0;
  text-align: right;
  color: var(--app-text);
}
.vente-detail__montants .vente-detail__net {
  padding-top: var(--app-space-2);
  margin-top: var(--app-space-1);
  border-top: 1px solid var(--app-border);
}
.vente-detail__net dt, .vente-detail__net dd { font-weight: 600; }
.vente-detail__paye dt, .vente-detail__paye dd { color: var(--app-success-text); }
.vente-detail__montants .vente-detail__solde {
  padding: var(--app-space-3);
  margin-top: var(--app-space-2);
  border-radius: var(--app-radius-sm);
  background: var(--app-success-soft);
}
.vente-detail__solde dt, .vente-detail__solde dd {
  color: var(--app-success-text);
  font-weight: 700;
}
.vente-detail__montants .vente-detail__solde--du { background: var(--app-warning-soft); }
.vente-detail__solde--du dt, .vente-detail__solde--du dd { color: var(--app-warning-text); }
.vente-detail .vente-detail__table > .card-header {
  padding: var(--app-space-4) !important;
  background: var(--app-surface) !important;
  border-bottom: 1px solid var(--app-border-strong);
}
.vente-detail__table h6 { font-size: 1rem; font-weight: 600; }
.vente-detail__compte { color: var(--app-text-muted); font-size: .8rem; font-weight: 400; margin-left: var(--app-space-2); }
.vente-detail__table .table > :not(caption) > * > * {
  padding: var(--app-space-3) var(--app-space-4);
  font-size: .875rem;
  vertical-align: middle;
}
.vente-detail__table .table thead th { white-space: nowrap; text-transform: none; letter-spacing: normal; }
.vente-detail__table .table td:first-child { overflow-wrap: anywhere; }
.vente-detail .vente-actions--detail { margin-top: var(--app-space-5); }
@media (max-width: 575.98px) {
  .nav-tabs.vente-detail-tabs { flex-wrap: wrap; overflow: visible; }
  .vente-detail-tabs .nav-item { flex: 1 1 auto; }
  .vente-detail-tabs .nav-link { width: 100%; }
  .vente-detail__entete h2 { font-size: 1.125rem; }
  .vente-detail__table .table > :not(caption) > * > * { padding: var(--app-space-2); }
  .vente-detail__montants > div { flex-wrap: wrap; }
  .vente-detail__montants dd { margin-left: auto; }
}

/* -----------------------------------------------------------------------------
   9. Impression : toujours en clair (les jetons sombres sont limités à
   l'écran ; il ne reste qu'à neutraliser le color-scheme de Bootstrap).
   ----------------------------------------------------------------------------- */
@media print {
  [data-bs-theme="dark"] {
    color-scheme: light;
  }
}

/*--------------------------------------------------------------
# Sauvegarde locale de la saisie (brouillon)
# Composant commun (app-ui : chargé aussi par les caisses rapides).
# Source : assets/js/brouillon-saisie.js (ventes, guichets, points de vente,
# entrée de stock). Pastille discrète posée au-dessus de la barre d'actions
# collée en bas ; boîte de reprise d'une saisie retrouvée.
--------------------------------------------------------------*/
.brouillon-etat {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--app-text-secondary, #5b5270);
    background: var(--app-surface, #fff);
    border: 1px solid var(--app-border, #ebe8f2);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(45, 27, 78, 0.10);
    white-space: nowrap;
    pointer-events: none;
}

.brouillon-etat[hidden] {
    display: none;
}

.brouillon-etat i {
    margin-right: 6px;
    font-size: 0.85rem;
}

.brouillon-etat__texte {
    overflow: hidden;
    text-overflow: ellipsis;
}

.brouillon-etat.is-ok i { color: var(--app-success, #198754); }
.brouillon-etat.is-ecriture i,
.brouillon-etat.is-transmission i { color: var(--app-primary, #4a2d7a); }
.brouillon-etat.is-alerte { color: var(--app-warning-text, #8a5a00); border-color: rgba(214, 150, 0, 0.45); }
.brouillon-etat.is-echec { color: var(--app-danger, #b42318); border-color: rgba(180, 35, 24, 0.40); }

.brouillon-etat.is-ecriture i,
.brouillon-etat.is-transmission i {
    animation: brouillon-tourne 1s linear infinite;
}

@keyframes brouillon-tourne {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .brouillon-etat.is-ecriture i,
    .brouillon-etat.is-transmission i {
        animation: none;
    }
}

/* Au-dessus de la barre d'actions collée en bas (position: sticky = repère) */
.vente-actions > .brouillon-etat {
    position: absolute;
    left: 12px;
    bottom: calc(100% + 6px);
    max-width: calc(100% - 24px);
    z-index: 1;
}

/* Barre d'actions non collée (téléphone, écrans sans barre collante) */
@media (max-width: 767.98px) {
    .vente-actions.vente-actions--detail > .brouillon-etat {
        position: static;
        flex: 1 0 100%;
    }
}

/* Boîte « Saisie non terminée » */
.brouillon-reprise__intro {
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: var(--app-text-secondary, #5b5270);
}

.brouillon-reprise {
    max-height: 50vh;
    overflow-y: auto;
    text-align: left;
}

.brouillon-reprise__item {
    padding: 12px;
    border: 1px solid var(--app-border, #ebe8f2);
    border-radius: var(--app-radius, 8px);
}

.brouillon-reprise__item + .brouillon-reprise__item {
    margin-top: 10px;
}

.brouillon-reprise__info {
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
}

.brouillon-reprise__info strong {
    font-size: 0.95rem;
    color: var(--app-text, #2d1b4e);
}

.brouillon-reprise__info small {
    color: var(--app-text-secondary, #5b5270);
}

.brouillon-reprise__alerte {
    margin-top: 4px;
    color: var(--app-warning-text, #8a5a00) !important;
}

.brouillon-reprise__actions {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.brouillon-reprise__actions .btn {
    min-height: 44px;
    margin: 0 8px 0 0;
}

.brouillon-reprise__actions .btn:last-child {
    margin-right: 0;
}

@media (max-width: 575.98px) {
    .brouillon-reprise__actions .btn {
        flex: 1 1 100%;
        margin: 0 0 8px;
    }
}

.brouillon-changements {
    text-align: left;
    padding-left: 1.1rem;
    font-size: 0.875rem;
}

/* Caisses rapides : pastille au-dessus des boutons de validation */
.pos-brouillon-zone {
  display: flex;
  justify-content: center;
  min-height: 0;
  margin-bottom: 8px;
}

.pos-brouillon-zone:empty,
.pos-brouillon-zone > .brouillon-etat[hidden]:only-child {
  margin-bottom: 0;
}