/* ==========================================================================
   VARIABLES
   ========================================================================== */
:root {
  --color-primary:       #3C3C78;
  --color-primary-rgb:   60, 60, 120;   /* ← changer en même temps que primary */
  --color-secondary:     #F2C52C;
  --color-secondary-rgb: 242, 197, 44;  /* ← changer en même temps que secondary */
  --color-accent: #f26d7a;                 /* accent rose */
  --color-accent-rgb: 242, 109, 122;
  --color-nav: #000;                    /* couleur de fond du nav */
  --color-primary-nav: var(--color-primary); /* couleur accent dans le nav (liens, hover…) */

  --cm-user-bg: rgba(0,0,0,0.5);
  --cm-user-label-color: #ffffff;
  --cm-user-value-color: #ffffff;
  --cm-user-font-size: 14px;

  --cm-accent: #f26d7a;
  --cm-accent-weak: rgba(var(--color-accent-rgb),.12);
  --cm-ink: #111827;
  --cm-muted: rgba(17,24,39,.68);
  --cm-card: #ffffff;
  --cm-line: rgba(17,24,39,.12);
  --cm-user-offset: 24px;
  --cm-scale: 100%;
}

/* ==========================================================================
   BASE
   ========================================================================== */
html { font-size: var(--cm-scale) !important; }
html, body { opacity: 1 !important; transition: none !important; }
body { color: #000 !important; }
body.cm-a11y-lock { overflow: hidden !important; }

/* ==========================================================================
   LIENS
   ========================================================================== */
a:link, a:visited, #header #info a {
  color: var(--color-primary) !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--color-secondary) !important;
  text-decoration: underline !important;
  background: transparent !important;
}

a.btn.secondary,
a.btn.secondary:hover,
a.btn.secondary:focus { color: #ffffff !important; }

a[class*="cm-btn"]:link,
a[class*="cm-btn"]:visited { color: #fff !important; }

a.cm-btn-ghost:link,
a.cm-btn-ghost:visited { color: var(--color-primary) !important; }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
#nav, #nav * { color: #fff !important; }

#nav {
  position: fixed !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 220px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--color-nav) !important;
  overflow-y: auto !important;
}

#nav a[href*="null?email="],
#nav a[href*="%user_email%"],
#nav li:has(> a[href*="null?email="]),
#nav li:has(> a[href*="%user_email%"]) { display: none !important; }

#nav ul li:hover a { color: #fff !important; background-color: var(--color-primary-nav) !important; }

#nav strong { display: block; color: #000; background-color: var(--color-primary-nav); }

#nav strong a:link,
#nav strong a:active,
#nav strong a:visited {
  font-weight: normal !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 0 var(--color-secondary) !important;
  background: rgba(0,0,0,.2) !important;
}

#nav li strong { font-weight: normal !important; background: var(--color-primary-nav) !important; }
#nav div ul li { margin-bottom: 10px !important; }
#nav div ul li:last-child { margin-bottom: 0 !important; }

#nav li.has-sub > .nav-submenu {
  position: static !important; left: auto !important; top: auto !important;
  width: 100% !important; display: none !important;
  margin: 6px 0 0 0 !important; padding: 10px !important;
  background: #fff !important; border: 1px solid var(--color-primary-nav) !important;
  border-radius: 8px !important; box-shadow: 0 4px 10px rgba(0,0,0,.08) !important;
  z-index: 1 !important;
}

#nav li.has-sub.open > .nav-submenu { display: block !important; }

#nav li.has-sub > a { position: relative !important; padding-right: 28px !important; }

#nav li.has-sub > a::after {
  content: "▾"; position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%) rotate(0deg); transition: transform .2s ease;
}

#nav li.has-sub.open > a::after { transform: translateY(-50%) rotate(180deg); }

/* ==========================================================================
   HEADER
   ========================================================================== */
#header { background: var(--color-primary) !important; }
#header-logo { background-color: var(--color-primary) !important; }
div#header-logo[style] { background-color: var(--color-primary) !important; }
#header-logo #logo { background: transparent !important; }
#header-logo::before, #header-logo::after { background: none !important; box-shadow: none !important; }
#header-logo img { position: static !important; padding: 0 !important; width: 85% !important; height: 85% !important; }
#logo { background: var(--color-nav) !important; }
#logo img { max-width: 80% !important; height: auto !important; margin: -15px auto 0 auto !important; }

/* ==========================================================================
   CONTAINER
   ========================================================================== */
#container:before {
  content: '' !important;
  background: var(--color-nav) !important;
  position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important;
  width: 220px !important; z-index: 0 !important;
  box-shadow: inset -3px 0 6px rgba(0,0,0,.2) !important;
}

/* ==========================================================================
   BOUTONS & FORMULAIRES
   ========================================================================== */
input[type="submit"], input[value="Log in"], input[type="button"],
#content-wrapper.mf-overlay .ui-button, #upsell-info .ui-button,
.ui-state-default, button, #continueLink a, .btn {
  color: #fff !important; white-space: nowrap !important;
  font-weight: normal !important; cursor: pointer !important;
  background: var(--color-primary) !important;
  border-color: var(--color-secondary) !important;
  text-decoration: none !important;
}

.btn:hover {
  color: #fff !important; white-space: nowrap !important;
  font-weight: normal !important; cursor: pointer !important;
  background: var(--color-secondary) !important;
  border-color: var(--color-primary) !important;
  text-decoration: none !important;
}

input[type="submit"]:not([disabled]):hover,
#content-wrapper.mf-overlay .ui-button:hover,
.ui-state-default:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  text-decoration: none !important;
}

input[type="button"], input[type="submit"], button {
  border-radius: 10px !important;
  transition: background-color .2s, filter .2s;
}

input[type="button"]:hover, input[type="submit"]:hover, button:hover { filter: brightness(.95); }

.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-danger {
  background-color: var(--color-secondary) !important;
  color: #fff !important;
  border: 1px solid var(--color-secondary) !important;
  opacity: .6; transition: all .2s ease-in-out;
}

.btn-check:checked + .btn, .btn.active {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important; opacity: 1;
  transform: scale(1.05); font-weight: 600;
  box-shadow: 0 0 6px rgba(0,0,0,.15);
}

.btn:hover { opacity: .9; transform: scale(1.03); }

input[type="checkbox"]:checked:after {
  background: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
}

input[type=radio]:checked:after {
  background: var(--color-secondary) url(../images/sprite.png?20230713153656806) -795px -395px !important;
  border-color: var(--color-secondary) !important;
  background-size: 1000px 1000px !important;
}

.filtered {
  background: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  text-decoration: none !important; color: #fff !important;
}

/* ==========================================================================
   TEXTES UTILITAIRES
   ========================================================================== */
.smallText, .help-block { font-size: .875rem !important; color: #565959 !important; margin: 0 !important; }
#recap-text { color: #000 !important; }
.pagination b { color: #fff !important; }

/* ==========================================================================
   WIZARD — étapes uniquement
   ========================================================================== */
.wizard-steps ul li.active { color: var(--color-primary) !important; }
.wizard-steps ul li.active:before {
  border-color: var(--color-secondary) !important;
  background: var(--color-primary) !important;
}

/* ==========================================================================
   TABLEAUX
   ========================================================================== */
.displayNameColumnHeader, .displayNameColumnValue {
  width: 400px !important; white-space: nowrap !important;
  overflow: visible !important; text-overflow: unset !important;
}

.results { table-layout: auto !important; width: 100% !important; }

table.results th {
  text-align: left !important; padding: 8px 1rem !important;
  text-transform: uppercase !important; letter-spacing: .05em !important;
  color: #fff !important; background: var(--color-primary) !important;
  font-size: .8rem !important; line-height: 1 !important;
  font-weight: normal !important; white-space: nowrap !important;
}

table.form td.fields { padding: 20px 40px; vertical-align: top; }

/* ==========================================================================
   HEADER INFO / USER
   ========================================================================== */
#info .info-content > span.user:after {
  content: '' !important; width: 12px !important; height: 7px !important;
  opacity: .5 !important;
  background: url(./custom/img/se-deconnecter-white-icon.png) -800px -600px !important;
  background-size: 1000px 1000px !important;
  display: inline-block !important; margin-left: 4px !important; vertical-align: middle !important;
}

#linkUserTransactions::before, #linkUserPrintLogs::before { content: none !important; }
#plan-image:hover { transform: scale(1.1) !important; }

li a[href^="https://null?email=jp.quessot%40capmonetique.com"] { display: none !important; }

a[href^="https://null?email=jp.quessot%40capmonetique.com"],
a[href^="http://null?email=jp.quessot%40capmonetique.com"],
a[href*="null?email=jp.quessot@capmonetique.com" i],
a[href*="null?email=" i][href*="capmonetique.com" i],
a[href^="mailto:jp.quessot@capmonetique.com" i] {
  display: none !important; pointer-events: none !important; visibility: hidden !important;
}

li:has(> a[href*="null?email=" i]) { display: none !important; }

/* ==========================================================================
   WEB PRINT
   ========================================================================== */
#web-print-intro-msg { display: none !important; }

.web-print-intro {
  max-width: 680px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
}

.web-print-intro > *,
.web-print-intro > div {
  width: 100% !important;
  box-sizing: border-box !important;
}

.web-print-intro div[style*="clear:both"],
.web-print-intro div[style*="clear: both"] {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

.web-print-intro > div:has(#cm-refresh-card) {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

#cm-refresh-card {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.web-print-intro p {
  text-align: center !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.web-print-intro > div:nth-child(2) {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
}

.web-print-intro .btn,
a[href*="UserWebPrint/0/$ActionLink"].btn,
a[href*="UserWebPrint/0/$ActionLink"].primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%) !important;
  color: #fff !important;
  padding: 14px 32px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(var(--color-primary-rgb),.25) !important;
  transition: transform .15s, box-shadow .15s !important;
  letter-spacing: .02em !important;
  border: none !important;
}

.web-print-intro .btn:hover,
a[href*="UserWebPrint/0/$ActionLink"].btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(var(--color-primary-rgb),.30) !important;
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%) !important;
  color: #fff !important;
}

#cm-refresh-card {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb),.07) 0%, rgba(var(--color-secondary-rgb),.10) 100%) !important;
  border: 1px solid rgba(var(--color-primary-rgb),.20) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#cm-refresh-card:not([style*="display: none"]):not([style*="display:none"]) {
  display: flex !important;
}

#cm-refresh-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

#cm-refresh-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
}

#cm-refresh-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #16a34a !important;
  display: inline-block !important;
  animation: cm-pulse 1.4s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}

@keyframes cm-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.75); }
}

#cm-refresh-badge {
  background: var(--color-primary) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

#cm-refresh-sub {
  font-size: 12px !important;
  color: #374151 !important;
  line-height: 1.5 !important;
}

#cm-refresh-sub strong {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}

#cm-refresh-bar {
  height: 5px !important;
  background: rgba(var(--color-primary-rgb),.12) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

#cm-refresh-fill {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)) !important;
  border-radius: 999px !important;
  transition: width .5s ease !important;
}

.table-box {
  background: #fff !important;
  border-radius: 22px !important;
  box-shadow: 0 6px 24px rgba(var(--color-primary-rgb),.10) !important;
  overflow: hidden !important;
  border: none !important;
}

.table-box > span { display: block !important; }

.table-box table.web-print-jobs {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
  table-layout: auto !important;
}

.table-box table.web-print-jobs th {
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  padding: 12px 14px !important;
  text-align: left !important;
  border: none !important;
  white-space: nowrap !important;
}

.table-box table.web-print-jobs td {
  padding: 11px 14px !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  color: #374151 !important;
  vertical-align: middle !important;
  font-size: 13px !important;
}

.table-box table.web-print-jobs tr:last-child td { border-bottom: none !important; }
.table-box table.web-print-jobs tr.even { background: #fff !important; }
.table-box table.web-print-jobs tr.odd  { background: rgba(var(--color-primary-rgb),.025) !important; }
.table-box table.web-print-jobs tbody tr:hover td { background: rgba(var(--color-primary-rgb),.05) !important; }

.table-box .responsive-label { display: none !important; }

.table-box .documentNameColumnValue .smallText,
.table-box #document-name {
  font-weight: 600 !important;
  color: #111827 !important;
  max-width: 180px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.table-box .submitTimeColumnValue .smallText {
  font-size: 12px !important;
  color: #6b7280 !important;
}

.table-box #cost {
  font-weight: 700 !important;
  color: var(--color-primary) !important;
}

