@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
:root {
  /* ==========================================================================
     TYPOGRAPHY - Font Families
     ========================================================================== */
  --font-family-primary: "Open Sans", sans-serif;
  /* ==========================================================================
     TYPOGRAPHY - Font Sizes
     ========================================================================== */
  --font-size-100: 8px;
  --font-size-200: 16px;
  --font-size-300: 18px;
  --font-size-400: 20px;
  --font-size-500: 24px;
  --font-size-600: 30px;
  --font-size-700: 40px;
  --font-size-800: 45px;
  --font-size-900: 50px;
  --font-size-1000: 64px;
  /* ==========================================================================
     TYPOGRAPHY - Font Weights
     ========================================================================== */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  /* ==========================================================================
     SPACING
     ========================================================================== */
  --spacing-0: 0px;
  --spacing-100: 8px;
  --spacing-200: 16px;
  --spacing-300: 24px;
  --spacing-400: 32px;
  --spacing-500: 40px;
  --spacing-600: 48px;
  --spacing-700: 56px;
  --spacing-800: 64px;
  --spacing-900: 72px;
  --spacing-1000: 80px;
  --spacing-1100: 88px;
  --spacing-1200: 96px;
  --spacing-1300: 104px;
  --spacing-1400: 112px;
  --spacing-1500: 120px;
  --spacing-1600: 128px;
  --spacing-1700: 136px;
  --spacing-1800: 144px;
  --spacing-1900: 152px;
  --spacing-2000: 160px;
  /* ==========================================================================
     BORDER RADIUS
     ========================================================================== */
  --radius-0: 0px;
  --radius-100: 8px;
  --radius-200: 16px;
  --radius-300: 24px;
  --radius-400: 32px;
  --radius-500: 40px;
  --radius-600: 48px;
  --radius-700: 56px;
  --radius-800: 64px;
  --radius-900: 72px;
  --radius-1000: 80px;
  --radius-1100: 88px;
  --radius-1200: 96px;
  --radius-1300: 104px;
  --radius-1400: 112px;
  --radius-1500: 120px;
  --radius-1600: 128px;
  --radius-1700: 136px;
  --radius-1800: 144px;
  --radius-1900: 152px;
  --radius-2000: 160px;
  /* ==========================================================================
     COLORS - Neutrals
     ========================================================================== */
  --color-neutrals-500: #1e1e1e;
  --color-neutrals-450: #3d3d3d;
  --color-neutrals-400: #5e5e5e;
  --color-neutrals-350: #828282;
  --color-neutrals-300: #a7a7a7;
  --color-neutrals-250: #b2b2b2;
  --color-neutrals-200: #cecece;
  --color-neutrals-150: #dddddd;
  --color-neutrals-100: #f1f1f1;
  --color-neutrals-50: #ffffff;
  --color-neutrals-bg: #FCFCFF;
  /* ==========================================================================
     COLORS - Blue
     ========================================================================== */
  --color-blue-500: #110f2c;
  --color-blue-450: #161338;
  --color-blue-400: #1b1846;
  --color-blue-350: #201d53;
  --color-blue-300: #262262;
  --color-blue-250: #4d4a7e;
  --color-blue-200: #76749c;
  --color-blue-150: #a2a0bb;
  --color-blue-100: #f4f3ff;
  --color-blue-50: #fafaff;
  /* ==========================================================================
     COLORS - Green
     ========================================================================== */
  --color-green-500: #22412f;
  --color-green-450: #2c543d;
  --color-green-400: #3b7051;
  --color-green-350: #4a8c65;
  --color-green-300: #4e956c;
  --color-green-250: #58a77a;
  --color-green-200: #62ba87;
  --color-green-150: #8edbae;
  --color-green-100: #bff1d4;
  --color-green-50: #eff8f3;
  /* ==========================================================================
     COLORS - Yellow
     ========================================================================== */
  --color-yellow-500: #332703;
  --color-yellow-450: #554105;
  --color-yellow-400: #806107;
  --color-yellow-350: #d4a20c;
  --color-yellow-300: #ffc20f;
  --color-yellow-250: #ffcc37;
  --color-yellow-200: #ffd65f;
  --color-yellow-150: #ffe087;
  --color-yellow-100: #ffebaf;
  --color-yellow-50: #fffcf1;
  /* ==========================================================================
     COLORS - Orange
     ========================================================================== */
  --color-orange-500: #2e130a;
  --color-orange-450: #4d1f11;
  --color-orange-400: #732f1a;
  --color-orange-350: #9a3f23;
  --color-orange-300: #c04e2b;
  --color-orange-250: #e75e34;
  --color-orange-200: #eb7956;
  --color-orange-150: #ef9478;
  --color-orange-100: #f7c9bb;
  --color-orange-50: #fff1ed;
  /* ==========================================================================
     COLORS - Red
     ========================================================================== */
  --color-red-500: #441614;
  --color-red-450: #571d1a;
  --color-red-400: #742622;
  --color-red-350: #91302b;
  --color-red-300: #9a332e;
  --color-red-250: #ae3a33;
  --color-red-200: #c14039;
  --color-red-150: #ecc4c2;
  --color-red-100: #f6e2e1;
  --color-red-50: #f9eceb;
}

body {
  background: #efefef;
  font-family: var(--font-family-primary);
  user-select: none;
  touch-action: pan-y;
  display: flex;
  flex-direction: row;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  body {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

a {
  margin: 0;
  padding: 0;
  outline: none;
  text-decoration: none;
}

p {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #a7a7a7;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #828282;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #a7a7a7 transparent;
}

for each size in css change label .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
  content: "8px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  content: "12px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
  content: "10px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: "16px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: "20px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="42px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="42px"]::before {
  content: "42px";
}

/* ==========================================================================
   Page Liste Machines - Styles scopés
   ========================================================================== */
.page-machine-liste {
  /* Reset local */
  /* Utilitaire hidden */
  /* Layout Principal */
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  background: var(--Fond, linear-gradient(127deg, #F8F9FA 0%, #F5F4FF 100.57%));
  position: relative;
  overflow: hidden;
  /* ==========================================================================
     Contenu principal
     ========================================================================== */
  /* ==========================================================================
     Header de la page
     ========================================================================== */
  /* Bouton Nouvelle machine */
  /* ==========================================================================
     Dropdown Nouvelle Machine
     ========================================================================== */
  /* ==========================================================================
     Toast Notifications
     ========================================================================== */
  /* Champ de recherche */
  /* ==========================================================================
     Grille des machines
     ========================================================================== */
  /* ==========================================================================
     Card Machine
     ========================================================================== */
  /* Section nom machine */
  /* Section état fonctionnement */
  /* Section adresse */
  /* Section remplissage */
  /* Spinner pendant le chargement AJAX du remplissage */
  /* Section TeamViewer */
  /* Section création */
  /* ==========================================================================
     Popup Overlay
     ========================================================================== */
  /* ==========================================================================
     Popup
     ========================================================================== */
  /* Header popup */
  /* Titre popup */
  /* Navigation par onglets */
  /* Contenu du formulaire */
  /* Label form */
  /* Lignes de formulaire doubles */
  /* Footer popup */
  /* ==========================================================================
     Popup Import JSON : Zone de drag-and-drop
     ========================================================================== */
  /* ==========================================================================
     Popup Import JSON : Tableau armoires
     ========================================================================== */
  /* ==========================================================================
     Message aucune machine
     ========================================================================== */
  /* ==========================================================================
     Footer legende stats globales (somme casiers toutes machines)
     Inspire du footer-legende de la page composition.
     ========================================================================== */
  /* ==========================================================================
     Responsive Tablette
     ========================================================================== */
  /* ==========================================================================
     Responsive Mobile - Bandeau top style catalogue
     ========================================================================== */
}
.page-machine-liste * {
  font-family: "Open Sans", sans-serif;
}
.page-machine-liste .hidden {
  display: none !important;
}
.page-machine-liste .svg-fond {
  position: absolute;
  right: -18vh;
  bottom: -18vh;
  fill: rgba(38, 34, 98, 0.03);
  z-index: 1;
  width: auto;
  height: 90vh;
  pointer-events: none;
}
.page-machine-liste .main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 2;
  height: 100vh;
}
.page-machine-liste .header-page {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-neutrals-100);
}
.page-machine-liste .div-title-container {
  display: flex;
  align-items: center;
  gap: 32px;
}
.page-machine-liste .page-title {
  font-size: 24px;
  font-weight: 700;
  color: #201c52;
  line-height: normal;
}
.page-machine-liste .button-nouvelle-machine {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}
.page-machine-liste .button-nouvelle-machine:hover {
  background-color: var(--color-blue-400);
}
.page-machine-liste .button-nouvelle-machine .icon-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.page-machine-liste .dropdown-wrapper {
  position: relative;
}
.page-machine-liste .liste-nouvelle-machine {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: var(--color-neutrals-50);
  border: 1px solid var(--color-neutrals-100);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.page-machine-liste .liste-nouvelle-machine .menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 42px;
  padding: 8px 16px;
  background: var(--color-neutrals-50);
  border: none;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutrals-400);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.page-machine-liste .liste-nouvelle-machine .menu-item:hover {
  background-color: var(--color-blue-100);
  color: var(--color-blue-300);
}
.page-machine-liste .liste-nouvelle-machine .menu-item:first-child {
  border-radius: 4px 4px 0 0;
}
.page-machine-liste .liste-nouvelle-machine .menu-item:last-child {
  border-radius: 0 0 4px 4px;
}
.page-machine-liste .toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-machine-liste .toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-neutrals-50);
  border: 1px solid var(--color-neutrals-100);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutrals-500);
  animation: toast-slide-in 0.3s ease-out;
}
.page-machine-liste .toast.toast-fade-out {
  animation: toast-slide-out 0.3s ease-in forwards;
}
.page-machine-liste .toast--info {
  border-left: 4px solid var(--color-blue-300);
}
.page-machine-liste .toast--info .toast-icon {
  color: var(--color-blue-300);
}
.page-machine-liste .toast--success {
  border-left: 4px solid #62ba87;
}
.page-machine-liste .toast--success .toast-icon {
  color: #62ba87;
}
.page-machine-liste .toast--error {
  border-left: 4px solid #c14039;
}
.page-machine-liste .toast--error .toast-icon {
  color: #c14039;
}
@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
.page-machine-liste .toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.page-machine-liste .input-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 397px;
  max-width: 100%;
  height: 40px;
  padding: 12px 16px;
  background: var(--color-neutrals-50);
  border: 1px solid var(--color-neutrals-100);
  border-radius: 4px;
  box-sizing: border-box;
}
.page-machine-liste .input-search .icon-search {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.page-machine-liste .input-search .icon-search circle,
.page-machine-liste .input-search .icon-search path {
  stroke: var(--color-blue-350);
}
.page-machine-liste .input-search input {
  flex: 1;
  border: none;
  outline: none;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutrals-500);
  background: transparent;
}
.page-machine-liste .input-search input::placeholder {
  color: var(--color-neutrals-350);
}
.page-machine-liste .section-machine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  gap: 24px;
  overflow-y: auto;
  padding-bottom: 20px;
  /* Fait grandir la grille pour remplir l'espace restant afin que le
     footer-legende reste ancre en bas du viewport (100vh de main-content).
     min-height:0 indispensable pour autoriser le scroll interne. */
  flex: 1;
  min-height: 0;
}
.page-machine-liste .card-machine {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 264px;
  height: min-content;
  padding: 24px 24px 16px 24px;
  background-color: var(--color-neutrals-50);
  border: 1px solid var(--color-neutrals-100);
  border-radius: 4px;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.page-machine-liste .card-machine:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.page-machine-liste .section-nom-machine {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-machine-liste .section-nom {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.page-machine-liste .machine-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-blue-450);
  line-height: 28px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.page-machine-liste .span-version-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.8px 8.8px;
  border: 0.8px solid var(--color-neutrals-150);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #0a0a0a;
  line-height: 16px;
  flex-shrink: 0;
  white-space: nowrap;
}
.page-machine-liste .section-numero {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.page-machine-liste .machine-number {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutrals-400);
  line-height: 20px;
}
.page-machine-liste .machine-logiciel-caisse {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-neutrals-350, #828282);
  line-height: 20px;
}
.page-machine-liste .section-etat-fonctionnement {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-machine-liste .activation-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
.page-machine-liste .activation-badge--active {
  background-color: rgba(98, 186, 135, 0.1);
  color: #3b7051;
}
.page-machine-liste .activation-badge--active .status-icon {
  background-color: #62ba87;
}
.page-machine-liste .activation-badge--inactive {
  background-color: rgba(193, 64, 57, 0.1);
  color: #c14039;
}
.page-machine-liste .activation-badge--inactive .status-icon {
  background-color: #c14039;
}
.page-machine-liste .activation-badge--virtuelle {
  background-color: rgba(38, 34, 98, 0.1);
  color: var(--color-blue-300);
}
.page-machine-liste .activation-badge--virtuelle .status-icon {
  background-color: var(--color-blue-300);
}
.page-machine-liste .activation-badge .status-icon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.page-machine-liste .dernier-ping {
  font-size: 10px;
  font-weight: 400;
  color: var(--color-neutrals-300);
  text-align: right;
  line-height: normal;
}
.page-machine-liste .section-adresse {
  display: flex;
  align-items: center;
  gap: 4px;
}
.page-machine-liste .icon-location {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.page-machine-liste .lieu-name {
  flex: 1;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-blue-500);
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.page-machine-liste .section-remplissage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background-color: #f9fafb;
  border-radius: 10px;
  opacity: 0.8;
}
.page-machine-liste .remplissage-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
}
.page-machine-liste .remplissage-loading .loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #e5e7eb;
  border-top-color: #4D4A7E;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.page-machine-liste .remplissage-loading .loading-text {
  font-size: 12px;
  color: #6b7280;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.page-machine-liste .div-stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  color: #262262;
  white-space: nowrap;
}
.page-machine-liste .div-stats-header span {
  font-weight: 600;
}
.page-machine-liste .div-stats-header strong {
  font-weight: 700;
}
.page-machine-liste .div-stats-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-machine-liste .div-stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 20px;
}
.page-machine-liste .div-stat-row--semibold .stat-label,
.page-machine-liste .div-stat-row--semibold .stat-value {
  font-weight: 600;
  color: #262262;
}
.page-machine-liste .span-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.page-machine-liste .span-indicator-filled {
  background-color: #62ba87;
}
.page-machine-liste .span-indicator-empty {
  background-color: var(--color-neutrals-150);
}
.page-machine-liste .span-indicator-livre {
  background-color: #53a452;
}
.page-machine-liste .span-indicator-alivrer {
  background-color: #cbc850;
}
.page-machine-liste .span-indicator-expire {
  background-color: #cc444b;
}
.page-machine-liste .span-indicator-depot-client {
  background-color: #97ccf9;
}
.page-machine-liste .stat-label {
  flex: 1;
  font-size: 12px;
  font-weight: 400;
  color: #4a5565;
  line-height: 20px;
}
.page-machine-liste .stat-value {
  font-size: 12px;
  font-weight: 400;
  color: #101828;
  line-height: 20px;
}
.page-machine-liste .div-progress-bar-container {
  height: 8px;
  margin-top: 8px;
  background-color: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
}
.page-machine-liste .div-progress-bar-container--stacked {
  display: flex;
}
.page-machine-liste .div-progress-bar-container--stacked .div-progress-bar-fill {
  border-radius: 0;
}
.page-machine-liste .div-progress-bar-container--stacked .div-progress-bar-fill:first-child {
  border-radius: 9999px 0 0 9999px;
}
.page-machine-liste .div-progress-bar-container--stacked .div-progress-bar-fill:last-child {
  border-radius: 0 9999px 9999px 0;
}
.page-machine-liste .div-progress-bar-fill {
  height: 100%;
  background-color: #62ba87;
  border-radius: 9999px;
}
.page-machine-liste .div-progress-bar-fill--livre {
  background-color: #53a452;
}
.page-machine-liste .div-progress-bar-fill--alivrer {
  background-color: #cbc850;
}
.page-machine-liste .div-progress-bar-fill--expire {
  background-color: #cc444b;
}
.page-machine-liste .div-progress-bar-fill--depot-client {
  background-color: #97ccf9;
}
.page-machine-liste .div-teamviewer-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-blue-500);
  line-height: 20px;
}
.page-machine-liste .button-copy-teamviewer {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-blue-500);
  line-height: 20px;
}
.page-machine-liste .button-copy-teamviewer:hover {
  opacity: 0.7;
}
.page-machine-liste .svg-copy-icon {
  width: 12px;
  height: 12px;
}
.page-machine-liste .section-creation {
  display: flex;
  flex-direction: column;
  font-size: 10px;
  font-weight: 400;
  color: var(--color-neutrals-300);
  text-align: right;
  line-height: normal;
}
.page-machine-liste .popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}
.page-machine-liste .popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 535px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  background-color: var(--color-neutrals-50);
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 501;
}
.page-machine-liste .header-popup {
  display: flex;
  justify-content: flex-end;
}
.page-machine-liste .button-fermer-popup {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-neutrals-500);
}
.page-machine-liste .button-fermer-popup:hover {
  opacity: 0.7;
}
.page-machine-liste .popup-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-blue-500);
  line-height: 30px;
}
.page-machine-liste .nav-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px;
  background-color: var(--color-blue-100);
  border-radius: 14px;
}
.page-machine-liste .nav-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 29px;
  padding: 4.8px 8.8px;
  background: none;
  border: 0.8px solid transparent;
  border-radius: 14px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutrals-450);
  cursor: pointer;
  transition: background-color 0.2s;
}
.page-machine-liste .nav-tab:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
.page-machine-liste .nav-tab--active {
  background-color: var(--color-neutrals-50);
}
.page-machine-liste .form-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page-machine-liste .form-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #101828;
  line-height: 28px;
}
.page-machine-liste .label-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Tooltip icon */
}
.page-machine-liste .label-form label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-blue-500);
}
.page-machine-liste .label-form label .required {
  color: #c14039;
  font-weight: 600;
}
.page-machine-liste .label-form .tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background-color: var(--color-neutrals-200);
  color: var(--color-neutrals-50);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  cursor: help;
  position: relative;
  flex-shrink: 0;
  transition: background-color 0.2s;
  /* Tooltip bubble */
}
.page-machine-liste .label-form .tooltip-icon:hover {
  background-color: var(--color-blue-300);
}
.page-machine-liste .label-form .tooltip-icon:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.page-machine-liste .label-form .tooltip-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background-color: var(--color-blue-500);
  color: var(--color-neutrals-50);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  max-width: 280px;
  white-space: normal;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  line-height: 1.4;
}
.page-machine-liste .label-form input {
  width: 100%;
  height: 36px;
  padding: 12px 16px;
  background-color: var(--color-neutrals-50);
  border: 1px solid var(--color-neutrals-150);
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutrals-500);
}
.page-machine-liste .label-form input::placeholder {
  color: var(--color-neutrals-300);
}
.page-machine-liste .label-form input:focus {
  outline: none;
  border-color: var(--color-blue-300);
}
.page-machine-liste .label-form input.input-error {
  border-color: #c14039;
  background-color: rgba(193, 64, 57, 0.1);
}
.page-machine-liste .label-form input.input-error:focus {
  border-color: #c14039;
}
.page-machine-liste .div-label-form,
.page-machine-liste .div-form-row-double {
  display: flex;
  gap: 16px;
}
.page-machine-liste .div-label-form .label-form,
.page-machine-liste .div-form-row-double .label-form {
  flex: 1;
}
.page-machine-liste .footer-popup {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 17px;
  border-top: 1px solid var(--color-neutrals-150);
}
.page-machine-liste .champs-obligatoires {
  font-size: 14px;
  font-weight: 400;
  color: #6a7282;
  line-height: 20px;
  margin-right: auto;
}
.page-machine-liste .button-annuler {
  min-width: 88px;
  padding: 8px 16px;
  background: none;
  border: 1px solid var(--color-blue-400);
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-blue-450);
  cursor: pointer;
  transition: 0.4s;
}
.page-machine-liste .button-annuler:hover {
  border: 1px solid var(--color-green-200);
  color: var(--color-green-200);
}
.page-machine-liste .button-creer-compte,
.page-machine-liste .button-creer-machine,
.page-machine-liste .button-creer-virtuelle {
  min-width: 140px;
  padding: 8px 16px;
  background-color: var(--color-blue-300);
  border: none;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s;
}
.page-machine-liste .button-creer-compte:hover,
.page-machine-liste .button-creer-machine:hover,
.page-machine-liste .button-creer-virtuelle:hover {
  background-color: var(--color-blue-400);
}
.page-machine-liste .button-creer-compte:disabled,
.page-machine-liste .button-creer-machine:disabled,
.page-machine-liste .button-creer-virtuelle:disabled {
  background-color: var(--color-neutrals-300);
}
.page-machine-liste .drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 24px;
  border: 2px dashed var(--color-neutrals-200);
  border-radius: 8px;
  background-color: #fafafe;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.page-machine-liste .drop-zone:hover, .page-machine-liste .drop-zone--dragover {
  border-color: var(--color-blue-300);
  background-color: rgba(38, 34, 98, 0.04);
}
.page-machine-liste .drop-zone-icon {
  width: 48px;
  height: 48px;
  opacity: 0.6;
}
.page-machine-liste .drop-zone-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutrals-400);
}
.page-machine-liste .drop-zone-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-neutrals-300);
}
.page-machine-liste .drop-zone-browse {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background-color: var(--color-blue-300);
  color: white;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}
.page-machine-liste .drop-zone-browse:hover {
  background-color: var(--color-blue-400);
}
.page-machine-liste .drop-zone-input {
  display: none;
}
.page-machine-liste .drop-zone-error {
  font-size: 13px;
  font-weight: 600;
  color: #c14039;
  text-align: center;
  padding: 0 8px;
}
.page-machine-liste .json-armoires-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background-color: rgba(193, 64, 57, 0.08);
  border: 1px solid rgba(193, 64, 57, 0.2);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #c14039;
}
.page-machine-liste .json-armoires-alert svg {
  flex-shrink: 0;
}
.page-machine-liste .json-armoires-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-neutrals-100);
  border-radius: 4px;
  overflow: hidden;
}
.page-machine-liste .json-armoires-table .tr-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 8px;
  padding: 10px 16px;
  background-color: var(--color-blue-100);
}
.page-machine-liste .json-armoires-table .tr-header .th {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-blue-450);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.page-machine-liste .json-armoires-table .tr-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--color-neutrals-100);
  transition: background-color 0.15s;
}
.page-machine-liste .json-armoires-table .tr-row:hover {
  background-color: #fafafe;
}
.page-machine-liste .json-armoires-table .tr-row .td {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-neutrals-500);
}
.page-machine-liste .json-armoires-table .armoire-name {
  font-weight: 700;
  color: var(--color-blue-450);
}
.page-machine-liste .json-armoires-table .armoire-modules {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-neutrals-300);
}
.page-machine-liste .json-armoires-table .type-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-neutrals-400);
}
.page-machine-liste .json-armoires-table .froid-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}
.page-machine-liste .json-armoires-table .froid-badge--sec {
  background-color: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}
.page-machine-liste .json-armoires-table .froid-badge--refrigere {
  background-color: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}
.page-machine-liste .json-armoires-table .froid-badge--congele {
  background-color: rgba(109, 40, 217, 0.1);
  color: #6d28d9;
}
.page-machine-liste .json-armoires-rows {
  max-height: 240px;
  overflow-y: auto;
}
.page-machine-liste .no-machines-message,
.page-machine-liste .no-search-results-message {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--color-neutrals-350);
  font-size: 16px;
  font-weight: 500;
}
.page-machine-liste .footer-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 32px;
  padding: 12px 24px;
  background: white;
  border-top: 1px solid #f3f4f6;
  /* Ancre le footer en bas du main-content (100vh) : ne se compresse
     jamais et reste visible lors du scroll de la grille au-dessus. */
  flex-shrink: 0;
  /* Marges negatives pour "sortir" du padding 28px de main-content
     et coller aux bords gauche/droite/bas de l'ecran. Meme technique
     que la legende de la page composition. */
  margin-left: -28px;
  margin-right: -28px;
  margin-bottom: -28px;
}
.page-machine-liste .footer-legende .legende-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-machine-liste .footer-legende .legende-color-box {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.page-machine-liste .footer-legende .legende-color-box.legende-color-total {
  background: #262262;
}
.page-machine-liste .footer-legende .legende-color-box.legende-color-remplis {
  background: #62ba87;
}
.page-machine-liste .footer-legende .legende-color-box.legende-color-vides {
  background: var(--color-neutrals-150);
}
.page-machine-liste .footer-legende .legende-text {
  font-size: 12px;
  font-weight: 500;
  color: #4a5565;
  white-space: nowrap;
}
.page-machine-liste .footer-legende .legende-value {
  font-weight: 700;
  color: #101828;
  margin-left: 2px;
}
@media (max-width: 768px) {
  .page-machine-liste .header-page {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-machine-liste .input-search {
    width: 100%;
  }
  .page-machine-liste .card-machine {
    min-width: 100%;
  }
}
@media (max-width: 719px) {
  .page-machine-liste {
    /* Bandeau top fixe avec titre "Machines" */
    /* Espace pour le bandeau fixe */
    padding-top: 72px;
    overflow: hidden;
    height: 100svh;
    /* Ajustement du main-content : flex column pour séparer header fixe et cards scrollables */
    /* Header : fixe en haut, ne scroll pas */
    /* Masquer le titre (remplacé par le bandeau) */
    /* Bouton nouvelle machine : pleine largeur */
    /* Recherche : pleine largeur */
    /* Grille des machines : 1 colonne, scrollable */
    /* Cards machines : pas de changement demandé */
    /* ==========================================================================
       Popup Creation Machine - Fullscreen Mobile
       ========================================================================== */
    /* Ajustements boutons footer mobile */
    /* Formulaire : champs ville/CP en colonne sur mobile */
  }
  .page-machine-liste::before {
    content: "Machines";
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
    height: 72px;
    min-height: 72px;
    padding-left: 80px;
    padding-top: 8px;
    background: var(--color-neutrals-50);
    border-radius: 0 0 8px 8px;
    z-index: 3;
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #262262;
    line-height: normal;
    box-sizing: border-box;
  }
  .page-machine-liste .main-content {
    padding: 20px;
    height: calc(100svh - 72px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .page-machine-liste .header-page {
    flex-direction: column;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: none;
    flex-shrink: 0;
  }
  .page-machine-liste .div-title-container {
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }
  .page-machine-liste .page-title {
    display: none;
  }
  .page-machine-liste .dropdown-wrapper {
    width: 100%;
  }
  .page-machine-liste .button-nouvelle-machine {
    width: 100%;
    box-sizing: border-box;
  }
  .page-machine-liste .liste-nouvelle-machine {
    width: 100%;
  }
  .page-machine-liste .input-search {
    width: 100%;
    max-width: 100%;
  }
  .page-machine-liste .section-machine-grid {
    grid-template-columns: 1fr;
    overflow-y: auto;
    padding-bottom: 20px;
    /* Masquer scrollbar visuellement (scroll toujours fonctionnel) */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-machine-liste .section-machine-grid::-webkit-scrollbar {
    display: none;
  }
  .page-machine-liste .popup {
    /* Fullscreen */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    transform: none;
    border-radius: 0;
    padding: 0;
    /* Structure flex pour footer fixe */
    display: flex;
    flex-direction: column;
  }
  .page-machine-liste .header-popup {
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-neutrals-100);
    flex-shrink: 0;
  }
  .page-machine-liste .popup-title {
    padding: 0 20px;
    font-size: 18px;
    flex-shrink: 0;
  }
  .page-machine-liste .nav-tabs {
    margin: 16px 20px 0 20px;
    flex-shrink: 0;
  }
  .page-machine-liste .nav-tabs .nav-tab {
    font-size: 12px;
    padding: 4px 6px;
  }
  .page-machine-liste .form-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    /* Masquer scrollbar visuellement */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-machine-liste .form-content::-webkit-scrollbar {
    display: none;
  }
  .page-machine-liste .footer-popup {
    flex-shrink: 0;
    padding: 16px 20px;
    margin-top: auto;
    border-top: 1px solid var(--color-neutrals-150);
    background-color: var(--color-neutrals-50);
  }
  .page-machine-liste .champs-obligatoires {
    display: none;
  }
  .page-machine-liste .button-annuler,
  .page-machine-liste .button-creer-machine,
  .page-machine-liste .button-creer-virtuelle {
    flex: 1;
    min-width: auto;
  }
  .page-machine-liste .div-label-form,
  .page-machine-liste .div-form-row-double {
    flex-direction: column;
    gap: 16px;
  }
}

/* ===========================================
   Page Machine Detail - Informations Generales
   Tous les styles sont scopes sous .page-machine-informations-generales
   =========================================== */
.page-machine-informations-generales {
  /* Utilitaires */
  /* Variables locales */
  --md-color-blue-500: #110f2c;
  --md-color-blue-450: #161338;
  --md-color-blue-400: #1b1846;
  --md-color-blue-300: #262262;
  --md-color-blue-150: #a2a0bb;
  --md-color-neutrals-500: #1e1e1e;
  --md-color-neutrals-450: #3d3d3d;
  --md-color-neutrals-400: #5e5e5e;
  --md-color-neutrals-350: #828282;
  --md-color-neutrals-300: #a7a7a7;
  --md-color-neutrals-250: #b2b2b2;
  --md-color-neutrals-150: #ddd;
  --md-color-neutrals-100: #f1f1f1;
  --md-color-neutrals-50: #fff;
  --md-color-green-450: #213e2d;
  --md-color-green-400: #3b7051;
  --md-color-green-200: #62ba87;
  --md-color-red-200: #c14039;
  --md-font-family: "Open Sans", sans-serif;
  --md-spacing-xs: 4px;
  --md-spacing-sm: 8px;
  --md-spacing-md: 12px;
  --md-spacing-lg: 16px;
  --md-spacing-xl: 20px;
  --md-spacing-2xl: 24px;
  --md-spacing-3xl: 28px;
  --md-spacing-4xl: 32px;
  /* Page Layout */
  display: flex;
  min-height: 100vh;
  width: 100%;
  /* Sidebar placeholder (element ignore) */
  /* Main content */
  /* ===========================================
     Header Page Top
     =========================================== */
  /* ===========================================
     Buttons
     =========================================== */
  /* ===========================================
     Navigation Tabs Bar
     =========================================== */
  /* ===========================================
     Scrollable Content Area
     =========================================== */
  /* ===========================================
     Content Sections
     =========================================== */
  /* Fields Grid */
  /* Container Modifiable (mode edition) */
  /* Style pour les champs en erreur */
  /* Container Choix (select) */
  /* ===========================================
     Multimedia Section
     =========================================== */
  /* Media Preview (image/video existante) */
  /* ===========================================
     Footer Actions Bar
     =========================================== */
  /* ===========================================
     Responsive
     =========================================== */
  /* ===========================================
     Responsive Mobile (max-width: 719px)
     Pattern identique aux pages Transaction et Liste Machines
     =========================================== */
  /* ===========================================
     Toast Notifications
     =========================================== */
}
.page-machine-informations-generales .hidden {
  display: none !important;
}
.page-machine-informations-generales .aside-sidebar-placeholder {
  display: none;
}
.page-machine-informations-generales .section-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
  padding: var(--md-spacing-3xl);
  padding-bottom: 0;
  overflow: hidden;
  background: linear-gradient(114.6deg, rgb(248, 249, 250) 0%, rgb(245, 244, 255) 100%);
  position: relative;
  height: 100vh;
}
.page-machine-informations-generales .header-page-top {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
  padding-bottom: var(--md-spacing-xl);
  border-bottom: 1px solid var(--md-color-neutrals-100);
}
@media (max-width: 719px) {
  .page-machine-informations-generales .header-page-top {
    padding-bottom: 0;
  }
}
.page-machine-informations-generales .button-retour {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-xs);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
}
.page-machine-informations-generales .button-retour .icon-arrow-back {
  width: 16px;
  height: 16px;
}
.page-machine-informations-generales .div-machine-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-spacing-4xl);
}
.page-machine-informations-generales .div-machine-info {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
  flex: 1;
}
.page-machine-informations-generales .div-machine-identite {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
}
.page-machine-informations-generales .machine-name {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--md-color-blue-450);
}
.page-machine-informations-generales .span-badge-version {
  padding: 4.8px 8.8px;
  border: 0.8px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  color: #0a0a0a;
}
.page-machine-informations-generales .activation-badge {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-sm);
  padding: var(--md-spacing-sm) var(--md-spacing-md);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
.page-machine-informations-generales .activation-badge--active {
  background: rgba(98, 186, 135, 0.1);
  color: var(--md-color-green-400);
}
.page-machine-informations-generales .activation-badge--active .status-icon {
  background: var(--md-color-green-200);
}
.page-machine-informations-generales .activation-badge--inactive {
  background: rgba(193, 64, 57, 0.1);
  color: var(--md-color-red-200);
}
.page-machine-informations-generales .activation-badge--inactive .status-icon {
  background: var(--md-color-red-200);
}
.page-machine-informations-generales .activation-badge--virtuelle {
  background: rgba(38, 34, 98, 0.1);
  color: var(--md-color-blue-300);
}
.page-machine-informations-generales .activation-badge--virtuelle .status-icon {
  background: var(--md-color-blue-300);
}
.page-machine-informations-generales .activation-badge .status-icon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.page-machine-informations-generales .last-sync {
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  color: var(--md-color-neutrals-350);
}
.page-machine-informations-generales .div-localisation {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-lg);
}
.page-machine-informations-generales .machine-number {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--md-color-neutrals-400);
}
.page-machine-informations-generales .location-info {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-xs);
}
.page-machine-informations-generales .location-info .icon-pin {
  width: 16px;
  height: 16px;
}
.page-machine-informations-generales .location-info span {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--md-color-neutrals-350);
}
.page-machine-informations-generales .btn-primary {
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.page-machine-informations-generales .btn-primary:hover {
  background: var(--md-color-blue-400);
}
.page-machine-informations-generales .btn-primary.disabled, .page-machine-informations-generales .btn-primary:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.page-machine-informations-generales .btn-primary-small {
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.page-machine-informations-generales .btn-outline {
  background: transparent;
  color: var(--md-color-blue-450);
  border: 1px solid var(--md-color-blue-400);
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.4s;
}
.page-machine-informations-generales .btn-outline:hover {
  border: 1px solid var(--md-color-green-200);
  color: var(--md-color-green-200);
}
.page-machine-informations-generales .btn-green {
  background: var(--md-color-green-200);
  color: var(--md-color-green-450);
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.page-machine-informations-generales .btn-green:hover {
  background: #56a87a;
}
.page-machine-informations-generales .btn-green.disabled, .page-machine-informations-generales .btn-green:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.page-machine-informations-generales .btn-outline.disabled,
.page-machine-informations-generales .btn-outline:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.page-machine-informations-generales .btn-deactivated {
  background: var(--md-color-neutrals-300);
  color: var(--md-color-neutrals-50);
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
}
.page-machine-informations-generales .btn-red {
  background: var(--md-color-red-200);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.page-machine-informations-generales .btn-red:hover {
  background: #a83530;
}
.page-machine-informations-generales .btn-red.disabled, .page-machine-informations-generales .btn-red:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.page-machine-informations-generales .nav-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-spacing-lg);
}
.page-machine-informations-generales .div-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
}
.page-machine-informations-generales .button-supprimer-machine {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--md-spacing-sm);
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--md-color-red-200);
  transition: all 0.2s;
}
.page-machine-informations-generales .button-supprimer-machine svg {
  width: 18px;
  height: 18px;
}
.page-machine-informations-generales .button-supprimer-machine:hover {
  background: rgba(192, 57, 52, 0.1);
}
.page-machine-informations-generales .ul-tabs-list {
  display: flex;
  align-items: center;
  list-style: none;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  padding: 0 var(--md-spacing-xs);
  margin: 0;
}
.page-machine-informations-generales .li-tab {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-150);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.page-machine-informations-generales .li-tab a {
  display: block;
  padding: var(--md-spacing-md);
  color: inherit;
  text-decoration: none;
}
.page-machine-informations-generales .li-tab:hover {
  color: var(--md-color-blue-300);
}
.page-machine-informations-generales .li-tab.active {
  color: var(--md-color-blue-300);
  border-bottom-color: var(--md-color-blue-300);
}
.page-machine-informations-generales .scrollable-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
  padding-bottom: var(--md-spacing-xl);
}
.page-machine-informations-generales .content-sections {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
}
.page-machine-informations-generales .div-section-wrapper {
  width: 100%;
}
.page-machine-informations-generales .div-section-wrapper > div {
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 8px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
}
.page-machine-informations-generales .button-replier {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-lg);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 700;
  color: var(--md-color-blue-450);
  line-height: 28px;
}
.page-machine-informations-generales .button-replier .icone-replier {
  width: 12px;
  height: 12px;
  transition: transform 0.2s;
}
.page-machine-informations-generales .button-replier.collapsed .icone-replier {
  transform: rotate(-90deg);
}
.page-machine-informations-generales .fields-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--md-spacing-xl) 40px;
}
.page-machine-informations-generales .div-field {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
  min-width: 0;
}
.page-machine-informations-generales .div-field label {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--md-color-blue-300);
}
.page-machine-informations-generales .div-field .field-value {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--md-color-neutrals-450);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-machine-informations-generales [data-name=div-field-description-longue] .field-value,
.page-machine-informations-generales [data-name=div-field-mentions-legales] .field-value {
  white-space: pre-line;
}
.page-machine-informations-generales .container-modifiable .field-value {
  display: none;
}
.page-machine-informations-generales .container-modifiable input,
.page-machine-informations-generales .field-input-edit {
  width: 100%;
  height: 36px;
  padding: 12px 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 16px;
  font-weight: 400;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
}
.page-machine-informations-generales .field-input-edit:focus {
  outline: none;
  border-color: var(--md-color-blue-300);
}
.page-machine-informations-generales .field-input-edit.input-error,
.page-machine-informations-generales .field-textarea-edit.input-error,
.page-machine-informations-generales .field-select-edit.input-error {
  border-color: var(--md-color-red-200);
  background-color: rgba(193, 64, 57, 0.1);
}
.page-machine-informations-generales .field-input-edit.input-error:focus,
.page-machine-informations-generales .field-textarea-edit.input-error:focus,
.page-machine-informations-generales .field-select-edit.input-error:focus {
  border-color: var(--md-color-red-200);
}
.page-machine-informations-generales .field-textarea-edit {
  width: 100%;
  min-height: 120px;
  padding: 12px 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 16px;
  font-weight: 400;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
  resize: vertical;
  line-height: 24px;
}
.page-machine-informations-generales .field-textarea-edit:focus {
  outline: none;
  border-color: var(--md-color-blue-300);
}
.page-machine-informations-generales .field-select-edit {
  width: 100%;
  height: 36px;
  padding: 0 32px 0 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 16px;
  font-weight: 400;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%233D3D3D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.page-machine-informations-generales .field-select-edit:focus {
  outline: none;
  border-color: var(--md-color-blue-300);
}
.page-machine-informations-generales .container-choix .field-value {
  display: none;
}
.page-machine-informations-generales .container-choix .select-wrapper {
  position: relative;
  width: 100%;
}
.page-machine-informations-generales .container-choix select {
  width: 100%;
  height: 36px;
  padding: 0 32px 0 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 16px;
  font-weight: 400;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
  appearance: none;
  cursor: pointer;
}
.page-machine-informations-generales .div-multimedia-content {
  display: flex;
  gap: 48px;
}
.page-machine-informations-generales .div-upload-image,
.page-machine-informations-generales .div-upload-logo,
.page-machine-informations-generales .div-upload-video {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
}
.page-machine-informations-generales .div-upload-image label,
.page-machine-informations-generales .div-upload-logo label,
.page-machine-informations-generales .div-upload-video label {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--md-color-blue-300);
}
.page-machine-informations-generales .div-upload-body {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xs);
}
.page-machine-informations-generales .div-upload-body .input-file-upload {
  display: none;
}
.page-machine-informations-generales .media-preview {
  object-fit: cover;
  border-radius: 4px;
  /* Fallback quand le navigateur ne supporte pas le format video (ogv, ogg) */
}
.page-machine-informations-generales .media-preview.square {
  width: 124px;
  height: 124px;
}
.page-machine-informations-generales .media-preview.rectangle {
  width: 234px;
  height: 124px;
}
.page-machine-informations-generales .media-preview.video-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--md-color-neutrals-100);
  color: var(--md-color-neutrals-400);
  object-fit: initial;
}
.page-machine-informations-generales .media-preview.video-fallback svg {
  width: 32px;
  height: 32px;
}
.page-machine-informations-generales .media-preview.video-fallback span {
  font-size: 10px;
  text-align: center;
  line-height: 1.2;
}
.page-machine-informations-generales .figure-placeholder {
  background: var(--md-color-neutrals-100);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.page-machine-informations-generales .figure-placeholder.square {
  width: 124px;
  height: 124px;
}
.page-machine-informations-generales .figure-placeholder.rectangle {
  width: 234px;
  height: 124px;
}
.page-machine-informations-generales .figure-placeholder .icon-upload {
  width: 41px;
  height: 41px;
}
.page-machine-informations-generales .figure-placeholder.has-preview {
  cursor: default;
}
.page-machine-informations-generales .figure-placeholder.dragover {
  border: 2px dashed var(--md-color-blue-300);
  background: rgba(38, 34, 98, 0.05);
}
.page-machine-informations-generales .figure-placeholder .preview-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-machine-informations-generales .figure-placeholder .upload-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  width: 100%;
}
.page-machine-informations-generales .figure-placeholder .progress-bar {
  width: 80%;
  height: 6px;
  background: var(--md-color-neutrals-150);
  border-radius: 3px;
  overflow: hidden;
}
.page-machine-informations-generales .figure-placeholder .progress-fill {
  height: 100%;
  background: var(--md-color-blue-300);
  border-radius: 3px;
  transition: width 0.1s ease;
}
.page-machine-informations-generales .figure-placeholder .progress-text {
  font-size: 11px;
  color: var(--md-color-neutrals-350);
}
.page-machine-informations-generales .div-actions {
  display: flex;
  gap: var(--md-spacing-sm);
}
.page-machine-informations-generales .button-editer,
.page-machine-informations-generales .button-supprimer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--md-spacing-sm);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 2px;
}
.page-machine-informations-generales .button-editer svg,
.page-machine-informations-generales .button-supprimer svg {
  width: 20px;
  height: 20px;
}
.page-machine-informations-generales .button-editer svg path,
.page-machine-informations-generales .button-supprimer svg path {
  stroke: currentColor;
}
.page-machine-informations-generales .button-editer:hover,
.page-machine-informations-generales .button-supprimer:hover {
  background: var(--md-color-neutrals-100);
}
.page-machine-informations-generales .button-editer {
  color: var(--md-color-blue-300);
}
.page-machine-informations-generales .button-supprimer {
  color: var(--md-color-red-200);
}
.page-machine-informations-generales .button-supprimer:hover {
  background: rgba(192, 57, 52, 0.1);
}
.page-machine-informations-generales .footer-actions-bar {
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 8px;
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-machine-informations-generales .div-actions-left {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-4xl);
}
.page-machine-informations-generales .div-button-counter {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
}
.page-machine-informations-generales .div-button-counter .counter {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--md-color-neutrals-250);
}
@media (max-width: 1200px) {
  .page-machine-informations-generales .fields-grid {
    grid-template-columns: 1fr;
  }
  .page-machine-informations-generales .div-multimedia-content {
    flex-wrap: wrap;
  }
  .page-machine-informations-generales .div-actions-left {
    flex-wrap: wrap;
    gap: var(--md-spacing-lg);
  }
}
@media (max-width: 768px) {
  .page-machine-informations-generales {
    flex-direction: column;
  }
  .page-machine-informations-generales .aside-sidebar-placeholder {
    width: 100%;
    min-width: unset;
    height: 60px;
  }
  .page-machine-informations-generales .section-main-content {
    padding: var(--md-spacing-lg);
  }
  .page-machine-informations-generales .div-machine-title-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-machine-informations-generales .nav-tabs-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-md);
  }
  .page-machine-informations-generales .ul-tabs-list {
    flex-wrap: wrap;
  }
  .page-machine-informations-generales .footer-actions-bar {
    flex-direction: column;
    gap: var(--md-spacing-lg);
  }
  .page-machine-informations-generales .div-actions-left {
    width: 100%;
    justify-content: center;
  }
  .page-machine-informations-generales .div-fields-passwords {
    flex-direction: column;
  }
}
@media (max-width: 719px) {
  .page-machine-informations-generales {
    /* Bandeau fixe en haut avec titre "Détail Machine" */
    /* Espace pour le bandeau fixe */
    padding-top: 72px;
    overflow: hidden;
    height: 100svh;
    /* Ajustement du main-content */
    /* Masquer les conteneurs vides pour éviter l'espace inutile */
    /* Header page : afficher seulement si bouton paramètres avancés présent */
    /* Masquer les infos machine (déjà dans les sections) */
    /* Navigation tabs : scroll horizontal */
    /* Contenu scrollable */
    /* Sections : 1 colonne */
    /* Multimédia : empilé verticalement, centré */
    /* Footer actions : scrollable avec le contenu (pas fixe) */
    /* Boutons en colonne verticale (1 par ligne) avec counter visible */
    /* Boutons pleine largeur */
    /* Boutons dans div-button-counter : prennent l'espace restant */
    /* Bouton Redémarrer : pleine largeur comme les autres */
    /* Toast : repositionner en bas */
  }
  .page-machine-informations-generales::before {
    content: "Détail Machine";
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
    height: 72px;
    min-height: 72px;
    padding-left: 80px;
    padding-top: 8px;
    background: var(--md-color-neutrals-50);
    border-radius: 0 0 8px 8px;
    z-index: 3;
    font-family: var(--md-font-family);
    font-size: 20px;
    font-weight: 700;
    color: #262262;
    line-height: normal;
    box-sizing: border-box;
  }
  .page-machine-informations-generales .section-main-content {
    padding: var(--md-spacing-xl);
    height: calc(100svh - 72px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .page-machine-informations-generales .div-nav-actions:empty,
  .page-machine-informations-generales .div-actions-left:empty,
  .page-machine-informations-generales .footer-actions-bar:empty,
  .page-machine-informations-generales .div-button-counter:empty {
    display: none;
  }
  .page-machine-informations-generales .header-page-top {
    display: none;
    /* Afficher si contient le bouton paramètres avancés */
  }
  .page-machine-informations-generales .header-page-top:has(.button-parametres-avances) {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    border-bottom: none;
    align-items: center;
    justify-content: space-between;
  }
  .page-machine-informations-generales .button-retour {
    display: flex;
  }
  .page-machine-informations-generales .div-machine-info {
    display: none;
  }
  .page-machine-informations-generales .div-machine-title-bar {
    width: auto;
  }
  .page-machine-informations-generales .button-parametres-avances {
    width: auto;
  }
  .page-machine-informations-generales .nav-tabs-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--md-spacing-md);
    flex-shrink: 0;
  }
  .page-machine-informations-generales .ul-tabs-list {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-machine-informations-generales .ul-tabs-list::-webkit-scrollbar {
    display: none;
  }
  .page-machine-informations-generales .li-tab {
    flex-shrink: 0;
    font-size: 12px;
  }
  .page-machine-informations-generales .li-tab a {
    padding: var(--md-spacing-sm) var(--md-spacing-md);
    white-space: nowrap;
  }
  .page-machine-informations-generales .div-nav-actions {
    width: 100%;
    justify-content: space-between;
  }
  .page-machine-informations-generales .scrollable-content {
    flex: 1;
    overflow-y: auto;
    padding-bottom: var(--md-spacing-4xl);
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-machine-informations-generales .scrollable-content::-webkit-scrollbar {
    display: none;
  }
  .page-machine-informations-generales .fields-grid {
    grid-template-columns: 1fr;
    gap: var(--md-spacing-lg);
  }
  .page-machine-informations-generales .div-section-wrapper > div {
    padding: var(--md-spacing-lg);
  }
  .page-machine-informations-generales .div-multimedia-content {
    flex-direction: column;
    gap: var(--md-spacing-xl);
    align-items: center;
  }
  .page-machine-informations-generales .div-upload-image,
  .page-machine-informations-generales .div-upload-logo,
  .page-machine-informations-generales .div-upload-video {
    width: 100%;
    align-items: center;
  }
  .page-machine-informations-generales .div-upload-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .page-machine-informations-generales .figure-placeholder.square {
    width: 150px;
    height: 150px;
  }
  .page-machine-informations-generales .figure-placeholder.rectangle {
    width: 100%;
    max-width: 280px;
    height: auto;
    aspect-ratio: 234/124;
  }
  .page-machine-informations-generales .media-preview.square {
    width: 150px;
    height: 150px;
  }
  .page-machine-informations-generales .media-preview.rectangle {
    width: 100%;
    max-width: 280px;
    height: auto;
    aspect-ratio: 234/124;
  }
  .page-machine-informations-generales .div-actions {
    justify-content: center;
  }
  .page-machine-informations-generales .footer-actions-bar {
    flex-direction: column;
    gap: var(--md-spacing-xl);
    padding: var(--md-spacing-lg);
    /* iOS : ajoute la safe-area pour que le bouton ne soit pas masque par la home indicator / barre Safari */
    padding-bottom: max(var(--md-spacing-lg), env(safe-area-inset-bottom) + var(--md-spacing-lg));
  }
  .page-machine-informations-generales .div-actions-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--md-spacing-xl);
  }
  .page-machine-informations-generales .div-button-counter {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--md-spacing-md);
    /* Counter visible à droite du bouton */
  }
  .page-machine-informations-generales .div-button-counter .counter {
    display: block;
    flex-shrink: 0;
  }
  .page-machine-informations-generales .div-actions-left > button {
    width: 100%;
  }
  .page-machine-informations-generales .div-button-counter > button {
    flex: 1;
  }
  .page-machine-informations-generales .div-actions-left .btn-primary,
  .page-machine-informations-generales .div-actions-left .btn-outline,
  .page-machine-informations-generales .div-actions-left .btn-green,
  .page-machine-informations-generales .div-actions-left .btn-red,
  .page-machine-informations-generales .div-actions-left .btn-deactivated {
    width: 100%;
    justify-content: center;
    padding: var(--md-spacing-sm) var(--md-spacing-xs);
    font-size: 12px;
  }
  .page-machine-informations-generales .footer-actions-bar > .button-redemarrer {
    width: 100%;
    justify-content: center;
    padding: var(--md-spacing-sm) var(--md-spacing-xs);
    font-size: 12px;
  }
  .page-machine-informations-generales .toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
  }
  .page-machine-informations-generales .toast {
    width: 100%;
  }
}
.page-machine-informations-generales .toast-container {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-machine-informations-generales .toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
  animation: toast-slide-in 0.3s ease-out;
}
.page-machine-informations-generales .toast.toast-fade-out {
  animation: toast-slide-out 0.3s ease-in forwards;
}
.page-machine-informations-generales .toast--info {
  border-left: 4px solid var(--md-color-blue-300);
}
.page-machine-informations-generales .toast--info .toast-icon {
  color: var(--md-color-blue-300);
}
.page-machine-informations-generales .toast--success {
  border-left: 4px solid var(--md-color-green-200);
}
.page-machine-informations-generales .toast--success .toast-icon {
  color: var(--md-color-green-200);
}
.page-machine-informations-generales .toast--error {
  border-left: 4px solid var(--md-color-red-200);
}
.page-machine-informations-generales .toast--error .toast-icon {
  color: var(--md-color-red-200);
}
@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
.page-machine-informations-generales .toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ===========================================
   Popup Overlay - scope global car hors de .page-machine-informations-generales
   =========================================== */
.page-machine-informations-generales ~ .popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

/* ===========================================
   Popup Parametres Avances
   =========================================== */
.popup-parametres-avances {
  --md-color-blue-500: #110f2c;
  --md-color-blue-450: #161338;
  --md-color-blue-400: #1b1846;
  --md-color-blue-300: #262262;
  --md-color-blue-150: #a2a0bb;
  --md-color-neutrals-500: #1e1e1e;
  --md-color-neutrals-450: #3d3d3d;
  --md-color-neutrals-400: #5e5e5e;
  --md-color-neutrals-350: #828282;
  --md-color-neutrals-300: #a7a7a7;
  --md-color-neutrals-250: #b2b2b2;
  --md-color-neutrals-150: #ddd;
  --md-color-neutrals-100: #f1f1f1;
  --md-color-neutrals-50: #fff;
  --md-color-green-450: #213e2d;
  --md-color-green-400: #3b7051;
  --md-color-green-200: #62ba87;
  --md-color-red-200: #c14039;
  --md-font-family: "Open Sans", sans-serif;
  --md-spacing-xs: 4px;
  --md-spacing-sm: 8px;
  --md-spacing-md: 12px;
  --md-spacing-lg: 16px;
  --md-spacing-xl: 20px;
  --md-spacing-2xl: 24px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 690px;
  max-height: 90vh;
  background: white;
  border-radius: 4px;
  padding: var(--md-spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
  z-index: 101;
  overflow-y: auto;
  /* Popup Tabs */
  /* Popup Tab Content */
  /* Field Row */
  /* Select Wrapper */
  /* Input Number */
  /* Toggle */
  /* Slider */
  /* TVA Transfer */
  /* Transfer Buttons */
  /* Password Fields */
  /* TeamViewer Field */
  /* Popup Footer */
  /* Buttons */
  /* ===========================================
     Onglet Click & Collect
     =========================================== */
  /* Responsive Popup - Tablette */
  /* Responsive Popup - Mobile Fullscreen */
}
.popup-parametres-avances .popup-header {
  display: flex;
  justify-content: flex-end;
}
.popup-parametres-avances .button-fermer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
}
.popup-parametres-avances .button-fermer svg {
  width: 10px;
  height: 10px;
}
.popup-parametres-avances .section-popup-body {
  display: flex;
  flex-direction: column;
}
.popup-parametres-avances .div-popup-content {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
}
.popup-parametres-avances .div-popup-content h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--md-color-blue-500);
}
.popup-parametres-avances .nav-popup-tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  padding: 0 var(--md-spacing-xs);
}
.popup-parametres-avances .li-tab-popup {
  padding: var(--md-spacing-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-150);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--md-font-family);
  transition: all 0.2s;
}
.popup-parametres-avances .li-tab-popup:hover {
  color: var(--md-color-blue-300);
}
.popup-parametres-avances .li-tab-popup.active {
  color: var(--md-color-blue-300);
  border-bottom-color: var(--md-color-blue-300);
}
.popup-parametres-avances .popup-tab-content {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
  margin-top: var(--md-spacing-2xl);
}
.popup-parametres-avances .div-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
}
.popup-parametres-avances .div-field-row label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.popup-parametres-avances .div-field-row.with-description {
  align-items: flex-start;
}
.popup-parametres-avances .label-group {
  display: flex;
  flex-direction: column;
}
.popup-parametres-avances .label-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.popup-parametres-avances .field-description {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #99a1af;
}
.popup-parametres-avances .select-wrapper {
  position: relative;
  width: 111px;
}
.popup-parametres-avances .select-wrapper select {
  width: 100%;
  height: 36px;
  padding: 0 32px 0 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
  appearance: none;
  cursor: pointer;
}
.popup-parametres-avances .select-wrapper select:disabled {
  color: var(--md-color-neutrals-300);
  background: var(--md-color-neutrals-100);
}
.popup-parametres-avances .select-wrapper .icon-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  pointer-events: none;
}
.popup-parametres-avances .popup-tab-content input[type=number],
.popup-parametres-avances .popup-tab-content input[type=text] {
  width: 111px;
  height: 36px;
  padding: 12px 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
}
.popup-parametres-avances .popup-tab-content input[type=number]::placeholder,
.popup-parametres-avances .popup-tab-content input[type=text]::placeholder {
  color: var(--md-color-neutrals-300);
}
.popup-parametres-avances .popup-tab-content input[type=number]:disabled,
.popup-parametres-avances .popup-tab-content input[type=text]:disabled {
  color: var(--md-color-neutrals-300);
  background: var(--md-color-neutrals-100);
}
.popup-parametres-avances .div-field-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
.popup-parametres-avances .div-field-toggle label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #0a0a0a;
}
.popup-parametres-avances .div-field-toggle .label-group label {
  font-size: 16px;
  font-weight: 400;
}
.popup-parametres-avances .div-field-toggle .field-description {
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
}
.popup-parametres-avances .div-field-toggle.disabled {
  opacity: 0.5;
}
.popup-parametres-avances .div-field-toggle.disabled .input-toggle {
  pointer-events: none;
}
.popup-parametres-avances .input-toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--md-color-neutrals-250);
  border: none;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.popup-parametres-avances .input-toggle .toggle-knob {
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.popup-parametres-avances .input-toggle.active {
  background: var(--md-color-blue-300);
}
.popup-parametres-avances .input-toggle.active .toggle-knob {
  left: 18px;
}
.popup-parametres-avances .div-field-slider {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-md);
}
.popup-parametres-avances .div-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.popup-parametres-avances .div-slider-header label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #0a0a0a;
}
.popup-parametres-avances .slider-value {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #101828;
  white-space: nowrap;
  flex-shrink: 0;
}
.popup-parametres-avances .div-slider-track {
  position: relative;
  height: 16px;
  background: #ececf0;
  border-radius: 9999px;
}
.popup-parametres-avances .slider-progress {
  position: absolute;
  height: 100%;
  background: var(--md-color-blue-300);
  border-radius: 16px;
  left: 0;
}
.popup-parametres-avances .slider-thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border: 0.8px solid var(--md-color-blue-300);
  border-radius: 50%;
  top: 0;
  transform: translateX(-50%);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
  cursor: grab;
}
.popup-parametres-avances .div-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #6a7282;
}
.popup-parametres-avances .div-tva-taux-transfert {
  background: #fcfcfc;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 12px;
  padding: var(--md-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
}
.popup-parametres-avances .div-taux-columns {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
}
.popup-parametres-avances .div-taux-disponibles,
.popup-parametres-avances .div-taux-machine-priorises {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-md);
  width: 221px;
}
.popup-parametres-avances .column-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--md-color-neutrals-300);
  text-transform: capitalize;
}
.popup-parametres-avances .column-title span {
  text-transform: lowercase;
}
.popup-parametres-avances .column-title.active {
  color: var(--md-color-blue-300);
}
.popup-parametres-avances .table-taux-list {
  background: white;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 8px;
  height: 189px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.popup-parametres-avances .th-header {
  background: #fcfcfc;
  border-bottom: 0.8px solid var(--md-color-neutrals-100);
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-size: 11px;
  font-weight: 700;
  color: var(--md-color-neutrals-400);
  text-transform: uppercase;
  letter-spacing: -0.55px;
  height: 32px;
  display: flex;
  align-items: center;
}
.popup-parametres-avances .th-header.active {
  background: var(--md-color-blue-300);
  color: white;
}
.popup-parametres-avances .div-taux-rows {
  flex: 1;
  overflow-y: auto;
}
.popup-parametres-avances .tr-taux-row {
  padding: var(--md-spacing-md) var(--md-spacing-lg);
  font-size: 14px;
  font-weight: 700;
  color: var(--md-color-neutrals-400);
  border-bottom: 0.8px solid #f9fafb;
  cursor: pointer;
}
.popup-parametres-avances .tr-taux-row:hover {
  background: #f9fafb;
}
.popup-parametres-avances .tr-taux-row.selected {
  background: #e8e8ff;
}
.popup-parametres-avances .tr-taux-row.with-badge {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
  color: var(--md-color-blue-450);
}
.popup-parametres-avances .badge-priorite {
  width: 20px;
  height: 20px;
  background: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--md-color-neutrals-300);
}
.popup-parametres-avances .div-transfer-buttons-add,
.popup-parametres-avances .div-transfer-buttons-reorder {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 100%;
}
.popup-parametres-avances .button-icon {
  width: 40px;
  height: 40px;
  background: white;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.popup-parametres-avances .button-icon:hover {
  background: #f9fafb;
}
.popup-parametres-avances .button-icon.disabled {
  opacity: 0.5;
}
.popup-parametres-avances .button-icon svg {
  width: 16px;
  height: 16px;
  color: var(--md-color-neutrals-400);
}
.popup-parametres-avances .p-note-priorite {
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  line-height: 15.7px;
  color: var(--md-color-neutrals-300);
  text-align: center;
}
.popup-parametres-avances .div-fields-passwords {
  display: flex;
  gap: var(--md-spacing-lg);
  width: 100%;
}
.popup-parametres-avances .div-field-mdp {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xs);
}
.popup-parametres-avances .div-field-mdp label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.popup-parametres-avances .div-field-mdp.disabled {
  opacity: 0.5;
}
.popup-parametres-avances .div-field-mdp.disabled .button-modifier-mdp {
  pointer-events: none;
}
.popup-parametres-avances .input-mdp-wrapper {
  display: flex;
  align-items: center;
  height: 44px;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  padding: 4px;
  gap: 4px;
}
.popup-parametres-avances .input-mdp {
  flex: 1;
  min-width: 0;
  height: 36px;
  border: none;
  background: transparent;
  font-family: var(--md-font-family);
  font-size: 14px;
  color: #0a0a0a;
  padding: 0 8px 0 12px;
  outline: none;
  box-shadow: none;
}
.popup-parametres-avances .input-mdp:focus {
  border: none;
  outline: none;
  box-shadow: none;
}
.popup-parametres-avances .button-modifier-mdp {
  flex-shrink: 0;
  height: 36px;
  padding: 8px 16px;
  font-size: 14px;
  white-space: nowrap;
}
.popup-parametres-avances .div-field-teamviewer {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: var(--md-spacing-lg);
  gap: var(--md-spacing-lg);
}
.popup-parametres-avances .div-field-teamviewer label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
  white-space: nowrap;
}
.popup-parametres-avances .input-teamviewer {
  flex: 1;
  height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
}
.popup-parametres-avances .input-teamviewer::placeholder {
  color: var(--md-color-neutrals-300);
}
.popup-parametres-avances .footer-popup-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 17px;
  border-top: 1px solid var(--md-color-neutrals-150);
  margin-top: var(--md-spacing-2xl);
}
.popup-parametres-avances .footer-popup-action .button-annuler {
  min-width: 88px;
}
.popup-parametres-avances .footer-popup-action .button-reinitialiser {
  min-width: 113px;
}
.popup-parametres-avances .footer-popup-action .button-enregistrer {
  min-width: 108px;
}
.popup-parametres-avances .div-buttons {
  display: flex;
  gap: var(--md-spacing-md);
}
.popup-parametres-avances .btn-primary {
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.popup-parametres-avances .btn-primary:hover {
  background: var(--md-color-blue-400);
}
.popup-parametres-avances .btn-primary.disabled, .popup-parametres-avances .btn-primary:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.popup-parametres-avances .btn-primary-small {
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.popup-parametres-avances .btn-outline {
  background: transparent;
  color: var(--md-color-blue-450);
  border: 1px solid var(--md-color-blue-400);
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.4s;
}
.popup-parametres-avances .btn-outline:hover {
  border: 1px solid var(--md-color-green-200);
  color: var(--md-color-green-200);
}
.popup-parametres-avances .btn-green {
  background: var(--md-color-green-200);
  color: var(--md-color-green-450);
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.popup-parametres-avances .btn-green:hover {
  background: #56a87a;
}
.popup-parametres-avances .btn-green.disabled, .popup-parametres-avances .btn-green:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.popup-parametres-avances .btn-outline.disabled,
.popup-parametres-avances .btn-outline:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.popup-parametres-avances .btn-deactivated {
  background: var(--md-color-neutrals-300);
  color: var(--md-color-neutrals-50);
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
}
.popup-parametres-avances .btn-red {
  background: var(--md-color-red-200);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.popup-parametres-avances .btn-red:hover {
  background: #a83530;
}
.popup-parametres-avances .footer-popup-action .button-reinitialiser-cnc {
  min-width: 113px;
  margin-left: auto;
  margin-right: var(--md-spacing-md);
}
.popup-parametres-avances .tab-cnc {
  --cnc-accent: var(--md-color-blue-300);
  --cnc-accent-soft: #f5f4fa;
  --cnc-border: var(--md-color-neutrals-150);
  --cnc-text-muted: var(--md-color-neutrals-350);
  --cnc-text-strong: var(--md-color-blue-500);
  /* Service Card (toggle global) */
  /* Toggle (composant dedie) */
  /* Form (peut etre masque) */
  /* Field generique */
  /* Boutons jours */
  /* Conteneur des modes horaires */
  /* Mode identique : liste lignes "lecture/edition" */
  /* Mode personnalise : sous-blocs par jour */
  /* Sliders Click & Collect */
}
.popup-parametres-avances .tab-cnc__service-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-spacing-lg);
  padding: var(--md-spacing-lg);
  border: 1px solid var(--cnc-accent);
  background: var(--cnc-accent-soft);
  border-radius: 6px;
}
.popup-parametres-avances .tab-cnc__service-info {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xs);
  flex: 1;
}
.popup-parametres-avances .tab-cnc__service-title {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-sm);
}
.popup-parametres-avances .tab-cnc__service-title h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--cnc-text-strong);
  margin: 0;
}
.popup-parametres-avances .tab-cnc__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--md-color-green-200);
  display: inline-block;
}
.popup-parametres-avances .tab-cnc__service-card.is-off {
  background: rgba(193, 64, 57, 0.1);
  border-color: var(--md-color-red-200);
  border-radius: 12px;
}
.popup-parametres-avances .tab-cnc__service-card.is-off .tab-cnc__status-dot {
  background: var(--md-color-red-200);
}
.popup-parametres-avances .tab-cnc__service-card.is-off .tab-cnc__service-title h3 {
  color: #91302b;
  font-size: 16px;
}
.popup-parametres-avances .tab-cnc__service-desc {
  font-size: 12px;
  line-height: 16px;
  color: var(--cnc-text-muted);
  margin: 0;
}
.popup-parametres-avances .tab-cnc__toggle {
  position: relative;
  width: 32px;
  height: 18px;
  background: var(--md-color-neutrals-300);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.popup-parametres-avances .tab-cnc__toggle.active {
  background: var(--cnc-accent);
}
.popup-parametres-avances .tab-cnc__toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  transition: left 0.2s;
}
.popup-parametres-avances .tab-cnc__toggle.active .popup-parametres-avances .tab-cnc__toggle-knob {
  left: 16px;
}
.popup-parametres-avances .tab-cnc__form {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
  margin-top: var(--md-spacing-lg);
}
.popup-parametres-avances .tab-cnc__form.hidden {
  display: none;
}
.popup-parametres-avances .tab-cnc__field {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
}
.popup-parametres-avances .tab-cnc__field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-spacing-md);
}
.popup-parametres-avances .tab-cnc__field-header label {
  font-size: 14px;
  font-weight: 600;
  color: var(--cnc-text-strong);
}
.popup-parametres-avances .tab-cnc__field-header--with-value .tab-cnc__slider-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--cnc-text-strong);
}
.popup-parametres-avances .tab-cnc__field-desc {
  font-size: 12px;
  line-height: 16px;
  color: var(--cnc-text-muted);
  margin: 0;
}
.popup-parametres-avances .tab-cnc__days {
  display: flex;
  gap: var(--md-spacing-sm);
  flex-wrap: wrap;
  margin-top: var(--md-spacing-xs);
}
.popup-parametres-avances .tab-cnc__day-btn {
  min-width: 44px;
  height: 38px;
  padding: 0 var(--md-spacing-sm);
  border: 1px solid var(--cnc-border);
  background: white;
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--cnc-text-strong);
  cursor: pointer;
  transition: all 0.15s;
}
.popup-parametres-avances .tab-cnc__day-btn:hover {
  border-color: var(--cnc-accent);
}
.popup-parametres-avances .tab-cnc__day-btn.active {
  background: var(--cnc-accent);
  border-color: var(--cnc-accent);
  color: white;
}
.popup-parametres-avances .tab-cnc__hours-container {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-md);
}
.popup-parametres-avances .tab-cnc__mode-card {
  border: 1px solid var(--cnc-border);
  border-radius: 6px;
  padding: var(--md-spacing-lg);
  background: white;
  cursor: pointer;
  transition: all 0.15s;
}
.popup-parametres-avances .tab-cnc__mode-card.active {
  border-color: var(--cnc-accent);
  background: var(--cnc-accent-soft);
}
.popup-parametres-avances .tab-cnc__mode-header {
  display: flex;
  align-items: flex-start;
  gap: var(--md-spacing-md);
}
.popup-parametres-avances .tab-cnc__radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--md-color-neutrals-300);
  flex-shrink: 0;
  position: relative;
  margin-top: 2px;
  transition: border-color 0.15s;
}
.popup-parametres-avances .tab-cnc__radio.active {
  border-color: var(--cnc-accent);
}
.popup-parametres-avances .tab-cnc__radio.active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cnc-accent);
}
.popup-parametres-avances .tab-cnc__mode-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.popup-parametres-avances .tab-cnc__mode-text h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--cnc-text-strong);
  margin: 0;
}
.popup-parametres-avances .tab-cnc__mode-text p {
  font-size: 12px;
  line-height: 16px;
  color: var(--cnc-text-muted);
  margin: 0;
}
.popup-parametres-avances .tab-cnc__mode-body {
  margin-top: var(--md-spacing-md);
  padding: var(--md-spacing-md);
  background: white;
  border: 1px solid var(--cnc-border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-md);
}
.popup-parametres-avances .tab-cnc__mode-body.hidden {
  display: none;
}
.popup-parametres-avances .tab-cnc__identical-list {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
}
.popup-parametres-avances .tab-cnc__identical-list:empty {
  display: none;
}
.popup-parametres-avances .tab-cnc__hour-row {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-sm);
  padding: var(--md-spacing-sm) var(--md-spacing-md);
  border: 1px solid var(--cnc-border);
  border-radius: 4px;
  background: white;
}
.popup-parametres-avances .tab-cnc__hour-display {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--cnc-text-strong);
}
.popup-parametres-avances .tab-cnc__hour-select {
  flex: 1;
  height: 32px;
  padding: 0 var(--md-spacing-sm);
  border: 1px solid var(--cnc-border);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--cnc-text-strong);
  background: white;
  cursor: pointer;
}
.popup-parametres-avances .tab-cnc__icon-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--cnc-accent);
  transition: background 0.15s;
}
.popup-parametres-avances .tab-cnc__icon-btn svg {
  width: 16px;
  height: 16px;
}
.popup-parametres-avances .tab-cnc__icon-btn:hover {
  background: var(--cnc-accent-soft);
}
.popup-parametres-avances .tab-cnc__icon-btn--danger {
  color: var(--md-color-red-200);
}
.popup-parametres-avances .tab-cnc__icon-btn--danger:hover {
  background: rgba(193, 64, 57, 0.1);
}
.popup-parametres-avances .tab-cnc__identical-add {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
}
.popup-parametres-avances .tab-cnc__add-hour-btn {
  height: 38px;
  padding: 0 var(--md-spacing-lg);
  background: var(--cnc-accent);
  color: white;
  border: none;
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.popup-parametres-avances .tab-cnc__add-hour-btn:hover {
  background: var(--md-color-blue-400);
}
.popup-parametres-avances .tab-cnc__custom-days {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-md);
}
.popup-parametres-avances .tab-cnc__day-card {
  border: 1px solid var(--cnc-border);
  border-radius: 6px;
  padding: var(--md-spacing-md);
  background: white;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
}
.popup-parametres-avances .tab-cnc__day-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-spacing-md);
}
.popup-parametres-avances .tab-cnc__day-card-header h5 {
  font-size: 14px;
  font-weight: 600;
  color: var(--cnc-text-strong);
  margin: 0;
}
.popup-parametres-avances .tab-cnc__add-hour-day {
  margin-left: auto;
  height: 32px;
  padding: 0 var(--md-spacing-md);
  background: white;
  color: var(--cnc-text-strong);
  border: 1px solid var(--cnc-border);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.popup-parametres-avances .tab-cnc__add-hour-day:hover {
  border-color: var(--cnc-accent);
  color: var(--cnc-accent);
}
.popup-parametres-avances .tab-cnc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-spacing-sm);
  min-height: 32px;
  align-items: center;
}
.popup-parametres-avances .tab-cnc__chips:empty::before {
  content: "Aucun horaire";
  font-size: 12px;
  color: var(--cnc-text-muted);
  font-style: italic;
}
.popup-parametres-avances .tab-cnc__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--md-spacing-xs);
  padding: var(--md-spacing-xs) var(--md-spacing-sm);
  background: var(--cnc-accent-soft);
  border: 1px solid var(--cnc-accent);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cnc-accent);
}
.popup-parametres-avances .tab-cnc__chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cnc-accent);
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  font-weight: 700;
}
.popup-parametres-avances .tab-cnc__chip button:hover {
  color: var(--md-color-red-200);
}
.popup-parametres-avances .tab-cnc__add-day-btn {
  align-self: flex-end;
  height: 38px;
  padding: 0 var(--md-spacing-lg);
  background: var(--cnc-accent);
  color: white;
  border: none;
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.popup-parametres-avances .tab-cnc__add-day-btn:hover {
  background: var(--md-color-blue-400);
}
.popup-parametres-avances .tab-cnc__add-day-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.popup-parametres-avances .tab-cnc__slider-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xs);
  margin-top: var(--md-spacing-xs);
}
.popup-parametres-avances .tab-cnc__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;
  border-radius: 999px;
  background: var(--md-color-neutrals-150);
  outline: none;
  cursor: pointer;
}
.popup-parametres-avances .tab-cnc__slider::-webkit-slider-runnable-track {
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--cnc-accent) 0%, var(--cnc-accent) var(--cnc-fill, 0%), var(--md-color-neutrals-150) var(--cnc-fill, 0%), var(--md-color-neutrals-150) 100%);
}
.popup-parametres-avances .tab-cnc__slider::-moz-range-track {
  height: 16px;
  border-radius: 999px;
  background: var(--md-color-neutrals-150);
}
.popup-parametres-avances .tab-cnc__slider::-moz-range-progress {
  height: 16px;
  border-radius: 999px;
  background: var(--cnc-accent);
}
.popup-parametres-avances .tab-cnc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--cnc-accent);
  cursor: pointer;
  margin-top: -1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.popup-parametres-avances .tab-cnc__slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--cnc-accent);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.popup-parametres-avances .tab-cnc__slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 400;
  color: var(--cnc-text-muted);
}
@media (max-width: 768px) {
  .popup-parametres-avances {
    width: 95%;
    padding: var(--md-spacing-lg);
  }
  .popup-parametres-avances .div-taux-columns {
    flex-direction: column;
  }
  .popup-parametres-avances .div-taux-disponibles,
  .popup-parametres-avances .div-taux-machine-priorises {
    width: 100%;
  }
  .popup-parametres-avances .div-transfer-buttons-add,
  .popup-parametres-avances .div-transfer-buttons-reorder {
    flex-direction: row;
    width: 100%;
    height: auto;
  }
}
@media (max-width: 719px) {
  .popup-parametres-avances {
    /* Fullscreen */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    transform: none;
    border-radius: 0;
    padding: 0;
    /* Structure flex pour footer fixe */
    display: flex;
    flex-direction: column;
    /* Tableaux TVA : garder côte à côte */
  }
  .popup-parametres-avances .popup-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--md-color-neutrals-100);
    flex-shrink: 0;
  }
  .popup-parametres-avances .section-popup-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .popup-parametres-avances .section-popup-body::-webkit-scrollbar {
    display: none;
  }
  .popup-parametres-avances .div-popup-content h2 {
    font-size: 18px;
  }
  .popup-parametres-avances .nav-popup-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .popup-parametres-avances .nav-popup-tabs::-webkit-scrollbar {
    display: none;
  }
  .popup-parametres-avances .li-tab-popup {
    flex-shrink: 0;
    font-size: 12px;
    padding: var(--md-spacing-sm);
    white-space: nowrap;
  }
  .popup-parametres-avances .popup-tab-content {
    margin-top: var(--md-spacing-lg);
  }
  .popup-parametres-avances .div-field-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-sm);
  }
  .popup-parametres-avances .div-field-row.with-description {
    align-items: flex-start;
  }
  .popup-parametres-avances .select-wrapper {
    width: 100%;
  }
  .popup-parametres-avances .select-wrapper select {
    width: 100%;
  }
  .popup-parametres-avances .popup-tab-content input[type=number],
  .popup-parametres-avances .popup-tab-content input[type=text] {
    width: 100%;
  }
  .popup-parametres-avances .div-fields-passwords {
    flex-direction: column;
  }
  .popup-parametres-avances .div-field-teamviewer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-sm);
  }
  .popup-parametres-avances .div-taux-columns {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--md-spacing-sm);
  }
  .popup-parametres-avances .div-taux-disponibles,
  .popup-parametres-avances .div-taux-machine-priorises {
    width: auto;
    flex: 1;
    min-width: 0;
  }
  .popup-parametres-avances .div-transfer-buttons-add,
  .popup-parametres-avances .div-transfer-buttons-reorder {
    flex-direction: column;
    width: auto;
    min-width: 32px;
  }
  .popup-parametres-avances .button-icon {
    width: 32px;
    height: 32px;
  }
  .popup-parametres-avances .table-taux-list {
    height: 150px;
  }
  .popup-parametres-avances .th-header {
    font-size: 9px;
    padding: var(--md-spacing-xs) var(--md-spacing-sm);
  }
  .popup-parametres-avances .tr-taux-row {
    font-size: 12px;
    padding: var(--md-spacing-sm);
  }
  .popup-parametres-avances .column-title {
    font-size: 10px;
  }
  .popup-parametres-avances .input-teamviewer {
    width: 100%;
  }
  .popup-parametres-avances .footer-popup-action {
    flex-shrink: 0;
    padding: 16px 20px;
    margin-top: auto;
    border-top: 1px solid var(--md-color-neutrals-150);
    background-color: var(--md-color-neutrals-50);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--md-spacing-md);
    /* Annuler + Reinitialiser-cnc cote-a-cote a 50/50.
       Niche sous .footer-popup-action pour egaler la specificite
       de la regle desktop (.footer-popup-action .button-reinitialiser-cnc). */
    /* Enregistrer occupe sa propre ligne en pleine largeur */
  }
  .popup-parametres-avances .footer-popup-action .button-annuler,
  .popup-parametres-avances .footer-popup-action .button-reinitialiser,
  .popup-parametres-avances .footer-popup-action .button-reinitialiser-cnc {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    width: auto;
    margin: 0;
  }
  .popup-parametres-avances .footer-popup-action .button-enregistrer {
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
  }
  .popup-parametres-avances .div-buttons {
    width: 100%;
    flex-direction: column;
  }
  .popup-parametres-avances .div-buttons button {
    width: 100%;
  }
}

/* ===========================================
   Popup Confirmer Suppression
   =========================================== */
.popup-confirmer-suppression {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 8px;
  padding: 24px;
  z-index: 101;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 360px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  /* Responsive Mobile - Popup Suppression */
}
.popup-confirmer-suppression.hidden {
  display: none;
}
.popup-confirmer-suppression .popup-header {
  display: flex;
  justify-content: flex-end;
}
.popup-confirmer-suppression .button-fermer-modal {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1e1e1e;
}
.popup-confirmer-suppression .button-fermer-modal svg {
  width: 10px;
  height: 10px;
}
.popup-confirmer-suppression .button-fermer-modal:hover {
  opacity: 0.7;
}
.popup-confirmer-suppression .div-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.popup-confirmer-suppression .modal-question {
  font-family: "Open Sans", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #3d3d3d;
  text-align: center;
  margin: 0;
  max-width: 240px;
}
.popup-confirmer-suppression .div-modal-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}
.popup-confirmer-suppression .div-modal-actions button {
  flex: 1;
  padding: 8px 16px;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.popup-confirmer-suppression .div-modal-actions .button-conserver-machine {
  background: #262262;
  color: white;
}
.popup-confirmer-suppression .div-modal-actions .button-conserver-machine:hover {
  background: #1b1846;
}
.popup-confirmer-suppression .div-modal-actions .button-supprimer-confirmer {
  background: #c14039;
  color: white;
}
.popup-confirmer-suppression .div-modal-actions .button-supprimer-confirmer:hover {
  background: #a83530;
}
@media (max-width: 719px) {
  .popup-confirmer-suppression {
    min-width: unset;
    width: calc(100% - 40px);
    margin: 0 20px;
  }
  .popup-confirmer-suppression .div-modal-actions {
    flex-direction: column;
  }
  .popup-confirmer-suppression .div-modal-actions button {
    width: 100%;
  }
}

/* ===========================================
   Popup Confirmer Click & Collect Indisponible
   =========================================== */
/* Backdrop dedie : la popup CnC-off s'ouvre par-dessus la popup principale
   (z-index 101) ; l'overlay global (z-index 100) est donc masque par la popup
   principale. Ce backdrop dedie monte au-dessus de la popup principale pour
   l'estomper sans toucher aux autres pages. */
.popup-cnc-off-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 102;
}
.popup-cnc-off-backdrop.hidden {
  display: none;
}

.popup-confirmer-cnc-off {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 8px;
  padding: 24px;
  z-index: 103;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 460px;
  max-width: calc(100% - 40px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.popup-confirmer-cnc-off.hidden {
  display: none;
}
.popup-confirmer-cnc-off .popup-header {
  display: flex;
  justify-content: flex-end;
}
.popup-confirmer-cnc-off .button-fermer-modal {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1e1e1e;
}
.popup-confirmer-cnc-off .button-fermer-modal svg {
  width: 10px;
  height: 10px;
}
.popup-confirmer-cnc-off .button-fermer-modal:hover {
  opacity: 0.7;
}
.popup-confirmer-cnc-off .div-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.popup-confirmer-cnc-off .modal-question {
  font-family: "Open Sans", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #110f2c;
  text-align: left;
  margin: 0;
}
.popup-confirmer-cnc-off .modal-description {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  line-height: 19px;
  color: #5e5e5e;
  text-align: left;
  margin: 0;
}
.popup-confirmer-cnc-off .div-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.popup-confirmer-cnc-off .div-modal-actions button {
  padding: 8px 16px;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.popup-confirmer-cnc-off .div-modal-actions .button-cnc-off-cancel {
  background: transparent;
  color: #1b1846;
  border: 1px solid #1b1846;
}
.popup-confirmer-cnc-off .div-modal-actions .button-cnc-off-cancel:hover {
  opacity: 0.8;
}
.popup-confirmer-cnc-off .div-modal-actions .button-cnc-off-confirm {
  background: #262262;
  color: white;
  min-width: 170px;
}
.popup-confirmer-cnc-off .div-modal-actions .button-cnc-off-confirm:hover {
  background: #1b1846;
}
@media (max-width: 719px) {
  .popup-confirmer-cnc-off {
    width: calc(100% - 40px);
  }
  .popup-confirmer-cnc-off .div-modal-actions {
    flex-direction: column;
  }
  .popup-confirmer-cnc-off .div-modal-actions button {
    width: 100%;
  }
}

/* ========================================
   Page Horaires - Styles
   ======================================== */
.page-machine-horaires {
  /* Variables locales (identiques a machine-detail) */
  --md-color-blue-500: #110f2c;
  --md-color-blue-450: #161338;
  --md-color-blue-400: #1b1846;
  --md-color-blue-300: #262262;
  --md-color-blue-150: #a2a0bb;
  --md-color-neutrals-500: #1e1e1e;
  --md-color-neutrals-450: #3d3d3d;
  --md-color-neutrals-400: #5e5e5e;
  --md-color-neutrals-350: #828282;
  --md-color-neutrals-300: #a7a7a7;
  --md-color-neutrals-250: #b2b2b2;
  --md-color-neutrals-150: #ddd;
  --md-color-neutrals-100: #f1f1f1;
  --md-color-neutrals-50: #fff;
  --md-color-green-450: #213e2d;
  --md-color-green-400: #3b7051;
  --md-color-green-200: #62ba87;
  --md-color-red-200: #c14039;
  --md-font-family: "Open Sans", sans-serif;
  --md-spacing-xs: 4px;
  --md-spacing-sm: 8px;
  --md-spacing-md: 12px;
  --md-spacing-lg: 16px;
  --md-spacing-xl: 20px;
  --md-spacing-2xl: 24px;
  --md-spacing-3xl: 28px;
  --md-spacing-4xl: 32px;
  /* Utilitaires */
  /* ========================================
     Layout Principal
     ======================================== */
  display: flex;
  min-height: 100vh;
  width: 100%;
  /* Sidebar Placeholder (element ignore) */
  /* Main Content */
  /* ========================================
     Header Page Top (copie de machine-detail)
     ======================================== */
  /* ========================================
     Buttons (copie de machine-detail)
     ======================================== */
  /* ========================================
     Navigation Tabs Bar (copie de machine-detail)
     ======================================== */
  /* ========================================
     Section Horaires
     ======================================== */
  /* Liste des jours */
  /* Section Horaires (ligne jour) */
  /* Nom du jour */
  /* Toggle (style harmonisé avec page detail) */
  /* Badge Statut */
  /* Plage Horaire */
  /* Bouton Ajouter Plage */
  /* Input heure (mode edition) */
  /* Boutons Selection */
  /* ========================================
     Delai Lumiere
     ======================================== */
  /* =========================================
     Responsive Tablette (max-width: 1200px)
     =========================================== */
  /* =========================================
     Responsive Mobile Large (max-width: 768px)
     =========================================== */
  /* =========================================
     Responsive Mobile (max-width: 719px)
     Pattern identique aux pages Detail Machine
     =========================================== */
  /* ========================================
     Etats pour Phase 2
     ======================================== */
  /* Jour ferme/inactif */
  /* ========================================
     Toast Notifications
     ======================================== */
}
.page-machine-horaires .hidden {
  display: none !important;
}
.page-machine-horaires .aside-sidebar-placeholder {
  display: none;
}
.page-machine-horaires .section-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
  padding: var(--md-spacing-3xl);
  padding-bottom: var(--md-spacing-xl);
  overflow: hidden;
  background: linear-gradient(114.6deg, rgb(248, 249, 250) 0%, rgb(245, 244, 255) 100%);
  position: relative;
  height: 100vh;
}
.page-machine-horaires .header-page-top {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
  padding-bottom: var(--md-spacing-xl);
  border-bottom: 1px solid var(--md-color-neutrals-100);
}
.page-machine-horaires .button-retour {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-xs);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
}
.page-machine-horaires .button-retour .icon-arrow-back {
  width: 16px;
  height: 16px;
}
.page-machine-horaires .div-machine-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-spacing-4xl);
}
.page-machine-horaires .div-machine-info {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
  flex: 1;
}
.page-machine-horaires .div-machine-identite {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
}
.page-machine-horaires .machine-name {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--md-color-blue-450);
}
.page-machine-horaires .span-badge-version {
  padding: 4.8px 8.8px;
  border: 0.8px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  color: #0a0a0a;
}
.page-machine-horaires .activation-badge {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-sm);
  padding: var(--md-spacing-sm) var(--md-spacing-md);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
.page-machine-horaires .activation-badge--active {
  background: rgba(98, 186, 135, 0.1);
  color: var(--md-color-green-400);
}
.page-machine-horaires .activation-badge--active .status-icon {
  background: var(--md-color-green-200);
}
.page-machine-horaires .activation-badge--inactive {
  background: rgba(193, 64, 57, 0.1);
  color: var(--md-color-red-200);
}
.page-machine-horaires .activation-badge--inactive .status-icon {
  background: var(--md-color-red-200);
}
.page-machine-horaires .activation-badge--virtuelle {
  background: rgba(38, 34, 98, 0.1);
  color: var(--md-color-blue-300);
}
.page-machine-horaires .activation-badge--virtuelle .status-icon {
  background: var(--md-color-blue-300);
}
.page-machine-horaires .activation-badge .status-icon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.page-machine-horaires .last-sync {
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  color: var(--md-color-neutrals-350);
}
.page-machine-horaires .div-localisation {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-lg);
}
.page-machine-horaires .machine-number {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--md-color-neutrals-400);
}
.page-machine-horaires .location-info {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-xs);
}
.page-machine-horaires .location-info .icon-pin {
  width: 16px;
  height: 16px;
}
.page-machine-horaires .location-info span {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--md-color-neutrals-350);
}
.page-machine-horaires .btn-primary {
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.page-machine-horaires .btn-primary:hover {
  background: var(--md-color-blue-400);
}
.page-machine-horaires .nav-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-spacing-lg);
}
.page-machine-horaires .ul-tabs-list {
  display: flex;
  align-items: center;
  list-style: none;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  padding: 0 var(--md-spacing-xs);
  margin: 0;
}
.page-machine-horaires .li-tab {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-150);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.page-machine-horaires .li-tab a {
  display: block;
  padding: var(--md-spacing-md);
  color: inherit;
  text-decoration: none;
}
.page-machine-horaires .li-tab:hover {
  color: var(--md-color-blue-300);
}
.page-machine-horaires .li-tab.active {
  color: var(--md-color-blue-300);
  border-bottom-color: var(--md-color-blue-300);
}
.page-machine-horaires .div-horaire-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: white;
  padding: 24px;
  border-radius: 4px;
  width: 100%;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  /* Scrollbar personnalisee */
}
.page-machine-horaires .div-horaire-content::-webkit-scrollbar {
  width: 6px;
}
.page-machine-horaires .div-horaire-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.page-machine-horaires .div-horaire-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
.page-machine-horaires .div-horaire-content::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}
.page-machine-horaires .section-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  color: #000;
}
.page-machine-horaires .horaires-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.page-machine-horaires .section-horaires {
  padding: 16px 0;
  border-bottom: 1px solid #f1f1f1;
}
.page-machine-horaires .section-horaires:first-child {
  padding-top: 0;
}
.page-machine-horaires .section-horaires:last-child {
  border-bottom: none;
}
.page-machine-horaires .div-horaires-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.page-machine-horaires .div-horaires-row-wrapper {
  display: flex;
  align-items: center;
  gap: 32px;
}
.page-machine-horaires .jour-name {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #101828;
  min-width: 73px;
}
.page-machine-horaires .div-toggle-track {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--md-color-neutrals-250);
  position: relative;
  cursor: pointer;
  border: none;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.page-machine-horaires .div-toggle-track.active {
  background: var(--md-color-blue-300);
}
.page-machine-horaires .div-toggle-track.active .div-toggle-thumb {
  left: 18px;
}
.page-machine-horaires .div-toggle-thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.page-machine-horaires .div-badge-statut {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  min-width: 91px;
}
.page-machine-horaires .div-badge-statut--actif {
  background: rgba(98, 186, 135, 0.1);
  color: #3b7051;
}
.page-machine-horaires .div-badge-statut--actif .badge-dot {
  width: 7px;
  height: 7px;
  background: #3b7051;
  border-radius: 50%;
}
.page-machine-horaires .div-badge-statut--inactif {
  background: #ddd;
  color: #828282;
}
.page-machine-horaires .div-badge-statut--inactif .badge-dot {
  width: 7px;
  height: 7px;
  background: #828282;
  border-radius: 50%;
}
.page-machine-horaires .div-plage-horaire {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
}
.page-machine-horaires .div-plage-horaire.editing {
  gap: 12px;
}
.page-machine-horaires .img-icon-clock {
  width: 16px;
  height: 16px;
}
.page-machine-horaires .heure-debut,
.page-machine-horaires .heure-fin {
  font-size: 16px;
  line-height: 24px;
  color: #101828;
}
.page-machine-horaires .heure-separateur {
  font-size: 16px;
  line-height: 24px;
  color: #99a1af;
}
.page-machine-horaires .section-buttons-action {
  display: flex;
  align-items: center;
}
.page-machine-horaires .button-ajouter-plage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  min-width: 152px;
  background: white;
  border: 1px solid #1b1846;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #161338;
  cursor: pointer;
  transition: 0.4s;
}
.page-machine-horaires .button-ajouter-plage:hover {
  border: 1px solid #62ba87;
  color: #62ba87;
}
.page-machine-horaires .button-ajouter-plage.btn-valider {
  background: #262262;
  color: white;
  border-color: #262262;
}
.page-machine-horaires .button-ajouter-plage.btn-valider:hover {
  background: #1b1846;
}
.page-machine-horaires .button-annuler-plage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  margin-left: 8px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #828282;
  cursor: pointer;
  transition: 0.4s;
}
.page-machine-horaires .button-annuler-plage:hover {
  border: 1px solid #62ba87;
  color: #62ba87;
}
.page-machine-horaires .input-heure {
  width: 120px;
  height: 36px;
  padding: 8px 12px;
  border: 1px solid #262262;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  color: #101828;
  background: white;
}
.page-machine-horaires .input-heure:focus {
  outline: none;
  border-color: #262262;
  box-shadow: 0 0 0 2px rgba(38, 34, 98, 0.1);
}
.page-machine-horaires .section-button-selection {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #f1f1f1;
}
.page-machine-horaires .button-tout-selectionner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: #262262;
  border: none;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}
.page-machine-horaires .button-tout-selectionner:hover {
  background: #1b1846;
}
.page-machine-horaires .button-tout-deselectionner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  color: #1e1e1e;
  cursor: pointer;
  transition: all 0.2s;
}
.page-machine-horaires .button-tout-deselectionner:hover {
  background: #f5f5f5;
}
.page-machine-horaires .div-field-delai-lumiere {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 16px;
  border-top: 1px solid #f1f1f1;
}
.page-machine-horaires .label-delai-lumiere {
  display: flex;
  flex-direction: column;
}
.page-machine-horaires .label-delai-lumiere label {
  font-weight: 600;
  font-size: 14px;
  color: #110f2c;
  margin-bottom: 4px;
}
.page-machine-horaires .label-legende {
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #99a1af;
}
.page-machine-horaires .label-legende p {
  margin: 0;
}
.page-machine-horaires .input-delai-lumiere {
  width: 111px;
  height: 36px;
  padding: 12px 16px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #110f2c;
}
.page-machine-horaires .input-delai-lumiere::placeholder {
  color: #a7a7a7;
}
.page-machine-horaires .input-delai-lumiere:focus {
  outline: none;
  border-color: #262262;
}
.page-machine-horaires .delai-lumiere-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-machine-horaires .button-enregistrer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  background: #62ba87;
  border: none;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: white;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.page-machine-horaires .button-enregistrer:hover {
  background: #4fa872;
}
@media (max-width: 1200px) {
  .page-machine-horaires .div-horaires-row-wrapper {
    gap: 16px;
  }
  .page-machine-horaires .div-machine-title-bar {
    gap: var(--md-spacing-lg);
  }
}
@media (max-width: 768px) {
  .page-machine-horaires .section-main-content {
    padding: var(--md-spacing-lg);
  }
  .page-machine-horaires .div-horaires-row-wrapper {
    flex-wrap: wrap;
    gap: 12px;
  }
  .page-machine-horaires .div-field-delai-lumiere {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-lg);
  }
  .page-machine-horaires .delai-lumiere-actions {
    width: 100%;
  }
  .page-machine-horaires .input-delai-lumiere {
    flex: 1;
  }
}
@media (max-width: 719px) {
  .page-machine-horaires {
    /* Bandeau fixe en haut avec titre "Horaires" */
    /* Espace pour le bandeau fixe */
    padding-top: 72px;
    overflow: hidden;
    height: 100svh;
    /* Ajustement du main-content (identique machine-detail) */
    /* Header page : afficher seulement si bouton paramètres avancés présent */
    /* Masquer les infos machine (déjà dans le bandeau) */
    /* Navigation tabs : scroll horizontal (identique machine-detail) */
    /* Contenu horaires scrollable */
    /* Section horaires : layout vertical */
    /* Boutons action */
    /* Délai lumière */
    /* Input heure */
    /* Toast en bas centré */
  }
  .page-machine-horaires::before {
    content: "Horaires";
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
    height: 72px;
    min-height: 72px;
    padding-left: 80px;
    padding-top: 8px;
    background: var(--md-color-neutrals-50);
    border-radius: 0 0 8px 8px;
    z-index: 3;
    font-family: var(--md-font-family);
    font-size: 20px;
    font-weight: 700;
    color: #262262;
    line-height: normal;
    box-sizing: border-box;
  }
  .page-machine-horaires .section-main-content {
    padding: var(--md-spacing-xl);
    height: calc(100svh - 72px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .page-machine-horaires .header-page-top {
    display: none;
  }
  .page-machine-horaires .header-page-top:has(.button-parametres-avances) {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    border-bottom: none;
    padding-bottom: 0;
    align-items: center;
    justify-content: space-between;
  }
  .page-machine-horaires .button-retour {
    display: flex;
  }
  .page-machine-horaires .div-machine-info {
    display: none;
  }
  .page-machine-horaires .div-machine-title-bar {
    width: auto;
  }
  .page-machine-horaires .button-parametres-avances {
    width: auto;
  }
  .page-machine-horaires .nav-tabs-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--md-spacing-md);
    flex-shrink: 0;
  }
  .page-machine-horaires .ul-tabs-list {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-machine-horaires .ul-tabs-list::-webkit-scrollbar {
    display: none;
  }
  .page-machine-horaires .li-tab {
    flex-shrink: 0;
    font-size: 12px;
  }
  .page-machine-horaires .li-tab a {
    padding: var(--md-spacing-sm) var(--md-spacing-md);
    white-space: nowrap;
  }
  .page-machine-horaires .div-horaire-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--md-spacing-lg);
    gap: var(--md-spacing-lg);
    min-height: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-machine-horaires .div-horaire-content::-webkit-scrollbar {
    display: none;
  }
  .page-machine-horaires .section-title {
    font-size: 14px;
  }
  .page-machine-horaires .section-horaires {
    padding: var(--md-spacing-md) 0;
  }
  .page-machine-horaires .div-horaires-hint {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-md);
  }
  .page-machine-horaires .div-horaires-row-wrapper {
    width: 100%;
    justify-content: space-between;
    gap: var(--md-spacing-sm);
  }
  .page-machine-horaires .jour-name {
    font-size: 14px;
    min-width: auto;
    flex: 1;
  }
  .page-machine-horaires .div-badge-statut {
    padding: 6px 10px;
    font-size: 10px;
    min-width: auto;
  }
  .page-machine-horaires .div-plage-horaire {
    width: 100%;
    justify-content: flex-start;
  }
  .page-machine-horaires .heure-debut,
  .page-machine-horaires .heure-fin,
  .page-machine-horaires .heure-separateur {
    font-size: 14px;
  }
  .page-machine-horaires .section-buttons-action {
    width: 100%;
  }
  .page-machine-horaires .button-ajouter-plage {
    width: 100%;
    min-width: auto;
    padding: 6px 12px;
    font-size: 12px;
  }
  .page-machine-horaires .button-annuler-plage {
    flex: 1;
    padding: 6px 12px;
    font-size: 12px;
  }
  .page-machine-horaires .section-button-selection {
    width: 100%;
    flex-direction: column;
    gap: var(--md-spacing-sm);
  }
  .page-machine-horaires .button-tout-selectionner,
  .page-machine-horaires .button-tout-deselectionner {
    width: 100%;
    padding: var(--md-spacing-sm) var(--md-spacing-md);
  }
  .page-machine-horaires .div-field-delai-lumiere {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-md);
    padding-top: var(--md-spacing-md);
  }
  .page-machine-horaires .label-delai-lumiere label {
    font-size: 12px;
  }
  .page-machine-horaires .label-legende {
    font-size: 10px;
    line-height: 14px;
  }
  .page-machine-horaires .delai-lumiere-actions {
    width: 100%;
    flex-direction: column;
    gap: var(--md-spacing-sm);
  }
  .page-machine-horaires .input-delai-lumiere {
    width: 100%;
  }
  .page-machine-horaires .button-enregistrer {
    width: 100%;
  }
  .page-machine-horaires .input-heure {
    width: 100%;
    max-width: 120px;
  }
  .page-machine-horaires .toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
  }
  .page-machine-horaires .toast {
    width: 100%;
  }
}
.page-machine-horaires .section-horaires.inactif {
  background: #f1f1f1;
  padding: 16px;
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
}
.page-machine-horaires .section-horaires.inactif .div-plage-horaire,
.page-machine-horaires .section-horaires.inactif .section-buttons-action {
  display: none;
}
.page-machine-horaires .section-horaires.inactif .div-toggle-track {
  background: var(--md-color-neutrals-250);
}
.page-machine-horaires .section-horaires.inactif .div-toggle-track .div-toggle-thumb {
  left: 2px;
}
.page-machine-horaires .section-horaires.inactif .div-badge-statut {
  background: #ddd;
  color: #828282;
}
.page-machine-horaires .section-horaires.inactif .div-badge-statut .badge-dot {
  background: #828282;
}
.page-machine-horaires .toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-machine-horaires .toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
  animation: toast-slide-in 0.3s ease-out;
}
.page-machine-horaires .toast.toast-fade-out {
  animation: toast-slide-out 0.3s ease-in forwards;
}
.page-machine-horaires .toast--info {
  border-left: 4px solid var(--md-color-blue-300);
}
.page-machine-horaires .toast--info .toast-icon {
  color: var(--md-color-blue-300);
}
.page-machine-horaires .toast--success {
  border-left: 4px solid var(--md-color-green-200);
}
.page-machine-horaires .toast--success .toast-icon {
  color: var(--md-color-green-200);
}
.page-machine-horaires .toast--error {
  border-left: 4px solid var(--md-color-red-200);
}
.page-machine-horaires .toast--error .toast-icon {
  color: var(--md-color-red-200);
}
@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
.page-machine-horaires .toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

/* ========================================
   Popup Overlay
   ======================================== */
.page-machine-horaires ~ .popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

/* ========================================
   Popup Parametres Avances (scope global)
   ======================================== */
.page-machine-horaires ~ .popup-parametres-avances {
  --md-color-blue-500: #110f2c;
  --md-color-blue-450: #161338;
  --md-color-blue-400: #1b1846;
  --md-color-blue-300: #262262;
  --md-color-blue-150: #a2a0bb;
  --md-color-neutrals-500: #1e1e1e;
  --md-color-neutrals-450: #3d3d3d;
  --md-color-neutrals-400: #5e5e5e;
  --md-color-neutrals-350: #828282;
  --md-color-neutrals-300: #a7a7a7;
  --md-color-neutrals-250: #b2b2b2;
  --md-color-neutrals-150: #ddd;
  --md-color-neutrals-100: #f1f1f1;
  --md-color-neutrals-50: #fff;
  --md-color-green-450: #213e2d;
  --md-color-green-400: #3b7051;
  --md-color-green-200: #62ba87;
  --md-color-red-200: #c14039;
  --md-font-family: "Open Sans", sans-serif;
  --md-spacing-xs: 4px;
  --md-spacing-sm: 8px;
  --md-spacing-md: 12px;
  --md-spacing-lg: 16px;
  --md-spacing-xl: 20px;
  --md-spacing-2xl: 24px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 659px;
  max-height: 90vh;
  background: white;
  border-radius: 4px;
  padding: var(--md-spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
  z-index: 101;
  overflow-y: auto;
  /* Popup Tabs */
  /* Popup Tab Content */
  /* Field Row */
  /* Select Wrapper */
  /* Input Number */
  /* Toggle */
  /* Slider */
  /* TVA Transfer */
  /* Transfer Buttons */
  /* Password Fields */
  /* TeamViewer Field */
  /* Popup Footer */
  /* Buttons */
  /* Responsive Popup - Tablette */
  /* Responsive Popup - Mobile Fullscreen */
}
.page-machine-horaires ~ .popup-parametres-avances .popup-header {
  display: flex;
  justify-content: flex-end;
}
.page-machine-horaires ~ .popup-parametres-avances .button-fermer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
}
.page-machine-horaires ~ .popup-parametres-avances .button-fermer svg {
  width: 10px;
  height: 10px;
}
.page-machine-horaires ~ .popup-parametres-avances .section-popup-body {
  display: flex;
  flex-direction: column;
}
.page-machine-horaires ~ .popup-parametres-avances .div-popup-content {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
}
.page-machine-horaires ~ .popup-parametres-avances .div-popup-content h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--md-color-blue-500);
}
.page-machine-horaires ~ .popup-parametres-avances .nav-popup-tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  padding: 0 var(--md-spacing-xs);
}
.page-machine-horaires ~ .popup-parametres-avances .li-tab-popup {
  padding: var(--md-spacing-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-150);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--md-font-family);
  transition: all 0.2s;
}
.page-machine-horaires ~ .popup-parametres-avances .li-tab-popup:hover {
  color: var(--md-color-blue-300);
}
.page-machine-horaires ~ .popup-parametres-avances .li-tab-popup.active {
  color: var(--md-color-blue-300);
  border-bottom-color: var(--md-color-blue-300);
}
.page-machine-horaires ~ .popup-parametres-avances .popup-tab-content {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
  margin-top: var(--md-spacing-2xl);
}
.page-machine-horaires ~ .popup-parametres-avances .div-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
}
.page-machine-horaires ~ .popup-parametres-avances .div-field-row label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-horaires ~ .popup-parametres-avances .div-field-row.with-description {
  align-items: flex-start;
}
.page-machine-horaires ~ .popup-parametres-avances .label-group {
  display: flex;
  flex-direction: column;
}
.page-machine-horaires ~ .popup-parametres-avances .label-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-horaires ~ .popup-parametres-avances .field-description {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #99a1af;
}
.page-machine-horaires ~ .popup-parametres-avances .select-wrapper {
  position: relative;
  width: 111px;
}
.page-machine-horaires ~ .popup-parametres-avances .select-wrapper select {
  width: 100%;
  height: 36px;
  padding: 0 32px 0 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
  appearance: none;
  cursor: pointer;
}
.page-machine-horaires ~ .popup-parametres-avances .select-wrapper select:disabled {
  color: var(--md-color-neutrals-300);
  background: var(--md-color-neutrals-100);
}
.page-machine-horaires ~ .popup-parametres-avances .select-wrapper .icon-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  pointer-events: none;
}
.page-machine-horaires ~ .popup-parametres-avances .popup-tab-content input[type=number],
.page-machine-horaires ~ .popup-parametres-avances .popup-tab-content input[type=text] {
  width: 111px;
  height: 36px;
  padding: 12px 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
}
.page-machine-horaires ~ .popup-parametres-avances .popup-tab-content input[type=number]::placeholder,
.page-machine-horaires ~ .popup-parametres-avances .popup-tab-content input[type=text]::placeholder {
  color: var(--md-color-neutrals-300);
}
.page-machine-horaires ~ .popup-parametres-avances .popup-tab-content input[type=number]:disabled,
.page-machine-horaires ~ .popup-parametres-avances .popup-tab-content input[type=text]:disabled {
  color: var(--md-color-neutrals-300);
  background: var(--md-color-neutrals-100);
}
.page-machine-horaires ~ .popup-parametres-avances .popup-tab-content input[type=number].input-error,
.page-machine-horaires ~ .popup-parametres-avances .popup-tab-content input[type=text].input-error {
  border-color: var(--md-color-red-200);
}
.page-machine-horaires ~ .popup-parametres-avances .div-field-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
.page-machine-horaires ~ .popup-parametres-avances .div-field-toggle label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #0a0a0a;
}
.page-machine-horaires ~ .popup-parametres-avances .div-field-toggle .label-group label {
  font-size: 16px;
  font-weight: 400;
}
.page-machine-horaires ~ .popup-parametres-avances .div-field-toggle .field-description {
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
}
.page-machine-horaires ~ .popup-parametres-avances .div-field-toggle.disabled {
  opacity: 0.5;
}
.page-machine-horaires ~ .popup-parametres-avances .div-field-toggle.disabled .input-toggle {
  pointer-events: none;
}
.page-machine-horaires ~ .popup-parametres-avances .input-toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--md-color-neutrals-250);
  border: none;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.page-machine-horaires ~ .popup-parametres-avances .input-toggle .toggle-knob {
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.page-machine-horaires ~ .popup-parametres-avances .input-toggle.active {
  background: var(--md-color-blue-300);
}
.page-machine-horaires ~ .popup-parametres-avances .input-toggle.active .toggle-knob {
  left: 18px;
}
.page-machine-horaires ~ .popup-parametres-avances .div-field-slider {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-md);
}
.page-machine-horaires ~ .popup-parametres-avances .div-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-machine-horaires ~ .popup-parametres-avances .div-slider-header label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #0a0a0a;
}
.page-machine-horaires ~ .popup-parametres-avances .slider-value {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #101828;
  white-space: nowrap;
  flex-shrink: 0;
}
.page-machine-horaires ~ .popup-parametres-avances .div-slider-track {
  position: relative;
  height: 16px;
  background: #ececf0;
  border-radius: 9999px;
}
.page-machine-horaires ~ .popup-parametres-avances .slider-progress {
  position: absolute;
  height: 100%;
  background: var(--md-color-blue-300);
  border-radius: 16px;
  left: 0;
}
.page-machine-horaires ~ .popup-parametres-avances .slider-thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border: 0.8px solid var(--md-color-blue-300);
  border-radius: 50%;
  top: 0;
  transform: translateX(-50%);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
  cursor: grab;
}
.page-machine-horaires ~ .popup-parametres-avances .div-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #6a7282;
}
.page-machine-horaires ~ .popup-parametres-avances .div-tva-taux-transfert {
  background: #fcfcfc;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 12px;
  padding: var(--md-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
}
.page-machine-horaires ~ .popup-parametres-avances .div-taux-columns {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
}
.page-machine-horaires ~ .popup-parametres-avances .div-taux-disponibles,
.page-machine-horaires ~ .popup-parametres-avances .div-taux-machine-priorises {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-md);
  width: 221px;
}
.page-machine-horaires ~ .popup-parametres-avances .column-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--md-color-neutrals-300);
  text-transform: capitalize;
}
.page-machine-horaires ~ .popup-parametres-avances .column-title span {
  text-transform: lowercase;
}
.page-machine-horaires ~ .popup-parametres-avances .column-title.active {
  color: var(--md-color-blue-300);
}
.page-machine-horaires ~ .popup-parametres-avances .table-taux-list {
  background: white;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 8px;
  height: 189px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-machine-horaires ~ .popup-parametres-avances .th-header {
  background: #fcfcfc;
  border-bottom: 0.8px solid var(--md-color-neutrals-100);
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-size: 11px;
  font-weight: 700;
  color: var(--md-color-neutrals-400);
  text-transform: uppercase;
  letter-spacing: -0.55px;
  height: 32px;
  display: flex;
  align-items: center;
}
.page-machine-horaires ~ .popup-parametres-avances .th-header.active {
  background: var(--md-color-blue-300);
  color: white;
}
.page-machine-horaires ~ .popup-parametres-avances .div-taux-rows {
  flex: 1;
  overflow-y: auto;
}
.page-machine-horaires ~ .popup-parametres-avances .tr-taux-row {
  padding: var(--md-spacing-md) var(--md-spacing-lg);
  font-size: 14px;
  font-weight: 700;
  color: var(--md-color-neutrals-400);
  border-bottom: 0.8px solid #f9fafb;
  cursor: pointer;
}
.page-machine-horaires ~ .popup-parametres-avances .tr-taux-row:hover {
  background: #f9fafb;
}
.page-machine-horaires ~ .popup-parametres-avances .tr-taux-row.selected {
  background: #e8e8ff;
}
.page-machine-horaires ~ .popup-parametres-avances .tr-taux-row.with-badge {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
  color: var(--md-color-blue-450);
}
.page-machine-horaires ~ .popup-parametres-avances .badge-priorite {
  width: 20px;
  height: 20px;
  background: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--md-color-neutrals-300);
}
.page-machine-horaires ~ .popup-parametres-avances .div-transfer-buttons-add,
.page-machine-horaires ~ .popup-parametres-avances .div-transfer-buttons-reorder {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 100%;
}
.page-machine-horaires ~ .popup-parametres-avances .button-icon {
  width: 40px;
  height: 40px;
  background: white;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.page-machine-horaires ~ .popup-parametres-avances .button-icon:hover {
  background: #f9fafb;
}
.page-machine-horaires ~ .popup-parametres-avances .button-icon.disabled {
  opacity: 0.5;
}
.page-machine-horaires ~ .popup-parametres-avances .button-icon svg {
  width: 16px;
  height: 16px;
  color: var(--md-color-neutrals-400);
}
.page-machine-horaires ~ .popup-parametres-avances .p-note-priorite {
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  line-height: 15.7px;
  color: var(--md-color-neutrals-300);
  text-align: center;
}
.page-machine-horaires ~ .popup-parametres-avances .div-fields-passwords {
  display: flex;
  gap: var(--md-spacing-lg);
  width: 100%;
}
.page-machine-horaires ~ .popup-parametres-avances .div-field-mdp {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xs);
}
.page-machine-horaires ~ .popup-parametres-avances .div-field-mdp label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-horaires ~ .popup-parametres-avances .div-field-mdp.disabled {
  opacity: 0.5;
}
.page-machine-horaires ~ .popup-parametres-avances .div-field-mdp.disabled .button-modifier-mdp {
  pointer-events: none;
}
.page-machine-horaires ~ .popup-parametres-avances .input-mdp-wrapper {
  display: flex;
  align-items: center;
  height: 44px;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  padding: 4px;
  gap: 4px;
}
.page-machine-horaires ~ .popup-parametres-avances .input-mdp {
  flex: 1;
  min-width: 0;
  height: 36px;
  border: none;
  background: transparent;
  font-family: var(--md-font-family);
  font-size: 14px;
  color: #0a0a0a;
  padding: 0 8px 0 12px;
  outline: none;
  box-shadow: none;
}
.page-machine-horaires ~ .popup-parametres-avances .input-mdp:focus {
  border: none;
  outline: none;
  box-shadow: none;
}
.page-machine-horaires ~ .popup-parametres-avances .input-mdp.input-error {
  color: var(--md-color-red-200);
}
.page-machine-horaires ~ .popup-parametres-avances .button-modifier-mdp {
  flex-shrink: 0;
  height: 36px;
  padding: 8px 16px;
  font-size: 14px;
  white-space: nowrap;
}
.page-machine-horaires ~ .popup-parametres-avances .div-field-teamviewer {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: var(--md-spacing-lg);
  gap: var(--md-spacing-lg);
}
.page-machine-horaires ~ .popup-parametres-avances .div-field-teamviewer label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
  white-space: nowrap;
}
.page-machine-horaires ~ .popup-parametres-avances .input-teamviewer {
  flex: 1;
  height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
}
.page-machine-horaires ~ .popup-parametres-avances .input-teamviewer::placeholder {
  color: var(--md-color-neutrals-300);
}
.page-machine-horaires ~ .popup-parametres-avances .footer-popup-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 17px;
  border-top: 1px solid var(--md-color-neutrals-150);
  margin-top: var(--md-spacing-2xl);
}
.page-machine-horaires ~ .popup-parametres-avances .footer-popup-action .button-annuler {
  min-width: 88px;
}
.page-machine-horaires ~ .popup-parametres-avances .footer-popup-action .button-enregistrer-popup {
  min-width: 108px;
}
.page-machine-horaires ~ .popup-parametres-avances .btn-primary {
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.page-machine-horaires ~ .popup-parametres-avances .btn-primary:hover {
  background: var(--md-color-blue-400);
}
.page-machine-horaires ~ .popup-parametres-avances .btn-primary.disabled, .page-machine-horaires ~ .popup-parametres-avances .btn-primary:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.page-machine-horaires ~ .popup-parametres-avances .btn-primary-small {
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.page-machine-horaires ~ .popup-parametres-avances .btn-outline {
  background: transparent;
  color: var(--md-color-blue-450);
  border: 1px solid var(--md-color-blue-400);
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.4s;
}
.page-machine-horaires ~ .popup-parametres-avances .btn-outline:hover {
  border: 1px solid var(--md-color-green-200);
  color: var(--md-color-green-200);
}
@media (max-width: 768px) {
  .page-machine-horaires ~ .popup-parametres-avances {
    width: 95%;
    padding: var(--md-spacing-lg);
  }
  .page-machine-horaires ~ .popup-parametres-avances .div-taux-columns {
    flex-direction: column;
  }
  .page-machine-horaires ~ .popup-parametres-avances .div-taux-disponibles,
  .page-machine-horaires ~ .popup-parametres-avances .div-taux-machine-priorises {
    width: 100%;
  }
  .page-machine-horaires ~ .popup-parametres-avances .div-transfer-buttons-add,
  .page-machine-horaires ~ .popup-parametres-avances .div-transfer-buttons-reorder {
    flex-direction: row;
    width: 100%;
    height: auto;
  }
}
@media (max-width: 719px) {
  .page-machine-horaires ~ .popup-parametres-avances {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    transform: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .page-machine-horaires ~ .popup-parametres-avances .popup-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--md-color-neutrals-100);
    flex-shrink: 0;
  }
  .page-machine-horaires ~ .popup-parametres-avances .section-popup-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }
  .page-machine-horaires ~ .popup-parametres-avances .div-popup-content h2 {
    font-size: 18px;
  }
  .page-machine-horaires ~ .popup-parametres-avances .nav-popup-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .page-machine-horaires ~ .popup-parametres-avances .li-tab-popup {
    flex-shrink: 0;
    font-size: 12px;
    padding: var(--md-spacing-sm);
    white-space: nowrap;
  }
  .page-machine-horaires ~ .popup-parametres-avances .popup-tab-content {
    margin-top: var(--md-spacing-lg);
  }
  .page-machine-horaires ~ .popup-parametres-avances .div-field-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-sm);
  }
  .page-machine-horaires ~ .popup-parametres-avances .select-wrapper {
    width: 100%;
  }
  .page-machine-horaires ~ .popup-parametres-avances .select-wrapper select {
    width: 100%;
  }
  .page-machine-horaires ~ .popup-parametres-avances .popup-tab-content input[type=number],
  .page-machine-horaires ~ .popup-parametres-avances .popup-tab-content input[type=text] {
    width: 100%;
  }
  .page-machine-horaires ~ .popup-parametres-avances .div-fields-passwords {
    flex-direction: column;
  }
  .page-machine-horaires ~ .popup-parametres-avances .div-field-teamviewer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-sm);
  }
  .page-machine-horaires ~ .popup-parametres-avances .div-taux-columns {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--md-spacing-sm);
  }
  .page-machine-horaires ~ .popup-parametres-avances .div-taux-disponibles,
  .page-machine-horaires ~ .popup-parametres-avances .div-taux-machine-priorises {
    width: auto;
    flex: 1;
    min-width: 0;
  }
  .page-machine-horaires ~ .popup-parametres-avances .div-transfer-buttons-add,
  .page-machine-horaires ~ .popup-parametres-avances .div-transfer-buttons-reorder {
    flex-direction: column;
    width: auto;
    min-width: 32px;
  }
  .page-machine-horaires ~ .popup-parametres-avances .button-icon {
    width: 32px;
    height: 32px;
  }
  .page-machine-horaires ~ .popup-parametres-avances .table-taux-list {
    height: 150px;
  }
  .page-machine-horaires ~ .popup-parametres-avances .th-header {
    font-size: 9px;
    padding: var(--md-spacing-xs) var(--md-spacing-sm);
  }
  .page-machine-horaires ~ .popup-parametres-avances .tr-taux-row {
    font-size: 12px;
    padding: var(--md-spacing-sm);
  }
  .page-machine-horaires ~ .popup-parametres-avances .column-title {
    font-size: 10px;
  }
  .page-machine-horaires ~ .popup-parametres-avances .input-teamviewer {
    width: 100%;
  }
  .page-machine-horaires ~ .popup-parametres-avances .footer-popup-action {
    flex-shrink: 0;
    padding: 16px 20px;
    margin-top: auto;
    border-top: 1px solid var(--md-color-neutrals-150);
    background-color: var(--md-color-neutrals-50);
    flex-direction: column;
    gap: var(--md-spacing-md);
  }
  .page-machine-horaires ~ .popup-parametres-avances .button-annuler,
  .page-machine-horaires ~ .popup-parametres-avances .button-enregistrer-popup {
    width: 100%;
  }
}

/* ========================================
   Page Températures - Styles SCSS
   Scope: .page-machine-temperatures
   ======================================== */
.page-machine-temperatures {
  --temp-color-blue-500: #110f2c;
  --temp-color-blue-450: #161338;
  --temp-color-blue-400: #1b1846;
  --temp-color-blue-300: #262262;
  --temp-color-blue-150: #a2a0bb;
  --temp-color-neutrals-500: #1e1e1e;
  --temp-color-neutrals-450: #3d3d3d;
  --temp-color-neutrals-400: #5e5e5e;
  --temp-color-neutrals-350: #828282;
  --temp-color-neutrals-300: #a7a7a7;
  --temp-color-neutrals-150: #ddd;
  --temp-color-neutrals-100: #f1f1f1;
  --temp-color-neutrals-50: #ffffff;
  --temp-color-green-450: #213e2d;
  --temp-color-green-400: #3b7051;
  --temp-color-green-350: #4a8c65;
  --temp-color-green-200: #62ba87;
  --temp-color-green-bg: rgba(98, 186, 135, 0.1);
  --temp-color-orange-400: #c97a20;
  --temp-color-orange-bg: rgba(201, 122, 32, 0.1);
  --temp-color-red-200: #c14039;
  --temp-color-red-accent: #fb2c36;
  --temp-color-red-bg: rgba(193, 64, 57, 0.1);
  --temp-spacing-xs: 4px;
  --temp-spacing-sm: 8px;
  --temp-spacing-md: 12px;
  --temp-spacing-lg: 16px;
  --temp-spacing-xl: 20px;
  --temp-spacing-2xl: 24px;
  --temp-spacing-3xl: 28px;
  --temp-spacing-4xl: 32px;
  --temp-spacing-5xl: 40px;
  --temp-radius-sm: 4px;
  --temp-radius-md: 8px;
  display: flex;
  min-height: 100vh;
  width: 100%;
}
.page-machine-temperatures .aside-sidebar-placeholder {
  display: none;
}
.page-machine-temperatures .section-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--temp-spacing-xl);
  padding: var(--temp-spacing-3xl);
  padding-bottom: var(--temp-spacing-xl);
  overflow: hidden;
  background: linear-gradient(131.32deg, rgb(248, 249, 250) 0%, rgb(245, 244, 255) 100.57%);
  position: relative;
  height: 100vh;
}
.page-machine-temperatures .section-temperatures-content {
  display: flex;
  flex-direction: column;
  gap: var(--temp-spacing-xl);
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.page-machine-temperatures .section-temperatures-content::-webkit-scrollbar {
  width: 6px;
}
.page-machine-temperatures .section-temperatures-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.page-machine-temperatures .section-temperatures-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
.page-machine-temperatures .section-temperatures-content::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}
.page-machine-temperatures .hidden {
  display: none !important;
}
.page-machine-temperatures .header-page-top {
  display: flex;
  flex-direction: column;
  gap: var(--temp-spacing-sm);
  padding-bottom: var(--temp-spacing-xl);
  border-bottom: 1px solid var(--temp-color-neutrals-100);
}
.page-machine-temperatures .button-retour {
  display: flex;
  align-items: center;
  gap: var(--temp-spacing-xs);
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--temp-color-neutrals-500);
}
.page-machine-temperatures .button-retour .icon-arrow-back {
  width: 16px;
  height: 16px;
}
.page-machine-temperatures .div-machine-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--temp-spacing-4xl);
}
.page-machine-temperatures .div-machine-info {
  display: flex;
  flex-direction: column;
  gap: var(--temp-spacing-sm);
  flex: 1;
}
.page-machine-temperatures .div-machine-identite {
  display: flex;
  align-items: center;
  gap: var(--temp-spacing-md);
}
.page-machine-temperatures .machine-name {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--temp-color-blue-450);
}
.page-machine-temperatures .span-badge-version {
  padding: 4.8px 8.8px;
  border: 0.8px solid var(--temp-color-neutrals-150);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  color: #0a0a0a;
}
.page-machine-temperatures .activation-badge {
  display: flex;
  align-items: center;
  gap: var(--temp-spacing-sm);
  padding: var(--temp-spacing-sm) var(--temp-spacing-md);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
.page-machine-temperatures .activation-badge--active {
  background: rgba(98, 186, 135, 0.1);
  color: var(--temp-color-green-400);
}
.page-machine-temperatures .activation-badge--active .status-icon {
  background: var(--temp-color-green-200);
}
.page-machine-temperatures .activation-badge--inactive {
  background: rgba(193, 64, 57, 0.1);
  color: var(--temp-color-red-200);
}
.page-machine-temperatures .activation-badge--inactive .status-icon {
  background: var(--temp-color-red-200);
}
.page-machine-temperatures .activation-badge--virtuelle {
  background: rgba(38, 34, 98, 0.1);
  color: var(--temp-color-blue-300);
}
.page-machine-temperatures .activation-badge--virtuelle .status-icon {
  background: var(--temp-color-blue-300);
}
.page-machine-temperatures .activation-badge .status-icon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.page-machine-temperatures .last-sync {
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  color: var(--temp-color-neutrals-350);
}
.page-machine-temperatures .div-localisation {
  display: flex;
  align-items: center;
  gap: var(--temp-spacing-lg);
}
.page-machine-temperatures .machine-number {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--temp-color-neutrals-400);
}
.page-machine-temperatures .location-info {
  display: flex;
  align-items: center;
  gap: var(--temp-spacing-xs);
}
.page-machine-temperatures .location-info .icon-pin {
  width: 16px;
  height: 16px;
}
.page-machine-temperatures .location-info span {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--temp-color-neutrals-350);
}
.page-machine-temperatures .btn-primary {
  background: var(--temp-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--temp-spacing-sm) var(--temp-spacing-lg);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.page-machine-temperatures .btn-primary:hover {
  background: var(--temp-color-blue-400);
}
.page-machine-temperatures .nav-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--temp-spacing-lg);
}
.page-machine-temperatures .ul-tabs-list {
  display: flex;
  align-items: center;
  list-style: none;
  background: var(--temp-color-neutrals-50);
  border: 1px solid var(--temp-color-neutrals-100);
  border-radius: 4px;
  padding: 0 var(--temp-spacing-xs);
  margin: 0;
}
.page-machine-temperatures .li-tab {
  font-size: 14px;
  font-weight: 600;
  color: var(--temp-color-blue-150);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.page-machine-temperatures .li-tab a {
  display: block;
  padding: var(--temp-spacing-md);
  color: inherit;
  text-decoration: none;
}
.page-machine-temperatures .li-tab:hover {
  color: var(--temp-color-blue-300);
}
.page-machine-temperatures .li-tab.active {
  color: var(--temp-color-blue-300);
  border-bottom-color: var(--temp-color-blue-300);
}
.page-machine-temperatures .section-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  z-index: 5;
}
.page-machine-temperatures .input-date {
  display: flex;
  flex-direction: row;
  height: 42px;
  width: 254px;
  min-width: 254px;
  max-width: 254px;
  border-radius: var(--temp-radius-sm);
  background: var(--temp-color-neutrals-50);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  border: 1px solid transparent;
  transition: 0.4s;
}
.page-machine-temperatures .input-date:hover {
  border-color: var(--temp-color-neutrals-150);
}
.page-machine-temperatures .input-date p {
  margin-right: auto;
  color: var(--temp-color-blue-300);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.page-machine-temperatures .input-date .svg:first-child {
  margin-left: 16px;
  margin-right: 8px;
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-machine-temperatures .input-date .svg.last {
  margin-right: 16px;
  margin-left: 8px;
  height: 12px;
  width: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-machine-temperatures .input-date .option-date-court {
  cursor: auto;
  left: 0;
  bottom: -381px;
  position: absolute;
  width: 254px;
  height: 381px;
  border-radius: 0 0 0 12px;
  background: var(--temp-color-neutrals-50);
  display: none;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.page-machine-temperatures .input-date .option-date-court.--actif {
  display: flex;
}
.page-machine-temperatures .input-date .option-date-court .titre-date-court {
  height: 53px;
  margin: 16px 16px 0 16px;
  width: calc(100% - 32px);
  border-bottom: 1px solid rgba(38, 34, 98, 0.1);
  display: flex;
  flex-direction: column;
}
.page-machine-temperatures .input-date .option-date-court .titre-date-court p {
  margin: 12px 0 20px 0;
  color: var(--temp-color-blue-400);
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  height: 21px;
  width: 100%;
}
.page-machine-temperatures .input-date .option-date-court .menu-date-court {
  margin: 20px 16px 0 16px;
  gap: 4px;
  display: flex;
  flex-direction: column;
}
.page-machine-temperatures .input-date .option-date-court .menu-date-court .btn-date {
  width: 100%;
  gap: 15px;
  height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}
.page-machine-temperatures .input-date .option-date-court .menu-date-court .btn-date span.check {
  height: 12px;
  width: 12px;
  min-height: 12px;
  min-width: 12px;
  border: 1.5px solid var(--temp-color-blue-150);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
}
.page-machine-temperatures .input-date .option-date-court .menu-date-court .btn-date span.check span.centre {
  transition: 0.4s;
}
.page-machine-temperatures .input-date .option-date-court .menu-date-court .btn-date p {
  color: var(--temp-color-blue-150);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  transition: 0.4s;
}
.page-machine-temperatures .input-date .option-date-court .menu-date-court .btn-date:hover p {
  color: var(--temp-color-blue-300);
}
.page-machine-temperatures .input-date .option-date-court .menu-date-court .btn-date:hover span.check {
  border: 1.5px solid var(--temp-color-blue-300);
}
.page-machine-temperatures .input-date .option-date-court .menu-date-court .btn-date:hover span.check span.centre {
  height: 8px;
  width: 8px;
  background-color: var(--temp-color-blue-300);
  border-radius: 100%;
}
.page-machine-temperatures .input-date .option-date-court .menu-date-court .btn-date.--actif span.check {
  border: 1.5px solid var(--temp-color-blue-300);
}
.page-machine-temperatures .input-date .option-date-court .menu-date-court .btn-date.--actif span.check span.centre {
  height: 8px;
  width: 8px;
  background-color: var(--temp-color-blue-300);
  border-radius: 100%;
}
.page-machine-temperatures .input-date .option-date-court .menu-date-court .btn-date.--actif p {
  color: var(--temp-color-blue-300);
}
.page-machine-temperatures .input-date .option-date-court button.date-perso {
  display: flex;
  height: 42px;
  margin: 20px 16px 0 16px;
  width: calc(100% - 32px);
  align-items: center;
  gap: 14px;
  border-radius: var(--temp-radius-sm);
  outline: none;
  border: none;
  background: rgba(38, 34, 98, 0.05);
  color: var(--temp-color-blue-300);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.4s;
}
.page-machine-temperatures .input-date .option-date-court button.date-perso:hover {
  background-color: var(--temp-color-blue-300);
  color: #fff;
}
.page-machine-temperatures .input-date .option-date-court button.date-perso:hover svg path[stroke] {
  stroke: #fff;
}
.page-machine-temperatures .input-date .option-date-court button.date-perso:hover svg path[fill] {
  fill: #fff;
}
.page-machine-temperatures .input-date .option-date-court button.date-perso svg {
  margin-left: 16px;
  transition: 0.4s;
}
.page-machine-temperatures .input-date .option-date-court button.date-perso svg path[stroke] {
  transition: 0.4s;
}
.page-machine-temperatures .input-date .option-date-court button.date-perso svg path[fill] {
  transition: 0.4s;
}
.page-machine-temperatures .input-date .menu-periode-jours {
  width: 296px;
  height: 381px;
  cursor: auto;
  left: 254px;
  bottom: -381px;
  position: absolute;
  border-radius: 0 0 12px 0;
  background: var(--temp-color-neutrals-50);
  display: none;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.page-machine-temperatures .input-date .menu-periode-jours.--actif {
  display: flex;
}
.page-machine-temperatures .input-date .menu-periode-jours .retour {
  display: none;
  align-items: center;
  flex-direction: row;
  margin: 20px 24px 0 24px;
  cursor: pointer;
}
.page-machine-temperatures .input-date .menu-periode-jours .retour p {
  margin: 0 0 0 10px;
  color: var(--temp-color-neutrals-400);
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
}
.page-machine-temperatures .input-date .menu-periode-jours .titre-date-court {
  display: none;
}
.page-machine-temperatures .input-date .menu-periode-jours .titre-date-jours {
  height: 52px;
  display: flex;
  width: 264px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 16px 16px 0 16px;
  border-bottom: 1px solid rgba(38, 34, 98, 0.1);
}
.page-machine-temperatures .input-date .menu-periode-jours .titre-date-jours .svg {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  cursor: pointer;
}
.page-machine-temperatures .input-date .menu-periode-jours .titre-date-jours p {
  width: 152px;
  max-width: 152px;
  margin: 0;
  color: var(--temp-color-blue-300);
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}
.page-machine-temperatures .input-date .menu-periode-jours .weekdays {
  width: 224px;
  height: 32px;
  margin: 20px auto 0 auto;
  display: flex;
  flex-direction: row;
}
.page-machine-temperatures .input-date .menu-periode-jours .weekdays .weekday {
  height: 32px;
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--temp-color-blue-150);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.page-machine-temperatures .input-date .menu-periode-jours .days-grid {
  display: grid;
  margin: 8px auto 0 auto;
  grid-template-columns: repeat(7, 32px);
  gap: 0;
}
.page-machine-temperatures .input-date .menu-periode-jours .days-grid.three {
  grid-template-columns: repeat(3, 1fr);
}
.page-machine-temperatures .input-date .menu-periode-jours .day-btn {
  aspect-ratio: 1;
  height: 32px;
  color: var(--temp-color-neutrals-400);
  border: none;
  background-color: transparent;
  border-radius: 0;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}
.page-machine-temperatures .input-date .menu-periode-jours .day-btn:hover:not(:disabled) {
  background: rgba(38, 34, 98, 0.1);
  border-radius: var(--temp-radius-sm);
}
.page-machine-temperatures .input-date .menu-periode-jours .day-btn:disabled {
  background: transparent;
  cursor: default;
  color: transparent;
}
.page-machine-temperatures .input-date .menu-periode-jours .day-btn.in-range {
  background: rgba(38, 34, 98, 0.1);
}
.page-machine-temperatures .input-date .menu-periode-jours .day-btn.endpoint {
  background: var(--temp-color-blue-300) !important;
  color: var(--temp-color-neutrals-50);
  border-radius: var(--temp-radius-sm);
}
.page-machine-temperatures .input-date .menu-periode-jours .day-btn.today {
  border: 2px solid var(--temp-color-blue-300);
  border-radius: var(--temp-radius-sm);
}
.page-machine-temperatures .input-date .menu-periode-jours .month-btn,
.page-machine-temperatures .input-date .menu-periode-jours .year-btn {
  height: 61px;
  width: 75px;
  color: var(--temp-color-neutrals-400);
  border: none;
  background-color: transparent;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.page-machine-temperatures .input-date .menu-periode-jours .month-btn:hover,
.page-machine-temperatures .input-date .menu-periode-jours .year-btn:hover {
  background: rgba(38, 34, 98, 0.1);
  border-radius: var(--temp-radius-sm);
}
.page-machine-temperatures .input-date .menu-periode-jours .month-btn.endpoint,
.page-machine-temperatures .input-date .menu-periode-jours .year-btn.endpoint {
  background: var(--temp-color-blue-300) !important;
  color: var(--temp-color-neutrals-50);
  border-radius: var(--temp-radius-sm);
}
.page-machine-temperatures .input-date .menu-periode-jours .month-btn.today,
.page-machine-temperatures .input-date .menu-periode-jours .year-btn.today {
  border: 2px solid var(--temp-color-blue-300);
  border-radius: var(--temp-radius-sm);
}
.page-machine-temperatures .background {
  position: absolute;
  display: none;
  left: -100vh;
  height: 0;
  width: 0;
}
.page-machine-temperatures .button-actualiser-donnees {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--temp-spacing-sm);
  min-width: 184px;
  padding: var(--temp-spacing-sm) var(--temp-spacing-lg);
  background-color: var(--temp-color-green-200);
  color: var(--temp-color-green-450);
  border: none;
  border-radius: var(--temp-radius-sm);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.page-machine-temperatures .button-actualiser-donnees .button-loading {
  display: flex;
  align-items: center;
  gap: var(--temp-spacing-sm);
}
.page-machine-temperatures .button-actualiser-donnees:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.page-machine-temperatures .badge {
  display: inline-flex;
  align-items: center;
  gap: var(--temp-spacing-sm);
  padding: var(--temp-spacing-sm) var(--temp-spacing-md);
  border-radius: var(--temp-radius-sm);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  width: fit-content;
}
.page-machine-temperatures .badge-small {
  padding: 6px 10px;
  width: fit-content;
}
.page-machine-temperatures .badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.page-machine-temperatures .badge-success {
  background-color: var(--temp-color-green-bg);
  color: var(--temp-color-green-400);
}
.page-machine-temperatures .badge-success .badge-dot {
  background-color: var(--temp-color-green-200);
}
.page-machine-temperatures .badge-warning {
  background-color: var(--temp-color-orange-bg);
  color: var(--temp-color-orange-400);
}
.page-machine-temperatures .badge-warning .badge-dot {
  background-color: #f59e0b;
}
.page-machine-temperatures .badge-danger {
  background-color: var(--temp-color-red-bg);
  color: var(--temp-color-red-200);
}
.page-machine-temperatures .badge-danger .badge-dot {
  background-color: var(--temp-color-red-200);
}
.page-machine-temperatures .section-kpis-temperature {
  display: flex;
  align-items: stretch;
  gap: var(--temp-spacing-5xl);
  width: 100%;
}
.page-machine-temperatures .article-card-kpi {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--temp-spacing-lg);
  padding: var(--temp-spacing-lg);
  background-color: var(--temp-color-neutrals-50);
  border: 1px solid var(--temp-color-neutrals-100);
  border-radius: var(--temp-radius-md);
}
.page-machine-temperatures .kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: #000;
}
.page-machine-temperatures .kpi-value {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
}
.page-machine-temperatures .kpi-value-success {
  color: var(--temp-color-green-350);
}
.page-machine-temperatures .kpi-content {
  display: flex;
  align-items: center;
  gap: var(--temp-spacing-lg);
}
.page-machine-temperatures .section-machine-details {
  display: flex;
  flex-direction: column;
  gap: var(--temp-spacing-xl);
  padding: 25px;
  background-color: var(--temp-color-neutrals-50);
  border: 1px solid var(--temp-color-neutrals-100);
  border-radius: var(--temp-radius-md);
  width: 100%;
}
.page-machine-temperatures .section-machine-details.collapsed {
  padding-bottom: 15px;
}
.page-machine-temperatures .section-machine-details.collapsed .div-temperature-cards-grid {
  display: none;
}
.page-machine-temperatures .details-machine-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.page-machine-temperatures .div-machine-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  cursor: pointer;
}
.page-machine-temperatures .div-machine-title .img-icon-chevron-down {
  transition: transform 0.3s ease;
}
.page-machine-temperatures .div-machine-title.collapsed .img-icon-chevron-down {
  transform: rotate(-90deg);
}
.page-machine-temperatures .machine-section-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 28px;
  color: var(--temp-color-blue-300);
}
.page-machine-temperatures .div-machine-status {
  display: flex;
  align-items: center;
}
.page-machine-temperatures .div-temperature-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--temp-spacing-lg);
}
.page-machine-temperatures .empty-state {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--temp-spacing-5xl) var(--temp-spacing-2xl);
}
.page-machine-temperatures .empty-state p {
  margin: 0;
  font-size: 14px;
  color: var(--temp-color-neutrals-400);
  text-align: center;
}
.page-machine-temperatures .article-temperature-card {
  display: flex;
  flex-direction: column;
  gap: var(--temp-spacing-lg);
  padding: var(--temp-spacing-2xl);
  padding-top: var(--temp-spacing-2xl);
  padding-bottom: var(--temp-spacing-lg);
  background-color: var(--temp-color-neutrals-50);
  border: 1px solid var(--temp-color-neutrals-100);
  border-radius: var(--temp-radius-md);
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.page-machine-temperatures .article-temperature-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.page-machine-temperatures .article-temperature-card.selected {
  transform: translateY(-2px);
}
.page-machine-temperatures .article-temperature-card:focus-visible {
  outline: 2px solid var(--temp-color-blue-300);
  outline-offset: 2px;
}
.page-machine-temperatures .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.page-machine-temperatures .armoire-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: var(--temp-color-blue-450);
}
.page-machine-temperatures .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.page-machine-temperatures .status-dot-normal {
  background-color: var(--temp-color-green-200);
}
.page-machine-temperatures .status-dot-attention {
  background-color: #f59e0b;
}
.page-machine-temperatures .status-dot-critique {
  background-color: var(--temp-color-red-200);
}
.page-machine-temperatures .temperature-display {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.page-machine-temperatures .temperature-main {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.page-machine-temperatures .temperature-value {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--temp-color-blue-500);
}
.page-machine-temperatures .temperature-value--na {
  color: var(--temp-color-neutrals-400, #a0a0a0);
  font-weight: 500;
}
.page-machine-temperatures .temperature-unit {
  font-size: 18px;
  font-weight: 600;
  color: var(--temp-color-neutrals-450);
}
.page-machine-temperatures .temperature-unit--na {
  color: var(--temp-color-neutrals-400, #a0a0a0);
}
.page-machine-temperatures .icon-thermometer {
  opacity: 0.5;
}
.page-machine-temperatures .derniere-maj {
  font-size: 10px;
  font-weight: 400;
  color: var(--temp-color-neutrals-300);
  text-align: right;
}
.page-machine-temperatures .stats-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--temp-spacing-lg);
  padding: var(--temp-spacing-sm) var(--temp-spacing-4xl);
  border-top: 1px solid var(--temp-color-neutrals-150);
  opacity: 0.8;
}
.page-machine-temperatures .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-machine-temperatures .stat-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  color: var(--temp-color-neutrals-400);
}
.page-machine-temperatures .stat-value {
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  color: #000;
}
.page-machine-temperatures .stats-note {
  font-size: 7px;
  font-weight: 400;
  color: var(--temp-color-neutrals-400);
}
.page-machine-temperatures .section-details-mesures {
  display: flex;
  flex-direction: column;
  gap: var(--temp-spacing-xl);
  width: 100%;
}
.page-machine-temperatures .div-details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.page-machine-temperatures .details-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--temp-color-blue-300);
}
.page-machine-temperatures .div-actions-header-buttons {
  display: flex;
  align-items: center;
  gap: var(--temp-spacing-md);
}
.page-machine-temperatures .button-exporter-csv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--temp-spacing-sm);
  min-width: 141px;
  padding: var(--temp-spacing-sm) var(--temp-spacing-lg);
  background-color: transparent;
  color: var(--temp-color-blue-450);
  border: 1px solid var(--temp-color-blue-400);
  border-radius: var(--temp-radius-sm);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.4s;
}
.page-machine-temperatures .button-exporter-csv:hover {
  border-color: var(--temp-color-green-200);
  color: var(--temp-color-green-200);
}
.page-machine-temperatures .button-fermer-details {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--temp-spacing-sm);
  min-width: 82px;
  padding: var(--temp-spacing-sm) var(--temp-spacing-lg);
  background-color: var(--temp-color-blue-300);
  color: white;
  border: none;
  border-radius: var(--temp-radius-sm);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.page-machine-temperatures .div-table-wrapper {
  width: 100%;
  overflow-x: auto;
}
.page-machine-temperatures .table-mesures-temperature {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--temp-color-neutrals-50);
}
.page-machine-temperatures .table-mesures-temperature th,
.page-machine-temperatures .table-mesures-temperature td {
  padding: 14px 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--temp-color-neutrals-100);
  border-bottom: none;
}
.page-machine-temperatures .table-mesures-temperature thead tr:first-child th {
  text-align: left;
  padding-left: 20px;
  color: var(--temp-color-blue-300);
  border-top-left-radius: var(--temp-radius-sm);
  border-top-right-radius: var(--temp-radius-sm);
}
.page-machine-temperatures .table-mesures-temperature thead tr:last-child th {
  color: var(--temp-color-blue-300);
}
.page-machine-temperatures .table-mesures-temperature tbody td {
  font-weight: 600;
  color: var(--temp-color-neutrals-450);
}
.page-machine-temperatures .table-mesures-temperature tbody tr:last-child td {
  border-bottom: 1px solid var(--temp-color-neutrals-100);
}
.page-machine-temperatures .table-mesures-temperature tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--temp-radius-sm);
}
.page-machine-temperatures .table-mesures-temperature tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--temp-radius-sm);
}
.page-machine-temperatures .spinner {
  animation: spin-temp 1s linear infinite;
}
@keyframes spin-temp {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.page-machine-temperatures button:focus-visible {
  outline: 2px solid var(--temp-color-blue-300);
  outline-offset: 2px;
}
.page-machine-temperatures button:hover {
  opacity: 0.9;
}
@media (max-width: 1200px) {
  .page-machine-temperatures .section-kpis-temperature {
    gap: var(--temp-spacing-xl);
  }
  .page-machine-temperatures .div-temperature-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
@media (max-width: 992px) {
  .page-machine-temperatures .section-kpis-temperature {
    flex-wrap: wrap;
  }
  .page-machine-temperatures .article-card-kpi {
    min-width: calc(50% - var(--temp-spacing-xl) / 2);
  }
  .page-machine-temperatures .div-machine-title-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--temp-spacing-lg);
  }
  .page-machine-temperatures .ul-tabs-list {
    flex-wrap: wrap;
  }
}
@media (max-width: 768px) {
  .page-machine-temperatures .aside-sidebar-placeholder {
    display: none;
  }
  .page-machine-temperatures .section-main-content {
    padding: var(--temp-spacing-lg);
  }
  .page-machine-temperatures .article-card-kpi {
    min-width: 100%;
  }
  .page-machine-temperatures .div-temperature-cards-grid {
    grid-template-columns: 1fr;
  }
  .page-machine-temperatures .section-buttons {
    flex-direction: column;
    gap: var(--temp-spacing-md);
    align-items: stretch;
  }
  .page-machine-temperatures .button-actualiser-donnees {
    width: 100%;
  }
  .page-machine-temperatures .div-machine-identite {
    flex-wrap: wrap;
  }
  .page-machine-temperatures .header-page-top {
    gap: var(--temp-spacing-md);
  }
  .page-machine-temperatures .button-retour {
    padding: var(--temp-spacing-sm) 0;
  }
  .page-machine-temperatures .nav-tabs-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-machine-temperatures .ul-tabs-list {
    width: 100%;
    overflow-x: auto;
  }
}
@media (max-width: 719px) {
  .page-machine-temperatures {
    padding-top: 72px;
    overflow: hidden;
    height: 100svh;
  }
  .page-machine-temperatures::before {
    content: "Températures";
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
    height: 72px;
    min-height: 72px;
    padding-left: 80px;
    padding-top: 8px;
    background: var(--temp-color-neutrals-50);
    border-radius: 0 0 8px 8px;
    z-index: 3;
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #262262;
    line-height: normal;
    box-sizing: border-box;
  }
  .page-machine-temperatures .section-main-content {
    padding: var(--temp-spacing-xl);
    height: calc(100svh - 72px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .page-machine-temperatures .header-page-top {
    display: none;
  }
  .page-machine-temperatures .header-page-top:has(.button-parametres-avances) {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    border-bottom: none;
    padding-bottom: 0;
    align-items: center;
    justify-content: space-between;
  }
  .page-machine-temperatures .button-retour {
    display: flex;
  }
  .page-machine-temperatures .div-machine-info {
    display: none;
  }
  .page-machine-temperatures .div-machine-title-bar {
    width: auto;
  }
  .page-machine-temperatures .button-parametres-avances {
    width: auto;
  }
  .page-machine-temperatures .nav-tabs-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--temp-spacing-md);
    flex-shrink: 0;
  }
  .page-machine-temperatures .ul-tabs-list {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-machine-temperatures .ul-tabs-list::-webkit-scrollbar {
    display: none;
  }
  .page-machine-temperatures .li-tab {
    flex-shrink: 0;
    font-size: 12px;
  }
  .page-machine-temperatures .li-tab a {
    padding: var(--temp-spacing-sm) var(--temp-spacing-md);
    white-space: nowrap;
  }
  .page-machine-temperatures .section-buttons {
    flex-direction: column;
    gap: var(--temp-spacing-md);
    align-items: stretch;
    flex-shrink: 0;
  }
  .page-machine-temperatures .input-date {
    width: 100%;
    min-width: unset;
    max-width: unset;
  }
  .page-machine-temperatures .input-date .option-date-court {
    width: 100%;
    border-radius: 0 0 12px 12px;
  }
  .page-machine-temperatures .input-date .menu-periode-jours {
    width: 100%;
    left: 0;
    border-radius: 0 0 12px 12px;
  }
  .page-machine-temperatures .input-date .menu-periode-jours .retour {
    display: flex;
  }
  .page-machine-temperatures .input-date .menu-periode-jours .titre-date-court {
    display: flex;
  }
  .page-machine-temperatures .button-actualiser-donnees {
    width: 100%;
    min-width: unset;
  }
  .page-machine-temperatures .section-temperatures-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-bottom: var(--temp-spacing-4xl);
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-machine-temperatures .section-temperatures-content::-webkit-scrollbar {
    display: none;
  }
  .page-machine-temperatures .section-kpis-temperature {
    flex-direction: column;
    gap: var(--temp-spacing-md);
  }
  .page-machine-temperatures .article-card-kpi {
    min-width: unset;
  }
  .page-machine-temperatures .section-machine-details {
    padding: var(--temp-spacing-lg);
  }
  .page-machine-temperatures .div-temperature-cards-grid {
    grid-template-columns: 1fr;
  }
  .page-machine-temperatures .article-temperature-card {
    padding: var(--temp-spacing-lg);
  }
  .page-machine-temperatures .div-details-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--temp-spacing-md);
  }
  .page-machine-temperatures .div-actions-header-buttons {
    width: 100%;
  }
  .page-machine-temperatures .div-actions-header-buttons button {
    flex: 1;
  }
  .page-machine-temperatures .div-table-wrapper {
    overflow-x: visible;
  }
  .page-machine-temperatures .table-mesures-temperature {
    min-width: unset;
    border-collapse: separate;
    border-spacing: 0 var(--temp-spacing-md);
  }
  .page-machine-temperatures .table-mesures-temperature thead .tr-table-title {
    display: block;
    margin-bottom: var(--temp-spacing-sm);
  }
  .page-machine-temperatures .table-mesures-temperature thead .tr-table-title .th-armoire-name {
    display: block;
    border: none;
    padding: var(--temp-spacing-sm) var(--temp-spacing-md);
    font-size: 16px;
  }
  .page-machine-temperatures .table-mesures-temperature thead .tr-column-headers {
    display: none;
  }
  .page-machine-temperatures .table-mesures-temperature tbody {
    display: flex;
    flex-direction: column;
    gap: var(--temp-spacing-md);
  }
  .page-machine-temperatures .table-mesures-temperature .tr-data-row {
    display: flex;
    flex-direction: column;
    background: var(--temp-color-neutrals-50);
    border: 1px solid var(--temp-color-neutrals-100);
    border-radius: var(--temp-radius-md);
    padding: var(--temp-spacing-lg);
    margin: 0 var(--temp-spacing-md);
    gap: var(--temp-spacing-sm);
  }
  .page-machine-temperatures .table-mesures-temperature .tr-data-row td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--temp-spacing-xs) 0;
    border: none;
    font-size: 13px;
  }
  .page-machine-temperatures .table-mesures-temperature .tr-data-row td::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 600;
    color: var(--temp-color-neutrals-350);
    flex-shrink: 0;
    margin-right: var(--temp-spacing-lg);
  }
  .page-machine-temperatures .table-mesures-temperature tbody tr:last-child td {
    border-bottom: none;
  }
  .page-machine-temperatures .toast-container {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
}
.page-machine-temperatures .toast-container {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-machine-temperatures .toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--temp-color-neutrals-50);
  border: 1px solid var(--temp-color-neutrals-100);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--temp-color-neutrals-500);
  animation: toast-slide-in-temp 0.3s ease-out;
}
.page-machine-temperatures .toast.toast-fade-out {
  animation: toast-slide-out-temp 0.3s ease-in forwards;
}
.page-machine-temperatures .toast--info {
  border-left: 4px solid var(--temp-color-blue-300);
}
.page-machine-temperatures .toast--info .toast-icon {
  color: var(--temp-color-blue-300);
}
.page-machine-temperatures .toast--success {
  border-left: 4px solid var(--temp-color-green-200);
}
.page-machine-temperatures .toast--success .toast-icon {
  color: var(--temp-color-green-200);
}
.page-machine-temperatures .toast--error {
  border-left: 4px solid var(--temp-color-red-200);
}
.page-machine-temperatures .toast--error .toast-icon {
  color: var(--temp-color-red-200);
}
@keyframes toast-slide-in-temp {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes toast-slide-out-temp {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
.page-machine-temperatures .toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.page-machine-temperatures ~ .popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.page-machine-temperatures ~ .popup-parametres-avances {
  --md-color-blue-500: #110f2c;
  --md-color-blue-450: #161338;
  --md-color-blue-400: #1b1846;
  --md-color-blue-300: #262262;
  --md-color-blue-150: #a2a0bb;
  --md-color-neutrals-500: #1e1e1e;
  --md-color-neutrals-450: #3d3d3d;
  --md-color-neutrals-400: #5e5e5e;
  --md-color-neutrals-350: #828282;
  --md-color-neutrals-300: #a7a7a7;
  --md-color-neutrals-250: #b2b2b2;
  --md-color-neutrals-150: #ddd;
  --md-color-neutrals-100: #f1f1f1;
  --md-color-neutrals-50: #fff;
  --md-color-green-450: #213e2d;
  --md-color-green-400: #3b7051;
  --md-color-green-200: #62ba87;
  --md-color-red-200: #c14039;
  --md-font-family: "Open Sans", sans-serif;
  --md-spacing-xs: 4px;
  --md-spacing-sm: 8px;
  --md-spacing-md: 12px;
  --md-spacing-lg: 16px;
  --md-spacing-xl: 20px;
  --md-spacing-2xl: 24px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 659px;
  max-height: 90vh;
  background: white;
  border-radius: 4px;
  padding: var(--md-spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
  z-index: 101;
  overflow-y: auto;
}
.page-machine-temperatures ~ .popup-parametres-avances .popup-header {
  display: flex;
  justify-content: flex-end;
}
.page-machine-temperatures ~ .popup-parametres-avances .button-fermer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
}
.page-machine-temperatures ~ .popup-parametres-avances .button-fermer svg {
  width: 10px;
  height: 10px;
}
.page-machine-temperatures ~ .popup-parametres-avances .section-popup-body {
  display: flex;
  flex-direction: column;
}
.page-machine-temperatures ~ .popup-parametres-avances .div-popup-content {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
}
.page-machine-temperatures ~ .popup-parametres-avances .div-popup-content h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--md-color-blue-500);
}
.page-machine-temperatures ~ .popup-parametres-avances .nav-popup-tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  padding: 0 var(--md-spacing-xs);
}
.page-machine-temperatures ~ .popup-parametres-avances .li-tab-popup {
  padding: var(--md-spacing-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-150);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--md-font-family);
  transition: all 0.2s;
}
.page-machine-temperatures ~ .popup-parametres-avances .li-tab-popup:hover {
  color: var(--md-color-blue-300);
}
.page-machine-temperatures ~ .popup-parametres-avances .li-tab-popup.active {
  color: var(--md-color-blue-300);
  border-bottom-color: var(--md-color-blue-300);
}
.page-machine-temperatures ~ .popup-parametres-avances .popup-tab-content {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
  margin-top: var(--md-spacing-2xl);
}
.page-machine-temperatures ~ .popup-parametres-avances .div-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
}
.page-machine-temperatures ~ .popup-parametres-avances .div-field-row label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-temperatures ~ .popup-parametres-avances .div-field-row.with-description {
  align-items: flex-start;
}
.page-machine-temperatures ~ .popup-parametres-avances .label-group {
  display: flex;
  flex-direction: column;
}
.page-machine-temperatures ~ .popup-parametres-avances .label-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-temperatures ~ .popup-parametres-avances .field-description {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #99a1af;
}
.page-machine-temperatures ~ .popup-parametres-avances .select-wrapper {
  position: relative;
  width: 111px;
}
.page-machine-temperatures ~ .popup-parametres-avances .select-wrapper select {
  width: 100%;
  height: 36px;
  padding: 0 32px 0 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
  appearance: none;
  cursor: pointer;
}
.page-machine-temperatures ~ .popup-parametres-avances .select-wrapper select:disabled {
  color: var(--md-color-neutrals-300);
  background: var(--md-color-neutrals-100);
}
.page-machine-temperatures ~ .popup-parametres-avances .select-wrapper .icon-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  pointer-events: none;
}
.page-machine-temperatures ~ .popup-parametres-avances .popup-tab-content input[type=number],
.page-machine-temperatures ~ .popup-parametres-avances .popup-tab-content input[type=text] {
  width: 111px;
  height: 36px;
  padding: 12px 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
}
.page-machine-temperatures ~ .popup-parametres-avances .popup-tab-content input[type=number]::placeholder,
.page-machine-temperatures ~ .popup-parametres-avances .popup-tab-content input[type=text]::placeholder {
  color: var(--md-color-neutrals-300);
}
.page-machine-temperatures ~ .popup-parametres-avances .popup-tab-content input[type=number]:disabled,
.page-machine-temperatures ~ .popup-parametres-avances .popup-tab-content input[type=text]:disabled {
  color: var(--md-color-neutrals-300);
  background: var(--md-color-neutrals-100);
}
.page-machine-temperatures ~ .popup-parametres-avances .popup-tab-content input[type=number].input-error,
.page-machine-temperatures ~ .popup-parametres-avances .popup-tab-content input[type=text].input-error {
  border-color: var(--md-color-red-200);
}
.page-machine-temperatures ~ .popup-parametres-avances .div-field-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
.page-machine-temperatures ~ .popup-parametres-avances .div-field-toggle label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #0a0a0a;
}
.page-machine-temperatures ~ .popup-parametres-avances .div-field-toggle .label-group label {
  font-size: 16px;
  font-weight: 400;
}
.page-machine-temperatures ~ .popup-parametres-avances .div-field-toggle .field-description {
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
}
.page-machine-temperatures ~ .popup-parametres-avances .div-field-toggle.disabled {
  opacity: 0.5;
}
.page-machine-temperatures ~ .popup-parametres-avances .div-field-toggle.disabled .input-toggle {
  pointer-events: none;
}
.page-machine-temperatures ~ .popup-parametres-avances .input-toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--md-color-neutrals-250);
  border: none;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.page-machine-temperatures ~ .popup-parametres-avances .input-toggle .toggle-knob {
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.page-machine-temperatures ~ .popup-parametres-avances .input-toggle.active {
  background: var(--md-color-blue-300);
}
.page-machine-temperatures ~ .popup-parametres-avances .input-toggle.active .toggle-knob {
  left: 18px;
}
.page-machine-temperatures ~ .popup-parametres-avances .div-field-slider {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-md);
}
.page-machine-temperatures ~ .popup-parametres-avances .div-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-machine-temperatures ~ .popup-parametres-avances .div-slider-header label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #0a0a0a;
}
.page-machine-temperatures ~ .popup-parametres-avances .slider-value {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #101828;
  white-space: nowrap;
  flex-shrink: 0;
}
.page-machine-temperatures ~ .popup-parametres-avances .div-slider-track {
  position: relative;
  height: 16px;
  background: #ececf0;
  border-radius: 9999px;
}
.page-machine-temperatures ~ .popup-parametres-avances .slider-progress {
  position: absolute;
  height: 100%;
  background: var(--md-color-blue-300);
  border-radius: 16px;
  left: 0;
}
.page-machine-temperatures ~ .popup-parametres-avances .slider-thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border: 0.8px solid var(--md-color-blue-300);
  border-radius: 50%;
  top: 0;
  transform: translateX(-50%);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
  cursor: grab;
}
.page-machine-temperatures ~ .popup-parametres-avances .div-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #6a7282;
}
.page-machine-temperatures ~ .popup-parametres-avances .div-tva-taux-transfert {
  background: #fcfcfc;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 12px;
  padding: var(--md-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
}
.page-machine-temperatures ~ .popup-parametres-avances .div-taux-columns {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
}
.page-machine-temperatures ~ .popup-parametres-avances .div-taux-disponibles,
.page-machine-temperatures ~ .popup-parametres-avances .div-taux-machine-priorises {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-md);
  width: 221px;
}
.page-machine-temperatures ~ .popup-parametres-avances .column-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--md-color-neutrals-300);
  text-transform: capitalize;
}
.page-machine-temperatures ~ .popup-parametres-avances .column-title span {
  text-transform: lowercase;
}
.page-machine-temperatures ~ .popup-parametres-avances .column-title.active {
  color: var(--md-color-blue-300);
}
.page-machine-temperatures ~ .popup-parametres-avances .table-taux-list {
  background: white;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 8px;
  height: 189px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-machine-temperatures ~ .popup-parametres-avances .th-header {
  background: #fcfcfc;
  border-bottom: 0.8px solid var(--md-color-neutrals-100);
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-size: 11px;
  font-weight: 700;
  color: var(--md-color-neutrals-400);
  text-transform: uppercase;
  letter-spacing: -0.55px;
  height: 32px;
  display: flex;
  align-items: center;
}
.page-machine-temperatures ~ .popup-parametres-avances .th-header.active {
  background: var(--md-color-blue-300);
  color: white;
}
.page-machine-temperatures ~ .popup-parametres-avances .div-taux-rows {
  flex: 1;
  overflow-y: auto;
}
.page-machine-temperatures ~ .popup-parametres-avances .tr-taux-row {
  padding: var(--md-spacing-md) var(--md-spacing-lg);
  font-size: 14px;
  font-weight: 700;
  color: var(--md-color-neutrals-400);
  border-bottom: 0.8px solid #f9fafb;
  cursor: pointer;
}
.page-machine-temperatures ~ .popup-parametres-avances .tr-taux-row:hover {
  background: #f9fafb;
}
.page-machine-temperatures ~ .popup-parametres-avances .tr-taux-row.selected {
  background: #e8e8ff;
}
.page-machine-temperatures ~ .popup-parametres-avances .tr-taux-row.with-badge {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
  color: var(--md-color-blue-450);
}
.page-machine-temperatures ~ .popup-parametres-avances .badge-priorite {
  width: 20px;
  height: 20px;
  background: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--md-color-neutrals-300);
}
.page-machine-temperatures ~ .popup-parametres-avances .div-transfer-buttons-add,
.page-machine-temperatures ~ .popup-parametres-avances .div-transfer-buttons-reorder {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 100%;
}
.page-machine-temperatures ~ .popup-parametres-avances .button-icon {
  width: 40px;
  height: 40px;
  background: white;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.page-machine-temperatures ~ .popup-parametres-avances .button-icon:hover {
  background: #f9fafb;
}
.page-machine-temperatures ~ .popup-parametres-avances .button-icon.disabled {
  opacity: 0.5;
}
.page-machine-temperatures ~ .popup-parametres-avances .button-icon svg {
  width: 16px;
  height: 16px;
  color: var(--md-color-neutrals-400);
}
.page-machine-temperatures ~ .popup-parametres-avances .p-note-priorite {
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  line-height: 15.7px;
  color: var(--md-color-neutrals-300);
  text-align: center;
}
.page-machine-temperatures ~ .popup-parametres-avances .div-fields-passwords {
  display: flex;
  gap: var(--md-spacing-lg);
  width: 100%;
}
.page-machine-temperatures ~ .popup-parametres-avances .div-field-mdp {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xs);
}
.page-machine-temperatures ~ .popup-parametres-avances .div-field-mdp label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-temperatures ~ .popup-parametres-avances .div-field-mdp.disabled {
  opacity: 0.5;
}
.page-machine-temperatures ~ .popup-parametres-avances .div-field-mdp.disabled .button-modifier-mdp {
  pointer-events: none;
}
.page-machine-temperatures ~ .popup-parametres-avances .input-mdp-wrapper {
  display: flex;
  align-items: center;
  height: 44px;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  padding: 4px;
  gap: 4px;
}
.page-machine-temperatures ~ .popup-parametres-avances .input-mdp {
  flex: 1;
  min-width: 0;
  height: 36px;
  border: none;
  background: transparent;
  font-family: var(--md-font-family);
  font-size: 14px;
  color: #0a0a0a;
  padding: 0 8px 0 12px;
  outline: none;
  box-shadow: none;
}
.page-machine-temperatures ~ .popup-parametres-avances .input-mdp:focus {
  border: none;
  outline: none;
  box-shadow: none;
}
.page-machine-temperatures ~ .popup-parametres-avances .input-mdp.input-error {
  color: var(--md-color-red-200);
}
.page-machine-temperatures ~ .popup-parametres-avances .button-modifier-mdp {
  flex-shrink: 0;
  height: 36px;
  padding: 8px 16px;
  font-size: 14px;
  white-space: nowrap;
}
.page-machine-temperatures ~ .popup-parametres-avances .div-field-teamviewer {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: var(--md-spacing-lg);
  gap: var(--md-spacing-lg);
}
.page-machine-temperatures ~ .popup-parametres-avances .div-field-teamviewer label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
  white-space: nowrap;
}
.page-machine-temperatures ~ .popup-parametres-avances .input-teamviewer {
  flex: 1;
  height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
}
.page-machine-temperatures ~ .popup-parametres-avances .input-teamviewer::placeholder {
  color: var(--md-color-neutrals-300);
}
.page-machine-temperatures ~ .popup-parametres-avances .footer-popup-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 17px;
  border-top: 1px solid var(--md-color-neutrals-150);
  margin-top: var(--md-spacing-2xl);
}
.page-machine-temperatures ~ .popup-parametres-avances .footer-popup-action .button-annuler {
  min-width: 88px;
}
.page-machine-temperatures ~ .popup-parametres-avances .footer-popup-action .button-enregistrer-popup {
  min-width: 108px;
}
.page-machine-temperatures ~ .popup-parametres-avances .btn-primary {
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.page-machine-temperatures ~ .popup-parametres-avances .btn-primary:hover {
  background: var(--md-color-blue-400);
}
.page-machine-temperatures ~ .popup-parametres-avances .btn-primary.disabled, .page-machine-temperatures ~ .popup-parametres-avances .btn-primary:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.page-machine-temperatures ~ .popup-parametres-avances .btn-primary-small {
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.page-machine-temperatures ~ .popup-parametres-avances .btn-outline {
  background: transparent;
  color: var(--md-color-blue-450);
  border: 1px solid var(--md-color-blue-400);
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.4s;
}
.page-machine-temperatures ~ .popup-parametres-avances .btn-outline:hover {
  border: 1px solid var(--md-color-green-200);
  color: var(--md-color-green-200);
}
@media (max-width: 768px) {
  .page-machine-temperatures ~ .popup-parametres-avances {
    width: 95%;
    padding: var(--md-spacing-lg);
  }
  .page-machine-temperatures ~ .popup-parametres-avances .div-taux-columns {
    flex-direction: column;
  }
  .page-machine-temperatures ~ .popup-parametres-avances .div-taux-disponibles,
  .page-machine-temperatures ~ .popup-parametres-avances .div-taux-machine-priorises {
    width: 100%;
  }
  .page-machine-temperatures ~ .popup-parametres-avances .div-transfer-buttons-add,
  .page-machine-temperatures ~ .popup-parametres-avances .div-transfer-buttons-reorder {
    flex-direction: row;
    width: 100%;
    height: auto;
  }
}
@media (max-width: 719px) {
  .page-machine-temperatures ~ .popup-parametres-avances {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    transform: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .page-machine-temperatures ~ .popup-parametres-avances .popup-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--md-color-neutrals-100);
    flex-shrink: 0;
  }
  .page-machine-temperatures ~ .popup-parametres-avances .section-popup-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }
  .page-machine-temperatures ~ .popup-parametres-avances .div-popup-content h2 {
    font-size: 18px;
  }
  .page-machine-temperatures ~ .popup-parametres-avances .nav-popup-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .page-machine-temperatures ~ .popup-parametres-avances .li-tab-popup {
    flex-shrink: 0;
    font-size: 12px;
    padding: var(--md-spacing-sm);
    white-space: nowrap;
  }
  .page-machine-temperatures ~ .popup-parametres-avances .popup-tab-content {
    margin-top: var(--md-spacing-lg);
  }
  .page-machine-temperatures ~ .popup-parametres-avances .div-field-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-sm);
  }
  .page-machine-temperatures ~ .popup-parametres-avances .select-wrapper {
    width: 100%;
  }
  .page-machine-temperatures ~ .popup-parametres-avances .select-wrapper select {
    width: 100%;
  }
  .page-machine-temperatures ~ .popup-parametres-avances .popup-tab-content input[type=number],
  .page-machine-temperatures ~ .popup-parametres-avances .popup-tab-content input[type=text] {
    width: 100%;
  }
  .page-machine-temperatures ~ .popup-parametres-avances .div-fields-passwords {
    flex-direction: column;
  }
  .page-machine-temperatures ~ .popup-parametres-avances .div-field-teamviewer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-sm);
  }
}

/* ========================================
   Page Sonde évaporateur - Styles SCSS
   Scope: .page-machine-sonde-evaporateur
   ======================================== */
.page-machine-sonde-evaporateur {
  --temp-color-blue-500: #110f2c;
  --temp-color-blue-450: #161338;
  --temp-color-blue-400: #1b1846;
  --temp-color-blue-300: #262262;
  --temp-color-blue-150: #a2a0bb;
  --temp-color-neutrals-500: #1e1e1e;
  --temp-color-neutrals-450: #3d3d3d;
  --temp-color-neutrals-400: #5e5e5e;
  --temp-color-neutrals-350: #828282;
  --temp-color-neutrals-300: #a7a7a7;
  --temp-color-neutrals-150: #ddd;
  --temp-color-neutrals-100: #f1f1f1;
  --temp-color-neutrals-50: #ffffff;
  --temp-color-green-450: #213e2d;
  --temp-color-green-400: #3b7051;
  --temp-color-green-350: #4a8c65;
  --temp-color-green-200: #62ba87;
  --temp-color-green-bg: rgba(98, 186, 135, 0.1);
  --temp-color-orange-400: #c97a20;
  --temp-color-orange-bg: rgba(201, 122, 32, 0.1);
  --temp-color-red-200: #c14039;
  --temp-color-red-accent: #fb2c36;
  --temp-color-red-bg: rgba(193, 64, 57, 0.1);
  --temp-spacing-xs: 4px;
  --temp-spacing-sm: 8px;
  --temp-spacing-md: 12px;
  --temp-spacing-lg: 16px;
  --temp-spacing-xl: 20px;
  --temp-spacing-2xl: 24px;
  --temp-spacing-3xl: 28px;
  --temp-spacing-4xl: 32px;
  --temp-spacing-5xl: 40px;
  --temp-radius-sm: 4px;
  --temp-radius-md: 8px;
  display: flex;
  min-height: 100vh;
  width: 100%;
}
.page-machine-sonde-evaporateur .aside-sidebar-placeholder {
  display: none;
}
.page-machine-sonde-evaporateur .section-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--temp-spacing-xl);
  padding: var(--temp-spacing-3xl);
  padding-bottom: var(--temp-spacing-xl);
  overflow: hidden;
  background: linear-gradient(131.32deg, rgb(248, 249, 250) 0%, rgb(245, 244, 255) 100.57%);
  position: relative;
  height: 100vh;
}
.page-machine-sonde-evaporateur .section-temperatures-content {
  display: flex;
  flex-direction: column;
  gap: var(--temp-spacing-xl);
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.page-machine-sonde-evaporateur .section-temperatures-content::-webkit-scrollbar {
  width: 6px;
}
.page-machine-sonde-evaporateur .section-temperatures-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.page-machine-sonde-evaporateur .section-temperatures-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
.page-machine-sonde-evaporateur .section-temperatures-content::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}
.page-machine-sonde-evaporateur .hidden {
  display: none !important;
}
.page-machine-sonde-evaporateur .header-page-top {
  display: flex;
  flex-direction: column;
  gap: var(--temp-spacing-sm);
  padding-bottom: var(--temp-spacing-xl);
  border-bottom: 1px solid var(--temp-color-neutrals-100);
}
.page-machine-sonde-evaporateur .button-retour {
  display: flex;
  align-items: center;
  gap: var(--temp-spacing-xs);
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--temp-color-neutrals-500);
}
.page-machine-sonde-evaporateur .button-retour .icon-arrow-back {
  width: 16px;
  height: 16px;
}
.page-machine-sonde-evaporateur .div-machine-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--temp-spacing-4xl);
}
.page-machine-sonde-evaporateur .div-machine-info {
  display: flex;
  flex-direction: column;
  gap: var(--temp-spacing-sm);
  flex: 1;
}
.page-machine-sonde-evaporateur .div-machine-identite {
  display: flex;
  align-items: center;
  gap: var(--temp-spacing-md);
}
.page-machine-sonde-evaporateur .machine-name {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--temp-color-blue-450);
}
.page-machine-sonde-evaporateur .span-badge-version {
  padding: 4.8px 8.8px;
  border: 0.8px solid var(--temp-color-neutrals-150);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  color: #0a0a0a;
}
.page-machine-sonde-evaporateur .activation-badge {
  display: flex;
  align-items: center;
  gap: var(--temp-spacing-sm);
  padding: var(--temp-spacing-sm) var(--temp-spacing-md);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
.page-machine-sonde-evaporateur .activation-badge--active {
  background: rgba(98, 186, 135, 0.1);
  color: var(--temp-color-green-400);
}
.page-machine-sonde-evaporateur .activation-badge--active .status-icon {
  background: var(--temp-color-green-200);
}
.page-machine-sonde-evaporateur .activation-badge--inactive {
  background: rgba(193, 64, 57, 0.1);
  color: var(--temp-color-red-200);
}
.page-machine-sonde-evaporateur .activation-badge--inactive .status-icon {
  background: var(--temp-color-red-200);
}
.page-machine-sonde-evaporateur .activation-badge--virtuelle {
  background: rgba(38, 34, 98, 0.1);
  color: var(--temp-color-blue-300);
}
.page-machine-sonde-evaporateur .activation-badge--virtuelle .status-icon {
  background: var(--temp-color-blue-300);
}
.page-machine-sonde-evaporateur .activation-badge .status-icon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.page-machine-sonde-evaporateur .last-sync {
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  color: var(--temp-color-neutrals-350);
}
.page-machine-sonde-evaporateur .div-localisation {
  display: flex;
  align-items: center;
  gap: var(--temp-spacing-lg);
}
.page-machine-sonde-evaporateur .machine-number {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--temp-color-neutrals-400);
}
.page-machine-sonde-evaporateur .location-info {
  display: flex;
  align-items: center;
  gap: var(--temp-spacing-xs);
}
.page-machine-sonde-evaporateur .location-info .icon-pin {
  width: 16px;
  height: 16px;
}
.page-machine-sonde-evaporateur .location-info span {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--temp-color-neutrals-350);
}
.page-machine-sonde-evaporateur .btn-primary {
  background: var(--temp-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--temp-spacing-sm) var(--temp-spacing-lg);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.page-machine-sonde-evaporateur .btn-primary:hover {
  background: var(--temp-color-blue-400);
}
.page-machine-sonde-evaporateur .nav-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--temp-spacing-lg);
}
.page-machine-sonde-evaporateur .ul-tabs-list {
  display: flex;
  align-items: center;
  list-style: none;
  background: var(--temp-color-neutrals-50);
  border: 1px solid var(--temp-color-neutrals-100);
  border-radius: 4px;
  padding: 0 var(--temp-spacing-xs);
  margin: 0;
}
.page-machine-sonde-evaporateur .li-tab {
  font-size: 14px;
  font-weight: 600;
  color: var(--temp-color-blue-150);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.page-machine-sonde-evaporateur .li-tab a {
  display: block;
  padding: var(--temp-spacing-md);
  color: inherit;
  text-decoration: none;
}
.page-machine-sonde-evaporateur .li-tab:hover {
  color: var(--temp-color-blue-300);
}
.page-machine-sonde-evaporateur .li-tab.active {
  color: var(--temp-color-blue-300);
  border-bottom-color: var(--temp-color-blue-300);
}
.page-machine-sonde-evaporateur .section-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  z-index: 5;
}
.page-machine-sonde-evaporateur .input-date {
  display: flex;
  flex-direction: row;
  height: 42px;
  width: 254px;
  min-width: 254px;
  max-width: 254px;
  border-radius: var(--temp-radius-sm);
  background: var(--temp-color-neutrals-50);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  border: 1px solid transparent;
  transition: 0.4s;
}
.page-machine-sonde-evaporateur .input-date:hover {
  border-color: var(--temp-color-neutrals-150);
}
.page-machine-sonde-evaporateur .input-date p {
  margin-right: auto;
  color: var(--temp-color-blue-300);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.page-machine-sonde-evaporateur .input-date .svg:first-child {
  margin-left: 16px;
  margin-right: 8px;
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-machine-sonde-evaporateur .input-date .svg.last {
  margin-right: 16px;
  margin-left: 8px;
  height: 12px;
  width: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-machine-sonde-evaporateur .input-date .option-date-court {
  cursor: auto;
  left: 0;
  bottom: -381px;
  position: absolute;
  width: 254px;
  height: 381px;
  border-radius: 0 0 0 12px;
  background: var(--temp-color-neutrals-50);
  display: none;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.page-machine-sonde-evaporateur .input-date .option-date-court.--actif {
  display: flex;
}
.page-machine-sonde-evaporateur .input-date .option-date-court .titre-date-court {
  height: 53px;
  margin: 16px 16px 0 16px;
  width: calc(100% - 32px);
  border-bottom: 1px solid rgba(38, 34, 98, 0.1);
  display: flex;
  flex-direction: column;
}
.page-machine-sonde-evaporateur .input-date .option-date-court .titre-date-court p {
  margin: 12px 0 20px 0;
  color: var(--temp-color-blue-400);
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  height: 21px;
  width: 100%;
}
.page-machine-sonde-evaporateur .input-date .option-date-court .menu-date-court {
  margin: 20px 16px 0 16px;
  gap: 4px;
  display: flex;
  flex-direction: column;
}
.page-machine-sonde-evaporateur .input-date .option-date-court .menu-date-court .btn-date {
  width: 100%;
  gap: 15px;
  height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}
.page-machine-sonde-evaporateur .input-date .option-date-court .menu-date-court .btn-date span.check {
  height: 12px;
  width: 12px;
  min-height: 12px;
  min-width: 12px;
  border: 1.5px solid var(--temp-color-blue-150);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
}
.page-machine-sonde-evaporateur .input-date .option-date-court .menu-date-court .btn-date span.check span.centre {
  transition: 0.4s;
}
.page-machine-sonde-evaporateur .input-date .option-date-court .menu-date-court .btn-date p {
  color: var(--temp-color-blue-150);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  transition: 0.4s;
}
.page-machine-sonde-evaporateur .input-date .option-date-court .menu-date-court .btn-date:hover p {
  color: var(--temp-color-blue-300);
}
.page-machine-sonde-evaporateur .input-date .option-date-court .menu-date-court .btn-date:hover span.check {
  border: 1.5px solid var(--temp-color-blue-300);
}
.page-machine-sonde-evaporateur .input-date .option-date-court .menu-date-court .btn-date:hover span.check span.centre {
  height: 8px;
  width: 8px;
  background-color: var(--temp-color-blue-300);
  border-radius: 100%;
}
.page-machine-sonde-evaporateur .input-date .option-date-court .menu-date-court .btn-date.--actif span.check {
  border: 1.5px solid var(--temp-color-blue-300);
}
.page-machine-sonde-evaporateur .input-date .option-date-court .menu-date-court .btn-date.--actif span.check span.centre {
  height: 8px;
  width: 8px;
  background-color: var(--temp-color-blue-300);
  border-radius: 100%;
}
.page-machine-sonde-evaporateur .input-date .option-date-court .menu-date-court .btn-date.--actif p {
  color: var(--temp-color-blue-300);
}
.page-machine-sonde-evaporateur .input-date .option-date-court button.date-perso {
  display: flex;
  height: 42px;
  margin: 20px 16px 0 16px;
  width: calc(100% - 32px);
  align-items: center;
  gap: 14px;
  border-radius: var(--temp-radius-sm);
  outline: none;
  border: none;
  background: rgba(38, 34, 98, 0.05);
  color: var(--temp-color-blue-300);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.4s;
}
.page-machine-sonde-evaporateur .input-date .option-date-court button.date-perso:hover {
  background-color: var(--temp-color-blue-300);
  color: #fff;
}
.page-machine-sonde-evaporateur .input-date .option-date-court button.date-perso:hover svg path[stroke] {
  stroke: #fff;
}
.page-machine-sonde-evaporateur .input-date .option-date-court button.date-perso:hover svg path[fill] {
  fill: #fff;
}
.page-machine-sonde-evaporateur .input-date .option-date-court button.date-perso svg {
  margin-left: 16px;
  transition: 0.4s;
}
.page-machine-sonde-evaporateur .input-date .option-date-court button.date-perso svg path[stroke] {
  transition: 0.4s;
}
.page-machine-sonde-evaporateur .input-date .option-date-court button.date-perso svg path[fill] {
  transition: 0.4s;
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours {
  width: 296px;
  height: 381px;
  cursor: auto;
  left: 254px;
  bottom: -381px;
  position: absolute;
  border-radius: 0 0 12px 0;
  background: var(--temp-color-neutrals-50);
  display: none;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours.--actif {
  display: flex;
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .retour {
  display: none;
  align-items: center;
  flex-direction: row;
  margin: 20px 24px 0 24px;
  cursor: pointer;
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .retour p {
  margin: 0 0 0 10px;
  color: var(--temp-color-neutrals-400);
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .titre-date-court {
  display: none;
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .titre-date-jours {
  height: 52px;
  display: flex;
  width: 264px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 16px 16px 0 16px;
  border-bottom: 1px solid rgba(38, 34, 98, 0.1);
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .titre-date-jours .svg {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  cursor: pointer;
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .titre-date-jours p {
  width: 152px;
  max-width: 152px;
  margin: 0;
  color: var(--temp-color-blue-300);
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .weekdays {
  width: 224px;
  height: 32px;
  margin: 20px auto 0 auto;
  display: flex;
  flex-direction: row;
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .weekdays .weekday {
  height: 32px;
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--temp-color-blue-150);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .days-grid {
  display: grid;
  margin: 8px auto 0 auto;
  grid-template-columns: repeat(7, 32px);
  gap: 0;
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .days-grid.three {
  grid-template-columns: repeat(3, 1fr);
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .day-btn {
  aspect-ratio: 1;
  height: 32px;
  color: var(--temp-color-neutrals-400);
  border: none;
  background-color: transparent;
  border-radius: 0;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .day-btn:hover:not(:disabled) {
  background: rgba(38, 34, 98, 0.1);
  border-radius: var(--temp-radius-sm);
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .day-btn:disabled {
  background: transparent;
  cursor: default;
  color: transparent;
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .day-btn.in-range {
  background: rgba(38, 34, 98, 0.1);
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .day-btn.endpoint {
  background: var(--temp-color-blue-300) !important;
  color: var(--temp-color-neutrals-50);
  border-radius: var(--temp-radius-sm);
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .day-btn.today {
  border: 2px solid var(--temp-color-blue-300);
  border-radius: var(--temp-radius-sm);
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .month-btn,
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .year-btn {
  height: 61px;
  width: 75px;
  color: var(--temp-color-neutrals-400);
  border: none;
  background-color: transparent;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .month-btn:hover,
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .year-btn:hover {
  background: rgba(38, 34, 98, 0.1);
  border-radius: var(--temp-radius-sm);
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .month-btn.endpoint,
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .year-btn.endpoint {
  background: var(--temp-color-blue-300) !important;
  color: var(--temp-color-neutrals-50);
  border-radius: var(--temp-radius-sm);
}
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .month-btn.today,
.page-machine-sonde-evaporateur .input-date .menu-periode-jours .year-btn.today {
  border: 2px solid var(--temp-color-blue-300);
  border-radius: var(--temp-radius-sm);
}
.page-machine-sonde-evaporateur .background {
  position: absolute;
  display: none;
  left: -100vh;
  height: 0;
  width: 0;
}
.page-machine-sonde-evaporateur .button-actualiser-donnees {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--temp-spacing-sm);
  min-width: 184px;
  padding: var(--temp-spacing-sm) var(--temp-spacing-lg);
  background-color: var(--temp-color-green-200);
  color: var(--temp-color-green-450);
  border: none;
  border-radius: var(--temp-radius-sm);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.page-machine-sonde-evaporateur .button-actualiser-donnees .button-loading {
  display: flex;
  align-items: center;
  gap: var(--temp-spacing-sm);
}
.page-machine-sonde-evaporateur .button-actualiser-donnees:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.page-machine-sonde-evaporateur .badge {
  display: inline-flex;
  align-items: center;
  gap: var(--temp-spacing-sm);
  padding: var(--temp-spacing-sm) var(--temp-spacing-md);
  border-radius: var(--temp-radius-sm);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  width: fit-content;
}
.page-machine-sonde-evaporateur .badge-small {
  padding: 6px 10px;
  width: fit-content;
}
.page-machine-sonde-evaporateur .badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.page-machine-sonde-evaporateur .badge-success {
  background-color: var(--temp-color-green-bg);
  color: var(--temp-color-green-400);
}
.page-machine-sonde-evaporateur .badge-success .badge-dot {
  background-color: var(--temp-color-green-200);
}
.page-machine-sonde-evaporateur .badge-warning {
  background-color: var(--temp-color-orange-bg);
  color: var(--temp-color-orange-400);
}
.page-machine-sonde-evaporateur .badge-warning .badge-dot {
  background-color: #f59e0b;
}
.page-machine-sonde-evaporateur .badge-danger {
  background-color: var(--temp-color-red-bg);
  color: var(--temp-color-red-200);
}
.page-machine-sonde-evaporateur .badge-danger .badge-dot {
  background-color: var(--temp-color-red-200);
}
.page-machine-sonde-evaporateur .section-kpis-temperature {
  display: flex;
  align-items: stretch;
  gap: var(--temp-spacing-5xl);
  width: 100%;
}
.page-machine-sonde-evaporateur .article-card-kpi {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--temp-spacing-lg);
  padding: var(--temp-spacing-lg);
  background-color: var(--temp-color-neutrals-50);
  border: 1px solid var(--temp-color-neutrals-100);
  border-radius: var(--temp-radius-md);
}
.page-machine-sonde-evaporateur .kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: #000;
}
.page-machine-sonde-evaporateur .kpi-value {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
}
.page-machine-sonde-evaporateur .kpi-value-success {
  color: var(--temp-color-green-350);
}
.page-machine-sonde-evaporateur .kpi-content {
  display: flex;
  align-items: center;
  gap: var(--temp-spacing-lg);
}
.page-machine-sonde-evaporateur .section-machine-details {
  display: flex;
  flex-direction: column;
  gap: var(--temp-spacing-xl);
  padding: 25px;
  background-color: var(--temp-color-neutrals-50);
  border: 1px solid var(--temp-color-neutrals-100);
  border-radius: var(--temp-radius-md);
  width: 100%;
}
.page-machine-sonde-evaporateur .section-machine-details.collapsed {
  padding-bottom: 15px;
}
.page-machine-sonde-evaporateur .section-machine-details.collapsed .div-temperature-cards-grid {
  display: none;
}
.page-machine-sonde-evaporateur .details-machine-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.page-machine-sonde-evaporateur .div-machine-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  cursor: pointer;
}
.page-machine-sonde-evaporateur .div-machine-title .img-icon-chevron-down {
  transition: transform 0.3s ease;
}
.page-machine-sonde-evaporateur .div-machine-title.collapsed .img-icon-chevron-down {
  transform: rotate(-90deg);
}
.page-machine-sonde-evaporateur .machine-section-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 28px;
  color: var(--temp-color-blue-300);
}
.page-machine-sonde-evaporateur .div-machine-status {
  display: flex;
  align-items: center;
}
.page-machine-sonde-evaporateur .div-temperature-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--temp-spacing-lg);
}
.page-machine-sonde-evaporateur .empty-state {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--temp-spacing-5xl) var(--temp-spacing-2xl);
}
.page-machine-sonde-evaporateur .empty-state p {
  margin: 0;
  font-size: 14px;
  color: var(--temp-color-neutrals-400);
  text-align: center;
}
.page-machine-sonde-evaporateur .article-temperature-card {
  display: flex;
  flex-direction: column;
  gap: var(--temp-spacing-lg);
  padding: var(--temp-spacing-2xl);
  padding-top: var(--temp-spacing-2xl);
  padding-bottom: var(--temp-spacing-lg);
  background-color: var(--temp-color-neutrals-50);
  border: 1px solid var(--temp-color-neutrals-100);
  border-radius: var(--temp-radius-md);
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.page-machine-sonde-evaporateur .article-temperature-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.page-machine-sonde-evaporateur .article-temperature-card.selected {
  transform: translateY(-2px);
}
.page-machine-sonde-evaporateur .article-temperature-card:focus-visible {
  outline: 2px solid var(--temp-color-blue-300);
  outline-offset: 2px;
}
.page-machine-sonde-evaporateur .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.page-machine-sonde-evaporateur .armoire-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: var(--temp-color-blue-450);
}
.page-machine-sonde-evaporateur .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.page-machine-sonde-evaporateur .status-dot-normal {
  background-color: var(--temp-color-green-200);
}
.page-machine-sonde-evaporateur .status-dot-attention {
  background-color: #f59e0b;
}
.page-machine-sonde-evaporateur .status-dot-critique {
  background-color: var(--temp-color-red-200);
}
.page-machine-sonde-evaporateur .temperature-display {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.page-machine-sonde-evaporateur .temperature-main {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.page-machine-sonde-evaporateur .temperature-value {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--temp-color-blue-500);
}
.page-machine-sonde-evaporateur .temperature-value--na {
  color: var(--temp-color-neutrals-400, #a0a0a0);
  font-weight: 500;
}
.page-machine-sonde-evaporateur .temperature-unit {
  font-size: 18px;
  font-weight: 600;
  color: var(--temp-color-neutrals-450);
}
.page-machine-sonde-evaporateur .temperature-unit--na {
  color: var(--temp-color-neutrals-400, #a0a0a0);
}
.page-machine-sonde-evaporateur .icon-thermometer {
  opacity: 0.5;
}
.page-machine-sonde-evaporateur .derniere-maj {
  font-size: 10px;
  font-weight: 400;
  color: var(--temp-color-neutrals-300);
  text-align: right;
}
.page-machine-sonde-evaporateur .stats-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--temp-spacing-lg);
  padding: var(--temp-spacing-sm) var(--temp-spacing-4xl);
  border-top: 1px solid var(--temp-color-neutrals-150);
  opacity: 0.8;
}
.page-machine-sonde-evaporateur .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-machine-sonde-evaporateur .stat-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  color: var(--temp-color-neutrals-400);
}
.page-machine-sonde-evaporateur .stat-value {
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  color: #000;
}
.page-machine-sonde-evaporateur .stats-note {
  font-size: 7px;
  font-weight: 400;
  color: var(--temp-color-neutrals-400);
}
.page-machine-sonde-evaporateur .section-details-mesures {
  display: flex;
  flex-direction: column;
  gap: var(--temp-spacing-xl);
  width: 100%;
}
.page-machine-sonde-evaporateur .div-details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.page-machine-sonde-evaporateur .details-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--temp-color-blue-300);
}
.page-machine-sonde-evaporateur .div-actions-header-buttons {
  display: flex;
  align-items: center;
  gap: var(--temp-spacing-md);
}
.page-machine-sonde-evaporateur .button-exporter-csv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--temp-spacing-sm);
  min-width: 141px;
  padding: var(--temp-spacing-sm) var(--temp-spacing-lg);
  background-color: transparent;
  color: var(--temp-color-blue-450);
  border: 1px solid var(--temp-color-blue-400);
  border-radius: var(--temp-radius-sm);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.4s;
}
.page-machine-sonde-evaporateur .button-exporter-csv:hover {
  border-color: var(--temp-color-green-200);
  color: var(--temp-color-green-200);
}
.page-machine-sonde-evaporateur .button-fermer-details {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--temp-spacing-sm);
  min-width: 82px;
  padding: var(--temp-spacing-sm) var(--temp-spacing-lg);
  background-color: var(--temp-color-blue-300);
  color: white;
  border: none;
  border-radius: var(--temp-radius-sm);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.page-machine-sonde-evaporateur .div-table-wrapper {
  width: 100%;
  overflow-x: auto;
}
.page-machine-sonde-evaporateur .table-mesures-temperature {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--temp-color-neutrals-50);
}
.page-machine-sonde-evaporateur .table-mesures-temperature th,
.page-machine-sonde-evaporateur .table-mesures-temperature td {
  padding: 14px 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--temp-color-neutrals-100);
  border-bottom: none;
}
.page-machine-sonde-evaporateur .table-mesures-temperature thead tr:first-child th {
  text-align: left;
  padding-left: 20px;
  color: var(--temp-color-blue-300);
  border-top-left-radius: var(--temp-radius-sm);
  border-top-right-radius: var(--temp-radius-sm);
}
.page-machine-sonde-evaporateur .table-mesures-temperature thead tr:last-child th {
  color: var(--temp-color-blue-300);
}
.page-machine-sonde-evaporateur .table-mesures-temperature tbody td {
  font-weight: 600;
  color: var(--temp-color-neutrals-450);
}
.page-machine-sonde-evaporateur .table-mesures-temperature tbody tr:last-child td {
  border-bottom: 1px solid var(--temp-color-neutrals-100);
}
.page-machine-sonde-evaporateur .table-mesures-temperature tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--temp-radius-sm);
}
.page-machine-sonde-evaporateur .table-mesures-temperature tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--temp-radius-sm);
}
.page-machine-sonde-evaporateur .spinner {
  animation: spin-temp 1s linear infinite;
}
@keyframes spin-temp {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.page-machine-sonde-evaporateur button:focus-visible {
  outline: 2px solid var(--temp-color-blue-300);
  outline-offset: 2px;
}
.page-machine-sonde-evaporateur button:hover {
  opacity: 0.9;
}
@media (max-width: 1200px) {
  .page-machine-sonde-evaporateur .section-kpis-temperature {
    gap: var(--temp-spacing-xl);
  }
  .page-machine-sonde-evaporateur .div-temperature-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
@media (max-width: 992px) {
  .page-machine-sonde-evaporateur .section-kpis-temperature {
    flex-wrap: wrap;
  }
  .page-machine-sonde-evaporateur .article-card-kpi {
    min-width: calc(50% - var(--temp-spacing-xl) / 2);
  }
  .page-machine-sonde-evaporateur .div-machine-title-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--temp-spacing-lg);
  }
  .page-machine-sonde-evaporateur .ul-tabs-list {
    flex-wrap: wrap;
  }
}
@media (max-width: 768px) {
  .page-machine-sonde-evaporateur .aside-sidebar-placeholder {
    display: none;
  }
  .page-machine-sonde-evaporateur .section-main-content {
    padding: var(--temp-spacing-lg);
  }
  .page-machine-sonde-evaporateur .article-card-kpi {
    min-width: 100%;
  }
  .page-machine-sonde-evaporateur .div-temperature-cards-grid {
    grid-template-columns: 1fr;
  }
  .page-machine-sonde-evaporateur .section-buttons {
    flex-direction: column;
    gap: var(--temp-spacing-md);
    align-items: stretch;
  }
  .page-machine-sonde-evaporateur .button-actualiser-donnees {
    width: 100%;
  }
  .page-machine-sonde-evaporateur .div-machine-identite {
    flex-wrap: wrap;
  }
  .page-machine-sonde-evaporateur .header-page-top {
    gap: var(--temp-spacing-md);
  }
  .page-machine-sonde-evaporateur .button-retour {
    padding: var(--temp-spacing-sm) 0;
  }
  .page-machine-sonde-evaporateur .nav-tabs-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-machine-sonde-evaporateur .ul-tabs-list {
    width: 100%;
    overflow-x: auto;
  }
}
@media (max-width: 719px) {
  .page-machine-sonde-evaporateur {
    padding-top: 72px;
    overflow: hidden;
    height: 100svh;
  }
  .page-machine-sonde-evaporateur::before {
    content: "Sonde évaporateur";
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
    height: 72px;
    min-height: 72px;
    padding-left: 80px;
    padding-top: 8px;
    background: var(--temp-color-neutrals-50);
    border-radius: 0 0 8px 8px;
    z-index: 3;
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #262262;
    line-height: normal;
    box-sizing: border-box;
  }
  .page-machine-sonde-evaporateur .section-main-content {
    padding: var(--temp-spacing-xl);
    height: calc(100svh - 72px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .page-machine-sonde-evaporateur .header-page-top {
    display: none;
  }
  .page-machine-sonde-evaporateur .header-page-top:has(.button-parametres-avances) {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    border-bottom: none;
    padding-bottom: 0;
    align-items: center;
    justify-content: space-between;
  }
  .page-machine-sonde-evaporateur .button-retour {
    display: flex;
  }
  .page-machine-sonde-evaporateur .div-machine-info {
    display: none;
  }
  .page-machine-sonde-evaporateur .div-machine-title-bar {
    width: auto;
  }
  .page-machine-sonde-evaporateur .button-parametres-avances {
    width: auto;
  }
  .page-machine-sonde-evaporateur .nav-tabs-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--temp-spacing-md);
    flex-shrink: 0;
  }
  .page-machine-sonde-evaporateur .ul-tabs-list {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-machine-sonde-evaporateur .ul-tabs-list::-webkit-scrollbar {
    display: none;
  }
  .page-machine-sonde-evaporateur .li-tab {
    flex-shrink: 0;
    font-size: 12px;
  }
  .page-machine-sonde-evaporateur .li-tab a {
    padding: var(--temp-spacing-sm) var(--temp-spacing-md);
    white-space: nowrap;
  }
  .page-machine-sonde-evaporateur .section-buttons {
    flex-direction: column;
    gap: var(--temp-spacing-md);
    align-items: stretch;
    flex-shrink: 0;
  }
  .page-machine-sonde-evaporateur .input-date {
    width: 100%;
    min-width: unset;
    max-width: unset;
  }
  .page-machine-sonde-evaporateur .input-date .option-date-court {
    width: 100%;
    border-radius: 0 0 12px 12px;
  }
  .page-machine-sonde-evaporateur .input-date .menu-periode-jours {
    width: 100%;
    left: 0;
    border-radius: 0 0 12px 12px;
  }
  .page-machine-sonde-evaporateur .input-date .menu-periode-jours .retour {
    display: flex;
  }
  .page-machine-sonde-evaporateur .input-date .menu-periode-jours .titre-date-court {
    display: flex;
  }
  .page-machine-sonde-evaporateur .button-actualiser-donnees {
    width: 100%;
    min-width: unset;
  }
  .page-machine-sonde-evaporateur .section-temperatures-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-bottom: var(--temp-spacing-4xl);
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-machine-sonde-evaporateur .section-temperatures-content::-webkit-scrollbar {
    display: none;
  }
  .page-machine-sonde-evaporateur .section-kpis-temperature {
    flex-direction: column;
    gap: var(--temp-spacing-md);
  }
  .page-machine-sonde-evaporateur .article-card-kpi {
    min-width: unset;
  }
  .page-machine-sonde-evaporateur .section-machine-details {
    padding: var(--temp-spacing-lg);
  }
  .page-machine-sonde-evaporateur .div-temperature-cards-grid {
    grid-template-columns: 1fr;
  }
  .page-machine-sonde-evaporateur .article-temperature-card {
    padding: var(--temp-spacing-lg);
  }
  .page-machine-sonde-evaporateur .div-details-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--temp-spacing-md);
  }
  .page-machine-sonde-evaporateur .div-actions-header-buttons {
    width: 100%;
  }
  .page-machine-sonde-evaporateur .div-actions-header-buttons button {
    flex: 1;
  }
  .page-machine-sonde-evaporateur .div-table-wrapper {
    overflow-x: visible;
  }
  .page-machine-sonde-evaporateur .table-mesures-temperature {
    min-width: unset;
    border-collapse: separate;
    border-spacing: 0 var(--temp-spacing-md);
  }
  .page-machine-sonde-evaporateur .table-mesures-temperature thead .tr-table-title {
    display: block;
    margin-bottom: var(--temp-spacing-sm);
  }
  .page-machine-sonde-evaporateur .table-mesures-temperature thead .tr-table-title .th-armoire-name {
    display: block;
    border: none;
    padding: var(--temp-spacing-sm) var(--temp-spacing-md);
    font-size: 16px;
  }
  .page-machine-sonde-evaporateur .table-mesures-temperature thead .tr-column-headers {
    display: none;
  }
  .page-machine-sonde-evaporateur .table-mesures-temperature tbody {
    display: flex;
    flex-direction: column;
    gap: var(--temp-spacing-md);
  }
  .page-machine-sonde-evaporateur .table-mesures-temperature .tr-data-row {
    display: flex;
    flex-direction: column;
    background: var(--temp-color-neutrals-50);
    border: 1px solid var(--temp-color-neutrals-100);
    border-radius: var(--temp-radius-md);
    padding: var(--temp-spacing-lg);
    margin: 0 var(--temp-spacing-md);
    gap: var(--temp-spacing-sm);
  }
  .page-machine-sonde-evaporateur .table-mesures-temperature .tr-data-row td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--temp-spacing-xs) 0;
    border: none;
    font-size: 13px;
  }
  .page-machine-sonde-evaporateur .table-mesures-temperature .tr-data-row td::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 600;
    color: var(--temp-color-neutrals-350);
    flex-shrink: 0;
    margin-right: var(--temp-spacing-lg);
  }
  .page-machine-sonde-evaporateur .table-mesures-temperature tbody tr:last-child td {
    border-bottom: none;
  }
  .page-machine-sonde-evaporateur .toast-container {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
}
.page-machine-sonde-evaporateur .toast-container {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-machine-sonde-evaporateur .toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--temp-color-neutrals-50);
  border: 1px solid var(--temp-color-neutrals-100);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--temp-color-neutrals-500);
  animation: toast-slide-in-temp 0.3s ease-out;
}
.page-machine-sonde-evaporateur .toast.toast-fade-out {
  animation: toast-slide-out-temp 0.3s ease-in forwards;
}
.page-machine-sonde-evaporateur .toast--info {
  border-left: 4px solid var(--temp-color-blue-300);
}
.page-machine-sonde-evaporateur .toast--info .toast-icon {
  color: var(--temp-color-blue-300);
}
.page-machine-sonde-evaporateur .toast--success {
  border-left: 4px solid var(--temp-color-green-200);
}
.page-machine-sonde-evaporateur .toast--success .toast-icon {
  color: var(--temp-color-green-200);
}
.page-machine-sonde-evaporateur .toast--error {
  border-left: 4px solid var(--temp-color-red-200);
}
.page-machine-sonde-evaporateur .toast--error .toast-icon {
  color: var(--temp-color-red-200);
}
@keyframes toast-slide-in-temp {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes toast-slide-out-temp {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
.page-machine-sonde-evaporateur .toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.page-machine-sonde-evaporateur ~ .popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.page-machine-sonde-evaporateur ~ .popup-parametres-avances {
  --md-color-blue-500: #110f2c;
  --md-color-blue-450: #161338;
  --md-color-blue-400: #1b1846;
  --md-color-blue-300: #262262;
  --md-color-blue-150: #a2a0bb;
  --md-color-neutrals-500: #1e1e1e;
  --md-color-neutrals-450: #3d3d3d;
  --md-color-neutrals-400: #5e5e5e;
  --md-color-neutrals-350: #828282;
  --md-color-neutrals-300: #a7a7a7;
  --md-color-neutrals-250: #b2b2b2;
  --md-color-neutrals-150: #ddd;
  --md-color-neutrals-100: #f1f1f1;
  --md-color-neutrals-50: #fff;
  --md-color-green-450: #213e2d;
  --md-color-green-400: #3b7051;
  --md-color-green-200: #62ba87;
  --md-color-red-200: #c14039;
  --md-font-family: "Open Sans", sans-serif;
  --md-spacing-xs: 4px;
  --md-spacing-sm: 8px;
  --md-spacing-md: 12px;
  --md-spacing-lg: 16px;
  --md-spacing-xl: 20px;
  --md-spacing-2xl: 24px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 659px;
  max-height: 90vh;
  background: white;
  border-radius: 4px;
  padding: var(--md-spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
  z-index: 101;
  overflow-y: auto;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .popup-header {
  display: flex;
  justify-content: flex-end;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .button-fermer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .button-fermer svg {
  width: 10px;
  height: 10px;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .section-popup-body {
  display: flex;
  flex-direction: column;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-popup-content {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-popup-content h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--md-color-blue-500);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .nav-popup-tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  padding: 0 var(--md-spacing-xs);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .li-tab-popup {
  padding: var(--md-spacing-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-150);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--md-font-family);
  transition: all 0.2s;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .li-tab-popup:hover {
  color: var(--md-color-blue-300);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .li-tab-popup.active {
  color: var(--md-color-blue-300);
  border-bottom-color: var(--md-color-blue-300);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .popup-tab-content {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
  margin-top: var(--md-spacing-2xl);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-field-row label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-field-row.with-description {
  align-items: flex-start;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .label-group {
  display: flex;
  flex-direction: column;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .label-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .field-description {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #99a1af;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .select-wrapper {
  position: relative;
  width: 111px;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .select-wrapper select {
  width: 100%;
  height: 36px;
  padding: 0 32px 0 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
  appearance: none;
  cursor: pointer;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .select-wrapper select:disabled {
  color: var(--md-color-neutrals-300);
  background: var(--md-color-neutrals-100);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .select-wrapper .icon-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  pointer-events: none;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .popup-tab-content input[type=number],
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .popup-tab-content input[type=text] {
  width: 111px;
  height: 36px;
  padding: 12px 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .popup-tab-content input[type=number]::placeholder,
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .popup-tab-content input[type=text]::placeholder {
  color: var(--md-color-neutrals-300);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .popup-tab-content input[type=number]:disabled,
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .popup-tab-content input[type=text]:disabled {
  color: var(--md-color-neutrals-300);
  background: var(--md-color-neutrals-100);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .popup-tab-content input[type=number].input-error,
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .popup-tab-content input[type=text].input-error {
  border-color: var(--md-color-red-200);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-field-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-field-toggle label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #0a0a0a;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-field-toggle .label-group label {
  font-size: 16px;
  font-weight: 400;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-field-toggle .field-description {
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-field-toggle.disabled {
  opacity: 0.5;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-field-toggle.disabled .input-toggle {
  pointer-events: none;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .input-toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--md-color-neutrals-250);
  border: none;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .input-toggle .toggle-knob {
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .input-toggle.active {
  background: var(--md-color-blue-300);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .input-toggle.active .toggle-knob {
  left: 18px;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-field-slider {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-md);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-slider-header label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #0a0a0a;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .slider-value {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #101828;
  white-space: nowrap;
  flex-shrink: 0;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-slider-track {
  position: relative;
  height: 16px;
  background: #ececf0;
  border-radius: 9999px;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .slider-progress {
  position: absolute;
  height: 100%;
  background: var(--md-color-blue-300);
  border-radius: 16px;
  left: 0;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .slider-thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border: 0.8px solid var(--md-color-blue-300);
  border-radius: 50%;
  top: 0;
  transform: translateX(-50%);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
  cursor: grab;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #6a7282;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-tva-taux-transfert {
  background: #fcfcfc;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 12px;
  padding: var(--md-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-taux-columns {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-taux-disponibles,
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-taux-machine-priorises {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-md);
  width: 221px;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .column-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--md-color-neutrals-300);
  text-transform: capitalize;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .column-title span {
  text-transform: lowercase;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .column-title.active {
  color: var(--md-color-blue-300);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .table-taux-list {
  background: white;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 8px;
  height: 189px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .th-header {
  background: #fcfcfc;
  border-bottom: 0.8px solid var(--md-color-neutrals-100);
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-size: 11px;
  font-weight: 700;
  color: var(--md-color-neutrals-400);
  text-transform: uppercase;
  letter-spacing: -0.55px;
  height: 32px;
  display: flex;
  align-items: center;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .th-header.active {
  background: var(--md-color-blue-300);
  color: white;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-taux-rows {
  flex: 1;
  overflow-y: auto;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .tr-taux-row {
  padding: var(--md-spacing-md) var(--md-spacing-lg);
  font-size: 14px;
  font-weight: 700;
  color: var(--md-color-neutrals-400);
  border-bottom: 0.8px solid #f9fafb;
  cursor: pointer;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .tr-taux-row:hover {
  background: #f9fafb;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .tr-taux-row.selected {
  background: #e8e8ff;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .tr-taux-row.with-badge {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
  color: var(--md-color-blue-450);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .badge-priorite {
  width: 20px;
  height: 20px;
  background: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--md-color-neutrals-300);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-transfer-buttons-add,
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-transfer-buttons-reorder {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 100%;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .button-icon {
  width: 40px;
  height: 40px;
  background: white;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .button-icon:hover {
  background: #f9fafb;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .button-icon.disabled {
  opacity: 0.5;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .button-icon svg {
  width: 16px;
  height: 16px;
  color: var(--md-color-neutrals-400);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .p-note-priorite {
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  line-height: 15.7px;
  color: var(--md-color-neutrals-300);
  text-align: center;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-fields-passwords {
  display: flex;
  gap: var(--md-spacing-lg);
  width: 100%;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-field-mdp {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xs);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-field-mdp label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-field-mdp.disabled {
  opacity: 0.5;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-field-mdp.disabled .button-modifier-mdp {
  pointer-events: none;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .input-mdp-wrapper {
  display: flex;
  align-items: center;
  height: 44px;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  padding: 4px;
  gap: 4px;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .input-mdp {
  flex: 1;
  min-width: 0;
  height: 36px;
  border: none;
  background: transparent;
  font-family: var(--md-font-family);
  font-size: 14px;
  color: #0a0a0a;
  padding: 0 8px 0 12px;
  outline: none;
  box-shadow: none;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .input-mdp:focus {
  border: none;
  outline: none;
  box-shadow: none;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .input-mdp.input-error {
  color: var(--md-color-red-200);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .button-modifier-mdp {
  flex-shrink: 0;
  height: 36px;
  padding: 8px 16px;
  font-size: 14px;
  white-space: nowrap;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-field-teamviewer {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: var(--md-spacing-lg);
  gap: var(--md-spacing-lg);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-field-teamviewer label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
  white-space: nowrap;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .input-teamviewer {
  flex: 1;
  height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .input-teamviewer::placeholder {
  color: var(--md-color-neutrals-300);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .footer-popup-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 17px;
  border-top: 1px solid var(--md-color-neutrals-150);
  margin-top: var(--md-spacing-2xl);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .footer-popup-action .button-annuler {
  min-width: 88px;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .footer-popup-action .button-enregistrer-popup {
  min-width: 108px;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .btn-primary {
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .btn-primary:hover {
  background: var(--md-color-blue-400);
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .btn-primary.disabled, .page-machine-sonde-evaporateur ~ .popup-parametres-avances .btn-primary:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .btn-primary-small {
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .btn-outline {
  background: transparent;
  color: var(--md-color-blue-450);
  border: 1px solid var(--md-color-blue-400);
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.4s;
}
.page-machine-sonde-evaporateur ~ .popup-parametres-avances .btn-outline:hover {
  border: 1px solid var(--md-color-green-200);
  color: var(--md-color-green-200);
}
@media (max-width: 768px) {
  .page-machine-sonde-evaporateur ~ .popup-parametres-avances {
    width: 95%;
    padding: var(--md-spacing-lg);
  }
  .page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-taux-columns {
    flex-direction: column;
  }
  .page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-taux-disponibles,
  .page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-taux-machine-priorises {
    width: 100%;
  }
  .page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-transfer-buttons-add,
  .page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-transfer-buttons-reorder {
    flex-direction: row;
    width: 100%;
    height: auto;
  }
}
@media (max-width: 719px) {
  .page-machine-sonde-evaporateur ~ .popup-parametres-avances {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    transform: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .page-machine-sonde-evaporateur ~ .popup-parametres-avances .popup-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--md-color-neutrals-100);
    flex-shrink: 0;
  }
  .page-machine-sonde-evaporateur ~ .popup-parametres-avances .section-popup-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }
  .page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-popup-content h2 {
    font-size: 18px;
  }
  .page-machine-sonde-evaporateur ~ .popup-parametres-avances .nav-popup-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .page-machine-sonde-evaporateur ~ .popup-parametres-avances .li-tab-popup {
    flex-shrink: 0;
    font-size: 12px;
    padding: var(--md-spacing-sm);
    white-space: nowrap;
  }
  .page-machine-sonde-evaporateur ~ .popup-parametres-avances .popup-tab-content {
    margin-top: var(--md-spacing-lg);
  }
  .page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-field-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-sm);
  }
  .page-machine-sonde-evaporateur ~ .popup-parametres-avances .select-wrapper {
    width: 100%;
  }
  .page-machine-sonde-evaporateur ~ .popup-parametres-avances .select-wrapper select {
    width: 100%;
  }
  .page-machine-sonde-evaporateur ~ .popup-parametres-avances .popup-tab-content input[type=number],
  .page-machine-sonde-evaporateur ~ .popup-parametres-avances .popup-tab-content input[type=text] {
    width: 100%;
  }
  .page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-fields-passwords {
    flex-direction: column;
  }
  .page-machine-sonde-evaporateur ~ .popup-parametres-avances .div-field-teamviewer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-sm);
  }
}

/* ========================================
   Page Armoires - Styles SCSS
   Scope: .page-machine-armoires
   ======================================== */
.page-machine-armoires {
  /* Variables locales */
  --md-color-blue-500: #110f2c;
  --md-color-blue-450: #161338;
  --md-color-blue-400: #1b1846;
  --md-color-blue-300: #262262;
  --md-color-blue-150: #a2a0bb;
  --md-color-neutrals-500: #1e1e1e;
  --md-color-neutrals-450: #3d3d3d;
  --md-color-neutrals-400: #5e5e5e;
  --md-color-neutrals-350: #828282;
  --md-color-neutrals-150: #ddd;
  --md-color-neutrals-100: #f1f1f1;
  --md-color-neutrals-50: #ffffff;
  --md-color-green-200: #62ba87;
  --md-color-green-400: #3b7051;
  --md-color-green-casier: #64ba87;
  --md-color-blue-froid: #5bc5f2;
  --md-color-red-200: #c14039;
  --md-color-toggle-active-bg: #dbeafe;
  --md-color-toggle-active-border: #bedbff;
  --md-color-toggle-active-text: #1447e6;
  --md-color-toggle-inactive-bg: #f9fafb;
  --md-color-toggle-inactive-border: #f3f4f6;
  --md-color-toggle-inactive-text: #6a7282;
  --md-font-family: "Open Sans", sans-serif;
  --md-font-family-urbanist: "Urbanist", sans-serif;
  --md-spacing-xs: 4px;
  --md-spacing-sm: 8px;
  --md-spacing-md: 12px;
  --md-spacing-lg: 16px;
  --md-spacing-xl: 20px;
  --md-spacing-2xl: 24px;
  --md-spacing-3xl: 28px;
  --md-spacing-4xl: 32px;
  --md-radius-sm: 4px;
  --md-radius-md: 8px;
  --md-radius-full: 50px;
  /* Utilitaires */
  /* ========================================
     Layout Principal
     ======================================== */
  display: flex;
  min-height: 100vh;
  width: 100%;
  /* Sidebar Placeholder (element ignore) */
  /* Main Content */
  /* Décoration de fond */
  /* ========================================
     Header Page Top (copie de machine-detail)
     ======================================== */
  /* ========================================
     Barre de navigation (onglets + switch + bouton)
     ======================================== */
  /* Liste d'onglets (identique machine-detail) */
  /* ========================================
     Switch Vue tableau / Vue armoire
     ======================================== */
  /* ========================================
     Bouton Nouvelle armoire
     ======================================== */
  /* ========================================
     Compteur armoires
     ======================================== */
  /* ========================================
     VUE TABLEAU
     ======================================== */
  /* En-tête du tableau */
  /* Lignes de données */
  /* Cellules */
  /* Cellule Options */
  /* Boutons icône */
  /* Cellules cliquables du tableau */
  /* Dropdown inline dans cellule du tableau */
  /* Renommer l'armoire : mode texte + bouton edit */
  /* ========================================
     VUE ARMOIRE
     ======================================== */
  /* Aperçu d'une armoire */
  /* Corps de l'armoire (conteneur HTML/CSS) */
  /* Couleurs partagées des éléments d'armoire */
  /* Porte avec casier(s) centré(s) via flexbox */
  /* Portes désactivées (3 du bas pour plateaux tournants) */
  /* Panel BDC (écran + boutons) : positionnement absolu des enfants */
  /* Void : fond hachuré + label centré */
  /* Header armoire (overlay transparent sur le SVG) */
  /* Boutons actions armoire (overlay au hover) */
  /* ========================================
     Boutons communs
     ======================================== */
  /* ========================================
     Toast Notifications
     ======================================== */
  /* Dots carrousel : masques par defaut (desktop) */
  /* ========================================
     Responsive Mobile (max-width: 719px)
     Pattern identique aux pages Detail Machine
     ========================================= */
}
.page-machine-armoires .hidden {
  display: none !important;
}
.page-machine-armoires .aside-sidebar-placeholder {
  display: none;
}
.page-machine-armoires .section-main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
  padding: var(--md-spacing-3xl);
  padding-bottom: var(--md-spacing-xl);
  height: 100vh;
  max-width: calc(100vw - 260px);
  overflow: hidden;
  background: linear-gradient(131.32deg, #f8f9fa 0%, #f5f4ff 100.57%);
  position: relative;
  /* Tablette : bandeau = 82px */
  /* Mobile : bandeau en absolute, hors flux */
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  .page-machine-armoires .section-main-content {
    max-width: calc(100vw - 82px);
  }
}
@media screen and (max-width: 719px) {
  .page-machine-armoires .section-main-content {
    max-width: 100vw;
  }
}
.page-machine-armoires .bg-decoration {
  position: absolute;
  bottom: -380px;
  right: -308px;
  width: 1326px;
  height: 1288px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 80px;
  transform: rotate(-30deg);
  pointer-events: none;
  z-index: 0;
}
.page-machine-armoires .header-page-top {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
  padding-bottom: var(--md-spacing-xl);
  border-bottom: 1px solid var(--md-color-neutrals-100);
}
.page-machine-armoires .button-retour {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-xs);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
}
.page-machine-armoires .button-retour .icon-arrow-back {
  width: 16px;
  height: 16px;
}
.page-machine-armoires .div-machine-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-spacing-4xl);
}
.page-machine-armoires .div-machine-info {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
  flex: 1;
}
.page-machine-armoires .div-machine-identite {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
}
.page-machine-armoires .machine-name {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--md-color-blue-450);
}
.page-machine-armoires .span-badge-version {
  padding: 4.8px 8.8px;
  border: 0.8px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  color: #0a0a0a;
}
.page-machine-armoires .activation-badge {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-sm);
  padding: var(--md-spacing-sm) var(--md-spacing-md);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
.page-machine-armoires .activation-badge--active {
  background: rgba(98, 186, 135, 0.1);
  color: var(--md-color-green-400);
}
.page-machine-armoires .activation-badge--active .status-icon {
  background: var(--md-color-green-200);
}
.page-machine-armoires .activation-badge--inactive {
  background: rgba(193, 64, 57, 0.1);
  color: var(--md-color-red-200);
}
.page-machine-armoires .activation-badge--inactive .status-icon {
  background: var(--md-color-red-200);
}
.page-machine-armoires .activation-badge--virtuelle {
  background: rgba(38, 34, 98, 0.1);
  color: var(--md-color-blue-300);
}
.page-machine-armoires .activation-badge--virtuelle .status-icon {
  background: var(--md-color-blue-300);
}
.page-machine-armoires .activation-badge .status-icon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.page-machine-armoires .last-sync {
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  color: var(--md-color-neutrals-350);
}
.page-machine-armoires .div-localisation {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-lg);
}
.page-machine-armoires .machine-number {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--md-color-neutrals-400);
}
.page-machine-armoires .location-info {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-xs);
}
.page-machine-armoires .location-info .icon-pin {
  width: 16px;
  height: 16px;
}
.page-machine-armoires .location-info span {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--md-color-neutrals-350);
}
.page-machine-armoires .nav-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.page-machine-armoires .ul-tabs-list {
  display: flex;
  align-items: center;
  list-style: none;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  padding: 0 var(--md-spacing-xs);
  margin: 0;
}
.page-machine-armoires .li-tab {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-150);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.page-machine-armoires .li-tab a {
  display: block;
  padding: var(--md-spacing-md);
  color: inherit;
  text-decoration: none;
}
.page-machine-armoires .li-tab:hover {
  color: var(--md-color-blue-300);
}
.page-machine-armoires .li-tab.active {
  color: var(--md-color-blue-300);
  border-bottom-color: var(--md-color-blue-300);
}
.page-machine-armoires .div-switch-vue-tableau-armoire {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: var(--md-spacing-2xl);
}
.page-machine-armoires .switch-label {
  font-size: 12px;
  font-weight: 600;
  color: #7b7b7b;
  user-select: none;
}
.page-machine-armoires .switch-label.active {
  color: #131131;
}
.page-machine-armoires .switch-label.active-green {
  color: var(--md-color-green-200);
}
.page-machine-armoires .button-toggle-vue {
  width: 58px;
  height: 26px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.page-machine-armoires .toggle-track {
  width: 58px;
  height: 26px;
  background: var(--md-color-blue-300);
  border-radius: var(--md-radius-full);
  position: relative;
  box-shadow: inset 0px 6px 8px 3px rgba(0, 0, 0, 0.1);
}
.page-machine-armoires .toggle-track.armoire {
  background: var(--md-color-green-casier);
}
.page-machine-armoires .toggle-track .toggle-cursor {
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  box-shadow: 2px 1px 6px rgba(0, 0, 0, 0.25);
  position: absolute;
  top: 3px;
  left: 3px;
  transition: left 0.3s ease;
}
.page-machine-armoires .toggle-track.armoire .toggle-cursor {
  left: 35px;
}
.page-machine-armoires .button-nouvelle-armoire {
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: var(--md-radius-sm);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
.page-machine-armoires .armoire-counter {
  font-size: 12px;
  color: var(--md-color-neutrals-350);
  text-align: right;
  width: 100%;
  line-height: 18px;
  flex-shrink: 0;
}
.page-machine-armoires .vue-tableau {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.page-machine-armoires .table-armoires {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.page-machine-armoires .tr-header {
  display: flex;
  width: 100%;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: var(--md-radius-sm) var(--md-radius-sm) 0 0;
  position: sticky;
  top: 0;
  z-index: 2;
}
.page-machine-armoires .tr-row-armoire {
  display: flex;
  width: 100%;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-top: none;
}
.page-machine-armoires .tr-row-armoire:last-child {
  border-radius: 0 0 var(--md-radius-sm) var(--md-radius-sm);
}
.page-machine-armoires .tr-row-armoire.armoire-inaccessible {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}
.page-machine-armoires .th,
.page-machine-armoires .td {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-spacing-sm);
  padding: 14px var(--md-spacing-md);
  overflow: hidden;
  text-align: center;
}
.page-machine-armoires .th {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-300);
}
.page-machine-armoires .th .sort-icon {
  flex-shrink: 0;
  opacity: 0.7;
}
.page-machine-armoires .td {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-450);
}
.page-machine-armoires .td .chevron-down {
  flex-shrink: 0;
  margin-left: 24px;
}
.page-machine-armoires .td-options {
  gap: var(--md-spacing-md);
}
.page-machine-armoires .div-actions-row {
  display: flex;
  gap: var(--md-spacing-sm);
  align-items: center;
}
.page-machine-armoires .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 33px;
  padding: var(--md-spacing-sm);
  border: none;
  background: none;
  border-radius: 2px;
  cursor: pointer;
}
.page-machine-armoires .btn-icon:hover {
  background: rgba(22, 19, 56, 0.1);
}
.page-machine-armoires .btn-icon-danger:hover {
  background: rgba(193, 64, 57, 0.1);
}
.page-machine-armoires .tr-row-armoire .td:not(.td-options):not(.td-renommer) {
  cursor: pointer;
  position: relative;
  overflow: visible;
}
.page-machine-armoires .cell-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 0 0 var(--md-radius-sm) var(--md-radius-sm);
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.page-machine-armoires .td-renommer,
.page-machine-armoires .card-field[data-name=td-renommer-armoire] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.page-machine-armoires .renommer-display {
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  color: var(--md-color-neutrals-450);
}
.page-machine-armoires .renommer-btn-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
}
.page-machine-armoires .btn-renommer-edit,
.page-machine-armoires .btn-renommer-valider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--md-radius-sm);
  transition: background 0.2s;
}
.page-machine-armoires .btn-renommer-edit svg,
.page-machine-armoires .btn-renommer-valider svg {
  width: 16px;
  height: 16px;
}
.page-machine-armoires .btn-renommer-edit:hover {
  background: var(--md-color-neutrals-100);
}
.page-machine-armoires .btn-renommer-valider:hover {
  background: rgba(38, 34, 98, 0.1);
}
.page-machine-armoires .input-renommer {
  width: 100%;
  border: 1px solid var(--md-color-neutrals-200);
  border-radius: var(--md-radius-sm);
  padding: 4px 8px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-450);
  outline: none;
  text-align: center;
  background: var(--md-color-neutrals-50);
}
.page-machine-armoires .input-renommer:focus {
  border-color: var(--md-color-primary, #262262);
}
.page-machine-armoires .input-renommer::placeholder {
  color: var(--md-color-neutrals-350);
  font-weight: 400;
}
.page-machine-armoires .section-apercu-armoires {
  background: var(--md-color-neutrals-50);
  border-radius: var(--md-radius-md);
  padding: var(--md-spacing-4xl);
  position: relative;
  z-index: 1;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.page-machine-armoires .div-armoires-row {
  display: flex;
  gap: var(--md-spacing-sm);
  align-items: flex-start;
  margin-top: var(--md-spacing-sm);
  overflow-x: auto;
  overflow-y: hidden;
}
.page-machine-armoires .div-armoire-preview {
  position: relative;
  height: 332px;
  flex-shrink: 0;
  border-radius: 5px;
  overflow: hidden;
}
.page-machine-armoires .armoire-body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.page-machine-armoires .armoire-body > div {
  position: absolute;
}
.page-machine-armoires .arm-bg {
  background: #D4D4D4;
}
.page-machine-armoires .arm-light {
  background: #E7E7E7;
}
.page-machine-armoires .arm-casier {
  background: #ADADAB;
  border-radius: 3px;
}
.page-machine-armoires .arm-porte {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-machine-armoires .arm-porte.arm-disabled {
  background: #8a8a8a;
}
.page-machine-armoires .arm-porte.arm-disabled .arm-casier {
  background: #6e6e6e;
}
.page-machine-armoires .arm-panel > .arm-casier {
  position: absolute;
}
.page-machine-armoires .arm-void-bg {
  background: repeating-linear-gradient(45deg, #D4D4D4, #D4D4D4 8px, #E7E7E7 8px, #E7E7E7 16px);
  border-radius: 4px;
}
.page-machine-armoires .arm-void-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.page-machine-armoires .arm-void-label span {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #6e6e6e;
  letter-spacing: 2px;
}
.page-machine-armoires .div-armoire-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 53px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px var(--md-spacing-md);
  background: transparent;
  z-index: 2;
}
.page-machine-armoires .div-numero-armoire {
  width: 32px;
  height: 32px;
  background: var(--md-color-blue-300);
  color: #fbfbfb;
  border-radius: var(--md-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--md-font-family-urbanist);
  font-size: 20px;
  font-weight: 500;
}
.page-machine-armoires .div-icons-type {
  display: flex;
  gap: var(--md-spacing-md);
  align-items: center;
}
.page-machine-armoires .icon-type {
  width: 32px;
  height: 32px;
  border-radius: var(--md-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.page-machine-armoires .icon-casier {
  background: var(--md-color-green-casier);
}
.page-machine-armoires .icon-froid {
  background: var(--md-color-blue-froid);
}
.page-machine-armoires .icon-plateau {
  background: #f59e0b;
}
.page-machine-armoires .icon-type img {
  width: 18px;
  height: 18px;
  display: block;
}
.page-machine-armoires .div-armoire-actions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  gap: var(--md-spacing-md);
  align-items: center;
  justify-content: center;
  z-index: 2;
  background: rgba(100, 100, 100, 0.3);
  backdrop-filter: blur(1px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.page-machine-armoires .div-armoire-preview:hover .div-armoire-actions {
  opacity: 1;
}
.page-machine-armoires .btn-primary {
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: var(--md-radius-sm);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  min-width: 88px;
}
.page-machine-armoires .btn-outlined {
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  background: white;
  color: var(--md-color-blue-450);
  border: 1px solid var(--md-color-blue-400);
  border-radius: var(--md-radius-sm);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  min-width: 88px;
  transition: 0.4s;
}
.page-machine-armoires .btn-outlined:hover {
  border: 1px solid var(--md-color-green-200);
  color: var(--md-color-green-200);
}
.page-machine-armoires .btn-danger {
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  background: var(--md-color-red-200);
  color: white;
  border: none;
  border-radius: var(--md-radius-sm);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  min-width: 88px;
}
.page-machine-armoires .toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-machine-armoires .toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
  animation: toast-slide-in-armoires 0.3s ease-out;
}
.page-machine-armoires .toast.toast-fade-out {
  animation: toast-slide-out-armoires 0.3s ease-in forwards;
}
.page-machine-armoires .toast--info {
  border-left: 4px solid var(--md-color-blue-300);
}
.page-machine-armoires .toast--info .toast-icon {
  color: var(--md-color-blue-300);
}
.page-machine-armoires .toast--success {
  border-left: 4px solid var(--md-color-green-200);
}
.page-machine-armoires .toast--success .toast-icon {
  color: var(--md-color-green-200);
}
.page-machine-armoires .toast--error {
  border-left: 4px solid var(--md-color-red-200);
}
.page-machine-armoires .toast--error .toast-icon {
  color: var(--md-color-red-200);
}
@keyframes toast-slide-in-armoires {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes toast-slide-out-armoires {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
.page-machine-armoires .toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.page-machine-armoires .carousel-dots {
  display: none;
}
@media (max-width: 719px) {
  .page-machine-armoires {
    /* --- 1A. Header fixe + layout page --- */
    padding-top: 72px;
    overflow: hidden;
    height: 100svh;
    /* --- 1B. Section main content (identique machine-detail) --- */
    /* --- 1C. Masquer elements desktop (identique horaires) --- */
    /* --- 1D. Tabs en scroll horizontal (identique machine-detail) --- */
    /* Elements specifiques armoires : switch + bouton */
    /* --- 1E. Vue Tableau → Cards --- */
    /* Card mobile */
    /* Compteur centre */
    /* --- 1F. Vue Armoire → Carrousel --- */
    /* Slide carrousel : prend toute la largeur, centre l'armoire */
    /* L'armoire : hauteur et largeur calculees par JS (% du viewport) */
    /* Header et icones scalent avec l'armoire */
    /* SVGs dans les icones type : scalent aussi */
    /* Boutons action overlay : scalent avec l'armoire */
    /* Actions cachees par defaut sur mobile */
    /* Desactiver le hover sur mobile */
    /* Actions visibles au tap */
    /* --- 1G. Dots du carrousel --- */
    /* --- 1H. Modal modifier armoire fullscreen --- */
  }
  .page-machine-armoires::before {
    content: "Armoires";
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
    height: 72px;
    min-height: 72px;
    padding-left: 80px;
    padding-top: 8px;
    background: var(--md-color-neutrals-50);
    border-radius: 0 0 8px 8px;
    z-index: 3;
    font-family: var(--md-font-family);
    font-size: 20px;
    font-weight: 700;
    color: #262262;
    line-height: normal;
    box-sizing: border-box;
  }
  .page-machine-armoires .section-main-content {
    padding: var(--md-spacing-xl);
    height: calc(100svh - 72px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .page-machine-armoires .header-page-top {
    display: none;
  }
  .page-machine-armoires .header-page-top:has(.button-parametres-avances) {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    border-bottom: none;
    padding-bottom: 0;
    align-items: center;
    justify-content: space-between;
  }
  .page-machine-armoires .button-retour {
    display: flex;
  }
  .page-machine-armoires .div-machine-info {
    display: none;
  }
  .page-machine-armoires .div-machine-title-bar {
    width: auto;
  }
  .page-machine-armoires .button-parametres-avances {
    width: auto;
  }
  .page-machine-armoires .nav-tabs-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--md-spacing-md);
    flex-shrink: 0;
  }
  .page-machine-armoires .ul-tabs-list {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-machine-armoires .ul-tabs-list::-webkit-scrollbar {
    display: none;
  }
  .page-machine-armoires .li-tab {
    flex-shrink: 0;
    font-size: 12px;
  }
  .page-machine-armoires .li-tab a {
    padding: var(--md-spacing-sm) var(--md-spacing-md);
    white-space: nowrap;
  }
  .page-machine-armoires .div-switch-vue-tableau-armoire {
    margin-left: 0;
    margin-right: 0;
    justify-content: center;
    padding: var(--md-spacing-xs) 0;
  }
  .page-machine-armoires .button-nouvelle-armoire {
    width: 100%;
    padding: var(--md-spacing-sm) var(--md-spacing-md);
    font-size: 13px;
  }
  .page-machine-armoires .vue-tableau {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-machine-armoires .vue-tableau::-webkit-scrollbar {
    display: none;
  }
  .page-machine-armoires .table-armoires {
    display: flex;
    flex-direction: column;
    gap: var(--md-spacing-sm);
    overflow: visible;
  }
  .page-machine-armoires .tr-header {
    display: none;
  }
  .page-machine-armoires .mobile-card {
    display: flex;
    flex-direction: column;
    gap: var(--md-spacing-sm);
    border: 1px solid var(--md-color-neutrals-100);
    border-radius: var(--md-radius-md);
    background: var(--md-color-neutrals-50);
    padding: var(--md-spacing-lg);
  }
  .page-machine-armoires .card-field {
    display: flex;
    align-items: center;
    gap: var(--md-spacing-sm);
    padding: var(--md-spacing-xs) 0;
    position: relative;
    overflow: visible;
    cursor: pointer;
  }
  .page-machine-armoires .card-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-color-blue-300);
    min-width: 90px;
    flex-shrink: 0;
  }
  .page-machine-armoires .card-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--md-color-neutrals-450);
    flex: 1;
  }
  .page-machine-armoires .card-field .chevron-down {
    margin-left: auto;
    flex-shrink: 0;
  }
  .page-machine-armoires .card-field .cell-dropdown {
    left: 90px;
    right: 0;
    border-radius: var(--md-radius-sm);
    z-index: 20;
  }
  .page-machine-armoires .card-field .input-renommer {
    flex: 1;
    border: 1px solid var(--md-color-neutrals-150);
    border-radius: var(--md-radius-sm);
    padding: var(--md-spacing-sm);
    font-size: 14px;
    font-family: var(--md-font-family);
    color: var(--md-color-neutrals-450);
    background: var(--md-color-neutrals-50);
    outline: none;
    min-height: 36px;
  }
  .page-machine-armoires .card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--md-spacing-md);
    border-top: 1px solid var(--md-color-neutrals-100);
    padding-top: var(--md-spacing-md);
    margin-top: var(--md-spacing-xs);
  }
  .page-machine-armoires .card-actions .btn-icon {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .page-machine-armoires .armoire-counter {
    text-align: center;
    flex-shrink: 0;
  }
  .page-machine-armoires .section-apercu-armoires {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: var(--md-spacing-lg);
    display: flex;
    flex-direction: column;
  }
  .page-machine-armoires .div-armoires-row {
    display: flex;
    overflow: hidden;
    margin-top: 0;
    flex: 1;
    align-items: center;
    gap: 0;
  }
  .page-machine-armoires .carousel-slide {
    width: 100%;
    min-width: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .page-machine-armoires .div-armoire-preview {
    --armoire-scale: 1; /* defaut, ecrase par JS */
    position: relative;
    flex-shrink: 0;
  }
  .page-machine-armoires .div-armoire-header {
    height: calc(53px * var(--armoire-scale));
    padding: calc(9px * var(--armoire-scale)) var(--md-spacing-md);
  }
  .page-machine-armoires .div-numero-armoire {
    width: calc(32px * var(--armoire-scale));
    height: calc(32px * var(--armoire-scale));
    font-size: calc(20px * var(--armoire-scale));
    border-radius: calc(4px * var(--armoire-scale));
  }
  .page-machine-armoires .icon-type {
    width: calc(32px * var(--armoire-scale));
    height: calc(32px * var(--armoire-scale));
    border-radius: calc(4px * var(--armoire-scale));
  }
  .page-machine-armoires .div-icons-type {
    gap: calc(12px * var(--armoire-scale));
  }
  .page-machine-armoires .icon-type svg {
    width: calc(18px * var(--armoire-scale));
    height: calc(18px * var(--armoire-scale));
  }
  .page-machine-armoires .div-armoire-actions {
    gap: calc(12px * var(--armoire-scale));
  }
  .page-machine-armoires .div-armoire-actions .btn-icon {
    width: calc(36px * var(--armoire-scale));
    height: calc(33px * var(--armoire-scale));
    padding: calc(8px * var(--armoire-scale));
  }
  .page-machine-armoires .div-armoire-actions .btn-icon svg {
    width: calc(22px * var(--armoire-scale));
    height: calc(22px * var(--armoire-scale));
  }
  .page-machine-armoires .div-armoire-actions {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .page-machine-armoires .div-armoire-preview:hover .div-armoire-actions {
    opacity: 0;
    pointer-events: none;
  }
  .page-machine-armoires .div-armoire-preview.actions-visible .div-armoire-actions {
    opacity: 1;
    pointer-events: auto;
  }
  .page-machine-armoires .carousel-dots {
    display: flex;
    justify-content: center;
    gap: var(--md-spacing-sm);
    padding: var(--md-spacing-md) 0;
    flex-shrink: 0;
  }
  .page-machine-armoires .carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--md-color-neutrals-150);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
    /* Zone de touch elargie */
  }
  .page-machine-armoires .carousel-dot::after {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
  }
  .page-machine-armoires .carousel-dot.active {
    background: var(--md-color-blue-300);
  }
}

/* ========================================
   OVERLAY MODAL (hors scope car position fixed)
   ======================================== */
.page-machine-armoires ~ .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 100;
}

/* ========================================
   MODAL : Modifier armoire (hors scope car position fixed)
   ======================================== */
.page-machine-armoires ~ .aside-modal-modifier-armoire {
  position: fixed;
  top: 0;
  right: 0;
  width: 441px;
  height: 100vh;
  background: #ffffff;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  z-index: 101;
  border-radius: 8px 0 0 8px;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
  /* Formulaire */
  /* Champs */
  /* Input nombre de casiers (Void) */
  /* Select personnalisé */
  /* Dropdown custom */
  /* Radio buttons */
  /* Toggle buttons froid */
  /* Actions du formulaire */
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .modal-top-bar {
  display: flex;
  justify-content: flex-end;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .button-fermer-modal {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1e1e1e;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .form-modifier-armoire {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  justify-content: space-between;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .div-form-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .form-title {
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #110f2c;
  line-height: 30px;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .div-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .input-void-casiers {
  width: 100%;
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
  color: #3d3d3d;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .input-void-casiers:focus {
  border-color: #62ba87;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .field-label {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #110f2c;
  border: none;
  padding: 0;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .field-label-froid {
  font-family: Arial, sans-serif;
  font-weight: 700;
  color: #364153;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .div-fields-groupe {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .select-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 36px;
  padding: 0 8px 0 16px;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .select-value {
  font-size: 14px;
  color: #3d3d3d;
  line-height: 24px;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .select-chevron {
  flex-shrink: 0;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .dropdown-item {
  padding: 8px 16px;
  font-size: 14px;
  color: #3d3d3d;
  cursor: pointer;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .dropdown-item:hover {
  background: #f1f1f1;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .dropdown-item.selected {
  color: #262262;
  font-weight: 600;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .fieldset-type-vente {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: none;
  padding: 0;
  margin: 0;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .div-radio-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .radio-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 16px;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  min-height: 35px;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .radio-option input[type=radio] {
  display: none;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .radio-custom {
  width: 12px;
  height: 12px;
  border: 1.5px solid #bbb;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .radio-option input[type=radio]:checked + .radio-custom {
  border-color: #262262;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .radio-option input[type=radio]:checked + .radio-custom::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: #262262;
  border-radius: 50%;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .radio-text {
  font-size: 14px;
  color: #3d3d3d;
  flex: 1;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .fieldset-type-froid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: none;
  padding: 0;
  margin: 0;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .div-toggle-buttons-froid {
  display: flex;
  gap: 8px;
  width: 100%;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .toggle-froid {
  flex: 1;
  padding: 8px;
  border: 0.8px solid #f3f4f6;
  background: #f9fafb;
  border-radius: 4px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #6a7282;
  cursor: pointer;
  text-align: center;
  line-height: 16px;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .toggle-froid.active {
  background: #dbeafe;
  border-color: #bedbff;
  color: #1447e6;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .div-form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  padding-top: 17px;
  border-top: 1px solid #ddd;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .btn-primary {
  padding: 8px 16px;
  background: #262262;
  color: white;
  border: none;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  min-width: 88px;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .btn-outlined {
  padding: 8px 16px;
  background: white;
  color: #161338;
  border: 1px solid #1b1846;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  min-width: 88px;
  transition: 0.4s;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .btn-outlined:hover {
  border: 1px solid #62ba87;
  color: #62ba87;
}
.page-machine-armoires ~ .aside-modal-modifier-armoire .btn-danger {
  padding: 8px 16px;
  background: #c14039;
  color: white;
  border: none;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  min-width: 88px;
}
@media (max-width: 719px) {
  .page-machine-armoires ~ .aside-modal-modifier-armoire {
    width: 100%;
    height: 100%;
    border-radius: 0;
    top: 0;
    right: 0;
    padding: 0;
  }
  .page-machine-armoires ~ .aside-modal-modifier-armoire .modal-top-bar {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f1f1;
    flex-shrink: 0;
  }
  .page-machine-armoires ~ .aside-modal-modifier-armoire .form-modifier-armoire {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .page-machine-armoires ~ .aside-modal-modifier-armoire .div-form-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }
  .page-machine-armoires ~ .aside-modal-modifier-armoire .div-form-actions {
    padding: 16px 20px;
    border-top: 1px solid #f1f1f1;
    flex-shrink: 0;
  }
}

/* ========================================
   POPUP OVERLAY
   ======================================== */
.page-machine-armoires ~ .popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

/* ========================================
   POPUP PARAMETRES AVANCES
   ======================================== */
.page-machine-armoires ~ .popup-parametres-avances {
  --md-color-blue-500: #110f2c;
  --md-color-blue-450: #161338;
  --md-color-blue-400: #1b1846;
  --md-color-blue-300: #262262;
  --md-color-blue-150: #a2a0bb;
  --md-color-neutrals-500: #1e1e1e;
  --md-color-neutrals-450: #3d3d3d;
  --md-color-neutrals-400: #5e5e5e;
  --md-color-neutrals-350: #828282;
  --md-color-neutrals-300: #a7a7a7;
  --md-color-neutrals-250: #b2b2b2;
  --md-color-neutrals-150: #ddd;
  --md-color-neutrals-100: #f1f1f1;
  --md-color-neutrals-50: #fff;
  --md-color-green-450: #213e2d;
  --md-color-green-400: #3b7051;
  --md-color-green-200: #62ba87;
  --md-color-red-200: #c14039;
  --md-font-family: "Open Sans", sans-serif;
  --md-spacing-xs: 4px;
  --md-spacing-sm: 8px;
  --md-spacing-md: 12px;
  --md-spacing-lg: 16px;
  --md-spacing-xl: 20px;
  --md-spacing-2xl: 24px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 690px;
  max-height: 90vh;
  background: white;
  border-radius: 4px;
  padding: var(--md-spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
  z-index: 101;
  overflow-y: auto;
}
.page-machine-armoires ~ .popup-parametres-avances .popup-header {
  display: flex;
  justify-content: flex-end;
}
.page-machine-armoires ~ .popup-parametres-avances .button-fermer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
}
.page-machine-armoires ~ .popup-parametres-avances .button-fermer svg {
  width: 10px;
  height: 10px;
}
.page-machine-armoires ~ .popup-parametres-avances .section-popup-body {
  display: flex;
  flex-direction: column;
}
.page-machine-armoires ~ .popup-parametres-avances .div-popup-content {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
}
.page-machine-armoires ~ .popup-parametres-avances .div-popup-content h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--md-color-blue-500);
}
.page-machine-armoires ~ .popup-parametres-avances .nav-popup-tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  padding: 0 var(--md-spacing-xs);
}
.page-machine-armoires ~ .popup-parametres-avances .li-tab-popup {
  padding: var(--md-spacing-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-150);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--md-font-family);
  transition: all 0.2s;
}
.page-machine-armoires ~ .popup-parametres-avances .li-tab-popup:hover {
  color: var(--md-color-blue-300);
}
.page-machine-armoires ~ .popup-parametres-avances .li-tab-popup.active {
  color: var(--md-color-blue-300);
  border-bottom-color: var(--md-color-blue-300);
}
.page-machine-armoires ~ .popup-parametres-avances .popup-tab-content {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
  margin-top: var(--md-spacing-2xl);
}
.page-machine-armoires ~ .popup-parametres-avances .div-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
}
.page-machine-armoires ~ .popup-parametres-avances .div-field-row label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-armoires ~ .popup-parametres-avances .div-field-row.with-description {
  align-items: flex-start;
}
.page-machine-armoires ~ .popup-parametres-avances .label-group {
  display: flex;
  flex-direction: column;
}
.page-machine-armoires ~ .popup-parametres-avances .label-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-armoires ~ .popup-parametres-avances .field-description {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #99a1af;
}
.page-machine-armoires ~ .popup-parametres-avances .select-wrapper {
  position: relative;
  width: 111px;
}
.page-machine-armoires ~ .popup-parametres-avances .select-wrapper select {
  width: 100%;
  height: 36px;
  padding: 0 32px 0 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
  appearance: none;
  cursor: pointer;
}
.page-machine-armoires ~ .popup-parametres-avances .select-wrapper select:disabled {
  color: var(--md-color-neutrals-300);
  background: var(--md-color-neutrals-100);
}
.page-machine-armoires ~ .popup-parametres-avances .select-wrapper .icon-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  pointer-events: none;
}
.page-machine-armoires ~ .popup-parametres-avances .popup-tab-content input[type=number],
.page-machine-armoires ~ .popup-parametres-avances .popup-tab-content input[type=text] {
  width: 111px;
  height: 36px;
  padding: 12px 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
}
.page-machine-armoires ~ .popup-parametres-avances .popup-tab-content input[type=number]::placeholder,
.page-machine-armoires ~ .popup-parametres-avances .popup-tab-content input[type=text]::placeholder {
  color: var(--md-color-neutrals-300);
}
.page-machine-armoires ~ .popup-parametres-avances .popup-tab-content input[type=number]:disabled,
.page-machine-armoires ~ .popup-parametres-avances .popup-tab-content input[type=text]:disabled {
  color: var(--md-color-neutrals-300);
  background: var(--md-color-neutrals-100);
}
.page-machine-armoires ~ .popup-parametres-avances .popup-tab-content input[type=number].input-error,
.page-machine-armoires ~ .popup-parametres-avances .popup-tab-content input[type=text].input-error {
  border-color: var(--md-color-red-200);
}
.page-machine-armoires ~ .popup-parametres-avances .div-field-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
.page-machine-armoires ~ .popup-parametres-avances .div-field-toggle label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #0a0a0a;
}
.page-machine-armoires ~ .popup-parametres-avances .div-field-toggle .label-group label {
  font-size: 16px;
  font-weight: 400;
}
.page-machine-armoires ~ .popup-parametres-avances .div-field-toggle .field-description {
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
}
.page-machine-armoires ~ .popup-parametres-avances .div-field-toggle.disabled {
  opacity: 0.5;
}
.page-machine-armoires ~ .popup-parametres-avances .div-field-toggle.disabled .input-toggle {
  pointer-events: none;
}
.page-machine-armoires ~ .popup-parametres-avances .input-toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--md-color-neutrals-250);
  border: none;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.page-machine-armoires ~ .popup-parametres-avances .input-toggle .toggle-knob {
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.page-machine-armoires ~ .popup-parametres-avances .input-toggle.active {
  background: var(--md-color-blue-300);
}
.page-machine-armoires ~ .popup-parametres-avances .input-toggle.active .toggle-knob {
  left: 18px;
}
.page-machine-armoires ~ .popup-parametres-avances .div-field-slider {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-md);
}
.page-machine-armoires ~ .popup-parametres-avances .div-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-machine-armoires ~ .popup-parametres-avances .div-slider-header label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #0a0a0a;
}
.page-machine-armoires ~ .popup-parametres-avances .slider-value {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #101828;
  white-space: nowrap;
  flex-shrink: 0;
}
.page-machine-armoires ~ .popup-parametres-avances .div-slider-track {
  position: relative;
  height: 16px;
  background: #ececf0;
  border-radius: 9999px;
}
.page-machine-armoires ~ .popup-parametres-avances .slider-progress {
  position: absolute;
  height: 100%;
  background: var(--md-color-blue-300);
  border-radius: 16px;
  left: 0;
}
.page-machine-armoires ~ .popup-parametres-avances .slider-thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border: 0.8px solid var(--md-color-blue-300);
  border-radius: 50%;
  top: 0;
  transform: translateX(-50%);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
  cursor: grab;
}
.page-machine-armoires ~ .popup-parametres-avances .div-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #6a7282;
}
.page-machine-armoires ~ .popup-parametres-avances .div-tva-taux-transfert {
  background: #fcfcfc;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 12px;
  padding: var(--md-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
}
.page-machine-armoires ~ .popup-parametres-avances .div-taux-columns {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
}
.page-machine-armoires ~ .popup-parametres-avances .div-taux-disponibles,
.page-machine-armoires ~ .popup-parametres-avances .div-taux-machine-priorises {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-md);
  width: 221px;
}
.page-machine-armoires ~ .popup-parametres-avances .column-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--md-color-neutrals-300);
  text-transform: capitalize;
}
.page-machine-armoires ~ .popup-parametres-avances .column-title span {
  text-transform: lowercase;
}
.page-machine-armoires ~ .popup-parametres-avances .column-title.active {
  color: var(--md-color-blue-300);
}
.page-machine-armoires ~ .popup-parametres-avances .table-taux-list {
  background: white;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 8px;
  height: 189px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-machine-armoires ~ .popup-parametres-avances .th-header {
  background: #fcfcfc;
  border-bottom: 0.8px solid var(--md-color-neutrals-100);
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-size: 11px;
  font-weight: 700;
  color: var(--md-color-neutrals-400);
  text-transform: uppercase;
  letter-spacing: -0.55px;
  height: 32px;
  display: flex;
  align-items: center;
}
.page-machine-armoires ~ .popup-parametres-avances .th-header.active {
  background: var(--md-color-blue-300);
  color: white;
}
.page-machine-armoires ~ .popup-parametres-avances .div-taux-rows {
  flex: 1;
  overflow-y: auto;
}
.page-machine-armoires ~ .popup-parametres-avances .tr-taux-row {
  padding: var(--md-spacing-md) var(--md-spacing-lg);
  font-size: 14px;
  font-weight: 700;
  color: var(--md-color-neutrals-400);
  border-bottom: 0.8px solid #f9fafb;
  cursor: pointer;
}
.page-machine-armoires ~ .popup-parametres-avances .tr-taux-row:hover {
  background: #f9fafb;
}
.page-machine-armoires ~ .popup-parametres-avances .tr-taux-row.selected {
  background: #e8e8ff;
}
.page-machine-armoires ~ .popup-parametres-avances .tr-taux-row.with-badge {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
  color: var(--md-color-blue-450);
}
.page-machine-armoires ~ .popup-parametres-avances .badge-priorite {
  width: 20px;
  height: 20px;
  background: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--md-color-neutrals-300);
}
.page-machine-armoires ~ .popup-parametres-avances .div-transfer-buttons-add,
.page-machine-armoires ~ .popup-parametres-avances .div-transfer-buttons-reorder {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 100%;
}
.page-machine-armoires ~ .popup-parametres-avances .button-icon {
  width: 40px;
  height: 40px;
  background: white;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.page-machine-armoires ~ .popup-parametres-avances .button-icon:hover {
  background: #f9fafb;
}
.page-machine-armoires ~ .popup-parametres-avances .button-icon.disabled {
  opacity: 0.5;
}
.page-machine-armoires ~ .popup-parametres-avances .button-icon svg {
  width: 16px;
  height: 16px;
  color: var(--md-color-neutrals-400);
}
.page-machine-armoires ~ .popup-parametres-avances .p-note-priorite {
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  line-height: 15.7px;
  color: var(--md-color-neutrals-300);
  text-align: center;
}
.page-machine-armoires ~ .popup-parametres-avances .div-fields-passwords {
  display: flex;
  gap: var(--md-spacing-lg);
  width: 100%;
}
.page-machine-armoires ~ .popup-parametres-avances .div-field-mdp {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xs);
}
.page-machine-armoires ~ .popup-parametres-avances .div-field-mdp label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-armoires ~ .popup-parametres-avances .div-field-mdp.disabled {
  opacity: 0.5;
}
.page-machine-armoires ~ .popup-parametres-avances .div-field-mdp.disabled .button-modifier-mdp {
  pointer-events: none;
}
.page-machine-armoires ~ .popup-parametres-avances .input-mdp-wrapper {
  display: flex;
  align-items: center;
  height: 44px;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  padding: 4px;
  gap: 4px;
}
.page-machine-armoires ~ .popup-parametres-avances .input-mdp {
  flex: 1;
  min-width: 0;
  height: 36px;
  border: none;
  background: transparent;
  font-family: var(--md-font-family);
  font-size: 14px;
  color: #0a0a0a;
  padding: 0 8px 0 12px;
  outline: none;
  box-shadow: none;
}
.page-machine-armoires ~ .popup-parametres-avances .input-mdp:focus {
  border: none;
  outline: none;
  box-shadow: none;
}
.page-machine-armoires ~ .popup-parametres-avances .input-mdp.input-error {
  color: var(--md-color-red-200);
}
.page-machine-armoires ~ .popup-parametres-avances .button-modifier-mdp {
  flex-shrink: 0;
  height: 36px;
  padding: 8px 16px;
  font-size: 14px;
  white-space: nowrap;
}
.page-machine-armoires ~ .popup-parametres-avances .div-field-teamviewer {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: var(--md-spacing-lg);
  gap: var(--md-spacing-lg);
}
.page-machine-armoires ~ .popup-parametres-avances .div-field-teamviewer label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
  white-space: nowrap;
}
.page-machine-armoires ~ .popup-parametres-avances .input-teamviewer {
  flex: 1;
  height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
}
.page-machine-armoires ~ .popup-parametres-avances .input-teamviewer::placeholder {
  color: var(--md-color-neutrals-300);
}
.page-machine-armoires ~ .popup-parametres-avances .footer-popup-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 17px;
  border-top: 1px solid var(--md-color-neutrals-150);
  margin-top: var(--md-spacing-2xl);
}
.page-machine-armoires ~ .popup-parametres-avances .footer-popup-action .button-annuler {
  min-width: 88px;
}
.page-machine-armoires ~ .popup-parametres-avances .footer-popup-action .button-enregistrer-popup {
  min-width: 108px;
}
.page-machine-armoires ~ .popup-parametres-avances .btn-primary {
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.page-machine-armoires ~ .popup-parametres-avances .btn-primary:hover {
  background: var(--md-color-blue-400);
}
.page-machine-armoires ~ .popup-parametres-avances .btn-primary.disabled, .page-machine-armoires ~ .popup-parametres-avances .btn-primary:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.page-machine-armoires ~ .popup-parametres-avances .btn-primary-small {
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.page-machine-armoires ~ .popup-parametres-avances .btn-outline {
  background: transparent;
  color: var(--md-color-blue-450);
  border: 1px solid var(--md-color-blue-400);
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.4s;
}
.page-machine-armoires ~ .popup-parametres-avances .btn-outline:hover {
  border: 1px solid var(--md-color-green-200);
  color: var(--md-color-green-200);
}
@media (max-width: 768px) {
  .page-machine-armoires ~ .popup-parametres-avances {
    width: 95%;
    padding: var(--md-spacing-lg);
  }
  .page-machine-armoires ~ .popup-parametres-avances .div-taux-columns {
    flex-direction: column;
  }
  .page-machine-armoires ~ .popup-parametres-avances .div-taux-disponibles,
  .page-machine-armoires ~ .popup-parametres-avances .div-taux-machine-priorises {
    width: 100%;
  }
  .page-machine-armoires ~ .popup-parametres-avances .div-transfer-buttons-add,
  .page-machine-armoires ~ .popup-parametres-avances .div-transfer-buttons-reorder {
    flex-direction: row;
    width: 100%;
    height: auto;
  }
}
@media (max-width: 719px) {
  .page-machine-armoires ~ .popup-parametres-avances {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    transform: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .page-machine-armoires ~ .popup-parametres-avances .popup-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--md-color-neutrals-100);
    flex-shrink: 0;
  }
  .page-machine-armoires ~ .popup-parametres-avances .section-popup-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }
  .page-machine-armoires ~ .popup-parametres-avances .div-popup-content h2 {
    font-size: 18px;
  }
  .page-machine-armoires ~ .popup-parametres-avances .nav-popup-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .page-machine-armoires ~ .popup-parametres-avances .li-tab-popup {
    flex-shrink: 0;
    font-size: 12px;
    padding: var(--md-spacing-sm);
    white-space: nowrap;
  }
  .page-machine-armoires ~ .popup-parametres-avances .popup-tab-content {
    margin-top: var(--md-spacing-lg);
  }
  .page-machine-armoires ~ .popup-parametres-avances .div-field-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-sm);
  }
  .page-machine-armoires ~ .popup-parametres-avances .select-wrapper {
    width: 100%;
  }
  .page-machine-armoires ~ .popup-parametres-avances .select-wrapper select {
    width: 100%;
  }
  .page-machine-armoires ~ .popup-parametres-avances .popup-tab-content input[type=number],
  .page-machine-armoires ~ .popup-parametres-avances .popup-tab-content input[type=text] {
    width: 100%;
  }
  .page-machine-armoires ~ .popup-parametres-avances .div-fields-passwords {
    flex-direction: column;
  }
  .page-machine-armoires ~ .popup-parametres-avances .div-field-teamviewer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-sm);
  }
}

/* ========================================
   DIALOG : Confirmer suppression (hors scope car position fixed)
   ======================================== */
.page-machine-armoires ~ .dialog-confirmer-suppression {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  min-width: 337px;
  width: 388px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-end;
  z-index: 101;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.page-machine-armoires ~ .dialog-confirmer-suppression .dialog-top-bar {
  display: flex;
  justify-content: flex-end;
}
.page-machine-armoires ~ .dialog-confirmer-suppression .button-fermer-modal {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1e1e1e;
}
.page-machine-armoires ~ .dialog-confirmer-suppression .div-modal-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  width: 100%;
}
.page-machine-armoires ~ .dialog-confirmer-suppression .dialog-message {
  font-size: 17px;
  font-weight: 600;
  color: #3d3d3d;
  text-align: center;
  max-width: 240px;
  line-height: normal;
}
.page-machine-armoires ~ .dialog-confirmer-suppression .div-modal-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}
.page-machine-armoires ~ .dialog-confirmer-suppression .div-modal-actions .btn-primary,
.page-machine-armoires ~ .dialog-confirmer-suppression .div-modal-actions .btn-danger {
  flex: 1;
}
.page-machine-armoires ~ .dialog-confirmer-suppression .btn-primary {
  padding: 8px 16px;
  background: #262262;
  color: white;
  border: none;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  min-width: 88px;
}
.page-machine-armoires ~ .dialog-confirmer-suppression .btn-danger {
  padding: 8px 16px;
  background: #c14039;
  color: white;
  border: none;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  min-width: 88px;
}

/* ========================================
   Page Composition - Styles SCSS
   Scope: .page-machine-composition
   ======================================== */
.page-machine-composition {
  /* --- Variables locales (identiques armoires) --- */
  --md-color-blue-500: #110f2c;
  --md-color-blue-450: #161338;
  --md-color-blue-400: #1b1846;
  --md-color-blue-300: #262262;
  --md-color-blue-150: #a2a0bb;
  --md-color-neutrals-500: #1e1e1e;
  --md-color-neutrals-450: #3d3d3d;
  --md-color-neutrals-400: #5e5e5e;
  --md-color-neutrals-350: #828282;
  --md-color-neutrals-150: #ddd;
  --md-color-neutrals-100: #f1f1f1;
  --md-color-neutrals-50: #ffffff;
  --md-color-green-200: #62ba87;
  --md-color-green-400: #3b7051;
  --md-color-red-200: #c14039;
  --md-font-family: "Open Sans", sans-serif;
  --md-font-family-urbanist: "Urbanist", sans-serif;
  --md-spacing-xs: 4px;
  --md-spacing-sm: 8px;
  --md-spacing-md: 12px;
  --md-spacing-lg: 16px;
  --md-spacing-xl: 20px;
  --md-spacing-2xl: 24px;
  --md-spacing-3xl: 28px;
  --md-spacing-4xl: 32px;
  --md-radius-sm: 4px;
  --md-radius-md: 8px;
  /* --- Utility --- */
  /* ============================================
     LAYOUT PRINCIPAL (pattern armoires)
     ============================================ */
  display: flex;
  min-height: 100vh;
  width: 100%;
  /* Sidebar Placeholder (masqué, géré par bandeau) */
  /* Section main content */
  /* ============================================
     HEADER PAGE TOP (pattern armoires)
     ============================================ */
  /* ============================================
     NAV TABS BAR (pattern armoires)
     ============================================ */
  /* Boutons d'action */
  /* ============================================
     CONTENT AREA (aside + grilles)
     ============================================ */
  /* ============================================
     ASIDE FILTRES (panneau latéral)
     ============================================ */
  /* Formulaire filtres */
  /* Select wrapper (dropdown) */
  /* Dropdown list (hidden par défaut) */
  /* Produit sélectionné */
  /* Liste produits récents */
  /* ============================================
     STATISTIQUES
     ============================================ */
  /* ============================================
     SECTION GRILLES CASIERS
     ============================================ */
  /* Bandeau Void */
  /* Header armoire */
  /* Section grille */
  /* Onglets sous-vue (Devant/Derrière, Portion 1/2/3) */
  /* Grille de casiers (CSS Grid, gauche a droite) */
  /* ============================================
     CASIER COMPONENT
     ============================================ */
  /* Partie gauche du header : image + numero casier cote a cote */
  /* Vignette produit a gauche du numero casier : meme style que les cartes du catalogue
     (carre gris + SVG placeholder si pas d'image ou pas de produit).
     Taille reduite (32x32) pour s'integrer dans le header du casier. */
  /* --- État : Vide (aucun produit assigné) --- */
  /* --- État : Assigné sélectionné (produit en cours) --- */
  /* --- État : Assigné chargé (autre produit) --- */
  /* ============================================
     FOOTER LEGENDE
     ============================================ */
  /* ========================================
     Toast Notifications
     ======================================== */
  /* ============================================
     ELEMENTS DRAWER MOBILE (masqués sur desktop)
     ============================================ */
  /* ============================================
     RESPONSIVE MOBILE (max-width: 719px)
     Pattern identique aux pages Detail Machine
     ============================================ */
}
.page-machine-composition .hidden {
  display: none !important;
}
.page-machine-composition .aside-sidebar-placeholder {
  display: none;
}
.page-machine-composition .section-main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
  padding: var(--md-spacing-3xl);
  padding-bottom: var(--md-spacing-xl);
  height: 100vh;
  max-width: calc(100vw - 260px);
  overflow: hidden;
  background: linear-gradient(131.32deg, #f8f9fa 0%, #f5f4ff 100.57%);
  position: relative;
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  .page-machine-composition .section-main-content {
    max-width: calc(100vw - 82px);
  }
}
@media screen and (max-width: 719px) {
  .page-machine-composition .section-main-content {
    max-width: 100vw;
  }
}
.page-machine-composition .header-page-top {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
  padding-bottom: var(--md-spacing-xl);
  border-bottom: 1px solid var(--md-color-neutrals-100);
}
.page-machine-composition .button-retour {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-xs);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
}
.page-machine-composition .button-retour .icon-arrow-back {
  width: 16px;
  height: 16px;
}
.page-machine-composition .div-machine-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-spacing-4xl);
}
.page-machine-composition .div-machine-info {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
  flex: 1;
}
.page-machine-composition .div-machine-identite {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
}
.page-machine-composition .machine-name {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--md-color-blue-450);
}
.page-machine-composition .span-badge-version {
  padding: 4.8px 8.8px;
  border: 0.8px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  color: #0a0a0a;
}
.page-machine-composition .activation-badge {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-sm);
  padding: var(--md-spacing-sm) var(--md-spacing-md);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
.page-machine-composition .activation-badge--active {
  background: rgba(98, 186, 135, 0.1);
  color: var(--md-color-green-400);
}
.page-machine-composition .activation-badge--active .status-icon {
  background: var(--md-color-green-200);
}
.page-machine-composition .activation-badge--inactive {
  background: rgba(193, 64, 57, 0.1);
  color: var(--md-color-red-200);
}
.page-machine-composition .activation-badge--inactive .status-icon {
  background: var(--md-color-red-200);
}
.page-machine-composition .activation-badge--virtuelle {
  background: rgba(38, 34, 98, 0.1);
  color: var(--md-color-blue-300);
}
.page-machine-composition .activation-badge--virtuelle .status-icon {
  background: var(--md-color-blue-300);
}
.page-machine-composition .activation-badge .status-icon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.page-machine-composition .last-sync {
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  color: var(--md-color-neutrals-350);
}
.page-machine-composition .div-localisation {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-lg);
}
.page-machine-composition .machine-number {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--md-color-neutrals-400);
}
.page-machine-composition .location-info {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-xs);
}
.page-machine-composition .location-info .icon-pin {
  width: 16px;
  height: 16px;
}
.page-machine-composition .location-info span {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--md-color-neutrals-350);
}
.page-machine-composition .button-parametres-avances {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: var(--md-color-blue-300);
  color: white;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.page-machine-composition .button-parametres-avances:hover {
  background: var(--md-color-blue-400);
}
.page-machine-composition .nav-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.page-machine-composition .ul-tabs-list {
  display: flex;
  align-items: center;
  list-style: none;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  padding: 0 var(--md-spacing-xs);
  margin: 0;
}
.page-machine-composition .li-tab {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-150);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.page-machine-composition .li-tab a {
  display: block;
  padding: var(--md-spacing-md);
  color: inherit;
  text-decoration: none;
}
.page-machine-composition .li-tab:hover {
  color: var(--md-color-blue-300);
}
.page-machine-composition .li-tab.active {
  color: var(--md-color-blue-300);
  border-bottom-color: var(--md-color-blue-300);
}
.page-machine-composition .div-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.page-machine-composition .button-supprimer-casiers {
  background: #c14039;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-width: 88px;
  white-space: nowrap;
}
.page-machine-composition .button-supprimer-casiers:hover {
  filter: brightness(0.9);
}
.page-machine-composition .button-enregistrer {
  background: #62ba87;
  color: #213e2d;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-width: 88px;
  white-space: nowrap;
}
.page-machine-composition .button-enregistrer:hover {
  filter: brightness(0.9);
}
.page-machine-composition .content-area {
  display: flex;
  flex: 1;
  gap: 0;
  overflow: auto;
  min-height: 0;
}
.page-machine-composition .aside-filtres {
  width: 332px;
  min-width: 332px;
  padding-right: 28px;
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.page-machine-composition .form-filtres-produits {
  background: white;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page-machine-composition .label-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #262262;
}
.page-machine-composition .label-section-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: #262262;
}
.page-machine-composition .select-wrapper {
  position: relative;
  width: 100%;
}
.page-machine-composition .select-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 8px 16px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #262262;
  cursor: pointer;
  width: 100%;
}
.page-machine-composition .select-button span {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.page-machine-composition .select-button .icon-chevron {
  transition: transform 0.2s ease;
}
.page-machine-composition .select-button.open .icon-chevron {
  transform: rotate(180deg);
}
.page-machine-composition .icon-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.page-machine-composition .dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  list-style: none;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 4px;
  animation: compositionDropdownIn 0.15s ease;
}
@keyframes compositionDropdownIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.page-machine-composition .dropdown-search-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
}
.page-machine-composition .dropdown-search-wrapper .icon-search {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.page-machine-composition .dropdown-search-wrapper .dropdown-search-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 13px;
  font-weight: 500;
  color: #262262;
  background: transparent;
}
.page-machine-composition .dropdown-search-wrapper .dropdown-search-input::placeholder {
  color: #99a1af;
}
.page-machine-composition .dropdown-items-list {
  max-height: 240px;
  overflow-y: auto;
}
.page-machine-composition .dropdown-item {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #262262;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-machine-composition .dropdown-item:hover {
  background: #f5f4ff;
}
.page-machine-composition .dropdown-item.active {
  background: #262262;
  color: white;
}
.page-machine-composition .dropdown-item.dropdown-item-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.page-machine-composition .div-produit-selectionne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 48px;
  border-radius: 12px;
}
.page-machine-composition .badge-produit {
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-machine-composition .color-indicator {
  width: 8px;
  height: 8px;
  border-radius: 900px;
  flex-shrink: 0;
  background-color: var(--md-color-green-200);
}
.page-machine-composition .color-indicator.inactive {
  background-color: #cecece;
}
.page-machine-composition .badge-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  color: #262262;
  line-height: 16.5px;
}
.page-machine-composition .badge-label.green {
  color: #62ba87;
}
.page-machine-composition .badge-label.white {
  color: white;
}
.page-machine-composition .ul-produits-recents {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-machine-composition .li-produit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-radius: 4px;
  background: #f1f1f1;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.page-machine-composition .li-produit:hover {
  filter: brightness(0.95);
}
.page-machine-composition .li-produit.active {
  background: #262262;
}
.page-machine-composition .li-produit.active .badge-label {
  color: white;
}
.page-machine-composition .button-remove {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #62ba87;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.page-machine-composition .icon-check {
  width: 12px;
  height: 12px;
}
.page-machine-composition .div-statistiques {
  background: white;
  border-radius: 8px;
  padding: 16px;
}
.page-machine-composition .div-stats-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page-machine-composition .div-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-machine-composition .div-stat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.page-machine-composition .stat-label {
  font-size: 11px;
  font-weight: 600;
  color: #99a1af;
  text-transform: capitalize;
  line-height: 16.5px;
}
.page-machine-composition .stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #262262;
}
.page-machine-composition .div-progress-bar {
  width: 100%;
  height: 8px;
  background: #f3f4f6;
  border-radius: 9999px;
  overflow: hidden;
}
.page-machine-composition .div-progress-fill {
  height: 100%;
  background: #62ba87;
  border-radius: 9999px;
  transition: width 0.4s ease;
}
.page-machine-composition .section-grilles-casiers {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}
.page-machine-composition .section-armoire {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.page-machine-composition .div-void-bandeau {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 10px, #ebebeb 10px, #ebebeb 20px);
  border: 2px dashed #d0d0d0;
  border-radius: 12px;
}
.page-machine-composition .void-bandeau-text {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #9ca3af;
  letter-spacing: 1px;
}
.page-machine-composition .header-armoire {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.page-machine-composition .armoire-name {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #262262;
  white-space: nowrap;
}
.page-machine-composition .hr-separator {
  flex: 1;
  border: none;
  height: 1px;
  background: #e5e7eb;
}
.page-machine-composition .span-compteur-casiers {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 400;
  color: #99a1af;
  line-height: 16px;
  white-space: nowrap;
}
.page-machine-composition .section-grille {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page-machine-composition .grille-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: #262262;
}
.page-machine-composition .subview-tabs {
  display: flex;
  gap: 0;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  padding: 2px;
  width: fit-content;
}
.page-machine-composition .subview-tab {
  padding: 6px 16px;
  border: none;
  border-radius: 3px;
  background: transparent;
  font-family: var(--md-font-family);
  font-size: 13px;
  font-weight: 600;
  color: var(--md-color-blue-150);
  cursor: pointer;
  transition: all 0.15s ease;
}
.page-machine-composition .subview-tab:hover {
  color: var(--md-color-blue-300);
}
.page-machine-composition .subview-tab.active {
  background: var(--md-color-blue-300);
  color: white;
}
.page-machine-composition .div-grille-casiers {
  background: white;
  border-radius: 8px;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 3), 163px);
  gap: 10px;
}
@media screen and (min-width: 901px) {
  .page-machine-composition .div-grille-casiers {
    grid-template-columns: repeat(var(--grid-cols, 3), 245px);
    gap: 15px;
  }
}
.page-machine-composition .div-casier-component {
  width: 163px;
  padding: 8px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: filter 0.15s ease, transform 0.1s ease;
}
@media screen and (min-width: 901px) {
  .page-machine-composition .div-casier-component {
    width: 245px;
    padding: 12px;
    gap: 15px;
  }
}
.page-machine-composition .div-casier-component:hover {
  filter: brightness(0.92);
  transform: scale(1.02);
}
.page-machine-composition .casier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.page-machine-composition .casier-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.page-machine-composition .casier-image {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
@media screen and (min-width: 901px) {
  .page-machine-composition .casier-image {
    width: 40px;
    height: 40px;
  }
}
.page-machine-composition .casier-image .product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.page-machine-composition .casier-image .img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f1f1f1;
  border-radius: 4px;
}
.page-machine-composition .casier-image .img-placeholder svg {
  width: 60%;
  height: 60%;
}
.page-machine-composition .casier-numero {
  font-family: "Urbanist", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
}
@media screen and (min-width: 901px) {
  .page-machine-composition .casier-numero {
    font-size: 24px;
  }
}
.page-machine-composition .casier-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
}
@media screen and (min-width: 901px) {
  .page-machine-composition .casier-status {
    gap: 6px;
  }
}
.page-machine-composition .casier-status--vide {
  background: #f1f1f1;
}
.page-machine-composition .casier-status--vide .status-text {
  color: #5e5e5e;
}
.page-machine-composition .casier-status--vide .icon-status path {
  stroke: #5e5e5e;
}
.page-machine-composition .casier-status--rempli {
  background: #a8d8b9;
}
.page-machine-composition .casier-status--rempli .status-text {
  color: #000000;
}
.page-machine-composition .casier-status--rempli .icon-status path {
  stroke: #000000;
}
.page-machine-composition .icon-status {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
@media screen and (min-width: 901px) {
  .page-machine-composition .icon-status {
    width: 18px;
    height: 18px;
  }
}
.page-machine-composition .status-text {
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}
@media screen and (min-width: 901px) {
  .page-machine-composition .status-text {
    font-size: 18px;
  }
}
.page-machine-composition .casier-produit {
  font-size: 8px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (min-width: 901px) {
  .page-machine-composition .casier-produit {
    font-size: 12px;
  }
}
.page-machine-composition .div-casier-vide {
  background: #f1f1f1;
}
.page-machine-composition .div-casier-vide .casier-numero {
  color: #5e5e5e;
}
.page-machine-composition .div-casier-vide .casier-produit {
  color: #5e5e5e;
}
.page-machine-composition .div-casier-assigne-selectionne {
  background: #62ba87;
}
.page-machine-composition .div-casier-assigne-selectionne .casier-numero {
  color: #2c543d;
}
.page-machine-composition .div-casier-assigne-selectionne .casier-produit {
  color: #2c543d;
}
.page-machine-composition .div-casier-assigne-charge {
  background: #262262;
}
.page-machine-composition .div-casier-assigne-charge .casier-numero {
  color: white;
}
.page-machine-composition .div-casier-assigne-charge .casier-produit {
  color: white;
}
.page-machine-composition .footer-legende {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--md-spacing-3xl);
  height: 50px;
  min-height: 50px;
  background: white;
  border-top: 1px solid #f3f4f6;
  margin-left: calc(-1 * var(--md-spacing-3xl));
  margin-right: calc(-1 * var(--md-spacing-3xl));
  margin-bottom: calc(-1 * var(--md-spacing-xl));
}
.page-machine-composition .div-legende-gauche,
.page-machine-composition .div-legende-droite {
  display: flex;
  align-items: center;
}
.page-machine-composition .div-legende-gauche {
  gap: 32px;
}
.page-machine-composition .div-legende-droite {
  gap: 24px;
}
.page-machine-composition .legende-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-machine-composition .legende-color-box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}
.page-machine-composition .legende-color-box.green-selected {
  background: #62ba87;
}
.page-machine-composition .legende-color-box.blue-assigned {
  background: #262262;
}
.page-machine-composition .legende-color-box.gray-empty {
  background: #f1f1f1;
  border: 1px solid #e5e7eb;
}
.page-machine-composition .legende-text {
  font-size: 11px;
  font-weight: 600;
  color: #262262;
  text-transform: capitalize;
  white-space: nowrap;
}
.page-machine-composition .legende-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.page-machine-composition .legende-text-italic {
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  color: #a7a7a7;
  line-height: 16.5px;
  white-space: nowrap;
}
.page-machine-composition .toast-container {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-machine-composition .toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
  animation: toast-slide-in-composition 0.3s ease-out;
}
.page-machine-composition .toast.toast-fade-out {
  animation: toast-slide-out-composition 0.3s ease-in forwards;
}
.page-machine-composition .toast--info {
  border-left: 4px solid var(--md-color-blue-300);
}
.page-machine-composition .toast--info .toast-icon {
  color: var(--md-color-blue-300);
}
.page-machine-composition .toast--success {
  border-left: 4px solid var(--md-color-green-200);
}
.page-machine-composition .toast--success .toast-icon {
  color: var(--md-color-green-200);
}
.page-machine-composition .toast--error {
  border-left: 4px solid var(--md-color-red-200);
}
.page-machine-composition .toast--error .toast-icon {
  color: var(--md-color-red-200);
}
@keyframes toast-slide-in-composition {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes toast-slide-out-composition {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
.page-machine-composition .toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.page-machine-composition .button-filtres-mobile {
  display: none;
}
.page-machine-composition .drawer-header {
  display: none;
}
.page-machine-composition .drawer-overlay {
  display: none;
}
@media screen and (max-width: 719px) {
  .page-machine-composition {
    /* --- Header fixe banner --- */
    padding-top: 72px;
    overflow: hidden;
    height: 100svh;
    /* --- Main content --- */
    /* --- Header masqué (sauf paramètres avancés) --- */
    /* --- Nav tabs : scroll horizontal + boutons --- */
    /* Bouton Filtres mobile (visible, pleine largeur) */
    /* Actions buttons mobile */
    /* --- Content area --- */
    /* --- Drawer overlay --- */
    /* --- Drawer filtres (slide-in from left) --- */
    /* --- Grille casiers : zone scrollable --- */
    /* --- Casiers : taille réduite pour tenir en largeur --- */
    /* --- Footer légende (centrée) --- */
    /* --- Toasts pleine largeur --- */
  }
  .page-machine-composition::before {
    content: "Composition";
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
    height: 72px;
    min-height: 72px;
    padding-left: 80px;
    padding-top: 8px;
    background: var(--md-color-neutrals-50);
    border-radius: 0 0 8px 8px;
    z-index: 3;
    font-family: var(--md-font-family);
    font-size: 20px;
    font-weight: 700;
    color: #262262;
    line-height: normal;
    box-sizing: border-box;
  }
  .page-machine-composition .section-main-content {
    padding: var(--md-spacing-xl);
    height: calc(100svh - 72px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: var(--md-spacing-lg);
  }
  .page-machine-composition .header-page-top {
    display: none;
  }
  .page-machine-composition .header-page-top:has(.button-parametres-avances) {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    border-bottom: none;
    padding-bottom: 0;
    align-items: center;
    justify-content: space-between;
  }
  .page-machine-composition .button-retour {
    display: flex;
  }
  .page-machine-composition .div-machine-info {
    display: none;
  }
  .page-machine-composition .div-machine-title-bar {
    width: auto;
  }
  .page-machine-composition .button-parametres-avances {
    width: auto;
  }
  .page-machine-composition .nav-tabs-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--md-spacing-sm);
    flex-shrink: 0;
  }
  .page-machine-composition .ul-tabs-list {
    flex: 0 0 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-machine-composition .ul-tabs-list::-webkit-scrollbar {
    display: none;
  }
  .page-machine-composition .li-tab {
    flex-shrink: 0;
    font-size: 12px;
  }
  .page-machine-composition .li-tab a {
    padding: var(--md-spacing-sm) var(--md-spacing-md);
    white-space: nowrap;
  }
  .page-machine-composition .button-filtres-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 100%;
    background: var(--md-color-blue-300);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    font-family: var(--md-font-family);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }
  .page-machine-composition .button-filtres-mobile svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  .page-machine-composition .div-actions {
    display: flex;
    flex: 1;
    gap: 8px;
  }
  .page-machine-composition .div-actions .button-supprimer-casiers,
  .page-machine-composition .div-actions .button-enregistrer {
    flex: 1;
    font-size: 13px;
    padding: 8px 12px;
    min-width: unset;
  }
  .page-machine-composition .content-area {
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
  }
  .page-machine-composition .drawer-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 199;
  }
  .page-machine-composition .drawer-overlay.hidden {
    display: none;
  }
  .page-machine-composition .aside-filtres {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    min-width: 300px;
    height: 100%;
    background: white;
    z-index: 200;
    padding: 0;
    padding-right: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: none;
  }
  .page-machine-composition .aside-filtres.drawer-open {
    transform: translateX(0);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
  }
  .page-machine-composition .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px;
    border-bottom: 1px solid var(--md-color-neutrals-100);
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
  }
  .page-machine-composition .drawer-title {
    font-family: var(--md-font-family);
    font-size: 18px;
    font-weight: 700;
    color: #262262;
  }
  .page-machine-composition .button-fermer-drawer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--md-color-neutrals-100);
    border: none;
    border-radius: 50%;
    cursor: pointer;
  }
  .page-machine-composition .form-filtres-produits {
    padding: 16px;
  }
  .page-machine-composition .div-statistiques {
    margin: 0 16px 16px;
  }
  .page-machine-composition .section-grilles-casiers {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-machine-composition .section-grilles-casiers::-webkit-scrollbar {
    display: none;
  }
  .page-machine-composition .div-grille-casiers {
    grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
    padding: 8px;
    gap: 6px;
  }
  .page-machine-composition .div-casier-component {
    width: auto;
    padding: 6px;
    gap: 4px;
  }
  .page-machine-composition .div-casier-component:hover {
    transform: none;
  }
  .page-machine-composition .casier-numero {
    font-size: 12px;
  }
  .page-machine-composition .icon-status {
    width: 10px;
    height: 10px;
  }
  .page-machine-composition .status-text {
    display: none;
  }
  .page-machine-composition .casier-produit {
    font-size: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .page-machine-composition .section-armoire {
    gap: 16px;
  }
  .page-machine-composition .header-armoire {
    gap: 8px;
  }
  .page-machine-composition .armoire-name {
    font-size: 12px;
  }
  .page-machine-composition .span-compteur-casiers {
    font-size: 10px;
    padding: 2px 6px;
  }
  .page-machine-composition .subview-tabs {
    width: 100%;
  }
  .page-machine-composition .subview-tab {
    flex: 1;
    text-align: center;
    padding: 6px 8px;
    font-size: 12px;
  }
  .page-machine-composition .footer-legende {
    flex-direction: column;
    height: auto;
    min-height: auto;
    padding: var(--md-spacing-md);
    gap: var(--md-spacing-sm);
    align-items: center;
    margin-left: calc(-1 * var(--md-spacing-xl));
    margin-right: calc(-1 * var(--md-spacing-xl));
    margin-bottom: calc(-1 * var(--md-spacing-xl));
  }
  .page-machine-composition .div-legende-gauche,
  .page-machine-composition .div-legende-droite {
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .page-machine-composition .toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
  }
  .page-machine-composition .toast {
    width: 100%;
  }
}

/* ========================================
   OVERLAY MODAL (hors scope car position fixed)
   ======================================== */
.page-machine-composition ~ .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 100;
}

/* ========================================
   DIALOG : Confirmer suppression (hors scope car position fixed)
   ======================================== */
.page-machine-composition ~ .dialog-confirmer-suppression {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  min-width: 337px;
  width: 388px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-end;
  z-index: 101;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.page-machine-composition ~ .dialog-confirmer-suppression .dialog-top-bar {
  display: flex;
  justify-content: flex-end;
}
.page-machine-composition ~ .dialog-confirmer-suppression .button-fermer-modal {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1e1e1e;
}
.page-machine-composition ~ .dialog-confirmer-suppression .div-modal-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  width: 100%;
}
.page-machine-composition ~ .dialog-confirmer-suppression .dialog-message {
  font-size: 17px;
  font-weight: 600;
  color: #3d3d3d;
  text-align: center;
  max-width: 240px;
  line-height: normal;
}
.page-machine-composition ~ .dialog-confirmer-suppression .div-modal-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}
.page-machine-composition ~ .dialog-confirmer-suppression .div-modal-actions .btn-primary,
.page-machine-composition ~ .dialog-confirmer-suppression .div-modal-actions .btn-danger {
  flex: 1;
}
.page-machine-composition ~ .dialog-confirmer-suppression .btn-primary {
  padding: 8px 16px;
  background: #262262;
  color: white;
  border: none;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  min-width: 88px;
}
.page-machine-composition ~ .dialog-confirmer-suppression .btn-danger {
  padding: 8px 16px;
  background: #c14039;
  color: white;
  border: none;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  min-width: 88px;
}

/* --- Dialog centré sur mobile (garde le style desktop) --- */
@media screen and (max-width: 719px) {
  .page-machine-composition ~ .dialog-confirmer-suppression {
    width: calc(100% - 32px);
    min-width: unset;
  }
}
/* ========================================
   POPUP OVERLAY
   ======================================== */
.page-machine-composition ~ .popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

/* ========================================
   POPUP PARAMETRES AVANCES
   ======================================== */
.page-machine-composition ~ .popup-parametres-avances {
  --md-color-blue-500: #110f2c;
  --md-color-blue-450: #161338;
  --md-color-blue-400: #1b1846;
  --md-color-blue-300: #262262;
  --md-color-blue-150: #a2a0bb;
  --md-color-neutrals-500: #1e1e1e;
  --md-color-neutrals-450: #3d3d3d;
  --md-color-neutrals-400: #5e5e5e;
  --md-color-neutrals-350: #828282;
  --md-color-neutrals-300: #a7a7a7;
  --md-color-neutrals-250: #b2b2b2;
  --md-color-neutrals-150: #ddd;
  --md-color-neutrals-100: #f1f1f1;
  --md-color-neutrals-50: #fff;
  --md-color-green-450: #213e2d;
  --md-color-green-400: #3b7051;
  --md-color-green-200: #62ba87;
  --md-color-red-200: #c14039;
  --md-font-family: "Open Sans", sans-serif;
  --md-spacing-xs: 4px;
  --md-spacing-sm: 8px;
  --md-spacing-md: 12px;
  --md-spacing-lg: 16px;
  --md-spacing-xl: 20px;
  --md-spacing-2xl: 24px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 690px;
  max-height: 90vh;
  background: white;
  border-radius: 4px;
  padding: var(--md-spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
  z-index: 101;
  overflow-y: auto;
}
.page-machine-composition ~ .popup-parametres-avances .popup-header {
  display: flex;
  justify-content: flex-end;
}
.page-machine-composition ~ .popup-parametres-avances .button-fermer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
}
.page-machine-composition ~ .popup-parametres-avances .button-fermer svg {
  width: 10px;
  height: 10px;
}
.page-machine-composition ~ .popup-parametres-avances .section-popup-body {
  display: flex;
  flex-direction: column;
}
.page-machine-composition ~ .popup-parametres-avances .div-popup-content {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
}
.page-machine-composition ~ .popup-parametres-avances .div-popup-content h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--md-color-blue-500);
}
.page-machine-composition ~ .popup-parametres-avances .nav-popup-tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  padding: 0 var(--md-spacing-xs);
}
.page-machine-composition ~ .popup-parametres-avances .li-tab-popup {
  padding: var(--md-spacing-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-150);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--md-font-family);
  transition: all 0.2s;
}
.page-machine-composition ~ .popup-parametres-avances .li-tab-popup:hover {
  color: var(--md-color-blue-300);
}
.page-machine-composition ~ .popup-parametres-avances .li-tab-popup.active {
  color: var(--md-color-blue-300);
  border-bottom-color: var(--md-color-blue-300);
}
.page-machine-composition ~ .popup-parametres-avances .popup-tab-content {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
  margin-top: var(--md-spacing-2xl);
}
.page-machine-composition ~ .popup-parametres-avances .div-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
}
.page-machine-composition ~ .popup-parametres-avances .div-field-row label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-composition ~ .popup-parametres-avances .div-field-row.with-description {
  align-items: flex-start;
}
.page-machine-composition ~ .popup-parametres-avances .label-group {
  display: flex;
  flex-direction: column;
}
.page-machine-composition ~ .popup-parametres-avances .label-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-composition ~ .popup-parametres-avances .field-description {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #99a1af;
}
.page-machine-composition ~ .popup-parametres-avances .select-wrapper {
  position: relative;
  width: 111px;
}
.page-machine-composition ~ .popup-parametres-avances .select-wrapper select {
  width: 100%;
  height: 36px;
  padding: 0 32px 0 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
  appearance: none;
  cursor: pointer;
}
.page-machine-composition ~ .popup-parametres-avances .select-wrapper select:disabled {
  color: var(--md-color-neutrals-300);
  background: var(--md-color-neutrals-100);
}
.page-machine-composition ~ .popup-parametres-avances .select-wrapper .icon-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  pointer-events: none;
}
.page-machine-composition ~ .popup-parametres-avances .popup-tab-content input[type=number],
.page-machine-composition ~ .popup-parametres-avances .popup-tab-content input[type=text] {
  width: 111px;
  height: 36px;
  padding: 12px 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
}
.page-machine-composition ~ .popup-parametres-avances .popup-tab-content input[type=number]::placeholder,
.page-machine-composition ~ .popup-parametres-avances .popup-tab-content input[type=text]::placeholder {
  color: var(--md-color-neutrals-300);
}
.page-machine-composition ~ .popup-parametres-avances .popup-tab-content input[type=number]:disabled,
.page-machine-composition ~ .popup-parametres-avances .popup-tab-content input[type=text]:disabled {
  color: var(--md-color-neutrals-300);
  background: var(--md-color-neutrals-100);
}
.page-machine-composition ~ .popup-parametres-avances .popup-tab-content input[type=number].input-error,
.page-machine-composition ~ .popup-parametres-avances .popup-tab-content input[type=text].input-error {
  border-color: var(--md-color-red-200);
}
.page-machine-composition ~ .popup-parametres-avances .div-field-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
.page-machine-composition ~ .popup-parametres-avances .div-field-toggle label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #0a0a0a;
}
.page-machine-composition ~ .popup-parametres-avances .div-field-toggle .label-group label {
  font-size: 16px;
  font-weight: 400;
}
.page-machine-composition ~ .popup-parametres-avances .div-field-toggle .field-description {
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
}
.page-machine-composition ~ .popup-parametres-avances .div-field-toggle.disabled {
  opacity: 0.5;
}
.page-machine-composition ~ .popup-parametres-avances .div-field-toggle.disabled .input-toggle {
  pointer-events: none;
}
.page-machine-composition ~ .popup-parametres-avances .input-toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--md-color-neutrals-250);
  border: none;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.page-machine-composition ~ .popup-parametres-avances .input-toggle .toggle-knob {
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.page-machine-composition ~ .popup-parametres-avances .input-toggle.active {
  background: var(--md-color-blue-300);
}
.page-machine-composition ~ .popup-parametres-avances .input-toggle.active .toggle-knob {
  left: 18px;
}
.page-machine-composition ~ .popup-parametres-avances .div-field-slider {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-md);
}
.page-machine-composition ~ .popup-parametres-avances .div-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-machine-composition ~ .popup-parametres-avances .div-slider-header label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #0a0a0a;
}
.page-machine-composition ~ .popup-parametres-avances .slider-value {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #101828;
  white-space: nowrap;
  flex-shrink: 0;
}
.page-machine-composition ~ .popup-parametres-avances .div-slider-track {
  position: relative;
  height: 16px;
  background: #ececf0;
  border-radius: 9999px;
}
.page-machine-composition ~ .popup-parametres-avances .slider-progress {
  position: absolute;
  height: 100%;
  background: var(--md-color-blue-300);
  border-radius: 16px;
  left: 0;
}
.page-machine-composition ~ .popup-parametres-avances .slider-thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border: 0.8px solid var(--md-color-blue-300);
  border-radius: 50%;
  top: 0;
  transform: translateX(-50%);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
  cursor: grab;
}
.page-machine-composition ~ .popup-parametres-avances .div-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #6a7282;
}
.page-machine-composition ~ .popup-parametres-avances .div-tva-taux-transfert {
  background: #fcfcfc;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 12px;
  padding: var(--md-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
}
.page-machine-composition ~ .popup-parametres-avances .div-taux-columns {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
}
.page-machine-composition ~ .popup-parametres-avances .div-taux-disponibles,
.page-machine-composition ~ .popup-parametres-avances .div-taux-machine-priorises {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-md);
  width: 221px;
}
.page-machine-composition ~ .popup-parametres-avances .column-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--md-color-neutrals-300);
  text-transform: capitalize;
}
.page-machine-composition ~ .popup-parametres-avances .column-title span {
  text-transform: lowercase;
}
.page-machine-composition ~ .popup-parametres-avances .column-title.active {
  color: var(--md-color-blue-300);
}
.page-machine-composition ~ .popup-parametres-avances .table-taux-list {
  background: white;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 8px;
  height: 189px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-machine-composition ~ .popup-parametres-avances .th-header {
  background: #fcfcfc;
  border-bottom: 0.8px solid var(--md-color-neutrals-100);
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-size: 11px;
  font-weight: 700;
  color: var(--md-color-neutrals-400);
  text-transform: uppercase;
  letter-spacing: -0.55px;
  height: 32px;
  display: flex;
  align-items: center;
}
.page-machine-composition ~ .popup-parametres-avances .th-header.active {
  background: var(--md-color-blue-300);
  color: white;
}
.page-machine-composition ~ .popup-parametres-avances .div-taux-rows {
  flex: 1;
  overflow-y: auto;
}
.page-machine-composition ~ .popup-parametres-avances .tr-taux-row {
  padding: var(--md-spacing-md) var(--md-spacing-lg);
  font-size: 14px;
  font-weight: 700;
  color: var(--md-color-neutrals-400);
  border-bottom: 0.8px solid #f9fafb;
  cursor: pointer;
}
.page-machine-composition ~ .popup-parametres-avances .tr-taux-row:hover {
  background: #f9fafb;
}
.page-machine-composition ~ .popup-parametres-avances .tr-taux-row.selected {
  background: #e8e8ff;
}
.page-machine-composition ~ .popup-parametres-avances .tr-taux-row.with-badge {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
  color: var(--md-color-blue-450);
}
.page-machine-composition ~ .popup-parametres-avances .badge-priorite {
  width: 20px;
  height: 20px;
  background: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--md-color-neutrals-300);
}
.page-machine-composition ~ .popup-parametres-avances .div-transfer-buttons-add,
.page-machine-composition ~ .popup-parametres-avances .div-transfer-buttons-reorder {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 100%;
}
.page-machine-composition ~ .popup-parametres-avances .button-icon {
  width: 40px;
  height: 40px;
  background: white;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.page-machine-composition ~ .popup-parametres-avances .button-icon:hover {
  background: #f9fafb;
}
.page-machine-composition ~ .popup-parametres-avances .button-icon.disabled {
  opacity: 0.5;
}
.page-machine-composition ~ .popup-parametres-avances .button-icon svg {
  width: 16px;
  height: 16px;
  color: var(--md-color-neutrals-400);
}
.page-machine-composition ~ .popup-parametres-avances .p-note-priorite {
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  line-height: 15.7px;
  color: var(--md-color-neutrals-300);
  text-align: center;
}
.page-machine-composition ~ .popup-parametres-avances .div-fields-passwords {
  display: flex;
  gap: var(--md-spacing-lg);
  width: 100%;
}
.page-machine-composition ~ .popup-parametres-avances .div-field-mdp {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xs);
}
.page-machine-composition ~ .popup-parametres-avances .div-field-mdp label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-composition ~ .popup-parametres-avances .div-field-mdp.disabled {
  opacity: 0.5;
}
.page-machine-composition ~ .popup-parametres-avances .div-field-mdp.disabled .button-modifier-mdp {
  pointer-events: none;
}
.page-machine-composition ~ .popup-parametres-avances .input-mdp-wrapper {
  display: flex;
  align-items: center;
  height: 44px;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  padding: 4px;
  gap: 4px;
}
.page-machine-composition ~ .popup-parametres-avances .input-mdp {
  flex: 1;
  min-width: 0;
  height: 36px;
  border: none;
  background: transparent;
  font-family: var(--md-font-family);
  font-size: 14px;
  color: #0a0a0a;
  padding: 0 8px 0 12px;
  outline: none;
  box-shadow: none;
}
.page-machine-composition ~ .popup-parametres-avances .input-mdp:focus {
  border: none;
  outline: none;
  box-shadow: none;
}
.page-machine-composition ~ .popup-parametres-avances .input-mdp.input-error {
  color: var(--md-color-red-200);
}
.page-machine-composition ~ .popup-parametres-avances .button-modifier-mdp {
  flex-shrink: 0;
  height: 36px;
  padding: 8px 16px;
  font-size: 14px;
  white-space: nowrap;
}
.page-machine-composition ~ .popup-parametres-avances .div-field-teamviewer {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: var(--md-spacing-lg);
  gap: var(--md-spacing-lg);
}
.page-machine-composition ~ .popup-parametres-avances .div-field-teamviewer label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
  white-space: nowrap;
}
.page-machine-composition ~ .popup-parametres-avances .input-teamviewer {
  flex: 1;
  height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
}
.page-machine-composition ~ .popup-parametres-avances .input-teamviewer::placeholder {
  color: var(--md-color-neutrals-300);
}
.page-machine-composition ~ .popup-parametres-avances .footer-popup-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 17px;
  border-top: 1px solid var(--md-color-neutrals-150);
  margin-top: var(--md-spacing-2xl);
}
.page-machine-composition ~ .popup-parametres-avances .footer-popup-action .button-annuler {
  min-width: 88px;
}
.page-machine-composition ~ .popup-parametres-avances .footer-popup-action .button-enregistrer-popup {
  min-width: 108px;
}
.page-machine-composition ~ .popup-parametres-avances .btn-primary {
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.page-machine-composition ~ .popup-parametres-avances .btn-primary:hover {
  background: var(--md-color-blue-400);
}
.page-machine-composition ~ .popup-parametres-avances .btn-primary.disabled, .page-machine-composition ~ .popup-parametres-avances .btn-primary:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.page-machine-composition ~ .popup-parametres-avances .btn-primary-small {
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.page-machine-composition ~ .popup-parametres-avances .btn-outline {
  background: transparent;
  color: var(--md-color-blue-450);
  border: 1px solid var(--md-color-blue-400);
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.4s;
}
.page-machine-composition ~ .popup-parametres-avances .btn-outline:hover {
  border: 1px solid var(--md-color-green-200);
  color: var(--md-color-green-200);
}
@media (max-width: 768px) {
  .page-machine-composition ~ .popup-parametres-avances {
    width: 95%;
    padding: var(--md-spacing-lg);
  }
  .page-machine-composition ~ .popup-parametres-avances .div-taux-columns {
    flex-direction: column;
  }
  .page-machine-composition ~ .popup-parametres-avances .div-taux-disponibles,
  .page-machine-composition ~ .popup-parametres-avances .div-taux-machine-priorises {
    width: 100%;
  }
  .page-machine-composition ~ .popup-parametres-avances .div-transfer-buttons-add,
  .page-machine-composition ~ .popup-parametres-avances .div-transfer-buttons-reorder {
    flex-direction: row;
    width: 100%;
    height: auto;
  }
}
@media (max-width: 719px) {
  .page-machine-composition ~ .popup-parametres-avances {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    transform: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .page-machine-composition ~ .popup-parametres-avances .popup-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--md-color-neutrals-100);
    flex-shrink: 0;
  }
  .page-machine-composition ~ .popup-parametres-avances .section-popup-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }
  .page-machine-composition ~ .popup-parametres-avances .div-popup-content h2 {
    font-size: 18px;
  }
  .page-machine-composition ~ .popup-parametres-avances .nav-popup-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .page-machine-composition ~ .popup-parametres-avances .li-tab-popup {
    flex-shrink: 0;
    font-size: 12px;
    padding: var(--md-spacing-sm);
    white-space: nowrap;
  }
  .page-machine-composition ~ .popup-parametres-avances .popup-tab-content {
    margin-top: var(--md-spacing-lg);
  }
  .page-machine-composition ~ .popup-parametres-avances .div-field-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-sm);
  }
  .page-machine-composition ~ .popup-parametres-avances .select-wrapper {
    width: 100%;
  }
  .page-machine-composition ~ .popup-parametres-avances .select-wrapper select {
    width: 100%;
  }
  .page-machine-composition ~ .popup-parametres-avances .popup-tab-content input[type=number],
  .page-machine-composition ~ .popup-parametres-avances .popup-tab-content input[type=text] {
    width: 100%;
  }
  .page-machine-composition ~ .popup-parametres-avances .div-fields-passwords {
    flex-direction: column;
  }
  .page-machine-composition ~ .popup-parametres-avances .div-field-teamviewer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-sm);
  }
}

/* ========================================
   Page Disposition - Styles SCSS
   Scope: .page-machine-disposition
   ======================================== */
.page-machine-disposition {
  /* --- Variables locales (identiques composition) --- */
  --md-color-blue-500: #110f2c;
  --md-color-blue-450: #161338;
  --md-color-blue-400: #1b1846;
  --md-color-blue-300: #262262;
  --md-color-blue-150: #a2a0bb;
  --md-color-neutrals-500: #1e1e1e;
  --md-color-neutrals-450: #3d3d3d;
  --md-color-neutrals-400: #5e5e5e;
  --md-color-neutrals-350: #828282;
  --md-color-neutrals-150: #ddd;
  --md-color-neutrals-100: #f1f1f1;
  --md-color-neutrals-50: #ffffff;
  --md-color-green-200: #62ba87;
  --md-color-green-350: #4a8c65;
  --md-color-green-400: #3b7051;
  --md-color-green-450: #213e2d;
  --md-color-red-200: #c14039;
  --md-color-gray-badge-text: #99a1af;
  --md-color-gray-border: #e5e7eb;
  --md-color-label-inactive: #7b7b7b;
  --md-bg-badge-charge: rgba(98, 186, 135, 0.1);
  --md-bg-badge-decharge: rgba(193, 64, 57, 0.1);
  --md-font-family: "Open Sans", sans-serif;
  --md-font-family-urbanist: "Urbanist", sans-serif;
  --md-spacing-xs: 4px;
  --md-spacing-sm: 8px;
  --md-spacing-md: 12px;
  --md-spacing-lg: 16px;
  --md-spacing-xl: 20px;
  --md-spacing-2xl: 24px;
  --md-spacing-3xl: 28px;
  --md-spacing-4xl: 32px;
  --md-radius-sm: 4px;
  --md-radius-md: 8px;
  /* --- Utility --- */
  /* ============================================
     LAYOUT PRINCIPAL (pattern composition)
     ============================================ */
  display: flex;
  min-height: 100vh;
  width: 100%;
  /* Sidebar Placeholder (masque, gere par bandeau) */
  /* Section main content */
  /* ============================================
     HEADER PAGE TOP (pattern composition)
     ============================================ */
  /* ============================================
     NAV TABS BAR (pattern composition)
     ============================================ */
  /* ============================================
     ACTIONS (toggle + exporter) dans nav-tabs-bar
     ============================================ */
  /* ============================================
     TOGGLE VUE
     ============================================ */
  /* ============================================
     BOUTON EXPORTER
     ============================================ */
  /* ============================================
     DROPDOWN EXPORT
     ============================================ */
  /* ============================================
     SELECT FILTRE ARMOIRE + DROPDOWN
     ============================================ */
  /* Dropdown menu */
  /* ============================================
     VUE TABLEAU
     ============================================ */
  /* Colonne Image (desktop) : vignette 48x48 centree, placeholder gris si pas d'image.
     Meme style que les vignettes du catalogue. */
  /* En-tete sticky */
  /* Icone de tri (identique catalogue) */
  /* Etats de tri actif (identique catalogue) */
  /* Lignes de donnees */
  /* Derniere ligne */
  /* Prix au poids — couleur verte + suffixe /kg */
  /* Cellule statut */
  /* Badge */
  /* Badge DLV — code couleur selon jours restants */
  /* DLV dans les cartes mobiles */
  /* ============================================
     VUE ARMOIRE — CONTENEUR
     ============================================ */
  /* ============================================
     SECTION ARMOIRE (pattern composition)
     ============================================ */
  /* ============================================
     ONGLETS SOUS-VUE (Devant/Derriere, Portion 1/2/3)
     ============================================ */
  /* ============================================
     VUE ARMOIRE — GRILLE (CSS Grid avec --grid-cols)
     ============================================ */
  /* ============================================
     CARD ARMOIRE — Base
     ============================================ */
  /* Partie gauche du header : image + numero casier cote a cote
     (meme pattern que la page composition) */
  /* Vignette produit a gauche du numero casier : carre 32x32 (mobile) / 40x40 (desktop),
     placeholder gris si pas d'image ou pas de produit */
  /* --- Etat 1 : Non assigne, decharge --- */
  /* --- Etat 2 : Assigne, decharge --- */
  /* --- Etat 3 : Assigne, charge --- */
  /* ============================================
     TOAST
     ============================================ */
  /* ============================================
     RESPONSIVE — MOBILE (max-width: 719px)
     ============================================ */
}
.page-machine-disposition .hidden {
  display: none !important;
}
.page-machine-disposition .aside-sidebar-placeholder {
  display: none;
}
.page-machine-disposition .section-main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
  padding: var(--md-spacing-3xl);
  padding-bottom: var(--md-spacing-xl);
  height: 100vh;
  max-width: calc(100vw - 260px);
  overflow-y: auto;
  overflow-x: hidden;
  background: linear-gradient(131.32deg, #f8f9fa 0%, #f5f4ff 100.57%);
  position: relative;
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  .page-machine-disposition .section-main-content {
    max-width: calc(100vw - 82px);
  }
}
@media screen and (max-width: 719px) {
  .page-machine-disposition .section-main-content {
    max-width: 100vw;
  }
}
.page-machine-disposition .header-page-top {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
  padding-bottom: var(--md-spacing-xl);
  border-bottom: 1px solid var(--md-color-neutrals-100);
}
.page-machine-disposition .button-retour {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-xs);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
}
.page-machine-disposition .button-retour .icon-arrow-back {
  width: 16px;
  height: 16px;
}
.page-machine-disposition .div-machine-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-spacing-4xl);
}
.page-machine-disposition .div-machine-info {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
  flex: 1;
}
.page-machine-disposition .div-machine-identite {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
}
.page-machine-disposition .machine-name {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--md-color-blue-450);
}
.page-machine-disposition .span-badge-version {
  padding: 4.8px 8.8px;
  border: 0.8px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  color: #0a0a0a;
}
.page-machine-disposition .activation-badge {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-sm);
  padding: var(--md-spacing-sm) var(--md-spacing-md);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
.page-machine-disposition .activation-badge--active {
  background: rgba(98, 186, 135, 0.1);
  color: var(--md-color-green-400);
}
.page-machine-disposition .activation-badge--active .status-icon {
  background: var(--md-color-green-200);
}
.page-machine-disposition .activation-badge--inactive {
  background: rgba(193, 64, 57, 0.1);
  color: var(--md-color-red-200);
}
.page-machine-disposition .activation-badge--inactive .status-icon {
  background: var(--md-color-red-200);
}
.page-machine-disposition .activation-badge--virtuelle {
  background: rgba(38, 34, 98, 0.1);
  color: var(--md-color-blue-300);
}
.page-machine-disposition .activation-badge--virtuelle .status-icon {
  background: var(--md-color-blue-300);
}
.page-machine-disposition .activation-badge .status-icon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.page-machine-disposition .last-sync {
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  color: var(--md-color-neutrals-350);
}
.page-machine-disposition .div-localisation {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-lg);
}
.page-machine-disposition .machine-number {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--md-color-neutrals-400);
}
.page-machine-disposition .location-info {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-xs);
}
.page-machine-disposition .location-info .icon-pin {
  width: 16px;
  height: 16px;
}
.page-machine-disposition .location-info span {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--md-color-neutrals-350);
}
.page-machine-disposition .button-parametres-avances {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: var(--md-color-blue-300);
  color: white;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.page-machine-disposition .button-parametres-avances:hover {
  background: var(--md-color-blue-400);
}
.page-machine-disposition .nav-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.page-machine-disposition .ul-tabs-list {
  display: flex;
  align-items: center;
  list-style: none;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  padding: 0 var(--md-spacing-xs);
  margin: 0;
}
.page-machine-disposition .li-tab {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-150);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.page-machine-disposition .li-tab a {
  display: block;
  padding: var(--md-spacing-md);
  color: inherit;
  text-decoration: none;
}
.page-machine-disposition .li-tab:hover {
  color: var(--md-color-blue-300);
}
.page-machine-disposition .li-tab.active {
  color: var(--md-color-blue-300);
  border-bottom-color: var(--md-color-blue-300);
}
.page-machine-disposition .div-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}
.page-machine-disposition .div-toggle-vue {
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-machine-disposition .label-vue {
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  user-select: none;
  transition: color 0.25s;
}
.page-machine-disposition .label-vue--active {
  color: var(--md-color-blue-400);
}
.page-machine-disposition .label-vue--inactive {
  color: var(--md-color-label-inactive);
}
.page-machine-disposition .input-toggle-vue {
  position: relative;
  width: 58px;
  height: 26px;
}
.page-machine-disposition .toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.page-machine-disposition .toggle-label {
  display: block;
  width: 58px;
  height: 26px;
  background: var(--md-color-blue-300);
  border-radius: 50px;
  position: relative;
  cursor: pointer;
  box-shadow: inset 0px 6px 8px 3px rgba(0, 0, 0, 0.1);
  transition: background 0.25s ease;
}
.page-machine-disposition .toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--md-color-neutrals-50);
  border-radius: 50%;
  box-shadow: 2px 1px 6px rgba(0, 0, 0, 0.25);
  transition: left 0.25s ease;
}
.page-machine-disposition .toggle-input:checked + .toggle-label {
  background: var(--md-color-green-200);
}
.page-machine-disposition .toggle-input:checked + .toggle-label .toggle-knob {
  left: 35px;
}
.page-machine-disposition .label-vue--active-green {
  color: var(--md-color-green-200);
}
.page-machine-disposition .button-exporter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--md-color-green-200);
  color: var(--md-color-green-450);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 4px;
  min-width: 88px;
  white-space: nowrap;
  transition: opacity 0.15s;
  border: none;
}
.page-machine-disposition .button-exporter:hover {
  opacity: 0.9;
}
.page-machine-disposition .icon-export {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.page-machine-disposition .dropdown-export-wrapper {
  position: relative;
  z-index: 50;
}
.page-machine-disposition .liste-export {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 100%;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.page-machine-disposition .liste-export .menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 42px;
  padding: 8px 16px;
  background: var(--md-color-neutrals-50);
  border: none;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-400);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.page-machine-disposition .liste-export .menu-item:hover {
  background-color: var(--md-color-green-200);
  color: var(--md-color-neutrals-50);
}
.page-machine-disposition .liste-export .menu-item:first-child {
  border-radius: 4px 4px 0 0;
}
.page-machine-disposition .liste-export .menu-item:last-child {
  border-radius: 0 0 4px 4px;
}
.page-machine-disposition .select-filtre-armoire {
  flex-shrink: 0;
  position: relative;
}
.page-machine-disposition .select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 254px;
  padding: 8px 16px;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  transition: border-color 0.15s;
}
.page-machine-disposition .select-trigger:hover {
  border-color: var(--md-color-blue-150);
}
.page-machine-disposition .select-trigger.open {
  border-color: var(--md-color-blue-300);
}
.page-machine-disposition .select-trigger.open .icon-chevron-down {
  transform: rotate(180deg);
}
.page-machine-disposition .select-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--md-color-blue-300);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.page-machine-disposition .icon-chevron-down {
  width: 10px;
  height: 6px;
  color: var(--md-color-blue-300);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.page-machine-disposition .dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  width: 254px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  list-style: none;
}
.page-machine-disposition .dropdown-menu li {
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--md-color-blue-300);
  transition: background 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-machine-disposition .dropdown-menu li:hover {
  background: var(--md-color-neutrals-100);
}
.page-machine-disposition .dropdown-menu li.selected {
  background: rgba(38, 34, 98, 0.06);
}
.page-machine-disposition .dropdown-menu li.disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.page-machine-disposition .table-disposition {
  width: 100%;
  max-height: 65vh;
  overflow-y: auto;
  border-radius: 4px;
  z-index: 0;
}
.page-machine-disposition .table-disposition .table-desktop {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.page-machine-disposition .table-disposition .cards-mobile {
  display: none;
}
.page-machine-disposition .table-desktop th[data-name=th-image],
.page-machine-disposition .table-desktop td[data-name=td-image] {
  width: 72px;
  text-align: center;
}
.page-machine-disposition .table-desktop td[data-name=td-image] {
  padding: 8px 12px;
}
.page-machine-disposition .table-desktop td[data-name=td-image] .product-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
}
.page-machine-disposition .table-desktop td[data-name=td-image] .img-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #f1f1f1;
  border-radius: 4px;
}
.page-machine-disposition .table-desktop td[data-name=td-image] .img-placeholder svg {
  width: 24px;
  height: 24px;
}
.page-machine-disposition .tr-entete th {
  background: var(--md-color-neutrals-50);
  color: var(--md-color-blue-300);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  padding: 14px 12px;
  height: 47px;
  border-top: 1px solid var(--md-color-neutrals-100);
  border-left: 1px solid var(--md-color-neutrals-100);
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
  position: sticky;
  top: 0;
  z-index: 5;
}
.page-machine-disposition .tr-entete th:hover {
  background: #fafafa;
}
.page-machine-disposition .tr-entete th:last-child {
  border-right: 1px solid var(--md-color-neutrals-100);
}
.page-machine-disposition .tr-entete th:first-child {
  border-top-left-radius: 4px;
}
.page-machine-disposition .tr-entete th:last-child {
  border-top-right-radius: 4px;
}
.page-machine-disposition .icon-tri {
  width: 15px;
  height: 11px;
  flex-shrink: 0;
  margin-left: 8px;
  vertical-align: middle;
  transition: transform 0.2s ease;
}
.page-machine-disposition th.sort-asc .icon-tri path:first-child {
  stroke: var(--md-color-blue-300);
  stroke-width: 1.5;
}
.page-machine-disposition th.sort-asc .icon-tri path:last-child {
  opacity: 0.3;
}
.page-machine-disposition th.sort-desc .icon-tri path:first-child {
  opacity: 0.3;
}
.page-machine-disposition th.sort-desc .icon-tri path:last-child {
  stroke: var(--md-color-blue-300);
  stroke-width: 1.5;
}
.page-machine-disposition .tr-ligne-casier td {
  background: var(--md-color-neutrals-50);
  color: var(--md-color-neutrals-450);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  padding: 14px 12px;
  height: 53px;
  border-top: 1px solid var(--md-color-neutrals-100);
  border-left: 1px solid var(--md-color-neutrals-100);
  vertical-align: middle;
}
.page-machine-disposition .tr-ligne-casier td:last-child {
  border-right: 1px solid var(--md-color-neutrals-100);
}
.page-machine-disposition #table-body tr:last-child td {
  border-bottom: 1px solid var(--md-color-neutrals-100);
}
.page-machine-disposition #table-body tr:last-child td:first-child {
  border-bottom-left-radius: 4px;
}
.page-machine-disposition #table-body tr:last-child td:last-child {
  border-bottom-right-radius: 4px;
}
.page-machine-disposition .prix-poids {
  color: var(--md-color-green-200);
}
.page-machine-disposition .unit-kg {
  font-size: 12px;
  font-weight: 400;
  margin-left: 2px;
}
.page-machine-disposition .td-statut-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.page-machine-disposition .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}
.page-machine-disposition .badge--charge {
  background: var(--md-bg-badge-charge);
  color: var(--md-color-green-400);
}
.page-machine-disposition .badge--decharge {
  background: var(--md-bg-badge-decharge);
  color: var(--md-color-red-200);
}
.page-machine-disposition .badge-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.page-machine-disposition .badge--charge .badge-dot {
  background: var(--md-color-green-400);
}
.page-machine-disposition .badge--decharge .badge-dot {
  background: var(--md-color-red-200);
}
.page-machine-disposition .badge-dlv {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}
.page-machine-disposition .dlv--vert {
  background: rgba(98, 186, 135, 0.1);
  color: var(--md-color-green-400);
}
.page-machine-disposition .dlv--orange {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
}
.page-machine-disposition .dlv--rouge {
  background: rgba(193, 64, 57, 0.1);
  color: var(--md-color-red-200);
}
.page-machine-disposition .card-tableau-dlv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--md-spacing-sm);
}
.page-machine-disposition .card-tableau-dlv-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-400);
}
.page-machine-disposition .date-chargement {
  font-weight: 600;
  font-size: 10px;
  color: var(--md-color-neutrals-400);
  white-space: nowrap;
}
.page-machine-disposition .div-grille-armoires {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
}
.page-machine-disposition .section-armoire {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page-machine-disposition .header-armoire {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.page-machine-disposition .armoire-name {
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-300);
  white-space: nowrap;
}
.page-machine-disposition .hr-separator {
  flex: 1;
  border: none;
  height: 1px;
  background: var(--md-color-gray-border);
}
.page-machine-disposition .span-compteur-casiers {
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-gray-border);
  border-radius: 8px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 400;
  color: var(--md-color-gray-badge-text);
  line-height: 16px;
  white-space: nowrap;
  flex-shrink: 0;
}
.page-machine-disposition .subview-tabs {
  display: flex;
  gap: 0;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  padding: 2px;
  width: fit-content;
}
.page-machine-disposition .subview-tab {
  padding: 6px 16px;
  border: none;
  border-radius: 3px;
  background: transparent;
  font-family: var(--md-font-family);
  font-size: 13px;
  font-weight: 600;
  color: var(--md-color-blue-150);
  cursor: pointer;
  transition: all 0.15s;
}
.page-machine-disposition .subview-tab:hover {
  color: var(--md-color-blue-300);
}
.page-machine-disposition .subview-tab.active {
  background: var(--md-color-blue-300);
  color: white;
}
.page-machine-disposition .div-grille-casiers {
  background: var(--md-color-neutrals-50);
  border-radius: 8px;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 3), 163px);
  gap: 10px;
}
@media screen and (min-width: 901px) {
  .page-machine-disposition .div-grille-casiers {
    grid-template-columns: repeat(var(--grid-cols, 3), 245px);
    gap: 15px;
  }
}
.page-machine-disposition .card-armoire {
  width: 163px;
  padding: 8px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media screen and (min-width: 901px) {
  .page-machine-disposition .card-armoire {
    width: 245px;
    padding: 12px;
    gap: 15px;
  }
}
.page-machine-disposition .casier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.page-machine-disposition .casier-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.page-machine-disposition .casier-image {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
@media screen and (min-width: 901px) {
  .page-machine-disposition .casier-image {
    width: 40px;
    height: 40px;
  }
}
.page-machine-disposition .casier-image .product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.page-machine-disposition .casier-image .img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f1f1f1;
  border-radius: 4px;
}
.page-machine-disposition .casier-image .img-placeholder svg {
  width: 60%;
  height: 60%;
}
.page-machine-disposition .casier-numero {
  font-family: var(--md-font-family-urbanist);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
}
@media screen and (min-width: 901px) {
  .page-machine-disposition .casier-numero {
    font-size: 24px;
  }
}
.page-machine-disposition .casier-statut {
  display: flex;
  align-items: center;
  gap: 4px;
}
@media screen and (min-width: 901px) {
  .page-machine-disposition .casier-statut {
    gap: 6px;
  }
}
.page-machine-disposition .icon-statut {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
@media screen and (min-width: 901px) {
  .page-machine-disposition .icon-statut {
    width: 24px;
    height: 24px;
  }
}
.page-machine-disposition .statut-text {
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}
@media screen and (min-width: 901px) {
  .page-machine-disposition .statut-text {
    font-size: 18px;
  }
}
.page-machine-disposition .casier-statut-date {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
@media screen and (min-width: 901px) {
  .page-machine-disposition .casier-statut-date {
    gap: 3px;
  }
}
.page-machine-disposition .casier-date {
  font-size: 6px;
  font-weight: 400;
  line-height: 1;
}
@media screen and (min-width: 901px) {
  .page-machine-disposition .casier-date {
    font-size: 9px;
  }
}
.page-machine-disposition .casier-footer {
  width: 100%;
}
.page-machine-disposition .casier-produit-prix {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 8px;
  font-weight: 400;
  min-width: 0;
}
@media screen and (min-width: 901px) {
  .page-machine-disposition .casier-produit-prix {
    font-size: 12px;
  }
}
.page-machine-disposition .produit-nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.page-machine-disposition .produit-prix {
  white-space: nowrap;
  flex-shrink: 0;
}
.page-machine-disposition .casier-no-product,
.page-machine-disposition .casier-product-assigned {
  font-size: 8px;
  font-weight: 400;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media screen and (min-width: 901px) {
  .page-machine-disposition .casier-no-product,
  .page-machine-disposition .casier-product-assigned {
    font-size: 12px;
  }
}
.page-machine-disposition .card-armoire--non-assigne {
  background: var(--md-color-neutrals-100);
  height: 63px;
}
@media screen and (min-width: 901px) {
  .page-machine-disposition .card-armoire--non-assigne {
    height: 95px;
  }
}
.page-machine-disposition .card-armoire--non-assigne .casier-numero,
.page-machine-disposition .card-armoire--non-assigne .icon-statut,
.page-machine-disposition .card-armoire--non-assigne .statut-text,
.page-machine-disposition .card-armoire--non-assigne .casier-no-product {
  color: var(--md-color-neutrals-400);
}
.page-machine-disposition .card-armoire--decharge-assigne {
  background: var(--md-color-neutrals-100);
  height: 63px;
}
@media screen and (min-width: 901px) {
  .page-machine-disposition .card-armoire--decharge-assigne {
    height: 95px;
  }
}
.page-machine-disposition .card-armoire--decharge-assigne .casier-numero,
.page-machine-disposition .card-armoire--decharge-assigne .icon-statut,
.page-machine-disposition .card-armoire--decharge-assigne .statut-text,
.page-machine-disposition .card-armoire--decharge-assigne .casier-product-assigned {
  color: var(--md-color-neutrals-400);
}
.page-machine-disposition .card-armoire--charge {
  background: var(--md-color-green-400);
  border: 1px solid var(--md-color-green-350);
}
.page-machine-disposition .card-armoire--charge .casier-numero,
.page-machine-disposition .card-armoire--charge .icon-statut,
.page-machine-disposition .card-armoire--charge .statut-text,
.page-machine-disposition .card-armoire--charge .casier-date,
.page-machine-disposition .card-armoire--charge .casier-produit-prix {
  color: var(--md-color-neutrals-50);
}
.page-machine-disposition .card-armoire--charge .prix-poids-card {
  color: var(--md-color-neutrals-50);
}
.page-machine-disposition .toast-container {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-machine-disposition .toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
  animation: toast-slide-in-disposition 0.3s ease-out;
}
.page-machine-disposition .toast.toast-fade-out {
  animation: toast-slide-out-disposition 0.3s ease-in forwards;
}
.page-machine-disposition .toast--info {
  border-left: 4px solid var(--md-color-blue-300);
}
.page-machine-disposition .toast--info .toast-icon {
  color: var(--md-color-blue-300);
}
.page-machine-disposition .toast--success {
  border-left: 4px solid var(--md-color-green-200);
}
.page-machine-disposition .toast--success .toast-icon {
  color: var(--md-color-green-200);
}
.page-machine-disposition .toast--error {
  border-left: 4px solid var(--md-color-red-200);
}
.page-machine-disposition .toast--error .toast-icon {
  color: var(--md-color-red-200);
}
@keyframes toast-slide-in-disposition {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes toast-slide-out-disposition {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
.page-machine-disposition .toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
@media screen and (max-width: 719px) {
  .page-machine-disposition {
    /* --- Header fixe banner --- */
    padding-top: 72px;
    overflow: hidden;
    height: 100svh;
    /* --- Main content --- */
    /* --- Header masqué (sauf paramètres avancés) --- */
    /* --- Nav tabs : scroll horizontal + boutons --- */
    /* Actions mobile (toggle + exporter) */
    /* --- Filtre armoire pleine largeur --- */
    /* --- Vue tableau : table masquée, cards visibles --- */
    /* --- Cards mobile pour vue tableau --- */
    /* Partie gauche du header : image + numero casier cote a cote */
    /* Vignette produit a gauche du numero casier (mobile) */
    /* Variantes d'état */
    /* --- Vue armoire : cards adaptatives --- */
    /* --- Section armoire --- */
    /* --- Vue armoire scrollable --- */
    /* --- Toasts pleine largeur --- */
  }
  .page-machine-disposition::before {
    content: "Disposition";
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
    height: 72px;
    min-height: 72px;
    padding-left: 80px;
    padding-top: 8px;
    background: var(--md-color-neutrals-50);
    border-radius: 0 0 8px 8px;
    z-index: 3;
    font-family: var(--md-font-family);
    font-size: 20px;
    font-weight: 700;
    color: #262262;
    line-height: normal;
    box-sizing: border-box;
  }
  .page-machine-disposition .section-main-content {
    padding: var(--md-spacing-xl);
    height: calc(100svh - 72px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: var(--md-spacing-lg);
  }
  .page-machine-disposition .header-page-top {
    display: none;
  }
  .page-machine-disposition .header-page-top:has(.button-parametres-avances) {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    border-bottom: none;
    padding-bottom: 0;
    align-items: center;
    justify-content: space-between;
  }
  .page-machine-disposition .button-retour {
    display: flex;
  }
  .page-machine-disposition .div-machine-info {
    display: none;
  }
  .page-machine-disposition .div-machine-title-bar {
    width: auto;
  }
  .page-machine-disposition .button-parametres-avances {
    width: auto;
  }
  .page-machine-disposition .nav-tabs-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--md-spacing-sm);
    flex-shrink: 0;
  }
  .page-machine-disposition .ul-tabs-list {
    flex: 0 0 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-machine-disposition .ul-tabs-list::-webkit-scrollbar {
    display: none;
  }
  .page-machine-disposition .li-tab {
    flex-shrink: 0;
    font-size: 12px;
  }
  .page-machine-disposition .li-tab a {
    padding: var(--md-spacing-sm) var(--md-spacing-md);
    white-space: nowrap;
  }
  .page-machine-disposition .div-actions {
    display: flex;
    flex: 1;
    gap: 8px;
    justify-content: space-between;
  }
  .page-machine-disposition .div-toggle-vue {
    gap: 4px;
  }
  .page-machine-disposition .label-vue {
    font-size: 11px;
  }
  .page-machine-disposition .input-toggle-vue {
    width: 44px;
    height: 22px;
  }
  .page-machine-disposition .toggle-label {
    width: 44px;
    height: 22px;
  }
  .page-machine-disposition .toggle-knob {
    width: 16px;
    height: 16px;
  }
  .page-machine-disposition .toggle-input:checked + .toggle-label .toggle-knob {
    left: 25px;
  }
  .page-machine-disposition .button-exporter {
    font-size: 12px;
    padding: 6px 10px;
    min-width: unset;
  }
  .page-machine-disposition .select-filtre-armoire {
    flex-shrink: 0;
  }
  .page-machine-disposition .select-trigger {
    width: 100%;
  }
  .page-machine-disposition .dropdown-menu {
    width: 100%;
  }
  .page-machine-disposition .select-label {
    font-size: 12px;
  }
  .page-machine-disposition .table-disposition {
    flex: 1;
    min-height: 0;
    max-height: unset;
    overflow-y: auto;
  }
  .page-machine-disposition .table-disposition .table-desktop {
    display: none;
  }
  .page-machine-disposition .table-disposition .cards-mobile {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .page-machine-disposition .card-tableau {
    background: var(--md-color-neutrals-50);
    border: 1px solid var(--md-color-neutrals-100);
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .page-machine-disposition .card-tableau-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .page-machine-disposition .card-tableau-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .page-machine-disposition .card-tableau-image {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }
  .page-machine-disposition .card-tableau-image .product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }
  .page-machine-disposition .card-tableau-image .img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #f1f1f1;
    border-radius: 4px;
  }
  .page-machine-disposition .card-tableau-image .img-placeholder svg {
    width: 60%;
    height: 60%;
  }
  .page-machine-disposition .card-tableau-numero {
    font-family: var(--md-font-family-urbanist);
    font-size: 16px;
    font-weight: 600;
    color: var(--md-color-blue-300);
  }
  .page-machine-disposition .card-tableau-produit {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .page-machine-disposition .card-tableau-produit-nom {
    font-size: 14px;
    font-weight: 600;
    color: var(--md-color-neutrals-450);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
  }
  .page-machine-disposition .card-tableau-produit-id {
    font-size: 12px;
    font-weight: 400;
    color: var(--md-color-neutrals-350);
    flex-shrink: 0;
  }
  .page-machine-disposition .card-tableau-produit-vide {
    font-size: 14px;
    font-weight: 400;
    color: var(--md-color-neutrals-350);
    font-style: italic;
  }
  .page-machine-disposition .card-tableau-clef {
    font-size: 12px;
    font-weight: 400;
    color: var(--md-color-neutrals-400);
  }
  .page-machine-disposition .card-tableau-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--md-color-neutrals-100);
    padding-top: 8px;
  }
  .page-machine-disposition .card-tableau-prix {
    font-size: 14px;
    font-weight: 700;
    color: var(--md-color-neutrals-500);
    white-space: nowrap;
  }
  .page-machine-disposition .card-tableau-prix.prix-poids {
    color: var(--md-color-green-200);
  }
  .page-machine-disposition .card-tableau-date {
    font-size: 11px;
    font-weight: 400;
    color: var(--md-color-neutrals-350);
  }
  .page-machine-disposition .card-tableau--charge {
    border-left: 3px solid var(--md-color-neutrals-150);
  }
  .page-machine-disposition .card-tableau--decharge {
    border-left: 3px solid var(--md-color-neutrals-150);
  }
  .page-machine-disposition .card-tableau--non-assigne {
    border-left: 3px solid var(--md-color-neutrals-150);
    background: #fafafa;
  }
  .page-machine-disposition .div-grille-casiers {
    grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
    padding: 8px;
    gap: 6px;
  }
  .page-machine-disposition .card-armoire {
    width: auto;
    padding: 6px;
    gap: 4px;
  }
  .page-machine-disposition .card-armoire--non-assigne,
  .page-machine-disposition .card-armoire--decharge-assigne {
    height: auto;
    min-height: 50px;
  }
  .page-machine-disposition .casier-numero {
    font-size: 12px;
  }
  .page-machine-disposition .icon-statut {
    width: 12px;
    height: 12px;
  }
  .page-machine-disposition .statut-text {
    display: none;
  }
  .page-machine-disposition .casier-date {
    font-size: 5px;
  }
  .page-machine-disposition .casier-produit-prix {
    font-size: 7px;
  }
  .page-machine-disposition .casier-no-product,
  .page-machine-disposition .casier-product-assigned {
    font-size: 7px;
  }
  .page-machine-disposition .produit-prix {
    font-size: 7px;
  }
  .page-machine-disposition .section-armoire {
    gap: 12px;
  }
  .page-machine-disposition .header-armoire {
    gap: 8px;
  }
  .page-machine-disposition .armoire-name {
    font-size: 12px;
  }
  .page-machine-disposition .span-compteur-casiers {
    font-size: 10px;
    padding: 2px 6px;
  }
  .page-machine-disposition .subview-tabs {
    width: 100%;
  }
  .page-machine-disposition .subview-tab {
    flex: 1;
    text-align: center;
    padding: 6px 8px;
    font-size: 12px;
  }
  .page-machine-disposition .div-grille-armoires {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-machine-disposition .div-grille-armoires::-webkit-scrollbar {
    display: none;
  }
  .page-machine-disposition .toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
  }
  .page-machine-disposition .toast {
    width: 100%;
  }
}

/* ============================================
   POPUP OVERLAY (sibling de .page-machine-disposition)
   ============================================ */
.page-machine-disposition ~ .popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

/* ========================================
   POPUP PARAMETRES AVANCES
   ======================================== */
.page-machine-disposition ~ .popup-parametres-avances {
  --md-color-blue-500: #110f2c;
  --md-color-blue-450: #161338;
  --md-color-blue-400: #1b1846;
  --md-color-blue-300: #262262;
  --md-color-blue-150: #a2a0bb;
  --md-color-neutrals-500: #1e1e1e;
  --md-color-neutrals-450: #3d3d3d;
  --md-color-neutrals-400: #5e5e5e;
  --md-color-neutrals-350: #828282;
  --md-color-neutrals-300: #a7a7a7;
  --md-color-neutrals-250: #b2b2b2;
  --md-color-neutrals-150: #ddd;
  --md-color-neutrals-100: #f1f1f1;
  --md-color-neutrals-50: #fff;
  --md-color-green-450: #213e2d;
  --md-color-green-400: #3b7051;
  --md-color-green-200: #62ba87;
  --md-color-red-200: #c14039;
  --md-font-family: "Open Sans", sans-serif;
  --md-spacing-xs: 4px;
  --md-spacing-sm: 8px;
  --md-spacing-md: 12px;
  --md-spacing-lg: 16px;
  --md-spacing-xl: 20px;
  --md-spacing-2xl: 24px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 690px;
  max-height: 90vh;
  background: white;
  border-radius: 4px;
  padding: var(--md-spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
  z-index: 101;
  overflow-y: auto;
}
.page-machine-disposition ~ .popup-parametres-avances .hidden {
  display: none !important;
}
.page-machine-disposition ~ .popup-parametres-avances .popup-header {
  display: flex;
  justify-content: flex-end;
}
.page-machine-disposition ~ .popup-parametres-avances .button-fermer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
}
.page-machine-disposition ~ .popup-parametres-avances .button-fermer svg {
  width: 10px;
  height: 10px;
}
.page-machine-disposition ~ .popup-parametres-avances .section-popup-body {
  display: flex;
  flex-direction: column;
}
.page-machine-disposition ~ .popup-parametres-avances .div-popup-content {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
}
.page-machine-disposition ~ .popup-parametres-avances .div-popup-content h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--md-color-blue-500);
}
.page-machine-disposition ~ .popup-parametres-avances .nav-popup-tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  padding: 0 var(--md-spacing-xs);
}
.page-machine-disposition ~ .popup-parametres-avances .li-tab-popup {
  padding: var(--md-spacing-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-150);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--md-font-family);
  transition: all 0.2s;
}
.page-machine-disposition ~ .popup-parametres-avances .li-tab-popup:hover {
  color: var(--md-color-blue-300);
}
.page-machine-disposition ~ .popup-parametres-avances .li-tab-popup.active {
  color: var(--md-color-blue-300);
  border-bottom-color: var(--md-color-blue-300);
}
.page-machine-disposition ~ .popup-parametres-avances .popup-tab-content {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
  margin-top: var(--md-spacing-2xl);
}
.page-machine-disposition ~ .popup-parametres-avances .div-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
}
.page-machine-disposition ~ .popup-parametres-avances .div-field-row label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-disposition ~ .popup-parametres-avances .div-field-row.with-description {
  align-items: flex-start;
}
.page-machine-disposition ~ .popup-parametres-avances .label-group {
  display: flex;
  flex-direction: column;
}
.page-machine-disposition ~ .popup-parametres-avances .label-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-disposition ~ .popup-parametres-avances .field-description {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #99a1af;
}
.page-machine-disposition ~ .popup-parametres-avances .select-wrapper {
  position: relative;
  width: 111px;
}
.page-machine-disposition ~ .popup-parametres-avances .select-wrapper select {
  width: 100%;
  height: 36px;
  padding: 0 32px 0 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
  appearance: none;
  cursor: pointer;
}
.page-machine-disposition ~ .popup-parametres-avances .select-wrapper select:disabled {
  color: var(--md-color-neutrals-300);
  background: var(--md-color-neutrals-100);
}
.page-machine-disposition ~ .popup-parametres-avances .select-wrapper .icon-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  pointer-events: none;
}
.page-machine-disposition ~ .popup-parametres-avances .popup-tab-content input[type=number],
.page-machine-disposition ~ .popup-parametres-avances .popup-tab-content input[type=text] {
  width: 111px;
  height: 36px;
  padding: 12px 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
}
.page-machine-disposition ~ .popup-parametres-avances .popup-tab-content input[type=number]::placeholder,
.page-machine-disposition ~ .popup-parametres-avances .popup-tab-content input[type=text]::placeholder {
  color: var(--md-color-neutrals-300);
}
.page-machine-disposition ~ .popup-parametres-avances .popup-tab-content input[type=number]:disabled,
.page-machine-disposition ~ .popup-parametres-avances .popup-tab-content input[type=text]:disabled {
  color: var(--md-color-neutrals-300);
  background: var(--md-color-neutrals-100);
}
.page-machine-disposition ~ .popup-parametres-avances .popup-tab-content input[type=number].input-error,
.page-machine-disposition ~ .popup-parametres-avances .popup-tab-content input[type=text].input-error {
  border-color: var(--md-color-red-200);
}
.page-machine-disposition ~ .popup-parametres-avances .div-field-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
.page-machine-disposition ~ .popup-parametres-avances .div-field-toggle label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #0a0a0a;
}
.page-machine-disposition ~ .popup-parametres-avances .div-field-toggle .label-group label {
  font-size: 16px;
  font-weight: 400;
}
.page-machine-disposition ~ .popup-parametres-avances .div-field-toggle .field-description {
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
}
.page-machine-disposition ~ .popup-parametres-avances .div-field-toggle.disabled {
  opacity: 0.5;
}
.page-machine-disposition ~ .popup-parametres-avances .div-field-toggle.disabled .input-toggle {
  pointer-events: none;
}
.page-machine-disposition ~ .popup-parametres-avances .input-toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--md-color-neutrals-250);
  border: none;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.page-machine-disposition ~ .popup-parametres-avances .input-toggle .toggle-knob {
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.page-machine-disposition ~ .popup-parametres-avances .input-toggle.active {
  background: var(--md-color-blue-300);
}
.page-machine-disposition ~ .popup-parametres-avances .input-toggle.active .toggle-knob {
  left: 18px;
}
.page-machine-disposition ~ .popup-parametres-avances .div-field-slider {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-md);
}
.page-machine-disposition ~ .popup-parametres-avances .div-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-machine-disposition ~ .popup-parametres-avances .div-slider-header label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #0a0a0a;
}
.page-machine-disposition ~ .popup-parametres-avances .slider-value {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #101828;
  white-space: nowrap;
  flex-shrink: 0;
}
.page-machine-disposition ~ .popup-parametres-avances .div-slider-track {
  position: relative;
  height: 16px;
  background: #ececf0;
  border-radius: 9999px;
}
.page-machine-disposition ~ .popup-parametres-avances .slider-progress {
  position: absolute;
  height: 100%;
  background: var(--md-color-blue-300);
  border-radius: 16px;
  left: 0;
}
.page-machine-disposition ~ .popup-parametres-avances .slider-thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border: 0.8px solid var(--md-color-blue-300);
  border-radius: 50%;
  top: 0;
  transform: translateX(-50%);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
  cursor: grab;
}
.page-machine-disposition ~ .popup-parametres-avances .div-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #6a7282;
}
.page-machine-disposition ~ .popup-parametres-avances .div-tva-taux-transfert {
  background: #fcfcfc;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 12px;
  padding: var(--md-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
}
.page-machine-disposition ~ .popup-parametres-avances .div-taux-columns {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
}
.page-machine-disposition ~ .popup-parametres-avances .div-taux-disponibles,
.page-machine-disposition ~ .popup-parametres-avances .div-taux-machine-priorises {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-md);
  width: 221px;
}
.page-machine-disposition ~ .popup-parametres-avances .column-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--md-color-neutrals-300);
  text-transform: capitalize;
}
.page-machine-disposition ~ .popup-parametres-avances .column-title span {
  text-transform: lowercase;
}
.page-machine-disposition ~ .popup-parametres-avances .column-title.active {
  color: var(--md-color-blue-300);
}
.page-machine-disposition ~ .popup-parametres-avances .table-taux-list {
  background: white;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 8px;
  height: 189px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-machine-disposition ~ .popup-parametres-avances .th-header {
  background: #fcfcfc;
  border-bottom: 0.8px solid var(--md-color-neutrals-100);
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-size: 11px;
  font-weight: 700;
  color: var(--md-color-neutrals-400);
  text-transform: uppercase;
  letter-spacing: -0.55px;
  height: 32px;
  display: flex;
  align-items: center;
}
.page-machine-disposition ~ .popup-parametres-avances .th-header.active {
  background: var(--md-color-blue-300);
  color: white;
}
.page-machine-disposition ~ .popup-parametres-avances .div-taux-rows {
  flex: 1;
  overflow-y: auto;
}
.page-machine-disposition ~ .popup-parametres-avances .tr-taux-row {
  padding: var(--md-spacing-md) var(--md-spacing-lg);
  font-size: 14px;
  font-weight: 700;
  color: var(--md-color-neutrals-400);
  border-bottom: 0.8px solid #f9fafb;
  cursor: pointer;
}
.page-machine-disposition ~ .popup-parametres-avances .tr-taux-row:hover {
  background: #f9fafb;
}
.page-machine-disposition ~ .popup-parametres-avances .tr-taux-row.selected {
  background: #e8e8ff;
}
.page-machine-disposition ~ .popup-parametres-avances .tr-taux-row.with-badge {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
  color: var(--md-color-blue-450);
}
.page-machine-disposition ~ .popup-parametres-avances .badge-priorite {
  width: 20px;
  height: 20px;
  background: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--md-color-neutrals-300);
}
.page-machine-disposition ~ .popup-parametres-avances .div-transfer-buttons-add,
.page-machine-disposition ~ .popup-parametres-avances .div-transfer-buttons-reorder {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 100%;
}
.page-machine-disposition ~ .popup-parametres-avances .button-icon {
  width: 40px;
  height: 40px;
  background: white;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.page-machine-disposition ~ .popup-parametres-avances .button-icon:hover {
  background: #f9fafb;
}
.page-machine-disposition ~ .popup-parametres-avances .button-icon.disabled {
  opacity: 0.5;
}
.page-machine-disposition ~ .popup-parametres-avances .button-icon svg {
  width: 16px;
  height: 16px;
  color: var(--md-color-neutrals-400);
}
.page-machine-disposition ~ .popup-parametres-avances .p-note-priorite {
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  line-height: 15.7px;
  color: var(--md-color-neutrals-300);
  text-align: center;
}
.page-machine-disposition ~ .popup-parametres-avances .div-fields-passwords {
  display: flex;
  gap: var(--md-spacing-lg);
  width: 100%;
}
.page-machine-disposition ~ .popup-parametres-avances .div-field-mdp {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xs);
}
.page-machine-disposition ~ .popup-parametres-avances .div-field-mdp label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-disposition ~ .popup-parametres-avances .div-field-mdp.disabled {
  opacity: 0.5;
}
.page-machine-disposition ~ .popup-parametres-avances .div-field-mdp.disabled .button-modifier-mdp {
  pointer-events: none;
}
.page-machine-disposition ~ .popup-parametres-avances .input-mdp-wrapper {
  display: flex;
  align-items: center;
  height: 44px;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  padding: 4px;
  gap: 4px;
}
.page-machine-disposition ~ .popup-parametres-avances .input-mdp {
  flex: 1;
  min-width: 0;
  height: 36px;
  border: none;
  background: transparent;
  font-family: var(--md-font-family);
  font-size: 14px;
  color: #0a0a0a;
  padding: 0 8px 0 12px;
  outline: none;
  box-shadow: none;
}
.page-machine-disposition ~ .popup-parametres-avances .input-mdp:focus {
  border: none;
  outline: none;
  box-shadow: none;
}
.page-machine-disposition ~ .popup-parametres-avances .input-mdp.input-error {
  color: var(--md-color-red-200);
}
.page-machine-disposition ~ .popup-parametres-avances .button-modifier-mdp {
  flex-shrink: 0;
  height: 36px;
  padding: 8px 16px;
  font-size: 14px;
  white-space: nowrap;
}
.page-machine-disposition ~ .popup-parametres-avances .div-field-teamviewer {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: var(--md-spacing-lg);
  gap: var(--md-spacing-lg);
}
.page-machine-disposition ~ .popup-parametres-avances .div-field-teamviewer label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
  white-space: nowrap;
}
.page-machine-disposition ~ .popup-parametres-avances .input-teamviewer {
  flex: 1;
  height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
}
.page-machine-disposition ~ .popup-parametres-avances .input-teamviewer::placeholder {
  color: var(--md-color-neutrals-300);
}
.page-machine-disposition ~ .popup-parametres-avances .footer-popup-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 17px;
  border-top: 1px solid var(--md-color-neutrals-150);
  margin-top: var(--md-spacing-2xl);
}
.page-machine-disposition ~ .popup-parametres-avances .footer-popup-action .button-annuler {
  min-width: 88px;
}
.page-machine-disposition ~ .popup-parametres-avances .footer-popup-action .button-enregistrer-popup {
  min-width: 108px;
}
.page-machine-disposition ~ .popup-parametres-avances .btn-primary {
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.page-machine-disposition ~ .popup-parametres-avances .btn-primary:hover {
  background: var(--md-color-blue-400);
}
.page-machine-disposition ~ .popup-parametres-avances .btn-primary.disabled, .page-machine-disposition ~ .popup-parametres-avances .btn-primary:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.page-machine-disposition ~ .popup-parametres-avances .btn-primary-small {
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.page-machine-disposition ~ .popup-parametres-avances .btn-outline {
  background: transparent;
  color: var(--md-color-blue-450);
  border: 1px solid var(--md-color-blue-400);
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.4s;
}
.page-machine-disposition ~ .popup-parametres-avances .btn-outline:hover {
  border: 1px solid var(--md-color-green-200);
  color: var(--md-color-green-200);
}
@media (max-width: 768px) {
  .page-machine-disposition ~ .popup-parametres-avances {
    width: 95%;
    padding: var(--md-spacing-lg);
  }
  .page-machine-disposition ~ .popup-parametres-avances .div-taux-columns {
    flex-direction: column;
  }
  .page-machine-disposition ~ .popup-parametres-avances .div-taux-disponibles,
  .page-machine-disposition ~ .popup-parametres-avances .div-taux-machine-priorises {
    width: 100%;
  }
  .page-machine-disposition ~ .popup-parametres-avances .div-transfer-buttons-add,
  .page-machine-disposition ~ .popup-parametres-avances .div-transfer-buttons-reorder {
    flex-direction: row;
    width: 100%;
    height: auto;
  }
}
@media (max-width: 719px) {
  .page-machine-disposition ~ .popup-parametres-avances {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    transform: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .page-machine-disposition ~ .popup-parametres-avances .popup-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--md-color-neutrals-100);
    flex-shrink: 0;
  }
  .page-machine-disposition ~ .popup-parametres-avances .section-popup-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }
  .page-machine-disposition ~ .popup-parametres-avances .div-popup-content h2 {
    font-size: 18px;
  }
  .page-machine-disposition ~ .popup-parametres-avances .nav-popup-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .page-machine-disposition ~ .popup-parametres-avances .li-tab-popup {
    flex-shrink: 0;
    font-size: 12px;
    padding: var(--md-spacing-sm);
    white-space: nowrap;
  }
  .page-machine-disposition ~ .popup-parametres-avances .popup-tab-content {
    margin-top: var(--md-spacing-lg);
  }
  .page-machine-disposition ~ .popup-parametres-avances .div-field-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-sm);
  }
  .page-machine-disposition ~ .popup-parametres-avances .select-wrapper {
    width: 100%;
  }
  .page-machine-disposition ~ .popup-parametres-avances .select-wrapper select {
    width: 100%;
  }
  .page-machine-disposition ~ .popup-parametres-avances .popup-tab-content input[type=number],
  .page-machine-disposition ~ .popup-parametres-avances .popup-tab-content input[type=text] {
    width: 100%;
  }
  .page-machine-disposition ~ .popup-parametres-avances .div-fields-passwords {
    flex-direction: column;
  }
  .page-machine-disposition ~ .popup-parametres-avances .div-field-teamviewer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-sm);
  }
}

/* ========================================
   Page Ouverture - Styles SCSS
   Scope: .page-machine-ouverture
   ======================================== */
.page-machine-ouverture {
  /* --- Variables locales (identiques disposition) --- */
  --md-color-blue-500: #110f2c;
  --md-color-blue-450: #161338;
  --md-color-blue-400: #1b1846;
  --md-color-blue-300: #262262;
  --md-color-blue-150: #a2a0bb;
  --md-color-neutrals-500: #1e1e1e;
  --md-color-neutrals-450: #3d3d3d;
  --md-color-neutrals-400: #5e5e5e;
  --md-color-neutrals-350: #828282;
  --md-color-neutrals-150: #ddd;
  --md-color-neutrals-100: #f1f1f1;
  --md-color-neutrals-50: #ffffff;
  --md-color-green-200: #62ba87;
  --md-color-green-350: #4a8c65;
  --md-color-green-400: #3b7051;
  --md-color-green-450: #213e2d;
  --md-color-red-200: #c14039;
  --md-bg-badge-charge: rgba(98, 186, 135, 0.1);
  --md-bg-badge-decharge: rgba(193, 64, 57, 0.1);
  --md-font-family: "Open Sans", sans-serif;
  --md-spacing-xs: 4px;
  --md-spacing-sm: 8px;
  --md-spacing-md: 12px;
  --md-spacing-lg: 16px;
  --md-spacing-xl: 20px;
  --md-spacing-2xl: 24px;
  --md-spacing-3xl: 28px;
  --md-spacing-4xl: 32px;
  --md-radius-sm: 4px;
  --md-radius-md: 8px;
  /* --- Utility --- */
  /* ============================================
     LAYOUT PRINCIPAL (pattern disposition)
     ============================================ */
  display: flex;
  min-height: 100vh;
  width: 100%;
  /* Sidebar Placeholder (masque, gere par bandeau) */
  /* Section main content */
  /* ============================================
     HEADER PAGE TOP (pattern disposition)
     ============================================ */
  /* ============================================
     NAV TABS BAR (pattern disposition)
     ============================================ */
  /* ============================================
     SELECT FILTRE ARMOIRE (pattern disposition)
     ============================================ */
  /* Dropdown menu */
  /* ============================================
     ONGLETS SOUS-VUE (Devant/Derriere, Portion 1/2/3)
     ============================================ */
  /* ============================================
     VUE TABLEAU OUVERTURE (pattern disposition)
     ============================================ */
  /* En-tete sticky */
  /* Nom produit : capitalize */
  /* Lignes de donnees */
  /* Derniere ligne */
  /* Ligne avec demande d'ouverture en cours */
  /* ============================================
     BADGE ETAT (Charge / Vide)
     ============================================ */
  /* ============================================
     BOUTON OUVRIR (rouge)
     ============================================ */
  /* ============================================
     POPUP CONFIRMATION OUVERTURE
     ============================================ */
  /* ============================================
     CARDS MOBILE (masquees en desktop)
     ============================================ */
  /* ============================================
     TOAST
     ============================================ */
  /* Message aucune donnee */
  /* ============================================
     RESPONSIVE — MOBILE (max-width: 719px)
     ============================================ */
}
.page-machine-ouverture .hidden {
  display: none !important;
}
.page-machine-ouverture .aside-sidebar-placeholder {
  display: none;
}
.page-machine-ouverture .section-main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
  padding: var(--md-spacing-3xl);
  padding-bottom: var(--md-spacing-xl);
  height: 100vh;
  max-width: calc(100vw - 260px);
  overflow: hidden;
  background: linear-gradient(131.32deg, #f8f9fa 0%, #f5f4ff 100.57%);
  position: relative;
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  .page-machine-ouverture .section-main-content {
    max-width: calc(100vw - 82px);
  }
}
@media screen and (max-width: 719px) {
  .page-machine-ouverture .section-main-content {
    max-width: 100vw;
  }
}
.page-machine-ouverture .header-page-top {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
  padding-bottom: var(--md-spacing-xl);
  border-bottom: 1px solid var(--md-color-neutrals-100);
}
.page-machine-ouverture .button-retour {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-xs);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
}
.page-machine-ouverture .button-retour .icon-arrow-back {
  width: 16px;
  height: 16px;
}
.page-machine-ouverture .div-machine-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-spacing-4xl);
}
.page-machine-ouverture .div-machine-info {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
  flex: 1;
}
.page-machine-ouverture .div-machine-identite {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
}
.page-machine-ouverture .machine-name {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--md-color-blue-450);
}
.page-machine-ouverture .span-badge-version {
  padding: 4.8px 8.8px;
  border: 0.8px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  color: #0a0a0a;
}
.page-machine-ouverture .activation-badge {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-sm);
  padding: var(--md-spacing-sm) var(--md-spacing-md);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
.page-machine-ouverture .activation-badge--active {
  background: rgba(98, 186, 135, 0.1);
  color: var(--md-color-green-400);
}
.page-machine-ouverture .activation-badge--active .status-icon {
  background: var(--md-color-green-200);
}
.page-machine-ouverture .activation-badge--inactive {
  background: rgba(193, 64, 57, 0.1);
  color: var(--md-color-red-200);
}
.page-machine-ouverture .activation-badge--inactive .status-icon {
  background: var(--md-color-red-200);
}
.page-machine-ouverture .activation-badge--virtuelle {
  background: rgba(38, 34, 98, 0.1);
  color: var(--md-color-blue-300);
}
.page-machine-ouverture .activation-badge--virtuelle .status-icon {
  background: var(--md-color-blue-300);
}
.page-machine-ouverture .activation-badge .status-icon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.page-machine-ouverture .last-sync {
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  color: var(--md-color-neutrals-350);
}
.page-machine-ouverture .div-localisation {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-lg);
}
.page-machine-ouverture .machine-number {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--md-color-neutrals-400);
}
.page-machine-ouverture .location-info {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-xs);
}
.page-machine-ouverture .location-info .icon-pin {
  width: 16px;
  height: 16px;
}
.page-machine-ouverture .location-info span {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--md-color-neutrals-350);
}
.page-machine-ouverture .button-parametres-avances {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: var(--md-color-blue-300);
  color: white;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.page-machine-ouverture .button-parametres-avances:hover {
  background: var(--md-color-blue-400);
}
.page-machine-ouverture .nav-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.page-machine-ouverture .ul-tabs-list {
  display: flex;
  align-items: center;
  list-style: none;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  padding: 0 var(--md-spacing-xs);
  margin: 0;
}
.page-machine-ouverture .li-tab {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-150);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.page-machine-ouverture .li-tab a {
  display: block;
  padding: var(--md-spacing-md);
  color: inherit;
  text-decoration: none;
}
.page-machine-ouverture .li-tab:hover {
  color: var(--md-color-blue-300);
}
.page-machine-ouverture .li-tab.active {
  color: var(--md-color-blue-300);
  border-bottom-color: var(--md-color-blue-300);
}
.page-machine-ouverture .select-filtre-armoire {
  flex-shrink: 0;
  position: relative;
}
.page-machine-ouverture .select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 254px;
  padding: 8px 16px;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.page-machine-ouverture .select-trigger:hover {
  border-color: var(--md-color-blue-150);
}
.page-machine-ouverture .select-trigger.open {
  border-color: var(--md-color-blue-300);
}
.page-machine-ouverture .select-trigger.open .icon-chevron-down {
  transform: rotate(180deg);
}
.page-machine-ouverture .select-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--md-color-blue-300);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.page-machine-ouverture .icon-chevron-down {
  width: 10px;
  height: 6px;
  color: var(--md-color-blue-300);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.page-machine-ouverture .dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  width: 254px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  list-style: none;
}
.page-machine-ouverture .dropdown-menu li {
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--md-color-blue-300);
  transition: background 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-machine-ouverture .dropdown-menu li:hover {
  background: var(--md-color-neutrals-100);
}
.page-machine-ouverture .dropdown-menu li.selected {
  background: rgba(38, 34, 98, 0.06);
}
.page-machine-ouverture .dropdown-menu li.disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.page-machine-ouverture .subview-tabs {
  display: flex;
  gap: 0;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  padding: 2px;
  width: fit-content;
  margin-bottom: var(--md-spacing-md);
}
.page-machine-ouverture .subview-tab {
  padding: 6px 16px;
  border: none;
  border-radius: 3px;
  background: transparent;
  font-family: var(--md-font-family);
  font-size: 13px;
  font-weight: 600;
  color: var(--md-color-blue-150);
  cursor: pointer;
  transition: all 0.15s;
}
.page-machine-ouverture .subview-tab:hover {
  color: var(--md-color-blue-300);
}
.page-machine-ouverture .subview-tab.active {
  background: var(--md-color-blue-300);
  color: white;
}
.page-machine-ouverture .table-ouverture-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  z-index: 0;
}
.page-machine-ouverture .table-ouverture-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border-radius: 4px;
}
.page-machine-ouverture .table-ouverture {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.page-machine-ouverture .table-ouverture thead th {
  background: var(--md-color-neutrals-50);
  color: var(--md-color-blue-300);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  padding: 14px 12px;
  height: 47px;
  border-top: 1px solid var(--md-color-neutrals-100);
  border-left: 1px solid var(--md-color-neutrals-100);
  vertical-align: middle;
  position: sticky;
  top: 0;
  z-index: 5;
}
.page-machine-ouverture .table-ouverture thead th:last-child {
  border-right: 1px solid var(--md-color-neutrals-100);
}
.page-machine-ouverture .table-ouverture thead th:first-child {
  border-top-left-radius: 4px;
}
.page-machine-ouverture .table-ouverture thead th:last-child {
  border-top-right-radius: 4px;
}
.page-machine-ouverture .table-ouverture tbody td.td-produit {
  text-transform: capitalize;
}
.page-machine-ouverture .table-ouverture tbody td {
  background: var(--md-color-neutrals-50);
  color: var(--md-color-neutrals-450);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  padding: 14px 12px;
  height: 53px;
  border-top: 1px solid var(--md-color-neutrals-100);
  border-left: 1px solid var(--md-color-neutrals-100);
  vertical-align: middle;
}
.page-machine-ouverture .table-ouverture tbody td:last-child {
  border-right: 1px solid var(--md-color-neutrals-100);
}
.page-machine-ouverture .table-ouverture tbody tr:last-child td {
  border-bottom: 1px solid var(--md-color-neutrals-100);
}
.page-machine-ouverture .table-ouverture tbody tr:last-child td:first-child {
  border-bottom-left-radius: 4px;
}
.page-machine-ouverture .table-ouverture tbody tr:last-child td:last-child {
  border-bottom-right-radius: 4px;
}
.page-machine-ouverture .table-ouverture tbody tr.row-reopen td {
  background: rgba(193, 64, 57, 0.05);
}
.page-machine-ouverture .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}
.page-machine-ouverture .badge--charge {
  background: var(--md-bg-badge-charge);
  color: var(--md-color-green-400);
}
.page-machine-ouverture .badge--decharge {
  background: var(--md-bg-badge-decharge);
  color: var(--md-color-red-200);
}
.page-machine-ouverture .badge-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.page-machine-ouverture .badge--charge .badge-dot {
  background: var(--md-color-green-400);
}
.page-machine-ouverture .badge--decharge .badge-dot {
  background: var(--md-color-red-200);
}
.page-machine-ouverture .button-ouvrir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--md-color-green-200);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 14px;
  font-family: var(--md-font-family);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  /* Etat demande envoyee */
}
.page-machine-ouverture .button-ouvrir .icon-lock-open {
  width: 14px;
  height: 14px;
}
.page-machine-ouverture .button-ouvrir:hover {
  background: #a83530;
}
.page-machine-ouverture .button-ouvrir--pending {
  background: var(--md-color-neutrals-350);
  cursor: default;
  pointer-events: none;
}
.page-machine-ouverture .popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}
.page-machine-ouverture .popup-confirmer-ouverture {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  max-width: 90vw;
  background: var(--md-color-neutrals-50);
  border-radius: var(--md-radius-md);
  z-index: 101;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.page-machine-ouverture .popup-confirmer-ouverture .popup-header {
  display: flex;
  justify-content: flex-end;
  padding: var(--md-spacing-lg) var(--md-spacing-lg) 0;
}
.page-machine-ouverture .popup-confirmer-ouverture .button-fermer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-450);
}
.page-machine-ouverture .popup-confirmer-ouverture .button-fermer svg {
  width: 10px;
  height: 10px;
}
.page-machine-ouverture .popup-confirmer-ouverture .popup-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--md-spacing-md);
  padding: 0 var(--md-spacing-2xl) var(--md-spacing-xl);
  text-align: center;
}
.page-machine-ouverture .popup-confirmer-ouverture .popup-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: var(--md-bg-badge-decharge);
  border-radius: 50%;
}
.page-machine-ouverture .popup-confirmer-ouverture h3 {
  font-family: var(--md-font-family);
  font-size: 18px;
  font-weight: 700;
  color: var(--md-color-neutrals-500);
  margin: 0;
}
.page-machine-ouverture .popup-confirmer-ouverture .popup-message {
  font-family: var(--md-font-family);
  font-size: 14px;
  color: var(--md-color-neutrals-400);
  margin: 0;
}
.page-machine-ouverture .popup-confirmer-ouverture .popup-message strong {
  color: var(--md-color-neutrals-500);
}
.page-machine-ouverture .popup-confirmer-ouverture .popup-produit {
  font-family: var(--md-font-family);
  font-size: 13px;
  font-weight: 600;
  color: var(--md-color-blue-300);
  text-transform: capitalize;
  margin: 0;
}
.page-machine-ouverture .popup-confirmer-ouverture .popup-footer {
  display: flex;
  justify-content: center;
  gap: var(--md-spacing-md);
  padding: var(--md-spacing-lg) var(--md-spacing-2xl) var(--md-spacing-2xl);
}
.page-machine-ouverture .popup-confirmer-ouverture .btn-annuler {
  padding: 8px 20px;
  background: transparent;
  color: var(--md-color-neutrals-450);
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.page-machine-ouverture .popup-confirmer-ouverture .btn-annuler:hover {
  background: var(--md-color-neutrals-100);
}
.page-machine-ouverture .popup-confirmer-ouverture .btn-confirmer {
  padding: 8px 20px;
  background: var(--md-color-red-200);
  color: white;
  border: none;
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.page-machine-ouverture .popup-confirmer-ouverture .btn-confirmer:hover {
  background: #a83530;
}
.page-machine-ouverture .popup-confirmer-ouverture .btn-confirmer:disabled {
  opacity: 0.6;
  cursor: wait;
}
.page-machine-ouverture .cards-mobile {
  display: none;
}
.page-machine-ouverture .card-ouverture {
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-machine-ouverture .card-ouverture--charge {
  border-left: 3px solid var(--md-color-green-200);
}
.page-machine-ouverture .card-ouverture--vide {
  border-left: 3px solid var(--md-color-neutrals-150);
  background: #fafafa;
}
.page-machine-ouverture .card-ouverture--reopen {
  border-left: 3px solid var(--md-color-red-200);
  background: rgba(193, 64, 57, 0.05);
}
.page-machine-ouverture .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-machine-ouverture .card-numero {
  font-family: var(--md-font-family);
  font-size: 16px;
  font-weight: 700;
  color: var(--md-color-blue-300);
}
.page-machine-ouverture .card-body {
  display: flex;
  align-items: center;
}
.page-machine-ouverture .card-produit {
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-450);
  text-transform: capitalize;
}
.page-machine-ouverture .card-produit--vide {
  font-weight: 400;
  color: var(--md-color-neutrals-350);
  font-style: italic;
}
.page-machine-ouverture .card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid var(--md-color-neutrals-100);
  padding-top: 8px;
}
.page-machine-ouverture .toast-container {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-machine-ouverture .toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
  animation: toast-slide-in-ouverture 0.3s ease-out;
}
.page-machine-ouverture .toast.toast-fade-out {
  animation: toast-slide-out-ouverture 0.3s ease-in forwards;
}
.page-machine-ouverture .toast--info {
  border-left: 4px solid var(--md-color-blue-300);
}
.page-machine-ouverture .toast--info .toast-icon {
  color: var(--md-color-blue-300);
}
.page-machine-ouverture .toast--success {
  border-left: 4px solid var(--md-color-green-200);
}
.page-machine-ouverture .toast--success .toast-icon {
  color: var(--md-color-green-200);
}
.page-machine-ouverture .toast--error {
  border-left: 4px solid var(--md-color-red-200);
}
.page-machine-ouverture .toast--error .toast-icon {
  color: var(--md-color-red-200);
}
@keyframes toast-slide-in-ouverture {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes toast-slide-out-ouverture {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
.page-machine-ouverture .toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.page-machine-ouverture .ouverture-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-machine-ouverture .ouverture-empty p {
  font-family: var(--md-font-family);
  font-size: 14px;
  color: var(--md-color-neutrals-350);
}
@media screen and (max-width: 719px) {
  .page-machine-ouverture {
    /* --- Header fixe banner --- */
    padding-top: 72px;
    overflow: hidden;
    height: 100svh;
    /* --- Main content --- */
    /* --- Header masque (sauf parametres avances) --- */
    /* --- Nav tabs : scroll horizontal --- */
    /* --- Filtre armoire pleine largeur --- */
    /* --- Subview tabs pleine largeur --- */
    /* --- Wrapper scrollable --- */
    /* --- Masquer la table, afficher les cards --- */
    /* --- Toasts pleine largeur --- */
  }
  .page-machine-ouverture::before {
    content: "Ouverture";
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
    height: 72px;
    min-height: 72px;
    padding-left: 80px;
    padding-top: 8px;
    background: var(--md-color-neutrals-50);
    border-radius: 0 0 8px 8px;
    z-index: 3;
    font-family: var(--md-font-family);
    font-size: 20px;
    font-weight: 700;
    color: #262262;
    line-height: normal;
    box-sizing: border-box;
  }
  .page-machine-ouverture .section-main-content {
    padding: var(--md-spacing-xl);
    height: calc(100svh - 72px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: var(--md-spacing-lg);
  }
  .page-machine-ouverture .header-page-top {
    display: none;
  }
  .page-machine-ouverture .header-page-top:has(.button-parametres-avances) {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    border-bottom: none;
    padding-bottom: 0;
    align-items: center;
    justify-content: space-between;
  }
  .page-machine-ouverture .button-retour {
    display: flex;
  }
  .page-machine-ouverture .div-machine-info {
    display: none;
  }
  .page-machine-ouverture .div-machine-title-bar {
    width: auto;
  }
  .page-machine-ouverture .button-parametres-avances {
    width: auto;
  }
  .page-machine-ouverture .nav-tabs-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--md-spacing-sm);
    flex-shrink: 0;
  }
  .page-machine-ouverture .ul-tabs-list {
    flex: 0 0 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-machine-ouverture .ul-tabs-list::-webkit-scrollbar {
    display: none;
  }
  .page-machine-ouverture .li-tab {
    flex-shrink: 0;
    font-size: 12px;
  }
  .page-machine-ouverture .li-tab a {
    padding: var(--md-spacing-sm) var(--md-spacing-md);
    white-space: nowrap;
  }
  .page-machine-ouverture .select-filtre-armoire {
    flex-shrink: 0;
  }
  .page-machine-ouverture .select-trigger {
    width: 100%;
  }
  .page-machine-ouverture .dropdown-menu {
    width: 100%;
  }
  .page-machine-ouverture .select-label {
    font-size: 12px;
  }
  .page-machine-ouverture .subview-tabs {
    width: 100%;
  }
  .page-machine-ouverture .subview-tab {
    flex: 1;
    text-align: center;
    padding: 6px 8px;
  }
  .page-machine-ouverture .table-ouverture-wrapper {
    flex: 1;
    min-height: 0;
  }
  .page-machine-ouverture .table-ouverture-scroll {
    overflow-y: auto;
  }
  .page-machine-ouverture .table-desktop {
    display: none !important;
  }
  .page-machine-ouverture .cards-mobile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: var(--md-spacing-lg);
  }
  .page-machine-ouverture .card-footer .button-ouvrir {
    width: 100%;
    justify-content: center;
  }
  .page-machine-ouverture .toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
  }
}

/* ============================================
   POPUP OVERLAY (sibling de .page-machine-ouverture)
   ============================================ */
.page-machine-ouverture ~ .popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

/* ========================================
   POPUP PARAMETRES AVANCES
   ======================================== */
.page-machine-ouverture ~ .popup-parametres-avances {
  --md-color-blue-500: #110f2c;
  --md-color-blue-450: #161338;
  --md-color-blue-400: #1b1846;
  --md-color-blue-300: #262262;
  --md-color-blue-150: #a2a0bb;
  --md-color-neutrals-500: #1e1e1e;
  --md-color-neutrals-450: #3d3d3d;
  --md-color-neutrals-400: #5e5e5e;
  --md-color-neutrals-350: #828282;
  --md-color-neutrals-300: #a7a7a7;
  --md-color-neutrals-250: #b2b2b2;
  --md-color-neutrals-150: #ddd;
  --md-color-neutrals-100: #f1f1f1;
  --md-color-neutrals-50: #fff;
  --md-color-green-450: #213e2d;
  --md-color-green-400: #3b7051;
  --md-color-green-200: #62ba87;
  --md-color-red-200: #c14039;
  --md-font-family: "Open Sans", sans-serif;
  --md-spacing-xs: 4px;
  --md-spacing-sm: 8px;
  --md-spacing-md: 12px;
  --md-spacing-lg: 16px;
  --md-spacing-xl: 20px;
  --md-spacing-2xl: 24px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 690px;
  max-height: 90vh;
  background: white;
  border-radius: 4px;
  padding: var(--md-spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
  z-index: 101;
  overflow-y: auto;
}
.page-machine-ouverture ~ .popup-parametres-avances .hidden {
  display: none !important;
}
.page-machine-ouverture ~ .popup-parametres-avances .popup-header {
  display: flex;
  justify-content: flex-end;
}
.page-machine-ouverture ~ .popup-parametres-avances .button-fermer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
}
.page-machine-ouverture ~ .popup-parametres-avances .button-fermer svg {
  width: 10px;
  height: 10px;
}
.page-machine-ouverture ~ .popup-parametres-avances .section-popup-body {
  display: flex;
  flex-direction: column;
}
.page-machine-ouverture ~ .popup-parametres-avances .div-popup-content {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
}
.page-machine-ouverture ~ .popup-parametres-avances .div-popup-content h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--md-color-blue-500);
}
.page-machine-ouverture ~ .popup-parametres-avances .nav-popup-tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  padding: 0 var(--md-spacing-xs);
}
.page-machine-ouverture ~ .popup-parametres-avances .li-tab-popup {
  padding: var(--md-spacing-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-150);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--md-font-family);
  transition: all 0.2s;
}
.page-machine-ouverture ~ .popup-parametres-avances .li-tab-popup:hover {
  color: var(--md-color-blue-300);
}
.page-machine-ouverture ~ .popup-parametres-avances .li-tab-popup.active {
  color: var(--md-color-blue-300);
  border-bottom-color: var(--md-color-blue-300);
}
.page-machine-ouverture ~ .popup-parametres-avances .popup-tab-content {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
  margin-top: var(--md-spacing-2xl);
}
.page-machine-ouverture ~ .popup-parametres-avances .div-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
}
.page-machine-ouverture ~ .popup-parametres-avances .div-field-row label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-ouverture ~ .popup-parametres-avances .div-field-row.with-description {
  align-items: flex-start;
}
.page-machine-ouverture ~ .popup-parametres-avances .label-group {
  display: flex;
  flex-direction: column;
}
.page-machine-ouverture ~ .popup-parametres-avances .label-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-ouverture ~ .popup-parametres-avances .field-description {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #99a1af;
}
.page-machine-ouverture ~ .popup-parametres-avances .select-wrapper {
  position: relative;
  width: 111px;
}
.page-machine-ouverture ~ .popup-parametres-avances .select-wrapper select {
  width: 100%;
  height: 36px;
  padding: 0 32px 0 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
  appearance: none;
  cursor: pointer;
}
.page-machine-ouverture ~ .popup-parametres-avances .select-wrapper select:disabled {
  color: var(--md-color-neutrals-300);
  background: var(--md-color-neutrals-100);
}
.page-machine-ouverture ~ .popup-parametres-avances .select-wrapper .icon-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  pointer-events: none;
}
.page-machine-ouverture ~ .popup-parametres-avances .popup-tab-content input[type=number],
.page-machine-ouverture ~ .popup-parametres-avances .popup-tab-content input[type=text] {
  width: 111px;
  height: 36px;
  padding: 12px 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
}
.page-machine-ouverture ~ .popup-parametres-avances .popup-tab-content input[type=number]::placeholder,
.page-machine-ouverture ~ .popup-parametres-avances .popup-tab-content input[type=text]::placeholder {
  color: var(--md-color-neutrals-300);
}
.page-machine-ouverture ~ .popup-parametres-avances .popup-tab-content input[type=number]:disabled,
.page-machine-ouverture ~ .popup-parametres-avances .popup-tab-content input[type=text]:disabled {
  color: var(--md-color-neutrals-300);
  background: var(--md-color-neutrals-100);
}
.page-machine-ouverture ~ .popup-parametres-avances .popup-tab-content input[type=number].input-error,
.page-machine-ouverture ~ .popup-parametres-avances .popup-tab-content input[type=text].input-error {
  border-color: var(--md-color-red-200);
}
.page-machine-ouverture ~ .popup-parametres-avances .div-field-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
.page-machine-ouverture ~ .popup-parametres-avances .div-field-toggle label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #0a0a0a;
}
.page-machine-ouverture ~ .popup-parametres-avances .div-field-toggle .label-group label {
  font-size: 16px;
  font-weight: 400;
}
.page-machine-ouverture ~ .popup-parametres-avances .div-field-toggle .field-description {
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
}
.page-machine-ouverture ~ .popup-parametres-avances .div-field-toggle.disabled {
  opacity: 0.5;
}
.page-machine-ouverture ~ .popup-parametres-avances .div-field-toggle.disabled .input-toggle {
  pointer-events: none;
}
.page-machine-ouverture ~ .popup-parametres-avances .input-toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--md-color-neutrals-250);
  border: none;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.page-machine-ouverture ~ .popup-parametres-avances .input-toggle .toggle-knob {
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.page-machine-ouverture ~ .popup-parametres-avances .input-toggle.active {
  background: var(--md-color-blue-300);
}
.page-machine-ouverture ~ .popup-parametres-avances .input-toggle.active .toggle-knob {
  left: 18px;
}
.page-machine-ouverture ~ .popup-parametres-avances .div-field-slider {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-md);
}
.page-machine-ouverture ~ .popup-parametres-avances .div-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-machine-ouverture ~ .popup-parametres-avances .div-slider-header label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #0a0a0a;
}
.page-machine-ouverture ~ .popup-parametres-avances .slider-value {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #101828;
  white-space: nowrap;
  flex-shrink: 0;
}
.page-machine-ouverture ~ .popup-parametres-avances .div-slider-track {
  position: relative;
  height: 16px;
  background: #ececf0;
  border-radius: 9999px;
}
.page-machine-ouverture ~ .popup-parametres-avances .slider-progress {
  position: absolute;
  height: 100%;
  background: var(--md-color-blue-300);
  border-radius: 16px;
  left: 0;
}
.page-machine-ouverture ~ .popup-parametres-avances .slider-thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border: 0.8px solid var(--md-color-blue-300);
  border-radius: 50%;
  top: 0;
  transform: translateX(-50%);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
  cursor: grab;
}
.page-machine-ouverture ~ .popup-parametres-avances .div-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #6a7282;
}
.page-machine-ouverture ~ .popup-parametres-avances .div-tva-taux-transfert {
  background: #fcfcfc;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 12px;
  padding: var(--md-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
}
.page-machine-ouverture ~ .popup-parametres-avances .div-taux-columns {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
}
.page-machine-ouverture ~ .popup-parametres-avances .div-taux-disponibles,
.page-machine-ouverture ~ .popup-parametres-avances .div-taux-machine-priorises {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-md);
  width: 221px;
}
.page-machine-ouverture ~ .popup-parametres-avances .column-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--md-color-neutrals-300);
  text-transform: capitalize;
}
.page-machine-ouverture ~ .popup-parametres-avances .column-title span {
  text-transform: lowercase;
}
.page-machine-ouverture ~ .popup-parametres-avances .column-title.active {
  color: var(--md-color-blue-300);
}
.page-machine-ouverture ~ .popup-parametres-avances .table-taux-list {
  background: white;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 8px;
  height: 189px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-machine-ouverture ~ .popup-parametres-avances .th-header {
  background: #fcfcfc;
  border-bottom: 0.8px solid var(--md-color-neutrals-100);
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-size: 11px;
  font-weight: 700;
  color: var(--md-color-neutrals-400);
  text-transform: uppercase;
  letter-spacing: -0.55px;
  height: 32px;
  display: flex;
  align-items: center;
}
.page-machine-ouverture ~ .popup-parametres-avances .th-header.active {
  background: var(--md-color-blue-300);
  color: white;
}
.page-machine-ouverture ~ .popup-parametres-avances .div-taux-rows {
  flex: 1;
  overflow-y: auto;
}
.page-machine-ouverture ~ .popup-parametres-avances .tr-taux-row {
  padding: var(--md-spacing-md) var(--md-spacing-lg);
  font-size: 14px;
  font-weight: 700;
  color: var(--md-color-neutrals-400);
  border-bottom: 0.8px solid #f9fafb;
  cursor: pointer;
}
.page-machine-ouverture ~ .popup-parametres-avances .tr-taux-row:hover {
  background: #f9fafb;
}
.page-machine-ouverture ~ .popup-parametres-avances .tr-taux-row.selected {
  background: #e8e8ff;
}
.page-machine-ouverture ~ .popup-parametres-avances .tr-taux-row.with-badge {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
  color: var(--md-color-blue-450);
}
.page-machine-ouverture ~ .popup-parametres-avances .badge-priorite {
  width: 20px;
  height: 20px;
  background: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--md-color-neutrals-300);
}
.page-machine-ouverture ~ .popup-parametres-avances .div-transfer-buttons-add,
.page-machine-ouverture ~ .popup-parametres-avances .div-transfer-buttons-reorder {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 100%;
}
.page-machine-ouverture ~ .popup-parametres-avances .button-icon {
  width: 40px;
  height: 40px;
  background: white;
  border: 0.8px solid var(--md-color-neutrals-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.page-machine-ouverture ~ .popup-parametres-avances .button-icon:hover {
  background: #f9fafb;
}
.page-machine-ouverture ~ .popup-parametres-avances .button-icon.disabled {
  opacity: 0.5;
}
.page-machine-ouverture ~ .popup-parametres-avances .button-icon svg {
  width: 16px;
  height: 16px;
  color: var(--md-color-neutrals-400);
}
.page-machine-ouverture ~ .popup-parametres-avances .p-note-priorite {
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  line-height: 15.7px;
  color: var(--md-color-neutrals-300);
  text-align: center;
}
.page-machine-ouverture ~ .popup-parametres-avances .div-fields-passwords {
  display: flex;
  gap: var(--md-spacing-lg);
  width: 100%;
}
.page-machine-ouverture ~ .popup-parametres-avances .div-field-mdp {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xs);
}
.page-machine-ouverture ~ .popup-parametres-avances .div-field-mdp label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-ouverture ~ .popup-parametres-avances .div-field-mdp.disabled {
  opacity: 0.5;
}
.page-machine-ouverture ~ .popup-parametres-avances .div-field-mdp.disabled .button-modifier-mdp {
  pointer-events: none;
}
.page-machine-ouverture ~ .popup-parametres-avances .input-mdp-wrapper {
  display: flex;
  align-items: center;
  height: 44px;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  padding: 4px;
  gap: 4px;
}
.page-machine-ouverture ~ .popup-parametres-avances .input-mdp {
  flex: 1;
  min-width: 0;
  height: 36px;
  border: none;
  background: transparent;
  font-family: var(--md-font-family);
  font-size: 14px;
  color: #0a0a0a;
  padding: 0 8px 0 12px;
  outline: none;
  box-shadow: none;
}
.page-machine-ouverture ~ .popup-parametres-avances .input-mdp:focus {
  border: none;
  outline: none;
  box-shadow: none;
}
.page-machine-ouverture ~ .popup-parametres-avances .input-mdp.input-error {
  color: var(--md-color-red-200);
}
.page-machine-ouverture ~ .popup-parametres-avances .button-modifier-mdp {
  flex-shrink: 0;
  height: 36px;
  padding: 8px 16px;
  font-size: 14px;
  white-space: nowrap;
}
.page-machine-ouverture ~ .popup-parametres-avances .div-field-teamviewer {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: var(--md-spacing-lg);
  gap: var(--md-spacing-lg);
}
.page-machine-ouverture ~ .popup-parametres-avances .div-field-teamviewer label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
  white-space: nowrap;
}
.page-machine-ouverture ~ .popup-parametres-avances .input-teamviewer {
  flex: 1;
  height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--md-color-neutrals-450);
  background: var(--md-color-neutrals-50);
}
.page-machine-ouverture ~ .popup-parametres-avances .input-teamviewer::placeholder {
  color: var(--md-color-neutrals-300);
}
.page-machine-ouverture ~ .popup-parametres-avances .footer-popup-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 17px;
  border-top: 1px solid var(--md-color-neutrals-150);
  margin-top: var(--md-spacing-2xl);
}
.page-machine-ouverture ~ .popup-parametres-avances .footer-popup-action .button-annuler {
  min-width: 88px;
}
.page-machine-ouverture ~ .popup-parametres-avances .footer-popup-action .button-enregistrer-popup {
  min-width: 108px;
}
.page-machine-ouverture ~ .popup-parametres-avances .btn-primary {
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.page-machine-ouverture ~ .popup-parametres-avances .btn-primary:hover {
  background: var(--md-color-blue-400);
}
.page-machine-ouverture ~ .popup-parametres-avances .btn-primary.disabled, .page-machine-ouverture ~ .popup-parametres-avances .btn-primary:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.page-machine-ouverture ~ .popup-parametres-avances .btn-primary-small {
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.page-machine-ouverture ~ .popup-parametres-avances .btn-outline {
  background: transparent;
  color: var(--md-color-blue-450);
  border: 1px solid var(--md-color-blue-400);
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.4s;
}
.page-machine-ouverture ~ .popup-parametres-avances .btn-outline:hover {
  border: 1px solid var(--md-color-green-200);
  color: var(--md-color-green-200);
}
@media (max-width: 768px) {
  .page-machine-ouverture ~ .popup-parametres-avances {
    width: 95%;
    padding: var(--md-spacing-lg);
  }
  .page-machine-ouverture ~ .popup-parametres-avances .div-taux-columns {
    flex-direction: column;
  }
  .page-machine-ouverture ~ .popup-parametres-avances .div-taux-disponibles,
  .page-machine-ouverture ~ .popup-parametres-avances .div-taux-machine-priorises {
    width: 100%;
  }
  .page-machine-ouverture ~ .popup-parametres-avances .div-transfer-buttons-add,
  .page-machine-ouverture ~ .popup-parametres-avances .div-transfer-buttons-reorder {
    flex-direction: row;
    width: 100%;
    height: auto;
  }
}
@media (max-width: 719px) {
  .page-machine-ouverture ~ .popup-parametres-avances {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    transform: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .page-machine-ouverture ~ .popup-parametres-avances .popup-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--md-color-neutrals-100);
    flex-shrink: 0;
  }
  .page-machine-ouverture ~ .popup-parametres-avances .section-popup-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }
  .page-machine-ouverture ~ .popup-parametres-avances .div-popup-content h2 {
    font-size: 18px;
  }
  .page-machine-ouverture ~ .popup-parametres-avances .nav-popup-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .page-machine-ouverture ~ .popup-parametres-avances .li-tab-popup {
    flex-shrink: 0;
    font-size: 12px;
    padding: var(--md-spacing-sm);
    white-space: nowrap;
  }
  .page-machine-ouverture ~ .popup-parametres-avances .popup-tab-content {
    margin-top: var(--md-spacing-lg);
  }
  .page-machine-ouverture ~ .popup-parametres-avances .div-field-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-sm);
  }
  .page-machine-ouverture ~ .popup-parametres-avances .select-wrapper {
    width: 100%;
  }
  .page-machine-ouverture ~ .popup-parametres-avances .select-wrapper select {
    width: 100%;
  }
  .page-machine-ouverture ~ .popup-parametres-avances .popup-tab-content input[type=number],
  .page-machine-ouverture ~ .popup-parametres-avances .popup-tab-content input[type=text] {
    width: 100%;
  }
  .page-machine-ouverture ~ .popup-parametres-avances .div-fields-passwords {
    flex-direction: column;
  }
  .page-machine-ouverture ~ .popup-parametres-avances .div-field-teamviewer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-sm);
  }
}

/* ===========================================
   Page Machine Virtuelle
   Styles scopés sous .page-machine-virtuelle
   Réutilise les patterns de machine-detail
   =========================================== */
.page-machine-virtuelle {
  /* Utilitaires */
  /* Variables locales (identiques à machine-detail) */
  --md-color-blue-500: #110f2c;
  --md-color-blue-450: #161338;
  --md-color-blue-400: #1b1846;
  --md-color-blue-300: #262262;
  --md-color-blue-150: #a2a0bb;
  --md-color-neutrals-500: #1e1e1e;
  --md-color-neutrals-450: #3d3d3d;
  --md-color-neutrals-400: #5e5e5e;
  --md-color-neutrals-350: #828282;
  --md-color-neutrals-300: #a7a7a7;
  --md-color-neutrals-250: #b2b2b2;
  --md-color-neutrals-150: #ddd;
  --md-color-neutrals-100: #f1f1f1;
  --md-color-neutrals-50: #fff;
  --md-color-green-450: #213e2d;
  --md-color-green-400: #3b7051;
  --md-color-green-200: #62ba87;
  --md-color-red-400: #8b1a14;
  --md-color-red-200: #c14039;
  --md-font-family: "Open Sans", sans-serif;
  --md-spacing-xs: 4px;
  --md-spacing-sm: 8px;
  --md-spacing-md: 12px;
  --md-spacing-lg: 16px;
  --md-spacing-xl: 20px;
  --md-spacing-2xl: 24px;
  --md-spacing-3xl: 28px;
  --md-spacing-4xl: 32px;
  /* Page Layout */
  display: flex;
  min-height: 100vh;
  width: 100%;
  /* ===========================================
     Header
     =========================================== */
  /* ===========================================
     Section Machines Associées
     =========================================== */
  /* Actions section — alignée à droite comme les autres pages */
  /* Compteur machines — aligné à droite comme catalogue/stocks */
  /* Recherche — style aligné sur les autres pages */
  /* Message aucune machine */
  /* Tableau des machines — style catalogue */
  /* Checkbox custom — colonne alignée sur th-checkbox */
  /* Colonnes body — alignées sur les th */
  /* ===========================================
     Footer Actions
     =========================================== */
  /* ===========================================
     Popup Renommer — style paramètres avancés
     =========================================== */
  /* ===========================================
     Popup Confirmation
     =========================================== */
  /* ===========================================
     Toast (identique à page-machine-liste)
     =========================================== */
  /* ===========================================
     Responsive — Tablette (768px)
     =========================================== */
  /* ===========================================
     Responsive — Mobile (719px)
     =========================================== */
}
.page-machine-virtuelle .hidden {
  display: none !important;
}
.page-machine-virtuelle .aside-sidebar-placeholder {
  display: none;
}
.page-machine-virtuelle .section-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
  padding: var(--md-spacing-3xl);
  padding-bottom: 0;
  overflow-y: auto;
  background: linear-gradient(114.6deg, rgb(248, 249, 250) 0%, rgb(245, 244, 255) 100%);
  position: relative;
  height: 100vh;
}
.page-machine-virtuelle .header-page-top {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
  padding-bottom: var(--md-spacing-xl);
  border-bottom: 1px solid var(--md-color-neutrals-100);
}
.page-machine-virtuelle .button-retour {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-xs);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
}
.page-machine-virtuelle .button-retour .icon-arrow-back {
  width: 16px;
  height: 16px;
}
.page-machine-virtuelle .div-machine-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-spacing-4xl);
}
.page-machine-virtuelle .div-machine-info {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
  flex: 1;
}
.page-machine-virtuelle .div-machine-identite {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
}
.page-machine-virtuelle .machine-name {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--md-color-blue-450);
}
.page-machine-virtuelle .machine-number {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--md-color-neutrals-400);
}
.page-machine-virtuelle .activation-badge {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-sm);
  padding: var(--md-spacing-sm) var(--md-spacing-md);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
.page-machine-virtuelle .activation-badge--virtuelle {
  background: rgba(38, 34, 98, 0.1);
  color: var(--md-color-blue-300);
}
.page-machine-virtuelle .activation-badge--virtuelle .status-icon {
  background: var(--md-color-blue-300);
}
.page-machine-virtuelle .activation-badge--active {
  background: rgba(98, 186, 135, 0.1);
  color: var(--md-color-green-400);
}
.page-machine-virtuelle .activation-badge--active .status-icon {
  background: var(--md-color-green-200);
}
.page-machine-virtuelle .activation-badge--inactive {
  background: rgba(193, 64, 57, 0.1);
  color: var(--md-color-red-200);
}
.page-machine-virtuelle .activation-badge--inactive .status-icon {
  background: var(--md-color-red-200);
}
.page-machine-virtuelle .activation-badge .status-icon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.page-machine-virtuelle .btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  color: var(--md-color-blue-450);
  border: 1px solid var(--md-color-blue-400);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.4s;
}
.page-machine-virtuelle .btn-secondary:hover {
  border-color: var(--md-color-green-200);
  color: var(--md-color-green-200);
}
.page-machine-virtuelle .btn-secondary svg {
  width: 16px;
  height: 16px;
}
.page-machine-virtuelle .btn-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--md-spacing-sm);
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--md-color-red-200);
  cursor: pointer;
  transition: all 0.2s;
}
.page-machine-virtuelle .btn-danger:hover {
  background: rgba(192, 57, 52, 0.1);
}
.page-machine-virtuelle .btn-primary {
  background: var(--md-color-blue-300);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.page-machine-virtuelle .btn-primary:hover {
  background: var(--md-color-blue-400);
}
.page-machine-virtuelle .btn-primary:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.page-machine-virtuelle .section-machines-associees {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
  flex: 1;
  overflow: hidden;
}
.page-machine-virtuelle .div-actions-section {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.page-machine-virtuelle .machines-count-wrapper {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 8px 0;
}
.page-machine-virtuelle .machines-count {
  font-size: 12px;
  font-weight: 400;
  color: var(--md-color-neutrals-350);
  margin: 0 20px;
}
.page-machine-virtuelle .input-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 397px;
  max-width: 100%;
  height: 40px;
  padding: 12px 16px;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  box-sizing: border-box;
}
.page-machine-virtuelle .input-search .icon-search {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.page-machine-virtuelle .input-search .icon-search circle, .page-machine-virtuelle .input-search .icon-search path {
  stroke: var(--md-color-blue-150);
}
.page-machine-virtuelle .input-search input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
  background: transparent;
}
.page-machine-virtuelle .input-search input::placeholder {
  color: var(--md-color-neutrals-350);
}
.page-machine-virtuelle .no-machines-message {
  text-align: center;
  padding: var(--md-spacing-4xl);
  color: var(--md-color-neutrals-350);
  font-size: 14px;
}
.page-machine-virtuelle .table-machines {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  width: 100%;
  min-height: 0;
}
.page-machine-virtuelle .table-header {
  display: flex;
  align-items: center;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px 4px 0 0;
  flex-shrink: 0;
}
.page-machine-virtuelle .th {
  padding: 14px 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--md-color-blue-300);
  display: flex;
  align-items: center;
  justify-content: left !important;
}
.page-machine-virtuelle .th-checkbox {
  width: 44px;
  flex-shrink: 0;
}
.page-machine-virtuelle .th-machine {
  flex: 1;
  min-width: 180px;
}
.page-machine-virtuelle .th-localisation {
  min-width: 160px;
}
.page-machine-virtuelle .th-etat {
  min-width: 130px;
}
.page-machine-virtuelle .table-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.page-machine-virtuelle .row-machine {
  display: flex;
  align-items: center;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-top: none;
  transition: background 0.15s ease;
  cursor: pointer;
}
.page-machine-virtuelle .row-machine:last-child {
  border-radius: 0 0 4px 4px;
}
.page-machine-virtuelle .row-machine:hover {
  background: #f8f7ff;
}
.page-machine-virtuelle .row-machine--associee {
  background: rgba(38, 34, 98, 0.1) !important;
}
.page-machine-virtuelle .label-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  width: 44px;
  padding: 14px 0;
  flex-shrink: 0;
}
.page-machine-virtuelle .label-checkbox input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.page-machine-virtuelle .label-checkbox .custom-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid var(--md-color-neutrals-250);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.page-machine-virtuelle .label-checkbox .custom-checkbox::after {
  content: "";
  display: none;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}
.page-machine-virtuelle .label-checkbox input:checked + .custom-checkbox {
  background: var(--md-color-blue-300);
  border-color: var(--md-color-blue-300);
}
.page-machine-virtuelle .label-checkbox input:checked + .custom-checkbox::after {
  display: block;
}
.page-machine-virtuelle .machine-info-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 12px;
  min-width: 180px;
  flex: 1;
}
.page-machine-virtuelle .machine-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-450);
}
.page-machine-virtuelle .machine-row-id {
  font-size: 11px;
  font-weight: 500;
  color: var(--md-color-neutrals-350);
}
.page-machine-virtuelle .machine-location-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 14px 12px;
  min-width: 160px;
}
.page-machine-virtuelle .machine-location-row .icon-pin-small {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.page-machine-virtuelle .machine-location-row span {
  font-size: 13px;
  font-weight: 600;
  color: var(--md-color-neutrals-400);
}
.page-machine-virtuelle .machine-status-row {
  padding: 14px 12px;
  min-width: 130px;
}
.page-machine-virtuelle .activation-badge-small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.page-machine-virtuelle .activation-badge-small .status-icon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.page-machine-virtuelle .footer-actions {
  display: flex;
  justify-content: flex-end;
  padding: var(--md-spacing-lg) 0;
  border-top: 1px solid var(--md-color-neutrals-100);
}
.page-machine-virtuelle .popup-renommer .popup-body {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
}
.page-machine-virtuelle .popup-renommer .popup-title {
  margin-bottom: 0;
}
.page-machine-virtuelle .popup-renommer .popup-field {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
}
.page-machine-virtuelle .popup-renommer .popup-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-450);
}
.page-machine-virtuelle .popup-renommer .popup-label .required {
  color: var(--md-color-red-200);
}
.page-machine-virtuelle .popup-renommer .popup-input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  background: var(--md-color-neutrals-100);
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
  box-sizing: border-box;
  outline: none;
}
.page-machine-virtuelle .popup-renommer .popup-input:focus {
  border-color: var(--md-color-blue-300);
  background: var(--md-color-neutrals-50);
}
.page-machine-virtuelle .popup-renommer .popup-input::placeholder {
  color: var(--md-color-neutrals-300);
  font-weight: 400;
}
.page-machine-virtuelle .popup-renommer .popup-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--md-spacing-sm);
  padding-top: 17px;
  margin-top: var(--md-spacing-2xl);
  border-top: 1px solid var(--md-color-neutrals-150);
}
.page-machine-virtuelle .popup-renommer .btn-outline {
  background: transparent;
  color: var(--md-color-blue-450);
  border: 1px solid var(--md-color-blue-400);
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-width: 88px;
  transition: 0.4s;
}
.page-machine-virtuelle .popup-renommer .btn-outline:hover {
  border: 1px solid var(--md-color-green-200);
  color: var(--md-color-green-200);
}
.page-machine-virtuelle .popup-renommer .button-valider-renommer {
  min-width: 108px;
}
.page-machine-virtuelle .popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
}
.page-machine-virtuelle .popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
  background: var(--md-color-neutrals-50);
  border-radius: 12px;
  padding: var(--md-spacing-2xl);
  min-width: 420px;
  max-width: 500px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.page-machine-virtuelle .header-popup {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--md-spacing-sm);
}
.page-machine-virtuelle .button-fermer-popup {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-xs);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--md-font-family);
  font-size: 12px;
  color: var(--md-color-neutrals-400);
}
.page-machine-virtuelle .button-fermer-popup svg {
  width: 10px;
  height: 10px;
}
.page-machine-virtuelle .popup-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--md-color-blue-450);
  margin-bottom: var(--md-spacing-lg);
}
.page-machine-virtuelle .popup-message {
  font-size: 14px;
  line-height: 1.5;
  color: var(--md-color-neutrals-450);
  margin-bottom: var(--md-spacing-2xl);
}
.page-machine-virtuelle .footer-popup {
  display: flex;
  justify-content: flex-end;
  gap: var(--md-spacing-sm);
}
.page-machine-virtuelle .button-annuler {
  background: transparent;
  color: var(--md-color-blue-450);
  border: 1px solid var(--md-color-blue-400);
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.4s;
}
.page-machine-virtuelle .button-annuler:hover {
  border: 1px solid var(--md-color-green-200);
  color: var(--md-color-green-200);
}
.page-machine-virtuelle .button-confirmer-suppression {
  background: var(--md-color-red-200);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.page-machine-virtuelle .button-confirmer-suppression:hover {
  background: var(--md-color-red-400);
}
.page-machine-virtuelle .button-confirmer-suppression:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.page-machine-virtuelle .toast-container {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-machine-virtuelle .toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-neutrals-50);
  border: 1px solid var(--color-neutrals-100);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutrals-500);
  animation: toast-slide-in 0.3s ease-out;
}
.page-machine-virtuelle .toast.toast-fade-out {
  animation: toast-slide-out 0.3s ease-in forwards;
}
.page-machine-virtuelle .toast--info {
  border-left: 4px solid var(--color-blue-300);
}
.page-machine-virtuelle .toast--info .toast-icon {
  color: var(--color-blue-300);
}
.page-machine-virtuelle .toast--success {
  border-left: 4px solid #62ba87;
}
.page-machine-virtuelle .toast--success .toast-icon {
  color: #62ba87;
}
.page-machine-virtuelle .toast--error {
  border-left: 4px solid #c14039;
}
.page-machine-virtuelle .toast--error .toast-icon {
  color: #c14039;
}
@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
.page-machine-virtuelle .toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .page-machine-virtuelle {
    flex-direction: column;
  }
  .page-machine-virtuelle .aside-sidebar-placeholder {
    width: 100%;
    min-width: unset;
    height: 60px;
  }
  .page-machine-virtuelle .section-main-content {
    padding: var(--md-spacing-lg);
  }
  .page-machine-virtuelle .div-machine-title-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-lg);
  }
  .page-machine-virtuelle .input-search {
    width: 100%;
    max-width: 100%;
  }
  .page-machine-virtuelle .footer-actions {
    flex-direction: column;
    gap: var(--md-spacing-lg);
  }
  .page-machine-virtuelle .button-enregistrer {
    width: 100%;
  }
}
@media (max-width: 719px) {
  .page-machine-virtuelle {
    /* Bandeau fixe en haut */
    /* Espace pour le bandeau fixe */
    padding-top: 72px;
    overflow: hidden;
    height: 100svh;
    /* Header : masquer retour et infos machine */
    /* Section machines : scrollable */
    /* Tableau : header masqué, body scroll */
    /* Footer : bouton pleine largeur */
    /* Popup : fullscreen */
    /* Popup renommer : body scrollable, footer fixe */
  }
  .page-machine-virtuelle::before {
    content: "Machine Virtuelle";
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
    height: 72px;
    min-height: 72px;
    padding-left: 80px;
    padding-top: 8px;
    background: var(--md-color-neutrals-50);
    border-radius: 0 0 8px 8px;
    z-index: 3;
    font-family: var(--md-font-family);
    font-size: 20px;
    font-weight: 700;
    color: #262262;
    line-height: normal;
    box-sizing: border-box;
  }
  .page-machine-virtuelle .section-main-content {
    padding: var(--md-spacing-xl);
    height: calc(100svh - 72px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .page-machine-virtuelle .header-page-top {
    padding-bottom: 0;
    border-bottom: none;
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .page-machine-virtuelle .button-retour {
    display: flex;
  }
  .page-machine-virtuelle .div-machine-info {
    display: none;
  }
  .page-machine-virtuelle .div-machine-title-bar {
    width: auto;
  }
  .page-machine-virtuelle .input-search {
    width: 100%;
    max-width: 100%;
  }
  .page-machine-virtuelle .section-machines-associees {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .page-machine-virtuelle .div-actions-section {
    flex-shrink: 0;
  }
  .page-machine-virtuelle .machines-count-wrapper {
    flex-shrink: 0;
  }
  .page-machine-virtuelle .table-machines {
    flex: 1;
    overflow: hidden;
  }
  .page-machine-virtuelle .table-header {
    display: none;
  }
  .page-machine-virtuelle .table-body {
    flex: 1;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-machine-virtuelle .table-body::-webkit-scrollbar {
    display: none;
  }
  .page-machine-virtuelle .row-machine {
    padding: var(--md-spacing-md);
    flex-wrap: wrap;
    gap: var(--md-spacing-sm);
  }
  .page-machine-virtuelle .machine-info-row {
    min-width: 0;
    flex: 1;
    padding: var(--md-spacing-sm) 0;
  }
  .page-machine-virtuelle .machine-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
    display: block;
  }
  .page-machine-virtuelle .machine-location-row {
    display: none;
  }
  .page-machine-virtuelle .machine-status-row {
    min-width: 0;
    padding: var(--md-spacing-sm) 0;
  }
  .page-machine-virtuelle .footer-actions {
    flex-shrink: 0;
  }
  .page-machine-virtuelle .button-enregistrer {
    width: 100%;
  }
  .page-machine-virtuelle .popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    transform: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-width: unset;
  }
  .page-machine-virtuelle .header-popup {
    padding: 16px 20px;
    border-bottom: 1px solid var(--md-color-neutrals-100);
    flex-shrink: 0;
  }
  .page-machine-virtuelle .popup-title {
    padding: 0 20px;
    font-size: 18px;
    flex-shrink: 0;
  }
  .page-machine-virtuelle .popup-message {
    padding: 0 20px;
    flex: 1;
  }
  .page-machine-virtuelle .footer-popup {
    flex-shrink: 0;
    padding: 16px 20px;
    border-top: 1px solid var(--md-color-neutrals-150);
    background-color: var(--md-color-neutrals-50);
  }
  .page-machine-virtuelle .button-annuler,
  .page-machine-virtuelle .button-confirmer-suppression {
    flex: 1;
    min-width: auto;
  }
  .page-machine-virtuelle .popup-renommer .popup-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--md-color-neutrals-100);
    flex-shrink: 0;
  }
  .page-machine-virtuelle .popup-renommer .popup-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }
  .page-machine-virtuelle .popup-renommer .popup-title {
    padding: 0;
  }
  .page-machine-virtuelle .popup-renommer .popup-footer {
    flex-shrink: 0;
    padding: 16px 20px;
    margin-top: 0;
    border-top: 1px solid var(--md-color-neutrals-150);
    background-color: var(--md-color-neutrals-50);
  }
  .page-machine-virtuelle .popup-renommer .btn-outline,
  .page-machine-virtuelle .popup-renommer .button-valider-renommer {
    flex: 1;
    min-width: auto;
  }
}

/* ===========================================
   Page Machine Colis - Vue pickup
   Reutilise les memes classes que machine-detail
   (nav-tabs-bar, ul-tabs-list, li-tab, etc.)
   =========================================== */
.page-machine-colis {
  /* Variables locales (meme palette que machine-detail) */
  --md-color-blue-500: #110f2c;
  --md-color-blue-450: #161338;
  --md-color-blue-400: #1b1846;
  --md-color-blue-300: #262262;
  --md-color-blue-150: #a2a0bb;
  --md-color-neutrals-500: #1e1e1e;
  --md-color-neutrals-450: #3d3d3d;
  --md-color-neutrals-400: #5e5e5e;
  --md-color-neutrals-350: #828282;
  --md-color-neutrals-300: #a7a7a7;
  --md-color-neutrals-250: #b2b2b2;
  --md-color-neutrals-150: #ddd;
  --md-color-neutrals-100: #f1f1f1;
  --md-color-neutrals-50: #fff;
  --md-color-green-400: #3b7051;
  --md-color-green-200: #62ba87;
  --md-color-red-200: #c14039;
  --md-font-family: "Open Sans", sans-serif;
  --md-spacing-xs: 4px;
  --md-spacing-sm: 8px;
  --md-spacing-md: 12px;
  --md-spacing-lg: 16px;
  --md-spacing-xl: 20px;
  --md-spacing-2xl: 24px;
  --md-spacing-3xl: 28px;
  --md-spacing-4xl: 32px;
  /* Page Layout */
  display: flex;
  min-height: 100vh;
  width: 100%;
  /* Override le user-select:none global du body pour autoriser
     la selection/copie sur toute la page pickup et ses onglets */
  user-select: text;
  /* Main content */
  /* Header (meme style que machine-detail) */
  /* Navigation onglets (memes classes que machine-detail) */
  /* Actions a droite des onglets */
  /* Contenu onglet */
  /* ===========================================
     Grille casiers
     =========================================== */
  /* ===========================================
     Tableaux de donnees (evenements)
     =========================================== */
  /* ===========================================
     Tableau annonces (style calqué sur table-casiers)
     Partagé avec les tableaux "évènements colis",
     "évènements consigne" et "incidents" — mêmes styles
     de tri, badges, etc.
     =========================================== */
  /* ===========================================
     Badges
     =========================================== */
  /* ===========================================
     Informations generales
     =========================================== */
  /* Toast notifications (meme pattern que machine-detail) */
  /* Cartes transporteurs */
  /* ===========================================
     Responsive Tablet (max-width: 768px)
     =========================================== */
  /* ===========================================
     Responsive Mobile (max-width: 719px)
     Pattern identique aux pages Machine Detail
     =========================================== */
  /* ===========================================
     Page Casiers — Vue Armoire
     =========================================== */
  /* Toggle vue armoire / tableau dans la barre nav */
  /* Barre de recherche (dans le bandeau top, alignée à droite) */
  /* Section vue armoire — armoires listées de gauche à droite */
  /* Ligne horizontale contenant toutes les armoires (comme page Armoires) */
  /* Groupe armoire (1 armoire = compteurs + grille) */
  /* Layout horizontal : tableau compteurs à gauche + liste armoires à droite */
  /* Colonne verticale contenant les 2 tableaux récapitulatifs */
  /* Tableau récapitulatif des compteurs (vue armoire uniquement) */
  /* La liste des armoires occupe l'espace restant à droite du tableau */
  /* Conteneur armoire : flex column wrap avec hauteur fixe.
     Les casiers remplissent la 1re colonne de haut en bas,
     puis débordent automatiquement sur la 2e colonne.
     Dimensions réduites (~0.7) pour s'aligner sur la hauteur des 3 tableaux d'info. */
  /* Colonnes conservées pour compatibilité HTML existant mais rendues transparentes */
  /* Card casier individuel — hauteurs fixes, pas de flex-grow */
  /* Placeholder écran (Colis13) */
  /* ===========================================
     Page Casiers — Vue Tableau
     =========================================== */
  /* Badge état partagé (tableau + cards mobile) */
  /* ===========================================
     Cards mobile partagées (vue tableau → cards ≤ 719px)
     Utilisées par les pages : Casiers, Annonces,
     Évènements colis, Évènements consigne, Incidents.
     Base commune puis spécialisations par type.
     =========================================== */
  /* Cards cliquables : casier + annonce + événement colis */
  /* --- Spécifique Casier : liseré gauche par état + numéro prominent --- */
  /* --- Spécifique Annonce : référence mono prominente + badge statut --- */
  /* --- Spécifique Événement : date à gauche + code événement à droite --- */
  /* ===========================================
     Aside — Panneau détail casier
     =========================================== */
  /* Infos colis (partie gauche du panel) */
  /* Timeline historique (partie droite du panel) */
  /* Message vide */
  /* ===========================================
     Identifiants livreur — section (modals plus bas, hors wrapper)
     Visible uniquement en mode pickup sur l'onglet Informations générales.
     =========================================== */
  /* Padding bas sur la page Informations générales, pour laisser respirer
     la section Identifiants livreur (évite que les tooltips ne couvrent
     la dernière ligne au survol des boutons d'action). */
  /* ===========================================
     Page Casiers — Responsive
     =========================================== */
  /* ===========================================
     Bascule tables → cards (≤ 719px)
     Concerne les 5 pages : Casiers, Annonces,
     Évènements colis, Évènements consigne, Incidents.
     Pattern calqué sur machine-ouverture.
     =========================================== */
  /* Masquer les dots par défaut (desktop) */
}
.page-machine-colis .aside-sidebar-placeholder {
  display: none;
}
.page-machine-colis .section-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xl);
  padding: var(--md-spacing-3xl);
  padding-bottom: 0;
  overflow: hidden;
  background: linear-gradient(114.6deg, rgb(248, 249, 250) 0%, rgb(245, 244, 255) 100%);
  position: relative;
  height: 100vh;
}
.page-machine-colis .header-page-top {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
  padding-bottom: var(--md-spacing-xl);
  border-bottom: 1px solid var(--md-color-neutrals-100);
}
@media (max-width: 719px) {
  .page-machine-colis .header-page-top {
    padding-bottom: 0;
  }
}
.page-machine-colis .button-retour {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-xs);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
}
.page-machine-colis .button-retour .icon-arrow-back {
  width: 16px;
  height: 16px;
}
.page-machine-colis .div-machine-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-spacing-4xl);
}
.page-machine-colis .div-machine-info {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
  flex: 1;
}
.page-machine-colis .div-machine-identite {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
}
.page-machine-colis .machine-name {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--md-color-blue-450);
}
.page-machine-colis .span-badge-version {
  padding: 4.8px 8.8px;
  border: 0.8px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  color: #0a0a0a;
}
.page-machine-colis .activation-badge {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-sm);
  padding: var(--md-spacing-sm) var(--md-spacing-md);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
.page-machine-colis .activation-badge--active {
  background: rgba(98, 186, 135, 0.1);
  color: var(--md-color-green-400);
}
.page-machine-colis .activation-badge--active .status-icon {
  background: var(--md-color-green-200);
}
.page-machine-colis .activation-badge--inactive {
  background: rgba(193, 64, 57, 0.1);
  color: var(--md-color-red-200);
}
.page-machine-colis .activation-badge--inactive .status-icon {
  background: var(--md-color-red-200);
}
.page-machine-colis .activation-badge--virtuelle {
  background: rgba(38, 34, 98, 0.1);
  color: var(--md-color-blue-300);
}
.page-machine-colis .activation-badge--virtuelle .status-icon {
  background: var(--md-color-blue-300);
}
.page-machine-colis .activation-badge .status-icon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.page-machine-colis .last-sync {
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  color: var(--md-color-neutrals-350);
}
.page-machine-colis .div-localisation {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-lg);
}
.page-machine-colis .machine-number {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--md-color-neutrals-400);
}
.page-machine-colis .location-info {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-xs);
}
.page-machine-colis .location-info .icon-pin {
  width: 16px;
  height: 16px;
}
.page-machine-colis .location-info span {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--md-color-neutrals-350);
}
.page-machine-colis .nav-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-spacing-lg);
}
.page-machine-colis .ul-tabs-list {
  display: flex;
  align-items: center;
  list-style: none;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  padding: 0 var(--md-spacing-xs);
  margin: 0;
}
.page-machine-colis .li-tab {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-150);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.page-machine-colis .li-tab a {
  display: block;
  padding: var(--md-spacing-md);
  color: inherit;
  text-decoration: none;
}
.page-machine-colis .li-tab:hover {
  color: var(--md-color-blue-300);
}
.page-machine-colis .li-tab.active {
  color: var(--md-color-blue-300);
  border-bottom-color: var(--md-color-blue-300);
}
.page-machine-colis .div-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
}
.page-machine-colis .div-nav-actions:empty {
  display: none;
}
.page-machine-colis .button-supprimer-machine {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--md-spacing-sm);
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--md-color-red-200);
  transition: all 0.2s;
}
.page-machine-colis .button-supprimer-machine svg {
  width: 18px;
  height: 18px;
}
.page-machine-colis .button-supprimer-machine:hover {
  background: rgba(192, 57, 52, 0.1);
}
.page-machine-colis .section-tab-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--md-spacing-xl) 0;
  font-family: var(--md-font-family);
  font-size: 14px;
  color: var(--md-color-neutrals-500);
}
.page-machine-colis .locker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--md-spacing-md);
}
.page-machine-colis .locker-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--md-spacing-xs);
  padding: var(--md-spacing-lg);
  border-radius: 8px;
  border: 2px solid var(--md-color-neutrals-150);
  background: var(--md-color-neutrals-50);
  transition: border-color 0.2s;
}
.page-machine-colis .locker-box .locker-box-id {
  font-size: 16px;
  font-weight: 700;
  color: var(--md-color-blue-450);
}
.page-machine-colis .locker-box .locker-box-size {
  font-size: 11px;
  font-weight: 600;
  color: var(--md-color-neutrals-350);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.page-machine-colis .locker-box .locker-box-status {
  font-size: 11px;
  font-weight: 600;
  margin-top: var(--md-spacing-xs);
}
.page-machine-colis .locker-box .status-libre {
  color: var(--md-color-green-400);
}
.page-machine-colis .locker-box .status-occupe {
  color: var(--md-color-blue-300);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.page-machine-colis .locker-box .status-panne {
  color: var(--md-color-red-200);
}
.page-machine-colis .locker-box--libre {
  border-color: var(--md-color-green-200);
  background: rgba(98, 186, 135, 0.05);
}
.page-machine-colis .locker-box--occupe {
  border-color: var(--md-color-blue-300);
  background: rgba(38, 34, 98, 0.05);
}
.page-machine-colis .locker-box--panne {
  border-color: var(--md-color-red-200);
  background: rgba(193, 64, 57, 0.05);
}
.page-machine-colis .empty-message {
  text-align: center;
  padding: var(--md-spacing-4xl);
  color: var(--md-color-neutrals-350);
  font-size: 14px;
}
.page-machine-colis .table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 8px;
  background: var(--md-color-neutrals-50);
}
.page-machine-colis .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.page-machine-colis .data-table thead {
  background: var(--md-color-neutrals-100);
}
.page-machine-colis .data-table thead th {
  padding: var(--md-spacing-md) var(--md-spacing-lg);
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--md-color-neutrals-400);
  white-space: nowrap;
}
.page-machine-colis .data-table tbody tr {
  border-bottom: 1px solid var(--md-color-neutrals-100);
  transition: background 0.15s;
}
.page-machine-colis .data-table tbody tr:hover {
  background: rgba(38, 34, 98, 0.02);
}
.page-machine-colis .data-table tbody tr:last-child {
  border-bottom: none;
}
.page-machine-colis .data-table tbody td {
  padding: var(--md-spacing-md) var(--md-spacing-lg);
  color: var(--md-color-neutrals-500);
  white-space: nowrap;
}
.page-machine-colis .section-vue-tableau-annonces,
.page-machine-colis .section-vue-tableau-evenements-colis,
.page-machine-colis .section-vue-tableau-evenements-consigne,
.page-machine-colis .section-vue-tableau-incidents {
  overflow-x: auto;
  padding-bottom: 20px;
}
.page-machine-colis .table-annonces,
.page-machine-colis .table-evenements-colis,
.page-machine-colis .table-evenements-consigne,
.page-machine-colis .table-incidents {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: "Open Sans", var(--md-font-family), sans-serif;
  font-size: 14px;
  background: #fff;
  border-radius: 4px 4px 0 0;
}
.page-machine-colis .table-annonces .tr-entete-annonces,
.page-machine-colis .table-evenements-colis .tr-entete-annonces,
.page-machine-colis .table-evenements-consigne .tr-entete-annonces,
.page-machine-colis .table-incidents .tr-entete-annonces {
  background: #fff;
  height: 62px;
}
.page-machine-colis .table-annonces .tr-entete-annonces th,
.page-machine-colis .table-evenements-colis .tr-entete-annonces th,
.page-machine-colis .table-evenements-consigne .tr-entete-annonces th,
.page-machine-colis .table-incidents .tr-entete-annonces th {
  padding: 12px 16px 12px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  color: #262262;
  vertical-align: middle;
  border-top: 1px solid #f1f1f1;
}
.page-machine-colis .table-annonces .tr-entete-annonces th:last-child,
.page-machine-colis .table-evenements-colis .tr-entete-annonces th:last-child,
.page-machine-colis .table-evenements-consigne .tr-entete-annonces th:last-child,
.page-machine-colis .table-incidents .tr-entete-annonces th:last-child {
  border-right: 1px solid #f1f1f1;
}
.page-machine-colis .table-annonces .tr-entete-annonces th:first-child,
.page-machine-colis .table-evenements-colis .tr-entete-annonces th:first-child,
.page-machine-colis .table-evenements-consigne .tr-entete-annonces th:first-child,
.page-machine-colis .table-incidents .tr-entete-annonces th:first-child {
  border-top-left-radius: 4px;
}
.page-machine-colis .table-annonces .tr-entete-annonces th:last-child,
.page-machine-colis .table-evenements-colis .tr-entete-annonces th:last-child,
.page-machine-colis .table-evenements-consigne .tr-entete-annonces th:last-child,
.page-machine-colis .table-incidents .tr-entete-annonces th:last-child {
  border-top-right-radius: 4px;
}
.page-machine-colis .table-annonces .th-label,
.page-machine-colis .table-evenements-colis .th-label,
.page-machine-colis .table-evenements-consigne .th-label,
.page-machine-colis .table-incidents .th-label {
  line-height: 1.3;
}
.page-machine-colis .table-annonces .th-sortable-annonces,
.page-machine-colis .table-evenements-colis .th-sortable-annonces,
.page-machine-colis .table-evenements-consigne .th-sortable-annonces,
.page-machine-colis .table-incidents .th-sortable-annonces {
  cursor: pointer;
}
.page-machine-colis .table-annonces .th-sortable-annonces:hover,
.page-machine-colis .table-evenements-colis .th-sortable-annonces:hover,
.page-machine-colis .table-evenements-consigne .th-sortable-annonces:hover,
.page-machine-colis .table-incidents .th-sortable-annonces:hover {
  background: rgba(38, 34, 98, 0.03);
}
.page-machine-colis .table-annonces .span-icone-tri,
.page-machine-colis .table-evenements-colis .span-icone-tri,
.page-machine-colis .table-evenements-consigne .span-icone-tri,
.page-machine-colis .table-incidents .span-icone-tri {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 14px;
  margin-left: 8px;
  vertical-align: middle;
}
.page-machine-colis .table-annonces .icon-tri,
.page-machine-colis .table-evenements-colis .icon-tri,
.page-machine-colis .table-evenements-consigne .icon-tri,
.page-machine-colis .table-incidents .icon-tri {
  opacity: 0.4;
  transition: opacity 0.15s;
}
.page-machine-colis .table-annonces .th-sortable-annonces:hover .icon-tri,
.page-machine-colis .table-evenements-colis .th-sortable-annonces:hover .icon-tri,
.page-machine-colis .table-evenements-consigne .th-sortable-annonces:hover .icon-tri,
.page-machine-colis .table-incidents .th-sortable-annonces:hover .icon-tri {
  opacity: 0.7;
}
.page-machine-colis .table-annonces .th-sortable-annonces.sort-asc .icon-tri,
.page-machine-colis .table-annonces .th-sortable-annonces.sort-desc .icon-tri,
.page-machine-colis .table-evenements-colis .th-sortable-annonces.sort-asc .icon-tri,
.page-machine-colis .table-evenements-colis .th-sortable-annonces.sort-desc .icon-tri,
.page-machine-colis .table-evenements-consigne .th-sortable-annonces.sort-asc .icon-tri,
.page-machine-colis .table-evenements-consigne .th-sortable-annonces.sort-desc .icon-tri,
.page-machine-colis .table-incidents .th-sortable-annonces.sort-asc .icon-tri,
.page-machine-colis .table-incidents .th-sortable-annonces.sort-desc .icon-tri {
  opacity: 1;
}
.page-machine-colis .table-annonces tbody tr,
.page-machine-colis .table-evenements-colis tbody tr,
.page-machine-colis .table-evenements-consigne tbody tr,
.page-machine-colis .table-incidents tbody tr {
  height: 53px;
  background: #fff;
  transition: background 0.15s;
}
.page-machine-colis .table-annonces tbody tr:hover,
.page-machine-colis .table-evenements-colis tbody tr:hover,
.page-machine-colis .table-evenements-consigne tbody tr:hover,
.page-machine-colis .table-incidents tbody tr:hover {
  background: rgba(38, 34, 98, 0.02);
}
.page-machine-colis .table-annonces tbody tr td,
.page-machine-colis .table-evenements-colis tbody tr td,
.page-machine-colis .table-evenements-consigne tbody tr td,
.page-machine-colis .table-incidents tbody tr td {
  padding: 14px 12px;
  vertical-align: middle;
  font-weight: 600;
  font-size: 14px;
  color: #3d3d3d;
  border-top: 1px solid #f1f1f1;
  overflow: hidden;
}
.page-machine-colis .table-annonces tbody tr td:last-child,
.page-machine-colis .table-evenements-colis tbody tr td:last-child,
.page-machine-colis .table-evenements-consigne tbody tr td:last-child,
.page-machine-colis .table-incidents tbody tr td:last-child {
  border-right: 1px solid #f1f1f1;
}
.page-machine-colis .cell-mono {
  font-family: "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 0.3px;
}
.page-machine-colis .badge-carrier {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(38, 34, 98, 0.08);
  color: var(--md-color-blue-300);
}
.page-machine-colis .badge-status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.page-machine-colis .badge-status--inlocker {
  background: rgba(38, 34, 98, 0.1);
  color: var(--md-color-blue-300);
}
.page-machine-colis .badge-status--expected {
  background: rgba(255, 165, 0, 0.1);
  color: #c07800;
}
.page-machine-colis .badge-status--pickedup {
  background: rgba(98, 186, 135, 0.1);
  color: var(--md-color-green-400);
}
.page-machine-colis .badge-status--expired {
  background: rgba(193, 64, 57, 0.1);
  color: var(--md-color-red-200);
}
.page-machine-colis .info-actions {
  display: flex;
  gap: var(--md-spacing-md);
  margin-bottom: var(--md-spacing-xl);
  justify-content: flex-end;
}
.page-machine-colis .btn-modifier,
.page-machine-colis .btn-enregistrer,
.page-machine-colis .btn-annuler {
  padding: var(--md-spacing-sm) var(--md-spacing-xl);
  border: none;
  border-radius: 6px;
  font-family: var(--md-font-family);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.page-machine-colis .btn-modifier {
  background: var(--md-color-blue-300);
  color: #fff;
}
.page-machine-colis .btn-modifier:hover {
  background: var(--md-color-blue-400);
}
.page-machine-colis .btn-enregistrer {
  background: var(--md-color-green-400);
  color: #fff;
}
.page-machine-colis .btn-enregistrer:hover {
  background: var(--md-color-green-200);
}
.page-machine-colis .btn-annuler {
  background: var(--md-color-neutrals-100);
  color: var(--md-color-neutrals-450);
}
.page-machine-colis .btn-annuler:hover {
  background: var(--md-color-neutrals-150);
}
.page-machine-colis .field-input {
  width: 100%;
  padding: var(--md-spacing-sm) var(--md-spacing-md);
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  color: var(--md-color-neutrals-500);
  background: var(--md-color-neutrals-50);
  transition: border-color 0.2s;
}
.page-machine-colis .field-input:focus {
  outline: none;
  border-color: var(--md-color-blue-300);
}
.page-machine-colis .hidden {
  display: none !important;
}
.page-machine-colis .toast-container {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-machine-colis .toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
}
.page-machine-colis .toast--warning {
  border-left: 4px solid #e6a817;
}
.page-machine-colis .toast--warning .toast-icon {
  color: #e6a817;
}
.page-machine-colis .toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.page-machine-colis .info-sections {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-2xl);
}
.page-machine-colis .info-section {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-lg);
}
.page-machine-colis .section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--md-color-blue-450);
  padding-bottom: var(--md-spacing-sm);
  border-bottom: 1px solid var(--md-color-neutrals-100);
}
.page-machine-colis .info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--md-spacing-lg);
}
.page-machine-colis .info-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.page-machine-colis .info-field .field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--md-color-neutrals-350);
}
.page-machine-colis .info-field .field-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--md-color-neutrals-500);
}
.page-machine-colis .pickup-sites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--md-spacing-lg);
}
.page-machine-colis .pickup-site-card {
  background: var(--md-color-neutrals-50);
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 8px;
  overflow: hidden;
}
.page-machine-colis .pickup-site-card .site-card-header {
  padding: var(--md-spacing-md) var(--md-spacing-lg);
  background: var(--md-color-neutrals-100);
}
.page-machine-colis .pickup-site-card .site-card-body {
  padding: var(--md-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
}
.page-machine-colis .pickup-site-card .site-field {
  display: flex;
  justify-content: space-between;
  gap: var(--md-spacing-md);
}
.page-machine-colis .pickup-site-card .site-field .field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-350);
}
.page-machine-colis .pickup-site-card .site-field .field-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
  font-family: "Courier New", monospace;
}
@media (max-width: 768px) {
  .page-machine-colis {
    flex-direction: column;
  }
  .page-machine-colis .aside-sidebar-placeholder {
    width: 100%;
    min-width: unset;
    height: 60px;
  }
  .page-machine-colis .section-main-content {
    padding: var(--md-spacing-lg);
  }
  .page-machine-colis .div-machine-title-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-machine-colis .nav-tabs-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-spacing-md);
  }
  .page-machine-colis .ul-tabs-list {
    flex-wrap: wrap;
  }
  .page-machine-colis .footer-actions-bar {
    flex-direction: column;
    gap: var(--md-spacing-lg);
  }
  .page-machine-colis .div-actions-left {
    width: 100%;
    justify-content: center;
  }
  .page-machine-colis .div-fields-passwords {
    flex-direction: column;
  }
}
@media (max-width: 719px) {
  .page-machine-colis {
    /* Bandeau fixe en haut avec titre "Machine Colis" */
    /* Espace pour le bandeau fixe */
    padding-top: 72px;
    overflow: hidden;
    height: 100svh;
    /* Ajustement du main-content */
    /* Masquer les conteneurs vides */
    /* Header page : afficher seulement si bouton paramètres avancés présent */
    /* Masquer les infos machine (déjà dans le bandeau) */
    /* Navigation tabs : scroll horizontal */
    /* Contenu scrollable */
    /* Sections : 1 colonne */
    /* Multimédia : empilé verticalement, centré */
    /* Footer actions : scrollable avec le contenu */
    /* Boutons pleine largeur */
    /* Toast : repositionner en bas pleine largeur */
  }
  .page-machine-colis::before {
    content: "Machine Colis";
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
    height: 72px;
    min-height: 72px;
    padding-left: 80px;
    padding-top: 8px;
    background: var(--md-color-neutrals-50);
    border-radius: 0 0 8px 8px;
    z-index: 3;
    font-family: var(--md-font-family);
    font-size: 20px;
    font-weight: 700;
    color: #262262;
    line-height: normal;
    box-sizing: border-box;
  }
  .page-machine-colis .section-main-content {
    padding: var(--md-spacing-xl);
    height: calc(100svh - 72px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .page-machine-colis .div-nav-actions:empty,
  .page-machine-colis .div-actions-left:empty,
  .page-machine-colis .footer-actions-bar:empty,
  .page-machine-colis .div-button-counter:empty {
    display: none;
  }
  .page-machine-colis .header-page-top {
    display: none;
  }
  .page-machine-colis .header-page-top:has(.button-parametres-avances) {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    border-bottom: none;
    align-items: center;
    justify-content: space-between;
  }
  .page-machine-colis .button-retour {
    display: flex;
  }
  .page-machine-colis .div-machine-info {
    display: none;
  }
  .page-machine-colis .div-machine-title-bar {
    width: auto;
  }
  .page-machine-colis .button-parametres-avances {
    width: auto;
  }
  .page-machine-colis .nav-tabs-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--md-spacing-md);
    flex-shrink: 0;
  }
  .page-machine-colis .ul-tabs-list {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-machine-colis .ul-tabs-list::-webkit-scrollbar {
    display: none;
  }
  .page-machine-colis .li-tab {
    flex-shrink: 0;
    font-size: 12px;
  }
  .page-machine-colis .li-tab a {
    padding: var(--md-spacing-sm) var(--md-spacing-md);
    white-space: nowrap;
  }
  .page-machine-colis .div-nav-actions {
    width: 100%;
    justify-content: space-between;
  }
  .page-machine-colis .scrollable-content {
    flex: 1;
    overflow-y: auto;
    padding-bottom: var(--md-spacing-4xl);
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-machine-colis .scrollable-content::-webkit-scrollbar {
    display: none;
  }
  .page-machine-colis .fields-grid {
    grid-template-columns: 1fr;
    gap: var(--md-spacing-lg);
  }
  .page-machine-colis .div-section-wrapper > div {
    padding: var(--md-spacing-lg);
  }
  .page-machine-colis .div-multimedia-content {
    flex-direction: column;
    gap: var(--md-spacing-xl);
    align-items: center;
  }
  .page-machine-colis .div-upload-image,
  .page-machine-colis .div-upload-logo,
  .page-machine-colis .div-upload-video {
    width: 100%;
    align-items: center;
  }
  .page-machine-colis .div-upload-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .page-machine-colis .figure-placeholder.square {
    width: 150px;
    height: 150px;
  }
  .page-machine-colis .figure-placeholder.rectangle {
    width: 100%;
    max-width: 280px;
    height: auto;
    aspect-ratio: 234/124;
  }
  .page-machine-colis .media-preview.square {
    width: 150px;
    height: 150px;
  }
  .page-machine-colis .media-preview.rectangle {
    width: 100%;
    max-width: 280px;
    height: auto;
    aspect-ratio: 234/124;
  }
  .page-machine-colis .div-actions {
    justify-content: center;
  }
  .page-machine-colis .footer-actions-bar {
    flex-direction: column;
    gap: var(--md-spacing-xl);
    padding: var(--md-spacing-lg);
    /* iOS : ajoute la safe-area pour que le bouton ne soit pas masque par la home indicator / barre Safari */
    padding-bottom: max(var(--md-spacing-lg), env(safe-area-inset-bottom) + var(--md-spacing-lg));
  }
  .page-machine-colis .div-actions-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--md-spacing-xl);
  }
  .page-machine-colis .div-button-counter {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--md-spacing-md);
  }
  .page-machine-colis .div-button-counter .counter {
    display: block;
    flex-shrink: 0;
  }
  .page-machine-colis .div-actions-left > button {
    width: 100%;
  }
  .page-machine-colis .div-button-counter > button {
    flex: 1;
  }
  .page-machine-colis .div-actions-left .btn-primary,
  .page-machine-colis .div-actions-left .btn-outline,
  .page-machine-colis .div-actions-left .btn-green,
  .page-machine-colis .div-actions-left .btn-red,
  .page-machine-colis .div-actions-left .btn-deactivated {
    width: 100%;
    justify-content: center;
    padding: var(--md-spacing-sm) var(--md-spacing-xs);
    font-size: 12px;
  }
  .page-machine-colis .footer-actions-bar > .button-redemarrer {
    width: 100%;
    justify-content: center;
    padding: var(--md-spacing-sm) var(--md-spacing-xs);
    font-size: 12px;
  }
  .page-machine-colis .toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
  }
  .page-machine-colis .toast {
    width: 100%;
  }
}
.page-machine-colis .div-toggle-vue-casiers {
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-machine-colis .div-toggle-vue-casiers .toggle-label {
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-350);
  white-space: nowrap;
  cursor: pointer;
}
.page-machine-colis .div-toggle-vue-casiers .toggle-label.active {
  color: var(--md-color-blue-400);
}
.page-machine-colis .div-toggle-vue-casiers .button-toggle-vue-casiers {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.page-machine-colis .div-toggle-vue-casiers .button-toggle-vue-casiers .toggle-track {
  width: 58px;
  height: 26px;
  border-radius: 50px;
  background: var(--md-color-blue-300);
  position: relative;
  box-shadow: inset 0 6px 8px 3px rgba(0, 0, 0, 0.1);
  transition: background 0.2s;
}
.page-machine-colis .div-toggle-vue-casiers .button-toggle-vue-casiers .toggle-cursor {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 2px 1px 6px rgba(0, 0, 0, 0.25);
  position: absolute;
  top: 3px;
  left: 3px;
  transition: left 0.2s;
}
.page-machine-colis .div-toggle-vue-casiers .button-toggle-vue-casiers.toggled .toggle-cursor {
  left: 35px;
}
.page-machine-colis .button-exporter-casiers {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 88px;
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  background: var(--md-color-green-200);
  color: #213e2d;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.page-machine-colis .button-exporter-casiers:hover {
  opacity: 0.85;
}
.page-machine-colis .button-exporter-casiers .icon-export {
  width: 16px;
  height: 16px;
}
.page-machine-colis .div-search-casiers {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  flex-shrink: 0;
}
.page-machine-colis .div-search-casiers .input-search-casiers {
  width: 397px;
  max-width: 100%;
  height: 40px;
  padding: 12px 16px 12px 40px;
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 4px;
  background: var(--md-color-neutrals-50) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5.5" stroke="%23a7a7a7" stroke-width="1.5"/><path d="M11 11L14 14" stroke="%23a7a7a7" stroke-width="1.5" stroke-linecap="round"/></svg>') no-repeat 12px center;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
}
.page-machine-colis .div-search-casiers .input-search-casiers::placeholder {
  color: var(--md-color-neutrals-300);
}
.page-machine-colis .div-search-casiers .input-search-casiers:focus {
  outline: none;
  border-color: var(--md-color-blue-150);
}
.page-machine-colis .section-vue-armoire {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: auto;
  padding-bottom: 20px;
}
.page-machine-colis .div-armoires-row-casiers {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.page-machine-colis .div-armoire-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page-machine-colis .div-armoire-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.page-machine-colis .div-counters-tables {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}
.page-machine-colis .table-armoire-counters {
  width: 260px;
  flex-shrink: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--md-font-family);
  font-size: 14px;
  /* Tag coloré dans la cellule libellé */
  /* Lignes d'info (3e tableau) : valeur en texte, moins agressive que les chiffres */
  /* Cellule tronquée avec ellipsis — tooltip natif via attribut title */
}
.page-machine-colis .table-armoire-counters .tr-counter td {
  padding: 10px 14px;
  vertical-align: middle;
  background: #fff;
  border-bottom: 1px solid var(--md-color-neutrals-100);
}
.page-machine-colis .table-armoire-counters .tr-counter:last-child td {
  border-bottom: none;
}
.page-machine-colis .table-armoire-counters .td-counter-label {
  text-align: left;
}
.page-machine-colis .table-armoire-counters .td-counter-value {
  font-weight: 500;
  font-size: 16px;
  text-align: right;
  color: var(--md-color-neutrals-500);
  font-variant-numeric: tabular-nums;
}
.page-machine-colis .table-armoire-counters .tag-counter {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  /* Variante icône (2e tableau) : fond neutre + SVG centré */
  /* Variante neutre (3e tableau : infos machine) */
}
.page-machine-colis .table-armoire-counters .tag-counter--disponible {
  background: #efeef0;
  color: #1e1e1e;
}
.page-machine-colis .table-armoire-counters .tag-counter--depot-client {
  background: #97ccf9;
  color: #0a2a4a;
}
.page-machine-colis .table-armoire-counters .tag-counter--expire {
  background: #c14039;
  color: #fff;
}
.page-machine-colis .table-armoire-counters .tag-counter--alivrer {
  background: #ccc84f;
  color: #1e1e1e;
}
.page-machine-colis .table-armoire-counters .tag-counter--livre {
  background: #65bd89;
  color: #0a2a14;
}
.page-machine-colis .table-armoire-counters .tag-counter--total {
  background: #fff;
  color: #525252;
  border: 1px solid var(--md-color-neutrals-150);
}
.page-machine-colis .table-armoire-counters .tag-counter--icon {
  background: var(--md-color-neutrals-100);
  color: var(--md-color-neutrals-500);
  padding: 4px 10px;
  min-width: 40px;
}
.page-machine-colis .table-armoire-counters .tag-counter--icon svg {
  display: block;
  width: 18px;
  height: 18px;
}
.page-machine-colis .table-armoire-counters .tag-counter--neutral {
  background: var(--md-color-neutrals-100);
  color: var(--md-color-neutrals-500);
}
.page-machine-colis .table-armoire-counters .tr-counter--info .td-counter-value--text {
  font-size: 13px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
  word-break: break-word;
  white-space: normal;
}
.page-machine-colis .table-armoire-counters .td-counter-value--truncate {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}
.page-machine-colis .div-armoire-layout .div-armoires-row-casiers {
  flex: 1;
  min-width: 0;
}
.page-machine-colis .div-armoire-columns {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  width: fit-content;
  height: 502px;
}
.page-machine-colis .div-armoire-col {
  display: contents;
}
.page-machine-colis .casier-card {
  width: 115px;
  border-radius: 7px;
  border: 4px solid #fff;
  padding: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: opacity 0.15s, box-shadow 0.15s;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  /* Hauteurs fixes proportionnelles : M=2×S, L=2×M, XL=3×M+1×S */
  /* Couleurs par état */
  /* Header du casier : [colis] [numéro] [maintenance] */
  /* Numéro casier toujours centré */
}
.page-machine-colis .casier-card[data-box-size=S] {
  height: 28px;
}
.page-machine-colis .casier-card[data-box-size=M] {
  height: 56px;
}
.page-machine-colis .casier-card[data-box-size=L] {
  height: 112px;
}
.page-machine-colis .casier-card[data-box-size=XL] {
  height: 196px;
}
.page-machine-colis .casier-card--disponible {
  background: #efeef0;
  color: #000;
}
.page-machine-colis .casier-card--livre {
  background: #65bd89;
  color: #000;
}
.page-machine-colis .casier-card--expire {
  background: #c14039;
  color: #fff;
}
.page-machine-colis .casier-card--depot-client {
  background: #97ccf9;
  color: #000;
}
.page-machine-colis .casier-card--alivrer {
  background: #ccc84f;
  color: #000;
}
.page-machine-colis .casier-card--panne {
  background: #ccc;
  color: #000;
  opacity: 0.6;
}
.page-machine-colis .casier-card--occupe {
  background: #b2b2b2;
  color: #000;
}
.page-machine-colis .casier-card--retire {
  background: #efeef0;
  color: #000;
}
.page-machine-colis .casier-card--collecte {
  background: #efeef0;
  color: #000;
}
.page-machine-colis .casier-card--refuse {
  background: #c14039;
  color: #fff;
}
.page-machine-colis .casier-card .casier-header {
  display: flex;
  align-items: center;
  width: 100%;
}
.page-machine-colis .casier-card .icon-carton {
  width: 13px;
  height: 11px;
  flex-shrink: 0;
}
.page-machine-colis .casier-card .icon-maintenance {
  width: 11px;
  height: 12px;
  flex-shrink: 0;
}
.page-machine-colis .casier-card .casier-number {
  flex: 1;
  text-align: center;
  font-family: "Urbanist", sans-serif;
  font-size: 12px;
  font-weight: 500;
}
.page-machine-colis .screen-placeholder {
  width: 107px;
  height: 105px;
  background: #575757;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px;
}
.page-machine-colis .screen-placeholder .screen-icon {
  width: 22px;
  height: 22px;
  opacity: 0.5;
}
.page-machine-colis .section-vue-tableau {
  overflow-x: auto;
  padding-bottom: 20px;
}
.page-machine-colis .table-casiers {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: "Open Sans", var(--md-font-family), sans-serif;
  font-size: 14px;
  background: #fff;
  border-radius: 4px 4px 0 0;
}
.page-machine-colis .table-casiers .tr-entete {
  background: #fff;
  height: 62px;
}
.page-machine-colis .table-casiers .tr-entete th {
  padding: 12px 16px 12px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  color: #262262;
  vertical-align: middle;
  border-top: 1px solid #f1f1f1;
}
.page-machine-colis .table-casiers .tr-entete th:last-child {
  border-right: 1px solid #f1f1f1;
}
.page-machine-colis .table-casiers .tr-entete th:first-child {
  border-top-left-radius: 4px;
}
.page-machine-colis .table-casiers .tr-entete th:last-child {
  border-top-right-radius: 4px;
}
.page-machine-colis .table-casiers .th-label {
  line-height: 1.3;
}
.page-machine-colis .table-casiers .th-sortable {
  cursor: pointer;
}
.page-machine-colis .table-casiers .th-sortable:hover {
  background: rgba(38, 34, 98, 0.03);
}
.page-machine-colis .table-casiers .span-icone-tri {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 14px;
  margin-left: 8px;
  vertical-align: middle;
}
.page-machine-colis .table-casiers .icon-tri {
  opacity: 0.4;
  transition: opacity 0.15s;
}
.page-machine-colis .table-casiers .th-sortable:hover .icon-tri {
  opacity: 0.7;
}
.page-machine-colis .table-casiers .th-sortable.sort-asc .icon-tri,
.page-machine-colis .table-casiers .th-sortable.sort-desc .icon-tri {
  opacity: 1;
}
.page-machine-colis .table-casiers tbody tr {
  height: 53px;
  background: #fff;
  transition: background 0.15s;
  cursor: pointer;
}
.page-machine-colis .table-casiers tbody tr:hover {
  background: rgba(38, 34, 98, 0.02);
}
.page-machine-colis .table-casiers tbody tr td {
  padding: 14px 12px;
  vertical-align: middle;
  font-weight: 600;
  font-size: 14px;
  color: #3d3d3d;
  border-top: 1px solid #f1f1f1;
  overflow: hidden;
}
.page-machine-colis .table-casiers tbody tr td:last-child {
  border-right: 1px solid #f1f1f1;
}
.page-machine-colis .table-casiers .td-date-event .date-line,
.page-machine-colis .table-casiers .td-date-event .time-line {
  display: block;
  line-height: 1.4;
}
.page-machine-colis .badge-etat {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}
.page-machine-colis .badge-etat--disponible {
  background: #efeef0;
  color: #000;
}
.page-machine-colis .badge-etat--retire {
  background: #efeef0;
  color: #000;
}
.page-machine-colis .badge-etat--collecte {
  background: #efeef0;
  color: #000;
}
.page-machine-colis .badge-etat--livre {
  background: #65bd89;
  color: #000;
}
.page-machine-colis .badge-etat--expire {
  background: #c14039;
  color: #fff;
}
.page-machine-colis .badge-etat--depot-client {
  background: #97ccf9;
  color: #000;
}
.page-machine-colis .badge-etat--alivrer {
  background: #ccc84f;
  color: #000;
}
.page-machine-colis .badge-etat--panne {
  background: #ccc;
  color: #000;
}
.page-machine-colis .badge-etat--occupe {
  background: #b2b2b2;
  color: #000;
}
.page-machine-colis .cards-mobile {
  display: none;
}
.page-machine-colis .card-casier,
.page-machine-colis .card-annonce,
.page-machine-colis .card-event {
  background: #fff;
  border: 1px solid var(--md-color-neutrals-100);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 0.15s, box-shadow 0.15s;
}
.page-machine-colis .card-casier .card-header,
.page-machine-colis .card-annonce .card-header,
.page-machine-colis .card-event .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.page-machine-colis .card-casier .card-body,
.page-machine-colis .card-annonce .card-body,
.page-machine-colis .card-event .card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--md-color-neutrals-100);
  padding-top: 8px;
}
.page-machine-colis .card-casier .card-field,
.page-machine-colis .card-annonce .card-field,
.page-machine-colis .card-event .card-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.page-machine-colis .card-casier .card-field--stacked,
.page-machine-colis .card-annonce .card-field--stacked,
.page-machine-colis .card-event .card-field--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.page-machine-colis .card-casier .card-field--stacked .card-field-value,
.page-machine-colis .card-annonce .card-field--stacked .card-field-value,
.page-machine-colis .card-event .card-field--stacked .card-field-value {
  text-align: left;
}
.page-machine-colis .card-casier .card-field-label,
.page-machine-colis .card-annonce .card-field-label,
.page-machine-colis .card-event .card-field-label {
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-neutrals-350);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.page-machine-colis .card-casier .card-field-value,
.page-machine-colis .card-annonce .card-field-value,
.page-machine-colis .card-event .card-field-value {
  font-family: var(--md-font-family);
  font-size: 13px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
  text-align: right;
  overflow-wrap: anywhere;
  min-width: 0;
}
.page-machine-colis .card-casier .card-field-value.cell-mono,
.page-machine-colis .card-annonce .card-field-value.cell-mono,
.page-machine-colis .card-event .card-field-value.cell-mono {
  font-family: "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 0.3px;
}
.page-machine-colis .card-casier,
.page-machine-colis .card-annonce,
.page-machine-colis .card-event:not(.card-event--readonly) {
  cursor: pointer;
}
.page-machine-colis .card-casier:hover, .page-machine-colis .card-casier:active,
.page-machine-colis .card-annonce:hover,
.page-machine-colis .card-annonce:active,
.page-machine-colis .card-event:not(.card-event--readonly):hover,
.page-machine-colis .card-event:not(.card-event--readonly):active {
  background: rgba(38, 34, 98, 0.02);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.page-machine-colis .card-casier {
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: var(--md-color-neutrals-150);
}
.page-machine-colis .card-casier--livre {
  border-left-color: #65bd89;
}
.page-machine-colis .card-casier--expire, .page-machine-colis .card-casier--refuse {
  border-left-color: #c14039;
}
.page-machine-colis .card-casier--depot-client {
  border-left-color: #97ccf9;
}
.page-machine-colis .card-casier--alivrer {
  border-left-color: #ccc84f;
}
.page-machine-colis .card-casier--panne {
  border-left-color: #ccc;
}
.page-machine-colis .card-casier--occupe {
  border-left-color: #b2b2b2;
}
.page-machine-colis .card-casier .card-casier-numero {
  font-family: var(--md-font-family);
  font-size: 15px;
  font-weight: 700;
  color: var(--md-color-blue-400);
}
.page-machine-colis .card-annonce .card-reference {
  font-size: 13px;
  font-weight: 700;
  color: var(--md-color-blue-400);
  overflow-wrap: anywhere;
  min-width: 0;
}
.page-machine-colis .card-event .card-event-date {
  font-family: var(--md-font-family);
  font-size: 13px;
  font-weight: 700;
  color: var(--md-color-blue-400);
  white-space: nowrap;
}
.page-machine-colis .card-event .card-event-code {
  font-family: var(--md-font-family);
  font-size: 11px;
  font-weight: 600;
  color: var(--md-color-neutrals-500);
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--md-color-neutrals-100);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.page-machine-colis .card-event--incident {
  border-left: 3px solid var(--md-color-red-200);
}
.page-machine-colis .card-event--incident .card-event-code {
  background: rgba(193, 64, 57, 0.1);
  color: var(--md-color-red-200);
}
.page-machine-colis .aside-casier-detail {
  position: fixed;
  top: 0;
  right: 0;
  width: 740px;
  max-width: 100vw;
  height: 100vh;
  z-index: 200;
  display: flex;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  pointer-events: none;
}
.page-machine-colis .aside-casier-detail.open {
  transform: translateX(0);
  pointer-events: auto;
}
.page-machine-colis .panel-overlay-casier {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.page-machine-colis .panel-overlay-casier.open {
  opacity: 1;
  pointer-events: auto;
}
.page-machine-colis .panel-content-casier {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border-radius: 12px 0 0 12px;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}
.page-machine-colis .panel-header-casier {
  display: flex;
  justify-content: flex-end;
  padding: 16px 24px;
}
.page-machine-colis .panel-header-casier .btn-close-panel {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--md-color-neutrals-400);
  padding: 4px;
}
.page-machine-colis .panel-header-casier .btn-close-panel:hover {
  color: var(--md-color-neutrals-500);
}
.page-machine-colis .panel-body-casier {
  display: flex;
  gap: 32px;
  padding: 0 24px 24px;
  flex: 1;
}
.page-machine-colis .panel-section-infos {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-machine-colis .panel-section-infos .section-title {
  font-family: var(--md-font-family);
  font-size: 18px;
  font-weight: 700;
  color: #101828;
  margin: 0 0 4px;
}
.page-machine-colis .panel-section-infos .field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-machine-colis .panel-section-infos .field-label {
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-blue-500);
}
.page-machine-colis .panel-section-infos .field-value {
  padding: 8px 16px;
  border: 1px solid var(--md-color-neutrals-150);
  border-radius: 4px;
  background: var(--md-color-neutrals-50);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  color: #000;
  min-height: 36px;
  display: flex;
  align-items: center;
}
.page-machine-colis .panel-section-timeline {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-machine-colis .panel-section-timeline .section-title {
  font-family: var(--md-font-family);
  font-size: 18px;
  font-weight: 700;
  color: #101828;
  margin: 0 0 4px;
}
.page-machine-colis .timeline-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.page-machine-colis .timeline-item {
  display: flex;
  gap: 16px;
}
.page-machine-colis .timeline-item .timeline-dot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 12px;
}
.page-machine-colis .timeline-item .timeline-dot-col .timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.page-machine-colis .timeline-item .timeline-dot-col .timeline-dot--blue {
  background: #2b7fff;
}
.page-machine-colis .timeline-item .timeline-dot-col .timeline-dot--green {
  background: #00c950;
}
.page-machine-colis .timeline-item .timeline-dot-col .timeline-dot--red {
  background: #c14039;
}
.page-machine-colis .timeline-item .timeline-dot-col .timeline-dot--grey {
  background: #a7a7a7;
}
.page-machine-colis .timeline-item .timeline-dot-col .timeline-line {
  width: 2px;
  flex: 1;
  background: #e5e7eb;
  min-height: 16px;
}
.page-machine-colis .timeline-item .timeline-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
}
.page-machine-colis .timeline-item .timeline-content .timeline-date {
  font-family: var(--md-font-family);
  font-size: 12px;
  color: #99a1af;
}
.page-machine-colis .timeline-item .timeline-content .timeline-label {
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 700;
  color: #101828;
}
.page-machine-colis .timeline-item .timeline-content .timeline-info {
  font-family: var(--md-font-family);
  font-size: 10px;
  color: #99a1af;
}
.page-machine-colis .casiers-empty {
  text-align: center;
  padding: var(--md-spacing-4xl);
  color: var(--md-color-neutrals-350);
  font-size: 14px;
}
.page-machine-colis .section-identifiants-livreur {
  /* -----------------------------------------------
     Responsive ≤ 719px : table transformée en cards.
     Transformation CSS pure (table → block) : le JS
     (reveal/regen) continue à cibler <tr> et ses
     enfants sans modification.
     ----------------------------------------------- */
}
.page-machine-colis .section-identifiants-livreur .p-section-description {
  margin: 0 0 16px;
  font-family: var(--md-font-family);
  font-size: 13px;
  color: #5e5e5e;
  line-height: 1.5;
}
.page-machine-colis .section-identifiants-livreur .table-identifiants-livreur {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--md-font-family);
  font-size: 14px;
  background: #fff;
  border-radius: 4px;
}
.page-machine-colis .section-identifiants-livreur .table-identifiants-livreur thead th {
  text-align: left;
  padding: 12px;
  font-weight: 600;
  font-size: 14px;
  color: #262262;
  border-top: 1px solid #f1f1f1;
  border-bottom: 1px solid #f1f1f1;
  background: #fafafa;
}
.page-machine-colis .section-identifiants-livreur .table-identifiants-livreur tbody td {
  padding: 14px 12px;
  font-weight: 500;
  color: #3d3d3d;
  border-top: 1px solid #f1f1f1;
  vertical-align: middle;
}
.page-machine-colis .section-identifiants-livreur .table-identifiants-livreur .td-identifiant,
.page-machine-colis .section-identifiants-livreur .table-identifiants-livreur .td-password {
  font-family: "Courier New", monospace;
  font-size: 14px;
  letter-spacing: 1px;
}
.page-machine-colis .section-identifiants-livreur .table-identifiants-livreur .td-identifiant {
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-machine-colis .section-identifiants-livreur .table-identifiants-livreur .span-identifiant-masque,
.page-machine-colis .section-identifiants-livreur .table-identifiants-livreur .span-password-masque {
  display: inline-block;
  min-width: 48px;
}
.page-machine-colis .section-identifiants-livreur .btn-outline-small {
  background: transparent;
  color: var(--md-color-blue-300);
  border: 1px solid var(--md-color-blue-300);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.page-machine-colis .section-identifiants-livreur .btn-outline-small:hover {
  background: rgba(38, 34, 98, 0.05);
}
@media (max-width: 719px) {
  .page-machine-colis .section-identifiants-livreur .table-identifiants-livreur {
    display: block;
    border-radius: 0;
    background: transparent;
  }
  .page-machine-colis .section-identifiants-livreur .table-identifiants-livreur thead {
    display: none;
  }
  .page-machine-colis .section-identifiants-livreur .table-identifiants-livreur tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .page-machine-colis .section-identifiants-livreur .table-identifiants-livreur tr {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--md-color-neutrals-100);
    border-left: 3px solid var(--md-color-blue-300);
    border-radius: 6px;
  }
  .page-machine-colis .section-identifiants-livreur .table-identifiants-livreur td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    border: none;
    font-size: 13px;
    min-height: 24px;
  }
  .page-machine-colis .section-identifiants-livreur .table-identifiants-livreur td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-family: var(--md-font-family);
    font-size: 12px;
    font-weight: 600;
    color: var(--md-color-neutrals-350);
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  .page-machine-colis .section-identifiants-livreur .table-identifiants-livreur .td-identifiant {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
  }
  .page-machine-colis .section-identifiants-livreur .table-identifiants-livreur .td-identifiant .span-identifiant-masque {
    margin-left: auto;
    text-align: right;
    overflow-wrap: anywhere;
  }
  .page-machine-colis .section-identifiants-livreur .table-identifiants-livreur tr > td:last-child::before {
    display: none;
  }
  .page-machine-colis .section-identifiants-livreur .table-identifiants-livreur tr > td:last-child .button-regenerer-identifiants {
    width: 100%;
    padding: 10px 16px;
    margin-top: 4px;
  }
}
.page-machine-colis.page-machine-informations-generales .scrollable-content {
  padding-bottom: 80px;
}
@media (max-width: 768px) {
  .page-machine-colis {
    /* Compteurs empilés au-dessus des armoires */
    /* Tableaux compteurs : pleine largeur gauche→droite, marge
       héritée du padding de .section-main-content (évite de
       toucher les bords de l'écran). */
    /* ===========================================
       Armoires : carrousel horizontal (1 armoire / écran)
       Structure interne de chaque armoire (2 colonnes
       casiers gauche/droite) conservée identique au
       desktop. Pattern calqué sur la vue armoire de
       l'onglet Armoires.
       =========================================== */
    /* Dots carrousel (injectés par JS dans .section-vue-armoire) */
  }
  .page-machine-colis .div-toggle-vue-casiers .toggle-label {
    font-size: 11px;
  }
  .page-machine-colis .div-search-casiers .input-search-casiers {
    width: 100%;
  }
  .page-machine-colis .div-armoire-layout {
    flex-direction: column;
  }
  .page-machine-colis .div-counters-tables {
    width: 100%;
    align-self: stretch;
  }
  .page-machine-colis .table-armoire-counters {
    width: 100%;
    box-sizing: border-box;
  }
  .page-machine-colis .div-armoires-row-casiers {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 0;
    width: 100%;
    position: relative;
  }
  .page-machine-colis .div-armoire-group {
    flex: 0 0 100%;
    min-width: 100%;
    will-change: transform;
    transition: transform 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .page-machine-colis .carousel-dots {
    display: flex;
    justify-content: center;
    gap: var(--md-spacing-sm);
    padding: var(--md-spacing-md) 0;
    flex-shrink: 0;
  }
  .page-machine-colis .carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--md-color-neutrals-150);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
  }
  .page-machine-colis .carousel-dot::after {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
  }
  .page-machine-colis .carousel-dot.active {
    background: var(--md-color-blue-300);
  }
  .page-machine-colis .aside-casier-detail {
    width: 100vw;
  }
  .page-machine-colis .panel-body-casier {
    flex-direction: column;
  }
  .page-machine-colis .button-exporter-casiers {
    padding: 6px 12px;
    font-size: 12px;
  }
}
@media (max-width: 719px) {
  .page-machine-colis .section-vue-tableau,
  .page-machine-colis .section-vue-tableau-annonces,
  .page-machine-colis .section-vue-tableau-evenements-colis,
  .page-machine-colis .section-vue-tableau-evenements-consigne,
  .page-machine-colis .section-vue-tableau-incidents {
    overflow-x: visible;
  }
  .page-machine-colis .table-casiers.table-desktop,
  .page-machine-colis .table-annonces.table-desktop,
  .page-machine-colis .table-evenements-colis.table-desktop,
  .page-machine-colis .table-evenements-consigne.table-desktop,
  .page-machine-colis .table-incidents.table-desktop {
    display: none !important;
  }
  .page-machine-colis .cards-mobile {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
.page-machine-colis .carousel-dots {
  display: none;
}

/* ===========================================
   Modals "Identifiants livreur" — top-level
   Placées hors du wrapper .page-machine-colis car les éléments DOM
   correspondants sont soeurs de la page (position:fixed, z-index haut).
   =========================================== */
.popup-confirmer-regen,
.popup-affichage-regen {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  z-index: 101;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 360px;
  max-width: 480px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.popup-confirmer-regen.hidden,
.popup-affichage-regen.hidden {
  display: none;
}
.popup-confirmer-regen .popup-header,
.popup-affichage-regen .popup-header {
  display: flex;
  justify-content: flex-end;
}
.popup-confirmer-regen .button-fermer-modal,
.popup-affichage-regen .button-fermer-modal {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: #1e1e1e;
}
.popup-confirmer-regen .button-fermer-modal svg,
.popup-affichage-regen .button-fermer-modal svg {
  width: 10px;
  height: 10px;
}
.popup-confirmer-regen .button-fermer-modal:hover,
.popup-affichage-regen .button-fermer-modal:hover {
  opacity: 0.7;
}
.popup-confirmer-regen .div-modal-content,
.popup-affichage-regen .div-modal-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.popup-confirmer-regen .modal-title,
.popup-affichage-regen .modal-title {
  margin: 0;
  font-family: var(--md-font-family);
  font-size: 18px;
  font-weight: 700;
  color: #262262;
}
.popup-confirmer-regen .modal-question,
.popup-affichage-regen .modal-question {
  margin: 0;
  font-family: var(--md-font-family);
  font-size: 16px;
  font-weight: 600;
  color: #3d3d3d;
  text-align: center;
}
.popup-confirmer-regen .modal-warning,
.popup-affichage-regen .modal-warning {
  margin: 0;
  padding: 12px 14px;
  background: rgba(255, 165, 0, 0.08);
  border-left: 3px solid #c07800;
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 13px;
  line-height: 1.45;
  color: #3d3d3d;
}
.popup-confirmer-regen .div-modal-actions,
.popup-affichage-regen .div-modal-actions {
  display: flex;
  gap: 10px;
}
.popup-confirmer-regen .div-modal-actions button,
.popup-affichage-regen .div-modal-actions button {
  flex: 1;
  padding: 10px 16px;
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}
.popup-confirmer-regen .div-credentials-display,
.popup-affichage-regen .div-credentials-display {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.popup-confirmer-regen .div-credential-item,
.popup-affichage-regen .div-credential-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.popup-confirmer-regen .div-credential-item label,
.popup-affichage-regen .div-credential-item label {
  font-family: var(--md-font-family);
  font-size: 12px;
  font-weight: 600;
  color: #5e5e5e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.popup-confirmer-regen .div-credential-item .div-credential-row,
.popup-affichage-regen .div-credential-item .div-credential-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.popup-confirmer-regen .div-credential-item .credential-value,
.popup-affichage-regen .div-credential-item .credential-value {
  flex: 1;
  display: block;
  padding: 10px 14px;
  background: #f5f5f7;
  border: 1px solid #e5e5ea;
  border-radius: 4px;
  font-family: "Courier New", monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #262262;
  user-select: all;
}
.popup-confirmer-regen .div-credential-item .button-copier-credential,
.popup-affichage-regen .div-credential-item .button-copier-credential {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: #fff;
  color: var(--md-color-blue-300);
  border: 1px solid var(--md-color-blue-300);
  border-radius: 4px;
  font-family: var(--md-font-family);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.popup-confirmer-regen .div-credential-item .button-copier-credential .icon-copier,
.popup-affichage-regen .div-credential-item .button-copier-credential .icon-copier {
  width: 14px;
  height: 14px;
}
.popup-confirmer-regen .div-credential-item .button-copier-credential:hover,
.popup-affichage-regen .div-credential-item .button-copier-credential:hover {
  background: rgba(38, 34, 98, 0.06);
}
.popup-confirmer-regen .div-credential-item .button-copier-credential.copied,
.popup-affichage-regen .div-credential-item .button-copier-credential.copied {
  background: rgba(98, 186, 135, 0.12);
  color: var(--md-color-green-400);
  border-color: var(--md-color-green-400);
}

/* ===========================================
   CATALOGUE PAGE - STYLES (Prototype validé)
   Version: 2.4.0
   Last modified: 2026-01-27
   =========================================== */
/* CSS Variables - identiques au prototype */
:root {
  /* Blues */
  --blue-500: #110f2c;
  --blue-450: #161338;
  --blue-400: #1b1846;
  --blue-300: #262262;
  --blue-200: #201c52;
  --blue-100: #4d4a7e;
  /* Greens */
  --green-500: #22412f;
  --green-450: #213e2d;
  --green-200: #62ba87;
  --green-150: #8edbae;
  --green-100: #58a77a;
  --green-50: #eff8f3;
  /* Reds */
  --red-200: #c14039;
  --red-100: #f6e2e1;
  /* Neutrals */
  --neutral-500: #070708;
  --neutral-450: #3d3d3d;
  --neutral-400: #1e1e1e;
  --neutral-350: #828282;
  --neutral-300: #a7a7a7;
  --neutral-150: #ddd;
  --neutral-100: #f1f1f1;
  --neutral-50: #ffffff;
  /* Shadows */
  --shadow-popup: 0 4px 20px rgba(0, 0, 0, 0.15);
  /* Font */
  --font-family: "Open Sans", sans-serif;
}

/* Hidden class */
.hidden {
  display: none !important;
}

/* ===========================================
   PAGE LAYOUT - Adapté pour bandeau
   =========================================== */
.body-catalogue {
  margin-top: 70px;
  height: calc(100svh - 70px);
  width: 100%;
  background: linear-gradient(131.32deg, #f8f9fa 0%, #f5f4ff 100%);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  position: relative;
}
.body-catalogue svg.svg-fond {
  position: absolute;
  right: -18vh;
  bottom: -18vh;
  fill: rgba(38, 34, 98, 0.03);
  z-index: 0;
  width: auto;
  height: 90vh;
  pointer-events: none;
}

@media (min-width: 720px) {
  .body-catalogue {
    margin-top: 0;
    height: 100svh;
  }
}
/* ===========================================
   SECTION TITLE (Header)
   =========================================== */
.section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--neutral-100);
}

.page-title {
  font-size: 24px;
  font-weight: 700;
  color: #262262;
  line-height: normal;
}

.button-sous-catalogue {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid var(--blue-400);
  border-radius: 4px;
  background: transparent;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-450);
  cursor: pointer;
  transition: background-color;
  transition: 0.4s;
}

.button-sous-catalogue:hover {
  border: 1px solid var(--green-200);
  color: var(--green-200);
}

.section-input {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  min-width: 200px;
}

.input-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 397px;
  max-width: 100%;
  height: 40px;
  padding: 12px 16px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-100);
  border-radius: 4px;
}

.input-search .icon-search {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.input-search input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-400);
  background: transparent;
}

.input-search input::placeholder {
  color: var(--neutral-350);
}

/* ===========================================
   SECTION BUTTON
   =========================================== */
.section-button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
}

.products-count-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 0 8px 0;
}

.products-count {
  font-size: 12px;
  color: var(--neutral-350);
  font-weight: 400;
  margin: 0 20px;
}

/* "Tout sélectionner" en mode carte : masqué sur desktop (remplacé par la checkbox
   d'en-tête du tableau), affiché uniquement en dessous de 900px (cf. media queries) */
.mobile-select-all {
  display: none;
}

/* Bouton d'action groupée "Supprimer la sélection", visible uniquement si des produits sont cochés */
.button-supprimer-selection {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--red-200);
  border: none;
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-50);
  cursor: pointer;
}

.button-supprimer-selection:hover {
  background: #a83530;
}

.button-supprimer-selection svg {
  width: 16px;
  height: 16px;
}
.button-supprimer-selection svg path {
  stroke: var(--neutral-50);
}

.dropdown-wrapper {
  position: relative;
}

.dropdown-select-categorie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 220px;
  padding: 8px 16px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-100);
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-300);
  cursor: pointer;
  transition: border-color 0.4s;
}

.dropdown-select-categorie:hover {
  border-color: var(--neutral-150);
}

.dropdown-select-categorie .icon-chevron-down {
  width: 10px;
  height: 6px;
  transition: transform 0.2s ease;
}

/* Rotation du chevron quand ouvert */
.dropdown-select-categorie.open .icon-chevron-down {
  transform: rotate(180deg);
}

/* Dropdown catégories */
.dropdown-categorie-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 320px; /* ~8 items */
  overflow-y: auto;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-100);
  border-radius: 4px;
  box-shadow: var(--shadow-popup);
  z-index: 100;
  /* Animation */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.dropdown-categorie-list.hidden {
  display: block !important;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  visibility: hidden;
}

/* Input de recherche dans le dropdown catégories */
.dropdown-search-wrapper {
  position: sticky;
  top: 0;
  padding: 8px;
  background: var(--neutral-50);
  border-bottom: 1px solid var(--neutral-100);
  z-index: 1;
}

.dropdown-search-input {
  width: 100%;
  height: 32px;
  padding: 6px 12px;
  padding-left: 32px;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-150);
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: 13px;
  color: var(--neutral-400);
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
.dropdown-search-input:focus {
  border-color: var(--blue-300);
  background: var(--neutral-50);
}
.dropdown-search-input::placeholder {
  color: var(--neutral-350);
}

.dropdown-search-wrapper {
  position: relative;
}
.dropdown-search-wrapper .icon-search {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  pointer-events: none;
}

/* Liste des items dans le dropdown */
.dropdown-items-list {
  max-height: 250px;
}

/* Message quand aucun résultat */
.dropdown-no-result {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--neutral-350);
  text-align: center;
  font-style: italic;
}

.dropdown-item {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-400);
  cursor: pointer;
  transition: background-color 0.4s, color 0.4s;
}

.dropdown-item:hover {
  background-color: var(--green-150);
  color: var(--green-500);
}

.dropdown-item:first-child {
  border-radius: 4px 4px 0 0;
}

.dropdown-item:last-child {
  border-radius: 0 0 4px 4px;
}

/* Button nouveau produit */
.button-nouveau-produit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--blue-300);
  border: none;
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-50);
  cursor: pointer;
  transition: background-color 0.4s;
}

.button-nouveau-produit:hover {
  background: var(--blue-400);
}

.button-nouveau-produit .icon-add {
  width: 10px;
  height: 10px;
}

/* Button importer/exporter */
.button-importer-exporter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  min-width: 88px;
  background: var(--green-200);
  border: none;
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--green-450);
  cursor: pointer;
  transition: background-color 0.4s;
}

.button-importer-exporter:hover {
  background: var(--green-100);
}

.button-importer-exporter .icon-export {
  width: 12px;
  height: 11px;
}

/* Menu importer/exporter */
.liste-importer-exporter {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-100);
  border-radius: 4px;
  box-shadow: var(--shadow-popup);
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.liste-importer-exporter .menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 42px;
  padding: 8px 16px;
  background: var(--neutral-50);
  border: none;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-400);
  cursor: pointer;
  transition: background-color 0.4s, color 0.4s;
}

.liste-importer-exporter .menu-item:hover {
  background-color: var(--green-150);
  color: var(--green-500);
}

.liste-importer-exporter .menu-item:first-child {
  border-radius: 4px 4px 0 0;
}

.liste-importer-exporter .menu-item:last-child {
  border-radius: 0 0 4px 4px;
}

/* ===========================================
   TABLE CATALOGUE
   =========================================== */
.table-catalogue {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  z-index: 1;
}

.table-header {
  display: flex;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-100);
  border-radius: 4px 4px 0 0;
  flex-shrink: 0;
}

.th {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-300);
  text-align: center;
  overflow: hidden;
}

.th-img,
.th-id,
.th-cp,
.th-dlv,
.th-prix,
.th-casiers,
.th-action {
  flex: 1;
  min-height: 47px;
}

.th-checkbox,
.td-checkbox {
  flex: 0 0 44px;
}

.th-nom-produit {
  width: 279px;
  flex-shrink: 0;
}

/* En-têtes triables */
.th-sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}
.th-sortable:hover {
  background-color: var(--neutral-100);
}

.th-sortable .icon-tri {
  width: 15px;
  height: 11px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.th-sortable.sort-asc .icon-tri path:first-child {
  stroke: var(--blue-300);
  stroke-width: 1.5;
}

.th-sortable.sort-asc .icon-tri path:last-child {
  opacity: 0.3;
}

.th-sortable.sort-desc .icon-tri path:first-child {
  opacity: 0.3;
}

.th-sortable.sort-desc .icon-tri path:last-child {
  stroke: var(--blue-300);
  stroke-width: 1.5;
}

.table-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.table-row {
  display: flex;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-100);
  border-top: none;
}

.table-row:last-child {
  border-radius: 0 0 4px 4px;
}

.td {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-450);
  text-align: center;
  overflow: hidden;
}

.td-img,
.td-id,
.td-cp,
.td-dlv,
.td-prix,
.td-casiers,
.td-action {
  flex: 1;
}

.td-nom-produit {
  width: 279px;
  flex-shrink: 0;
  justify-content: center;
}

/* Colonne Casiers : tronque avec ... et tooltip natif via attribut title
   min-width: 0 est indispensable pour qu'un flex item puisse etre plus petit
   que son contenu et declencher l'ellipsis */
.th-casiers,
.td-casiers {
  min-width: 0;
}

.td-casiers .casiers-text {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.prix-poids {
  color: var(--green-200);
}

.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: var(--neutral-100);
  border-radius: 4px;
}

.img-placeholder svg {
  width: 28px;
  height: 28px;
}

.product-img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 4px;
}

.badge-id {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: rgba(98, 186, 135, 0.1);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-450);
}

.action-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.button-edit,
.button-supprimer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.4s;
}

.button-edit:hover {
  background: rgba(77, 74, 126, 0.1);
}

.button-supprimer:hover {
  background: rgba(193, 64, 57, 0.1);
}

.button-edit svg,
.button-supprimer svg {
  width: 20px;
  height: 20px;
}

/* ===========================================
   OVERLAY
   =========================================== */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
}

/* ===========================================
   POPUP STYLES
   =========================================== */
/* Common popup styles */
.popup-edition-creation-produit,
.popup-supprimer-produit,
.popup-supprimer-groupe,
.popup-modifier-produit {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--neutral-50);
  border-radius: 8px;
  box-shadow: var(--shadow-popup);
  z-index: 300;
  overflow: hidden;
}

.popup-header {
  display: flex;
  justify-content: flex-end;
}

.button-close-popup {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-400);
  cursor: pointer;
  padding: 16px;
}

.button-close-popup:hover {
  opacity: 0.7;
}

.icon-close {
  width: 10px;
  height: 10px;
}

.popup-content {
  padding: 0 24px;
}

.popup-content.centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
}

.popup-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px 24px;
}

/* ===========================================
   POPUP EDITION/CREATION PRODUIT
   =========================================== */
.popup-edition-creation-produit {
  width: 557px;
  height: 100svh;
  /* Override center positioning - align to right */
  top: 0;
  left: auto;
  right: 0;
  transform: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.popup-edition-creation-produit .section-fiche-interface {
  flex: 1 0 auto;
}
.popup-edition-creation-produit .popup-footer {
  justify-content: center;
  flex-shrink: 0;
}

.popup-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--blue-300);
  margin-bottom: 16px;
  margin-right: auto;
}

.form-top {
  display: flex;
  gap: 84px;
  width: 100%;
}

.form-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
@media screen and (max-width: 900px) {
  .form-image {
    transform: none;
  }
}

.img-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 162px;
  height: 162px;
  background: var(--neutral-100);
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.4s;
}
.img-preview:hover {
  opacity: 0.8;
}

.img-preview svg {
  width: 41px;
  height: 41px;
}

.img-preview .popup-product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.img-actions {
  display: flex;
  gap: 8px;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

.form-fields-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-500);
}
.form-group label .required {
  color: #c14039;
  margin-left: 2px;
}

.product-id-label {
  display: none;
  margin-left: auto;
  font-size: 12px;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
@media screen and (max-width: 719px) {
  .product-id-label {
    display: block;
  }
}

.input-field {
  width: 100%;
  height: 36px;
  padding: 8px 12px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-150);
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: 14px;
  color: var(--neutral-400);
  outline: none;
  transition: border-color 0.4s;
}

.input-field:focus {
  border-color: var(--blue-300);
}

.textarea-field {
  height: 109px;
  resize: vertical;
}

.select-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 8px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-150);
  border-radius: 4px;
  cursor: pointer;
}

.select-field span {
  font-size: 12px;
  font-weight: 400;
  color: var(--neutral-400);
}

.select-placeholder {
  color: var(--neutral-400) !important;
}

/* Styles pour les champs désactivés (mode lecture seule) */
.input-field:disabled,
.input-field.input-disabled {
  background-color: var(--neutral-100);
  color: var(--neutral-350);
}

.select-field.select-disabled-readonly {
  background-color: var(--neutral-100);
}

.select-field.select-disabled-readonly span {
  color: var(--neutral-350);
}

.icon-chevron {
  width: 10px;
  height: 6px;
  transition: transform 0.2s ease;
}

.dropdown-open .icon-chevron,
.select-field.open .icon-chevron {
  transform: rotate(180deg);
}

.select-disabled {
  background: var(--red-100);
  border-color: var(--red-200);
}

.select-disabled span {
  font-weight: 600;
  color: var(--red-200);
}

.select-enabled {
  background: var(--green-50);
  border-color: var(--green-200);
}

.select-enabled span {
  font-weight: 600;
  color: var(--green-200);
}

.section-prix {
  padding: 12px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-row {
  display: flex;
  gap: 16px;
}

.w-192 {
  width: 47%;
  flex-shrink: 0;
}

.flex-1 {
  flex: 1;
}

.w-auto {
  width: auto;
  flex-shrink: 0;
}

.input-small {
  width: 80px;
}

/* Dropdown dans le popup */
.popup-dropdown {
  position: relative;
}

.popup-dropdown .select-field {
  cursor: pointer;
}

.popup-dropdown .dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-150);
  border-radius: 4px;
  box-shadow: var(--shadow-popup);
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
}

.popup-dropdown .dropdown-item {
  padding: 10px 12px;
  font-size: 14px;
  color: var(--neutral-400);
  cursor: pointer;
}

.popup-dropdown .dropdown-item:hover {
  background: var(--green-100);
  color: var(--green-500);
}

.section-fiche-interface {
  padding: 12px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}
.section-fiche-interface > .form-group:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.section-fiche-interface > .form-group:last-child .textarea-field {
  min-height: 40px;
  height: auto;
  resize: vertical;
  flex: none;
}

.section-subtitle {
  font-size: 16px;
  font-weight: 700;
  color: var(--blue-500);
}

.button-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  min-width: 88px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--blue-300);
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-300);
  cursor: pointer;
  transition: 0.4s;
}

.button-secondary:hover {
  border: 1px solid var(--green-200);
  color: var(--green-200);
}

.button-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  min-width: 88px;
  padding: 8px 16px;
  background: var(--green-200);
  border: none;
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--green-450);
  cursor: pointer;
  transition: background-color 0.4s;
}

.button-primary:hover {
  background: var(--green-100);
}

/* ===========================================
   POPUP SUPPRIMER
   =========================================== */
.popup-supprimer-produit,
.popup-supprimer-groupe {
  width: 388px;
  min-width: 337px;
  padding: 24px;
}

.popup-supprimer-produit .popup-content,
.popup-supprimer-groupe .popup-content {
  padding: 0;
}

.confirm-message {
  font-size: 17px;
  font-weight: 600;
  color: var(--neutral-450);
  text-align: center;
  max-width: 240px;
}

.button-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.button-confirm-green {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  min-width: 88px;
  padding: 8px 16px;
  background: var(--green-200);
  border: none;
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--green-500);
  cursor: pointer;
  transition: background-color 0.4s;
}

.button-confirm-green:hover {
  background: var(--green-100);
}

.button-confirm-red {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  min-width: 88px;
  padding: 8px 16px;
  background: var(--red-200);
  border: none;
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-50);
  cursor: pointer;
  transition: background-color 0.4s;
}

.button-confirm-red:hover {
  background: #a83530;
}

/* ===========================================
   POPUP MODIFIER (Sélection machines)
   =========================================== */
.popup-modifier-produit {
  width: 388px;
  min-width: 337px;
  max-width: 550px;
}

.popup-modifier-produit .popup-content {
  gap: 20px;
}

.checkmark-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkmark-icon {
  width: 44px;
  height: 44px;
}

.popup-success-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--neutral-500);
}

.popup-success-text {
  font-size: 16px;
  font-weight: 400;
  color: var(--neutral-500);
}

.liste-machine-selection {
  width: 100%;
  max-height: 133px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 17px;
  cursor: pointer;
}

.checkbox-item input[type=checkbox] {
  display: none;
}

.checkbox-custom {
  width: 16px;
  height: 16px;
  border: 1px solid var(--neutral-300);
  border-radius: 4px;
  background: transparent;
  position: relative;
  flex-shrink: 0;
  transition: all 0.4s;
}

.checkbox-item input[type=checkbox]:checked + .checkbox-custom {
  background: var(--blue-300);
  border-color: var(--blue-300);
}

.checkbox-item input[type=checkbox]:checked + .checkbox-custom::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
}

.checkbox-label {
  flex: 1;
  font-size: 14px;
  font-weight: 400;
  color: var(--neutral-450);
  text-align: left;
}

.popup-modifier-produit .popup-footer {
  gap: 20px;
}

.popup-modifier-produit .button-secondary {
  font-size: 14px;
}

.popup-modifier-produit .button-primary {
  flex: 1;
  font-size: 14px;
}

/* ===========================================
   EXPORT LOADER
   =========================================== */
#export-loader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

#export-loader.visible {
  display: flex;
}

.export-loader-content {
  background: white;
  padding: 40px 50px;
  border-radius: 12px;
  text-align: center;
  box-shadow: var(--shadow-popup);
}

.export-loader-content p {
  margin: 20px 0 0 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--neutral-450);
}

.export-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--neutral-150);
  border-top-color: var(--green-450);
  border-radius: 50%;
  margin: 0 auto;
  animation: export-spin 1s linear infinite;
}

@keyframes export-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ===========================================
   IMPORT LOADER & RESULT MODAL
   =========================================== */
#import-loader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

#import-loader.visible {
  display: flex;
}

#import-result-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

#import-result-modal.visible {
  display: flex;
}

.import-result-content {
  background: white;
  border-radius: 12px;
  box-shadow: var(--shadow-popup);
  min-width: 400px;
  max-width: 500px;
  max-height: 80svh;
  display: flex;
  flex-direction: column;
}

.import-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--neutral-150);
}

.import-result-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-450);
}

.import-result-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--neutral-350);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.import-result-close:hover {
  color: var(--neutral-450);
}

.import-result-body {
  padding: 24px;
  overflow-y: auto;
}

.import-success p {
  margin: 8px 0;
  font-size: 15px;
  color: var(--neutral-450);
}

.import-success strong {
  color: var(--green-450);
}

.import-errors {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--neutral-150);
}

.import-errors p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--red-200);
}

.import-errors ul {
  margin: 0;
  padding-left: 20px;
  max-height: 150px;
  overflow-y: auto;
}

.import-errors li {
  font-size: 13px;
  color: var(--neutral-450);
  margin: 4px 0;
}

.import-error {
  text-align: center;
}

.import-error p {
  color: var(--red-200);
  font-size: 15px;
}

.import-reload-notice {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--neutral-150);
  font-size: 13px;
  color: var(--neutral-350);
  font-style: italic;
  text-align: center;
}

.import-result-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--neutral-150);
  display: flex;
  justify-content: flex-end;
}

.import-result-footer .button-primary {
  min-width: 100px;
}

/* ===========================================
   RESPONSIVE TABLETTE PORTRAIT - Catalogue
   Breakpoint : max-width: 900px
   Cards au lieu du tableau
   =========================================== */
@media screen and (max-width: 900px) {
  /* ===== PAGE LAYOUT TABLETTE ===== */
  .body-catalogue {
    overflow: hidden;
    height: 100svh;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .body-catalogue svg.svg-fond {
    right: -190px;
    bottom: -50px;
    height: 480px;
    width: 550px;
  }
  /* ===== SECTION TITLE - Tablette ===== */
  .section-title {
    padding-bottom: 16px;
    flex-shrink: 0;
  }
  /* ===== SECTION BUTTON - Tablette ===== */
  .section-button {
    padding: 16px 0;
    flex-shrink: 0;
  }
  /* ===== TABLE HEADER - Masqué sur tablette/mobile ===== */
  .table-header {
    display: none;
  }
  /* ===== "Tout sélectionner" - Remplace la checkbox d'en-tête masquée ===== */
  .mobile-select-all {
    display: flex;
    gap: 8px;
  }
  .mobile-select-all .checkbox-label {
    font-size: 13px;
  }
  /* ===== TABLE CATALOGUE - Container pour les cards ===== */
  .table-catalogue {
    padding: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .table-body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 20px;
    /* Cacher scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .table-body::-webkit-scrollbar {
    display: none;
  }
  /* ===========================================
     POPUP EDITION - Responsive tablette portrait
     Garde la même largeur que desktop (468px)
     =========================================== */
  .popup-edition-creation-produit .popup-footer {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .popup-edition-creation-produit .popup-footer .button-secondary,
  .popup-edition-creation-produit .popup-footer .button-primary {
    flex: 1;
    min-width: 0;
  }
  /* Afficher le bouton dupliquer sur tablette (si pas en mode création via JS) */
  .popup-edition-creation-produit .popup-footer .button-secondary[data-name=button-dupliquer] {
    display: flex;
  }
  .popup-edition-creation-produit .popup-footer .button-secondary[data-name=button-dupliquer].hidden {
    display: none;
  }
  /* Masquer le bouton Annuler sur tablette */
  .popup-edition-creation-produit .popup-footer .button-annuler {
    display: none;
  }
  /* ===========================================
     POPUP SUPPRESSION - Responsive tablette
     =========================================== */
  .popup-supprimer-produit,
  .popup-supprimer-groupe {
    width: 90%;
    max-width: 380px;
  }
  .popup-supprimer-produit .button-row,
  .popup-supprimer-groupe .button-row {
    flex-direction: column;
    gap: 10px;
  }
  .popup-supprimer-produit .button-confirm-green,
  .popup-supprimer-produit .button-confirm-red,
  .popup-supprimer-groupe .button-confirm-green,
  .popup-supprimer-groupe .button-confirm-red {
    width: 100%;
  }
  /* ===========================================
     POPUP CHOIX MACHINES - Responsive tablette
     =========================================== */
  .popup-modifier-produit {
    max-height: 80svh;
  }
  .popup-modifier-produit .popup-content {
    overflow-y: auto;
  }
  .popup-modifier-produit .liste-machine-selection {
    max-height: 200px;
    overflow-y: auto;
  }
  /* ===========================================
     CARDS PRODUIT - Tablette/Mobile
     =========================================== */
  .mobile-product-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--neutral-50);
    border: 1px solid var(--neutral-100);
    border-radius: 8px;
    padding: 14px 12px;
    min-height: 220px;
    height: auto;
    flex-shrink: 0;
  }
  /* Header : Checkbox (optionnelle) + Image + Badge ID */
  .mobile-card-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
  }
  .mobile-card-header .badge-id {
    margin-left: auto;
  }
  .mobile-card-checkbox {
    flex-shrink: 0;
  }
  .mobile-card-image {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
  }
  .mobile-card-image .product-img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 4px;
  }
  .mobile-card-image .img-placeholder {
    width: 54px;
    height: 54px;
  }
  /* Nom du produit */
  .mobile-card-name {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    line-height: normal;
  }
  /* Détails : Code, DLV, Prix */
  .mobile-card-details {
    display: flex;
    gap: 10px;
    width: 100%;
  }
  .mobile-card-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .mobile-card-detail .detail-label {
    font-size: 14px;
    font-weight: 600;
    color: #000;
  }
  .mobile-card-detail .detail-value {
    font-size: 14px;
    font-weight: 400;
    color: var(--neutral-450);
  }
  .mobile-card-detail .detail-value.prix-poids {
    color: var(--green-200);
  }
  /* Séparateur avant actions */
  .mobile-card-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--neutral-100);
  }
}
/* ===========================================
   RESPONSIVE MOBILE - Catalogue
   Breakpoint : max-width: 719px
   UI spécifique mobile (bandeau, popups plein écran)
   =========================================== */
@media screen and (max-width: 719px) {
  /* ===== PAGE LAYOUT ===== */
  .body-catalogue {
    padding: 0;
    gap: 12px;
    overflow-y: auto;
    margin-top: 0;
    height: 100svh;
  }
  .body-catalogue svg.svg-fond {
    right: -150px;
    bottom: -30px;
    height: 380px;
    width: 450px;
  }
  /* ===== CARDS - Override pour mobile (1 colonne, page scrolle) ===== */
  .table-body {
    grid-template-columns: 1fr;
    overflow: visible;
    flex: none;
  }
  .table-catalogue {
    overflow: visible;
    flex: none;
    padding: 0 20px 20px 20px;
  }
  .mobile-product-card {
    min-height: auto;
    flex-shrink: 0;
  }
  /* ===== BANDEAU TOP MOBILE ===== */
  .body-catalogue::before {
    content: "Catalogue";
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100svw;
    height: 72px;
    min-height: 72px;
    padding-left: 80px;
    padding-top: 8px;
    background: var(--neutral-50);
    border-radius: 0 0 8px 8px;
    z-index: 3;
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #262262;
    line-height: normal;
    box-sizing: border-box;
  }
  /* Espace pour le bandeau fixe + masquer scrollbar */
  .body-catalogue {
    padding-top: 72px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .body-catalogue::-webkit-scrollbar {
    display: none;
  }
  /* ===== SECTION TITLE - Réorganisation mobile ===== */
  .section-title {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 20px 0 20px;
    border-bottom: none;
  }
  .page-title {
    display: none;
  }
  .section-input {
    width: 100%;
    min-width: 100%;
  }
  .input-search {
    width: 100%;
    max-width: 100%;
    height: 43px;
  }
  /* Bouton sous-catalogue : repositionné dans le flux mobile */
  .button-sous-catalogue {
    order: 2;
    width: 100%;
    box-sizing: border-box;
  }
  /* ===== SECTION BOUTONS - Bloc avec fond blanc ===== */
  .section-button {
    flex-direction: column;
    padding: 12px;
    margin: 0 20px;
    gap: 12px;
    width: calc(100% - 40px);
    box-sizing: border-box;
    background: var(--neutral-50);
    border: 1px solid var(--neutral-100);
    border-radius: 8px;
  }
  .dropdown-wrapper {
    width: 100%;
  }
  .dropdown-select-categorie {
    width: 100%;
    box-sizing: border-box;
  }
  .button-nouveau-produit {
    width: 100%;
    box-sizing: border-box;
  }
  .button-importer-exporter {
    width: 100%;
    box-sizing: border-box;
  }
  .button-supprimer-selection {
    width: 100%;
    box-sizing: border-box;
  }
  /* ===== COMPTEUR - Ajustement mobile ===== */
  .products-count-wrapper {
    justify-content: space-between;
    padding: 0 20px 8px 20px;
  }
  .products-count {
    margin: 0;
  }
  /* ===========================================
     POPUP EDITION - Plein écran mobile
     =========================================== */
  .popup-edition-creation-produit {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    border-radius: 0;
    background: linear-gradient(109.39deg, #f8f9fa 0%, #f5f4ff 100.57%);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 74px; /* Espace pour le footer fixe */
    /* Cacher scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .popup-edition-creation-produit::-webkit-scrollbar {
    display: none;
  }
  /* Header style bandeau top */
  .popup-edition-creation-produit .popup-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 72px;
    min-height: 72px;
    padding: 16px 20px;
    background: var(--neutral-50);
    border-radius: 0 0 8px 8px;
    z-index: 4;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  .popup-edition-creation-produit .popup-header .button-close-popup {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 20px;
    padding: 0;
    background: none;
    border: none;
  }
  /* Cacher le texte "Fermer" et afficher un titre */
  .popup-edition-creation-produit .popup-header .button-close-popup span {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #161338;
  }
  /* Zone scrollable du contenu */
  .popup-edition-creation-produit .popup-content,
  .popup-edition-creation-produit .section-prix,
  .popup-edition-creation-produit .section-fiche-interface {
    background: var(--neutral-50);
    border-left: 1px solid var(--neutral-100);
    border-right: 1px solid var(--neutral-100);
  }
  .popup-edition-creation-produit .popup-content {
    padding: 12px 16px;
    margin: 12px 20px 0;
    border-top: 1px solid var(--neutral-100);
    border-radius: 8px 8px 0 0;
  }
  .popup-edition-creation-produit .section-prix {
    padding: 12px 16px;
    margin: 0 20px;
  }
  .popup-edition-creation-produit .section-fiche-interface {
    padding: 12px 16px 16px;
    margin: 0 20px;
    border-bottom: 1px solid var(--neutral-100);
    border-radius: 0 0 8px 8px;
  }
  /* Formulaire : image au-dessus des champs */
  .popup-edition-creation-produit .form-top {
    flex-direction: column;
    gap: 16px;
    width: -webkit-fill-available;
  }
  .popup-edition-creation-produit .form-image {
    width: 100%;
    align-items: stretch;
  }
  /* Label "Image du produit" au-dessus */
  .popup-edition-creation-produit .form-image::before {
    content: "Image du produit";
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #161338;
    margin-bottom: 8px;
  }
  .popup-edition-creation-produit .img-preview {
    width: 100%;
    height: 140px;
    background: var(--neutral-100);
    border: 1px dashed var(--neutral-150);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
  }
  /* Icône caméra et texte dans l'aperçu image (seulement si pas d'image) */
  .popup-edition-creation-produit .img-preview svg[data-name=img-placeholder-svg] {
    width: 24px;
    height: 24px;
  }
  .popup-edition-creation-produit .img-preview::after {
    content: "Ajouter une image";
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #3d3d3d;
  }
  /* Cacher placeholder et texte quand une image est présente */
  .popup-edition-creation-produit .img-preview.has-image svg[data-name=img-placeholder-svg],
  .popup-edition-creation-produit .img-preview.has-image::after {
    display: none;
  }
  /* Fallback avec :has() pour navigateurs modernes */
  .popup-edition-creation-produit .img-preview:has(.popup-product-img) svg[data-name=img-placeholder-svg],
  .popup-edition-creation-produit .img-preview:has(.popup-product-img)::after {
    display: none;
  }
  /* Style de l'image présente */
  .popup-edition-creation-produit .img-preview .popup-product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }
  /* Cacher les boutons modifier/supprimer image sur mobile */
  .popup-edition-creation-produit .img-actions {
    display: none;
  }
  .popup-edition-creation-produit .form-fields-top {
    width: 100%;
    gap: 12px;
  }
  .popup-edition-creation-produit .form-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--blue-500);
    display: flex;
  }
  .popup-edition-creation-produit .section-subtitle {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
  }
  /* Form rows en colonnes sur mobile */
  .popup-edition-creation-produit .form-row {
    flex-direction: column;
    gap: 10px;
  }
  .popup-edition-creation-produit .w-192 {
    width: 100%;
  }
  /* Footer fixe en bas */
  .popup-edition-creation-produit .popup-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 28px;
    /* iOS : ajoute la safe-area pour ne pas etre masque par la home indicator / barre Safari */
    padding-bottom: max(16px, env(safe-area-inset-bottom) + 16px);
    gap: 10px;
    background: var(--neutral-50);
    border-top: 1px solid var(--neutral-100);
    border-radius: 8px 8px 0 0;
    z-index: 5;
  }
  .popup-edition-creation-produit .popup-footer .button-secondary,
  .popup-edition-creation-produit .popup-footer .button-primary {
    flex: 1;
    height: 42px;
  }
  /* Afficher le bouton dupliquer sur mobile (si pas en mode création via JS) */
  .popup-edition-creation-produit .popup-footer .button-secondary[data-name=button-dupliquer] {
    display: flex;
  }
  .popup-edition-creation-produit .popup-footer .button-secondary[data-name=button-dupliquer].hidden {
    display: none;
  }
  /* Masquer le bouton Annuler sur mobile */
  .popup-edition-creation-produit .popup-footer .button-annuler {
    display: none;
  }
  /* ===========================================
     POPUP SUPPRESSION - Responsive mobile
     =========================================== */
  .popup-supprimer-produit,
  .popup-supprimer-groupe {
    width: calc(100% - 40px);
    min-width: auto;
    max-width: 350px;
    padding: 20px;
    /* Centrage */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
  .popup-supprimer-produit .popup-header,
  .popup-supprimer-groupe .popup-header {
    padding: 0 0 16px;
  }
  .popup-supprimer-produit .popup-header .button-close-popup,
  .popup-supprimer-groupe .popup-header .button-close-popup {
    gap: 8px;
  }
  .popup-supprimer-produit .popup-header .button-close-popup span,
  .popup-supprimer-groupe .popup-header .button-close-popup span {
    font-size: 14px;
    font-weight: 600;
    color: #161338;
  }
  .popup-supprimer-produit .popup-content,
  .popup-supprimer-groupe .popup-content {
    gap: 24px;
  }
  .popup-supprimer-produit .confirm-message,
  .popup-supprimer-groupe .confirm-message {
    font-size: 15px;
    max-width: 100%;
  }
  .popup-supprimer-produit .button-row,
  .popup-supprimer-groupe .button-row {
    flex-direction: column;
    gap: 12px;
  }
  .popup-supprimer-produit .button-confirm-green,
  .popup-supprimer-produit .button-confirm-red,
  .popup-supprimer-groupe .button-confirm-green,
  .popup-supprimer-groupe .button-confirm-red {
    width: 100%;
    height: 44px;
    font-size: 13px;
  }
  /* ===========================================
     POPUP CHOIX MACHINES - Responsive mobile
     =========================================== */
  .popup-modifier-produit {
    width: calc(100% - 40px);
    min-width: auto;
    max-width: 400px;
    max-height: 80svh;
    /* Centrage */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  .popup-modifier-produit .popup-header {
    padding: 16px 20px 8px;
    flex-shrink: 0;
  }
  .popup-modifier-produit .popup-header .button-close-popup {
    gap: 8px;
  }
  .popup-modifier-produit .popup-header .button-close-popup span {
    font-size: 14px;
    font-weight: 600;
    color: #161338;
  }
  .popup-modifier-produit .popup-content {
    padding: 12px 20px;
    gap: 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    /* Cacher scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .popup-modifier-produit .popup-content::-webkit-scrollbar {
    display: none;
  }
  .popup-modifier-produit .checkmark-icon {
    width: 36px;
    height: 36px;
  }
  .popup-modifier-produit .popup-success-title {
    font-size: 16px;
    text-align: center;
  }
  .popup-modifier-produit .popup-success-text {
    font-size: 13px;
    text-align: center;
  }
  .popup-modifier-produit .liste-machine-selection {
    max-height: 180px;
    overflow-y: auto;
    /* Garder scrollbar visible pour la liste */
    -ms-overflow-style: auto;
    scrollbar-width: thin;
  }
  .popup-modifier-produit .liste-machine-selection::-webkit-scrollbar {
    display: block;
    width: 4px;
  }
  .popup-modifier-produit .liste-machine-selection::-webkit-scrollbar-thumb {
    background: var(--neutral-200);
    border-radius: 2px;
  }
  .popup-modifier-produit .checkbox-item {
    padding: 6px 10px;
  }
  .popup-modifier-produit .checkbox-label {
    font-size: 13px;
  }
  .popup-modifier-produit .popup-footer {
    padding: 16px 20px;
    gap: 12px;
    flex-shrink: 0;
    border-top: 1px solid var(--neutral-100);
  }
  .popup-modifier-produit .popup-footer .button-secondary,
  .popup-modifier-produit .popup-footer .button-primary {
    flex: 1;
    height: 42px;
    font-size: 13px;
  }
}
/* ==========================================================================
   Toast Notifications
   ========================================================================== */
.body-catalogue .toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.body-catalogue .toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-100);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-500);
  animation: toast-slide-in 0.3s ease-out;
}
.body-catalogue .toast.toast-fade-out {
  animation: toast-slide-out 0.3s ease-in forwards;
}
.body-catalogue .toast--info {
  border-left: 4px solid var(--blue-300);
}
.body-catalogue .toast--info .toast-icon {
  color: var(--blue-300);
}
.body-catalogue .toast--success {
  border-left: 4px solid var(--green-200);
}
.body-catalogue .toast--success .toast-icon {
  color: var(--green-200);
}
.body-catalogue .toast--error {
  border-left: 4px solid var(--red-200);
}
.body-catalogue .toast--error .toast-icon {
  color: var(--red-200);
}
.body-catalogue .toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
/* ============================================
   SOUS-CATALOGUE - Styles scopes
   Version: 2.4.0
   Last modified: 2026-01-27
   ============================================ */
/* Variables locales pour le sous-catalogue */
/* Contenu principal - scopé pour sous-catalogue */
.main-content-sous-catalogue {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: linear-gradient(131.32deg, rgb(248, 249, 250) 0%, rgb(245, 244, 255) 100%);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  /* SVG de fond */
  /* ============================================
     SECTION TITRE
     ============================================ */
  /* Bouton nouveau groupe */
  /* ============================================
     SECTION CONTENU VARIANTS
     ============================================ */
  /* ============================================
     CARD GROUPE (MODE LECTURE)
     ============================================ */
  /* ============================================
     CARD EDITION / NOUVEAU GROUPE (COMMUNES)
     ============================================ */
  /* Section nom du groupe */
  /* Section détails groupe */
  /* Section sélection produits */
  /* Liste produits */
  /* Checkbox */
  /* Infos produit */
  /* Section sélection (boutons) */
  /* Section informations (mode édition) */
  /* Section boutons (annuler/enregistrer) */
}
.main-content-sous-catalogue svg.svg-fond {
  position: absolute;
  right: -18vh;
  bottom: -18vh;
  fill: rgba(38, 34, 98, 0.03);
  z-index: 0;
  width: auto;
  height: 90vh;
  pointer-events: none;
}
.main-content-sous-catalogue .section-titre {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 20px;
  border-bottom: 1px solid #f1f1f1;
  position: relative;
  z-index: 1;
}
.main-content-sous-catalogue .titre-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.main-content-sous-catalogue .button-retour {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.main-content-sous-catalogue .button-retour .icon-retour {
  transform: rotate(0deg);
}
.main-content-sous-catalogue .button-retour span {
  font-size: 12px;
  font-weight: 600;
  color: #1e1e1e;
}
.main-content-sous-catalogue .page-title {
  font-size: 24px;
  font-weight: 700;
  color: #262262;
  line-height: normal;
}
.main-content-sous-catalogue .button-nouveau-groupe {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #262262;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: "Open Sans", sans-serif;
  transition: 0.4s;
}
.main-content-sous-catalogue .button-nouveau-groupe:hover {
  background-color: #1b1846;
}
.main-content-sous-catalogue .button-nouveau-groupe .icon-add {
  width: 10px;
  height: 10px;
}
.main-content-sous-catalogue .section-content-variants {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 12px 20px 0;
  margin-right: -12px;
  position: relative;
  z-index: 1;
  overflow-y: auto;
}
.main-content-sous-catalogue .card-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background-color: #ffffff;
  border: 1px solid #f1f1f1;
  border-radius: 12px;
  padding: 34px 30px;
  width: 100%;
}
.main-content-sous-catalogue .icon-dossier {
  flex-shrink: 0;
}
.main-content-sous-catalogue .icon-dossier svg {
  display: block;
}
.main-content-sous-catalogue .section-texte {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.main-content-sous-catalogue .group-name {
  font-size: 18px;
  font-weight: 600;
  color: #1e1e1e;
  line-height: normal;
}
.main-content-sous-catalogue .group-count {
  font-size: 16px;
  font-weight: 400;
  color: #4e956c;
  line-height: normal;
}
.main-content-sous-catalogue .section-button-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.main-content-sous-catalogue .button-editer {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  border-radius: 2px;
}
.main-content-sous-catalogue .button-editer:hover {
  background: rgba(77, 74, 126, 0.1);
}
.main-content-sous-catalogue .button-supprimer {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  border-radius: 2px;
}
.main-content-sous-catalogue .button-supprimer:hover {
  background: rgba(193, 64, 57, 0.1);
}
.main-content-sous-catalogue .card-group-edition,
.main-content-sous-catalogue .card-nouveau-groupe {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: #ffffff;
  border: 1px solid #f1f1f1;
  border-radius: 12px;
  padding: 16px 30px;
  width: 100%;
}
.main-content-sous-catalogue .section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
@media screen and (max-width: 719px) {
  .main-content-sous-catalogue .section-title {
    align-items: start;
  }
}
.main-content-sous-catalogue .section-title h2 {
  flex: 1;
  font-size: 20px;
  font-weight: 600;
  color: #262262;
  line-height: normal;
}
.main-content-sous-catalogue .badge-mode-edition {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(38, 34, 98, 0.1);
  border-radius: 4px;
  padding: 8px 12px;
}
.main-content-sous-catalogue .badge-mode-edition span {
  font-size: 16px;
  font-weight: 600;
  color: #262262;
}
.main-content-sous-catalogue .section-name-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.main-content-sous-catalogue .label {
  font-size: 16px;
  font-weight: 600;
  color: #110f2c;
}
.main-content-sous-catalogue .input-nom,
.main-content-sous-catalogue .input-nouveau-nom-group {
  width: 100%;
  padding: 12px;
  border: 1px solid #dddddd;
  border-radius: 4px;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  color: #1e1e1e;
  background-color: #ffffff;
}
.main-content-sous-catalogue .input-nom::placeholder,
.main-content-sous-catalogue .input-nouveau-nom-group::placeholder {
  color: #828282;
}
.main-content-sous-catalogue .input-nom:disabled,
.main-content-sous-catalogue .input-nouveau-nom-group:disabled {
  background-color: #f1f1f1;
  color: #828282;
}
.main-content-sous-catalogue .section-details-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.main-content-sous-catalogue .section-details-group .label {
  color: #161338;
}
.main-content-sous-catalogue .section-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.main-content-sous-catalogue .section-group .section-details-group {
  height: 417px;
}
.main-content-sous-catalogue .card-group-edition .section-details-group {
  height: 409px;
}
.main-content-sous-catalogue .section-selection-produits {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background-color: #fafafa;
  border: 0.8px solid #dddddd;
  border-radius: 4px;
  padding: 12px 16px;
  overflow: hidden;
}
.main-content-sous-catalogue .search-bar {
  flex-shrink: 0;
}
.main-content-sous-catalogue .search-bar input {
  width: 100%;
  height: 44px;
  padding: 12px 16px;
  border: 0.8px solid #dddddd;
  border-radius: 4px;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  background-color: #ffffff;
}
.main-content-sous-catalogue .search-bar input::placeholder {
  color: #828282;
}
.main-content-sous-catalogue .section-list-produits {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.main-content-sous-catalogue .ligne-produit {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid #cecece;
}
.main-content-sous-catalogue .ligne-produit:last-child {
  border-bottom: none;
}
.main-content-sous-catalogue .checkbox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  /* Checkbox désactivée (mode lecture seule) */
}
.main-content-sous-catalogue .checkbox input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.main-content-sous-catalogue .checkbox .checkmark {
  width: 16px;
  height: 16px;
  border: 1px solid #cecece;
  border-radius: 4px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-content-sous-catalogue .checkbox input:checked + .checkmark {
  background-color: #262262;
  border-color: #262262;
}
.main-content-sous-catalogue .checkbox input:checked + .checkmark::after {
  content: "";
  width: 6px;
  height: 4px;
  border: solid white;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
  margin-bottom: 2px;
}
.main-content-sous-catalogue .checkbox.checkbox-disabled .checkmark {
  background-color: #f1f1f1;
  border-color: #cecece;
}
.main-content-sous-catalogue .checkbox.checkbox-disabled input:checked + .checkmark {
  background-color: rgba(38, 34, 98, 0.5);
  border-color: rgba(38, 34, 98, 0.5);
}
.main-content-sous-catalogue .produit-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.main-content-sous-catalogue .produit-nom {
  font-size: 14px;
  font-weight: 600;
  color: #262262;
  line-height: 21px;
}
.main-content-sous-catalogue .produit-details {
  font-size: 12px;
  font-weight: 400;
  color: #828282;
  line-height: 18px;
}
.main-content-sous-catalogue .section-selection {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.main-content-sous-catalogue .selection-count {
  flex: 1;
  font-size: 12px;
  font-weight: 400;
  color: #828282;
  line-height: 18px;
}
.main-content-sous-catalogue .section-button-selection {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.main-content-sous-catalogue .btn-selection {
  background-color: #262262;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 5px;
  font-size: 12px;
  font-weight: 600;
  font-family: "Open Sans", sans-serif;
  cursor: pointer;
  line-height: 18px;
}
.main-content-sous-catalogue .btn-selection:hover {
  opacity: 0.9;
}
.main-content-sous-catalogue .section-informations {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.main-content-sous-catalogue .section-informations .selection-count {
  width: 100%;
  flex: none;
}
.main-content-sous-catalogue .selection-hint {
  font-size: 12px;
  font-weight: 400;
  color: #4a8c65;
  line-height: 18px;
}
.main-content-sous-catalogue .section-button {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 0;
}
.main-content-sous-catalogue .button-annuler {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  min-width: 88px;
  padding: 8px 16px;
  background-color: transparent;
  border: 1px solid #262262;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Open Sans", sans-serif;
  color: #262262;
  cursor: pointer;
  transition: 0.4s;
}
.main-content-sous-catalogue .button-annuler:hover {
  border: 1px solid #62ba87;
  color: #62ba87;
}
.main-content-sous-catalogue .button-enregistrer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  min-width: 88px;
  padding: 8px 16px;
  background-color: #62ba87;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Open Sans", sans-serif;
  color: #213e2d;
  cursor: pointer;
  transition: background-color 0.4s;
}
.main-content-sous-catalogue .button-enregistrer:hover {
  background: #58a77a;
}

/* ============================================
   POPUP SUPPRIMER GROUPE
   (Styles partagés avec _catalogue.scss)
   ============================================ */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .main-content-sous-catalogue {
    padding: 20px;
  }
}
@media screen and (max-width: 900px) {
  .main-content-sous-catalogue svg.svg-fond {
    right: -190px;
    bottom: -50px;
    height: 480px;
    width: 550px;
  }
  .main-content-sous-catalogue ::-webkit-scrollbar {
    display: none;
  }
}
/* ============================================
   RESPONSIVE MOBILE - Structure globale
   ============================================ */
@media screen and (max-width: 719px) {
  .main-content-sous-catalogue {
    /* Main content - padding réduit */
    padding: 0;
    min-height: 100svh;
    /* SVG fond repositionné */
    /* ============================================
       HEADER → NAVBAR MOBILE
       ============================================ */
    /* Bouton "Créer nouveau groupe" - pleine largeur */
    /* ============================================
       SECTION CONTENU
       ============================================ */
    /* ============================================
       BOUTONS ANNULER / ENREGISTRER
       ============================================ */
  }
  .main-content-sous-catalogue .badge-mode-edition {
    display: none;
  }
  .main-content-sous-catalogue .section-title {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 0 0 0;
    border-bottom: none;
  }
  .main-content-sous-catalogue svg.svg-fond {
    right: -150px;
    bottom: -30px;
    height: 380px;
    width: 450px;
  }
  .main-content-sous-catalogue .section-titre {
    /* Avant (desktop) : flex row, justify-between, padding-bottom border */
    /* Après (mobile) : navbar fixe style app, fond blanc, empilé */
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px 20px;
    margin: 0;
    border-bottom: none;
    background-color: #fcfcff;
    border-radius: 0 0 8px 8px;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .main-content-sous-catalogue .titre-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .main-content-sous-catalogue .button-retour {
    /* Avant (desktop) : flèche + texte "Retour" */
    /* Après (mobile) : flèche seule, zone cliquable 40x40 */
    width: 40px;
    height: 40px;
    min-width: 40px;
    justify-content: center;
  }
  .main-content-sous-catalogue .button-retour span {
    display: none; /* Masquer le texte "Retour" */
  }
  .main-content-sous-catalogue .page-title {
    /* Titre "Sous-catalogue" visible à côté de la flèche */
    font-size: 16px;
    font-weight: 600;
    display: flex !important;
  }
  .main-content-sous-catalogue .button-nouveau-groupe {
    /* Avant (desktop) : largeur auto, dans le header */
    /* Après (mobile) : pleine largeur, sous le titre */
    width: 100%;
    justify-content: center;
    padding: 8px 16px;
  }
  .main-content-sous-catalogue .section-content-variants {
    /* Avant (desktop) : padding 20px 12px 20px 0 */
    /* Après (mobile) : padding uniforme 20px, pleine hauteur */
    padding: 12px 20px 20px 20px;
    margin-right: 0;
    gap: 12px;
  }
  .main-content-sous-catalogue .section-button {
    /* Boutons côte à côte, pleine largeur */
    justify-content: stretch;
    gap: 10px;
    padding: 16px 0;
    flex-direction: row;
    margin: 0;
    width: 100%;
    border: none;
  }
  .main-content-sous-catalogue .button-annuler {
    /* Chaque bouton prend 50% de la largeur */
    flex: 0;
    min-width: 100px;
  }
  .main-content-sous-catalogue .button-enregistrer {
    /* Chaque bouton prend 50% de la largeur */
    flex: 1;
    min-width: 0;
  }
}
div.body-loagin {
  background-image: url("/image/connexion/fond.png");
  background-size: cover;
  background-position: 50% 50%;
  height: 100svh;
  width: 100svw;
}
div.body-loagin span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100svh;
  width: 100svw;
  flex-direction: column;
}
div.body-loagin span .loader {
  position: absolute;
  top: calc(50% - 33px);
  left: calc(50% - 33px);
  border: 6px solid rgb(255, 255, 255);
  border-left-color: transparent;
  border-radius: 100%;
  width: 66px;
  height: 66px;
  animation: spin 1s linear infinite;
}
div.body-loagin span p {
  position: absolute;
  bottom: 50px;
  width: 250px;
  text-align: center;
  left: calc(50vw - 125px);
  font-size: 35px;
  color: #FFF;
  letter-spacing: 0.5px;
}
@media (min-width: 720px) {
  div.body-loagin span .loader {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    border: 10px solid rgb(255, 255, 255);
    border-left-color: transparent;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    animation: spin 1s linear infinite;
  }
  div.body-loagin span p {
    position: absolute;
    bottom: 50px;
    width: 300px;
    text-align: center;
    left: calc(50vw - 150px);
    font-size: 45px;
    color: #FFF;
    letter-spacing: 0.5px;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

main.login {
  background: url("/image/connexion/fond.png") lightgray 50%/cover no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100svw;
  height: 100svh;
}
@media screen and (max-width: 719px) {
  main.login {
    align-items: flex-end;
    background-position: -279px -264px;
  }
}
main.login form {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  width: 550px;
  height: 489px;
  border-radius: 16px;
  background: #FFF;
}
@media screen and (max-width: 719px) {
  main.login form {
    height: 529px;
    width: 100svw;
    align-items: start;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
main.login form div.logo_container {
  display: flex;
  width: 100%;
  height: 66px;
  margin-top: 72px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
main.login form div.lst_inputs {
  margin: 48px auto 0 auto;
  width: 340px;
  height: 146px;
  display: flex;
  flex-direction: column;
}
main.login form div.lst_inputs p.erreur_username {
  color: #C14039;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  height: 19px;
  line-height: normal;
}
main.login form div.lst_inputs div.input_email {
  margin-top: 4px;
  height: 44px;
  width: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 4px;
  border: 1px solid #DDD;
  background: #FFF;
}
main.login form div.lst_inputs div.input_email input {
  width: 276px;
  outline: none;
  border: none;
  background-color: transparent;
  color: #76749C;
  font-family: "Open Sans";
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
}
main.login form div.lst_inputs p.erreur_password {
  color: #C14039;
  font-family: "Open Sans";
  font-size: 14px;
  height: 19px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-top: 12px;
}
main.login form div.lst_inputs div.input_password {
  margin-top: 4px;
  height: 44px;
  width: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 4px;
  border: 1px solid #DDD;
  background: #FFF;
}
main.login form div.lst_inputs div.input_password svg:last-child {
  cursor: pointer;
}
main.login form div.lst_inputs div.input_password input {
  width: 244px;
  outline: none;
  border: none;
  background-color: transparent;
  color: #76749C;
  font-family: "Open Sans";
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
}
main.login form p.password_oublier {
  margin: 4px auto 0 auto;
  width: 340px;
  color: #4D4A7E;
  text-align: right;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 7%;
  text-underline-offset: 8.5%;
  text-underline-position: from-font;
  cursor: pointer;
}
main.login form button {
  display: flex;
  width: 230px;
  height: 42px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  background: #262262;
  color: #FFF;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  border: none;
  cursor: pointer;
  margin: 48px auto 0 auto;
  transition: 0.2s;
}
main.login form button:hover:not(:disabled) {
  background: #4D4A7E;
}
main.login form button:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}
main.login form button .btn-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
main.login button.ancien_kiosque {
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: absolute;
  left: 29px;
  bottom: 39px;
  border-radius: 4px;
  border: none;
  background: #262262;
  color: #FFF;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  line-height: normal;
  cursor: pointer;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  transition: 0.2s;
}
main.login button.ancien_kiosque:hover {
  background: #4D4A7E;
}
main.login button.ancien_kiosque svg {
  rotate: 180deg;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.login button.ancien_kiosque {
    left: 18px;
    top: 30px;
  }
}

#snow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.snowflake {
  position: absolute;
  top: -10px;
  background: white;
  border-radius: 50%;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes fall {
  0% {
    transform: translateY(-10px) translateX(0);
  }
  100% {
    transform: translateY(100vh) translateX(var(--drift, 0px));
  }
}
main.loginhelp {
  background: url("/image/connexion/fond.png") lightgray 50%/cover no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100svw;
  height: 100svh;
}
@media screen and (max-width: 719px) {
  main.loginhelp {
    align-items: flex-end;
    background-position: -279px -264px;
  }
}
main.loginhelp form#email_code_form {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  height: 366px;
  width: 388px;
  border-radius: 16px;
  background: #FFF;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#email_code_form {
    height: 454px;
    width: 100svw;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
main.loginhelp form#email_code_form div.retour {
  height: 24px;
  width: 339px;
  gap: 4px;
  display: flex;
  justify-content: start;
  align-items: center;
  cursor: pointer;
  margin: 24px auto 0 auto;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#email_code_form div.retour {
    margin: 40px auto 0 auto;
  }
}
main.loginhelp form#email_code_form div.retour div.svg {
  display: flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}
main.loginhelp form#email_code_form div.retour p {
  color: #1E1E1E;
  text-align: center;
  font-family: "Open Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
main.loginhelp form#email_code_form p.titre {
  color: #000;
  font-family: "Open Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 20px auto 0 auto;
  width: 340px;
}
main.loginhelp form#email_code_form p.description {
  color: #000;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 16px auto 0 auto;
  width: 340px;
}
main.loginhelp form#email_code_form p.erreur_email {
  color: #C14039;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 24px auto 4px auto;
  width: 340px;
  height: 19px;
}
main.loginhelp form#email_code_form div.input_email {
  height: 44px;
  width: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  gap: 8px;
  border-radius: 4px;
  border: 1px solid #DDD;
  background: #FFF;
}
main.loginhelp form#email_code_form div.input_email input {
  width: 276px;
  outline: none;
  border: none;
  background-color: transparent;
  color: #76749C;
  font-family: "Open Sans";
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
}
main.loginhelp form#email_code_form button {
  display: flex;
  width: 230px;
  height: 42px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  background: #262262;
  color: #FFF;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  border: none;
  cursor: pointer;
  margin: 32px auto 0 auto;
  transition: 0.2s;
}
main.loginhelp form#email_code_form button:hover {
  background: #4D4A7E;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#email_code_form button {
    margin: 52px auto 0 auto;
  }
}
main.loginhelp form#receive_code_form {
  display: none;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  height: 524px;
  width: 404px;
  border-radius: 16px;
  background: #FFF;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#receive_code_form {
    height: 522px;
    width: 100svw;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
main.loginhelp form#receive_code_form div.retour {
  height: 24px;
  width: 339px;
  gap: 4px;
  display: flex;
  justify-content: start;
  align-items: center;
  cursor: pointer;
  margin: 24px auto 0 auto;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#receive_code_form div.retour {
    margin: 40px auto 0 auto;
  }
}
main.loginhelp form#receive_code_form div.retour div.svg {
  display: flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}
main.loginhelp form#receive_code_form div.retour p {
  color: #1E1E1E;
  text-align: center;
  font-family: "Open Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
main.loginhelp form#receive_code_form div.valider_svg {
  margin: 24px auto;
  display: flex;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 62px;
  background: var(--Color-Green-50, #EFF8F3);
}
main.loginhelp form#receive_code_form p.titre {
  color: #000;
  text-align: center;
  font-family: "Open Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  width: 339px;
  text-align: center;
  margin: 0 auto;
}
main.loginhelp form#receive_code_form p.description {
  color: #000;
  text-align: center;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 339px;
  margin: 16px auto 0 auto;
}
main.loginhelp form#receive_code_form p.erreur_code {
  margin: 32px auto 0 auto;
  height: 19px;
  width: 284px;
  color: #C14039;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#receive_code_form p.erreur_code {
    margin: 40px auto 0 auto;
  }
}
main.loginhelp form#receive_code_form div.inputs {
  width: auto;
  height: 38px;
  gap: 4px;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;
  margin: 4px auto 0 auto;
}
main.loginhelp form#receive_code_form div.inputs input {
  display: flex;
  width: 38px;
  height: 38px;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
  border-radius: 4px;
  border: 1px solid #DDD;
  background: #FFF;
  color: var(--Color-Blue-250, #4D4A7E);
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: var(--Line-height-body-2, 20px);
}
main.loginhelp form#receive_code_form button {
  display: flex;
  width: 230px;
  height: 42px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  background: #262262;
  color: #FFF;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  border: none;
  cursor: pointer;
  margin: 52px auto 0 auto;
  transition: 0.2s;
}
main.loginhelp form#receive_code_form button:hover {
  background: #4D4A7E;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#receive_code_form button {
    margin: 32px auto 0 auto;
  }
}
main.loginhelp form#receive_code_form p.renvoyer {
  width: 339px;
  margin: 24px auto 0 auto;
  color: #4D4A7E;
  text-align: center;
  font-family: "Open Sans";
  font-size: 12px;
  font-style: normal;
  cursor: pointer;
  font-weight: 600;
  line-height: normal;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-color: var(--color-blue-300, #262262);
  text-decoration-thickness: 7%; /* 0.84px */
  text-underline-offset: 8.5%; /* 1.02px */
  text-underline-position: from-font;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#receive_code_form p.renvoyer {
    margin: 32px auto 0 auto;
  }
}
main.loginhelp form#new_password_form {
  display: none;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  height: 589px;
  width: 404px;
  border-radius: 16px;
  background: #FFF;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#new_password_form {
    height: 637px;
    width: 100svw;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
main.loginhelp form#new_password_form div.alerte_svg {
  margin: 24px auto;
  display: flex;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 62px;
  background: #FFF1ED;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#new_password_form div.alerte_svg {
    margin: 40px auto;
  }
}
main.loginhelp form#new_password_form p.titre {
  color: #000;
  text-align: center;
  font-family: "Open Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  width: 356px;
  text-align: center;
  margin: 0 auto;
}
main.loginhelp form#new_password_form p.description {
  color: #000;
  text-align: center;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 356px;
  margin: 16px auto 0 auto;
}
main.loginhelp form#new_password_form p.erreur_new_password {
  margin: 16px auto 0 auto;
  height: 19px;
  width: 356px;
  color: #C14039;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#new_password_form p.erreur_new_password {
    margin: 32px auto 0 auto;
  }
}
main.loginhelp form#new_password_form div.input_new_password {
  height: 44px;
  width: 356px;
  margin: 4px auto 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 4px;
  border: 1px solid #DDD;
  background: #FFF;
}
main.loginhelp form#new_password_form div.input_new_password svg:last-child {
  cursor: pointer;
}
main.loginhelp form#new_password_form div.input_new_password input {
  width: 268px;
  outline: none;
  border: none;
  background-color: transparent;
  color: #76749C;
  font-family: "Open Sans";
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
}
main.loginhelp form#new_password_form p.erreur_new_password_verif {
  margin: 12px auto 0 auto;
  height: 19px;
  width: 356px;
  color: #C14039;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
main.loginhelp form#new_password_form div.input_new_password_verif {
  height: 44px;
  width: 356px;
  margin: 4px auto 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 4px;
  border: 1px solid #DDD;
  background: #FFF;
}
main.loginhelp form#new_password_form div.input_new_password_verif svg:last-child {
  cursor: pointer;
}
main.loginhelp form#new_password_form div.input_new_password_verif input {
  width: 268px;
  outline: none;
  border: none;
  background-color: transparent;
  color: #76749C;
  font-family: "Open Sans";
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
}
main.loginhelp form#new_password_form div.text_password {
  width: 356px;
  height: 24px;
  display: flex;
  flex-direction: row;
  margin: 28px auto 4px auto;
  align-items: center;
  gap: 8px;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#new_password_form div.text_password {
    width: 340px;
  }
}
main.loginhelp form#new_password_form div.text_password div.svg {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  width: 24px;
  margin-left: 16px;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#new_password_form div.text_password div.svg {
    margin-left: 21.64px;
  }
}
main.loginhelp form#new_password_form div.text_password p {
  color: #4D4A7E;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Open Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
main.loginhelp form#new_password_form div.info_password {
  width: 356px;
  height: 16px;
  display: flex;
  flex-direction: row;
  margin: 4px auto 0 auto;
  align-items: center;
  gap: 8px;
}
main.loginhelp form#new_password_form div.info_password div.svg {
  display: flex;
  justify-content: start;
  align-items: center;
  height: 16px;
  width: 16px;
  margin-left: 24px;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#new_password_form div.info_password div.svg {
    margin-left: 48px;
  }
}
main.loginhelp form#new_password_form div.info_password p {
  color: #8C8C8C;
  text-overflow: ellipsis;
  font-family: "Open Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
main.loginhelp form#new_password_form button {
  display: flex;
  width: 230px;
  height: 42px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  background: #262262;
  color: #FFF;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  border: none;
  cursor: pointer;
  margin: 24px auto 0 auto;
  transition: 0.2s;
}
main.loginhelp form#new_password_form button:hover {
  background: #4D4A7E;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#new_password_form button {
    margin: 32px auto 0 auto;
  }
}
main.loginhelp form#realode_code_form {
  display: none;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  height: 372px;
  width: 404px;
  border-radius: 12px;
  background: #FFF;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#realode_code_form {
    height: 368px;
    width: 100svw;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
main.loginhelp form#realode_code_form div.retour {
  height: 24px;
  width: 339px;
  gap: 4px;
  display: flex;
  justify-content: start;
  align-items: center;
  cursor: pointer;
  margin: 24px auto 0 auto;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#realode_code_form div.retour {
    margin: 40px auto 0 auto;
  }
}
main.loginhelp form#realode_code_form div.retour div.svg {
  display: flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}
main.loginhelp form#realode_code_form div.retour p {
  color: #1E1E1E;
  text-align: center;
  font-family: "Open Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
main.loginhelp form#realode_code_form div.valider_svg {
  margin: 24px auto;
  display: flex;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 62px;
  background: var(--Color-Green-50, #EFF8F3);
}
@media screen and (max-width: 719px) {
  main.loginhelp form#realode_code_form div.valider_svg {
    margin: 16px auto;
  }
}
main.loginhelp form#realode_code_form p.titre {
  color: #000;
  text-align: center;
  font-family: "Open Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  width: 356px;
  margin: 0 auto;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#realode_code_form p.titre {
    width: 341px;
  }
}
main.loginhelp form#realode_code_form p.description {
  color: #000;
  text-align: center;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 356px;
  margin: 16px auto 0 auto;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#realode_code_form p.description {
    width: 341px;
  }
}
main.loginhelp form#realode_code_form button {
  display: flex;
  width: 230px;
  height: 42px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  background: #262262;
  color: #FFF;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  border: none;
  cursor: pointer;
  margin: 24px auto 0 auto;
  transition: 0.2s;
}
main.loginhelp form#realode_code_form button:hover {
  background: #4D4A7E;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#realode_code_form button {
    margin: 32px auto 0 auto;
  }
}
main.loginhelp form#terminer_form {
  display: none;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  height: 322px;
  width: 404px;
  border-radius: 16px;
  background: #FFF;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#terminer_form {
    height: 368px;
    width: 100svw;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
main.loginhelp form#terminer_form div.retour {
  height: 24px;
  width: 339px;
  gap: 4px;
  display: flex;
  justify-content: start;
  align-items: center;
  cursor: pointer;
  margin: 24px auto 0 auto;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#terminer_form div.retour {
    margin: 40px auto 0 auto;
  }
}
main.loginhelp form#terminer_form div.retour div.svg {
  display: flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}
main.loginhelp form#terminer_form div.retour p {
  color: #1E1E1E;
  text-align: center;
  font-family: "Open Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
main.loginhelp form#terminer_form div.valider_svg {
  margin: 24px auto;
  display: flex;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 62px;
  background: var(--Color-Green-50, #EFF8F3);
}
@media screen and (max-width: 719px) {
  main.loginhelp form#terminer_form div.valider_svg {
    margin: 16px auto;
  }
}
main.loginhelp form#terminer_form p.titre {
  color: #000;
  text-align: center;
  font-family: "Open Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  width: 356px;
  margin: 0 auto;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#terminer_form p.titre {
    width: 341px;
  }
}
main.loginhelp form#terminer_form p.description {
  color: #000;
  text-align: center;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 356px;
  margin: 16px auto 0 auto;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#terminer_form p.description {
    width: 341px;
  }
}
main.loginhelp form#terminer_form button {
  display: flex;
  width: 230px;
  height: 42px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  background: #262262;
  color: #FFF;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  border: none;
  cursor: pointer;
  margin: 24px auto 0 auto;
  transition: 0.2s;
}
main.loginhelp form#terminer_form button:hover {
  background: #4D4A7E;
}
@media screen and (max-width: 719px) {
  main.loginhelp form#terminer_form button {
    margin: 32px auto 0 auto;
  }
}

main.body-stocks {
  display: flex;
  position: relative;
  flex-direction: column;
  align-self: stretch;
  background: var(--Fond, linear-gradient(127deg, #F8F9FA 0%, #F5F4FF 100.57%));
  height: 100svh;
  width: 100%;
  overflow: hidden;
}
main.body-stocks svg.svg-fond {
  position: absolute;
  right: -18vh;
  bottom: -18vh;
  fill: rgba(38, 34, 98, 0.03);
  z-index: 1;
  width: auto;
  height: 90vh;
  pointer-events: none;
}
@media screen and (max-width: 719px) {
  main.body-stocks svg.svg-fond {
    right: -150px;
    bottom: -30px;
    height: 380px;
    width: 450px;
  }
}
main.body-stocks div.bandeau-top {
  height: 80px;
  min-height: 80px;
  width: calc(100% - 56px);
  margin: 8px 28px 0 28px;
  border-bottom: 2px solid var(--color-neutrals-100);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 719px) {
  main.body-stocks div.bandeau-top {
    position: fixed;
    top: 0;
    left: 0;
    height: 72px;
    min-height: 72px;
    border-bottom: none;
    width: 100svw;
    margin: 0;
    padding-left: 80px;
    padding-top: 8px;
    z-index: 3;
    border-radius: 0 0 8px 8px;
    background: var(--neutral-50, #FCFCFF);
    box-sizing: border-box;
    justify-content: flex-start;
  }
}
main.body-stocks div.bandeau-top p {
  color: #262262;
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: bold;
  line-height: normal;
}
@media screen and (max-width: 719px) {
  main.body-stocks div.bandeau-top p {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
  }
}
main.body-stocks div.filtre-periode-vue {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 20px;
  height: 42px;
  min-height: 42px;
  width: 100%;
  flex-direction: row;
  justify-content: flex-start;
  z-index: 2;
  scrollbar-width: none;
}
main.body-stocks div.filtre-periode-vue::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 719px) {
  main.body-stocks div.filtre-periode-vue {
    margin-top: 92px;
    margin-bottom: 8px;
  }
}
main.body-stocks div.filtre-periode-vue div.block-filtre {
  height: 40px;
  min-width: fit-content;
  border-radius: 4px;
  padding: 0 4px;
  border: 1px solid var(--color-neutrals-100);
  background: var(--color-neutrals-50);
  margin-left: 28px;
  margin-right: 28px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  flex-shrink: 0;
}
@media screen and (max-width: 719px) {
  main.body-stocks div.filtre-periode-vue div.block-filtre {
    margin-left: 20px;
    margin-right: 20px;
  }
}
main.body-stocks div.filtre-periode-vue div.block-filtre div.btn {
  display: flex;
  height: 40px;
  padding: 0px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
}
main.body-stocks div.filtre-periode-vue div.block-filtre div.btn p {
  color: var(--color-blue-150);
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 21px;
  transition: 0.4s;
  white-space: nowrap;
  margin: 0;
}
main.body-stocks div.filtre-periode-vue div.block-filtre div.btn:hover p {
  color: var(--color-blue-300);
}
main.body-stocks div.filtre-periode-vue div.block-filtre div.btn.--actif {
  border-bottom: 2px solid var(--color-blue-300);
}
main.body-stocks div.filtre-periode-vue div.block-filtre div.btn.--actif p {
  color: var(--color-blue-300);
}
main.body-stocks .content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 28px;
  z-index: 2;
}
@media screen and (max-width: 719px) {
  main.body-stocks .content {
    padding: 12px 16px;
    gap: 10px;
  }
}
main.body-stocks .content .card-boutique {
  background: var(--color-neutrals-50, #fff);
  border: 1px solid var(--color-neutrals-100);
  border-radius: 8px;
  overflow: visible;
  transition: border-color 0.2s;
}
main.body-stocks .content .card-boutique.editing {
  border-color: #3b7051;
}
main.body-stocks .content .card-boutique .card-boutique-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-neutrals-100);
}
@media screen and (max-width: 719px) {
  main.body-stocks .content .card-boutique .card-boutique-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
}
main.body-stocks .content .card-boutique .card-boutique-header .button-replier {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--color-blue-300, #262262);
}
main.body-stocks .content .card-boutique .card-boutique-header .button-replier .icone-replier {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}
main.body-stocks .content .card-boutique .card-boutique-header .button-replier.collapsed .icone-replier {
  transform: rotate(-90deg);
}
main.body-stocks .content .card-boutique .card-boutique-header .boutique-name {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-blue-300, #262262);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
main.body-stocks .content .card-boutique .card-boutique-header .spacer {
  flex: 1;
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper {
  position: relative;
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .btn-add-product {
  padding: 6px 12px;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--color-blue-300, #262262);
  background: transparent;
  color: var(--color-blue-300, #262262);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
@media screen and (max-width: 719px) {
  main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .btn-add-product {
    padding: 5px 10px;
    font-size: 12px;
  }
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .btn-add-product:hover {
  background: var(--color-blue-300, #262262);
  color: #fff;
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 340px;
  background: #fff;
  border: 1px solid var(--color-neutrals-100);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  z-index: 10;
  animation: dropdownFadeIn 0.15s ease;
}
@media screen and (max-width: 719px) {
  main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products {
    min-width: 260px;
    right: -40px;
  }
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products.hidden {
  display: none;
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products .dropdown-search-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-neutrals-100);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products .dropdown-search-wrapper .icon-search {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products .dropdown-search-wrapper .dropdown-search-input {
  width: 100%;
  border: none;
  outline: none;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-blue-300, #262262);
  background: transparent;
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products .dropdown-search-wrapper .dropdown-search-input::placeholder {
  color: var(--color-neutrals-350, #99a1af);
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products .dropdown-items-list {
  max-height: 240px;
  overflow-y: auto;
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  color: var(--color-blue-300, #262262);
  cursor: pointer;
  transition: background 0.15s;
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products .dropdown-item:hover {
  background: var(--color-neutrals-100, #f0f0f0);
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products .dropdown-item .dropdown-item-img {
  flex-shrink: 0;
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products .dropdown-item .dropdown-item-img .product-img,
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products .dropdown-item .dropdown-item-img .product-img-placeholder {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products .dropdown-item .dropdown-item-img .product-img-placeholder {
  background: var(--color-neutrals-100, #f0f0f0);
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products .dropdown-item .dropdown-item-infos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products .dropdown-item .dropdown-item-infos .dropdown-item-nom {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products .dropdown-item .dropdown-item-infos .dropdown-item-meta {
  font-size: 11px;
  color: var(--color-neutrals-350, #828282);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products .dropdown-item .dropdown-item-prix {
  flex-shrink: 0;
  font-weight: 600;
  white-space: nowrap;
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products .dropdown-item .dropdown-item-prix .prix-poids {
  color: var(--color-green-200, #62ba87);
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products .dropdown-item .dropdown-item-prix .unit-kg {
  font-size: 11px;
  font-weight: 400;
  margin-left: 2px;
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-add-product-wrapper .dropdown-products .dropdown-empty {
  padding: 10px 14px;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  color: var(--color-neutrals-350, #828282);
  margin: 0;
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-modifier {
  padding: 6px 12px;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--color-blue-300, #262262);
  background: var(--color-blue-300, #262262);
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
@media screen and (max-width: 719px) {
  main.body-stocks .content .card-boutique .card-boutique-header .btn-modifier {
    padding: 5px 10px;
    font-size: 12px;
  }
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-modifier:hover {
  opacity: 0.9;
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-modifier.btn-enregistrer {
  background: #3b7051;
  border-color: #3b7051;
}
main.body-stocks .content .card-boutique .card-boutique-header .btn-modifier.btn-enregistrer:hover {
  background: #2d5a3f;
  border-color: #2d5a3f;
}
main.body-stocks .content .card-boutique .card-boutique-body.hidden {
  display: none;
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock {
  width: 100%;
  border-collapse: collapse;
}
@media screen and (max-width: 719px) {
  main.body-stocks .content .card-boutique .card-boutique-body .table-stock {
    font-size: 13px;
  }
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock thead tr th {
  text-align: left;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-neutrals-350, #828282);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-neutrals-100);
}
@media screen and (max-width: 719px) {
  main.body-stocks .content .card-boutique .card-boutique-body .table-stock thead tr th {
    padding: 8px 10px;
    font-size: 11px;
  }
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock thead tr .col-img-header {
  width: 48px;
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock thead tr .col-delete-header {
  width: 40px;
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr {
  border-bottom: 1px solid var(--color-neutrals-100);
  transition: opacity 0.2s;
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr:last-child {
  border-bottom: none;
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr.marked-for-deletion {
  opacity: 0.35;
  text-decoration: line-through;
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr td {
  padding: 10px 16px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: var(--color-blue-300, #262262);
}
@media screen and (max-width: 719px) {
  main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr td {
    padding: 8px 10px;
    font-size: 13px;
  }
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .col-nom {
  max-width: 260px;
}
@media screen and (max-width: 719px) {
  main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .col-nom {
    max-width: 160px;
  }
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .col-nom .col-nom-titre,
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .col-nom .col-nom-meta {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .col-nom .col-nom-titre {
  font-weight: 600;
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .col-nom .col-nom-meta {
  font-size: 12px;
  color: var(--color-neutrals-350, #828282);
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .col-prix {
  width: 100px;
  white-space: nowrap;
}
@media screen and (max-width: 719px) {
  main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .col-prix {
    width: 80px;
  }
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .col-prix .prix-poids {
  color: var(--color-green-200, #62ba87);
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .col-prix .unit-kg {
  font-size: 12px;
  font-weight: 400;
  margin-left: 2px;
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .col-img {
  width: 48px;
  padding: 6px 8px 6px 16px;
}
@media screen and (max-width: 719px) {
  main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .col-img {
    width: 36px;
    padding: 6px 6px 6px 10px;
  }
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .col-img .product-img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
@media screen and (max-width: 719px) {
  main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .col-img .product-img {
    width: 30px;
    height: 30px;
  }
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .col-img .product-img-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: var(--color-neutrals-100, #f0f0f0);
}
@media screen and (max-width: 719px) {
  main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .col-img .product-img-placeholder {
    width: 30px;
    height: 30px;
  }
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .col-qty {
  width: 120px;
}
@media screen and (max-width: 719px) {
  main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .col-qty {
    width: 80px;
  }
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .input-qty {
  width: 80px;
  padding: 4px 8px;
  border: 1px solid var(--color-neutrals-100);
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: var(--color-blue-300, #262262);
}
@media screen and (max-width: 719px) {
  main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .input-qty {
    width: 60px;
  }
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .input-qty:focus {
  outline: none;
  border-color: var(--color-blue-300, #262262);
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .col-delete {
  width: 40px;
  text-align: center;
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .btn-delete-row {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--color-neutrals-350, #828282);
  transition: color 0.15s;
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .btn-delete-row:hover {
  color: #c14039;
}
main.body-stocks .content .card-boutique .card-boutique-body .table-stock tbody tr .empty-row {
  text-align: center;
  color: var(--color-neutrals-350, #828282);
  font-style: italic;
}
main.body-stocks .content .empty-state {
  text-align: center;
  padding: 40px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: var(--color-neutrals-350, #828282);
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
main.body-stocks-ab {
  --ab-color-primary: #262262;
  --ab-color-primary-dark: #1b1846;
  --ab-color-primary-light: #4d4a7e;
  --ab-color-title: #110f2c;
  --ab-color-danger: #c14039;
  --ab-color-white: #ffffff;
  --ab-color-border: #f1f1f1;
  --ab-color-border-input: #ddd;
  --ab-color-bg-gray: #f1f1f1;
  --ab-color-text: #110f2c;
  --ab-color-text-secondary: #828282;
  --ab-color-text-muted: #a7a7a7;
  --ab-color-text-inactive: #a2a0bb;
  --ab-transition: all 0.2s ease;
  --ab-radius-sm: 4px;
  --ab-radius-md: 8px;
  --ab-radius-pill: 39602500px;
  --ab-shadow-popup: 0 4px 24px rgba(0, 0, 0, 0.15);
  --ab-popup-width: 531px;
}
main.body-stocks-ab .hidden {
  display: none !important;
}
main.body-stocks-ab div.bandeau-top .input-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 397px;
  height: 40px;
  padding: 12px 16px;
  background: var(--ab-color-white);
  border: 1px solid var(--ab-color-border);
  border-radius: var(--ab-radius-sm);
  box-sizing: border-box;
}
main.body-stocks-ab div.bandeau-top .input-search .icon-search {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
main.body-stocks-ab div.bandeau-top .input-search .icon-search circle, main.body-stocks-ab div.bandeau-top .input-search .icon-search line {
  stroke: var(--ab-color-primary-light);
}
main.body-stocks-ab div.bandeau-top .input-search input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ab-color-text);
  background: transparent;
}
main.body-stocks-ab div.bandeau-top .input-search input::placeholder {
  color: var(--ab-color-text-muted);
}
main.body-stocks-ab div.bandeau-top .input-search-desktop {
  display: flex;
}
@media screen and (max-width: 719px) {
  main.body-stocks-ab div.bandeau-top .input-search-desktop {
    display: none;
  }
}
main.body-stocks-ab .main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 28px 20px;
  z-index: 2;
}
@media screen and (max-width: 719px) {
  main.body-stocks-ab .main-content {
    padding: 0;
    padding-top: 72px;
  }
}
main.body-stocks-ab .filtre-actions-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
  scrollbar-width: none;
}
@media screen and (max-width: 719px) {
  main.body-stocks-ab .filtre-actions-row {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
}
main.body-stocks-ab .filtre-actions-row .filtre-periode-vue {
  margin-top: 0;
}
main.body-stocks-ab .filtre-actions-row .filtre-periode-vue div.block-filtre {
  margin-left: 0;
}
@media screen and (max-width: 719px) {
  main.body-stocks-ab .filtre-actions-row .filtre-periode-vue {
    width: 100%;
    padding-left: 20px;
    margin-top: 12px;
    margin-bottom: 16px;
  }
  main.body-stocks-ab .filtre-actions-row .filtre-periode-vue div.block-filtre {
    margin-right: 20px;
  }
}
main.body-stocks-ab .search-container {
  display: none;
}
@media screen and (max-width: 719px) {
  main.body-stocks-ab .search-container {
    display: block;
    padding: 0 20px;
    margin-bottom: 16px;
  }
}
main.body-stocks-ab .search-container .input-search-mobile {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 12px 16px;
  background: var(--ab-color-white);
  border: 1px solid var(--ab-color-border);
  border-radius: var(--ab-radius-sm);
  box-sizing: border-box;
}
main.body-stocks-ab .search-container .input-search-mobile .icon-search {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
main.body-stocks-ab .search-container .input-search-mobile .icon-search circle, main.body-stocks-ab .search-container .input-search-mobile .icon-search line {
  stroke: var(--ab-color-primary-light);
}
main.body-stocks-ab .search-container .input-search-mobile input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ab-color-text);
  background: transparent;
}
main.body-stocks-ab .search-container .input-search-mobile input::placeholder {
  color: var(--ab-color-text-muted);
}
main.body-stocks-ab .button-container {
  display: flex;
  justify-content: flex-end;
}
main.body-stocks-ab .button-container-desktop {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
}
@media screen and (max-width: 719px) {
  main.body-stocks-ab .button-container-desktop {
    display: none;
  }
}
main.body-stocks-ab .button-container-mobile {
  display: none;
}
@media screen and (max-width: 719px) {
  main.body-stocks-ab .button-container-mobile {
    display: flex;
    padding: 0 20px;
    margin-bottom: 16px;
  }
}
main.body-stocks-ab .btn-nouveau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--ab-color-primary);
  color: var(--ab-color-white);
  border: none;
  border-radius: var(--ab-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ab-transition);
  white-space: nowrap;
}
main.body-stocks-ab .btn-nouveau:hover {
  background-color: var(--ab-color-primary-dark);
}
main.body-stocks-ab .btn-nouveau .icon-plus {
  width: 10px;
  height: 10px;
}
main.body-stocks-ab .button-container-mobile .btn-nouveau {
  width: 100%;
  justify-content: center;
}
main.body-stocks-ab .page-content {
  width: 100%;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 719px) {
  main.body-stocks-ab .page-content {
    padding: 0 20px;
  }
}
main.body-stocks-ab .boutiques-count-wrapper {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 8px 0;
}
main.body-stocks-ab .boutiques-count {
  font-size: 12px;
  color: var(--ab-color-text-secondary);
  font-weight: 400;
}
main.body-stocks-ab .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  padding-right: 8px;
  padding-bottom: 16px;
}
@media screen and (max-width: 719px) {
  main.body-stocks-ab .cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-right: 0;
    padding-bottom: 20px;
    scrollbar-width: none;
  }
  main.body-stocks-ab .cards-grid::-webkit-scrollbar {
    display: none;
  }
}
main.body-stocks-ab .empty-state {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--ab-color-text-muted);
  font-size: 14px;
  text-align: center;
}
main.body-stocks-ab .card-boutique-item {
  width: 100%;
  background: var(--ab-color-white);
  border: 1.18px solid var(--ab-color-border);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}
main.body-stocks-ab .card-boutique-item .card-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  overflow: hidden;
  min-width: 0;
}
main.body-stocks-ab .card-boutique-item .card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
}
main.body-stocks-ab .card-boutique-item .card-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ab-color-title);
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 100px);
}
main.body-stocks-ab .card-boutique-item .machine-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 4px 11px;
  background: var(--ab-color-bg-gray);
  border-radius: var(--ab-radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--ab-color-primary);
  line-height: 18px;
  flex-shrink: 0;
}
main.body-stocks-ab .card-boutique-item .card-machines {
  font-size: 13px;
  font-weight: 400;
  color: var(--ab-color-text-secondary);
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
main.body-stocks-ab .card-boutique-item .card-machines .text-muted {
  color: var(--ab-color-text-muted);
  font-style: italic;
}
main.body-stocks-ab .card-boutique-item .card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 9px;
  border-top: 1.18px solid var(--ab-color-border);
}
main.body-stocks-ab .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: var(--ab-transition);
}
main.body-stocks-ab .btn-icon svg {
  width: 20px;
  height: 20px;
}
main.body-stocks-ab .btn-icon-edit svg {
  color: var(--ab-color-text-secondary);
}
main.body-stocks-ab .btn-icon-edit:hover {
  background: var(--ab-color-border);
}
main.body-stocks-ab .btn-icon-edit:hover svg {
  color: var(--ab-color-primary);
}
main.body-stocks-ab .btn-icon-delete svg {
  color: var(--ab-color-danger);
}
main.body-stocks-ab .btn-icon-delete:hover {
  background: rgba(193, 64, 57, 0.1);
}
main.body-stocks-ab .popup-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--ab-popup-width);
  height: 100svh;
  background: var(--ab-color-white);
  box-shadow: var(--ab-shadow-popup);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: var(--ab-radius-sm);
}
@media screen and (max-width: 719px) {
  main.body-stocks-ab .popup-panel {
    width: 100%;
    border-radius: 0;
  }
}
main.body-stocks-ab .popup-close-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex-shrink: 0;
}
main.body-stocks-ab .btn-fermer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #1e1e1e;
  cursor: pointer;
  transition: var(--ab-transition);
}
main.body-stocks-ab .btn-fermer:hover {
  color: var(--ab-color-text-secondary);
}
main.body-stocks-ab .btn-fermer svg {
  width: 10px;
  height: 10px;
}
main.body-stocks-ab .popup-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--ab-color-title);
  line-height: 30px;
  flex-shrink: 0;
  margin-bottom: 16px;
}
main.body-stocks-ab .popup-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-right: 8px;
}
@media screen and (max-width: 719px) {
  main.body-stocks-ab .popup-body {
    padding-right: 0;
    scrollbar-width: none;
  }
  main.body-stocks-ab .popup-body::-webkit-scrollbar {
    display: none;
  }
}
main.body-stocks-ab .popup-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
main.body-stocks-ab .section-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--ab-color-title);
  line-height: 24px;
}
main.body-stocks-ab .popup-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  flex-shrink: 0;
  padding: 16px 0 0 0;
}
main.body-stocks-ab .form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 12px;
  width: 100%;
}
main.body-stocks-ab .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: calc(50% - 6px);
}
@media screen and (max-width: 719px) {
  main.body-stocks-ab .form-group {
    width: 100%;
  }
}
main.body-stocks-ab .form-group-full {
  width: 100%;
}
main.body-stocks-ab .form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ab-color-title);
}
main.body-stocks-ab .required {
  color: var(--ab-color-danger);
  margin-left: 2px;
}
main.body-stocks-ab .form-input {
  width: 100%;
  height: 36px;
  padding: 12px 16px;
  background: var(--ab-color-white);
  border: 1px solid var(--ab-color-border-input);
  border-radius: var(--ab-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ab-color-text);
  transition: var(--ab-transition);
  box-sizing: border-box;
}
main.body-stocks-ab .form-input::placeholder {
  color: var(--ab-color-text-muted);
}
main.body-stocks-ab .form-input:focus {
  outline: none;
  border-color: var(--ab-color-primary);
}
main.body-stocks-ab .checkboxes-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 10px;
}
main.body-stocks-ab .checkbox-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
main.body-stocks-ab .checkbox-item input[type=checkbox] {
  display: none;
}
main.body-stocks-ab .checkbox-item .checkbox-custom {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  border: 2px solid #9ca3af;
  border-radius: 4px;
  background-color: #ffffff;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s;
}
main.body-stocks-ab .checkbox-item input[type=checkbox]:checked + .checkbox-custom {
  background: var(--ab-color-primary);
  border-color: var(--ab-color-primary);
}
main.body-stocks-ab .checkbox-item input[type=checkbox]:checked + .checkbox-custom::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
}
main.body-stocks-ab .checkbox-item .checkbox-label {
  font-size: 14px;
  color: var(--ab-color-text);
  line-height: 21px;
}
main.body-stocks-ab .checkbox-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
main.body-stocks-ab .checkbox-disabled .checkbox-custom {
  background-color: #e5e7eb;
  border-color: #d1d5db;
}
main.body-stocks-ab .checkbox-disabled .checkbox-assigned {
  color: #9ca3af;
  font-style: italic;
  font-size: 12px;
}
main.body-stocks-ab .checkbox-select-all {
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ab-color-border-input);
}
main.body-stocks-ab .checkbox-select-all .checkbox-label {
  font-weight: 500;
}
main.body-stocks-ab .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--ab-color-primary);
  color: var(--ab-color-white);
  border: none;
  border-radius: var(--ab-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ab-transition);
}
main.body-stocks-ab .btn-primary:hover {
  background: var(--ab-color-primary-dark);
}
main.body-stocks-ab .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 8px 16px;
  background: transparent;
  color: #161338;
  border: 1px solid var(--ab-color-primary-dark);
  border-radius: var(--ab-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ab-transition);
}
main.body-stocks-ab .btn-secondary:hover {
  background: rgba(38, 34, 98, 0.05);
}
main.body-stocks-ab .popup-supprimer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}
main.body-stocks-ab .popup-supprimer-content {
  background: var(--ab-color-white);
  border-radius: var(--ab-radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  overflow: hidden;
}
main.body-stocks-ab .popup-supprimer .popup-close-bar {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
}
main.body-stocks-ab .popup-supprimer-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}
main.body-stocks-ab .popup-supprimer-text {
  font-size: 17px;
  font-weight: 600;
  color: #3d3d3d;
  text-align: center;
  width: 240px;
  line-height: normal;
}
main.body-stocks-ab .popup-supprimer-buttons {
  display: flex;
  gap: 10px;
  width: 100%;
}
@media screen and (max-width: 719px) {
  main.body-stocks-ab .popup-supprimer-buttons {
    flex-direction: column;
  }
}
main.body-stocks-ab .popup-supprimer-buttons .btn-conserver {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--ab-color-primary);
  color: var(--ab-color-white);
  border: none;
  border-radius: var(--ab-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ab-transition);
}
main.body-stocks-ab .popup-supprimer-buttons .btn-conserver:hover {
  background: var(--ab-color-primary-dark);
}
main.body-stocks-ab .popup-supprimer-buttons .btn-supprimer {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 88px;
  padding: 8px 16px;
  background: var(--ab-color-danger);
  color: var(--ab-color-white);
  border: none;
  border-radius: var(--ab-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ab-transition);
}
main.body-stocks-ab .popup-supprimer-buttons .btn-supprimer:hover {
  background: #a33530;
}

.body-stocks-ab ~ .popup-overlay,
.popup-overlay.ab-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.body-stocks-ab ~ .popup-overlay.hidden,
.popup-overlay.ab-overlay.hidden {
  display: none !important;
}

nav.menu {
  display: flex;
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  height: 100svh;
  max-height: 100svh;
  min-height: 100svh;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  align-content: space-between;
  background: var(--color-blue-300);
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  nav.menu {
    width: 82px;
    min-width: 82px;
    max-width: 82px;
  }
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  nav.menu {
    display: flex;
    position: absolute;
    top: 0;
    left: -298px;
    width: 298px;
    min-width: 298px;
    max-width: 298px;
    transition: 0.4s;
    z-index: 6;
  }
  nav.menu.--actif {
    left: 0;
  }
}
nav.menu div.logo {
  display: flex;
  width: 228px;
  min-width: 228px;
  max-width: 228px;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  margin: 36px auto 20px auto;
}
nav.menu div.logo svg#petit {
  display: none;
}
nav.menu div.logo svg#fermer {
  display: none;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  nav.menu div.logo {
    width: 229px;
    min-width: 229px;
    max-width: 229px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  nav.menu div.logo svg#fermer {
    display: flex;
    padding: 0px;
  }
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  nav.menu div.logo {
    width: 82px;
    min-width: 82px;
    max-width: 82px;
  }
  nav.menu div.logo svg#petit {
    display: flex;
  }
  nav.menu div.logo svg#grand {
    display: none;
  }
}
nav.menu div.menu {
  height: 100%;
  width: 228px;
  min-width: 228px;
  max-width: 228px;
  margin: 20px auto 0 auto;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  align-self: stretch;
  position: relative;
  padding-bottom: 25px;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  nav.menu div.menu {
    width: 266px;
    min-width: 266px;
    max-width: 266px;
  }
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  nav.menu div.menu {
    width: 82px;
    min-width: 82px;
    max-width: 82px;
  }
}
nav.menu div.menu div.btn {
  width: 226px;
  min-width: 226px;
  max-width: 226px;
  height: 54px;
  min-height: 54px;
  max-height: 54px;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  gap: 12px;
  border-radius: 4px;
  transition: 0.4s;
  border: 1px solid transparent;
  cursor: pointer;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  nav.menu div.menu div.btn {
    width: 264px;
    min-width: 264px;
    max-width: 264px;
  }
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  nav.menu div.menu div.btn {
    width: 59px;
    min-width: 59px;
    max-width: 59px;
    margin: 0 auto;
  }
}
nav.menu div.menu div.btn.--actif, nav.menu div.menu div.btn:hover {
  border: 1px solid #413D7E;
  background: rgba(58, 55, 129, 0.7);
}
nav.menu div.menu div.btn svg {
  margin-left: 8px;
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  nav.menu div.menu div.btn svg {
    margin: auto;
  }
}
nav.menu div.menu div.btn p {
  color: #FBFBFB;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 600;
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  nav.menu div.menu div.btn p {
    display: none;
  }
}
nav.menu div.menu::-webkit-scrollbar {
  display: none;
}
nav.menu span.fond-btn {
  background: linear-gradient(180deg, rgba(38, 34, 98, 0) 0%, #262262 100%);
  margin-top: -25px;
  width: 228px;
  margin-left: auto;
  margin-right: auto;
  height: 25px;
  min-height: 25px;
  z-index: 1;
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  nav.menu span.fond-btn {
    width: 82px;
  }
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  nav.menu span.fond-btn {
    width: 266px;
    min-width: 266px;
    max-width: 266px;
  }
}
nav.menu div.user {
  width: 228px;
  min-width: 228px;
  max-width: 228px;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  margin: 24px auto 36px auto;
  flex-direction: row;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  nav.menu div.user {
    width: 266px;
    min-width: 266px;
    max-width: 266px;
  }
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  nav.menu div.user {
    width: 82px;
    min-width: 82px;
    max-width: 82px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
nav.menu div.user div.info {
  width: 144px;
  min-width: 144px;
  max-width: 144px;
  display: flex;
  flex-direction: column;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  nav.menu div.user div.info {
    width: 170px;
    min-width: 170px;
    max-width: 170px;
  }
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  nav.menu div.user div.info {
    display: none;
  }
}
nav.menu div.user div.info p {
  width: 144px;
  min-width: 144px;
  max-width: 144px;
  height: 21px;
  min-height: 21px;
  max-height: 21px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
nav.menu div.user div.info p.nom {
  color: #FBFBFB;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
nav.menu div.user div.info p.role {
  color: #A2A2A3;
  font-family: "Open Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}
nav.menu div.user div.svg {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 32px;
  max-height: 32px;
  height: 32px;
  max-width: 32px;
  min-width: 32px;
  width: 32px;
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  nav.menu div.user div.svg:first-child {
    display: none;
  }
}
nav.menu div.user div.svg:last-child {
  cursor: pointer;
}
nav.menu div.remplissage {
  width: 228px;
  min-width: 228px;
  max-width: 228px;
  height: 11px;
  min-height: 11px;
  max-height: 11px;
  display: flex;
  align-items: center;
  align-self: stretch;
  margin: 0px auto 20px auto;
  flex-direction: row;
  position: relative;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  nav.menu div.remplissage {
    width: 266px;
    min-width: 266px;
    max-width: 266px;
  }
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  nav.menu div.remplissage {
    visibility: hidden;
  }
}
nav.menu div.remplissage div.barre {
  width: 174px;
  max-width: 174px;
  min-width: 174px;
  height: 11px;
  min-height: 11px;
  max-height: 11px;
  flex: 1 0 0;
  border-radius: 49px;
  background: #FBFBFB;
  margin-right: auto;
  display: flex;
  overflow: hidden;
  align-items: start;
  justify-content: start;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  nav.menu div.remplissage div.barre {
    width: 210px;
    min-width: 210px;
    max-width: 210px;
  }
}
nav.menu div.remplissage div.barre span {
  height: 100%;
  width: 10%;
  border-radius: 27px;
  background: #62BA87;
  transition: 0.4s;
}
nav.menu div.remplissage p {
  color: #FFF;
  text-align: center;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
nav.menu div.remplissage .tooltip-bulle {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background-color: var(--color-blue-500);
  color: #FBFBFB;
  padding: 8px 12px;
  border-radius: 4px;
  font-family: "Open Sans";
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
nav.menu div.remplissage:hover .tooltip-bulle {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
nav.menu div.lst-machines {
  width: 228px;
  min-width: 228px;
  max-width: 228px;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  border-radius: 4px;
  border: 1px solid #413D7E;
  background: rgba(58, 55, 129, 0.7);
  cursor: pointer;
  margin: 12px auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  nav.menu div.lst-machines {
    width: 266px;
    min-width: 266px;
    max-width: 266px;
  }
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  nav.menu div.lst-machines {
    width: 0;
    min-width: 0;
    max-width: 0;
    visibility: hidden;
  }
}
nav.menu div.lst-machines p {
  margin-left: 12px;
  color: #FBFBFB;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
nav.menu div.lst-machines div.svg {
  margin-right: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 21px;
  width: 26px;
}
nav.menu div.lst-machines div.lst-machines-block {
  position: absolute;
  display: none;
  bottom: 0;
  left: 0;
  height: auto;
  max-height: 400px;
  width: 228px;
  min-width: 228px;
  max-width: 228px;
  border-radius: 4px;
  background: #FFF;
  z-index: 1;
  overflow: auto;
  flex-direction: column;
}
nav.menu div.lst-machines div.lst-machines-block::-webkit-scrollbar {
  width: 10px;
  background-color: #FFF;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  nav.menu div.lst-machines div.lst-machines-block {
    width: 266px;
    min-width: 266px;
    max-width: 266px;
  }
  nav.menu div.lst-machines div.lst-machines-block::-webkit-scrollbar {
    display: none;
  }
}
nav.menu div.lst-machines div.lst-machines-block div.machine {
  height: 37px;
  min-height: 37px;
  max-height: 37px;
  display: flex;
  justify-content: start;
  align-items: center;
  transition: 0.2s;
}
nav.menu div.lst-machines div.lst-machines-block div.machine:hover {
  background: #2D296D;
}
nav.menu div.lst-machines div.lst-machines-block div.machine:hover p {
  color: #FFF;
}
nav.menu div.lst-machines div.lst-machines-block div.machine p {
  margin-left: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #262262;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: 0.2s;
  max-width: 200px;
}
nav.menu p.titre-remplissage {
  color: #FBFBFB;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  width: 228px;
  margin: 16px auto 0 auto;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  nav.menu p.titre-remplissage {
    width: 266px;
    min-width: 266px;
    max-width: 266px;
  }
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  nav.menu p.titre-remplissage {
    color: transparent;
    width: 59px;
  }
}
nav.menu div.entreprises {
  width: 228px;
  min-width: 228px;
  max-width: 228px;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  border-radius: 4px;
  cursor: pointer;
  padding-top: 15px;
  margin: auto auto 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  nav.menu div.entreprises {
    width: 266px;
    min-width: 266px;
    max-width: 266px;
  }
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  nav.menu div.entreprises {
    width: 59px;
    min-width: 59px;
    max-width: 59px;
    justify-content: center;
    align-items: center;
  }
}
nav.menu div.entreprises p {
  color: #FBFBFB;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-width: 124px;
  max-width: 124px;
  width: 124px;
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  nav.menu div.entreprises p {
    display: none;
  }
}
nav.menu div.entreprises div.svg {
  margin-right: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
nav.menu div.entreprises div.svg:first-child {
  height: 40px;
  width: 34px;
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  nav.menu div.entreprises div.svg:first-child {
    width: 59px;
    min-width: 59px;
    max-width: 59px;
    margin-right: auto;
    justify-content: center;
    align-items: center;
  }
}
nav.menu div.entreprises div.svg:last-child {
  margin: auto 12px auto auto;
  height: 21px;
  width: 26px;
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  nav.menu div.entreprises div.svg:last-child {
    display: none;
  }
}

nav.bandeau-mobile-top {
  position: absolute;
  display: none;
  width: 40px;
  height: 40px;
  left: 20px;
  top: 20px;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  nav.bandeau-mobile-top {
    display: flex;
  }
}

.bandeau-impaye {
  position: fixed;
  top: 0;
  left: 260px;
  right: 0;
  height: 56px;
  z-index: 100;
  background: var(--color-red-200);
  color: var(--color-neutrals-50);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-300);
  padding: 0 var(--spacing-300);
  font-family: var(--font-family-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
@media screen and (min-width: 720px) and (max-width: 900px) {
  .bandeau-impaye {
    left: 82px;
  }
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  .bandeau-impaye {
    left: 0;
    padding: 0 var(--spacing-200);
    gap: var(--spacing-100);
  }
}
.bandeau-impaye .bandeau-impaye-message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  .bandeau-impaye .bandeau-impaye-message {
    font-size: 12px;
  }
}
.bandeau-impaye .bandeau-impaye-message .bandeau-impaye-message-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bandeau-impaye .bandeau-impaye-btn {
  flex-shrink: 0;
  height: 34px;
  padding: 0 16px;
  background: var(--color-neutrals-50);
  color: var(--color-red-300);
  border: none;
  border-radius: 4px;
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.bandeau-impaye .bandeau-impaye-btn:hover:not(:disabled) {
  background: var(--color-red-50);
  color: var(--color-red-400);
}
.bandeau-impaye .bandeau-impaye-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  .bandeau-impaye .bandeau-impaye-btn {
    height: 30px;
    padding: 0 12px;
    font-size: 13px;
  }
}
.bandeau-impaye .bandeau-impaye-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-neutrals-50);
  border: none;
  border-radius: 4px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.bandeau-impaye .bandeau-impaye-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

body.has-unpaid-notice main {
  margin-top: 56px;
  height: calc(100svh - 56px);
  max-height: calc(100svh - 56px);
}

@media screen and (min-width: 320px) and (max-width: 719px) {
  body.has-unpaid-notice nav.bandeau-mobile-top {
    top: calc(20px + 56px);
  }
  body.has-unpaid-notice main .bandeau-top,
  body.has-unpaid-notice main.body-transaction .bandeau-top,
  body.has-unpaid-notice main.body-transaction-produit .bandeau-top,
  body.has-unpaid-notice main.body-transaction-semaine .bandeau-top,
  body.has-unpaid-notice main.body-stocks .bandeau-top,
  body.has-unpaid-notice main.body-stocks-ab .bandeau-top,
  body.has-unpaid-notice .body-catalogue::before,
  body.has-unpaid-notice .page-machine-liste::before,
  body.has-unpaid-notice .page-machine-informations-generales::before,
  body.has-unpaid-notice .page-machine-ouverture::before,
  body.has-unpaid-notice .page-machine-disposition::before,
  body.has-unpaid-notice .page-machine-composition::before,
  body.has-unpaid-notice .page-machine-horaires::before,
  body.has-unpaid-notice .page-machine-temperatures::before,
  body.has-unpaid-notice .page-machine-armoires::before,
  body.has-unpaid-notice .page-machine-colis::before,
  body.has-unpaid-notice .page-machine-virtuelle::before {
    top: 56px;
  }
  body.has-unpaid-notice .page-machine-liste,
  body.has-unpaid-notice .page-machine-informations-generales,
  body.has-unpaid-notice .page-machine-ouverture,
  body.has-unpaid-notice .page-machine-disposition,
  body.has-unpaid-notice .page-machine-composition,
  body.has-unpaid-notice .page-machine-horaires,
  body.has-unpaid-notice .page-machine-temperatures,
  body.has-unpaid-notice .page-machine-armoires,
  body.has-unpaid-notice .page-machine-colis,
  body.has-unpaid-notice .page-machine-virtuelle {
    padding-top: calc(72px + 56px);
  }
  body.has-unpaid-notice .page-machine-liste main, body.has-unpaid-notice .page-machine-liste .main-content,
  body.has-unpaid-notice .page-machine-informations-generales main,
  body.has-unpaid-notice .page-machine-informations-generales .main-content,
  body.has-unpaid-notice .page-machine-ouverture main,
  body.has-unpaid-notice .page-machine-ouverture .main-content,
  body.has-unpaid-notice .page-machine-disposition main,
  body.has-unpaid-notice .page-machine-disposition .main-content,
  body.has-unpaid-notice .page-machine-composition main,
  body.has-unpaid-notice .page-machine-composition .main-content,
  body.has-unpaid-notice .page-machine-horaires main,
  body.has-unpaid-notice .page-machine-horaires .main-content,
  body.has-unpaid-notice .page-machine-temperatures main,
  body.has-unpaid-notice .page-machine-temperatures .main-content,
  body.has-unpaid-notice .page-machine-armoires main,
  body.has-unpaid-notice .page-machine-armoires .main-content,
  body.has-unpaid-notice .page-machine-colis main,
  body.has-unpaid-notice .page-machine-colis .main-content,
  body.has-unpaid-notice .page-machine-virtuelle main,
  body.has-unpaid-notice .page-machine-virtuelle .main-content {
    margin-top: 0;
    max-height: none;
  }
}

.div-field-checkbox {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
}
.div-field-checkbox input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--md-color-neutrals-250);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.div-field-checkbox input[type=checkbox]:checked {
  background: var(--md-color-blue-300);
  border-color: var(--md-color-blue-300);
}
.div-field-checkbox input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.div-field-checkbox input[type=checkbox]:focus-visible {
  outline: 2px solid var(--md-color-blue-300);
  outline-offset: 2px;
}
.div-field-checkbox .label-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}
.div-field-checkbox .checkbox-title {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #0a0a0a;
}
.div-field-checkbox .field-description {
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
}

div.arm_15 {
  height: 35svh;
  width: 175px;
  background-color: #e7e7e7;
  border-radius: 5px;
}
@media (min-width: 720px) {
  div.arm_15 {
    height: 45svh;
    width: 275px;
  }
}
div.arm_15 div.block {
  height: 70%;
  width: 98%;
  margin-top: 23%;
  background-color: #d4d4d4;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 1%;
}
div.arm_15 div.block div.casier {
  height: 17%;
  width: 29.6666666667%;
  background-color: #e7e7e7;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.arm_15 div.block div.casier div.fenetre {
  height: 70%;
  width: 80%;
  border-radius: 3px;
  background-color: #adadab;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 10px;
}
@media (min-width: 720px) {
  div.arm_15 div.block div.casier div.fenetre {
    font-size: 14px;
  }
}
div.arm_15 div.block div.casier div.fenetre.--chargerAutre {
  background-color: #262262;
}
div.arm_15 div.block div.casier div.fenetre.--charger {
  background-color: #64ba86;
}
div.arm_15 div.block div.casier div.fenetre.--ouvert {
  background-color: #64ba86;
}

div.arm_21 {
  height: 35svh;
  width: 175px;
  background-color: #e7e7e7;
  border-radius: 5px;
}
@media (min-width: 720px) {
  div.arm_21 {
    height: 45svh;
    width: 275px;
  }
}
div.arm_21 div.block {
  height: 70%;
  width: 98%;
  margin-top: 23%;
  background-color: #d4d4d4;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 1%;
}
div.arm_21 div.block div.casier {
  height: 12.1428571429%;
  width: 29.6666666667%;
  background-color: #e7e7e7;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.arm_21 div.block div.casier div.fenetre {
  height: 70%;
  width: 80%;
  border-radius: 3px;
  background-color: #adadab;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 10px;
}
@media (min-width: 720px) {
  div.arm_21 div.block div.casier div.fenetre {
    font-size: 14px;
  }
}
div.arm_21 div.block div.casier div.fenetre.--chargerAutre {
  background-color: #262262;
}
div.arm_21 div.block div.casier div.fenetre.--charger {
  background-color: #64ba86;
}
div.arm_21 div.block div.casier div.fenetre.--ouvert {
  background-color: #64ba86;
}

div.arm_24 {
  height: 35svh;
  width: 175px;
  background-color: #e7e7e7;
  border-radius: 5px;
}
@media (min-width: 720px) {
  div.arm_24 {
    height: 45svh;
    width: 275px;
  }
}
div.arm_24 div.block {
  height: 70%;
  width: 98%;
  margin-top: 23%;
  background-color: #d4d4d4;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 1%;
}
div.arm_24 div.block div.casier {
  height: 14.1666666667%;
  width: 22.25%;
  background-color: #e7e7e7;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.arm_24 div.block div.casier div.fenetre {
  height: 70%;
  width: 80%;
  border-radius: 3px;
  background-color: #adadab;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 10px;
}
@media (min-width: 720px) {
  div.arm_24 div.block div.casier div.fenetre {
    font-size: 14px;
  }
}
div.arm_24 div.block div.casier div.fenetre.--chargerAutre {
  background-color: #262262;
}
div.arm_24 div.block div.casier div.fenetre.--charger {
  background-color: #64ba86;
}
div.arm_24 div.block div.casier div.fenetre.--ouvert {
  background-color: #64ba86;
}

div.arm_28 {
  height: 35svh;
  width: 175px;
  background-color: #e7e7e7;
  border-radius: 5px;
}
@media (min-width: 720px) {
  div.arm_28 {
    height: 45svh;
    width: 275px;
  }
}
div.arm_28 div.block {
  height: 70%;
  width: 98%;
  margin-top: 23%;
  background-color: #d4d4d4;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 1%;
}
div.arm_28 div.block div.casier {
  height: 12.1428571429%;
  width: 22.25%;
  background-color: #e7e7e7;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.arm_28 div.block div.casier div.fenetre {
  height: 70%;
  width: 80%;
  border-radius: 3px;
  background-color: #adadab;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 10px;
}
@media (min-width: 720px) {
  div.arm_28 div.block div.casier div.fenetre {
    font-size: 14px;
  }
}
div.arm_28 div.block div.casier div.fenetre.--chargerAutre {
  background-color: #262262;
}
div.arm_28 div.block div.casier div.fenetre.--charger {
  background-color: #64ba86;
}
div.arm_28 div.block div.casier div.fenetre.--ouvert {
  background-color: #64ba86;
}

div.arm_14 {
  height: 35svh;
  width: 175px;
  background-color: #e7e7e7;
  border-radius: 5px;
}
@media (min-width: 720px) {
  div.arm_14 {
    height: 45svh;
    width: 275px;
  }
}
div.arm_14 div.block {
  height: 70%;
  width: 98%;
  margin-top: 23%;
  background-color: #d4d4d4;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 1%;
}
div.arm_14 div.block div.bdc {
  height: 98%;
  background-color: #e7e7e7;
  width: 31.6666666667%;
  margin: auto;
  display: flex;
}
div.arm_14 div.block div.bdc div.ecran {
  height: 30%;
  width: 50%;
  border-radius: 4px;
  margin: 40% auto 0 auto;
  background-color: #adadab;
}
div.arm_14 div.block div.casiers {
  height: 100%;
  width: 63.3333333333%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
div.arm_14 div.block div.casiers div.casier {
  height: 12.1428571429%;
  width: 44.5%;
  background-color: #e7e7e7;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.arm_14 div.block div.casiers div.casier div.fenetre {
  height: 70%;
  width: 80%;
  border-radius: 3px;
  background-color: #adadab;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 14px;
}
@media (min-width: 720px) {
  div.arm_14 div.block div.casiers div.casier div.fenetre {
    font-size: 16px;
  }
}
div.arm_14 div.block div.casiers div.casier div.fenetre.--chargerAutre {
  background-color: #262262;
}
div.arm_14 div.block div.casiers div.casier div.fenetre.--charger {
  background-color: #64ba86;
}
div.arm_14 div.block div.casiers div.casier div.fenetre.--ouvert {
  background-color: #64ba86;
}

div.arm_6 {
  height: 35svh;
  width: 175px;
  background-color: #e7e7e7;
  border-radius: 5px;
}
@media (min-width: 720px) {
  div.arm_6 {
    height: 45svh;
    width: 275px;
  }
}
div.arm_6 div.block {
  height: 70%;
  width: 98%;
  margin-top: 23%;
  background-color: #d4d4d4;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 1%;
}
div.arm_6 div.block div.casier {
  height: 45%;
  width: 28.3333333333%;
  background-color: #e7e7e7;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.arm_6 div.block div.casier div.fenetre {
  height: 85%;
  width: 30%;
  border-radius: 3px;
  background-color: #adadab;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 10px;
}
@media (min-width: 720px) {
  div.arm_6 div.block div.casier div.fenetre {
    font-size: 14px;
  }
}
div.arm_6 div.block div.casier div.fenetre.--chargerAutre {
  background-color: #262262;
}
div.arm_6 div.block div.casier div.fenetre.--charger {
  background-color: #64ba86;
}
div.arm_6 div.block div.casier div.fenetre.--ouvert {
  background-color: #64ba86;
}

div.arm_10 {
  height: 35svh;
  width: 175px;
  background-color: #e7e7e7;
  border-radius: 5px;
}
@media (min-width: 720px) {
  div.arm_10 {
    height: 45svh;
    width: 275px;
  }
}
div.arm_10 div.block {
  height: 70%;
  width: 98%;
  margin-top: 23%;
  background-color: #d4d4d4;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 1%;
}
div.arm_10 div.block div.bdc {
  height: 98%;
  background-color: #e7e7e7;
  width: 31.6666666667%;
  margin: auto;
  display: flex;
}
div.arm_10 div.block div.bdc div.ecran {
  height: 30%;
  width: 50%;
  border-radius: 4px;
  margin: 40% auto 0 auto;
  background-color: #adadab;
}
div.arm_10 div.block div.casiers {
  height: 100%;
  width: 63.3333333333%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
div.arm_10 div.block div.casiers div.casier {
  height: 17%;
  width: 44.5%;
  background-color: #e7e7e7;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.arm_10 div.block div.casiers div.casier div.fenetre {
  height: 70%;
  width: 80%;
  border-radius: 3px;
  background-color: #adadab;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 14px;
}
@media (min-width: 720px) {
  div.arm_10 div.block div.casiers div.casier div.fenetre {
    font-size: 16px;
  }
}
div.arm_10 div.block div.casiers div.casier div.fenetre.--chargerAutre {
  background-color: #262262;
}
div.arm_10 div.block div.casiers div.casier div.fenetre.--charger {
  background-color: #64ba86;
}
div.arm_10 div.block div.casiers div.casier div.fenetre.--ouvert {
  background-color: #64ba86;
}

div.arm_12 {
  height: 35svh;
  width: 175px;
  background-color: #e7e7e7;
  border-radius: 5px;
}
@media (min-width: 720px) {
  div.arm_12 {
    height: 45svh;
    width: 275px;
  }
}
div.arm_12 div.block {
  height: 70%;
  width: 98%;
  margin-top: 23%;
  background-color: #d4d4d4;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 1%;
}
div.arm_12 div.block div.casier:nth-last-child(-n+3) {
  height: 38%;
}
div.arm_12 div.block div.casier:nth-last-child(-n+3) div.fenetre {
  height: 85%;
  width: 80%;
  border-radius: 3px;
  background-color: #adadab;
  cursor: pointer;
  font-size: 10px;
}
@media (min-width: 720px) {
  div.arm_12 div.block div.casier:nth-last-child(-n+3) div.fenetre {
    font-size: 14px;
  }
}
div.arm_12 div.block div.casier:nth-last-child(-n+3) div.fenetre.--chargerAutre {
  background-color: #262262;
}
div.arm_12 div.block div.casier:nth-last-child(-n+3) div.fenetre.--charger {
  background-color: #64ba86;
}
div.arm_12 div.block div.casier:nth-last-child(-n+3) div.fenetre.--ouvert {
  background-color: #64ba86;
}
div.arm_12 div.block div.casier {
  height: 17%;
  width: 29.6666666667%;
  background-color: #e7e7e7;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.arm_12 div.block div.casier div.fenetre {
  height: 70%;
  width: 80%;
  border-radius: 3px;
  background-color: #adadab;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 10px;
}
@media (min-width: 720px) {
  div.arm_12 div.block div.casier div.fenetre {
    font-size: 14px;
  }
}
div.arm_12 div.block div.casier div.fenetre.--chargerAutre {
  background-color: #262262;
}
div.arm_12 div.block div.casier div.fenetre.--charger {
  background-color: #64ba86;
}
div.arm_12 div.block div.casier div.fenetre.--ouvert {
  background-color: #64ba86;
}

div.arm_8 {
  height: 35svh;
  width: 130px;
  background-color: #e7e7e7;
  border-radius: 5px;
}
@media (min-width: 720px) {
  div.arm_8 {
    height: 45svh;
    width: 200px;
  }
}
div.arm_8 div.block {
  height: 70%;
  width: 98%;
  margin-top: 32%;
  background-color: #d4d4d4;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 1%;
}
div.arm_8 div.block div.casier:nth-last-child(-n+4) {
  height: 26.5%;
}
div.arm_8 div.block div.casier:nth-last-child(-n+4) div.fenetre {
  height: 85%;
  width: 80%;
  border-radius: 3px;
  background-color: #adadab;
  cursor: pointer;
  font-size: 10px;
}
@media (min-width: 720px) {
  div.arm_8 div.block div.casier:nth-last-child(-n+4) div.fenetre {
    font-size: 14px;
  }
}
div.arm_8 div.block div.casier:nth-last-child(-n+4) div.fenetre.--chargerAutre {
  background-color: #262262;
}
div.arm_8 div.block div.casier:nth-last-child(-n+4) div.fenetre.--charger {
  background-color: #64ba86;
}
div.arm_8 div.block div.casier:nth-last-child(-n+4) div.fenetre.--ouvert {
  background-color: #64ba86;
}
div.arm_8 div.block div.casier {
  height: 16.25%;
  width: 44.5%;
  background-color: #e7e7e7;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.arm_8 div.block div.casier div.fenetre {
  height: 70%;
  width: 80%;
  border-radius: 3px;
  background-color: #adadab;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 10px;
}
@media (min-width: 720px) {
  div.arm_8 div.block div.casier div.fenetre {
    font-size: 14px;
  }
}
div.arm_8 div.block div.casier div.fenetre.--chargerAutre {
  background-color: #262262;
}
div.arm_8 div.block div.casier div.fenetre.--charger {
  background-color: #64ba86;
}
div.arm_8 div.block div.casier div.fenetre.--ouvert {
  background-color: #64ba86;
}

.session-disconnect-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.session-disconnect-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.session-disconnect-popup {
  background: white;
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}
.visible .session-disconnect-popup {
  transform: scale(1);
}

.session-disconnect-icon {
  margin-bottom: 20px;
}
.session-disconnect-icon svg {
  width: 64px;
  height: 64px;
}

.session-disconnect-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}

.session-disconnect-message {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
  margin: 0 0 30px 0;
}

.session-disconnect-btn {
  background: #62ba87;
  color: white;
  border: none;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
.session-disconnect-btn:hover {
  background: #4ea872;
}
.session-disconnect-btn:active {
  transform: scale(0.98);
}

/*
 * Pagination partagée — conforme maquette Figma PICKUP (node 413:3548).
 * Utilisée par les onglets "Annonces", "Événements colis" et "Événements consigne".
 *
 * Tokens utilisés :
 *   - --color-blue-300  (#262262) : page active
 *   - --color-blue-100  (#f4f3ff) : fond boutons navigation prev/next
 *   - --color-neutrals-500 (#1e1e1e) : texte pages inactives
 *   - --color-neutrals-50  (#ffffff) : texte page active
 */
.nav-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 0;
  /* ============================================================
     Boutons page précédente / suivante
     ============================================================ */
  /* ============================================================
     Numéros de page
     ============================================================ */
  /* ============================================================
     Ellipsis "..."
     ============================================================ */
}
.nav-pagination .ul-pages {
  display: flex;
  gap: 16px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-pagination .button-page-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background-color: var(--color-blue-100);
  overflow: hidden;
  /* Bouton désactivé (première ou dernière page) : visuel atténué,
     et <span> rendu à la place du <a> pour bloquer la navigation */
}
.nav-pagination .button-page-nav a, .nav-pagination .button-page-nav span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-blue-300);
  text-decoration: none;
  cursor: pointer;
}
.nav-pagination .button-page-nav .icon-chevron {
  display: block;
}
.nav-pagination .button-page-nav:hover:not(.is-disabled) {
  background-color: var(--color-blue-150);
}
.nav-pagination .button-page-nav.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.nav-pagination .button-page-nav.is-disabled a, .nav-pagination .button-page-nav.is-disabled span {
  cursor: not-allowed;
}
.nav-pagination .page-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  /* Inactif : fond transparent, texte sombre */
  /* Actif : fond bleu foncé, texte blanc, non-cliquable */
}
.nav-pagination .page-label a, .nav-pagination .page-label span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-neutrals-500);
  font-family: "Inter", "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.nav-pagination .page-label a:hover {
  background-color: var(--color-blue-50);
  border-radius: 4px;
}
.nav-pagination .page-label.page-label--active {
  background-color: var(--color-blue-300);
}
.nav-pagination .page-label.page-label--active span {
  color: var(--color-neutrals-50);
}
.nav-pagination .page-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
.nav-pagination .page-ellipsis span {
  color: var(--color-neutrals-500);
  font-family: "Inter", "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.version-popup-toast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 24px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 360px;
  padding: 14px 18px 14px 18px;
  background: #ffffff;
  border-left: 4px solid #62ba87;
  border-radius: 0;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  user-select: none;
  animation: version-popup-slide-in 0.35s ease-out;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.3s ease;
}
.version-popup-toast:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12), 0 2px 4px rgba(15, 23, 42, 0.06);
}
.version-popup-toast:focus-visible {
  outline: 2px solid #62ba87;
  outline-offset: 2px;
}
.version-popup-toast.version-popup-fade-out {
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
}

.version-popup-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.version-popup-title {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.version-popup-message {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

.version-popup-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin-left: 4px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #9ca3af;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.version-popup-close svg {
  width: 10px;
  height: 10px;
}
.version-popup-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1f2937;
}
.version-popup-close:focus-visible {
  outline: 2px solid #62ba87;
  outline-offset: 1px;
}

@keyframes version-popup-slide-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@media (max-width: 600px) {
  .version-popup-toast {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}
main.body-transaction {
  display: flex;
  position: relative;
  flex-direction: column;
  align-self: stretch;
  background: var(--Fond, linear-gradient(127deg, #F8F9FA 0%, #F5F4FF 100.57%));
  height: 100svh;
  width: 100%;
  overflow: hidden;
}
main.body-transaction svg.svg-fond {
  position: absolute;
  right: -18vh;
  bottom: -18vh;
  fill: rgba(38, 34, 98, 0.03);
  z-index: 1;
  width: auto;
  height: 90vh;
}
main.body-transaction div.bandeau-top {
  height: 80px;
  min-height: 80px;
  width: calc(100% - 56px);
  margin: 8px 28px 0 28px;
  border-bottom: 2px solid var(--color-neutrals-100);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.bandeau-top {
    /* Style identique au catalogue */
    position: fixed;
    top: 0;
    left: 0;
    height: 72px;
    min-height: 72px;
    border-bottom: none;
    width: 100svw;
    margin: 0;
    padding-left: 80px;
    padding-top: 8px;
    z-index: 3;
    border-radius: 0 0 8px 8px;
    background: var(--neutral-50, #FCFCFF);
    box-sizing: border-box;
    justify-content: flex-start;
  }
}
main.body-transaction div.bandeau-top p {
  color: #262262;
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: bold;
  line-height: normal;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.bandeau-top p {
    font-size: 20px;
    margin: 0;
  }
}
main.body-transaction div.filtre-periode-vue {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 20px;
  height: 42px;
  min-height: 42px;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  z-index: 2;
  scrollbar-width: none;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.filtre-periode-vue {
    margin-top: 92px;
  }
}
main.body-transaction div.filtre-periode-vue::-webkit-scrollbar {
  display: none;
}
main.body-transaction div.filtre-periode-vue div.block-vue {
  display: flex;
  flex-direction: row;
  height: 26px;
  gap: 6px;
  margin-top: auto;
  margin-right: 28px;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 320px) and (max-width: 900px) {
  main.body-transaction div.filtre-periode-vue div.block-vue {
    display: none;
  }
}
main.body-transaction div.filtre-periode-vue div.block-vue p {
  color: #131131;
  text-align: center;
  font-family: "Open Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
main.body-transaction div.filtre-periode-vue div.block-vue div.button-vue {
  border-radius: 160px;
  width: 58px;
  height: 26px;
  background: var(--color-blue-300);
  display: flex;
  justify-content: start;
  align-items: start;
  cursor: pointer;
  transition: 0.2s;
}
main.body-transaction div.filtre-periode-vue div.block-vue div.button-vue.active {
  justify-content: end;
  background: var(--color-green-200);
}
main.body-transaction div.filtre-periode-vue div.block-vue div.button-vue span {
  margin: 3px;
  height: 20px;
  width: 20px;
  display: block;
  border-radius: 100%;
  background-color: var(--color-neutrals-50);
  filter: drop-shadow(2px 1px 6px rgba(0, 0, 0, 0.25));
}
main.body-transaction div.filtre-periode-vue div.block-filtre {
  height: 40px;
  min-width: fit-content;
  border-radius: 4px;
  padding: 0 4px;
  border: 1px solid var(--color-neutrals-100);
  background: var(--color-neutrals-50);
  margin-left: 28px;
  margin-right: 28px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  flex-shrink: 0;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.filtre-periode-vue div.block-filtre {
    margin-left: 20px;
    margin-right: 20px;
  }
}
main.body-transaction div.filtre-periode-vue div.block-filtre div.btn {
  display: flex;
  height: 40px;
  padding: 0px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
}
main.body-transaction div.filtre-periode-vue div.block-filtre div.btn p {
  color: var(--color-blue-150);
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 21px;
  transition: 0.4s;
  white-space: nowrap;
  margin: 0;
}
main.body-transaction div.filtre-periode-vue div.block-filtre div.btn:hover p {
  color: var(--color-blue-300);
}
main.body-transaction div.filtre-periode-vue div.block-filtre div.btn.--actif {
  border-bottom: 2px solid var(--color-blue-300);
}
main.body-transaction div.filtre-periode-vue div.block-filtre div.btn.--actif p {
  color: var(--color-blue-300);
}
main.body-transaction div.filtre-date-export {
  height: 42px;
  min-height: 42px;
  width: auto;
  margin: 20px 28px 20px 28px;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;
  z-index: 5;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.filtre-date-export {
    margin: 20px;
    max-width: calc(100svw - 40px);
  }
}
main.body-transaction div.filtre-date-export div.btn-clotures {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid var(--color-blue-400);
  transition: 0.4s;
  display: inline-flex;
  padding: 7px 11px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
main.body-transaction div.filtre-date-export div.btn-clotures:hover {
  border: 1px solid var(--color-green-200);
}
main.body-transaction div.filtre-date-export div.btn-clotures:hover p {
  color: var(--color-green-200);
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.filtre-date-export div.btn-clotures {
    display: none;
  }
}
main.body-transaction div.filtre-date-export div.btn-clotures p {
  color: #161338;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  transition: 0.4s;
}
main.body-transaction div.filtre-date-export div.btn-exporter {
  display: flex;
  margin-left: 12px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: var(--color-green-200);
  cursor: pointer;
  transition: 0.4s;
  display: inline-flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
main.body-transaction div.filtre-date-export div.btn-exporter:hover {
  background: var(--color-green-250);
}
main.body-transaction div.filtre-date-export div.btn-exporter p {
  color: var(--color-green-500);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  transition: 0.4s;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.filtre-date-export div.btn-exporter {
    margin-left: 12px;
    min-width: 89px;
    gap: 6px;
    background: transparent;
  }
  main.body-transaction div.filtre-date-export div.btn-exporter p {
    color: var(--color-neutrals-500);
  }
}
main.body-transaction div.filtre-date-export div.btn-trier {
  display: none;
  min-width: 123px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: var(--color-green-200);
  cursor: pointer;
  transition: 0.4s;
  padding: 8px 0px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
main.body-transaction div.filtre-date-export div.btn-trier p {
  color: var(--color-green-500);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.filtre-date-export div.btn-trier {
    min-width: 62px;
    background: transparent;
    display: flex;
  }
  main.body-transaction div.filtre-date-export div.btn-trier p {
    color: var(--color-neutrals-500);
  }
}
main.body-transaction div.filtre-date-export div.input-date {
  display: flex;
  flex-direction: row;
  height: 42px;
  width: 254px;
  min-width: 254px;
  max-width: 254px;
  border-radius: 4px;
  background: var(--color-neutrals-50);
  justify-content: center;
  align-items: center;
  margin-right: auto;
  cursor: pointer;
  position: relative;
  border: 1px solid transparent;
  transition: 0.4s;
}
main.body-transaction div.filtre-date-export div.input-date:hover {
  border-color: var(--neutral-150);
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.filtre-date-export div.input-date {
    width: 165px;
    min-width: 165px;
    max-width: 165px;
    margin-right: auto;
    position: initial;
  }
}
main.body-transaction div.filtre-date-export div.input-date p {
  margin-right: auto;
  color: var(--color-blue-300, var(--color-blue-300));
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
main.body-transaction div.filtre-date-export div.input-date div.svg:first-child {
  margin-left: 16px;
  margin-right: 8px;
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
main.body-transaction div.filtre-date-export div.input-date div.svg.last {
  margin-right: 16px;
  margin-left: 8px;
  height: 12px;
  width: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court {
  cursor: auto;
  left: 0;
  bottom: -381px;
  position: absolute;
  width: 254px;
  height: 381px;
  border-radius: 0 0 0 12px;
  background: var(--color-neutrals-50);
  display: none;
  flex-direction: column;
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court.--actif {
  display: flex;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.filtre-date-export div.input-date div.option-date-court {
    width: 100vw;
    height: 377px;
    flex-direction: column;
    border-radius: 8px 8px 0 0;
    background: var(--color-neutrals-50);
    left: 0;
    bottom: 0;
    z-index: 6;
  }
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court div.titre-date-court {
  height: 53px;
  margin: 16px 16px 0 16px;
  width: calc(100% - 32px);
  border-bottom: 1px solid var(--color-blue-100);
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.filtre-date-export div.input-date div.option-date-court div.titre-date-court {
    margin: 0 24px 0 24px;
    height: 65px;
    width: calc(100% - 48px);
  }
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court div.titre-date-court p {
  margin: 12px 0 20px 0;
  color: var(--color-blue-400);
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 21px;
  height: 21px;
  width: 100%;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.filtre-date-export div.input-date div.option-date-court div.titre-date-court p {
    margin: 24px 0 20px 0;
  }
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court div.menu-date-court {
  margin: 20px 16px 0 16px;
  gap: 4px;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.filtre-date-export div.input-date div.option-date-court div.menu-date-court {
    margin: 20px 24px 0 24px;
  }
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date {
  width: 100%;
  gap: 15px;
  height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date span.check {
  height: 12px;
  width: 12px;
  min-height: 12px;
  min-width: 12px;
  border: 1.5px solid var(--color-blue-200);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date span.check span.centre {
  transition: 0.4s;
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date p {
  color: var(--color-blue-200);
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  transition: 0.4s;
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date:hover p {
  color: var(--color-blue-300);
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date:hover span.check {
  border: 1.5px solid var(--color-blue-300);
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date:hover span.check span.centre {
  height: 8px;
  width: 8px;
  background-color: var(--color-blue-300);
  border-radius: 100%;
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date.--actif span.check {
  border: 1.5px solid var(--color-blue-300);
  transition: 0.4s;
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date.--actif span.check span.centre {
  height: 8px;
  width: 8px;
  background-color: var(--color-blue-300);
  border-radius: 100%;
  transition: 0.4s;
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date.--actif p {
  color: var(--color-blue-300);
  transition: 0.4s;
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court button.date-perso {
  display: flex;
  height: 42px;
  margin: 20px 16px 0 16px;
  width: calc(100% - 32px);
  align-items: center;
  gap: 14px;
  align-self: stretch;
  border-radius: 4px;
  outline: none;
  border: none;
  background: var(--color-blue-50);
  color: var(--color-blue-300);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  cursor: pointer;
  transition: 0.4s;
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court button.date-perso:hover {
  background-color: #262262;
  color: #FFF;
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court button.date-perso:hover svg path[stroke] {
  stroke: #ffffff;
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court button.date-perso:hover svg path[fill] {
  fill: #ffffff;
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court button.date-perso svg {
  margin-left: 16px;
  transition: 0.4s;
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court button.date-perso svg path[stroke] {
  transition: 0.4s;
}
main.body-transaction div.filtre-date-export div.input-date div.option-date-court button.date-perso svg path[fill] {
  transition: 0.4s;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.filtre-date-export div.input-date div.option-date-court button.date-perso {
    width: calc(100% - 48px);
    margin: 20px 24px 0 24px;
  }
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours {
  width: 296px;
  height: 381px;
  cursor: auto;
  left: 254px;
  bottom: -381px;
  position: absolute;
  border-radius: 0 0 12px 0;
  background: var(--color-neutrals-50);
  display: none;
  flex-direction: column;
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours.--actif {
  display: flex;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours {
    width: 100vw;
    height: 497px;
    flex-direction: column;
    border-radius: 8px 8px 0 0;
    background: var(--color-neutrals-50);
    left: 0;
    bottom: 0;
    z-index: 6;
  }
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours div.retour {
  display: none;
  align-items: center;
  flex-direction: row;
  margin: 20px 24px 0 24px;
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours div.retour p {
  margin: 0 0 0 10px;
  color: var(--color-Neutrals-500);
  text-align: center;
  font-family: "Open Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours div.retour {
    display: flex;
  }
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-court {
  height: 53px;
  margin: 16px 16px 0 16px;
  width: calc(100% - 32px);
  border-bottom: 1px solid var(--color-blue-100);
  display: none;
  flex-direction: column;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-court {
    margin: 0 24px 0 24px;
    height: 65px;
    display: flex;
    width: calc(100% - 48px);
  }
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-court p {
  margin: 12px 0 20px 0;
  color: var(--color-blue-400);
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 21px;
  height: 21px;
  width: 100%;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-court p {
    margin: 24px 0 20px 0;
  }
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-jours {
  height: 52px;
  display: flex;
  width: 264px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 16px 16px 0 16px;
  border-bottom: 1px solid var(--color-blue-100);
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-jours {
    margin: 16px auto 0 auto;
  }
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-jours div.svg {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-jours p {
  width: 152px;
  max-width: 152px;
  margin: 0;
  color: var(--color-blue-300);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours div.weekdays {
  width: 224px;
  height: 32px;
  margin: 20px auto 0 auto;
  display: flex;
  flex-direction: row;
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours div.weekdays div.weekday {
  height: 32px;
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-blue-150);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours .days-grid {
  display: grid;
  margin: 8px auto 0 auto;
  grid-template-columns: repeat(7, 32px);
  gap: 0;
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours .days-grid.three {
  grid-template-columns: repeat(3, 1fr) !important;
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours .month-btn {
  aspect-ratio: 1;
  height: 32px;
  color: var(--color-neutrals-500);
  border: none;
  background-color: transparent;
  border-radius: 0;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours .day-btn {
  aspect-ratio: 1;
  height: 32px;
  color: var(--color-neutrals-500);
  border: none;
  background-color: transparent;
  border-radius: 0;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours .month-btn {
  height: 61px;
  width: 75px;
  color: var(--color-neutrals-500);
  border: none;
  background-color: transparent;
  border-radius: 0;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours .month-btn.endpoint {
  background: var(--color-blue-300) !important;
  color: var(--color-neutrals-50);
  border-radius: 4px;
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours .year-btn {
  height: 61px;
  width: 75px;
  color: var(--color-neutrals-500);
  border: none;
  background-color: transparent;
  border-radius: 0;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours .year-btn.endpoint {
  background: var(--color-blue-300) !important;
  color: var(--color-neutrals-100);
  border-radius: 4px;
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours .day-btn:hover:not(:disabled) {
  background: var(--color-blue-100);
  border-radius: 4px;
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours .day-btn:disabled {
  background: transparent;
  cursor: default;
  color: transparent;
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours .day-btn.in-range {
  color: var(--color-neutrals-500);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  background: var(--color-blue-100);
  line-height: 20px;
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours .day-btn.endpoint {
  background: var(--color-blue-300) !important;
  color: var(--color-neutrals-50);
  border-radius: 4px;
}
main.body-transaction div.filtre-date-export div.input-date div.menu-periode-jours .day-btn.today {
  border: 2px solid var(--color-blue-300);
  border-radius: 4px;
}
main.body-transaction span.background {
  position: absolute;
  display: none;
  left: -100svh;
  height: 0svh;
  width: 0svw;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction span.background {
    left: -100svh;
    display: flex;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 5;
    height: 100svh;
    width: 100svw;
  }
  main.body-transaction span.background.--actif {
    left: 0;
  }
}
main.body-transaction section.ventes {
  height: auto;
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 16px;
  overflow: auto;
  z-index: 1;
  padding: 0 28px 28px 28px;
}
main.body-transaction section.ventes table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border-radius: 8px 8px 0 0;
}
main.body-transaction section.ventes table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  transform: translateY(-1px);
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  color: var(--color-blue-300);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  border-top: 1px solid var(--color-neutrals-100);
  border-right: 1px solid var(--color-neutrals-100);
  border-left: 1px solid var(--color-neutrals-100);
  background: var(--color-neutrals-50);
}
main.body-transaction section.ventes table thead th:nth-child(1) {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
}
main.body-transaction section.ventes table thead th:nth-child(2) {
  padding: 0;
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  cursor: pointer;
  transform: translate(-15px, 0px);
  transition: background-color 0.2s ease;
}
main.body-transaction section.ventes table thead th:nth-child(2):hover {
  background-color: var(--color-neutrals-100);
}
main.body-transaction section.ventes table thead th:nth-child(2) svg {
  margin-left: 10px;
  transition: transform 0.2s ease;
}
main.body-transaction section.ventes table thead th:nth-child(2) svg path {
  transition: opacity 0.3s ease, stroke 0.3s ease, stroke-width 0.3s ease;
}
main.body-transaction section.ventes table thead th:nth-child(2).sort-asc svg path:first-child {
  stroke: var(--color-blue-300);
  stroke-width: 1.5;
  opacity: 1;
}
main.body-transaction section.ventes table thead th:nth-child(2).sort-asc svg path:last-child {
  opacity: 0.3;
}
main.body-transaction section.ventes table thead th:nth-child(2).sort-desc svg path:first-child {
  opacity: 0.3;
}
main.body-transaction section.ventes table thead th:nth-child(2).sort-desc svg path:last-child {
  stroke: var(--color-blue-300);
  stroke-width: 1.5;
  opacity: 1;
}
main.body-transaction section.ventes table thead th:nth-child(3) {
  padding: 0;
  width: 110px;
  min-width: 110px;
  max-width: 110px;
}
@media screen and (min-width: 320px) and (max-width: 1400px) {
  main.body-transaction section.ventes table thead th:nth-child(3) {
    width: 0px;
    min-width: 0px;
    max-width: 0px;
    visibility: hidden;
  }
}
main.body-transaction section.ventes table thead th:nth-child(4) {
  padding: 0 20px;
  text-align: left;
}
main.body-transaction section.ventes table thead th:nth-child(5) {
  padding: 0 20px;
  text-align: center;
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  box-sizing: content-box;
}
@media screen and (min-width: 320px) and (max-width: 1500px) {
  main.body-transaction section.ventes table thead th:nth-child(5) {
    width: 0;
    padding: 0;
    min-width: 0;
    max-width: 0;
    visibility: hidden;
  }
}
main.body-transaction section.ventes table thead th:nth-child(6) {
  padding: 0 20px;
  width: 90px;
  min-width: 90px;
  max-width: 90px;
  box-sizing: content-box;
}
main.body-transaction section.ventes table thead th:nth-child(7) {
  width: 120px;
  min-width: 120px;
  max-width: 120px;
}
main.body-transaction section.ventes table thead th:nth-child(8) {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
}
main.body-transaction section.ventes table tbody tr {
  height: 47px;
  border-right: 1px solid var(--color-neutrals-100);
  border-bottom: 1px solid var(--color-neutrals-100);
  border-left: 1px solid var(--color-neutrals-100);
  background: var(--color-blue-50);
  text-align: center;
  font-size: 14px;
}
main.body-transaction section.ventes table tbody tr td {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
main.body-transaction section.ventes table tbody tr td:nth-child(2) {
  text-align: left;
  padding: 0;
}
main.body-transaction section.ventes table tbody tr td:nth-child(3) {
  padding: 0;
}
main.body-transaction section.ventes table tbody tr td:nth-child(4) {
  padding: 0 20px;
  text-align: left;
}
main.body-transaction section.ventes table tbody tr td:nth-child(5) {
  padding: 0 20px;
}
@media screen and (min-width: 320px) and (max-width: 1500px) {
  main.body-transaction section.ventes table tbody tr td:nth-child(5) {
    width: 0;
    padding: 0;
    min-width: 0;
    max-width: 0;
    visibility: hidden;
  }
}
main.body-transaction section.ventes table tbody tr td:nth-child(6) {
  padding: 0 20px;
}
main.body-transaction section.ventes table tr.global {
  background-color: var(--color-blue-400);
  color: var(--color-neutrals-100);
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  border-right: 1px solid transparent;
  border-bottom: 1px solid var(--color-neutrals-100, var(--color-neutrals-100));
  border-left: 1px solid transparent;
}
main.body-transaction section.ventes table tr.global td:nth-child(2) {
  text-align: left;
}
main.body-transaction section.ventes table tr.global td:nth-child(4) {
  text-align: left;
}
main.body-transaction section.ventes table tr.global td:nth-child(5) {
  text-align: right;
}
@media screen and (min-width: 320px) and (max-width: 1500px) {
  main.body-transaction section.ventes table tr.global td:nth-child(5) {
    width: auto;
    padding: 0 20px;
    min-width: auto;
    max-width: auto;
    visibility: visible;
  }
}
main.body-transaction section.ventes table tr.global td:nth-child(6) {
  padding: 0 20px;
  text-align: center;
}
main.body-transaction section.ventes table tr.machine {
  background-color: var(--color-blue-300);
  color: var(--color-neutrals-100);
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  border-right: 1px solid transparent;
  border-bottom: 1px solid var(--color-neutrals-100);
  border-left: 1px solid transparent;
}
main.body-transaction section.ventes table tr.machine td:nth-child(2) {
  text-align: left;
}
main.body-transaction section.ventes table tr.machine td:nth-child(4) {
  text-align: left;
}
main.body-transaction section.ventes table tr.machine td:nth-child(5) {
  text-align: right;
}
@media screen and (min-width: 320px) and (max-width: 1500px) {
  main.body-transaction section.ventes table tr.machine td:nth-child(5) {
    width: auto;
    padding: 0 20px;
    min-width: auto;
    max-width: auto;
    visibility: visible;
  }
}
main.body-transaction section.ventes table tr.machine td:nth-child(6) {
  padding: 0 20px;
  text-align: center;
}
main.body-transaction section.ventes table tr.date {
  background-color: var(--color-blue-250);
  color: var(--color-neutrals-100);
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  border-right: 1px solid transparent;
  border-bottom: 1px solid var(--color-neutrals-100);
  border-left: 1px solid transparent;
}
main.body-transaction section.ventes table tr.date td:nth-child(2) {
  text-align: left;
}
main.body-transaction section.ventes table tr.date td:nth-child(4) {
  text-align: left;
}
main.body-transaction section.ventes table tr.date td:nth-child(5) {
  text-align: right;
}
@media screen and (min-width: 320px) and (max-width: 1500px) {
  main.body-transaction section.ventes table tr.date td:nth-child(5) {
    width: auto;
    padding: 0 20px;
    min-width: auto;
    max-width: auto;
    visibility: visible;
  }
}
main.body-transaction section.ventes table tr.date td:nth-child(6) {
  padding: 0 20px;
  text-align: center;
}
main.body-transaction div.filtre-croissant {
  display: none;
}
@media screen and (max-width: 719px) {
  main.body-transaction div.filtre-croissant {
    display: flex;
    height: 220px;
    width: 100svw;
    background-color: var(--color-neutrals-50);
    border-radius: 8px 8px 0 0;
    position: absolute;
    bottom: 0;
    left: -100svw;
    flex-direction: column;
    z-index: 6;
  }
  main.body-transaction div.filtre-croissant.--actif {
    left: 0;
  }
  main.body-transaction div.filtre-croissant p.h1 {
    color: var(--color-blue-400);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px;
    margin-top: 20px;
    margin-left: 24px;
  }
  main.body-transaction div.filtre-croissant div.menu-filtre-croissant {
    margin: 20px 16px 0 16px;
    gap: 4px;
    display: flex;
    flex-direction: column;
  }
}
@media screen and (max-width: 719px) and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.filtre-croissant div.menu-filtre-croissant {
    margin: 20px 24px 0 24px;
  }
}
@media screen and (max-width: 719px) {
  main.body-transaction div.filtre-croissant div.menu-filtre-croissant div.btn-croissant {
    width: 100%;
    gap: 15px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
  }
  main.body-transaction div.filtre-croissant div.menu-filtre-croissant div.btn-croissant span.check {
    height: 12px;
    width: 12px;
    min-height: 12px;
    min-width: 12px;
    border: 1.5px solid var(--color-blue-200);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  main.body-transaction div.filtre-croissant div.menu-filtre-croissant div.btn-croissant p {
    color: var(--color-blue-200);
    font-family: "Open Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }
  main.body-transaction div.filtre-croissant div.menu-filtre-croissant div.btn-croissant.--actif span.check {
    border: 1.5px solid var(--color-blue-300);
  }
  main.body-transaction div.filtre-croissant div.menu-filtre-croissant div.btn-croissant.--actif span.check span.centre {
    height: 8px;
    width: 8px;
    background-color: var(--color-blue-300);
    border-radius: 100%;
  }
  main.body-transaction div.filtre-croissant div.menu-filtre-croissant div.btn-croissant.--actif p {
    color: var(--color-blue-300);
  }
  main.body-transaction div.filtre-croissant div.titre-filtre-croissant {
    height: 53px;
    margin: 16px 16px 0 16px;
    width: calc(100% - 32px);
    border-bottom: 1px solid var(--color-blue-100);
    display: flex;
    flex-direction: column;
  }
}
@media screen and (max-width: 719px) and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.filtre-croissant div.titre-filtre-croissant {
    margin: 0 24px 0 24px;
    height: 65px;
    width: calc(100% - 48px);
  }
}
@media screen and (max-width: 719px) {
  main.body-transaction div.filtre-croissant div.titre-filtre-croissant p {
    margin: 12px 0 20px 0;
    color: var(--color-blue-400);
    font-family: "Open Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px;
    height: 21px;
    width: 100%;
  }
}
@media screen and (max-width: 719px) and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction div.filtre-croissant div.titre-filtre-croissant p {
    margin: 24px 0 20px 0;
  }
}

/* ========================================
   VERSION MOBILE - Cartes accordéons
   ======================================== */
/* Animation du spinner de chargement */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ========================================
   CORRECTIFS DESKTOP - Tableau
   ======================================== */
/* Classe pour cacher les lignes du tableau */
.hidden {
  display: none !important;
}

/* S'assurer que le tableau reste en mode table sur desktop */
@media screen and (min-width: 720px) {
  section.ventes {
    display: block !important;
  }
  section.ventes table {
    display: table !important;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }
  section.ventes table tbody {
    display: table-row-group !important;
  }
  section.ventes table tbody tr {
    display: table-row !important;
  }
  section.ventes table tbody tr td {
    display: table-cell !important;
  }
  /* Les lignes cachées restent cachées */
  section.ventes table tbody tr.hidden {
    display: none !important;
  }
}
@media screen and (max-width: 900px) {
  /* Masquer le tableau en mobile */
  section.ventes table {
    display: none;
  }
  /* Container principal des cartes mobiles */
  section.ventes {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    padding: 4px 20px 12px 20px !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
  }
  section.ventes::-webkit-scrollbar {
    display: none;
  }
  /* ============ CARTE MACHINE ============ */
  .mobile-machine-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .mobile-machine-header {
    display: flex;
    gap: 12px;
    height: 50px;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
  }
  .mobile-machine-header .machine-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }
  .mobile-machine-card.expanded .mobile-machine-header .machine-icon {
    transform: rotate(180deg);
  }
  .mobile-machine-header .machine-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .mobile-machine-header .machine-name {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: var(--color-neutrals-500);
    text-align: left;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .mobile-machine-header .machine-quantity {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-neutrals-400);
    text-align: left;
    margin: 0;
  }
  .mobile-machine-header .machine-total {
    background: rgba(98, 186, 135, 0.1);
    padding: 4px 12px;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .mobile-machine-header .machine-total p {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #22412F;
    margin: 0;
  }
  /* Container des transactions */
  .mobile-transactions-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  /* ============ CARTE TRANSACTION ============ */
  .mobile-transaction-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--color-neutrals-50);
    border: 0.5px solid var(--color-neutrals-100);
    border-radius: 4px;
    padding: 16px 12px;
    overflow: hidden;
  }
  .mobile-transaction-card.error {
    background: var(--color-red-50);
  }
  .mobile-transaction-header {
    display: flex;
    gap: 8px;
    height: 24px;
    align-items: center;
    cursor: pointer;
    width: 100%;
  }
  .mobile-transaction-header .collapse-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }
  .mobile-transaction-card.expanded .mobile-transaction-header .collapse-icon {
    transform: rotate(90deg);
  }
  .mobile-transaction-header .transaction-date {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-neutrals-500);
    margin: 0;
    text-align: left;
  }
  .mobile-transaction-header .error-badge {
    background: rgba(193, 64, 57, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
  }
  .mobile-transaction-header .error-badge p {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-red-200);
    margin: 0;
  }
  .mobile-transaction-header .transaction-amount {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
    color: var(--color-neutrals-500);
    text-align: right;
    margin: 0 0 0 auto;
    flex-shrink: 0;
  }
  /* Détails de la transaction */
  .mobile-transaction-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .transaction-detail-row {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    color: var(--color-neutrals-450);
    width: 100%;
  }
  .transaction-detail-row .detail-label {
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    margin: 0;
    flex-shrink: 0;
  }
  .transaction-detail-row .detail-value {
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    margin: 0;
    text-align: right;
  }
  .transaction-detail-row .detail-value.product-name {
    flex: 1;
    text-align: left;
    white-space: pre-wrap;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .transaction-detail-row:first-child .detail-label {
    flex: 1;
  }
  .transaction-detail-row:first-child .detail-value {
    flex-shrink: 0;
  }
  /* ============ AJUSTEMENTS GÉNÉRAUX MOBILE ============ */
  /* Espace pour le bandeau fixe */
  /* Logo SVG en fond */
  main.body-transaction svg.svg-fond {
    right: -190px;
    bottom: -50px;
    height: 480px;
    width: 550px;
  }
  /* Background pour les modales mobiles */
  main.body-transaction span.background {
    display: flex;
    left: -100vw;
    top: 0;
  }
  main.body-transaction span.background.--actif {
    left: 0;
  }
}
.chart-container {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 1;
  width: calc(100% - 56px);
  margin: 0 28px 100% 28px;
}
.chart-container .chart-wrapper {
  width: 100%;
  height: 50svh;
  position: relative;
}
.chart-container .chart-wrapper .chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E0E0E0;
}
.chart-container .chart-wrapper .chart-header h3 {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #262262;
  margin: 0;
}
.chart-container .chart-wrapper .chart-header .chart-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.chart-container .chart-wrapper .chart-header .chart-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.chart-container .chart-wrapper .chart-header .chart-legend .legend-item:hover {
  opacity: 0.8;
}
.chart-container .chart-wrapper .chart-header .chart-legend .legend-item.inactive {
  opacity: 0.4;
}
.chart-container .chart-wrapper .chart-header .chart-legend .legend-item.inactive .legend-color {
  background-color: #D0D0D0 !important;
}
.chart-container .chart-wrapper .chart-header .chart-legend .legend-item.inactive .legend-label {
  text-decoration: line-through;
  color: #999999;
}
.chart-container .chart-wrapper .chart-header .chart-legend .legend-item .legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  transition: background-color 0.3s ease;
}
.chart-container .chart-wrapper .chart-header .chart-legend .legend-item .legend-label {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #3D3D3D;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}
.chart-container .chart-wrapper canvas {
  width: 100% !important;
  height: calc(100% - 80px) !important;
}

@media screen and (max-width: 900px) {
  .chart-container {
    display: none !important;
  }
  .block-vue {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .chart-container {
    padding: 20px;
  }
  .chart-container .chart-wrapper {
    height: 400px;
  }
  .chart-container .chart-wrapper .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  .chart-container .chart-wrapper .chart-header h3 {
    font-size: 16px;
  }
  .chart-container .chart-wrapper .chart-header .chart-legend {
    width: 100%;
    gap: 15px;
  }
}
#view-list,
#view-chart {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#view-list {
  opacity: 1;
  transform: translateY(0);
}
#view-list[style*="display: none"] {
  opacity: 0;
  transform: translateY(-10px);
}

#view-chart {
  opacity: 0;
  transform: translateY(10px);
}
#view-chart[style*="display: flex"] {
  opacity: 1;
  transform: translateY(0);
}

main.body-transaction-produit {
  display: flex;
  position: relative;
  flex-direction: column;
  align-self: stretch;
  background: var(--Fond, linear-gradient(127deg, #F8F9FA 0%, #F5F4FF 100.57%));
  height: 100svh;
  width: 100%;
  overflow: hidden;
}
main.body-transaction-produit svg.svg-fond {
  position: absolute;
  right: -18vh;
  bottom: -18vh;
  z-index: 1;
  width: auto;
  height: 90vh;
}
main.body-transaction-produit div.bandeau-top {
  height: 80px;
  min-height: 80px;
  width: calc(100% - 56px);
  margin: 8px 28px 0 28px;
  border-bottom: 2px solid var(--color-neutrals-100);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.bandeau-top {
    /* Style identique au catalogue */
    position: fixed;
    top: 0;
    left: 0;
    height: 72px;
    min-height: 72px;
    border-bottom: none;
    width: 100svw;
    margin: 0;
    padding-left: 80px;
    padding-top: 8px;
    z-index: 3;
    border-radius: 0 0 8px 8px;
    background: var(--neutral-50, #FCFCFF);
    box-sizing: border-box;
    justify-content: flex-start;
  }
}
main.body-transaction-produit div.bandeau-top p {
  color: #262262;
  font-family: "Open Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: bold;
  line-height: normal;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.bandeau-top p {
    font-size: 20px;
    margin: 0;
  }
}
main.body-transaction-produit div.filtre-periode-vue {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 20px;
  height: 42px;
  min-height: 42px;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  z-index: 2;
  scrollbar-width: none;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-periode-vue {
    margin-top: 92px;
  }
}
main.body-transaction-produit div.filtre-periode-vue::-webkit-scrollbar {
  display: none;
}
main.body-transaction-produit div.filtre-periode-vue div.block-vue {
  display: flex;
  flex-direction: row;
  height: 26px;
  gap: 6px;
  margin-top: auto;
  margin-right: 28px;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 320px) and (max-width: 900px) {
  main.body-transaction-produit div.filtre-periode-vue div.block-vue {
    display: none;
  }
}
main.body-transaction-produit div.filtre-periode-vue div.block-vue p {
  color: #131131;
  text-align: center;
  font-family: "Open Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
main.body-transaction-produit div.filtre-periode-vue div.block-vue div.button-vue {
  border-radius: 160px;
  width: 58px;
  height: 26px;
  background: var(--color-blue-300, var(--color-blue-300));
  display: flex;
  justify-content: start;
  align-items: start;
  cursor: pointer;
}
main.body-transaction-produit div.filtre-periode-vue div.block-vue div.button-vue.active {
  justify-content: end;
  background: var(--color-green-200);
}
main.body-transaction-produit div.filtre-periode-vue div.block-vue div.button-vue span {
  margin: 3px;
  height: 20px;
  width: 20px;
  display: block;
  border-radius: 100%;
  background-color: var(--color-neutrals-50);
  filter: drop-shadow(2px 1px 6px rgba(0, 0, 0, 0.25));
}
main.body-transaction-produit div.filtre-periode-vue div.block-filtre {
  height: 40px;
  min-width: fit-content;
  border-radius: 4px;
  padding: 0 4px;
  border: 1px solid var(--color-neutrals-100);
  background: var(--color-neutrals-50);
  margin-left: 28px;
  margin-right: 28px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  flex-shrink: 0;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-periode-vue div.block-filtre {
    margin-left: 20px;
    margin-right: 20px;
  }
}
main.body-transaction-produit div.filtre-periode-vue div.block-filtre div.btn {
  display: flex;
  height: 40px;
  padding: 0px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
}
main.body-transaction-produit div.filtre-periode-vue div.block-filtre div.btn p {
  color: var(--color-blue-150);
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 21px;
  transition: 0.4s;
  white-space: nowrap;
  margin: 0;
}
main.body-transaction-produit div.filtre-periode-vue div.block-filtre div.btn:hover p {
  color: var(--color-blue-300);
}
main.body-transaction-produit div.filtre-periode-vue div.block-filtre div.btn.--actif {
  border-bottom: 2px solid var(--color-blue-300);
}
main.body-transaction-produit div.filtre-periode-vue div.block-filtre div.btn.--actif p {
  color: var(--color-blue-300);
}
main.body-transaction-produit div.filtre-periode-vue {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 20px;
  height: 42px;
  min-height: 42px;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  z-index: 2;
  scrollbar-width: none;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-periode-vue {
    margin-top: 92px;
  }
}
main.body-transaction-produit div.filtre-periode-vue::-webkit-scrollbar {
  display: none;
}
main.body-transaction-produit div.filtre-periode-vue div.block-vue {
  display: flex;
  flex-direction: row;
  height: 26px;
  gap: 6px;
  margin-top: auto;
  margin-right: 28px;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 320px) and (max-width: 900px) {
  main.body-transaction-produit div.filtre-periode-vue div.block-vue {
    display: none;
  }
}
main.body-transaction-produit div.filtre-periode-vue div.block-vue p {
  color: #131131;
  text-align: center;
  font-family: "Open Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
main.body-transaction-produit div.filtre-periode-vue div.block-vue div.button-vue {
  border-radius: 160px;
  width: 58px;
  height: 26px;
  background: var(--color-blue-300);
  display: flex;
  justify-content: start;
  align-items: start;
  cursor: pointer;
  transition: 0.2s;
}
main.body-transaction-produit div.filtre-periode-vue div.block-vue div.button-vue.active {
  justify-content: end;
  background: var(--color-green-200);
}
main.body-transaction-produit div.filtre-periode-vue div.block-vue div.button-vue span {
  margin: 3px;
  height: 20px;
  width: 20px;
  display: block;
  border-radius: 100%;
  background-color: var(--color-neutrals-50);
  filter: drop-shadow(2px 1px 6px rgba(0, 0, 0, 0.25));
}
main.body-transaction-produit div.filtre-date-export {
  height: 42px;
  min-height: 42px;
  width: auto;
  margin: 20px 28px 20px 28px;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;
  z-index: 5;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-date-export {
    margin: 20px;
    max-width: calc(100svw - 40px);
  }
}
main.body-transaction-produit div.filtre-date-export div.btn-clotures {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid var(--color-blue-400);
  transition: 0.4s;
  display: inline-flex;
  padding: 7px 11px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
main.body-transaction-produit div.filtre-date-export div.btn-clotures:hover {
  border: 1px solid var(--color-green-200);
}
main.body-transaction-produit div.filtre-date-export div.btn-clotures:hover p {
  color: var(--color-green-200);
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-date-export div.btn-clotures {
    display: none;
  }
}
main.body-transaction-produit div.filtre-date-export div.btn-clotures p {
  color: #161338;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  transition: 0.4s;
}
main.body-transaction-produit div.filtre-date-export div.btn-exporter {
  display: flex;
  margin-left: 12px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: var(--color-green-200);
  cursor: pointer;
  transition: 0.4s;
  display: inline-flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
main.body-transaction-produit div.filtre-date-export div.btn-exporter:hover {
  background: var(--color-green-150);
}
main.body-transaction-produit div.filtre-date-export div.btn-exporter p {
  color: var(--color-green-500);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  transition: 0.4s;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-date-export div.btn-exporter {
    margin-left: 12px;
    min-width: 89px;
    gap: 6px;
    background: transparent;
  }
  main.body-transaction-produit div.filtre-date-export div.btn-exporter p {
    color: var(--color-neutrals-500);
  }
}
main.body-transaction-produit div.filtre-date-export div.btn-trier {
  display: none;
  min-width: 123px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: var(--color-green-200);
  cursor: pointer;
  transition: 0.4s;
  padding: 8px 0px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
main.body-transaction-produit div.filtre-date-export div.btn-trier p {
  color: var(--color-green-500);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-date-export div.btn-trier {
    min-width: 62px;
    background: transparent;
    display: flex;
  }
  main.body-transaction-produit div.filtre-date-export div.btn-trier p {
    color: var(--color-neutrals-500);
  }
}
main.body-transaction-produit div.filtre-date-export div.input-date {
  display: flex;
  flex-direction: row;
  height: 42px;
  width: 254px;
  min-width: 254px;
  max-width: 254px;
  border-radius: 4px;
  background: var(--color-neutrals-50);
  justify-content: center;
  align-items: center;
  margin-right: auto;
  cursor: pointer;
  position: relative;
  border: 1px solid transparent;
  transition: 0.4s;
}
main.body-transaction-produit div.filtre-date-export div.input-date:hover {
  border-color: var(--neutral-150);
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-date-export div.input-date {
    width: 165px;
    min-width: 165px;
    max-width: 165px;
    margin-right: auto;
    position: initial;
  }
}
main.body-transaction-produit div.filtre-date-export div.input-date p {
  margin-right: auto;
  color: var(--color-blue-300, var(--color-blue-300));
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.svg:first-child {
  margin-left: 16px;
  margin-right: 8px;
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.svg.last {
  margin-right: 16px;
  margin-left: 8px;
  height: 12px;
  width: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court {
  cursor: auto;
  left: 0;
  bottom: -381px;
  position: absolute;
  width: 254px;
  height: 381px;
  border-radius: 0 0 0 12px;
  background: var(--color-neutrals-50);
  display: none;
  flex-direction: column;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court.--actif {
  display: flex;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court {
    width: 100vw;
    height: 377px;
    flex-direction: column;
    border-radius: 8px 8px 0 0;
    background: var(--color-neutrals-50);
    left: 0;
    bottom: 0;
    z-index: 6;
  }
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court div.titre-date-court {
  height: 53px;
  margin: 16px 16px 0 16px;
  width: calc(100% - 32px);
  border-bottom: 1px solid var(--color-blue-100);
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court div.titre-date-court {
    margin: 0 24px 0 24px;
    height: 65px;
    width: calc(100% - 48px);
  }
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court div.titre-date-court p {
  margin: 12px 0 20px 0;
  color: var(--color-blue-400);
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 21px;
  height: 21px;
  width: 100%;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court div.titre-date-court p {
    margin: 24px 0 20px 0;
  }
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court div.menu-date-court {
  margin: 20px 16px 0 16px;
  gap: 4px;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court div.menu-date-court {
    margin: 20px 24px 0 24px;
  }
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date {
  width: 100%;
  gap: 15px;
  height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date span.check {
  height: 12px;
  width: 12px;
  min-height: 12px;
  min-width: 12px;
  border: 1.5px solid var(--color-blue-200);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date span.check span.centre {
  transition: 0.4s;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date p {
  color: var(--color-blue-200);
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  transition: 0.4s;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date:hover p {
  color: var(--color-blue-300);
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date:hover span.check {
  border: 1.5px solid var(--color-blue-300);
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date:hover span.check span.centre {
  height: 8px;
  width: 8px;
  background-color: var(--color-blue-300);
  border-radius: 100%;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date.--actif span.check {
  border: 1.5px solid var(--color-blue-300);
  transition: 0.4s;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date.--actif span.check span.centre {
  height: 8px;
  width: 8px;
  background-color: var(--color-blue-300);
  border-radius: 100%;
  transition: 0.4s;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date.--actif p {
  color: var(--color-blue-300);
  transition: 0.4s;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court button.date-perso {
  display: flex;
  height: 42px;
  margin: 20px 16px 0 16px;
  width: calc(100% - 32px);
  align-items: center;
  gap: 14px;
  align-self: stretch;
  border-radius: 4px;
  outline: none;
  border: none;
  background: var(--color-blue-50);
  color: var(--color-blue-300);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  cursor: pointer;
  transition: 0.4s;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court button.date-perso:hover {
  background-color: #262262;
  color: #FFF;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court button.date-perso:hover svg path[stroke] {
  stroke: #ffffff;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court button.date-perso:hover svg path[fill] {
  fill: #ffffff;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court button.date-perso svg {
  margin-left: 16px;
  transition: 0.4s;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court button.date-perso svg path[stroke] {
  transition: 0.4s;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court button.date-perso svg path[fill] {
  transition: 0.4s;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-date-export div.input-date div.option-date-court button.date-perso {
    width: calc(100% - 48px);
    margin: 20px 24px 0 24px;
  }
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours {
  width: 296px;
  height: 381px;
  cursor: auto;
  left: 254px;
  bottom: -381px;
  position: absolute;
  border-radius: 0 0 12px 0;
  background: var(--color-neutrals-50);
  display: none;
  flex-direction: column;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours.--actif {
  display: flex;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours {
    width: 100vw;
    height: 497px;
    flex-direction: column;
    border-radius: 8px 8px 0 0;
    background: var(--color-neutrals-50);
    left: 0;
    bottom: 0;
    z-index: 6;
  }
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours div.retour {
  display: none;
  align-items: center;
  flex-direction: row;
  margin: 20px 24px 0 24px;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours div.retour p {
  margin: 0 0 0 10px;
  color: var(--color-Neutrals-500);
  text-align: center;
  font-family: "Open Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours div.retour {
    display: flex;
  }
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-court {
  height: 53px;
  margin: 16px 16px 0 16px;
  width: calc(100% - 32px);
  border-bottom: 1px solid var(--color-blue-100);
  display: none;
  flex-direction: column;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-court {
    margin: 0 24px 0 24px;
    height: 65px;
    display: flex;
    width: calc(100% - 48px);
  }
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-court p {
  margin: 12px 0 20px 0;
  color: var(--color-blue-400);
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 21px;
  height: 21px;
  width: 100%;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-court p {
    margin: 24px 0 20px 0;
  }
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-jours {
  height: 52px;
  display: flex;
  width: 264px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 16px 16px 0 16px;
  border-bottom: 1px solid var(--color-blue-100);
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-jours {
    margin: 16px auto 0 auto;
  }
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-jours div.svg {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-jours p {
  width: 152px;
  max-width: 152px;
  margin: 0;
  color: var(--color-blue-300);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours div.weekdays {
  width: 224px;
  height: 32px;
  margin: 20px auto 0 auto;
  display: flex;
  flex-direction: row;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours div.weekdays div.weekday {
  height: 32px;
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-blue-150);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours .days-grid {
  display: grid;
  margin: 8px auto 0 auto;
  grid-template-columns: repeat(7, 32px);
  gap: 0;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours .days-grid.three {
  grid-template-columns: repeat(3, 1fr) !important;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours .month-btn {
  aspect-ratio: 1;
  height: 32px;
  color: var(--color-neutrals-500);
  border: none;
  background-color: transparent;
  border-radius: 0;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours .day-btn {
  aspect-ratio: 1;
  height: 32px;
  color: var(--color-neutrals-500);
  border: none;
  background-color: transparent;
  border-radius: 0;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours .month-btn {
  height: 61px;
  width: 75px;
  color: var(--color-neutrals-500);
  border: none;
  background-color: transparent;
  border-radius: 0;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours .month-btn.endpoint {
  background: var(--color-blue-300) !important;
  color: var(--color-neutrals-50);
  border-radius: 4px;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours .year-btn {
  height: 61px;
  width: 75px;
  color: var(--color-neutrals-500);
  border: none;
  background-color: transparent;
  border-radius: 0;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours .year-btn.endpoint {
  background: var(--color-blue-300) !important;
  color: var(--color-neutrals-100);
  border-radius: 4px;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours .day-btn:hover:not(:disabled) {
  background: var(--color-blue-100);
  border-radius: 4px;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours .day-btn:disabled {
  background: transparent;
  cursor: default;
  color: transparent;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours .day-btn.in-range {
  color: var(--color-neutrals-500);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  background: var(--color-blue-100);
  line-height: 20px;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours .day-btn.endpoint {
  background: var(--color-blue-300) !important;
  color: var(--color-neutrals-50);
  border-radius: 4px;
}
main.body-transaction-produit div.filtre-date-export div.input-date div.menu-periode-jours .day-btn.today {
  border: 2px solid var(--color-blue-300);
  border-radius: 4px;
}
main.body-transaction-produit span.background {
  position: absolute;
  display: none;
  left: -100svh;
  height: 0svh;
  width: 0svw;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit span.background {
    left: -100svh;
    display: flex;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 5;
    height: 100svh;
    width: 100svw;
  }
  main.body-transaction-produit span.background.--actif {
    left: 0;
  }
}
main.body-transaction-produit section.ventesProduit {
  height: auto;
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 16px;
  overflow: auto;
  z-index: 1;
  padding: 0 28px 28px 28px;
}
main.body-transaction-produit section.ventesProduit table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border-radius: 8px 8px 0 0;
}
main.body-transaction-produit section.ventesProduit table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  transform: translateY(-1px);
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  color: var(--color-blue-300);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  border-top: 1px solid var(--color-neutrals-100);
  border-right: 1px solid var(--color-neutrals-100);
  border-left: 1px solid var(--color-neutrals-100);
  background: var(--color-neutrals-50);
}
main.body-transaction-produit section.ventesProduit table thead th:nth-child(1) {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
}
main.body-transaction-produit section.ventesProduit table thead th:nth-child(2) {
  width: 140px;
  min-width: 140px;
  max-width: 140px;
}
main.body-transaction-produit section.ventesProduit table thead th svg {
  margin-left: 10px;
  transition: transform 0.2s ease;
}
main.body-transaction-produit section.ventesProduit table thead th:nth-child(2),
main.body-transaction-produit section.ventesProduit table thead th:nth-child(3),
main.body-transaction-produit section.ventesProduit table thead th:nth-child(5),
main.body-transaction-produit section.ventesProduit table thead th:nth-child(6) {
  cursor: pointer;
  transition: background-color 0.2s ease;
}
main.body-transaction-produit section.ventesProduit table thead th:nth-child(2):hover,
main.body-transaction-produit section.ventesProduit table thead th:nth-child(3):hover,
main.body-transaction-produit section.ventesProduit table thead th:nth-child(5):hover,
main.body-transaction-produit section.ventesProduit table thead th:nth-child(6):hover {
  background-color: var(--color-neutrals-100);
}
main.body-transaction-produit section.ventesProduit table thead th:nth-child(2).sort-asc svg path:first-child,
main.body-transaction-produit section.ventesProduit table thead th:nth-child(3).sort-asc svg path:first-child,
main.body-transaction-produit section.ventesProduit table thead th:nth-child(5).sort-asc svg path:first-child,
main.body-transaction-produit section.ventesProduit table thead th:nth-child(6).sort-asc svg path:first-child {
  stroke: var(--color-blue-300);
  stroke-width: 1.5;
}
main.body-transaction-produit section.ventesProduit table thead th:nth-child(2).sort-asc svg path:last-child,
main.body-transaction-produit section.ventesProduit table thead th:nth-child(3).sort-asc svg path:last-child,
main.body-transaction-produit section.ventesProduit table thead th:nth-child(5).sort-asc svg path:last-child,
main.body-transaction-produit section.ventesProduit table thead th:nth-child(6).sort-asc svg path:last-child {
  opacity: 0.3;
}
main.body-transaction-produit section.ventesProduit table thead th:nth-child(2).sort-desc svg path:first-child,
main.body-transaction-produit section.ventesProduit table thead th:nth-child(3).sort-desc svg path:first-child,
main.body-transaction-produit section.ventesProduit table thead th:nth-child(5).sort-desc svg path:first-child,
main.body-transaction-produit section.ventesProduit table thead th:nth-child(6).sort-desc svg path:first-child {
  opacity: 0.3;
}
main.body-transaction-produit section.ventesProduit table thead th:nth-child(2).sort-desc svg path:last-child,
main.body-transaction-produit section.ventesProduit table thead th:nth-child(3).sort-desc svg path:last-child,
main.body-transaction-produit section.ventesProduit table thead th:nth-child(5).sort-desc svg path:last-child,
main.body-transaction-produit section.ventesProduit table thead th:nth-child(6).sort-desc svg path:last-child {
  stroke: var(--color-blue-300);
  stroke-width: 1.5;
}
main.body-transaction-produit div.filtre-croissant {
  display: none;
}
@media screen and (max-width: 719px) {
  main.body-transaction-produit div.filtre-croissant {
    display: flex;
    height: 540px;
    width: 100svw;
    background-color: var(--color-neutrals-50);
    border-radius: 8px 8px 0 0;
    position: absolute;
    bottom: 0;
    left: -100svw;
    flex-direction: column;
    z-index: 6;
  }
  main.body-transaction-produit div.filtre-croissant.--actif {
    left: 0;
  }
  main.body-transaction-produit div.filtre-croissant p.h1 {
    color: var(--color-blue-400);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px;
    margin-top: 20px;
    margin-left: 24px;
  }
  main.body-transaction-produit div.filtre-croissant div.menu-filtre-croissant {
    margin: 20px 16px 0 16px;
    gap: 4px;
    display: flex;
    flex-direction: column;
  }
}
@media screen and (max-width: 719px) and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-croissant div.menu-filtre-croissant {
    margin: 20px 24px 0 24px;
  }
}
@media screen and (max-width: 719px) {
  main.body-transaction-produit div.filtre-croissant div.menu-filtre-croissant div.btn-croissant {
    width: 100%;
    gap: 15px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
  }
  main.body-transaction-produit div.filtre-croissant div.menu-filtre-croissant div.btn-croissant span.check {
    height: 12px;
    width: 12px;
    min-height: 12px;
    min-width: 12px;
    border: 1.5px solid var(--color-blue-200);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  main.body-transaction-produit div.filtre-croissant div.menu-filtre-croissant div.btn-croissant p {
    color: var(--color-blue-200);
    font-family: "Open Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }
  main.body-transaction-produit div.filtre-croissant div.menu-filtre-croissant div.btn-croissant.--actif span.check {
    border: 1.5px solid var(--color-blue-300);
  }
  main.body-transaction-produit div.filtre-croissant div.menu-filtre-croissant div.btn-croissant.--actif span.check span.centre {
    height: 8px;
    width: 8px;
    background-color: var(--color-blue-300);
    border-radius: 100%;
  }
  main.body-transaction-produit div.filtre-croissant div.menu-filtre-croissant div.btn-croissant.--actif p {
    color: var(--color-blue-300);
  }
  main.body-transaction-produit div.filtre-croissant div.titre-filtre-croissant {
    height: 53px;
    margin: 16px 16px 0 16px;
    width: calc(100% - 32px);
    border-bottom: 1px solid var(--color-blue-100);
    display: flex;
    flex-direction: column;
  }
}
@media screen and (max-width: 719px) and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-croissant div.titre-filtre-croissant {
    margin: 0 24px 0 24px;
    height: 65px;
    width: calc(100% - 48px);
  }
}
@media screen and (max-width: 719px) {
  main.body-transaction-produit div.filtre-croissant div.titre-filtre-croissant p {
    margin: 12px 0 20px 0;
    color: var(--color-blue-400);
    font-family: "Open Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px;
    height: 21px;
    width: 100%;
  }
}
@media screen and (max-width: 719px) and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-produit div.filtre-croissant div.titre-filtre-croissant p {
    margin: 24px 0 20px 0;
  }
}

/* Styles pour la page Transactions par Produit - Desktop */
section.ventesProduit table tbody tr {
  height: 47px;
  border-right: 1px solid var(--color-neutrals-100);
  border-bottom: 1px solid var(--color-neutrals-100);
  border-left: 1px solid var(--color-neutrals-100);
  background: var(--color-blue-50);
  text-align: center;
  font-size: 14px;
}
section.ventesProduit table tbody tr td {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
section.ventesProduit table tbody tr.machine {
  background-color: var(--color-blue-300);
  color: var(--color-neutrals-100);
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  border-right: 1px solid transparent;
  border-bottom: 1px solid var(--color-neutrals-100);
  border-left: 1px solid transparent;
}
section.ventesProduit table tbody tr.machine td:nth-child(2) {
  text-align: left;
}
section.ventesProduit table tbody tr.machine td:nth-child(3) {
  text-align: right;
}
section.ventesProduit table tbody tr.machine td:nth-child(4) {
  text-align: center;
  padding: 0 20px;
}
section.ventesProduit table tbody tr.accordion-content td:nth-child(2) {
  text-align: center;
}
section.ventesProduit table tbody tr.accordion-content td:nth-child(3) {
  text-align: left;
  padding: 0 20px;
}
section.ventesProduit table tbody tr.accordion-content td:nth-child(4) {
  text-align: center;
}
section.ventesProduit table tbody tr.accordion-content td:nth-child(5) {
  text-align: center;
}
section.ventesProduit table tbody tr.accordion-content td:nth-child(6) {
  text-align: center;
  padding: 0 20px;
}

/* Classe pour cacher les lignes du tableau */
.hidden {
  display: none !important;
}

/* S'assurer que le tableau reste en mode table sur desktop */
@media screen and (min-width: 720px) {
  section.ventesProduit {
    display: block !important;
  }
  section.ventesProduit table {
    display: table !important;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }
  section.ventesProduit table tbody {
    display: table-row-group !important;
  }
  section.ventesProduit table tbody tr {
    display: table-row !important;
  }
  section.ventesProduit table tbody tr td {
    display: table-cell !important;
  }
  /* Les lignes cachées restent cachées */
  section.ventesProduit table tbody tr.hidden {
    display: none !important;
  }
}
/* ========================================
   VERSION MOBILE - Cartes produits
   ======================================== */
@media screen and (max-width: 900px) {
  /* Masquer le tableau en mobile */
  section.ventesProduit table {
    display: none;
  }
  /* Container principal des cartes mobiles */
  section.ventesProduit {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    padding: 4px 20px 12px 20px !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
  }
  section.ventesProduit::-webkit-scrollbar {
    display: none;
  }
  /* ============ CARTE MACHINE ============ */
  .mobile-machine-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .mobile-machine-header {
    display: flex;
    gap: 12px;
    height: 50px;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
  }
  .mobile-machine-header .machine-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }
  .mobile-machine-card.expanded .mobile-machine-header .machine-icon {
    transform: rotate(180deg);
  }
  .mobile-machine-header .machine-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .mobile-machine-header .machine-name {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: var(--color-neutrals-500);
    text-align: left;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .mobile-machine-header .machine-quantity {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-neutrals-400);
    text-align: left;
    margin: 0;
  }
  .mobile-machine-header .machine-total {
    background: rgba(98, 186, 135, 0.1);
    padding: 4px 12px;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .mobile-machine-header .machine-total p {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #22412F;
    margin: 0;
  }
  /* Container des produits */
  .mobile-products-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  /* ============ CARTE PRODUIT ============ */
  .mobile-product-card {
    background: var(--color-neutrals-50);
    border: 0.5px solid var(--color-neutrals-100);
    border-radius: 4px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .product-id {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-blue-300);
    margin: 0;
  }
  .product-amount {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-green-500);
    margin: 0;
  }
  .product-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .product-name {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-neutrals-500);
    margin: 0;
  }
  .product-meta {
    display: flex;
    gap: 12px;
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    color: var(--color-neutrals-450);
  }
  .product-code,
  .product-quantity {
    margin: 0;
  }
  /* ============ AJUSTEMENTS GÉNÉRAUX MOBILE ============ */
  /* Logo SVG en fond */
  main.body-transaction-produit svg.svg-fond {
    right: -190px;
    bottom: -50px;
    height: 480px;
    width: 550px;
  }
  /* Background pour les modales mobiles */
  main.body-transaction-produit span.background {
    display: flex;
    left: -100vw;
  }
  main.body-transaction-produit span.background.--actif {
    left: 0;
  }
}
#view-chart-produit {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 1;
  width: calc(100% - 60px);
  margin-left: 28px;
}
#view-chart-produit .chart-wrapper {
  width: 100%;
  height: 50svh;
  position: relative;
}
#view-chart-produit .chart-wrapper .chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E0E0E0;
}
#view-chart-produit .chart-wrapper .chart-header h3 {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #262262;
  margin: 0;
}
#view-chart-produit .chart-wrapper .chart-header .chart-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
#view-chart-produit .chart-wrapper .chart-header .chart-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
#view-chart-produit .chart-wrapper .chart-header .chart-legend .legend-item:hover {
  opacity: 0.8;
}
#view-chart-produit .chart-wrapper .chart-header .chart-legend .legend-item.inactive {
  opacity: 0.4;
}
#view-chart-produit .chart-wrapper .chart-header .chart-legend .legend-item.inactive .legend-color {
  background-color: #D0D0D0 !important;
}
#view-chart-produit .chart-wrapper .chart-header .chart-legend .legend-item.inactive .legend-label {
  text-decoration: line-through;
  color: #999999;
}
#view-chart-produit .chart-wrapper .chart-header .chart-legend .legend-item .legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  transition: background-color 0.3s ease;
}
#view-chart-produit .chart-wrapper .chart-header .chart-legend .legend-item .legend-label {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #3D3D3D;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}
#view-chart-produit .chart-wrapper canvas {
  width: 100% !important;
  height: calc(100% - 80px) !important;
}

@media screen and (max-width: 900px) {
  #view-chart-produit {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  #view-chart-produit {
    padding: 20px;
  }
  #view-chart-produit .chart-wrapper {
    height: 400px;
  }
  #view-chart-produit .chart-wrapper .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  #view-chart-produit .chart-wrapper .chart-header h3 {
    font-size: 16px;
  }
  #view-chart-produit .chart-wrapper .chart-header .chart-legend {
    width: 100%;
    gap: 15px;
  }
}
#view-list-produit,
#view-chart-produit {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#view-list-produit {
  opacity: 1;
  transform: translateY(0);
}
#view-list-produit[style*="display: none"] {
  opacity: 0;
  transform: translateY(-10px);
}

#view-chart-produit {
  opacity: 0;
  transform: translateY(10px);
}
#view-chart-produit[style*="display: flex"] {
  opacity: 1;
  transform: translateY(0);
}

main.body-transaction-semaine {
  display: flex;
  position: relative;
  flex-direction: column;
  align-self: stretch;
  background: var(--Fond, linear-gradient(127deg, #F8F9FA 0%, #F5F4FF 100.57%));
  height: 100svh;
  width: 100%;
  overflow: hidden;
}
main.body-transaction-semaine svg.svg-fond {
  position: absolute;
  right: -18vh;
  bottom: -18vh;
  fill: rgba(38, 34, 98, 0.03);
  z-index: 1;
  width: auto;
  height: 90vh;
}
main.body-transaction-semaine div.bandeau-top {
  height: 80px;
  min-height: 80px;
  width: calc(100% - 56px);
  margin: 8px 28px 0 28px;
  border-bottom: 2px solid var(--color-neutrals-100);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.bandeau-top {
    /* Style identique au catalogue */
    position: fixed;
    top: 0;
    left: 0;
    height: 72px;
    min-height: 72px;
    border-bottom: none;
    width: 100svw;
    margin: 0;
    padding-left: 80px;
    padding-top: 8px;
    z-index: 3;
    border-radius: 0 0 8px 8px;
    background: var(--neutral-50, #FCFCFF);
    box-sizing: border-box;
    justify-content: flex-start;
  }
}
main.body-transaction-semaine div.bandeau-top p {
  color: #262262;
  font-family: "Open Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: bold;
  line-height: normal;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.bandeau-top p {
    font-size: 20px;
    margin: 0;
  }
}
main.body-transaction-semaine div.filtre-periode-vue {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 20px;
  height: 42px;
  min-height: 42px;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  z-index: 2;
  scrollbar-width: none;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-periode-vue {
    margin-top: 92px;
  }
}
main.body-transaction-semaine div.filtre-periode-vue::-webkit-scrollbar {
  display: none;
}
main.body-transaction-semaine div.filtre-periode-vue div.block-vue {
  display: flex;
  flex-direction: row;
  height: 26px;
  gap: 6px;
  margin-top: auto;
  margin-right: 28px;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 320px) and (max-width: 900px) {
  main.body-transaction-semaine div.filtre-periode-vue div.block-vue {
    display: none;
  }
}
main.body-transaction-semaine div.filtre-periode-vue div.block-vue p {
  color: #131131;
  text-align: center;
  font-family: "Open Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
main.body-transaction-semaine div.filtre-periode-vue div.block-vue div.button-vue {
  border-radius: 160px;
  width: 58px;
  height: 26px;
  background: var(--color-blue-300);
  display: flex;
  justify-content: start;
  align-items: start;
  cursor: pointer;
  transition: 0.2s;
}
main.body-transaction-semaine div.filtre-periode-vue div.block-vue div.button-vue.active {
  justify-content: end;
  background: var(--color-green-200);
}
main.body-transaction-semaine div.filtre-periode-vue div.block-vue div.button-vue span {
  margin: 3px;
  height: 20px;
  width: 20px;
  display: block;
  border-radius: 100%;
  background-color: var(--color-neutrals-50);
  filter: drop-shadow(2px 1px 6px rgba(0, 0, 0, 0.25));
}
main.body-transaction-semaine div.filtre-periode-vue div.block-filtre {
  height: 40px;
  min-width: fit-content;
  border-radius: 4px;
  padding: 0 4px;
  border: 1px solid var(--color-neutrals-100);
  background: var(--color-neutrals-50);
  margin-left: 28px;
  margin-right: 28px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  flex-shrink: 0;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-periode-vue div.block-filtre {
    margin-left: 20px;
    margin-right: 20px;
  }
}
main.body-transaction-semaine div.filtre-periode-vue div.block-filtre div.btn {
  display: flex;
  height: 40px;
  padding: 0px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
}
main.body-transaction-semaine div.filtre-periode-vue div.block-filtre div.btn p {
  color: var(--color-blue-150);
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 21px;
  transition: 0.4s;
  white-space: nowrap;
  margin: 0;
}
main.body-transaction-semaine div.filtre-periode-vue div.block-filtre div.btn:hover p {
  color: var(--color-blue-300);
}
main.body-transaction-semaine div.filtre-periode-vue div.block-filtre div.btn.--actif {
  border-bottom: 2px solid var(--color-blue-300);
}
main.body-transaction-semaine div.filtre-periode-vue div.block-filtre div.btn.--actif p {
  color: var(--color-blue-300);
}
main.body-transaction-semaine div.filtre-date-export {
  height: 42px;
  min-height: 42px;
  width: auto;
  margin: 20px 28px 20px 28px;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;
  z-index: 5;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-date-export {
    margin: 20px;
    max-width: calc(100svw - 40px);
  }
}
main.body-transaction-semaine div.filtre-date-export div.btn-clotures {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid var(--color-blue-400);
  transition: 0.4s;
  display: inline-flex;
  padding: 7px 11px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
main.body-transaction-semaine div.filtre-date-export div.btn-clotures:hover {
  border: 1px solid var(--color-green-200);
}
main.body-transaction-semaine div.filtre-date-export div.btn-clotures:hover p {
  color: var(--color-green-200);
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-date-export div.btn-clotures {
    display: none;
  }
}
main.body-transaction-semaine div.filtre-date-export div.btn-clotures p {
  color: #161338;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  transition: 0.4s;
}
main.body-transaction-semaine div.filtre-date-export div.btn-exporter {
  display: flex;
  margin-left: 12px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: var(--color-green-200);
  cursor: pointer;
  transition: 0.4s;
  display: inline-flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
main.body-transaction-semaine div.filtre-date-export div.btn-exporter:hover {
  background: var(--color-green-150);
}
main.body-transaction-semaine div.filtre-date-export div.btn-exporter p {
  color: var(--color-green-500);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  transition: 0.4s;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-date-export div.btn-exporter {
    margin-left: 12px;
    min-width: 89px;
    gap: 6px;
    background: transparent;
  }
  main.body-transaction-semaine div.filtre-date-export div.btn-exporter p {
    color: var(--color-neutrals-500);
  }
}
main.body-transaction-semaine div.filtre-date-export div.btn-trier {
  display: none;
  min-width: 123px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: var(--color-green-200);
  cursor: pointer;
  transition: 0.4s;
  padding: 8px 0px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
main.body-transaction-semaine div.filtre-date-export div.btn-trier p {
  color: var(--color-green-500);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-date-export div.btn-trier {
    min-width: 62px;
    background: transparent;
    display: flex;
  }
  main.body-transaction-semaine div.filtre-date-export div.btn-trier p {
    color: var(--color-neutrals-500);
  }
}
main.body-transaction-semaine div.filtre-date-export div.input-date {
  display: flex;
  flex-direction: row;
  height: 42px;
  width: 254px;
  min-width: 254px;
  max-width: 254px;
  border-radius: 4px;
  background: var(--color-neutrals-50);
  justify-content: center;
  align-items: center;
  margin-right: auto;
  cursor: pointer;
  position: relative;
  border: 1px solid transparent;
  transition: 0.4s;
}
main.body-transaction-semaine div.filtre-date-export div.input-date:hover {
  border-color: var(--neutral-150);
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-date-export div.input-date {
    width: 165px;
    min-width: 165px;
    max-width: 165px;
    margin-right: auto;
    position: initial;
  }
}
main.body-transaction-semaine div.filtre-date-export div.input-date p {
  margin-right: auto;
  color: var(--color-blue-300, var(--color-blue-300));
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.svg:first-child {
  margin-left: 16px;
  margin-right: 8px;
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.svg.last {
  margin-right: 16px;
  margin-left: 8px;
  height: 12px;
  width: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court {
  cursor: auto;
  left: 0;
  bottom: -381px;
  position: absolute;
  width: 254px;
  height: 381px;
  border-radius: 0 0 0 12px;
  background: var(--color-neutrals-50);
  display: none;
  flex-direction: column;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court.--actif {
  display: flex;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court {
    width: 100vw;
    height: 377px;
    flex-direction: column;
    border-radius: 8px 8px 0 0;
    background: var(--color-neutrals-50);
    left: 0;
    bottom: 0;
    z-index: 6;
  }
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court div.titre-date-court {
  height: 53px;
  margin: 16px 16px 0 16px;
  width: calc(100% - 32px);
  border-bottom: 1px solid var(--color-blue-100);
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court div.titre-date-court {
    margin: 0 24px 0 24px;
    height: 65px;
    width: calc(100% - 48px);
  }
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court div.titre-date-court p {
  margin: 12px 0 20px 0;
  color: var(--color-blue-400);
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 21px;
  height: 21px;
  width: 100%;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court div.titre-date-court p {
    margin: 24px 0 20px 0;
  }
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court div.menu-date-court {
  margin: 20px 16px 0 16px;
  gap: 4px;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court div.menu-date-court {
    margin: 20px 24px 0 24px;
  }
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date {
  width: 100%;
  gap: 15px;
  height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date span.check {
  height: 12px;
  width: 12px;
  min-height: 12px;
  min-width: 12px;
  border: 1.5px solid var(--color-blue-200);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date span.check span.centre {
  transition: 0.4s;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date p {
  color: var(--color-blue-200);
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  transition: 0.4s;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date:hover p {
  color: var(--color-blue-300);
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date:hover span.check {
  border: 1.5px solid var(--color-blue-300);
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date:hover span.check span.centre {
  height: 8px;
  width: 8px;
  background-color: var(--color-blue-300);
  border-radius: 100%;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date.--actif span.check {
  border: 1.5px solid var(--color-blue-300);
  transition: 0.4s;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date.--actif span.check span.centre {
  height: 8px;
  width: 8px;
  background-color: var(--color-blue-300);
  border-radius: 100%;
  transition: 0.4s;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court div.menu-date-court div.btn-date.--actif p {
  color: var(--color-blue-300);
  transition: 0.4s;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court button.date-perso {
  display: flex;
  height: 42px;
  margin: 20px 16px 0 16px;
  width: calc(100% - 32px);
  align-items: center;
  gap: 14px;
  align-self: stretch;
  border-radius: 4px;
  outline: none;
  border: none;
  background: var(--color-blue-50);
  color: var(--color-blue-300);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  cursor: pointer;
  transition: 0.4s;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court button.date-perso:hover {
  background-color: #262262;
  color: #FFF;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court button.date-perso:hover svg path[stroke] {
  stroke: #ffffff;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court button.date-perso:hover svg path[fill] {
  fill: #ffffff;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court button.date-perso svg {
  margin-left: 16px;
  transition: 0.4s;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court button.date-perso svg path[stroke] {
  transition: 0.4s;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court button.date-perso svg path[fill] {
  transition: 0.4s;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-date-export div.input-date div.option-date-court button.date-perso {
    width: calc(100% - 48px);
    margin: 20px 24px 0 24px;
  }
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours {
  width: 296px;
  height: 381px;
  cursor: auto;
  left: 254px;
  bottom: -381px;
  position: absolute;
  border-radius: 0 0 12px 0;
  background: var(--color-neutrals-50);
  display: none;
  flex-direction: column;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours.--actif {
  display: flex;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours {
    width: 100vw;
    height: 497px;
    flex-direction: column;
    border-radius: 8px 8px 0 0;
    background: var(--color-neutrals-50);
    left: 0;
    bottom: 0;
    z-index: 6;
  }
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours div.retour {
  display: none;
  align-items: center;
  flex-direction: row;
  margin: 20px 24px 0 24px;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours div.retour p {
  margin: 0 0 0 10px;
  color: var(--color-Neutrals-500);
  text-align: center;
  font-family: "Open Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours div.retour {
    display: flex;
  }
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-court {
  height: 53px;
  margin: 16px 16px 0 16px;
  width: calc(100% - 32px);
  border-bottom: 1px solid var(--color-blue-100);
  display: none;
  flex-direction: column;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-court {
    margin: 0 24px 0 24px;
    height: 65px;
    display: flex;
    width: calc(100% - 48px);
  }
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-court p {
  margin: 12px 0 20px 0;
  color: var(--color-blue-400);
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 21px;
  height: 21px;
  width: 100%;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-court p {
    margin: 24px 0 20px 0;
  }
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-jours {
  height: 52px;
  display: flex;
  width: 264px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 16px 16px 0 16px;
  border-bottom: 1px solid var(--color-blue-100);
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-jours {
    margin: 16px auto 0 auto;
  }
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-jours div.svg {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours div.titre-date-jours p {
  width: 152px;
  max-width: 152px;
  margin: 0;
  color: var(--color-blue-300);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours div.weekdays {
  width: 224px;
  height: 32px;
  margin: 20px auto 0 auto;
  display: flex;
  flex-direction: row;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours div.weekdays div.weekday {
  height: 32px;
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-blue-150);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours .days-grid {
  display: grid;
  margin: 8px auto 0 auto;
  grid-template-columns: repeat(7, 32px);
  gap: 0;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours .days-grid.three {
  grid-template-columns: repeat(3, 1fr) !important;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours .month-btn {
  aspect-ratio: 1;
  height: 32px;
  color: var(--color-neutrals-500);
  border: none;
  background-color: transparent;
  border-radius: 0;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours .day-btn {
  aspect-ratio: 1;
  height: 32px;
  color: var(--color-neutrals-500);
  border: none;
  background-color: transparent;
  border-radius: 0;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours .month-btn {
  height: 61px;
  width: 75px;
  color: var(--color-neutrals-500);
  border: none;
  background-color: transparent;
  border-radius: 0;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours .month-btn.endpoint {
  background: var(--color-blue-300) !important;
  color: var(--color-neutrals-50);
  border-radius: 4px;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours .year-btn {
  height: 61px;
  width: 75px;
  color: var(--color-neutrals-500);
  border: none;
  background-color: transparent;
  border-radius: 0;
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours .year-btn.endpoint {
  background: var(--color-blue-300) !important;
  color: var(--color-neutrals-100);
  border-radius: 4px;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours .day-btn:hover:not(:disabled) {
  background: var(--color-blue-100);
  border-radius: 4px;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours .day-btn:disabled {
  background: transparent;
  cursor: default;
  color: transparent;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours .day-btn.in-range {
  color: var(--color-neutrals-500);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  background: var(--color-blue-100);
  line-height: 20px;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours .day-btn.endpoint {
  background: var(--color-blue-300) !important;
  color: var(--color-neutrals-50);
  border-radius: 4px;
}
main.body-transaction-semaine div.filtre-date-export div.input-date div.menu-periode-jours .day-btn.today {
  border: 2px solid var(--color-blue-300);
  border-radius: 4px;
}
main.body-transaction-semaine span.background {
  position: absolute;
  display: none;
  left: -100svh;
  height: 0svh;
  width: 0svw;
}
@media screen and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine span.background {
    left: -100svh;
    display: flex;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 5;
    height: 100svh;
    width: 100svw;
  }
  main.body-transaction-semaine span.background.--actif {
    left: 0;
  }
}
main.body-transaction-semaine section.ventesProduit {
  height: auto;
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 16px;
  margin-top: 20px;
  overflow: auto;
  z-index: 1;
  padding: 0 28px 28px 28px;
}
main.body-transaction-semaine section.ventesProduit table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border-radius: 8px 8px 0 0;
}
main.body-transaction-semaine section.ventesProduit table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  transform: translateY(-1px);
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  color: var(--color-blue-300);
  text-align: center;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  border-top: 1px solid var(--color-neutrals-100);
  border-right: 1px solid var(--color-neutrals-100);
  border-left: 1px solid var(--color-neutrals-100);
  background: var(--color-neutrals-50);
}
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(1) {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
}
main.body-transaction-semaine section.ventesProduit table thead th svg {
  margin-left: 10px;
  transition: transform 0.2s ease;
}
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(2),
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(3),
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(5),
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(6),
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(7),
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(8) {
  cursor: pointer;
  transition: background-color 0.2s ease;
}
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(2):hover,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(3):hover,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(5):hover,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(6):hover,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(7):hover,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(8):hover {
  background-color: var(--color-neutrals-100);
}
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(2).sort-asc svg path:first-child,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(3).sort-asc svg path:first-child,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(5).sort-asc svg path:first-child,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(6).sort-asc svg path:first-child,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(7).sort-asc svg path:first-child,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(8).sort-asc svg path:first-child {
  stroke: var(--color-blue-300);
  stroke-width: 1.5;
}
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(2).sort-asc svg path:last-child,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(3).sort-asc svg path:last-child,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(5).sort-asc svg path:last-child,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(6).sort-asc svg path:last-child,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(7).sort-asc svg path:last-child,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(8).sort-asc svg path:last-child {
  opacity: 0.3;
}
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(2).sort-desc svg path:first-child,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(3).sort-desc svg path:first-child,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(5).sort-desc svg path:first-child,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(6).sort-desc svg path:first-child,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(7).sort-desc svg path:first-child,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(8).sort-desc svg path:first-child {
  opacity: 0.3;
}
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(2).sort-desc svg path:last-child,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(3).sort-desc svg path:last-child,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(5).sort-desc svg path:last-child,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(6).sort-desc svg path:last-child,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(7).sort-desc svg path:last-child,
main.body-transaction-semaine section.ventesProduit table thead th:nth-child(8).sort-desc svg path:last-child {
  stroke: var(--color-blue-300);
  stroke-width: 1.5;
}
main.body-transaction-semaine div.filtre-croissant {
  display: none;
}
@media screen and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-croissant {
    display: flex;
    height: 540px;
    width: 100svw;
    background-color: var(--color-neutrals-50);
    border-radius: 8px 8px 0 0;
    position: absolute;
    bottom: 0;
    left: -100svw;
    flex-direction: column;
    z-index: 6;
  }
  main.body-transaction-semaine div.filtre-croissant.--actif {
    left: 0;
  }
  main.body-transaction-semaine div.filtre-croissant p.h1 {
    color: var(--color-blue-400);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px;
    margin-top: 20px;
    margin-left: 24px;
  }
  main.body-transaction-semaine div.filtre-croissant div.menu-filtre-croissant {
    margin: 20px 16px 0 16px;
    gap: 4px;
    display: flex;
    flex-direction: column;
  }
}
@media screen and (max-width: 719px) and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-croissant div.menu-filtre-croissant {
    margin: 20px 24px 0 24px;
  }
}
@media screen and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-croissant div.menu-filtre-croissant div.btn-croissant {
    width: 100%;
    gap: 15px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
  }
  main.body-transaction-semaine div.filtre-croissant div.menu-filtre-croissant div.btn-croissant span.check {
    height: 12px;
    width: 12px;
    min-height: 12px;
    min-width: 12px;
    border: 1.5px solid var(--color-blue-200);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  main.body-transaction-semaine div.filtre-croissant div.menu-filtre-croissant div.btn-croissant p {
    color: var(--color-blue-200);
    font-family: "Open Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }
  main.body-transaction-semaine div.filtre-croissant div.menu-filtre-croissant div.btn-croissant.--actif span.check {
    border: 1.5px solid var(--color-blue-300);
  }
  main.body-transaction-semaine div.filtre-croissant div.menu-filtre-croissant div.btn-croissant.--actif span.check span.centre {
    height: 8px;
    width: 8px;
    background-color: var(--color-blue-300);
    border-radius: 100%;
  }
  main.body-transaction-semaine div.filtre-croissant div.menu-filtre-croissant div.btn-croissant.--actif p {
    color: var(--color-blue-300);
  }
  main.body-transaction-semaine div.filtre-croissant div.titre-filtre-croissant {
    height: 53px;
    margin: 16px 16px 0 16px;
    width: calc(100% - 32px);
    border-bottom: 1px solid var(--color-blue-100);
    display: flex;
    flex-direction: column;
  }
}
@media screen and (max-width: 719px) and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-croissant div.titre-filtre-croissant {
    margin: 0 24px 0 24px;
    height: 65px;
    width: calc(100% - 48px);
  }
}
@media screen and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-croissant div.titre-filtre-croissant p {
    margin: 12px 0 20px 0;
    color: var(--color-blue-400);
    font-family: "Open Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px;
    height: 21px;
    width: 100%;
  }
}
@media screen and (max-width: 719px) and (min-width: 320px) and (max-width: 719px) {
  main.body-transaction-semaine div.filtre-croissant div.titre-filtre-croissant p {
    margin: 24px 0 20px 0;
  }
}

/* Styles pour la page Transactions par Produit - Desktop */
section.ventesProduit table tbody tr {
  height: 47px;
  border-right: 1px solid var(--color-neutrals-100);
  border-bottom: 1px solid var(--color-neutrals-100);
  border-left: 1px solid var(--color-neutrals-100);
  background: var(--color-blue-50);
  text-align: center;
  font-size: 14px;
}
section.ventesProduit table tbody tr td {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
section.ventesProduit table tbody tr.machine {
  background-color: var(--color-blue-300);
  color: var(--color-neutrals-100);
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  border-right: 1px solid transparent;
  border-bottom: 1px solid var(--color-neutrals-100);
  border-left: 1px solid transparent;
}
section.ventesProduit table tbody tr.machine td:nth-child(2) {
  text-align: left;
}
section.ventesProduit table tbody tr.machine td:nth-child(3) {
  text-align: right;
}
section.ventesProduit table tbody tr.machine td:nth-child(4) {
  text-align: center;
  padding: 0 20px;
}
section.ventesProduit table tbody tr.accordion-content td:nth-child(2) {
  text-align: center;
}
section.ventesProduit table tbody tr.accordion-content td:nth-child(3) {
  text-align: center;
  padding: 0 20px;
}
section.ventesProduit table tbody tr.accordion-content td:nth-child(4) {
  text-align: center;
}
section.ventesProduit table tbody tr.accordion-content td:nth-child(5) {
  text-align: center;
}
section.ventesProduit table tbody tr.accordion-content td:nth-child(6) {
  text-align: center;
  padding: 0 20px;
}

/* Classe pour cacher les lignes du tableau */
.hidden {
  display: none !important;
}

/* S'assurer que le tableau reste en mode table sur desktop */
@media screen and (min-width: 720px) {
  section.ventesProduit {
    display: block !important;
  }
  section.ventesProduit table {
    display: table !important;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }
  section.ventesProduit table tbody {
    display: table-row-group !important;
  }
  section.ventesProduit table tbody tr {
    display: table-row !important;
  }
  section.ventesProduit table tbody tr td {
    display: table-cell !important;
  }
  /* Les lignes cachées restent cachées */
  section.ventesProduit table tbody tr.hidden {
    display: none !important;
  }
}
/* ========================================
   VERSION MOBILE - Cartes produits
   ======================================== */
@media screen and (max-width: 900px) {
  /* Espace pour le bandeau fixe */
  /* Masquer le tableau en mobile */
  section.ventesProduit table {
    display: none;
  }
  /* Container principal des cartes mobiles */
  section.ventesProduit {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    padding: 4px 20px 12px 20px !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
  }
  section.ventesProduit::-webkit-scrollbar {
    display: none;
  }
  /* ============ CARTE MACHINE ============ */
  .mobile-machine-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .mobile-machine-header {
    display: flex;
    gap: 12px;
    height: 50px;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
  }
  .mobile-machine-header .machine-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }
  .mobile-machine-card.expanded .mobile-machine-header .machine-icon {
    transform: rotate(180deg);
  }
  .mobile-machine-header .machine-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .mobile-machine-header .machine-name {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: var(--color-neutrals-500);
    text-align: left;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .mobile-machine-header .machine-quantity {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-neutrals-400);
    text-align: left;
    margin: 0;
  }
  .mobile-machine-header .machine-total {
    background: rgba(98, 186, 135, 0.1);
    padding: 4px 12px;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .mobile-machine-header .machine-total p {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #22412F;
    margin: 0;
  }
  /* Container des produits */
  .mobile-products-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  /* ============ CARTE PRODUIT ============ */
  .mobile-product-card {
    background: var(--color-neutrals-50);
    border: 0.5px solid var(--color-neutrals-100);
    border-radius: 4px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .product-id {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-blue-300);
    margin: 0;
  }
  .product-amount {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-green-500);
    margin: 0;
  }
  .product-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .product-name {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-neutrals-500);
    margin: 0;
  }
  .product-meta {
    display: flex;
    gap: 12px;
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    color: var(--color-neutrals-450);
  }
  .product-code,
  .product-quantity {
    margin: 0;
  }
  /* ============ AJUSTEMENTS GÉNÉRAUX MOBILE ============ */
  /* Logo SVG en fond */
  main.body-transaction-semaine svg.svg-fond {
    right: -190px;
    bottom: -50px;
    height: 480px;
    width: 550px;
  }
  /* Background pour les modales mobiles */
  main.body-transaction-produit span.background {
    display: flex;
    left: -100vw;
  }
  main.body-transaction-produit span.background.--actif {
    left: 0;
  }
}
#view-chart-produit {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 1;
  width: calc(100% - 60px);
  margin-left: 28px;
}
#view-chart-produit .chart-wrapper {
  width: 100%;
  height: 50svh;
  position: relative;
}
#view-chart-produit .chart-wrapper .chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E0E0E0;
}
#view-chart-produit .chart-wrapper .chart-header h3 {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #262262;
  margin: 0;
}
#view-chart-produit .chart-wrapper .chart-header .chart-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
#view-chart-produit .chart-wrapper .chart-header .chart-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
#view-chart-produit .chart-wrapper .chart-header .chart-legend .legend-item:hover {
  opacity: 0.8;
}
#view-chart-produit .chart-wrapper .chart-header .chart-legend .legend-item.inactive {
  opacity: 0.4;
}
#view-chart-produit .chart-wrapper .chart-header .chart-legend .legend-item.inactive .legend-color {
  background-color: #D0D0D0 !important;
}
#view-chart-produit .chart-wrapper .chart-header .chart-legend .legend-item.inactive .legend-label {
  text-decoration: line-through;
  color: #999999;
}
#view-chart-produit .chart-wrapper .chart-header .chart-legend .legend-item .legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  transition: background-color 0.3s ease;
}
#view-chart-produit .chart-wrapper .chart-header .chart-legend .legend-item .legend-label {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #3D3D3D;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}
#view-chart-produit .chart-wrapper canvas {
  width: 100% !important;
  height: calc(100% - 80px) !important;
}

@media screen and (max-width: 900px) {
  #view-chart-produit {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  #view-chart-produit {
    padding: 20px;
  }
  #view-chart-produit .chart-wrapper {
    height: 400px;
  }
  #view-chart-produit .chart-wrapper .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  #view-chart-produit .chart-wrapper .chart-header h3 {
    font-size: 16px;
  }
  #view-chart-produit .chart-wrapper .chart-header .chart-legend {
    width: 100%;
    gap: 15px;
  }
}
#view-list-produit,
#view-chart-produit {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#view-list-produit {
  opacity: 1;
  transform: translateY(0);
}
#view-list-produit[style*="display: none"] {
  opacity: 0;
  transform: translateY(-10px);
}

#view-chart-produit {
  opacity: 0;
  transform: translateY(10px);
}
#view-chart-produit[style*="display: flex"] {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
  CARTES MOBILES - PAR SEMAINE
  ======================================== */
.mobile-weeks-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: #F8F8FF;
}

.mobile-week-card {
  background-color: #FFFFFF;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}

.mobile-week-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.week-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E8E8F0;
}

.week-period {
  color: #262262;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.week-total {
  color: #262262;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.week-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.week-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
}

.week-meta span {
  color: #5C5C7A;
  line-height: 1.4;
}

.week-ordered,
.week-baskets {
  font-weight: 500;
  color: #262262;
}

/* ========================================
   CARTES MOBILES - PAR MOIS
   ======================================== */
.mobile-months-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: #F8F8FF;
}

.mobile-month-card {
  background-color: #FFFFFF;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}

.mobile-month-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.month-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E8E8F0;
}

.month-period {
  color: #262262;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.month-total {
  color: #262262;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.month-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.month-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
}

.month-meta span {
  color: #5C5C7A;
  line-height: 1.4;
}

.month-ordered,
.month-baskets {
  font-weight: 500;
  color: #262262;
}

/* ========================================
   CARTES MOBILES - PAR ANNÉE
   ======================================== */
.mobile-years-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: #F8F8FF;
}

.mobile-year-card {
  background-color: #FFFFFF;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}

.mobile-year-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.year-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E8E8F0;
}

.year-period {
  color: #262262;
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.year-total {
  color: #262262;
  font-family: "Open Sans", sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.year-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.year-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
}

.year-meta span {
  color: #5C5C7A;
  line-height: 1.4;
}

.year-ordered,
.year-baskets {
  font-weight: 500;
  color: #262262;
}

/* ========================================
   RESPONSIVE - PETITS ÉCRANS
   ======================================== */
@media (max-width: 375px) {
  .mobile-weeks-container,
  .mobile-months-container,
  .mobile-years-container {
    padding: 12px;
    gap: 10px;
  }
  .mobile-week-card,
  .mobile-month-card,
  .mobile-year-card {
    padding: 12px;
  }
  .week-period,
  .month-period,
  .year-period {
    font-size: 13px;
  }
  .week-total,
  .month-total,
  .year-total {
    font-size: 14px;
  }
  .week-meta,
  .month-meta,
  .year-meta {
    font-size: 12px;
  }
}
.body-comptes {
  height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: linear-gradient(131.32deg, #f8f9fa 0%, #f5f4ff 100%);
  --pm-color-primary: #262262;
  --pm-color-primary-dark: #1b1846;
  --pm-color-primary-light: #4d4a7e;
  --pm-color-title: #110f2c;
  --pm-color-button-text: #161338;
  --pm-color-success: #62ba87;
  --pm-color-success-bg: #eff8f3;
  --pm-color-success-text: #3b7051;
  --pm-color-danger: #c14039;
  --pm-color-info: #5bc5f2;
  --pm-color-white: #ffffff;
  --pm-color-border: #f1f1f1;
  --pm-color-border-input: #ddd;
  --pm-color-bg-gray: #f1f1f1;
  --pm-color-text: #110f2c;
  --pm-color-text-secondary: #828282;
  --pm-color-text-muted: #a7a7a7;
  --pm-color-text-inactive: #a2a0bb;
  --pm-color-text-dark: #1e1e1e;
  --pm-font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --pm-popup-width: 531px;
  --pm-form-group-width: calc(50% - 6px);
  --pm-form-container-width: 100%;
  --pm-radius-sm: 4px;
  --pm-radius-md: 8px;
  --pm-radius-lg: 10px;
  --pm-radius-pill: 39602500px;
  --pm-shadow-popup: 0 4px 24px rgba(0, 0, 0, 0.15);
  --pm-transition: all 0.2s ease;
}
.body-comptes svg.svg-fond {
  position: absolute;
  right: -18vh;
  bottom: -18vh;
  fill: rgba(38, 34, 98, 0.03);
  z-index: 0;
  width: auto;
  height: 90vh;
  pointer-events: none;
}
@media screen and (min-width: 720px) and (max-width: 1024px) {
  .body-comptes svg.svg-fond {
    right: -190px;
    bottom: -50px;
    height: 480px;
    width: 550px;
  }
}
@media screen and (max-width: 719px) {
  .body-comptes svg.svg-fond {
    right: -150px;
    bottom: -30px;
    height: 380px;
    width: 450px;
  }
}
.body-comptes .hidden {
  display: none !important;
}
.body-comptes .bandeau-top {
  height: 80px;
  min-height: 80px;
  width: calc(100% - 56px);
  margin: 8px 28px 0 28px;
  border-bottom: 2px solid var(--pm-color-border);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.body-comptes .bandeau-top p {
  color: #262262;
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: normal;
}
@media screen and (max-width: 719px) {
  .body-comptes .bandeau-top {
    position: fixed;
    top: 0;
    left: 0;
    height: 72px;
    min-height: 72px;
    border-bottom: none;
    width: 100vw;
    margin: 0;
    padding-left: 80px;
    padding-top: 8px;
    z-index: 3;
    border-radius: 0 0 8px 8px;
    background: #FCFCFF;
    box-sizing: border-box;
    justify-content: flex-start;
  }
  .body-comptes .bandeau-top p {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
  }
}
.body-comptes .input-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 397px;
  height: 40px;
  padding: 12px 16px;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border);
  border-radius: var(--pm-radius-sm);
  box-sizing: border-box;
}
.body-comptes .input-search .icon-search {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.body-comptes .input-search .icon-search circle,
.body-comptes .input-search .icon-search line {
  stroke: var(--pm-color-primary-light);
}
.body-comptes .input-search input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-color-text);
  background: transparent;
}
.body-comptes .input-search input::placeholder {
  color: var(--pm-color-text-muted);
}
.body-comptes .input-search-desktop {
  display: flex;
}
@media screen and (max-width: 719px) {
  .body-comptes .input-search-desktop {
    display: none;
  }
}
.body-comptes .input-search-mobile {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-comptes .input-search-mobile {
    display: flex;
    width: 100%;
  }
}
.body-comptes .main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0px 28px 20px;
}
@media screen and (max-width: 719px) {
  .body-comptes .main-content {
    padding: 0;
    padding-top: 72px;
  }
}
.body-comptes .filtre-actions-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
  scrollbar-width: none;
}
@media screen and (max-width: 719px) {
  .body-comptes .filtre-actions-row {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
}
.body-comptes .filtre-periode-vue {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  height: 42px;
  min-height: 42px;
  flex-direction: row;
  justify-content: flex-start;
  flex-shrink: 0;
  scrollbar-width: none;
}
.body-comptes .filtre-periode-vue::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-comptes .filtre-periode-vue {
    width: 100%;
    padding-left: 20px;
    margin-top: 12px;
    margin-bottom: 16px;
  }
}
.body-comptes .block-filtre {
  height: 40px;
  min-width: fit-content;
  border-radius: var(--pm-radius-sm);
  padding: 0 4px;
  border: 1px solid var(--pm-color-border);
  background: var(--pm-color-white);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  flex-shrink: 0;
}
@media screen and (max-width: 719px) {
  .body-comptes .block-filtre {
    margin-right: 20px;
  }
}
.body-comptes .block-filtre .btn {
  display: flex;
  height: 40px;
  padding: 0px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--pm-transition);
  flex-shrink: 0;
}
.body-comptes .block-filtre .btn p {
  color: var(--pm-color-text-inactive);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 21px;
  transition: 0.4s;
  white-space: nowrap;
  margin: 0;
}
.body-comptes .block-filtre .btn:hover p {
  color: var(--pm-color-primary);
}
.body-comptes .block-filtre .btn.--actif {
  border-bottom: 2px solid var(--pm-color-primary);
}
.body-comptes .block-filtre .btn.--actif p {
  color: var(--pm-color-primary);
}
.body-comptes .search-container {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-comptes .search-container {
    display: block;
    padding: 0 20px;
    margin-bottom: 16px;
  }
}
.body-comptes .button-container {
  display: flex;
  justify-content: flex-end;
}
.body-comptes .button-container-desktop {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
}
@media screen and (max-width: 719px) {
  .body-comptes .button-container-desktop {
    display: none;
  }
}
.body-comptes .button-container-mobile {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-comptes .button-container-mobile {
    display: flex;
    padding: 0 20px;
    margin-bottom: 16px;
  }
}
.body-comptes .btn-nouveau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--pm-color-primary);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
  white-space: nowrap;
}
.body-comptes .btn-nouveau:hover {
  background-color: var(--pm-color-primary-dark);
}
.body-comptes .btn-nouveau .icon-plus {
  width: 10px;
  height: 10px;
}
.body-comptes .button-container-mobile .btn-nouveau {
  width: 100%;
  justify-content: center;
}
.body-comptes .page-content {
  width: 100%;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 719px) {
  .body-comptes .page-content {
    padding: 0 20px;
  }
}
.body-comptes .comptes-count-wrapper {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 8px 0;
}
.body-comptes .comptes-count {
  font-size: 12px;
  color: var(--pm-color-text-secondary);
  font-weight: 400;
}
.body-comptes .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  padding-right: 8px;
  padding-bottom: 16px;
}
@media screen and (max-width: 719px) {
  .body-comptes .cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-right: 0;
    padding-bottom: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .body-comptes .cards-grid::-webkit-scrollbar {
    display: none;
  }
}
.body-comptes .empty-state {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--pm-color-text-muted);
  font-size: 14px;
  text-align: center;
}
.body-comptes .card-compte {
  width: 100%;
  background: var(--pm-color-white);
  border: 1.18px solid var(--pm-color-border);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.body-comptes .card-compte .card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  overflow: hidden;
  min-width: 0;
}
.body-comptes .card-compte .card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
}
.body-comptes .card-compte .card-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--pm-color-title);
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 70px);
}
.body-comptes .card-compte .card-email {
  font-size: 14px;
  font-weight: 400;
  color: var(--pm-color-text-secondary);
  line-height: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.body-comptes .card-compte .card-role {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 4px 11px;
  background: var(--pm-color-bg-gray);
  border-radius: var(--pm-radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--pm-color-primary);
  line-height: 18px;
}
.body-comptes .card-compte .card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 9px;
  border-top: 1.18px solid var(--pm-color-border);
}
.body-comptes .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(98, 186, 135, 0.1);
  border-radius: var(--pm-radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--pm-color-success-text);
  line-height: normal;
  flex-shrink: 0;
}
.body-comptes .status-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--pm-color-success);
  border-radius: 50%;
  flex-shrink: 0;
}
.body-comptes .status-badge.inactive {
  background: var(--pm-color-bg-gray);
  color: var(--pm-color-text-secondary);
}
.body-comptes .status-badge.inactive::before {
  background: var(--pm-color-text-secondary);
}
.body-comptes .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-comptes .btn-icon svg {
  width: 20px;
  height: 20px;
}
.body-comptes .btn-icon-edit svg {
  color: var(--pm-color-text-secondary);
}
.body-comptes .btn-icon-edit:hover {
  background: var(--pm-color-border);
}
.body-comptes .btn-icon-edit:hover svg {
  color: var(--pm-color-primary);
}
.body-comptes .btn-icon-delete svg {
  color: var(--pm-color-danger);
}
.body-comptes .btn-icon-delete:hover {
  background: rgba(193, 64, 57, 0.1);
}
.body-comptes .popup-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--pm-popup-width);
  height: 100svh;
  background: var(--pm-color-white);
  box-shadow: var(--pm-shadow-popup);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: var(--pm-radius-sm);
}
@media screen and (max-width: 719px) {
  .body-comptes .popup-panel {
    width: 100%;
    border-radius: 0;
  }
}
.body-comptes .popup-close-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex-shrink: 0;
}
.body-comptes .btn-fermer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--pm-color-text-dark);
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-comptes .btn-fermer:hover {
  color: var(--pm-color-text-secondary);
}
.body-comptes .btn-fermer svg {
  width: 10px;
  height: 10px;
}
.body-comptes .popup-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--pm-color-title);
  line-height: 30px;
  flex-shrink: 0;
  margin-bottom: 16px;
}
.body-comptes .popup-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-right: 8px;
}
@media screen and (max-width: 719px) {
  .body-comptes .popup-body {
    padding-right: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .body-comptes .popup-body::-webkit-scrollbar {
    display: none;
  }
}
.body-comptes .popup-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.body-comptes .section-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--pm-color-title);
  line-height: 24px;
}
.body-comptes .popup-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  flex-shrink: 0;
  padding: 16px 0 0 0;
}
.body-comptes .form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 12px;
  width: var(--pm-form-container-width);
}
.body-comptes .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: var(--pm-form-group-width);
}
@media screen and (max-width: 719px) {
  .body-comptes .form-group {
    width: 100%;
  }
}
.body-comptes .form-group-full {
  width: 100%;
}
.body-comptes .password-criteria {
  width: 100%;
  gap: 6px;
}
.body-comptes .password-criteria .password-criteria-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--pm-color-title);
  margin: 0 0 2px 0;
}
.body-comptes .password-criteria .password-criteria-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--pm-color-text-muted);
}
.body-comptes .password-criteria .password-criteria-item .criteria-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  flex-shrink: 0;
}
.body-comptes .form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-color-title);
}
.body-comptes .required {
  color: var(--pm-color-danger);
  margin-left: 2px;
}
.body-comptes .form-input {
  width: 100%;
  height: 36px;
  padding: 12px 16px;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border-input);
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-color-text);
  transition: var(--pm-transition);
  box-sizing: border-box;
}
.body-comptes .form-input::placeholder {
  color: var(--pm-color-text-muted);
}
.body-comptes .form-input:focus {
  outline: none;
  border-color: var(--pm-color-primary);
}
.body-comptes .form-input.input-readonly {
  background: var(--pm-color-bg-secondary, #f5f5f5);
  color: var(--pm-color-text-muted);
  cursor: not-allowed;
  border-color: var(--pm-color-border-input);
}
.body-comptes .checkboxes-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 10px;
}
.body-comptes .checkbox-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.body-comptes .checkbox-item input[type=checkbox] {
  display: none;
}
.body-comptes .checkbox-item .checkbox-custom {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  border: 2px solid #9ca3af;
  border-radius: 4px;
  background-color: #ffffff;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s;
}
.body-comptes .checkbox-item input[type=checkbox]:checked + .checkbox-custom {
  background: var(--pm-color-primary);
  border-color: var(--pm-color-primary);
}
.body-comptes .checkbox-item input[type=checkbox]:checked + .checkbox-custom::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
}
.body-comptes .checkbox-item .checkbox-label {
  font-size: 14px;
  color: var(--pm-color-text);
  line-height: 21px;
}
.body-comptes .checkbox-item.disabled {
  opacity: 0.5;
}
.body-comptes .checkbox-item.disabled .checkbox-custom {
  background-color: #f3f4f6;
  border-color: #d1d5db;
}
.body-comptes .checkbox-item.disabled .checkbox-label {
  color: var(--pm-color-text-muted);
}
.body-comptes .checkbox-select-all {
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pm-color-border-input);
}
.body-comptes .checkbox-select-all .checkbox-label {
  font-weight: 500;
}
.body-comptes .dropdown-wrapper {
  position: relative;
}
.body-comptes .select-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 12px;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border-input);
  border-radius: var(--pm-radius-sm);
  cursor: pointer;
}
.body-comptes .select-field .select-value {
  font-size: 14px;
  font-weight: 400;
  color: var(--pm-color-text);
}
.body-comptes .select-field .icon-chevron {
  width: 10px;
  height: 6px;
  transition: transform 0.2s ease;
}
.body-comptes .select-field.open .icon-chevron {
  transform: rotate(180deg);
}
.body-comptes .select-enabled {
  background: #dcfce7;
  border-color: #86efac;
}
.body-comptes .select-enabled .select-value {
  color: #166534;
}
.body-comptes .select-disabled {
  background: var(--pm-color-bg-gray);
  border-color: var(--pm-color-border);
}
.body-comptes .select-disabled .select-value {
  color: var(--pm-color-text-secondary);
}
.body-comptes .select-neutral {
  background: var(--pm-color-bg-gray);
  border-color: var(--pm-color-border);
}
.body-comptes .select-neutral .select-value {
  color: var(--pm-color-text-secondary);
}
.body-comptes .dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border);
  border-radius: var(--pm-radius-sm);
  margin-top: 4px;
  z-index: 100;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.body-comptes .dropdown-list.hidden {
  display: none;
}
.body-comptes .dropdown-item {
  padding: 8px 12px;
  font-size: 14px;
  color: var(--pm-color-text);
  cursor: pointer;
  transition: background 0.15s;
}
.body-comptes .dropdown-item:hover {
  background: var(--pm-color-bg-gray);
}
.body-comptes .dropdown-item:first-child {
  border-radius: var(--pm-radius-sm) var(--pm-radius-sm) 0 0;
}
.body-comptes .dropdown-item:last-child {
  border-radius: 0 0 var(--pm-radius-sm) var(--pm-radius-sm);
}
.body-comptes .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--pm-color-primary);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-comptes .btn-primary:hover {
  background: var(--pm-color-primary-dark);
}
.body-comptes .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 8px 16px;
  background: transparent;
  color: var(--pm-color-button-text);
  border: 1px solid var(--pm-color-primary-dark);
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-comptes .btn-secondary:hover {
  background: rgba(38, 34, 98, 0.05);
}
.body-comptes .popup-supprimer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}
.body-comptes .popup-supprimer-content {
  background: var(--pm-color-white);
  border-radius: var(--pm-radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  overflow: hidden;
}
.body-comptes .popup-supprimer .popup-close-bar {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
}
.body-comptes .popup-supprimer-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}
.body-comptes .popup-supprimer-text {
  font-size: 17px;
  font-weight: 600;
  color: #3d3d3d;
  text-align: center;
  width: 240px;
  line-height: normal;
}
.body-comptes .popup-supprimer-buttons {
  display: flex;
  gap: 10px;
  width: 100%;
}
.body-comptes .popup-supprimer-buttons .btn-conserver {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--pm-color-primary);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-comptes .popup-supprimer-buttons .btn-conserver:hover {
  background: var(--pm-color-primary-dark);
}
.body-comptes .popup-supprimer-buttons .btn-supprimer {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 88px;
  padding: 8px 16px;
  background: var(--pm-color-danger);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-comptes .popup-supprimer-buttons .btn-supprimer:hover {
  background: #a33530;
}

.body-comptes ~ .popup-overlay,
.popup-overlay.comptes-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.body-comptes ~ .popup-overlay.hidden,
.popup-overlay.comptes-overlay.hidden {
  display: none !important;
}

.body-producteurs {
  height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: linear-gradient(131.32deg, #f8f9fa 0%, #f5f4ff 100%);
  --pm-color-primary: #262262;
  --pm-color-primary-dark: #1b1846;
  --pm-color-primary-light: #4d4a7e;
  --pm-color-title: #110f2c;
  --pm-color-button-text: #161338;
  --pm-color-success: #62ba87;
  --pm-color-success-bg: #eff8f3;
  --pm-color-success-text: #3b7051;
  --pm-color-danger: #c14039;
  --pm-color-info: #5bc5f2;
  --pm-color-white: #ffffff;
  --pm-color-border: #f1f1f1;
  --pm-color-border-input: #ddd;
  --pm-color-bg-gray: #f1f1f1;
  --pm-color-text: #110f2c;
  --pm-color-text-secondary: #828282;
  --pm-color-text-muted: #a7a7a7;
  --pm-color-text-inactive: #a2a0bb;
  --pm-color-text-dark: #1e1e1e;
  --pm-font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --pm-popup-width: 531px;
  --pm-form-group-width: calc(50% - 6px);
  --pm-form-container-width: 100%;
  --pm-radius-sm: 4px;
  --pm-radius-md: 8px;
  --pm-radius-lg: 10px;
  --pm-radius-pill: 39602500px;
  --pm-shadow-popup: 0 4px 24px rgba(0, 0, 0, 0.15);
  --pm-transition: all 0.2s ease;
}
.body-producteurs svg.svg-fond {
  position: absolute;
  right: -18vh;
  bottom: -18vh;
  fill: rgba(38, 34, 98, 0.03);
  z-index: 0;
  width: auto;
  height: 90vh;
  pointer-events: none;
}
@media screen and (min-width: 720px) and (max-width: 1024px) {
  .body-producteurs svg.svg-fond {
    right: -190px;
    bottom: -50px;
    height: 480px;
    width: 550px;
  }
}
@media screen and (max-width: 719px) {
  .body-producteurs svg.svg-fond {
    right: -150px;
    bottom: -30px;
    height: 380px;
    width: 450px;
  }
}
.body-producteurs .hidden {
  display: none !important;
}
.body-producteurs .bandeau-top {
  height: 80px;
  min-height: 80px;
  width: calc(100% - 56px);
  margin: 8px 28px 0 28px;
  border-bottom: 2px solid var(--pm-color-border);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.body-producteurs .bandeau-top p {
  color: #262262;
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: normal;
}
@media screen and (max-width: 719px) {
  .body-producteurs .bandeau-top {
    position: fixed;
    top: 0;
    left: 0;
    height: 72px;
    min-height: 72px;
    border-bottom: none;
    width: 100vw;
    margin: 0;
    padding-left: 80px;
    padding-top: 8px;
    z-index: 3;
    border-radius: 0 0 8px 8px;
    background: #FCFCFF;
    box-sizing: border-box;
    justify-content: flex-start;
  }
  .body-producteurs .bandeau-top p {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
  }
}
.body-producteurs .input-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 397px;
  height: 40px;
  padding: 12px 16px;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border);
  border-radius: var(--pm-radius-sm);
  box-sizing: border-box;
}
.body-producteurs .input-search .icon-search {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.body-producteurs .input-search .icon-search circle,
.body-producteurs .input-search .icon-search line {
  stroke: var(--pm-color-primary-light);
}
.body-producteurs .input-search input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-color-text);
  background: transparent;
}
.body-producteurs .input-search input::placeholder {
  color: var(--pm-color-text-muted);
}
.body-producteurs .input-search-desktop {
  display: flex;
}
@media screen and (max-width: 719px) {
  .body-producteurs .input-search-desktop {
    display: none;
  }
}
.body-producteurs .input-search-mobile {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-producteurs .input-search-mobile {
    display: flex;
    width: 100%;
  }
}
.body-producteurs .main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0px 28px 20px;
}
@media screen and (max-width: 719px) {
  .body-producteurs .main-content {
    padding: 0;
    padding-top: 72px;
  }
}
.body-producteurs .filtre-actions-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
  scrollbar-width: none;
}
@media screen and (max-width: 719px) {
  .body-producteurs .filtre-actions-row {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
}
.body-producteurs .filtre-periode-vue {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  height: 42px;
  min-height: 42px;
  flex-direction: row;
  justify-content: flex-start;
  flex-shrink: 0;
  scrollbar-width: none;
}
.body-producteurs .filtre-periode-vue::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-producteurs .filtre-periode-vue {
    width: 100%;
    padding-left: 20px;
    margin-top: 12px;
    margin-bottom: 16px;
  }
}
.body-producteurs .block-filtre {
  height: 40px;
  min-width: fit-content;
  border-radius: var(--pm-radius-sm);
  padding: 0 4px;
  border: 1px solid var(--pm-color-border);
  background: var(--pm-color-white);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  flex-shrink: 0;
}
@media screen and (max-width: 719px) {
  .body-producteurs .block-filtre {
    margin-right: 20px;
  }
}
.body-producteurs .block-filtre .btn {
  display: flex;
  height: 40px;
  padding: 0px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--pm-transition);
  flex-shrink: 0;
}
.body-producteurs .block-filtre .btn p {
  color: var(--pm-color-text-inactive);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 21px;
  transition: 0.4s;
  white-space: nowrap;
  margin: 0;
}
.body-producteurs .block-filtre .btn:hover p {
  color: var(--pm-color-primary);
}
.body-producteurs .block-filtre .btn.--actif {
  border-bottom: 2px solid var(--pm-color-primary);
}
.body-producteurs .block-filtre .btn.--actif p {
  color: var(--pm-color-primary);
}
.body-producteurs .search-container {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-producteurs .search-container {
    display: block;
    padding: 0 20px;
    margin-bottom: 16px;
  }
}
.body-producteurs .button-container {
  display: flex;
  justify-content: flex-end;
}
.body-producteurs .button-container-desktop {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
}
@media screen and (max-width: 719px) {
  .body-producteurs .button-container-desktop {
    display: none;
  }
}
.body-producteurs .button-container-mobile {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-producteurs .button-container-mobile {
    display: flex;
    padding: 0 20px;
    margin-bottom: 16px;
  }
}
.body-producteurs .btn-nouveau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--pm-color-primary);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
  white-space: nowrap;
}
.body-producteurs .btn-nouveau:hover {
  background-color: var(--pm-color-primary-dark);
}
.body-producteurs .btn-nouveau .icon-plus {
  width: 10px;
  height: 10px;
}
.body-producteurs .button-container-mobile .btn-nouveau {
  width: 100%;
  justify-content: center;
}
.body-producteurs .page-content {
  width: 100%;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 719px) {
  .body-producteurs .page-content {
    padding: 0 20px;
  }
}
.body-producteurs .producteurs-count-wrapper {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 8px 0;
}
.body-producteurs .producteurs-count {
  font-size: 12px;
  color: var(--pm-color-text-secondary);
  font-weight: 400;
}
.body-producteurs .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  padding-right: 8px;
  padding-bottom: 16px;
}
@media screen and (max-width: 719px) {
  .body-producteurs .cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-right: 0;
    padding-bottom: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .body-producteurs .cards-grid::-webkit-scrollbar {
    display: none;
  }
}
.body-producteurs .empty-state {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--pm-color-text-muted);
  font-size: 14px;
  text-align: center;
}
.body-producteurs .card-producteur {
  width: 100%;
  background: var(--pm-color-white);
  border: 1.18px solid var(--pm-color-border);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.body-producteurs .card-producteur .card-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--pm-color-title);
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.body-producteurs .card-producteur .card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.body-producteurs .card-producteur .card-info-item {
  display: flex;
  flex-direction: column;
}
.body-producteurs .card-producteur .card-info-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--pm-color-text-secondary);
  text-transform: uppercase;
  line-height: 18px;
}
.body-producteurs .card-producteur .card-info-value {
  font-size: 14px;
  font-weight: 400;
  color: var(--pm-color-button-text);
  line-height: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.body-producteurs .card-producteur .card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 9px;
  border-top: 1.18px solid var(--pm-color-border);
}
.body-producteurs .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-producteurs .btn-icon svg {
  width: 20px;
  height: 20px;
}
.body-producteurs .btn-icon-edit svg {
  color: var(--pm-color-text-secondary);
}
.body-producteurs .btn-icon-edit:hover {
  background: var(--pm-color-border);
}
.body-producteurs .btn-icon-edit:hover svg {
  color: var(--pm-color-primary);
}
.body-producteurs .btn-icon-delete svg {
  color: var(--pm-color-danger);
}
.body-producteurs .btn-icon-delete:hover {
  background: rgba(193, 64, 57, 0.1);
}
.body-producteurs .popup-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--pm-popup-width);
  height: 100svh;
  background: var(--pm-color-white);
  box-shadow: var(--pm-shadow-popup);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: var(--pm-radius-sm);
}
@media screen and (max-width: 719px) {
  .body-producteurs .popup-panel {
    width: 100%;
    border-radius: 0;
  }
}
.body-producteurs .popup-close-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex-shrink: 0;
}
.body-producteurs .btn-fermer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--pm-color-text-dark);
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-producteurs .btn-fermer:hover {
  color: var(--pm-color-text-secondary);
}
.body-producteurs .btn-fermer svg {
  width: 10px;
  height: 10px;
}
.body-producteurs .popup-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--pm-color-title);
  line-height: 30px;
  flex-shrink: 0;
  margin-bottom: 16px;
}
.body-producteurs .popup-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-right: 8px;
}
@media screen and (max-width: 719px) {
  .body-producteurs .popup-body {
    padding-right: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .body-producteurs .popup-body::-webkit-scrollbar {
    display: none;
  }
}
.body-producteurs .popup-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.body-producteurs .section-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--pm-color-title);
  line-height: 24px;
}
.body-producteurs .popup-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  flex-shrink: 0;
  padding: 16px 0 0 0;
}
.body-producteurs .form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 12px;
  width: var(--pm-form-container-width);
}
.body-producteurs .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: var(--pm-form-group-width);
}
@media screen and (max-width: 719px) {
  .body-producteurs .form-group {
    width: 100%;
  }
}
.body-producteurs .form-group-full {
  width: 100%;
}
.body-producteurs .form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-color-title);
}
.body-producteurs .form-label .required {
  color: var(--pm-color-danger);
}
.body-producteurs .form-input {
  width: 100%;
  height: 36px;
  padding: 12px 16px;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border-input);
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-color-text);
  transition: var(--pm-transition);
}
.body-producteurs .form-input::placeholder {
  color: var(--pm-color-text-muted);
}
.body-producteurs .form-input:focus {
  outline: none;
  border-color: var(--pm-color-primary);
}
.body-producteurs .form-label .required {
  color: #dc2626;
  margin-left: 2px;
}
.body-producteurs .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--pm-color-primary);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-producteurs .btn-primary:hover {
  background: var(--pm-color-primary-dark);
}
.body-producteurs .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 8px 16px;
  background: transparent;
  color: var(--pm-color-button-text);
  border: 1px solid var(--pm-color-primary-dark);
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-producteurs .btn-secondary:hover {
  background: rgba(38, 34, 98, 0.05);
}
.body-producteurs .popup-supprimer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}
.body-producteurs .popup-supprimer-content {
  background: var(--pm-color-white);
  border-radius: var(--pm-radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  overflow: hidden;
}
.body-producteurs .popup-supprimer .popup-close-bar {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
}
.body-producteurs .popup-supprimer-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}
.body-producteurs .popup-supprimer-text {
  font-size: 17px;
  font-weight: 600;
  color: #3d3d3d;
  text-align: center;
  width: 240px;
  line-height: normal;
}
.body-producteurs .popup-supprimer-buttons {
  display: flex;
  gap: 10px;
  width: 100%;
}
.body-producteurs .popup-supprimer-buttons .btn-conserver {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--pm-color-primary);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-producteurs .popup-supprimer-buttons .btn-conserver:hover {
  background: var(--pm-color-primary-dark);
}
.body-producteurs .popup-supprimer-buttons .btn-supprimer {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 88px;
  padding: 8px 16px;
  background: var(--pm-color-danger);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-producteurs .popup-supprimer-buttons .btn-supprimer:hover {
  background: #a33530;
}

.body-producteurs ~ .popup-overlay,
.popup-overlay.producteurs-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.body-producteurs ~ .popup-overlay.hidden,
.popup-overlay.producteurs-overlay.hidden {
  display: none !important;
}

.body-entreprises {
  height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: linear-gradient(131.32deg, #f8f9fa 0%, #f5f4ff 100%);
  --pm-color-primary: #262262;
  --pm-color-primary-dark: #1b1846;
  --pm-color-primary-light: #4d4a7e;
  --pm-color-title: #110f2c;
  --pm-color-button-text: #161338;
  --pm-color-success: #62ba87;
  --pm-color-success-bg: #eff8f3;
  --pm-color-success-text: #3b7051;
  --pm-color-danger: #c14039;
  --pm-color-info: #5bc5f2;
  --pm-color-white: #ffffff;
  --pm-color-border: #f1f1f1;
  --pm-color-border-input: #ddd;
  --pm-color-bg-gray: #f1f1f1;
  --pm-color-text: #110f2c;
  --pm-color-text-secondary: #828282;
  --pm-color-text-muted: #a7a7a7;
  --pm-color-text-inactive: #a2a0bb;
  --pm-color-text-dark: #1e1e1e;
  --pm-font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --pm-popup-width: 531px;
  --pm-form-group-width: calc(50% - 6px);
  --pm-form-container-width: 100%;
  --pm-radius-sm: 4px;
  --pm-radius-md: 8px;
  --pm-radius-lg: 10px;
  --pm-radius-pill: 39602500px;
  --pm-shadow-popup: 0 4px 24px rgba(0, 0, 0, 0.15);
  --pm-transition: all 0.2s ease;
}
.body-entreprises svg.svg-fond {
  position: absolute;
  right: -18vh;
  bottom: -18vh;
  fill: rgba(38, 34, 98, 0.03);
  z-index: 0;
  width: auto;
  height: 90vh;
  pointer-events: none;
}
@media screen and (min-width: 720px) and (max-width: 1024px) {
  .body-entreprises svg.svg-fond {
    right: -190px;
    bottom: -50px;
    height: 480px;
    width: 550px;
  }
}
@media screen and (max-width: 719px) {
  .body-entreprises svg.svg-fond {
    right: -150px;
    bottom: -30px;
    height: 380px;
    width: 450px;
  }
}
.body-entreprises .hidden {
  display: none !important;
}
.body-entreprises .bandeau-top {
  height: 80px;
  min-height: 80px;
  width: calc(100% - 56px);
  margin: 8px 28px 0 28px;
  border-bottom: 2px solid var(--pm-color-border);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.body-entreprises .bandeau-top p {
  color: #262262;
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: normal;
}
@media screen and (max-width: 719px) {
  .body-entreprises .bandeau-top {
    position: fixed;
    top: 0;
    left: 0;
    height: 72px;
    min-height: 72px;
    border-bottom: none;
    width: 100vw;
    margin: 0;
    padding-left: 80px;
    padding-top: 8px;
    z-index: 3;
    border-radius: 0 0 8px 8px;
    background: #FCFCFF;
    box-sizing: border-box;
    justify-content: flex-start;
  }
  .body-entreprises .bandeau-top p {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
  }
}
.body-entreprises .input-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 397px;
  height: 40px;
  padding: 12px 16px;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border);
  border-radius: var(--pm-radius-sm);
  box-sizing: border-box;
}
.body-entreprises .input-search .icon-search {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.body-entreprises .input-search .icon-search circle,
.body-entreprises .input-search .icon-search line {
  stroke: var(--pm-color-primary-light);
}
.body-entreprises .input-search input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-color-text);
  background: transparent;
}
.body-entreprises .input-search input::placeholder {
  color: var(--pm-color-text-muted);
}
.body-entreprises .input-search-desktop {
  display: flex;
}
@media screen and (max-width: 719px) {
  .body-entreprises .input-search-desktop {
    display: none;
  }
}
.body-entreprises .input-search-mobile {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-entreprises .input-search-mobile {
    display: flex;
    width: 100%;
  }
}
.body-entreprises .main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0px 28px 20px;
}
@media screen and (max-width: 719px) {
  .body-entreprises .main-content {
    padding: 0;
    padding-top: 72px;
  }
}
.body-entreprises .filtre-actions-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
  scrollbar-width: none;
}
@media screen and (max-width: 719px) {
  .body-entreprises .filtre-actions-row {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
}
.body-entreprises .filtre-periode-vue {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  height: 42px;
  min-height: 42px;
  flex-direction: row;
  justify-content: flex-start;
  flex-shrink: 0;
  scrollbar-width: none;
}
.body-entreprises .filtre-periode-vue::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-entreprises .filtre-periode-vue {
    width: 100%;
    padding-left: 20px;
    margin-top: 12px;
    margin-bottom: 16px;
  }
}
.body-entreprises .block-filtre {
  height: 40px;
  min-width: fit-content;
  border-radius: var(--pm-radius-sm);
  padding: 0 4px;
  border: 1px solid var(--pm-color-border);
  background: var(--pm-color-white);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  flex-shrink: 0;
}
@media screen and (max-width: 719px) {
  .body-entreprises .block-filtre {
    margin-right: 20px;
  }
}
.body-entreprises .block-filtre .btn {
  display: flex;
  height: 40px;
  padding: 0px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--pm-transition);
  flex-shrink: 0;
}
.body-entreprises .block-filtre .btn p {
  color: var(--pm-color-text-inactive);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 21px;
  transition: 0.4s;
  white-space: nowrap;
  margin: 0;
}
.body-entreprises .block-filtre .btn:hover p {
  color: var(--pm-color-primary);
}
.body-entreprises .block-filtre .btn.--actif {
  border-bottom: 2px solid var(--pm-color-primary);
}
.body-entreprises .block-filtre .btn.--actif p {
  color: var(--pm-color-primary);
}
.body-entreprises .search-container {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-entreprises .search-container {
    display: block;
    padding: 0 20px;
    margin-bottom: 16px;
  }
}
.body-entreprises .button-container {
  display: flex;
  justify-content: flex-end;
}
.body-entreprises .button-container-desktop {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
}
@media screen and (max-width: 719px) {
  .body-entreprises .button-container-desktop {
    display: none;
  }
}
.body-entreprises .button-container-mobile {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-entreprises .button-container-mobile {
    display: flex;
    padding: 0 20px;
    margin-bottom: 16px;
  }
}
.body-entreprises .btn-nouveau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--pm-color-primary);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
  white-space: nowrap;
}
.body-entreprises .btn-nouveau:hover {
  background-color: var(--pm-color-primary-dark);
}
.body-entreprises .btn-nouveau .icon-plus {
  width: 10px;
  height: 10px;
}
.body-entreprises .button-container-mobile .btn-nouveau {
  width: 100%;
  justify-content: center;
}
.body-entreprises .page-content {
  width: 100%;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 719px) {
  .body-entreprises .page-content {
    padding: 0 20px;
  }
}
.body-entreprises .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  padding-right: 8px;
  padding-bottom: 16px;
}
@media screen and (max-width: 719px) {
  .body-entreprises .cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-right: 0;
    padding-bottom: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .body-entreprises .cards-grid::-webkit-scrollbar {
    display: none;
  }
}
.body-entreprises .empty-state {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--pm-color-text-muted);
  font-size: 14px;
  text-align: center;
}
.body-entreprises .entreprises-count-wrapper {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 8px 0;
}
.body-entreprises .entreprises-count {
  font-size: 12px;
  color: var(--pm-color-text-secondary);
  font-weight: 400;
}
.body-entreprises .card-entreprise {
  width: 100%;
  background: var(--pm-color-white);
  border: 1.18px solid var(--pm-color-border);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.body-entreprises .card-entreprise .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
.body-entreprises .card-entreprise .card-header-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.body-entreprises .card-entreprise .card-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--pm-color-title);
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.body-entreprises .card-entreprise .card-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}
.body-entreprises .card-entreprise .card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.body-entreprises .card-entreprise .card-info-item {
  display: flex;
  flex-direction: column;
}
.body-entreprises .card-entreprise .card-info-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--pm-color-text-secondary);
  text-transform: uppercase;
  line-height: 18px;
}
.body-entreprises .card-entreprise .card-info-value {
  font-size: 14px;
  font-weight: 400;
  color: var(--pm-color-button-text);
  line-height: 21px;
}
.body-entreprises .card-entreprise .card-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1.18px solid var(--pm-color-border);
}
.body-entreprises .card-entreprise .card-footer-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
}
.body-entreprises .card-entreprise .status-indicator {
  display: flex;
  align-items: center;
}
.body-entreprises .card-entreprise .status-dot {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 400;
  color: var(--pm-color-button-text);
}
.body-entreprises .card-entreprise .status-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #4e956c;
  border-radius: 50%;
  flex-shrink: 0;
}
.body-entreprises .card-entreprise .status-dot.inactive {
  color: var(--pm-color-button-text);
}
.body-entreprises .card-entreprise .status-dot.inactive::before {
  background: var(--pm-color-danger);
}
.body-entreprises .card-entreprise .status-dot:not(.inactive)::before {
  animation: dot-pulse 2.5s ease-in-out infinite;
}
.body-entreprises .card-entreprise.bypass-active .status-dot-paiement:not(.inactive),
.body-entreprises .card-entreprise.bypass-active .status-dot-sms:not(.inactive),
.body-entreprises .card-entreprise.bypass-active .status-dot-sim:not(.inactive) {
  color: #d97706;
}
.body-entreprises .card-entreprise.bypass-active .status-dot-paiement:not(.inactive)::before,
.body-entreprises .card-entreprise.bypass-active .status-dot-sms:not(.inactive)::before,
.body-entreprises .card-entreprise.bypass-active .status-dot-sim:not(.inactive)::before {
  background: #d97706;
}
.body-entreprises .card-entreprise.entreprise-inactive .status-dot {
  color: var(--pm-color-text-muted);
}
.body-entreprises .card-entreprise.entreprise-inactive .status-dot::before {
  animation: none;
  background: var(--pm-color-text-muted);
}
@keyframes dot-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
.body-entreprises .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(98, 186, 135, 0.1);
  border-radius: var(--pm-radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--pm-color-success-text);
  line-height: normal;
  flex-shrink: 0;
  width: fit-content;
}
.body-entreprises .status-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--pm-color-success);
  border-radius: 50%;
  flex-shrink: 0;
}
.body-entreprises .status-badge.inactive {
  background: var(--pm-color-bg-gray);
  color: var(--pm-color-text-secondary);
}
.body-entreprises .status-badge.inactive::before {
  background: var(--pm-color-text-secondary);
}
.body-entreprises .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-entreprises .btn-icon svg {
  width: 20px;
  height: 20px;
}
.body-entreprises .btn-icon-edit svg {
  color: var(--pm-color-text-secondary);
}
.body-entreprises .btn-icon-edit:hover {
  background: var(--pm-color-border);
}
.body-entreprises .btn-icon-edit:hover svg {
  color: var(--pm-color-primary);
}
.body-entreprises .btn-icon-delete svg {
  color: var(--pm-color-danger);
}
.body-entreprises .btn-icon-delete:hover {
  background: rgba(193, 64, 57, 0.1);
}
.body-entreprises .popup-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--pm-popup-width);
  height: 100svh;
  background: var(--pm-color-white);
  box-shadow: var(--pm-shadow-popup);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: var(--pm-radius-sm);
}
@media screen and (max-width: 719px) {
  .body-entreprises .popup-panel {
    width: 100%;
    border-radius: 0;
  }
}
.body-entreprises .popup-close-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex-shrink: 0;
}
.body-entreprises .btn-fermer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--pm-color-text-dark);
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-entreprises .btn-fermer:hover {
  color: var(--pm-color-text-secondary);
}
.body-entreprises .btn-fermer svg {
  width: 10px;
  height: 10px;
}
.body-entreprises .popup-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--pm-color-title);
  line-height: 30px;
  flex-shrink: 0;
  margin-bottom: 16px;
}
.body-entreprises .popup-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-right: 8px;
}
@media screen and (max-width: 719px) {
  .body-entreprises .popup-body {
    padding-right: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .body-entreprises .popup-body::-webkit-scrollbar {
    display: none;
  }
}
.body-entreprises .popup-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.body-entreprises .section-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--pm-color-title);
  line-height: 24px;
}
.body-entreprises .popup-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  flex-shrink: 0;
  padding: 16px 0 0 0;
}
.body-entreprises .form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 12px;
  width: var(--pm-form-container-width);
}
.body-entreprises .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: var(--pm-form-group-width);
}
@media screen and (max-width: 719px) {
  .body-entreprises .form-group {
    width: 100%;
  }
}
.body-entreprises .form-group-full {
  width: 100%;
}
.body-entreprises .form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-color-title);
}
.body-entreprises .required {
  color: var(--pm-color-danger);
  margin-left: 2px;
}
.body-entreprises .form-input {
  width: 100%;
  height: 36px;
  padding: 12px 16px;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border-input);
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-color-text);
  transition: var(--pm-transition);
  box-sizing: border-box;
}
.body-entreprises .form-input::placeholder {
  color: var(--pm-color-text-muted);
}
.body-entreprises .form-input:focus {
  outline: none;
  border-color: var(--pm-color-primary);
}
.body-entreprises .dropdown-wrapper {
  position: relative;
}
.body-entreprises .select-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 12px;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border-input);
  border-radius: var(--pm-radius-sm);
  cursor: pointer;
}
.body-entreprises .select-field .select-value {
  font-size: 14px;
  font-weight: 400;
  color: var(--pm-color-text);
}
.body-entreprises .select-field .icon-chevron {
  width: 10px;
  height: 6px;
  transition: transform 0.2s ease;
}
.body-entreprises .select-field.open .icon-chevron {
  transform: rotate(180deg);
}
.body-entreprises .select-enabled {
  background: #eff8f3;
  border-color: #62ba87;
}
.body-entreprises .select-enabled .select-value {
  color: #62ba87;
  font-size: 12px;
  font-weight: 600;
}
.body-entreprises .select-enabled .icon-chevron path {
  stroke: #62ba87;
}
.body-entreprises .select-disabled {
  background: #fef2f2;
  border-color: #f87171;
}
.body-entreprises .select-disabled .select-value {
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
}
.body-entreprises .select-disabled .icon-chevron path {
  stroke: #dc2626;
}
.body-entreprises .select-neutral {
  background: var(--pm-color-white);
  border-color: var(--pm-color-border-input);
}
.body-entreprises .select-neutral .select-value {
  color: var(--pm-color-text);
  font-size: 14px;
  font-weight: 400;
}
.body-entreprises .select-neutral .icon-chevron path {
  stroke: var(--pm-color-text-secondary);
}
.body-entreprises .dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border);
  border-radius: var(--pm-radius-sm);
  margin-top: 4px;
  z-index: 100;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.body-entreprises .dropdown-list.hidden {
  display: none;
}
.body-entreprises .dropdown-item {
  padding: 8px 12px;
  font-size: 14px;
  color: var(--pm-color-text);
  cursor: pointer;
  transition: background 0.15s;
}
.body-entreprises .dropdown-item:hover {
  background: var(--pm-color-bg-gray);
}
.body-entreprises .dropdown-item:first-child {
  border-radius: var(--pm-radius-sm) var(--pm-radius-sm) 0 0;
}
.body-entreprises .dropdown-item:last-child {
  border-radius: 0 0 var(--pm-radius-sm) var(--pm-radius-sm);
}
.body-entreprises .checkboxes-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.body-entreprises .checkbox-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.body-entreprises .checkbox-item input[type=checkbox] {
  display: none;
}
.body-entreprises .checkbox-item .checkbox-custom {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  border: 2px solid #9ca3af;
  border-radius: 4px;
  background-color: #ffffff;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s;
}
.body-entreprises .checkbox-item input[type=checkbox]:checked + .checkbox-custom {
  background: var(--pm-color-primary);
  border-color: var(--pm-color-primary);
}
.body-entreprises .checkbox-item input[type=checkbox]:checked + .checkbox-custom::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
}
.body-entreprises .checkbox-item .checkbox-label {
  font-size: 14px;
  color: var(--pm-color-text);
  line-height: 21px;
}
.body-entreprises .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--pm-color-primary);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-entreprises .btn-primary:hover {
  background: var(--pm-color-primary-dark);
}
.body-entreprises .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 8px 16px;
  background: transparent;
  color: var(--pm-color-button-text);
  border: 1px solid var(--pm-color-primary-dark);
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-entreprises .btn-secondary:hover {
  background: rgba(38, 34, 98, 0.05);
}
.body-entreprises .popup-supprimer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}
.body-entreprises .popup-supprimer-content {
  background: var(--pm-color-white);
  border-radius: var(--pm-radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  overflow: hidden;
}
.body-entreprises .popup-supprimer .popup-close-bar {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
}
.body-entreprises .popup-supprimer-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}
.body-entreprises .popup-supprimer-text {
  font-size: 17px;
  font-weight: 600;
  color: #3d3d3d;
  text-align: center;
  width: 240px;
  line-height: normal;
}
.body-entreprises .popup-supprimer-buttons {
  display: flex;
  gap: 10px;
  width: 100%;
}
.body-entreprises .popup-supprimer-buttons .btn-conserver {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--pm-color-primary);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-entreprises .popup-supprimer-buttons .btn-conserver:hover {
  background: var(--pm-color-primary-dark);
}
.body-entreprises .popup-supprimer-buttons .btn-supprimer {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 88px;
  padding: 8px 16px;
  background: var(--pm-color-danger);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-entreprises .popup-supprimer-buttons .btn-supprimer:hover {
  background: #a33530;
}

.body-entreprises ~ .popup-overlay,
.popup-overlay.entreprises-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.body-entreprises ~ .popup-overlay.hidden,
.popup-overlay.entreprises-overlay.hidden {
  display: none !important;
}

.body-armoires {
  height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: linear-gradient(131.32deg, #f8f9fa 0%, #f5f4ff 100%);
  --pm-color-primary: #262262;
  --pm-color-primary-dark: #1b1846;
  --pm-color-primary-light: #4d4a7e;
  --pm-color-title: #110f2c;
  --pm-color-button-text: #161338;
  --pm-color-success: #62ba87;
  --pm-color-success-bg: #eff8f3;
  --pm-color-success-text: #3b7051;
  --pm-color-danger: #c14039;
  --pm-color-info: #5bc5f2;
  --pm-color-white: #ffffff;
  --pm-color-border: #f1f1f1;
  --pm-color-border-input: #ddd;
  --pm-color-bg-gray: #f1f1f1;
  --pm-color-text: #110f2c;
  --pm-color-text-secondary: #828282;
  --pm-color-text-muted: #a7a7a7;
  --pm-color-text-inactive: #a2a0bb;
  --pm-color-text-dark: #1e1e1e;
  --pm-font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --pm-sidebar-width: 260px;
  --pm-popup-width: 531px;
  --pm-card-width: 273px;
  --pm-form-group-width: calc(50% - 6px);
  --pm-form-container-width: 100%;
  --pm-radius-sm: 4px;
  --pm-radius-md: 8px;
  --pm-radius-lg: 10px;
  --pm-radius-pill: 39602500px;
  --pm-shadow-popup: 0 4px 24px rgba(0, 0, 0, 0.15);
  --pm-transition: all 0.2s ease;
}
.body-armoires svg.svg-fond {
  position: absolute;
  right: -18vh;
  bottom: -18vh;
  fill: rgba(38, 34, 98, 0.03);
  z-index: 0;
  width: auto;
  height: 90vh;
  pointer-events: none;
}
@media screen and (min-width: 720px) and (max-width: 1024px) {
  .body-armoires svg.svg-fond {
    right: -190px;
    bottom: -50px;
    height: 480px;
    width: 550px;
  }
}
@media screen and (max-width: 719px) {
  .body-armoires svg.svg-fond {
    right: -150px;
    bottom: -30px;
    height: 380px;
    width: 450px;
  }
}
.body-armoires .hidden {
  display: none !important;
}
.body-armoires .bandeau-top {
  height: 80px;
  min-height: 80px;
  width: calc(100% - 56px);
  margin: 8px 28px 0 28px;
  border-bottom: 2px solid var(--pm-color-border);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.body-armoires .bandeau-top p {
  color: #262262;
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: normal;
}
@media screen and (max-width: 719px) {
  .body-armoires .bandeau-top {
    position: fixed;
    top: 0;
    left: 0;
    height: 72px;
    min-height: 72px;
    border-bottom: none;
    width: 100vw;
    margin: 0;
    padding-left: 80px;
    padding-top: 8px;
    z-index: 3;
    border-radius: 0 0 8px 8px;
    background: #FCFCFF;
    box-sizing: border-box;
    justify-content: flex-start;
  }
  .body-armoires .bandeau-top p {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
  }
}
.body-armoires .input-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 397px;
  height: 40px;
  padding: 12px 16px;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border);
  border-radius: var(--pm-radius-sm);
  box-sizing: border-box;
}
.body-armoires .input-search .icon-search {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.body-armoires .input-search .icon-search circle,
.body-armoires .input-search .icon-search line {
  stroke: var(--pm-color-primary-light);
}
.body-armoires .input-search input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-color-text);
  background: transparent;
}
.body-armoires .input-search input::placeholder {
  color: var(--pm-color-text-muted);
}
.body-armoires .input-search-desktop {
  display: flex;
}
@media screen and (max-width: 719px) {
  .body-armoires .input-search-desktop {
    display: none;
  }
}
.body-armoires .input-search-mobile {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-armoires .input-search-mobile {
    display: flex;
    width: 100%;
  }
}
.body-armoires .main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0px 28px 20px;
}
@media screen and (max-width: 719px) {
  .body-armoires .main-content {
    padding: 0;
    padding-top: 72px;
  }
}
.body-armoires .filtre-actions-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
  scrollbar-width: none;
}
@media screen and (max-width: 719px) {
  .body-armoires .filtre-actions-row {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
}
.body-armoires .filtre-periode-vue {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  height: 42px;
  min-height: 42px;
  flex-direction: row;
  justify-content: flex-start;
  flex-shrink: 0;
  scrollbar-width: none;
}
.body-armoires .filtre-periode-vue::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-armoires .filtre-periode-vue {
    width: 100%;
    padding-left: 20px;
    margin-top: 12px;
    margin-bottom: 16px;
  }
}
.body-armoires .block-filtre {
  height: 40px;
  min-width: fit-content;
  border-radius: var(--pm-radius-sm);
  padding: 0 4px;
  border: 1px solid var(--pm-color-border);
  background: var(--pm-color-white);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  flex-shrink: 0;
}
@media screen and (max-width: 719px) {
  .body-armoires .block-filtre {
    margin-right: 20px;
  }
}
.body-armoires .block-filtre .btn {
  display: flex;
  height: 40px;
  padding: 0px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--pm-transition);
  flex-shrink: 0;
}
.body-armoires .block-filtre .btn p {
  color: var(--pm-color-text-inactive);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 21px;
  transition: 0.4s;
  white-space: nowrap;
  margin: 0;
}
.body-armoires .block-filtre .btn:hover p {
  color: var(--pm-color-primary);
}
.body-armoires .block-filtre .btn.--actif {
  border-bottom: 2px solid var(--pm-color-primary);
}
.body-armoires .block-filtre .btn.--actif p {
  color: var(--pm-color-primary);
}
.body-armoires .search-container {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-armoires .search-container {
    display: block;
    padding: 0 20px;
    margin-bottom: 16px;
  }
}
.body-armoires .button-container {
  display: flex;
  justify-content: flex-end;
}
.body-armoires .button-container-desktop {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
}
@media screen and (max-width: 719px) {
  .body-armoires .button-container-desktop {
    display: none;
  }
}
.body-armoires .button-container-mobile {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-armoires .button-container-mobile {
    display: flex;
    padding: 0 20px;
    margin-bottom: 16px;
  }
}
.body-armoires .btn-nouveau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--pm-color-primary);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
  white-space: nowrap;
}
.body-armoires .btn-nouveau:hover {
  background-color: var(--pm-color-primary-dark);
}
.body-armoires .btn-nouveau .icon-plus {
  width: 10px;
  height: 10px;
}
.body-armoires .button-container-mobile .btn-nouveau {
  width: 100%;
  justify-content: center;
}
.body-armoires .page-content {
  width: 100%;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 719px) {
  .body-armoires .page-content {
    padding: 0 20px;
  }
}
.body-armoires .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 16px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  padding-right: 8px;
  padding-bottom: 16px;
}
@media screen and (max-width: 719px) {
  .body-armoires .cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-right: 0;
    padding-bottom: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .body-armoires .cards-grid::-webkit-scrollbar {
    display: none;
  }
}
.body-armoires .empty-state {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--pm-color-text-muted);
  font-size: 14px;
  text-align: center;
}
.body-armoires .armoires-count-wrapper {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 8px 0;
}
.body-armoires .armoires-count {
  font-size: 12px;
  color: var(--pm-color-text-secondary);
  font-weight: 400;
}
.body-armoires .card-armoire {
  width: 100%;
  background: var(--pm-color-white);
  border: 1.18px solid var(--pm-color-border);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.body-armoires .card-armoire .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.body-armoires .card-armoire .card-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--pm-color-title);
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.body-armoires .card-armoire .card-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: var(--pm-color-text-secondary);
  line-height: 21px;
}
.body-armoires .card-armoire .card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 9px;
  border-top: 1.18px solid var(--pm-color-border);
}
.body-armoires .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--pm-color-bg-gray);
  border-radius: var(--pm-radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--pm-color-text-secondary);
  line-height: normal;
  flex-shrink: 0;
}
.body-armoires .status-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--pm-color-text-secondary);
  border-radius: 50%;
  flex-shrink: 0;
}
.body-armoires .status-badge.actif {
  background: rgba(98, 186, 135, 0.1);
  color: var(--pm-color-success-text);
}
.body-armoires .status-badge.actif::before {
  background: var(--pm-color-success);
}
.body-armoires .status-badge.inactive {
  background: var(--pm-color-bg-gray);
  color: var(--pm-color-text-secondary);
}
.body-armoires .status-badge.inactive::before {
  background: var(--pm-color-text-secondary);
}
.body-armoires .status-badge.refrigere {
  background: rgba(91, 197, 242, 0.15);
  color: var(--pm-color-info);
}
.body-armoires .status-badge.refrigere::before {
  background: var(--pm-color-info);
}
.body-armoires .status-badge.congele {
  background: rgba(38, 34, 98, 0.1);
  color: var(--pm-color-primary);
}
.body-armoires .status-badge.congele::before {
  background: var(--pm-color-primary);
}
.body-armoires .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-armoires .btn-icon svg {
  width: 20px;
  height: 20px;
}
.body-armoires .btn-icon-edit svg {
  color: var(--pm-color-text-secondary);
}
.body-armoires .btn-icon-edit:hover {
  background: var(--pm-color-border);
}
.body-armoires .btn-icon-edit:hover svg {
  color: var(--pm-color-primary);
}
.body-armoires .btn-icon-delete svg {
  color: var(--pm-color-danger);
}
.body-armoires .btn-icon-delete:hover {
  background: rgba(193, 64, 57, 0.1);
}
.body-armoires .popup-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 531px;
  height: 100svh;
  background: var(--pm-color-white);
  box-shadow: var(--pm-shadow-popup);
  z-index: 1001;
  overflow: hidden;
  border-radius: 4px 0 0 4px;
}
@media screen and (max-width: 719px) {
  .body-armoires .popup-panel {
    width: 100%;
    border-radius: 0;
  }
}
.body-armoires .popup-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  gap: 10px;
}
.body-armoires .popup-close-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
}
.body-armoires .btn-fermer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1E1E1E;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-armoires .btn-fermer:hover {
  opacity: 0.7;
}
.body-armoires .btn-fermer svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.body-armoires .popup-title {
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #262262;
  line-height: 30px;
  flex-shrink: 0;
}
.body-armoires .popup-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow-y: auto;
  overflow-x: hidden;
}
@media screen and (max-width: 719px) {
  .body-armoires .popup-body {
    scrollbar-width: none;
  }
  .body-armoires .popup-body::-webkit-scrollbar {
    display: none;
  }
}
.body-armoires .popup-footer {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 8px;
  padding: 0;
  flex-shrink: 0;
}
.body-armoires .form-grid-armoire {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}
.body-armoires .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.body-armoires .form-group-full {
  width: 100%;
}
.body-armoires .form-group-half {
  width: calc(50% - 8px);
}
@media screen and (max-width: 719px) {
  .body-armoires .form-group-half {
    width: 100%;
  }
}
.body-armoires .form-label {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #262262;
  line-height: normal;
}
.body-armoires .form-label .required {
  color: var(--pm-color-danger);
  margin-left: 2px;
}
.body-armoires .form-input {
  width: 100%;
  height: 36px;
  padding: 12px 16px;
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #262262;
  box-sizing: border-box;
}
.body-armoires .form-input::placeholder {
  color: #A7A7A7;
  font-weight: 600;
}
.body-armoires .form-input:focus {
  outline: none;
  border-color: #262262;
}
.body-armoires .form-input.input-error {
  border-color: var(--pm-color-danger);
}
.body-armoires .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: #262262;
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.body-armoires .btn-primary:hover {
  background: #1B1846;
}
.body-armoires .btn-primary:disabled {
  opacity: 0.6;
}
.body-armoires .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 8px 16px;
  background: transparent;
  color: #161338;
  border: 1px solid #1B1846;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.body-armoires .btn-secondary:hover {
  background: rgba(38, 34, 98, 0.05);
}
.body-armoires .dropdown-wrapper {
  position: relative;
}
.body-armoires .select-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 12px;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border-input);
  border-radius: var(--pm-radius-sm);
  cursor: pointer;
}
.body-armoires .select-field .select-value {
  font-size: 14px;
  font-weight: 400;
  color: var(--pm-color-text);
}
.body-armoires .select-field .icon-chevron {
  width: 10px;
  height: 6px;
  transition: transform 0.2s ease;
}
.body-armoires .select-field.open .icon-chevron {
  transform: rotate(180deg);
}
.body-armoires .select-sec {
  background: var(--pm-color-bg-gray);
  border-color: var(--pm-color-border);
}
.body-armoires .select-sec .select-value {
  color: var(--pm-color-text-secondary);
  font-size: 12px;
  font-weight: 600;
}
.body-armoires .select-sec .icon-chevron path {
  stroke: var(--pm-color-text-secondary);
}
.body-armoires .select-refrigere {
  background: rgba(91, 197, 242, 0.15);
  border-color: #5BC5F2;
}
.body-armoires .select-refrigere .select-value {
  color: #5BC5F2;
  font-size: 12px;
  font-weight: 600;
}
.body-armoires .select-refrigere .icon-chevron path {
  stroke: #5BC5F2;
}
.body-armoires .select-congele {
  background: rgba(38, 34, 98, 0.1);
  border-color: #262262;
}
.body-armoires .select-congele .select-value {
  color: #262262;
  font-size: 12px;
  font-weight: 600;
}
.body-armoires .select-congele .icon-chevron path {
  stroke: #262262;
}
.body-armoires .dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border);
  border-radius: var(--pm-radius-sm);
  margin-top: 4px;
  z-index: 100;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.body-armoires .dropdown-list.hidden {
  display: none;
}
.body-armoires .dropdown-item {
  padding: 8px 12px;
  font-size: 14px;
  color: var(--pm-color-text);
  cursor: pointer;
  transition: background 0.15s;
}
.body-armoires .dropdown-item:hover {
  background: var(--pm-color-bg-gray);
}
.body-armoires .dropdown-item:first-child {
  border-radius: var(--pm-radius-sm) var(--pm-radius-sm) 0 0;
}
.body-armoires .dropdown-item:last-child {
  border-radius: 0 0 var(--pm-radius-sm) var(--pm-radius-sm);
}
.body-armoires .popup-supprimer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}
.body-armoires .popup-supprimer-content {
  background: var(--pm-color-white);
  border-radius: var(--pm-radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  overflow: hidden;
}
.body-armoires .popup-supprimer .popup-close-bar {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
}
.body-armoires .popup-supprimer-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}
.body-armoires .popup-supprimer-text {
  font-size: 17px;
  font-weight: 600;
  color: #3d3d3d;
  text-align: center;
  width: 240px;
  line-height: normal;
}
.body-armoires .popup-supprimer-buttons {
  display: flex;
  gap: 10px;
  width: 100%;
}
.body-armoires .popup-supprimer-buttons .btn-conserver {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--pm-color-primary);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-armoires .popup-supprimer-buttons .btn-conserver:hover {
  background: var(--pm-color-primary-dark);
}
.body-armoires .popup-supprimer-buttons .btn-supprimer {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 88px;
  padding: 8px 16px;
  background: var(--pm-color-danger);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-armoires .popup-supprimer-buttons .btn-supprimer:hover {
  background: #a33530;
}

.body-armoires ~ .popup-overlay,
.popup-overlay.armoires-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.body-armoires ~ .popup-overlay.hidden,
.popup-overlay.armoires-overlay.hidden {
  display: none !important;
}

.body-categories {
  height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: linear-gradient(131.32deg, #f8f9fa 0%, #f5f4ff 100%);
  --pm-color-primary: #262262;
  --pm-color-primary-dark: #1b1846;
  --pm-color-primary-light: #4d4a7e;
  --pm-color-title: #110f2c;
  --pm-color-button-text: #161338;
  --pm-color-success: #62ba87;
  --pm-color-success-bg: #eff8f3;
  --pm-color-success-text: #3b7051;
  --pm-color-danger: #c14039;
  --pm-color-info: #5bc5f2;
  --pm-color-white: #ffffff;
  --pm-color-border: #f1f1f1;
  --pm-color-border-input: #ddd;
  --pm-color-bg-gray: #f1f1f1;
  --pm-color-text: #110f2c;
  --pm-color-text-secondary: #828282;
  --pm-color-text-muted: #a7a7a7;
  --pm-color-text-inactive: #a2a0bb;
  --pm-color-text-dark: #1e1e1e;
  --pm-font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --pm-sidebar-width: 260px;
  --pm-popup-width: 531px;
  --pm-card-width: 273px;
  --pm-form-group-width: calc(50% - 6px);
  --pm-form-container-width: 100%;
  --pm-radius-sm: 4px;
  --pm-radius-md: 8px;
  --pm-radius-lg: 10px;
  --pm-radius-pill: 39602500px;
  --pm-shadow-popup: 0 4px 24px rgba(0, 0, 0, 0.15);
  --pm-transition: all 0.2s ease;
}
.body-categories .hidden {
  display: none !important;
}
.body-categories svg.svg-fond {
  position: absolute;
  right: -18vh;
  bottom: -18vh;
  fill: rgba(38, 34, 98, 0.03);
  z-index: 0;
  width: auto;
  height: 90vh;
  pointer-events: none;
}
@media screen and (min-width: 720px) and (max-width: 1024px) {
  .body-categories svg.svg-fond {
    right: -190px;
    bottom: -50px;
    height: 480px;
    width: 550px;
  }
}
@media screen and (max-width: 719px) {
  .body-categories svg.svg-fond {
    right: -150px;
    bottom: -30px;
    height: 380px;
    width: 450px;
  }
}
.body-categories .bandeau-top {
  height: 80px;
  min-height: 80px;
  width: calc(100% - 56px);
  margin: 8px 28px 0 28px;
  border-bottom: 2px solid var(--pm-color-border);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.body-categories .bandeau-top p {
  color: #262262;
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: normal;
}
@media screen and (max-width: 719px) {
  .body-categories .bandeau-top {
    position: fixed;
    top: 0;
    left: 0;
    height: 72px;
    min-height: 72px;
    border-bottom: none;
    width: 100vw;
    margin: 0;
    padding-left: 80px;
    padding-top: 8px;
    z-index: 3;
    border-radius: 0 0 8px 8px;
    background: #FCFCFF;
    box-sizing: border-box;
    justify-content: flex-start;
  }
  .body-categories .bandeau-top p {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
  }
}
.body-categories .input-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 397px;
  height: 40px;
  padding: 12px 16px;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border);
  border-radius: var(--pm-radius-sm);
  box-sizing: border-box;
}
.body-categories .input-search .icon-search {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.body-categories .input-search .icon-search circle,
.body-categories .input-search .icon-search line {
  stroke: var(--pm-color-primary-light);
}
.body-categories .input-search input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-color-text);
  background: transparent;
}
.body-categories .input-search input::placeholder {
  color: var(--pm-color-text-muted);
}
.body-categories .input-search-desktop {
  display: flex;
}
@media screen and (max-width: 719px) {
  .body-categories .input-search-desktop {
    display: none;
  }
}
.body-categories .input-search-mobile {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-categories .input-search-mobile {
    display: flex;
    width: 100%;
  }
}
.body-categories .main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0px 28px 20px;
}
@media screen and (max-width: 719px) {
  .body-categories .main-content {
    padding: 0;
    padding-top: 72px;
  }
}
.body-categories .filtre-actions-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
  scrollbar-width: none;
}
@media screen and (max-width: 719px) {
  .body-categories .filtre-actions-row {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
}
.body-categories .filtre-periode-vue {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  height: 42px;
  min-height: 42px;
  flex-direction: row;
  justify-content: flex-start;
  flex-shrink: 0;
  scrollbar-width: none;
}
.body-categories .filtre-periode-vue::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-categories .filtre-periode-vue {
    width: 100%;
    padding-left: 20px;
    margin-top: 12px;
    margin-bottom: 16px;
  }
}
.body-categories .block-filtre {
  height: 40px;
  min-width: fit-content;
  border-radius: var(--pm-radius-sm);
  padding: 0 4px;
  border: 1px solid var(--pm-color-border);
  background: var(--pm-color-white);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  flex-shrink: 0;
}
@media screen and (max-width: 719px) {
  .body-categories .block-filtre {
    margin-right: 20px;
  }
}
.body-categories .block-filtre .btn {
  display: flex;
  height: 40px;
  padding: 0px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--pm-transition);
  flex-shrink: 0;
}
.body-categories .block-filtre .btn p {
  color: var(--pm-color-text-inactive);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 21px;
  transition: 0.4s;
  white-space: nowrap;
  margin: 0;
}
.body-categories .block-filtre .btn:hover p {
  color: var(--pm-color-primary);
}
.body-categories .block-filtre .btn.--actif {
  border-bottom: 2px solid var(--pm-color-primary);
}
.body-categories .block-filtre .btn.--actif p {
  color: var(--pm-color-primary);
}
.body-categories .search-container {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-categories .search-container {
    display: block;
    padding: 0 20px;
    margin-bottom: 16px;
  }
}
.body-categories .button-container {
  display: flex;
  justify-content: flex-end;
}
.body-categories .button-container-desktop {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
}
@media screen and (max-width: 719px) {
  .body-categories .button-container-desktop {
    display: none;
  }
}
.body-categories .button-container-mobile {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-categories .button-container-mobile {
    display: flex;
    padding: 0 20px;
    margin-bottom: 16px;
  }
}
.body-categories .btn-nouveau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--pm-color-primary);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
  white-space: nowrap;
}
.body-categories .btn-nouveau:hover {
  background-color: var(--pm-color-primary-dark);
}
.body-categories .btn-nouveau .icon-plus {
  width: 10px;
  height: 10px;
}
.body-categories .button-container-mobile .btn-nouveau {
  width: 100%;
  justify-content: center;
}
.body-categories .page-content {
  width: 100%;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 719px) {
  .body-categories .page-content {
    padding: 0 20px;
  }
}
.body-categories .cards-grid {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-categories .cards-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .body-categories .cards-grid::-webkit-scrollbar {
    display: none;
  }
}
.body-categories .card-categorie {
  width: 100%;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border);
  border-radius: var(--pm-radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.body-categories .card-categorie .card-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.body-categories .card-categorie .card-image {
  flex-shrink: 0;
}
.body-categories .card-categorie .card-image .img-placeholder {
  width: 48px;
  height: 48px;
}
.body-categories .card-categorie .card-image .img-placeholder svg {
  width: 24px;
  height: 24px;
}
.body-categories .card-categorie .card-image .card-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--pm-radius-sm);
}
.body-categories .card-categorie .card-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--pm-color-title);
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.body-categories .card-categorie .card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--pm-color-border);
}
.body-categories .empty-state {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--pm-color-text-muted);
  font-size: 14px;
  text-align: center;
}
.body-categories .categories-count-wrapper {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 8px 0;
}
.body-categories .categories-count {
  font-size: 12px;
  font-weight: 400;
  color: var(--pm-color-text-secondary);
}
.body-categories .table-container {
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border);
  border-radius: var(--pm-radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 100%;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 719px) {
  .body-categories .table-container {
    display: none;
  }
}
.body-categories .data-table {
  width: 100%;
  border-collapse: collapse;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.body-categories .data-table thead {
  display: table;
  width: 100%;
  table-layout: fixed;
  flex-shrink: 0;
  background: var(--pm-color-white);
}
.body-categories .data-table tbody {
  display: block;
  overflow-y: auto;
  flex: 1;
}
.body-categories .data-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.body-categories .data-table tbody::-webkit-scrollbar {
  width: 6px;
}
.body-categories .data-table tbody::-webkit-scrollbar-track {
  background: transparent;
}
.body-categories .data-table tbody::-webkit-scrollbar-thumb {
  background: var(--pm-color-border);
  border-radius: 3px;
}
.body-categories .data-table tbody::-webkit-scrollbar-thumb:hover {
  background: var(--pm-color-text-muted);
}
@media screen and (max-width: 719px) {
  .body-categories .data-table tbody {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .body-categories .data-table tbody::-webkit-scrollbar {
    display: none;
  }
}
.body-categories .data-table th {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-color-primary);
  background: var(--pm-color-white);
  border-bottom: 1px solid var(--pm-color-border);
}
.body-categories .data-table th.th-sortable {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}
.body-categories .data-table th.th-sortable:hover {
  background-color: rgba(0, 0, 0, 0.02);
}
.body-categories .data-table th.th-sortable .icon-tri {
  width: 15px;
  height: 11px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.body-categories .data-table th.th-sortable.sort-asc .icon-tri path:first-child {
  stroke: var(--pm-color-primary);
  stroke-width: 1.5;
}
.body-categories .data-table th.th-sortable.sort-asc .icon-tri path:last-child {
  opacity: 0.3;
}
.body-categories .data-table th.th-sortable.sort-desc .icon-tri path:first-child {
  opacity: 0.3;
}
.body-categories .data-table th.th-sortable.sort-desc .icon-tri path:last-child {
  stroke: var(--pm-color-primary);
  stroke-width: 1.5;
}
.body-categories .data-table td {
  padding: 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--pm-color-border);
  vertical-align: middle;
}
.body-categories .data-table tbody tr:last-child td {
  border-bottom: none;
}
.body-categories .data-table tbody tr:hover {
  background: rgba(241, 241, 241, 0.5);
}
.body-categories .data-table th.col-image,
.body-categories .data-table td.col-image {
  width: 100px;
  text-align: center;
}
.body-categories .data-table td.col-image .img-placeholder,
.body-categories .data-table td.col-image .table-image {
  margin: 0 auto;
}
.body-categories .data-table .col-actions {
  width: 150px;
  text-align: center;
}
.body-categories .data-table .table-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.body-categories .img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: var(--pm-color-bg-gray);
  border-radius: var(--pm-radius-sm);
}
.body-categories .img-placeholder svg {
  width: 28px;
  height: 28px;
  color: var(--pm-color-text-muted);
}
.body-categories .table-image {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: var(--pm-radius-sm);
}
.body-categories .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-categories .btn-icon svg {
  width: 20px;
  height: 20px;
}
.body-categories .btn-icon-edit svg {
  color: var(--pm-color-text-secondary);
}
.body-categories .btn-icon-edit:hover {
  background: var(--pm-color-border);
}
.body-categories .btn-icon-edit:hover svg {
  color: var(--pm-color-primary);
}
.body-categories .btn-icon-delete svg {
  color: var(--pm-color-danger);
}
.body-categories .btn-icon-delete:hover {
  background: rgba(193, 64, 57, 0.1);
}
.body-categories .popup-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--pm-popup-width);
  height: 100svh;
  background: var(--pm-color-white);
  box-shadow: var(--pm-shadow-popup);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: var(--pm-radius-sm);
}
@media screen and (max-width: 719px) {
  .body-categories .popup-panel {
    width: 100%;
    border-radius: 0;
  }
}
.body-categories .popup-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.body-categories .popup-close-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex-shrink: 0;
}
.body-categories .btn-fermer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--pm-color-text-dark);
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-categories .btn-fermer:hover {
  color: var(--pm-color-text-secondary);
}
.body-categories .btn-fermer svg {
  width: 10px;
  height: 10px;
}
.body-categories .popup-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--pm-color-title);
  line-height: 30px;
  flex-shrink: 0;
  margin-bottom: 16px;
}
.body-categories .popup-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-right: 8px;
}
@media screen and (max-width: 719px) {
  .body-categories .popup-body {
    padding-right: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .body-categories .popup-body::-webkit-scrollbar {
    display: none;
  }
}
.body-categories .popup-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.body-categories .section-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--pm-color-title);
  line-height: 24px;
}
.body-categories .popup-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  flex-shrink: 0;
  padding: 0;
}
.body-categories .form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 12px;
  width: var(--pm-form-container-width);
}
.body-categories .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: var(--pm-form-group-width);
}
@media screen and (max-width: 719px) {
  .body-categories .form-group {
    width: 100%;
  }
}
.body-categories .form-group-full {
  width: 100%;
}
.body-categories .form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-color-title);
}
.body-categories .form-label .required {
  color: var(--pm-color-danger);
}
.body-categories .form-input {
  width: 100%;
  height: 36px;
  padding: 12px 16px;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border-input);
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-color-text);
  transition: var(--pm-transition);
}
.body-categories .form-input::placeholder {
  color: var(--pm-color-text-muted);
}
.body-categories .form-input:focus {
  outline: none;
  border-color: var(--pm-color-primary);
}
.body-categories .form-row-icon-name {
  display: flex;
  align-items: center;
  gap: 12px;
}
.body-categories .form-row-icon-name .form-input {
  flex: 1;
}
.body-categories .image-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 73px;
  padding: 10px;
  background: var(--pm-color-bg-gray);
  border-radius: var(--pm-radius-sm);
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: var(--pm-transition);
}
.body-categories .image-upload-zone:hover {
  background: var(--pm-color-border);
}
.body-categories .image-upload-zone .icon-image {
  width: 41px;
  height: 41px;
  color: var(--pm-color-text-muted);
}
.body-categories .image-upload-zone #image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--pm-radius-sm);
}
.body-categories .image-upload-zone #image-preview.hidden {
  display: none;
}
.body-categories .image-upload-zone.has-image .icon-image {
  display: none;
}
.body-categories .form-label .required {
  color: #dc2626;
  margin-left: 2px;
}
.body-categories .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--pm-color-primary);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-categories .btn-primary:hover {
  background: var(--pm-color-primary-dark);
}
.body-categories .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 8px 16px;
  background: transparent;
  color: var(--pm-color-button-text);
  border: 1px solid var(--pm-color-primary-dark);
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-categories .btn-secondary:hover {
  background: rgba(38, 34, 98, 0.05);
}
.body-categories .popup-supprimer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}
.body-categories .popup-supprimer-content {
  background: var(--pm-color-white);
  border-radius: var(--pm-radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  overflow: hidden;
}
.body-categories .popup-supprimer .popup-close-bar {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
}
.body-categories .popup-supprimer-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}
.body-categories .popup-supprimer-text {
  font-size: 17px;
  font-weight: 600;
  color: #3d3d3d;
  text-align: center;
  width: 240px;
  line-height: normal;
}
.body-categories .popup-supprimer-buttons {
  display: flex;
  gap: 10px;
  width: 100%;
}
.body-categories .popup-supprimer-buttons .btn-conserver {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--pm-color-primary);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-categories .popup-supprimer-buttons .btn-conserver:hover {
  background: var(--pm-color-primary-dark);
}
.body-categories .popup-supprimer-buttons .btn-supprimer {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 88px;
  padding: 8px 16px;
  background: var(--pm-color-danger);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-categories .popup-supprimer-buttons .btn-supprimer:hover {
  background: #a33530;
}

.body-categories ~ .popup-overlay,
.popup-overlay.categories-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.body-categories ~ .popup-overlay.hidden,
.popup-overlay.categories-overlay.hidden {
  display: none !important;
}

.body-application {
  height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: linear-gradient(131.32deg, #f8f9fa 0%, #f5f4ff 100%);
  --pm-color-primary: #262262;
  --pm-color-primary-dark: #1b1846;
  --pm-color-primary-light: #4d4a7e;
  --pm-color-title: #110f2c;
  --pm-color-button-text: #161338;
  --pm-color-success: #62ba87;
  --pm-color-success-bg: #eff8f3;
  --pm-color-success-text: #3b7051;
  --pm-color-danger: #c14039;
  --pm-color-info: #5bc5f2;
  --pm-color-white: #ffffff;
  --pm-color-border: #f1f1f1;
  --pm-color-border-input: #ddd;
  --pm-color-bg-gray: #f1f1f1;
  --pm-color-text: #110f2c;
  --pm-color-text-secondary: #828282;
  --pm-color-text-muted: #a7a7a7;
  --pm-color-text-inactive: #a2a0bb;
  --pm-color-text-dark: #1e1e1e;
  --pm-font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --pm-sidebar-width: 260px;
  --pm-popup-width: 531px;
  --pm-card-width: 273px;
  --pm-form-group-width: calc(50% - 6px);
  --pm-form-container-width: 100%;
  --pm-radius-sm: 4px;
  --pm-radius-md: 8px;
  --pm-radius-lg: 10px;
  --pm-radius-pill: 39602500px;
  --pm-shadow-popup: 0 4px 24px rgba(0, 0, 0, 0.15);
  --pm-transition: all 0.2s ease;
}
.body-application .hidden {
  display: none !important;
}
.body-application svg.svg-fond {
  position: absolute;
  right: -18vh;
  bottom: -18vh;
  fill: rgba(38, 34, 98, 0.03);
  z-index: 0;
  width: auto;
  height: 90vh;
  pointer-events: none;
}
@media screen and (min-width: 720px) and (max-width: 1024px) {
  .body-application svg.svg-fond {
    right: -190px;
    bottom: -50px;
    height: 480px;
    width: 550px;
  }
}
@media screen and (max-width: 719px) {
  .body-application svg.svg-fond {
    right: -150px;
    bottom: -30px;
    height: 380px;
    width: 450px;
  }
}
.body-application .bandeau-top {
  height: 80px;
  min-height: 80px;
  width: calc(100% - 56px);
  margin: 8px 28px 0 28px;
  border-bottom: 2px solid var(--pm-color-border);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.body-application .bandeau-top p {
  color: #262262;
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: normal;
}
@media screen and (max-width: 719px) {
  .body-application .bandeau-top {
    position: fixed;
    top: 0;
    left: 0;
    height: 72px;
    min-height: 72px;
    border-bottom: none;
    width: 100vw;
    margin: 0;
    padding-left: 80px;
    padding-top: 8px;
    z-index: 3;
    border-radius: 0 0 8px 8px;
    background: #FCFCFF;
    box-sizing: border-box;
    justify-content: flex-start;
  }
  .body-application .bandeau-top p {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
  }
}
.body-application .input-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 397px;
  height: 40px;
  padding: 12px 16px;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border);
  border-radius: var(--pm-radius-sm);
  box-sizing: border-box;
}
.body-application .input-search .icon-search {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.body-application .input-search .icon-search circle,
.body-application .input-search .icon-search line {
  stroke: var(--pm-color-primary-light);
}
.body-application .input-search input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-color-text);
  background: transparent;
}
.body-application .input-search input::placeholder {
  color: var(--pm-color-text-muted);
}
.body-application .input-search-desktop {
  display: flex;
}
@media screen and (max-width: 719px) {
  .body-application .input-search-desktop {
    display: none;
  }
}
.body-application .input-search-mobile {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-application .input-search-mobile {
    display: flex;
    width: 100%;
  }
}
.body-application .main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0px 28px 20px;
}
@media screen and (max-width: 719px) {
  .body-application .main-content {
    padding: 0;
    padding-top: 72px;
  }
}
.body-application .filtre-actions-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
  scrollbar-width: none;
}
@media screen and (max-width: 719px) {
  .body-application .filtre-actions-row {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
}
.body-application .filtre-periode-vue {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  height: 42px;
  min-height: 42px;
  flex-direction: row;
  justify-content: flex-start;
  flex-shrink: 0;
  scrollbar-width: none;
}
.body-application .filtre-periode-vue::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-application .filtre-periode-vue {
    width: 100%;
    padding-left: 20px;
    margin-top: 12px;
    margin-bottom: 16px;
  }
}
.body-application .block-filtre {
  height: 40px;
  min-width: fit-content;
  border-radius: var(--pm-radius-sm);
  padding: 0 4px;
  border: 1px solid var(--pm-color-border);
  background: var(--pm-color-white);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  flex-shrink: 0;
}
@media screen and (max-width: 719px) {
  .body-application .block-filtre {
    margin-right: 20px;
  }
}
.body-application .block-filtre .btn {
  display: flex;
  height: 40px;
  padding: 0px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--pm-transition);
  flex-shrink: 0;
}
.body-application .block-filtre .btn p {
  color: var(--pm-color-text-inactive);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 21px;
  transition: 0.4s;
  white-space: nowrap;
  margin: 0;
}
.body-application .block-filtre .btn:hover p {
  color: var(--pm-color-primary);
}
.body-application .block-filtre .btn.--actif {
  border-bottom: 2px solid var(--pm-color-primary);
}
.body-application .block-filtre .btn.--actif p {
  color: var(--pm-color-primary);
}
.body-application .search-container {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-application .search-container {
    display: block;
    padding: 0 20px;
    margin-bottom: 16px;
  }
}
.body-application .button-container {
  display: flex;
  justify-content: flex-end;
}
.body-application .button-container-desktop {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
}
@media screen and (max-width: 719px) {
  .body-application .button-container-desktop {
    display: none;
  }
}
.body-application .button-container-mobile {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-application .button-container-mobile {
    display: flex;
    padding: 0 20px;
    margin-bottom: 16px;
  }
}
.body-application .btn-nouveau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--pm-color-primary);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
  white-space: nowrap;
}
.body-application .btn-nouveau:hover {
  background-color: var(--pm-color-primary-dark);
}
.body-application .btn-nouveau .icon-plus {
  width: 10px;
  height: 10px;
}
.body-application .button-container-mobile .btn-nouveau {
  width: 100%;
  justify-content: center;
}
.body-application .page-content {
  width: 100%;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 719px) {
  .body-application .page-content {
    padding: 0 20px;
  }
}
.body-application .cards-grid {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-application .cards-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .body-application .cards-grid::-webkit-scrollbar {
    display: none;
  }
}
.body-application .card-categorie {
  width: 100%;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border);
  border-radius: var(--pm-radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.body-application .card-categorie .card-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.body-application .card-categorie .card-image {
  flex-shrink: 0;
}
.body-application .card-categorie .card-image .img-placeholder {
  width: auto;
  height: 48px;
}
.body-application .card-categorie .card-image .img-placeholder svg {
  width: 24px;
  height: 24px;
}
.body-application .card-categorie .card-image .card-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--pm-radius-sm);
}
.body-application .card-categorie .card-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--pm-color-title);
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.body-application .card-categorie .card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--pm-color-border);
}
.body-application .empty-state {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--pm-color-text-muted);
  font-size: 14px;
  text-align: center;
}
.body-application .categories-count-wrapper {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 8px 0;
}
.body-application .categories-count {
  font-size: 12px;
  font-weight: 400;
  color: var(--pm-color-text-secondary);
}
.body-application .table-container {
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border);
  border-radius: var(--pm-radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 100%;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 719px) {
  .body-application .table-container {
    display: none;
  }
}
.body-application .data-table {
  width: 100%;
  border-collapse: collapse;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.body-application .data-table thead {
  display: table;
  width: 100%;
  table-layout: fixed;
  flex-shrink: 0;
  background: var(--pm-color-white);
}
.body-application .data-table tbody {
  display: block;
  overflow-y: auto;
  flex: 1;
}
.body-application .data-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.body-application .data-table tbody::-webkit-scrollbar {
  width: 6px;
}
.body-application .data-table tbody::-webkit-scrollbar-track {
  background: transparent;
}
.body-application .data-table tbody::-webkit-scrollbar-thumb {
  background: var(--pm-color-border);
  border-radius: 3px;
}
.body-application .data-table tbody::-webkit-scrollbar-thumb:hover {
  background: var(--pm-color-text-muted);
}
@media screen and (max-width: 719px) {
  .body-application .data-table tbody {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .body-application .data-table tbody::-webkit-scrollbar {
    display: none;
  }
}
.body-application .data-table th {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-color-primary);
  background: var(--pm-color-white);
  border-bottom: 1px solid var(--pm-color-border);
}
.body-application .data-table th.th-sortable {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}
.body-application .data-table th.th-sortable:hover {
  background-color: rgba(0, 0, 0, 0.02);
}
.body-application .data-table th.th-sortable .icon-tri {
  width: 15px;
  height: 11px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.body-application .data-table th.th-sortable.sort-asc .icon-tri path:first-child {
  stroke: var(--pm-color-primary);
  stroke-width: 1.5;
}
.body-application .data-table th.th-sortable.sort-asc .icon-tri path:last-child {
  opacity: 0.3;
}
.body-application .data-table th.th-sortable.sort-desc .icon-tri path:first-child {
  opacity: 0.3;
}
.body-application .data-table th.th-sortable.sort-desc .icon-tri path:last-child {
  stroke: var(--pm-color-primary);
  stroke-width: 1.5;
}
.body-application .data-table td {
  padding: 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--pm-color-border);
  vertical-align: middle;
}
.body-application .data-table tbody tr:last-child td {
  border-bottom: none;
}
.body-application .data-table tbody tr:hover {
  background: rgba(241, 241, 241, 0.5);
}
.body-application .data-table th.col-image,
.body-application .data-table td.col-image {
  width: 100px;
  text-align: center;
}
.body-application .data-table td.col-image .img-placeholder,
.body-application .data-table td.col-image .table-image {
  margin: 0 auto;
}
.body-application .data-table .col-actions {
  width: 150px;
  text-align: center;
}
.body-application .data-table .table-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.body-application .img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: var(--pm-color-bg-gray);
  border-radius: var(--pm-radius-sm);
}
.body-application .img-placeholder svg {
  width: 28px;
  height: 28px;
  color: var(--pm-color-text-muted);
}
.body-application .table-image {
  width: auto;
  height: 54px;
  object-fit: cover;
  border-radius: var(--pm-radius-sm);
}
.body-application .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-application .btn-icon svg {
  width: 20px;
  height: 20px;
}
.body-application .btn-icon-edit svg {
  color: var(--pm-color-text-secondary);
}
.body-application .btn-icon-edit:hover {
  background: var(--pm-color-border);
}
.body-application .btn-icon-edit:hover svg {
  color: var(--pm-color-primary);
}
.body-application .btn-icon-delete svg {
  color: var(--pm-color-danger);
}
.body-application .btn-icon-delete:hover {
  background: rgba(193, 64, 57, 0.1);
}
.body-application .popup-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--pm-popup-width);
  height: 100svh;
  background: var(--pm-color-white);
  box-shadow: var(--pm-shadow-popup);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: var(--pm-radius-sm);
}
@media screen and (max-width: 719px) {
  .body-application .popup-panel {
    width: 100%;
    border-radius: 0;
  }
}
.body-application .popup-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.body-application .popup-close-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex-shrink: 0;
}
.body-application .btn-fermer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--pm-color-text-dark);
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-application .btn-fermer:hover {
  color: var(--pm-color-text-secondary);
}
.body-application .btn-fermer svg {
  width: 10px;
  height: 10px;
}
.body-application .popup-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--pm-color-title);
  line-height: 30px;
  flex-shrink: 0;
  margin-bottom: 16px;
}
.body-application .popup-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-right: 8px;
}
@media screen and (max-width: 719px) {
  .body-application .popup-body {
    padding-right: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .body-application .popup-body::-webkit-scrollbar {
    display: none;
  }
}
.body-application .popup-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.body-application .section-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--pm-color-title);
  line-height: 24px;
}
.body-application .popup-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  flex-shrink: 0;
  padding: 0;
}
.body-application .form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 12px;
  width: var(--pm-form-container-width);
}
.body-application .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: var(--pm-form-group-width);
}
@media screen and (max-width: 719px) {
  .body-application .form-group {
    width: 100%;
  }
}
.body-application .form-group-full {
  width: 100%;
}
.body-application .form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-color-title);
}
.body-application .form-label .required {
  color: var(--pm-color-danger);
}
.body-application .form-input {
  width: 100%;
  height: 36px;
  padding: 12px 16px;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border-input);
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-color-text);
  transition: var(--pm-transition);
}
.body-application .form-input::placeholder {
  color: var(--pm-color-text-muted);
}
.body-application .form-input:focus {
  outline: none;
  border-color: var(--pm-color-primary);
}
.body-application .form-input.input-error {
  border-color: var(--pm-color-danger);
}
.body-application .form-row-icon-name {
  display: flex;
  align-items: center;
  gap: 12px;
}
.body-application .form-row-icon-name .form-input {
  flex: 1;
}
.body-application .image-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 73px;
  padding: 10px;
  background: var(--pm-color-bg-gray);
  border-radius: var(--pm-radius-sm);
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: var(--pm-transition);
}
.body-application .image-upload-zone:hover {
  background: var(--pm-color-border);
}
.body-application .image-upload-zone .icon-image {
  width: 41px;
  height: 41px;
  color: var(--pm-color-text-muted);
}
.body-application .image-upload-zone #image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--pm-radius-sm);
}
.body-application .image-upload-zone #image-preview.hidden {
  display: none;
}
.body-application .image-upload-zone.has-image .icon-image {
  display: none;
}
.body-application .form-label .required {
  color: #dc2626;
  margin-left: 2px;
}
.body-application .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--pm-color-primary);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-application .btn-primary:hover {
  background: var(--pm-color-primary-dark);
}
.body-application .btn-primary:disabled {
  opacity: 0.6;
}
.body-application .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 8px 16px;
  background: transparent;
  color: var(--pm-color-button-text);
  border: 1px solid var(--pm-color-primary-dark);
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-application .btn-secondary:hover {
  background: rgba(38, 34, 98, 0.05);
}
.body-application .popup-supprimer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}
.body-application .popup-supprimer-content {
  background: var(--pm-color-white);
  border-radius: var(--pm-radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  overflow: hidden;
}
.body-application .popup-supprimer .popup-close-bar {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
}
.body-application .popup-supprimer-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}
.body-application .popup-supprimer-text {
  font-size: 17px;
  font-weight: 600;
  color: #3d3d3d;
  text-align: center;
  width: 240px;
  line-height: normal;
}
.body-application .popup-supprimer-buttons {
  display: flex;
  gap: 10px;
  width: 100%;
}
.body-application .popup-supprimer-buttons .btn-conserver {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--pm-color-primary);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-application .popup-supprimer-buttons .btn-conserver:hover {
  background: var(--pm-color-primary-dark);
}
.body-application .popup-supprimer-buttons .btn-supprimer {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 88px;
  padding: 8px 16px;
  background: var(--pm-color-danger);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}
.body-application .popup-supprimer-buttons .btn-supprimer:hover {
  background: #a33530;
}
.body-application .popup-supprimer-buttons .btn-supprimer:disabled {
  opacity: 0.6;
}

.body-application ~ .popup-overlay,
.popup-overlay.application-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.body-application ~ .popup-overlay.hidden,
.popup-overlay.application-overlay.hidden {
  display: none !important;
}

.body-abonnement {
  height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: linear-gradient(131.32deg, #f8f9fa 0%, #f5f4ff 100%);
  --pm-color-primary: #262262;
  --pm-color-primary-dark: #1b1846;
  --pm-color-primary-light: #4d4a7e;
  --pm-color-white: #ffffff;
  --pm-color-border: #f1f1f1;
  --pm-color-text-inactive: #a2a0bb;
  --pm-font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --pm-radius-sm: 4px;
  --pm-transition: all 0.2s ease;
}
.body-abonnement svg.svg-fond {
  position: absolute;
  right: -18vh;
  bottom: -18vh;
  fill: rgba(38, 34, 98, 0.03);
  z-index: 0;
  width: auto;
  height: 90vh;
  pointer-events: none;
}
@media screen and (min-width: 720px) and (max-width: 1024px) {
  .body-abonnement svg.svg-fond {
    right: -190px;
    bottom: -50px;
    height: 480px;
    width: 550px;
  }
}
@media screen and (max-width: 719px) {
  .body-abonnement svg.svg-fond {
    right: -150px;
    bottom: -30px;
    height: 380px;
    width: 450px;
  }
}
.body-abonnement .bandeau-top {
  height: 80px;
  min-height: 80px;
  width: calc(100% - 56px);
  margin: 8px 28px 0 28px;
  border-bottom: 2px solid var(--pm-color-border);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.body-abonnement .bandeau-top p {
  color: #262262;
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: normal;
}
@media screen and (max-width: 719px) {
  .body-abonnement .bandeau-top {
    position: fixed;
    top: 0;
    left: 0;
    height: 72px;
    min-height: 72px;
    border-bottom: none;
    width: 100vw;
    margin: 0;
    padding-left: 80px;
    padding-top: 8px;
    z-index: 3;
    border-radius: 0 0 8px 8px;
    background: #FCFCFF;
    box-sizing: border-box;
    justify-content: flex-start;
  }
  .body-abonnement .bandeau-top p {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
  }
}
.body-abonnement .main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  padding: 0px 28px 20px;
}
@media screen and (max-width: 719px) {
  .body-abonnement .main-content {
    padding: 0;
    padding-top: 72px;
  }
}
.body-abonnement .filtre-actions-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
  scrollbar-width: none;
}
@media screen and (max-width: 719px) {
  .body-abonnement .filtre-actions-row {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
}
.body-abonnement .filtre-periode-vue {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  height: 42px;
  min-height: 42px;
  flex-direction: row;
  justify-content: flex-start;
  flex-shrink: 0;
  scrollbar-width: none;
}
.body-abonnement .filtre-periode-vue::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 719px) {
  .body-abonnement .filtre-periode-vue {
    width: 100%;
    padding-left: 20px;
    margin-top: 12px;
    margin-bottom: 16px;
  }
}
.body-abonnement .block-filtre {
  height: 40px;
  min-width: fit-content;
  border-radius: var(--pm-radius-sm);
  padding: 0 4px;
  border: 1px solid var(--pm-color-border);
  background: var(--pm-color-white);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  flex-shrink: 0;
}
@media screen and (max-width: 719px) {
  .body-abonnement .block-filtre {
    margin-right: 20px;
  }
}
.body-abonnement .block-filtre .btn {
  display: flex;
  height: 40px;
  padding: 0px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--pm-transition);
  flex-shrink: 0;
}
.body-abonnement .block-filtre .btn p {
  color: var(--pm-color-text-inactive);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 21px;
  transition: 0.4s;
  white-space: nowrap;
  margin: 0;
}
.body-abonnement .block-filtre .btn:hover p {
  color: var(--pm-color-primary);
}
.body-abonnement .block-filtre .btn.--actif {
  border-bottom: 2px solid var(--pm-color-primary);
}
.body-abonnement .block-filtre .btn.--actif p {
  color: var(--pm-color-primary);
}
.body-abonnement .page-content {
  width: 100%;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.body-abonnement .empty-state {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}
.body-abonnement .empty-state p {
  margin: 0;
  font-size: 14px;
  color: var(--pm-color-text-inactive);
  font-family: var(--pm-font-family);
  text-align: center;
}
.body-abonnement .portail {
  width: 100%;
}
.body-abonnement .portail .portail-card {
  background: var(--pm-color-white);
  border-radius: 8px;
  padding: 2rem 2.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
}
.body-abonnement .portail .portail-card .portail-icon {
  color: var(--pm-color-primary);
  flex-shrink: 0;
}
.body-abonnement .portail .portail-card .portail-info {
  flex: 1;
}
.body-abonnement .portail .portail-card .portail-info h2 {
  color: var(--pm-color-primary-dark);
  font-family: var(--pm-font-family);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px 0;
}
.body-abonnement .portail .portail-card .portail-info p {
  color: var(--pm-color-primary-light);
  font-family: var(--pm-font-family);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.body-abonnement .portail .portail-card .btn-portal {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--pm-color-primary);
  color: var(--pm-color-white);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: var(--pm-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.body-abonnement .portail .portail-card .btn-portal:hover {
  background: var(--pm-color-primary-dark);
}
.body-abonnement .portail .portail-card .btn-portal:disabled {
  background: var(--pm-color-text-inactive);
  cursor: not-allowed;
}
.body-abonnement .portail .portail-card .btn-portal svg {
  stroke: var(--pm-color-white);
}
@media screen and (max-width: 719px) {
  .body-abonnement .portail {
    padding: 0 20px;
  }
  .body-abonnement .portail .portail-card {
    flex-direction: column;
    padding: 1.5rem;
    align-items: flex-start;
    gap: 1rem;
  }
}

.body-release {
  height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: linear-gradient(131.32deg, #f8f9fa 0%, #f5f4ff 100%);
  --pm-color-primary: #262262;
  --pm-color-primary-dark: #1b1846;
  --pm-color-primary-light: #4d4a7e;
  --pm-color-title: #110f2c;
  --pm-color-white: #ffffff;
  --pm-color-border: #f1f1f1;
  --pm-color-text: #110f2c;
  --pm-color-text-secondary: #828282;
  --pm-color-text-muted: #a7a7a7;
  --pm-font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --pm-radius-sm: 4px;
}
.body-release svg.svg-fond {
  position: absolute;
  right: -18vh;
  bottom: -18vh;
  fill: rgba(38, 34, 98, 0.03);
  z-index: 0;
  width: auto;
  height: 90vh;
  pointer-events: none;
}
@media screen and (min-width: 720px) and (max-width: 1024px) {
  .body-release svg.svg-fond {
    right: -190px;
    bottom: -50px;
    height: 480px;
    width: 550px;
  }
}
@media screen and (max-width: 719px) {
  .body-release svg.svg-fond {
    right: -150px;
    bottom: -30px;
    height: 380px;
    width: 450px;
  }
}
.body-release .hidden {
  display: none !important;
}
.body-release .bandeau-top {
  height: 80px;
  min-height: 80px;
  width: calc(100% - 56px);
  margin: 8px 28px 0 28px;
  border-bottom: 2px solid var(--pm-color-border);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.body-release .bandeau-top p {
  color: #262262;
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: normal;
}
@media screen and (max-width: 719px) {
  .body-release .bandeau-top {
    position: fixed;
    top: 0;
    left: 0;
    height: 72px;
    min-height: 72px;
    border-bottom: none;
    width: 100vw;
    margin: 0;
    padding-left: 80px;
    padding-top: 8px;
    z-index: 3;
    border-radius: 0 0 8px 8px;
    background: #FCFCFF;
    box-sizing: border-box;
    justify-content: flex-start;
  }
  .body-release .bandeau-top p {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
  }
}
.body-release .input-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 397px;
  max-width: 100%;
  height: 40px;
  padding: 12px 16px;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border);
  border-radius: var(--pm-radius-sm);
  box-sizing: border-box;
}
.body-release .input-search .icon-search {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.body-release .input-search .icon-search circle,
.body-release .input-search .icon-search line {
  stroke: var(--pm-color-primary-light);
}
.body-release .input-search input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-color-text);
  background: transparent;
}
.body-release .input-search input::placeholder {
  color: var(--pm-color-text-muted);
}
.body-release .input-search-desktop {
  display: flex;
}
@media screen and (max-width: 719px) {
  .body-release .input-search-desktop {
    display: none;
  }
}
.body-release .main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0px 28px 20px;
}
@media screen and (max-width: 719px) {
  .body-release .main-content {
    padding: 0;
    padding-top: 72px;
  }
}
.body-release .section-selection-client {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  margin-top: 20px;
  flex: 1;
  overflow: hidden;
}
@media screen and (max-width: 719px) {
  .body-release .section-selection-client {
    padding: 0 20px;
  }
}
.body-release .div-filters-container {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.body-release .dropdown-select-categorie,
.body-release .dropdown-documentation {
  display: block;
  min-width: unset;
  padding: 0;
  background: none;
  border: none;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  cursor: default;
  transition: none;
  position: relative;
}
.body-release .dropdown-select-categorie:hover,
.body-release .dropdown-documentation:hover {
  border-color: transparent;
}
.body-release .dropdown-select-categorie .icon-chevron-down,
.body-release .dropdown-documentation .icon-chevron-down {
  flex-shrink: 0;
  width: 10px;
  height: 6px;
  transition: transform 0.2s;
}
.body-release .dropdown-select-categorie.open .icon-chevron-down,
.body-release .dropdown-documentation.open .icon-chevron-down {
  transform: rotate(180deg);
}
.body-release .dropdown-select-categorie.open .dropdown-trigger,
.body-release .dropdown-documentation.open .dropdown-trigger {
  border-color: var(--pm-color-primary);
}
.body-release .dropdown-option-link {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 400;
  color: #3d3d3d;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.body-release .dropdown-option-link:hover {
  background: #f5f4ff;
  color: var(--pm-color-primary);
}
.body-release .dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border);
  border-radius: var(--pm-radius-sm);
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-color-primary);
  white-space: nowrap;
  line-height: normal;
}
.body-release .dropdown-trigger:hover {
  border-color: #ddd;
}
.body-release .dropdown-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: var(--pm-color-white);
  border: 1px solid var(--pm-color-border);
  border-radius: var(--pm-radius-sm);
  list-style: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 10;
  overflow: hidden;
}
.body-release .dropdown-option {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 400;
  color: #3d3d3d;
  cursor: pointer;
  white-space: nowrap;
}
.body-release .dropdown-option:hover {
  background: #f5f4ff;
}
.body-release .dropdown-option.selected {
  font-weight: 600;
  color: var(--pm-color-primary);
}
.body-release .section-versions-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  flex: 1;
  overflow-y: auto;
  padding-bottom: 20px;
}
.body-release .section-versions-title {
  font-size: 20px;
  font-weight: 600;
  color: #201c52;
  line-height: normal;
}
.body-release .header-version-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px;
}
.body-release .div-version-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.body-release .version-number {
  font-size: 18px;
  font-weight: 700;
  color: #0a0a0a;
  line-height: 24px;
}
.body-release .li-version-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.body-release .li-version-card + .li-version-card {
  margin-top: 12px;
}
.body-release .li-version-card:hover .div-card-content {
  border-color: #c5c0f0;
}
.body-release .version-date {
  font-size: 14px;
  font-weight: 400;
  color: #6a7282;
  line-height: 20px;
}
.body-release .span-badge-etat-active {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--pm-radius-sm);
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}
.body-release .badge-majeure {
  background: rgba(110, 101, 248, 0.1);
  color: #4a40d7;
}
.body-release .badge-mineure {
  background: rgba(98, 186, 135, 0.1);
  color: #62ba87;
}
.body-release .badge-mineur {
  background: rgba(98, 186, 135, 0.1);
  color: #62ba87;
}
.body-release .badge-correctifs {
  background: rgba(231, 94, 52, 0.1);
  color: #e75e34;
}
.body-release .div-card-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 24px;
  background: var(--pm-color-white);
  border: 1px solid #ddd;
  border-radius: var(--pm-radius-sm);
  transition: border-color 0.2s;
}
.body-release .section-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--pm-color-primary-light);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pm-color-border);
}
.body-release .div-feature {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.body-release .div-feature + .div-feature {
  margin-top: 20px;
}
.body-release .feature-title {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #101828;
  line-height: 27px;
}
.body-release .feature-description {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--pm-color-text-secondary);
  line-height: 20px;
}
.body-release .empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}
.body-release .empty-state p {
  font-size: 16px;
  color: var(--pm-color-text-muted);
}
.body-release .card-selection-client {
  width: 341px;
  padding: 12px;
  background: var(--pm-color-white);
  border-radius: var(--pm-radius-sm);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.body-release .card-selection-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.body-release .card-selection-title {
  font-size: 18px;
  font-weight: 600;
  color: #3d3d3d;
  line-height: normal;
}
.body-release .card-selection-badge-active {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(98, 186, 135, 0.1);
  border-radius: var(--pm-radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: #3b7051;
  white-space: nowrap;
}
.body-release .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #62ba87;
}
.body-release .card-selection-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.body-release .button-mascarade {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 34px;
  padding: 8px;
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}
.body-release .button-consulter {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 8px 12px;
  background: var(--pm-color-primary);
  border: none;
  border-radius: var(--pm-radius-sm);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.body-release .button-consulter:hover {
  background: var(--pm-color-primary-dark);
}

/* ==========================================================================
   Styles spécifiques à entreprisesByView.html
   Tous les styles sont scopés sous .main-content-entreprises
   ========================================================================== */
/* ==========================================================================
   Layout principal - Entreprises
   ========================================================================== */
.main-content-entreprises {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 28px;
  background: linear-gradient(131.32deg, rgb(248, 249, 250) 0%, rgb(245, 244, 255) 100%);
  min-height: 100vh;
  width: 100%;
  /* Variables locales */
  --ebv-color-blue-300: #262262;
  --ebv-color-blue-350: #201D53;
  --ebv-color-blue-150: #A2A0BB;
  --ebv-color-green-400: #3B7051;
  --ebv-color-green-bg: rgba(98, 186, 135, 0.1);
  --ebv-color-red-400: #B54141;
  --ebv-color-red-bg: rgba(181, 65, 65, 0.1);
  --ebv-color-neutrals-50: #FFFFFF;
  --ebv-color-neutrals-100: #F1F1F1;
  --ebv-color-neutrals-300: #A7A7A7;
  --ebv-color-neutrals-450: #3D3D3D;
  --ebv-font-family: "Open Sans", sans-serif;
  --ebv-spacing-xs: 4px;
  --ebv-spacing-sm: 8px;
  --ebv-spacing-md: 12px;
  --ebv-spacing-lg: 16px;
  --ebv-spacing-xl: 20px;
  --ebv-spacing-2xl: 28px;
  --ebv-radius-sm: 2px;
  --ebv-radius-md: 4px;
  position: relative;
  overflow: hidden;
  /* ==========================================================================
     SVG de fond (style identique à transaction/catalogue)
     ========================================================================== */
  /* ==========================================================================
     Utilitaires
     ========================================================================== */
  /* ==========================================================================
     Bandeau top mobile (style identique à catalogue)
     ========================================================================== */
  /* ==========================================================================
     Page entreprises - Espace pour le bandeau fixe
     ========================================================================== */
  /* ==========================================================================
     Barre de recherche mobile (entreprises)
     ========================================================================== */
  /* ==========================================================================
     Filtres style transaction
     ========================================================================== */
  /* ==========================================================================
     Section Header (Titre + Recherche)
     ========================================================================== */
  /* ==========================================================================
     Compteur d'entreprises
     ========================================================================== */
  /* ==========================================================================
     Grille des cartes clients
     ========================================================================== */
  /* Badge statut (Activé / Désactivé) */
  /* Boutons de la carte */
  /* ==========================================================================
     Section titre utilisateurs (avec bouton retour)
     ========================================================================== */
  /* ==========================================================================
     Barre de recherche mobile utilisateurs (en dehors du header)
     ========================================================================== */
  /* ==========================================================================
     Tableau des utilisateurs
     ========================================================================== */
  /* Cellules du tableau */
  /* Bouton Vue espion */
  /* ==========================================================================
     États de tri
     ========================================================================== */
  /* ==========================================================================
     Cartes utilisateurs mobile
     ========================================================================== */
  /* ==========================================================================
     Page utilisateurs - mobile
     ========================================================================== */
}
@media screen and (max-width: 719px) {
  .main-content-entreprises {
    padding: 0;
  }
}
.main-content-entreprises svg.svg-fond {
  position: absolute;
  right: -18vh;
  bottom: -18vh;
  fill: rgba(38, 34, 98, 0.03);
  z-index: 0;
  width: auto;
  height: 90vh;
  pointer-events: none;
}
@media screen and (max-width: 719px) {
  .main-content-entreprises svg.svg-fond {
    right: -150px;
    bottom: -30px;
    height: 380px;
    width: 450px;
  }
}
.main-content-entreprises .hidden {
  display: none !important;
}
.main-content-entreprises .bandeau-top {
  display: none;
}
@media screen and (max-width: 719px) {
  .main-content-entreprises .bandeau-top {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: flex-start;
    width: 100svw;
    height: 72px;
    min-height: 72px;
    padding-left: 80px;
    padding-top: 8px;
    background: var(--neutral-50, #FCFCFF);
    border-radius: 0 0 8px 8px;
    z-index: 3;
    box-sizing: border-box;
  }
}
.main-content-entreprises .bandeau-top p {
  color: #262262;
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: bold;
  line-height: normal;
  margin: 0;
}
.main-content-entreprises .page-entreprises {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 719px) {
  .main-content-entreprises .page-entreprises {
    padding-top: 72px;
  }
}
.main-content-entreprises .page-utilisateurs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.main-content-entreprises .section-search-mobile-entreprises {
  display: none;
}
@media screen and (max-width: 719px) {
  .main-content-entreprises .section-search-mobile-entreprises {
    display: flex;
    padding: 12px 20px 0 20px;
  }
}
.main-content-entreprises .filtre-periode-vue {
  display: flex;
  margin-top: 20px;
  height: 42px;
  min-height: 42px;
  width: 100%;
  flex-direction: row;
  justify-content: flex-start;
  z-index: 2;
  scrollbar-width: none;
}
@media screen and (max-width: 719px) {
  .main-content-entreprises .filtre-periode-vue {
    margin-top: 16px;
    padding: 0 20px;
    overflow-x: auto;
  }
  .main-content-entreprises .filtre-periode-vue::-webkit-scrollbar {
    display: none;
  }
}
.main-content-entreprises .filtre-periode-vue .block-filtre {
  height: 40px;
  border-radius: 4px;
  padding: 0 4px;
  border: 1px solid var(--ebv-color-neutrals-100);
  background: var(--ebv-color-neutrals-50);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}
.main-content-entreprises .filtre-periode-vue .block-filtre .btn {
  display: flex;
  height: 40px;
  padding: 0px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.main-content-entreprises .filtre-periode-vue .block-filtre .btn p {
  color: var(--ebv-color-blue-150);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  transition: 0.4s;
  white-space: nowrap;
}
.main-content-entreprises .filtre-periode-vue .block-filtre .btn:hover p {
  color: var(--ebv-color-blue-300);
}
.main-content-entreprises .filtre-periode-vue .block-filtre .btn.--actif {
  border-bottom: 1px solid var(--ebv-color-blue-300);
}
.main-content-entreprises .filtre-periode-vue .block-filtre .btn.--actif p {
  color: var(--ebv-color-blue-300);
}
.main-content-entreprises .section-title {
  display: flex;
  align-items: center;
  gap: var(--ebv-spacing-lg);
  margin-bottom: var(--ebv-spacing-xl);
  height: 60px;
}
@media screen and (max-width: 719px) {
  .main-content-entreprises .section-title {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 20px 0 20px;
    margin-bottom: 0;
    height: auto;
  }
}
.main-content-entreprises .page-title {
  color: #262262;
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: bold;
  line-height: normal;
  white-space: nowrap;
}
@media screen and (max-width: 719px) {
  .main-content-entreprises .page-title {
    display: none;
  }
}
.main-content-entreprises .section-input {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
@media screen and (max-width: 719px) {
  .main-content-entreprises .section-input {
    display: none;
  }
}
.main-content-entreprises .input-search {
  display: flex;
  align-items: center;
  gap: var(--ebv-spacing-sm);
  background-color: var(--ebv-color-neutrals-50);
  border: 1px solid var(--ebv-color-neutrals-100);
  border-radius: var(--ebv-radius-md);
  padding: var(--ebv-spacing-md) var(--ebv-spacing-lg);
  width: 397px;
  max-width: 100%;
}
@media screen and (max-width: 719px) {
  .main-content-entreprises .input-search {
    width: 100%;
    max-width: 100%;
    height: 43px;
  }
}
.main-content-entreprises .input-search .icon-search {
  flex-shrink: 0;
}
.main-content-entreprises .input-search input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--ebv-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--ebv-color-neutrals-450);
  background: transparent;
}
.main-content-entreprises .input-search input::placeholder {
  color: var(--ebv-color-neutrals-300);
}
.main-content-entreprises .entreprises-count-wrapper {
  display: flex;
  justify-content: flex-end;
  padding: var(--ebv-spacing-md) 0 var(--ebv-spacing-sm) 0;
  flex-shrink: 0;
}
@media screen and (max-width: 719px) {
  .main-content-entreprises .entreprises-count-wrapper {
    padding: var(--ebv-spacing-md) 20px var(--ebv-spacing-sm) 20px;
  }
}
.main-content-entreprises .entreprises-count {
  font-size: 12px;
  color: var(--ebv-color-neutrals-300);
  font-weight: 400;
}
.main-content-entreprises .section-selection-client {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ebv-spacing-xl);
  align-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 220px);
  padding-right: var(--ebv-spacing-sm);
}
@media screen and (max-width: 719px) {
  .main-content-entreprises .section-selection-client {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--ebv-spacing-md);
    padding: 0 20px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .main-content-entreprises .section-selection-client::-webkit-scrollbar {
    display: none;
  }
}
.main-content-entreprises .card-selection-client {
  background-color: var(--ebv-color-neutrals-50);
  border-radius: var(--ebv-radius-md);
  padding: var(--ebv-spacing-md);
  width: calc(25% - 15px);
  min-width: 280px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ebv-spacing-lg);
}
@media screen and (max-width: 1200px) {
  .main-content-entreprises .card-selection-client {
    width: calc(33.333% - 14px);
  }
}
@media screen and (max-width: 900px) {
  .main-content-entreprises .card-selection-client {
    width: calc(50% - 10px);
  }
}
@media screen and (max-width: 719px) {
  .main-content-entreprises .card-selection-client {
    width: 100%;
    min-width: unset;
    flex-grow: 0;
    flex-shrink: 0;
  }
}
.main-content-entreprises .card-selection-client .section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ebv-spacing-sm);
}
.main-content-entreprises .card-selection-client .client-name {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: var(--ebv-color-neutrals-450);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main-content-entreprises .card-selection-client .card-client-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ebv-spacing-md);
}
.main-content-entreprises .pin-status {
  display: flex;
  align-items: center;
  gap: var(--ebv-spacing-sm);
  padding: var(--ebv-spacing-sm) var(--ebv-spacing-md);
  border-radius: var(--ebv-radius-md);
  flex-shrink: 0;
}
.main-content-entreprises .pin-status.pin-active {
  background-color: var(--ebv-color-green-bg);
}
.main-content-entreprises .pin-status.pin-active .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--ebv-color-green-400);
}
.main-content-entreprises .pin-status.pin-active .status-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--ebv-color-green-400);
}
.main-content-entreprises .pin-status.pin-inactive {
  background-color: var(--ebv-color-red-bg);
}
.main-content-entreprises .pin-status.pin-inactive .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--ebv-color-red-400);
}
.main-content-entreprises .pin-status.pin-inactive .status-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--ebv-color-red-400);
}
.main-content-entreprises .button-mascarade {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ebv-spacing-sm);
  background: transparent;
  border: none;
  border-radius: var(--ebv-radius-sm);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.main-content-entreprises .button-mascarade:hover {
  background-color: var(--ebv-color-neutrals-100);
}
.main-content-entreprises .button-mascarade svg {
  width: 20px;
  height: 20px;
}
.main-content-entreprises .button-consulter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ebv-spacing-sm);
  background-color: var(--ebv-color-blue-300);
  color: var(--ebv-color-neutrals-50);
  border: none;
  border-radius: var(--ebv-radius-md);
  padding: var(--ebv-spacing-sm) var(--ebv-spacing-md);
  height: 32px;
  font-family: var(--ebv-font-family);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.2s ease;
}
.main-content-entreprises .button-consulter:hover {
  background-color: var(--ebv-color-blue-350);
}
.main-content-entreprises .button-consulter svg {
  width: 17px;
  height: 13px;
}
.main-content-entreprises .section-titre-utilisateurs {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ebv-color-neutrals-100);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
@media screen and (max-width: 719px) {
  .main-content-entreprises .section-titre-utilisateurs {
    /* Style navbar mobile identique au sous-catalogue */
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    margin: 0;
    border-bottom: none;
    background-color: #fcfcff;
    border-radius: 0 0 8px 8px;
    position: sticky;
    top: 0;
    z-index: 10;
  }
}
.main-content-entreprises .section-titre-utilisateurs .titre-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media screen and (max-width: 719px) {
  .main-content-entreprises .section-titre-utilisateurs .titre-section {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
}
.main-content-entreprises .section-titre-utilisateurs .button-retour {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.main-content-entreprises .section-titre-utilisateurs .button-retour .icon-retour {
  transform: rotate(0deg);
}
.main-content-entreprises .section-titre-utilisateurs .button-retour span {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1e1e1e;
}
.main-content-entreprises .section-titre-utilisateurs .button-retour:hover span {
  color: var(--ebv-color-blue-300);
}
@media screen and (max-width: 719px) {
  .main-content-entreprises .section-titre-utilisateurs .button-retour {
    /* Flèche seule, zone cliquable 40x40 */
    width: 40px;
    height: 40px;
    min-width: 40px;
    justify-content: center;
  }
  .main-content-entreprises .section-titre-utilisateurs .button-retour span {
    display: none;
  }
}
.main-content-entreprises .section-titre-utilisateurs .page-title {
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #262262;
  line-height: normal;
  margin: 0;
}
@media screen and (max-width: 719px) {
  .main-content-entreprises .section-titre-utilisateurs .page-title {
    font-size: 16px;
    font-weight: 600;
    display: flex !important;
  }
}
.main-content-entreprises .section-titre-utilisateurs .section-input {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  min-width: 200px;
}
@media screen and (max-width: 719px) {
  .main-content-entreprises .section-titre-utilisateurs .section-input {
    display: none;
  }
}
.main-content-entreprises .section-search-mobile-utilisateurs {
  display: none;
}
@media screen and (max-width: 719px) {
  .main-content-entreprises .section-search-mobile-utilisateurs {
    display: flex;
    padding: 12px 20px 0 20px;
  }
}
.main-content-entreprises .table-comptes {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
@media screen and (max-width: 719px) {
  .main-content-entreprises .table-comptes {
    display: none;
  }
}
.main-content-entreprises .tr-compte {
  display: flex;
  align-items: center;
  background-color: var(--ebv-color-neutrals-50);
  border: 1px solid var(--ebv-color-neutrals-100);
}
.main-content-entreprises .tr-compte.tr-header {
  border-radius: var(--ebv-radius-md) var(--ebv-radius-md) 0 0;
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}
.main-content-entreprises .tr-compte.tr-detail {
  border-top: none;
}
.main-content-entreprises .tr-compte.tr-detail:last-child {
  border-radius: 0 0 var(--ebv-radius-md) var(--ebv-radius-md);
}
.main-content-entreprises #tbody-utilisateurs {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.main-content-entreprises .th-cell,
.main-content-entreprises .td-cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  min-height: 48px;
  overflow: hidden;
}
.main-content-entreprises .th-cell {
  font-size: 14px;
  font-weight: 600;
  color: var(--ebv-color-blue-350);
  text-align: center;
  gap: var(--ebv-spacing-sm);
}
.main-content-entreprises .th-cell.sortable {
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.main-content-entreprises .th-cell.sortable:hover {
  background-color: var(--ebv-color-neutrals-100);
}
.main-content-entreprises .icon-sort {
  flex-shrink: 0;
}
.main-content-entreprises .td-cell {
  font-size: 14px;
  font-weight: 600;
  color: var(--ebv-color-neutrals-450);
  text-align: center;
}
.main-content-entreprises .td-cell span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main-content-entreprises .button-vue-espion {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ebv-spacing-sm);
  background: transparent;
  border: none;
  border-radius: var(--ebv-radius-sm);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.main-content-entreprises .button-vue-espion:hover {
  background-color: var(--ebv-color-neutrals-100);
}
.main-content-entreprises .button-vue-espion svg {
  width: 20px;
  height: 20px;
}
.main-content-entreprises .th-cell.sort-asc .icon-sort path:first-child {
  fill: var(--ebv-color-blue-300);
  opacity: 1;
}
.main-content-entreprises .th-cell.sort-asc .icon-sort path:last-child {
  opacity: 0.3;
}
.main-content-entreprises .th-cell.sort-desc .icon-sort path:first-child {
  opacity: 0.3;
}
.main-content-entreprises .th-cell.sort-desc .icon-sort path:last-child {
  fill: var(--ebv-color-blue-300);
  opacity: 1;
}
.main-content-entreprises .mobile-user-cards {
  display: none;
  flex-direction: column;
  gap: var(--ebv-spacing-md);
  padding: 0 20px;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.main-content-entreprises .mobile-user-cards::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 719px) {
  .main-content-entreprises .mobile-user-cards {
    display: flex;
  }
}
.main-content-entreprises .mobile-user-card {
  background-color: var(--ebv-color-neutrals-50);
  border-radius: var(--ebv-radius-md);
  padding: var(--ebv-spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--ebv-spacing-lg);
}
.main-content-entreprises .mobile-user-card .card-user-header {
  display: flex;
  gap: var(--ebv-spacing-md);
  align-items: flex-start;
}
.main-content-entreprises .mobile-user-card .card-user-header .user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.main-content-entreprises .mobile-user-card .card-user-header .user-info .user-name {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ebv-color-neutrals-450);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main-content-entreprises .mobile-user-card .card-user-header .user-info .user-email {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--ebv-color-neutrals-450);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main-content-entreprises .mobile-user-card .card-user-footer {
  display: flex;
  gap: var(--ebv-spacing-md);
  align-items: flex-end;
}
.main-content-entreprises .mobile-user-card .card-user-footer .connexion-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.main-content-entreprises .mobile-user-card .card-user-footer .connexion-info .connexion-label {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--ebv-color-neutrals-450);
  margin: 0;
}
.main-content-entreprises .mobile-user-card .card-user-footer .connexion-info .connexion-value {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--ebv-color-neutrals-450);
  margin: 0;
}
@media screen and (max-width: 719px) {
  .main-content-entreprises .page-utilisateurs .entreprises-count-wrapper {
    padding: var(--ebv-spacing-md) 20px var(--ebv-spacing-sm) 20px;
  }
}

@media (min-width: 320px) and (max-width: 720px) {
  div.body-error {
    background-image: url("/image/connexion/fond.jpeg");
    background-size: cover;
    background-position: 35% 50%;
    height: 100svh;
    width: 100svw;
  }
  div.body-error span.form {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100svh;
    width: 100svw;
    flex-direction: column;
    background-color: rgba(38, 34, 98, 0.75);
  }
  div.body-error span.form p.chiffre {
    font-size: 150px;
    font-weight: bold;
    color: #FFF;
  }
  div.body-error span.form span.separation {
    height: 0;
    width: 200px;
    border-bottom: 3px solid #FFF;
    margin: 10px;
  }
  div.body-error span.form p.text {
    margin-top: 30px;
    font-size: 18px;
    font-weight: bold;
    font-style: italic;
    color: #FFF;
  }
}
@media (min-width: 720px) and (max-width: 1366px) {
  div.body-error {
    background-image: url("/image/connexion/fond.jpeg");
    background-size: cover;
    background-position: 50% 50%;
    height: 100svh;
    width: 100svw;
  }
  div.body-error span.form {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100svh;
    width: 100svw;
    flex-direction: column;
    background-color: rgba(38, 34, 98, 0.75);
  }
  div.body-error span.form p.chiffre {
    font-size: 250px;
    font-weight: bold;
    color: #FFF;
  }
  div.body-error span.form span.separation {
    height: 0;
    width: 400px;
    border-bottom: 3px solid #FFF;
    margin: 10px;
  }
  div.body-error span.form p.text {
    margin-top: 50px;
    font-size: 40px;
    font-weight: bold;
    font-style: italic;
    color: #FFF;
  }
}
@media (min-width: 1366px) {
  div.body-error {
    background-image: url("/image/connexion/fond.jpeg");
    background-size: cover;
    background-position: 50% 50%;
    height: 100svh;
    width: 100svw;
  }
  div.body-error span.form {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100svh;
    width: 100svw;
    flex-direction: column;
    background-color: rgba(38, 34, 98, 0.75);
  }
  div.body-error span.form p.chiffre {
    font-size: 250px;
    font-weight: bold;
    color: #FFF;
  }
  div.body-error span.form span.separation {
    height: 0;
    width: 400px;
    border-bottom: 3px solid #FFF;
    margin: 10px;
  }
  div.body-error span.form p.text {
    margin-top: 50px;
    font-size: 40px;
    font-weight: bold;
    font-style: italic;
    color: #FFF;
  }
}
main.impaye {
  background: url("/image/connexion/fond.png") lightgray 50%/cover no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100svw;
  height: 100svh;
}
@media screen and (max-width: 719px) {
  main.impaye {
    align-items: flex-end;
    background-position: -279px -264px;
  }
}
main.impaye .impaye-card {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: 550px;
  background: var(--color-neutrals-50);
  border-radius: 16px;
  padding: 0 24px 48px 24px;
}
@media screen and (max-width: 719px) {
  main.impaye .impaye-card {
    width: 100svw;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
main.impaye .impaye-card .impaye-logo {
  display: flex;
  width: 100%;
  height: 66px;
  margin-top: 72px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
main.impaye .impaye-card .impaye-title {
  margin: 48px auto 0 auto;
  color: var(--color-red-200);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-500);
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: normal;
  text-align: center;
}
@media screen and (max-width: 719px) {
  main.impaye .impaye-card .impaye-title {
    font-size: var(--font-size-400);
  }
}
main.impaye .impaye-card .impaye-message {
  margin: 16px auto 0 auto;
  max-width: 420px;
  color: var(--color-neutrals-400);
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  text-align: center;
}
main.impaye .impaye-card .impaye-btn {
  display: flex;
  width: 230px;
  height: 42px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  background: var(--color-red-200);
  color: var(--color-neutrals-50);
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  line-height: normal;
  border: none;
  cursor: pointer;
  margin: 32px auto 0 auto;
  transition: 0.2s;
}
main.impaye .impaye-card .impaye-btn:hover:not(:disabled) {
  background: var(--color-red-250);
}
main.impaye .impaye-card .impaye-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}