.table-box #status a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: rgba(22,163,74,.12) !important;
  color: #16a34a !important;
  text-decoration: none !important;
  border: none !important;
}

.table-box #status a:hover {
  background: rgba(22,163,74,.20) !important;
  color: #16a34a !important;
}

.table-footer {
  padding: 10px 14px !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
  background: #fafbfc !important;
}

@media (max-width: 600px) {
  .table-box { border-radius: 16px !important; overflow-x: auto !important; }
  .table-box table.web-print-jobs { display: block !important; }
  .table-box table.web-print-jobs thead { display: none !important; }
  .table-box table.web-print-jobs tbody { display: block !important; }
  .table-box table.web-print-jobs tr {
    display: flex !important; flex-direction: column !important;
    padding: 12px 14px !important; border-bottom: 1px solid rgba(0,0,0,.08) !important;
    gap: 4px !important; background: #fff !important;
  }
  .table-box table.web-print-jobs tr.odd { background: rgba(var(--color-primary-rgb),.025) !important; }
  .table-box table.web-print-jobs tr:last-child { border-bottom: none !important; }
  .table-box table.web-print-jobs td {
    display: flex !important; align-items: flex-start !important;
    gap: 8px !important; padding: 3px 0 !important;
    border: none !important; font-size: 13px !important;
  }
  .table-box .responsive-label {
    display: inline-block !important; font-size: 10px !important;
    font-weight: 700 !important; text-transform: uppercase !important;
    letter-spacing: .06em !important; color: #9ca3af !important;
    min-width: 80px !important; flex-shrink: 0 !important; padding-top: 1px !important;
  }
  .table-box .documentNameColumnValue .smallText,
  .table-box #document-name { white-space: normal !important; max-width: none !important; }
}

/* ==========================================================================
   WIDGETS — PAGE USERSUMMARY REDESIGNÉE
   ========================================================================== */

/* ── Wrapper global de la page ── */
div.auto {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 20px 16px 32px !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   ACTIONS RAPIDES
   ========================================================================== */
.cm-quick-actions {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 22px !important;
  padding: 0 !important;
  list-style: none !important;
}

.cm-qa-card {
  background: #fff !important;
  border: 1px solid rgba(var(--color-primary-rgb),.08) !important;
  border-radius: 16px !important;
  padding: 16px 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
  box-shadow: 0 2px 10px rgba(var(--color-primary-rgb),.06) !important;
  position: relative !important;
  overflow: hidden !important;
}

.cm-qa-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: var(--qa-accent, var(--color-primary)) !important;
  border-radius: 16px 16px 0 0 !important;
}

.cm-qa-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(var(--color-primary-rgb),.13) !important;
  border-color: rgba(var(--color-primary-rgb),.18) !important;
  color: inherit !important;
  text-decoration: none !important;
}

.cm-qa-ico {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: rgba(var(--color-primary-rgb),.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

.cm-qa-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  line-height: 1.25 !important;
  display: block !important;
}

.cm-qa-sub {
  font-size: 11px !important;
  color: rgba(17,24,39,.45) !important;
  line-height: 1.35 !important;
  margin-top: 2px !important;
  display: block !important;
}

.cm-qa-arrow {
  position: absolute !important;
  right: 12px !important; bottom: 12px !important;
  font-size: 14px !important;
  opacity: .22 !important;
  transition: opacity .15s, transform .15s !important;
  color: var(--color-primary) !important;
}

.cm-qa-card:hover .cm-qa-arrow {
  opacity: .55 !important;
  transform: translate(2px, -2px) !important;
}

/* Variantes couleur */
.cm-qa-card.cm-qa-print   { --qa-accent: var(--color-primary); }
.cm-qa-card.cm-qa-reload  { --qa-accent: #6366f1; }
.cm-qa-card.cm-qa-reload .cm-qa-ico { background: rgba(99,102,241,.10) !important; }
.cm-qa-card.cm-qa-help    { --qa-accent: #16a34a; }
.cm-qa-card.cm-qa-help .cm-qa-ico    { background: rgba(22,163,74,.10) !important; }
.cm-qa-card.cm-qa-env     { --qa-accent: var(--color-secondary); }
.cm-qa-card.cm-qa-env .cm-qa-ico     { background: rgba(var(--color-secondary-rgb),.15) !important; }

@media (max-width: 992px) {
  .cm-quick-actions { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .cm-quick-actions { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-bottom: 16px !important; }
  .cm-qa-card { padding: 14px 12px 12px !important; }
  .cm-qa-card:last-child { grid-column: 1 / -1 !important; }
  
}

/* ── Grille des 3 cartes stats ── */
.flex.row {
  display: grid !important;
  grid-template-columns: 1.8fr 1fr 1fr !important;
  gap: 18px !important;
  align-items: stretch !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
}

/* Colonne 1 : carte solde */
.flex.row .widget.stat-bal {
  grid-column: 1 !important;
}

/* ── Cartes widget (toutes) ── */
.widget {
  background: #fff !important;
  border-radius: 20px !important;
  padding: 22px 20px !important;
  box-shadow: 0 4px 20px rgba(var(--color-primary-rgb),.08) !important;
  border: 1px solid rgba(var(--color-primary-rgb),.08) !important;
  flex: unset !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  text-align: left !important;
  min-height: 130px !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

.widget:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(var(--color-primary-rgb),.13) !important;
}

/* Titre des widgets */
.widget h4 {
  margin: 0 0 6px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  color: var(--color-primary) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

/* Valeur principale */
.widget .val {
  margin: auto 0 0 !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  font-size: 16px !important;
  color: var(--color-primary) !important;
  text-align: left !important;
}

/* ── Carte solde (stat-bal) — fond dégradé navy ── */
.widget.stat-bal {
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%) !important;
  border-color: transparent !important;
  position: relative !important;
  overflow: hidden !important;
}

.widget.stat-bal::after {
  content: '' !important;
  position: absolute !important;
  right: -24px !important; top: -24px !important;
  width: 140px !important; height: 140px !important;
  border-radius: 50% !important;
  background: rgba(var(--color-secondary-rgb),.15) !important;
  pointer-events: none !important;
}

.widget.stat-bal h4 {
  color: rgba(255,255,255,.6) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

.widget.stat-bal .val {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Tableau interne de stat-bal */
.widget.stat-bal table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.widget.stat-bal table td {
  padding: 5px 0 !important;
  font-size: 13px !important;
  vertical-align: middle !important;
  color: rgba(255,255,255,.75) !important;
  border: none !important;
}

/* Ligne totale avec séparateur */
.widget.stat-bal table tr:last-child td {
  border-top: 1px solid rgba(255,255,255,.18) !important;
  padding-top: 9px !important;
}

/* Montants (span.indented et span.label) */
.widget.stat-bal table td .label,
.widget.stat-bal table td .indented {
  font-weight: 800 !important;
  font-size: 16px !important;
  color: var(--color-secondary) !important;
}

/* Libellés (première colonne) */
.widget.stat-bal table td:first-child {
  color: rgba(255,255,255,.55) !important;
  font-size: 12px !important;
}

/* ── Cartes stat-jobs et stat-pages ── */
html body div.widget.stat-jobs > h4,
html body div.widget.stat-pages > h4 {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  margin: 0 0 6px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.widget.stat-jobs .val,
.widget.stat-pages .val {
  font-size: 44px !important;
  font-weight: 900 !important;
  color: var(--color-primary) !important;
  margin: auto 0 0 !important;
  letter-spacing: -.02em !important;
  line-height: 1 !important;
}

/* ── Layout deux colonnes (activity + enviro) ── */
.flex:not(.row) {
  display: flex !important;
  gap: 22px !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Colonne #activity ── */
#activity.col {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* Titre de section */
#activity h2 {
  font-size: 1.05rem !important;
  margin: 0 0 14px !important;
  color: var(--color-primary) !important;
  letter-spacing: .2px !important;
  font-weight: 700 !important;
}

/* Widget graphique solde dans #activity */
#activity .widget {
  padding: 20px !important;
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 20px rgba(var(--color-primary-rgb),.08) !important;
  border: 1px solid rgba(var(--color-primary-rgb),.08) !important;
}

/* Image du graphique — pleine largeur */
#activity .widget img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 10px !important;
  margin-top: 6px !important;
}

/* ==========================================================================
   SYSTÈME D'IMPRESSION — marges et layout corrigés
   ========================================================================== */
#impression-system {
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 20px rgba(var(--color-primary-rgb),.08) !important;
  border: 1px solid rgba(var(--color-primary-rgb),.08) !important;
  padding: 18px !important;
  margin: 0 0 18px !important; /* pas de margin auto, pleine largeur */
  max-width: none !important;
  box-sizing: border-box !important;
}

#impression-system label {
  display: block !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  color: var(--color-primary) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

#impression-system .cm-impression-layout {
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important; /* empêche le wrap qui casse le layout */
}

#impression-system .cm-impression-left,
#impression-system .cm-impression-right {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

#impression-system .cm-helper-text {
  margin-top: 6px !important; font-size: 12px !important;
  line-height: 1.4 !important; color: #6b7b86 !important;
}

#copieur-select,
#impression-system #copieur-select,
#impression-system .cm-select {
  display: block !important; width: 100% !important; max-width: 100% !important;
  height: auto !important; box-sizing: border-box !important;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding: 12px 44px 12px 14px !important; border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%233C3C78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center/18px !important;
  font-size: 1rem !important; line-height: 1.2 !important;
  transition: border-color .2s, box-shadow .2s !important;
}

#copieur-select { width: 105% !important; }

#copieur-select:focus,
#impression-system #copieur-select:focus,
#impression-system .cm-select:focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb),.16) !important;
}

#copieur-info,
#impression-system #copieur-info,
#impression-system .cm-card {
  margin-top: 12px !important; border-radius: 12px !important;
  padding: 12px 14px 12px 40px !important; background: #f6f8fb !important;
  color: #2a3642 !important; min-height: 42px !important;
  position: relative !important; border: 1px dashed rgba(0,0,0,.08) !important;
  box-sizing: border-box !important;
}

#copieur-info::before,
#impression-system #copieur-info::before,
#impression-system .cm-card::before {
  content: "" !important; position: absolute !important;
  left: 12px !important; top: 12px !important;
  width: 20px !important; height: 20px !important;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' stroke='%233C3C78' fill='none' viewBox='0 0 24 24'><path stroke-width='2' d='M12 21s7-5.33 7-11a7 7 0 1 0-14 0c0 5.67 7 11 7 11Z'/><circle cx='12' cy='10' r='2.5' stroke-width='2'/></svg>") center/20px 20px no-repeat !important;
  opacity: .9 !important;
}

#copieur-info.info-default { color: #556270 !important; opacity: .9 !important; }
#copieur-info.info-selected { background: #eef7ff !important; border-color: rgba(var(--color-primary-rgb),.25) !important; }
#impression-system .cm-card-placeholder { font-weight: 600 !important; margin-bottom: 4px !important; }
#impression-system .cm-card-placeholder-sub { font-size: 13px !important; color: #6b7b86 !important; }

/* ==========================================================================
   FILTRE PRINT LOGS
   ========================================================================== */
body[id*="UserPrintLogs"] div.filter .body { display: none; }
body[id*="UserPrintLogs"] div.filter .body.cm-open { display: block; }

/* ==========================================================================
   HELP SUBMENU
   ========================================================================== */
.help-submenu { display: none !important; z-index: 9999 !important; }
.help-submenu.open { display: block !important; }

/* ==========================================================================
   DROPZONE — PAGE UPLOAD WIZARD
   ========================================================================== */
.wizard-body { max-width: 680px !important; margin: 0 auto !important; }

.wizard-body table.form {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 0 !important;
}

.wizard-body table.form tr.section {
  display: block !important;
  background: #fff !important;
  border-radius: 22px !important;
  box-shadow: 0 6px 24px rgba(var(--color-primary-rgb),.10) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}

.wizard-body table.form tr.section th.desc,
.wizard-body table.form tr.section td.fields {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.wizard-body table.form tr.section th.desc {
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%) !important;
  padding: 14px 22px !important;
}

.wizard-body table.form tr.section th.desc p {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

.wizard-body table.form tr.section td.fields { padding: 24px 22px !important; }

.wizard-body table.form tr:not(.section) {
  display: block !important;
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb),.06) 0%, rgba(var(--color-secondary-rgb),.08) 100%) !important;
  border: 1px solid rgba(var(--color-primary-rgb),.18) !important;
  border-radius: 14px !important;
  padding: 14px 20px !important;
  margin-bottom: 10px !important;
}

.wizard-body table.form tr:not(.section) th,
.wizard-body table.form tr:not(.section) td {
  display: block !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.wizard-body table.form tr:not(.section) th { margin-bottom: 4px !important; }

.wizard-body table.form tr:not(.section) th h2 {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #9ca3af !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  margin: 0 !important;
  display: block !important;
}

.wizard-body table.form tr:not(.section) td p {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.dropzone-div { border: none !important; background: transparent !important; padding: 0 !important; }

#dropzone-table {
  border: 2px dashed rgba(var(--color-primary-rgb),.35) !important;
  background: #f7faff !important;
  border-radius: 14px !important;
  padding: 28px 20px !important;
  text-align: center !important;
  max-width: 480px !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  transition: background-color .25s, border-color .25s !important;
  color: #555 !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
}

#dropzone-table:hover {
  background: #eef4ff !important;
  border-color: var(--color-primary) !important;
}

#dropzone-table i {
  width: 40px !important; height: 40px !important;
  background: url('/custom/img/upload-icon.png') no-repeat center !important;
  background-size: contain !important;
  display: block !important; opacity: .75 !important;
}

#dropzone-button { margin-top: 4px !important; }

#dropzone-button button {
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%) !important;
  color: #fff !important; padding: 9px 22px !important;
  border-radius: 999px !important; border: none !important;
  font-size: 13px !important; font-weight: 700 !important;
  cursor: pointer !important; width: auto !important;
  box-shadow: 0 3px 10px rgba(var(--color-primary-rgb),.20) !important;
  transition: transform .15s, box-shadow .15s !important;
}

#dropzone-button button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(var(--color-primary-rgb),.28) !important;
}

#upload {
  display: block !important; margin: 18px auto 6px !important;
  padding: 11px 30px !important; width: auto !important;
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%) !important;
  border-radius: 12px !important; font-size: 15px !important;
  font-weight: 700 !important; color: #fff !important;
  border: none !important; cursor: pointer !important;
  box-shadow: 0 3px 12px rgba(var(--color-primary-rgb),.22) !important;
  transition: transform .15s, box-shadow .15s !important;
  letter-spacing: .02em !important;
}

#upload:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(var(--color-primary-rgb),.28) !important;
}

#file-format-details {
  background: rgba(var(--color-primary-rgb),.04) !important;
  border: 1px solid rgba(var(--color-primary-rgb),.12) !important;
  border-radius: 12px !important; padding: 12px 18px !important;
  margin: 16px auto 0 !important; font-size: 12px !important;
  max-width: 520px !important; width: 100% !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  color: #6b7280 !important; box-sizing: border-box !important;
  display: block !important;
}

#file-format-details p { margin: 0 !important; line-height: 1.5 !important; white-space: normal !important; }

.dropzone-previews {
  display: flex !important; flex-wrap: wrap !important;
  gap: 12px !important; justify-content: flex-start !important;
  padding: 12px 0 4px !important;
}

.dz-preview.dz-file-preview {
  position: relative !important; width: 140px !important; height: 180px !important;
  background: #fff !important; border: 1px solid rgba(var(--color-primary-rgb),.18) !important;
  border-radius: 12px !important; box-shadow: 0 3px 10px rgba(var(--color-primary-rgb),.10) !important;
  overflow: hidden !important; display: flex !important; flex-direction: column !important;
  align-items: stretch !important; padding: 0 !important; margin: 0 !important;
  box-sizing: border-box !important; transition: box-shadow .2s !important;
}

.dz-preview.dz-file-preview:hover { box-shadow: 0 6px 18px rgba(var(--color-primary-rgb),.18) !important; }

.dz-preview .dz-details {
  width: 100% !important; flex: 1 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: #f3f4ff !important; border-radius: 0 !important;
  overflow: hidden !important; margin: 0 !important; flex-shrink: 0 !important;
}

.dz-preview .dz-details embed,
.dz-preview .dz-details .preview-thumb {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; pointer-events: none !important;
  border-radius: 0 !important; display: block !important;
}

.dz-preview .dz-details::before {
  content: "📄" !important; font-size: 36px !important;
  position: absolute !important; opacity: 0 !important;
}

.dz-preview .dz-filename {
  width: 100% !important; text-align: center !important;
  font-size: 11px !important; font-weight: 600 !important;
  color: #374151 !important; white-space: nowrap !important;
  overflow: hidden !important; text-overflow: ellipsis !important;
  padding: 5px 8px !important; background: #fff !important;
  flex-shrink: 0 !important; box-sizing: border-box !important;
}

.dz-preview .dz-progress {
  width: 90% !important; height: 3px !important;
  background: rgba(var(--color-primary-rgb),.12) !important; border-radius: 99px !important;
  overflow: hidden !important; margin-top: 4px !important;
}

.dz-preview .dz-progress .dz-upload {
  display: block !important; height: 100% !important;
  background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 65%, white)) !important;
  border-radius: 99px !important; transition: width .3s !important;
}

.dz-preview .dz-remove {
  display: block !important; position: absolute !important;
  top: 6px !important; right: 6px !important;
  width: 22px !important; height: 22px !important;
  background: rgba(239,68,68,.90) !important; color: #fff !important;
  border-radius: 50% !important; font-size: 11px !important;
  font-weight: 700 !important; text-align: center !important;
  line-height: 22px !important; text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
  transition: background .15s, transform .15s !important;
  z-index: 10 !important; overflow: hidden !important; text-indent: -9999px !important;
}

.dz-preview .dz-remove::after {
  content: "×" !important; position: absolute !important;
  inset: 0 !important; text-indent: 0 !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important; font-size: 15px !important; line-height: 22px !important;
}

.dz-preview .dz-remove:hover { background: #dc2626 !important; transform: scale(1.12) !important; }

.dz-preview .dz-success-mark,
.dz-preview .dz-error-mark { display: none !important; }
.dz-preview.dz-success .dz-success-mark { display: block !important; }
.dz-preview.dz-error .dz-error-mark { display: block !important; }

.dz-preview .dz-success-mark span,
.dz-preview .dz-error-mark span {
  position: absolute !important; top: 4px !important;
  left: 4px !important; font-size: 14px !important;
}

/* ==========================================================================
   OVERLAY USER INFO
   ========================================================================== */
body div[style*="background-color: rgba(0, 0, 0, 0.5)"] {
  border-radius: 12px !important; padding: 15px 18px !important;
  background-color: rgba(0,0,0,.75) !important;
  background: linear-gradient(135deg,rgba(0,0,0,.75),rgba(0,0,0,.45)) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.45) !important;
  margin-top: 15px !important; margin-bottom: 22px !important;
  display: flex !important; flex-direction: column !important; gap: 8px !important;
}

body div[style*="background-color: rgba(0, 0, 0, 0.5)"] span {
  font-size: 16px !important; font-weight: 600 !important; color: #fff !important;
}

/* ==========================================================================
   USER BOX
   ========================================================================== */
.cm-user-box {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0; margin-top: 10px; margin-bottom: 16px;
  padding: 0 10px; background: none; border-radius: 0; box-shadow: none;
}

.cm-user-box::after {
  content: ""; display: block; width: 100%; height: 1px;
  background: rgba(255,255,255,.12); margin-top: 10px;
}

.cm-user-row { display: flex; flex-direction: column; padding: 3px 0; font-size: var(--cm-user-font-size); min-height: unset; }
.cm-user-username { margin-bottom: 6px; }
.cm-user-username .cm-user-value { font-size: 16px !important; font-weight: 700 !important; color: var(--cm-user-value-color) !important; }
.cm-user-cartaprint .cm-user-value,
.cm-user-quota .cm-user-value { font-size: 14px !important; font-weight: 700 !important; color: var(--cm-user-value-color) !important; }
.cm-user-email { margin-top: 4px; font-size: 11px; line-height: 1.4; }
.cm-user-email .cm-user-value { word-break: break-all; font-size: 11px !important; opacity: .75; color: var(--cm-user-value-color) !important; }
.cm-user-label { color: var(--cm-user-label-color); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1px; }
.cm-user-value { color: var(--cm-user-value-color); font-size: 13px; font-weight: 500; }

/* ==========================================================================
   POLICE OPENDYSLEXIC
   ========================================================================== */
@font-face {
  font-family: "OpenDyslexic";
  src: url("/custom/fonts/OpenDyslexic/OpenDyslexic-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "OpenDyslexic";
  src: url("/custom/fonts/OpenDyslexic/OpenDyslexic-Italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "OpenDyslexic";
  src: url("/custom/fonts/OpenDyslexic/OpenDyslexic-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "OpenDyslexic";
  src: url("/custom/fonts/OpenDyslexic/OpenDyslexic-BoldItalic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ==========================================================================
   MODE DYSLEXIQUE
   ========================================================================== */
body.cm-dyslexic-on, body.cm-dyslexic-on * {
  font-family: "OpenDyslexic", Arial, sans-serif !important;
}

body.cm-dyslexic-on .cm-user-box { font-size: 12px !important; line-height: 1.2 !important; }
body.cm-dyslexic-on .cm-user-box .cm-user-label,
body.cm-dyslexic-on .cm-user-box .cm-user-value { font-size: 10px !important; line-height: 1.2 !important; }
body.cm-dyslexic-on .cm-footer-info,
body.cm-dyslexic-on [data-cm-footer] { font-size: 10px !important; line-height: 1.1 !important; }
html.cm-dyslexic .cm-user-value { font-size: 10px !important; line-height: 1.2 !important; word-break: break-word !important; }
html.cm-dyslexic div[style*="position: fixed"][style*="left: 10px"][style*="bottom: 10px"] { font-size: 10px !important; line-height: 1.2 !important; word-break: break-word !important; }
body.cm-dyslexic-on div[style*="position: fixed"] { font-size: 10px !important; line-height: 1.1 !important; }
body.cm-dyslexic-on div[style*="bottom: 50px"][style*="left: 10px"][style*="font-size: 11px"][style*="z-index: 1001"] { font-size: 6px !important; line-height: 1.1 !important; }
body.cm-dyslexic-on .wizard-steps { display: none !important; }

body.cm-dyslexic-on #cm-a11y-root,
body.cm-dyslexic-on #cm-a11y-root *,
body.cm-dyslexic-on #cm-a11y-root *::before,
body.cm-dyslexic-on #cm-a11y-root *::after {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 14px !important; line-height: 1.4 !important; font-weight: normal !important;
}

body.cm-dyslexic-on #cm-a11y-root .cm-a11y-h1            { font-size: 22px !important; font-weight: 900 !important; }
body.cm-dyslexic-on #cm-a11y-root .cm-a11y-section-title { font-size: 11px !important; font-weight: 700 !important; }
body.cm-dyslexic-on #cm-a11y-root .cm-a11y-row-title     { font-size: 14px !important; font-weight: 700 !important; }
body.cm-dyslexic-on #cm-a11y-root .cm-a11y-row-sub       { font-size: 12px !important; font-weight: normal !important; }
body.cm-dyslexic-on #cm-a11y-root .cm-a11y-tile-title    { font-size: 12px !important; line-height: 1.25 !important; font-weight: 700 !important; }
body.cm-dyslexic-on #cm-a11y-root .cm-a11y-aa            { font-size: 18px !important; font-weight: 900 !important; }
body.cm-dyslexic-on #cm-a11y-root .cm-a11y-scale-title   { font-size: 13px !important; font-weight: 700 !important; }
body.cm-dyslexic-on #cm-a11y-root .cm-a11y-reset         { font-size: 13px !important; font-weight: 700 !important; }
body.cm-dyslexic-on #cm-a11y-root .cm-a11y-select        { font-size: 13px !important; font-weight: normal !important; width: 130px !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; padding: 8px 10px !important; }
body.cm-dyslexic-on #cm-a11y-root .cm-a11y-switch        { width: 48px !important; min-width: 48px !important; height: 26px !important; min-height: 26px !important; padding: 2px !important; font-size: 0 !important; line-height: 0 !important; }
body.cm-dyslexic-on #cm-a11y-root .cm-a11y-thumb         { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; font-size: 0 !important; line-height: 0 !important; }
body.cm-dyslexic-on #cm-a11y-root .cm-a11y-switch[aria-pressed="true"] .cm-a11y-thumb,
body.cm-dyslexic-on #cm-a11y-root .cm-a11y-switch.is-on .cm-a11y-thumb { transform: translateX(22px) !important; }
body.cm-dyslexic-on #cm-a11y-root .cm-a11y-tile          { min-height: 80px !important; padding: 12px 10px !important; }
body.cm-dyslexic-on #cm-a11y-root .cm-a11y-tile-ico      { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; }
body.cm-dyslexic-on #cm-a11y-root .cm-a11y-scale-btn     { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; padding: 0 !important; font-size: 20px !important; font-weight: 900 !important; }
body.cm-dyslexic-on #cm-a11y-root .cm-a11y-scale-val     { height: 38px !important; line-height: 38px !important; font-size: 15px !important; font-weight: 800 !important; padding: 0 !important; }

/* ==========================================================================
   SECTION FORM — #cm-standard-print
   ========================================================================== */
#cm-standard-print {
  background: #fff !important; border: none !important;
  border-radius: 22px !important; box-shadow: 0 6px 24px rgba(var(--color-primary-rgb),.10) !important;
  padding: 0 !important; overflow: hidden !important; max-width: 680px !important;
}

#cm-standard-print > legend { display: none !important; }
#cm-standard-print .option-group { padding: 0 20px !important; margin: 0 !important; }
#cm-standard-print .option-group:first-of-type { padding-top: 20px !important; }
#cm-standard-print .option-group.mb-3 { padding-bottom: 20px !important; }

#cm-standard-print .option-group > label {
  display: block !important; font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  color: #6b7280 !important; margin: 14px 0 8px !important; padding: 0 !important;
  background: none !important; border: none !important; width: 100% !important; min-height: 0 !important;
}

#cm-standard-print .btn-group.btn-group-toggle {
  display: grid !important; grid-template-columns: 1fr 1fr !important;
  gap: 10px !important; width: 100% !important;
  background: none !important; border: none !important;
  border-radius: 0 !important; box-shadow: none !important;
}

#cm-standard-print .btn-group .btn {
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; justify-content: center !important;
  padding: 14px 14px 12px 14px !important; min-height: 72px !important;
  border-radius: 14px !important; border: 2px solid rgba(0,0,0,.10) !important;
  background: #fafbfc !important; cursor: pointer !important;
  position: relative !important; color: #111827 !important;
  white-space: normal !important; font-weight: normal !important;
  text-decoration: none !important; opacity: 1 !important; transform: none !important;
  box-shadow: none !important; width: 100% !important; text-align: left !important;
  transition: border-color .18s, background .18s, box-shadow .18s, transform .18s !important;
  filter: none !important; overflow: visible !important;
}

#cm-standard-print .btn-group .btn:hover {
  border-color: #FFF !important;
  background: rgba(var(--color-primary-rgb),.07) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(var(--color-primary-rgb),.12) !important;
  color: #111827 !important; opacity: 1 !important; filter: none !important;
}

#cm-standard-print .btn-group > input.btn-check + .btn { opacity: 1 !important; filter: none !important; }

#cm-standard-print .btn-check:checked + .btn {
  border-color: #FFF !important;
  background: rgba(var(--color-primary-rgb),.08) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb),.15) !important;
  color: #111827 !important; opacity: 1 !important;
  transform: none !important; filter: none !important; font-weight: normal !important;
}

#cm-standard-print .btn-check:checked + .btn::before {
  content: "✔" !important; position: absolute !important;
  top: 8px !important; right: 8px !important;
  width: 20px !important; height: 20px !important;
  border-radius: 50% !important; background: var(--color-secondary) !important;
  color: var(--color-primary) !important; font-size: 10px !important;
  font-weight: 900 !important; line-height: 20px !important;
  text-align: center !important; display: block !important;
  pointer-events: none !important; z-index: 2 !important;
}

#cm-standard-print .cm-check { display: none !important; }

#cm-standard-print .cm-btn2line {
  display: flex !important; flex-direction: column !important;
  gap: 3px !important; align-items: flex-start !important;
  white-space: normal !important; text-align: left !important;
  padding-right: 26px !important; width: 100% !important;
}

#cm-standard-print .cm-btn2line .cm-title {
  font-size: 14px !important; font-weight: 700 !important;
  color: #111827 !important; line-height: 1.2 !important; display: block !important;
}

#cm-standard-print .cm-btn2line .cm-desc {
  font-size: 11px !important; color: #6b7280 !important;
  line-height: 1.3 !important; font-weight: normal !important;
  opacity: 1 !important; display: block !important;
}

#cm-standard-print .option-group.mb-3 > div:first-child {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb),.07) 0%, rgba(var(--color-secondary-rgb),.10) 100%) !important;
  border: 1px solid rgba(var(--color-primary-rgb),.18) !important; border-radius: 14px !important;
  padding: 16px 18px !important; max-width: 100% !important;
  margin: 8px 0 12px !important; display: flex !important;
  align-items: center !important; justify-content: space-between !important;
  gap: 16px !important; box-shadow: none !important; text-align: left !important;
}

#cm-standard-print .option-group.mb-3 span[style*="1.3rem"] { display: none !important; }

#cm-standard-print .option-group.mb-3 div[style*="margin-bottom"] {
  flex-direction: column !important; align-items: flex-start !important;
  margin-bottom: 0 !important; gap: 2px !important;
}

#cm-standard-print label[for="nbCopies"] {
  font-size: 14px !important; font-weight: 700 !important;
  color: #111827 !important; display: block !important;
  padding: 0 !important; margin: 0 !important; background: none !important;
  border: none !important; width: auto !important; min-height: 0 !important;
  text-transform: none !important; letter-spacing: normal !important;
}

#cm-standard-print div[style*="margin-top:8px"],
#cm-standard-print div[style*="margin-top: 8px"] {
  font-size: 11px !important; color: #6b7280 !important; margin-top: 2px !important;
}

#cm-standard-print div[style*="gap:6px"],
#cm-standard-print div[style*="gap: 6px"] {
  display: flex !important; align-items: center !important; gap: 0 !important;
  border: 2px solid var(--color-primary) !important; border-radius: 12px !important;
  overflow: hidden !important; background: #fff !important;
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb),.10) !important; padding: 0 !important;
}

#cm-standard-print div[style*="gap:6px"] > span,
#cm-standard-print div[style*="gap: 6px"] > span { display: none !important; }

#cm-standard-print #nbCopies {
  width: 80px !important; text-align: center !important;
  font-size: 20px !important; font-weight: 800 !important;
  color: #111827 !important; border: none !important;
  background: transparent !important; height: 48px !important;
  padding: 0 8px !important; border-radius: 0 !important;
  box-shadow: none !important; outline: none !important;
  -moz-appearance: textfield !important;
}

#cm-standard-print #nbCopies:focus { outline: none !important; box-shadow: none !important; }

#cm-standard-print .buttons {
  display: flex !important; justify-content: flex-end !important;
  padding: 0 !important; margin: 0 !important;
}

#cm-standard-print input[type="submit"] {
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%) !important;
  color: #fff !important; border: none !important; border-radius: 12px !important;
  padding: 13px 28px !important; font-size: 15px !important; font-weight: 700 !important;
  cursor: pointer !important; box-shadow: 0 4px 16px rgba(var(--color-primary-rgb),.25) !important;
  white-space: nowrap !important; opacity: 1 !important; filter: none !important;
  transform: none !important; width: auto !important; float: none !important;
  transition: transform .15s, box-shadow .15s !important;
}

#cm-standard-print input[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(var(--color-primary-rgb),.30) !important;
  filter: none !important;
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%) !important;
}

@media (max-width: 540px) {
  #cm-standard-print .option-group { padding: 0 14px !important; }
  #cm-standard-print .btn-group.btn-group-toggle { gap: 8px !important; }
  #cm-standard-print .btn-group .btn { min-height: 64px !important; }
  #cm-standard-print .cm-btn2line .cm-title { font-size: 13px !important; }
  #cm-standard-print .cm-btn2line .cm-desc  { font-size: 10px !important; }
  #cm-standard-print .option-group.mb-3 > div:first-child {
    flex-direction: column !important; align-items: flex-start !important; gap: 10px !important;
  }
}

@media (max-width: 380px) {
  #cm-standard-print .btn-group.btn-group-toggle { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   RECAP + TARIF
   ========================================================================== */
#recap-selection {
  max-width: 680px !important; margin-left: auto !important; margin-right: auto !important;
  background: rgba(var(--color-primary-rgb),.06) !important; border: 1px solid rgba(var(--color-primary-rgb),.22) !important;
  border-radius: 14px !important; padding: 11px 18px !important; margin-bottom: 8px !important;
  display: flex !important; align-items: center !important; gap: 8px !important;
  justify-content: center !important; font-size: 14px !important; font-weight: 700 !important;
  color: var(--color-primary) !important; box-sizing: border-box !important;
}

#recap-selection > span:first-child { display: none !important; }

#recap-text { color: var(--color-primary) !important; font-size: 14px !important; font-weight: 700 !important; }

#tarif-estime {
  max-width: 680px !important; margin-left: auto !important; margin-right: auto !important;
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb),.07) 0%, rgba(var(--color-secondary-rgb),.10) 100%) !important;
  border: 1px solid rgba(var(--color-primary-rgb),.18) !important; border-radius: 14px !important;
  padding: 10px 20px !important; margin-bottom: 10px !important;
  text-align: center !important; font-size: 13px !important;
  color: #374151 !important; line-height: 1.7 !important; box-sizing: border-box !important;
}

#tarif-estime strong { color: var(--color-primary) !important; font-weight: 700 !important; }
#tarif-estime strong[style*="color:green"],
#tarif-estime strong[style*="color: green"] { color: #16a34a !important; }

/* ==========================================================================
   JOBS MIRROR
   ========================================================================== */
.jobs-mirror-wrap {
  max-width: 680px !important; margin: 10px auto 0 !important;
  background: #fff !important; border-radius: 22px !important;
  box-shadow: 0 6px 24px rgba(var(--color-primary-rgb),.10) !important;
  overflow: hidden !important; border: none !important;
}

.jobs-mirror-head {
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%) !important;
  padding: 16px 22px !important; display: flex !important;
  align-items: center !important; gap: 10px !important;
  color: #fff !important; font-size: 15px !important; font-weight: 700 !important;
}

.jobs-mirror-head > span:first-child { display: none !important; }

.jobs-mirror-head b { color: #fff !important; font-weight: 700 !important; font-size: 15px !important; }

.jobs-mirror-body { padding: 0 !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

.jobs-mirror-body table.web-print-jobs {
  width: 100% !important; border-collapse: collapse !important;
  font-size: 13px !important; table-layout: auto !important;
}

.jobs-mirror-body table.web-print-jobs th {
  background: rgba(var(--color-primary-rgb),.06) !important; color: #6b7280 !important;
  font-size: 10px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .07em !important;
  padding: 10px 14px !important; text-align: left !important;
  border-bottom: 1px solid rgba(var(--color-primary-rgb),.10) !important; white-space: nowrap !important;
}

.jobs-mirror-body .spinnerColumnHeader,
.jobs-mirror-body td:first-child { width: 28px !important; padding: 8px 6px !important; }

.jobs-mirror-body table.web-print-jobs td {
  padding: 10px 14px !important; border-bottom: 1px solid rgba(0,0,0,.06) !important;
  color: #374151 !important; vertical-align: middle !important;
}

.jobs-mirror-body table.web-print-jobs tr:last-child td { border-bottom: none !important; }

.jobs-mirror-body table.web-print-jobs tbody tr:hover td { background: rgba(var(--color-primary-rgb),.04) !important; }

.jobs-mirror-body table.web-print-jobs tbody:empty::after,
.jobs-mirror-body:empty::after {
  content: "Aucun document en attente" !important; display: block !important;
  text-align: center !important; padding: 24px !important;
  font-size: 13px !important; color: #9ca3af !important;
}

@media (max-width: 680px) {
  .jobs-mirror-wrap { margin: 10px 0 0 !important; border-radius: 16px !important; }
  .jobs-mirror-body table.web-print-jobs th,
  .jobs-mirror-body table.web-print-jobs td { padding: 8px 10px !important; font-size: 12px !important; }
}

/* ==========================================================================
   HEADER LAYOUT
   ========================================================================== */
.header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.header .controls { display: flex; align-items: center; margin-right: 10px; }
.header .btn.secondary { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; font-size: 14px; line-height: 1; white-space: nowrap; }
.header .btn.secondary[style] { margin-left: 0 !important; }
.cm-btn2line { display: inline-flex !important; flex-direction: column !important; gap: 2px !important; line-height: 1.15 !important; text-align: center !important; white-space: normal !important; }
.cm-btn2line .cm-title { display: block !important; font-weight: 700 !important; }
.cm-btn2line .cm-desc { display: block !important; font-size: .85em !important; opacity: .85 !important; }

/* ── Colonne #enviro ── */
#enviro.col {
  flex: 0 0 300px !important;
  min-width: 0 !important;
}

/* Titre de section enviro */
#enviro h2 {
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  letter-spacing: .2px !important;
  color: var(--color-primary) !important;
  margin: 0 0 14px !important;
}

/* Masquer l'élément sustainability (4e li) */
#enviro #enviroTable > li.sustainability { display: none !important; }

/* Masquer les images inline non-icônes */
#enviro #enviroTable > li img:not(.env-stats-icon) { display: none !important; }

/* Widget enviro */
#enviro .widget {
  background: #fff !important;
  border: 1px solid rgba(var(--color-primary-rgb),.08) !important;
  border-radius: 20px !important;
  padding: 0 !important;
  box-shadow: 0 4px 20px rgba(var(--color-primary-rgb),.08) !important;
  overflow: hidden !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

#enviro .widget:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(var(--color-primary-rgb),.13) !important;
}

/* Liste d'impact */
#enviro #enviroTable.env-impact-stats {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#enviro #enviroTable > li {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 18px !important;
  margin: 0 !important;
  font-size: 13px !important;
  color: rgba(17,24,39,.72) !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(var(--color-primary-rgb),.06) !important;
  transition: background .12s !important;
  line-height: 1.4 !important;
}

#enviro #enviroTable > li:hover {
  background: rgba(var(--color-primary-rgb),.03) !important;
}

#enviro #enviroTable > li:last-of-type {
  border-bottom: none !important;
}

/* Icône env */
#enviro #enviroTable .env-stats-icon {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  background: rgba(var(--color-primary-rgb),.07) !important;
  border-radius: 9px !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}

/* Date "Depuis…" */
#enviro #enviroTable > li.since-date {
  justify-content: flex-end !important;
  font-size: 11px !important;
  color: rgba(0,0,0,.38) !important;
  padding: 9px 18px !important;
  border-top: 1px solid rgba(var(--color-primary-rgb),.06) !important;
  border-bottom: none !important;
  background: rgba(var(--color-primary-rgb),.02) !important;
}

/* ── Boutons enviro — pleine largeur, empilés ─────────────────── */
/* Wrapper pour forcer le layout en colonne */
#enviro .widget {
  display: flex !important;
  flex-direction: column !important;
}

/* Cibler tous les <a> directs du widget enviro */
#enviro .widget > a,
#enviro .widget > a.btn,
#enviro .widget > a.btn.secondary,
#enviro .widget > a[href] {
  display: block !important;
  width: calc(100% - 28px) !important;
  margin: 0 14px 8px !important;
  margin-left: 14px !important; /* override inline style="margin-left:20px" */
  padding: 11px 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: background .15s, transform .15s !important;
  border: none !important;
  box-sizing: border-box !important;
  float: none !important;
  letter-spacing: .02em !important;
}

/* Premier bouton : petit espace au-dessus */
#enviro .widget > a:first-of-type,
#enviro .widget > a.btn:first-of-type {
  margin-top: 12px !important;
}

/* Dernier bouton : espace en bas */
#enviro .widget > a:last-of-type,
#enviro .widget > a.btn:last-of-type {
  margin-bottom: 14px !important;
}

#enviro .widget > a:hover,
#enviro .widget > a.btn:hover {
  background: color-mix(in srgb, var(--color-primary) 65%, white) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   ACCESSIBILITÉ — ISOLATION TOTALE DU PANEL
   ========================================================================== */
#cm-a11y-root,
#cm-a11y-root *,
#cm-a11y-root *::before,
#cm-a11y-root *::after {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 14px !important; line-height: 1.4 !important;
  box-sizing: border-box !important; letter-spacing: normal !important;
  word-spacing: normal !important; text-transform: none !important;
}

#cm-a11y-root { position: fixed !important; right: 20px !important; bottom: 30px !important; z-index: 999999 !important; }

#cm-a11y-fab {
  width: 52px !important; height: 52px !important;
  border-radius: 999px !important; border: none !important;
  background: #111827 !important; color: #fff !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important; box-shadow: 0 10px 26px rgba(0,0,0,.25) !important; padding: 0 !important;
}

#cm-a11y-fab svg, #cm-a11y-fab .cm-a11y-ico { width: 26px !important; height: 26px !important; flex-shrink: 0 !important; font-size: 0 !important; line-height: 0 !important; }

@media (max-width: 768px) {
  #cm-a11y-fab {
    position: static !important; width: 34px !important; height: 34px !important;
    border-radius: 50% !important; background: rgba(255,255,255,.18) !important;
    color: #fff !important; box-shadow: none !important;
    border: 1.5px solid rgba(255,255,255,.30) !important;
    flex-shrink: 0 !important; bottom: auto !important; right: auto !important;
    transform: none !important; z-index: auto !important;
  }
  #cm-a11y-fab svg, #cm-a11y-fab .cm-a11y-ico { width: 18px !important; height: 18px !important; }
  #cm-version-stamp { display: none !important; visibility: hidden !important; }
}

.cm-a11y-modal { position: fixed !important; inset: 0 !important; z-index: 999999 !important; display: none !important; }
.cm-a11y-modal.cm-open { display: block !important; }
.cm-a11y-backdrop { position: absolute !important; inset: 0 !important; background: rgba(0,0,0,.55) !important; backdrop-filter: blur(3px) !important; }

.cm-a11y-panel {
  position: absolute !important; right: 12px !important; bottom: 12px !important;
  width: min(380px, calc(100vw - 24px)) !important;
  max-height: min(88vh, 760px) !important;
  background: #fff !important; color: #111827 !important;
  border: 1px solid rgba(0,0,0,.12) !important; border-radius: 18px !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.55) !important;
  overflow: hidden !important; overflow-x: hidden !important;
  --cb-accent: var(--color-primary); --cb-soft: rgba(var(--color-primary-rgb),.10);
  --cb-ink: #111827; --cb-muted: rgba(17,24,39,.55); --cb-line: rgba(0,0,0,.08);
}

.cm-a11y-panel[data-cb="deuteranopia"] { --cb-accent: #2563eb; --cb-soft: rgba(37,99,235,.12); }
.cm-a11y-panel[data-cb="protanopia"]   { --cb-accent: #7c3aed; --cb-soft: rgba(124,58,237,.12); }
.cm-a11y-panel[data-cb="tritanopia"]   { --cb-accent: #0ea5e9; --cb-soft: rgba(14,165,233,.12); }
.cm-a11y-panel[data-cb="off"]          { --cb-accent: var(--color-primary); --cb-soft: rgba(var(--color-primary-rgb),.10); }

.cm-a11y-head { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 16px 16px 10px !important; gap: 8px !important; }
.cm-a11y-h1 { font-size: 22px !important; font-weight: 900 !important; line-height: 1.2 !important; color: #111827 !important; flex: 1 !important; margin: 0 !important; }
.cm-a11y-close { flex-shrink: 0 !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; border: none !important; background: rgba(0,0,0,.06) !important; color: #6b7280 !important; font-size: 20px !important; line-height: 1 !important; border-radius: 10px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; transition: background .15s, color .15s !important; }
.cm-a11y-close:hover { background: rgba(0,0,0,.12) !important; color: #111827 !important; }
.cm-a11y-body { padding: 6px 14px 14px !important; overflow: auto !important; overflow-x: hidden !important; max-height: calc(min(88vh, 760px) - 62px) !important; }
.cm-a11y-section-title { font-size: 11px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--cb-muted) !important; padding: 14px 2px 8px !important; margin: 0 !important; }
.cm-a11y-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 12px !important; border-radius: 14px !important; background: #f9fafb !important; border: 1px solid var(--cb-line) !important; margin-bottom: 8px !important; }
.cm-a11y-row-text { flex: 1 !important; min-width: 0 !important; }
.cm-a11y-row-title { font-size: 14px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #111827 !important; margin: 0 !important; overflow-wrap: anywhere !important; }
.cm-a11y-row-sub { font-size: 12px !important; line-height: 1.3 !important; color: rgba(17,24,39,.6) !important; margin: 2px 0 0 !important; overflow-wrap: anywhere !important; }
.cm-a11y-switch { flex-shrink: 0 !important; position: relative !important; width: 48px !important; min-width: 48px !important; height: 26px !important; min-height: 26px !important; border-radius: 999px !important; border: 2px solid rgba(0,0,0,.15) !important; background: rgba(0,0,0,.12) !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; padding: 2px !important; transition: background .2s, border-color .2s !important; font-size: 0 !important; line-height: 0 !important; }
.cm-a11y-switch .cm-a11y-thumb { display: block !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; border-radius: 999px !important; background: #fff !important; transform: translateX(0) !important; transition: transform .2s !important; box-shadow: 0 2px 6px rgba(0,0,0,.25) !important; font-size: 0 !important; line-height: 0 !important; }
.cm-a11y-switch[aria-pressed="true"], .cm-a11y-switch.is-on { background: var(--cb-accent) !important; border-color: var(--cb-accent) !important; }
.cm-a11y-switch[aria-pressed="true"] .cm-a11y-thumb, .cm-a11y-switch.is-on .cm-a11y-thumb { transform: translateX(22px) !important; }
.cm-a11y-scale { padding: 12px !important; border-radius: 14px !important; background: #f9fafb !important; border: 1px solid var(--cb-line) !important; margin: 0 0 10px !important; }
.cm-a11y-scale-title { font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #111827 !important; margin: 0 0 10px !important; }
.cm-a11y-scale-ctl { display: flex !important; align-items: center !important; gap: 8px !important; }
.cm-a11y-scale-btn { flex-shrink: 0 !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; border-radius: 10px !important; border: 1px solid rgba(0,0,0,.15) !important; background: #fff !important; color: #111827 !important; font-size: 20px !important; font-weight: 900 !important; line-height: 1 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; transition: background .15s !important; }
.cm-a11y-scale-btn:hover { background: rgba(0,0,0,.06) !important; }
.cm-a11y-scale-val { flex: 1 !important; text-align: center !important; font-size: 15px !important; font-weight: 800 !important; line-height: 38px !important; height: 38px !important; color: #111827 !important; border-radius: 10px !important; border: 1px solid rgba(0,0,0,.10) !important; background: #fff !important; padding: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.cm-a11y-tiles { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin: 0 0 10px !important; }
.cm-a11y-tile { position: relative !important; border-radius: 12px !important; padding: 12px 10px !important; border: 1px solid var(--cb-line) !important; background: #f9fafb !important; color: #111827 !important; cursor: pointer !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-height: 80px !important; overflow: hidden !important; user-select: none !important; transition: box-shadow .12s ease, background .12s ease, border-color .12s ease !important; }
.cm-a11y-tile:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08) !important; background: #f3f4f6 !important; }
.cm-a11y-tile[aria-pressed="true"], .cm-a11y-tile.is-on { border-color: var(--cb-accent) !important; background: color-mix(in srgb, var(--cb-accent) 8%, #fff) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-accent) 18%, transparent) !important; }
.cm-a11y-tile[aria-pressed="true"]::after { content: "✔" !important; position: absolute !important; top: 8px !important; right: 10px !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; color: var(--cb-accent) !important; }
.cm-a11y-tile:focus-visible { outline: 3px solid var(--cb-accent) !important; outline-offset: 2px !important; }
.cm-a11y-tile-ico { display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; border-radius: 10px !important; background: var(--cb-soft) !important; color: var(--cb-accent) !important; flex-shrink: 0 !important; }
.cm-a11y-tile-ico svg { width: 20px !important; height: 20px !important; font-size: 0 !important; }
.cm-a11y-tile-ico svg, .cm-a11y-tile-ico svg * { fill: currentColor !important; stroke: currentColor !important; }
.cm-a11y-aa { font-size: 18px !important; font-weight: 900 !important; line-height: 1 !important; color: var(--cb-accent) !important; letter-spacing: 0 !important; }
.cm-a11y-h { font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; border: 1px solid color-mix(in srgb, var(--cb-accent) 30%, transparent) !important; border-radius: 6px !important; padding: 2px 6px !important; color: var(--cb-accent) !important; background: color-mix(in srgb, var(--cb-accent) 10%, #fff) !important; }
.cm-a11y-tile-title { font-size: 12px !important; font-weight: 700 !important; line-height: 1.25 !important; text-align: center !important; color: #111827 !important; width: 100% !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: break-word !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; max-height: calc(2 * 1.25 * 12px) !important; }
.cm-a11y-row-select { align-items: flex-start !important; }
.cm-a11y-select { flex-shrink: 0 !important; width: 130px !important; min-width: 0 !important; border-radius: 10px !important; border: 1px solid rgba(0,0,0,.15) !important; background: #fff !important; color: #111827 !important; font-size: 13px !important; line-height: 1.3 !important; padding: 8px 10px !important; cursor: pointer !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.cm-a11y-reset { display: block !important; width: 100% !important; margin-top: 10px !important; padding: 11px 14px !important; border-radius: 12px !important; border: 1px solid rgba(0,0,0,.12) !important; background: #f9fafb !important; color: #374151 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important; cursor: pointer !important; text-align: center !important; transition: background .15s !important; }
.cm-a11y-reset:hover { background: color-mix(in srgb, var(--cb-accent) 8%, #fff) !important; border-color: color-mix(in srgb, var(--cb-accent) 40%, transparent) !important; color: var(--cb-accent) !important; }
.cm-skip-link { position: fixed !important; left: 12px !important; top: 12px !important; z-index: 999999 !important; padding: 10px 12px !important; border-radius: 12px !important; background: #111827 !important; color: #fff !important; border: 2px solid #60a5fa !important; transform: translateY(-140%) !important; transition: transform .15s ease !important; font-size: 14px !important; }
.cm-skip-link:focus { transform: translateY(0) !important; }
.cm-magnifier-box { position: fixed !important; z-index: 999999 !important; max-width: min(420px, 70vw) !important; padding: 10px 12px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,.18) !important; background: rgba(17,24,39,.92) !important; color: #fff !important; box-shadow: 0 18px 48px rgba(0,0,0,.45) !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.25 !important; pointer-events: none !important; opacity: 0 !important; transform: translateY(6px) !important; transition: opacity .12s ease, transform .12s ease !important; }
.cm-magnifier-box.cm-show { opacity: 1 !important; transform: translateY(0) !important; }
.cm-a11y-vtiles { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-top: 10px !important; }
.cm-a11y-vtile { border: 1px solid var(--cb-line) !important; background: #f9fafb !important; border-radius: 12px !important; padding: 12px !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; cursor: pointer !important; user-select: none !important; text-align: center !important; }
.cm-a11y-vtile-ico { display: flex !important; align-items: center !important; justify-content: center !important; height: 30px !important; font-size: 20px !important; line-height: 1 !important; }
.cm-a11y-vtile-title { font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #111827 !important; }
.cm-a11y-vtile.is-on { border-color: var(--cb-accent) !important; background: color-mix(in srgb, var(--cb-accent) 8%, #fff) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-accent) 14%, transparent) !important; }

/* ==========================================================================
   MODES ACCESSIBILITÉ
   ========================================================================== */
body.cm-readable-font, body.cm-readable-font * { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important; }
body.cm-highlight-links a { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 3px; }
body.cm-highlight-titles h1, body.cm-highlight-titles h2, body.cm-highlight-titles h3, body.cm-highlight-titles .wizard-heading { background: rgba(var(--color-primary-rgb),.12) !important; border-radius: 10px; padding: 6px 10px; display: inline-block; }
body.cm-epilepsy-safe, body.cm-epilepsy-safe *, body.cm-epilepsy-safe *::before, body.cm-epilepsy-safe *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
body.cm-epilepsy-safe, body.cm-epilepsy-safe html, body.cm-epilepsy-safe #container, body.cm-epilepsy-safe #content-wrapper, body.cm-epilepsy-safe #main, body.cm-epilepsy-safe #main-content, body.cm-epilepsy-safe #content { filter: none !important; backdrop-filter: none !important; transform: none !important; perspective: none !important; }
body.cm-epilepsy-safe *:hover, body.cm-epilepsy-safe *:active, body.cm-epilepsy-safe *:focus, body.cm-epilepsy-safe *:focus-visible { transform: none !important; }
body.cm-epilepsy-safe #cm-a11y-root { position: fixed !important; right: 20px !important; bottom: 30px !important; z-index: 999999 !important; transform: none !important; }
body.cm-epilepsy-safe #cm-a11y-fab { position: static !important; transform: none !important; }
body.cm-epilepsy-safe #cm-version-stamp { position: fixed !important; right: 12px !important; bottom: 8px !important; z-index: 9999 !important; transform: none !important; }
body.cm-epilepsy-safe div[style*="position: fixed"][style*="bottom: 50px"][style*="left: 10px"] { position: fixed !important; left: 10px !important; bottom: 50px !important; transform: none !important; }
div[style*="position: fixed"][style*="bottom: 50px"][style*="left: 10px"] + div[style*="position: fixed"][style*="bottom: 50px"][style*="left: 10px"] { display: none !important; }

body.cm-lowvision-on { font-size: 140% !important; line-height: 1.45 !important; }
body.cm-lowvision-on .btn, body.cm-lowvision-on button, body.cm-lowvision-on input[type="submit"], body.cm-lowvision-on input[type="button"], body.cm-lowvision-on .ui-button { font-size: 1.1em !important; padding: 12px 22px !important; border-radius: 10px !important; }
body.cm-lowvision-on input, body.cm-lowvision-on select, body.cm-lowvision-on textarea { font-size: 1.1em !important; padding: 10px 14px !important; }
body.cm-lowvision-on input[type="radio"], body.cm-lowvision-on input[type="checkbox"] { width: 20px !important; height: 20px !important; }
body.cm-lowvision-on .wizard-steps ul li { font-size: 1.05em !important; }
body.cm-lowvision-on .wizard-heading, body.cm-lowvision-on h1 { font-size: 1.6em !important; line-height: 1.2 !important; }
body.cm-lowvision-on h2 { font-size: 1.35em !important; line-height: 1.2 !important; }
body.cm-lowvision-on h3 { font-size: 1.2em !important; line-height: 1.25 !important; }
body.cm-lowvision-on h4 { font-size: 1.1em !important; line-height: 1.25 !important; }
body.cm-lowvision-on table.results th, body.cm-lowvision-on table.results td { font-size: 1.05em !important; padding: 10px !important; }
body.cm-lowvision-on .pagination a, body.cm-lowvision-on .pagination b { font-size: 1.1em !important; padding: 8px 14px !important; }
body.cm-lowvision-on :focus-visible { outline: 3px solid #000 !important; outline-offset: 2px; }
body.cm-lowvision-on .val, body.cm-lowvision-on .widget .val { font-size: 1.2em !important; font-weight: 700 !important; }
body.cm-lowvision-on a { text-decoration: underline !important; text-underline-offset: 2px; }

body.cm-lowvision-on #cm-a11y-root,
body.cm-lowvision-on #cm-a11y-root *,
body.cm-lowvision-on #cm-a11y-root *::before,
body.cm-lowvision-on #cm-a11y-root *::after {
  font-size: 14px !important; line-height: 1.4 !important; font-weight: normal !important;
  padding: initial !important; margin: initial !important;
  text-decoration: none !important; outline: none !important; border-radius: initial !important;
}

body.cm-lowvision-on #cm-a11y-root { position: fixed !important; right: 20px !important; bottom: 30px !important; z-index: 999999 !important; margin: 0 !important; padding: 0 !important; }
body.cm-lowvision-on #cm-a11y-fab { width: 52px !important; height: 52px !important; border-radius: 999px !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-panel  { border-radius: 18px !important; padding: 0 !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-head   { padding: 16px 16px 10px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-body   { padding: 6px 14px 14px !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-section-title { padding: 14px 2px 8px !important; margin: 0 !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-row    { padding: 12px !important; margin-bottom: 8px !important; border-radius: 14px !important; display: flex !important; align-items: center !important; gap: 12px !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-row-text { flex: 1 !important; min-width: 0 !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-scale  { padding: 12px !important; margin: 0 0 10px !important; border-radius: 14px !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-scale-ctl { display: flex !important; align-items: center !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-tiles  { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin: 0 0 10px !important; padding: 0 !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-tile   { padding: 12px 10px !important; margin: 0 !important; border-radius: 12px !important; min-height: 80px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-tile-ico { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; border-radius: 10px !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-row-select { align-items: flex-start !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-h1          { font-size: 22px !important; font-weight: 900 !important; margin: 0 !important; padding: 0 !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-row-title    { font-size: 14px !important; font-weight: 700 !important; margin: 0 !important; padding: 0 !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-row-sub      { font-size: 12px !important; font-weight: normal !important; margin: 2px 0 0 !important; padding: 0 !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-scale-title  { font-size: 13px !important; font-weight: 700 !important; margin: 0 0 10px !important; padding: 0 !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-tile-title   { font-size: 12px !important; font-weight: 700 !important; line-height: 1.25 !important; margin: 0 !important; padding: 0 !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-aa           { font-size: 18px !important; font-weight: 900 !important; padding: 0 !important; margin: 0 !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-reset        { font-size: 13px !important; font-weight: 700 !important; padding: 11px 14px !important; margin-top: 10px !important; border-radius: 12px !important; width: 100% !important; display: block !important; text-align: center !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-close        { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; font-size: 20px !important; font-weight: normal !important; padding: 0 !important; margin: 0 !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-switch       { width: 48px !important; min-width: 48px !important; height: 26px !important; min-height: 26px !important; padding: 2px !important; margin: 0 !important; border-radius: 999px !important; font-size: 0 !important; line-height: 0 !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-thumb        { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; border-radius: 999px !important; padding: 0 !important; margin: 0 !important; font-size: 0 !important; line-height: 0 !important; transform: translateX(0) !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-switch[aria-pressed="true"] .cm-a11y-thumb,
body.cm-lowvision-on #cm-a11y-root .cm-a11y-switch.is-on .cm-a11y-thumb { transform: translateX(22px) !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-scale-btn    { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; font-size: 20px !important; font-weight: 900 !important; padding: 0 !important; margin: 0 !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-scale-val    { height: 38px !important; line-height: 38px !important; font-size: 15px !important; font-weight: 800 !important; padding: 0 !important; margin: 0 !important; border-radius: 10px !important; }
body.cm-lowvision-on #cm-a11y-root .cm-a11y-select       { font-size: 13px !important; font-weight: normal !important; width: 130px !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; padding: 8px 10px !important; margin: 0 !important; border-radius: 10px !important; }

body.cm-cognitive, body.cm-cognitive #container, body.cm-cognitive #content-wrapper, body.cm-cognitive #main, body.cm-cognitive #content { opacity: 1 !important; filter: none !important; }
body.cm-cognitive .widget, body.cm-cognitive #enviro, body.cm-cognitive .help-submenu { display: none !important; }

body.cm-adhd *, body.cm-adhd *::before, body.cm-adhd *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
body.cm-adhd #enviro, body.cm-adhd .help-submenu, body.cm-adhd .cm-help-banner, body.cm-adhd img[alt=""], body.cm-adhd img.decorative, body.cm-adhd video, body.cm-adhd iframe { display: none !important; }
body.cm-adhd #main, body.cm-adhd #main-content, body.cm-adhd #content, body.cm-adhd #content-wrapper { filter: none !important; background: #ffffff !important; }
body.cm-adhd #content-wrapper { box-shadow: 0 0 0 9999px rgba(0,0,0,.08) inset !important; }
body.cm-adhd { line-height: 1.55 !important; }
body.cm-adhd p, body.cm-adhd li, body.cm-adhd label, body.cm-adhd .smallText, body.cm-adhd .help-block { font-size: 1.02em !important; color: rgba(17,24,39,.92) !important; }
body.cm-adhd :focus-visible { outline: 4px solid var(--color-primary) !important; outline-offset: 3px !important; border-radius: 10px !important; }
body.cm-adhd button, body.cm-adhd .btn, body.cm-adhd input[type="submit"], body.cm-adhd input[type="button"], body.cm-adhd select, body.cm-adhd input, body.cm-adhd textarea { transform: none !important; box-shadow: none !important; }
body.cm-adhd #nav ul { scrollbar-width: thin; }
body.cm-adhd #cm-a11y-root, body.cm-adhd #cm-a11y-root * { font-size: 14px !important; line-height: 1.4 !important; }
body.cm-adhd #cm-a11y-root .cm-a11y-switch { width: 48px !important; min-width: 48px !important; height: 26px !important; min-height: 26px !important; padding: 2px !important; transform: none !important; box-shadow: none !important; }
body.cm-adhd #cm-a11y-root .cm-a11y-thumb { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; transform: none !important; box-shadow: none !important; }
body.cm-adhd #cm-a11y-root .cm-a11y-switch[aria-pressed="true"] .cm-a11y-thumb,
body.cm-adhd #cm-a11y-root .cm-a11y-switch.is-on .cm-a11y-thumb { transform: translateX(22px) !important; }
body.cm-adhd #cm-a11y-root .cm-a11y-select { font-size: 13px !important; width: 130px !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; padding: 8px 10px !important; }

body.cm-blind :focus-visible { outline: 4px solid #fff !important; outline-offset: 3px !important; }

/* ==========================================================================
   FILTRES VISUELS
   ========================================================================== */
body, #container { filter: none !important; }
body.cm-vis-mono #header, body.cm-vis-mono #nav, body.cm-vis-mono #content-wrapper, body.cm-vis-mono #main, body.cm-vis-mono #main-content, body.cm-vis-mono #content { filter: grayscale(1) !important; }
body.cm-vis-highcontrast #header, body.cm-vis-highcontrast #nav, body.cm-vis-highcontrast #content-wrapper, body.cm-vis-highcontrast #main, body.cm-vis-highcontrast #main-content, body.cm-vis-highcontrast #content { filter: contrast(1.10) brightness(1.02) !important; }
body.cm-vis-highsat #header, body.cm-vis-highsat #nav, body.cm-vis-highsat #content-wrapper, body.cm-vis-highsat #main, body.cm-vis-highsat #main-content, body.cm-vis-highsat #content { filter: saturate(1.10) !important; }
body.cm-vis-lowsat #header, body.cm-vis-lowsat #nav, body.cm-vis-lowsat #content-wrapper, body.cm-vis-lowsat #main, body.cm-vis-lowsat #main-content, body.cm-vis-lowsat #content { filter: saturate(0.90) !important; }
body.cm-cb-deuteranopia, body.cm-cb-protanopia, body.cm-cb-tritanopia { filter: none !important; }
body.cm-cb-deuteranopia #container { filter: contrast(1.05) saturate(1.2) !important; }
body.cm-cb-protanopia  #container { filter: contrast(1.05) saturate(1.2) hue-rotate(-10deg) !important; }
body.cm-cb-tritanopia  #container { filter: contrast(1.05) saturate(1.2) hue-rotate(35deg) !important; }

/* ── Bandeau défilant ────────────────────────────────────────────────────── */
.cm-bandeau-textes {
  background: var(--color-primary) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  height: 40px !important;
  line-height: 40px !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,.18) !important;
  border-top: 2px solid var(--color-secondary) !important;
}

.cm-bandeau-textes a {
  color: #fff !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}

.cm-bandeau-textes div {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 24px !important;
}

.cm-bandeau-textes div::before {
  content: "💡" !important;
  font-style: normal !important;
  flex-shrink: 0 !important;
}

body.cm-cb-deuteranopia .cm-bandeau-textes { filter: contrast(1.05) saturate(1.2) !important; }
body.cm-cb-protanopia   .cm-bandeau-textes { filter: contrast(1.05) saturate(1.2) hue-rotate(-10deg) !important; }
body.cm-cb-tritanopia   .cm-bandeau-textes { filter: contrast(1.05) saturate(1.2) hue-rotate(35deg) !important; }
.user-info-footer, [data-cm-footer], .cm-footer-info { filter: none !important; }

/* ==========================================================================
   USER INFO FOOTER
   ========================================================================== */
@media (min-width: 769px) {
  #header .inserted-balance, #info .inserted-balance, #usernameButton .inserted-balance { display: none !important; }
  [data-drapeau-insere="true"] { display: flex !important; visibility: visible !important; position: fixed; top: 10px; right: 10px; z-index: 1000; }
  .user-info-footer { display: none !important; }

  #nav {
    display: flex !important;
    flex-direction: column !important;
  }

  #nav ul {
    flex: 1 !important;
    overflow-y: auto !important;
  }

.cm-user-box {
  flex-shrink: 0 !important;
  position: relative !important;
  top: 0 !important;
  margin-top: 16px !important;
  margin-bottom: 12px !important;
}
}
/* ==========================================================================
   RESPONSIVE — MOBILE (≤768px)
   ========================================================================== */
@media (max-width: 768px) {
  h1.wizard-heading { font-size: 15px !important; margin: 6px 0 4px !important; }
  #info, #info * { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; max-height: 0 !important; overflow: hidden !important; }
  .cm-user-box { display: none !important; }
  #mobile-menu { display: none !important; }
  body { padding-left: 0 !important; padding-bottom: 90px; }
  #container:before { display: none !important; }
  #header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 6px 10px !important; min-height: var(--header-h) !important; background: var(--color-primary) !important; margin: 0 !important; }
  #header-logo { display: flex !important; align-items: center !important; gap: 12px !important; padding: 0 !important; height: var(--header-h) !important; background: transparent !important; }
  #header-logo img, #logo img { display: inline-block !important; max-height: calc(var(--header-h) - 10px) !important; width: auto !important; height: auto !important; margin: 0 !important; }
  #logo { background: transparent !important; }
  #nav { position: sticky !important; top: 0 !important; left: 0 !important; width: 100% !important; height: auto !important; background: var(--color-nav) !important; z-index: 999 !important; padding: 4px 6px !important; margin: 0 !important; font-size: .95rem !important; line-height: 1.2 !important; }
  #nav ul { display: flex !important; align-items: center !important; gap: 10px !important; white-space: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; margin: 0 !important; padding: 0 !important; }
  #nav ul li { display: inline-flex !important; margin: 0 !important; padding: 0 !important; flex-direction: column !important; justify-content: flex-start !important; }
  #nav ul { align-items: flex-start !important; }
  #nav ul li a { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 10px !important; line-height: 1.1 !important; font-size: 13px !important; border-radius: 10px !important; white-space: nowrap !important; }
  #nav ul li a img { width: 20px !important; height: 20px !important; margin-right: 6px !important; flex: 0 0 auto !important; }
  #nav ul li a span { font-size: 13px !important; line-height: 1.1 !important; }
  #nav .cm-help-banner-wrap { display: none !important; }
  #nav ul::-webkit-scrollbar { height: 6px; }
  #nav ul::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 999px; }
  #nav a:before, #nav a::before, #nav a[href$="UserOptions"]:before, #nav a[href$="UserOptions"]::before { content: none !important; display: none !important; }
  [data-drapeau-insere="true"] { display: none !important; visibility: hidden !important; }

  /* Widgets en colonne sur mobile */
  div.auto { padding: 12px 10px 80px !important; }

  .flex.row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .flex.row .widget.stat-bal { grid-column: 1 !important; }

  .flex:not(.row) {
    flex-direction: column !important;
  }

  #enviro.col { flex: unset !important; width: 100% !important; }

  /* Barre footer mobile */
  .user-info-footer {
    display: flex !important; flex-direction: column !important;
    align-items: stretch !important; position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 9999 !important;
    background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%) !important;
    box-shadow: 0 -3px 14px rgba(0,0,0,.25) !important;
    gap: 0 !important; padding: 0 !important;
  }

  .user-info-footer .uif-left {
    display: flex !important; flex-direction: row !important;
    align-items: center !important; justify-content: space-between !important;
    padding: 8px 12px 6px !important; gap: 8px !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
  }

  .user-info-footer .uif-name { font-size: 14px !important; font-weight: 700 !important; color: #fff !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .user-info-footer .uif-balance { font-size: 11px !important; color: var(--color-secondary) !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

  .user-info-footer .uif-actions {
    display: grid !important; grid-template-columns: 1fr 1fr 1fr !important;
    align-items: center !important; padding: 6px 8px 8px !important; gap: 0 !important;
  }

  .user-info-footer .uif-actions > img#pre-flag { grid-column: 1 !important; justify-self: center !important; }

  .user-info-footer .uif-actions a,
  .user-info-footer .uif-actions #pre-flag-wrapper {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 4px !important; flex: 1 !important; cursor: pointer !important;
    text-decoration: none !important; padding: 6px 4px !important;
    border-radius: 10px !important; transition: background .15s !important;
  }

  .user-info-footer .uif-actions a:hover,
  .user-info-footer .uif-actions #pre-flag-wrapper:hover { background: rgba(255,255,255,.12) !important; }

  .user-info-footer .uif-actions a img { width: 26px !important; height: 26px !important; opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important; display: block !important; }

  .user-info-footer .uif-actions a[href*="UserOptions"]::after { content: "Mot de passe" !important; color: rgba(255,255,255,.80) !important; font-size: 10px !important; font-weight: 600 !important; text-align: center !important; display: block !important; line-height: 1 !important; }
  .user-info-footer .uif-actions a[href*="logoutLink"]::after,
  .user-info-footer .uif-actions a[href*="logout"]::after { content: "Déconnexion" !important; color: rgba(255,255,255,.80) !important; font-size: 10px !important; font-weight: 600 !important; text-align: center !important; display: block !important; line-height: 1 !important; }
  .user-info-footer .uif-actions #pre-flag-wrapper::after { content: "Langue" !important; color: rgba(255,255,255,.80) !important; font-size: 10px !important; font-weight: 600 !important; text-align: center !important; display: block !important; line-height: 1 !important; }

  img#pre-flag,
  #pre-flag-wrapper img#pre-flag,
  .user-info-footer img#pre-flag,
  .uif-actions img#pre-flag {
    width: 30px !important; height: 20px !important; min-width: 30px !important;
    min-height: 20px !important; max-width: 30px !important; max-height: 20px !important;
    object-fit: cover !important; border-radius: 4px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.30) !important; filter: none !important;
    display: block !important; visibility: visible !important; opacity: 1 !important;
    flex-shrink: 0 !important; padding: 0 !important; background-image: none !important;
    margin: 0 auto !important;
  }

  .user-info-footer .uif-actions > img#pre-flag { width: 28px !important; height: 20px !important; object-fit: cover !important; border-radius: 4px !important; filter: none !important; display: block !important; box-shadow: 0 1px 4px rgba(0,0,0,.3) !important; flex-shrink: 0 !important; margin: 0 auto !important; }

  .help-submenu { position: fixed !important; left: 8px !important; right: 8px !important; top: 70px !important; width: auto !important; max-height: 70vh !important; overflow: auto !important; border-radius: 10px !important; box-shadow: 0 6px 16px rgba(0,0,0,.2) !important; }
  #nav li.has-sub > .nav-submenu { max-height: 70vh !important; overflow: auto !important; }
  .cm-bandeau-textes { bottom: auto !important; top: 0 !important; height: 60px !important; line-height: 60px !important; padding: 0 !important; font-size: 15px !important; font-weight: 700 !important; }
  #content, #content-wrapper, #main-content, #main, body { padding-top: 0 !important; margin-top: 0 !important; }
  table.form td.fields { padding: 15px 10px; }
  #dropzone-table { max-width: 100%; width: 90%; padding: 24px 16px; }
  #file-format-details { width: 92%; margin-top: 18px; }
  #dropzone-table i { width: 38px; height: 38px; }
  div[style*="background-color: rgba(0, 0, 0, 0.5)"] { display: none !important; }
  #impression-system { margin: 0 10px 16px; }
  #activity h2 { font-size: 1.1rem; margin-left: 0; }
  #impression-system .cm-impression-layout { flex-direction: column !important; gap: 12px !important; }
  #impression-system .cm-impression-left, #impression-system .cm-impression-right { width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; }
}

/* ==========================================================================
   RESPONSIVE — TABLETTE (≤992px)
   ========================================================================== */
@media (max-width: 992px) {
  #header-logo img, #logo img { max-height: 46px !important; width: auto !important; }
  .results { display: block !important; width: 100% !important; overflow-x: auto !important; }
  .displayNameColumnHeader, .displayNameColumnValue { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; width: auto !important; }
  .dz-preview.dz-file-preview { width: 120px !important; height: 155px !important; }
  .dz-preview .dz-details { width: 100% !important; height: auto !important; }

  /* Grille widgets en 2 colonnes sur tablette */
  .flex.row {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .flex.row .widget.stat-bal { grid-column: 1 / -1 !important; }

  #enviro.col { flex: 0 0 260px !important; }
}

/* ==========================================================================
   RESPONSIVE — PETITS ÉCRANS (≤640px)
   ========================================================================== */
@media (max-width: 640px) {
  .flex.row { grid-template-columns: 1fr !important; gap: 12px !important; }
  .flex.row .widget.stat-bal { grid-column: 1 !important; }
  .flex.row .widget { margin: 0 !important; padding: 16px !important; border-radius: 16px !important; }

  #impression-system { padding: 0 !important; margin: 0 10px 16px !important; border-radius: 14px !important; box-shadow: 0 6px 16px rgba(0,0,0,.08) !important; }
  #impression-system .cm-impression-layout { display: flex !important; flex-direction: column !important; gap: 14px !important; }
  #impression-system .cm-impression-left { padding: 0 2px !important; }
  #impression-system label[for="copieur-select"] { display: block !important; margin: 0 0 8px 0 !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.25 !important; }
  #impression-system #copieur-select, #impression-system .cm-select { width: 100% !important; max-width: 100% !important; min-height: 46px !important; padding: 12px 14px !important; border-radius: 14px !important; font-size: 14px !important; }
  #impression-system .cm-helper-text { font-size: 12px !important; line-height: 1.35 !important; margin-top: 8px !important; opacity: .85 !important; }
  #impression-system .cm-card { width: 100% !important; border-radius: 18px !important; padding: 16px !important; box-shadow: 0 10px 24px rgba(0,0,0,.08) !important; overflow: hidden !important; }
  #impression-system .cm-card-empty { min-height: 220px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 8px !important; padding: 22px 16px !important; border: 1px dashed rgba(0,0,0,.12) !important; background: rgba(255,255,255,.9) !important; }
  #impression-system .cm-card-empty::before { content: "🖨" !important; display: block !important; font-size: 28px !important; line-height: 1 !important; margin-bottom: 6px !important; }
  #impression-system .cm-card-placeholder { font-size: 16px !important; font-weight: 900 !important; line-height: 1.2 !important; margin: 0 !important; }
  #impression-system .cm-card-placeholder-sub { font-size: 12.5px !important; line-height: 1.35 !important; opacity: .8 !important; margin: 0 !important; max-width: 28ch !important; }
  #impression-system .cm-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 12px !important; }
  #impression-system .cm-actions .cm-btn { width: 100% !important; text-align: center !important; padding: 12px !important; border-radius: 14px !important; }
  .cm-a11y-panel { left: 12px !important; right: 12px !important; bottom: 12px !important; width: auto !important; }
  .cm-a11y-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .cm-a11y-tile { padding: 12px !important; min-height: 92px !important; }
  .cm-a11y-tile-title { font-size: 12.5px !important; line-height: 1.15 !important; }
  .cm-a11y-row-select { flex-direction: column !important; align-items: stretch !important; }
  .cm-a11y-select { width: 100% !important; }
}

/* ==========================================================================
   RESPONSIVE — ≤576px / ≤480px / ≤400px / ≤380px / ≤360px
   ========================================================================== */
@media (max-width: 576px) { .dz-preview.dz-file-preview { width: 105px !important; height: 135px !important; } .dropzone-previews { gap: 8px !important; } }

@media (max-width: 480px) {
  #header-logo img, #logo img { max-height: 32px !important; }
  .btn, input[type="submit"], .ui-button, button { padding: 8px 12px !important; font-size: .95rem !important; }
  table.results th { padding: 6px .75rem !important; font-size: .75rem !important; }
  a[href="/app?service=action/1/UserWebPrint/0/$ActionLink"].btn { font-size: 1.1rem !important; padding: 8px 14px !important; border-radius: 8px !important; }
}

@media (max-width: 400px) { .dz-preview.dz-file-preview { width: 90px !important; height: 115px !important; } }

@media (max-width: 380px) {
  #nav { padding: 4px 6px !important; }
  #nav ul li a { padding: 6px 8px !important; font-size: .9rem !important; }
  .btn, input[type="submit"], .ui-button, button { padding: 7px 10px !important; font-size: .9rem !important; }
}

@media (max-width: 360px) { .flex.row { grid-template-columns: 1fr !important; } }

/* ==========================================================================
   RESPONSIVE — GRAND ÉCRAN (≥1200px)
   ========================================================================== */
@media (min-width: 1200px) {
  div.auto { max-width: 1100px !important; }
  .widget { padding: 24px 22px !important; }
  #enviro.col { flex: 0 0 320px !important; }
}

/* ==========================================================================
   RESPONSIVE — ENVIRONNEMENT ≥700px
   ========================================================================== */
@media (min-width: 700px) {
  #enviro .widget { position: relative; text-align: left; }
  #enviro .widget > a.btn.secondary { margin: 0 20px 16px !important; }
}

/* ==========================================================================
   ACCESSIBILITÉ — POSITIONS
   ========================================================================== */
@media (min-width: 900px) { #cm-accessibility { bottom: 35px !important; } }
@media (max-width: 767px) { .cm-help-banner { display: none !important; } #cm-accessibility { bottom: 40px !important; right: 10px !important; } }

/* ==========================================================================
   DARK MODE
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  .widget, #impression-system, #copieur-select, #copieur-info,
  #impression-system #copieur-select, #impression-system .cm-select,
  #impression-system #copieur-info, #impression-system .cm-card {
    background: #fff !important; color: #000 !important;
  }
  #copieur-select, #impression-system #copieur-select, #impression-system .cm-select { border-color: rgba(0,0,0,.16) !important; }
}
/* ==========================================================================
   BOUTON FILTRE TRANSACTIONS
   ========================================================================== */
a[href*="accTrans.filter.toggle"].btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%) !important;
  color: #fff !important;
  padding: 14px 32px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(var(--color-primary-rgb),.25) !important;
  transition: transform .15s, box-shadow .15s !important;
  letter-spacing: .02em !important;
  border: none !important;
  opacity: 1 !important;
  transform: none !important;
}

a[href*="accTrans.filter.toggle"].btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(var(--color-primary-rgb),.30) !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%) !important;
  text-decoration: none !important;
}

/* Filtre activé — fond primary foncé + bordure secondary */
a[href*="accTrans.filter.toggle"].btn:has(.filtered) {
  background: var(--color-primary) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(var(--color-primary-rgb),.35) !important;
  color: #fff !important;
}

a[href*="accTrans.filter.toggle"].btn:has(.filtered):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(var(--color-primary-rgb),.40) !important;
}

/* Forcer le span .filtered à hériter la couleur */
a[href*="accTrans.filter.toggle"].btn .filtered {
  background: none !important;
  color: inherit !important;
  border: none !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
/* ==========================================================================
   BOUTIQUE
   ========================================================================== */

.cm-boutique {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 20px 16px 32px !important;
  box-sizing: border-box !important;
}

/* ── Topbar ── */
.cm-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
}

.cm-topbar h1 {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: var(--color-primary) !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

.cm-topbar .cm-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%) !important;
  color: #fff !important;
  padding: 10px 22px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 16px rgba(var(--color-primary-rgb),.25) !important;
  transition: transform .15s, box-shadow .15s !important;
  border: none !important;
  letter-spacing: .02em !important;
}

.cm-topbar .cm-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(var(--color-primary-rgb),.30) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ── Bannière nouveau service — remplace le rouge hardcodé ── */
.cm-boutique > div[style*="linear-gradient"] {
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 18px rgba(var(--color-primary-rgb),.20) !important;
  padding: 18px 22px !important;
  margin-bottom: 18px !important;
}

/* ── Sous-titre ── */
.cm-sub {
  font-size: 13px !important;
  color: rgba(17,24,39,.55) !important;
  margin: 0 0 18px !important;
}

/* ── Grille produits ── */
.cm-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}

/* ── Carte produit ── */
.cm-card {
  background: #fff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(var(--color-primary-rgb),.08) !important;
  box-shadow: 0 2px 10px rgba(var(--color-primary-rgb),.06) !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: inherit !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
  position: relative !important;
}

.cm-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: var(--color-primary) !important;
  border-radius: 16px 16px 0 0 !important;
}

.cm-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 28px rgba(var(--color-primary-rgb),.14) !important;
  border-color: rgba(var(--color-primary-rgb),.18) !important;
  text-decoration: none !important;
  color: inherit !important;
}

.cm-img {
  width: 100% !important;
  aspect-ratio: 4/3 !important;
  overflow: hidden !important;
  background: rgba(var(--color-primary-rgb),.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cm-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .2s ease !important;
}

.cm-card:hover .cm-img img {
  transform: scale(1.04) !important;
}

.cm-body {
  padding: 12px 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
}

.cm-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  line-height: 1.25 !important;
}

.cm-price {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--color-secondary) !important;
  filter: brightness(.80) !important;
}

/* ── Responsive boutique ── */
@media (max-width: 768px) {
  .cm-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .cm-topbar h1 { font-size: 1.1rem !important; }
}

@media (max-width: 480px) {
  .cm-grid { grid-template-columns: 1fr !important; }
  .cm-topbar { flex-direction: column !important; align-items: flex-start !important; }
}

/* ── Fix double contour boutons mode impression ── */
#cm-standard-print .btn-outline-secondary,
#cm-standard-print .btn-outline-primary {
  background-color: transparent !important;
  border: none !important;
  opacity: 1 !important;
}

/* ==========================================================================
   HISTORIQUE — boutons sous-menu (style identique à besoin d'aide)
   ========================================================================== */
[data-cm-history="1"] [data-prepared] button {
  width: 100% !important;
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 5px !important;
  padding: 10px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: left !important;
  transition: background .15s !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

[data-cm-history="1"] [data-prepared] button:hover {
  background-color: color-mix(in srgb, var(--color-primary) 80%, white) !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* ── Fix : boutons Historique — forcer primary par-dessus le CSS global .btn ── */
[data-cm-history="1"] [data-prepared] button,
[data-cm-history="1"] [data-prepared] button:not(:hover) {
  background: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ── Historique sous-menu : boutons en primary comme besoin d'aide ── */
li[data-cm-history] [data-prepared] button {
  background: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  border-radius: 5px !important;
  padding: 10px !important;
  width: 100% !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* ── Historique : liens cm-history-btn style bouton primary ── */

/* ==========================================================================
   BOUTONS SOUS-MENUS NAV — historique identique à besoin d'aide
   ========================================================================== */
a.cm-history-btn,
a.cm-history-btn:link,
a.cm-history-btn:visited {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  border: 1px solid var(--color-secondary) !important;
  border-radius: 10px !important;
  padding: 10px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: normal !important;
  text-align: center !important;
  text-decoration: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  white-space: normal !important;
  letter-spacing: normal !important;
}

a.cm-history-btn:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
  opacity: .85 !important;
  text-decoration: none !important;
  transform: none !important;
  filter: none !important;
}

/* printLogs filter toggle — identique à accTrans */
a[href*="printLogs.filter.toggle"].btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%) !important;
  color: #fff !important;
  padding: 14px 32px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(var(--color-primary-rgb),.25) !important;
  transition: transform .15s, box-shadow .15s !important;
  letter-spacing: .02em !important;
  border: none !important;
  opacity: 1 !important;
  transform: none !important;
}

a[href*="printLogs.filter.toggle"].btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(var(--color-primary-rgb),.30) !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%) !important;
  text-decoration: none !important;
}

a[href*="printLogs.filter.toggle"].btn:has(.filtered) {
  background: var(--color-primary) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(var(--color-primary-rgb),.35) !important;
  color: #fff !important;
}

a[href*="printLogs.filter.toggle"].btn:has(.filtered):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(var(--color-primary-rgb),.40) !important;
}

a[href*="printLogs.filter.toggle"].btn .filtered {
  background: none !important;
  color: inherit !important;
  border: none !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}